@phis/ui 0.2.0 → 0.3.0

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

@@ -1,17 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ConfigProvider, theme as antdTheme } from "antd";
-import { DeleteOutlined } from "@ant-design/icons";
+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 { usePhiApplicationFeedback } from "../../../../../components/runtime/use-phi-application-feedback";
 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";
-import { createPhiCoreRuntimeControllerAddress } from "../../../../../components/runtime/core-runtime-controller-address";
-import { PHI_DEFAULT_THEME_PRESET_KEY, PHI_DEFAULT_THEME_PRESET_VERSION, PHI_THEME_CUSTOM_COLOR_KEYS, isPhiThemePaletteModeSeedKey, mergePhiThemePalettes, resolvePhiThemeColorTokens, resolvePhiThemePresetPlugin, } from "../../../../../theme/phi-theme-presets";
-import { buildPhiThemeCustomColorPalette, resolvePhiThemePaletteCustomColors, resolvePhiThemePresetCustomColors, } from "../../../../../theme/phi-theme-palette";
+import { PHI_THEME_CUSTOM_COLOR_KEYS, isPhiThemePaletteModeSeedKey, mergePhiThemePalettes, resolvePhiThemeColorTokens, } from "../../../../../theme/phi-theme-presets";
+import { buildPhiThemeCustomColorPalette, resolvePhiThemePaletteCustomColors } from "../../../../../theme/phi-theme-palette";
 import { usePhiConfig } from "../../../../../components/root/phi-config-provider";
 import { usePhiThemeBlockCatalog } from "../../../../../components/root/phi-theme-block-catalog-provider";
 import { resolvePhiThemeComposition, resolvePhiThemeEffectiveLogo, resolvePhiThemeEffectiveFonts, resolvePhiThemeEffectiveRoot, } from "../../../../../theme/phi-theme-composition";
@@ -19,23 +15,21 @@ import { usePhiSiteFontAssets } from "../../../../../components/media/phi-site-f
 import { buildPhiFontFaceCss, buildPhiFontFamilyStack } from "../../../../../theme/phi-font-face";
 import { PHI_THEME_HEADING_FONT_VARIABLE, readPhiThemeHeadingFont, resolvePhiThemeHeadingFontFamily, } from "../../../../../theme/phi-theme-typography";
 import { resolvePhiThemeRuntimePayload } from "../../../../../theme/phi-theme-runtime";
-import { materializePhiThemeBrandLogo, materializePhiThemeModuleBlocks } from "../../materialize-images";
-import { createPhiAntdThemeCssVarKey, resolvePhiAntdAliasTokens, } from "../../../../../theme/phi-antd-token-resolver";
-import { buildPhiThemeStructuralTokens, } from "../../../../../theme/phi-theme";
-import { buildPhiSiteThemeSelectOptions, createPhiSiteThemeSelectionValue, createPhiThemeDerivation, ensurePhiThemeDerivation, readPhiSiteThemeSelectionState, resolvePhiThemeSelectionValue, } from "../../../../../theme/phi-theme-selection";
-import { PHI_CONTROL_HEIGHTS, PHI_PADDING, PHI_RADII } from "../../../../../theme/phi-tokens";
-import { PHI_COLOR_PICKER_NEUTRAL_PRESETS, PHI_COLOR_PICKER_PRESETS, } from "../../../../../components/widgets/config/color-picker-presets";
+import { resolvePhiAntdAliasTokens } from "../../../../../theme/phi-antd-token-resolver";
+import { buildPhiThemeStructuralTokens } from "../../../../../theme/phi-theme";
+import { PHI_CONTROL_HEIGHTS, PHI_PADDING, PHI_RADII, } from "../../../../../theme/phi-tokens";
+import { PHI_COLOR_PICKER_NEUTRAL_PRESETS, PHI_COLOR_PICKER_PRESETS } from "../../../../../components/widgets/config/color-picker-presets";
 import { PHI_SPACING_TOKEN_KEYS } from "../../../../../components/widgets/config/spacing-options";
 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_MOTION_MODES, resolvePhiRootBackgroundPaintStyle, } from "../../../../../components/root/phi-root-background";
