@xeonr/platform-ui 0.1.0

package/dist/theme/ThemeProvider.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { createGlobalStyle } from "styled-components";
+import { cssVariables, v } from "./tokens.js";
+// One preference for every console: the key is shared so a theme choice on
+// one product host is picked up by the next (same-origin storage only — the
+// cross-host copy rides the console context, see @xeonr/console-shell).
+const DEFAULT_STORAGE_KEY = "xnr.theme";
+const Ctx = createContext(null);
+function systemScheme() {
+    return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+}
+export function AppThemeProvider({ children, storageKey = DEFAULT_STORAGE_KEY }) {
+    const STORAGE_KEY = storageKey;
+    const [pref, setPrefState] = useState(() => {
+        const s = localStorage.getItem(STORAGE_KEY);
+        return s === "light" || s === "dark" ? s : "system";
+    });
+    const [sys, setSys] = useState(() => systemScheme());
+    useEffect(() => {
+        const mq = window.matchMedia("(prefers-color-scheme: light)");
+        const on = () => setSys(systemScheme());
+        mq.addEventListener("change", on);
+        return () => mq.removeEventListener("change", on);
+    }, []);
+    const resolved = pref === "system" ? sys : pref;
+    useEffect(() => {
+        const el = document.documentElement;
+        if (pref === "system")
+            el.removeAttribute("data-theme");
+        else
+            el.setAttribute("data-theme", pref);
+    }, [pref]);
+    // Cross-tab sync: another tab changing the preference updates us live.
+    useEffect(() => {
+        const on = (e) => {
+            if (e.key !== STORAGE_KEY)
+                return;
+            const s = e.newValue;
+            setPrefState(s === "light" || s === "dark" ? s : "system");
+        };
+        window.addEventListener("storage", on);
+        return () => window.removeEventListener("storage", on);
+    }, [STORAGE_KEY]);
+    const setPref = useCallback((p) => {
+        setPrefState(p);
+        if (p === "system")
+            localStorage.removeItem(STORAGE_KEY);
+        else
+            localStorage.setItem(STORAGE_KEY, p);
+    }, [STORAGE_KEY]);
+    const cycle = useCallback(() => {
+        setPref(pref === "system" ? (resolved === "dark" ? "light" : "dark") : pref === "dark" ? "light" : "system");
+    }, [pref, resolved, setPref]);
+    const ctx = useMemo(() => ({ pref, resolved, setPref, cycle }), [pref, resolved, setPref, cycle]);
+    return (_jsxs(Ctx.Provider, { value: ctx, children: [_jsx(GlobalStyle, {}), children] }));
+}
+export function useTheme() {
+    const c = useContext(Ctx);
+    if (!c)
+        throw new Error("useTheme outside AppThemeProvider");
+    return c;
+}
+const GlobalStyle = createGlobalStyle `
+  ${cssVariables()}
+
+  *, *::before, *::after { box-sizing: border-box; }
+  html, body, #root { height: 100%; }
+  body {
+    margin: 0;
+    background: ${v.bg};
+    background-attachment: fixed;
+    color: ${v.text};
+    font-family: ${v.font};
+    font-size: 13px;
+    line-height: 1.55;
+    -webkit-font-smoothing: antialiased;
+  }
+  a { color: inherit; }
+  button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
+  input, select, textarea { font: inherit; color: inherit; }
+  code, pre, kbd { font-family: ${v.mono}; }
+
+  /* Native <select> popups: macOS paints them with the system UI, but Windows
+     (and Linux) Chromium/Firefox render <option>s with page styles — unstyled,
+     that's a white UA list under our light-on-dark text. Solid surface tokens
+     keep the popup readable everywhere; macOS simply ignores these. */
+  select option, select optgroup {
+    background: ${v.surface};
+    color: ${v.text};
+  }
+
+  :focus-visible { outline: none; box-shadow: ${v.ring}; border-radius: 4px; }
+  ::selection { background: ${v.brand22}; }
+
+  * { scrollbar-width: thin; scrollbar-color: ${v.line2} transparent; }
+  *::-webkit-scrollbar { width: 10px; height: 10px; }
+  *::-webkit-scrollbar-thumb { background: ${v.line2}; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
+  *::-webkit-scrollbar-track { background: transparent; }
+
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
+  }
+`;
+//# sourceMappingURL=ThemeProvider.js.map

package/dist/theme/ThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"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"}

package/dist/theme/tokens.d.ts

