@phis/ui 0.4.2 → 0.4.4

package/plugins/runtime-modules/revisions/services/table.js

@@ -7,7 +7,7 @@ import { hasPhiCmsPresetUpdate } from "../../../../plugins/runtime-modules/prese
 import { PhiTableProviderError, } from "../../../../types/table-widget";
 import { createPhiTableProviderClient } from "../../../../components/widgets/client/shared/phi-table-provider";
 import { PHI_REVISIONS_RUNTIME_DATA_PROVIDER_DESCRIPTORS } from "../../../../plugins/runtime-modules/revisions/data-providers";
-import { getPhiWorkspaceCatalogSnapshot, PHI_WORKSPACE_CATALOG_SCOPE, } from "../../../../components/workspace/catalog-store";
+import { getPhiWorkspaceCatalogSnapshot, } from "../../../../components/workspace/catalog-store";
 import { resolvePhiBuilderActivePageCatalog, resolvePhiBuilderActivePageKey, resolvePhiBuilderPageKeyFromCatalogPath, } from "../../../../helpers/cms-page-catalog";
 import { PHI_BUILDER_NAVIGATION_KEY_SEARCH_PARAM, PHI_BUILDER_REVISIONS_SCOPE_SEARCH_PARAM, PHI_BUILDER_REVISIONS_KIND_SEARCH_PARAM, PHI_BUILDER_THEME_KEY_SEARCH_PARAM, normalizePhiBuilderRevisionsKindSearchParam, } from "../../../../helpers/cms-scope-search-params";
 import { resolvePhiBuilderRevisionPagePath, resolvePhiBuilderRevisionScope, } from "../types";
