@scalio-cloud/ui 0.32.0 → 0.34.0

package/README.md

@@ -151,6 +151,33 @@ Only actions that start something or lead away go there (Neu …, Import, Scanne
 Labels without "Neu"/"New": the + icon says it ("+ Kontakt", not "+ Neuer Kontakt").
 Filters, search, tabs and Speichern stay on the page. Apps with their own sidebar place `<ActionSlot />` themselves.
 
+## Page templates (React, from 0.33.0)
+
+UISPEC section 2 «Page templates» (`nav/N10` B): every page is an overview, a list, a detail or the settings
+(`SettingsLayout`, below). The templates draw the header, put `actions` into `<PageActions>` (sidebar slot from
+768px), and show `Loading` or `EmptyState` where the content would be.
+
+```jsx
+<OverviewPage title="Übersicht" kpis={[{ label: "Tenants", value: 3 }, { label: "Abweichungen", value: 2, tone: "error" }]}>
+  <Panel title="Letzte Scans" showAll={<Link to="/scans">Alle anzeigen</Link>}>…</Panel>
+</OverviewPage>
+<ListPage title="Kontakte" actions={<Button><Plus /> Kontakt</Button>} loading={loading} empty={!rows.length}
+  emptyText="Noch keine Kontakte." emptyAction={<Button>Ersten Kontakt erfassen</Button>}
+  toolbar={<Toolbar search={q} onSearch={setQ} filters={[{ id: "open", label: "Offen", active, count: 4 }]} onFilter={toggle} menu={<ExportMenu />} />}>
+  <Table>…</Table>
+</ListPage>
+<DetailPage title={t.name} status={{ tone: "ok", label: "Verbunden" }} back={<Link to="/tenants">Zurück</Link>}
+  pageActions={<Button><Upload /> Hochladen</Button>} actions={<Button>Freigeben</Button>}
+  tabs={[{ id: "info", label: "Info" }, { id: "log", label: "Protokoll" }]} tab={tab} onTab={setTab}
+  facts={[{ label: "Tenant-ID", value: t.id }]}>…</DetailPage>
+```
+
+On a detail page `back` and `pageActions` (start something, lead away) go to the sidebar slot; `actions` are the
+record's own actions (Freigeben, Stornieren) and stay in the header. `badge` takes an app's own status badge.
+
+Panels sit in a grid with one column, two from 1024px and three from 1536px; key facts of a detail page move to
+a right column from 1024px and leave no gap when there are none.
+
 ## Settings page (React)
 
 Every area of the settings has its own address (`/settings/<area>`); the app's router picks the area, the
@@ -376,6 +403,13 @@ lists `tenant` («Microsoft 365 über die Tenant-Verbindung», for apps that alr
 tenant, like Nexus), the block asks only for the sending mailbox and saves `graph: {sender}`; `tenantHint` replaces
 the default text about Mail.Send. Without `providers` the three providers stay as before.
 
+Since 0.34.0 (scalio-platform 0.12.0): when the backend lists `tenants` (an app connected to several tenants, like
+Citadel, Foundry and Pulse), the provider `tenant` also asks «Tenant, der sendet» and saves `graph: {sender, tenant_id}`
+(an empty list shows a hint to connect a tenant first; with one tenant it is preselected). When the settings report
+`send_rights`, the block «Senderecht in Exchange Online» shows the PowerShell from `GET /mail/send-rights` (Exchange
+«RBAC for Applications», only the sending mailbox) with a copy button; `mailApi` has `sendRights()`. The default
+`graphHint` and `tenantHint` now point to that script instead of the Entra permission Mail.Send.
+
 ## 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

@@ -754,6 +754,7 @@
 .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-script { margin: 0 0 0.75rem; padding: 0.75rem; max-height: 22rem; overflow: auto; border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--muted)); font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; line-height: 1.5; white-space: pre; }
 .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; }
@@ -777,3 +778,39 @@
 .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; }
