@scalio-cloud/ui 0.4.0 → 0.5.0

package/CHANGELOG.md

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

package/README.md

@@ -1,8 +1,8 @@
 # @scalio-cloud/ui
 
-Shared look and feel for the Scalio apps (Nexus, Compass, Rosetta, Citadel, later Foundry and Pulse):
+Shared look and feel for the Scalio apps (Nexus, Rosetta, Foundry, Citadel, Compass, later Pulse):
 the "Control Room" design tokens, a Tailwind preset and the fonts, served from the app itself.
-Spec: `spezifikation/UISPEC.md` in `Scalio-Cloud/scalio-rosetta`.
+Spec: `design/UISPEC.md` in `Scalio-Cloud/scalio-docs` (single copy).
 
 | File | What it is |
 |---|---|
@@ -10,7 +10,8 @@ Spec: `spezifikation/UISPEC.md` in `Scalio-Cloud/scalio-rosetta`.
 | `fonts.css` | `@font-face` for Chivo, IBM Plex Sans, JetBrains Mono (woff2, latin, SIL OFL 1.1). No Google Fonts request |
 | `base.css` | body / heading / code font families |
 | `shell.css` | styles of the app header, user menu, page header and version (`scalio-*` classes) |
-| `index.css` | all four in one import |
+| `nav.css` | sidebar, phone drawer, switcher, context select, support drawer, page blocks |
+| `index.css` | all of them in one import |
 | `react/` | shared app header for React (see below), no dependency except React |
 | `tailwind-preset.js` | colors, fonts, radius, accordion animation, `brand` colors, `h-switcher`, `h-header`, `w-sidebar` |
 | `tokens.js` | raw values for code without CSS (charts, e-mails, PDFs) |
@@ -68,6 +69,53 @@ Texts are built in for `lang` `de` and `en` and can be overridden with `labels`.
 `TEST_IDS`. The components are plain CommonJS with `React.createElement`, so CRA, Vite and Jest need no extra config.
 Icons are inline (Lucide, ISC, see `licenses/`).
 
+## Sidebar, switcher and page blocks (React)
+
+Every app has the same frame (UISPEC "Navigation"): switcher, header with the context select on the left, then
+the sidebar with search, at most one main action, "Übersicht", up to three sections and "Verwaltung" last
+(Protokoll, Konten und Rollen, Einstellungen). Profile and personal pages live only in the user menu. The app
+describes its navigation as data; the sidebar, the phone drawer and (later) the search read the same list.
+
+```jsx
+import { NavLink } from "react-router-dom";
+import { AppShell, Sidebar, ProductSwitcher, ContextSelect, SupportDrawer, useScalioApps,
+  KpiTile, EmptyState, Loading, Notice, StatusBadge, LABELS } from "@scalio-cloud/ui/react";
+
+const L = LABELS[lang];
+const NAV = { sections: [
+  { id: "main", items: [{ to: "/", label: L.overview, icon: LayoutGrid, end: true }] },
+  { id: "compliance", label: t("Compliance"), items: [
+    { to: "/drifts", label: t("Drifts"), icon: GitCompareArrows, badge: open || null, badgeTone: "error" },
+  ] },
+  { id: "admin", label: L.administration, items: [
+    { to: "/audit", label: L.auditLog, icon: ScrollText },
+    { to: "/accounts", label: L.accounts, icon: Users, hidden: !isAdmin },   // hidden items and empty sections disappear
+    { to: "/settings", label: L.settings, icon: SlidersHorizontal },
+  ] },
+] };
+
+const apps = useScalioApps(() => api.get("/apps").then((r) => r.data));   // once per page load
+<AppShell
+  switcher={apps.features.switcher && <ProductSwitcher current="citadel" links={apps.links} stage={apps.stage} sso={sso} lang={lang} />}
+  header={<AppHeader ... onMenu={() => setDrawer(true)}
+    left={<ContextSelect label={L.tenant} value={tenantId} options={tenants} onChange={select} hint={domain} testId="tenant-switcher" />} />}
+  sidebar={<Sidebar nav={NAV} link={NavLink} lang={lang} version={VERSION} commit={COMMIT}
+    search={{ onOpen: openPalette, shortcut: "⌘K" }} primaryAction={{ label: t("Scan starten"), icon: Play, onSelect: scan }} />}
+  drawerOpen={drawer} onDrawerClose={() => setDrawer(false)}   // phones: same sidebar in a drawer (test ids with "m-")
+>
+  <Routes>...</Routes>
+</AppShell>
+<SupportDrawer open={supportOpen} onClose={...} lang={lang}
+  onSubmit={(d) => api.post("/support/tickets", { ...d, url: location.pathname }).then(() => toast.success(...))}
+  context={[["URL", location.pathname], [L.tenant, current?.name]]} />
+```
+
+`link` is the router's `NavLink` (it gets `to`, `end`, a `className` function and `onClick`); without it the
+sidebar renders plain links and marks the item for `activePath`. Item test ids default to `nav-<path>`
+(`nav-overview` for `/`), or set `testId`. Page blocks: `KpiTile` (tone `error` = red number),
+`EmptyState` (children = next step), `Loading`, `Notice` (`info`, `ok`, `warn`, `error`), `StatusBadge`
+(tones `neutral`, `running`, `ok`, `warn`, `error`) and `PageHeader` with `back` for detail pages.
+
 ## Sign-in page and profile (React)
 
 All sign-in pages use the same frame and order: Microsoft first, then "oder mit E-Mail", the password field with

package/index.css

@@ -4,3 +4,4 @@
 @import './base.css';
 @import './shell.css';
 @import './auth.css';
+@import './nav.css';

package/nav.css

