@scalio-cloud/ui 0.2.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/README.md +69 -2
- package/auth.css +114 -0
- package/index.css +2 -0
- package/licenses/lucide-LICENSE.txt +43 -0
- package/package.json +19 -3
- package/react/auth.js +158 -0
- package/react/icons.js +39 -0
- package/react/index.js +344 -0
- package/react/labels.js +100 -0
- package/shell.css +103 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.4.0
|
|
4
|
+
- New sign-in building blocks in `@scalio-cloud/ui/react`: `AuthLayout` (app brand on a dark grid on the left, form
|
|
5
|
+
on the right, language and optional theme top right, small brand above the form on phones), `AuthHeader`,
|
|
6
|
+
`MicrosoftButton`, `AuthDivider` ("oder mit E-Mail"), `AuthMessage`.
|
|
7
|
+
- New `ProfileSection` and `PROFILE_SECTIONS` for the profile page (Konto, Darstellung, Sprache und Region,
|
|
8
|
+
Sicherheit, Verknüpfungen), title and hint on the left, content in a card on the right.
|
|
9
|
+
- More shared words in `LABELS` (Anmelden, Passwort vergessen?, Passwort ändern, Zwei-Faktor-Anmeldung, ...).
|
|
10
|
+
- New `auth.css` (imported by `index.css`). No visual change for apps that do not use the new components.
|
|
11
|
+
|
|
12
|
+
## 0.3.0
|
|
13
|
+
- New `@scalio-cloud/ui/react`: shared app header (`AppHeader` with status, language, theme, support and user menu
|
|
14
|
+
in a fixed order), `UserMenu`, `LanguageToggle`, `ThemeToggle`, `SupportButton`, `PageHeader`, `VersionTag`.
|
|
15
|
+
Only peer dependency is React (optional for apps that use just the tokens).
|
|
16
|
+
- New `shell.css` (imported by `index.css`): styles for these parts with `scalio-*` classes. No visual change for
|
|
17
|
+
apps that do not use the components.
|
|
18
|
+
|
|
3
19
|
## 0.2.0
|
|
4
20
|
- Dark mode colours from Scalio Rosetta: sidebar and other `bg-muted` areas are now darker than the page
|
|
5
21
|
(before: lighter grey), primary blue in dark mode `223 100% 45%` (before: brighter `223 85% 62%`), card,
|
package/README.md
CHANGED
|
@@ -9,7 +9,9 @@ Spec: `spezifikation/UISPEC.md` in `Scalio-Cloud/scalio-rosetta`.
|
|
|
9
9
|
| `tokens.css` | shadcn/ui CSS variables, light on `:root`, dark on `.dark` (Klein Blue `#002FA7`, radius 4px) |
|
|
10
10
|
| `fonts.css` | `@font-face` for Chivo, IBM Plex Sans, JetBrains Mono (woff2, latin, SIL OFL 1.1). No Google Fonts request |
|
|
11
11
|
| `base.css` | body / heading / code font families |
|
|
12
|
-
| `
|
|
12
|
+
| `shell.css` | styles of the app header, user menu, page header and version (`scalio-*` classes) |
|
|
13
|
+
| `index.css` | all four in one import |
|
|
14
|
+
| `react/` | shared app header for React (see below), no dependency except React |
|
|
13
15
|
| `tailwind-preset.js` | colors, fonts, radius, accordion animation, `brand` colors, `h-switcher`, `h-header`, `w-sidebar` |
|
|
14
16
|
| `tokens.js` | raw values for code without CSS (charts, e-mails, PDFs) |
|
|
15
17
|
|
|
@@ -35,6 +37,71 @@ module.exports = {
|
|
|
35
37
|
Then remove the app's own `:root { --... }` / `.dark { --... }` blocks and the Google Fonts `@import` / `<link>`.
|
|
36
38
|
Classes like `bg-primary`, `rounded-sm`, `font-display` keep working unchanged.
|
|
37
39
|
|
|
40
|
+
## App header (React)
|
|
41
|
+
|
|
42
|
+
Every app shows the same header on the right, always in this order: (app actions), status, language, theme,
|
|
43
|
+
support, avatar.
|
|
44
|
+
A part only appears when the app passes its handler (Compass has no dark mode, so no `onThemeChange`).
|
|
45
|
+
|
|
46
|
+
```jsx
|
|
47
|
+
import { AppHeader, PageHeader, VersionTag } from "@scalio-cloud/ui/react";
|
|
48
|
+
|
|
49
|
+
<AppHeader
|
|
50
|
+
brand={{ mark: "N", name: "Scalio Nexus", sub: "Dev" }} // or your own element
|
|
51
|
+
onMenu={() => setMobileNavOpen(true)} // hamburger below 768px
|
|
52
|
+
left={<TenantSelect />} // after the brand
|
|
53
|
+
actions={<LocalePopover />} // right side, before the fixed group
|
|
54
|
+
status={<ApiStatus />} // hidden below 768px
|
|
55
|
+
lang={lang} onLangChange={setLang} // one click, shows the other language
|
|
56
|
+
theme={theme} themeModes={["light", "dark", "system"]} onThemeChange={setTheme}
|
|
57
|
+
onSupport={() => setSupportOpen(true)}
|
|
58
|
+
user={{ name, email, role }} onLogout={logout}
|
|
59
|
+
menuItems={[{ label: "Profil", icon: User, onSelect: () => nav("/profile"), testId: "profile-link" }]}
|
|
60
|
+
testIds={{ logout: "logout-button" }} // keep an app's existing test ids
|
|
61
|
+
/>
|
|
62
|
+
<PageHeader eyebrow="Verwaltung" title="Benutzer" subtitle="..." actions={<Button>Neu</Button>} />
|
|
63
|
+
<VersionTag version="1.2.4" commit="3f2a1bc" /> // bottom of the sidebar
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
Texts are built in for `lang` `de` and `en` and can be overridden with `labels`. Default test ids
|
|
67
|
+
(`language-toggle-btn`, `theme-toggle-btn`, `support-ticket-trigger`, `user-avatar-btn`, `logout-btn`, ...) are in
|
|
68
|
+
`TEST_IDS`. The components are plain CommonJS with `React.createElement`, so CRA, Vite and Jest need no extra config.
|
|
69
|
+
Icons are inline (Lucide, ISC, see `licenses/`).
|
|
70
|
+
|
|
71
|
+
## Sign-in page and profile (React)
|
|
72
|
+
|
|
73
|
+
All sign-in pages use the same frame and order: Microsoft first, then "oder mit E-Mail", the password field with
|
|
74
|
+
"Passwort vergessen?" below it, the submit button. Forgot password, reset, verify email and the two-factor step are
|
|
75
|
+
their own pages in the same frame. Show only what the app can do (register only in Compass, demo accounts only
|
|
76
|
+
in demo mode).
|
|
77
|
+
|
|
78
|
+
```jsx
|
|
79
|
+
import { AuthLayout, AuthHeader, MicrosoftButton, AuthDivider, AuthMessage, ProfileSection } from "@scalio-cloud/ui/react";
|
|
80
|
+
|
|
81
|
+
<AuthLayout
|
|
82
|
+
brand={{ mark: "N", name: "Scalio Nexus", claim: "Alle Konten aus einer Konsole verwalten.",
|
|
83
|
+
features: ["Onboarding", "Ändern", "Offboarding"] }}
|
|
84
|
+
lang={lang} onLangChange={setLang} // top right
|
|
85
|
+
theme={theme} onThemeChange={setTheme} // optional
|
|
86
|
+
footer={<VersionTag version={v} />} // optional
|
|
87
|
+
>
|
|
88
|
+
<AuthHeader eyebrow="Zugang" title="Anmelden" subtitle="..." />
|
|
89
|
+
<MicrosoftButton href="/api/auth/sso/login" lang={lang} disabled={!ssoReady} hint="..." />
|
|
90
|
+
<AuthDivider lang={lang} />
|
|
91
|
+
<form>...</form>
|
|
92
|
+
<AuthMessage kind="error">{error}</AuthMessage>
|
|
93
|
+
</AuthLayout>
|
|
94
|
+
|
|
95
|
+
// Profile page: the same sections in every app, leave out what an app does not need.
|
|
96
|
+
<ProfileSection id="account" lang={lang}>...</ProfileSection> // Konto
|
|
97
|
+
<ProfileSection id="appearance" lang={lang}>...</ProfileSection> // Darstellung
|
|
98
|
+
<ProfileSection id="language" lang={lang}>...</ProfileSection> // Sprache und Region
|
|
99
|
+
<ProfileSection id="security" lang={lang}>...</ProfileSection> // Sicherheit
|
|
100
|
+
<ProfileSection id="connections" lang={lang}>...</ProfileSection> // Verknüpfungen
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
Form fields and buttons stay the app's own (shadcn), so they match the rest of the app.
|
|
104
|
+
|
|
38
105
|
## Installing
|
|
39
106
|
|
|
40
107
|
Public on npmjs.com, no token needed: `yarn add @scalio-cloud/ui` (pin the exact version).
|
|
@@ -43,7 +110,7 @@ The package holds only design values and fonts under the SIL OFL, nothing confid
|
|
|
43
110
|
## License
|
|
44
111
|
|
|
45
112
|
Design tokens and preset: (c) Scalio Cloud LLC, free to use in Scalio apps. Fonts: SIL Open Font License 1.1,
|
|
46
|
-
see `fonts/licenses/`.
|
|
113
|
+
see `fonts/licenses/`. Icons in `react/icons.js`: Lucide, ISC license, see `licenses/lucide-LICENSE.txt`.
|
|
47
114
|
|
|
48
115
|
## Release
|
|
49
116
|
|
package/auth.css
ADDED
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
/* Sign-in pages (AuthLayout) and profile sections. Plain CSS on the tokens, classes start with "scalio-".
|
|
2
|
+
* The brand panel is always dark (like Rosetta), in light and dark mode. */
|
|
3
|
+
.scalio-auth {
|
|
4
|
+
min-height: 100vh;
|
|
5
|
+
display: grid;
|
|
6
|
+
grid-template-columns: 1fr;
|
|
7
|
+
background: hsl(var(--background));
|
|
8
|
+
color: hsl(var(--foreground));
|
|
9
|
+
}
|
|
10
|
+
@media (min-width: 1024px) { .scalio-auth { grid-template-columns: 1.2fr 1fr; } }
|
|
11
|
+
|
|
12
|
+
.scalio-auth-brand {
|
|
13
|
+
display: none;
|
|
14
|
+
position: relative;
|
|
15
|
+
overflow: hidden;
|
|
16
|
+
flex-direction: column;
|
|
17
|
+
justify-content: space-between;
|
|
18
|
+
gap: 2rem;
|
|
19
|
+
padding: 3rem;
|
|
20
|
+
background: #09090b;
|
|
21
|
+
color: #f4f4f5;
|
|
22
|
+
}
|
|
23
|
+
@media (min-width: 1024px) { .scalio-auth-brand { display: flex; } }
|
|
24
|
+
.scalio-auth-grid {
|
|
25
|
+
position: absolute; inset: 0; opacity: 0.07; pointer-events: none;
|
|
26
|
+
background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
|
|
27
|
+
background-size: 48px 48px;
|
|
28
|
+
}
|
|
29
|
+
.scalio-auth-brand > :not(.scalio-auth-grid) { position: relative; }
|
|
30
|
+
.scalio-auth-eyebrow {
|
|
31
|
+
font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; text-transform: uppercase;
|
|
32
|
+
letter-spacing: 0.2em; color: #71717a;
|
|
33
|
+
}
|
|
34
|
+
.scalio-auth-mark {
|
|
35
|
+
width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
|
|
36
|
+
background: #002FA7; color: #fff; border-radius: 2px;
|
|
37
|
+
font-family: 'Chivo', sans-serif; font-weight: 900; font-size: 0.875rem;
|
|
38
|
+
}
|
|
39
|
+
.scalio-auth-mark-lg { width: 3.5rem; height: 3.5rem; font-size: 1.5rem; margin-bottom: 2rem; }
|
|
40
|
+
.scalio-auth-title {
|
|
41
|
+
margin: 0; font-family: 'Chivo', sans-serif; font-weight: 900; text-transform: uppercase;
|
|
42
|
+
letter-spacing: -0.02em; font-size: 3rem; line-height: 0.95;
|
|
43
|
+
}
|
|
44
|
+
@media (min-width: 1280px) { .scalio-auth-title { font-size: 3.75rem; } }
|
|
45
|
+
.scalio-auth-claim { margin: 1.5rem 0 0; max-width: 28rem; color: #a1a1aa; font-size: 1rem; line-height: 1.6; }
|
|
46
|
+
.scalio-auth-features {
|
|
47
|
+
list-style: none; margin: 0; padding: 0;
|
|
48
|
+
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
|
|
49
|
+
background: #27272a; border: 1px solid #27272a;
|
|
50
|
+
}
|
|
51
|
+
.scalio-auth-features li {
|
|
52
|
+
background: #09090b; padding: 0.75rem 1rem; color: #a1a1aa;
|
|
53
|
+
font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.scalio-auth-main { position: relative; display: flex; flex-direction: column; min-width: 0; }
|
|
57
|
+
.scalio-auth-top { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 1rem; min-height: 4.25rem; }
|
|
58
|
+
.scalio-auth-body { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 0 1.5rem 2rem; }
|
|
59
|
+
@media (min-width: 640px) { .scalio-auth-body { padding: 0 3rem 3rem; } }
|
|
60
|
+
.scalio-auth-form { width: 100%; max-width: 24rem; display: flex; flex-direction: column; gap: 1.25rem; }
|
|
61
|
+
.scalio-auth-footer {
|
|
62
|
+
padding: 0.75rem 1rem; text-align: right; color: hsl(var(--muted-foreground));
|
|
63
|
+
font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.scalio-auth-mobile-brand { display: flex; align-items: center; gap: 0.75rem; }
|
|
67
|
+
@media (min-width: 1024px) { .scalio-auth-mobile-brand { display: none; } }
|
|
68
|
+
.scalio-auth-mobile-name { font-family: 'Chivo', sans-serif; font-weight: 900; text-transform: uppercase; font-size: 0.875rem; }
|
|
69
|
+
|
|
70
|
+
.scalio-auth-header .scalio-eyebrow { margin-bottom: 0.5rem; }
|
|
71
|
+
.scalio-auth-heading {
|
|
72
|
+
margin: 0; font-family: 'Chivo', sans-serif; font-weight: 900; text-transform: uppercase;
|
|
73
|
+
letter-spacing: -0.01em; font-size: 1.5rem; line-height: 1.2;
|
|
74
|
+
}
|
|
75
|
+
.scalio-auth-subtitle { margin: 0.5rem 0 0; font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
|
|
76
|
+
|
|
77
|
+
.scalio-auth-divider {
|
|
78
|
+
display: flex; align-items: center; gap: 0.75rem; color: hsl(var(--muted-foreground));
|
|
79
|
+
font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
|
|
80
|
+
}
|
|
81
|
+
.scalio-auth-divider::before, .scalio-auth-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: hsl(var(--border)); }
|
|
82
|
+
|
|
83
|
+
.scalio-auth-ms {
|
|
84
|
+
display: flex; width: 100%; height: 2.75rem; align-items: center; justify-content: center; gap: 0.625rem;
|
|
85
|
+
border: 1px solid hsl(var(--input)); border-radius: 2px; background: hsl(var(--background)); color: hsl(var(--foreground));
|
|
86
|
+
font: inherit; font-size: 0.875rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color 150ms;
|
|
87
|
+
}
|
|
88
|
+
.scalio-auth-ms:hover { background: hsl(var(--secondary)); }
|
|
89
|
+
.scalio-auth-ms:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
|
|
90
|
+
.scalio-auth-ms-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
|
|
91
|
+
.scalio-auth-hint { margin-top: 0.25rem; font-size: 11px; color: hsl(var(--muted-foreground)); }
|
|
92
|
+
|
|
93
|
+
.scalio-auth-msg { border: 1px solid; border-radius: 2px; padding: 0.5rem 0.75rem; font-size: 0.875rem; }
|
|
94
|
+
.scalio-auth-msg-error { color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / 0.35); background: hsl(var(--destructive) / 0.08); }
|
|
95
|
+
.scalio-auth-msg-info { color: hsl(var(--foreground)); border-color: hsl(var(--border)); background: hsl(var(--muted)); }
|
|
96
|
+
.scalio-auth-msg-success { color: hsl(142 72% 26%); border-color: hsl(142 60% 40% / 0.35); background: hsl(142 60% 40% / 0.08); }
|
|
97
|
+
.dark .scalio-auth-msg-success { color: hsl(142 60% 60%); }
|
|
98
|
+
|
|
99
|
+
/* Profile: sections one below the other, title left and content right from 768px. */
|
|
100
|
+
.scalio-profile-section {
|
|
101
|
+
display: grid; grid-template-columns: 1fr; gap: 1rem;
|
|
102
|
+
padding: 1.5rem 0; border-top: 1px solid hsl(var(--border));
|
|
103
|
+
}
|
|
104
|
+
.scalio-profile-section:first-of-type { border-top: 0; padding-top: 0; }
|
|
105
|
+
@media (min-width: 768px) { .scalio-profile-section { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2rem; } }
|
|
106
|
+
.scalio-profile-section-title {
|
|
107
|
+
margin: 0; font-family: 'Chivo', sans-serif; font-weight: 900; font-size: 0.875rem;
|
|
108
|
+
text-transform: uppercase; letter-spacing: 0.02em;
|
|
109
|
+
}
|
|
110
|
+
.scalio-profile-section-desc { margin: 0.375rem 0 0; font-size: 0.8125rem; color: hsl(var(--muted-foreground)); line-height: 1.5; }
|
|
111
|
+
.scalio-profile-section-body {
|
|
112
|
+
min-width: 0; padding: 1.25rem; border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--card));
|
|
113
|
+
color: hsl(var(--card-foreground)); display: flex; flex-direction: column; gap: 1rem;
|
|
114
|
+
}
|
package/index.css
CHANGED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
ISC License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Lucide Icons and Contributors
|
|
4
|
+
|
|
5
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
6
|
+
purpose with or without fee is hereby granted, provided that the above
|
|
7
|
+
copyright notice and this permission notice appear in all copies.
|
|
8
|
+
|
|
9
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
|
|
10
|
+
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
|
|
11
|
+
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
|
|
12
|
+
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
|
|
13
|
+
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
|
|
14
|
+
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
|
|
15
|
+
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
The following Lucide icons are derived from the Feather project:
|
|
20
|
+
|
|
21
|
+
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
|
|
22
|
+
|
|
23
|
+
The MIT License (MIT) (for the icons listed above)
|
|
24
|
+
|
|
25
|
+
Copyright (c) 2013-present Cole Bemis
|
|
26
|
+
|
|
27
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
28
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
29
|
+
in the Software without restriction, including without limitation the rights
|
|
30
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
31
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
32
|
+
furnished to do so, subject to the following conditions:
|
|
33
|
+
|
|
34
|
+
The above copyright notice and this permission notice shall be included in all
|
|
35
|
+
copies or substantial portions of the Software.
|
|
36
|
+
|
|
37
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
38
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
39
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
40
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
41
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
42
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
43
|
+
SOFTWARE.
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@scalio-cloud/ui",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "Scalio Control Room design tokens, Tailwind preset
|
|
3
|
+
"version": "0.4.0",
|
|
4
|
+
"description": "Scalio Control Room design tokens, Tailwind preset, self-hosted fonts, the shared app header and sign-in layout",
|
|
5
5
|
"license": "SEE LICENSE IN README.md",
|
|
6
6
|
"private": false,
|
|
7
7
|
"repository": {
|
|
@@ -18,7 +18,10 @@
|
|
|
18
18
|
"./fonts.css": "./fonts.css",
|
|
19
19
|
"./base.css": "./base.css",
|
|
20
20
|
"./fonts/*": "./fonts/*",
|
|
21
|
-
"./package.json": "./package.json"
|
|
21
|
+
"./package.json": "./package.json",
|
|
22
|
+
"./react": "./react/index.js",
|
|
23
|
+
"./shell.css": "./shell.css",
|
|
24
|
+
"./auth.css": "./auth.css"
|
|
22
25
|
},
|
|
23
26
|
"files": [
|
|
24
27
|
"tokens.js",
|
|
@@ -27,6 +30,10 @@
|
|
|
27
30
|
"tokens.css",
|
|
28
31
|
"fonts.css",
|
|
29
32
|
"base.css",
|
|
33
|
+
"shell.css",
|
|
34
|
+
"auth.css",
|
|
35
|
+
"react/",
|
|
36
|
+
"licenses/",
|
|
30
37
|
"fonts/",
|
|
31
38
|
"README.md",
|
|
32
39
|
"CHANGELOG.md"
|
|
@@ -36,11 +43,15 @@
|
|
|
36
43
|
"access": "public"
|
|
37
44
|
},
|
|
38
45
|
"peerDependencies": {
|
|
46
|
+
"react": ">=18",
|
|
39
47
|
"tailwindcss": ">=3.3 <4"
|
|
40
48
|
},
|
|
41
49
|
"peerDependenciesMeta": {
|
|
42
50
|
"tailwindcss": {
|
|
43
51
|
"optional": true
|
|
52
|
+
},
|
|
53
|
+
"react": {
|
|
54
|
+
"optional": true
|
|
44
55
|
}
|
|
45
56
|
},
|
|
46
57
|
"scripts": {
|
|
@@ -48,5 +59,10 @@
|
|
|
48
59
|
},
|
|
49
60
|
"engines": {
|
|
50
61
|
"node": ">=18"
|
|
62
|
+
},
|
|
63
|
+
"devDependencies": {
|
|
64
|
+
"jsdom": "25.0.1",
|
|
65
|
+
"react": "19.1.0",
|
|
66
|
+
"react-dom": "19.1.0"
|
|
51
67
|
}
|
|
52
68
|
}
|
package/react/auth.js
ADDED
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
// Sign-in pages and profile sections. Same building blocks in every app:
|
|
3
|
+
// AuthLayout = brand on a dark grid on the left, form on the right, language top right.
|
|
4
|
+
// Order on a sign-in form: AuthHeader, MicrosoftButton, AuthDivider ("or with email"), fields,
|
|
5
|
+
// "Forgot password?" under the password field, submit. Styles: auth.css (in index.css).
|
|
6
|
+
const React = require("react");
|
|
7
|
+
const h = React.createElement;
|
|
8
|
+
const { labelsFor } = require("./labels");
|
|
9
|
+
|
|
10
|
+
function cx() {
|
|
11
|
+
return Array.prototype.slice.call(arguments).filter(Boolean).join(" ");
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
function BrandMark({ brand, className }) {
|
|
15
|
+
return h(
|
|
16
|
+
"span",
|
|
17
|
+
{ className: cx("scalio-auth-mark", className), style: brand.color ? { background: brand.color } : undefined, "aria-hidden": "true" },
|
|
18
|
+
brand.mark
|
|
19
|
+
);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// brand: { mark: "N", name: "Scalio Nexus", claim, eyebrow, features: [..], color }
|
|
23
|
+
function AuthLayout(props) {
|
|
24
|
+
const brand = props.brand || {};
|
|
25
|
+
const L = labelsFor(props.lang, props.labels);
|
|
26
|
+
const words = String(brand.name || "").split(/\s+/).filter(Boolean);
|
|
27
|
+
const { LanguageToggle, ThemeToggle } = require("./index");
|
|
28
|
+
return h(
|
|
29
|
+
"div",
|
|
30
|
+
{ className: cx("scalio-auth", props.className), "data-testid": props.testId || "auth-layout" },
|
|
31
|
+
h(
|
|
32
|
+
"aside",
|
|
33
|
+
{ className: "scalio-auth-brand", "data-testid": "auth-brand" },
|
|
34
|
+
h("div", { className: "scalio-auth-grid", "aria-hidden": "true" }),
|
|
35
|
+
h("div", { className: "scalio-auth-eyebrow" }, brand.eyebrow || "Scalio · Control Room"),
|
|
36
|
+
h(
|
|
37
|
+
"div",
|
|
38
|
+
{ className: "scalio-auth-hero" },
|
|
39
|
+
h(BrandMark, { brand, className: "scalio-auth-mark-lg" }),
|
|
40
|
+
h("h1", { className: "scalio-auth-title" }, words.map((w, i) => h(React.Fragment, { key: i }, i ? h("br") : null, w))),
|
|
41
|
+
brand.claim ? h("p", { className: "scalio-auth-claim" }, brand.claim) : null
|
|
42
|
+
),
|
|
43
|
+
brand.features && brand.features.length
|
|
44
|
+
? h(
|
|
45
|
+
"ul",
|
|
46
|
+
{ className: "scalio-auth-features" },
|
|
47
|
+
brand.features.map((f, i) => h("li", { key: i }, f))
|
|
48
|
+
)
|
|
49
|
+
: h("div")
|
|
50
|
+
),
|
|
51
|
+
h(
|
|
52
|
+
"main",
|
|
53
|
+
{ className: "scalio-auth-main" },
|
|
54
|
+
h(
|
|
55
|
+
"div",
|
|
56
|
+
{ className: "scalio-auth-top" },
|
|
57
|
+
h(ThemeToggle, { theme: props.theme, onChange: props.onThemeChange, modes: props.themeModes, lang: props.lang, labels: props.labels, testId: "auth-theme-btn" }),
|
|
58
|
+
h(LanguageToggle, { lang: props.lang, onChange: props.onLangChange, labels: props.labels, testId: (props.testIds && props.testIds.language) || "auth-language-btn" })
|
|
59
|
+
),
|
|
60
|
+
h(
|
|
61
|
+
"div",
|
|
62
|
+
{ className: "scalio-auth-body" },
|
|
63
|
+
h(
|
|
64
|
+
"div",
|
|
65
|
+
{ className: "scalio-auth-form" },
|
|
66
|
+
h(
|
|
67
|
+
"div",
|
|
68
|
+
{ className: "scalio-auth-mobile-brand" },
|
|
69
|
+
h(BrandMark, { brand }),
|
|
70
|
+
h("span", { className: "scalio-auth-mobile-name" }, brand.name)
|
|
71
|
+
),
|
|
72
|
+
props.children
|
|
73
|
+
)
|
|
74
|
+
),
|
|
75
|
+
props.footer ? h("div", { className: "scalio-auth-footer", "aria-label": L.version }, props.footer) : null
|
|
76
|
+
)
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
function AuthHeader({ eyebrow, title, subtitle, testId }) {
|
|
81
|
+
return h(
|
|
82
|
+
"div",
|
|
83
|
+
{ className: "scalio-auth-header", "data-testid": testId },
|
|
84
|
+
eyebrow ? h("div", { className: "scalio-eyebrow" }, eyebrow) : null,
|
|
85
|
+
h("h2", { className: "scalio-auth-heading" }, title),
|
|
86
|
+
subtitle ? h("p", { className: "scalio-auth-subtitle" }, subtitle) : null
|
|
87
|
+
);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
function AuthDivider({ label, lang, labels, testId }) {
|
|
91
|
+
const L = labelsFor(lang, labels);
|
|
92
|
+
return h(
|
|
93
|
+
"div",
|
|
94
|
+
{ className: "scalio-auth-divider", role: "separator", "data-testid": testId || "auth-divider" },
|
|
95
|
+
h("span", null, label || L.orEmail)
|
|
96
|
+
);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
// Microsoft logo: four squares (Microsoft brand guidelines for "Sign in with Microsoft").
|
|
100
|
+
function MicrosoftLogo() {
|
|
101
|
+
const sq = (x, y, fill) => h("rect", { key: fill, x, y, width: 10, height: 10, fill });
|
|
102
|
+
return h(
|
|
103
|
+
"svg",
|
|
104
|
+
{ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, viewBox: "0 0 21 21", "aria-hidden": "true" },
|
|
105
|
+
[sq(0, 0, "#F25022"), sq(11, 0, "#7FBA00"), sq(0, 11, "#00A4EF"), sq(11, 11, "#FFB900")]
|
|
106
|
+
);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
// A link when href is given (server redirect), else a button. disabled shows it greyed with the hint.
|
|
110
|
+
function MicrosoftButton({ href, onClick, disabled, busy, label, hint, lang, labels, testId }) {
|
|
111
|
+
const L = labelsFor(lang, labels);
|
|
112
|
+
const id = testId || "login-microsoft-btn";
|
|
113
|
+
const content = [h(MicrosoftLogo, { key: "l" }), h("span", { key: "t" }, busy ? L.redirecting : label || L.microsoft)];
|
|
114
|
+
const cls = cx("scalio-auth-ms", (disabled || busy) && "scalio-auth-ms-disabled");
|
|
115
|
+
const btn = href && !disabled && !busy
|
|
116
|
+
? h("a", { className: cls, href, onClick, "data-testid": id }, content)
|
|
117
|
+
: h("button", { type: "button", className: cls, onClick, disabled: !!(disabled || busy), "aria-disabled": !!(disabled || busy), "data-testid": id }, content);
|
|
118
|
+
return h(
|
|
119
|
+
"div",
|
|
120
|
+
{ className: "scalio-auth-ms-wrap" },
|
|
121
|
+
btn,
|
|
122
|
+
hint ? h("div", { className: "scalio-auth-hint", "data-testid": `${id}-hint` }, hint) : null
|
|
123
|
+
);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
// kind: error | info | success
|
|
127
|
+
function AuthMessage({ kind, children, testId }) {
|
|
128
|
+
if (!children) return null;
|
|
129
|
+
return h(
|
|
130
|
+
"div",
|
|
131
|
+
{ className: cx("scalio-auth-msg", `scalio-auth-msg-${kind || "info"}`), role: kind === "error" ? "alert" : "status", "data-testid": testId },
|
|
132
|
+
children
|
|
133
|
+
);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
// One section of the profile page: title and description on the left, content on the right.
|
|
137
|
+
// The same five sections in every app (only those an app needs): account, appearance,
|
|
138
|
+
// language and region, security, connections. PROFILE_SECTIONS holds their ids and order.
|
|
139
|
+
const PROFILE_SECTIONS = ["account", "appearance", "language", "security", "connections"];
|
|
140
|
+
|
|
141
|
+
function ProfileSection({ id, title, description, lang, labels, children, testId }) {
|
|
142
|
+
const L = labelsFor(lang, labels);
|
|
143
|
+
const heading = title || (id && L.sections[id]) || "";
|
|
144
|
+
const desc = description !== undefined ? description : id && L.sectionHints[id];
|
|
145
|
+
return h(
|
|
146
|
+
"section",
|
|
147
|
+
{ className: "scalio-profile-section", id: id ? `profile-${id}` : undefined, "data-testid": testId || (id ? `profile-section-${id}` : undefined) },
|
|
148
|
+
h(
|
|
149
|
+
"div",
|
|
150
|
+
{ className: "scalio-profile-section-text" },
|
|
151
|
+
h("h2", { className: "scalio-profile-section-title" }, heading),
|
|
152
|
+
desc ? h("p", { className: "scalio-profile-section-desc" }, desc) : null
|
|
153
|
+
),
|
|
154
|
+
h("div", { className: "scalio-profile-section-body" }, children)
|
|
155
|
+
);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
module.exports = { AuthLayout, AuthHeader, AuthDivider, AuthMessage, MicrosoftButton, MicrosoftLogo, ProfileSection, PROFILE_SECTIONS };
|
package/react/icons.js
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
// Small inline icons (paths from Lucide, ISC license, see licenses/lucide-LICENSE.txt).
|
|
3
|
+
// Inline so the package needs no icon library.
|
|
4
|
+
const React = require("react");
|
|
5
|
+
const h = React.createElement;
|
|
6
|
+
|
|
7
|
+
function icon(children) {
|
|
8
|
+
return function Icon(props) {
|
|
9
|
+
return h(
|
|
10
|
+
"svg",
|
|
11
|
+
Object.assign(
|
|
12
|
+
{ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, viewBox: "0 0 24 24", fill: "none",
|
|
13
|
+
stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" },
|
|
14
|
+
props
|
|
15
|
+
),
|
|
16
|
+
children.map((c, i) => h(c[0], Object.assign({ key: i }, c[1])))
|
|
17
|
+
);
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
const Sun = icon([
|
|
22
|
+
["circle", { cx: 12, cy: 12, r: 4 }],
|
|
23
|
+
["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" }],
|
|
24
|
+
]);
|
|
25
|
+
const Moon = icon([["path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" }]]);
|
|
26
|
+
const Monitor = icon([
|
|
27
|
+
["rect", { width: 20, height: 14, x: 2, y: 3, rx: 2 }],
|
|
28
|
+
["path", { d: "M8 21h8M12 17v4" }],
|
|
29
|
+
]);
|
|
30
|
+
const LifeBuoy = icon([
|
|
31
|
+
["circle", { cx: 12, cy: 12, r: 10 }],
|
|
32
|
+
["circle", { cx: 12, cy: 12, r: 4 }],
|
|
33
|
+
["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" }],
|
|
34
|
+
]);
|
|
35
|
+
const LogOut = icon([["path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9" }]]);
|
|
36
|
+
const Menu = icon([["path", { d: "M4 6h16M4 12h16M4 18h16" }]]);
|
|
37
|
+
const Check = icon([["path", { d: "M20 6 9 17l-5-5" }]]);
|
|
38
|
+
|
|
39
|
+
module.exports = { Sun, Moon, Monitor, LifeBuoy, LogOut, Menu, Check };
|
package/react/index.js
ADDED
|
@@ -0,0 +1,344 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
// Shared app shell for the Scalio apps. Plain CommonJS with React.createElement, so apps need
|
|
3
|
+
// no build step or Babel config for this package. Styles: shell.css (in index.css).
|
|
4
|
+
const React = require("react");
|
|
5
|
+
const h = React.createElement;
|
|
6
|
+
const Icons = require("./icons");
|
|
7
|
+
const { LABELS, labelsFor } = require("./labels");
|
|
8
|
+
|
|
9
|
+
const TEST_IDS = {
|
|
10
|
+
menu: "mobile-menu-btn",
|
|
11
|
+
language: "language-toggle-btn",
|
|
12
|
+
theme: "theme-toggle-btn",
|
|
13
|
+
support: "support-ticket-trigger",
|
|
14
|
+
avatar: "user-avatar-btn",
|
|
15
|
+
userName: "user-name",
|
|
16
|
+
userEmail: "user-email",
|
|
17
|
+
userRole: "user-role",
|
|
18
|
+
logout: "logout-btn",
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
function cx() {
|
|
22
|
+
return Array.prototype.slice.call(arguments).filter(Boolean).join(" ");
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
function initials(user) {
|
|
26
|
+
const src = String((user && (user.name || user.email)) || "?").trim();
|
|
27
|
+
const parts = src.includes("@") ? [src] : src.split(/\s+/);
|
|
28
|
+
return parts.map((p) => p[0] || "").join("").slice(0, 2).toUpperCase() || "?";
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
// Dropdown with outside click, Escape and arrow keys. No portal: the menu sits under its button.
|
|
32
|
+
function useDropdown(defaultOpen) {
|
|
33
|
+
const [open, setOpen] = React.useState(!!defaultOpen);
|
|
34
|
+
const ref = React.useRef(null);
|
|
35
|
+
React.useEffect(() => {
|
|
36
|
+
if (!open) return undefined;
|
|
37
|
+
const root = ref.current;
|
|
38
|
+
const first = root && root.querySelector("[role^='menuitem']");
|
|
39
|
+
if (first) first.focus();
|
|
40
|
+
function onDown(e) {
|
|
41
|
+
if (root && !root.contains(e.target)) setOpen(false);
|
|
42
|
+
}
|
|
43
|
+
function onKey(e) {
|
|
44
|
+
if (e.key === "Escape") {
|
|
45
|
+
setOpen(false);
|
|
46
|
+
const btn = root && root.querySelector("button");
|
|
47
|
+
if (btn) btn.focus();
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
document.addEventListener("mousedown", onDown);
|
|
51
|
+
document.addEventListener("touchstart", onDown);
|
|
52
|
+
document.addEventListener("keydown", onKey);
|
|
53
|
+
return () => {
|
|
54
|
+
document.removeEventListener("mousedown", onDown);
|
|
55
|
+
document.removeEventListener("touchstart", onDown);
|
|
56
|
+
document.removeEventListener("keydown", onKey);
|
|
57
|
+
};
|
|
58
|
+
}, [open]);
|
|
59
|
+
return { open, setOpen, ref };
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
function onMenuKeyDown(e) {
|
|
63
|
+
if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Home" && e.key !== "End") return;
|
|
64
|
+
const items = Array.prototype.slice.call(e.currentTarget.querySelectorAll("[role^='menuitem']"));
|
|
65
|
+
if (!items.length) return;
|
|
66
|
+
e.preventDefault();
|
|
67
|
+
const i = items.indexOf(document.activeElement);
|
|
68
|
+
let next = 0;
|
|
69
|
+
if (e.key === "ArrowDown") next = (i + 1) % items.length;
|
|
70
|
+
if (e.key === "ArrowUp") next = (i - 1 + items.length) % items.length;
|
|
71
|
+
if (e.key === "End") next = items.length - 1;
|
|
72
|
+
items[next].focus();
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
function MenuItem({ item, close }) {
|
|
76
|
+
const Icon = item.icon;
|
|
77
|
+
return h(
|
|
78
|
+
"button",
|
|
79
|
+
{
|
|
80
|
+
type: "button",
|
|
81
|
+
role: "menuitem",
|
|
82
|
+
className: cx("scalio-menu-item", item.danger && "scalio-menu-item-danger"),
|
|
83
|
+
"data-testid": item.testId,
|
|
84
|
+
onClick: () => {
|
|
85
|
+
close();
|
|
86
|
+
if (item.onSelect) item.onSelect();
|
|
87
|
+
},
|
|
88
|
+
},
|
|
89
|
+
Icon ? h(Icon, { className: "scalio-icon" }) : h("span", { className: "scalio-icon", "aria-hidden": "true" }),
|
|
90
|
+
h("span", null, item.label)
|
|
91
|
+
);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
function UserMenu({ user, items, onLogout, lang, labels, testIds, defaultOpen }) {
|
|
95
|
+
const L = labelsFor(lang, labels);
|
|
96
|
+
const T = Object.assign({}, TEST_IDS, testIds);
|
|
97
|
+
const dd = useDropdown(defaultOpen);
|
|
98
|
+
if (!user) return null;
|
|
99
|
+
const close = () => dd.setOpen(false);
|
|
100
|
+
const all = (items || []).slice();
|
|
101
|
+
if (onLogout) all.push({ label: L.logout, icon: Icons.LogOut, onSelect: onLogout, testId: T.logout });
|
|
102
|
+
return h(
|
|
103
|
+
"div",
|
|
104
|
+
{ className: "scalio-dropdown", ref: dd.ref },
|
|
105
|
+
h(
|
|
106
|
+
"button",
|
|
107
|
+
{
|
|
108
|
+
type: "button",
|
|
109
|
+
className: "scalio-avatar",
|
|
110
|
+
"aria-haspopup": "menu",
|
|
111
|
+
"aria-expanded": dd.open,
|
|
112
|
+
"aria-label": L.userMenu,
|
|
113
|
+
title: user.name || user.email,
|
|
114
|
+
"data-testid": T.avatar,
|
|
115
|
+
onClick: () => dd.setOpen(!dd.open),
|
|
116
|
+
},
|
|
117
|
+
initials(user)
|
|
118
|
+
),
|
|
119
|
+
dd.open
|
|
120
|
+
? h(
|
|
121
|
+
"div",
|
|
122
|
+
{ className: "scalio-menu scalio-menu-wide", role: "menu", "aria-label": L.userMenu, onKeyDown: onMenuKeyDown },
|
|
123
|
+
h(
|
|
124
|
+
"div",
|
|
125
|
+
{ className: "scalio-menu-label" },
|
|
126
|
+
user.name ? h("div", { className: "scalio-menu-name", "data-testid": T.userName }, user.name) : null,
|
|
127
|
+
user.email ? h("div", { className: "scalio-menu-email", "data-testid": T.userEmail }, user.email) : null,
|
|
128
|
+
user.role ? h("div", { className: "scalio-menu-role", "data-testid": T.userRole }, user.role) : null
|
|
129
|
+
),
|
|
130
|
+
all.length ? h("div", { className: "scalio-menu-sep", role: "separator" }) : null,
|
|
131
|
+
all.map((item, i) => h(MenuItem, { key: item.testId || i, item, close }))
|
|
132
|
+
)
|
|
133
|
+
: null
|
|
134
|
+
);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
function LanguageToggle({ lang, onChange, labels, testId }) {
|
|
138
|
+
if (!onChange) return null;
|
|
139
|
+
const L = labelsFor(lang, labels);
|
|
140
|
+
const other = lang === "en" ? "de" : "en";
|
|
141
|
+
return h(
|
|
142
|
+
"button",
|
|
143
|
+
{
|
|
144
|
+
type: "button",
|
|
145
|
+
className: "scalio-btn scalio-btn-lang",
|
|
146
|
+
title: L.language,
|
|
147
|
+
"aria-label": L.language,
|
|
148
|
+
"data-testid": testId || TEST_IDS.language,
|
|
149
|
+
onClick: () => onChange(other),
|
|
150
|
+
},
|
|
151
|
+
other.toUpperCase()
|
|
152
|
+
);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
// Two modes (light, dark): one button that flips. With "system": a small menu with three options.
|
|
156
|
+
function ThemeToggle({ theme, onChange, modes, lang, labels, testId, defaultOpen }) {
|
|
157
|
+
const L = labelsFor(lang, labels);
|
|
158
|
+
const list = modes || ["light", "dark"];
|
|
159
|
+
const dd = useDropdown(defaultOpen);
|
|
160
|
+
if (!onChange) return null;
|
|
161
|
+
const id = testId || TEST_IDS.theme;
|
|
162
|
+
const CurIcon = theme === "dark" ? Icons.Moon : theme === "system" ? Icons.Monitor : Icons.Sun;
|
|
163
|
+
if (list.length <= 2) {
|
|
164
|
+
const NextIcon = theme === "dark" ? Icons.Sun : Icons.Moon;
|
|
165
|
+
return h(
|
|
166
|
+
"button",
|
|
167
|
+
{
|
|
168
|
+
type: "button",
|
|
169
|
+
className: "scalio-btn scalio-btn-icon",
|
|
170
|
+
title: L.theme,
|
|
171
|
+
"aria-label": L.theme,
|
|
172
|
+
"data-testid": id,
|
|
173
|
+
onClick: () => onChange(theme === "dark" ? "light" : "dark"),
|
|
174
|
+
},
|
|
175
|
+
h(NextIcon, { className: "scalio-icon" })
|
|
176
|
+
);
|
|
177
|
+
}
|
|
178
|
+
const icons = { light: Icons.Sun, dark: Icons.Moon, system: Icons.Monitor };
|
|
179
|
+
return h(
|
|
180
|
+
"div",
|
|
181
|
+
{ className: "scalio-dropdown", ref: dd.ref },
|
|
182
|
+
h(
|
|
183
|
+
"button",
|
|
184
|
+
{
|
|
185
|
+
type: "button",
|
|
186
|
+
className: "scalio-btn scalio-btn-icon",
|
|
187
|
+
title: L.theme,
|
|
188
|
+
"aria-label": L.theme,
|
|
189
|
+
"aria-haspopup": "menu",
|
|
190
|
+
"aria-expanded": dd.open,
|
|
191
|
+
"data-testid": id,
|
|
192
|
+
onClick: () => dd.setOpen(!dd.open),
|
|
193
|
+
},
|
|
194
|
+
h(CurIcon, { className: "scalio-icon" })
|
|
195
|
+
),
|
|
196
|
+
dd.open
|
|
197
|
+
? h(
|
|
198
|
+
"div",
|
|
199
|
+
{ className: "scalio-menu", role: "menu", "aria-label": L.theme, onKeyDown: onMenuKeyDown },
|
|
200
|
+
list.map((m) =>
|
|
201
|
+
h(
|
|
202
|
+
"button",
|
|
203
|
+
{
|
|
204
|
+
key: m,
|
|
205
|
+
type: "button",
|
|
206
|
+
role: "menuitemradio",
|
|
207
|
+
"aria-checked": theme === m,
|
|
208
|
+
className: "scalio-menu-item",
|
|
209
|
+
"data-testid": `${id}-${m}`,
|
|
210
|
+
onClick: () => {
|
|
211
|
+
dd.setOpen(false);
|
|
212
|
+
onChange(m);
|
|
213
|
+
},
|
|
214
|
+
},
|
|
215
|
+
h(icons[m] || Icons.Monitor, { className: "scalio-icon" }),
|
|
216
|
+
h("span", null, L[m] || m),
|
|
217
|
+
theme === m ? h(Icons.Check, { className: "scalio-icon scalio-menu-check" }) : null
|
|
218
|
+
)
|
|
219
|
+
)
|
|
220
|
+
)
|
|
221
|
+
: null
|
|
222
|
+
);
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
function SupportButton({ onClick, lang, labels, testId }) {
|
|
226
|
+
if (!onClick) return null;
|
|
227
|
+
const L = labelsFor(lang, labels);
|
|
228
|
+
return h(
|
|
229
|
+
"button",
|
|
230
|
+
{ type: "button", className: "scalio-btn", title: L.support, "data-testid": testId || TEST_IDS.support, onClick },
|
|
231
|
+
h(Icons.LifeBuoy, { className: "scalio-icon" }),
|
|
232
|
+
h("span", { className: "scalio-hide-sm" }, L.support)
|
|
233
|
+
);
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
function Brand({ brand }) {
|
|
237
|
+
if (!brand) return null;
|
|
238
|
+
if (React.isValidElement(brand)) return brand;
|
|
239
|
+
const inner = [
|
|
240
|
+
h("span", { key: "m", className: "scalio-brand-mark", style: brand.color ? { background: brand.color } : undefined }, brand.mark),
|
|
241
|
+
h(
|
|
242
|
+
"span",
|
|
243
|
+
{ key: "t", className: "scalio-brand-text" },
|
|
244
|
+
h("span", { className: "scalio-brand-name" }, brand.name),
|
|
245
|
+
brand.sub ? h("span", { className: "scalio-brand-sub" }, brand.sub) : null
|
|
246
|
+
),
|
|
247
|
+
];
|
|
248
|
+
if (brand.href) return h("a", { className: "scalio-brand", href: brand.href, onClick: brand.onClick }, inner);
|
|
249
|
+
return h("div", { className: "scalio-brand" }, inner);
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
// Header: [menu] brand, left slot ... app actions, status, language, theme, support, avatar.
|
|
253
|
+
// The part from status to avatar has the same order in every app.
|
|
254
|
+
function AppHeader(props) {
|
|
255
|
+
const L = labelsFor(props.lang, props.labels);
|
|
256
|
+
const T = Object.assign({}, TEST_IDS, props.testIds);
|
|
257
|
+
return h(
|
|
258
|
+
"header",
|
|
259
|
+
{ className: cx("scalio-header", props.className), "data-testid": props.testId || "app-header" },
|
|
260
|
+
props.onMenu
|
|
261
|
+
? h(
|
|
262
|
+
"button",
|
|
263
|
+
{
|
|
264
|
+
type: "button",
|
|
265
|
+
className: "scalio-btn scalio-btn-icon scalio-menu-toggle",
|
|
266
|
+
"aria-label": L.menu,
|
|
267
|
+
"data-testid": T.menu,
|
|
268
|
+
onClick: props.onMenu,
|
|
269
|
+
},
|
|
270
|
+
h(Icons.Menu, { className: "scalio-icon" })
|
|
271
|
+
)
|
|
272
|
+
: null,
|
|
273
|
+
h(Brand, { brand: props.brand }),
|
|
274
|
+
props.left ? h("div", { className: "scalio-header-left" }, props.left) : null,
|
|
275
|
+
h("div", { className: "scalio-header-spacer" }),
|
|
276
|
+
props.actions ? h("div", { className: "scalio-header-actions" }, props.actions) : null,
|
|
277
|
+
props.status ? h("div", { className: "scalio-header-status" }, props.status) : null,
|
|
278
|
+
h(LanguageToggle, { lang: props.lang, onChange: props.onLangChange, labels: props.labels, testId: T.language }),
|
|
279
|
+
h(ThemeToggle, {
|
|
280
|
+
theme: props.theme,
|
|
281
|
+
onChange: props.onThemeChange,
|
|
282
|
+
modes: props.themeModes,
|
|
283
|
+
lang: props.lang,
|
|
284
|
+
labels: props.labels,
|
|
285
|
+
testId: T.theme,
|
|
286
|
+
}),
|
|
287
|
+
h(SupportButton, { onClick: props.onSupport, lang: props.lang, labels: props.labels, testId: T.support }),
|
|
288
|
+
props.user
|
|
289
|
+
? h(UserMenu, {
|
|
290
|
+
user: props.user,
|
|
291
|
+
items: props.menuItems,
|
|
292
|
+
onLogout: props.onLogout,
|
|
293
|
+
lang: props.lang,
|
|
294
|
+
labels: props.labels,
|
|
295
|
+
testIds: props.testIds,
|
|
296
|
+
})
|
|
297
|
+
: null
|
|
298
|
+
);
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
function PageHeader({ eyebrow, title, subtitle, actions, children, testId }) {
|
|
302
|
+
const right = actions || children;
|
|
303
|
+
return h(
|
|
304
|
+
"div",
|
|
305
|
+
{ className: "scalio-page-header", "data-testid": testId || "page-header" },
|
|
306
|
+
h(
|
|
307
|
+
"div",
|
|
308
|
+
{ className: "scalio-page-header-text" },
|
|
309
|
+
eyebrow ? h("div", { className: "scalio-eyebrow" }, eyebrow) : null,
|
|
310
|
+
h("h1", { className: "scalio-page-title" }, title),
|
|
311
|
+
subtitle ? h("p", { className: "scalio-page-subtitle" }, subtitle) : null
|
|
312
|
+
),
|
|
313
|
+
right ? h("div", { className: "scalio-page-actions" }, right) : null
|
|
314
|
+
);
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
// "Version 1.2.4 · 3f2a1bc" at the bottom of the sidebar.
|
|
318
|
+
function VersionTag({ version, commit, lang, labels, testId }) {
|
|
319
|
+
if (!version) return null;
|
|
320
|
+
const L = labelsFor(lang, labels);
|
|
321
|
+
const short = commit ? String(commit).slice(0, 7) : "";
|
|
322
|
+
return h(
|
|
323
|
+
"div",
|
|
324
|
+
{ className: "scalio-version", "data-testid": testId || "app-version", title: commit || undefined },
|
|
325
|
+
`${L.version} ${version}`,
|
|
326
|
+
short ? h("span", { className: "scalio-version-commit" }, ` · ${short}`) : null
|
|
327
|
+
);
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
module.exports = {
|
|
331
|
+
AppHeader,
|
|
332
|
+
UserMenu,
|
|
333
|
+
LanguageToggle,
|
|
334
|
+
ThemeToggle,
|
|
335
|
+
SupportButton,
|
|
336
|
+
PageHeader,
|
|
337
|
+
VersionTag,
|
|
338
|
+
Icons,
|
|
339
|
+
LABELS,
|
|
340
|
+
TEST_IDS,
|
|
341
|
+
initials,
|
|
342
|
+
};
|
|
343
|
+
// After the exports above: auth.js uses LanguageToggle and ThemeToggle from this module.
|
|
344
|
+
Object.assign(module.exports, require("./auth"));
|
package/react/labels.js
ADDED
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
// Built-in texts. German with "ss", formal where it addresses the person.
|
|
3
|
+
const LABELS = {
|
|
4
|
+
de: {
|
|
5
|
+
language: "Sprache / Language",
|
|
6
|
+
theme: "Darstellung",
|
|
7
|
+
light: "Hell",
|
|
8
|
+
dark: "Dunkel",
|
|
9
|
+
system: "System",
|
|
10
|
+
support: "Support",
|
|
11
|
+
logout: "Abmelden",
|
|
12
|
+
userMenu: "Benutzermenü",
|
|
13
|
+
menu: "Menü",
|
|
14
|
+
version: "Version",
|
|
15
|
+
// Sign-in and profile (same words in every app)
|
|
16
|
+
signIn: "Anmelden",
|
|
17
|
+
microsoft: "Mit Microsoft anmelden",
|
|
18
|
+
redirecting: "Weiterleitung …",
|
|
19
|
+
orEmail: "oder mit E-Mail",
|
|
20
|
+
email: "E-Mail",
|
|
21
|
+
password: "Passwort",
|
|
22
|
+
forgotPassword: "Passwort vergessen?",
|
|
23
|
+
backToSignIn: "Zurück zur Anmeldung",
|
|
24
|
+
profile: "Profil",
|
|
25
|
+
save: "Speichern",
|
|
26
|
+
changePassword: "Passwort ändern",
|
|
27
|
+
currentPassword: "Aktuelles Passwort",
|
|
28
|
+
newPassword: "Neues Passwort",
|
|
29
|
+
confirmPassword: "Neues Passwort bestätigen",
|
|
30
|
+
twoFactor: "Zwei-Faktor-Anmeldung",
|
|
31
|
+
mfaCode: "Code aus der Authenticator-App",
|
|
32
|
+
sections: {
|
|
33
|
+
account: "Konto",
|
|
34
|
+
appearance: "Darstellung",
|
|
35
|
+
language: "Sprache und Region",
|
|
36
|
+
security: "Sicherheit",
|
|
37
|
+
connections: "Verknüpfungen",
|
|
38
|
+
},
|
|
39
|
+
sectionHints: {
|
|
40
|
+
account: "Ihre Angaben. Die E-Mail-Adresse ist Ihr Anmeldename.",
|
|
41
|
+
appearance: "Hell, dunkel oder wie Ihr System.",
|
|
42
|
+
language: "Sprache der Oberfläche und Zeitzone für Zeitangaben.",
|
|
43
|
+
security: "Passwort und Zwei-Faktor-Anmeldung.",
|
|
44
|
+
connections: "Verbundene Konten für die Anmeldung.",
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
en: {
|
|
48
|
+
language: "Language / Sprache",
|
|
49
|
+
theme: "Appearance",
|
|
50
|
+
light: "Light",
|
|
51
|
+
dark: "Dark",
|
|
52
|
+
system: "System",
|
|
53
|
+
support: "Support",
|
|
54
|
+
logout: "Sign out",
|
|
55
|
+
userMenu: "User menu",
|
|
56
|
+
menu: "Menu",
|
|
57
|
+
version: "Version",
|
|
58
|
+
signIn: "Sign in",
|
|
59
|
+
microsoft: "Sign in with Microsoft",
|
|
60
|
+
redirecting: "Redirecting …",
|
|
61
|
+
orEmail: "or with email",
|
|
62
|
+
email: "Email",
|
|
63
|
+
password: "Password",
|
|
64
|
+
forgotPassword: "Forgot password?",
|
|
65
|
+
backToSignIn: "Back to sign in",
|
|
66
|
+
profile: "Profile",
|
|
67
|
+
save: "Save",
|
|
68
|
+
changePassword: "Change password",
|
|
69
|
+
currentPassword: "Current password",
|
|
70
|
+
newPassword: "New password",
|
|
71
|
+
confirmPassword: "Confirm new password",
|
|
72
|
+
twoFactor: "Two-factor sign-in",
|
|
73
|
+
mfaCode: "Code from the authenticator app",
|
|
74
|
+
sections: {
|
|
75
|
+
account: "Account",
|
|
76
|
+
appearance: "Appearance",
|
|
77
|
+
language: "Language and region",
|
|
78
|
+
security: "Security",
|
|
79
|
+
connections: "Connections",
|
|
80
|
+
},
|
|
81
|
+
sectionHints: {
|
|
82
|
+
account: "Your details. Your email address is your sign-in name.",
|
|
83
|
+
appearance: "Light, dark or like your system.",
|
|
84
|
+
language: "Language of the interface and time zone for times.",
|
|
85
|
+
security: "Password and two-factor sign-in.",
|
|
86
|
+
connections: "Linked accounts for signing in.",
|
|
87
|
+
},
|
|
88
|
+
},
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
function labelsFor(lang, overrides) {
|
|
92
|
+
const base = LABELS[lang === "en" ? "en" : "de"];
|
|
93
|
+
const o = overrides || {};
|
|
94
|
+
return Object.assign({}, base, o, {
|
|
95
|
+
sections: Object.assign({}, base.sections, o.sections),
|
|
96
|
+
sectionHints: Object.assign({}, base.sectionHints, o.sectionHints),
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
module.exports = { LABELS, labelsFor };
|
package/shell.css
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
/* App shell (header, user menu, page header, version). Plain CSS on the tokens, so apps need no
|
|
2
|
+
* Tailwind content path for this package. Classes start with "scalio-". */
|
|
3
|
+
.scalio-header {
|
|
4
|
+
height: var(--scalio-header-height, 60px);
|
|
5
|
+
display: flex;
|
|
6
|
+
align-items: center;
|
|
7
|
+
gap: 0.5rem;
|
|
8
|
+
padding: 0 0.75rem;
|
|
9
|
+
min-width: 0;
|
|
10
|
+
flex-shrink: 0;
|
|
11
|
+
border-bottom: 1px solid hsl(var(--border));
|
|
12
|
+
background: hsl(var(--background));
|
|
13
|
+
color: hsl(var(--foreground));
|
|
14
|
+
}
|
|
15
|
+
@media (min-width: 640px) { .scalio-header { gap: 0.75rem; } }
|
|
16
|
+
@media (min-width: 1024px) { .scalio-header { padding: 0 1.5rem; } }
|
|
17
|
+
.scalio-header-left { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
|
|
18
|
+
.scalio-header-spacer { flex: 1 1 auto; }
|
|
19
|
+
.scalio-header-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
|
|
20
|
+
.scalio-header-status { display: none; align-items: center; gap: 0.5rem; }
|
|
21
|
+
@media (min-width: 768px) { .scalio-header-status { display: flex; } }
|
|
22
|
+
|
|
23
|
+
.scalio-brand { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; color: inherit; text-decoration: none; }
|
|
24
|
+
@media (min-width: 1024px) { .scalio-brand { min-width: 200px; } }
|
|
25
|
+
.scalio-brand-mark {
|
|
26
|
+
width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center;
|
|
27
|
+
background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
|
|
28
|
+
font-family: 'Chivo', sans-serif; font-weight: 900; font-size: 0.875rem; border-radius: 2px;
|
|
29
|
+
}
|
|
30
|
+
.scalio-brand-text { display: none; flex-direction: column; line-height: 1.2; }
|
|
31
|
+
@media (min-width: 1024px) { .scalio-brand-text { display: flex; } }
|
|
32
|
+
.scalio-brand-name { font-family: 'Chivo', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; font-size: 0.875rem; }
|
|
33
|
+
.scalio-brand-sub, .scalio-eyebrow, .scalio-menu-role {
|
|
34
|
+
font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: hsl(var(--muted-foreground));
|
|
35
|
+
}
|
|
36
|
+
.scalio-brand-sub { font-family: 'JetBrains Mono', monospace; }
|
|
37
|
+
|
|
38
|
+
.scalio-btn {
|
|
39
|
+
display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
|
|
40
|
+
height: 2.25rem; padding: 0 0.625rem; flex-shrink: 0;
|
|
41
|
+
border: 1px solid hsl(var(--input)); border-radius: 2px;
|
|
42
|
+
background: hsl(var(--background)); color: hsl(var(--foreground));
|
|
43
|
+
font: inherit; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
|
|
44
|
+
cursor: pointer; transition: background-color 150ms;
|
|
45
|
+
}
|
|
46
|
+
@media (min-width: 640px) { .scalio-btn { padding: 0 1rem; } }
|
|
47
|
+
.scalio-btn:hover { background: hsl(var(--secondary)); }
|
|
48
|
+
.scalio-btn:focus-visible, .scalio-avatar:focus-visible, .scalio-menu-item:focus-visible {
|
|
49
|
+
outline: 2px solid hsl(var(--ring)); outline-offset: 1px;
|
|
50
|
+
}
|
|
51
|
+
.scalio-btn-icon { width: 2.25rem; padding: 0; }
|
|
52
|
+
.scalio-btn-lang { width: 2.75rem; padding: 0; font-family: 'JetBrains Mono', monospace; }
|
|
53
|
+
.scalio-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
|
|
54
|
+
.scalio-hide-sm { display: none; }
|
|
55
|
+
@media (min-width: 640px) { .scalio-hide-sm { display: inline; } }
|
|
56
|
+
.scalio-menu-toggle { display: inline-flex; }
|
|
57
|
+
@media (min-width: 768px) { .scalio-menu-toggle { display: none; } }
|
|
58
|
+
|
|
59
|
+
.scalio-avatar {
|
|
60
|
+
width: 2.25rem; height: 2.25rem; flex-shrink: 0; border: 0; border-radius: 2px; cursor: pointer;
|
|
61
|
+
background: hsl(var(--foreground)); color: hsl(var(--background));
|
|
62
|
+
font-family: 'Chivo', sans-serif; font-weight: 700; font-size: 0.75rem;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.scalio-dropdown { position: relative; flex-shrink: 0; }
|
|
66
|
+
.scalio-menu {
|
|
67
|
+
position: absolute; right: 0; top: calc(100% + 4px); z-index: 60; min-width: 10rem; padding: 0.25rem;
|
|
68
|
+
background: hsl(var(--popover)); color: hsl(var(--popover-foreground));
|
|
69
|
+
border: 1px solid hsl(var(--border)); border-radius: 2px;
|
|
70
|
+
box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
|
|
71
|
+
text-transform: none; letter-spacing: normal;
|
|
72
|
+
}
|
|
73
|
+
.scalio-menu-wide { width: 16rem; }
|
|
74
|
+
.scalio-menu-label { padding: 0.375rem 0.5rem; }
|
|
75
|
+
.scalio-menu-name { font-size: 0.875rem; font-weight: 600; }
|
|
76
|
+
.scalio-menu-email { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
|
|
77
|
+
.scalio-menu-role { margin-top: 0.25rem; font-weight: 700; }
|
|
78
|
+
.scalio-menu-sep { height: 1px; margin: 0.25rem -0.25rem; background: hsl(var(--border)); }
|
|
79
|
+
.scalio-menu-item {
|
|
80
|
+
display: flex; width: 100%; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem;
|
|
81
|
+
border: 0; border-radius: 2px; background: transparent; color: inherit;
|
|
82
|
+
font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer;
|
|
83
|
+
}
|
|
84
|
+
.scalio-menu-item:hover, .scalio-menu-item:focus { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); outline: none; }
|
|
85
|
+
.scalio-menu-item-danger { color: hsl(var(--destructive)); }
|
|
86
|
+
.scalio-menu-check { margin-left: auto; }
|
|
87
|
+
|
|
88
|
+
.scalio-page-header {
|
|
89
|
+
display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem;
|
|
90
|
+
margin-bottom: 1.5rem;
|
|
91
|
+
}
|
|
92
|
+
.scalio-page-header-text { min-width: 0; }
|
|
93
|
+
.scalio-eyebrow { font-weight: 700; letter-spacing: 0.12em; font-size: 11px; margin-bottom: 0.25rem; }
|
|
94
|
+
.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; }
|
|
95
|
+
@media (min-width: 640px) { .scalio-page-title { font-size: 1.875rem; } }
|
|
96
|
+
.scalio-page-subtitle { margin: 0.25rem 0 0; font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
|
|
97
|
+
.scalio-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
|
|
98
|
+
|
|
99
|
+
.scalio-version {
|
|
100
|
+
padding: 0.5rem 0.75rem; font-family: 'JetBrains Mono', monospace; font-size: 10px;
|
|
101
|
+
text-transform: uppercase; letter-spacing: 0.08em; color: hsl(var(--muted-foreground));
|
|
102
|
+
}
|
|
103
|
+
.scalio-version-commit { opacity: 0.7; text-transform: none; }
|