@@ -0,0 +1,62 @@
+export declare const BRAND: {
+    primary: string;
+    g1: string;
+    g2: string;
+    g3: string;
+    g4: string;
+};
+export declare const GRAD: string;
+export declare const GRAD_90: string;
+export declare function cssVariables(): string;
+export declare const v: {
+    brand: string;
+    grad: string;
+    grad90: string;
+    onBrand: string;
+    brand08: string;
+    brand12: string;
+    brand16: string;
+    brand22: string;
+    brand55: string;
+    font: string;
+    mono: string;
+    rCtl: string;
+    rCard: string;
+    rPanel: string;
+    rModal: string;
+    ring: string;
+    canvas: string;
+    bg: string;
+    sidebar: string;
+    surface: string;
+    surface2: string;
+    text: string;
+    muted: string;
+    faint: string;
+    line: string;
+    line2: string;
+    field: string;
+    fieldLine: string;
+    hover: string;
+    elev: string;
+    scrim: string;
+    danger: string;
+    dangerBg: string;
+    success: string;
+    successBg: string;
+    warning: string;
+    warningBg: string;
+    info: string;
+    infoBg: string;
+    logBg: string;
+    logText: string;
+    logDim: string;
+    termBg: string;
+    zNav: string;
+    zPop: string;
+    zScrim: string;
+    zModal: string;
+    zPalette: string;
+    zToast: string;
+};
+//# sourceMappingURL=tokens.d.ts.map

package/dist/theme/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/theme/tokens.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,KAAK;;;;;;CAMjB,CAAC;AAEF,eAAO,MAAM,IAAI,QAAwF,CAAC;AAC1G,eAAO,MAAM,OAAO,QAAuF,CAAC;AAG5G,wBAAgB,YAAY,IAAI,MAAM,CAgIrC;AAyBD,eAAO,MAAM,CAAC,EAAkB;IAC9B,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAC7D,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IACpF,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IACtG,MAAM,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAC/E,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IACxE,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAC7E,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IACrE,OAAO,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IACjE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAC/D,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;CAC9F,CAAC"}

package/dist/theme/tokens.js