-import { PHI_SHELL_CHROME_OVERLAY_BASE_KINDS, PHI_SHELL_CHROME_OVERLAY_EFFECTS, 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 { 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";
 import { PHI_MEDIA_WIDGET_DEFAULT_LABELS } from "../../../../../components/media/media-widget-labels";
 import { PHI_SEARCH_WIDGET_DEFAULT_LABELS } from "../../../../../components/widgets/label-types/search";
-import { buildPhiMediaAssetContentDeliveryUrl, PhiMediaAssetFlags, PhiMediaKind } from "../../../../../constants/media";
+import { buildPhiMediaAssetContentDeliveryUrl, PhiMediaAssetFlags, PhiMediaKind, } from "../../../../../constants/media";
 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";
@@ -49,9 +43,6 @@ import { PHI_AUTHORING_OPTION_PROVIDER_KEYS } from "../../../../../constants/aut
 import { PhiShadowControl } from "../../../../../components/controls/phi-shadow-control";
 import { PhiIcon } from "../../../../../components/shell/phi-icon";
 import { PhiIconPickerControl } from "../../../../../components/controls/phi-icon-picker-control";
-import { createPhiHistoryStore } from "../../../../../components/state/history-store";
-import { createPhiCommandToolbarControlAddress } from "../../../../../components/widgets/signals/command-toolbar-address";
-import { PHI_THEME_RUNTIME_MODULE_ID } from "../../../../../plugins/runtime-modules/theme/ids";
 import { PhiTableControl } from "../../../../../components/controls/phi-table-control";
 import { PhiSegmentedControl } from "../../../../../components/controls/phi-segmented-control";
 import { applyPhiButtonShadowComponentTokens, isPhiButtonShadowStep, } from "../../../../../theme/phi-button-shadow";
@@ -61,13 +52,14 @@ import { PhiSwitchControl } from "../../../../../components/controls/phi-switch-
 import { PhiTagControl } from "../../../../../components/controls/phi-tag-control";
 import { PHI_CONTROL_SHAPES, applyPhiControlShapeComponentTokens, applyPhiSurfaceShapeComponentTokens, buildPhiControlShapeCssVars, PHI_SURFACE_SHAPE_CSS_VAR, resolvePhiSurfaceShapeRadius, createPhiControlShapeCorners, readPhiControlShapeCorners, resolvePhiControlShape, resolvePhiUniformControlShape, } from "../../../../../theme/phi-control-shape";
 import { PhiAccordionControl } from "../../../../../components/controls/phi-accordion-control";
+import { PhiAlertControl } from "../../../../../components/controls/phi-alert-control";
 import { PhiCardControl } from "../../../../../components/controls/phi-card-control";
+import { PhiThemeScopeControl } from "../../../../../components/controls/phi-theme-scope-control";
 import { PhiFlexControl } from "../../../../../components/controls/phi-flex-control";
 import { PhiTypographyControl } from "../../../../../components/controls/phi-typography-control";
 import { PhiDividerControl } from "../../../../../components/controls/phi-divider-control";
 import { PhiStatisticControl } from "../../../../../components/controls/phi-statistic-control";
-const phiThemeHistory = createPhiHistoryStore("@phis/ui/theme-history");
-const DEFAULT_THEME_KEY = "default";
+import { DEFAULT_THEME_KEY, omitThemeFields, resolveThemeKey, normalizeTheme, resolveInitialTheme, clearThemeControlShape, resolveThemePayloadPreset, applyThemePreset, createInitialBrandThemeState, clearThemeAuthoredGround, } from "../../brand-theme-model";
 const PHI_THEME_CHROME_SHADOW_EDGES = [
     { family: "header", label: "Header, downwards onto the Page" },
     { family: "sider", label: "Sider, outwards at its outer edge" },
@@ -277,10 +269,6 @@ const BRAND_THEME_COLOR_SECTION_KEYS = [
     "custom",
     ...THEME_COLOR_SEED_SECTIONS.map((section) => section.key),
 ];
-/** The record without the named fields, for the places where a part of the Theme is handed back to its block. */
-function omitThemeFields(theme, ...fields) {
-    return Object.fromEntries(Object.entries(theme).filter(([key]) => !fields.includes(key)));
-}
 /**
  * The Site's palette written back with empty containers dropped, so a Theme whose author cleared their
  * last colour owns nothing again and follows its palette block outright. An absent `palette` and an
@@ -346,27 +334,6 @@ function omitThemeColorOverride(theme, tokenKey, mode) {
         overrides: Object.fromEntries(Object.entries(current.overrides ?? {}).filter(([key]) => key !== tokenKey)),
     }));
 }
-function resolveThemeKey(config) {
-    return config?.themeKey?.trim() || DEFAULT_THEME_KEY;
-}
-function normalizeTheme(input, fallback) {
-    if (!input || typeof input !== "object" || Array.isArray(input)) {
-        return fallback;
-    }
-    return input;
-}
-/**
- * A fresh draft names its blocks and owns nothing: the proportions come from the style block at
- * resolve time, the colour from the palette block, and nothing is copied in that a reset would later
- * have to know how to take away.
- */
-function resolveInitialTheme(runtime) {
-    return normalizeTheme(runtime.site.theme, {
-        mode: "light",
-        preset: PHI_DEFAULT_THEME_PRESET_KEY,
-        presetVersion: PHI_DEFAULT_THEME_PRESET_VERSION,
-    });
-}
 function readThemeButtonShadowChoice(theme, kind) {
     const step = theme.buttons?.shadow?.[kind];
     return isPhiButtonShadowStep(step) ? step : "theme";
@@ -410,9 +377,7 @@ function mergeThemeFontSlot(theme, slot, family) {
         fonts[slot] = family;
     else
         delete fonts[slot];
-    return Object.keys(fonts).length > 0
-        ? { ...theme, fonts }
-        : Object.fromEntries(Object.entries(theme).filter(([key]) => key !== "fonts"));
+    return Object.keys(fonts).length > 0 ? { ...theme, fonts } : omitThemeFields(theme, "fonts");
 }
 /**
  * The heading font chosen, or handed back to the body font by removing it.
@@ -426,9 +391,7 @@ function mergeThemeHeadingFont(theme, heading) {
         delete typography.headings;
     else
         typography.headings = heading;
-    return Object.keys(typography).length > 0
-        ? { ...theme, typography }
-        : Object.fromEntries(Object.entries(theme).filter(([key]) => key !== "typography"));
+    return Object.keys(typography).length > 0 ? { ...theme, typography } : omitThemeFields(theme, "typography");
 }
 function mergeThemeControlShape(theme, controls) {
     return {
@@ -480,13 +443,6 @@ function clearThemeShapeScale(theme) {
         style: { ...(theme.style ?? {}), token },
     };
 }
-function clearThemeControlShape(theme) {
-    const shape = Object.fromEntries(Object.entries(theme.shape ?? {}).filter(([key]) => key !== "controls"));
-    return Object.keys(shape).length > 0 ? { ...theme, shape } : omitThemeFields(theme, "shape");
-}
-function resolveThemePayloadPreset(theme, presets) {
-    return resolvePhiThemePresetPlugin(presets, theme.preset);
-}
 function resolveThemePayloadMode(theme) {
     return theme.mode === "dark" ? "dark" : "light";
 }
@@ -503,26 +459,6 @@ function mergeThemeCustomColors(theme, colorPatch, mode) {
         customColors: { ...(current.customColors ?? {}), ...colorPatch },
     }));
 }
-/**
- * Picking a palette block drops the author's own palette, exactly as picking a ground or a style drops
- * theirs: somebody choosing another palette means to see it, and their seeds laid over it would hide
- * the very thing they asked for.
- */
-function applyThemePreset(theme, preset) {
-    return {
-        ...omitThemeFields(theme, "palette"),
-        preset: preset.key,
-        presetVersion: preset.version,
-    };
-}
-/** Back to the blocks alone: the palette, the proportions, the Button shadows and the component overrides all go. */
-function resetThemeToPreset(theme, presets, preset = resolveThemePayloadPreset(theme, presets)) {
-    return {
-        ...omitThemeFields(theme, "palette", "style", "buttons", "components"),
-        preset: preset.key,
-        presetVersion: preset.version,
-    };
-}
 function stripEmptyTokenValues(token) {
     return Object.fromEntries(Object.entries(token).filter(([, value]) => value !== undefined && value !== null && value !== ""));
 }
@@ -544,14 +480,6 @@ function countThemePaletteLeaves(palette) {
         Object.keys(mode?.overrides ?? {}).length +
         Object.keys(mode?.customColors ?? {}).length, Object.keys(palette?.seed ?? {}).length);
 }
-function readTokenColor(token, key, fallback) {
-    const value = token[key];
-    return typeof value === "string" && value.trim() ? value : fallback;
-}
-function readComputedTokenColor(token, key, fallback) {
-    const value = token[key];
-    return typeof value === "string" && value.trim() ? value : fallback;
-}
 function readEffectiveTokenString(token, key, fallback) {
     const value = token[key];
     return typeof value === "string" && value.trim() ? value : fallback;
@@ -571,18 +499,6 @@ function readEffectiveTokenBoolean(token, key, fallback) {
     const value = token[key];
     return typeof value === "boolean" ? value : fallback;
 }
-function buildThemeReviewRoutePath(area) {
-    return area === "public" ? "/public" : `/${area}`;
-}
-function buildThemeReviewHref({ area, revisionId, themeKey, }) {
-    const url = new URL(buildThemeReviewRoutePath(area), window.location.origin);
-    url.searchParams.set("reviewKind", "theme");
-    url.searchParams.set("reviewRevision", String(revisionId));
-    url.searchParams.set("reviewArea", area);
-    url.searchParams.set("reviewPage", "/");
-    url.searchParams.set("reviewThemeKey", themeKey);
-    return `${url.pathname}${url.search}`;
-}
 /*
  * One route set per purpose: the preview swatch and the image field each open their own picker.
  *
@@ -614,13 +530,14 @@ const renderPhiThemeRootBackgroundMediaPicker = function renderPhiThemeRootBackg
             signalRoutes: PHI_THEME_ROOT_BACKGROUND_MEDIA_ROUTES[props.purpose],
         }, labels: PHI_MEDIA_WIDGET_DEFAULT_LABELS, searchLabels: PHI_SEARCH_WIDGET_DEFAULT_LABELS, value: props.value, open: props.open, trigger: props.trigger, onOpenChange: props.onOpenChange, onCommit: props.onCommit, onDiscard: props.onDiscard, onAssetSelect: props.onAssetSelect, onAssetClear: props.onAssetClear }));
 };
-function mergeThemeRootBackground(theme, mode, value) {
+/** The Theme root's ground (`background`) or its chrome overlay (`chrome`) for one colour mode. */
+function mergeThemeRootSurface(theme, surface, mode, value) {
     return {
         ...theme,
         root: {
             ...(theme.root ?? {}),
-            background: {
-                ...(theme.root?.background ?? {}),
+            [surface]: {
+                ...(theme.root?.[surface] ?? {}),
                 [mode]: value,
             },
         },
@@ -641,18 +558,6 @@ function mergeThemeChromeShadow(theme, family, value) {
         },
     };
 }
-function mergeThemeChromeOverlay(theme, mode, value) {
-    return {
-        ...theme,
-        root: {
-            ...(theme.root ?? {}),
-            chrome: {
-                ...(theme.root?.chrome ?? {}),
-                [mode]: value,
-            },
-        },
-    };
-}
 /**
  * A patch on the Brand block, with the empties taken back out.
  *
@@ -722,22 +627,29 @@ function mergeThemeBrandLogo(theme, mode, logo) {
  * like it did nothing but reopen the first part. Only a list that is blank all through clears the
  * Wordmark, which is what hands the Site's own name back to the fallback.
  */
+/**
+ * One change to the Wordmark, and the record kept clean: a field set to nothing leaves it, and a
+ * Wordmark with nothing left in it goes. Weight, slant and tracking used to stay behind as `null`
+ * inside the record, which `mergeThemeBrand` only cleans one level up.
+ */
+function mergeThemeWordmark(theme, patch) {
+    const wordmark = { ...(theme.brand?.wordmark ?? {}), ...patch };
+    for (const [key, value] of Object.entries(wordmark)) {
+        if (value == null || value === "")
+            delete wordmark[key];
+    }
+    return mergeThemeBrand(theme, {
+        wordmark: Object.keys(wordmark).length > 0 ? wordmark : null,
+    });
+}
 function mergeThemeWordmarkParts(theme, parts) {
     const hasText = parts.some((part) => part.text.trim());
-    const wordmark = theme.brand?.wordmark ?? {};
-    if (hasText) {
-        return mergeThemeBrand(theme, {
-            wordmark: { ...wordmark, parts: parts.map((part) => ({ ...part })) },
-        });
-    }
     /*
-     * Clearing the text hands the Site's name back to the fallback -- unless the Brand has said it draws
-     * no name, which is a decision about the Wordmark and not about its parts. Dropping the whole record
-     * here would switch the name back on the moment somebody emptied the last part.
+     * Clearing the text hands the Site's name back to the fallback, and takes only the text: the weight,
+     * slant, tracking and font somebody chose -- and a decision to draw no name at all -- are about the
+     * Wordmark, not about its parts, and used to go with the last character.
      */
-    return mergeThemeBrand(theme, {
-        wordmark: wordmark.shows === "none" ? { shows: "none" } : null,
-    });
+    return mergeThemeWordmark(theme, { parts: hasText ? parts.map((part) => ({ ...part })) : null });
 }
 /** Whether the Brand draws a name at all. Off is stated; on is simply the Wordmark without the word. */
 function mergeThemeWordmarkShows(theme, shows) {
@@ -756,103 +668,6 @@ function mergeThemeWordmarkShows(theme, shows) {
         wordmark: Object.keys(rest).length > 0 ? rest : null,
     });
 }
-/**
- * What a Widget knows before the Controller has told it anything: the theme the Site was rendered with.
- *
- * It used to consult a module variable the Widgets kept between them, because a Widget mounting late
- * had no other way to learn about an unsaved draft. That variable answered for the browser tab, while
- * the draft belongs to the Area the Controller is mounted in -- so it was right by coincidence and
- * silently wrong wherever the two differed. A Widget asks now, and this is only the starting point.
- */
-function createInitialBrandThemeState(themeKey, fallbackTheme) {
-    return {
-        key: themeKey,
-        published: fallbackTheme,
-        draft: fallbackTheme,
-        revisionId: null,
-        hasPublishedThemeRevision: false,
-        publishedRevisionId: null,
-    };
-}
-function isSameThemePayload(left, right) {
-    return JSON.stringify(left) === JSON.stringify(right);
-}
-/*
- * `correlationId` is the exchange this state belongs to: the command that saved, published or reset,
- * or the draft another Widget asked the Controller to take. It is absent only where the Controller
- * announces the state it loaded on arrival, which begins one.
- */
-function emitThemeState(dispatchSignal, theme, revisionId, selectionValue, draftStatus = "draft", correlationId) {
-    const sender = createPhiThemeControllerAddress();
-    const receiver = "broadcast";
-    dispatchSignal({
-        scope: "area",
-        channel: PHI_THEME_SIGNAL_CHANNELS.brandTheme,
-        action: "change",
-        value: {
-            theme,
-            revisionId,
-            draftStatus,
-            themeKey: DEFAULT_THEME_KEY,
-        },
-        valueType: "json",
-        valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.brandTheme,
-        sender,
-        receiver,
-        correlationId,
-        timestamp: Date.now(),
-    });
-    dispatchSignal({
-        scope: "area",
-        channel: PHI_THEME_SIGNAL_CHANNELS.presetSelect,
-        action: "change",
-        value: selectionValue,
-        valueType: "string",
-        sender,
-        receiver,
-        correlationId,
-        timestamp: Date.now(),
-    });
-}
-/**
- * The draft's state in the words every draft keeper uses (`PhiDraftStatusSignalValue`), for the Core
- * Draft Status Widget: broadcast when it changes, or addressed to the one Widget that asked on mount.
- */
-function emitThemeDraftStatus(dispatchSignal, receiver, value, correlationId) {
-    dispatchSignal({
-        scope: "area",
-        channel: PHI_THEME_SIGNAL_CHANNELS.draftStatus,
-        action: "change",
-        value: { ...value, themeKey: DEFAULT_THEME_KEY },
-        valueType: "json",
-        valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.revisionsDraftStatus,
-        sender: createPhiThemeControllerAddress(),
-        receiver,
-        correlationId,
-        timestamp: Date.now(),
-    });
-}
-/**
- * The Set select's options, stated again for a stored Theme that changed.
- *
- * The Site Theme entry names the Set the stored Theme was derived from, and a save or a publish is a
- * new stored Theme. The whole list goes out, because that is what the select takes; the Sets come from
- * the server, where the active Modules are known.
- */
-function emitThemeSelectOptions(dispatchSignal, options, correlationId) {
-    dispatchSignal({
-        scope: "area",
-        channel: PHI_THEME_SIGNAL_CHANNELS.presetOptions,
-        action: "change",
-        value: { options: options.map((option) => ({ ...option })) },
-        valueType: "json",
-        valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.controlOptions,
-        sender: createPhiThemeControllerAddress(),
-        receiver: "broadcast",
-        correlationId,
-        timestamp: Date.now(),
-    });
-}
 /**
  * "Publish what you are holding" -- the question a Widget asks the Controller when it mounts.
  *
@@ -878,28 +693,6 @@ function emitThemeHydrateRequest(dispatchSignal, sender) {
         timestamp: Date.now(),
     });
 }
-/**
- * The reply, addressed to the one Widget that asked.
- *
- * Deliberately not `emitThemeState`. That one announces a change everybody is affected by, and says
- * three things -- the theme, the draft status, the selected preset -- because all three moved. Nothing
- * moved here: one Widget arrived late and needs catching up, so a broadcast would set the state of
- * Widgets that already had it, under the correlation of a mount they had no part in.
- */
-function emitThemeStateTo(dispatchSignal, receiver, theme, revisionId, draftStatus, correlationId) {
-    dispatchSignal({
-        scope: "area",
-        channel: PHI_THEME_SIGNAL_CHANNELS.brandTheme,
-        action: "change",
-        value: { theme, revisionId, draftStatus, themeKey: DEFAULT_THEME_KEY },
-        valueType: "json",
-        valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.brandTheme,
-        sender: createPhiThemeControllerAddress(),
-        receiver,
-        correlationId,
-        timestamp: Date.now(),
-    });
-}
 function emitThemeDraftRequest(dispatchSignal, theme, revisionId, edit) {
     dispatchSignal({
         scope: "area",
@@ -919,48 +712,6 @@ function emitThemeDraftRequest(dispatchSignal, theme, revisionId, edit) {
         timestamp: Date.now(),
     });
 }
-function emitRootThemeState(dispatchSignal, theme, correlationId) {
-    dispatchSignal({
-        scope: "site",
-        channel: "theme",
-        action: "change",
-        value: theme,
-        valueType: "json",
-        valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.runtimeTheme,
-        sender: createPhiThemeControllerAddress(),
-        receiver: createPhiCoreRuntimeControllerAddress(),
-        correlationId,
-        timestamp: Date.now(),
-    });
-}
-/**
- * The Page, asked again for the Theme it now has.
- *
- * Publishing moves what the server renders from, and almost none of that is in this Widget's hands.
- * The Root layout reads the Site's Theme once per server render and hands the whole of it down --
- * fonts, the root background, the Brand's pictures -- and the Builder page around this Widget was
- * measured with the shell heights of the Theme that stood before. The broadcast beside this one
- * reaches the Theme Widgets on this page and nothing above them, and the preview signal only paints
- * the draft; so without this, what was published is visible on the next navigation and not before.
- *
- * `reload` at the Core Runtime's address is the Site's one way of saying it: the always-mounted
- * adapter answers with `router.refresh()`, which re-renders the route's Server components and leaves
- * the operator on the panel they had open (components/runtime/core-runtime-application-adapter.tsx).
- * A document reload would close it.
- */
-function emitRootReload(dispatchSignal, correlationId) {
-    dispatchSignal({
-        scope: "site",
-        channel: "reload",
-        action: "activate",
-        value: null,
-        valueType: "none",
-        sender: createPhiThemeControllerAddress(),
-        receiver: createPhiCoreRuntimeControllerAddress(),
-        correlationId,
-        timestamp: Date.now(),
-    });
-}
 /**
  * The draft, for a Widget that edits it but does not own it.
  *
@@ -1044,502 +795,33 @@ function usePhiBrandThemeDraft(runtime, themeKey) {
     }, undefined, selfAddress);
     return { state, draftRef, publishDraft, pickerTransaction, editTransaction };
 }
+/*
+ * The mode the preview switch last said, kept beside the panels rather than in them. The switch speaks
+ * only when it changes, and the panels sit in a Stack that remounts them on every tab change, so a
+ * panel opened after the switch went dark started light again while the switch still read "Dark".
+ */
+let phiBrandPreviewModeHeard = null;
+const phiBrandPreviewModeListeners = new Set();
+function subscribePhiBrandPreviewMode(listener) {
+    phiBrandPreviewModeListeners.add(listener);
+    return () => {
+        phiBrandPreviewModeListeners.delete(listener);
+    };
+}
 function usePhiBrandPreviewMode(initialMode) {
-    const [mode, setMode] = useState(initialMode);
+    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") {
-            setMode(signal.value === true ? "dark" : "light");
+            phiBrandPreviewModeHeard = signal.value === true ? "dark" : "light";
+            for (const listener of phiBrandPreviewModeListeners)
+                listener();
         }
     });
-    return mode;
-}
-export function PhiBuilderBrandThemeControllerWidgetClient({ runtime, config, setOptions, }) {
-    const dispatchSignal = usePhiSignalDispatcher();
-    const { showMessage } = usePhiApplicationFeedback();
-    const { presets: themePresets } = usePhiConfig();
-    const themeBlocks = usePhiThemeBlockCatalog();
-    const themeKey = resolveThemeKey(config);
-    const siteKey = runtime.site.key;
-    const historyScope = `theme:${siteKey}:${themeKey}`;
-    const reviewArea = config?.reviewArea ?? (runtime.area === "builder" ? "public" : runtime.area);
-    const fallbackTheme = useMemo(() => resolveInitialTheme(runtime), [runtime]);
-    const initialState = useMemo(() => createInitialBrandThemeState(themeKey, fallbackTheme), [fallbackTheme, themeKey]);
-    const [state, setState] = useState(initialState);
-    const stateRef = useRef(initialState);
-    /*
-     * The Theme being worked on -- the Draft entry of the Set select. Trying on a Set or the Published
-     * Theme leaves it alone, so picking Draft again takes the try-on back; any edit moves it.
-     */
-    const siteThemeRef = useRef(initialState.draft);
-    /* The options last sent, so a draft that changes nothing in the select does not send them again. */
-    const sentSelectOptionsRef = useRef(null);
-    /* The draft a picker edit started from, while one is open; see `PhiThemeDraftEdit`. */
-    const pickerEditBeforeRef = useRef(null);
-    const [saving, setSaving] = useState(false);
-    /*
-     * The Theme as it is stored -- the saved draft, or the published Theme where no draft stands -- and
-     * why it could not be read, if it could not. What is on screen differing from it is `unsaved`.
-     */
-    const savedThemeRef = useRef(initialState.draft);
-    const readErrorRef = useRef(null);
-    const resolveDraftStatus = useCallback(() => {
-        const current = stateRef.current;
-        const subject = `theme/${themeKey}`;
-        if (readErrorRef.current !== null) {
-            return { status: "error", revisionId: null, subject, error: readErrorRef.current };
-        }
-        if (!isSameThemePayload(current.draft, savedThemeRef.current)) {
-            return { status: "unsaved", revisionId: current.revisionId, subject };
-        }
-        return current.revisionId != null
-            ? { status: "draft", revisionId: current.revisionId, subject }
-            : { status: "published", revisionId: null, subject };
-    }, [themeKey]);
-    const announceDraftStatus = useCallback((correlationId) => {
-        emitThemeDraftStatus(dispatchSignal, "broadcast", resolveDraftStatus(), correlationId);
-    }, [dispatchSignal, resolveDraftStatus]);
-    /*
-     * A draft exists once one was saved, or once the Theme being worked on is no longer the published one.
-     * Undoing back to the published Theme takes an unsaved draft away again.
-     */
-    const hasDraft = useCallback(() => {
-        const current = stateRef.current;
-        return current.revisionId != null || !isSameThemePayload(siteThemeRef.current, current.published);
-    }, []);
-    const resolveSelectionValue = useCallback(() => resolvePhiThemeSelectionValue(siteKey, {
-        published: stateRef.current.hasPublishedThemeRevision,
-        draft: hasDraft(),
-    }), [hasDraft, siteKey]);
-    const emitSelectOptions = useCallback((correlationId) => {
-        const current = stateRef.current;
-        const options = [
-            ...buildPhiSiteThemeSelectOptions({
-                siteKey,
-                published: current.hasPublishedThemeRevision
-                    ? { theme: current.published, revisionId: current.publishedRevisionId }
-                    : null,
-                draft: hasDraft() ? { theme: siteThemeRef.current, revisionId: current.revisionId } : null,
-            }),
-            ...setOptions,
-        ];
-        const serialized = JSON.stringify(options);
-        if (serialized === sentSelectOptionsRef.current) {
-            return;
-        }
-        sentSelectOptionsRef.current = serialized;
-        emitThemeSelectOptions(dispatchSignal, options, correlationId);
-    }, [dispatchSignal, hasDraft, setOptions, siteKey]);
-    /*
-     * Every draft states the Set it was derived from. A Theme that never named one gets the core Set on
-     * its first draft, so the Draft entry is never without a name.
-     */
-    const publishDraft = useCallback((draftTheme, options) => {
-        const nextTheme = ensurePhiThemeDerivation(draftTheme);
-        const current = stateRef.current;
-        if (options?.history !== false && !isSameThemePayload(current.draft, nextTheme)) {
-            phiThemeHistory.record(historyScope, {
-                label: "Update theme",
-                before: current.draft,
-                after: nextTheme,
-            });
-        }
-        const nextState = {
-            ...current,
-            draft: nextTheme,
-        };
-        stateRef.current = nextState;
-        if (options?.updateSiteSnapshot !== false) {
-            siteThemeRef.current = nextTheme;
-        }
-        setState(nextState);
-        emitThemeState(dispatchSignal, nextTheme, nextState.revisionId, options?.selectionValue ?? resolveSelectionValue(), "draft", options?.correlationId);
-        announceDraftStatus(options?.correlationId);
-        emitSelectOptions(options?.correlationId);
-    }, [announceDraftStatus, dispatchSignal, emitSelectOptions, historyScope, resolveSelectionValue]);
-    useEffect(() => {
-        const emitAvailability = () => {
-            const availability = phiThemeHistory.getAvailability(historyScope);
-            for (const [controlKey, enabled] of [
-                ["undo", availability.canUndo],
-                ["redo", availability.canRedo],
-            ]) {
-                dispatchSignal({
-                    scope: "area",
-                    channel: "enabled",
-                    action: "change",
-                    value: enabled,
-                    valueType: "boolean",
-                    sender: createPhiThemeControllerAddress(),
-                    receiver: createPhiCommandToolbarControlAddress(PHI_THEME_RUNTIME_MODULE_ID, "builder-theme-page", controlKey),
-                    timestamp: Date.now(),
-                });
-            }
-        };
-        emitAvailability();
-        return phiThemeHistory.subscribe(historyScope, emitAvailability);
-    }, [dispatchSignal, historyScope]);
-    useEffect(() => {
-        let cancelled = false;
-        void fetch(`/api/site/cms/theme?key=${encodeURIComponent(themeKey)}`, {
-            method: "GET",
-            cache: "no-store",
-        })
-            .then(async (response) => {
-            const body = (await response.json().catch(() => null));
-            if (!response.ok) {
-                throw new Error(body?.error ?? "Failed to read theme.");
-            }
-            if (cancelled) {
-                return;
-            }
-            const published = normalizeTheme(body?.published, fallbackTheme);
-            const draft = normalizeTheme(body?.draft?.theme?.theme, published);
-            const revisionId = typeof body?.draft?.revisionId === "number" && Number.isInteger(body.draft.revisionId)
-                ? body.draft.revisionId
-                : null;
-            const publishedRevisionId = typeof body?.publishedRevisionId === "number" && Number.isInteger(body.publishedRevisionId)
-                ? body.publishedRevisionId
-                : null;
-            const nextState = {
-                key: body?.key?.trim() || themeKey,
-                published,
-                draft,
-                revisionId,
-                hasPublishedThemeRevision: publishedRevisionId != null,
-                publishedRevisionId,
-            };
-            stateRef.current = nextState;
-            siteThemeRef.current = draft;
-            savedThemeRef.current = draft;
-            readErrorRef.current = null;
-            setState(nextState);
-            phiThemeHistory.clear(historyScope);
-            emitThemeState(dispatchSignal, draft, revisionId, resolveSelectionValue(), revisionId == null ? "published" : "draft");
-            announceDraftStatus();
-            emitSelectOptions();
-        })
-            .catch((error) => {
-            if (!cancelled) {
-                const message = error instanceof Error ? error.message : "Failed to read theme.";
-                readErrorRef.current = message;
-                announceDraftStatus();
-                showMessage({ level: "error", content: message });
-            }
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, [
-        announceDraftStatus,
-        dispatchSignal,
-        emitSelectOptions,
-        fallbackTheme,
-        historyScope,
-        resolveSelectionValue,
-        showMessage,
-        siteKey,
-        themeKey,
-    ]);
-    async function saveTheme(draftTheme = stateRef.current.draft, options) {
-        let nextTheme = ensurePhiThemeDerivation(draftTheme);
-        setSaving(true);
-        try {
-            const current = stateRef.current;
-            /*
-             * The blocks a Module brought become the Site's here, on the way to the server and nowhere else:
-             * its palette, its style tokens, and its ground -- background, Chrome and Shadow of both modes as
-             * values, every picture as a Site Asset. Following a block costs nothing; saving is what says
-             * somebody means to keep it, and a look somebody decided on must not depend on a package staying
-             * installed.
-             */
-            const materialized = await materializePhiThemeModuleBlocks(nextTheme, resolvePhiThemeComposition(nextTheme, themeBlocks));
-            /*
-             * The Logo is taken the same way, from every Set, core included: a Set offers it, and a Site that
-             * saved has decided to keep it -- as a picture in its own library, not as a data URL in its record.
-             */
-            nextTheme = await materializePhiThemeBrandLogo(materialized.theme, resolvePhiThemeComposition(materialized.theme, themeBlocks).markSet);
-            const response = await fetch("/api/site/cms/theme", {
-                method: "POST",
-                headers: {
-                    "content-type": "application/json",
-                },
-                body: JSON.stringify({
-                    key: current.key,
-                    theme: nextTheme,
-                    message: "Brand theme draft",
-                }),
-            });
-            const body = (await response.json().catch(() => null));
-            if (!response.ok) {
-                throw new Error(body?.error ?? "Failed to save theme draft.");
-            }
-            const revisionId = typeof body?.revisionId === "number" && Number.isInteger(body.revisionId) ? body.revisionId : null;
-            const savedTheme = normalizeTheme(body?.theme?.theme, nextTheme);
-            const nextState = {
-                ...stateRef.current,
-                draft: savedTheme,
-                revisionId,
-            };
-            stateRef.current = nextState;
-            siteThemeRef.current = savedTheme;
-            savedThemeRef.current = savedTheme;
-            setState(nextState);
-            emitThemeState(dispatchSignal, savedTheme, revisionId, resolveSelectionValue(), "draft", options?.correlationId);
-            announceDraftStatus(options?.correlationId);
-            emitSelectOptions(options?.correlationId);
-            if (options?.notify !== false) {
-                showMessage({ level: "success", content: "Saved theme draft." }, { correlationId: options?.correlationId ?? null });
-            }
-            return revisionId;
-        }
-        finally {
-            setSaving(false);
-        }
-    }
-    async function publishTheme(correlationId) {
-        const current = stateRef.current;
-        if (current.revisionId == null) {
-            throw new Error("No saved theme draft found to publish.");
-        }
-        const response = await fetch("/api/site/cms/theme/publish", {
-            method: "POST",
-            headers: {
-                "content-type": "application/json",
-            },
-            body: JSON.stringify({
-                key: current.key,
-                revisionId: current.revisionId,
-            }),
-        });
-        const body = (await response.json().catch(() => null));
-        if (!response.ok) {
-            throw new Error(body?.error ?? "Failed to publish theme.");
-        }
-        const published = normalizeTheme(body?.theme?.theme, current.draft);
-        const nextState = {
-            ...current,
-            published,
-            draft: published,
-            revisionId: null,
-            hasPublishedThemeRevision: true,
-            publishedRevisionId: current.revisionId,
-        };
-        stateRef.current = nextState;
-        siteThemeRef.current = published;
-        savedThemeRef.current = published;
-        setState(nextState);
-        emitThemeState(dispatchSignal, published, null, resolveSelectionValue(), "published", correlationId);
-        announceDraftStatus(correlationId);
-        emitSelectOptions(correlationId);
-        showMessage({ level: "success", content: "Published theme." }, { correlationId: correlationId ?? null });
-        emitRootReload(dispatchSignal, correlationId);
-    }
-    /*
-     * The Controller names the address it is addressed at, or the bus has nobody to deliver to.
-     *
-     * A signal is held until a listener answers for its receiver, and a listener answers only for an
-     * address it names. Every draft a Widget sent -- and every hydrate request -- was held here and
-     * never arrived, silently: the Widget rendered its own copy, so the controls looked right while the
-     * Controller knew nothing and the preview was never told.
-     */
-    usePhiSignalListener((signal) => {
-        if (signal.channel === PHI_THEME_SIGNAL_CHANNELS.brandTheme &&
-            signal.action === "change" &&
-            signal.receiver === createPhiThemeControllerAddress() &&
-            signal.sender !== createPhiThemeControllerAddress()) {
-            const value = signal.value && typeof signal.value === "object"
-                ? signal.value
-                : null;
-            const current = stateRef.current;
-            const nextTheme = normalizeTheme(value?.theme, current.draft);
-            const revisionId = typeof value?.revisionId === "number" && Number.isInteger(value.revisionId) ? value.revisionId : current.revisionId;
-            if (revisionId !== current.revisionId) {
-                stateRef.current = { ...current, revisionId };
-            }
-            const edit = value?.edit;
-            if (edit === "live") {
-                pickerEditBeforeRef.current ??= current.draft;
-                publishDraft(nextTheme, { history: false, correlationId: signal.correlationId });
-                return;
-            }
-            if (edit === "commit" || edit === "discard") {
-                const before = pickerEditBeforeRef.current;
-                pickerEditBeforeRef.current = null;
-                if (edit === "discard") {
-                    publishDraft(before ?? nextTheme, { history: false, correlationId: signal.correlationId });
-                    return;
-                }
-                publishDraft(nextTheme, { history: false, correlationId: signal.correlationId });
-                if (before && !isSameThemePayload(before, nextTheme)) {
-                    phiThemeHistory.record(historyScope, { label: "Update theme", before, after: nextTheme });
-                }
-                return;
-            }
-            pickerEditBeforeRef.current = null;
-            publishDraft(nextTheme, { correlationId: signal.correlationId });
-            return;
-        }
-        if (signal.scope === "area" &&
-            signal.receiver === createPhiThemeControllerAddress() &&
-            signal.channel === PHI_THEME_SIGNAL_CHANNELS.previewThemeMode &&
-            signal.action === "change" &&
-            signal.valueType === "boolean") {
-            const value = signal.value;
-            const nextMode = typeof value === "boolean" ? value ? "dark" : "light" : null;
-            if (!nextMode) {
-                return;
-            }
-            const current = stateRef.current;
-            const baseTheme = current.hasPublishedThemeRevision ? current.published : fallbackTheme;
-            const nextTheme = {
-                ...baseTheme,
-                mode: nextMode,
-            };
-            // Resolved here, where the catalogue is: the root applies what it receives and holds no blocks.
-            emitRootThemeState(dispatchSignal, resolvePhiThemeRuntimePayload(nextTheme, themeBlocks).theme, signal.correlationId);
-            return;
-        }
-        if (signal.channel === PHI_THEME_SIGNAL_CHANNELS.presetSelect) {
-            if (signal.scope === "area" &&
-                signal.action === "change" &&
-                signal.receiver === createPhiThemeControllerAddress() &&
-                typeof signal.value === "string" &&
-                signal.value.trim().length > 0) {
-                /*
-                 * Draft goes back to the Theme being worked on; Published is tried on the way a Set is -- it
-                 * replaces what is shown, the Draft entry keeps what was there, and only a save or an edit on
-                 * top makes it the draft. Both are one history entry.
-                 */
-                const siteState = readPhiSiteThemeSelectionState(signal.value, siteKey);
-                if (siteState) {
-                    const current = stateRef.current;
-                    if (siteState === "published" && !current.hasPublishedThemeRevision) {
-                        return;
-                    }
-                    const nextTheme = siteState === "draft" ? siteThemeRef.current : current.published;
-                    if (!isSameThemePayload(current.draft, nextTheme)) {
-                        publishDraft(nextTheme, {
-                            updateSiteSnapshot: false,
-                            correlationId: signal.correlationId,
-                            selectionValue: createPhiSiteThemeSelectionValue(siteKey, siteState),
-                        });
-                    }
-                    return;
-                }
-                /*
-                 * A Set is tried on, not taken: it decides all three parts and names itself as the derivation,
-                 * but the Site Theme entry keeps what was there before, so choosing it again takes the Set back.
-                 */
-                const set = themeBlocks.sets.find((candidate) => candidate.key === signal.value);
-                if (!set) {
-                    return;
-                }
-                const palette = themeBlocks.palettes.find((candidate) => candidate.key === set.palette);
-                const withSet = mergeThemeSetChoice(stateRef.current.draft, set);
-                const nextTheme = {
-                    ...(palette ? applyThemePreset(withSet, palette) : withSet),
-                    derivedFrom: createPhiThemeDerivation(set),
-                };
-                if (!isSameThemePayload(stateRef.current.draft, nextTheme)) {
-                    publishDraft(nextTheme, {
-                        updateSiteSnapshot: false,
-                        correlationId: signal.correlationId,
-                        selectionValue: set.key,
-                    });
-                }
-                return;
-            }
-            return;
-        }
-        /*
-         * A Draft Status Widget that mounted asks what stands; the answer goes to it alone, for the reason
-         * `emitThemeStateTo` gives. Answered whatever is in progress, because it is a question about state.
-         */
-        if (signal.scope === "area" &&
-            signal.channel === PHI_THEME_SIGNAL_CHANNELS.draftStatus &&
-            signal.action === "activate" &&
-            signal.receiver === createPhiThemeControllerAddress()) {
-            if (signal.sender != null) {
-                emitThemeDraftStatus(dispatchSignal, signal.sender, resolveDraftStatus(), signal.correlationId);
-            }
-            return;
-        }
-        if (signal.scope !== "area" ||
-            signal.channel !== PHI_THEME_SIGNAL_CHANNELS.command ||
-            signal.action !== "activate" ||
-            signal.valueType !== "string" ||
-            signal.receiver !== createPhiThemeControllerAddress()) {
-            return;
-        }
-        const commandValue = signal.value;
-        /*
-         * Answered before the saving guard: a Widget that mounts mid-save is asking what is there, which
-         * is a question about state and not a command that would compete with the save.
-         */
-        if (commandValue === "hydrate") {
-            const asker = signal.sender;
-            if (asker == null) {
-                return;
-            }
-            const current = stateRef.current;
-            emitThemeStateTo(dispatchSignal, asker, current.draft, current.revisionId, current.revisionId == null ? "published" : "draft", signal.correlationId);
-            return;
-        }
-        if (saving) {
-            return;
-        }
-        if (commandValue === "save") {
-            void saveTheme(undefined, { correlationId: signal.correlationId }).catch((error) => {
-                showMessage({ level: "error", content: error instanceof Error ? error.message : "Failed to save theme draft." }, { correlationId: signal.correlationId });
-            });
-            return;
-        }
-        if (commandValue === "publish") {
-            void publishTheme(signal.correlationId).catch((error) => {
-                showMessage({ level: "error", content: error instanceof Error ? error.message : "Failed to publish theme." }, { correlationId: signal.correlationId });
-            });
-            return;
-        }
-        if (commandValue === "preview") {
-            const revisionId = stateRef.current.revisionId;
-            if (!Number.isInteger(revisionId) || revisionId <= 0) {
-                showMessage({ level: "error", content: "No saved theme draft found. Save first before opening live preview." }, { correlationId: signal.correlationId });
-                return;
-            }
-            const href = buildThemeReviewHref({
-                area: reviewArea,
-                revisionId: revisionId,
-                themeKey: stateRef.current.key,
-            });
-            window.open(href, "_blank", "noopener,noreferrer");
-            return;
-        }
-        if (commandValue === "reset") {
-            const preset = resolveThemePayloadPreset(stateRef.current.draft, themePresets);
-            publishDraft(resetThemeToPreset(stateRef.current.draft, themePresets, preset), { correlationId: signal.correlationId });
-            showMessage({ level: "success", content: `Reset theme to ${preset.title}.` }, { correlationId: signal.correlationId });
-            return;
-        }
-        if (commandValue === "undo") {
-            pickerEditBeforeRef.current = null;
-            phiThemeHistory.undo(historyScope, (previous) => {
-                publishDraft(previous, { history: false, correlationId: signal.correlationId });
-            });
-            return;
-        }
-        if (commandValue === "redo") {
-            pickerEditBeforeRef.current = null;
-            phiThemeHistory.redo(historyScope, (next) => {
-                publishDraft(next, { history: false, correlationId: signal.correlationId });
-            });
-        }
-    }, undefined, createPhiThemeControllerAddress());
-    void state;
-    return null;
+    return heard ?? initialMode;
 }
 /**
  * The open section of a Theme panel, remembered for the session.
@@ -1708,35 +990,53 @@ export function PhiBuilderBrandThemeControlsWidgetClient({ runtime, config, colo
     const loading = false;
     const saving = false;
     const [activeColorSection, changeActiveColorSection] = usePhiBrandAccordionSection(BRAND_THEME_COLOR_COLLAPSE_STORAGE_KEY, BRAND_THEME_COLOR_SECTION_KEYS);
-    const themeComposition = resolvePhiThemeComposition(state.draft, themeBlocks);
-    const algorithm = previewMode === "dark" ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm;
-    const selectedPreset = resolveThemePayloadPreset(state.draft, themePresets);
-    /*
-     * What the tab shows is what the Site renders: the palette block with the draft's palette on top,
-     * resolved for the mode being edited. The seeds the author owns are the ones present in the draft's
-     * palette, shared or under this mode; the derived overrides live under this mode alone.
-     */
-    const colorToken = resolvePhiThemeColorTokens(selectedPreset, state.draft.palette, previewMode);
-    const ownPalette = state.draft.palette ?? {};
-    const ownOverrides = ownPalette.modes?.[previewMode]?.overrides ?? {};
     /*
-     * The same colour without the author's derived overrides: what a derived control falls back to, and
-     * what its "Reset override" hands back. Seeds stay in, so the algorithm derives from the author's seed.
+     * Everything the panel derives from the draft, derived once per draft and mode. The panel renders
+     * on every picker step and again on the Controller's echo of it, and each render used to resolve the
+     * colour tokens twice and the whole alias derivation on top -- for some seventy colour fields that
+     * then redrew. Kept until the draft, the mode, the blocks or the presets change.
      */
-    const baseColorToken = resolvePhiThemeColorTokens(selectedPreset, mergeThemePaletteMode(state.draft, previewMode, (current) => ({ ...current, overrides: {} })).palette, previewMode);
-    const customPalette = resolveThemeCustomPalette(state.draft, selectedPreset, previewMode);
-    const customColorOptions = PHI_THEME_CUSTOM_COLOR_KEYS.map((key, index) => ({
-        key,
-        label: `${colorPickerLabels?.custom ?? "Custom"} ${index + 1}`,
-        value: customPalette[key],
-    }));
-    const computedToken = antdTheme.getDesignToken({
-        algorithm,
-        token: {
+    const customLabel = colorPickerLabels?.custom ?? "Custom";
+    const { themeComposition, selectedPreset, colorToken, ownPalette, ownOverrides, customPalette, customColorOptions, computedToken, } = useMemo(() => {
+        const themeComposition = resolvePhiThemeComposition(state.draft, themeBlocks);
+        const selectedPreset = resolveThemePayloadPreset(state.draft, themePresets);
+        /*
+         * What the tab shows is what the Site renders: the palette block with the draft's palette on top,
+         * resolved for the mode being edited. The seeds the author owns are the ones present in the draft's
+         * palette, shared or under this mode; the derived overrides live under this mode alone.
+         */
+        const colorToken = resolvePhiThemeColorTokens(selectedPreset, state.draft.palette, previewMode);
+        const ownPalette = state.draft.palette ?? {};
+        const ownOverrides = ownPalette.modes?.[previewMode]?.overrides ?? {};
+        /*
+         * The same colour without the author's derived overrides: what a derived control falls back to, and
+         * what its "Reset override" hands back. Seeds stay in, so the algorithm derives from the author's
+         * seed.
+         */
+        const baseColorToken = resolvePhiThemeColorTokens(selectedPreset, mergeThemePaletteMode(state.draft, previewMode, (current) => ({ ...current, overrides: {} })).palette, previewMode);
+        const customPalette = resolveThemeCustomPalette(state.draft, selectedPreset, previewMode);
+        const customColorOptions = PHI_THEME_CUSTOM_COLOR_KEYS.map((key, index) => ({
+            key,
+            label: `${customLabel} ${index + 1}`,
+            value: customPalette[key],
+        }));
+        // What the algorithm derives for the mode being edited: the Foundation's resolver, which is the one
+        // the preview and the live render use too.
+        const computedToken = resolvePhiAntdAliasTokens(previewMode, {
             ...buildPhiEffectiveNonColorThemeTokens(state.draft),
             ...baseColorToken,
-        },
-    });
+        });
+        return {
+            themeComposition,
+            selectedPreset,
+            colorToken,
+            ownPalette,
+            ownOverrides,
+            customPalette,
+            customColorOptions,
+            computedToken,
+        };
+    }, [customLabel, previewMode, state.draft, themeBlocks, themePresets]);
     return (_jsx(PhiFlexControl, { vertical: true, gap: clientToken.padding, style: { width: "100%", minWidth: 0, opacity: loading ? 0.65 : 1 }, children: _jsx(PhiCardControl, { size: "small", children: _jsxs(PhiFlexControl, { vertical: true, gap: clientToken.paddingSM, children: [_jsx(PhiBrandBlockPicker, { label: "Palette", value: themeComposition.palette.key, unavailable: themeComposition.unavailable.palette, options: themeBlocks.palettes, onChange: (key) => {
                             const palette = themeBlocks.palettes.find((candidate) => candidate.key === key);
                             if (!palette)
@@ -1749,7 +1049,7 @@ export function PhiBuilderBrandThemeControlsWidgetClient({ runtime, config, colo
                                                 flex: `0 1 min(100%, ${colorControlWidth}px)`,
                                                 minWidth: 0,
                                                 maxWidth: "100%",
-                                            }, children: _jsx(PhiColorFieldControl, { ...pickerTransaction, tokenKey: "custom6", value: customPalette.custom6, defaultValue: resolvePhiThemePresetCustomColors(selectedPreset, previewMode).custom6, disabled: saving, customColors: customColorOptions, presets: PHI_COLOR_PICKER_PRESETS, labels: colorPickerLabels, onChange: (value) => {
+                                            }, children: _jsx(PhiColorFieldControl, { ...pickerTransaction, tokenKey: "custom6", value: customPalette.custom6, defaultValue: resolvePhiThemePaletteCustomColors(selectedPreset.palette, previewMode).custom6, disabled: saving, customColors: customColorOptions, presets: PHI_COLOR_PICKER_PRESETS, labels: colorPickerLabels, onChange: (value) => {
                                                     publishDraft(mergeThemeCustomColors(state.draft, buildPhiThemeCustomColorPalette(value), previewMode));
                                                 } }) })] })),
                                 children: (_jsx(PhiFlexControl, { wrap: "wrap", style: { minWidth: 0, columnGap: clientToken.paddingXXS, rowGap: clientToken.paddingSM }, children: customColorOptions
@@ -1758,7 +1058,7 @@ export function PhiBuilderBrandThemeControlsWidgetClient({ runtime, config, colo
                                             flex: `1 1 calc((100% - ${clientToken.paddingXXS}) / 2)`,
                                             minWidth: 0,
                                             maxWidth: "100%",
-                                        }, children: _jsx(PhiColorFieldControl, { ...pickerTransaction, label: item.label, tokenKey: item.key, value: item.value, defaultValue: resolvePhiThemePresetCustomColors(selectedPreset, previewMode)[item.key], disabled: saving, customColors: customColorOptions, presets: PHI_COLOR_PICKER_PRESETS, labels: colorPickerLabels, onChange: (value, tokenKey) => {
+                                        }, children: _jsx(PhiColorFieldControl, { ...pickerTransaction, label: item.label, tokenKey: item.key, value: item.value, defaultValue: resolvePhiThemePaletteCustomColors(selectedPreset.palette, previewMode)[item.key], disabled: saving, customColors: customColorOptions, presets: PHI_COLOR_PICKER_PRESETS, labels: colorPickerLabels, onChange: (value, tokenKey) => {
                                                 if (!tokenKey || !PHI_THEME_CUSTOM_COLOR_KEYS.includes(tokenKey)) {
                                                     return;
                                                 }
@@ -1768,9 +1068,9 @@ export function PhiBuilderBrandThemeControlsWidgetClient({ runtime, config, colo
                             ...THEME_COLOR_SEED_SECTIONS.map((section) => {
                                 const seedAuthored = Object.prototype.hasOwnProperty.call(ownPalette.seed ?? {}, section.key) ||
                                     Object.prototype.hasOwnProperty.call(ownPalette.modes?.[previewMode]?.seed ?? {}, section.key);
-                                const seedDefaultValue = readComputedTokenColor(computedToken, section.key, section.fallback);
+                                const seedDefaultValue = readEffectiveTokenString(computedToken, section.key, section.fallback);
                                 const seedValue = seedAuthored
-                                    ? readTokenColor(colorToken, section.key, seedDefaultValue)
+                                    ? readEffectiveTokenString(colorToken, section.key, seedDefaultValue)
                                     : seedDefaultValue;
                                 return {
                                     key: section.key,
@@ -1783,12 +1083,12 @@ export function PhiBuilderBrandThemeControlsWidgetClient({ runtime, config, colo
                                                     } }) })] })),
                                     children: (_jsx(PhiFlexControl, { wrap: "wrap", style: { minWidth: 0, columnGap: clientToken.paddingXXS, rowGap: clientToken.paddingSM }, children: section.derived.map((item) => {
                                             const overridden = Object.prototype.hasOwnProperty.call(ownOverrides, item.key);
-                                            const fallback = readComputedTokenColor(computedToken, item.key, section.fallback);
+                                            const fallback = readEffectiveTokenString(computedToken, item.key, section.fallback);
                                             return (_jsx("div", { style: {
                                                     flex: `1 1 calc((100% - ${clientToken.paddingXXS}) / 2)`,
                                                     minWidth: 0,
                                                     maxWidth: "100%",
-                                                }, children: _jsxs(PhiFlexControl, { vertical: true, gap: clientToken.paddingXXS, children: [_jsx(PhiColorFieldControl, { ...pickerTransaction, label: item.label, tokenKey: item.key, value: overridden ? readTokenColor(colorToken, item.key, fallback) : fallback, defaultValue: fallback, disabled: saving, customColors: customColorOptions, labels: colorPickerLabels, onChange: (value, tokenKey) => {
+                                                }, children: _jsxs(PhiFlexControl, { vertical: true, gap: clientToken.paddingXXS, children: [_jsx(PhiColorFieldControl, { ...pickerTransaction, label: item.label, tokenKey: item.key, value: overridden ? readEffectiveTokenString(colorToken, item.key, fallback) : fallback, defaultValue: fallback, disabled: saving, customColors: customColorOptions, labels: colorPickerLabels, onChange: (value, tokenKey) => {
                                                                 if (!tokenKey) {
                                                                     return;
                                                                 }
@@ -1823,8 +1123,9 @@ export function PhiBuilderBrandStyleControlsWidgetClient({ runtime, config, }) {
         controlHeight: readEffectiveTokenNumber(styleTokenInput, "controlHeight", PHI_CONTROL_HEIGHTS.md),
         controlHeightLG: readEffectiveTokenNumber(styleTokenInput, "controlHeightLG", PHI_CONTROL_HEIGHTS.lg),
     };
+    /** One row per size step: a label and the preset picker; Border Radius and Control Height share it. */
+    const renderPresetSizeRows = (items, options) => (_jsx(PhiFlexControl, { vertical: true, gap: clientToken.paddingXS, children: items.map((item) => (_jsxs(PhiFlexControl, { align: "center", gap: clientToken.paddingSM, wrap: "nowrap", children: [_jsx(PhiTypographyControl, { style: { flex: `0 0 ${fieldLabelWidth}px` }, children: item.label }), _jsx(PhiPresetSizeControl, { disabled: saving, value: item.value, fallbackKey: item.fallbackPreset, options: options, onChange: (value) => updateToken({ [item.key]: value }) })] }, item.key))) }));
     const wireframe = readEffectiveTokenBoolean(styleTokenInput, "wireframe", true);
-    const remRootValue = state.draft.rem?.rootValue ?? 16;
     const baseFontSize = readEffectiveTokenNumber(styleTokenInput, "fontSize", 12);
     function updateToken(tokenPatch) {
         publishDraft(mergeThemeToken(state.draft, tokenPatch));
@@ -1876,7 +1177,7 @@ export function PhiBuilderBrandStyleControlsWidgetClient({ runtime, config, }) {
             },
         })),
     ], [fontFamilies, resolvedCatalogueFamilies, siteFontAssets.options]);
-    return (_jsxs(PhiFlexControl, { vertical: true, gap: clientToken.padding, style: { width: "100%", minWidth: 0, opacity: loading ? 0.65 : 1 }, children: [siteFontFaceCss ? (_jsx("style", { href: "phi-theme-font-picker-faces", precedence: "default", dangerouslySetInnerHTML: { __html: siteFontFaceCss } })) : null, _jsx(PhiCardControl, { size: "small", children: _jsx(PhiAccordionControl, { openSection: activeStyleSection, onOpenSectionChange: changeActiveStyleSection, sections: [
+    return (_jsxs(PhiFlexControl, { vertical: true, gap: clientToken.padding, style: { width: "100%", minWidth: 0, opacity: loading ? 0.65 : 1 }, children: [siteFontFaceCss ? (_jsx("style", { href: "phi-theme-font-picker-faces", precedence: "default", dangerouslySetInnerHTML: { __html: siteFontFaceCss } })) : null, siteFontAssets.error ? (_jsx(PhiAlertControl, { level: "error", title: "The Site's own typefaces could not be read.", description: siteFontAssets.error })) : null, _jsx(PhiCardControl, { size: "small", children: _jsx(PhiAccordionControl, { openSection: activeStyleSection, onOpenSectionChange: changeActiveStyleSection, sections: [
                         {
                             key: "shapes",
                             label: _jsx(PhiTypographyControl, { strong: true, children: "Shapes" }),
@@ -1899,20 +1200,20 @@ export function PhiBuilderBrandStyleControlsWidgetClient({ runtime, config, }) {
                         {
                             key: "radius",
                             label: _jsx(PhiTypographyControl, { strong: true, children: "Border Radius" }),
-                            children: (_jsx(PhiFlexControl, { vertical: true, gap: clientToken.paddingXS, children: [
-                                    { key: "borderRadiusSM", label: "Small", value: radiusValues.borderRadiusSM, fallbackPreset: "xs" },
-                                    { key: "borderRadius", label: "Base", value: radiusValues.borderRadius, fallbackPreset: "sm" },
-                                    { key: "borderRadiusLG", label: "Large", value: radiusValues.borderRadiusLG, fallbackPreset: "base" },
-                                ].map((item) => (_jsxs(PhiFlexControl, { align: "center", gap: clientToken.paddingSM, wrap: "nowrap", children: [_jsx(PhiTypographyControl, { style: { flex: `0 0 ${fieldLabelWidth}px` }, children: item.label }), _jsx(PhiPresetSizeControl, { disabled: saving, value: item.value, fallbackKey: item.fallbackPreset, options: PHI_STYLE_RADIUS_PRESET_OPTIONS, onChange: (value) => updateToken({ [item.key]: value }) })] }, item.key))) })),
+                            children: renderPresetSizeRows([
+                                { key: "borderRadiusSM", label: "Small", value: radiusValues.borderRadiusSM, fallbackPreset: "xs" },
+                                { key: "borderRadius", label: "Base", value: radiusValues.borderRadius, fallbackPreset: "sm" },
+                                { key: "borderRadiusLG", label: "Large", value: radiusValues.borderRadiusLG, fallbackPreset: "base" },
+                            ], PHI_STYLE_RADIUS_PRESET_OPTIONS),
                         },
                         {
                             key: "controlHeight",
                             label: _jsx(PhiTypographyControl, { strong: true, children: "Control Height" }),
-                            children: (_jsx(PhiFlexControl, { vertical: true, gap: clientToken.paddingXS, children: [
-                                    { key: "controlHeightSM", label: "Small", value: controlHeightValues.controlHeightSM, fallbackPreset: "base" },
-                                    { key: "controlHeight", label: "Base", value: controlHeightValues.controlHeight, fallbackPreset: "md" },
-                                    { key: "controlHeightLG", label: "Large", value: controlHeightValues.controlHeightLG, fallbackPreset: "lg" },
-                                ].map((item) => (_jsxs(PhiFlexControl, { align: "center", gap: clientToken.paddingSM, wrap: "nowrap", children: [_jsx(PhiTypographyControl, { style: { flex: `0 0 ${fieldLabelWidth}px` }, children: item.label }), _jsx(PhiPresetSizeControl, { disabled: saving, value: item.value, fallbackKey: item.fallbackPreset, options: PHI_STYLE_CONTROL_HEIGHT_PRESET_OPTIONS, onChange: (value) => updateToken({ [item.key]: value }) })] }, item.key))) })),
+                            children: renderPresetSizeRows([
+                                { key: "controlHeightSM", label: "Small", value: controlHeightValues.controlHeightSM, fallbackPreset: "base" },
+                                { key: "controlHeight", label: "Base", value: controlHeightValues.controlHeight, fallbackPreset: "md" },
+                                { key: "controlHeightLG", label: "Large", value: controlHeightValues.controlHeightLG, fallbackPreset: "lg" },
+                            ], PHI_STYLE_CONTROL_HEIGHT_PRESET_OPTIONS),
                         },
                         {
                             key: "fontFamily",
@@ -1924,7 +1225,7 @@ export function PhiBuilderBrandStyleControlsWidgetClient({ runtime, config, }) {
                         {
                             key: "fontSize",
                             label: _jsx(PhiTypographyControl, { strong: true, children: "Base Font Size" }),
-                            children: (_jsxs(PhiFlexControl, { vertical: true, gap: clientToken.paddingXS, children: [_jsxs(PhiFlexControl, { align: "center", gap: clientToken.paddingSM, wrap: "nowrap", children: [_jsx(PhiTypographyControl, { style: { flex: `0 0 ${fieldLabelWidth}px` }, children: "Root value" }), _jsxs(PhiTypographyControl, { code: true, children: [remRootValue, "px"] })] }), _jsxs(PhiFlexControl, { align: "center", gap: clientToken.paddingSM, wrap: "nowrap", children: [_jsx(PhiTypographyControl, { style: { flex: `0 0 ${fieldLabelWidth}px` }, children: "Font size" }), _jsxs(PhiTypographyControl, { code: true, children: [baseFontSize, "px"] })] }), _jsx(PhiTypographyControl, { type: "secondary", children: "Root value controls rem conversion; font size is the seed every other type size is derived from." })] })),
+                            children: (_jsxs(PhiFlexControl, { vertical: true, gap: clientToken.paddingXS, children: [_jsxs(PhiFlexControl, { align: "center", gap: clientToken.paddingSM, wrap: "nowrap", children: [_jsx(PhiTypographyControl, { style: { flex: `0 0 ${fieldLabelWidth}px` }, children: "Font size" }), _jsxs(PhiTypographyControl, { code: true, children: [baseFontSize, "px"] })] }), _jsx(PhiTypographyControl, { type: "secondary", children: "The seed every other type size is derived from." })] })),
                         },
                         {
                             key: "wireframe",
@@ -1970,30 +1271,9 @@ function mergeThemeBlockChoice(theme, part, block) {
         return clearThemeAuthoredGround(withChoice);
     return withChoice;
 }
-/**
- * A Set decides all three parts, so it clears all three: the parts picked one by one, because a Set is
- * what somebody falls back on when they stop deciding each part, and the values authored on top of
- * them, for the same reason picking a single block clears its own. The Control shape belongs to the
- * style, so it goes with the style tokens.
- */
-function mergeThemeSetChoice(theme, set) {
-    return clearThemeAuthoredFonts(clearThemeAuthoredGround(clearThemeControlShape(clearThemeStyleTokens({
-        ...theme,
-        blocks: { set: { key: set.key, version: set.version } },
-    }))));
-}
-/** Every font slot an author set, so the Set's fonts block is what shows. */
-function clearThemeAuthoredFonts(theme) {
-    return Object.fromEntries(Object.entries(theme).filter(([key]) => key !== "fonts"));
-}
 function formatShapeLabel(shape) {
     return shape.charAt(0).toUpperCase() + shape.slice(1);
 }
-/** Every ground value an author set, in both modes, so the chosen block is what shows. */
-function clearThemeAuthoredGround(theme) {
-    const root = Object.fromEntries(Object.entries(theme.root ?? {}).filter(([key]) => key !== "background" && key !== "chrome"));
-    return { ...theme, root };
-}
 /**
  * Dropping the author's values for one surface, so the block below shows through again.
  *
@@ -2026,16 +1306,6 @@ function clearThemeRootSurface(theme, surface, mode) {
 function PhiBrandBlockResetButton({ blockTitle, disabled, onReset, }) {
     return (_jsx(PhiButtonControl, { size: "small", style: { flexShrink: 0 }, disabled: disabled, onClick: onReset, label: `Follow ${blockTitle}` }));
 }
-/**
- * Dropping every structural override, so the style block shows through again.
- *
- * Colour stays: the two tabs are two decisions, and somebody resetting the proportions did not ask to
- * lose the brand colour they picked. The record keeps them apart -- `palette` and `style` -- so taking
- * the one away never touches the other.
- */
-function clearThemeStyleTokens(theme) {
-    return omitThemeFields(theme, "style");
-}
 /**
  * The picker for one part of the Theme.
  *
@@ -2229,27 +1499,20 @@ export function PhiBuilderBrandIdentityControlsWidgetClient({ runtime, config, }
                                 "--phi-labeled-control-width": "100%",
                             }, children: [_jsx(PhiTypographyControl, { type: "secondary", children: showsWordmark
                                         ? _jsxs(_Fragment, { children: ["The Site name as it is set. One part per colour: a two-tone name is one word written in two. With no part at all the frame shows ", fallbackWordmark, "."] })
-                                        : _jsx(_Fragment, { children: "The Brand is the Logo alone. The name is not drawn, and neither is the Eyebrow above it." }) }), _jsx(PhiSwitchControl, { label: "Show name", checked: showsWordmark, checkedLabel: "On", uncheckedLabel: "Off", onChange: (checked) => publishDraft(mergeThemeWordmarkShows(state.draft, checked)) }), showsWordmark && (_jsxs(_Fragment, { children: [editableWordmarkParts.map((part, index) => (_jsx(PhiLabeledControl, { label: `Part #${index + 1}`, fill: true, children: _jsxs(PhiFlexControl, { gap: clientToken.paddingXXS, align: "center", style: { width: "100%", minWidth: 0 }, children: [_jsx(PhiTextControl, { value: part.text, placeholder: index === 0 ? fallbackWordmark : "Part", ariaLabel: `Wordmark part ${index + 1}`, allowClear: false, onChange: (next) => updateWordmarkPart(index, { text: next ?? "" }) }), _jsx(PhiColorControl, { mode: "single", allowClear: true, value: part.color ?? null, presets: PHI_COLOR_PICKER_PRESETS, onChange: (next) => updateWordmarkPart(index, { color: next }) }), _jsx(PhiButtonControl, { type: "text", size: "small", danger: true, disabled: wordmarkParts.length === 0, icon: _jsx(DeleteOutlined, {}), ariaLabel: "Remove this part of the Wordmark", onClick: () => {
+                                        : _jsx(_Fragment, { children: "The Brand is the Logo alone. The name is not drawn, and neither is the Eyebrow above it." }) }), _jsx(PhiSwitchControl, { label: "Show name", checked: showsWordmark, checkedLabel: "On", uncheckedLabel: "Off", onChange: (checked) => publishDraft(mergeThemeWordmarkShows(state.draft, checked)) }), showsWordmark && (_jsxs(_Fragment, { children: [editableWordmarkParts.map((part, index) => (_jsx(PhiLabeledControl, { label: `Part #${index + 1}`, fill: true, children: _jsxs(PhiFlexControl, { gap: clientToken.paddingXXS, align: "center", style: { width: "100%", minWidth: 0 }, children: [_jsx(PhiTextControl, { value: part.text, placeholder: index === 0 ? fallbackWordmark : "Part", ariaLabel: `Wordmark part ${index + 1}`, allowClear: false, onChange: (next) => updateWordmarkPart(index, { text: next ?? "" }) }), _jsx(PhiColorControl, { mode: "single", allowClear: true, 
+                                                        // A part's row is narrow: the swatch says the colour, the value would overflow it.
+                                                        showText: false, value: part.color ?? null, presets: PHI_COLOR_PICKER_PRESETS, onChange: (next) => updateWordmarkPart(index, { color: next }) }), _jsx(PhiButtonControl, { type: "text", size: "small", danger: true, disabled: wordmarkParts.length === 0, icon: _jsx(PhiIcon, { name: "delete", size: "inherit" }), ariaLabel: "Remove this part of the Wordmark", onClick: () => {
                                                             setWordmarkPartKeys((current) => ({
                                                                 ...current,
                                                                 keys: current.keys.filter((_, at) => at !== index),
                                                             }));
                                                             publishDraft(mergeThemeWordmarkParts(state.draft, editableWordmarkParts.filter((_, at) => at !== index)));
-                                                        } })] }) }, wordmarkPartKeys.keys[index] ?? `pending-${index}`))), _jsx(PhiLabeledControl, { label: " ", fill: true, children: _jsx(PhiButtonControl, { size: "small", label: "Add part", onClick: () => publishDraft(mergeThemeWordmarkParts(state.draft, [...editableWordmarkParts, { text: "" }])) }) }), _jsx(PhiDividerControl, { style: { marginBlock: clientToken.paddingXXS } }), _jsx(PhiLabeledControl, { label: "Weight", fill: true, children: _jsxs(PhiFlexControl, { gap: clientToken.paddingXS, align: "center", style: { width: "100%", minWidth: 0 }, children: [_jsx(PhiSelectControl, { ariaLabel: "Wordmark weight", style: { flex: "1 1 auto", minWidth: 0 }, value: String(brand.wordmark?.fontWeight ?? ""), options: [...PHI_THEME_WORDMARK_WEIGHT_OPTIONS], onChange: (next) => publishDraft(mergeThemeBrand(state.draft, {
-                                                            wordmark: {
-                                                                ...(brand.wordmark ?? {}),
-                                                                fontWeight: next === "" ? null : Number(next),
-                                                            },
-                                                        })) }), _jsx(PhiCheckboxControl, { checked: brand.wordmark?.fontStyle === "italic", label: "Italic", onChange: (checked) => publishDraft(mergeThemeBrand(state.draft, {
-                                                            wordmark: {
-                                                                ...(brand.wordmark ?? {}),
-                                                                fontStyle: checked ? "italic" : null,
-                                                            },
-                                                        })) })] }) }), _jsx(PhiNumberControl, { label: "Tracking", prefix: "em", style: { width: "100%" }, value: readWordmarkLetterSpacingEm(brand.wordmark?.letterSpacing), step: 0.01, precision: 3, min: -0.2, max: 1, onChange: (next) => publishDraft(mergeThemeBrand(state.draft, {
-                                                wordmark: {
-                                                    ...(brand.wordmark ?? {}),
-                                                    letterSpacing: next == null ? null : `${next}em`,
-                                                },
+                                                        } })] }) }, wordmarkPartKeys.keys[index] ?? `pending-${index}`))), _jsx(PhiLabeledControl, { label: " ", fill: true, children: _jsx(PhiButtonControl, { size: "small", label: "Add part", onClick: () => publishDraft(mergeThemeWordmarkParts(state.draft, [...editableWordmarkParts, { text: "" }])) }) }), _jsx(PhiDividerControl, { style: { marginBlock: clientToken.paddingXXS } }), _jsx(PhiLabeledControl, { label: "Weight", fill: true, children: _jsxs(PhiFlexControl, { gap: clientToken.paddingXS, align: "center", style: { width: "100%", minWidth: 0 }, children: [_jsx(PhiSelectControl, { ariaLabel: "Wordmark weight", style: { flex: "1 1 auto", minWidth: 0 }, value: String(brand.wordmark?.fontWeight ?? ""), options: [...PHI_THEME_WORDMARK_WEIGHT_OPTIONS], onChange: (next) => publishDraft(mergeThemeWordmark(state.draft, {
+                                                            fontWeight: next === "" ? null : Number(next),
+                                                        })) }), _jsx(PhiCheckboxControl, { checked: brand.wordmark?.fontStyle === "italic", label: "Italic", onChange: (checked) => publishDraft(mergeThemeWordmark(state.draft, {
+                                                            fontStyle: checked ? "italic" : null,
+                                                        })) })] }) }), _jsx(PhiNumberControl, { label: "Tracking", prefix: "em", style: { width: "100%" }, value: readWordmarkLetterSpacingEm(brand.wordmark?.letterSpacing), step: 0.01, precision: 3, min: -0.2, max: 1, onChange: (next) => publishDraft(mergeThemeWordmark(state.draft, {
+                                                letterSpacing: next == null ? null : `${next}em`,
                                             })) }), _jsx(PhiLabeledControl, { label: "Eyebrow", fill: true, children: _jsx(PhiTextControl, { value: brand.eyebrow ?? "", placeholder: "The small line above the name", ariaLabel: "Eyebrow", allowClear: false, onChange: (next) => publishDraft(mergeThemeBrand(state.draft, {
                                                     eyebrow: next ?? "",
                                                 })) }) })] }))] })),
@@ -2305,12 +1568,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(mergeThemeRootBackground(state.draft, otherMode, rootBackground)) })] })] }), _jsx(PhiBackgroundControl, { value: rootBackground, motionModes: PHI_ROOT_BACKGROUND_MOTION_MODES, imageSourceKinds: PHI_ROOT_BACKGROUND_IMAGE_SOURCE_KINDS, renderMediaPicker: renderPhiThemeRootBackgroundMediaPicker, editTransaction: editTransaction, onChange: (value) => publishDraft(mergeThemeRootBackground(state.draft, 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, { 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)] })),
                         },
                         {
                             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(mergeThemeChromeOverlay(state.draft, otherMode, chromeOverlay)) })] })] }), _jsx(PhiBackgroundControl, { value: chromeOverlay, motionModes: PHI_SHELL_CHROME_OVERLAY_MOTION_MODES, effects: PHI_SHELL_CHROME_OVERLAY_EFFECTS, baseKinds: PHI_SHELL_CHROME_OVERLAY_BASE_KINDS, imageSourceKinds: PHI_SHELL_CHROME_OVERLAY_IMAGE_SOURCE_KINDS, renderMediaPicker: renderPhiThemeRootBackgroundMediaPicker, editTransaction: editTransaction, onChange: (value) => publishDraft(mergeThemeChromeOverlay(state.draft, 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, { 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}`)] })),
                         },
                         {
                             key: "shadow",
@@ -2391,7 +1654,7 @@ export function PhiBuilderBrandThemePreviewWidgetClient({ runtime, }) {
      * and the parts nobody chose are the block's. Resolving here rather than in the state keeps the draft
      * that travels back to the Controller free of anything that was only worked out for display.
      */
-    const previewThemeResolved = resolvePhiThemeRuntimePayload(previewTheme, themeBlocks).theme;
+    const previewThemeResolved = useMemo(() => resolvePhiThemeRuntimePayload(previewTheme, themeBlocks).theme, [previewTheme, themeBlocks]);
     const [hoveredStatusKey, setHoveredStatusKey] = useState(null);
     const [previewTableSearch, setPreviewTableSearch] = useState("");
     /*
@@ -2413,15 +1676,22 @@ export function PhiBuilderBrandThemePreviewWidgetClient({ runtime, }) {
         serif: previewFontStacks.serif.stack,
         display: previewFontStacks.display.stack,
     });
-    const previewTokenInput = {
+    /*
+     * The preview's tokens, derived once per draft and mode. The preview renders on every picker step,
+     * on every hover over a status sample and on every keystroke in its sample field, and each render used
+     * to run the colour resolution, the alias derivation and the component shaping again -- and handed
+     * `PhiThemeScopeControl` a new token object, which wrote a new set of CSS variables each time.
+     */
+    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.
-        ...(previewFontStacks.body.stack ? { fontFamily: previewFontStacks.body.stack } : {}),
-        ...(previewFontStacks.mono.stack ? { fontFamilyCode: previewFontStacks.mono.stack } : {}),
-    };
-    const previewEffectiveToken = resolvePhiAntdAliasTokens(mode, previewTokenInput);
+        ...(previewBodyFontStack ? { fontFamily: previewBodyFontStack } : {}),
+        ...(previewMonoFontStack ? { fontFamilyCode: 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) }) },
@@ -2450,23 +1720,13 @@ export function PhiBuilderBrandThemePreviewWidgetClient({ runtime, }) {
      * identity as well is part of it: two shapes with otherwise equal tokens would hash to one key and
      * serve each other from cache.
      */
-    const previewControlShape = resolvePhiControlShape(previewThemeResolved.shape?.controls);
-    const previewShapedComponents = applyPhiSurfaceShapeComponentTokens(applyPhiControlShapeComponentTokens({ ...(applyPhiButtonShadowComponentTokens(previewThemeResolved.components, previewThemeResolved.buttons, mode) ?? {}) }, previewControlShape, previewEffectiveToken), previewControlShape, previewEffectiveToken);
-    const previewAntdTheme = {
-        inherit: false,
-        cssVar: {
-            prefix: "ant",
-            key: createPhiAntdThemeCssVarKey("builder-theme-preview", {
-                mode,
-                token: previewEffectiveToken,
-                components: previewShapedComponents,
-            }),
-        },
-        token: {
-            ...previewEffectiveToken,
-        },
-        components: previewShapedComponents,
-    };
+    const { previewControlShape, previewShapedComponents } = useMemo(() => {
+        const previewControlShape = resolvePhiControlShape(previewThemeResolved.shape?.controls);
+        return {
+            previewControlShape,
+            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");
     /*
@@ -2491,48 +1751,30 @@ export function PhiBuilderBrandThemePreviewWidgetClient({ runtime, }) {
     const previewSwatchColor = readEffectiveTokenString(previewEffectiveToken, "colorPrimary", "#1677ff");
     const previewLinkHoverColor = readEffectiveTokenString(previewEffectiveToken, "colorLinkHover", previewLinkColor);
     const previewLinkActiveColor = readEffectiveTokenString(previewEffectiveToken, "colorLinkActive", previewLinkColor);
+    /*
+     * 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",
-            color: readEffectiveTokenString(previewEffectiveToken, "colorInfoText", readEffectiveTokenString(previewEffectiveToken, "colorInfo", "#1677ff")),
-            background: readEffectiveTokenString(previewEffectiveToken, "colorInfoBg", previewCardBackground),
-            border: readEffectiveTokenString(previewEffectiveToken, "colorInfoBorder", previewLinkColor),
-            hoverColor: readEffectiveTokenString(previewEffectiveToken, "colorInfoTextHover", readEffectiveTokenString(previewEffectiveToken, "colorInfoHover", "#4096ff")),
-            hoverBackground: readEffectiveTokenString(previewEffectiveToken, "colorInfoBgHover", previewCardBackground),
-            hoverBorder: readEffectiveTokenString(previewEffectiveToken, "colorInfoBorderHover", readEffectiveTokenString(previewEffectiveToken, "colorInfoHover", "#4096ff")),
-        },
-        {
-            key: "success",
-            label: "Success",
-            color: readEffectiveTokenString(previewEffectiveToken, "colorSuccessText", readEffectiveTokenString(previewEffectiveToken, "colorSuccess", "#52c41a")),
-            background: readEffectiveTokenString(previewEffectiveToken, "colorSuccessBg", previewCardBackground),
-            border: readEffectiveTokenString(previewEffectiveToken, "colorSuccessBorder", readEffectiveTokenString(previewEffectiveToken, "colorSuccess", "#52c41a")),
-            hoverColor: readEffectiveTokenString(previewEffectiveToken, "colorSuccessTextHover", readEffectiveTokenString(previewEffectiveToken, "colorSuccessHover", "#73d13d")),
-            hoverBackground: readEffectiveTokenString(previewEffectiveToken, "colorSuccessBgHover", previewCardBackground),
-            hoverBorder: readEffectiveTokenString(previewEffectiveToken, "colorSuccessBorderHover", readEffectiveTokenString(previewEffectiveToken, "colorSuccessHover", "#73d13d")),
-        },
-        {
-            key: "warning",
-            label: "Warning",
-            color: readEffectiveTokenString(previewEffectiveToken, "colorWarningText", readEffectiveTokenString(previewEffectiveToken, "colorWarning", "#faad14")),
-            background: readEffectiveTokenString(previewEffectiveToken, "colorWarningBg", previewCardBackground),
-            border: readEffectiveTokenString(previewEffectiveToken, "colorWarningBorder", readEffectiveTokenString(previewEffectiveToken, "colorWarning", "#faad14")),
-            hoverColor: readEffectiveTokenString(previewEffectiveToken, "colorWarningTextHover", readEffectiveTokenString(previewEffectiveToken, "colorWarningHover", "#ffc53d")),
-            hoverBackground: readEffectiveTokenString(previewEffectiveToken, "colorWarningBgHover", previewCardBackground),
-            hoverBorder: readEffectiveTokenString(previewEffectiveToken, "colorWarningBorderHover", readEffectiveTokenString(previewEffectiveToken, "colorWarningHover", "#ffc53d")),
-        },
-        {
-            key: "error",
-            label: "Error",
-            color: readEffectiveTokenString(previewEffectiveToken, "colorErrorText", readEffectiveTokenString(previewEffectiveToken, "colorError", "#ff4d4f")),
-            background: readEffectiveTokenString(previewEffectiveToken, "colorErrorBg", previewCardBackground),
-            border: readEffectiveTokenString(previewEffectiveToken, "colorErrorBorder", readEffectiveTokenString(previewEffectiveToken, "colorError", "#ff4d4f")),
-            hoverColor: readEffectiveTokenString(previewEffectiveToken, "colorErrorTextHover", readEffectiveTokenString(previewEffectiveToken, "colorErrorHover", "#ff7875")),
-            hoverBackground: readEffectiveTokenString(previewEffectiveToken, "colorErrorBgHover", previewCardBackground),
-            hoverBorder: readEffectiveTokenString(previewEffectiveToken, "colorErrorBorderHover", readEffectiveTokenString(previewEffectiveToken, "colorErrorHover", "#ff7875")),
-        },
-    ];
+        { 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);
+        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),
+        };
+    });
     const fontPreviewItems = [
         {
             key: "body",
@@ -2605,7 +1847,7 @@ export function PhiBuilderBrandThemePreviewWidgetClient({ runtime, }) {
         },
     ];
     const wireframeEnabled = readEffectiveTokenBoolean(previewEffectiveToken, "wireframe", true);
-    return (_jsxs(ConfigProvider, { theme: previewAntdTheme, children: [previewFontStacks.faceCss ? (_jsx("style", { href: "phi-theme-preview-faces", precedence: "default", dangerouslySetInnerHTML: { __html: previewFontStacks.faceCss } })) : null, _jsx(PhiCardControl, { size: "small", style: {
+    return (_jsxs(PhiThemeScopeControl, { scope: "builder-theme-preview", mode: mode, token: previewEffectiveToken, components: previewShapedComponents, children: [previewFontStacks.faceCss ? (_jsx("style", { href: "phi-theme-preview-faces", precedence: "default", dangerouslySetInnerHTML: { __html: previewFontStacks.faceCss } })) : null, _jsx(PhiCardControl, { size: "small", style: {
                     width: "100%",
                     background: previewCardBackground,
                     color: previewTextColor,
@@ -2651,8 +1893,9 @@ export function PhiBuilderBrandThemePreviewWidgetClient({ runtime, }) {
                                             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: {
-                                                width: `calc(${clientToken.controlHeightLG} * 2)`,
-                                                minHeight: `calc(${clientToken.controlHeight} * 1.25)`,
+                                                // 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)")}`,
                                                 borderRadius: item.value,
                                                 background: previewCardBackground,