+/* Page templates (pages.js, 0.33.0): Overview, List, Detail. Full width (ADR 0024), grids add columns. */
+.scalio-template { display: flex; flex-direction: column; gap: 1.5rem; }
+.scalio-template > .scalio-page-header { margin-bottom: 0; }
+.scalio-kpi-row { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+@media (min-width: 768px) { .scalio-kpi-row { gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); } }
+.scalio-panels { display: grid; gap: 1rem; grid-template-columns: 1fr; }
+@media (min-width: 1024px) { .scalio-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@media (min-width: 1536px) { .scalio-panels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
+.scalio-panel { display: flex; flex-direction: column; min-width: 0; border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--card)); color: hsl(var(--card-foreground)); }
+.scalio-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.875rem 1.25rem; border-bottom: 1px solid hsl(var(--border)); }
+.scalio-panel-title { margin: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: hsl(var(--muted-foreground)); }
+.scalio-panel-more, .scalio-panel-more a, .scalio-panel-more button { border: 0; background: none; padding: 0; font: inherit; font-size: 0.8125rem; font-weight: 600; color: hsl(var(--primary)); text-decoration: none; cursor: pointer; }
+.scalio-panel-more:hover, .scalio-panel-more a:hover, .scalio-panel-more button:hover { text-decoration: underline; }
+.scalio-panel-body { padding: 1rem 1.25rem; min-width: 0; }
+.scalio-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
+.scalio-toolbar-search { width: 100%; max-width: 20rem; margin: 0; }
+.scalio-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
+.scalio-chip {
+  display: inline-flex; align-items: center; gap: 0.375rem; height: 1.875rem; padding: 0 0.75rem; border: 1px solid hsl(var(--border));
+  border-radius: 999px; background: hsl(var(--background)); color: hsl(var(--muted-foreground)); font: inherit; font-size: 0.8125rem; cursor: pointer;
+}
+.scalio-chip:hover { color: hsl(var(--foreground)); border-color: hsl(var(--foreground) / 0.4); }
+.scalio-chip.is-active { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.12); color: hsl(var(--foreground)); font-weight: 600; }
+.scalio-chip:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
+.scalio-chip-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; }
+.scalio-toolbar-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
+.scalio-toolbar-menu { margin-left: auto; }
+.scalio-list-body { min-width: 0; overflow-x: auto; }
+.scalio-detail-body { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
+@media (min-width: 1024px) { .scalio-detail-body.has-facts { grid-template-columns: minmax(0, 1fr) 18rem; } }
+.scalio-detail-main { min-width: 0; }
+.scalio-facts { align-self: start; padding: 1rem 1.25rem; border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--card)); }
+.scalio-facts dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; margin: 0.75rem 0 0; font-size: 0.875rem; }
+.scalio-facts dt { color: hsl(var(--muted-foreground)); }
+.scalio-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
+.scalio-page-title .scalio-badge { vertical-align: middle; margin-left: 0.25rem; }

package/package.json

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

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

package/react/labels.js

