@aglyn/shared-ui-theme 1.0.0-beta.171 → 1.0.0-beta.173
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +4 -4
- package/src/index.d.ts +1 -0
- package/src/index.js +1 -0
- package/src/index.js.map +1 -1
- package/src/lib/components/host-theme-provider.js +41 -30
- package/src/lib/components/host-theme-provider.js.map +1 -1
- package/src/lib/components/site-scheme-themes.d.ts +31 -0
- package/src/lib/components/site-scheme-themes.js +41 -0
- package/src/lib/components/site-scheme-themes.js.map +1 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aglyn/shared-ui-theme",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.173",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"homepage": "https://aglyn.com",
|
|
6
6
|
"repository": {
|
|
@@ -25,9 +25,9 @@
|
|
|
25
25
|
"./package.json": "./package.json"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@aglyn/shared-data-types": "1.0.0-beta.
|
|
29
|
-
"@aglyn/shared-util-tools": "1.0.0-beta.
|
|
30
|
-
"@aglyn/shared-util-vendor": "1.0.0-beta.
|
|
28
|
+
"@aglyn/shared-data-types": "1.0.0-beta.173",
|
|
29
|
+
"@aglyn/shared-util-tools": "1.0.0-beta.173",
|
|
30
|
+
"@aglyn/shared-util-vendor": "1.0.0-beta.173",
|
|
31
31
|
"@emotion/cache": "^11.14.0",
|
|
32
32
|
"@emotion/react": "11.14.0",
|
|
33
33
|
"@swc/helpers": "0.5.23",
|
package/src/index.d.ts
CHANGED
|
@@ -21,6 +21,7 @@ export * from './lib/constants';
|
|
|
21
21
|
export * from './lib/console.theme';
|
|
22
22
|
export * from './lib/tenant.theme';
|
|
23
23
|
export * from './lib/components/host-theme-provider';
|
|
24
|
+
export * from './lib/components/site-scheme-themes';
|
|
24
25
|
export * from './lib/components/theme-css-var-provider';
|
|
25
26
|
export * from './lib/hocs/create-with-emotion-client-cache';
|
|
26
27
|
export * from './lib/hocs/create-with-theme-provider';
|
package/src/index.js
CHANGED
|
@@ -35,6 +35,7 @@ export * from "./lib/constants.js";
|
|
|
35
35
|
export * from "./lib/console.theme.js";
|
|
36
36
|
export * from "./lib/tenant.theme.js";
|
|
37
37
|
export * from "./lib/components/host-theme-provider.js";
|
|
38
|
+
export * from "./lib/components/site-scheme-themes.js";
|
|
38
39
|
export * from "./lib/components/theme-css-var-provider.js";
|
|
39
40
|
export * from "./lib/hocs/create-with-emotion-client-cache.js";
|
|
40
41
|
export * from "./lib/hocs/create-with-theme-provider.js";
|
package/src/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../libs/shared/ui/theme/src/index.ts"],"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\nexport * from './vendor/emotion'\n// `./vendor/jss` is NOT re-exported (AGL-2682), for the reason AGL-2486\n// recorded on the shared-util-vendor barrel and measured the same way. Its two\n// exports are `JSS` (the whole `jss` namespace) and `jssRtl`, and NOTHING in\n// the repo reads either of them from this index. The one real consumer,\n// `libs/shared/ui/jsx/src/lib/components/sandbox-frame.tsx`, imports `jss` and\n// `jss-rtl` from the packages directly — and that component is deliberately\n// absent from the shared-ui-jsx barrel, so it never reaches a published page.\n//\n// What the `export *` did instead was put `jss-rtl` — and through it\n// `rtl-css-js`, a full CSS property/value mirroring table — in front of every\n// file that takes anything at all from this index, which on the tenant is the\n// host theme, both theme providers and the emotion cache: everything a\n// customer page renders. Measured -7.9 KB raw off the published route's eager\n// chunk group. `sandbox-frame` is the pattern to copy: import `jss` and\n// `jss-rtl` where they are used.\nexport * from './vendor/mui'\n\nexport * from './lib/theme.types'\nexport * from './lib/constants'\n\nexport * from './lib/console.theme'\nexport * from './lib/tenant.theme'\n\nexport * from './lib/components/host-theme-provider'\nexport * from './lib/components/theme-css-var-provider'\n\nexport * from './lib/hocs/create-with-emotion-client-cache'\nexport * from './lib/hocs/create-with-theme-provider'\n\nexport * from './lib/util/accent-text'\nexport * from './lib/util/accessible-shade'\nexport * from './lib/util/create-responsive-theme'\nexport * from './lib/util/emotion-cache'\nexport * from './lib/util/generate-component-class-keys'\nexport * from './lib/util/host-theme'\nexport * from './lib/util/layered-emotion-cache'\nexport * from './lib/util/merge-sx-props'\n"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED,cAAc,sBAAkB;AAChC,wEAAwE;AACxE,+EAA+E;AAC/E,6EAA6E;AAC7E,wEAAwE;AACxE,+EAA+E;AAC/E,4EAA4E;AAC5E,8EAA8E;AAC9E,EAAE;AACF,qEAAqE;AACrE,8EAA8E;AAC9E,8EAA8E;AAC9E,uEAAuE;AACvE,8EAA8E;AAC9E,wEAAwE;AACxE,iCAAiC;AACjC,cAAc,kBAAc;AAE5B,cAAc,uBAAmB;AACjC,cAAc,qBAAiB;AAE/B,cAAc,yBAAqB;AACnC,cAAc,wBAAoB;AAElC,cAAc,0CAAsC;AACpD,cAAc,6CAAyC;AAEvD,cAAc,iDAA6C;AAC3D,cAAc,2CAAuC;AAErD,cAAc,4BAAwB;AACtC,cAAc,iCAA6B;AAC3C,cAAc,wCAAoC;AAClD,cAAc,8BAA0B;AACxC,cAAc,8CAA0C;AACxD,cAAc,2BAAuB;AACrC,cAAc,sCAAkC;AAChD,cAAc,+BAA2B"}
|
|
1
|
+
{"version":3,"sources":["../../../../../../libs/shared/ui/theme/src/index.ts"],"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\nexport * from './vendor/emotion'\n// `./vendor/jss` is NOT re-exported (AGL-2682), for the reason AGL-2486\n// recorded on the shared-util-vendor barrel and measured the same way. Its two\n// exports are `JSS` (the whole `jss` namespace) and `jssRtl`, and NOTHING in\n// the repo reads either of them from this index. The one real consumer,\n// `libs/shared/ui/jsx/src/lib/components/sandbox-frame.tsx`, imports `jss` and\n// `jss-rtl` from the packages directly — and that component is deliberately\n// absent from the shared-ui-jsx barrel, so it never reaches a published page.\n//\n// What the `export *` did instead was put `jss-rtl` — and through it\n// `rtl-css-js`, a full CSS property/value mirroring table — in front of every\n// file that takes anything at all from this index, which on the tenant is the\n// host theme, both theme providers and the emotion cache: everything a\n// customer page renders. Measured -7.9 KB raw off the published route's eager\n// chunk group. `sandbox-frame` is the pattern to copy: import `jss` and\n// `jss-rtl` where they are used.\nexport * from './vendor/mui'\n\nexport * from './lib/theme.types'\nexport * from './lib/constants'\n\nexport * from './lib/console.theme'\nexport * from './lib/tenant.theme'\n\nexport * from './lib/components/host-theme-provider'\nexport * from './lib/components/site-scheme-themes'\nexport * from './lib/components/theme-css-var-provider'\n\nexport * from './lib/hocs/create-with-emotion-client-cache'\nexport * from './lib/hocs/create-with-theme-provider'\n\nexport * from './lib/util/accent-text'\nexport * from './lib/util/accessible-shade'\nexport * from './lib/util/create-responsive-theme'\nexport * from './lib/util/emotion-cache'\nexport * from './lib/util/generate-component-class-keys'\nexport * from './lib/util/host-theme'\nexport * from './lib/util/layered-emotion-cache'\nexport * from './lib/util/merge-sx-props'\n"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED,cAAc,sBAAkB;AAChC,wEAAwE;AACxE,+EAA+E;AAC/E,6EAA6E;AAC7E,wEAAwE;AACxE,+EAA+E;AAC/E,4EAA4E;AAC5E,8EAA8E;AAC9E,EAAE;AACF,qEAAqE;AACrE,8EAA8E;AAC9E,8EAA8E;AAC9E,uEAAuE;AACvE,8EAA8E;AAC9E,wEAAwE;AACxE,iCAAiC;AACjC,cAAc,kBAAc;AAE5B,cAAc,uBAAmB;AACjC,cAAc,qBAAiB;AAE/B,cAAc,yBAAqB;AACnC,cAAc,wBAAoB;AAElC,cAAc,0CAAsC;AACpD,cAAc,yCAAqC;AACnD,cAAc,6CAAyC;AAEvD,cAAc,iDAA6C;AAC3D,cAAc,2CAAuC;AAErD,cAAc,4BAAwB;AACtC,cAAc,iCAA6B;AAC3C,cAAc,wCAAoC;AAClD,cAAc,8BAA0B;AACxC,cAAc,8CAA0C;AACxD,cAAc,2BAAuB;AACrC,cAAc,sCAAkC;AAChD,cAAc,+BAA2B"}
|
|
@@ -22,6 +22,7 @@ import { createContext, useContext, useMemo } from "react";
|
|
|
22
22
|
import { ThemeProvider } from "../../vendor/mui.js";
|
|
23
23
|
import { ThemeContextDispatch, useThemeModeState } from "../hocs/create-with-theme-provider.js";
|
|
24
24
|
import { createResponsiveTheme } from "../util/create-responsive-theme.js";
|
|
25
|
+
import { createSiteSchemeThemes, SiteSchemeThemesContext } from "./site-scheme-themes.js";
|
|
25
26
|
import { hasHostTheme, hostThemeToThemeOptions, mergeThemeOptions } from "../util/host-theme.js";
|
|
26
27
|
/**
|
|
27
28
|
* Carries the persisted host theme document from wherever it is fetched
|
|
@@ -98,44 +99,54 @@ export function useHostThemeDocument() {
|
|
|
98
99
|
cookieMode,
|
|
99
100
|
canGoDark
|
|
100
101
|
]);
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
102
|
+
// One builder for both schemes (AGL-3284): the active theme and the theme
|
|
103
|
+
// an "Always light" / "Always dark" element forces are the SAME
|
|
104
|
+
// construction, so a pinned band can never drift from what the site would
|
|
105
|
+
// render in that scheme. Built lazily, per scheme, on first ask.
|
|
106
|
+
const schemeThemes = useMemo(()=>createSiteSchemeThemes((forScheme)=>{
|
|
107
|
+
var _ref;
|
|
108
|
+
if (!hasHostTheme(hostTheme)) {
|
|
109
|
+
const [light, dark] = _isArr(fallback) ? fallback : [
|
|
110
|
+
fallback,
|
|
111
|
+
fallback
|
|
112
|
+
];
|
|
113
|
+
return forScheme === 'dark' ? dark : light;
|
|
114
|
+
}
|
|
115
|
+
// Layer the host's overrides onto the brand base rather than
|
|
116
|
+
// replacing it (AGL-1180) — otherwise customizing one value repaints
|
|
117
|
+
// every other slot in MUI's stock palette.
|
|
118
|
+
const [lightBase, darkBase] = _isArr(baseOptions) ? baseOptions : [
|
|
119
|
+
baseOptions,
|
|
120
|
+
baseOptions
|
|
107
121
|
];
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
const base = (_ref = scheme === 'dark' ? darkBase : lightBase) != null ? _ref : {};
|
|
118
|
-
const converted = mergeThemeOptions(base, hostThemeToThemeOptions(hostTheme, scheme));
|
|
119
|
-
return createResponsiveTheme({
|
|
120
|
-
themeOptions: _extends({}, converted, themeOptions, {
|
|
121
|
-
palette: _extends({}, converted.palette, themeOptions == null ? void 0 : themeOptions.palette),
|
|
122
|
-
components: _extends({}, converted.components, themeOptions == null ? void 0 : themeOptions.components)
|
|
123
|
-
})
|
|
124
|
-
});
|
|
125
|
-
}, [
|
|
122
|
+
const base = (_ref = forScheme === 'dark' ? darkBase : lightBase) != null ? _ref : {};
|
|
123
|
+
const converted = mergeThemeOptions(base, hostThemeToThemeOptions(hostTheme, forScheme));
|
|
124
|
+
return createResponsiveTheme({
|
|
125
|
+
themeOptions: _extends({}, converted, themeOptions, {
|
|
126
|
+
palette: _extends({}, converted.palette, themeOptions == null ? void 0 : themeOptions.palette),
|
|
127
|
+
components: _extends({}, converted.components, themeOptions == null ? void 0 : themeOptions.components)
|
|
128
|
+
})
|
|
129
|
+
});
|
|
130
|
+
}), [
|
|
126
131
|
hostTheme,
|
|
127
132
|
fallback,
|
|
128
133
|
baseOptions,
|
|
129
|
-
themeOptions
|
|
134
|
+
themeOptions
|
|
135
|
+
]);
|
|
136
|
+
const activeTheme = useMemo(()=>schemeThemes(scheme), [
|
|
137
|
+
schemeThemes,
|
|
130
138
|
scheme
|
|
131
139
|
]);
|
|
132
140
|
return /*#__PURE__*/ _jsx(ThemeContextDispatch.Provider, {
|
|
133
141
|
value: modeContext,
|
|
134
|
-
children: /*#__PURE__*/ _jsx(
|
|
135
|
-
|
|
136
|
-
children:
|
|
137
|
-
|
|
138
|
-
children: children
|
|
142
|
+
children: /*#__PURE__*/ _jsx(SiteSchemeThemesContext.Provider, {
|
|
143
|
+
value: schemeThemes,
|
|
144
|
+
children: /*#__PURE__*/ _jsx(ThemeProvider, {
|
|
145
|
+
theme: activeTheme,
|
|
146
|
+
children: disableCssBaseline ? children : /*#__PURE__*/ _jsx(CssBaseline, {
|
|
147
|
+
enableColorScheme: true,
|
|
148
|
+
children: children
|
|
149
|
+
})
|
|
139
150
|
})
|
|
140
151
|
})
|
|
141
152
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../../../libs/shared/ui/theme/src/lib/components/host-theme-provider.tsx"],"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 */\n'use client'\n\nimport type { HostTheme } from '@aglyn/shared-data-types'\nimport { _isArr } from '@aglyn/shared-util-tools'\nimport { CssBaseline } from '@mui/material'\nimport { createContext, useContext, useMemo } from 'react'\nimport type { Theme, ThemeOptions } from '../../vendor/mui'\nimport { ThemeProvider } from '../../vendor/mui'\nimport {\n type ThemeMode,\n ThemeContextDispatch,\n type UseThemeMode,\n useThemeModeState,\n} from '../hocs/create-with-theme-provider'\nimport { createResponsiveTheme } from '../util/create-responsive-theme'\nimport {\n hasHostTheme,\n hostThemeToThemeOptions,\n mergeThemeOptions,\n} from '../util/host-theme'\n\n/**\n * Carries the persisted host theme document from wherever it is fetched\n * (e.g. Next page props) down to {@link HostThemeProvider}, which may live\n * above the page tree in _app.\n */\nexport const HostThemeDocumentContext = createContext<HostTheme | undefined>(\n undefined,\n)\n\nexport function useHostThemeDocument() {\n return useContext(HostThemeDocumentContext)\n}\n\n/**\n * Which site an editor surface is rendering, for the layer BELOW the theme\n * document: the base its overrides are layered onto (AGL-3068).\n *\n * The tenant reads the site from its route and needs no context. Every\n * console surface that renders a site — the canvas, Preview, the element\n * previews, the theme editor — is on a console route instead, so the site it\n * is showing has to be said out loud, and said above them all: the components\n * drawer sits OUTSIDE the besigner page, and a context provided inside the\n * page cannot reach it.\n *\n * Undefined means \"no site named\", which `siteBaseOptions` reads as a\n * customer site — the same answer the tenant gives a host it cannot match.\n */\nexport const HostSiteKeyContext = createContext<string | undefined>(undefined)\n\n/** The site key for the surface, for a theme base or a brand decision. */\nexport function useHostSiteKey() {\n return useContext(HostSiteKeyContext)\n}\n\nexport type HostThemeProviderProps = {\n /** Host theme document; falls back to {@link HostThemeDocumentContext} when omitted. */\n theme?: HostTheme\n /** Theme(s) rendered when the host has no customization. A single theme is used for both schemes. */\n fallback: Theme | [lightTheme: Theme, darkTheme: Theme]\n /**\n * Options the host's overrides are layered onto (AGL-1180). Supply the\n * same brand theme `fallback` was built from: without it a host that sets\n * one value loses the brand for every value it did NOT set, because the\n * converter emits only what was explicitly customized and MUI fills the\n * rest from its own stock palette.\n */\n baseOptions?: ThemeOptions | [light: ThemeOptions, dark: ThemeOptions]\n /** Extra options merged into both generated schemes (e.g. portal container defaults). */\n themeOptions?: ThemeOptions\n /**\n * The visitor's stored light/dark choice, resolved from the request's\n * cookies by the server component above this one; `null` when they have\n * chosen nothing. It is what the first render is built from, so a visitor\n * who asked for dark gets dark in the first byte rather than a light page\n * that repaints once React has hydrated. Omitted, the mode is read from\n * `document.cookie`, which no server render can see.\n */\n initialMode?: ThemeMode\n /**\n * The DEVICE's light/dark preference, read from the request's\n * `Sec-CH-Prefers-Color-Scheme` client hint by the server component above\n * this one; `null` on a browser that sends no hint. It decides the scheme\n * only for a visitor who has chosen nothing — `initialMode` outranks it —\n * and it is what keeps \"Device default\" from meaning \"light until the page\n * has hydrated\" on a dark device.\n */\n initialDeviceMode?: ThemeMode\n disableCssBaseline?: boolean\n children?: JSX.Children\n}\n\n/**\n * Site-facing theme provider: renders children under the host's persisted\n * MUI theme, resolving light/dark via the shared cookie +\n * prefers-color-scheme mode state (same machinery as\n * `createWithThemeProvider`, so `useThemeMode` toggles keep working).\n *\n * Both layers are decided before paint where the request can answer them: the\n * explicit choice from `initialMode`, the device's own preference from\n * `initialDeviceMode`. Neither has a CSS form to fall back on, because a site\n * resolves its dark scheme in JS — a single-mode theme swapped between\n * schemes, and node styles whose `@scheme dark` slices are merged against\n * `palette.mode` — so a media query in a stylesheet could not make the\n * decision instead. On a browser that sends no color-scheme client hint the\n * device layer is unanswerable on the server and settles at hydration, which\n * is why `useMediaQuery` remains the authority once there is one.\n */\nexport function HostThemeProvider(props: HostThemeProviderProps) {\n const {\n theme,\n fallback,\n baseOptions,\n themeOptions,\n initialMode,\n initialDeviceMode,\n disableCssBaseline,\n children,\n } = props\n const contextTheme = useHostThemeDocument()\n const hostTheme = theme ?? contextTheme\n const themeModeState = useThemeModeState(initialMode, initialDeviceMode)\n const [[, themeMode], toggleThemeMode, cookieMode] = themeModeState\n const requested = themeMode === 'dark' ? 'dark' : 'light'\n\n /**\n * Dark follows the visitor unless the site switched it off.\n *\n * A site needs no dark design of its own to go dark: the platform's default\n * dark palette (`consoleOptionsDark`, handed in as `baseOptions`) renders\n * under whatever dark colors the site authored, by the same layering that\n * gives it the brand palette in light (AGL-1180), and a host with no theme\n * at all gets the dark fallback. Content that carries light-only hex\n * backgrounds still reads badly under dark text tokens — that is a content\n * choice, and the site owner makes it with `darkScheme: 'off'` in the theme\n * editor, which keeps every visitor on light. The theme mode switcher reads\n * the same answer and hides on such a site (AGL-2676).\n */\n const canGoDark = hostTheme?.darkScheme !== 'off'\n const scheme = requested === 'dark' && !canGoDark ? 'light' : requested\n\n // The mode state plus whether this site can honor a dark request, so a\n // visitor-facing control (the theme mode switcher) can tell a site that\n // will never go dark from one that merely is not dark right now.\n const modeContext = useMemo<UseThemeMode>(\n () => [themeModeState[0], toggleThemeMode, cookieMode, canGoDark],\n [themeModeState, toggleThemeMode, cookieMode, canGoDark],\n )\n\n const activeTheme = useMemo<Theme>(() => {\n if (!hasHostTheme(hostTheme)) {\n const [light, dark] = _isArr(fallback) ? fallback : [fallback, fallback]\n return scheme === 'dark' ? dark : light\n }\n // Layer the host's overrides onto the brand base rather than replacing\n // it (AGL-1180) — otherwise customizing one value repaints every other\n // slot in MUI's stock palette.\n const [lightBase, darkBase] = _isArr(baseOptions)\n ? baseOptions\n : [baseOptions, baseOptions]\n const base = (scheme === 'dark' ? darkBase : lightBase) ?? {}\n const converted = mergeThemeOptions(\n base,\n hostThemeToThemeOptions(hostTheme, scheme),\n )\n return createResponsiveTheme({\n themeOptions: {\n ...converted,\n ...themeOptions,\n palette: { ...converted.palette, ...themeOptions?.palette },\n components: { ...converted.components, ...themeOptions?.components },\n },\n })\n }, [hostTheme, fallback, baseOptions, themeOptions, scheme])\n\n return (\n <ThemeContextDispatch.Provider value={modeContext}>\n <ThemeProvider theme={activeTheme}>\n {disableCssBaseline ? (\n children\n ) : (\n <CssBaseline enableColorScheme>{children}</CssBaseline>\n )}\n </ThemeProvider>\n </ThemeContextDispatch.Provider>\n )\n}\nHostThemeProvider.displayName = 'HostThemeProvider'\n\nexport default HostThemeProvider\n"],"names":["_isArr","CssBaseline","createContext","useContext","useMemo","ThemeProvider","ThemeContextDispatch","useThemeModeState","createResponsiveTheme","hasHostTheme","hostThemeToThemeOptions","mergeThemeOptions","HostThemeDocumentContext","undefined","useHostThemeDocument","HostSiteKeyContext","useHostSiteKey","HostThemeProvider","props","theme","fallback","baseOptions","themeOptions","initialMode","initialDeviceMode","disableCssBaseline","children","contextTheme","hostTheme","themeModeState","themeMode","toggleThemeMode","cookieMode","requested","canGoDark","darkScheme","scheme","modeContext","activeTheme","light","dark","lightBase","darkBase","base","converted","palette","components","Provider","value","enableColorScheme","displayName"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD;;;AAGA,SAASA,MAAM,QAAQ,2BAA0B;AACjD,SAASC,WAAW,QAAQ,gBAAe;AAC3C,SAASC,aAAa,EAAEC,UAAU,EAAEC,OAAO,QAAQ,QAAO;AAE1D,SAASC,aAAa,QAAQ,sBAAkB;AAChD,SAEEC,oBAAoB,EAEpBC,iBAAiB,QACZ,wCAAoC;AAC3C,SAASC,qBAAqB,QAAQ,qCAAiC;AACvE,SACEC,YAAY,EACZC,uBAAuB,EACvBC,iBAAiB,QACZ,wBAAoB;AAE3B;;;;CAIC,GACD,OAAO,MAAMC,yCAA2BV,cACtCW,WACD;AAED,OAAO,SAASC;IACd,OAAOX,WAAWS;AACpB;AAEA;;;;;;;;;;;;;CAaC,GACD,OAAO,MAAMG,mCAAqBb,cAAkCW,WAAU;AAE9E,wEAAwE,GACxE,OAAO,SAASG;IACd,OAAOb,WAAWY;AACpB;AAuCA;;;;;;;;;;;;;;;CAeC,GACD,OAAO,SAASE,kBAAkBC,KAA6B;IAC7D,MAAM,EACJC,KAAK,EACLC,QAAQ,EACRC,WAAW,EACXC,YAAY,EACZC,WAAW,EACXC,iBAAiB,EACjBC,kBAAkB,EAClBC,QAAQ,EACT,GAAGR;IACJ,MAAMS,eAAeb;IACrB,MAAMc,YAAYT,gBAAAA,QAASQ;IAC3B,MAAME,iBAAiBtB,kBAAkBgB,aAAaC;IACtD,MAAM,CAAC,GAAGM,UAAU,EAAEC,iBAAiBC,WAAW,GAAGH;IACrD,MAAMI,YAAYH,cAAc,SAAS,SAAS;IAElD;;;;;;;;;;;;GAYC,GACD,MAAMI,YAAYN,CAAAA,6BAAAA,UAAWO,UAAU,MAAK;IAC5C,MAAMC,SAASH,cAAc,UAAU,CAACC,YAAY,UAAUD;IAE9D,uEAAuE;IACvE,wEAAwE;IACxE,iEAAiE;IACjE,MAAMI,cAAcjC,QAClB,IAAM;YAACyB,cAAc,CAAC,EAAE;YAAEE;YAAiBC;YAAYE;SAAU,EACjE;QAACL;QAAgBE;QAAiBC;QAAYE;KAAU;IAG1D,MAAMI,cAAclC,QAAe;YAWnBgC;QAVd,IAAI,CAAC3B,aAAamB,YAAY;YAC5B,MAAM,CAACW,OAAOC,KAAK,GAAGxC,OAAOoB,YAAYA,WAAW;gBAACA;gBAAUA;aAAS;YACxE,OAAOgB,WAAW,SAASI,OAAOD;QACpC;QACA,uEAAuE;QACvE,uEAAuE;QACvE,+BAA+B;QAC/B,MAAM,CAACE,WAAWC,SAAS,GAAG1C,OAAOqB,eACjCA,cACA;YAACA;YAAaA;SAAY;QAC9B,MAAMsB,QAAQP,OAAAA,WAAW,SAASM,WAAWD,qBAA/BL,OAA6C,CAAC;QAC5D,MAAMQ,YAAYjC,kBAChBgC,MACAjC,wBAAwBkB,WAAWQ;QAErC,OAAO5B,sBAAsB;YAC3Bc,cAAc,aACTsB,WACAtB;gBACHuB,SAAS,aAAKD,UAAUC,OAAO,EAAKvB,gCAAAA,aAAcuB,OAAO;gBACzDC,YAAY,aAAKF,UAAUE,UAAU,EAAKxB,gCAAAA,aAAcwB,UAAU;;QAEtE;IACF,GAAG;QAAClB;QAAWR;QAAUC;QAAaC;QAAcc;KAAO;IAE3D,qBACE,KAAC9B,qBAAqByC,QAAQ;QAACC,OAAOX;kBACpC,cAAA,KAAChC;YAAcc,OAAOmB;sBACnBb,qBACCC,yBAEA,KAACzB;gBAAYgD,iBAAiB;0BAAEvB;;;;AAK1C;AACAT,kBAAkBiC,WAAW,GAAG;AAEhC,eAAejC,kBAAiB"}
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../libs/shared/ui/theme/src/lib/components/host-theme-provider.tsx"],"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 */\n'use client'\n\nimport type { HostTheme } from '@aglyn/shared-data-types'\nimport { _isArr } from '@aglyn/shared-util-tools'\nimport { CssBaseline } from '@mui/material'\nimport { createContext, useContext, useMemo } from 'react'\nimport type { Theme, ThemeOptions } from '../../vendor/mui'\nimport { ThemeProvider } from '../../vendor/mui'\nimport {\n type ThemeMode,\n ThemeContextDispatch,\n type UseThemeMode,\n useThemeModeState,\n} from '../hocs/create-with-theme-provider'\nimport { createResponsiveTheme } from '../util/create-responsive-theme'\nimport {\n createSiteSchemeThemes,\n SiteSchemeThemesContext,\n} from './site-scheme-themes'\nimport {\n hasHostTheme,\n hostThemeToThemeOptions,\n mergeThemeOptions,\n} from '../util/host-theme'\n\n/**\n * Carries the persisted host theme document from wherever it is fetched\n * (e.g. Next page props) down to {@link HostThemeProvider}, which may live\n * above the page tree in _app.\n */\nexport const HostThemeDocumentContext = createContext<HostTheme | undefined>(\n undefined,\n)\n\nexport function useHostThemeDocument() {\n return useContext(HostThemeDocumentContext)\n}\n\n/**\n * Which site an editor surface is rendering, for the layer BELOW the theme\n * document: the base its overrides are layered onto (AGL-3068).\n *\n * The tenant reads the site from its route and needs no context. Every\n * console surface that renders a site — the canvas, Preview, the element\n * previews, the theme editor — is on a console route instead, so the site it\n * is showing has to be said out loud, and said above them all: the components\n * drawer sits OUTSIDE the besigner page, and a context provided inside the\n * page cannot reach it.\n *\n * Undefined means \"no site named\", which `siteBaseOptions` reads as a\n * customer site — the same answer the tenant gives a host it cannot match.\n */\nexport const HostSiteKeyContext = createContext<string | undefined>(undefined)\n\n/** The site key for the surface, for a theme base or a brand decision. */\nexport function useHostSiteKey() {\n return useContext(HostSiteKeyContext)\n}\n\nexport type HostThemeProviderProps = {\n /** Host theme document; falls back to {@link HostThemeDocumentContext} when omitted. */\n theme?: HostTheme\n /** Theme(s) rendered when the host has no customization. A single theme is used for both schemes. */\n fallback: Theme | [lightTheme: Theme, darkTheme: Theme]\n /**\n * Options the host's overrides are layered onto (AGL-1180). Supply the\n * same brand theme `fallback` was built from: without it a host that sets\n * one value loses the brand for every value it did NOT set, because the\n * converter emits only what was explicitly customized and MUI fills the\n * rest from its own stock palette.\n */\n baseOptions?: ThemeOptions | [light: ThemeOptions, dark: ThemeOptions]\n /** Extra options merged into both generated schemes (e.g. portal container defaults). */\n themeOptions?: ThemeOptions\n /**\n * The visitor's stored light/dark choice, resolved from the request's\n * cookies by the server component above this one; `null` when they have\n * chosen nothing. It is what the first render is built from, so a visitor\n * who asked for dark gets dark in the first byte rather than a light page\n * that repaints once React has hydrated. Omitted, the mode is read from\n * `document.cookie`, which no server render can see.\n */\n initialMode?: ThemeMode\n /**\n * The DEVICE's light/dark preference, read from the request's\n * `Sec-CH-Prefers-Color-Scheme` client hint by the server component above\n * this one; `null` on a browser that sends no hint. It decides the scheme\n * only for a visitor who has chosen nothing — `initialMode` outranks it —\n * and it is what keeps \"Device default\" from meaning \"light until the page\n * has hydrated\" on a dark device.\n */\n initialDeviceMode?: ThemeMode\n disableCssBaseline?: boolean\n children?: JSX.Children\n}\n\n/**\n * Site-facing theme provider: renders children under the host's persisted\n * MUI theme, resolving light/dark via the shared cookie +\n * prefers-color-scheme mode state (same machinery as\n * `createWithThemeProvider`, so `useThemeMode` toggles keep working).\n *\n * Both layers are decided before paint where the request can answer them: the\n * explicit choice from `initialMode`, the device's own preference from\n * `initialDeviceMode`. Neither has a CSS form to fall back on, because a site\n * resolves its dark scheme in JS — a single-mode theme swapped between\n * schemes, and node styles whose `@scheme dark` slices are merged against\n * `palette.mode` — so a media query in a stylesheet could not make the\n * decision instead. On a browser that sends no color-scheme client hint the\n * device layer is unanswerable on the server and settles at hydration, which\n * is why `useMediaQuery` remains the authority once there is one.\n */\nexport function HostThemeProvider(props: HostThemeProviderProps) {\n const {\n theme,\n fallback,\n baseOptions,\n themeOptions,\n initialMode,\n initialDeviceMode,\n disableCssBaseline,\n children,\n } = props\n const contextTheme = useHostThemeDocument()\n const hostTheme = theme ?? contextTheme\n const themeModeState = useThemeModeState(initialMode, initialDeviceMode)\n const [[, themeMode], toggleThemeMode, cookieMode] = themeModeState\n const requested = themeMode === 'dark' ? 'dark' : 'light'\n\n /**\n * Dark follows the visitor unless the site switched it off.\n *\n * A site needs no dark design of its own to go dark: the platform's default\n * dark palette (`consoleOptionsDark`, handed in as `baseOptions`) renders\n * under whatever dark colors the site authored, by the same layering that\n * gives it the brand palette in light (AGL-1180), and a host with no theme\n * at all gets the dark fallback. Content that carries light-only hex\n * backgrounds still reads badly under dark text tokens — that is a content\n * choice, and the site owner makes it with `darkScheme: 'off'` in the theme\n * editor, which keeps every visitor on light. The theme mode switcher reads\n * the same answer and hides on such a site (AGL-2676).\n */\n const canGoDark = hostTheme?.darkScheme !== 'off'\n const scheme = requested === 'dark' && !canGoDark ? 'light' : requested\n\n // The mode state plus whether this site can honor a dark request, so a\n // visitor-facing control (the theme mode switcher) can tell a site that\n // will never go dark from one that merely is not dark right now.\n const modeContext = useMemo<UseThemeMode>(\n () => [themeModeState[0], toggleThemeMode, cookieMode, canGoDark],\n [themeModeState, toggleThemeMode, cookieMode, canGoDark],\n )\n\n // One builder for both schemes (AGL-3284): the active theme and the theme\n // an \"Always light\" / \"Always dark\" element forces are the SAME\n // construction, so a pinned band can never drift from what the site would\n // render in that scheme. Built lazily, per scheme, on first ask.\n const schemeThemes = useMemo(\n () =>\n createSiteSchemeThemes((forScheme): Theme => {\n if (!hasHostTheme(hostTheme)) {\n const [light, dark] = _isArr(fallback)\n ? fallback\n : [fallback, fallback]\n return forScheme === 'dark' ? dark : light\n }\n // Layer the host's overrides onto the brand base rather than\n // replacing it (AGL-1180) — otherwise customizing one value repaints\n // every other slot in MUI's stock palette.\n const [lightBase, darkBase] = _isArr(baseOptions)\n ? baseOptions\n : [baseOptions, baseOptions]\n const base = (forScheme === 'dark' ? darkBase : lightBase) ?? {}\n const converted = mergeThemeOptions(\n base,\n hostThemeToThemeOptions(hostTheme, forScheme),\n )\n return createResponsiveTheme({\n themeOptions: {\n ...converted,\n ...themeOptions,\n palette: { ...converted.palette, ...themeOptions?.palette },\n components: {\n ...converted.components,\n ...themeOptions?.components,\n },\n },\n })\n }),\n [hostTheme, fallback, baseOptions, themeOptions],\n )\n\n const activeTheme = useMemo<Theme>(\n () => schemeThemes(scheme),\n [schemeThemes, scheme],\n )\n\n return (\n <ThemeContextDispatch.Provider value={modeContext}>\n {/*\n * Deliberately NOT gated on `canGoDark`. `darkScheme: 'off'` keeps the\n * VISITOR's choice from turning the page dark; an element the author\n * set to \"Always dark\" is the author's own content decision about one\n * band of it, made in the editor where they can see the result, so it\n * still resolves against the site's dark theme (AGL-3284).\n */}\n <SiteSchemeThemesContext.Provider value={schemeThemes}>\n <ThemeProvider theme={activeTheme}>\n {disableCssBaseline ? (\n children\n ) : (\n <CssBaseline enableColorScheme>{children}</CssBaseline>\n )}\n </ThemeProvider>\n </SiteSchemeThemesContext.Provider>\n </ThemeContextDispatch.Provider>\n )\n}\nHostThemeProvider.displayName = 'HostThemeProvider'\n\nexport default HostThemeProvider\n"],"names":["_isArr","CssBaseline","createContext","useContext","useMemo","ThemeProvider","ThemeContextDispatch","useThemeModeState","createResponsiveTheme","createSiteSchemeThemes","SiteSchemeThemesContext","hasHostTheme","hostThemeToThemeOptions","mergeThemeOptions","HostThemeDocumentContext","undefined","useHostThemeDocument","HostSiteKeyContext","useHostSiteKey","HostThemeProvider","props","theme","fallback","baseOptions","themeOptions","initialMode","initialDeviceMode","disableCssBaseline","children","contextTheme","hostTheme","themeModeState","themeMode","toggleThemeMode","cookieMode","requested","canGoDark","darkScheme","scheme","modeContext","schemeThemes","forScheme","light","dark","lightBase","darkBase","base","converted","palette","components","activeTheme","Provider","value","enableColorScheme","displayName"],"mappings":"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"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import type { Theme } from '../../vendor/mui';
|
|
2
|
+
/** The two schemes a site renders in. */
|
|
3
|
+
export type SiteScheme = 'light' | 'dark';
|
|
4
|
+
/**
|
|
5
|
+
* The SITE's full theme for either scheme, whichever one is active
|
|
6
|
+
* (AGL-3284).
|
|
7
|
+
*
|
|
8
|
+
* A site resolves light/dark by swapping one single-mode MUI theme, so
|
|
9
|
+
* everything below the provider sees exactly one scheme. An element the author
|
|
10
|
+
* pinned to "Always light" / "Always dark" needs the OTHER one — built from the
|
|
11
|
+
* same host document, base and options as the active theme, so a dark band on a
|
|
12
|
+
* light page wears the site's own dark palette rather than MUI's stock one.
|
|
13
|
+
*
|
|
14
|
+
* Undefined when nothing provides it (an email render, a bare test), which the
|
|
15
|
+
* renderer reads as "no scheme can be forced here" and renders unchanged.
|
|
16
|
+
*/
|
|
17
|
+
export type SiteSchemeThemes = (scheme: SiteScheme) => Theme;
|
|
18
|
+
export declare const SiteSchemeThemesContext: import("react").Context<SiteSchemeThemes>;
|
|
19
|
+
/** The site's theme-per-scheme getter, or `undefined` outside a site surface. */
|
|
20
|
+
export declare function useSiteSchemeThemes(): SiteSchemeThemes;
|
|
21
|
+
/**
|
|
22
|
+
* Wraps a per-scheme theme builder so each scheme is built at most once, and
|
|
23
|
+
* only when something asks for it.
|
|
24
|
+
*
|
|
25
|
+
* Lazy on purpose: nearly every page pins nothing, and building the other
|
|
26
|
+
* scheme's theme up front would double the theme construction on every
|
|
27
|
+
* render of every site for an element that is not there. Callers memoize the
|
|
28
|
+
* returned getter on the builder's inputs, so a changed host document drops
|
|
29
|
+
* both cached themes together.
|
|
30
|
+
*/
|
|
31
|
+
export declare function createSiteSchemeThemes(build: (scheme: SiteScheme) => Theme): SiteSchemeThemes;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2026 Aglyn LLC
|
|
4
|
+
*
|
|
5
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
6
|
+
* you may not use this file except in compliance with the License.
|
|
7
|
+
* You may obtain a copy of the License at
|
|
8
|
+
*
|
|
9
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
10
|
+
*
|
|
11
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
12
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
13
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
14
|
+
* See the License for the specific language governing permissions and
|
|
15
|
+
* limitations under the License.
|
|
16
|
+
*/ 'use client';
|
|
17
|
+
import { createContext, useContext } from "react";
|
|
18
|
+
export const SiteSchemeThemesContext = /*#__PURE__*/ createContext(undefined);
|
|
19
|
+
SiteSchemeThemesContext.displayName = 'SiteSchemeThemesContext';
|
|
20
|
+
/** The site's theme-per-scheme getter, or `undefined` outside a site surface. */ export function useSiteSchemeThemes() {
|
|
21
|
+
return useContext(SiteSchemeThemesContext);
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Wraps a per-scheme theme builder so each scheme is built at most once, and
|
|
25
|
+
* only when something asks for it.
|
|
26
|
+
*
|
|
27
|
+
* Lazy on purpose: nearly every page pins nothing, and building the other
|
|
28
|
+
* scheme's theme up front would double the theme construction on every
|
|
29
|
+
* render of every site for an element that is not there. Callers memoize the
|
|
30
|
+
* returned getter on the builder's inputs, so a changed host document drops
|
|
31
|
+
* both cached themes together.
|
|
32
|
+
*/ export function createSiteSchemeThemes(build) {
|
|
33
|
+
const cache = {};
|
|
34
|
+
return (scheme)=>{
|
|
35
|
+
var _cache, _key, _;
|
|
36
|
+
const key = scheme === 'dark' ? 'dark' : 'light';
|
|
37
|
+
return (_ = (_cache = cache)[_key = key]) != null ? _ : _cache[_key] = build(key);
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
//# sourceMappingURL=site-scheme-themes.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../libs/shared/ui/theme/src/lib/components/site-scheme-themes.tsx"],"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 */\n'use client'\n\nimport { createContext, useContext } from 'react'\nimport type { Theme } from '../../vendor/mui'\n\n/** The two schemes a site renders in. */\nexport type SiteScheme = 'light' | 'dark'\n\n/**\n * The SITE's full theme for either scheme, whichever one is active\n * (AGL-3284).\n *\n * A site resolves light/dark by swapping one single-mode MUI theme, so\n * everything below the provider sees exactly one scheme. An element the author\n * pinned to \"Always light\" / \"Always dark\" needs the OTHER one — built from the\n * same host document, base and options as the active theme, so a dark band on a\n * light page wears the site's own dark palette rather than MUI's stock one.\n *\n * Undefined when nothing provides it (an email render, a bare test), which the\n * renderer reads as \"no scheme can be forced here\" and renders unchanged.\n */\nexport type SiteSchemeThemes = (scheme: SiteScheme) => Theme\n\nexport const SiteSchemeThemesContext = createContext<\n SiteSchemeThemes | undefined\n>(undefined)\nSiteSchemeThemesContext.displayName = 'SiteSchemeThemesContext'\n\n/** The site's theme-per-scheme getter, or `undefined` outside a site surface. */\nexport function useSiteSchemeThemes() {\n return useContext(SiteSchemeThemesContext)\n}\n\n/**\n * Wraps a per-scheme theme builder so each scheme is built at most once, and\n * only when something asks for it.\n *\n * Lazy on purpose: nearly every page pins nothing, and building the other\n * scheme's theme up front would double the theme construction on every\n * render of every site for an element that is not there. Callers memoize the\n * returned getter on the builder's inputs, so a changed host document drops\n * both cached themes together.\n */\nexport function createSiteSchemeThemes(\n build: (scheme: SiteScheme) => Theme,\n): SiteSchemeThemes {\n const cache: Partial<Record<SiteScheme, Theme>> = {}\n return (scheme) => {\n const key: SiteScheme = scheme === 'dark' ? 'dark' : 'light'\n return (cache[key] ??= build(key))\n }\n}\n"],"names":["createContext","useContext","SiteSchemeThemesContext","undefined","displayName","useSiteSchemeThemes","createSiteSchemeThemes","build","cache","scheme","key"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD;AAEA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAO;AAqBjD,OAAO,MAAMC,wCAA0BF,cAErCG,WAAU;AACZD,wBAAwBE,WAAW,GAAG;AAEtC,+EAA+E,GAC/E,OAAO,SAASC;IACd,OAAOJ,WAAWC;AACpB;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASI,uBACdC,KAAoC;IAEpC,MAAMC,QAA4C,CAAC;IACnD,OAAO,CAACC;YAEED,QAAME,MAANF;QADR,MAAME,MAAkBD,WAAW,SAAS,SAAS;QACrD,QAAQD,IAAAA,CAAAA,SAAAA,MAAK,CAACE,OAAAA,IAAI,YAAVF,IAAAA,MAAK,CAACE,KAAI,GAAKH,MAAMG;IAC/B;AACF"}
|