@aglyn/shared-ui-theme 1.0.0-beta.143

package/src/lib/hocs/create-with-theme-provider.js

@@ -0,0 +1,231 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2023 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { _isArr, _isNull } from "@aglyn/shared-util-tools";
+import { getDisplayName, noop } from "@aglyn/shared-util-tools";
+import { hoistNonReactStatics } from "@aglyn/shared-util-vendor";
+import { CssBaseline, useMediaQuery } from "@mui/material";
+import Cookies from "js-cookie";
+import { createContext, forwardRef, useCallback, useContext, useMemo, useState } from "react";
+import { useIsomorphicLayoutEffect } from "react-use";
+import { createTheme, ThemeProvider } from "../../vendor/mui.js";
+import { parseThemeModeCookie, THEME_MODE_COOKIE } from "../util/theme-mode-cookie.js";
+export const THEME_DISPLAY_NAME = {
+    light: 'Light',
+    dark: 'Dark',
+    system: 'Device default'
+};
+export const getThemeModeDisplayName = (theme)=>{
+    return THEME_DISPLAY_NAME[theme] || THEME_DISPLAY_NAME.system;
+};
+/**
+ * The cookie the visitor's choice is persisted in, spelled out as a type so
+ * the name has one definition across the browser reader here and the
+ * server-side one in `util/theme-mode-cookie`: the annotation fails to compile
+ * if the two ever name different cookies.
+ */ export const COOKIE_THEME_KEY = THEME_MODE_COOKIE;
+export const ThemeContextDispatch = /*#__PURE__*/ createContext([
+    [
+        'system',
+        'system'
+    ],
+    noop,
+    'system'
+]);
+export function useThemeMode() {
+    return useContext(ThemeContextDispatch);
+}
+/**
+ * The stored choice as this browser reads it.
+ *
+ * `js-cookie` reads `document.cookie`, so on a server render there is nothing
+ * to read and every visitor looks like one who has chosen nothing. That is why
+ * a server-rendered surface passes the mode it resolved from the request's
+ * cookies into {@link useCookieThemeMode} instead of relying on this.
+ */ function getCookieThemeMode() {
+    return parseThemeModeCookie(Cookies.get(COOKIE_THEME_KEY));
+}
+/**
+ * The visitor's stored light/dark choice, and a setter that persists it.
+ *
+ * `initialMode` is the mode the surface's server render resolved from the
+ * request's cookies — `null` when the request carried no choice. Supplying it
+ * is what makes the FIRST render right: the state starts at the visitor's
+ * choice on the server and at the identical value through hydration, rather
+ * than starting empty and being corrected by the effect below once React has
+ * hydrated the whole page. Omit it on a surface that only ever renders in a
+ * browser, and the cookie is read directly.
+ */ export function useCookieThemeMode(initialMode) {
+    const [mode, setMode] = useState(()=>initialMode === undefined ? getCookieThemeMode() : initialMode);
+    /**
+   * Keeps the state in step with the cookie on each paint — another tab's
+   * switcher, or a seed that went stale between the server render and
+   * hydration. Browser-only: effects do not run during a server render, so
+   * this never overwrites the seed with the server's empty read.
+   */ useIsomorphicLayoutEffect(()=>{
+        const cookieMode = getCookieThemeMode();
+        setMode((prev)=>prev !== cookieMode ? cookieMode : prev);
+    });
+    const setCookieThemeMode = useCallback((newMode)=>{
+        Cookies.set(COOKIE_THEME_KEY, newMode, {
+            expires: 365
+        });
+        setMode((prev)=>prev !== newMode ? newMode : prev);
+    }, []);
+    return useMemo(()=>[
+            mode,
+            setCookieThemeMode
+        ], [
+        mode,
+        setCookieThemeMode
+    ]);
+}
+/**
+ * The resolved theme mode, in two layers with the visitor's own choice on top.
+ *
+ * An EXPLICIT choice comes from the cookie, which a server render can read
+ * from the request — pass it as `initialMode` and the surface paints that
+ * scheme in its first byte. It outranks the device: a visitor who asked for
+ * light gets light on a dark laptop, and the ordering below is the only thing
+ * that decides it, so the two layers are kept as separate inputs rather than
+ * collapsed into one seed by the caller.
+ *
+ * DEVICE DEFAULT is the other layer. `prefers-color-scheme` is a media
+ * feature, so a server has nothing to evaluate it against and `useMediaQuery`
+ * answers light for every server render. `initialDeviceMode` supplies that
+ * answer from the request instead — the `Sec-CH-Prefers-Color-Scheme` client
+ * hint, where the browser sends one.
+ *
+ * It is fed in as `defaultMatches` rather than substituted for the media query
+ * because that is the value React reads for BOTH the server render and the
+ * hydration render: `useMediaQuery` publishes `defaultMatches` as its server
+ * snapshot and only switches to the live `matchMedia` result once hydration is
+ * complete. Seeding any earlier layer instead leaves the media query answering
+ * light for the hydration commit, and the tree repaints light before the real
+ * snapshot arrives — the flash this exists to remove, moved one frame later.
+ */ export function useThemeModeState(initialMode, initialDeviceMode) {
+    const prefersDark = useMediaQuery('(prefers-color-scheme: dark)', {
+        defaultMatches: initialDeviceMode === 'dark'
+    });
+    const [cookieMode, setCookieMode] = useCookieThemeMode(initialMode);
+    const systemMode = useMemo(()=>{
+        return prefersDark ? 'dark' : 'light';
+    }, [
+        prefersDark
+    ]);
+    const [type, mode] = useMemo(()=>{
+        if (cookieMode && cookieMode !== 'system') {
+            return [
+                'user',
+                cookieMode
+            ];
+        }
+        return [
+            'system',
+            systemMode
+        ];
+    }, [
+        cookieMode,
+        systemMode
+    ]);
+    const toggleThemeMode = useCallback((event, to)=>{
+        let newMode;
+        switch(true){
+            case _isNull(to):
+            case to === 'system':
+                newMode = 'system';
+                break;
+            case to === 'dark':
+            case to === 'light':
+                newMode = to;
+                break;
+            case _isNull(cookieMode):
+                newMode = 'light';
+                break;
+            case cookieMode === 'light':
+                newMode = 'dark';
+                break;
+            case cookieMode === 'dark':
+            default:
+                newMode = 'system';
+                break;
+        }
+        setCookieMode(newMode);
+    }, [
+        cookieMode,
+        setCookieMode
+    ]);
+    return useMemo(()=>[
+            [
+                type,
+                mode
+            ],
+            toggleThemeMode,
+            cookieMode
+        ], [
+        type,
+        mode,
+        toggleThemeMode,
+        cookieMode
+    ]);
+}
+export function createWithThemeProvider(options) {
+    const { theme, disableCssBaseline } = options;
+    const [lightTheme, darkTheme] = !_isArr(theme) ? [
+        theme,
+        createTheme(_extends({}, theme, {
+            palette: _extends({}, theme == null ? void 0 : theme.palette, {
+                mode: 'dark'
+            })
+        }))
+    ] : theme;
+    return function withThemeProvider(WrappedComponent) {
+        const WithThemeProvider = /*#__PURE__*/ forwardRef((props, ref)=>{
+            const {} = props, rest = _extends({}, props);
+            const ThemeModeState = useThemeModeState();
+            const activeTheme = useMemo(()=>{
+                const [[, themeMode]] = ThemeModeState;
+                return themeMode === 'dark' ? darkTheme : lightTheme;
+            }, [
+                ThemeModeState
+            ]);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const WrappedAny = WrappedComponent;
+            return /*#__PURE__*/ _jsx(ThemeContextDispatch.Provider, {
+                value: ThemeModeState,
+                children: /*#__PURE__*/ _jsx(ThemeProvider, {
+                    theme: activeTheme,
+                    children: disableCssBaseline ? /*#__PURE__*/ _jsx(WrappedAny, _extends({
+                        ref: ref
+                    }, rest)) : /*#__PURE__*/ _jsx(CssBaseline, {
+                        enableColorScheme: true,
+                        children: /*#__PURE__*/ _jsx(WrappedAny, _extends({
+                            ref: ref
+                        }, rest))
+                    })
+                })
+            });
+        });
+        const displayName = getDisplayName(WrappedComponent);
+        WithThemeProvider.displayName = `WithThemeProvider(${displayName})`;
+        hoistNonReactStatics(WithThemeProvider, WrappedComponent);
+        return WithThemeProvider;
+    };
+}
+export default createWithThemeProvider;
+
+//# sourceMappingURL=create-with-theme-provider.js.map