@@ -0,0 +1,185 @@
+/* App frame (sidebar, drawer, switcher, context select, support drawer) and page blocks
+ * (KPI tile, empty state, notice, badge). Plain CSS on the tokens, classes start with "scalio-". */
+
+/* Frame */
+.scalio-shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; background: hsl(var(--background)); color: hsl(var(--foreground)); }
+.scalio-shell-body { display: flex; flex: 1 1 auto; min-height: 0; }
+.scalio-shell-main { flex: 1 1 auto; min-width: 0; overflow-y: auto; }
+
+/* Sidebar */
+.scalio-sidebar {
+  width: var(--scalio-sidebar-width, 240px); flex-shrink: 0; flex-direction: column; min-height: 0;
+  background: hsl(var(--muted)); border-right: 1px solid hsl(var(--border));
+}
+.scalio-sidebar-desktop { display: none; }
+@media (min-width: 768px) { .scalio-sidebar-desktop { display: flex; } }
+.scalio-sidebar-drawer { display: flex; width: 100%; height: 100%; border-right: 0; }
+.scalio-sidebar-top { padding: 0.75rem 0.75rem 0; }
+.scalio-sidebar-scroll { flex: 1 1 auto; overflow-y: auto; padding: 0.5rem 0 0.75rem; }
+.scalio-nav-section + .scalio-nav-section { margin-top: 0.25rem; }
+.scalio-nav-heading {
+  padding: 1.25rem 1.25rem 0.5rem; font-size: 11px; font-weight: 700; text-transform: uppercase;
+  letter-spacing: 0.12em; color: hsl(var(--muted-foreground));
+}
+.scalio-nav-heading.is-danger { color: hsl(var(--destructive)); }
+.scalio-nav-heading.is-info { color: hsl(var(--primary)); }
+.scalio-nav-item {
+  display: flex; align-items: center; gap: 0.75rem; height: 2.5rem; padding: 0 1.25rem;
+  border-left: 2px solid transparent; font-size: 0.875rem; color: hsl(var(--muted-foreground));
+  text-decoration: none; transition: color 150ms, background-color 150ms;
+}
+.scalio-nav-item:hover { color: hsl(var(--foreground)); background: hsl(var(--background) / 0.6); }
+.scalio-nav-item.is-active { border-left-color: hsl(var(--primary)); background: hsl(var(--background)); color: hsl(var(--foreground)); font-weight: 600; }
+.scalio-nav-item.is-bold { font-weight: 700; }
+.scalio-nav-item:focus-visible, .scalio-nav-cta:focus-visible, .scalio-nav-search:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }
+.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 {
+  margin-left: auto; min-width: 1.25rem; padding: 0.0625rem 0.375rem; border-radius: 999px; text-align: center;
+  font-size: 10px; font-weight: 700; background: hsl(var(--primary) / 0.15); color: hsl(var(--primary));
+}
+.scalio-nav-badge.is-error { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
+.scalio-nav-search {
+  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
+  margin: 0.75rem 0.75rem 0; padding: 0.5rem 0.75rem; border: 1px solid hsl(var(--border)); border-radius: 2px;
+  background: hsl(var(--background)); color: hsl(var(--muted-foreground)); font: inherit; font-size: 0.875rem;
+  text-align: left; cursor: pointer;
+}
+.scalio-nav-search:hover { color: hsl(var(--foreground)); border-color: hsl(var(--input)); }
+.scalio-nav-search-label { display: flex; align-items: center; gap: 0.5rem; }
+.scalio-kbd {
+  padding: 0.0625rem 0.375rem; border: 1px solid hsl(var(--border)); border-radius: 2px;
+  font-family: 'JetBrains Mono', monospace; font-size: 10px; color: hsl(var(--muted-foreground));
+}
+.scalio-nav-cta {
+  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
+  margin: 0.75rem 0.75rem 0; height: 2.25rem; padding: 0 0.75rem; border: 0; border-radius: 2px;
+  background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); text-decoration: none; cursor: pointer;
+  font: inherit; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
+}
+.scalio-nav-cta:hover { background: hsl(var(--primary) / 0.9); }
+.scalio-sidebar-footer { border-top: 1px solid hsl(var(--border)); padding-top: 0.5rem; }
+.scalio-sidebar-footer > :not(.scalio-version) { padding: 0 0.75rem 0.25rem; }
+
+/* Drawer (phones) */
+.scalio-drawer-root { position: fixed; inset: 0; z-index: 50; }
+@media (min-width: 768px) { .scalio-drawer-root { display: none; } }
+.scalio-drawer-backdrop { position: fixed; inset: 0; z-index: 40; background: rgb(9 9 11 / 0.4); }
+.scalio-drawer {
+  position: fixed; inset: 0 auto 0 0; z-index: 50; width: min(18rem, 85vw); display: flex; flex-direction: column;
+  background: hsl(var(--muted)); border-right: 1px solid hsl(var(--border)); box-shadow: 0 8px 24px rgb(0 0 0 / 0.2);
+  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); outline: none;
+}
+.scalio-drawer-head { display: flex; justify-content: flex-end; padding: 0.5rem 0.5rem 0; }
+.scalio-drawer .scalio-sidebar { min-height: 0; flex: 1 1 auto; }
+
+/* Product switcher */
+.scalio-switcher {
+  height: var(--scalio-switcher-height, 32px); display: flex; align-items: center; gap: 0.25rem; padding: 0 0.75rem;
+  flex-shrink: 0; overflow-x: auto; background: #09090b; color: #a1a1aa; border-bottom: 1px solid #27272a;
+  font-family: 'JetBrains Mono', monospace; font-size: 11px;
+}
+.scalio-switcher-brand { margin-right: 0.75rem; font-family: 'Chivo', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: #e4e4e7; }
+.scalio-stage { margin-right: 0.75rem; padding: 0 0.375rem; border-radius: 2px; font-size: 10px; font-weight: 700; line-height: 1rem; letter-spacing: 0.1em; }
+.scalio-stage-dev { background: rgb(14 165 233 / 0.15); color: #7dd3fc; box-shadow: inset 0 0 0 1px rgb(14 165 233 / 0.4); }
+.scalio-stage-test { background: rgb(245 158 11 / 0.15); color: #fcd34d; box-shadow: inset 0 0 0 1px rgb(245 158 11 / 0.4); }
+.scalio-stage-demo { background: rgb(16 185 129 / 0.15); color: #6ee7b7; box-shadow: inset 0 0 0 1px rgb(16 185 129 / 0.4); }
+.scalio-switcher-item {
+  display: inline-flex; align-items: center; gap: 0.375rem; height: 1.5rem; padding: 0 0.625rem; border-radius: 2px;
+  text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; text-decoration: none; color: #71717a;
+  transition: color 150ms, background-color 150ms;
+}
+.scalio-switcher-item.is-link { color: #d4d4d8; }
+.scalio-switcher-item.is-link:hover { color: #fff; background: #27272a; }
+.scalio-switcher-item.is-active { background: #002FA7; color: #fff; }
+.scalio-switcher-item.is-off, .scalio-switcher-item.is-soon { cursor: not-allowed; }
+.scalio-switcher-item.is-soon { color: #52525b; }
+.scalio-switcher-icon { width: 0.75rem; height: 0.75rem; }
+.scalio-switcher-soon { margin-left: 0.125rem; padding: 0 0.25rem; border: 1px solid #3f3f46; border-radius: 2px; font-size: 9px; line-height: 14px; text-transform: none; letter-spacing: normal; color: #71717a; }
+
+/* Context select (tenant, customer, organisation) in the header */
+.scalio-context { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
+.scalio-context-label { display: none; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: hsl(var(--muted-foreground)); }
+@media (min-width: 1024px) { .scalio-context-label { display: inline; } }
+.scalio-context-field { position: relative; min-width: 0; }
+.scalio-context-select {
+  appearance: none; -webkit-appearance: none; height: 2.25rem; max-width: 16rem; min-width: 8rem; padding: 0 2rem 0 0.75rem;
+  border: 1px solid hsl(var(--input)); border-radius: 2px; background: hsl(var(--background)); color: hsl(var(--foreground));
+  font: inherit; font-size: 0.875rem; font-weight: 500; text-overflow: ellipsis; cursor: pointer;
+}
+.scalio-context-select:hover { border-color: hsl(var(--primary)); }
+.scalio-context-select:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
+.scalio-context-chevron { position: absolute; right: 0.625rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: hsl(var(--muted-foreground)); }
+.scalio-context-hint { display: none; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: hsl(var(--muted-foreground)); white-space: nowrap; }
+@media (min-width: 1280px) { .scalio-context-hint { display: inline; } }
+
+/* Support drawer */
+.scalio-support {
+  position: fixed; inset: 0 0 0 auto; z-index: 50; width: 100%; max-width: 24rem; overflow-y: auto; padding: 1.5rem;
+  background: hsl(var(--background)); color: hsl(var(--foreground)); border-left: 1px solid hsl(var(--border));
+  box-shadow: 0 8px 32px rgb(0 0 0 / 0.25); padding-top: calc(1.5rem + env(safe-area-inset-top, 0px));
+}
+.scalio-support-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid hsl(var(--border)); }
+.scalio-support-title { margin: 0; font-family: 'Chivo', sans-serif; font-weight: 700; font-size: 1.125rem; text-transform: uppercase; }
+.scalio-support-context { margin-bottom: 1rem; padding: 0.75rem; border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--muted)); font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; overflow-wrap: anywhere; }
+.scalio-support-form { display: flex; flex-direction: column; gap: 0.375rem; }
+.scalio-field-label { margin-top: 0.5rem; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: hsl(var(--muted-foreground)); }
+.scalio-input {
+  width: 100%; height: 2.5rem; padding: 0 0.75rem; border: 1px solid hsl(var(--input)); border-radius: 2px;
+  background: hsl(var(--background)); color: hsl(var(--foreground)); font: inherit; font-size: 0.875rem; box-sizing: border-box;
+}
+.scalio-textarea { height: auto; padding: 0.5rem 0.75rem; resize: vertical; }
+.scalio-input:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 0; }
+.scalio-btn-primary {
+  margin-top: 0.75rem; height: 2.5rem; border: 0; border-radius: 2px; cursor: pointer;
+  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
+  font: inherit; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
+}
+.scalio-btn-primary:hover { background: hsl(var(--primary) / 0.9); }
+.scalio-btn-primary:disabled { opacity: 0.6; cursor: default; }
+
+/* Page blocks */
+.scalio-page-back { margin-bottom: 0.5rem; font-size: 0.875rem; }
+.scalio-page-back a { color: hsl(var(--muted-foreground)); text-decoration: none; }
+.scalio-page-back a:hover { color: hsl(var(--foreground)); }
+.scalio-kpi {
+  display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem; text-align: left;
+  border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--card)); color: hsl(var(--card-foreground)); font: inherit;
+}
+.scalio-kpi.is-clickable { cursor: pointer; transition: border-color 150ms; }
+.scalio-kpi.is-clickable:hover { border-color: hsl(var(--primary)); }
+.scalio-kpi-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: hsl(var(--muted-foreground)); }
+.scalio-kpi-value { font-family: 'Chivo', sans-serif; font-weight: 900; font-size: 1.875rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
+.scalio-kpi.is-error .scalio-kpi-value { color: hsl(var(--destructive)); }
+.scalio-kpi.is-ok .scalio-kpi-value { color: #16a34a; }
+.scalio-kpi.is-warn .scalio-kpi-value { color: #d97706; }
+.scalio-kpi-hint { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: hsl(var(--muted-foreground)); }
+.scalio-empty {
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 2.5rem 1rem;
+  border: 1px dashed hsl(var(--border)); border-radius: 2px; text-align: center; color: hsl(var(--muted-foreground));
+  background-image: linear-gradient(hsl(var(--border) / 0.5) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--border) / 0.5) 1px, transparent 1px);
+  background-size: 32px 32px;
+}
+.scalio-empty-text { margin: 0; padding: 0 0.75rem; background: hsl(var(--background)); font-size: 0.875rem; }
+.scalio-loading { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 0; font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
+.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-title { font-weight: 600; margin-bottom: 0.125rem; }
+.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); }
+.scalio-notice.is-error { border-color: hsl(var(--destructive) / 0.5); background: hsl(var(--destructive) / 0.08); color: hsl(var(--destructive)); }
+.scalio-badge {
+  display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.0625rem 0.375rem; border: 1px solid; border-radius: 2px;
+  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;
+}
+.scalio-badge.is-neutral { color: hsl(var(--muted-foreground)); border-color: hsl(var(--border)); background: hsl(var(--muted)); }
+.scalio-badge.is-running { color: hsl(var(--primary)); border-color: hsl(var(--primary) / 0.35); background: hsl(var(--primary) / 0.08); }
+.scalio-badge.is-ok { color: #15803d; border-color: rgb(22 163 74 / 0.35); background: rgb(22 163 74 / 0.08); }
+.scalio-badge.is-warn { color: #b45309; border-color: rgb(217 119 6 / 0.4); background: rgb(217 119 6 / 0.1); }
+.scalio-badge.is-error { color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / 0.35); background: hsl(var(--destructive) / 0.08); }
+.dark .scalio-badge.is-running { color: #8ba6f7; border-color: rgb(139 166 247 / 0.4); }
+.dark .scalio-badge.is-ok, .dark .scalio-kpi.is-ok .scalio-kpi-value { color: #4ade80; }
+.dark .scalio-badge.is-warn, .dark .scalio-kpi.is-warn .scalio-kpi-value { color: #fbbf24; }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.4.0",
-  "description": "Scalio Control Room design tokens, Tailwind preset, self-hosted fonts, the shared app header and sign-in layout",
+  "version": "0.5.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,
   "repository": {
@@ -21,7 +21,8 @@
     "./package.json": "./package.json",
     "./react": "./react/index.js",
     "./shell.css": "./shell.css",
-    "./auth.css": "./auth.css"
+    "./auth.css": "./auth.css",
+    "./nav.css": "./nav.css"
   },
   "files": [
     "tokens.js",
@@ -32,6 +33,7 @@
     "base.css",
     "shell.css",
     "auth.css",
+    "nav.css",
     "react/",
     "licenses/",
     "fonts/",

package/react/blocks.js

@@ -0,0 +1,69 @@
+"use strict";
+// Small page building blocks shared by every app: KPI tile, empty state, loading line, notice, status badge.
+const React = require("react");
+const h = React.createElement;
+const { labelsFor } = require("./labels");
+
+function cx() {
+  return Array.prototype.slice.call(arguments).filter(Boolean).join(" ");
+}
+
+const TONES = ["neutral", "running", "ok", "warn", "error"];
+
+function tone(t, fallback) {
+  return TONES.indexOf(t) >= 0 ? t : fallback;
+}
+
+// Number tile on overview pages. tone "error" makes the number red (needs attention).
+function KpiTile({ label, value, hint, tone: t, onClick, testId }) {
+  const props = {
+    className: cx("scalio-kpi", onClick && "is-clickable", t && `is-${tone(t, "neutral")}`),
+    "data-testid": testId,
+  };
+  const body = [
+    h("div", { key: "l", className: "scalio-kpi-label" }, label),
+    h("div", { key: "v", className: "scalio-kpi-value" }, value),
+    hint ? h("div", { key: "h", className: "scalio-kpi-hint" }, hint) : null,
+  ];
+  if (onClick) return h("button", Object.assign({ type: "button", onClick }, props), body);
+  return h("div", props, body);
+}
+
+// Empty list or panel: what is missing and, as children, the next step (e.g. a button).
+function EmptyState({ text, children, lang, labels, testId }) {
+  const L = labelsFor(lang, labels);
+  return h(
+    "div",
+    { className: "scalio-empty", "data-testid": testId || "empty-state" },
+    h("p", { className: "scalio-empty-text" }, text || L.empty),
+    children ? h("div", { className: "scalio-empty-action" }, children) : null
+  );
+}
+
+function Loading({ label, lang, labels, testId }) {
+  const L = labelsFor(lang, labels);
+  return h(
+    "div",
+    { className: "scalio-loading", role: "status", "data-testid": testId || "loading" },
+    h("span", { className: "scalio-spinner", "aria-hidden": "true" }),
+    label || L.loading
+  );
+}
+
+// kind: info, ok, warn, error.
+function Notice({ kind, title, children, testId }) {
+  const k = ["info", "ok", "warn", "error"].indexOf(kind) >= 0 ? kind : "info";
+  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
+  );
+}
+
+// Fixed tones so "läuft", "fertig", "Fehler" look the same in every app. The app maps its own states.
+function StatusBadge({ tone: t, children, testId }) {
+  return h("span", { className: cx("scalio-badge", `is-${tone(t, "neutral")}`), "data-testid": testId }, children);
+}
+
+module.exports = { KpiTile, EmptyState, Loading, Notice, StatusBadge, TONES };

package/react/icons.js

@@ -36,4 +36,38 @@ const LogOut = icon([["path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 1
 const Menu = icon([["path", { d: "M4 6h16M4 12h16M4 18h16" }]]);
 const Check = icon([["path", { d: "M20 6 9 17l-5-5" }]]);
 
-module.exports = { Sun, Moon, Monitor, LifeBuoy, LogOut, Menu, Check };
+const X = icon([["path", { d: "M18 6 6 18" }], ["path", { d: "m6 6 12 12" }]]);
+const Search = icon([["circle", { cx: 11, cy: 11, r: 8 }], ["path", { d: "m21 21-4.3-4.3" }]]);
+const ChevronDown = icon([["path", { d: "m6 9 6 6 6-6" }]]);
+// Product marks in the switcher.
+const Fingerprint = icon([
+  ["path", { d: "M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4" }],
+  ["path", { d: "M14 13.12c0 2.38 0 6.38-1 8.88" }],
+  ["path", { d: "M17.29 21.02c.12-.6.43-2.3.5-3.02" }],
+  ["path", { d: "M2 12a10 10 0 0 1 18-6" }],
+  ["path", { d: "M2 16h.01" }],
+  ["path", { d: "M21.8 16c.2-2 .131-5.354 0-6" }],
+  ["path", { d: "M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2" }],
+  ["path", { d: "M8.65 22c.21-.66.45-1.32.57-2" }],
+  ["path", { d: "M9 6.8a6 6 0 0 1 9 5.2v2" }],
+]);
+const FileStack = icon([
+  ["path", { d: "M21 7h-3a2 2 0 0 1-2-2V2" }],
+  ["path", { d: "M21 6v6.5c0 .8-.7 1.5-1.5 1.5h-7c-.8 0-1.5-.7-1.5-1.5v-9c0-.8.7-1.5 1.5-1.5H17Z" }],
+  ["path", { d: "M7 8v8.8c0 .3.2.6.4.8.2.2.5.4.8.4H15" }],
+  ["path", { d: "M3 12v8.8c0 .3.2.6.4.8.2.2.5.4.8.4H11" }],
+]);
+const ShieldCheck = icon([
+  ["path", { d: "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" }],
+  ["path", { d: "m9 12 2 2 4-4" }],
+]);
+const Hammer = icon([
+  ["path", { d: "m15 12-8.373 8.373a1 1 0 1 1-3-3L12 9" }],
+  ["path", { d: "m18 15 4-4" }],
+  ["path", { d: "m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172V7l-2.26-2.26a6 6 0 0 0-4.202-1.756L9 2.96l.92.82A6.18 6.18 0 0 1 12 8.4V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5" }],
+]);
+const Activity = icon([
+  ["path", { d: "M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" }],
+]);
+
+module.exports = { Sun, Moon, Monitor, LifeBuoy, LogOut, Menu, Check, X, Search, ChevronDown, Fingerprint, FileStack, ShieldCheck, Hammer, Activity };

package/react/index.js

@@ -298,7 +298,8 @@ function AppHeader(props) {
   );
 }
 
-function PageHeader({ eyebrow, title, subtitle, actions, children, testId }) {
+// back: a link above the eyebrow on detail pages ("‹ Alle Drifts").
+function PageHeader({ eyebrow, title, subtitle, actions, children, back, testId }) {
   const right = actions || children;
   return h(
     "div",
@@ -306,6 +307,7 @@ function PageHeader({ eyebrow, title, subtitle, actions, children, testId }) {
     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
@@ -314,18 +316,9 @@ function PageHeader({ eyebrow, title, subtitle, actions, children, testId }) {
   );
 }
 
-// "Version 1.2.4 · 3f2a1bc" at the bottom of the sidebar.
-function VersionTag({ version, commit, lang, labels, testId }) {
-  if (!version) return null;
-  const L = labelsFor(lang, labels);
-  const short = commit ? String(commit).slice(0, 7) : "";
-  return h(
-    "div",
-    { className: "scalio-version", "data-testid": testId || "app-version", title: commit || undefined },
-    `${L.version} ${version}`,
-    short ? h("span", { className: "scalio-version-commit" }, ` · ${short}`) : null
-  );
-}
+const Nav = require("./nav");
+const Blocks = require("./blocks");
+const VersionTag = Nav.VersionTag;
 
 module.exports = {
   AppHeader,
@@ -340,5 +333,6 @@ module.exports = {
   TEST_IDS,
   initials,
 };
+Object.assign(module.exports, Nav, Blocks);
 // After the exports above: auth.js uses LanguageToggle and ThemeToggle from this module.
 Object.assign(module.exports, require("./auth"));

package/react/labels.js

@@ -29,6 +29,34 @@ const LABELS = {
     confirmPassword: "Neues Passwort bestätigen",
     twoFactor: "Zwei-Faktor-Anmeldung",
     mfaCode: "Code aus der Authenticator-App",
+    // Navigation (same words in every app, see the glossary in UISPEC)
+    overview: "Übersicht",
+    administration: "Verwaltung",
+    auditLog: "Protokoll",
+    accounts: "Konten und Rollen",
+    settings: "Einstellungen",
+    search: "Suchen",
+    navigation: "Navigation",
+    closeMenu: "Menü schliessen",
+    tenant: "Tenant",
+    customer: "Kunde",
+    // Switcher
+    soon: "bald",
+    switchTo: "Zu dieser Anwendung wechseln",
+    activeApp: "Aktive Anwendung",
+    comingSoon: "Bald verfügbar",
+    notSetUp: "Für diese Installation nicht eingerichtet",
+    stageHint: "Umgebung dieser Installation",
+    // Support request
+    supportTitle: "Support-Anfrage",
+    subject: "Betreff",
+    description: "Beschreibung",
+    send: "Anfrage senden",
+    sending: "Wird gesendet …",
+    close: "Schliessen",
+    // States
+    loading: "Wird geladen …",
+    empty: "Noch keine Einträge.",
     sections: {
       account: "Konto",
       appearance: "Darstellung",
@@ -71,6 +99,30 @@ const LABELS = {
     confirmPassword: "Confirm new password",
     twoFactor: "Two-factor sign-in",
     mfaCode: "Code from the authenticator app",
+    overview: "Overview",
+    administration: "Administration",
+    auditLog: "Activity log",
+    accounts: "Accounts and roles",
+    settings: "Settings",
+    search: "Search",
+    navigation: "Navigation",
+    closeMenu: "Close menu",
+    tenant: "Tenant",
+    customer: "Customer",
+    soon: "soon",
+    switchTo: "Switch to this application",
+    activeApp: "Active application",
+    comingSoon: "Coming soon",
+    notSetUp: "Not set up for this installation",
+    stageHint: "Environment of this installation",
+    supportTitle: "Support request",
+    subject: "Subject",
+    description: "Description",
+    send: "Send request",
+    sending: "Sending …",
+    close: "Close",
+    loading: "Loading …",
+    empty: "No entries yet.",
     sections: {
       account: "Account",
       appearance: "Appearance",

package/react/nav.js

@@ -0,0 +1,457 @@
+"use strict";
+// App frame below the header: sidebar from navigation data, drawer for phones, context select,
+// product switcher and support drawer. Same rules in every app (UISPEC, "Navigation"):
+// search, one main action, Übersicht, up to three sections, "Verwaltung" last, version at the bottom.
+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 slug(s) {
+  return String(s || "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+}
+
+// Same rule as react-router's NavLink: "/" (or end: true) matches only exactly, others also match below.
+function isActivePath(path, to, end) {
+  const p = String(path || "/").replace(/\/+$/, "") || "/";
+  const t = String(to || "/").replace(/\/+$/, "") || "/";
+  if (end || t === "/") return p === t;
+  return p === t || p.startsWith(t + "/");
+}
+
+// Sections without visible items disappear; items with hidden: true too. Apps set hidden from their
+// permissions and licence, so the sidebar, the drawer and the search all see the same list.
+function visibleSections(nav) {
+  const sections = (nav && nav.sections) || [];
+  return sections
+    .map((s) => Object.assign({}, s, { items: (s.items || []).filter((i) => i && !i.hidden) }))
+    .filter((s) => s.items.length > 0);
+}
+
+function itemTestId(item, prefix) {
+  return (prefix || "") + (item.testId || `nav-${item.id || slug(item.to === "/" ? "overview" : item.to)}`);
+}
+
+function NavItem({ item, link, activePath, onNavigate, testIdPrefix }) {
+  const Icon = item.icon;
+  const cls = (active) => cx("scalio-nav-item", active && "is-active", item.bold && "is-bold");
+  const content = [
+    Icon ? h(Icon, { key: "i", className: "scalio-nav-icon", strokeWidth: item.bold ? 2.5 : 2, "aria-hidden": "true" }) : null,
+    h("span", { key: "l", className: "scalio-nav-label" }, item.label),
+    item.badge != null && item.badge !== false
+      ? h("span", { key: "b", className: cx("scalio-nav-badge", item.badgeTone && `is-${item.badgeTone}`), "data-testid": item.badgeTestId }, item.badge)
+      : null,
+  ];
+  const testId = itemTestId(item, testIdPrefix);
+  if (link) {
+    return h(link, { to: item.to, end: item.end, className: ({ isActive }) => cls(isActive), onClick: onNavigate, "data-testid": testId }, content);
+  }
+  const active = isActivePath(activePath, item.to, item.end);
+  return h("a", { href: item.to, className: cls(active), "aria-current": active ? "page" : undefined, onClick: onNavigate, "data-testid": testId }, content);
+}
+
+function PrimaryAction({ action, link, onNavigate, testIdPrefix }) {
+  if (!action) return null;
+  const Icon = action.icon;
+  const testId = (testIdPrefix || "") + (action.testId || "nav-primary-action");
+  const content = [Icon ? h(Icon, { key: "i", className: "scalio-icon", "aria-hidden": "true" }) : null, h("span", { key: "l" }, action.label)];
+  if (action.to && link) {
+    return h(link, { to: action.to, className: "scalio-nav-cta", onClick: onNavigate, "data-testid": testId }, content);
+  }
+  if (action.to) return h("a", { href: action.to, className: "scalio-nav-cta", onClick: onNavigate, "data-testid": testId }, content);
+  return h(
+    "button",
+    {
+      type: "button",
+      className: "scalio-nav-cta",
+      "data-testid": testId,
+      onClick: () => {
+        if (onNavigate) onNavigate();
+        if (action.onSelect) action.onSelect();
+      },
+    },
+    content
+  );
+}
+
+function SearchButton({ search, lang, labels, testIdPrefix, onNavigate }) {
+  if (!search) return null;
+  const L = labelsFor(lang, labels);
+  return h(
+    "button",
+    {
+      type: "button",
+      className: "scalio-nav-search",
+      "data-testid": (testIdPrefix || "") + (search.testId || "command-palette-trigger"),
+      onClick: () => {
+        if (onNavigate) onNavigate();
+        if (search.onOpen) search.onOpen();
+      },
+    },
+    h("span", { className: "scalio-nav-search-label" }, h(Icons.Search, { className: "scalio-icon" }), search.label || L.search),
+    search.shortcut ? h("kbd", { className: "scalio-kbd" }, search.shortcut) : null
+  );
+}
+
+// Sidebar. variant "desktop" shows from 768px, "drawer" is the same content inside NavDrawer.
+// link: the router's NavLink (gets to, end, className(fn), onClick); without it plain <a> + activePath.
+function Sidebar(props) {
+  const {
+    nav, link, activePath, top, search, primaryAction, footer, version, commit, lang, labels,
+    variant, onNavigate, testId, testIdPrefix,
+  } = props;
+  const prefix = testIdPrefix != null ? testIdPrefix : variant === "drawer" ? "m-" : "";
+  const L = labelsFor(lang, labels);
+  const sections = visibleSections(nav);
+  return h(
+    "nav",
+    {
+      className: cx("scalio-sidebar", variant === "drawer" ? "scalio-sidebar-drawer" : "scalio-sidebar-desktop"),
+      "aria-label": L.navigation,
+      "data-testid": testId || `${prefix}sidebar-nav`,
+    },
+    top ? h("div", { className: "scalio-sidebar-top" }, top) : null,
+    h(SearchButton, { search, lang, labels, testIdPrefix: prefix, onNavigate }),
+    h(PrimaryAction, { action: primaryAction, link, onNavigate, testIdPrefix: prefix }),
+    h(
+      "div",
+      { className: "scalio-sidebar-scroll" },
+      sections.map((sec, i) =>
+        h(
+          "div",
+          { key: sec.id || i, className: "scalio-nav-section", "data-section": sec.id },
+          sec.label ? h("div", { className: cx("scalio-nav-heading", sec.tone && `is-${sec.tone}`) }, sec.label) : null,
+          sec.items.map((item) => h(NavItem, { key: item.to, item, link, activePath, onNavigate, testIdPrefix: prefix }))
+        )
+      )
+    ),
+    footer || version
+      ? h(
+          "div",
+          { className: "scalio-sidebar-footer" },
+          footer || null,
+          version ? h(VersionTag, { version, commit, lang, labels, testId: `${prefix}app-version` }) : null
+        )
+      : null
+  );
+}
+
+// "Version 1.2.4 · 3f2a1bc" at the bottom of the sidebar.
+function VersionTag({ version, commit, lang, labels, testId }) {
+  const L = labelsFor(lang, labels);
+  const short = commit ? String(commit).slice(0, 7) : "";
+  if (!version) return null;
+  return h(
+    "div",
+    { className: "scalio-version", "data-testid": testId || "app-version", title: commit || undefined },
+    `${L.version} ${version}`,
+    short ? h("span", { className: "scalio-version-commit" }, ` · ${short}`) : null
+  );
+}
+
+// Panel from the left on phones. Escape and a click on the backdrop close it.
+function NavDrawer({ open, onClose, children, lang, labels, testId }) {
+  const L = labelsFor(lang, labels);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) return undefined;
+    if (ref.current) ref.current.focus();
+    function onKey(e) {
+      if (e.key === "Escape" && onClose) onClose();
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+  if (!open) return null;
+  return h(
+    "div",
+    { className: "scalio-drawer-root", "data-testid": testId || "mobile-nav" },
+    h("div", { className: "scalio-drawer-backdrop", onClick: onClose, "data-testid": "mobile-nav-backdrop" }),
+    h(
+      "div",
+      { className: "scalio-drawer", role: "dialog", "aria-modal": "true", "aria-label": L.navigation, tabIndex: -1, ref },
+      h(
+        "div",
+        { className: "scalio-drawer-head" },
+        h(
+          "button",
+          { type: "button", className: "scalio-btn scalio-btn-icon", "aria-label": L.closeMenu, onClick: onClose, "data-testid": "mobile-nav-close" },
+          h(Icons.X, { className: "scalio-icon" })
+        )
+      ),
+      children
+    )
+  );
+}
+
+// Whole frame: switcher, header, banners, then sidebar + content. The same sidebar element is shown
+// inside the drawer on phones (variant "drawer", closes on navigation).
+function AppShell({ switcher, header, banner, sidebar, children, drawerOpen, onDrawerClose, lang, labels, testId }) {
+  return h(
+    "div",
+    { className: "scalio-shell", "data-testid": testId || "app-shell" },
+    switcher || null,
+    header || null,
+    banner || null,
+    h(
+      "div",
+      { className: "scalio-shell-body" },
+      sidebar || null,
+      h("main", { className: "scalio-shell-main", "data-testid": "app-main" }, children)
+    ),
+    sidebar
+      ? h(
+          NavDrawer,
+          { open: !!drawerOpen, onClose: onDrawerClose, lang, labels },
+          React.cloneElement(sidebar, { variant: "drawer", onNavigate: onDrawerClose })
+        )
+      : null
+  );
+}
+
+// Tenant, customer or organisation: always left in the header (after the brand).
+function ContextSelect({ label, value, options, onChange, hint, after, testId, id }) {
+  const selectId = id || `scalio-context-${slug(label) || "select"}`;
+  return h(
+    "div",
+    { className: "scalio-context" },
+    label ? h("label", { className: "scalio-context-label", htmlFor: selectId }, label) : null,
+    h(
+      "div",
+      { className: "scalio-context-field" },
+      h(
+        "select",
+        {
+          id: selectId,
+          className: "scalio-context-select",
+          value: value == null ? "" : value,
+          onChange: (e) => onChange && onChange(e.target.value),
+          "data-testid": testId || "context-select",
+        },
+        (options || []).map((o) => h("option", { key: o.value, value: o.value }, o.label))
+      ),
+      h(Icons.ChevronDown, { className: "scalio-icon scalio-context-chevron" })
+    ),
+    hint ? h("span", { className: "scalio-context-hint", "data-testid": `${testId || "context-select"}-hint` }, hint) : null,
+    after || null
+  );
+}
+
+// --- Product switcher -------------------------------------------------------------------------
+// Display order of the app group. Compass is not part of it (decided 2026-10-26).
+const PRODUCTS = [
+  { key: "nexus", name: "Nexus", icon: Icons.Fingerprint },
+  { key: "rosetta", name: "Rosetta", icon: Icons.FileStack },
+  { key: "foundry", name: "Foundry", icon: Icons.Hammer },
+  { key: "citadel", name: "Citadel", icon: Icons.ShieldCheck },
+  { key: "pulse", name: "Pulse", icon: Icons.Activity, soon: true },
+];
+
+function productStatus(product, current) {
+  if (product.key === current) return "active";
+  return product.soon ? "soon" : "available";
+}
+
+// Link of a switcher entry: only available apps with a valid link for this installation
+// (GET /api/apps, SCALIO_APP_LINKS). sso: signed in through Scalio ID, the other app signs in silently.
+function switcherHref(product, links, sso, current) {
+  if (productStatus(product, current) !== "available") return null;
+  const url = links && links[product.key];
+  if (typeof url !== "string" || !/^https?:\/\/[^\s]+$/.test(url)) return null;
+  if (!sso) return url;
+  try {
+    const u = new URL(url);
+    u.searchParams.set("sso", "1");
+    return u.toString();
+  } catch (e) {
+    return url;
+  }
+}
+
+const STAGES = { dev: "DEV", test: "TEST", demo: "DEMO" };
+
+function stageBadge(stage) {
+  return Object.prototype.hasOwnProperty.call(STAGES, stage) ? STAGES[stage] : null;
+}
+
+// Missing counts as off: a self-hosted customer (or an older backend) sees neither switcher nor support.
+function scalioFeatures(answer) {
+  const f = (answer && answer.features) || {};
+  return { switcher: f.switcher === true, support: f.support === true };
+}
+
+function ProductSwitcher({ current, links, stage, sso, lang, labels, products, testId }) {
+  const L = labelsFor(lang, labels);
+  const badge = stageBadge(stage);
+  return h(
+    "div",
+    { className: "scalio-switcher", "data-testid": testId || "scalio-product-switcher" },
+    h("span", { className: "scalio-switcher-brand" }, "Scalio"),
+    badge
+      ? h("span", { className: `scalio-stage scalio-stage-${stage}`, title: L.stageHint, "data-testid": "scalio-stage-badge", "data-stage": stage }, badge)
+      : null,
+    (products || PRODUCTS).map((product) => {
+      const status = productStatus(product, current);
+      const Icon = product.icon;
+      const href = switcherHref(product, links, sso, current);
+      const common = { key: product.key, "data-testid": `product-switch-${product.key}`, "data-status": status };
+      const content = [
+        Icon ? h(Icon, { key: "i", className: "scalio-switcher-icon" }) : null,
+        h("span", { key: "n" }, product.name),
+        status === "soon" ? h("span", { key: "s", className: "scalio-switcher-soon", "data-testid": `product-soon-${product.key}` }, L.soon) : null,
+      ];
+      if (href) {
+        return h("a", Object.assign({ href, title: L.switchTo, className: "scalio-switcher-item is-link" }, common), content);
+      }
+      const title = status === "active" ? L.activeApp : status === "soon" ? L.comingSoon : L.notSetUp;
+      return h(
+        "span",
+        Object.assign(
+          {
+            title,
+            "aria-current": status === "active" ? "page" : undefined,
+            "aria-disabled": status === "active" ? undefined : "true",
+            className: cx("scalio-switcher-item", `is-${status === "available" ? "off" : status}`),
+          },
+          common
+        ),
+        content
+      );
+    })
+  );
+}
+
+// GET /api/apps once per page load. fetchApps returns a promise with the JSON answer.
+// Until the answer is in (or on error) switcher and support stay hidden.
+let appsCache = null;
+let appsPending = null;
+
+function useScalioApps(fetchApps) {
+  const [data, setData] = React.useState(appsCache);
+  React.useEffect(() => {
+    if (appsCache || !fetchApps) return undefined;
+    let alive = true;
+    appsPending =
+      appsPending ||
+      Promise.resolve()
+        .then(fetchApps)
+        .then((d) => {
+          appsCache = d || {};
+          return appsCache;
+        });
+    appsPending.then((d) => alive && setData(d)).catch(() => { appsPending = null; });
+    return () => { alive = false; };
+  }, [fetchApps]);
+  return {
+    links: (data && data.links) || {},
+    stage: (data && data.stage) || "prod",
+    saas: !!(data && data.saas),
+    features: scalioFeatures(data),
+  };
+}
+
+function resetScalioApps() {
+  appsCache = null;
+  appsPending = null;
+}
+
+// --- Support drawer ---------------------------------------------------------------------------
+// onSubmit({ subject, description }) sends the request (and shows the app's toast); a thrown error is
+// shown in the drawer. context: rows like [["URL", "/drifts"], ["Tenant", "Contoso"]].
+function SupportDrawer({ open, onClose, onSubmit, context, lang, labels }) {
+  const L = labelsFor(lang, labels);
+  const [subject, setSubject] = React.useState("");
+  const [description, setDescription] = React.useState("");
+  const [busy, setBusy] = React.useState(false);
+  const [error, setError] = React.useState("");
+  React.useEffect(() => {
+    if (!open) return undefined;
+    function onKey(e) {
+      if (e.key === "Escape" && onClose) onClose();
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+  if (!open) return null;
+  const submit = async (e) => {
+    e.preventDefault();
+    setBusy(true);
+    setError("");
+    try {
+      await onSubmit({ subject, description });
+      setSubject("");
+      setDescription("");
+      if (onClose) onClose();
+    } catch (err) {
+      setError((err && err.message) || String(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+  return h(
+    React.Fragment,
+    null,
+    h("div", { className: "scalio-drawer-backdrop", onClick: onClose }),
+    h(
+      "div",
+      { className: "scalio-support", role: "dialog", "aria-modal": "true", "aria-label": L.supportTitle, "data-testid": "scalio-support-drawer" },
+      h(
+        "div",
+        { className: "scalio-support-head" },
+        h("h3", { className: "scalio-support-title" }, L.supportTitle),
+        h(
+          "button",
+          { type: "button", className: "scalio-btn scalio-btn-icon", onClick: onClose, "aria-label": L.close, "data-testid": "support-drawer-close" },
+          h(Icons.X, { className: "scalio-icon" })
+        )
+      ),
+      context && context.length
+        ? h(
+            "div",
+            { className: "scalio-support-context", "data-testid": "support-context" },
+            context.map((row, i) => h("div", { key: i }, `${row[0]}: ${row[1] == null || row[1] === "" ? "—" : row[1]}`))
+          )
+        : null,
+      h(
+        "form",
+        { className: "scalio-support-form", onSubmit: submit },
+        h("label", { className: "scalio-field-label", htmlFor: "support-subject" }, L.subject),
+        h("input", {
+          id: "support-subject", className: "scalio-input", value: subject, required: true, minLength: 3, maxLength: 200,
+          onChange: (e) => setSubject(e.target.value), "data-testid": "ticket-subject-input",
+        }),
+        h("label", { className: "scalio-field-label", htmlFor: "support-description" }, L.description),
+        h("textarea", {
+          id: "support-description", className: "scalio-input scalio-textarea", rows: 5, value: description, required: true,
+          minLength: 3, maxLength: 5000, onChange: (e) => setDescription(e.target.value), "data-testid": "ticket-description-input",
+        }),
+        error ? h("div", { className: "scalio-notice is-error", role: "alert", "data-testid": "support-error" }, error) : null,
+        h("button", { type: "submit", className: "scalio-btn-primary", disabled: busy, "data-testid": "ticket-submit-btn" }, busy ? L.sending : L.send)
+      )
+    )
+  );
+}
+
+module.exports = {
+  VersionTag,
+  Sidebar,
+  NavItem,
+  NavDrawer,
+  AppShell,
+  ContextSelect,
+  ProductSwitcher,
+  PRODUCTS,
+  productStatus,
+  switcherHref,
+  stageBadge,
+  scalioFeatures,
+  useScalioApps,
+  resetScalioApps,
+  SupportDrawer,
+  visibleSections,
+  isActivePath,
+};

package/tailwind-preset.js

@@ -16,9 +16,9 @@ module.exports = {
       fontFamily: { ...fonts },
       borderRadius: {
         lg: "var(--radius)",
-        // Same steps as shadcn/ui and today's apps, so existing classes keep their look.
         md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+        // UISPEC: sharp 2px corners on buttons, fields, cards and badges (was 0px before 0.5.0).
+        sm: "2px",
       },
       colors: {
         background: v("background"),