@phis/ui 0.1.0 → 0.2.0

package/components/widgets/client/shared/phi-table-provider.d.ts

@@ -1,6 +1,7 @@
 import { type ComponentType, type ReactNode } from "react";
 import { type PhiRuntimeDataProviderKey } from "../../../../types/runtime-data-provider";
-import type { PhiTableProviderMutationRequest, PhiTableProviderMutationResult, PhiTableProviderActionMutationRequest, PhiTableProviderRecordRequest, PhiTableProviderQueryRequest, PhiTableProviderQueryResult, PhiTableProviderResourceDescriptor, PhiTableSourceBinding } from "../../../../types/table-widget";
+import type { PhiTableProviderMutationRequest, PhiTableProviderMutationResult, PhiTableProviderRecordRequest, PhiTableProviderQueryRequest, PhiTableProviderQueryResult, PhiTableProviderResourceDescriptor } from "../../../../types/table-widget";
+import type { PhiProviderResourceSource } from "../../../../types/runtime-data-provider";
 export type PhiTableProviderRegistration = {
     key: PhiRuntimeDataProviderKey;
     resources: readonly PhiTableProviderResourceDescriptor[];
@@ -18,11 +19,8 @@ export declare function PhiTableProviderClient({ registration, children, }: {
 export declare function PhiTableProviderIsolationBoundary({ children }: {
     children: ReactNode;
 }): import("react").FunctionComponentElement<import("react").ProviderProps<ReadonlyMap<`${string}/${string}`, PhiTableProviderRegistration>>>;
-export declare function usePhiTableProvider(source: PhiTableSourceBinding | null): {
+export declare function usePhiTableProvider(source: PhiProviderResourceSource | null): {
     provider: PhiTableProviderRegistration | null;
     resource: PhiTableProviderResourceDescriptor | null;
     bindingError: string | null;
 };
-export declare function usePhiTableProviderMutation(source: PhiTableSourceBinding | null): (value: Omit<PhiTableProviderActionMutationRequest, "kind" | "resourceKey" | "params" | "signal" | "query"> & {
-    query?: PhiTableProviderActionMutationRequest["query"];
-}) => Promise<PhiTableProviderMutationResult>;

package/components/widgets/client/shared/phi-table-provider.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, createElement, useCallback, useContext, useMemo, } from "react";
+import { createContext, createElement, useContext, useMemo, } from "react";
 import { isPhiRuntimeDataProviderKey, } from "../../../../types/runtime-data-provider";
 const EMPTY_TABLE_PROVIDER_REGISTRY = new Map();
 const PhiTableProviderRegistryContext = createContext(EMPTY_TABLE_PROVIDER_REGISTRY);
@@ -42,6 +42,15 @@ function assertPhiTableProviderRegistration(registration) {
             throw new Error(`Table provider "${registration.key}" has an empty or duplicate resource key.`);
         }
         keys.add(resource.resourceKey);
+        /*
+         * A capability that answers nothing is worse than one that was never offered: the record Widget
+         * binds, the author sees a Provider that says it can do this, and the failure arrives later and
+         * reads like missing data. The static Table Provider carried exactly that shape until the Widget
+         * asked, so the registration says it here instead.
+         */
+        if (resource.recordRead === true && !registration.readRecord) {
+            throw new Error(`Table provider "${registration.key}" declares recordRead on resource "${resource.resourceKey}" but has no readRecord.`);
+        }
     }
 }
 export function usePhiTableProvider(source) {
@@ -60,26 +69,3 @@ export function usePhiTableProvider(source) {
                     : null,
     };
 }
-export function usePhiTableProviderMutation(source) {
-    const { provider, resource, bindingError } = usePhiTableProvider(source);
-    return useCallback(async (value) => {
-        if (bindingError || !provider || !source) {
-            throw new Error(bindingError ?? "Table provider is unavailable.");
-        }
-        if (!provider.mutate) {
-            throw new Error(`Table provider "${source.providerKey}" is read-only.`);
-        }
-        if (!resource?.actions?.some((action) => action.key === value.actionKey)) {
-            throw new Error(`Table action "${value.actionKey}" is not declared by resource "${source.resourceKey}".`);
-        }
-        const abortController = new AbortController();
-        return provider.mutate({
-            ...value,
-            kind: "action",
-            resourceKey: source.resourceKey,
-            params: source.params,
-            query: value.query ?? {},
-            signal: abortController.signal,
-        });
-    }, [bindingError, provider, resource, source]);
-}

package/components/widgets/client/shared/phi-widget-image-tool-button.d.ts

@@ -1,11 +1,9 @@
 import type { PhiImageAssetVariantKeyValue, PhiMediaAssetTile } from "../../../../types/media";
 import type { PhiCmsInstanceId } from "../../../../types/cms-instance-id";
-import type { PhiCssLength } from "../../../../types/length";
 type PhiWidgetImageToolButtonCommonPatch = {
     trusted?: boolean;
-    overrideSize?: boolean;
-    width?: PhiCssLength;
-    height?: PhiCssLength;
+    /** Cleared when the image changes: a fixed size chosen for one image is no answer for the next. */
+    imageSize?: undefined;
     blurDataUrl?: string;
 };
 export type PhiWidgetImageToolButtonPatch = PhiWidgetImageToolButtonCommonPatch & ({

package/components/widgets/client/shared/phi-widget-image-tool-button.js

@@ -6,9 +6,11 @@ import { PhiMediaPickerBinding } from "../../../media/phi-media-picker-binding";
 import { PHI_MEDIA_WIDGET_DEFAULT_LABELS } from "../../../media/media-widget-labels";
 import { PHI_SEARCH_WIDGET_DEFAULT_LABELS } from "../../label-types/search";
 import { usePhiWidgetScaffoldPopup } from "./phi-widget-scaffold-popup";
+import { usePhiAuthoringToolsLabels } from "./phi-authoring-tools-labels";
 import { PhiButtonControl } from "../../../controls/phi-button-control";
 import { createPhiMediaPickerAssetControllerRoutes } from "../../../media/asset-controller-routes";
-export function PhiInternalAssetReferencePickerButton({ blockId, ariaLabel = "Select image", onSelect, onClear, }) {
+export function PhiInternalAssetReferencePickerButton({ blockId, ariaLabel, onSelect, onClear, }) {
+    const labels = usePhiAuthoringToolsLabels();
     const popup = usePhiWidgetScaffoldPopup();
     return (_jsx(PhiMediaPickerBinding, { labels: PHI_MEDIA_WIDGET_DEFAULT_LABELS, searchLabels: PHI_SEARCH_WIDGET_DEFAULT_LABELS, config: {
             mediaType: PhiMediaKind.Image,
@@ -17,7 +19,7 @@ export function PhiInternalAssetReferencePickerButton({ blockId, ariaLabel = "Se
             showGroupFilter: true,
             showSearchBar: true,
             signalRoutes: createPhiMediaPickerAssetControllerRoutes(`internal-asset-reference-${blockId}`, "area"),
-        }, getPopupContainer: popup.getPopupContainer, popupRootClassName: popup.rootClassName, onPopupOpenChange: popup.setOpen, trigger: _jsx("span", { style: { display: "inline-flex" }, children: _jsx(PhiButtonControl, { type: "text", size: "small", icon: _jsx(PictureOutlined, {}), ariaLabel: ariaLabel, style: { width: 24, minWidth: 24, height: 24, padding: 0 }, onClick: () => undefined }) }), onAssetSelect: onSelect, onAssetClear: onClear }));
+        }, getPopupContainer: popup.getPopupContainer, popupRootClassName: popup.rootClassName, onPopupOpenChange: popup.setOpen, trigger: _jsx("span", { style: { display: "inline-flex" }, children: _jsx(PhiButtonControl, { type: "text", size: "small", icon: _jsx(PictureOutlined, {}), ariaLabel: ariaLabel ?? labels.fallbacks.selectImage, style: { width: 24, minWidth: 24, height: 24, padding: 0 }, onClick: () => undefined }) }), onAssetSelect: onSelect, onAssetClear: onClear }));
 }
 export function PhiWidgetImageToolButton({ blockId, onChange, }) {
     const selectAsset = (asset) => {
@@ -27,9 +29,7 @@ export function PhiWidgetImageToolButton({ blockId, onChange, }) {
             variantKey: PhiImageAssetVariantKey.Card,
             variantVersion: asset.variantVersion ?? null,
             trusted: false,
-            overrideSize: false,
-            width: undefined,
-            height: undefined,
+            imageSize: undefined,
             blurDataUrl: asset.blurDataUrl ?? undefined,
         });
     };
@@ -37,9 +37,7 @@ export function PhiWidgetImageToolButton({ blockId, onChange, }) {
             onChange({
                 sourceKind: "url",
                 sourceUrl: undefined,
-                overrideSize: false,
-                width: undefined,
-                height: undefined,
+                imageSize: undefined,
                 blurDataUrl: undefined,
             });
         } }));