package/src/lib/hocs/create-with-theme-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/theme/src/lib/hocs/create-with-theme-provider.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2023 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { _isArr, _isNull } from '@aglyn/shared-util-tools'\nimport { getDisplayName, noop } from '@aglyn/shared-util-tools'\nimport { hoistNonReactStatics } from '@aglyn/shared-util-vendor'\nimport { CssBaseline, useMediaQuery } from '@mui/material'\nimport Cookies from 'js-cookie'\nimport {\n  type ComponentType,\n  createContext,\n  forwardRef,\n  type SyntheticEvent,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from 'react'\nimport { useIsomorphicLayoutEffect } from 'react-use'\nimport { createTheme, type Theme, ThemeProvider } from '../../vendor/mui'\nimport {\n  parseThemeModeCookie,\n  THEME_MODE_COOKIE,\n} from '../util/theme-mode-cookie'\n\nexport type ThemeMode = 'light' | 'dark' | 'system' | null\nexport type ThemeModeType = 'user' | 'system'\nexport type ThemeModeResult = [ThemeModeType, ThemeMode]\nexport type UseThemeMode = [\n  mode: ThemeModeResult,\n  toggleThemeMode: (event: SyntheticEvent<any>, to?: ThemeMode) => void,\n  cookieMode: ThemeMode,\n  /**\n   * False when the surface renders light whatever the visitor asks for — a\n   * site whose theme has no authored dark scheme (AGL-1292). Absent means\n   * the surface can go dark; the console's own provider never sets it.\n   */\n  canGoDark?: boolean,\n]\n\nexport const THEME_DISPLAY_NAME: Record<ThemeMode, string> = {\n  light: 'Light',\n  dark: 'Dark',\n  system: 'Device default',\n}\n\nexport const getThemeModeDisplayName = (theme: ThemeMode) => {\n  return THEME_DISPLAY_NAME[theme] || THEME_DISPLAY_NAME.system\n}\n\n/**\n * The cookie the visitor's choice is persisted in, spelled out as a type so\n * the name has one definition across the browser reader here and the\n * server-side one in `util/theme-mode-cookie`: the annotation fails to compile\n * if the two ever name different cookies.\n */\nexport const COOKIE_THEME_KEY: 'theme-color-mode' = THEME_MODE_COOKIE\nexport const ThemeContextDispatch = createContext<UseThemeMode>([\n  ['system', 'system'],\n  noop,\n  'system',\n])\n\nexport function useThemeMode() {\n  return useContext(ThemeContextDispatch)\n}\n\n/**\n * The stored choice as this browser reads it.\n *\n * `js-cookie` reads `document.cookie`, so on a server render there is nothing\n * to read and every visitor looks like one who has chosen nothing. That is why\n * a server-rendered surface passes the mode it resolved from the request's\n * cookies into {@link useCookieThemeMode} instead of relying on this.\n */\nfunction getCookieThemeMode(): ThemeMode {\n  return parseThemeModeCookie(Cookies.get(COOKIE_THEME_KEY))\n}\n\n/**\n * The visitor's stored light/dark choice, and a setter that persists it.\n *\n * `initialMode` is the mode the surface's server render resolved from the\n * request's cookies — `null` when the request carried no choice. Supplying it\n * is what makes the FIRST render right: the state starts at the visitor's\n * choice on the server and at the identical value through hydration, rather\n * than starting empty and being corrected by the effect below once React has\n * hydrated the whole page. Omit it on a surface that only ever renders in a\n * browser, and the cookie is read directly.\n */\nexport function useCookieThemeMode(\n  initialMode?: ThemeMode,\n): [ThemeMode, (mode: ThemeMode) => void] {\n  const [mode, setMode] = useState<ThemeMode>(() =>\n    initialMode === undefined ? getCookieThemeMode() : initialMode,\n  )\n\n  /**\n   * Keeps the state in step with the cookie on each paint — another tab's\n   * switcher, or a seed that went stale between the server render and\n   * hydration. Browser-only: effects do not run during a server render, so\n   * this never overwrites the seed with the server's empty read.\n   */\n  useIsomorphicLayoutEffect(() => {\n    const cookieMode = getCookieThemeMode()\n    setMode((prev) => (prev !== cookieMode ? cookieMode : prev))\n  })\n\n  const setCookieThemeMode = useCallback((newMode: ThemeMode) => {\n    Cookies.set(COOKIE_THEME_KEY, newMode, { expires: 365 })\n    setMode((prev) => (prev !== newMode ? newMode : prev))\n  }, [])\n\n  return useMemo(() => [mode, setCookieThemeMode], [mode, setCookieThemeMode])\n}\n\n/**\n * The resolved theme mode, in two layers with the visitor's own choice on top.\n *\n * An EXPLICIT choice comes from the cookie, which a server render can read\n * from the request — pass it as `initialMode` and the surface paints that\n * scheme in its first byte. It outranks the device: a visitor who asked for\n * light gets light on a dark laptop, and the ordering below is the only thing\n * that decides it, so the two layers are kept as separate inputs rather than\n * collapsed into one seed by the caller.\n *\n * DEVICE DEFAULT is the other layer. `prefers-color-scheme` is a media\n * feature, so a server has nothing to evaluate it against and `useMediaQuery`\n * answers light for every server render. `initialDeviceMode` supplies that\n * answer from the request instead — the `Sec-CH-Prefers-Color-Scheme` client\n * hint, where the browser sends one.\n *\n * It is fed in as `defaultMatches` rather than substituted for the media query\n * because that is the value React reads for BOTH the server render and the\n * hydration render: `useMediaQuery` publishes `defaultMatches` as its server\n * snapshot and only switches to the live `matchMedia` result once hydration is\n * complete. Seeding any earlier layer instead leaves the media query answering\n * light for the hydration commit, and the tree repaints light before the real\n * snapshot arrives — the flash this exists to remove, moved one frame later.\n */\nexport function useThemeModeState(\n  initialMode?: ThemeMode,\n  initialDeviceMode?: ThemeMode,\n): UseThemeMode {\n  const prefersDark = useMediaQuery('(prefers-color-scheme: dark)', {\n    defaultMatches: initialDeviceMode === 'dark',\n  })\n  const [cookieMode, setCookieMode] = useCookieThemeMode(initialMode)\n\n  const systemMode = useMemo<ThemeMode>(() => {\n    return prefersDark ? 'dark' : 'light'\n  }, [prefersDark])\n\n  const [type, mode] = useMemo<ThemeModeResult>(() => {\n    if (cookieMode && cookieMode !== 'system') {\n      return ['user', cookieMode]\n    }\n    return ['system', systemMode]\n  }, [cookieMode, systemMode])\n\n  const toggleThemeMode = useCallback(\n    (event: SyntheticEvent<any>, to?: ThemeMode) => {\n      let newMode: ThemeMode\n\n      switch (true) {\n        case _isNull(to):\n        case to === 'system':\n          newMode = 'system'\n          break\n        case to === 'dark':\n        case to === 'light':\n          newMode = to\n          break\n        case _isNull(cookieMode):\n          newMode = 'light'\n          break\n        case cookieMode === 'light':\n          newMode = 'dark'\n          break\n        case cookieMode === 'dark':\n        default:\n          newMode = 'system'\n          break\n      }\n\n      setCookieMode(newMode)\n    },\n    [cookieMode, setCookieMode],\n  )\n\n  return useMemo(\n    () => [[type, mode], toggleThemeMode, cookieMode],\n    [type, mode, toggleThemeMode, cookieMode],\n  )\n}\n\nexport type WithThemeProviderOptions = {\n  theme: Theme | [lightTheme: Theme, darkTheme: Theme]\n  disableCssBaseline?: boolean\n}\n\nexport function createWithThemeProvider(options: WithThemeProviderOptions) {\n  const { theme, disableCssBaseline } = options\n  const [lightTheme, darkTheme] = !_isArr(theme)\n    ? [\n        theme,\n        createTheme({ ...theme, palette: { ...theme?.palette, mode: 'dark' } }),\n      ]\n    : theme\n\n  return function withThemeProvider<P>(WrappedComponent: JSX.ComponentType<P>) {\n    const WithThemeProvider = forwardRef<any, P>((props, ref) => {\n      const { ...rest } = props\n      const ThemeModeState = useThemeModeState()\n      const activeTheme = useMemo<Theme>(() => {\n        const [[, themeMode]] = ThemeModeState\n        return themeMode === 'dark' ? darkTheme : lightTheme\n      }, [ThemeModeState])\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      const WrappedAny = WrappedComponent as ComponentType<any>\n      return (\n        <ThemeContextDispatch.Provider value={ThemeModeState}>\n          <ThemeProvider theme={activeTheme}>\n            {disableCssBaseline ? (\n              <WrappedAny ref={ref} {...rest} />\n            ) : (\n              <CssBaseline enableColorScheme>\n                <WrappedAny ref={ref} {...rest} />\n              </CssBaseline>\n            )}\n          </ThemeProvider>\n        </ThemeContextDispatch.Provider>\n      )\n    })\n    const displayName = getDisplayName(WrappedComponent)\n    WithThemeProvider.displayName = `WithThemeProvider(${displayName})`\n    hoistNonReactStatics(WithThemeProvider, WrappedComponent)\n\n    return WithThemeProvider\n  }\n}\nexport default createWithThemeProvider\n"],"names":["_isArr","_isNull","getDisplayName","noop","hoistNonReactStatics","CssBaseline","useMediaQuery","Cookies","createContext","forwardRef","useCallback","useContext","useMemo","useState","useIsomorphicLayoutEffect","createTheme","ThemeProvider","parseThemeModeCookie","THEME_MODE_COOKIE","THEME_DISPLAY_NAME","light","dark","system","getThemeModeDisplayName","theme","COOKIE_THEME_KEY","ThemeContextDispatch","useThemeMode","getCookieThemeMode","get","useCookieThemeMode","initialMode","mode","setMode","undefined","cookieMode","prev","setCookieThemeMode","newMode","set","expires","useThemeModeState","initialDeviceMode","prefersDark","defaultMatches","setCookieMode","systemMode","type","toggleThemeMode","event","to","createWithThemeProvider","options","disableCssBaseline","lightTheme","darkTheme","palette","withThemeProvider","WrappedComponent","WithThemeProvider","props","ref","rest","ThemeModeState","activeTheme","themeMode","WrappedAny","Provider","value","enableColorScheme","displayName"],"mappings":"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"}

package/src/lib/tenant.theme.d.ts

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { Theme, ThemeOptions } from '../vendor/mui';
+export declare const tenantOptions: ThemeOptions;
+export declare const tenantOptionsDark: ThemeOptions;
+export declare const tenantThemeLight: Theme;
+export declare const tenantThemeDark: Theme;
+export declare const PLATFORM_BRAND_HOSTS: ReadonlySet<string>;
+export declare function wearsPlatformBrand(host: string | undefined): boolean;
+/**
+ * The site key {@link wearsPlatformBrand} is asked about, read off a host
+ * document (AGL-3068).
+ *
+ * The tenant is handed its `[host]` route param, which is the attached domain
+ * under the middleware's `cname--` sentinel or a bare subdomain label. A
+ * console surface has the document instead, where those are two fields: the
+ * attached domain is what a platform-brand host is listed under, and the
+ * subdomain is what every other site is reachable by. Reading them in that
+ * order is what makes the editor ask the same question the published page
+ * answers.
+ */
+export declare function hostBrandKey(host: {
+    cname?: string;
+    subdomain?: string;
+} | null | undefined): string | undefined;
+/**
+ * The options a site's own theme is layered onto: the platform's brand for
+ * the operator's own hosts, the neutral tenant default for everyone else
+ * (AGL-3068).
+ *
+ * One decision, because it used to be four. The tenant made it per host,
+ * while the besigner canvas, the theme editor's preview and the "Default ·
+ * #…" the editor prints beside every unset slot all built on the brand base
+ * unconditionally — so a customer site was authored in Aglyn's cyan and
+ * published in MUI's blue, and an author correcting contrast was correcting a
+ * page that does not exist.
+ *
+ * An unknown host is NOT a platform host, exactly as `wearsPlatformBrand`
+ * already reads it: the operator's hosts are the named exception, so a
+ * surface that cannot name the site resolves what a customer site resolves.
+ */
+export declare function siteBaseOptions(host: string | undefined, scheme: 'light' | 'dark'): ThemeOptions;
+/** The built theme a site with no customization of its own renders under. */
+export declare function siteFallbackTheme(host: string | undefined, scheme: 'light' | 'dark'): Theme;

package/src/lib/tenant.theme.js

@@ -0,0 +1,282 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { _ as _extends } from "@swc/helpers/_/_extends";
+var // Dot notation, not brackets: Next substitutes `process.env.NAME`
+// TEXTUALLY, and never the bracket form, so a bracket read is `undefined`
+// in any browser or edge bundle and silently falls back to the default
+// below — which on a self-host install would hand the operator Aglyn's
+// hosts (AGL-2037).
+_process_env_NEXT_PUBLIC_PLATFORM_BRAND_HOSTS;
+import { consoleOptions, consoleOptionsDark, consoleThemeDark, consoleThemeLight } from "./console.theme.js";
+import createResponsiveTheme from "./util/create-responsive-theme.js";
+/**
+ * The default palette a tenant site wears when it has authored none of its
+ * own.
+ *
+ * MUI's stock accents, extended with every slot this platform adds on top of
+ * a MUI palette — `tertiary`, `surface`, `tint`, `inputOutline` and the three
+ * `svg*` records — so a site that never opens the theme editor still resolves
+ * every token a component can ask for.
+ *
+ * Stock rather than the Aglyn brand because the brand palette carries a
+ * signed-off sub-AA pairing (white on `#00b0ff`, 2.43:1): a considered
+ * decision about OUR brand, and not one to hand a customer who never made it.
+ * Every accent here clears the 4.5:1 AA text bar as text and carries its own
+ * `contrastText` at AA on the fill, in both schemes.
+ *
+ * Non-palette options come from `consoleOptions`, so component behaviour,
+ * type ramp, spacing and shadows are identical platform-wide — the palette is
+ * the only thing a tenant default changes.
+ */ /**
+ * The one grey ramp, read from the brand palette rather than copied. A
+ * neutral scale is not a brand decision, and a second copy is a second thing
+ * to drift.
+ */ const grey = consoleOptions.palette.grey;
+const tenantColorScheme = {
+    light: {
+        primary: {
+            main: '#1976d2',
+            // The accent-as-text shade (`ACCENT_TEXT_SHADE`): 7.50:1 on the page,
+            // 7.82:1 on paper. Authored for the same reason as the console's — the
+            // slot every link resolves to belongs in the palette, not in a walk.
+            dark: '#125393',
+            contrastText: '#FFFFFF'
+        },
+        secondary: {
+            main: '#9c27b0',
+            dark: '#6d1b7b',
+            contrastText: '#FFFFFF'
+        },
+        // A neutral slate for the third accent, matching the role `tertiary`
+        // plays in the console palette.
+        tertiary: {
+            main: '#4a5568',
+            dark: '#343b49',
+            contrastText: '#FFFFFF'
+        },
+        surface: {
+            main: '#f1f3f5',
+            contrastText: '#000000DE'
+        },
+        tint: {
+            primary: '#e8f1fb',
+            secondary: '#f5e9f7',
+            tertiary: '#eef0f3'
+        },
+        inputOutline: 'rgba(0, 0, 0, 0.23)',
+        background: {
+            default: '#fafafa',
+            paper: '#ffffff'
+        },
+        info: {
+            main: '#0288d1',
+            dark: '#015f92',
+            contrastText: '#000000DE'
+        },
+        error: {
+            main: '#d32f2f',
+            dark: '#942121',
+            contrastText: '#FFFFFF'
+        },
+        success: {
+            main: '#2e7d32',
+            dark: '#205823',
+            contrastText: '#FFFFFF'
+        },
+        warning: {
+            main: '#ed6c02',
+            dark: '#a64c01',
+            contrastText: '#000000DE'
+        },
+        grey,
+        svgBackground: {
+            main: '#FAFAFA',
+            hover: '#FAFAFA',
+            active: '#FAFAFA',
+            focus: '#FAFAFA'
+        },
+        svgFilled: {
+            main: '#9E9E9E',
+            hover: '#1976d2',
+            active: '#1976d2',
+            focus: '#1976d2'
+        },
+        svgStroke: {
+            main: '#FFFFFF',
+            hover: '#FFFFFF',
+            active: '#FFFFFF',
+            focus: '#FFFFFF'
+        }
+    },
+    dark: {
+        primary: {
+            main: '#1976d2',
+            // LIGHTER than `main`, as every accent-as-text shade must be on a dark
+            // ground: 6.70:1 on the page, 5.96:1 on paper. MUI derives `dark` by
+            // darkening in both schemes, which points the wrong way here.
+            dark: '#5e9fe0',
+            contrastText: '#FFFFFF'
+        },
+        secondary: {
+            main: '#9c27b0',
+            dark: '#ba68c8',
+            contrastText: '#FFFFFF'
+        },
+        // Lifted from the light scheme's slate: `#4a5568` is 1.9:1 against this
+        // page and would be a third accent nobody can read.
+        tertiary: {
+            main: '#94a3b8',
+            dark: '#b4bfcd',
+            contrastText: '#000000DE'
+        },
+        surface: {
+            main: '#242c35',
+            contrastText: '#FFFFFF'
+        },
+        // Tile fills, held around 1.5:1 from the page so a tinted tile has a
+        // visible edge without a border.
+        tint: {
+            primary: '#1e3a5c',
+            secondary: '#472653',
+            tertiary: '#2e3742'
+        },
+        inputOutline: 'rgba(255, 255, 255, 0.23)',
+        background: {
+            default: '#121212',
+            paper: '#1e1e1e'
+        },
+        info: {
+            main: '#0288d1',
+            dark: '#4eacdf',
+            contrastText: '#000000DE'
+        },
+        error: {
+            main: '#d32f2f',
+            dark: '#e06d6d',
+            contrastText: '#FFFFFF'
+        },
+        success: {
+            main: '#2e7d32',
+            dark: '#6da470',
+            contrastText: '#FFFFFF'
+        },
+        warning: {
+            main: '#ed6c02',
+            dark: '#f2984e',
+            contrastText: '#000000DE'
+        },
+        grey,
+        svgBackground: {
+            main: '#242c35',
+            hover: '#242c35',
+            active: '#242c35',
+            focus: '#242c35'
+        },
+        svgFilled: {
+            main: '#9E9E9E',
+            hover: '#5e9fe0',
+            active: '#5e9fe0',
+            focus: '#5e9fe0'
+        },
+        svgStroke: {
+            main: '#FFFFFF',
+            hover: '#FFFFFF',
+            active: '#FFFFFF',
+            focus: '#FFFFFF'
+        }
+    }
+};
+export const tenantOptions = _extends({}, consoleOptions, {
+    palette: _extends({
+        mode: 'light'
+    }, tenantColorScheme.light)
+});
+export const tenantOptionsDark = _extends({}, consoleOptionsDark, {
+    palette: _extends({
+        mode: 'dark'
+    }, tenantColorScheme.dark)
+});
+export const tenantThemeLight = createResponsiveTheme({
+    themeOptions: _extends({}, tenantOptions)
+});
+export const tenantThemeDark = createResponsiveTheme({
+    themeOptions: _extends({}, tenantOptionsDark)
+});
+/**
+ * Hosts whose brand IS the operator's own brand, and which therefore keep
+ * `consoleOptions` rather than the tenant default.
+ *
+ * Comma-separated in `NEXT_PUBLIC_PLATFORM_BRAND_HOSTS`, so a self-host
+ * operator points it at their own marketing domain and their customers still
+ * resolve the neutral tenant palette. The literal is the `??` default and
+ * nothing else reads it: the platform's own deployment needs no variable to
+ * keep its brand. Setting the variable to an empty string puts every host,
+ * including the operator's own, on the tenant default.
+ *
+ * Matched on the registrable domain, after stripping the `cname--` prefix the
+ * tenant middleware puts on a CUSTOM DOMAIN before it becomes the `[host]`
+ * route segment: the param this is handed reads `cname--example.com`, never
+ * the bare apex. A platform subdomain resolves to a bare label instead
+ * (`acme` for `acme.aglyn.app`), which correctly matches nothing — a customer
+ * on a platform subdomain is still a tenant.
+ */ const CNAME_PREFIX = 'cname--';
+export const PLATFORM_BRAND_HOSTS = new Set(((_process_env_NEXT_PUBLIC_PLATFORM_BRAND_HOSTS = process.env.NEXT_PUBLIC_PLATFORM_BRAND_HOSTS) != null ? _process_env_NEXT_PUBLIC_PLATFORM_BRAND_HOSTS : 'aglyn.com,aglyn.io').split(',').map((host)=>host.trim().toLowerCase()).filter(Boolean));
+export function wearsPlatformBrand(host) {
+    if (!host) return false;
+    const normalized = host.trim().toLowerCase();
+    return PLATFORM_BRAND_HOSTS.has(normalized.startsWith(CNAME_PREFIX) ? normalized.slice(CNAME_PREFIX.length) : normalized);
+}
+/**
+ * The site key {@link wearsPlatformBrand} is asked about, read off a host
+ * document (AGL-3068).
+ *
+ * The tenant is handed its `[host]` route param, which is the attached domain
+ * under the middleware's `cname--` sentinel or a bare subdomain label. A
+ * console surface has the document instead, where those are two fields: the
+ * attached domain is what a platform-brand host is listed under, and the
+ * subdomain is what every other site is reachable by. Reading them in that
+ * order is what makes the editor ask the same question the published page
+ * answers.
+ */ export function hostBrandKey(host) {
+    return (host == null ? void 0 : host.cname) || (host == null ? void 0 : host.subdomain) || undefined;
+}
+/**
+ * The options a site's own theme is layered onto: the platform's brand for
+ * the operator's own hosts, the neutral tenant default for everyone else
+ * (AGL-3068).
+ *
+ * One decision, because it used to be four. The tenant made it per host,
+ * while the besigner canvas, the theme editor's preview and the "Default ·
+ * #…" the editor prints beside every unset slot all built on the brand base
+ * unconditionally — so a customer site was authored in Aglyn's cyan and
+ * published in MUI's blue, and an author correcting contrast was correcting a
+ * page that does not exist.
+ *
+ * An unknown host is NOT a platform host, exactly as `wearsPlatformBrand`
+ * already reads it: the operator's hosts are the named exception, so a
+ * surface that cannot name the site resolves what a customer site resolves.
+ */ export function siteBaseOptions(host, scheme) {
+    const brand = wearsPlatformBrand(host);
+    if (scheme === 'dark') return brand ? consoleOptionsDark : tenantOptionsDark;
+    return brand ? consoleOptions : tenantOptions;
+}
+/** The built theme a site with no customization of its own renders under. */ export function siteFallbackTheme(host, scheme) {
+    const brand = wearsPlatformBrand(host);
+    if (scheme === 'dark') return brand ? consoleThemeDark : tenantThemeDark;
+    return brand ? consoleThemeLight : tenantThemeLight;
+}
+
+//# sourceMappingURL=tenant.theme.js.map

package/src/lib/tenant.theme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/shared/ui/theme/src/lib/tenant.theme.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport type { PaletteOptions, Theme, ThemeOptions } from '../vendor/mui'\nimport {\n  consoleOptions,\n  consoleOptionsDark,\n  consoleThemeDark,\n  consoleThemeLight,\n} from './console.theme'\nimport createResponsiveTheme from './util/create-responsive-theme'\n\n/**\n * The default palette a tenant site wears when it has authored none of its\n * own.\n *\n * MUI's stock accents, extended with every slot this platform adds on top of\n * a MUI palette — `tertiary`, `surface`, `tint`, `inputOutline` and the three\n * `svg*` records — so a site that never opens the theme editor still resolves\n * every token a component can ask for.\n *\n * Stock rather than the Aglyn brand because the brand palette carries a\n * signed-off sub-AA pairing (white on `#00b0ff`, 2.43:1): a considered\n * decision about OUR brand, and not one to hand a customer who never made it.\n * Every accent here clears the 4.5:1 AA text bar as text and carries its own\n * `contrastText` at AA on the fill, in both schemes.\n *\n * Non-palette options come from `consoleOptions`, so component behaviour,\n * type ramp, spacing and shadows are identical platform-wide — the palette is\n * the only thing a tenant default changes.\n */\n/**\n * The one grey ramp, read from the brand palette rather than copied. A\n * neutral scale is not a brand decision, and a second copy is a second thing\n * to drift.\n */\nconst grey = (consoleOptions.palette as { grey: PaletteOptions['grey'] }).grey\n\nconst tenantColorScheme = {\n  light: {\n    primary: {\n      main: '#1976d2',\n      // The accent-as-text shade (`ACCENT_TEXT_SHADE`): 7.50:1 on the page,\n      // 7.82:1 on paper. Authored for the same reason as the console's — the\n      // slot every link resolves to belongs in the palette, not in a walk.\n      dark: '#125393',\n      contrastText: '#FFFFFF',\n    },\n    secondary: {\n      main: '#9c27b0',\n      dark: '#6d1b7b',\n      contrastText: '#FFFFFF',\n    },\n    // A neutral slate for the third accent, matching the role `tertiary`\n    // plays in the console palette.\n    tertiary: {\n      main: '#4a5568',\n      dark: '#343b49',\n      contrastText: '#FFFFFF',\n    },\n    surface: {\n      main: '#f1f3f5',\n      contrastText: '#000000DE',\n    },\n    tint: {\n      primary: '#e8f1fb',\n      secondary: '#f5e9f7',\n      tertiary: '#eef0f3',\n    },\n    inputOutline: 'rgba(0, 0, 0, 0.23)',\n    background: {\n      default: '#fafafa',\n      paper: '#ffffff',\n    },\n    info: {\n      main: '#0288d1',\n      dark: '#015f92',\n      contrastText: '#000000DE',\n    },\n    error: {\n      main: '#d32f2f',\n      dark: '#942121',\n      contrastText: '#FFFFFF',\n    },\n    success: {\n      main: '#2e7d32',\n      dark: '#205823',\n      contrastText: '#FFFFFF',\n    },\n    warning: {\n      main: '#ed6c02',\n      dark: '#a64c01',\n      contrastText: '#000000DE',\n    },\n    grey,\n    svgBackground: {\n      main: '#FAFAFA',\n      hover: '#FAFAFA',\n      active: '#FAFAFA',\n      focus: '#FAFAFA',\n    },\n    svgFilled: {\n      main: '#9E9E9E',\n      hover: '#1976d2',\n      active: '#1976d2',\n      focus: '#1976d2',\n    },\n    svgStroke: {\n      main: '#FFFFFF',\n      hover: '#FFFFFF',\n      active: '#FFFFFF',\n      focus: '#FFFFFF',\n    },\n  },\n  dark: {\n    primary: {\n      main: '#1976d2',\n      // LIGHTER than `main`, as every accent-as-text shade must be on a dark\n      // ground: 6.70:1 on the page, 5.96:1 on paper. MUI derives `dark` by\n      // darkening in both schemes, which points the wrong way here.\n      dark: '#5e9fe0',\n      contrastText: '#FFFFFF',\n    },\n    secondary: {\n      main: '#9c27b0',\n      dark: '#ba68c8',\n      contrastText: '#FFFFFF',\n    },\n    // Lifted from the light scheme's slate: `#4a5568` is 1.9:1 against this\n    // page and would be a third accent nobody can read.\n    tertiary: {\n      main: '#94a3b8',\n      dark: '#b4bfcd',\n      contrastText: '#000000DE',\n    },\n    surface: {\n      main: '#242c35',\n      contrastText: '#FFFFFF',\n    },\n    // Tile fills, held around 1.5:1 from the page so a tinted tile has a\n    // visible edge without a border.\n    tint: {\n      primary: '#1e3a5c',\n      secondary: '#472653',\n      tertiary: '#2e3742',\n    },\n    inputOutline: 'rgba(255, 255, 255, 0.23)',\n    background: {\n      default: '#121212',\n      paper: '#1e1e1e',\n    },\n    info: {\n      main: '#0288d1',\n      dark: '#4eacdf',\n      contrastText: '#000000DE',\n    },\n    error: {\n      main: '#d32f2f',\n      dark: '#e06d6d',\n      contrastText: '#FFFFFF',\n    },\n    success: {\n      main: '#2e7d32',\n      dark: '#6da470',\n      contrastText: '#FFFFFF',\n    },\n    warning: {\n      main: '#ed6c02',\n      dark: '#f2984e',\n      contrastText: '#000000DE',\n    },\n    grey,\n    svgBackground: {\n      main: '#242c35',\n      hover: '#242c35',\n      active: '#242c35',\n      focus: '#242c35',\n    },\n    svgFilled: {\n      main: '#9E9E9E',\n      hover: '#5e9fe0',\n      active: '#5e9fe0',\n      focus: '#5e9fe0',\n    },\n    svgStroke: {\n      main: '#FFFFFF',\n      hover: '#FFFFFF',\n      active: '#FFFFFF',\n      focus: '#FFFFFF',\n    },\n  },\n}\n\nexport const tenantOptions: ThemeOptions = {\n  ...consoleOptions,\n  palette: {\n    mode: 'light',\n    ...tenantColorScheme.light,\n  },\n}\nexport const tenantOptionsDark: ThemeOptions = {\n  ...consoleOptionsDark,\n  palette: {\n    mode: 'dark',\n    ...tenantColorScheme.dark,\n  },\n}\n\nexport const tenantThemeLight: Theme = createResponsiveTheme({\n  themeOptions: { ...tenantOptions },\n})\nexport const tenantThemeDark: Theme = createResponsiveTheme({\n  themeOptions: { ...tenantOptionsDark },\n})\n\n/**\n * Hosts whose brand IS the operator's own brand, and which therefore keep\n * `consoleOptions` rather than the tenant default.\n *\n * Comma-separated in `NEXT_PUBLIC_PLATFORM_BRAND_HOSTS`, so a self-host\n * operator points it at their own marketing domain and their customers still\n * resolve the neutral tenant palette. The literal is the `??` default and\n * nothing else reads it: the platform's own deployment needs no variable to\n * keep its brand. Setting the variable to an empty string puts every host,\n * including the operator's own, on the tenant default.\n *\n * Matched on the registrable domain, after stripping the `cname--` prefix the\n * tenant middleware puts on a CUSTOM DOMAIN before it becomes the `[host]`\n * route segment: the param this is handed reads `cname--example.com`, never\n * the bare apex. A platform subdomain resolves to a bare label instead\n * (`acme` for `acme.aglyn.app`), which correctly matches nothing — a customer\n * on a platform subdomain is still a tenant.\n */\nconst CNAME_PREFIX = 'cname--'\n\nexport const PLATFORM_BRAND_HOSTS: ReadonlySet<string> = new Set(\n  // Dot notation, not brackets: Next substitutes `process.env.NAME`\n  // TEXTUALLY, and never the bracket form, so a bracket read is `undefined`\n  // in any browser or edge bundle and silently falls back to the default\n  // below — which on a self-host install would hand the operator Aglyn's\n  // hosts (AGL-2037).\n  (process.env.NEXT_PUBLIC_PLATFORM_BRAND_HOSTS ?? 'aglyn.com,aglyn.io')\n    .split(',')\n    .map((host) => host.trim().toLowerCase())\n    .filter(Boolean),\n)\n\nexport function wearsPlatformBrand(host: string | undefined): boolean {\n  if (!host) return false\n  const normalized = host.trim().toLowerCase()\n  return PLATFORM_BRAND_HOSTS.has(\n    normalized.startsWith(CNAME_PREFIX)\n      ? normalized.slice(CNAME_PREFIX.length)\n      : normalized,\n  )\n}\n\n/**\n * The site key {@link wearsPlatformBrand} is asked about, read off a host\n * document (AGL-3068).\n *\n * The tenant is handed its `[host]` route param, which is the attached domain\n * under the middleware's `cname--` sentinel or a bare subdomain label. A\n * console surface has the document instead, where those are two fields: the\n * attached domain is what a platform-brand host is listed under, and the\n * subdomain is what every other site is reachable by. Reading them in that\n * order is what makes the editor ask the same question the published page\n * answers.\n */\nexport function hostBrandKey(\n  host: { cname?: string; subdomain?: string } | null | undefined,\n): string | undefined {\n  return host?.cname || host?.subdomain || undefined\n}\n\n/**\n * The options a site's own theme is layered onto: the platform's brand for\n * the operator's own hosts, the neutral tenant default for everyone else\n * (AGL-3068).\n *\n * One decision, because it used to be four. The tenant made it per host,\n * while the besigner canvas, the theme editor's preview and the \"Default ·\n * #…\" the editor prints beside every unset slot all built on the brand base\n * unconditionally — so a customer site was authored in Aglyn's cyan and\n * published in MUI's blue, and an author correcting contrast was correcting a\n * page that does not exist.\n *\n * An unknown host is NOT a platform host, exactly as `wearsPlatformBrand`\n * already reads it: the operator's hosts are the named exception, so a\n * surface that cannot name the site resolves what a customer site resolves.\n */\nexport function siteBaseOptions(\n  host: string | undefined,\n  scheme: 'light' | 'dark',\n): ThemeOptions {\n  const brand = wearsPlatformBrand(host)\n  if (scheme === 'dark') return brand ? consoleOptionsDark : tenantOptionsDark\n  return brand ? consoleOptions : tenantOptions\n}\n\n/** The built theme a site with no customization of its own renders under. */\nexport function siteFallbackTheme(\n  host: string | undefined,\n  scheme: 'light' | 'dark',\n): Theme {\n  const brand = wearsPlatformBrand(host)\n  if (scheme === 'dark') return brand ? consoleThemeDark : tenantThemeDark\n  return brand ? consoleThemeLight : tenantThemeLight\n}\n"],"names":["process","consoleOptions","consoleOptionsDark","consoleThemeDark","consoleThemeLight","createResponsiveTheme","grey","palette","tenantColorScheme","light","primary","main","dark","contrastText","secondary","tertiary","surface","tint","inputOutline","background","default","paper","info","error","success","warning","svgBackground","hover","active","focus","svgFilled","svgStroke","tenantOptions","mode","tenantOptionsDark","tenantThemeLight","themeOptions","tenantThemeDark","CNAME_PREFIX","PLATFORM_BRAND_HOSTS","Set","env","NEXT_PUBLIC_PLATFORM_BRAND_HOSTS","split","map","host","trim","toLowerCase","filter","Boolean","wearsPlatformBrand","normalized","has","startsWith","slice","length","hostBrandKey","cname","subdomain","undefined","siteBaseOptions","scheme","brand","siteFallbackTheme"],"mappings":"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"}

package/src/lib/theme.types.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2022 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export interface IActionStates {
+    main: string;
+    hover: string;
+    active: string;
+    focus: string;
+}
+export interface ColorPropOverrides {
+    tertiary: true;
+    surface: true;
+}