@phis/ui 0.2.1 → 0.4.0

package/components/regions/presets/phi-settings-page-shell-tree.d.ts

@@ -109,20 +109,30 @@ export type PhiSettingsPageShellOverlay = {
     /** What the Form Widget's config says beyond the shell's defaults, its routes included. */
     configOverrides?: PhiSettingsPageShellFormSectionBase["configOverrides"];
     savedMessage?: string;
-    submitLabel: string;
-    cancelLabel: string;
+    /**
+     * What the Footer's two buttons say, where the dialog's verb is not the shared one.
+     *
+     * Absent, they are the shared `save` and `cancel` actions, whose words every Site already has in every
+     * language. A dialog states its own only where "Save" would say the wrong thing.
+     */
+    submitLabel?: string;
+    cancelLabel?: string;
     /** Responsive Modal width, for a Form that needs more or less than the Modal's own default. */
     width?: Record<string, unknown> | number | string;
 };
 /**
- * One Collapsible panel of a Settings page: the panel title becomes the Collapsible slot title,
- * the optional description renders as the panel's leading text, and the sections stack vertically
+ * One Collapsible panel of a Settings page: the panel title becomes the Collapsible slot title, the
+ * optional description the hint behind it (`slotDescriptions`), and the sections stack vertically
  * inside the panel.
  */
 export type PhiSettingsPageShellPanel = {
     /** Preset-locally unique node key for the panel's Layout node. */
     nodeKey: string;
     title: string;
+    /**
+     * What the panel is for, in a sentence: shown as the (i) behind its title, so it can be read before the
+     * panel is opened and does not stand between the title and the fields once it is.
+     */
     description?: string;
     sections: readonly PhiSettingsPageShellSection[];
 };