package/components/widgets/client/shared/phi-widget-tool-buttons.js

@@ -3,10 +3,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useState } from "react";
 import { AlignCenterOutlined, AlignLeftOutlined, AlignRightOutlined, BgColorsOutlined, FontSizeOutlined, FormatPainterOutlined, LinkOutlined, MenuOutlined, } from "@ant-design/icons";
 import { formatUrl } from "@lexical/link";
-import { Flex, Typography } from "antd";
+import { PHI_WIDGET_FONT_FAMILY_OPTIONS } from "../../helpers/font-family";
+import { PHI_WIDGET_FONT_SIZE_OPTIONS } from "../../helpers/font-size";
 import { createPhiAssetUri, createPhiPageUri } from "../../../../types/references";
-import { PhiBuilderPageReferencePicker } from "../../../../plugins/runtime-modules/builder/page-reference-picker";
-import { PHI_ICON_PICKER_CONTROL_DEFAULT_LABELS } from "../../../controls/phi-icon-picker-labels";
+import { PhiPageReferencePicker } from "./phi-page-reference-picker";
+import { usePhiAuthoringToolsLabels } from "./phi-authoring-tools-labels";
+import { resizePhiDescriptionItems } from "./description-items";
 import { PhiButtonControl } from "../../../controls/phi-button-control";
 import { PhiCheckboxControl } from "../../../controls/phi-checkbox-control";
 import { PhiNumberControl } from "../../../controls/phi-number-control";
@@ -15,11 +17,13 @@ import { PhiSelectControl } from "../../../controls/phi-select-control";
 import { PhiTextControl } from "../../../controls/phi-text-control";
 import { PhiWidgetIconPickerButton } from "./phi-widget-icon-picker";
 import { PHI_HTML_WIDGET_EDITOR_EMPTY_STATE, resolvePhiHtmlWidgetEditorBridge, subscribePhiHtmlWidgetEditorBridge, } from "../html-editor-bridge";
-import { PhiColorWidget } from "../phi-color-widget";
+import { PhiColorFieldControl } from "../../../controls/phi-color-field-control";
 import { resolvePhiMarkdownWidgetEditorBridge, subscribePhiMarkdownWidgetEditorBridge, } from "../markdown-editor-bridge";
 import { usePhiWidgetScaffoldPopup } from "./phi-widget-scaffold-popup";
 import { PhiInternalAssetReferencePickerButton } from "./phi-widget-image-tool-button";
 import { PHI_Z_INDEX } from "../../../../theme/phi-tokens";
+import { PhiFlexControl } from "../../../controls/phi-flex-control";
+import { PhiTypographyControl } from "../../../controls/phi-typography-control";
 function stopOverlayEvent(event) {
     event.stopPropagation();
 }
@@ -51,48 +55,34 @@ function resolveExternalOrFragmentLink(value) {
         return null;
     }
 }