@@ -0,0 +1,171 @@
+// Design tokens for the Functions console — the "Xeonr Platform Suite" design
+// language shared with container-platform/ui: the auth/ui --x-* custom-property
+// system plus the ops-density additions ported from the xmb kit (log surfaces,
+// severity marks, mono accents).
+//
+// Everything user-visible derives from these variables; components never hardcode
+// colour literals (scripts/check-colour-literals.mjs enforces it). Light and dark
+// are both first-class: the ThemeProvider stamps data-theme on <html> and these
+// blocks re-map the same variable names.
+export const BRAND = {
+    primary: "#A354A2",
+    g1: "#9C4699",
+    g2: "#A354A2",
+    g3: "#9B3EE4",
+    g4: "#5726BE",
+};
+export const GRAD = `linear-gradient(135deg, ${BRAND.g1}, ${BRAND.g2} 34%, ${BRAND.g3} 68%, ${BRAND.g4})`;
+export const GRAD_90 = `linear-gradient(90deg, ${BRAND.g1}, ${BRAND.g2} 34%, ${BRAND.g3} 68%, ${BRAND.g4})`;
+// css() returns the full variable sheet injected by GlobalStyle.
+export function cssVariables() {
+    return `
+:root {
+  --x-brand: ${BRAND.primary};
+  --x-g1: ${BRAND.g1}; --x-g2: ${BRAND.g2}; --x-g3: ${BRAND.g3}; --x-g4: ${BRAND.g4};
+  --x-grad: ${GRAD};
+  --x-grad-90: ${GRAD_90};
+  --x-on-brand: #ffffff;
+  --x-brand-08: rgba(163, 84, 162, 0.08);
+  --x-brand-12: rgba(163, 84, 162, 0.12);
+  --x-brand-16: rgba(163, 84, 162, 0.16);
+  --x-brand-22: rgba(163, 84, 162, 0.22);
+  --x-brand-55: rgba(163, 84, 162, 0.55);
+  --x-violet-glow: rgba(155, 62, 228, 0.16);
+  --x-font: "Poppins", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --x-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  --x-r-ctl: 8px;   /* buttons, inputs, nav items */
+  --x-r-card: 12px; /* cards, tiles */
+  --x-r-panel: 14px;/* panels, tables, empty states */
+  --x-r-modal: 16px;/* modals, palette */
+  --x-ring: 0 0 0 3px var(--x-brand-55);
+  --x-z-nav: 20; --x-z-pop: 30; --x-z-scrim: 40; --x-z-modal: 41; --x-z-palette: 50; --x-z-toast: 60;
+}
+
+:root, :root[data-theme="dark"] {
+  color-scheme: dark;
+  --x-canvas: #0c0a10;
+  --x-bg:
+    radial-gradient(560px 300px at 82% -80px, var(--x-violet-glow), transparent 70%),
+    radial-gradient(640px 340px at 12% -120px, var(--x-brand-12), transparent 70%),
+    #0c0a10;
+  --x-sidebar: #131019;
+  --x-surface: #17131f;
+  --x-surface-2: #1d1828;
+  --x-text: #f1eef6;
+  --x-muted: #ada6ba;
+  --x-faint: #8a8298;
+  --x-line: rgba(255, 255, 255, 0.07);
+  --x-line-2: rgba(255, 255, 255, 0.12);
+  --x-field: rgba(255, 255, 255, 0.04);
+  --x-field-line: rgba(255, 255, 255, 0.10);
+  --x-hover: rgba(255, 255, 255, 0.045);
+  --x-elev: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 28px 70px -40px rgba(0, 0, 0, 0.8);
+  --x-scrim: rgba(6, 4, 12, 0.62);
+  --x-danger: #ff8f8f;
+  --x-danger-bg: rgba(255, 107, 107, 0.13);
+  --x-success: #3ad29f;
+  --x-success-bg: rgba(58, 210, 159, 0.13);
+  --x-warning: #ffc46b;
+  --x-warning-bg: rgba(255, 196, 107, 0.13);
+  --x-info: #d8a3d7;
+  --x-info-bg: rgba(163, 84, 162, 0.16);
+  --x-log-bg: #100d17;
+  --x-log-text: #c6bad8;
+  --x-log-dim: #6f6585;
+  --x-term-bg: #100d17;
+}
+
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme="dark"]) {
+    color-scheme: light;
+    --x-canvas: #f6f7f9;
+    --x-bg:
+      radial-gradient(560px 300px at 82% -100px, rgba(155, 62, 228, 0.07), transparent 70%),
+      radial-gradient(640px 340px at 12% -140px, rgba(163, 84, 162, 0.06), transparent 70%),
+      #f6f7f9;
+    --x-sidebar: #fdfdfe;
+    --x-surface: #ffffff;
+    --x-surface-2: #fafafb;
+    --x-text: #1a1b22;
+    --x-muted: #565a68;
+    --x-faint: #6b7080;
+    --x-line: #e7e8ee;
+    --x-line-2: #ddd8e6;
+    --x-field: #ffffff;
+    --x-field-line: #e2dceb;
+    --x-hover: rgba(28, 20, 48, 0.035);
+    --x-elev: 0 1px 2px rgba(28, 20, 48, 0.05), 0 18px 44px -24px rgba(87, 38, 190, 0.18);
+    --x-scrim: rgba(24, 18, 40, 0.38);
+    --x-danger: #c0362f;
+    --x-danger-bg: rgba(192, 54, 47, 0.08);
+    --x-success: #1f9d6b;
+    --x-success-bg: rgba(31, 157, 107, 0.10);
+    --x-warning: #b8740c;
+    --x-warning-bg: rgba(184, 116, 12, 0.10);
+    --x-info: #7a2bb8;
+    --x-info-bg: rgba(155, 62, 228, 0.10);
+    --x-log-bg: #100d17;
+    --x-log-text: #c6bad8;
+    --x-log-dim: #6f6585;
+    --x-term-bg: #100d17;
+  }
+}
+
+:root[data-theme="light"] {
+  color-scheme: light;
+  --x-canvas: #f6f7f9;
+  --x-bg:
+    radial-gradient(560px 300px at 82% -100px, rgba(155, 62, 228, 0.07), transparent 70%),
+    radial-gradient(640px 340px at 12% -140px, rgba(163, 84, 162, 0.06), transparent 70%),
+    #f6f7f9;
+  --x-sidebar: #fdfdfe;
+  --x-surface: #ffffff;
+  --x-surface-2: #fafafb;
+  --x-text: #1a1b22;
+  --x-muted: #565a68;
+  --x-faint: #6b7080;
+  --x-line: #e7e8ee;
+  --x-line-2: #ddd8e6;
+  --x-field: #ffffff;
+  --x-field-line: #e2dceb;
+  --x-hover: rgba(28, 20, 48, 0.035);
+  --x-elev: 0 1px 2px rgba(28, 20, 48, 0.05), 0 18px 44px -24px rgba(87, 38, 190, 0.18);
+  --x-scrim: rgba(24, 18, 40, 0.38);
+  --x-danger: #c0362f;
+  --x-danger-bg: rgba(192, 54, 47, 0.08);
+  --x-success: #1f9d6b;
+  --x-success-bg: rgba(31, 157, 107, 0.10);
+  --x-warning: #b8740c;
+  --x-warning-bg: rgba(184, 116, 12, 0.10);
+  --x-info: #7a2bb8;
+  --x-info-bg: rgba(155, 62, 228, 0.10);
+  --x-log-bg: #100d17;
+  --x-log-text: #c6bad8;
+  --x-log-dim: #6f6585;
+  --x-term-bg: #100d17;
+}
+`;
+}
+// v is a tiny typed helper so component styles read `${v.text}` instead of the
+// raw var() incantation — a misspelt token is a build error, not a silent default.
+const names = [
+    "brand", "grad", "grad-90", "on-brand",
+    "brand-08", "brand-12", "brand-16", "brand-22", "brand-55",
+    "font", "mono", "r-ctl", "r-card", "r-panel", "r-modal", "ring",
+    "canvas", "bg", "sidebar", "surface", "surface-2", "text", "muted", "faint",
+    "line", "line-2", "field", "field-line", "hover", "elev", "scrim",
+    "danger", "danger-bg", "success", "success-bg", "warning", "warning-bg", "info", "info-bg",
+    "log-bg", "log-text", "log-dim", "term-bg",
+    "z-nav", "z-pop", "z-scrim", "z-modal", "z-palette", "z-toast",
+];
+function buildVars() {
+    const out = {};
+    for (const n of names) {
+        // camelCase alias: surface-2 -> surface2, r-ctl -> rCtl, grad-90 -> grad90
+        const camel = n.replace(/-([a-z0-9])/g, (_, c) => c.toUpperCase());
+        out[camel] = `var(--x-${n})`;
+    }
+    return out;
+}
+export const v = buildVars();
+//# sourceMappingURL=tokens.js.map