@@ -46,7 +46,7 @@ function readParams(value) {
     }
     const locale = value.locale;
     if (!isPhiRecord(value.scope) && typeof window !== "undefined") {
-        const state = getPhiWorkspaceCatalogSnapshot(PHI_WORKSPACE_CATALOG_SCOPE);
+        const state = getPhiWorkspaceCatalogSnapshot();
         const search = new URLSearchParams(window.location.search);
         const kind = normalizePhiBuilderRevisionsKindSearchParam(value.kind) ??
             normalizePhiBuilderRevisionsKindSearchParam(search.get(PHI_BUILDER_REVISIONS_KIND_SEARCH_PARAM)) ??
@@ -251,7 +251,7 @@ function readModuleIds(value) {
  * title to show, so it is written by its id -- it is still what the revision changed.
  */
 function formatModuleChangeList(labels, modules) {
-    const titles = new Map(getPhiWorkspaceCatalogSnapshot(PHI_WORKSPACE_CATALOG_SCOPE).runtimeModuleDefinitions
+    const titles = new Map(getPhiWorkspaceCatalogSnapshot().runtimeModuleDefinitions
         .map((definition) => [definition.moduleId, definition.title]));
     const name = (moduleId) => titles.get(moduleId) ?? moduleId;
     return [

package/plugins/runtime-modules/theme/trees/phi-default-builder-theme-page-tree.js

@@ -13,6 +13,21 @@ import { PHI_THEME_SIGNAL_CHANNELS } from "../controller/signals";
 import { PHI_THEME_RUNTIME_MODULE_ID } from "../ids";
 import { buildPhiThemeSetSelectOptions } from "../set-options";
 import { PHI_THEME_PAGE_LAYOUT_IDS, PHI_THEME_PAGE_WIDGET_IDS } from "../page-ids";
+/**
+ * A Theme panel's way to hear the preview mode switch: the switch broadcasts on the Page, and every panel
+ * that draws in that mode takes it through this route, as any Widget takes an input.
+ */
+function brandPreviewModeListenRoute(widgetId) {
+    return {
+        routeKey: "brand-preview-mode",
+        capabilityId: "previewThemeMode",
+        scope: "page",
+        channel: PHI_THEME_SIGNAL_CHANNELS.previewThemeMode,
+        action: "change",
+        valueType: "boolean",
+        receiver: createPhiSignalAddress("cms", widgetId),
+    };
+}
 const PHI_THEME_PAGE_PRESET_KEY = "builder-theme-page";
 const PHI_THEME_PAGE_REGION_IDS = {
     regionHeaderBottom: -511,
@@ -527,6 +542,7 @@ export async function buildPhiDefaultBuilderThemePageTree({ page, runtime, regis
                 label: "dev brand theme controls",
                 config: {
                     themeKey: "default",
+                    signalRoutes: { listens: [brandPreviewModeListenRoute(PHI_THEME_PAGE_WIDGET_IDS.widgetBrandThemeControls)] },
                     minSize: { width: 300 },
                     maxSize: { width: 400 },
                 },
@@ -540,6 +556,7 @@ export async function buildPhiDefaultBuilderThemePageTree({ page, runtime, regis
                 label: "dev brand theme preview",
                 config: {
                     themeKey: "default",
+                    signalRoutes: { listens: [brandPreviewModeListenRoute(PHI_THEME_PAGE_WIDGET_IDS.widgetBrandThemePreview)] },
                     minSize: { width: 360 },
                 },
             }),
@@ -565,6 +582,7 @@ export async function buildPhiDefaultBuilderThemePageTree({ page, runtime, regis
                 label: "dev brand background controls",
                 config: {
                     themeKey: "default",
+                    signalRoutes: { listens: [brandPreviewModeListenRoute(PHI_THEME_PAGE_WIDGET_IDS.widgetBrandBackgroundControls)] },
                     // The three Theme panels share one slot, so they share one width. A wider Background
                     // panel widened the slot itself and the column jumped whenever it was selected.
                     minSize: { width: 300 },
@@ -580,6 +598,7 @@ export async function buildPhiDefaultBuilderThemePageTree({ page, runtime, regis
                 label: "dev brand background preview",
                 config: {
                     themeKey: "default",
+                    signalRoutes: { listens: [brandPreviewModeListenRoute(PHI_THEME_PAGE_WIDGET_IDS.widgetBrandBackgroundPreview)] },
                     minSize: { width: 360 },
                 },
             }),
@@ -592,6 +611,7 @@ export async function buildPhiDefaultBuilderThemePageTree({ page, runtime, regis
                 label: "dev brand style preview",
                 config: {
                     themeKey: "default",
+                    signalRoutes: { listens: [brandPreviewModeListenRoute(PHI_THEME_PAGE_WIDGET_IDS.widgetBrandStylePreview)] },
                     minSize: { width: 360 },
                 },
             }),
@@ -604,6 +624,7 @@ export async function buildPhiDefaultBuilderThemePageTree({ page, runtime, regis
                 label: "dev brand identity controls",
                 config: {
                     themeKey: "default",
+                    signalRoutes: { listens: [brandPreviewModeListenRoute(PHI_THEME_PAGE_WIDGET_IDS.widgetBrandIdentityControls)] },
                     minSize: { width: 300 },
                     maxSize: { width: 400 },
                 },
@@ -624,6 +645,7 @@ export async function buildPhiDefaultBuilderThemePageTree({ page, runtime, regis
                 label: "dev brand identity preview",
                 config: {
                     themeKey: "default",
+                    signalRoutes: { listens: [brandPreviewModeListenRoute(PHI_THEME_PAGE_WIDGET_IDS.widgetBrandIdentityPreview)] },
                     minSize: { width: 360 },
                 },
             }),

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

@@ -29,6 +29,7 @@ export declare function PhiBuilderBrandBackgroundControlsWidgetClient({ runtime,
     runtime: PhiBlockRuntime;
     config?: PhiBuilderBrandWidgetConfig | null;
 }): import("react").JSX.Element;
-export declare function PhiBuilderBrandThemePreviewWidgetClient({ runtime, }: {
+export declare function PhiBuilderBrandThemePreviewWidgetClient({ runtime, config, }: {
     runtime: PhiBlockRuntime;
+    config?: PhiBuilderBrandWidgetConfig | null;
 }): import("react").JSX.Element;

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";
@@ -23,7 +24,7 @@ import { PHI_SPACING_TOKEN_KEYS } from "../../../../../components/widgets/config
 import { PhiColorFieldControl } from "../../../../../components/controls/phi-color-field-control";
 import { PhiBrandControl, resolvePhiBrandLogoUrl } from "../../../../../components/controls/phi-brand-control";
 import { PhiBackgroundControl } from "../../../../../components/controls/phi-background-control";
-import { PHI_ROOT_BACKGROUND_IMAGE_SOURCE_KINDS, PHI_ROOT_BACKGROUND_FILTERS, PHI_ROOT_BACKGROUND_MOTION_MODES, resolvePhiRootBackgroundPaintStyle, } from "../../../../../components/root/phi-root-background";
+import { PHI_ROOT_BACKGROUND_BASE_KINDS, PHI_ROOT_BACKGROUND_IMAGE_SOURCE_KINDS, PHI_ROOT_BACKGROUND_FILTERS, PHI_ROOT_BACKGROUND_MOTION_MODES, resolvePhiRootBackgroundPaintStyle, } from "../../../../../components/root/phi-root-background";
 import { PHI_SHELL_CHROME_OVERLAY_BASE_KINDS, PHI_SHELL_CHROME_OVERLAY_FILTERS, PHI_SHELL_CHROME_OVERLAY_IMAGE_SOURCE_KINDS, PHI_SHELL_CHROME_OVERLAY_MOTION_MODES, resolvePhiShellChromeOverlayConfig, resolvePhiShellChromePaneShadow, resolvePhiShellChromePaneShadows, resolvePhiShellChromeOverlayStyle, } from "../../../../../components/root/phi-shell-chrome-overlay";
 import { normalizePhiBackgroundWidgetConfig } from "../../../../../components/widgets/config/background";
 import { PhiMediaPickerBinding } from "../../../../../components/media/phi-media-picker-binding";
@@ -33,13 +34,12 @@ import { buildPhiMediaAssetContentDeliveryUrl, PhiMediaAssetFlags, PhiMediaKind,
 import { createPhiMediaPickerAssetControllerRoutes } from "../../../../../components/media/asset-controller-routes";
 import { PhiPresetSizeControl } from "../../../../../components/controls/phi-preset-size-control";
 import { PhiButtonControl } from "../../../../../components/controls/phi-button-control";
-import { PhiCascaderControl } from "../../../../../components/controls/phi-cascader-control";
 import { PhiCheckboxControl } from "../../../../../components/controls/phi-checkbox-control";
 import { PhiLabeledControl } from "../../../../../components/controls/phi-labeled-control";
 import { PhiNumberControl } from "../../../../../components/controls/phi-number-control";
 import { PhiColorControl } from "../../../../../components/controls/phi-color-control";
-import { usePhiControlOptionsProvider } from "../../../../../components/controls/phi-options-provider";
-import { PHI_AUTHORING_OPTION_PROVIDER_KEYS } from "../../../../../constants/authoring-option-provider-keys";
+import { PhiLinkTargetControl } from "../../../../../components/widgets/client/shared/phi-link-target-control";
+import { usePhiPageReferenceOptions } from "../../../../../components/widgets/client/shared/use-page-reference-options";
 import { PhiShadowControl } from "../../../../../components/controls/phi-shadow-control";
 import { PhiIcon } from "../../../../../components/shell/phi-icon";
 import { PhiIconPickerControl } from "../../../../../components/controls/phi-icon-picker-control";
@@ -484,6 +484,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 +837,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 +1020,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 +1408,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 ?? {};
     /*
@@ -1433,13 +1475,11 @@ export function PhiBuilderBrandIdentityControlsWidgetClient({ runtime, config, }
      */
     const fallbackWordmark = runtime.site.name ?? runtime.site.key;
     /*
-     * The Pages of the public Area, from the same provider the Builder's own Page Cascader reads. The
-     * Widget declares the provider so the Page mounts it; without that the list is simply empty, which
-     * would look like a Site with one Page.
+     * The Pages of the public Area as references, from the list every link picker outside the Builder's
+     * own catalog reads (`/api/site/page-references`). The Brand leads into the public Area wherever it
+     * is drawn, so that is the Area written into the target.
      */
-    const { options: homePathOptions } = usePhiControlOptionsProvider({
-        optionsProvider: { providerKey: PHI_AUTHORING_OPTION_PROVIDER_KEYS.pages },
-    });
+    const { options: homePageOptions, failed: homePagesFailed } = usePhiPageReferenceOptions("public", "phi-theme-brand");
     function updateWordmarkPart(index, patch) {
         publishDraft(mergeThemeWordmarkParts(state.draft, editableWordmarkParts.map((part, at) => (at === index ? { ...part, ...patch } : part))));
     }
@@ -1453,8 +1493,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 +1503,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, { vertical: true, align: "stretch", 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,
@@ -1487,8 +1527,15 @@ export function PhiBuilderBrandIdentityControlsWidgetClient({ runtime, config, }
                                                 })) }) }), _jsx(PhiLabeledControl, { label: "Offset", fill: true, children: _jsx(PhiNumberControl, { prefix: "px", style: { width: "100%" }, value: brand.logoYOffset ?? 0, step: 1, min: -16, max: 16, onChange: (next) => publishDraft(mergeThemeBrand(state.draft, {
                                                     // No offset is no key, the way `Forward` spells its default away below.
                                                     logoYOffset: next ? next : null,
-                                                })) }) }), _jsx(PhiLabeledControl, { label: "Forward", fill: true, children: _jsx(PhiCascaderControl, { value: brand.homeHref ?? "/", options: homePathOptions, placeholder: "Where the Brand leads", onChange: (next) => publishDraft(mergeThemeBrand(state.draft, {
-                                                    homeHref: next === "/" ? null : next,
+                                                })) }) }), _jsx(PhiLabeledControl, { label: "Forward", fill: true, children: _jsx(PhiLinkTargetControl, { value: brand.homeLinkTarget, options: homePageOptions, area: "public", labels: {
+                                                    none: "Site root",
+                                                    page: "Page",
+                                                    external: "Address",
+                                                    pagePlaceholder: homePagesFailed ? "The Pages could not be loaded." : "Select a Page",
+                                                    externalPlaceholder: "https://example.com",
+                                                    newTab: "Open in a new tab",
+                                                }, onChange: (next) => publishDraft(mergeThemeBrand(state.draft, {
+                                                    homeLinkTarget: next ?? null,
                                                 })) }) })] })] })),
                     },
                     {
@@ -1545,7 +1592,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";
@@ -1568,12 +1615,12 @@ export function PhiBuilderBrandBackgroundControlsWidgetClient({ runtime, config,
                         {
                             key: "root",
                             label: _jsx(PhiTypographyControl, { strong: true, children: "Root Background" }),
-                            children: (_jsxs(PhiFlexControl, { vertical: true, gap: clientToken.paddingXS, children: [_jsxs(PhiFlexControl, { align: "center", justify: "space-between", gap: clientToken.paddingXS, children: [_jsxs(PhiTypographyControl, { type: "secondary", children: [modeLabel, ". One layer behind the whole Site, fixed to the viewport."] }), _jsxs(PhiFlexControl, { align: "center", gap: clientToken.paddingXXS, style: { flexShrink: 0 }, children: [_jsx(PhiBrandBlockResetButton, { disabled: state.draft.root?.background?.[mode] == null, blockTitle: composition.ground.title, onReset: () => publishDraft(clearThemeRootSurface(state.draft, "background", mode)) }), _jsx(PhiBrandCopyModeButton, { mode: mode, disabled: isSamePhiBackgroundConfig(rootBackground, otherRootBackground), onCopy: () => publishDraft(mergeThemeRootSurface(state.draft, "background", otherMode, rootBackground)) })] })] }), _jsx(PhiBackgroundControl, { value: rootBackground, motionModes: PHI_ROOT_BACKGROUND_MOTION_MODES, filters: PHI_ROOT_BACKGROUND_FILTERS, imageSourceKinds: PHI_ROOT_BACKGROUND_IMAGE_SOURCE_KINDS, renderMediaPicker: renderPhiThemeRootBackgroundMediaPicker, editTransaction: editTransaction, onChange: (value) => publishDraft(mergeThemeRootSurface(state.draft, "background", mode, value)) }, mode)] })),
+                            children: (_jsxs(PhiFlexControl, { vertical: true, gap: clientToken.paddingXS, children: [_jsxs(PhiFlexControl, { align: "center", justify: "space-between", gap: clientToken.paddingXS, children: [_jsxs(PhiTypographyControl, { type: "secondary", children: [modeLabel, ". One layer behind the whole Site, fixed to the viewport."] }), _jsxs(PhiFlexControl, { vertical: true, align: "stretch", gap: clientToken.paddingXXS, style: { flexShrink: 0 }, children: [_jsx(PhiBrandBlockResetButton, { disabled: state.draft.root?.background?.[mode] == null, blockTitle: composition.ground.title, onReset: () => publishDraft(clearThemeRootSurface(state.draft, "background", mode)) }), _jsx(PhiBrandCopyModeButton, { mode: mode, disabled: isSamePhiBackgroundConfig(rootBackground, otherRootBackground), onCopy: () => publishDraft(mergeThemeRootSurface(state.draft, "background", otherMode, rootBackground)) })] })] }), _jsx(PhiBackgroundControl, { value: rootBackground, motionModes: PHI_ROOT_BACKGROUND_MOTION_MODES, filters: PHI_ROOT_BACKGROUND_FILTERS, baseKinds: PHI_ROOT_BACKGROUND_BASE_KINDS, imageSourceKinds: PHI_ROOT_BACKGROUND_IMAGE_SOURCE_KINDS, renderMediaPicker: renderPhiThemeRootBackgroundMediaPicker, editTransaction: editTransaction, onChange: (value) => publishDraft(mergeThemeRootSurface(state.draft, "background", mode, value)) }, mode)] })),
                         },
                         {
                             key: "chrome",
                             label: _jsx(PhiTypographyControl, { strong: true, children: "Chrome Overlay" }),
-                            children: (_jsxs(PhiFlexControl, { vertical: true, gap: clientToken.paddingXS, children: [_jsxs(PhiFlexControl, { align: "center", justify: "space-between", gap: clientToken.paddingXS, children: [_jsxs(PhiTypographyControl, { type: "secondary", children: [modeLabel, ". Shared by the Header, Sider and Footer Regions. Content and Hero never take it, and a Region that authors its own Background or Effect paints over it."] }), _jsxs(PhiFlexControl, { align: "center", gap: clientToken.paddingXXS, style: { flexShrink: 0 }, children: [_jsx(PhiBrandBlockResetButton, { disabled: state.draft.root?.chrome?.[mode] == null, blockTitle: composition.ground.title, onReset: () => publishDraft(clearThemeRootSurface(state.draft, "chrome", mode)) }), _jsx(PhiBrandCopyModeButton, { mode: mode, disabled: isSamePhiBackgroundConfig(chromeOverlay, otherChromeOverlay), onCopy: () => publishDraft(mergeThemeRootSurface(state.draft, "chrome", otherMode, chromeOverlay)) })] })] }), _jsx(PhiBackgroundControl, { value: chromeOverlay, motionModes: PHI_SHELL_CHROME_OVERLAY_MOTION_MODES, filters: PHI_SHELL_CHROME_OVERLAY_FILTERS, baseKinds: PHI_SHELL_CHROME_OVERLAY_BASE_KINDS, imageSourceKinds: PHI_SHELL_CHROME_OVERLAY_IMAGE_SOURCE_KINDS, renderMediaPicker: renderPhiThemeRootBackgroundMediaPicker, editTransaction: editTransaction, onChange: (value) => publishDraft(mergeThemeRootSurface(state.draft, "chrome", mode, value)) }, `chrome-${mode}`)] })),
+                            children: (_jsxs(PhiFlexControl, { vertical: true, gap: clientToken.paddingXS, children: [_jsxs(PhiFlexControl, { align: "center", justify: "space-between", gap: clientToken.paddingXS, children: [_jsxs(PhiTypographyControl, { type: "secondary", children: [modeLabel, ". Shared by the Header, Sider and Footer Regions. Content and Hero never take it, and a Region that authors its own Background or Effect paints over it."] }), _jsxs(PhiFlexControl, { vertical: true, align: "stretch", gap: clientToken.paddingXXS, style: { flexShrink: 0 }, children: [_jsx(PhiBrandBlockResetButton, { disabled: state.draft.root?.chrome?.[mode] == null, blockTitle: composition.ground.title, onReset: () => publishDraft(clearThemeRootSurface(state.draft, "chrome", mode)) }), _jsx(PhiBrandCopyModeButton, { mode: mode, disabled: isSamePhiBackgroundConfig(chromeOverlay, otherChromeOverlay), onCopy: () => publishDraft(mergeThemeRootSurface(state.draft, "chrome", otherMode, chromeOverlay)) })] })] }), _jsx(PhiBackgroundControl, { value: chromeOverlay, motionModes: PHI_SHELL_CHROME_OVERLAY_MOTION_MODES, filters: PHI_SHELL_CHROME_OVERLAY_FILTERS, baseKinds: PHI_SHELL_CHROME_OVERLAY_BASE_KINDS, imageSourceKinds: PHI_SHELL_CHROME_OVERLAY_IMAGE_SOURCE_KINDS, renderMediaPicker: renderPhiThemeRootBackgroundMediaPicker, editTransaction: editTransaction, onChange: (value) => publishDraft(mergeThemeRootSurface(state.draft, "chrome", mode, value)) }, `chrome-${mode}`)] })),
                         },
                         {
                             key: "shadow",
@@ -1642,7 +1689,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 +1716,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 +1731,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 +1768,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 +1782,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 +1855,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 +1895,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 +1927,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;
 };