-export function PhiWidgetIconToolButton({ value, ariaLabel = "Widget icon", onChange, }) {
-    return (_jsx(PhiWidgetIconPickerButton, { value: value ?? null, buttonAriaLabel: ariaLabel, labels: PHI_ICON_PICKER_CONTROL_DEFAULT_LABELS, onChange: onChange }));
+export function PhiWidgetIconToolButton({ value, ariaLabel, onChange, }) {
+    const labels = usePhiAuthoringToolsLabels();
+    return (_jsx(PhiWidgetIconPickerButton, { value: value ?? null, buttonAriaLabel: ariaLabel ?? labels.iconPicker.buttonAriaLabel, labels: labels.iconPicker, onChange: onChange }));
 }
-export function PhiWidgetColorToolButton({ value, ariaLabel = "Widget color", onChange, }) {
+export function PhiWidgetColorToolButton({ value, ariaLabel, onChange, }) {
+    const labels = usePhiAuthoringToolsLabels();
     const currentColor = typeof value === "string" && value.trim().length > 0 ? value : undefined;
     const popup = usePhiWidgetScaffoldPopup();
-    return (_jsx(PhiColorWidget, { value: currentColor, defaultValue: currentColor ?? "#1677ff", signalsEnabled: false, allowClear: true, getPopupContainer: popup.getPopupContainer, popupClassName: popup.rootClassName, onOpenChange: popup.setOpen, renderPanel: (panel) => (_jsx("div", { onClick: stopOverlayEvent, onMouseDown: preserveEditorSelectionMouseEvent, onPointerDown: stopOverlayEvent, onKeyDown: stopOverlayEvent, children: panel })), onChange: (css) => {
+    return (_jsx(PhiColorFieldControl, { value: currentColor, defaultValue: currentColor ?? "#1677ff", allowClear: true, getPopupContainer: popup.getPopupContainer, popupClassName: popup.rootClassName, onOpenChange: popup.setOpen, renderPanel: (panel) => (_jsx("div", { onClick: stopOverlayEvent, onMouseDown: preserveEditorSelectionMouseEvent, onPointerDown: stopOverlayEvent, onKeyDown: stopOverlayEvent, children: panel })), onChange: (css) => {
             onChange(css);
         }, onClear: () => {
             onChange(null);
-        }, children: _jsx("span", { onMouseDown: preserveEditorSelectionMouseEvent, onClick: stopOverlayEvent, onPointerDown: stopOverlayEvent, style: { display: "inline-flex" }, children: _jsx(PhiButtonControl, { type: "text", size: "small", ariaLabel: ariaLabel, icon: _jsx(BgColorsOutlined, { style: currentColor ? { color: currentColor } : undefined }), onClick: () => undefined }) }) }));
+        }, children: _jsx("span", { onMouseDown: preserveEditorSelectionMouseEvent, onClick: stopOverlayEvent, onPointerDown: stopOverlayEvent, style: { display: "inline-flex" }, children: _jsx(PhiButtonControl, { type: "text", size: "small", ariaLabel: ariaLabel ?? labels.fallbacks.widgetColor, icon: _jsx(BgColorsOutlined, { style: currentColor ? { color: currentColor } : undefined }), onClick: () => undefined }) }) }));
 }
-const PHI_FONT_FAMILY_OPTIONS = [
-    { value: "inherit", label: "Inherit" },
-    { value: "system", label: "System" },
-    { value: "body", label: "Body" },
-    { value: "mono", label: "Mono" },
-    { value: "serif", label: "Serif" },
-    { value: "accent", label: "Accent" },
-    { value: "display", label: "Display" },
-];
-const PHI_FONT_SIZE_OPTIONS = [
-    { value: "inherit", label: "Inherit" },
-    { value: "xs", label: "XS" },
-    { value: "sm", label: "SM" },
-    { value: "base", label: "Base" },
-    { value: "lg", label: "LG" },
-    { value: "xl", label: "XL" },
-];
-export function PhiWidgetTypographyToolButton({ fontFamily, fontSize, defaultFontSize = "inherit", ariaLabel = "Widget typography", onChange, }) {
+export function PhiWidgetTypographyToolButton({ fontFamily, fontSize, defaultFontSize = "inherit", ariaLabel, onChange, }) {
+    const labels = usePhiAuthoringToolsLabels();
     const currentFontFamily = fontFamily ?? "inherit";
     const currentFontSize = fontSize ?? defaultFontSize;
     const popup = usePhiWidgetScaffoldPopup();
-    return (_jsx(PhiPopoverControl, { trigger: "click", placement: "bottomRight", getPopupContainer: popup.getPopupContainer, rootClassName: popup.rootClassName, onOpenChange: popup.setOpen, zIndex: PHI_Z_INDEX.authoringPopup, content: _jsxs(Flex, { vertical: true, gap: 8, style: { minWidth: 220 }, onClick: stopOverlayEvent, onMouseDown: stopOverlayMouseEvent, onPointerDown: stopOverlayEvent, children: [_jsxs("label", { children: [_jsx(Typography.Text, { style: { display: "block", marginBottom: 4 }, children: "Font" }), _jsx(PhiSelectControl, { value: currentFontFamily, options: PHI_FONT_FAMILY_OPTIONS, getPopupContainer: popup.getPopupContainer, popupRootClassName: popup.rootClassName, popupZIndex: PHI_Z_INDEX.authoringPopupNested, onChange: (nextValue) => {
+    return (_jsx(PhiPopoverControl, { trigger: "click", placement: "bottomRight", getPopupContainer: popup.getPopupContainer, rootClassName: popup.rootClassName, onOpenChange: popup.setOpen, zIndex: PHI_Z_INDEX.authoringPopup, content: _jsxs(PhiFlexControl, { vertical: true, gap: 8, style: { minWidth: 220 }, onClick: stopOverlayEvent, onMouseDown: stopOverlayMouseEvent, onPointerDown: stopOverlayEvent, children: [_jsxs("label", { children: [_jsx(PhiTypographyControl, { style: { display: "block", marginBottom: 4 }, children: "Font" }), _jsx(PhiSelectControl, { value: currentFontFamily, options: PHI_WIDGET_FONT_FAMILY_OPTIONS, getPopupContainer: popup.getPopupContainer, popupRootClassName: popup.rootClassName, popupZIndex: PHI_Z_INDEX.authoringPopupNested, onChange: (nextValue) => {
                                 onChange({
                                     fontFamily: nextValue,
                                 });
-                            }, style: { width: "100%" } })] }), _jsxs("label", { children: [_jsx(Typography.Text, { style: { display: "block", marginBottom: 4 }, children: "Size" }), _jsx(PhiSelectControl, { value: currentFontSize, options: PHI_FONT_SIZE_OPTIONS, getPopupContainer: popup.getPopupContainer, popupRootClassName: popup.rootClassName, popupZIndex: PHI_Z_INDEX.authoringPopupNested, onChange: (nextValue) => {
+                            }, style: { width: "100%" } })] }), _jsxs("label", { children: [_jsx(PhiTypographyControl, { style: { display: "block", marginBottom: 4 }, children: "Size" }), _jsx(PhiSelectControl, { value: currentFontSize, options: PHI_WIDGET_FONT_SIZE_OPTIONS, getPopupContainer: popup.getPopupContainer, popupRootClassName: popup.rootClassName, popupZIndex: PHI_Z_INDEX.authoringPopupNested, onChange: (nextValue) => {
                                 onChange({
                                     fontSize: nextValue,
                                 });
-                            }, style: { width: "100%" } })] })] }), children: _jsx("span", { onMouseDown: stopOverlayMouseEvent, onClick: stopOverlayEvent, onPointerDown: stopOverlayEvent, style: { display: "inline-flex" }, children: _jsx(PhiButtonControl, { type: "text", size: "small", ariaLabel: ariaLabel, icon: _jsx(FontSizeOutlined, {}), onClick: () => undefined }) }) }));
+                            }, style: { width: "100%" } })] })] }), children: _jsx("span", { onMouseDown: stopOverlayMouseEvent, onClick: stopOverlayEvent, onPointerDown: stopOverlayEvent, style: { display: "inline-flex" }, children: _jsx(PhiButtonControl, { type: "text", size: "small", ariaLabel: ariaLabel ?? labels.fallbacks.widgetTypography, icon: _jsx(FontSizeOutlined, {}), onClick: () => undefined }) }) }));
 }
 const PHI_HTML_WIDGET_BLOCK_OPTIONS = [
     { value: "paragraph", label: "P" },
@@ -129,6 +119,7 @@ function usePhiHtmlWidgetEditorState(blockId) {
     };
 }
 export function PhiHtmlWidgetToolbarTools({ blockId, }) {
+    const labels = usePhiAuthoringToolsLabels();
     const { bridge, state } = usePhiHtmlWidgetEditorState(blockId);
     const blockPopup = usePhiWidgetScaffoldPopup();
     const alignmentPopup = usePhiWidgetScaffoldPopup();
@@ -146,10 +137,10 @@ export function PhiHtmlWidgetToolbarTools({ blockId, }) {
     };
     return (_jsxs(_Fragment, { children: [_jsx("span", { onClick: stopOverlayEvent, onMouseDown: stopOverlayMouseEvent, onPointerDown: stopOverlayEvent, style: { display: "inline-flex", minWidth: 84 }, children: _jsx(PhiSelectControl, { size: "small", value: state?.blockType ?? PHI_HTML_WIDGET_EDITOR_EMPTY_STATE.blockType, options: PHI_HTML_WIDGET_BLOCK_OPTIONS, disabled: !bridge, popupMatchSelectWidth: false, getPopupContainer: blockPopup.getPopupContainer, popupRootClassName: blockPopup.rootClassName, popupZIndex: PHI_HTML_WIDGET_TOOL_POPUP_Z_INDEX, onOpenChange: blockPopup.setOpen, onChange: (value) => {
                         bridge?.setBlockType(value);
-                    }, style: { minWidth: 84 } }) }), _jsx(PhiPopoverControl, { trigger: "click", placement: "bottomRight", getPopupContainer: alignmentPopup.getPopupContainer, rootClassName: alignmentPopup.rootClassName, onOpenChange: alignmentPopup.setOpen, zIndex: PHI_WIDGET_OVERLAY_Z_INDEX, content: _jsx(Flex, { gap: 4, onClick: stopOverlayEvent, onMouseDown: preserveEditorSelectionMouseEvent, onPointerDown: stopOverlayEvent, children: PHI_HTML_WIDGET_ALIGNMENT_OPTIONS.map((option) => (_jsx(PhiButtonControl, { type: (state?.alignment ?? PHI_HTML_WIDGET_EDITOR_EMPTY_STATE.alignment) === option.value ? "primary" : "text", size: "small", ariaLabel: option.label, tooltip: option.label, icon: option.icon, disabled: !bridge, onClick: () => {
+                    }, style: { minWidth: 84 } }) }), _jsx(PhiPopoverControl, { trigger: "click", placement: "bottomRight", getPopupContainer: alignmentPopup.getPopupContainer, rootClassName: alignmentPopup.rootClassName, onOpenChange: alignmentPopup.setOpen, zIndex: PHI_WIDGET_OVERLAY_Z_INDEX, content: _jsx(PhiFlexControl, { gap: 4, onClick: stopOverlayEvent, onMouseDown: preserveEditorSelectionMouseEvent, onPointerDown: stopOverlayEvent, children: PHI_HTML_WIDGET_ALIGNMENT_OPTIONS.map((option) => (_jsx(PhiButtonControl, { type: (state?.alignment ?? PHI_HTML_WIDGET_EDITOR_EMPTY_STATE.alignment) === option.value ? "primary" : "text", size: "small", ariaLabel: option.label, tooltip: option.label, icon: option.icon, disabled: !bridge, onClick: () => {
                             bridge?.setAlignment(option.value);
                             bridge?.focus();
-                        } }, option.value))) }), children: _jsx("span", { onMouseDown: preserveEditorSelectionMouseEvent, onClick: stopOverlayEvent, onPointerDown: stopOverlayEvent, style: { display: "inline-flex" }, children: _jsx(PhiButtonControl, { type: "text", size: "small", ariaLabel: "Text alignment", tooltip: "Text alignment", icon: resolvePhiHtmlWidgetAlignmentIcon(state?.alignment ?? PHI_HTML_WIDGET_EDITOR_EMPTY_STATE.alignment), disabled: !bridge, onClick: () => undefined }) }) }), _jsx(PhiPopoverControl, { trigger: "click", placement: "bottomRight", getPopupContainer: stylePopup.getPopupContainer, rootClassName: stylePopup.rootClassName, onOpenChange: stylePopup.setOpen, zIndex: PHI_Z_INDEX.authoringPopup, content: _jsx(Flex, { vertical: true, gap: 8, onClick: stopOverlayEvent, onMouseDown: preserveEditorSelectionMouseEvent, onPointerDown: stopOverlayEvent, children: PHI_HTML_WIDGET_STYLE_TOGGLES.map((toggle) => (_jsx("div", { onMouseDown: preserveEditorSelectionMouseEvent, children: _jsx(PhiCheckboxControl, { checked: toggle.key === "bold"
+                        } }, option.value))) }), children: _jsx("span", { onMouseDown: preserveEditorSelectionMouseEvent, onClick: stopOverlayEvent, onPointerDown: stopOverlayEvent, style: { display: "inline-flex" }, children: _jsx(PhiButtonControl, { type: "text", size: "small", ariaLabel: labels.richText.alignment, tooltip: labels.richText.alignment, icon: resolvePhiHtmlWidgetAlignmentIcon(state?.alignment ?? PHI_HTML_WIDGET_EDITOR_EMPTY_STATE.alignment), disabled: !bridge, onClick: () => undefined }) }) }), _jsx(PhiPopoverControl, { trigger: "click", placement: "bottomRight", getPopupContainer: stylePopup.getPopupContainer, rootClassName: stylePopup.rootClassName, onOpenChange: stylePopup.setOpen, zIndex: PHI_Z_INDEX.authoringPopup, content: _jsx(PhiFlexControl, { vertical: true, gap: 8, onClick: stopOverlayEvent, onMouseDown: preserveEditorSelectionMouseEvent, onPointerDown: stopOverlayEvent, children: PHI_HTML_WIDGET_STYLE_TOGGLES.map((toggle) => (_jsx("div", { onMouseDown: preserveEditorSelectionMouseEvent, children: _jsx(PhiCheckboxControl, { checked: toggle.key === "bold"
                                 ? state?.bold
                                 : toggle.key === "italic"
                                     ? state?.italic
@@ -160,21 +151,21 @@ export function PhiHtmlWidgetToolbarTools({ blockId, }) {
                                             : state?.code, disabled: !bridge, label: toggle.label, onChange: () => {
                                 bridge?.toggleFormat(toggle.format);
                                 bridge?.focus();
-                            } }) }, toggle.key))) }), children: _jsx("span", { onMouseDown: preserveEditorSelectionMouseEvent, onClick: stopOverlayEvent, onPointerDown: stopOverlayEvent, style: { display: "inline-flex" }, children: _jsx(PhiButtonControl, { type: hasActiveTextStyle ? "primary" : "text", size: "small", ariaLabel: "Rich text styles", icon: _jsx(FormatPainterOutlined, {}), disabled: !bridge, onClick: () => undefined }) }) }), _jsx(PhiWidgetColorToolButton, { value: state?.textColor ?? null, ariaLabel: "Rich text color", onChange: (color) => {
+                            } }) }, toggle.key))) }), children: _jsx("span", { onMouseDown: preserveEditorSelectionMouseEvent, onClick: stopOverlayEvent, onPointerDown: stopOverlayEvent, style: { display: "inline-flex" }, children: _jsx(PhiButtonControl, { type: hasActiveTextStyle ? "primary" : "text", size: "small", ariaLabel: labels.richText.styles, icon: _jsx(FormatPainterOutlined, {}), disabled: !bridge, onClick: () => undefined }) }) }), _jsx(PhiWidgetColorToolButton, { value: state?.textColor ?? null, ariaLabel: labels.richText.color, onChange: (color) => {
                     bridge?.setTextColor(color);
                     bridge?.focus();
-                } }), _jsx(PhiInternalAssetReferencePickerButton, { blockId: blockId, ariaLabel: "Insert Site Asset", onSelect: (asset) => {
+                } }), _jsx(PhiInternalAssetReferencePickerButton, { blockId: blockId, ariaLabel: labels.richText.insertAsset, onSelect: (asset) => {
                     bridge?.insertImage(createPhiAssetUri(asset.id), asset.altText?.trim() || asset.title?.trim() || asset.originalName);
                     bridge?.focus();
-                } }), _jsx(PhiPopoverControl, { open: linkPopoverOpen, trigger: "click", placement: "bottomRight", onOpenChange: handleLinkPopoverOpenChange, getPopupContainer: linkPopup.getPopupContainer, rootClassName: linkPopup.rootClassName, zIndex: PHI_WIDGET_OVERLAY_Z_INDEX, content: _jsxs(Flex, { vertical: true, gap: 8, onClick: stopOverlayEvent, onMouseDown: stopOverlayMouseEvent, onPointerDown: stopOverlayEvent, children: [_jsx(PhiBuilderPageReferencePicker, { onSelect: (selection) => {
+                } }), _jsx(PhiPopoverControl, { open: linkPopoverOpen, trigger: "click", placement: "bottomRight", onOpenChange: handleLinkPopoverOpenChange, getPopupContainer: linkPopup.getPopupContainer, rootClassName: linkPopup.rootClassName, zIndex: PHI_WIDGET_OVERLAY_Z_INDEX, content: _jsxs(PhiFlexControl, { vertical: true, gap: 8, onClick: stopOverlayEvent, onMouseDown: stopOverlayMouseEvent, onPointerDown: stopOverlayEvent, children: [_jsx(PhiPageReferencePicker, { onSelect: (selection) => {
                                 bridge?.setLink(createPhiPageUri(selection.reference));
                                 bridge?.focus();
                                 handleLinkPopoverOpenChange(false);
-                            } }), _jsx(PhiTextControl, { size: "small", value: linkDraft, placeholder: "https://example.com", onChange: (nextValue) => setLinkDraft(nextValue ?? ""), onKeyDown: stopOverlayEvent }), _jsxs(Flex, { gap: 8, justify: "space-between", children: [_jsx(PhiButtonControl, { size: "small", disabled: !bridge || !state?.linkUrl, label: "Remove", onClick: () => {
+                            } }), _jsx(PhiTextControl, { size: "small", value: linkDraft, placeholder: "https://example.com", onChange: (nextValue) => setLinkDraft(nextValue ?? ""), onKeyDown: stopOverlayEvent }), _jsxs(PhiFlexControl, { gap: 8, justify: "space-between", children: [_jsx(PhiButtonControl, { size: "small", disabled: !bridge || !state?.linkUrl, label: labels.richText.linkRemove, onClick: () => {
                                         bridge?.setLink(null);
                                         bridge?.focus();
                                         handleLinkPopoverOpenChange(false);
-                                    } }), _jsx(PhiButtonControl, { size: "small", type: "primary", disabled: !bridge, label: "Apply", onClick: () => {
+                                    } }), _jsx(PhiButtonControl, { size: "small", type: "primary", disabled: !bridge, label: labels.richText.linkApply, onClick: () => {
                                         const nextUrl = resolveExternalOrFragmentLink(linkDraft);
                                         if (!nextUrl) {
                                             return;
@@ -182,27 +173,47 @@ export function PhiHtmlWidgetToolbarTools({ blockId, }) {
                                         bridge?.setLink(nextUrl);
                                         bridge?.focus();
                                         handleLinkPopoverOpenChange(false);
-                                    } })] })] }), children: _jsx("span", { onMouseDown: stopOverlayMouseEvent, onClick: stopOverlayEvent, onPointerDown: stopOverlayEvent, style: { display: "inline-flex" }, children: _jsx(PhiButtonControl, { type: state?.linkUrl ? "primary" : "text", size: "small", ariaLabel: "Rich text link", icon: _jsx(LinkOutlined, {}), disabled: !bridge, onClick: () => undefined }) }) })] }));
+                                    } })] })] }), children: _jsx("span", { onMouseDown: stopOverlayMouseEvent, onClick: stopOverlayEvent, onPointerDown: stopOverlayEvent, style: { display: "inline-flex" }, children: _jsx(PhiButtonControl, { type: state?.linkUrl ? "primary" : "text", size: "small", ariaLabel: labels.richText.link, icon: _jsx(LinkOutlined, {}), disabled: !bridge, onClick: () => undefined }) }) })] }));
 }
 export function PhiMarkdownWidgetToolbarTools({ blockId, }) {
+    const labels = usePhiAuthoringToolsLabels();
     const [, setRegistryVersion] = useState(0);
     useEffect(() => subscribePhiMarkdownWidgetEditorBridge(blockId, () => setRegistryVersion((current) => current + 1)), [blockId]);
     const bridge = resolvePhiMarkdownWidgetEditorBridge(blockId);
-    return (_jsxs(_Fragment, { children: [_jsx(PhiBuilderPageReferencePicker, { onSelect: (selection) => {
+    return (_jsxs(_Fragment, { children: [_jsx(PhiPageReferencePicker, { onSelect: (selection) => {
                     const label = selection.title.replaceAll("]", "\\]");
                     bridge?.insert(`[${label}](${createPhiPageUri(selection.reference)})`);
-                } }), _jsx(PhiInternalAssetReferencePickerButton, { blockId: blockId, ariaLabel: "Insert Site Asset", onSelect: (asset) => {
+                } }), _jsx(PhiInternalAssetReferencePickerButton, { blockId: blockId, ariaLabel: labels.richText.insertAsset, onSelect: (asset) => {
                     const alt = (asset.altText?.trim() || asset.title?.trim() || asset.originalName)
                         .replaceAll("]", "\\]");
                     bridge?.insert(`![${alt}](${createPhiAssetUri(asset.id)})`);
                 } })] }));
 }
 export function PhiDescriptionWidgetItemsToolButton({ value, onChange, }) {
+    const labels = usePhiAuthoringToolsLabels();
     const itemCount = Array.isArray(value) ? value.length : 0;
     const popup = usePhiWidgetScaffoldPopup();
-    return (_jsx(PhiPopoverControl, { trigger: "click", placement: "bottomRight", getPopupContainer: popup.getPopupContainer, rootClassName: popup.rootClassName, onOpenChange: popup.setOpen, zIndex: PHI_Z_INDEX.authoringPopup, content: _jsxs(Flex, { vertical: true, gap: 8, onClick: stopOverlayEvent, onMouseDown: stopOverlayMouseEvent, onPointerDown: stopOverlayEvent, children: [_jsx(Typography.Text, { type: "secondary", children: "Items" }), _jsx(PhiNumberControl, { min: 0, max: 12, precision: 0, value: itemCount, onChange: (nextValue) => {
-                        const nextCount = Math.max(0, Math.min(12, Math.trunc(nextValue ?? 0)));
-                        const nextItems = Array.from({ length: nextCount }, (_, index) => value?.[index] ?? "");
-                        onChange(nextItems);
-                    }, onKeyDown: stopOverlayEvent })] }), children: _jsx("span", { onMouseDown: stopOverlayMouseEvent, onClick: stopOverlayEvent, onPointerDown: stopOverlayEvent, style: { display: "inline-flex" }, children: _jsx(PhiButtonControl, { type: "text", size: "small", ariaLabel: "Description items", tooltip: "Description items", label: itemCount, onClick: () => undefined }) }) }));
+    /*
+     * What is being typed, apart from what is stored. The field reported every keystroke, and each one
+     * resized the list: typing "10" committed "1" first and dropped entries two onwards before the "0"
+     * arrived. The number is taken when the field is left or Enter is pressed.
+     */
+    const [draft, setDraft] = useState({ stored: itemCount, count: itemCount });
+    if (draft.stored !== itemCount) {
+        // A change from elsewhere -- an undo, another editor -- replaces what was being typed, adjusted
+        // during render so the field never shows the stale number for a frame.
+        setDraft({ stored: itemCount, count: itemCount });
+    }
+    const draftCount = draft.stored === itemCount ? draft.count : itemCount;
+    const setDraftCount = (count) => setDraft({ stored: itemCount, count });
+    const commit = () => {
+        if (draftCount === itemCount)
+            return;
+        onChange(resizePhiDescriptionItems(value, draftCount));
+    };
+    return (_jsx(PhiPopoverControl, { trigger: "click", placement: "bottomRight", getPopupContainer: popup.getPopupContainer, rootClassName: popup.rootClassName, onOpenChange: popup.setOpen, zIndex: PHI_Z_INDEX.authoringPopup, content: _jsxs(PhiFlexControl, { vertical: true, gap: 8, onClick: stopOverlayEvent, onMouseDown: stopOverlayMouseEvent, onPointerDown: stopOverlayEvent, children: [_jsx(PhiTypographyControl, { type: "secondary", children: "Items" }), _jsx(PhiNumberControl, { min: 0, max: 12, precision: 0, value: draftCount, onChange: setDraftCount, onBlur: commit, onKeyDown: (event) => {
+                        stopOverlayEvent(event);
+                        if (event.key === "Enter")
+                            commit();
+                    } })] }), children: _jsx("span", { onMouseDown: stopOverlayMouseEvent, onClick: stopOverlayEvent, onPointerDown: stopOverlayEvent, style: { display: "inline-flex" }, children: _jsx(PhiButtonControl, { type: "text", size: "small", ariaLabel: labels.descriptions.items, tooltip: labels.descriptions.items, label: itemCount, onClick: () => undefined }) }) }));
 }

package/components/widgets/config/background.d.ts

@@ -112,6 +112,29 @@ export declare const PHI_BACKGROUND_PARALLAX_DEFAULT_STRENGTH = 0.2;
  */
 export declare const PHI_BACKGROUND_PARALLAX_DEFAULT_RANGE_STRENGTH = 1;
 export declare function resolvePhiBackgroundParallaxDefaultStrength(travel: PhiBackgroundMotionTravel | undefined): 1 | 0.2;
+/**
+ * A CSS gradient read into a Base, or why it cannot be one.
+ *
+ * `null` means the string is no gradient at all and may still be a colour or an image. A string that
+ * is a gradient but not one a Base can hold is a problem, never a colour: stored as `{ kind: "color" }`
+ * it would paint for as long as the browser understood it and then be edited as a flat swatch that
+ * knows nothing of its stops.
+ */
+export type PhiBackgroundGradientCssReading = {
+    gradient: PhiBackgroundBaseGradient;
+    problem?: undefined;
+} | {
+    gradient?: undefined;
+    problem: string;
+};
+export declare function readPhiBackgroundGradientCss(css: string): PhiBackgroundGradientCssReading | null;
+/**
+ * A Base from one CSS `background` value, or `null` for a gradient that cannot be one.
+ *
+ * `null` and not a colour: see `readPhiBackgroundGradientCss`. A reader that meets it has nothing to
+ * paint; a writer refuses the value and keeps what it had.
+ */
+export declare function readPhiBackgroundBaseCss(css: string): PhiCmsBackgroundWidgetConfig["base"] | null;
 export declare function normalizePhiBackgroundWidgetConfig(config: unknown): PhiCmsBackgroundWidgetConfig;
 /**
  * The ink as CSS, and back.

package/components/widgets/config/background.js

@@ -59,8 +59,7 @@ function readBackgroundStops(value) {
     if (!Array.isArray(value)) {
         return undefined;
     }
-    const stops = value
-        .map((stop) => {
+    const stops = value.map((stop) => {
         if (!stop || typeof stop !== "object" || Array.isArray(stop)) {
             return null;
         }
@@ -68,9 +67,11 @@ function readBackgroundStops(value) {
         const color = readString(raw.color);
         const percent = readNumber(raw.percent);
         return color && percent !== undefined ? { color, percent } : null;
-    })
-        .filter((stop) => stop !== null);
-    return stops.length > 0 ? stops : undefined;
+    });
+    // One unreadable stop makes it a different gradient than the one written; dropping it would paint that.
+    return stops.length >= 2 && stops.every((stop) => stop !== null)
+        ? stops
+        : undefined;
 }
 function splitPhiBackgroundGradientStops(input) {
     const stops = [];
@@ -93,23 +94,106 @@ function splitPhiBackgroundGradientStops(input) {
         stops.push(current.trim());
     return stops;
 }
-function parsePhiBackgroundGradientCss(background) {
-    if (!background.startsWith("linear-gradient(") || !background.endsWith(")")) {
+const PHI_BACKGROUND_CSS_NUMBER = "[-+]?(?:\\d+(?:\\.\\d+)?|\\.\\d+)";
+const PHI_BACKGROUND_CSS_ANGLE = new RegExp(`^(${PHI_BACKGROUND_CSS_NUMBER})(deg|grad|rad|turn)$`, "i");
+const PHI_BACKGROUND_CSS_STOP = new RegExp(`^(.+?)(?:\\s+(${PHI_BACKGROUND_CSS_NUMBER})%)?$`);
+const PHI_BACKGROUND_DEGREES_PER_UNIT = { deg: 1, grad: 0.9, rad: 180 / Math.PI, turn: 360 };
+/**
+ * The first argument, when it is a direction.
+ *
+ * Only an angle or `to <side>` is one. Everything else is the first colour stop -- `red 0%` included,
+ * which read as a direction used to swallow the first stop and fall back to `to right`. A direction the
+ * Base cannot hold (a corner, an unreadable angle) is a problem rather than a stop.
+ */
+function readPhiBackgroundGradientCssDirection(part) {
+    const side = part.match(/^to\s+(.+)$/i);
+    if (side) {
+        const target = side[1].trim().toLowerCase();
+        return target === "right" || target === "left" || target === "bottom" || target === "top"
+            ? { direction: `to ${target}` }
+            : { problem: `Gradient direction "${part}" is not supported; use an angle or one side.` };
+    }
+    const angle = part.match(PHI_BACKGROUND_CSS_ANGLE);
+    if (!angle) {
         return null;
     }
-    const parts = splitPhiBackgroundGradientStops(background.slice("linear-gradient(".length, -1));
-    if (parts.length < 2)
+    const unit = angle[2].toLowerCase();
+    const degrees = Number(angle[1]) * PHI_BACKGROUND_DEGREES_PER_UNIT[unit];
+    return Number.isFinite(degrees)
+        ? { direction: `${Math.round(degrees * 1000) / 1000}deg` }
+        : { problem: `Gradient angle "${part}" is not a number.` };
+}
+function readPhiBackgroundGradientCssStop(part) {
+    const match = part.match(PHI_BACKGROUND_CSS_STOP);
+    const color = match?.[1]?.trim();
+    if (!match || !color) {
         return null;
-    const stops = parts.slice(1).map((part) => {
-        const match = part.match(/(.+)\s+(\d+)%$/);
-        return match ? { color: match[1].trim(), percent: Number(match[2]) } : null;
-    });
-    if (stops.some((stop) => !stop))
+    }
+    // A colour is one token outside its parentheses; anything left over is a second position or a length.
+    let bare = color;
+    while (/\([^()]*\)/.test(bare))
+        bare = bare.replace(/\([^()]*\)/g, "");
+    if (/\s/.test(bare)) {
         return null;
+    }
+    const percent = match[2] == null ? null : Number(match[2]);
+    return percent == null || Number.isFinite(percent) ? { color, percent } : null;
+}
+/**
+ * Positions for stops that name none, the way CSS places them: the first at 0, the last at 100, and
+ * any run in between evenly spaced between its neighbours.
+ */
+function placePhiBackgroundGradientStops(stops) {
+    const percents = stops.map((stop) => stop.percent);
+    percents[0] ??= 0;
+    percents[percents.length - 1] ??= 100;
+    let previous = 0;
+    while (previous < percents.length - 1) {
+        let next = previous + 1;
+        while (percents[next] == null)
+            next += 1;
+        const start = percents[previous];
+        const end = percents[next];
+        for (let index = previous + 1; index < next; index += 1) {
+            percents[index] = start + ((end - start) * (index - previous)) / (next - previous);
+        }
+        previous = next;
+    }
+    return stops.map((stop, index) => ({ color: stop.color, percent: percents[index] }));
+}
+export function readPhiBackgroundGradientCss(css) {
+    const background = css.trim();
+    const kind = background.match(/^([a-z-]*gradient)\(/i)?.[1]?.toLowerCase();
+    if (!kind) {
+        return null;
+    }
+    if (kind !== "linear-gradient") {
+        return { problem: `A Background gradient is linear; "${kind}" is not supported.` };
+    }
+    if (!background.endsWith(")")) {
+        return { problem: "The gradient is not closed." };
+    }
+    const parts = splitPhiBackgroundGradientStops(background.slice("linear-gradient(".length, -1));
+    const direction = parts.length > 0 ? readPhiBackgroundGradientCssDirection(parts[0]) : null;
+    if (direction && "problem" in direction) {
+        return { problem: direction.problem };
+    }
+    const stopParts = direction ? parts.slice(1) : parts;
+    if (stopParts.length < 2) {
+        return { problem: "A gradient needs at least two colour stops." };
+    }
+    const stops = stopParts.map(readPhiBackgroundGradientCssStop);
+    const unreadable = stops.findIndex((stop) => stop === null);
+    if (unreadable >= 0) {
+        return { problem: `Gradient stop "${stopParts[unreadable]}" is not a colour with a percentage.` };
+    }
     return {
-        kind: "gradient",
-        direction: readBackgroundDirection(parts[0]),
-        stops: stops,
+        gradient: {
+            kind: "gradient",
+            // What CSS draws when a gradient names no direction.
+            direction: direction?.direction ?? "to bottom",
+            stops: placePhiBackgroundGradientStops(stops),
+        },
     };
 }
 function parsePhiBackgroundImageCss(background) {
@@ -118,24 +202,32 @@ function parsePhiBackgroundImageCss(background) {
     const match = background.match(/^url\((["']?)(.*?)\1\)/);
     return match?.[2] ? { kind: "image", sourceKind: "url", sourceUrl: match[2] } : null;
 }
+/**
+ * A Base from one CSS `background` value, or `null` for a gradient that cannot be one.
+ *
+ * `null` and not a colour: see `readPhiBackgroundGradientCss`. A reader that meets it has nothing to
+ * paint; a writer refuses the value and keeps what it had.
+ */
+export function readPhiBackgroundBaseCss(css) {
+    const gradient = readPhiBackgroundGradientCss(css);
+    if (gradient) {
+        return gradient.gradient ?? null;
+    }
+    return parsePhiBackgroundImageCss(css) ?? { kind: "color", color: css };
+}
 function normalizePhiBackgroundBase(value) {
     if (typeof value === "string") {
-        return parsePhiBackgroundGradientCss(value) ??
-            parsePhiBackgroundImageCss(value) ?? { kind: "color", color: value };
+        return readPhiBackgroundBaseCss(value);
     }
     if (!value || typeof value !== "object" || Array.isArray(value))
         return null;
     const raw = value;
     const kind = readString(raw.kind);
     if (kind === "gradient") {
-        return {
-            kind,
-            direction: readBackgroundDirection(raw.direction ?? raw.backgroundDirection),
-            stops: readBackgroundStops(raw.stops) ?? readBackgroundStops(raw.colors) ?? [
-                { color: readString(raw.from) ?? "#ffffff", percent: 0 },
-                { color: readString(raw.to) ?? "#000000", percent: 100 },
-            ],
-        };
+        // Stops or nothing: a gradient without them has nothing to paint, and inventing white to black
+        // would put a Background on screen that nobody authored.
+        const stops = readBackgroundStops(raw.stops);
+        return stops ? { kind, direction: readBackgroundDirection(raw.direction), stops } : null;
     }
     if (kind === "image") {
         const source = readPhiMediaImageSourceConfig(raw);
@@ -157,24 +249,20 @@ function normalizePhiBackgroundBase(value) {
     }
     if (kind === "none")
         return { kind };
-    if (kind === "color")
-        return { kind, color: readString(raw.color) ?? "#ffffff" };
+    if (kind === "color") {
+        const color = readString(raw.color);
+        return color ? { kind, color } : null;
+    }
     const background = readString(raw.background);
     if (background) {
         if (background === "none" || background === "transparent")
             return { kind: "none" };
-        return parsePhiBackgroundGradientCss(background) ??
-            parsePhiBackgroundImageCss(background) ?? { kind: "color", color: background };
+        return readPhiBackgroundBaseCss(background);
     }
     const color = readString(raw.color);
     return color ? { kind: "color", color } : null;
 }
-/**
- * The ink, from the Overlay's own field or from a bare colour.
- *
- * The bare colour is what the field looked like before a gradient was possible; reading it here keeps a
- * record written then rendering what it rendered, without a migration.
- */
+/** The ink, as a colour string or as the structure a Base colour or gradient has. */
 function readBackgroundPatternInk(value) {
     if (typeof value === "string") {
         const color = value.trim();
@@ -194,7 +282,7 @@ function readBackgroundOverlay(value) {
     const raw = value;
     const kind = readString(raw.kind);
     if (kind === "color") {
-        const inkValue = readBackgroundPatternInk(raw.ink) ?? readBackgroundPatternInk(raw.color);
+        const inkValue = readBackgroundPatternInk(raw.ink);
         return {
             kind,
             opacity: readNumber(raw.opacity),
@@ -221,7 +309,7 @@ function readBackgroundOverlay(value) {
         const fieldValue = entry[1];
         return typeof fieldValue === "string" || typeof fieldValue === "boolean" || (typeof fieldValue === "number" && Number.isFinite(fieldValue));
     }));
-    const ink = readBackgroundPatternInk(raw.ink) ?? readBackgroundPatternInk(raw.color);
+    const ink = readBackgroundPatternInk(raw.ink);
     return {
         kind,
         patternKey,
@@ -256,8 +344,7 @@ function readBackgroundMotion(value) {
 export function normalizePhiBackgroundWidgetConfig(config) {
     if (typeof config === "string") {
         return {
-            base: parsePhiBackgroundGradientCss(config) ??
-                parsePhiBackgroundImageCss(config) ?? { kind: "color", color: config },
+            base: readPhiBackgroundBaseCss(config) ?? { kind: "none" },
             overlay: null,
             effect: null,
             motion: null,