@@ -385,6 +385,7 @@ const LABELS = {
     // States
     loading: "Wird geladen …",
     empty: "Noch keine Einträge.",
+    pages: { showAll: "Alle anzeigen", filter: "Filter", sections: "Bereiche" },
     sections: {
       account: "Konto",
       appearance: "Darstellung",
@@ -795,6 +796,7 @@ const LABELS = {
     },
     loading: "Loading …",
     empty: "No entries yet.",
+    pages: { showAll: "Show all", filter: "Filter", sections: "Sections" },
     sections: {
       account: "Account",
       appearance: "Appearance",

package/react/mail.js

@@ -27,8 +27,17 @@ const LABELS = {
     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.",
-    tenantHint: "Die App sendet mit ihrer bestehenden Verbindung zum Tenant, ohne zweites Secret. Die Verbindung braucht die Anwendungsberechtigung Mail.Send; beschränken Sie sie in Exchange Online mit «RBAC for Applications» auf das Postfach, das sendet.",
+    graphHint: "Das Senderecht geben Sie in Exchange Online mit «RBAC for Applications» nur für das Postfach, das sendet (Skript unten, nach dem Speichern); die App braucht dann keine Berechtigung Mail.Send in Entra ID.",
+    tenantHint: "Die App sendet mit ihrer bestehenden Verbindung zum Tenant, ohne zweites Secret. Das Senderecht geben Sie in Exchange Online nur für dieses Postfach (Skript unten, nach dem Speichern).",
+    tenantPick: "Tenant, der sendet",
+    tenantChoose: "Bitte wählen",
+    noTenants: "Noch kein Tenant verbunden. Verbinden Sie zuerst einen Tenant, dann wählen Sie ihn hier.",
+    rightsTitle: "Senderecht in Exchange Online",
+    rightsHint: "Damit die App nur als dieses Postfach senden darf: Führen Sie das Skript einmal als Exchange-Administrator in der Azure Cloud Shell (PowerShell) aus. Es nutzt «RBAC for Applications» und kann erneut laufen, auch nach einem Wechsel des Postfachs. Exchange übernimmt das Recht nach bis zu zwei Stunden; dann die Testmail senden.",
+    showScript: "Skript anzeigen",
+    copy: "Kopieren",
+    copied: "Skript kopiert",
+    copyFailed: "Kopieren nicht möglich. Bitte markieren und kopieren.",
     testMailbox: "Testinstanz: Mails gehen über das Testpostfach, die Einstellungen hier gelten nicht.",
     save: "Speichern",
     saved: "Gespeichert",
@@ -84,8 +93,17 @@ const LABELS = {
     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.",
-    tenantHint: "The app sends with its existing connection to the tenant, no second secret. The connection needs the application permission Mail.Send; limit it to the sending mailbox with RBAC for Applications in Exchange Online.",
+    graphHint: "Give the send right in Exchange Online with RBAC for Applications, only for the sending mailbox (script below, after saving); the app then needs no Mail.Send permission in Entra ID.",
+    tenantHint: "The app sends with its existing connection to the tenant, no second secret. Give the send right in Exchange Online for this mailbox only (script below, after saving).",
+    tenantPick: "Tenant that sends",
+    tenantChoose: "Please choose",
+    noTenants: "No tenant connected yet. Connect a tenant first, then choose it here.",
+    rightsTitle: "Send right in Exchange Online",
+    rightsHint: "So the app may send only as this mailbox: run the script once as an Exchange administrator in Azure Cloud Shell (PowerShell). It uses RBAC for Applications and can run again, also after changing the mailbox. Exchange applies the right within up to two hours; then send the test mail.",
+    showScript: "Show script",
+    copy: "Copy",
+    copied: "Script copied",
+    copyFailed: "Copying is not possible. Please select and copy.",
     testMailbox: "Test instance: mails go through the test mailbox, the settings here do not apply.",
     save: "Save",
     saved: "Saved",
@@ -166,6 +184,7 @@ function mailApi(api, base) {
     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),
+    sendRights: () => api.get(`${b}/send-rights`).then(data),
   };
 }
 
@@ -202,7 +221,9 @@ function select(id, value, options, onChange, extra) {
 // 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), tenantHint (the same for the provider «tenant»,
 // offered when the backend lists it in settings.providers, scalio-platform 0.10.0), children (more blocks after «Testmail», e.g. Beacon's
-// mail intake), outbox (false hides «Letzte Mails»).
+// mail intake), outbox (false hides «Letzte Mails»). With scalio-platform 0.12.0 the backend may list `tenants` (the app is
+// connected to several tenants: the administrator picks the one that sends) and `send_rights` (the block «Senderecht in
+// Exchange Online» shows the PowerShell from GET /mail/send-rights).
 function MailTransport(props) {
   const { client, lang } = props;
   const L = mailLabels(lang, props.labels);
@@ -213,6 +234,9 @@ function MailTransport(props) {
   const [testing, setTesting] = React.useState(false);
   const [testMsg, setTestMsg] = React.useState(null);
   const [rows, setRows] = React.useState([]);
+  const [script, setScript] = React.useState(null);
+  const [scriptBusy, setScriptBusy] = React.useState(false);
+  const [scriptMsg, setScriptMsg] = React.useState(null);
   const showOutbox = props.outbox !== false;
 
   const loadOutbox = React.useCallback(() => {
@@ -240,8 +264,12 @@ function MailTransport(props) {
       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;
-      if (form.provider === "tenant") body.graph = { sender: form.graph.sender };
+      if (form.provider === "tenant") {
+        body.graph = { sender: form.graph.sender };
+        if (Array.isArray(form.tenants)) body.graph.tenant_id = form.graph.tenant_id || "";
+      }
       setForm(await client.save(body));
+      setScript(null);
       m.ok(L.saved);
     } catch (err) {
       m.fail(err);
@@ -265,6 +293,30 @@ function MailTransport(props) {
     setTesting(false);
   };
 
+  const showScript = async () => {
+    setScriptBusy(true);
+    setScriptMsg(null);
+    try {
+      const r = client.sendRights ? await client.sendRights() : null;
+      setScript((r && r.script) || "");
+    } catch (err) {
+      setScriptMsg({ tone: "error", text: (props.formatError || errorText)(err) });
+    }
+    setScriptBusy(false);
+  };
+  const copyScript = async () => {
+    let text = L.copied, tone = "success";
+    try {
+      await navigator.clipboard.writeText(script);
+    } catch (e) {
+      text = L.copyFailed;
+      tone = "error";
+    }
+    if (props.notify) props.notify(text, tone);
+    else setScriptMsg({ tone: tone === "error" ? "error" : "ok", text });
+  };
+  const tenants = Array.isArray(form.tenants) ? form.tenants : null;
+
   const providers = (form.providers || ["off", "smtp", "graph"]).filter((id) => L.providers[id]);
   const transport = h(
     SettingsSection,
@@ -313,7 +365,17 @@ function MailTransport(props) {
         : null,
       form.provider === "tenant"
         ? h("div", { "data-testid": "mail-tenant" },
+            tenants && tenants.length === 0
+              ? h("div", { className: "scalio-notice is-info", "data-testid": "mail-no-tenants" }, L.noTenants)
+              : null,
             h("div", { className: "scalio-mail-grid" },
+              tenants && tenants.length > 0
+                ? h(Field, { id: "mail-tenant-pick", label: L.tenantPick },
+                    select("mail-tenant-pick",
+                      tenants.some((t) => t.id === form.graph.tenant_id) ? form.graph.tenant_id : (tenants.length === 1 ? tenants[0].id : ""),
+                      (tenants.length === 1 ? [] : [["", L.tenantChoose]]).concat(tenants.map((t) => [t.id, t.name || t.id])),
+                      part("graph", "tenant_id"), { disabled: busy }))
+                : null,
               h(Field, { id: "mail-tenant-sender", label: L.sender }, input("mail-tenant-sender", form.graph.sender, part("graph", "sender"),
                 { type: "email", maxLength: 254, placeholder: "it@example.com", disabled: busy }))),
             h("p", { className: "scalio-settings-help" }, props.tenantHint || L.tenantHint))
@@ -335,6 +397,23 @@ function MailTransport(props) {
     h(Notice, { msg: testMsg, testId: "mail-test-message" })
   );
 
+  const rights = form.send_rights && (form.provider === "graph" || form.provider === "tenant")
+    ? h(
+        SettingsSection,
+        { id: "mail-rights", title: L.rightsTitle, description: L.rightsHint, testId: "mail-rights" },
+        script
+          ? h(React.Fragment, null,
+              h("pre", { className: "scalio-mail-script", "data-testid": "mail-rights-script" }, script),
+              h("div", { className: "scalio-settings-section-footer" },
+                h("button", { type: "button", className: "scalio-btn", onClick: copyScript, "data-testid": "mail-rights-copy" },
+                  h(Icons.Copy, { className: "scalio-icon" }), L.copy)))
+          : h("div", { className: "scalio-settings-section-footer" },
+              h("button", { type: "button", className: "scalio-btn", onClick: showScript, disabled: scriptBusy, "data-testid": "mail-rights-show" },
+                L.showScript)),
+        h(Notice, { msg: scriptMsg, testId: "mail-rights-message" })
+      )
+    : null;
+
   const outbox = showOutbox
     ? h(
         SettingsSection,
@@ -355,7 +434,7 @@ function MailTransport(props) {
       )
     : null;
 
-  return h(React.Fragment, null, transport, testBlock, props.children || null, outbox);
+  return h(React.Fragment, null, transport, rights, testBlock, props.children || null, outbox);
 }
 
 // Props: client (mailApi), lang, labels, notify, formatError, editor (the app's rich text editor: a component with

package/react/pages.js

@@ -0,0 +1,191 @@
+"use strict";
+// Page templates (UISPEC section 2 «Page templates», nav/N10 B, from 0.33.0): Overview, List and Detail. The
+// Settings template is SettingsLayout (settings.js). A page passes its data; header, page actions in the sidebar
+// slot, grids, toolbar, loading and empty state look the same in every app.
+const React = require("react");
+const h = React.createElement;
+const { labelsFor } = require("./labels");
+const { KpiTile, EmptyState, Loading, StatusBadge } = require("./blocks");
+const { PageActions } = require("./actions");
+
+function cx() {
+  return Array.prototype.slice.call(arguments).filter(Boolean).join(" ");
+}
+
+// Same layout as PageHeader in index.js (not required from there: index.js requires this module).
+function Header({ title, subtitle, eyebrow, back, actions, extra }) {
+  const right = actions || extra ? h(React.Fragment, null, extra || null, actions ? h(PageActions, null, actions) : null) : null;
+  return h(
+    "div",
+    { className: "scalio-page-header", "data-testid": "page-header" },
+    h(
+      "div",
+      { className: "scalio-page-header-text" },
+      back ? h("div", { className: "scalio-page-back" }, back) : null,
+      eyebrow ? h("div", { className: "scalio-eyebrow" }, eyebrow) : null,
+      h("h1", { className: "scalio-page-title" }, title),
+      subtitle ? h("p", { className: "scalio-page-subtitle" }, subtitle) : null
+    ),
+    right ? h("div", { className: "scalio-page-actions" }, right) : null
+  );
+}
+
+// Box on an overview page: title, optional «Alle anzeigen» (link element or onShowAll), content or empty text.
+function Panel({ title, showAll, onShowAll, empty, emptyText, children, lang, labels, testId, className }) {
+  const L = labelsFor(lang, labels);
+  let more = null;
+  if (showAll) more = h("span", { className: "scalio-panel-more" }, showAll);
+  else if (onShowAll) more = h("button", { type: "button", className: "scalio-panel-more", onClick: onShowAll }, L.pages.showAll);
+  return h(
+    "section",
+    { className: cx("scalio-panel", className), "data-testid": testId },
+    title || more
+      ? h("div", { className: "scalio-panel-head" }, title ? h("h2", { className: "scalio-panel-title" }, title) : h("span"), more)
+      : null,
+    h("div", { className: "scalio-panel-body" }, empty ? h(EmptyState, { text: emptyText, lang, labels }) : children)
+  );
+}
+
+// Overview: header, row of KPI tiles (tone "error" = needs attention), panels in a grid that adds columns.
+function OverviewPage({ title, subtitle, actions, kpis, loading, children, lang, labels, testId }) {
+  const tiles = (kpis || []).filter(Boolean);
+  return h(
+    "div",
+    { className: "scalio-template is-overview", "data-testid": testId || "overview-page" },
+    h(Header, { title, subtitle, actions }),
+    loading ? h(Loading, { lang, labels }) : null,
+    tiles.length
+      ? h("div", { className: "scalio-kpi-row", "data-testid": "kpi-row" }, tiles.map((k, i) => h(KpiTile, Object.assign({ key: k.key || k.testId || i }, k))))
+      : null,
+    children ? h("div", { className: "scalio-panels" }, children) : null
+  );
+}
+
+// Toolbar of a list: search, filter chips, extra controls and a menu (import/export) on the right.
+function Toolbar({ search, onSearch, searchLabel, filters, onFilter, menu, children, lang, labels, testId }) {
+  const L = labelsFor(lang, labels);
+  const chips = (filters || []).filter(Boolean);
+  return h(
+    "div",
+    { className: "scalio-toolbar", "data-testid": testId || "list-toolbar" },
+    onSearch
+      ? h("input", {
+          type: "search",
+          className: "scalio-input scalio-toolbar-search",
+          value: search || "",
+          placeholder: searchLabel || L.search,
+          "aria-label": searchLabel || L.search,
+          onChange: (e) => onSearch(e.target.value),
+          "data-testid": "list-search",
+        })
+      : null,
+    chips.length
+      ? h(
+          "div",
+          { className: "scalio-chips", role: "group", "aria-label": L.pages.filter },
+          chips.map((f) =>
+            h(
+              "button",
+              {
+                key: f.id,
+                type: "button",
+                className: cx("scalio-chip", f.active && "is-active"),
+                "aria-pressed": f.active ? "true" : "false",
+                onClick: () => onFilter && onFilter(f.id),
+                "data-testid": `filter-${f.id}`,
+              },
+              f.label,
+              f.count != null ? h("span", { className: "scalio-chip-count" }, f.count) : null
+            )
+          )
+        )
+      : null,
+    children ? h("div", { className: "scalio-toolbar-extra" }, children) : null,
+    menu ? h("div", { className: "scalio-toolbar-menu" }, menu) : null
+  );
+}
+
+// List: header with the main action (sidebar slot from 768px), toolbar, then the table or the empty state with
+// the next step. `empty` true shows the empty state instead of children.
+function ListPage({ title, subtitle, actions, toolbar, loading, empty, emptyText, emptyAction, children, lang, labels, testId }) {
+  let body = children;
+  if (loading) body = h(Loading, { lang, labels });
+  else if (empty) body = h(EmptyState, { text: emptyText, lang, labels }, emptyAction || null);
+  return h(
+    "div",
+    { className: "scalio-template is-list", "data-testid": testId || "list-page" },
+    h(Header, { title, subtitle, actions }),
+    toolbar || null,
+    h("div", { className: "scalio-list-body" }, body)
+  );
+}
+
+// Key facts on the right of a detail page: [{label, value}] as a definition list.
+function KeyFacts({ items, title, testId }) {
+  const rows = (items || []).filter((i) => i && i.value != null && i.value !== "");
+  if (!rows.length) return null;
+  return h(
+    "aside",
+    { className: "scalio-facts", "data-testid": testId || "key-facts" },
+    title ? h("h2", { className: "scalio-panel-title" }, title) : null,
+    h(
+      "dl",
+      null,
+      rows.map((r, i) =>
+        h(React.Fragment, { key: r.key || i }, h("dt", null, r.label), h("dd", null, r.value))
+      )
+    )
+  );
+}
+
+// Detail: back link and actions that lead away (`pageActions`) in the sidebar slot from 768px, header with status
+// badge and the record's own actions (`actions`: Freigeben, Stornieren; they stay on the page), tabs, key facts on
+// the right. tabs: [{id, label}] with tab/onTab, or leave them out for one section. status: {tone, label}, or
+// `badge` for an app's own badge element.
+function DetailPage({ title, subtitle, back, pageActions, status, badge: ownBadge, actions, tabs, tab, onTab, facts, factsTitle, loading, children, lang, labels, testId }) {
+  const L = labelsFor(lang, labels);
+  const list = (tabs || []).filter(Boolean);
+  const badge = ownBadge || (status && status.label ? h(StatusBadge, { tone: status.tone, testId: "detail-status" }, status.label) : null);
+  const slot = back || pageActions
+    ? h(React.Fragment, null, back ? h("span", { className: "scalio-detail-back", "data-testid": "detail-back" }, back) : null, pageActions || null)
+    : null;
+  return h(
+    "div",
+    { className: "scalio-template is-detail", "data-testid": testId || "detail-page" },
+    h(Header, {
+      title: badge ? h(React.Fragment, null, title, " ", badge) : title,
+      subtitle,
+      actions: slot,
+      extra: actions || null,
+    }),
+    list.length
+      ? h(
+          "div",
+          { className: "scalio-tabs", role: "tablist", "aria-label": L.pages.sections },
+          list.map((t) =>
+            h(
+              "button",
+              {
+                key: t.id,
+                type: "button",
+                role: "tab",
+                className: cx("scalio-tab", t.id === tab && "is-active"),
+                "aria-selected": t.id === tab ? "true" : "false",
+                onClick: () => onTab && onTab(t.id),
+                "data-testid": t.testId || `tab-${t.id}`,
+              },
+              t.label
+            )
+          )
+        )
+      : null,
+    h(
+      "div",
+      { className: cx("scalio-detail-body", facts && facts.length && "has-facts") },
+      h("div", { className: "scalio-detail-main" }, loading ? h(Loading, { lang, labels }) : children),
+      h(KeyFacts, { items: facts, title: factsTitle })
+    )
+  );
+}
+
+module.exports = { OverviewPage, Panel, ListPage, Toolbar, DetailPage, KeyFacts };