` group; no JS, works in static SSR. |
+| `StatusPill` (`StatusState`) | `State`* (`Ok`/`Warn`/`Bad`/`Idle`/`Info`), `ChildContent` | Inline chip. `StatusState` enum is in `ZB.MOM.WW.Theme`. |
+| `LoginCard` | `Product`*, `Action` (default `/auth/login`), `ReturnUrl`, `Error`, `ChildContent` | Static form-POST sign-in card. Inject `
+
+
+
+
+
diff --git a/ZB.MOM.WW.Theme/build/pack.sh b/ZB.MOM.WW.Theme/build/pack.sh
new file mode 100755
index 0000000..c166ead
--- /dev/null
+++ b/ZB.MOM.WW.Theme/build/pack.sh
@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+# pack.sh — produce the ZB.MOM.WW.Theme NuGet packages into ./artifacts.
+#
+# Usage:
+# ./build/pack.sh
+
+set -euo pipefail
+
+dotnet pack -c Release -o ./artifacts
diff --git a/ZB.MOM.WW.Theme/build/push.sh b/ZB.MOM.WW.Theme/build/push.sh
new file mode 100755
index 0000000..cd1ce5d
--- /dev/null
+++ b/ZB.MOM.WW.Theme/build/push.sh
@@ -0,0 +1,24 @@
+#!/usr/bin/env bash
+# push.sh — pack and push all ZB.MOM.WW.Theme NuGet packages to the Gitea feed.
+#
+# Required environment variables:
+# GITEA_NUGET_SOURCE — full URL of the Gitea NuGet feed
+# e.g. https://gitea.dohertylan.com/api/packages/dohertj2/nuget/index.json
+# GITEA_NUGET_KEY — Gitea access token with package:write permission
+#
+# Usage:
+# export GITEA_NUGET_SOURCE="https://gitea.dohertylan.com/api/packages/dohertj2/nuget/index.json"
+# export GITEA_NUGET_KEY="your-gitea-token"
+# ./build/push.sh
+
+set -euo pipefail
+
+: "${GITEA_NUGET_SOURCE:?set GITEA_NUGET_SOURCE to your Gitea NuGet feed URL}"
+: "${GITEA_NUGET_KEY:?set GITEA_NUGET_KEY to your Gitea access token}"
+
+dotnet pack -c Release -o ./artifacts
+
+dotnet nuget push "./artifacts/*.nupkg" \
+ --source "$GITEA_NUGET_SOURCE" \
+ --api-key "$GITEA_NUGET_KEY" \
+ --skip-duplicate
diff --git a/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/ButtonVariant.cs b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/ButtonVariant.cs
new file mode 100644
index 0000000..37d0146
--- /dev/null
+++ b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/ButtonVariant.cs
@@ -0,0 +1,3 @@
+namespace ZB.MOM.WW.Theme;
+
+public enum ButtonVariant { Primary, Secondary, Danger, Ghost }
diff --git a/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/BrandBar.razor b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/BrandBar.razor
new file mode 100644
index 0000000..d1420d9
--- /dev/null
+++ b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/BrandBar.razor
@@ -0,0 +1,12 @@
+@* Components/BrandBar.razor *@
+@namespace ZB.MOM.WW.Theme
+
+ /// Optional URL to redirect to after a successful login. Echoed into a hidden
+ ///
+ [Parameter] public string? ReturnUrl { get; set; }
+
+ [Parameter] public string? Error { get; set; }
+
+ ///
+ /// Content rendered inside the form, before the username/password fields.
+ /// The caller MUST supply an antiforgery token here (e.g.
+ [Parameter] public RenderFragment? ChildContent { get; set; }
+}
diff --git a/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/NavRailItem.razor b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/NavRailItem.razor
new file mode 100644
index 0000000..dd5d982
--- /dev/null
+++ b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/NavRailItem.razor
@@ -0,0 +1,13 @@
+@* Components/NavRailItem.razor *@
+@namespace ZB.MOM.WW.Theme
+
+ @if (Icon is not null) { @Icon }
+ @Text
+
+
+@code {
+ [Parameter, EditorRequired] public string Href { get; set; } = string.Empty;
+ [Parameter, EditorRequired] public string Text { get; set; } = string.Empty;
+ [Parameter] public RenderFragment? Icon { get; set; }
+ [Parameter] public NavLinkMatch Match { get; set; } = NavLinkMatch.Prefix;
+}
diff --git a/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/NavRailSection.razor b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/NavRailSection.razor
new file mode 100644
index 0000000..b620734
--- /dev/null
+++ b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/NavRailSection.razor
@@ -0,0 +1,13 @@
+@* Components/NavRailSection.razor — CSS-only collapsible (no JS, works in static SSR).
+ Apps that want cookie-persisted expand state keep their own interactive NavSection. *@
+@namespace ZB.MOM.WW.Theme
+? AdditionalAttributes { get; set; }
+
+ private string VariantClass => Variant switch
+ {
+ ButtonVariant.Secondary => "btn-outline-secondary",
+ ButtonVariant.Danger => "btn-danger",
+ ButtonVariant.Ghost => "btn-link",
+ _ => "btn-primary",
+ };
+}
diff --git a/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/TechCard.razor b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/TechCard.razor
new file mode 100644
index 0000000..8277737
--- /dev/null
+++ b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/TechCard.razor
@@ -0,0 +1,16 @@
+@namespace ZB.MOM.WW.Theme
+@* Components/TechCard.razor *@
+
+ @if (Header is not null) {
+
+@code {
+ [Parameter] public string? Title { get; set; }
+ [Parameter] public RenderFragment? Header { get; set; }
+ [Parameter] public RenderFragment? ChildContent { get; set; }
+ [Parameter] public RenderFragment? Footer { get; set; }
+ [Parameter] public string? Class { get; set; }
+}
diff --git a/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/TechField.razor b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/TechField.razor
new file mode 100644
index 0000000..0ba0d55
--- /dev/null
+++ b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/TechField.razor
@@ -0,0 +1,15 @@
+@namespace ZB.MOM.WW.Theme
+@* Components/TechField.razor *@
+
+
+ ZB.MOM.WW.Theme
+ true
+ true
+ ZB.MOM.WW.Theme
+ Shared Technical-Light UI kit (tokens, fonts, side-rail shell, widgets) for the ZB.MOM.WW SCADA family.
+
+
+
+
+
+
diff --git a/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/_Imports.razor b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/_Imports.razor
new file mode 100644
index 0000000..b47a016
--- /dev/null
+++ b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/_Imports.razor
@@ -0,0 +1,5 @@
+@namespace ZB.MOM.WW.Theme
+@using Microsoft.AspNetCore.Components
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using ZB.MOM.WW.Theme
diff --git a/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/css/layout.css b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/css/layout.css
new file mode 100644
index 0000000..c155f43
--- /dev/null
+++ b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/css/layout.css
@@ -0,0 +1,191 @@
+/* ZB.MOM.WW.Theme — side-rail + login layout
+ Tokens live in theme.css; this sheet carries only layout + the side rail. */
+
+/* ── App shell: side rail + page ─────────────────────────────────────────── */
+/* The outer flex direction is supplied by Bootstrap utilities on the wrapper
+ (`d-flex flex-column flex-lg-row`) so the mobile hamburger row stacks above
+ the rail on summary { list-style: none; cursor: pointer; }
+.rail-section > summary::-webkit-details-marker { display: none; }
+.rail-section > summary::before { content: '\25B6'; font-size: 0.55rem; color: var(--ink-faint); margin-right: 0.4rem; }
+.rail-section[open] > summary::before { content: '\25BC'; }
+
+/* StatusPill: info variant (on-palette, reuses dir-read colours) */
+.chip-info { color: var(--accent-deep); background: #e7ecfb; border-color: #cdd9f7; }
+
+/* TechCard body/footer padding; TechField error; LoginCard body */
+.panel-body { padding: 0.85rem 0.9rem; }
+.panel-foot { padding: 0.6rem 0.9rem; border-top: 1px solid var(--rule); }
+.login-body { padding: 1.4rem 1.1rem 1.25rem; }
+.login-error { margin-bottom: 0.85rem; }
+.field-error { font-size: 0.78rem; margin-top: 0.2rem; }
diff --git a/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/css/theme.css b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/css/theme.css
new file mode 100644
index 0000000..53fb793
--- /dev/null
+++ b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/css/theme.css
@@ -0,0 +1,379 @@
+/* ============================================================================
+ Technical-Light design system — portable theme layer
+ ----------------------------------------------------------------------------
+ A refined technical-light aesthetic: warm-neutral paper, hairline rules,
+ IBM Plex type, monospace tabular numerics, status carried by colour. Built
+ to layer over Bootstrap 5 via --bs-* overrides, but every rule below works
+ standalone — Bootstrap is optional.
+
+ HOW TO ADOPT
+ 1. Serve the three IBM Plex woff2 files (shipped in fonts/) and fix the
+ @font-face url() paths below to wherever you serve them.
+ 2. Include this file once, globally. Add view-specific rules in a separate
+ stylesheet — never edit the token block per-view.
+ 3. Status is colour, not iconography. Use the .s-* / .chip-* / .kv .v.*
+ helpers; do not hand-pick hex values in feature CSS.
+ ========================================================================= */
+
+/* ── Vendored fonts (embedded woff2, no network/CDN fetch) ───────────────────
+ Adjust these url()s to your asset route. If you cannot vendor the fonts the
+ --sans / --mono fallback stacks below degrade gracefully to system fonts. */
+@font-face {
+ font-family: 'IBM Plex Sans';
+ font-style: normal; font-weight: 400; font-display: swap;
+ src: url('../fonts/ibm-plex-sans-400.woff2') format('woff2');
+}
+@font-face {
+ font-family: 'IBM Plex Sans';
+ font-style: normal; font-weight: 600; font-display: swap;
+ src: url('../fonts/ibm-plex-sans-600.woff2') format('woff2');
+}
+@font-face {
+ font-family: 'IBM Plex Mono';
+ font-style: normal; font-weight: 500; font-display: swap;
+ src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
+}
+
+/* ── Design tokens ───────────────────────────────────────────────────────────
+ The single source of truth. Re-theme by editing only this block. */
+:root {
+ /* Surfaces & ink */
+ --paper: #f4f4f1; /* page background — warm off-white, never pure */
+ --card: #ffffff; /* raised surfaces: cards, bars, table heads */
+ --ink: #1b1d21; /* primary text */
+ --ink-soft: #5a6066; /* secondary text, labels */
+ --ink-faint: #8b9097; /* tertiary text, captions, units */
+ --rule: #e4e4df; /* hairline borders / row dividers */
+ --rule-strong: #d2d2cb; /* emphasised hairlines: bar underline, pills */
+
+ /* Accent */
+ --accent: #2f5fd0; /* links, sort arrows, primary actions */
+ --accent-deep: #1e3f99; /* hover / pressed accent, raw-value emphasis */
+
+ /* Status — foreground */
+ --ok: #2f9e44;
+ --warn: #e8920c;
+ --bad: #e03131;
+ --idle: #868e96;
+
+ /* Status — tinted backgrounds (pair with the matching foreground) */
+ --ok-bg: #e9f6ec;
+ --warn-bg: #fdf1dd;
+ --bad-bg: #fceaea;
+ --idle-bg: #eef0f2;
+
+ /* Type stacks — Plex first, graceful system fallback */
+ --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
+ --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
+
+ /* Bootstrap 5 overrides — harmless if Bootstrap is absent */
+ --bs-body-bg: var(--paper);
+ --bs-body-color: var(--ink);
+ --bs-body-font-family: var(--sans);
+ --bs-body-font-size: 0.9rem;
+ --bs-primary: var(--accent);
+ --bs-border-color: var(--rule);
+ --bs-emphasis-color: var(--ink);
+}
+
+/* ── Base ────────────────────────────────────────────────────────────────────
+ The faint top-right radial is the one deliberate flourish — a soft sheen,
+ not a gradient wash. Keep it subtle. */
+body {
+ background:
+ radial-gradient(1200px 480px at 88% -8%, #ffffff 0%, rgba(255,255,255,0) 70%),
+ var(--paper);
+ color: var(--ink);
+ font-family: var(--sans);
+ font-size: 0.9rem;
+ -webkit-font-smoothing: antialiased;
+}
+
+/* Any numeric / fixed-width text. Tabular figures so columns of digits align. */
+.numeric,
+.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
+
+a { color: var(--accent); text-decoration: none; }
+a:hover { color: var(--accent-deep); text-decoration: underline; }
+
+/* ── App chrome: top bar ─────────────────────────────────────────────────────
+ One bar across the top: brand, breadcrumb crumbs, a flex spacer, then meta
+ text and any status pill pushed hard right. */
+.app-bar {
+ display: flex;
+ align-items: baseline;
+ gap: 1rem;
+ padding: 0.85rem 1.25rem;
+ background: var(--card);
+ border-bottom: 1px solid var(--rule-strong);
+}
+.app-bar .brand {
+ font-weight: 600;
+ font-size: 1.05rem;
+ letter-spacing: 0.02em;
+}
+.app-bar .brand .mark { color: var(--accent); } /* the one accent glyph */
+.app-bar .crumb { color: var(--ink-faint); font-size: 0.85rem; }
+.app-bar .spacer { flex: 1; } /* pushes meta/pill right */
+.app-bar .meta {
+ font-family: var(--mono);
+ font-size: 0.78rem;
+ color: var(--ink-soft);
+}
+
+/* ── Connection / liveness pill ──────────────────────────────────────────────
+ A rounded pill with a dot, driven entirely by data-state. Use for any
+ live-link health indicator (websocket, SSE, polling). */
+.conn-pill {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.4rem;
+ font-size: 0.74rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+ padding: 0.2rem 0.6rem;
+ border-radius: 999px;
+ border: 1px solid var(--rule-strong);
+ color: var(--ink-soft);
+ background: var(--card);
+}
+.conn-pill .dot {
+ width: 7px; height: 7px; border-radius: 50%;
+ background: var(--idle);
+}
+.conn-pill[data-state="connected"] { color: var(--ok); border-color: #bfe3c6; background: var(--ok-bg); }
+.conn-pill[data-state="connected"] .dot { background: var(--ok); }
+.conn-pill[data-state="connecting"] { color: var(--warn); border-color: #f0d9ab; background: var(--warn-bg); }
+.conn-pill[data-state="connecting"] .dot { background: var(--warn); animation: pulse 1.1s ease-in-out infinite; }
+.conn-pill[data-state="disconnected"] { color: var(--bad); border-color: #f0c0c0; background: var(--bad-bg); }
+.conn-pill[data-state="disconnected"] .dot { background: var(--bad); }
+
+@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
+
+/* ── Status text helpers ─────────────────────────────────────────────────────
+ Recolour a value in place — counts, ratios, error totals. */
+.s-ok { color: var(--ok); }
+.s-warn { color: var(--warn); }
+.s-bad { color: var(--bad); }
+.s-idle { color: var(--idle); }
+
+/* ── State chip ──────────────────────────────────────────────────────────────
+ Compact rectangular badge for an enumerated state (bound/recovering/…).
+ Squarer than the pill; use the pill for liveness, the chip for state. */
+.chip {
+ display: inline-block;
+ font-size: 0.72rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ padding: 0.15rem 0.5rem;
+ border-radius: 4px;
+ border: 1px solid transparent;
+}
+.chip-ok { color: var(--ok); background: var(--ok-bg); border-color: #c6e6cd; }
+.chip-warn { color: #b56a00; background: var(--warn-bg); border-color: #efd6a6; }
+.chip-bad { color: var(--bad); background: var(--bad-bg); border-color: #eec3c3; }
+.chip-idle { color: var(--ink-soft); background: var(--idle-bg); border-color: var(--rule-strong); }
+
+/* ── Panel — the base raised surface ─────────────────────────────────────────
+ A white card with a hairline border and 8px radius. .panel-head is the
+ uppercase eyebrow label that sits on top. */
+.panel {
+ background: var(--card);
+ border: 1px solid var(--rule);
+ border-radius: 8px;
+}
+.panel-head {
+ font-size: 0.74rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.07em;
+ color: var(--ink-faint);
+ padding: 0.6rem 0.9rem;
+ border-bottom: 1px solid var(--rule);
+}
+
+/* ── Page wrapper ────────────────────────────────────────────────────────────
+ Centred, capped width, even gutter. */
+.page { padding: 1.25rem; max-width: 1680px; margin: 0 auto; }
+
+/* ── Reveal-on-paint ─────────────────────────────────────────────────────────
+ Add .rise to top-level sections; stagger with inline animation-delay
+ (.02s, .08s, .14s …) so panels settle in sequence, not all at once. */
+@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+.rise { animation: rise 0.4s ease both; }
+
+/* ════════════════════════════════════════════════════════════════════════════
+ COMPONENT LIBRARY
+ Generic, reusable pieces. View-specific layout belongs in a separate sheet.
+ ════════════════════════════════════════════════════════════════════════════ */
+
+/* ── KPI / aggregate cards ───────────────────────────────────────────────────
+ A responsive strip of headline numbers. .agg-card.alert / .caution tint the
+ whole card when a watched metric goes non-zero. */
+.agg-grid {
+ display: grid;
+ grid-template-columns: repeat(6, 1fr);
+ gap: 0.75rem;
+ margin-bottom: 1rem;
+}
+@media (max-width: 1100px) { .agg-grid { grid-template-columns: repeat(3, 1fr); } }
+@media (max-width: 620px) { .agg-grid { grid-template-columns: repeat(2, 1fr); } }
+
+.agg-card {
+ background: var(--card);
+ border: 1px solid var(--rule);
+ border-radius: 8px;
+ padding: 0.7rem 0.9rem;
+}
+.agg-label {
+ font-size: 0.68rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.07em;
+ color: var(--ink-faint);
+}
+.agg-value {
+ margin-top: 0.25rem;
+ font-size: 1.5rem;
+ font-weight: 600;
+ line-height: 1.1;
+ display: flex;
+ align-items: baseline;
+ gap: 0.35rem;
+}
+.agg-sub { /* trailing "/ 54", "ms" etc. — quieter */
+ font-size: 0.85rem;
+ font-weight: 400;
+ color: var(--ink-faint);
+}
+.agg-card.alert { border-color: #eec3c3; background: var(--bad-bg); }
+.agg-card.alert .agg-value { color: var(--bad); }
+.agg-card.caution { border-color: #efd6a6; background: var(--warn-bg); }
+.agg-card.caution .agg-value { color: #b56a00; }
+
+/* ── Metric card + key/value rows ────────────────────────────────────────────
+ A .panel-head over a stack of .kv rows: label left, monospace value right.
+ Zebra striping on even rows. .v.warn / .v.bad / .v.ok recolour a value. */
+.card-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
+ gap: 0.85rem;
+ margin-bottom: 1rem;
+}
+.metric-card {
+ background: var(--card);
+ border: 1px solid var(--rule);
+ border-radius: 8px;
+ overflow: hidden;
+}
+.metric-card .panel-head { margin: 0; }
+
+.kv {
+ display: flex;
+ justify-content: space-between;
+ align-items: baseline;
+ gap: 1rem;
+ padding: 0.32rem 0.9rem;
+ font-size: 0.85rem;
+}
+.kv:nth-child(even) { background: #fbfbf9; }
+.kv .k { color: var(--ink-soft); }
+.kv .v {
+ font-family: var(--mono);
+ font-variant-numeric: tabular-nums;
+ text-align: right;
+}
+.kv .v.warn { color: var(--warn); }
+.kv .v.bad { color: var(--bad); }
+.kv .v.ok { color: var(--ok); }
+
+/* ── Toolbar ─────────────────────────────────────────────────────────────────
+ Filter/search row that sits inside a .panel above a table. */
+.toolbar {
+ display: flex;
+ align-items: center;
+ gap: 0.6rem;
+ padding: 0.6rem 0.9rem;
+ border-bottom: 1px solid var(--rule);
+}
+.toolbar .spacer { flex: 1; }
+.tb-search { max-width: 280px; }
+.tb-state { max-width: 150px; }
+.tb-check {
+ display: flex; align-items: center; gap: 0.35rem;
+ font-size: 0.82rem; color: var(--ink-soft); white-space: nowrap;
+ user-select: none;
+}
+.tb-count { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-faint); }
+
+/* ── Data table ──────────────────────────────────────────────────────────────
+ Dense, hairline-ruled table. Uppercase sticky head on a faint fill; numeric
+ columns get .num (right-aligned, monospace). Rows are clickable by default —
+ drop the cursor/hover rules if yours are not. */
+.table-wrap { overflow-x: auto; }
+
+.data-table {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 0.85rem;
+}
+.data-table th,
+.data-table td {
+ padding: 0.45rem 0.8rem;
+ text-align: left;
+ white-space: nowrap;
+ border-bottom: 1px solid var(--rule);
+}
+.data-table th {
+ font-size: 0.7rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ color: var(--ink-faint);
+ background: #fbfbf9;
+ position: sticky;
+ top: 0;
+}
+.data-table th.num,
+.data-table td.num { text-align: right; font-family: var(--mono); }
+
+.data-table th.sortable { cursor: pointer; user-select: none; }
+.data-table th.sortable:hover { color: var(--ink); }
+.data-table th.sorted-asc::after { content: ' \2191'; color: var(--accent); }
+.data-table th.sorted-desc::after { content: ' \2193'; color: var(--accent); }
+
+.data-table tbody tr { cursor: pointer; transition: background 0.08s; }
+.data-table tbody tr:hover { background: #f3f6fd; }
+.data-table tbody tr:last-child td { border-bottom: none; }
+
+.empty-row {
+ text-align: center !important;
+ color: var(--ink-faint);
+ padding: 1.6rem !important;
+ font-style: italic;
+}
+
+/* ── Direction / category tag ────────────────────────────────────────────────
+ Tiny inline tag for a per-row category (e.g. read vs write). */
+.dir-tag {
+ font-size: 0.68rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ padding: 0.1rem 0.4rem;
+ border-radius: 3px;
+}
+.dir-read { color: var(--accent-deep); background: #e7ecfb; }
+.dir-write { color: #8a5a00; background: var(--warn-bg); }
+
+/* ── Inline notice ───────────────────────────────────────────────────────────
+ A .panel with a warning tint — for "this thing is gone / degraded" banners. */
+.notice {
+ padding: 0.85rem 1.1rem;
+ margin-bottom: 1rem;
+ color: #b56a00;
+ background: var(--warn-bg);
+ border-color: #efd6a6;
+}
diff --git a/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/fonts/ibm-plex-mono-500.woff2 b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/fonts/ibm-plex-mono-500.woff2
new file mode 100644
index 0000000..99c2610
Binary files /dev/null and b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/fonts/ibm-plex-mono-500.woff2 differ
diff --git a/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/fonts/ibm-plex-sans-400.woff2 b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/fonts/ibm-plex-sans-400.woff2
new file mode 100644
index 0000000..93bcd64
Binary files /dev/null and b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/fonts/ibm-plex-sans-400.woff2 differ
diff --git a/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/fonts/ibm-plex-sans-600.woff2 b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/fonts/ibm-plex-sans-600.woff2
new file mode 100644
index 0000000..0ac91d6
Binary files /dev/null and b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/fonts/ibm-plex-sans-600.woff2 differ
diff --git a/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/BrandBarTests.cs b/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/BrandBarTests.cs
new file mode 100644
index 0000000..40b6774
--- /dev/null
+++ b/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/BrandBarTests.cs
@@ -0,0 +1,22 @@
+namespace ZB.MOM.WW.Theme.Tests;
+
+public class BrandBarTests : TestContext
+{
+ [Fact]
+ public void Renders_product_with_default_mark()
+ {
+ var cut = RenderComponent(p => p.Add(x => x.Product, "OtOpcUa"));
+ Assert.Contains("OtOpcUa", cut.Markup);
+ Assert.NotNull(cut.Find(".brand .mark")); // default glyph when no Logo
+ }
+
+ [Fact]
+ public void Custom_logo_replaces_default_mark()
+ {
+ var cut = RenderComponent(p => p
+ .Add(x => x.Product, "ScadaBridge")
+ .Add(x => x.Logo, (RenderFragment)(b => b.AddMarkupContent(0, "![]()
"))));
+ Assert.NotNull(cut.Find(".brand .logo"));
+ Assert.Empty(cut.FindAll(".brand .mark"));
+ }
+}
diff --git a/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/CommonControlsTests.cs b/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/CommonControlsTests.cs
new file mode 100644
index 0000000..97ca130
--- /dev/null
+++ b/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/CommonControlsTests.cs
@@ -0,0 +1,59 @@
+namespace ZB.MOM.WW.Theme.Tests;
+
+public class CommonControlsTests : TestContext
+{
+ [Theory]
+ [InlineData(ButtonVariant.Primary, "btn-primary")]
+ [InlineData(ButtonVariant.Secondary, "btn-outline-secondary")]
+ [InlineData(ButtonVariant.Danger, "btn-danger")]
+ [InlineData(ButtonVariant.Ghost, "btn-link")]
+ public void TechButton_maps_variant(ButtonVariant v, string cls)
+ {
+ var cut = RenderComponent(p => p.Add(x => x.Variant, v).AddChildContent("Go"));
+ var btn = cut.Find("button");
+ Assert.Contains("btn", btn.ClassList);
+ Assert.Contains(cls, btn.ClassList);
+ }
+
+ [Fact]
+ public void TechButton_busy_disables_and_passes_through_attributes()
+ {
+ var cut = RenderComponent(p => p
+ .Add(x => x.Busy, true)
+ .AddUnmatched("id", "save")
+ .AddChildContent("Save"));
+ var btn = cut.Find("button");
+ Assert.True(btn.HasAttribute("disabled"));
+ Assert.Equal("save", btn.GetAttribute("id"));
+ }
+
+ [Fact]
+ public void TechButton_not_busy_is_not_disabled()
+ {
+ var cut = RenderComponent(p => p.Add(x => x.Busy, false).AddChildContent("Go"));
+ Assert.False(cut.Find("button").HasAttribute("disabled"));
+ }
+
+ [Fact]
+ public void TechCard_renders_title_and_body()
+ {
+ var cut = RenderComponent(p => p
+ .Add(x => x.Title, "Drivers")
+ .AddChildContent("(p => p
+ .Add(x => x.Label, "Name")
+ .Add(x => x.Hint, "required")
+ .Add(x => x.Error, "missing")
+ .AddChildContent(""));
+ Assert.Contains("Name", cut.Find("label").TextContent);
+ Assert.Contains("required", cut.Find(".form-text").TextContent);
+ Assert.Contains("missing", cut.Find(".field-error").TextContent);
+ }
+}
diff --git a/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/LoginCardTests.cs b/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/LoginCardTests.cs
new file mode 100644
index 0000000..a98a74c
--- /dev/null
+++ b/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/LoginCardTests.cs
@@ -0,0 +1,44 @@
+namespace ZB.MOM.WW.Theme.Tests;
+
+public class LoginCardTests : TestContext
+{
+ [Fact]
+ public void Posts_to_action_with_username_password_fields()
+ {
+ var cut = RenderComponent(p => p
+ .Add(x => x.Product, "OtOpcUa")
+ .Add(x => x.Action, "/auth/login"));
+ var form = cut.Find("form");
+ Assert.Equal("post", form.GetAttribute("method"));
+ Assert.Equal("/auth/login", form.GetAttribute("action"));
+ Assert.NotNull(cut.Find("input#username"));
+ Assert.NotNull(cut.Find("input#password"));
+ Assert.Contains("OtOpcUa", cut.Find(".login-title").TextContent);
+ }
+
+ [Fact]
+ public void ReturnUrl_renders_hidden_input()
+ {
+ var cut = RenderComponent(p => p
+ .Add(x => x.Product, "OtOpcUa")
+ .Add(x => x.ReturnUrl, "/clusters"));
+ var hidden = cut.Find("input[name=returnUrl]");
+ Assert.Equal("/clusters", hidden.GetAttribute("value"));
+ }
+
+ [Fact]
+ public void Error_renders_notice()
+ {
+ var cut = RenderComponent(p => p
+ .Add(x => x.Product, "OtOpcUa")
+ .Add(x => x.Error, "Bad credentials"));
+ Assert.Contains("Bad credentials", cut.Find(".notice").TextContent);
+ }
+
+ [Fact]
+ public void No_returnUrl_no_hidden_input()
+ {
+ var cut = RenderComponent(p => p.Add(x => x.Product, "OtOpcUa"));
+ Assert.Empty(cut.FindAll("input[name=returnUrl]"));
+ }
+}
diff --git a/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/NavRailTests.cs b/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/NavRailTests.cs
new file mode 100644
index 0000000..479a05b
--- /dev/null
+++ b/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/NavRailTests.cs
@@ -0,0 +1,36 @@
+namespace ZB.MOM.WW.Theme.Tests;
+
+public class NavRailTests : TestContext
+{
+ [Fact]
+ public void NavRailItem_renders_rail_link_with_href_and_text()
+ {
+ var cut = RenderComponent(p => p
+ .Add(x => x.Href, "/clusters")
+ .Add(x => x.Text, "Clusters"));
+ var a = cut.Find("a.rail-link");
+ Assert.Equal("/clusters", a.GetAttribute("href"));
+ Assert.Contains("Clusters", a.TextContent);
+ }
+
+ [Fact]
+ public void NavRailSection_renders_title_and_children_open_by_default()
+ {
+ var cut = RenderComponent(p => p
+ .Add(x => x.Title, "Navigation")
+ .AddChildContent("X"));
+ var details = cut.Find("details.rail-section");
+ Assert.True(details.HasAttribute("open"));
+ Assert.Contains("Navigation", cut.Find("summary").TextContent);
+ Assert.NotNull(cut.Find(".rail-section-body .rail-link"));
+ }
+
+ [Fact]
+ public void NavRailSection_collapsed_when_not_expanded()
+ {
+ var cut = RenderComponent(p => p
+ .Add(x => x.Title, "Nav").Add(x => x.Expanded, false)
+ .AddChildContent("X"));
+ Assert.False(cut.Find("details.rail-section").HasAttribute("open"));
+ }
+}
diff --git a/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/StaticAssetsTests.cs b/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/StaticAssetsTests.cs
new file mode 100644
index 0000000..2bc89ec
--- /dev/null
+++ b/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/StaticAssetsTests.cs
@@ -0,0 +1,35 @@
+using System.IO;
+
+namespace ZB.MOM.WW.Theme.Tests;
+
+public class StaticAssetsTests
+{
+ // wwwroot is copied next to the test assembly via the RCL static-web-asset pipeline,
+ // but the simplest stable check is against the source tree relative to the test binary.
+ private static string Wwwroot =>
+ Path.GetFullPath(Path.Combine(AppContext.BaseDirectory,
+ "..", "..", "..", "..", "..", "src", "ZB.MOM.WW.Theme", "wwwroot"));
+
+ [Fact]
+ public void ThemeCss_exists_and_defines_accent_token()
+ {
+ var css = File.ReadAllText(Path.Combine(Wwwroot, "css", "theme.css"));
+ Assert.Contains("--accent:", css);
+ Assert.Contains("--ok:", css);
+ }
+
+ [Fact]
+ public void ThemeCss_uses_corrected_relative_font_path()
+ {
+ var css = File.ReadAllText(Path.Combine(Wwwroot, "css", "theme.css"));
+ Assert.Contains("url('../fonts/ibm-plex-sans-400.woff2')", css);
+ Assert.DoesNotContain("url('fonts/ibm-plex", css); // the latent 404 path is gone
+ }
+
+ [Theory]
+ [InlineData("ibm-plex-sans-400.woff2")]
+ [InlineData("ibm-plex-sans-600.woff2")]
+ [InlineData("ibm-plex-mono-500.woff2")]
+ public void Fonts_are_vendored(string file) =>
+ Assert.True(File.Exists(Path.Combine(Wwwroot, "fonts", file)));
+}
diff --git a/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/StatusPillTests.cs b/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/StatusPillTests.cs
new file mode 100644
index 0000000..de42144
--- /dev/null
+++ b/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/StatusPillTests.cs
@@ -0,0 +1,21 @@
+namespace ZB.MOM.WW.Theme.Tests;
+
+public class StatusPillTests : TestContext
+{
+ [Theory]
+ [InlineData(StatusState.Ok, "chip-ok")]
+ [InlineData(StatusState.Warn, "chip-warn")]
+ [InlineData(StatusState.Bad, "chip-bad")]
+ [InlineData(StatusState.Idle, "chip-idle")]
+ [InlineData(StatusState.Info, "chip-info")]
+ public void Maps_state_to_chip_class(StatusState state, string expected)
+ {
+ var cut = RenderComponent(p => p
+ .Add(x => x.State, state)
+ .AddChildContent("Connected"));
+ var span = cut.Find("span");
+ Assert.Contains("chip", span.ClassList);
+ Assert.Contains(expected, span.ClassList);
+ Assert.Equal("Connected", span.TextContent.Trim());
+ }
+}
diff --git a/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/ThemeHeadTests.cs b/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/ThemeHeadTests.cs
new file mode 100644
index 0000000..1cbed92
--- /dev/null
+++ b/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/ThemeHeadTests.cs
@@ -0,0 +1,13 @@
+namespace ZB.MOM.WW.Theme.Tests;
+
+public class ThemeHeadTests : TestContext
+{
+ [Fact]
+ public void Emits_theme_and_layout_links_to_content_path()
+ {
+ var cut = RenderComponent();
+ var hrefs = cut.FindAll("link").Select(l => l.GetAttribute("href")).ToList();
+ Assert.Contains("_content/ZB.MOM.WW.Theme/css/theme.css", hrefs);
+ Assert.Contains("_content/ZB.MOM.WW.Theme/css/layout.css", hrefs);
+ }
+}
diff --git a/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/ThemeShellTests.cs b/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/ThemeShellTests.cs
new file mode 100644
index 0000000..cb8c6c8
--- /dev/null
+++ b/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/ThemeShellTests.cs
@@ -0,0 +1,43 @@
+namespace ZB.MOM.WW.Theme.Tests;
+
+public class ThemeShellTests : TestContext
+{
+ [Fact]
+ public void Renders_product_nav_and_body()
+ {
+ var cut = RenderComponent(p => p
+ .Add(x => x.Product, "OtOpcUa")
+ .Add(x => x.Nav, (RenderFragment)(b => b.AddMarkupContent(0, "N")))
+ .AddChildContent("(p => p
+ .Add(x => x.Product, "ScadaBridge")
+ .Add(x => x.Accent, "#2f855a"));
+ var shell = cut.Find(".app-shell");
+ Assert.Contains("--accent: #2f855a", shell.GetAttribute("style"));
+ }
+
+ [Fact]
+ public void No_accent_emits_no_style()
+ {
+ var cut = RenderComponent(p => p.Add(x => x.Product, "MXAccess Gateway"));
+ Assert.False(cut.Find(".app-shell").HasAttribute("style"));
+ }
+
+ [Fact]
+ public void RailFooter_renders_when_supplied()
+ {
+ var cut = RenderComponent(p => p
+ .Add(x => x.Product, "OtOpcUa")
+ .Add(x => x.RailFooter, (RenderFragment)(b => b.AddMarkupContent(0, "S"))));
+ Assert.NotNull(cut.Find(".rail-foot .sess"));
+ }
+}
diff --git a/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/ZB.MOM.WW.Theme.Tests.csproj b/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/ZB.MOM.WW.Theme.Tests.csproj
new file mode 100644
index 0000000..0c719d7
--- /dev/null
+++ b/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/ZB.MOM.WW.Theme.Tests.csproj
@@ -0,0 +1,15 @@
+
+
+ false
+
+
+
+
+
+
diff --git a/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/_Imports.cs b/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/_Imports.cs
new file mode 100644
index 0000000..5fc9bb5
--- /dev/null
+++ b/ZB.MOM.WW.Theme/tests/ZB.MOM.WW.Theme.Tests/_Imports.cs
@@ -0,0 +1,4 @@
+global using Bunit;
+global using Xunit;
+global using Microsoft.AspNetCore.Components;
+global using ZB.MOM.WW.Theme;
diff --git a/components/README.md b/components/README.md
index a65fa6b..5dfd0ef 100644
--- a/components/README.md
+++ b/components/README.md
@@ -18,6 +18,7 @@ specs and analyses that *drive* changes made in the individual repos.
| Component | Status | Applies to | Goal | Folder |
|---|---|---|---|---|
| Auth (login / identity / authz) | Draft | OtOpcUa, MxAccessGateway, ScadaBridge | Path to shared code (`ZB.MOM.WW.Auth`) | [`auth/`](auth/) |
+| UI Theme (layout / tokens / components) | Draft | OtOpcUa, MxAccessGateway, ScadaBridge | Path to shared code (`ZB.MOM.WW.Theme`) | [`ui-theme/`](ui-theme/) |
> Add a row when you start normalizing a new component. Status: `Draft` → `Reviewed` → `Adopting` → `Converged`.
diff --git a/components/ui-theme/GAPS.md b/components/ui-theme/GAPS.md
new file mode 100644
index 0000000..c2d94e3
--- /dev/null
+++ b/components/ui-theme/GAPS.md
@@ -0,0 +1,90 @@
+# UI Theme — gaps & adoption backlog
+
+Divergence of each project from [`spec/SPEC.md`](spec/SPEC.md), and the ordered backlog to
+reach adoption of the `ZB.MOM.WW.Theme` shared RCL. Status legend: ⛔ gap · 🟡 partial · ✅ matches.
+
+---
+
+## Divergence vs spec
+
+### §1 Design tokens — `theme.css`
+
+| Item | OtOpcUa | MxAccessGateway | ScadaBridge |
+|---|---|---|---|
+| Tokens identical to canonical | ✅ identical | ✅ identical | ✅ identical |
+| File maintained in one place (RCL) | ⛔ own copy | ⛔ own copy | ⛔ own copy |
+| Font path `url('../fonts/…')` | ⛔ `url('fonts/…')` — **latent 404** | 🟡 `url('/fonts/…')` — absolute, not portable | ✅ `url('../fonts/…')` — correct |
+| IBM Plex fonts in one place | ⛔ own `wwwroot/fonts/` | ⛔ own `wwwroot/fonts/` | ⛔ own `wwwroot/fonts/` |
+
+→ **Gap T1:** All three apps maintain a copy of `theme.css` — the single-source guarantee
+ is broken today. Any token change must be applied in four places (three apps + the RCL)
+ once the RCL exists.
+→ **Gap T2:** OtOpcUa `url('fonts/…')` is a latent 404 masked by system-font fallback.
+ Adoption fixes it automatically.
+→ **Gap T3:** Each app vendors fonts — 3× duplication. The RCL eliminates it.
+
+### §2 Typography
+
+All three apps reference IBM Plex via the token stacks. No typography divergence — the
+token values are identical. Gap is delivery (T3 above).
+
+### §3 Canonical side-rail layout
+
+| Item | OtOpcUa | MxAccessGateway | ScadaBridge |
+|---|---|---|---|
+| `.app-shell` root element | ✅ `div.app-shell` | ⛔ `div.d-flex …` (no `.app-shell`) | ⛔ `div.d-flex …` (no `.app-shell`) |
+| Rail CSS class | ✅ `.side-rail` | ⛔ `.sidebar` | ⛔ `.sidebar` |
+| Nav item CSS class | ✅ `.rail-link` | ⛔ `.nav-link` | ⛔ `.nav-link` |
+| Nav item element | ✅ `` (NavLink) | ⛔ `` inside `
+ @if (Logo is not null) { @Logo }
+ else { ▮ }
+ @Product
+
+
+@code {
+ [Parameter, EditorRequired] public string Product { get; set; } = string.Empty;
+ [Parameter] public RenderFragment? Logo { get; set; }
+}
diff --git a/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/LoginCard.razor b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/LoginCard.razor
new file mode 100644
index 0000000..0f6fb3e
--- /dev/null
+++ b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/LoginCard.razor
@@ -0,0 +1,58 @@
+@namespace ZB.MOM.WW.Theme
+@* Components/LoginCard.razor — static form-POST sign-in card.
+ SECURITY NOTES:
+ - ReturnUrl is echoed into a hidden field verbatim; the consuming app's POST handler
+ MUST validate it is a local/relative URL before redirecting to prevent open-redirect.
+ - This form is NOT auto-protected by Blazor antiforgery; the caller MUST pass an
+ antiforgery token via ChildContent (e.g.
+
+
+
+
+@code {
+ [Parameter, EditorRequired] public string Product { get; set; } = string.Empty;
+ [Parameter] public string Action { get; set; } = "/auth/login";
+
+ ///
+
+ @Product — sign in
+ +
+ /// Optional URL to redirect to after a successful login. Echoed into a hidden
+ /// returnUrl field. The consuming app's POST handler MUST validate this is
+ /// a local/relative URL before redirecting — do not redirect to arbitrary values
+ /// to prevent open-redirect vulnerabilities.
+ ///
+ [Parameter] public string? ReturnUrl { get; set; }
+
+ [Parameter] public string? Error { get; set; }
+
+ ///
+ /// Content rendered inside the form, before the username/password fields.
+ /// The caller MUST supply an antiforgery token here (e.g. <AntiforgeryToken /> )
+ /// because this static POST form is not auto-protected by Blazor's antiforgery middleware.
+ ///
+ [Parameter] public RenderFragment? ChildContent { get; set; }
+}
diff --git a/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/NavRailItem.razor b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/NavRailItem.razor
new file mode 100644
index 0000000..dd5d982
--- /dev/null
+++ b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/NavRailItem.razor
@@ -0,0 +1,13 @@
+@* Components/NavRailItem.razor *@
+@namespace ZB.MOM.WW.Theme
+
+
+
+@code {
+ [Parameter, EditorRequired] public string Title { get; set; } = string.Empty;
+ [Parameter] public bool Expanded { get; set; } = true;
+ [Parameter] public RenderFragment? ChildContent { get; set; }
+}
diff --git a/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/StatusPill.razor b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/StatusPill.razor
new file mode 100644
index 0000000..99de38a
--- /dev/null
+++ b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/StatusPill.razor
@@ -0,0 +1,17 @@
+@* Components/StatusPill.razor *@
+@namespace ZB.MOM.WW.Theme
+@ChildContent
+
+@code {
+ [Parameter, EditorRequired] public StatusState State { get; set; }
+ [Parameter] public RenderFragment? ChildContent { get; set; }
+
+ private string ChipClass => State switch
+ {
+ StatusState.Ok => "chip-ok",
+ StatusState.Warn => "chip-warn",
+ StatusState.Bad => "chip-bad",
+ StatusState.Info => "chip-info",
+ _ => "chip-idle",
+ };
+}
diff --git a/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/TechButton.razor b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/TechButton.razor
new file mode 100644
index 0000000..871db30
--- /dev/null
+++ b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/TechButton.razor
@@ -0,0 +1,22 @@
+@namespace ZB.MOM.WW.Theme
+@* Components/TechButton.razor *@
+
+
+@code {
+ [Parameter] public ButtonVariant Variant { get; set; } = ButtonVariant.Primary;
+ [Parameter] public string Type { get; set; } = "button";
+ [Parameter] public bool Busy { get; set; }
+ [Parameter] public RenderFragment? ChildContent { get; set; }
+ [Parameter(CaptureUnmatchedValues = true)] public IDictionary@Title
+@ChildContent
+@Header
}
+ else if (!string.IsNullOrEmpty(Title)) { @Title
}
+ @ChildContent
+ @if (Footer is not null) { @Footer
}
+
+
+ @ChildContent
+ @if (!string.IsNullOrEmpty(Hint)) {
+
+@code {
+ [Parameter, EditorRequired] public string Label { get; set; } = string.Empty;
+ [Parameter] public string? Hint { get; set; }
+ [Parameter] public string? Error { get; set; }
+ [Parameter] public RenderFragment? ChildContent { get; set; }
+}
diff --git a/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/ThemeHead.razor b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/ThemeHead.razor
new file mode 100644
index 0000000..3d20232
--- /dev/null
+++ b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/ThemeHead.razor
@@ -0,0 +1,4 @@
+@namespace ZB.MOM.WW.Theme
+@* Components/ThemeHead.razor — drop in , AFTER your Bootstrap . *@
+
+
diff --git a/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/ThemeShell.razor b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/ThemeShell.razor
new file mode 100644
index 0000000..0e4977b
--- /dev/null
+++ b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/Components/ThemeShell.razor
@@ -0,0 +1,32 @@
+@* Components/ThemeShell.razor — the one canonical side-rail chassis.
+ Not a LayoutComponentBase: the app's thin MainLayout delegates to this. *@
+@namespace ZB.MOM.WW.Theme
+@Hint
}
+ @if (!string.IsNullOrEmpty(Error)) { @Error
}
+
+
+ @ChildContent
+
+
+@code {
+ [Parameter, EditorRequired] public string Product { get; set; } = string.Empty;
+ [Parameter] public string? Accent { get; set; }
+ [Parameter] public RenderFragment? Logo { get; set; }
+ [Parameter] public RenderFragment? Nav { get; set; }
+ [Parameter] public RenderFragment? RailFooter { get; set; }
+ [Parameter] public RenderFragment? ChildContent { get; set; }
+
+ private string? AccentStyle => Accent is null ? null : $"--accent: {Accent}";
+}
diff --git a/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/StatusState.cs b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/StatusState.cs
new file mode 100644
index 0000000..c39b646
--- /dev/null
+++ b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/StatusState.cs
@@ -0,0 +1,3 @@
+namespace ZB.MOM.WW.Theme;
+
+public enum StatusState { Ok, Warn, Bad, Idle, Info }
diff --git a/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/ZB.MOM.WW.Theme.csproj b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/ZB.MOM.WW.Theme.csproj
new file mode 100644
index 0000000..5362dc5
--- /dev/null
+++ b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/ZB.MOM.WW.Theme.csproj
@@ -0,0 +1,15 @@
+
+
+
+ x
"));
+ Assert.Contains("Drivers", cut.Find(".panel-head").TextContent);
+ Assert.NotNull(cut.Find(".panel-body .b"));
+ }
+
+ [Fact]
+ public void TechField_renders_label_hint_error()
+ {
+ var cut = RenderComponentBODY
"));
+ Assert.NotNull(cut.Find(".side-rail .brand"));
+ Assert.Contains("OtOpcUa", cut.Markup);
+ Assert.NotNull(cut.Find(".side-rail .rail-link"));
+ Assert.NotNull(cut.Find("main.page .pagebody"));
+ }
+
+ [Fact]
+ public void Accent_sets_css_variable_on_shell_root()
+ {
+ var cut = RenderComponent- ` | ⛔ `
` inside ` - ` |
+| Shell component | ⛔ bespoke `MainLayout` + `NavSidebar` | ⛔ combined `MainLayout` (210 lines) | ⛔ `MainLayout` + `NavMenu` |
+| Thin-MainLayout pattern | ⛔ not yet | ⛔ not yet | ⛔ not yet |
+
+→ **Gap L1:** OtOpcUa already uses the right CSS classes but the component structure
+ doesn't use `ThemeShell`. Low-risk migration.
+→ **Gap L2:** MxAccessGateway and ScadaBridge use `.sidebar` / `.nav-link` / `
- `. + Migration requires class name changes throughout their nav markup and `site.css` sidebar + blocks. Medium (ScadaBridge) to high (MxGateway combined layout) risk. + +### §4 Component contract + +| Component | OtOpcUa | MxAccessGateway | ScadaBridge | +|---|---|---|---| +| `StatusPill` (vs bespoke `StatusBadge`) | ⛔ `StatusBadge` (string CSS class) | ⛔ `StatusBadge` (string text → class) | ⛔ raw `.chip-*` classes inline | +| `LoginCard` | ⛔ inline markup in `Login.razor` | ⛔ no Blazor login page | ⛔ Bootstrap `.card` markup in `Login.razor` | +| `NavRailItem` / `NavRailSection` | ⛔ `NavLink` + `NavSection` (interactive) | ⛔ `NavLink`+`
- ` + `NavSection` | ⛔ `NavLink`+`
- ` + `NavSection` |
+| `ThemeShell` / thin `MainLayout` | ⛔ not yet | ⛔ not yet | ⛔ not yet |
+| `ThemeHead` | ⛔ manual `` tags | ⛔ manual `` tags | ⛔ manual `` tags |
+
+### §5 Delivery
+
+| Item | OtOpcUa | MxAccessGateway | ScadaBridge |
+|---|---|---|---|
+| Asset via `_content/ZB.MOM.WW.Theme/…` | ⛔ `_content/…AdminUI/css/…` | ⛔ root-relative `/css/…` | ⛔ `_content/…CentralUI/css/…` |
+| `
` in `` | ⛔ manual `` tags | ⛔ manual `` tags | ⛔ manual `` tags | + +--- + +## Adoption backlog (ordered) + +| # | Item | Projects | Priority | Effort | Risk | Notes | +|---|---|---|---|---|---|---| +| 1 | Build `ZB.MOM.WW.Theme` RCL | scadaproj | High | M | Low | **DONE** — `0.1.0` built + tested in this repo | +| 2 | Adopt in OtOpcUa AdminUI | OtOpcUa | High | S | Low | Already rail; fix latent font 404; cookie nav-state optional retain | +| 3 | Adopt in ScadaBridge CentralUI + Host | ScadaBridge | Med | M | Med | Sidebar class migration + `MainLayout` replace; scoped `.razor.css` unchanged | +| 4 | Adopt in MxAccessGateway Dashboard | MxAccessGateway | Low | L | High | Combined `MainLayout` migration; sidebar idiom change; largest UX-visible change — verify visually | + +**Sequencing:** #2 first (lowest risk, validates the adoption pattern); #3 next (medium +effort, no design change); #4 last (highest risk — verify dashboard UX thoroughly before +merging). Each adoption is a per-repo PR, independent. + +--- + +## Open questions + +- **MxGateway login:** No Blazor login page today. If one is added during adoption (#4), + use ` `. If the server-redirect pattern is kept, ` ` is not needed. +- **OtOpcUa cookie nav state:** Decide whether to retain `otopcua_nav` cookie persistence + (keep bespoke interactive `NavSection` alongside `ThemeShell`'s `Nav` slot) or drop it + (CSS-only `NavRailSection` replaces it, losing expand-state persistence across page loads). +- **ScadaBridge `AuthorizeView` policy gating in nav:** Verify ` ` inside + ` ` renders + hides correctly with the canonical SSR rendering model. diff --git a/components/ui-theme/README.md b/components/ui-theme/README.md new file mode 100644 index 0000000..c257220 --- /dev/null +++ b/components/ui-theme/README.md @@ -0,0 +1,45 @@ +# UI Theme (layout / tokens / components) + +Second normalized component. **Goal: path to shared code** — converge the three sister +projects onto a common "Technical-Light" design system, realized as the `ZB.MOM.WW.Theme` +Razor Class Library. + +- The one target: [`spec/SPEC.md`](spec/SPEC.md) +- Design tokens reference: [`spec/DESIGN-TOKENS.md`](spec/DESIGN-TOKENS.md) +- The shared library: [`shared-contract/ZB.MOM.WW.Theme.md`](shared-contract/ZB.MOM.WW.Theme.md) +- Divergences + backlog: [`GAPS.md`](GAPS.md) +- Current state, per project: [`current-state/`](current-state/) + +## Why UI theme is a strong candidate + +All three sister apps share a Blazor SSR + Bootstrap 5 UI stack and each ships a +hand-copied **379-line `theme.css`** (the "Technical-Light" design system: IBM Plex +`@font-face`, `:root` design tokens, status palette, typography helpers). **The three +copies are byte-for-byte identical except for three lines** — the `@font-face` `src:` +URL prefix differs per app deployment convention. IBM Plex `.woff2` fonts are likewise +vendored three times into each app's `wwwroot/fonts/`. This is the textbook drift +situation: a shared design system already beginning to diverge, with a latent font-path +bug in one app (OtOpcUa) that goes unnoticed because browsers fall back to system fonts. + +## Status by project + +| Project | Surface | Layout today | Adoption status | +|---|---|---|---| +| **OtOpcUa** | `ZB.MOM.WW.OtOpcUa.AdminUI` | Side rail (`NavSidebar.razor`) + `theme.css` + IBM Plex | Not started | +| **MxAccessGateway** | `ZB.MOM.WW.MxGateway.Server` Dashboard | Sidebar (`nav.sidebar`) + `theme.css` + IBM Plex | Not started | +| **ScadaBridge** | `ZB.MOM.WW.ScadaBridge.Host` + `.CentralUI` (RCL) | Own `MainLayout` + `NavMenu` (`nav.sidebar`) + `theme.css` + IBM Plex | Not started | + +See each project's [`current-state/ /CURRENT-STATE.md`](current-state/) for the +code-verified detail and its adoption plan. + +## Normalized vs. left per-project + +**Normalized (extracted into the RCL `ZB.MOM.WW.Theme`):** design tokens + IBM Plex +fonts, the canonical side-rail shell (`ThemeShell` + `BrandBar` + `NavRailItem` + +`NavRailSection`), and the four widgets (`StatusPill`, `LoginCard`, `TechButton`, +`TechCard`, `TechField`). One RCL, one package, one version. + +**Left per-project (NOT extracted):** each app's `site.css` residual page layout, its +page/route content, and app-specific scoped `.razor.css` (e.g. ScadaBridge's +`MultiSelectDropdown`, `TreeView`, `Audit/*`). The kit owns the *chrome and tokens*, not +the app's domain screens. diff --git a/components/ui-theme/current-state/mxaccessgw/CURRENT-STATE.md b/components/ui-theme/current-state/mxaccessgw/CURRENT-STATE.md new file mode 100644 index 0000000..fc1e47b --- /dev/null +++ b/components/ui-theme/current-state/mxaccessgw/CURRENT-STATE.md @@ -0,0 +1,161 @@ +# UI Theme — current state: MxAccessGateway + +Repo: `~/Desktop/MxAccessGateway` (Gitea `mxaccessgw`). Stack: .NET 10, Blazor SSR +(gateway x64) — UI in `src/ZB.MOM.WW.MxGateway.Server/`. +All paths below are relative to the repo root. Verified against source on 2026-06-01. + +**Summary:** MxAccessGateway uses a sidebar nav layout and the Technical-Light tokens, but +the sidebar uses Bootstrap `.sidebar` / `.nav-link` classes rather than the canonical +`.side-rail` / `.rail-link` classes, and the overall structure diverges from the spec +target. Adoption has the **highest effort and risk** of the three apps — the shell +requires migration from its current sidebar idiom to the canonical `ThemeShell` pattern. +There is no dedicated login page (authentication gate is integrated into the Dashboard). + +--- + +## 1. CSS / design tokens + +**`theme.css`** — 379-line hand copy of the Technical-Light design system. Identical in +content to OtOpcUa's and ScadaBridge's copies except for the font-path prefix. +- Path: `src/ZB.MOM.WW.MxGateway.Server/wwwroot/css/theme.css` +- Font path: `url('/fonts/ibm-plex-sans-400.woff2')` (lines 24, 29, 34) +- Absolute path (`/fonts/…`) is technically correct (resolves from root of the app), but + differs from the canonical `url('../fonts/…')` in the RCL — a deployment path difference, + not a loading bug. +- Wired in `App.razor` line 6: ``. + +**`site.css`** — 592 lines of per-app page layout and Dashboard component styling. +- Path: `src/ZB.MOM.WW.MxGateway.Server/wwwroot/css/site.css` +- Wired in `App.razor` line 7: ``. +- Contains: `.sidebar` layout (lines ~24–95), `.dashboard-body`, `.agg-card`, table + styles, metric cards, event/alarm grids, and other domain-specific rules. +- After adoption: the `.sidebar` layout section is superseded by RCL `layout.css`. + The domain-specific table/card/grid rules stay in `site.css`. + +Note: MxGateway's `App.razor` loads assets from `/css/…` and `/fonts/…` (root-relative +paths to `wwwroot/`), not via `_content/…` static-web-asset paths — contrast with +OtOpcUa and ScadaBridge which use the RCL `_content/` mechanism. + +--- + +## 2. IBM Plex fonts + +Three `.woff2` files vendored into: +`src/ZB.MOM.WW.MxGateway.Server/wwwroot/fonts/` +- `ibm-plex-sans-400.woff2` +- `ibm-plex-sans-600.woff2` +- `ibm-plex-mono-500.woff2` + +After adoption: delete all three; the RCL serves them from +`_content/ZB.MOM.WW.Theme/fonts/`. + +--- + +## 3. Layout shell + +**`MainLayout.razor`** — 210-line combined layout + nav component. `@implements +IDisposable`; `@inject NavigationManager`, `@inject IJSRuntime`. Interactive +(`@rendermode InteractiveServer` inherited from `Routes`). +- Path: `src/ZB.MOM.WW.MxGateway.Server/Dashboard/Components/Layout/MainLayout.razor` +- Root element: ` `. + Note: **no `.app-shell` class** (unlike OtOpcUa and the spec target). +- Brand: `▮ MXAccess Gateway` + (line 24). +- Nav structure: `