@scalio-cloud/ui 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.3.0
+- New `@scalio-cloud/ui/react`: shared app header (`AppHeader` with status, language, theme, support and user menu
+  in a fixed order), `UserMenu`, `LanguageToggle`, `ThemeToggle`, `SupportButton`, `PageHeader`, `VersionTag`.
+  Only peer dependency is React (optional for apps that use just the tokens).
+- New `shell.css` (imported by `index.css`): styles for these parts with `scalio-*` classes. No visual change for
+  apps that do not use the components.
+
 ## 0.2.0
 - Dark mode colours from Scalio Rosetta: sidebar and other `bg-muted` areas are now darker than the page
   (before: lighter grey), primary blue in dark mode `223 100% 45%` (before: brighter `223 85% 62%`), card,

package/README.md

@@ -9,7 +9,9 @@ Spec: `spezifikation/UISPEC.md` in `Scalio-Cloud/scalio-rosetta`.
 | `tokens.css` | shadcn/ui CSS variables, light on `:root`, dark on `.dark` (Klein Blue `#002FA7`, radius 4px) |
 | `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 |
-| `index.css` | all three in one import |
+| `shell.css` | styles of the app header, user menu, page header and version (`scalio-*` classes) |
+| `index.css` | all four 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) |
 
@@ -35,6 +37,37 @@ module.exports = {
 Then remove the app's own `:root { --... }` / `.dark { --... }` blocks and the Google Fonts `@import` / `<link>`.
 Classes like `bg-primary`, `rounded-sm`, `font-display` keep working unchanged.
 
+## App header (React)
+
+Every app shows the same header on the right, always in this order: (app actions), status, language, theme,
+support, avatar.
+A part only appears when the app passes its handler (Compass has no dark mode, so no `onThemeChange`).
+
+```jsx
+import { AppHeader, PageHeader, VersionTag } from "@scalio-cloud/ui/react";
+
+<AppHeader
+  brand={{ mark: "N", name: "Scalio Nexus", sub: "Dev" }}  // or your own element
+  onMenu={() => setMobileNavOpen(true)}                     // hamburger below 768px
+  left={<TenantSelect />}                                   // after the brand
+  actions={<LocalePopover />}                               // right side, before the fixed group
+  status={<ApiStatus />}                                    // hidden below 768px
+  lang={lang} onLangChange={setLang}                        // one click, shows the other language
+  theme={theme} themeModes={["light", "dark", "system"]} onThemeChange={setTheme}
+  onSupport={() => setSupportOpen(true)}
+  user={{ name, email, role }} onLogout={logout}
+  menuItems={[{ label: "Profil", icon: User, onSelect: () => nav("/profile"), testId: "profile-link" }]}
+  testIds={{ logout: "logout-button" }}                     // keep an app's existing test ids
+/>
+<PageHeader eyebrow="Verwaltung" title="Benutzer" subtitle="..." actions={<Button>Neu</Button>} />
+<VersionTag version="1.2.4" commit="3f2a1bc" />              // bottom of the sidebar
+```
+
+Texts are built in for `lang` `de` and `en` and can be overridden with `labels`. Default test ids
+(`language-toggle-btn`, `theme-toggle-btn`, `support-ticket-trigger`, `user-avatar-btn`, `logout-btn`, ...) are in
+`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/`).
+
 ## Installing
 
 Public on npmjs.com, no token needed: `yarn add @scalio-cloud/ui` (pin the exact version).
@@ -43,7 +76,7 @@ The package holds only design values and fonts under the SIL OFL, nothing confid
 ## License
 
 Design tokens and preset: (c) Scalio Cloud LLC, free to use in Scalio apps. Fonts: SIL Open Font License 1.1,
-see `fonts/licenses/`.
+see `fonts/licenses/`. Icons in `react/icons.js`: Lucide, ISC license, see `licenses/lucide-LICENSE.txt`.
 
 ## Release
 

package/index.css

@@ -2,3 +2,4 @@
 @import './fonts.css';
 @import './tokens.css';
 @import './base.css';
+@import './shell.css';

package/licenses/lucide-LICENSE.txt

@@ -0,0 +1,43 @@
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+---
+
+The following Lucide icons are derived from the Feather project:
+
+airplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out
+
+The MIT License (MIT) (for the icons listed above)
+
+Copyright (c) 2013-present Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.2.0",
-  "description": "Scalio Control Room design tokens, Tailwind preset and self-hosted fonts",
+  "version": "0.3.0",
+  "description": "Scalio Control Room design tokens, Tailwind preset, self-hosted fonts and the shared app header",
   "license": "SEE LICENSE IN README.md",
   "private": false,
   "repository": {
@@ -18,7 +18,9 @@
     "./fonts.css": "./fonts.css",
     "./base.css": "./base.css",
     "./fonts/*": "./fonts/*",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./react": "./react/index.js",
+    "./shell.css": "./shell.css"
   },
   "files": [
     "tokens.js",
@@ -27,6 +29,9 @@
     "tokens.css",
     "fonts.css",
     "base.css",
+    "shell.css",
+    "react/",
+    "licenses/",
     "fonts/",
     "README.md",
     "CHANGELOG.md"
@@ -36,11 +41,15 @@
     "access": "public"
   },
   "peerDependencies": {
+    "react": ">=18",
     "tailwindcss": ">=3.3 <4"
   },
   "peerDependenciesMeta": {
     "tailwindcss": {
       "optional": true
+    },
+    "react": {
+      "optional": true
     }
   },
   "scripts": {
@@ -48,5 +57,10 @@
   },
   "engines": {
     "node": ">=18"
+  },
+  "devDependencies": {
+    "jsdom": "25.0.1",
+    "react": "19.1.0",
+    "react-dom": "19.1.0"
   }
 }

package/react/icons.js

@@ -0,0 +1,39 @@
+"use strict";
+// Small inline icons (paths from Lucide, ISC license, see licenses/lucide-LICENSE.txt).
+// Inline so the package needs no icon library.
+const React = require("react");
+const h = React.createElement;
+
+function icon(children) {
+  return function Icon(props) {
+    return h(
+      "svg",
+      Object.assign(
+        { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, viewBox: "0 0 24 24", fill: "none",
+          stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" },
+        props
+      ),
+      children.map((c, i) => h(c[0], Object.assign({ key: i }, c[1])))
+    );
+  };
+}
+
+const Sun = icon([
+  ["circle", { cx: 12, cy: 12, r: 4 }],
+  ["path", { d: "M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" }],
+]);
+const Moon = icon([["path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" }]]);
+const Monitor = icon([
+  ["rect", { width: 20, height: 14, x: 2, y: 3, rx: 2 }],
+  ["path", { d: "M8 21h8M12 17v4" }],
+]);
+const LifeBuoy = icon([
+  ["circle", { cx: 12, cy: 12, r: 10 }],
+  ["circle", { cx: 12, cy: 12, r: 4 }],
+  ["path", { d: "m4.93 4.93 4.24 4.24M14.83 9.17l4.24-4.24M14.83 14.83l4.24 4.24M9.17 14.83l-4.24 4.24" }],
+]);
+const LogOut = icon([["path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9" }]]);
+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 };

package/react/index.js

@@ -0,0 +1,342 @@
+"use strict";
+// Shared app shell for the Scalio apps. Plain CommonJS with React.createElement, so apps need
+// no build step or Babel config for this package. Styles: shell.css (in index.css).
+const React = require("react");
+const h = React.createElement;
+const Icons = require("./icons");
+const { LABELS, labelsFor } = require("./labels");
+
+const TEST_IDS = {
+  menu: "mobile-menu-btn",
+  language: "language-toggle-btn",
+  theme: "theme-toggle-btn",
+  support: "support-ticket-trigger",
+  avatar: "user-avatar-btn",
+  userName: "user-name",
+  userEmail: "user-email",
+  userRole: "user-role",
+  logout: "logout-btn",
+};
+
+function cx() {
+  return Array.prototype.slice.call(arguments).filter(Boolean).join(" ");
+}
+
+function initials(user) {
+  const src = String((user && (user.name || user.email)) || "?").trim();
+  const parts = src.includes("@") ? [src] : src.split(/\s+/);
+  return parts.map((p) => p[0] || "").join("").slice(0, 2).toUpperCase() || "?";
+}
+
+// Dropdown with outside click, Escape and arrow keys. No portal: the menu sits under its button.
+function useDropdown(defaultOpen) {
+  const [open, setOpen] = React.useState(!!defaultOpen);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) return undefined;
+    const root = ref.current;
+    const first = root && root.querySelector("[role^='menuitem']");
+    if (first) first.focus();
+    function onDown(e) {
+      if (root && !root.contains(e.target)) setOpen(false);
+    }
+    function onKey(e) {
+      if (e.key === "Escape") {
+        setOpen(false);
+        const btn = root && root.querySelector("button");
+        if (btn) btn.focus();
+      }
+    }
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("touchstart", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("touchstart", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  return { open, setOpen, ref };
+}
+
+function onMenuKeyDown(e) {
+  if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Home" && e.key !== "End") return;
+  const items = Array.prototype.slice.call(e.currentTarget.querySelectorAll("[role^='menuitem']"));
+  if (!items.length) return;
+  e.preventDefault();
+  const i = items.indexOf(document.activeElement);
+  let next = 0;
+  if (e.key === "ArrowDown") next = (i + 1) % items.length;
+  if (e.key === "ArrowUp") next = (i - 1 + items.length) % items.length;
+  if (e.key === "End") next = items.length - 1;
+  items[next].focus();
+}
+
+function MenuItem({ item, close }) {
+  const Icon = item.icon;
+  return h(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      className: cx("scalio-menu-item", item.danger && "scalio-menu-item-danger"),
+      "data-testid": item.testId,
+      onClick: () => {
+        close();
+        if (item.onSelect) item.onSelect();
+      },
+    },
+    Icon ? h(Icon, { className: "scalio-icon" }) : h("span", { className: "scalio-icon", "aria-hidden": "true" }),
+    h("span", null, item.label)
+  );
+}
+
+function UserMenu({ user, items, onLogout, lang, labels, testIds, defaultOpen }) {
+  const L = labelsFor(lang, labels);
+  const T = Object.assign({}, TEST_IDS, testIds);
+  const dd = useDropdown(defaultOpen);
+  if (!user) return null;
+  const close = () => dd.setOpen(false);
+  const all = (items || []).slice();
+  if (onLogout) all.push({ label: L.logout, icon: Icons.LogOut, onSelect: onLogout, testId: T.logout });
+  return h(
+    "div",
+    { className: "scalio-dropdown", ref: dd.ref },
+    h(
+      "button",
+      {
+        type: "button",
+        className: "scalio-avatar",
+        "aria-haspopup": "menu",
+        "aria-expanded": dd.open,
+        "aria-label": L.userMenu,
+        title: user.name || user.email,
+        "data-testid": T.avatar,
+        onClick: () => dd.setOpen(!dd.open),
+      },
+      initials(user)
+    ),
+    dd.open
+      ? h(
+          "div",
+          { className: "scalio-menu scalio-menu-wide", role: "menu", "aria-label": L.userMenu, onKeyDown: onMenuKeyDown },
+          h(
+            "div",
+            { className: "scalio-menu-label" },
+            user.name ? h("div", { className: "scalio-menu-name", "data-testid": T.userName }, user.name) : null,
+            user.email ? h("div", { className: "scalio-menu-email", "data-testid": T.userEmail }, user.email) : null,
+            user.role ? h("div", { className: "scalio-menu-role", "data-testid": T.userRole }, user.role) : null
+          ),
+          all.length ? h("div", { className: "scalio-menu-sep", role: "separator" }) : null,
+          all.map((item, i) => h(MenuItem, { key: item.testId || i, item, close }))
+        )
+      : null
+  );
+}
+
+function LanguageToggle({ lang, onChange, labels, testId }) {
+  if (!onChange) return null;
+  const L = labelsFor(lang, labels);
+  const other = lang === "en" ? "de" : "en";
+  return h(
+    "button",
+    {
+      type: "button",
+      className: "scalio-btn scalio-btn-lang",
+      title: L.language,
+      "aria-label": L.language,
+      "data-testid": testId || TEST_IDS.language,
+      onClick: () => onChange(other),
+    },
+    other.toUpperCase()
+  );
+}
+
+// Two modes (light, dark): one button that flips. With "system": a small menu with three options.
+function ThemeToggle({ theme, onChange, modes, lang, labels, testId, defaultOpen }) {
+  const L = labelsFor(lang, labels);
+  const list = modes || ["light", "dark"];
+  const dd = useDropdown(defaultOpen);
+  if (!onChange) return null;
+  const id = testId || TEST_IDS.theme;
+  const CurIcon = theme === "dark" ? Icons.Moon : theme === "system" ? Icons.Monitor : Icons.Sun;
+  if (list.length <= 2) {
+    const NextIcon = theme === "dark" ? Icons.Sun : Icons.Moon;
+    return h(
+      "button",
+      {
+        type: "button",
+        className: "scalio-btn scalio-btn-icon",
+        title: L.theme,
+        "aria-label": L.theme,
+        "data-testid": id,
+        onClick: () => onChange(theme === "dark" ? "light" : "dark"),
+      },
+      h(NextIcon, { className: "scalio-icon" })
+    );
+  }
+  const icons = { light: Icons.Sun, dark: Icons.Moon, system: Icons.Monitor };
+  return h(
+    "div",
+    { className: "scalio-dropdown", ref: dd.ref },
+    h(
+      "button",
+      {
+        type: "button",
+        className: "scalio-btn scalio-btn-icon",
+        title: L.theme,
+        "aria-label": L.theme,
+        "aria-haspopup": "menu",
+        "aria-expanded": dd.open,
+        "data-testid": id,
+        onClick: () => dd.setOpen(!dd.open),
+      },
+      h(CurIcon, { className: "scalio-icon" })
+    ),
+    dd.open
+      ? h(
+          "div",
+          { className: "scalio-menu", role: "menu", "aria-label": L.theme, onKeyDown: onMenuKeyDown },
+          list.map((m) =>
+            h(
+              "button",
+              {
+                key: m,
+                type: "button",
+                role: "menuitemradio",
+                "aria-checked": theme === m,
+                className: "scalio-menu-item",
+                "data-testid": `${id}-${m}`,
+                onClick: () => {
+                  dd.setOpen(false);
+                  onChange(m);
+                },
+              },
+              h(icons[m] || Icons.Monitor, { className: "scalio-icon" }),
+              h("span", null, L[m] || m),
+              theme === m ? h(Icons.Check, { className: "scalio-icon scalio-menu-check" }) : null
+            )
+          )
+        )
+      : null
+  );
+}
+
+function SupportButton({ onClick, lang, labels, testId }) {
+  if (!onClick) return null;
+  const L = labelsFor(lang, labels);
+  return h(
+    "button",
+    { type: "button", className: "scalio-btn", title: L.support, "data-testid": testId || TEST_IDS.support, onClick },
+    h(Icons.LifeBuoy, { className: "scalio-icon" }),
+    h("span", { className: "scalio-hide-sm" }, L.support)
+  );
+}
+
+function Brand({ brand }) {
+  if (!brand) return null;
+  if (React.isValidElement(brand)) return brand;
+  const inner = [
+    h("span", { key: "m", className: "scalio-brand-mark", style: brand.color ? { background: brand.color } : undefined }, brand.mark),
+    h(
+      "span",
+      { key: "t", className: "scalio-brand-text" },
+      h("span", { className: "scalio-brand-name" }, brand.name),
+      brand.sub ? h("span", { className: "scalio-brand-sub" }, brand.sub) : null
+    ),
+  ];
+  if (brand.href) return h("a", { className: "scalio-brand", href: brand.href, onClick: brand.onClick }, inner);
+  return h("div", { className: "scalio-brand" }, inner);
+}
+
+// Header: [menu] brand, left slot ... app actions, status, language, theme, support, avatar.
+// The part from status to avatar has the same order in every app.
+function AppHeader(props) {
+  const L = labelsFor(props.lang, props.labels);
+  const T = Object.assign({}, TEST_IDS, props.testIds);
+  return h(
+    "header",
+    { className: cx("scalio-header", props.className), "data-testid": props.testId || "app-header" },
+    props.onMenu
+      ? h(
+          "button",
+          {
+            type: "button",
+            className: "scalio-btn scalio-btn-icon scalio-menu-toggle",
+            "aria-label": L.menu,
+            "data-testid": T.menu,
+            onClick: props.onMenu,
+          },
+          h(Icons.Menu, { className: "scalio-icon" })
+        )
+      : null,
+    h(Brand, { brand: props.brand }),
+    props.left ? h("div", { className: "scalio-header-left" }, props.left) : null,
+    h("div", { className: "scalio-header-spacer" }),
+    props.actions ? h("div", { className: "scalio-header-actions" }, props.actions) : null,
+    props.status ? h("div", { className: "scalio-header-status" }, props.status) : null,
+    h(LanguageToggle, { lang: props.lang, onChange: props.onLangChange, labels: props.labels, testId: T.language }),
+    h(ThemeToggle, {
+      theme: props.theme,
+      onChange: props.onThemeChange,
+      modes: props.themeModes,
+      lang: props.lang,
+      labels: props.labels,
+      testId: T.theme,
+    }),
+    h(SupportButton, { onClick: props.onSupport, lang: props.lang, labels: props.labels, testId: T.support }),
+    props.user
+      ? h(UserMenu, {
+          user: props.user,
+          items: props.menuItems,
+          onLogout: props.onLogout,
+          lang: props.lang,
+          labels: props.labels,
+          testIds: props.testIds,
+        })
+      : null
+  );
+}
+
+function PageHeader({ eyebrow, title, subtitle, actions, children, testId }) {
+  const right = actions || children;
+  return h(
+    "div",
+    { className: "scalio-page-header", "data-testid": testId || "page-header" },
+    h(
+      "div",
+      { className: "scalio-page-header-text" },
+      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
+  );
+}
+
+// "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
+  );
+}
+
+module.exports = {
+  AppHeader,
+  UserMenu,
+  LanguageToggle,
+  ThemeToggle,
+  SupportButton,
+  PageHeader,
+  VersionTag,
+  Icons,
+  LABELS,
+  TEST_IDS,
+  initials,
+};

package/react/labels.js

@@ -0,0 +1,34 @@
+"use strict";
+// Built-in texts. German with "ss", formal where it addresses the person.
+const LABELS = {
+  de: {
+    language: "Sprache / Language",
+    theme: "Darstellung",
+    light: "Hell",
+    dark: "Dunkel",
+    system: "System",
+    support: "Support",
+    logout: "Abmelden",
+    userMenu: "Benutzermenü",
+    menu: "Menü",
+    version: "Version",
+  },
+  en: {
+    language: "Language / Sprache",
+    theme: "Appearance",
+    light: "Light",
+    dark: "Dark",
+    system: "System",
+    support: "Support",
+    logout: "Sign out",
+    userMenu: "User menu",
+    menu: "Menu",
+    version: "Version",
+  },
+};
+
+function labelsFor(lang, overrides) {
+  return Object.assign({}, LABELS[lang === "en" ? "en" : "de"], overrides || {});
+}
+
+module.exports = { LABELS, labelsFor };

package/shell.css

@@ -0,0 +1,103 @@
+/* App shell (header, user menu, page header, version). Plain CSS on the tokens, so apps need no
+ * Tailwind content path for this package. Classes start with "scalio-". */
+.scalio-header {
+  height: var(--scalio-header-height, 60px);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0 0.75rem;
+  min-width: 0;
+  flex-shrink: 0;
+  border-bottom: 1px solid hsl(var(--border));
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
+@media (min-width: 640px) { .scalio-header { gap: 0.75rem; } }
+@media (min-width: 1024px) { .scalio-header { padding: 0 1.5rem; } }
+.scalio-header-left { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
+.scalio-header-spacer { flex: 1 1 auto; }
+.scalio-header-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
+.scalio-header-status { display: none; align-items: center; gap: 0.5rem; }
+@media (min-width: 768px) { .scalio-header-status { display: flex; } }
+
+.scalio-brand { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; color: inherit; text-decoration: none; }
+@media (min-width: 1024px) { .scalio-brand { min-width: 200px; } }
+.scalio-brand-mark {
+  width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center;
+  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
+  font-family: 'Chivo', sans-serif; font-weight: 900; font-size: 0.875rem; border-radius: 2px;
+}
+.scalio-brand-text { display: none; flex-direction: column; line-height: 1.2; }
+@media (min-width: 1024px) { .scalio-brand-text { display: flex; } }
+.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));
+}
+.scalio-brand-sub { font-family: 'JetBrains Mono', monospace; }
+
+.scalio-btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
+  height: 2.25rem; padding: 0 0.625rem; flex-shrink: 0;
+  border: 1px solid hsl(var(--input)); border-radius: 2px;
+  background: hsl(var(--background)); color: hsl(var(--foreground));
+  font: inherit; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
+  cursor: pointer; transition: background-color 150ms;
+}
+@media (min-width: 640px) { .scalio-btn { padding: 0 1rem; } }
+.scalio-btn:hover { background: hsl(var(--secondary)); }
+.scalio-btn:focus-visible, .scalio-avatar:focus-visible, .scalio-menu-item:focus-visible {
+  outline: 2px solid hsl(var(--ring)); outline-offset: 1px;
+}
+.scalio-btn-icon { width: 2.25rem; padding: 0; }
+.scalio-btn-lang { width: 2.75rem; padding: 0; font-family: 'JetBrains Mono', monospace; }
+.scalio-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
+.scalio-hide-sm { display: none; }
+@media (min-width: 640px) { .scalio-hide-sm { display: inline; } }
+.scalio-menu-toggle { display: inline-flex; }
+@media (min-width: 768px) { .scalio-menu-toggle { display: none; } }
+
+.scalio-avatar {
+  width: 2.25rem; height: 2.25rem; flex-shrink: 0; border: 0; border-radius: 2px; cursor: pointer;
+  background: hsl(var(--foreground)); color: hsl(var(--background));
+  font-family: 'Chivo', sans-serif; font-weight: 700; font-size: 0.75rem;
+}
+
+.scalio-dropdown { position: relative; flex-shrink: 0; }
+.scalio-menu {
+  position: absolute; right: 0; top: calc(100% + 4px); z-index: 60; min-width: 10rem; padding: 0.25rem;
+  background: hsl(var(--popover)); color: hsl(var(--popover-foreground));
+  border: 1px solid hsl(var(--border)); border-radius: 2px;
+  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
+  text-transform: none; letter-spacing: normal;
+}
+.scalio-menu-wide { width: 16rem; }
+.scalio-menu-label { padding: 0.375rem 0.5rem; }
+.scalio-menu-name { font-size: 0.875rem; font-weight: 600; }
+.scalio-menu-email { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
+.scalio-menu-role { margin-top: 0.25rem; font-weight: 700; }
+.scalio-menu-sep { height: 1px; margin: 0.25rem -0.25rem; background: hsl(var(--border)); }
+.scalio-menu-item {
+  display: flex; width: 100%; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem;
+  border: 0; border-radius: 2px; background: transparent; color: inherit;
+  font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer;
+}
+.scalio-menu-item:hover, .scalio-menu-item:focus { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); outline: none; }
+.scalio-menu-item-danger { color: hsl(var(--destructive)); }
+.scalio-menu-check { margin-left: auto; }
+
+.scalio-page-header {
+  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+.scalio-page-header-text { min-width: 0; }
+.scalio-eyebrow { font-weight: 700; letter-spacing: 0.12em; font-size: 11px; margin-bottom: 0.25rem; }
+.scalio-page-title { margin: 0; font-family: 'Chivo', sans-serif; font-weight: 900; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.01em; }
+@media (min-width: 640px) { .scalio-page-title { font-size: 1.875rem; } }
+.scalio-page-subtitle { margin: 0.25rem 0 0; font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
+.scalio-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
+
+.scalio-version {
+  padding: 0.5rem 0.75rem; font-family: 'JetBrains Mono', monospace; font-size: 10px;
+  text-transform: uppercase; letter-spacing: 0.08em; color: hsl(var(--muted-foreground));
+}
+.scalio-version-commit { opacity: 0.7; text-transform: none; }