package/dist/theme/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/theme/tokens.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,gFAAgF;AAChF,+EAA+E;AAC/E,iCAAiC;AACjC,EAAE;AACF,kFAAkF;AAClF,kFAAkF;AAClF,gFAAgF;AAChF,yCAAyC;AAEzC,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,OAAO,EAAE,SAAS;IAClB,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,2BAA2B,KAAK,CAAC,EAAE,KAAK,KAAK,CAAC,EAAE,SAAS,KAAK,CAAC,EAAE,SAAS,KAAK,CAAC,EAAE,GAAG,CAAC;AAC1G,MAAM,CAAC,MAAM,OAAO,GAAG,0BAA0B,KAAK,CAAC,EAAE,KAAK,KAAK,CAAC,EAAE,SAAS,KAAK,CAAC,EAAE,SAAS,KAAK,CAAC,EAAE,GAAG,CAAC;AAE5G,iEAAiE;AACjE,MAAM,UAAU,YAAY;IAC1B,OAAO;;eAEM,KAAK,CAAC,OAAO;YAChB,KAAK,CAAC,EAAE,aAAa,KAAK,CAAC,EAAE,aAAa,KAAK,CAAC,EAAE,aAAa,KAAK,CAAC,EAAE;cACrE,IAAI;iBACD,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHvB,CAAC;AACF,CAAC;AAED,+EAA+E;AAC/E,mFAAmF;AACnF,MAAM,KAAK,GAAG;IACZ,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU;IACtC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU;IAC1D,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM;IAC/D,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO;IAC3E,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO;IACjE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,EAAE,SAAS;IAC1F,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS;IAC1C,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS;CACtD,CAAC;AAEX,SAAS,SAAS;IAChB,MAAM,GAAG,GAA2B,EAAE,CAAC;IACvC,KAAK,MAAM,CAAC,IAAI,KAAK,EAAE,CAAC;QACtB,2EAA2E;QAC3E,MAAM,KAAK,GAAG,CAAC,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC,EAAE,CAAS,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC;QAC3E,GAAG,CAAC,KAAK,CAAC,GAAG,WAAW,CAAC,GAAG,CAAC;IAC/B,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,GAAG,SAAS,EAWzB,CAAC"}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@xeonr/platform-ui",
+  "version": "0.1.0",
+  "description": "Xeonr Platform Suite design language: the --x-* token sheet, theme provider and kit shared by every Xeonr console.",
+  "license": "UNLICENSED",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens": {
+      "types": "./dist/theme/tokens.d.ts",
+      "import": "./dist/theme/tokens.js"
+    }
+  },
+  "files": [
+    "dist",
+    "scripts"
+  ],
+  "bin": {
+    "xeonr-check-colour-literals": "./scripts/check-colour-literals.mjs"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.0.0",
+    "styled-components": "^6.0.0"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^7.0.0",
+    "@fortawesome/free-solid-svg-icons": "^7.0.0",
+    "@fortawesome/react-fontawesome": "^3.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.8.0",
+    "styled-components": "^6.1.19",
+    "typescript": "^5.9.2"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "lint": "tsc -p tsconfig.json --noEmit && node scripts/check-colour-literals.mjs"
+  }
+}