@@ -135,7 +145,7 @@ export type PhiSettingsPageShellPanel = {
  * themselves.
  *
  * Each panel wraps its sections in a vertical Layout because a sequential slot renders exactly one
- * child node, while a panel is a description and then what it is about, or several sections at once.
+ * child node, while a panel may hold several sections at once.
  */
 export declare function buildPhiSettingsPageShellTree({ page, ownerModuleId, presetKey, regionId, label, panels, overlays, }: {
     page: PhiCmsPageNode;

package/components/regions/presets/phi-settings-page-shell-tree.js

@@ -6,6 +6,7 @@ import { PHI_LAYOUT } from "../../../theme/phi-tokens";
 import { createPhiPresetCmsInstanceIdMap } from "../../../types/cms-instance-id";
 import { PHI_SIGNAL_VALUE_SCHEMAS, createPhiSignalAddress } from "../../../types/signals";
 import { buildPhiBasePageContentScaffold, PHI_BASE_PAGE_LAYOUT_NODE_ID } from "./phi-base-page-layout";
+import { PHI_DIALOG_BODY_CONFIG, PHI_DIALOG_COMMANDS_CONFIG } from "../../../helpers/cms-dialog";
 /**
  * The one shared Settings page shell (SETTINGS.md section 4): every mounted Settings page composes
  * its tree through this builder. Navigation between Settings pages lives in the persistent Area
@@ -15,7 +16,7 @@ import { buildPhiBasePageContentScaffold, PHI_BASE_PAGE_LAYOUT_NODE_ID } from ".
  * themselves.
  *
  * Each panel wraps its sections in a vertical Layout because a sequential slot renders exactly one
- * child node, while a panel is a description and then what it is about, or several sections at once.
+ * child node, while a panel may hold several sections at once.
  */
 export function buildPhiSettingsPageShellTree({ page, ownerModuleId, presetKey, regionId, label, panels, overlays = [], }) {
     const nodes = createPhiCmsPresetNodes(page);
@@ -30,17 +31,13 @@ export function buildPhiSettingsPageShellTree({ page, ownerModuleId, presetKey,
         ...overlays.flatMap((overlay) => [`${overlay.nodeKey}Body`, `${overlay.nodeKey}Footer`]),
     ]);
     const widgets = createPhiPresetCmsInstanceIdMap(identity, [
-        ...panels.flatMap((panel) => [
-            ...(panel.description !== undefined ? [`${panel.nodeKey}Description`] : []),
-            ...panel.sections.map((section) => section.nodeKey),
-        ]),
+        ...panels.flatMap((panel) => panel.sections.map((section) => section.nodeKey)),
         ...overlays.flatMap((overlay) => [`${overlay.nodeKey}Form`, `${overlay.nodeKey}Commands`]),
     ]);
     const overlayIds = createPhiPresetCmsInstanceIdMap(identity, overlays.map((overlay) => overlay.nodeKey));
     const scaffold = buildPhiBasePageContentScaffold({
         page,
         regionId,
-        regionConfig: { border: false },
     });
     const layoutNodes = [
         scaffold.layoutNode,
@@ -52,10 +49,14 @@ export function buildPhiSettingsPageShellTree({ page, ownerModuleId, presetKey,
             typeKey: "collapsible",
             slotIndex: PHI_CMS_DEFAULT_SLOT_INDEX,
             sortOrder: 0,
+            // The panel titles arrive in the reader's language already, from each Module's own label set.
+            flags: PhiCmsFlags.NoTranslate,
             label,
             config: {
                 slotTitles: panels.map((panel) => panel.title),
-                translateSlotTitles: false,
+                ...(panels.some((panel) => panel.description)
+                    ? { slotDescriptions: panels.map((panel) => panel.description ?? "") }
+                    : {}),
                 accordion: true,
                 defaultOpenSlotKeys: ["slot_0"],
                 titleStrong: true,
@@ -63,14 +64,14 @@ export function buildPhiSettingsPageShellTree({ page, ownerModuleId, presetKey,
                  * Where the Settings column stops. Set here rather than on each Form: the panels are what a
                  * reader's eye follows down the page, and a panel running the full width of a wide screen with
                  * a narrow form inside it reads as two columns that do not line up. One maximum on the
-                 * Collapsible holds titles, descriptions and forms in the same column.
+                 * Collapsible holds titles and forms in the same column.
                  *
-                 * A maximum, not a width -- the Collapsible still fills a narrow screen edge to edge.
+                 * A maximum, not a width -- the Collapsible still fills a narrow screen edge to edge. The reading
+                 * measure, like an entry or the Terms: a Settings page is read down, not filled across.
                  */
-                maxSize: { width: PHI_LAYOUT.contentMax },
+                maxSize: { width: PHI_LAYOUT.readingMax },
                 margin: 0,
                 padding: 0,
-                border: false,
             },
         }),
         ...panels.map((panel, panelIndex) => nodes.layout({
@@ -81,9 +82,13 @@ export function buildPhiSettingsPageShellTree({ page, ownerModuleId, presetKey,
             slotIndex: panelIndex,
             label: panel.title,
             config: {
-                gap: PHI_SPACE.base,
+                gap: PHI_SPACE.sm,
                 padding: 0,
-                border: false,
+                /*
+                 * A panel reads from its left edge, as its title does. A vertical flex centres by default, and
+                 * a part narrower than the column -- a Description's entries -- stood in the middle of it.
+                 */
+                anchor: { horizontal: "left", vertical: "top" },
             },
         })),
         /*
@@ -101,9 +106,7 @@ export function buildPhiSettingsPageShellTree({ page, ownerModuleId, presetKey,
                 sortOrder: 0,
                 label: overlay.title,
                 config: {
-                    gap: PHI_SPACE.base,
-                    padding: PHI_SPACE.base,
-                    border: false,
+                    ...PHI_DIALOG_BODY_CONFIG,
                 },
             }),
             nodes.layout({
@@ -134,14 +137,6 @@ export function buildPhiSettingsPageShellTree({ page, ownerModuleId, presetKey,
                 config: input.config,
             });
             return [
-                ...(panel.description !== undefined
-                    ? [buildPanelWidget({
-                            id: widgets[`${panel.nodeKey}Description`],
-                            typeKey: "description",
-                            label: panel.title,
-                            config: { description: panel.description },
-                        })]
-                    : []),
                 ...panel.sections.flatMap((section) => {
                     if (section.kind !== "form") {
                         return [buildPanelWidget({
@@ -176,6 +171,8 @@ export function buildPhiSettingsPageShellTree({ page, ownerModuleId, presetKey,
                                 },
                                 execution: { mode: "handler" },
                                 source: null,
+                                // As wide as the column it stands in, so title and fields share one edge.
+                                maxFormWidth: PHI_LAYOUT.readingMax,
                                 ...configOverrides,
                                 signalRoutes: {
                                     emits: [
@@ -282,11 +279,20 @@ export function buildPhiSettingsPageShellTree({ page, ownerModuleId, presetKey,
                     flags: PhiCmsFlags.NoTranslate,
                     config: {
                         key: `${overlay.nodeKey}-commands`,
-                        compact: true,
-                        showLabels: true,
+                        ...PHI_DIALOG_COMMANDS_CONFIG,
                         buttons: [
-                            { key: "cancel", emits: [{ capabilityId: "close", value: null }], label: overlay.cancelLabel },
-                            { key: "submit", emits: [{ capabilityId: "submit", value: null }], label: overlay.submitLabel, variant: "primary" },
+                            {
+                                key: "cancel",
+                                emits: [{ capabilityId: "close", value: null }],
+                                ...(overlay.cancelLabel ? { label: overlay.cancelLabel } : { action: "cancel" }),
+                                icon: "cancel",
+                            },
+                            {
+                                key: "submit",
+                                emits: [{ capabilityId: "submit", value: null }],
+                                ...(overlay.submitLabel ? { label: overlay.submitLabel } : { action: "save" }),
+                                variant: "primary",
+                            },
                         ],
                         signalRoutes: {
                             emits: [

package/components/root/phi-config-provider.d.ts

@@ -35,7 +35,7 @@ export type PhiFontCatalogueFamily = {
     family: string;
     cssVariable: string;
 };
-export declare function PhiConfigProvider({ children, locale, fonts, fontFamilies, mode, theme, presets, customColors, rootClassName, rootStyle, remRootValue, controlShape, }: {
+export declare function PhiConfigProvider({ children, locale, fonts, fontFamilies, mode, theme, presets, customColors, rootClassName, rootStyle, controlShape, }: {
     children: ReactNode;
     locale: ConfigProviderProps["locale"];
     fonts: PhiRootThemeFonts;
@@ -46,7 +46,25 @@ export declare function PhiConfigProvider({ children, locale, fonts, fontFamilie
     customColors: PhiThemeCustomColorPalette;
     rootClassName: string;
     rootStyle: CSSProperties & Record<`--${string}`, string>;
-    remRootValue: number;
     controlShape: PhiControlShape;
 }): import("react").JSX.Element;
 export declare function usePhiConfig(): PhiConfig;
+/** The locale the root adapter configures Ant Design with, for whoever hands it on. */
+export type PhiConfigLocale = ConfigProviderProps["locale"];
+/**
+ * The page's config in another mode: Ant Design's Theme for `mode` and the house config with that mode's
+ * colours and tokens.
+ *
+ * What a tone scope puts around a Surface's content (`components/surface/phi-surface-tone-scope.tsx`).
+ * The Theme's variables are written under `cssVarKey` -- the class of the box that asked -- so the box's
+ * own paint follows as well. Unlike the root it draws no element and mirrors nothing onto the document:
+ * the shape is the page's.
+ */
+export declare function PhiNestedModeConfigProvider({ mode, theme, cssVarKey, locale, customColors, children, }: {
+    mode: PhiThemeMode;
+    theme: ThemeConfig;
+    cssVarKey: string;
+    locale: PhiConfigLocale;
+    customColors: PhiThemeCustomColorPalette;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/components/root/phi-config-provider.js

@@ -4,7 +4,7 @@ import { ConfigProvider as AntdConfigProvider, theme as antdTheme, } from "antd"
 import { createContext, useContext, useEffect, useMemo, } from "react";
 import { buildPhiControlShapeCssVars, PHI_SURFACE_SHAPE_CSS_VAR, resolvePhiSurfaceShapeRadius, } from "../../theme/phi-control-shape";
 const PhiConfigContext = createContext(null);
-function PhiConfigValueProvider({ children, customColors, fonts, fontFamilies, heroHeight, mode, controlShape, presets, rootClassName, rootStyle, remRootValue, themeCssVarKey, }) {
+function PhiConfigValueProvider({ children, customColors, fonts, fontFamilies, heroHeight, mode, controlShape, presets, rootClassName, rootStyle, themeCssVarKey, }) {
     const { token, cssVar } = antdTheme.useToken();
     /*
      * The shape's small and large radii ride on the root element as custom properties that
@@ -51,9 +51,9 @@ function PhiConfigValueProvider({ children, customColors, fonts, fontFamilies, h
                 ...rootStyle,
                 ...controlShapeVars,
                 fontSize: cssVar.fontSize,
-            }, "data-phi-root-layout": "true", "data-phi-control-shape": controlShape, "data-phi-theme-mode": mode, "data-phi-rem-root-value": remRootValue, children: children }) }));
+            }, "data-phi-root-layout": "true", "data-phi-control-shape": controlShape, "data-phi-theme-mode": mode, children: children }) }));
 }
-export function PhiConfigProvider({ children, locale, fonts, fontFamilies, mode, theme, presets, customColors, rootClassName, rootStyle, remRootValue, controlShape, }) {
+export function PhiConfigProvider({ children, locale, fonts, fontFamilies, mode, theme, presets, customColors, rootClassName, rootStyle, controlShape, }) {
     const rawHeroHeight = theme.token?.heroHeight;
     const heroHeight = typeof rawHeroHeight === "number" || typeof rawHeroHeight === "string"
         ? rawHeroHeight
@@ -61,7 +61,7 @@ export function PhiConfigProvider({ children, locale, fonts, fontFamilies, mode,
     const themeCssVarKey = theme.cssVar && typeof theme.cssVar === "object" && typeof theme.cssVar.key === "string"
         ? theme.cssVar.key
         : "";
-    return (_jsx(AntdConfigProvider, { locale: locale, theme: theme, children: _jsx(PhiConfigValueProvider, { customColors: customColors, fonts: fonts, fontFamilies: fontFamilies, heroHeight: heroHeight, mode: mode, controlShape: controlShape, presets: presets, rootClassName: rootClassName, rootStyle: rootStyle, remRootValue: remRootValue, themeCssVarKey: themeCssVarKey, children: children }) }));
+    return (_jsx(AntdConfigProvider, { locale: locale, theme: theme, children: _jsx(PhiConfigValueProvider, { customColors: customColors, fonts: fonts, fontFamilies: fontFamilies, heroHeight: heroHeight, mode: mode, controlShape: controlShape, presets: presets, rootClassName: rootClassName, rootStyle: rootStyle, themeCssVarKey: themeCssVarKey, children: children }) }));
 }
 export function usePhiConfig() {
     const config = useContext(PhiConfigContext);
@@ -70,3 +70,25 @@ export function usePhiConfig() {
     }
     return config;
 }
+/**
+ * The page's config in another mode: Ant Design's Theme for `mode` and the house config with that mode's
+ * colours and tokens.
+ *
+ * What a tone scope puts around a Surface's content (`components/surface/phi-surface-tone-scope.tsx`).
+ * The Theme's variables are written under `cssVarKey` -- the class of the box that asked -- so the box's
+ * own paint follows as well. Unlike the root it draws no element and mirrors nothing onto the document:
+ * the shape is the page's.
+ */
+export function PhiNestedModeConfigProvider({ mode, theme, cssVarKey, locale, customColors, children, }) {
+    const keyedTheme = useMemo(() => ({
+        ...theme,
+        cssVar: { ...(typeof theme.cssVar === "object" ? theme.cssVar : {}), key: cssVarKey },
+    }), [cssVarKey, theme]);
+    return (_jsx(AntdConfigProvider, { locale: locale, theme: keyedTheme, children: _jsx(PhiNestedModeConfigValue, { mode: mode, customColors: customColors, children: children }) }));
+}
+function PhiNestedModeConfigValue({ mode, customColors, children, }) {
+    const outer = usePhiConfig();
+    const { token } = antdTheme.useToken();
+    const value = useMemo(() => ({ ...outer, mode, customColors, token }), [customColors, mode, outer, token]);
+    return _jsx(PhiConfigContext.Provider, { value: value, children: children });
+}

package/components/root/phi-dayjs-locale.d.ts

@@ -1,10 +1,4 @@
 import type { ReactNode } from "react";
-type PhiDayjsLocaleKey = "ar" | "bg" | "cs" | "da" | "de" | "de-at" | "de-ch" | "el" | "en" | "en-gb" | "es" | "es-us" | "et" | "fi" | "fr" | "fr-ca" | "fr-ch" | "he" | "hu" | "id" | "it" | "ja" | "ko" | "lt" | "lv" | "nb" | "nl" | "pl" | "pt" | "pt-br" | "pt-pt" | "ro" | "ru" | "sk" | "sl" | "sv" | "th" | "tr" | "uk" | "vi" | "zh-cn" | "zh-hant" | "zh-tw";
-type PhiDayjsLocaleResolution = {
-    key: PhiDayjsLocaleKey;
-    localeName: string;
-};
-export declare function resolvePhiDayjsLocale(locale: string | null | undefined): PhiDayjsLocaleResolution;
 /**
  * The page's locale for Client code: dayjs switched to it, and the Intl locale provided below it.
  *
@@ -16,4 +10,3 @@ export declare function PhiDayjsLocale({ locale, intlLocale, children, }: {
     intlLocale: string;
     children: ReactNode;
 }): import("react").JSX.Element;
-export {};

package/components/root/phi-dayjs-locale.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { normalizePhiLocaleKey } from "../../helpers/locale";
 import { useEffect } from "react";
 import { PhiIntlLocaleProvider } from "./phi-intl-locale";
 const PHI_DAYJS_LOCALE_LOADERS = {
@@ -53,13 +54,10 @@ const PHI_DAYJS_LOCALE_LOADERS = {
  * that use it bring it with them and find it already set to the page's locale.
  */
 let appliedDayjsLocaleName = "en";
-function normalizeLocaleKey(input) {
-    return input?.trim().replace(/_/g, "-").toLowerCase() ?? "";
-}
 const PHI_DAYJS_LOCALE_RESOLUTIONS = new Map();
 function registerDayjsLocale(resolution, aliases = []) {
     for (const value of [resolution.key, resolution.localeName, ...aliases]) {
-        const normalized = normalizeLocaleKey(value);
+        const normalized = normalizePhiLocaleKey(value);
         if (normalized) {
             PHI_DAYJS_LOCALE_RESOLUTIONS.set(normalized, resolution);
         }
@@ -106,8 +104,8 @@ registerDayjsLocale({ key: "uk", localeName: "uk" });
 registerDayjsLocale({ key: "vi", localeName: "vi" });
 registerDayjsLocale({ key: "zh-cn", localeName: "zh-cn" }, ["zh", "zh-hans", "zh-cn"]);
 registerDayjsLocale({ key: "zh-tw", localeName: "zh-tw" }, ["zh-hant", "zh-hk"]);
-export function resolvePhiDayjsLocale(locale) {
-    const normalized = normalizeLocaleKey(locale);
+function resolvePhiDayjsLocale(locale) {
+    const normalized = normalizePhiLocaleKey(locale);
     if (!normalized) {
         return { key: "en", localeName: "en" };
     }

package/components/root/phi-root-background.d.ts

@@ -1,5 +1,6 @@
 import { type CSSProperties } from "react";
 import { type PhiBackgroundMotion, type PhiBackgroundImageSourceKind, type PhiBackgroundMotionMode, type PhiCmsBackgroundWidgetConfig } from "../widgets/config/background";
+import type { PhiBackgroundFilter } from "../../types/layout-style";
 import type { PhiSiteThemeRoot } from "../../types/site-theme";
 import type { PhiThemeMode } from "../../theme/phi-theme-presets";
 /**
@@ -44,6 +45,14 @@ export declare const PHI_ROOT_BACKGROUND_MOTION_MODES: readonly PhiBackgroundMot
  * picture is not an exception to this: it shows, and a saved Theme takes it over into the library.
  */
 export declare const PHI_ROOT_BACKGROUND_IMAGE_SOURCE_KINDS: readonly PhiBackgroundImageSourceKind[];
+/**
+ * The Filters the Theme Root Background offers and honours: none.
+ *
+ * A pane frosts what lies behind a surface, and nothing lies behind the ground of the whole Site. A
+ * softened picture would be a Filter of its own, and this layer is not asked for one; a stored value
+ * simply resolves away.
+ */
+export declare const PHI_ROOT_BACKGROUND_FILTERS: readonly PhiBackgroundFilter[];
 /**
  * What the ground paints, without the geometry of the layer that paints it.
  *

package/components/root/phi-root-background.js

@@ -48,6 +48,17 @@ export const PHI_ROOT_BACKGROUND_MOTION_MODES = [
  * picture is not an exception to this: it shows, and a saved Theme takes it over into the library.
  */
 export const PHI_ROOT_BACKGROUND_IMAGE_SOURCE_KINDS = ["asset"];
+/**
+ * The Filters the Theme Root Background offers and honours: none.
+ *
+ * A pane frosts what lies behind a surface, and nothing lies behind the ground of the whole Site. A
+ * softened picture would be a Filter of its own, and this layer is not asked for one; a stored value
+ * simply resolves away.
+ */
+export const PHI_ROOT_BACKGROUND_FILTERS = [];
+function withoutPhiRootBackgroundFilter(config) {
+    return config ? { ...normalizePhiBackgroundWidgetConfig(config), filter: null } : null;
+}
 function readPhiRootBackgroundConfig(root, mode) {
     return (mode === "dark" ? root?.background?.dark : root?.background?.light) ?? null;
 }
@@ -60,7 +71,7 @@ function readPhiRootBackgroundConfig(root, mode) {
  * each reaching into `root.background` and deciding for itself what an empty one means.
  */
 export function resolvePhiRootBackgroundPaintStyle(root, mode) {
-    const configured = readPhiRootBackgroundConfig(root, mode);
+    const configured = withoutPhiRootBackgroundFilter(readPhiRootBackgroundConfig(root, mode));
     return configured ? resolvePhiBackgroundWidgetStyle(configured) : null;
 }
 /**
@@ -107,7 +118,7 @@ export function resolvePhiRootBackgroundPicture(root, mode) {
         ? resolvePhiBackgroundWidgetStyle({
             ...normalized,
             base: { ...base, variantKey: null, variantVersion: null },
-            effect: null,
+            filter: null,
             motion: null,
         })
         : resolvePhiRootBackgroundPaintStyle(root, mode) ?? {};
@@ -115,7 +126,7 @@ export function resolvePhiRootBackgroundPicture(root, mode) {
     const blurDataUrl = base?.resolvedAsset?.blurDataUrl ?? null;
     return {
         key: JSON.stringify(configured ?? null),
-        paint: motion ? resolvePhiBackgroundMotionHostStyle(configured) : pictureStyle,
+        paint: motion ? resolvePhiBackgroundMotionHostStyle(withoutPhiRootBackgroundFilter(configured)) : pictureStyle,
         motion: motion && configured ? configured : null,
         imageUrl: url && !url.startsWith("data:") ? url : null,
         placeholder: url && blurDataUrl && !url.startsWith("data:")

package/components/root/phi-root-layout.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import "antd/dist/reset.css";
+import "@phis/ui/antd-static.css";
 import "../../styles/root.css";
 import "../../styles/layout.css";
 import "../../styles/control-shape.css";

package/components/root/phi-root-layout.js

@@ -1,7 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { preload } from "react-dom";
 import { AntdRegistry } from "@ant-design/nextjs-registry";
 import "antd/dist/reset.css";
+/*
+ * Ant Design's structure, generated in the Site from its Ant Design (`@phis/ui/next/config`) because the
+ * root runs it with `zeroRuntime`. The specifier names no file of this package: the Site's
+ * `withPhiNextConfig` points it at the one it generated. Imported before this package's own sheets,
+ * where the runtime used to prepend it: a rule of ours that ties with Ant Design's on specificity keeps
+ * winning by coming later.
+ */
+import "@phis/ui/antd-static.css";
 import "../../styles/root.css";
 import "../../styles/layout.css";
 import "../../styles/control-shape.css";
@@ -9,7 +17,6 @@ import "../../styles/controls.css";
 import { getResolvedSiteConfig } from "../../gateway/site-config";
 import { loadPhiAntdLocale } from "../../helpers/antd-locale";
 import { PhiDayjsLocale } from "./phi-dayjs-locale";
-import { PhiRootRemProvider } from "./phi-root-rem-provider";
 import { PhiRootLiveThemeProvider } from "./phi-root-live-theme-provider";
 import { resolvePhiRootThemeState } from "./phi-root-theme-resolver";
 import { PhiSignalRuntimePartitionProvider } from "../runtime/runtime-signal-partition";
@@ -35,12 +42,6 @@ function resolveThemeFont(fontName, fallbackFont, familyVariables) {
         fontFamily: familyVariables.get(trimmed) ?? trimmed,
     };
 }
-function resolveFinitePositiveNumber(value, fallback) {
-    if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) {
-        return fallback;
-    }
-    return value;
-}
 export async function PhiRootLayout({ children, apiBaseUrl, internalToken, siteKey, site: siteSnapshot, resolvedLocale, themePresets = PHI_CORE_THEME_PRESET_PLUGINS, themeBlocks, fontCatalogue = composePhiFontCatalogue(), themeModePreference = PHI_DEFAULT_THEME_MODE_PREFERENCE, browserColorScheme, }) {
     const site = siteSnapshot ?? await getResolvedSiteConfig({ apiBaseUrl, internalToken, siteKey });
     /*
@@ -52,27 +53,34 @@ export async function PhiRootLayout({ children, apiBaseUrl, internalToken, siteK
         ...themeBlocks,
         palettes: themePresets,
     });
-    const siteTheme = await projectPhiSiteThemeRootBackground(siteThemeRecord, { apiBaseUrl, internalToken, siteKey });
-    const antdLocale = await loadPhiAntdLocale(resolvedLocale?.locale ?? resolvedLocale?.intlLocale);
     const resolvedThemeMode = resolvePhiThemeMode(themeModePreference, browserColorScheme);
-    // What the Core Runtime Controller says when a sign-out it was asked for fails.
-    const sessionLabels = await getPhiSessionLabels({
-        apiBaseUrl,
-        internalToken,
-        locale: resolvedLocale?.locale ?? site.defaultLocale,
-    });
     // Keep the basiset explicit and self-hosted; accent/display stay as open slots for later.
     /*
      * A slot naming an Asset is answered before the catalogue is consulted: that is a typeface the Site
      * owns, it arrives with its own `@font-face` rules, and the stack those rules need is not a family
      * name the catalogue could map.
      */
-    const assetFonts = await resolvePhiSiteThemeFonts(siteThemeRecord?.fonts, {
-        apiBaseUrl,
-        internalToken,
-        siteKey,
-        locale: resolvedLocale?.locale ?? site.defaultLocale,
-    });
+    /*
+     * Four reads that depend on nothing but what is already here, started together. One after the other
+     * they put the two `references` lookups (the root Background, the Theme fonts) into different ticks,
+     * so the batch that joins them never formed and every Public view paid for both.
+     */
+    const [siteTheme, antdLocale, sessionLabels, assetFonts] = await Promise.all([
+        projectPhiSiteThemeRootBackground(siteThemeRecord, { apiBaseUrl, internalToken, siteKey }),
+        loadPhiAntdLocale(resolvedLocale?.locale ?? resolvedLocale?.intlLocale),
+        // What the Core Runtime Controller says when a sign-out it was asked for fails.
+        getPhiSessionLabels({
+            apiBaseUrl,
+            internalToken,
+            locale: resolvedLocale?.locale ?? site.defaultLocale,
+        }),
+        resolvePhiSiteThemeFonts(siteThemeRecord?.fonts, {
+            apiBaseUrl,
+            internalToken,
+            siteKey,
+            locale: resolvedLocale?.locale ?? site.defaultLocale,
+        }),
+    ]);
     /*
      * `preload` rather than a `<link>` element: React hoists it into the head and keeps one per URL.
      * `crossOrigin` is not optional for a font -- `@font-face` fetches in CORS mode even on this origin,
@@ -91,8 +99,6 @@ export async function PhiRootLayout({ children, apiBaseUrl, internalToken, siteK
         ?? resolveThemeFont(siteThemeRecord?.fonts?.accent, "", fontCatalogue.familyVariables).fontFamily;
     const displayFont = assetFonts.families.display
         ?? resolveThemeFont(siteThemeRecord?.fonts?.display, "", fontCatalogue.familyVariables).fontFamily;
-    const remSettings = siteThemeRecord?.rem;
-    const remRootValue = resolveFinitePositiveNumber(remSettings?.rootValue, 16);
     const themeFonts = {
         body: bodyFont,
         mono: monoFont,
@@ -109,10 +115,9 @@ export async function PhiRootLayout({ children, apiBaseUrl, internalToken, siteK
     const publishedRootTheme = resolvePhiPublishedRootTheme({
         siteTheme: siteThemeRecord,
         mode: resolvedThemeMode,
-        remRootValue,
         themePresets,
     });
-    return (_jsxs(PhiRootRemProvider, { rootValue: remRootValue, children: [assetFonts.css ? (_jsx("style", { href: `phi-site-fonts:${site.key}`, precedence: "default", dangerouslySetInnerHTML: { __html: assetFonts.css } })) : null, _jsx(AntdRegistry, { children: _jsx(PhiSignalRuntimePartitionProvider, { id: `site:${site.key}`, kind: "site", context: { siteKey: site.key }, children: _jsx(PhiRootLiveThemeProvider, { siteKey: site.key, siteName: site.name, siteTheme: siteTheme, locale: antdLocale, initialMode: resolvedThemeMode, themeModePreference: themeModePreference, initialLocale: resolvedLocale?.locale ?? site.defaultLocale, availableLocales: site.availableLocales.map((option) => option.code), fonts: themeFonts, themeState: themeState, fontFamilies: fontCatalogue.entries.map(({ family, cssVariable }) => ({ family, cssVariable })), presets: themePresets, rootClassName: fontCatalogue.className, rootStyle: headingFontFamily
+    return (_jsxs(_Fragment, { children: [assetFonts.css ? (_jsx("style", { href: `phi-site-fonts:${site.key}`, precedence: "default", dangerouslySetInnerHTML: { __html: assetFonts.css } })) : null, _jsx(AntdRegistry, { children: _jsx(PhiSignalRuntimePartitionProvider, { id: `site:${site.key}`, kind: "site", context: { siteKey: site.key }, children: _jsx(PhiRootLiveThemeProvider, { siteKey: site.key, siteName: site.name, siteTheme: siteTheme, locale: antdLocale, initialMode: resolvedThemeMode, themeModePreference: themeModePreference, initialLocale: resolvedLocale?.locale ?? site.defaultLocale, availableLocales: site.availableLocales.map((option) => option.code), fonts: themeFonts, themeState: themeState, fontFamilies: fontCatalogue.entries.map(({ family, cssVariable }) => ({ family, cssVariable })), presets: themePresets, rootClassName: fontCatalogue.className, rootStyle: headingFontFamily
                             ? { ...publishedRootTheme.style, [PHI_THEME_HEADING_FONT_VARIABLE]: headingFontFamily }
-                            : publishedRootTheme.style, remRootValue: remRootValue, children: _jsxs("div", { "data-phi-app-ground": "true", children: [_jsx(PhiCoreRuntimeApplicationAdapter, { labels: sessionLabels }), _jsx(PhiDayjsLocale, { locale: resolvedLocale?.locale ?? resolvedLocale?.intlLocale, intlLocale: resolvedLocale?.intlLocale ?? site.defaultLocale, children: children })] }) }) }) })] }));
+                            : publishedRootTheme.style, children: _jsxs("div", { "data-phi-app-ground": "true", children: [_jsx(PhiCoreRuntimeApplicationAdapter, { labels: sessionLabels }), _jsx(PhiDayjsLocale, { locale: resolvedLocale?.locale ?? resolvedLocale?.intlLocale, intlLocale: resolvedLocale?.intlLocale ?? site.defaultLocale, children: children })] }) }) }) })] }));
 }

package/components/root/phi-root-live-theme-provider.d.ts

@@ -8,7 +8,7 @@ import { type PhiThemeModePreference } from "../../theme/phi-theme-mode";
 import { type PhiFontCatalogueFamily } from "./phi-config-provider";
 export declare function usePhiSiteBrand(): PhiSiteThemeBrand | null;
 export declare function usePhiSiteWordmarkText(): string;
-export declare function PhiRootLiveThemeProvider({ children, siteKey, siteName, siteTheme, locale, initialMode, themeModePreference, initialLocale, availableLocales, fonts, themeState, fontFamilies, presets, rootClassName, rootStyle, remRootValue, }: {
+export declare function PhiRootLiveThemeProvider({ children, siteKey, siteName, siteTheme, locale, initialMode, themeModePreference, initialLocale, availableLocales, fonts, themeState, fontFamilies, presets, rootClassName, rootStyle, }: {
     children: ReactNode;
     siteKey: string;
     /** The name the Site is filed under, which is what its Wordmark says where none is set. */
@@ -28,7 +28,6 @@ export declare function PhiRootLiveThemeProvider({ children, siteKey, siteName,
     presets: readonly PhiThemePresetPlugin[];
     rootClassName: string;
     rootStyle: CSSProperties & Record<`--${string}`, string>;
-    remRootValue: number;
 }): import("react").JSX.Element;
 /**
  * The colour-scheme bootstrap script, written into the server's HTML and nowhere else.

package/components/root/phi-root-live-theme-provider.js

@@ -7,6 +7,7 @@ import { applyPhiThemeModeToDocument, resolvePhiMountedThemeModePreference, writ
 import { resolvePhiPublishedThemeCustomColors } from "../../theme/phi-theme-palette";
 import { PhiConfigProvider } from "./phi-config-provider";
 import { PhiRootBackgroundLayer } from "./phi-root-background";
+import { PhiThemeToneSourceProvider } from "./phi-theme-tone-source";
 import { resolvePhiControlShape } from "../../theme/phi-control-shape";
 import { PHI_SIGNAL_VALUE_SCHEMAS, } from "../../types/signals";
 import { createPhiCoreRuntimeControllerAddress } from "../runtime/core-runtime-controller-address";
@@ -40,7 +41,7 @@ export function usePhiSiteWordmarkText() {
 function resolveStringSignalValue(signal) {
     return typeof signal.value === "string" ? signal.value.trim() : "";
 }
-export function PhiRootLiveThemeProvider({ children, siteKey, siteName, siteTheme, locale, initialMode, themeModePreference, initialLocale, availableLocales, fonts, themeState, fontFamilies, presets, rootClassName, rootStyle, remRootValue, }) {
+export function PhiRootLiveThemeProvider({ children, siteKey, siteName, siteTheme, locale, initialMode, themeModePreference, initialLocale, availableLocales, fonts, themeState, fontFamilies, presets, rootClassName, rootStyle, }) {
     const signalPartition = usePhiSignalRuntimePartition();
     const coreAddress = createPhiCoreRuntimeControllerAddress();
     const [liveSiteTheme, setLiveSiteTheme] = useState(siteTheme);
@@ -86,7 +87,12 @@ export function PhiRootLiveThemeProvider({ children, siteKey, siteName, siteThem
     const [liveThemeState, setLiveThemeState] = useState(null);
     const liveThemeRequest = useRef(0);
     const activeThemeState = liveThemeState ?? themeState;
-    const customColors = useMemo(() => resolvePhiPublishedThemeCustomColors(liveSiteTheme, mode, presets), [liveSiteTheme, mode, presets]);
+    const customColorsByMode = useMemo(() => ({
+        light: resolvePhiPublishedThemeCustomColors(liveSiteTheme, "light", presets),
+        dark: resolvePhiPublishedThemeCustomColors(liveSiteTheme, "dark", presets),
+    }), [liveSiteTheme, presets]);
+    const customColors = customColorsByMode[mode];
+    const toneSource = useMemo(() => ({ pageMode: mode, themes: activeThemeState.themes, customColorsByMode, locale }), [activeThemeState.themes, customColorsByMode, locale, mode]);
     /*
      * The Shell Chrome Overlay travels as custom properties on the Root Layout element, both modes at
      * once, because the Regions that paint it are rendered far below this provider and switch modes
@@ -216,7 +222,7 @@ export function PhiRootLiveThemeProvider({ children, siteKey, siteName, siteThem
         scopes: ["site"],
         receiver: coreAddress,
     });
-    return (_jsxs(_Fragment, { children: [pageDescription ? (_jsx("meta", { name: "description", content: pageDescription, "data-phi-runtime-metadata": "pageDescription" })) : null, openGraphImage ? (_jsx("meta", { property: "og:image", content: openGraphImage, "data-phi-runtime-metadata": "openGraphImage" })) : null, canonicalUrl ? (_jsx("link", { rel: "canonical", href: canonicalUrl, "data-phi-runtime-metadata": "canonicalUrl" })) : null, _jsxs(PhiConfigProvider, { customColors: customColors, fonts: fonts, fontFamilies: fontFamilies, locale: locale, mode: mode, controlShape: resolvePhiControlShape(liveSiteTheme.shape?.controls), theme: activeThemeState.themes[mode], presets: presets, rootClassName: rootClassName, rootStyle: chromeOverlayStyle, remRootValue: remRootValue, children: [_jsx(PhiRootBackgroundLayer, { root: liveSiteTheme.root, mode: mode }), _jsx(PhiSiteBrandContext.Provider, { value: liveSiteTheme.brand ?? null, children: _jsx(PhiSiteWordmarkTextContext.Provider, { value: wordmarkText, children: children }) })] })] }));
+    return (_jsxs(_Fragment, { children: [pageDescription ? (_jsx("meta", { name: "description", content: pageDescription, "data-phi-runtime-metadata": "pageDescription" })) : null, openGraphImage ? (_jsx("meta", { property: "og:image", content: openGraphImage, "data-phi-runtime-metadata": "openGraphImage" })) : null, canonicalUrl ? (_jsx("link", { rel: "canonical", href: canonicalUrl, "data-phi-runtime-metadata": "canonicalUrl" })) : null, _jsxs(PhiConfigProvider, { customColors: customColors, fonts: fonts, fontFamilies: fontFamilies, locale: locale, mode: mode, controlShape: resolvePhiControlShape(liveSiteTheme.shape?.controls), theme: activeThemeState.themes[mode], presets: presets, rootClassName: rootClassName, rootStyle: chromeOverlayStyle, children: [_jsx(PhiRootBackgroundLayer, { root: liveSiteTheme.root, mode: mode }), _jsx(PhiThemeToneSourceProvider, { value: toneSource, children: _jsx(PhiSiteBrandContext.Provider, { value: liveSiteTheme.brand ?? null, children: _jsx(PhiSiteWordmarkTextContext.Provider, { value: wordmarkText, children: children }) }) })] })] }));
 }
 /**
  * The colour-scheme bootstrap script, written into the server's HTML and nowhere else.

package/components/root/phi-root-theme-resolver.d.ts

@@ -11,6 +11,8 @@ export type PhiRootThemeFonts = {
 export type PhiResolvedRootTheme = {
     mode: PhiThemeMode;
     theme: {
+        hashed: false;
+        zeroRuntime: true;
         cssVar: {
             prefix: string;
             key: string;
@@ -39,6 +41,8 @@ export type PhiRootThemeState = {
     themes: PhiRootThemeByMode;
     chromeOverlayVariables: PhiShellChromeOverlayVariables;
 };
+/** Forget every resolved state. For tests. */
+export declare function clearPhiRootThemeStates(): void;
 export declare function resolvePhiRootThemeState(input: {
     siteTheme: PhiSiteTheme;
     fonts: PhiRootThemeFonts;