@scalio-cloud/ui 0.12.0 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## 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

package/nav.css

@@ -48,6 +48,17 @@
 .scalio-subnav-item:hover { color: hsl(var(--foreground)); }
 .scalio-subnav-item.is-active { border-bottom-color: hsl(var(--primary)); color: hsl(var(--foreground)); font-weight: 600; }
 .scalio-subnav-item:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }
+/* In-page tabs (shadcn/Radix Tabs in the apps: TabsList = .scalio-tabs, TabsTrigger = .scalio-tab) look like the sub navigation. */
+.scalio-tabs { display: flex; align-items: flex-end; gap: 0.25rem; border-bottom: 1px solid hsl(var(--border)); overflow-x: auto; background: transparent; }
+.scalio-tab {
+  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; margin-bottom: -1px; white-space: nowrap; flex-shrink: 0;
+  border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; cursor: pointer;
+  font: inherit; font-size: 0.875rem; color: hsl(var(--muted-foreground));
+}
+.scalio-tab:hover { color: hsl(var(--foreground)); }
+.scalio-tab[data-state="active"], .scalio-tab.is-active { border-bottom-color: hsl(var(--primary)); color: hsl(var(--foreground)); font-weight: 600; }
+.scalio-tab:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }
+.scalio-tab:disabled { opacity: 0.5; pointer-events: none; }
 .scalio-nav-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
 .scalio-nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .scalio-nav-badge {
@@ -213,8 +224,32 @@
 .scalio-spinner { width: 0.875rem; height: 0.875rem; border: 2px solid hsl(var(--border)); border-top-color: hsl(var(--primary)); border-radius: 999px; animation: scalio-spin 0.8s linear infinite; }
 @keyframes scalio-spin { to { transform: rotate(360deg); } }
 @media (prefers-reduced-motion: reduce) { .scalio-spinner { animation: none; } }
-.scalio-notice { padding: 0.75rem 1rem; border: 1px solid; border-left-width: 3px; border-radius: 2px; font-size: 0.875rem; }
+.scalio-notice { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.75rem 1rem; border: 1px solid; border-left-width: 3px; border-radius: 2px; font-size: 0.875rem; }
+.scalio-notice-icon { flex-shrink: 0; margin-top: 0.125rem; }
+.scalio-notice-body { flex: 1; min-width: 0; }
 .scalio-notice-title { font-weight: 600; margin-bottom: 0.125rem; }
+.scalio-notice-actions { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
+.scalio-notice-action {
+  display: inline-flex; align-items: center; height: 2rem; padding: 0 0.75rem; border: 1px solid transparent; border-radius: 2px;
+  background: #002FA7; color: #fff; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
+  text-decoration: none; cursor: pointer; white-space: nowrap;
+}
+.scalio-notice-action:hover { background: #002480; }
+.scalio-notice-dismiss {
+  height: 2rem; padding: 0 0.5rem; border: 0; border-radius: 2px; background: none; color: inherit; font-size: 0.75rem; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; opacity: 0.75;
+}
+.scalio-notice-dismiss:hover { opacity: 1; }
+.scalio-notice-action:focus-visible, .scalio-notice-dismiss:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
+.scalio-notice.is-banner { align-items: center; border-width: 0 0 1px 3px; padding: 0.5rem 1rem; }
+@media (max-width: 639px) { .scalio-notice.is-banner { flex-wrap: wrap; } }
+/* Password sign-in choice (Konten und Rollen -> Anmeldung). */
+.scalio-policy { display: flex; flex-direction: column; gap: 0.5rem; }
+.scalio-policy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
+.scalio-policy-select { width: auto; min-width: 14rem; }
+.scalio-policy-help { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
+.scalio-policy-help.is-warn { color: #b45309; }
+.dark .scalio-policy-help.is-warn { color: #fbbf24; }
 .scalio-notice.is-info { border-color: hsl(var(--primary) / 0.35); background: hsl(var(--primary) / 0.06); }
 .scalio-notice.is-ok { border-color: rgb(22 163 74 / 0.4); background: rgb(22 163 74 / 0.08); }
 .scalio-notice.is-warn { border-color: rgb(217 119 6 / 0.45); background: rgb(217 119 6 / 0.1); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.12.0",
+  "version": "0.14.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/blocks.js

@@ -50,14 +50,41 @@ function Loading({ label, lang, labels, testId }) {
   );
 }
 
-// kind: info, ok, warn, error.
-function Notice({ kind, title, children, testId }) {
+// kind: info, ok, warn, error. One notice style for every hint in every app (ADR 0041 A6): eckig, icon, bold
+// title, one sentence, at most one main action plus "Später". banner: full width above the page (AppShell
+// prop banner), several stack, the most important first. action: { label, onClick | href, testId }.
+const NOTICE_ICONS = { info: "Info", ok: "Check", warn: "Alert", error: "Alert" };
+
+function Notice({ kind, title, children, action, onDismiss, dismissLabel, banner, icon, lang, labels, testId }) {
   const k = ["info", "ok", "warn", "error"].indexOf(kind) >= 0 ? kind : "info";
+  const L = labelsFor(lang, labels);
+  const Icons = require("./icons");
+  const Icon = icon === false ? null : icon || Icons[NOTICE_ICONS[k]];
+  const tid = testId || "notice";
+  const act = action
+    ? h(
+        action.href ? "a" : "button",
+        Object.assign(
+          { className: "scalio-notice-action", "data-testid": action.testId || `${tid}-action` },
+          action.href ? { href: action.href } : { type: "button", onClick: action.onClick }
+        ),
+        action.label
+      )
+    : null;
+  const dismiss = onDismiss
+    ? h("button", { type: "button", className: "scalio-notice-dismiss", onClick: onDismiss, "data-testid": `${tid}-dismiss` }, dismissLabel || L.later)
+    : null;
   return h(
     "div",
-    { className: cx("scalio-notice", `is-${k}`), role: k === "error" ? "alert" : "status", "data-testid": testId },
-    title ? h("div", { className: "scalio-notice-title" }, title) : null,
-    children
+    { className: cx("scalio-notice", `is-${k}`, banner && "is-banner"), role: k === "error" ? "alert" : "status", "data-testid": testId },
+    Icon ? h(Icon, { className: "scalio-icon scalio-notice-icon" }) : null,
+    h(
+      "div",
+      { className: "scalio-notice-body" },
+      title ? h("div", { className: "scalio-notice-title" }, title) : null,
+      children ? h("div", { className: "scalio-notice-text" }, children) : null
+    ),
+    act || dismiss ? h("div", { className: "scalio-notice-actions" }, act, dismiss) : null
   );
 }
 

package/react/icons.js

@@ -100,5 +100,21 @@ const History = icon([
 ]);
 const CornerDownLeft = icon([["path", { d: "M20 4v7a4 4 0 0 1-4 4H4" }], ["path", { d: "m9 10-5 5 5 5" }]]);
 
+const Users = icon([
+  ["path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }],
+  ["circle", { cx: 9, cy: 7, r: 4 }],
+  ["path", { d: "M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" }],
+]);
+const Settings = icon([
+  ["path", { d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" }],
+  ["circle", { cx: 12, cy: 12, r: 3 }],
+]);
+const ScrollText = icon([
+  ["path", { d: "M15 12h-5M15 8h-5M19 17V5a2 2 0 0 0-2-2H4" }],
+  ["path", { d: "M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3" }],
+]);
+const Info = icon([["circle", { cx: 12, cy: 12, r: 10 }], ["path", { d: "M12 16v-4M12 8h.01" }]]);
+
 module.exports = { Sun, Moon, Monitor, LifeBuoy, BookOpen, LogOut, Menu, Check, X, Search, ChevronDown, Fingerprint, FileStack, ShieldCheck, Hammer, Activity,
-  Smartphone, KeyRound, Trash, Copy, Puzzle, Plus, Alert, History, CornerDownLeft };
+  Smartphone, KeyRound, Trash, Copy, Puzzle, Plus, Alert, History, CornerDownLeft,
+  Users, Settings, ScrollText, Info };

package/react/index.js

@@ -279,7 +279,7 @@ function Brand({ brand }) {
     h(
       "span",
       { key: "t", className: "scalio-brand-text" },
-      h("span", { className: "scalio-brand-name" }, brand.name),
+      h("span", { className: "scalio-brand-line" }, h("span", { className: "scalio-brand-name" }, brand.name), brand.badges || null),
       brand.sub ? h("span", { className: "scalio-brand-sub" }, brand.sub) : null
     ),
   ];
@@ -375,6 +375,6 @@ module.exports = {
   TEST_IDS,
   initials,
 };
-Object.assign(module.exports, Nav, Blocks, require("./settings"), require("./support"), require("./security"), require("./license"), require("./palette"));
+Object.assign(module.exports, Nav, Blocks, require("./settings"), require("./support"), require("./security"), require("./license"), require("./palette"), require("./unify"));
 // After the exports above: auth.js uses LanguageToggle and ThemeToggle from this module.
 Object.assign(module.exports, require("./auth"));

package/react/labels.js

@@ -32,6 +32,36 @@ const LABELS = {
     mfaCode: "Code aus der Authenticator-App",
     // Navigation (same words in every app, see the glossary in UISPEC)
     overview: "Übersicht",
+    // UI alignment round 1 (ADR 0041)
+    later: "Später",
+    apiOffline: "API nicht erreichbar",
+    apiOfflineTip: "Die Anwendung erreicht ihr Backend nicht. Änderungen werden nicht gespeichert.",
+    edition: {
+      free: "Free",
+      freeTip: "Community-Edition mit Grenzen. Mit einem Lizenzschlüssel schalten Sie mehr frei.",
+      trial: "Test",
+      trialDays: "Test · {n} T",
+      trialTip: "Testphase für den Plan {plan}",
+      demo: "Demo",
+      demoTip: "Demo-Modus",
+      blocked: "Nur-Lesen",
+      blockedTip: "Diese Version ist neuer, als Ihre Lizenz erlaubt. Die App ist schreibgeschützt.",
+      grace: "Kulanz",
+      graceDays: "Kulanz {n} T",
+      graceTip: "Diese Version liegt nach Ihrem Lizenzdatum und wechselt nach der Kulanzzeit in den Nur-Lesen-Modus.",
+    },
+    accountGroups: { people: "Personen", access: "Rechte" },
+    accountTabs: { users: "Benutzer", roles: "Rollen", entra: "Microsoft Entra", signIn: "Anmeldung", organizations: "Organisationen" },
+    passwordPolicy: {
+      label: "Anmeldung mit Passwort",
+      local: "Erlaubt",
+      emergency: "Nur Notfall-Administrator",
+      off: "Aus (nur Microsoft)",
+      help: "Die Anmeldung mit Microsoft funktioniert immer. Ein Notfall-Administrator mit Passwort ist der Weg hinein, wenn Microsoft nicht erreichbar ist.",
+      needEmergency: "Markieren Sie zuerst unter «Benutzer» mindestens einen Administrator mit Passwort als Notfall-Administrator. Vorher bleibt nur «Erlaubt» wählbar.",
+      emergencyCount: "Notfall-Administratoren: {n}",
+      forced: "FORCE_LOCAL_LOGIN ist in der Umgebung gesetzt: Passwörter sind für alle erlaubt, bis die Variable entfernt wird.",
+    },
     administration: "Verwaltung",
     auditLog: "Protokoll",
     accounts: "Konten und Rollen",
@@ -231,6 +261,36 @@ const LABELS = {
     twoFactor: "Two-factor sign-in",
     mfaCode: "Code from the authenticator app",
     overview: "Overview",
+    // UI alignment round 1 (ADR 0041)
+    later: "Later",
+    apiOffline: "API unreachable",
+    apiOfflineTip: "The app cannot reach its backend. Changes are not saved.",
+    edition: {
+      free: "Free",
+      freeTip: "Community edition with limits. A license key unlocks more.",
+      trial: "Trial",
+      trialDays: "Trial · {n} d",
+      trialTip: "Trial of the {plan} plan",
+      demo: "Demo",
+      demoTip: "Demo mode",
+      blocked: "Read-only",
+      blockedTip: "This version is newer than your license permits. The app is read-only.",
+      grace: "Grace",
+      graceDays: "Grace {n} d",
+      graceTip: "This version is past your license date and turns read-only after the grace period.",
+    },
+    accountGroups: { people: "People", access: "Permissions" },
+    accountTabs: { users: "Users", roles: "Roles", entra: "Microsoft Entra", signIn: "Sign-in", organizations: "Organizations" },
+    passwordPolicy: {
+      label: "Password sign-in",
+      local: "Allowed",
+      emergency: "Emergency administrator only",
+      off: "Off (Microsoft only)",
+      help: "Signing in with Microsoft always works. An emergency administrator with a password is the way in when Microsoft is unreachable.",
+      needEmergency: "First mark at least one administrator with a password as emergency administrator under Users. Until then only Allowed can be chosen.",
+      emergencyCount: "Emergency administrators: {n}",
+      forced: "FORCE_LOCAL_LOGIN is set in the environment: passwords are allowed for everybody until it is removed.",
+    },
     administration: "Administration",
     auditLog: "Activity log",
     accounts: "Accounts and roles",
@@ -407,6 +467,9 @@ function labelsFor(lang, overrides) {
     settingsGroups: Object.assign({}, base.settingsGroups, o.settingsGroups),
     mfa: Object.assign({}, base.mfa, o.mfa),
     license: Object.assign({}, base.license, o.license),
+    edition: Object.assign({}, base.edition, o.edition),
+    accountTabs: Object.assign({}, base.accountTabs, o.accountTabs),
+    passwordPolicy: Object.assign({}, base.passwordPolicy, o.passwordPolicy),
   });
 }
 

package/react/nav.js

@@ -144,16 +144,23 @@ function Sidebar(props) {
 
 // Tabs as links on top of a page, for pages that belong together under one menu item
 // (e.g. Gruppen: Sicherheit, Verteiler, Microsoft 365, Teams). Each tab keeps its own address.
-function SubNav({ items, link, activePath, label, testId }) {
+// Tabs: as links (items with `to`, the router decides what is shown) or, with `onSelect`, as in-page tabs
+// (items with `id`, `value` is the active one). Both look the same (UISPEC: tabs like Nexus "Gruppen").
+function SubNav({ items, link, activePath, label, testId, value, onSelect }) {
   const visible = (items || []).filter((i) => i && !i.hidden);
   if (visible.length < 2) return null;
+  const buttons = typeof onSelect === "function";
   return h(
     "nav",
-    { className: "scalio-subnav", "aria-label": label || undefined, "data-testid": testId || "subnav" },
+    { className: "scalio-subnav", "aria-label": label || undefined, role: buttons ? "tablist" : undefined, "data-testid": testId || "subnav" },
     visible.map((item) => {
-      const tid = item.testId || `subnav-${slug(item.to)}`;
+      const tid = item.testId || `subnav-${buttons ? item.id : slug(item.to)}`;
       const cls = (active) => cx("scalio-subnav-item", active && "is-active");
       const content = [item.label, item.badge != null && item.badge !== false ? h("span", { key: "b", className: "scalio-nav-badge" }, item.badge) : null];
+      if (buttons) {
+        const active = item.id === value;
+        return h("button", { key: item.id, type: "button", role: "tab", "aria-selected": active, className: cls(active), onClick: () => onSelect(item.id), "data-testid": tid }, content);
+      }
       if (link) {
         return h(link, { key: item.to, to: item.to, end: item.end, className: ({ isActive }) => cls(isActive), "data-testid": tid }, content);
       }

package/react/settings.js

@@ -57,9 +57,11 @@ function findSetting(groups, id) {
 // link: the router's NavLink for the list (optional, without it plain links + onSelect).
 // minItems: below this many areas the sub-navigation is left out (Citadel, Foundry), default 3.
 // search: true (default, filters the list), false, or the app's own search element.
+// root: label of the page when it is not the settings page (e.g. "Konten und Rollen"): crumb and nav label.
 function SettingsLayout(props) {
-  const { groups, active, onSelect, link, lang, labels, title, hint, actions, children, minItems, search, testId } = props;
+  const { groups, active, onSelect, link, lang, labels, title, hint, actions, children, minItems, search, testId, root } = props;
   const L = labelsFor(lang, labels);
+  const rootLabel = root || L.settings;
   const visible = settingsGroups(groups, L);
   const [query, setQuery] = React.useState("");
   const current = findSetting(visible, active);
@@ -126,7 +128,7 @@ function SettingsLayout(props) {
   const nav = showNav
     ? h(
         "nav",
-        { className: "scalio-settings-nav", "aria-label": L.settings, "data-testid": "settings-nav" },
+        { className: "scalio-settings-nav", "aria-label": rootLabel, "data-testid": "settings-nav" },
         searchBox,
         // Phones: one select instead of the list.
         h(
@@ -162,7 +164,7 @@ function SettingsLayout(props) {
       )
     : null;
 
-  const heading = title || (current && current.item.label) || L.settings;
+  const heading = title || (current && current.item.label) || rootLabel;
   const sub = hint !== undefined ? hint : current && current.item.hint;
   return h(
     "div",
@@ -180,7 +182,7 @@ function SettingsLayout(props) {
           h(
             "div",
             { className: "scalio-eyebrow", "data-testid": "settings-crumb" },
-            current && showNav ? `${L.settings} › ${current.group.label}` : L.settings
+            current && showNav ? `${rootLabel} › ${current.group.label}` : rootLabel
           ),
           h("h1", { className: "scalio-page-title", "data-testid": "settings-title" }, heading),
           sub ? h("p", { className: "scalio-page-subtitle" }, sub) : null

package/react/unify.js

@@ -0,0 +1,221 @@
+"use strict";
+// UI alignment round 1 (scalio-docs ADR 0041): edition badges next to the brand, the fixed "Verwaltung"
+// section, the API status in the header, the tabs of "Konten und Rollen" and the password sign-in choice.
+const React = require("react");
+const h = React.createElement;
+const Icons = require("./icons");
+const { labelsFor } = require("./labels");
+
+function cx() {
+  return Array.prototype.slice.call(arguments).filter(Boolean).join(" ");
+}
+
+function fill(text, values) {
+  return String(text).replace(/\{(\w+)\}/g, (m, k) => (values[k] === undefined ? m : values[k]));
+}
+
+function daysUntil(date, now) {
+  if (!date) return null;
+  const end = new Date(String(date).length <= 10 ? `${date}T23:59:59` : date);
+  if (isNaN(end.getTime())) return null;
+  return Math.max(0, Math.ceil((end.getTime() - (now || new Date()).getTime()) / 86400000));
+}
+
+// Badges next to the product name, from the license state of scalio-license (public summary or admin view):
+// { edition, edition_name, trial, exp, build_blocked, build_grace, build_grace_until }.
+// opts: demo (demo instance), admin (build coverage is shown to administrators only), lang, labels, now.
+// Returns [{ key, label, tone, title, testId }] in a fixed order: demo or edition, trial, coverage.
+function editionBadges(lic, opts) {
+  const o = opts || {};
+  const L = labelsFor(o.lang, o.labels).edition;
+  const out = [];
+  if (o.demo) {
+    out.push({ key: "demo", label: L.demo, tone: "running", title: L.demoTip, testId: "demo-badge" });
+    return out;
+  }
+  if (!lic || lic.error || !lic.edition || lic.edition === "unenforced") return out;
+  if (lic.edition === "community") {
+    out.push({ key: "edition", label: L.free, tone: "warn", title: L.freeTip, testId: "edition-badge" });
+  } else {
+    out.push({ key: "edition", label: String(lic.edition), tone: "ok", title: lic.customer || lic.edition_name || "", testId: "edition-badge" });
+  }
+  if (lic.trial && lic.edition !== "community") {
+    const days = daysUntil(lic.exp, o.now);
+    out.push({
+      key: "trial",
+      label: days === null ? L.trial : fill(L.trialDays, { n: days }),
+      tone: "running",
+      title: fill(L.trialTip, { plan: lic.edition_name || lic.edition }),
+      testId: "trial-badge",
+    });
+  }
+  if (o.admin && lic.build_blocked) {
+    out.push({ key: "coverage", label: L.blocked, tone: "error", title: L.blockedTip, testId: "coverage-badge" });
+  } else if (o.admin && lic.build_grace) {
+    const days = daysUntil(lic.build_grace_until, o.now);
+    out.push({
+      key: "coverage",
+      label: days === null ? L.grace : fill(L.graceDays, { n: days }),
+      tone: "warn",
+      title: L.graceTip,
+      testId: "coverage-badge",
+    });
+  }
+  return out;
+}
+
+function EditionBadges(props) {
+  const items = props.items || editionBadges(props.license, props);
+  if (!items.length) return null;
+  return h(
+    "span",
+    { className: "scalio-edition-badges", "data-testid": props.testId || "edition-badges" },
+    items.map((b) =>
+      h("span", { key: b.key, className: cx("scalio-badge", "scalio-edition-badge", `is-${b.tone}`), title: b.title || undefined, "data-testid": b.testId }, b.label)
+    )
+  );
+}
+
+// The "Verwaltung" section of the sidebar: always Protokoll, Konten und Rollen, Einstellungen, in this order,
+// with the same icons and words in every app. Each entry: true (shown), false (hidden) or an object that
+// overrides fields of the item (to, testId, hidden, badge). Routes default to /audit, /accounts, /settings.
+function adminSection(opts) {
+  const o = opts || {};
+  const L = labelsFor(o.lang, o.labels);
+  const base = [
+    ["audit", { to: "/audit", label: L.auditLog, icon: Icons.ScrollText, testId: "nav-audit" }],
+    ["accounts", { to: "/accounts", label: L.accounts, icon: Icons.Users, testId: "nav-accounts" }],
+    ["settings", { to: "/settings", label: L.settings, icon: Icons.Settings, testId: "nav-settings" }],
+  ];
+  const items = [];
+  base.forEach(([key, item]) => {
+    const v = o[key];
+    if (v === undefined || v === false || v === null) return;
+    items.push(Object.assign({}, item, v === true ? {} : v));
+  });
+  return { id: "admin", label: L.administration, items };
+}
+
+// Header status: nothing while the API answers, a red "API nicht erreichbar" when it does not.
+// check() returns a promise (e.g. () => api.get("/health")). Checks every intervalMs (default 30 s).
+function useApiStatus(check, intervalMs) {
+  const [online, setOnline] = React.useState(null);
+  React.useEffect(() => {
+    if (!check) return undefined;
+    let alive = true;
+    const ping = () =>
+      Promise.resolve()
+        .then(check)
+        .then(() => alive && setOnline(true), () => alive && setOnline(false));
+    ping();
+    const id = setInterval(ping, intervalMs || 30000);
+    return () => {
+      alive = false;
+      clearInterval(id);
+    };
+  }, [check, intervalMs]);
+  return online;
+}
+
+function ApiStatus({ online, check, intervalMs, lang, labels, testId }) {
+  const own = useApiStatus(online === undefined ? check : null, intervalMs);
+  const state = online === undefined ? own : online;
+  if (state !== false) return null;
+  const L = labelsFor(lang, labels);
+  return h(
+    "span",
+    { className: "scalio-badge is-error scalio-api-status", role: "status", title: L.apiOfflineTip, "data-testid": testId || "api-status" },
+    h(Icons.Alert, { className: "scalio-icon" }),
+    L.apiOffline
+  );
+}
+
+// Fixed tabs of "Konten und Rollen" (same order in every app). show: { organizations: true } adds the
+// Foundry tab for the platform owner. Returns [{ id, label }] for the app's own tab component.
+function accountTabs(opts) {
+  const o = opts || {};
+  const L = labelsFor(o.lang, o.labels).accountTabs;
+  const show = Object.assign({ users: true, roles: true, entra: true, signIn: true, organizations: false }, o.show);
+  return ["users", "roles", "entra", "signIn", "organizations"].filter((id) => show[id]).map((id) => ({ id, label: L[id] }));
+}
+
+// Konten und Rollen in the structure of the settings page (SettingsLayout, UISPEC): areas on the left in groups,
+// one address per area (<base>/users, /organizations, /roles, /entra, /sign-in).
+const ACCOUNT_AREAS = { users: "users", organizations: "organizations", roles: "roles", entra: "entra", signIn: "sign-in" };
+
+function accountGroups(opts) {
+  const o = opts || {};
+  const all = labelsFor(o.lang, o.labels);
+  const L = all.accountTabs;
+  const base = (o.base || "/accounts").replace(/\/$/, "");
+  const show = Object.assign({ users: true, roles: true, entra: true, signIn: true, organizations: false }, o.show);
+  const item = (id) => ({ id, to: `${base}/${ACCOUNT_AREAS[id]}`, label: L[id], hidden: !show[id] });
+  return [
+    { id: "people", label: all.accountGroups.people, items: [item("users"), item("organizations")] },
+    { id: "access", label: all.accountGroups.access, items: [item("roles"), item("entra")] },
+    { id: "security", label: all.settingsGroups.security, items: [item("signIn")] },
+  ].map((g) => Object.assign({}, g, { items: g.items.filter((i) => !i.hidden) })).filter((g) => g.items.length);
+}
+
+// Area id from the address part (/accounts/sign-in -> signIn); unknown -> users.
+function accountArea(part) {
+  for (const id of Object.keys(ACCOUNT_AREAS)) if (part === id || part === ACCOUNT_AREAS[id]) return id;
+  return "users";
+}
+
+// Password sign-in: "local" (everybody), "emergency" (only emergency administrators), "off" (Microsoft only).
+// "emergency" and "off" need at least one emergency administrator; without one they stay disabled.
+const PASSWORD_POLICIES = ["local", "emergency", "off"];
+
+function policyAllowed(value, emergencyCount) {
+  return value === "local" || (emergencyCount || 0) > 0;
+}
+
+function PasswordPolicySelect({ value, emergencyCount, onChange, disabled, forced, lang, labels, testId }) {
+  const L = labelsFor(lang, labels).passwordPolicy;
+  const options = PASSWORD_POLICIES.map((p) =>
+    h("option", { key: p, value: p, disabled: !policyAllowed(p, emergencyCount) && p !== value }, L[p])
+  );
+  return h(
+    "div",
+    { className: "scalio-policy", "data-testid": testId || "password-policy" },
+    h(
+      "label",
+      { className: "scalio-policy-row" },
+      h("span", { className: "scalio-eyebrow" }, L.label),
+      h(
+        "select",
+        {
+          className: "scalio-input scalio-policy-select",
+          value: value || "local",
+          disabled: disabled || forced,
+          onChange: (e) => onChange && onChange(e.target.value),
+          "data-testid": `${testId || "password-policy"}-select`,
+        },
+        options
+      )
+    ),
+    h("p", { className: "scalio-policy-help" }, L.help),
+    forced ? h("p", { className: "scalio-policy-help is-warn", "data-testid": `${testId || "password-policy"}-forced` }, L.forced) : null,
+    !forced && !(emergencyCount > 0)
+      ? h("p", { className: "scalio-policy-help is-warn", "data-testid": `${testId || "password-policy"}-need-emergency` }, L.needEmergency)
+      : null,
+    !forced && emergencyCount > 0
+      ? h("p", { className: "scalio-policy-help", "data-testid": `${testId || "password-policy"}-count` }, fill(L.emergencyCount, { n: emergencyCount }))
+      : null
+  );
+}
+
+module.exports = {
+  editionBadges,
+  EditionBadges,
+  adminSection,
+  useApiStatus,
+  ApiStatus,
+  accountTabs,
+  accountGroups,
+  accountArea,
+  PASSWORD_POLICIES,
+  policyAllowed,
+  PasswordPolicySelect,
+};

package/shell.css

@@ -29,6 +29,12 @@
 }
 .scalio-brand-text { display: none; flex-direction: column; line-height: 1.2; }
 @media (min-width: 1024px) { .scalio-brand-text { display: flex; } }
+/* Product name and its edition badges on one line (ADR 0041 A1). */
+.scalio-brand-line { display: flex; align-items: center; gap: 0.375rem; }
+.scalio-edition-badges { display: inline-flex; align-items: center; gap: 0.25rem; }
+.scalio-edition-badge { font-size: 9px; padding: 0.0625rem 0.3125rem; }
+.scalio-api-status { gap: 0.25rem; }
+.scalio-api-status .scalio-icon { width: 12px; height: 12px; }
 .scalio-brand-name { font-family: 'Chivo', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; font-size: 0.875rem; }
 .scalio-brand-sub, .scalio-eyebrow, .scalio-menu-role {
   font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: hsl(var(--muted-foreground));