@phis/ui 0.4.2 → 0.4.3

package/plugins/runtime-modules/theme/widgets/brand-controls/client.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react";
 import { usePhiSignalDispatcher, usePhiSignalListener } from "../../../../../components/runtime/runtime-signal-bus";
 import { usePhiSignalIdentity } from "../../../../../components/runtime/runtime-signal-identity";
+import { usePhiControlSignalController } from "../../../../../components/widgets/client/shared/phi-control-signals";
 import { PHI_SIGNAL_VALUE_SCHEMAS } from "../../../../../types/signals";
 import { createPhiThemeControllerAddress } from "../../../../../plugins/runtime-modules/theme/controller/address";
 import { PHI_THEME_SIGNAL_CHANNELS } from "../../../../../plugins/runtime-modules/theme/controller/signals";
@@ -484,6 +485,35 @@ function readEffectiveTokenString(token, key, fallback) {
     const value = token[key];
     return typeof value === "string" && value.trim() ? value : fallback;
 }
+/*
+ * A value the alias resolver always sets (`resolvePhiAntdAliasTokens`), read without a stand-in. The
+ * previews used to carry a hex fallback beside each of these, which could only ever show if the resolver
+ * broke -- and then showed a colour that was nobody's Theme instead of saying so.
+ */
+function readAliasTokenString(token, key) {
+    const value = token[key];
+    if (typeof value !== "string" || !value.trim()) {
+        throw new Error(`The resolved Theme has no "${key}".`);
+    }
+    return value;
+}
+function readAliasTokenNumber(token, key) {
+    const value = token[key];
+    if (typeof value !== "number" || !Number.isFinite(value)) {
+        throw new Error(`The resolved Theme has no "${key}".`);
+    }
+    return value;
+}
+/** A draft's alias tokens for one mode, its blocks folded in, as the live render resolves a Theme. */
+function resolveBrandDraftAliasTokens(resolvedTheme, preset, mode, fonts = {}) {
+    return resolvePhiAntdAliasTokens(mode, {
+        ...buildPhiEffectiveNonColorThemeTokens(resolvedTheme),
+        ...resolvePhiThemeColorTokens(preset, resolvedTheme.palette, mode),
+        ...(resolvedTheme.style?.token ?? {}),
+        ...(fonts.body ? { fontFamily: fonts.body } : {}),
+        ...(fonts.mono ? { fontFamilyCode: fonts.mono } : {}),
+    });
+}
 function readEffectiveTokenNumber(token, key, fallback) {
     const value = token[key];
     if (typeof value === "number" && Number.isFinite(value)) {
@@ -808,18 +838,23 @@ function subscribePhiBrandPreviewMode(listener) {
         phiBrandPreviewModeListeners.delete(listener);
     };
 }
-function usePhiBrandPreviewMode(initialMode) {
+function usePhiBrandPreviewMode(initialMode, signalRoutes) {
     const heard = useSyncExternalStore(subscribePhiBrandPreviewMode, () => phiBrandPreviewModeHeard, () => null);
-    usePhiSignalListener((signal) => {
-        if (signal.scope === "page" &&
-            signal.receiver === "broadcast" &&
-            signal.channel === PHI_THEME_SIGNAL_CHANNELS.previewThemeMode &&
-            signal.action === "change" &&
-            signal.valueType === "boolean") {
+    /* Through the routes the panel's tree wrote for `previewThemeMode`, as every Widget input arrives. */
+    usePhiControlSignalController({
+        key: "brandPreviewThemeMode",
+        valueType: "boolean",
+        sender: usePhiSignalIdentity().receiver ?? null,
+        signalRoutes,
+        onReceiveCapability: (capabilityId, signal) => {
+            if (capabilityId !== "previewThemeMode" || signal.valueType !== "boolean") {
+                return false;
+            }
             phiBrandPreviewModeHeard = signal.value === true ? "dark" : "light";
             for (const listener of phiBrandPreviewModeListeners)
                 listener();
-        }
+            return true;
+        },
     });
     return heard ?? initialMode;
 }
@@ -986,7 +1021,7 @@ export function PhiBuilderBrandThemeControlsWidgetClient({ runtime, config, colo
     const colorControlWidth = clientToken.controlHeight * 5.5;
     const themeKey = resolveThemeKey(config);
     const { state, draftRef, publishDraft, pickerTransaction } = usePhiBrandThemeDraft(runtime, themeKey);
-    const previewMode = usePhiBrandPreviewMode(resolveThemePayloadMode(state.draft));
+    const previewMode = usePhiBrandPreviewMode(resolveThemePayloadMode(state.draft), config?.signalRoutes);
     const loading = false;
     const saving = false;
     const [activeColorSection, changeActiveColorSection] = usePhiBrandAccordionSection(BRAND_THEME_COLOR_COLLAPSE_STORAGE_KEY, BRAND_THEME_COLOR_SECTION_KEYS);
@@ -1374,11 +1409,19 @@ const PHI_THEME_WORDMARK_WEIGHT_OPTIONS = [
  * from, which is a different job from authoring them.
  */
 export function PhiBuilderBrandIdentityControlsWidgetClient({ runtime, config, }) {
-    const { token: clientToken } = usePhiConfig();
+    const { presets: themePresets, token: clientToken } = usePhiConfig();
     const themeBlocks = usePhiThemeBlockCatalog();
     const themeKey = resolveThemeKey(config);
     const { state, publishDraft } = usePhiBrandThemeDraft(runtime, themeKey);
-    const mode = usePhiBrandPreviewMode(resolveThemePayloadMode(state.draft));
+    const mode = usePhiBrandPreviewMode(resolveThemePayloadMode(state.draft), config?.signalRoutes);
+    /*
+     * The ground the Logo of the mode being authored stands on: the draft's own container colour in that
+     * mode, not a fixed black or white -- a Theme whose dark ground is navy shows its dark Logo on navy.
+     */
+    const logoGroundToken = useMemo(() => {
+        const resolvedDraft = resolvePhiThemeRuntimePayload(state.draft, themeBlocks).theme;
+        return resolveBrandDraftAliasTokens(resolvedDraft, resolveThemePayloadPreset(resolvedDraft, themePresets), mode);
+    }, [mode, state.draft, themeBlocks, themePresets]);
     const [activeIdentitySection, changeActiveIdentitySection] = usePhiBrandAccordionSection(BRAND_THEME_IDENTITY_COLLAPSE_STORAGE_KEY, BRAND_THEME_IDENTITY_SECTION_KEYS);
     const brand = state.draft.brand ?? {};
     /*
@@ -1453,8 +1496,8 @@ export function PhiBuilderBrandIdentityControlsWidgetClient({ runtime, config, }
                                                 height: 48,
                                                 paddingInline: clientToken.paddingSM,
                                                 borderRadius: clientToken.borderRadius,
-                                                border: `1px solid ${clientToken.colorBorderSecondary}`,
-                                                background: mode === "dark" ? "#141414" : "#ffffff",
+                                                border: `1px solid ${readAliasTokenString(logoGroundToken, "colorBorderSecondary")}`,
+                                                background: readAliasTokenString(logoGroundToken, "colorBgContainer"),
                                             }, children: logoPreviewUrl ? (_jsx("span", { style: {
                                                     display: "block",
                                                     width: "100%",
@@ -1463,7 +1506,7 @@ export function PhiBuilderBrandIdentityControlsWidgetClient({ runtime, config, }
                                                     backgroundSize: "contain",
                                                     backgroundRepeat: "no-repeat",
                                                     backgroundPosition: "left center",
-                                                } })) : (_jsx(PhiTypographyControl, { type: "secondary", style: { color: mode === "dark" ? "rgba(255, 255, 255, 0.45)" : undefined }, children: "No Logo" })) }), _jsxs(PhiFlexControl, { align: "center", gap: clientToken.paddingXXS, style: { flexShrink: 0 }, children: [_jsx(PhiBrandBlockResetButton, { disabled: brand.logo?.[mode] == null, blockTitle: markSet.title, onReset: () => publishDraft(mergeThemeBrandLogo(state.draft, mode, undefined)) }), _jsx(PhiBrandCopyModeButton, { mode: mode, disabled: JSON.stringify(logo) === JSON.stringify(logos[otherMode] ?? null), onCopy: () => publishDraft(mergeThemeBrandLogo(state.draft, otherMode, logo ?? { sourceKind: "none" })) })] })] }), _jsx(PhiMediaPickerBinding, { config: {
+                                                } })) : (_jsx(PhiTypographyControl, { type: "secondary", style: { color: readAliasTokenString(logoGroundToken, "colorTextTertiary") }, children: "No Logo" })) }), _jsxs(PhiFlexControl, { align: "center", gap: clientToken.paddingXXS, style: { flexShrink: 0 }, children: [_jsx(PhiBrandBlockResetButton, { disabled: brand.logo?.[mode] == null, blockTitle: markSet.title, onReset: () => publishDraft(mergeThemeBrandLogo(state.draft, mode, undefined)) }), _jsx(PhiBrandCopyModeButton, { mode: mode, disabled: JSON.stringify(logo) === JSON.stringify(logos[otherMode] ?? null), onCopy: () => publishDraft(mergeThemeBrandLogo(state.draft, otherMode, logo ?? { sourceKind: "none" })) })] })] }), _jsx(PhiMediaPickerBinding, { config: {
                                         mediaType: PhiMediaKind.Image,
                                         pageSize: 12,
                                         showPagination: true,
@@ -1545,7 +1588,7 @@ export function PhiBuilderBrandBackgroundControlsWidgetClient({ runtime, config,
     const themeBlocks = usePhiThemeBlockCatalog();
     const themeKey = resolveThemeKey(config);
     const { state, publishDraft, editTransaction } = usePhiBrandThemeDraft(runtime, themeKey);
-    const mode = usePhiBrandPreviewMode(resolveThemePayloadMode(state.draft));
+    const mode = usePhiBrandPreviewMode(resolveThemePayloadMode(state.draft), config?.signalRoutes);
     const composition = resolvePhiThemeComposition(state.draft, themeBlocks);
     const [activeBackgroundSection, changeActiveBackgroundSection] = usePhiBrandAccordionSection(BRAND_THEME_BACKGROUND_COLLAPSE_STORAGE_KEY, BRAND_THEME_BACKGROUND_SECTION_KEYS);
     const modeLabel = mode === "dark" ? "Dark mode" : "Light mode";
@@ -1642,7 +1685,7 @@ function PhiBrandChromePreviewShell({ overlayStyle, paneShadows, rootBackgroundS
                     overflow: "hidden",
                 }, children: brand }), _jsxs("div", { "aria-hidden": true, style: { position: "absolute", inset: 0, fontSize: 11, color: labelColor, pointerEvents: "none" }, children: [_jsx("span", { style: { position: "absolute", left: 8, top: header + 8 }, children: "Sider" }), _jsx("span", { style: { position: "absolute", left: sider + 8, bottom: (footer - 14) / 2 }, children: "Footer" })] }), _jsx("div", { style: { display: "flex", flexDirection: "column", gap: padding, padding, minWidth: 0 }, children: children })] }));
 }
-export function PhiBuilderBrandThemePreviewWidgetClient({ runtime, }) {
+export function PhiBuilderBrandThemePreviewWidgetClient({ runtime, config, }) {
     // The sample field is typed into like a real one, so what the Theme does to a filled field shows too.
     const [previewInput, setPreviewInput] = useState("");
     const { presets: themePresets, token: clientToken } = usePhiConfig();
@@ -1669,7 +1712,7 @@ export function PhiBuilderBrandThemePreviewWidgetClient({ runtime, }) {
             emitThemeHydrateRequest(dispatchSignal, selfAddress);
         }
     }, [dispatchSignal, selfAddress]);
-    const mode = usePhiBrandPreviewMode(resolveThemePayloadMode(fallbackTheme));
+    const mode = usePhiBrandPreviewMode(resolveThemePayloadMode(fallbackTheme), config?.signalRoutes);
     const previewPreset = resolveThemePayloadPreset(previewThemeResolved, themePresets);
     const previewFontStacks = usePhiThemeFontStacks(previewThemeResolved.fonts);
     const previewHeadingFontFamily = resolvePhiThemeHeadingFontFamily(previewThemeResolved.typography, {
@@ -1684,14 +1727,8 @@ export function PhiBuilderBrandThemePreviewWidgetClient({ runtime, }) {
      */
     const previewBodyFontStack = previewFontStacks.body.stack;
     const previewMonoFontStack = previewFontStacks.mono.stack;
-    const previewEffectiveToken = useMemo(() => resolvePhiAntdAliasTokens(mode, {
-        ...buildPhiEffectiveNonColorThemeTokens(previewThemeResolved),
-        ...resolvePhiThemeColorTokens(previewPreset, previewThemeResolved.palette, mode),
-        ...(previewThemeResolved.style?.token ?? {}),
-        // The draft's lettering, applied as the root theme applies the Site's: body text and code.
-        ...(previewBodyFontStack ? { fontFamily: previewBodyFontStack } : {}),
-        ...(previewMonoFontStack ? { fontFamilyCode: previewMonoFontStack } : {}),
-    }), [mode, previewBodyFontStack, previewMonoFontStack, previewPreset, previewThemeResolved]);
+    // The draft's lettering, applied as the root theme applies the Site's: body text and code.
+    const previewEffectiveToken = useMemo(() => resolveBrandDraftAliasTokens(previewThemeResolved, previewPreset, mode, { body: previewBodyFontStack, mono: previewMonoFontStack }), [mode, previewBodyFontStack, previewMonoFontStack, previewPreset, previewThemeResolved]);
     const columns = [
         { title: "Name", key: "name", fieldPath: "name", sizing: { mode: "fill" } },
         { title: "Status", key: "status", fieldPath: "status", sizing: { mode: "content" }, render: (value) => _jsx(PhiTagControl, { color: "processing", children: String(value) }) },
@@ -1727,8 +1764,8 @@ export function PhiBuilderBrandThemePreviewWidgetClient({ runtime, }) {
             previewShapedComponents: applyPhiSurfaceShapeComponentTokens(applyPhiControlShapeComponentTokens({ ...(applyPhiButtonShadowComponentTokens(previewThemeResolved.components, previewThemeResolved.buttons, mode) ?? {}) }, previewControlShape, previewEffectiveToken), previewControlShape, previewEffectiveToken),
         };
     }, [mode, previewEffectiveToken, previewThemeResolved]);
-    const previewCardBackground = readEffectiveTokenString(previewEffectiveToken, "colorBgContainer", mode === "dark" ? "#141414" : "#ffffff");
-    const previewSurfaceBackground = readEffectiveTokenString(previewEffectiveToken, "colorBgLayout", mode === "dark" ? "#000000" : "#f5f5f5");
+    const previewCardBackground = readAliasTokenString(previewEffectiveToken, "colorBgContainer");
+    const previewSurfaceBackground = readAliasTokenString(previewEffectiveToken, "colorBgLayout");
     /*
      * The Theme Root Background, on the surface the preview treats as the page ground -- the same layer
      * the Site paints behind everything, in the mode the preview switch is showing. A mode with no
@@ -1741,38 +1778,36 @@ export function PhiBuilderBrandThemePreviewWidgetClient({ runtime, }) {
      * only one the preview draws.
      */
     const previewPaneShadows = resolvePhiShellChromePaneShadows(previewThemeResolved.root);
-    const previewTextColor = readEffectiveTokenString(previewEffectiveToken, "colorText", mode === "dark" ? "rgba(255,255,255,0.85)" : "rgba(0,0,0,0.88)");
-    const previewTextSecondaryColor = readEffectiveTokenString(previewEffectiveToken, "colorTextSecondary", mode === "dark" ? "rgba(255,255,255,0.65)" : "rgba(0,0,0,0.65)");
-    const previewTextTertiaryColor = readEffectiveTokenString(previewEffectiveToken, "colorTextTertiary", mode === "dark" ? "rgba(255,255,255,0.45)" : "rgba(0,0,0,0.45)");
-    const previewLinkColor = readEffectiveTokenString(previewEffectiveToken, "colorLink", readEffectiveTokenString(previewEffectiveToken, "colorPrimary", "#1677ff"));
+    const previewTextColor = readAliasTokenString(previewEffectiveToken, "colorText");
+    const previewTextSecondaryColor = readAliasTokenString(previewEffectiveToken, "colorTextSecondary");
+    const previewTextTertiaryColor = readAliasTokenString(previewEffectiveToken, "colorTextTertiary");
+    const previewLinkColor = readAliasTokenString(previewEffectiveToken, "colorLink");
     /*
      * What the sample swatch shows: the brand colour, so the hex beside it moves the moment the seed does.
      */
-    const previewSwatchColor = readEffectiveTokenString(previewEffectiveToken, "colorPrimary", "#1677ff");
-    const previewLinkHoverColor = readEffectiveTokenString(previewEffectiveToken, "colorLinkHover", previewLinkColor);
-    const previewLinkActiveColor = readEffectiveTokenString(previewEffectiveToken, "colorLinkActive", previewLinkColor);
+    const previewSwatchColor = readAliasTokenString(previewEffectiveToken, "colorPrimary");
+    const previewLinkHoverColor = readAliasTokenString(previewEffectiveToken, "colorLinkHover");
+    const previewLinkActiveColor = readAliasTokenString(previewEffectiveToken, "colorLinkActive");
     /*
      * Four status colours, one shape: text, ground and border, each with its hover. Info's border falls
      * back to the link colour where the others fall back to their own base, which is how it always was.
      */
     const statusPreviewItems = [
-        { key: "info", label: "Info", prefix: "colorInfo", base: "#1677ff", hover: "#4096ff", borderFallback: previewLinkColor },
-        { key: "success", label: "Success", prefix: "colorSuccess", base: "#52c41a", hover: "#73d13d" },
-        { key: "warning", label: "Warning", prefix: "colorWarning", base: "#faad14", hover: "#ffc53d" },
-        { key: "error", label: "Error", prefix: "colorError", base: "#ff4d4f", hover: "#ff7875" },
-    ].map(({ key, label, prefix, base, hover, ...item }) => {
-        const read = (suffix, fallback) => readEffectiveTokenString(previewEffectiveToken, `${prefix}${suffix}`, fallback);
-        const baseColor = read("", base);
-        const hoverColor = read("Hover", hover);
+        { key: "info", label: "Info", prefix: "colorInfo" },
+        { key: "success", label: "Success", prefix: "colorSuccess" },
+        { key: "warning", label: "Warning", prefix: "colorWarning" },
+        { key: "error", label: "Error", prefix: "colorError" },
+    ].map(({ key, label, prefix }) => {
+        const read = (suffix) => readAliasTokenString(previewEffectiveToken, `${prefix}${suffix}`);
         return {
             key,
             label,
-            color: read("Text", baseColor),
-            background: read("Bg", previewCardBackground),
-            border: read("Border", "borderFallback" in item ? item.borderFallback : baseColor),
-            hoverColor: read("TextHover", hoverColor),
-            hoverBackground: read("BgHover", previewCardBackground),
-            hoverBorder: read("BorderHover", hoverColor),
+            color: read("Text"),
+            background: read("Bg"),
+            border: read("Border"),
+            hoverColor: read("TextHover"),
+            hoverBackground: read("BgHover"),
+            hoverBorder: read("BorderHover"),
         };
     });
     const fontPreviewItems = [
@@ -1816,34 +1851,34 @@ export function PhiBuilderBrandThemePreviewWidgetClient({ runtime, }) {
         {
             key: "sm",
             label: "Small",
-            value: readEffectiveTokenNumber(previewEffectiveToken, "borderRadiusSM", PHI_RADII.xs),
+            value: readAliasTokenNumber(previewEffectiveToken, "borderRadiusSM"),
         },
         {
             key: "base",
             label: "Base",
-            value: readEffectiveTokenNumber(previewEffectiveToken, "borderRadius", PHI_RADII.sm),
+            value: readAliasTokenNumber(previewEffectiveToken, "borderRadius"),
         },
         {
             key: "lg",
             label: "Large",
-            value: readEffectiveTokenNumber(previewEffectiveToken, "borderRadiusLG", PHI_RADII.base),
+            value: readAliasTokenNumber(previewEffectiveToken, "borderRadiusLG"),
         },
     ];
     const controlHeightPreviewItems = [
         {
             key: "sm",
             label: "Small",
-            value: readEffectiveTokenNumber(previewEffectiveToken, "controlHeightSM", PHI_CONTROL_HEIGHTS.sm),
+            value: readAliasTokenNumber(previewEffectiveToken, "controlHeightSM"),
         },
         {
             key: "base",
             label: "Base",
-            value: readEffectiveTokenNumber(previewEffectiveToken, "controlHeight", PHI_CONTROL_HEIGHTS.md),
+            value: readAliasTokenNumber(previewEffectiveToken, "controlHeight"),
         },
         {
             key: "lg",
             label: "Large",
-            value: readEffectiveTokenNumber(previewEffectiveToken, "controlHeightLG", PHI_CONTROL_HEIGHTS.lg),
+            value: readAliasTokenNumber(previewEffectiveToken, "controlHeightLG"),
         },
     ];
     const wireframeEnabled = readEffectiveTokenBoolean(previewEffectiveToken, "wireframe", true);
@@ -1856,7 +1891,7 @@ export function PhiBuilderBrandThemePreviewWidgetClient({ runtime, }) {
                      * variable is inherited, and the Builder's own Root carries the published Theme's.
                      */
                     ...{
-                        [PHI_THEME_HEADING_FONT_VARIABLE]: previewHeadingFontFamily ?? readEffectiveTokenString(previewEffectiveToken, "fontFamily", clientToken.fontFamily),
+                        [PHI_THEME_HEADING_FONT_VARIABLE]: previewHeadingFontFamily ?? readAliasTokenString(previewEffectiveToken, "fontFamily"),
                     },
                     /*
                      * Small and large Control radii are inherited custom properties, so the preview declares its
@@ -1888,15 +1923,15 @@ export function PhiBuilderBrandThemePreviewWidgetClient({ runtime, }) {
                                         minWidth: 0,
                                     }, children: fontPreviewItems.map((item) => (_jsxs("div", { style: {
                                             minWidth: 0,
-                                            border: `1px solid ${readEffectiveTokenString(previewEffectiveToken, "colorBorderSecondary", "rgba(0,0,0,0.06)")}`,
-                                            borderRadius: `${readEffectiveTokenNumber(previewEffectiveToken, "borderRadius", PHI_RADII.sm)}px`,
+                                            border: `1px solid ${readAliasTokenString(previewEffectiveToken, "colorBorderSecondary")}`,
+                                            borderRadius: `${readAliasTokenNumber(previewEffectiveToken, "borderRadius")}px`,
                                             background: previewCardBackground,
                                             padding: clientToken.paddingXS,
                                         }, children: [_jsx(PhiTypographyControl, { type: "secondary", style: { display: "block" }, children: item.label }), _jsx(PhiTypographyControl, { style: { display: "block", color: previewTextColor, fontFamily: item.family }, children: item.sample }), item.value ? (_jsx(PhiTypographyControl, { type: "secondary", style: { display: "block", fontFamily: item.family }, children: item.value })) : null] }, item.key))) })] }), _jsx(PhiFlexControl, { gap: clientToken.padding, wrap: "wrap", children: _jsxs(PhiFlexControl, { vertical: true, gap: clientToken.paddingSM, style: { flex: "1 1 260px", minWidth: 0 }, children: [_jsx(PhiTypographyControl, { presentation: "title", level: 5, style: { margin: 0, color: previewTextColor }, children: "Border Radius" }), _jsx(PhiFlexControl, { gap: clientToken.paddingXS, wrap: "wrap", children: radiusPreviewItems.map((item) => (_jsxs("div", { style: {
                                                 // The tokens are numbers; `calc(40 * 2)` is no length, and the sample lost its size.
                                                 width: clientToken.controlHeightLG * 2,
                                                 minHeight: clientToken.controlHeight * 1.25,
-                                                border: `1px solid ${readEffectiveTokenString(previewEffectiveToken, "colorBorder", "rgba(0,0,0,0.15)")}`,
+                                                border: `1px solid ${readAliasTokenString(previewEffectiveToken, "colorBorder")}`,
                                                 borderRadius: item.value,
                                                 background: previewCardBackground,
                                                 padding: clientToken.paddingXS,

package/plugins/runtime-modules/theme/widgets/brand-controls/config.d.ts

@@ -1,6 +1,7 @@
 import type { PhiCmsWidgetPlugin } from "../../../../../types";
 import { type PhiCmsAreaKey } from "../../../../../constants/cms-areas";
-export type PhiBuilderBrandWidgetConfig = {
+import { type PhiControlSignalConfig } from "../../../../../components/widgets/config/control-signal-config";
+export type PhiBuilderBrandWidgetConfig = Pick<PhiControlSignalConfig, "key" | "signalRoutes"> & {
     themeKey?: string;
     reviewArea?: PhiCmsAreaKey;
 };

package/plugins/runtime-modules/theme/widgets/brand-controls/config.js

@@ -4,13 +4,32 @@ import { PHI_AUTHORING_OPTION_PROVIDER_KEYS } from "../../../../../constants/aut
 import { PHI_THEME_SIGNAL_CHANNELS } from "../../../../../plugins/runtime-modules/theme/controller/signals";
 import { createPhiCmsWidgetDefinition } from "../../../../../components/widgets/config/helpers";
 import { readString } from "../../../../../components/widgets/config/parser-primitives";
+import { parsePhiControlSignalConfig, } from "../../../../../components/widgets/config/control-signal-config";
 function parseBuilderBrandWidgetConfig(config) {
     const reviewArea = readString(config.reviewArea);
     return {
+        /*
+         * The routes are read like any Widget's: the preview mode reaches a panel through the route its tree
+         * wrote, so a route an author adds in the Builder works as well. The parser dropped them once and
+         * the panels listened to a hard-coded broadcast, which left the declared input decoration.
+         */
+        ...parsePhiControlSignalConfig(config, { key: "brandPreviewThemeMode" }),
         themeKey: readString(config.themeKey),
         reviewArea: isPhiCmsAreaKey(reviewArea) ? reviewArea : undefined,
     };
 }
+/** Every panel that draws in the preview's mode follows the mode switch. */
+const PHI_BUILDER_BRAND_PREVIEW_MODE_SIGNALS = {
+    emits: [],
+    listens: [
+        {
+            id: "previewThemeMode",
+            channel: PHI_THEME_SIGNAL_CHANNELS.previewThemeMode,
+            action: "change",
+            valueType: "boolean",
+        },
+    ],
+};
 export const PHI_BUILDER_BRAND_THEME_CONTROLS_WIDGET_DEFINITION = createPhiCmsWidgetDefinition({
     typeKey: "builder-brand-theme-controls",
     title: "Builder Brand Theme Controls",
@@ -18,6 +37,7 @@ export const PHI_BUILDER_BRAND_THEME_CONTROLS_WIDGET_DEFINITION = createPhiCmsWi
     category: "configuration",
     iconFamily: "theme",
     slotSizePolicy: "fill-inline",
+    runtimeSignals: PHI_BUILDER_BRAND_PREVIEW_MODE_SIGNALS,
     fields: [
         { key: "themeKey", type: "string", label: "Theme Key" },
         { key: "reviewArea", type: "string", label: "Review Area" },
@@ -41,6 +61,7 @@ export const PHI_BUILDER_BRAND_IDENTITY_CONTROLS_WIDGET_DEFINITION = createPhiCm
         PHI_MEDIA_LIBRARY_DATA_PROVIDER_KEYS.collection,
         PHI_AUTHORING_OPTION_PROVIDER_KEYS.pages,
     ],
+    runtimeSignals: PHI_BUILDER_BRAND_PREVIEW_MODE_SIGNALS,
     fields: [
         { key: "themeKey", type: "string", label: "Theme Key" },
         { key: "reviewArea", type: "string", label: "Review Area" },
@@ -76,17 +97,7 @@ export const PHI_BUILDER_BRAND_BACKGROUND_CONTROLS_WIDGET_DEFINITION = createPhi
      * library, on a Page where the Assets Module was active the whole time.
      */
     requiredDataProviders: [PHI_MEDIA_LIBRARY_DATA_PROVIDER_KEYS.collection],
-    runtimeSignals: {
-        emits: [],
-        listens: [
-            {
-                id: "previewThemeMode",
-                channel: PHI_THEME_SIGNAL_CHANNELS.previewThemeMode,
-                action: "change",
-                valueType: "boolean",
-            },
-        ],
-    },
+    runtimeSignals: PHI_BUILDER_BRAND_PREVIEW_MODE_SIGNALS,
     fields: [
         { key: "themeKey", type: "string", label: "Theme Key" },
         { key: "reviewArea", type: "string", label: "Review Area" },
@@ -100,17 +111,7 @@ export const PHI_BUILDER_BRAND_THEME_PREVIEW_WIDGET_DEFINITION = createPhiCmsWid
     category: "configuration",
     iconFamily: "theme",
     slotSizePolicy: "fill-inline",
-    runtimeSignals: {
-        emits: [],
-        listens: [
-            {
-                id: "previewThemeMode",
-                channel: PHI_THEME_SIGNAL_CHANNELS.previewThemeMode,
-                action: "change",
-                valueType: "boolean",
-            },
-        ],
-    },
+    runtimeSignals: PHI_BUILDER_BRAND_PREVIEW_MODE_SIGNALS,
     fields: [
         { key: "themeKey", type: "string", label: "Theme Key" },
         { key: "reviewArea", type: "string", label: "Review Area" },

package/plugins/runtime-modules/theme/widgets/brand-controls/plugin.js

@@ -11,7 +11,7 @@ export const PHI_BUILDER_BRAND_THEME_CONTROLS_WIDGET_PLUGIN = {
 };
 export const PHI_BUILDER_BRAND_THEME_PREVIEW_WIDGET_PLUGIN = {
     ...PHI_BUILDER_BRAND_THEME_PREVIEW_WIDGET_DEFINITION,
-    render: ({ runtime }) => _jsx(PhiBuilderBrandThemePreviewWidgetClient, { runtime: runtime }),
+    render: ({ runtime, config }) => _jsx(PhiBuilderBrandThemePreviewWidgetClient, { runtime: runtime, config: config }),
     renderPreview: ({ runtime }) => _jsx(PhiBuilderBrandThemePreviewWidgetClient, { runtime: runtime }),
 };
 export const PHI_BUILDER_BRAND_STYLE_CONTROLS_WIDGET_PLUGIN = {

package/plugins/runtime-modules/theme-descriptors.js

@@ -1,4 +1,4 @@
-import { PHI_CORE_RUNTIME_MODULE_THEMES } from "./area-base-presets";
+import { PHI_CORE_RUNTIME_MODULE_THEMES } from "./core/themes";
 import { PHI_CORE_RUNTIME_MODULE_ID } from "./core/ids";
 import { readAllPhiSiteModuleServerAreaContributions } from "./site-module-contributions";
 import { PHI_THEME_RUNTIME_MODULE_BLOCKS } from "./theme/block-descriptors";

package/plugins/runtime-modules/user-management/data-providers.d.ts

@@ -77,6 +77,7 @@ export declare const PHI_USER_MANAGEMENT_RUNTIME_DATA_PROVIDER_DESCRIPTORS: {
             filterFields: string[];
             sorting: "single";
             pagination: "offset";
+            total: true;
         };
         actions: ({
             key: string;
@@ -149,6 +150,7 @@ export declare const PHI_USER_MANAGEMENT_RUNTIME_DATA_PROVIDER_DESCRIPTORS: {
             sorting: "none";
             pagination: "none";
             search?: undefined;
+            total?: undefined;
         };
         recordRead?: undefined;
         summaryFields?: undefined;

package/plugins/runtime-modules/user-management/data-providers.js

@@ -47,6 +47,7 @@ export const PHI_USER_MANAGEMENT_RUNTIME_DATA_PROVIDER_DESCRIPTORS = [
                     filterFields: ["accountType", "enabled"],
                     sorting: "single",
                     pagination: "offset",
+                    total: true,
                 },
                 actions: [
                     {

package/plugins/runtime-modules/user-management/definition.d.ts

@@ -105,6 +105,7 @@ export declare const PHI_USER_MANAGEMENT_RUNTIME_MODULE_DEFINITION: {
                 filterFields: string[];
                 sorting: "single";
                 pagination: "offset";
+                total: true;
             };
             actions: ({
                 key: string;
@@ -177,6 +178,7 @@ export declare const PHI_USER_MANAGEMENT_RUNTIME_MODULE_DEFINITION: {
                 sorting: "none";
                 pagination: "none";
                 search?: undefined;
+                total?: undefined;
             };
             recordRead?: undefined;
             summaryFields?: undefined;

package/styles/control-shape.css

@@ -34,7 +34,7 @@
 .ant-picker-small.ant-picker-small:not(:where(.ant-picker-underlined)),
 .ant-segmented.ant-segmented-sm.ant-segmented-sm,
 .ant-color-picker-trigger.ant-color-picker-sm.ant-color-picker-sm {
-  border-radius: var(--phi-control-radius-sm, var(--ant-border-radius-sm));
+  border-radius: var(--phi-control-radius-sm);
 }
 
 .ant-btn-lg.ant-btn-lg,
@@ -45,7 +45,7 @@
 .ant-picker-large.ant-picker-large:not(:where(.ant-picker-underlined)),
 .ant-segmented.ant-segmented-lg.ant-segmented-lg,
 .ant-color-picker-trigger.ant-color-picker-lg.ant-color-picker-lg {
-  border-radius: var(--phi-control-radius-lg, var(--ant-border-radius-lg));
+  border-radius: var(--phi-control-radius-lg);
 }
 
 /*
@@ -56,17 +56,17 @@
  */
 .ant-segmented.ant-segmented .ant-segmented-item.ant-segmented-item,
 .ant-segmented.ant-segmented .ant-segmented-thumb.ant-segmented-thumb {
-  border-radius: var(--phi-control-radius-inner-md, var(--ant-border-radius-sm));
+  border-radius: var(--phi-control-radius-inner-md);
 }
 
 .ant-segmented.ant-segmented-sm .ant-segmented-item.ant-segmented-item,
 .ant-segmented.ant-segmented-sm .ant-segmented-thumb.ant-segmented-thumb {
-  border-radius: var(--phi-control-radius-inner-sm, var(--ant-border-radius-xs));
+  border-radius: var(--phi-control-radius-inner-sm);
 }
 
 .ant-segmented.ant-segmented-lg .ant-segmented-item.ant-segmented-item,
 .ant-segmented.ant-segmented-lg .ant-segmented-thumb.ant-segmented-thumb {
-  border-radius: var(--phi-control-radius-inner-lg, var(--ant-border-radius));
+  border-radius: var(--phi-control-radius-inner-lg);
 }
 
 /*
@@ -90,15 +90,15 @@
  */
 .ant-color-picker-trigger.ant-color-picker-trigger .ant-color-picker-color-block.ant-color-picker-color-block {
   margin-inline-start: 2px;
-  border-radius: var(--phi-control-radius-inner-md, var(--ant-border-radius-sm));
+  border-radius: var(--phi-control-radius-inner-md);
 }
 
 .ant-color-picker-trigger.ant-color-picker-sm .ant-color-picker-color-block.ant-color-picker-color-block {
-  border-radius: var(--phi-control-radius-inner-sm, var(--ant-border-radius-xs));
+  border-radius: var(--phi-control-radius-inner-sm);
 }
 
 .ant-color-picker-trigger.ant-color-picker-lg .ant-color-picker-color-block.ant-color-picker-color-block {
-  border-radius: var(--phi-control-radius-inner-lg, var(--ant-border-radius));
+  border-radius: var(--phi-control-radius-inner-lg);
 }
 
 /*
@@ -127,21 +127,21 @@ textarea.ant-input.ant-input:not(:where(.ant-input-sm, .ant-input-lg, .ant-input
 .ant-input-textarea-affix-wrapper.ant-input-textarea-affix-wrapper:not(:where(.ant-input-affix-wrapper-sm, .ant-input-affix-wrapper-lg, .ant-input-underlined)),
 .ant-select-multiple.ant-select-multiple:not(:where(.ant-select-sm, .ant-select-lg, .ant-select-underlined)),
 .ant-mentions.ant-mentions:not(:where(.ant-mentions-sm, .ant-mentions-lg, .ant-mentions-underlined)) {
-  border-radius: var(--phi-control-radius-grown-md, var(--ant-border-radius));
+  border-radius: var(--phi-control-radius-grown-md);
 }
 
 textarea.ant-input-sm.ant-input-sm:not(:where(.ant-input-underlined, .ant-input-affix-wrapper > textarea)),
 .ant-input-textarea-affix-wrapper.ant-input-affix-wrapper-sm.ant-input-affix-wrapper-sm:not(:where(.ant-input-underlined)),
 .ant-select-multiple.ant-select-sm.ant-select-sm:not(:where(.ant-select-underlined)),
 .ant-mentions-sm.ant-mentions-sm:not(:where(.ant-mentions-underlined)) {
-  border-radius: var(--phi-control-radius-grown-sm, var(--ant-border-radius-sm));
+  border-radius: var(--phi-control-radius-grown-sm);
 }
 
 textarea.ant-input-lg.ant-input-lg:not(:where(.ant-input-underlined, .ant-input-affix-wrapper > textarea)),
 .ant-input-textarea-affix-wrapper.ant-input-affix-wrapper-lg.ant-input-affix-wrapper-lg:not(:where(.ant-input-underlined)),
 .ant-select-multiple.ant-select-lg.ant-select-lg:not(:where(.ant-select-underlined)),
 .ant-mentions-lg.ant-mentions-lg:not(:where(.ant-mentions-underlined)) {
-  border-radius: var(--phi-control-radius-grown-lg, var(--ant-border-radius-lg));
+  border-radius: var(--phi-control-radius-grown-lg);
 }
 
 /*

package/styles/controls.css

@@ -313,7 +313,7 @@ h5.phi-typography, .phi-typography h5 {
  * is the Theme's surface step; everything else is the token variable the primitive read.
  */
 .phi-card-control {
-  --phi-card-control-radius: var(--phi-surface-radius, var(--ant-border-radius-lg));
+  --phi-card-control-radius: var(--phi-surface-radius);
   --phi-card-control-line: var(--ant-line-width) var(--ant-line-type) var(--ant-color-border-secondary);
   position: relative;
   box-sizing: border-box;
@@ -506,8 +506,8 @@ h5.phi-typography, .phi-typography h5 {
 }
 
 .phi-table-control.phi-table-control--closing-block [class~="ant-table"] {
-  border-end-start-radius: var(--phi-surface-radius, var(--ant-border-radius-lg));
-  border-end-end-radius: var(--phi-surface-radius, var(--ant-border-radius-lg));
+  border-end-start-radius: var(--phi-surface-radius);
+  border-end-end-radius: var(--phi-surface-radius);
   /* `clip`, not `hidden`, so the corners are cut without making this the sticky header's scroller. */
   overflow: clip;
 }

package/styles/layout.css

@@ -561,6 +561,11 @@
 /*
  * Hover effects: a card answers the pointer, and only a pointer that hovers.
  * Keyboard focus gets the same answer, so the effect never says something a keyboard reader misses.
+ *
+ * Lift raises the card and gives it the Theme's next shadow up. The resting shadow is the Surface's,
+ * written on the card itself, so the raised one has to be `!important` to stand over it; a card whose
+ * Surface has no shadow gets one when it lifts, which is what lifting means. Two pixels and the same
+ * shadow read as nothing at all; zoom at 4 % did not read either.
  */
 :where(.phi-card--hover-lift, .phi-card--hover-zoom) {
   transition: translate 200ms ease, box-shadow 200ms ease;
@@ -573,25 +578,29 @@
 
 @media (hover: hover) {
   :where(.phi-card--hover-lift):hover {
-    translate: 0 -2px;
+    translate: 0 -4px;
+    box-shadow: var(--ant-box-shadow-secondary) !important;
   }
 
   :where(.phi-card--hover-zoom):hover :where(.phi-card__ground, .phi-card__media img) {
-    scale: 1.04;
+    scale: 1.08;
   }
 }
 
 :where(.phi-card--hover-lift):focus-within {
-  translate: 0 -2px;
+  translate: 0 -4px;
+  box-shadow: var(--ant-box-shadow-secondary) !important;
 }
 
 :where(.phi-card--hover-zoom):focus-within :where(.phi-card__ground, .phi-card__media img) {
-  scale: 1.04;
+  scale: 1.08;
 }
 
 /*
  * The icon paints the colours the card hands it as custom properties, so that the `icon` effect can turn
- * them round: the colour becomes the ground and the ground the colour. A change of colour, not a
+ * them round: the colour becomes the ground, and the mark takes `--phi-card-icon-hover-color` -- the
+ * stated ground where one was stated, the container's otherwise. Not simply the ground: the Theme's
+ * ground for a mark is a fill a few percent opaque, and a mark painted in it vanished. A change of colour, not a
  * movement, so it is not taken back for a reader who asked for less motion -- only its easing is.
  */
 :where(.phi-card__icon) {
@@ -605,13 +614,13 @@
 
 @media (hover: hover) {
   :where(.phi-card--hover-icon):hover :where(.phi-card__icon) {
-    color: var(--phi-card-icon-background);
+    color: var(--phi-card-icon-hover-color);
     background: var(--phi-card-icon-color);
   }
 }
 
 :where(.phi-card--hover-icon):focus-within :where(.phi-card__icon) {
-  color: var(--phi-card-icon-background);
+  color: var(--phi-card-icon-hover-color);
   background: var(--phi-card-icon-color);
 }