package/scripts/check-colour-literals.mjs

@@ -0,0 +1,221 @@
+#!/usr/bin/env node
+// Colour-literal ratchet: raw colours belong in src/theme/tokens.ts — screens
+// and kit components must reference tokens, never literals. Scans
+// src/**/*.{ts,tsx} for hex colours (#abc / #aabbcc / #aabbccdd …) and
+// rgb(/rgba(/hsl(/hsla( calls appearing inside string or template-literal
+// contexts (plain code and comments don't count), then fails with a
+// file:line listing for any hit outside the allowlisted files.
+//
+// Allowlist rationale: tokens.ts is where literals are supposed to live;
+// ConsoleTerminal.tsx hands xterm.js a theme object that requires concrete
+// colour strings; monacoSetup.ts may need the same for monaco theme plumbing.
+//
+// Plain Node ESM, zero dependencies.
+
+import { readdirSync, readFileSync } from "node:fs";
+import { join, relative } from "node:path";
+import process from "node:process";
+
+const ROOT = process.cwd();
+const SRC = join(ROOT, "src");
+
+// Consumers run this as `xeonr-check-colour-literals [extra allowlisted paths…]`
+// from their own package root; the kit's tokens.ts is the only default.
+const ALLOWLIST = new Set(["src/theme/tokens.ts", ...process.argv.slice(2)]);
+
+/** Hex runs; length checked afterwards so 12+-char content hashes don't match. */
+const HEX = /#[0-9a-fA-F]+/g;
+const COLOUR_FN = /\b(?:rgba?|hsla?)\(/g;
+
+/** Recursively collect .ts/.tsx files under dir, sorted for stable output. */
+function collect(dir) {
+  const out = [];
+  for (const ent of readdirSync(dir, { withFileTypes: true })) {
+    const p = join(dir, ent.name);
+    if (ent.isDirectory()) out.push(...collect(p));
+    else if (/\.tsx?$/.test(ent.name)) out.push(p);
+  }
+  return out.sort();
+}
+
+// Keywords that put a following `/` in regex (not division) position.
+const REGEX_KEYWORDS = new Set([
+  "return", "typeof", "instanceof", "in", "of", "new", "do", "else", "case",
+  "void", "delete", "yield", "await",
+]);
+// Significant chars after which `/` starts a regex literal. Deliberately
+// excludes `<` `>` `}` so JSX (`</Tag>`, `{expr} />`) reads as plain code.
+const REGEX_TRIGGERS = "(,=:[!&|?;+-*%^~{";
+const WORD = /[A-Za-z0-9_$]/;
+
+/**
+ * Returns `source` with everything that is NOT string/template character
+ * content replaced by spaces (newlines kept), so line numbers and columns
+ * survive into the pattern scan. A tiny state machine tracks line/block
+ * comments, '…'/"…" strings (terminated at newline, as in JS), `…` templates
+ * with nested ${…} interpolation, and — heuristically — regex literals, all
+ * masked out as "not string content".
+ */
+function stringContentMask(src) {
+  const out = new Array(src.length).fill(" ");
+  let mode = "code";
+  const interp = []; // brace-depth stack for nested `${ … }` template holes
+  let lastSig = ""; // last significant code char (regex-vs-division heuristic)
+  let prevSig = "";
+  let lastWord = "";
+
+  const setSig = (c) => {
+    prevSig = lastSig;
+    lastSig = c;
+  };
+
+  for (let i = 0; i < src.length; i++) {
+    const c = src[i];
+    const n = src[i + 1];
+
+    if (c === "\n") {
+      out[i] = "\n";
+      // Line comments end; unterminated '…'/"…" cannot span lines — bail out
+      // so a stray apostrophe (JSX text) only poisons its own line.
+      if (mode === "line" || mode === "single" || mode === "double") mode = "code";
+      continue;
+    }
+
+    switch (mode) {
+      case "line":
+        break;
+
+      case "block":
+        if (c === "*" && n === "/") {
+          mode = "code";
+          i += 1;
+        }
+        break;
+
+      case "single":
+      case "double": {
+        const quote = mode === "single" ? "'" : '"';
+        if (c === "\\" && n !== undefined) {
+          out[i] = c;
+          out[i + 1] = n;
+          i += 1;
+        } else if (c === quote) {
+          mode = "code";
+          setSig(quote);
+        } else {
+          out[i] = c;
+        }
+        break;
+      }
+
+      case "template":
+        if (c === "\\" && n !== undefined) {
+          out[i] = c;
+          out[i + 1] = n;
+          i += 1;
+        } else if (c === "`") {
+          mode = "code";
+          setSig("`");
+        } else if (c === "$" && n === "{") {
+          interp.push(0);
+          mode = "code";
+          setSig("{");
+          i += 1;
+        } else {
+          out[i] = c;
+        }
+        break;
+
+      case "regex":
+        if (c === "\\") i += 1;
+        else if (c === "[") mode = "regexClass";
+        else if (c === "/") {
+          mode = "code";
+          setSig("/");
+        }
+        break;
+
+      case "regexClass":
+        if (c === "\\") i += 1;
+        else if (c === "]") mode = "regex";
+        break;
+
+      case "code": {
+        if (c === "/" && n === "/") {
+          mode = "line";
+          i += 1;
+        } else if (c === "/" && n === "*") {
+          mode = "block";
+          i += 1;
+        } else if (c === "'") {
+          mode = "single";
+        } else if (c === '"') {
+          mode = "double";
+        } else if (c === "`") {
+          mode = "template";
+        } else if (c === "{" && interp.length > 0) {
+          interp[interp.length - 1] += 1;
+          setSig("{");
+        } else if (c === "}" && interp.length > 0) {
+          if (interp[interp.length - 1] === 0) {
+            interp.pop();
+            mode = "template";
+          } else {
+            interp[interp.length - 1] -= 1;
+            setSig("}");
+          }
+        } else if (c === "/") {
+          const afterArrow = lastSig === ">" && prevSig === "=";
+          const afterKeyword = WORD.test(lastSig) && REGEX_KEYWORDS.has(lastWord);
+          if (lastSig === "" || afterArrow || afterKeyword || REGEX_TRIGGERS.includes(lastSig)) {
+            mode = "regex";
+          } else {
+            setSig("/"); // division
+          }
+        } else if (WORD.test(c)) {
+          lastWord = WORD.test(lastSig) ? lastWord + c : c;
+          setSig(c);
+        } else if (!/\s/.test(c)) {
+          setSig(c);
+        }
+        break;
+      }
+    }
+  }
+
+  return out.join("");
+}
+
+function scanFile(abs) {
+  const rel = relative(ROOT, abs).split("\\").join("/");
+  const mask = stringContentMask(readFileSync(abs, "utf8"));
+  const hits = [];
+  mask.split("\n").forEach((line, idx) => {
+    for (const m of line.matchAll(HEX)) {
+      const digits = m[0].length - 1;
+      if (digits >= 3 && digits <= 8) hits.push({ line: idx + 1, match: m[0] });
+    }
+    for (const m of line.matchAll(COLOUR_FN)) {
+      hits.push({ line: idx + 1, match: m[0] });
+    }
+  });
+  return { rel, hits };
+}
+
+const files = collect(SRC);
+const offenders = [];
+for (const abs of files) {
+  const { rel, hits } = scanFile(abs);
+  if (hits.length === 0 || ALLOWLIST.has(rel)) continue;
+  for (const h of hits) offenders.push(`${rel}:${h.line}  ${h.match}`);
+}
+
+if (offenders.length > 0) {
+  console.error(
+    `colour-literals: ${offenders.length} raw colour literal(s) outside the theme allowlist — use src/theme/tokens.ts instead:`,
+  );
+  for (const o of offenders) console.error(`  ${o}`);
+  process.exit(1);
+}
+
+console.log(`colour-literals: clean (${files.length} files scanned)`);