@phis/ui 0.2.0 → 0.3.0

package/plugins/runtime-modules/core/widgets/card/server.js

@@ -1,34 +1,37 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { trBulk } from "../../../../../server-helpers/translate";
+import { isPhiMediaSvgContentType } from "../../../../../constants/media";
 import { resolvePhiImagePresentation } from "../../../../../components/media/image-presentation";
 import { resolvePhiPublicAssetReference } from "../../../../../components/widgets/helpers/internal-reference-resolver.server";
+import { resolvePhiLinkHref } from "../../../../../helpers/link-target";
 import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
 import { PhiRuntimeModuleRenderClientHost } from "../../../../../components/runtime/runtime-module-render-client-manifest";
-export async function PhiCardWidget({ labels, config, runtime, translate, }) {
+import { getPhiCardWidgetLabelsForRuntime } from "../../../../../components/widgets/label-sets/card";
+export async function PhiCardWidget({ labels, config, runtime, links, translate, preview = false, }) {
+    /*
+     * The button's words: the author's, or none where they emptied them for an icon-only button, or the
+     * label set's when they never wrote any -- which is translated there, not here.
+     */
+    const actionEnabled = config?.actionEnabled === true;
+    const defaultLabels = actionEnabled ? await getPhiCardWidgetLabelsForRuntime(runtime) : null;
+    const ownActionLabel = labels.actionLabel ?? config?.actionLabel;
     const textEntries = [
         ["eyebrow", labels.eyebrow ?? config?.eyebrow],
         ["title", labels.title ?? config?.title],
         ["description", labels.description ?? config?.description],
         ["meta", labels.meta ?? config?.meta],
-        ["actionLabel", labels.actionLabel ?? config?.actionLabel],
+        ["actionLabel", actionEnabled ? ownActionLabel : undefined],
     ];
     const translatedTexts = translate
         ? await trBulk(textEntries.map(([, value]) => value ?? ""))
         : textEntries.map(([, value]) => value ?? "");
     const translatedByKey = new Map(textEntries.map(([key], index) => [key, translatedTexts[index] || undefined]));
-    const eyebrow = translatedByKey.get("eyebrow");
-    const title = translatedByKey.get("title");
-    const description = translatedByKey.get("description");
-    const meta = translatedByKey.get("meta");
-    const actionLabel = translatedByKey.get("actionLabel");
     /*
-     * The figure is left out of that list on purpose.
-     *
-     * A label set answers for words, and a Site's own number is not one. Sending it through the
-     * translator would make "1,204" a message id, and `translate` is a per-Widget switch, so a stat card
-     * that turned it off to protect the figure would lose its title's translation with it.
+     * The figure is left out of the translation on purpose: a Site's own number is not a word, and
+     * `translate` is a per-Widget switch, so a stat card that turned it off to protect the figure would
+     * lose its title's translation with it.
      */
-    const value = labels.value ?? config?.value;
+    const value = config?.value;
     const resolvedAsset = config?.sourceKind === "asset" && typeof config.assetId === "number"
         ? await resolvePhiPublicAssetReference({ runtime, assetId: config.assetId }).catch(() => null)
         : null;
@@ -44,28 +47,64 @@ export async function PhiCardWidget({ labels, config, runtime, translate, }) {
         sourceWidth: resolvedAsset?.width,
         sourceHeight: resolvedAsset?.height,
     });
+    // The target is resolved here and the address travels: a Page reference means nothing in a browser.
+    const link = preview ? null : resolvePhiLinkHref(config?.linkTarget, links);
+    const actionLink = preview || !actionEnabled ? null : resolvePhiLinkHref(config?.actionLinkTarget, links);
+    const clientConfig = {
+        surface: config?.surface ?? null,
+        image: presentation.url
+            ? {
+                presentation,
+                ...(config?.imageOpacity == null ? {} : { opacity: config.imageOpacity / 100 }),
+                source: config?.sourceKind === "asset" ? "asset" : "url",
+                alt: (config?.alt ?? resolvedAsset?.altText ?? "").trim(),
+                blurDataUrl: resolvedAsset?.blurDataUrl ?? null,
+                /*
+                 * Only a public Asset resolves here, so the optimiser takes every variant, and every original
+                 * that is not an SVG -- which it refuses whatever the Asset says.
+                 */
+                optimizable: resolvedAsset != null
+                    && (presentation.kind === "generated-variant" || !isPhiMediaSvgContentType(resolvedAsset.contentType)),
+            }
+            : null,
+        iconName: config?.icon,
+        iconPlacement: config?.iconPlacement,
+        iconColor: config?.iconColor,
+        iconBackground: config?.iconBackground,
+        textAlign: config?.textAlign,
+        headingLevel: config?.headingLevel,
+        href: link?.href,
+        newTab: link?.newTab,
+        external: link?.external,
+        /*
+         * The button leads where its own target says; without one it still draws when it is on, and what
+         * it does is wired from the Signals panel.
+         */
+        action: actionEnabled
+            ? {
+                ...(actionLink ? { href: actionLink.href, newTab: actionLink.newTab, external: actionLink.external } : {}),
+                ...(config?.actionIcon ? { icon: config.actionIcon } : {}),
+                ...(defaultLabels ? { ariaLabel: defaultLabels.actionLabel } : {}),
+            }
+            : null,
+        variant: config?.variant,
+        body: config?.body,
+        highlight: config?.highlight,
+        // Only a card that leads somewhere answers the pointer; the preview has no link but shows it.
+        hoverEffect: config?.linkTarget ? config.hoverEffect : undefined,
+        signalRoutes: preview ? null : config?.signalRoutes ?? null,
+    };
     return (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiCmsWidgetType.Card, componentProps: {
             labels: {
-                eyebrow,
-                title,
-                description,
-                meta,
-                actionLabel,
+                eyebrow: translatedByKey.get("eyebrow"),
+                title: translatedByKey.get("title"),
+                description: translatedByKey.get("description"),
+                meta: translatedByKey.get("meta"),
+                actionLabel: ownActionLabel === undefined
+                    ? defaultLabels?.actionLabel
+                    : translatedByKey.get("actionLabel") ?? "",
                 value,
             },
-            config: {
-                imageUrl: presentation.url ?? undefined,
-                imageFit: presentation.fit,
-                imagePosition: presentation.objectPosition,
-                alt: config?.alt ?? resolvedAsset?.altText ?? undefined,
-                blurDataUrl: resolvedAsset?.blurDataUrl ?? config?.blurDataUrl ?? undefined,
-                href: config?.href,
-                newTab: config?.newTab,
-                actionHref: config?.actionHref,
-                actionNewTab: config?.actionNewTab,
-                variant: config?.variant,
-                body: config?.body,
-                highlight: config?.highlight,
-            },
+            config: clientConfig,
         } }));
 }

package/plugins/runtime-modules/core/widgets/cascader/authoring.d.ts

@@ -1,23 +1,28 @@
 import { type PhiCascaderWidgetConfig } from "./config";
 export declare const PHI_CASCADER_WIDGET_BUILDER_PLUGIN: {
     renderEditorTools: ({ config, authoring }: import("../../../../../types").PhiCmsBuilderWidgetRenderArgs<PhiCascaderWidgetConfig>) => import("react").JSX.Element | null;
-    kind: "widget";
+    surface?: import("../../../../../types/surface").PhiSurfacePolicy | undefined;
     title: string;
-    description?: string | undefined;
-    tags?: string[] | undefined;
+    kind: "widget";
     icon?: string | undefined;
     category: import("../../../../../cms").PhiCmsPluginCategory;
-    defaultConfig?: Partial<PhiCascaderWidgetConfig> | undefined;
+    tags?: string[] | undefined;
+    description?: string | undefined;
     iconFamily?: string | undefined;
     pluginKey: string;
     runtimeSignals?: (import("../../../../../types").PhiSignalPluginMeta | null) | undefined;
+    defaultConfig?: Partial<PhiCascaderWidgetConfig> | undefined;
     typeKey: string;
     iconName?: string | undefined;
     commercial?: import("../../../../../types").PhiCmsPluginCommercialMeta | undefined;
     signalSubcontrols?: readonly import("../../../../../types").PhiCmsWidgetSignalSubcontrolCollection[] | undefined;
     requiredRuntimeControllers?: import("../../../../../types").PhiCmsWidgetRuntimeControllerRequirementResolver<PhiCascaderWidgetConfig> | undefined;
     requiredDataProviders?: readonly import("@phis/contracts/controls").PhiRuntimeDataProviderKey[] | undefined;
+    contentBinding?: (import("../../../../../types").PhiCmsWidgetContentBinding | null) | undefined;
+    translatesOwnText?: true | undefined;
     slotSizePolicy: import("../../../../../types").PhiSlotSizePolicy;
+    requiredRegionOwnership?: import("../../../../../helpers/cms-region-keys").PhiCmsRegionOwnership | undefined;
+    creationConfig?: Partial<PhiCascaderWidgetConfig> | undefined;
     fields: import("../../../../../types").PhiCmsConfigField[];
     parseConfig: (raw: Record<string, unknown>) => PhiCascaderWidgetConfig;
     editorInteraction?: import("../../../../../types").PhiCmsBuilderWidgetEditorInteraction;

package/plugins/runtime-modules/core/widgets/cascader/config.d.ts

@@ -11,7 +11,7 @@ export type PhiCascaderWidgetConfig = PhiControlConfig & PhiChoiceOptionsConfig
     normalize?: PhiCascaderNormalizeMode;
     options: PhiCascaderOption[];
 };
-export declare function parsePhiCascaderWidgetConfig(config: Record<string, unknown>): PhiCascaderWidgetConfig;
+declare function parsePhiCascaderWidgetConfig(config: Record<string, unknown>): PhiCascaderWidgetConfig;
 export declare const PHI_CASCADER_WIDGET_DEFINITION: {
     kind: "widget";
     pluginKey: string;
@@ -59,7 +59,7 @@ export declare const PHI_CASCADER_WIDGET_DEFINITION: {
         key: string;
         type: "collection";
         label: string;
-        editorPlacement: "inspector" | "toolbar";
+        editorPlacement: "toolbar" | "inspector";
         itemKeyField: string;
         itemLabelField: string;
         defaultItem: {
@@ -118,3 +118,4 @@ export declare const PHI_CASCADER_WIDGET_DEFINITION: {
     };
     parseConfig: typeof parsePhiCascaderWidgetConfig;
 };
+export {};

package/plugins/runtime-modules/core/widgets/cascader/config.js

@@ -6,7 +6,7 @@ import { buildPhiChoiceControlOptionFields, parsePhiChoiceOptionsConfig, } from
 function readNormalizeMode(value) {
     return readString(value) === "path" ? "path" : "raw";
 }
-export function parsePhiCascaderWidgetConfig(config) {
+function parsePhiCascaderWidgetConfig(config) {
     const controlState = parsePhiControlConfig(config, {
         key: "cascader",
     });

package/plugins/runtime-modules/core/widgets/checkbox-group/config.d.ts

@@ -9,7 +9,7 @@ export type PhiCheckboxGroupWidgetConfig = PhiChoiceOptionsConfig & {
     disabled?: boolean;
     readOnly?: boolean;
 };
-export declare function parsePhiCheckboxGroupWidgetConfig(config: Record<string, unknown>): PhiCheckboxGroupWidgetConfig;
+declare function parsePhiCheckboxGroupWidgetConfig(config: Record<string, unknown>): PhiCheckboxGroupWidgetConfig;
 export declare const PHI_CHECKBOX_GROUP_WIDGET_DEFINITION: {
     kind: "widget";
     pluginKey: string;
@@ -49,7 +49,7 @@ export declare const PHI_CHECKBOX_GROUP_WIDGET_DEFINITION: {
         key: string;
         type: "collection";
         label: string;
-        editorPlacement: "inspector" | "toolbar";
+        editorPlacement: "toolbar" | "inspector";
         itemKeyField: string;
         itemLabelField: string;
         defaultItem: {
@@ -105,3 +105,4 @@ export declare const PHI_CHECKBOX_GROUP_WIDGET_DEFINITION: {
     };
     parseConfig: typeof parsePhiCheckboxGroupWidgetConfig;
 };
+export {};

package/plugins/runtime-modules/core/widgets/checkbox-group/config.js

@@ -3,7 +3,7 @@ import { PHI_MULTI_SELECT_CONTROL_SIGNALS } from "../../../../../components/widg
 import { PHI_CONTROL_STATE_FIELDS, parsePhiControlStateConfig } from "../../../../../components/widgets/config/control-signal-config";
 import { readBoolean, readString } from "../../../../../components/widgets/config/parser-primitives";
 import { buildPhiChoiceControlOptionFields, parsePhiChoiceOptionsConfig, } from "../../../../../components/widgets/config/choice-shared";
-export function parsePhiCheckboxGroupWidgetConfig(config) {
+function parsePhiCheckboxGroupWidgetConfig(config) {
     return {
         ...parsePhiControlStateConfig(config, { key: "checkbox-group" }),
         label: readString(config.label),

package/plugins/runtime-modules/core/widgets/collection-view/asset-binding.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { isPhiRecord } from "../../../../../helpers/is-record";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { PhiMediaAssetFlags, PhiMediaKind } from "../../../../../constants/media";
 import { createPhiSignalSubcontrolAddress } from "../../../../../types/signals";
@@ -40,8 +41,25 @@ function readAssetKinds(value) {
         return [];
     return value.filter((entry) => typeof entry === "string" && Object.values(PhiMediaKind).includes(entry));
 }
+/*
+ * Labels laid over the defaults key by key, through every nested group. A configured set that names only
+ * some labels -- `grid.deleteSuccessTemplate` and nothing else -- used to replace the whole set, and the
+ * first label it did not name was read as undefined and thrown on.
+ */
+function overlayPhiAssetLabels(base, override) {
+    if (!isPhiRecord(base) || !isPhiRecord(override)) {
+        return (typeof override === typeof base ? override : base);
+    }
+    const result = { ...base };
+    for (const [key, value] of Object.entries(override)) {
+        if (value !== undefined && key in base) {
+            result[key] = overlayPhiAssetLabels(base[key], value);
+        }
+    }
+    return result;
+}
 export function PhiAssetCollectionViewBinding({ config, binding, labels: rawLabels, widgetId, }) {
-    const labels = (config.presentation.labels ?? rawLabels ?? PHI_MEDIA_WIDGET_DEFAULT_LABELS);
+    const labels = useMemo(() => overlayPhiAssetLabels(PHI_MEDIA_WIDGET_DEFAULT_LABELS, config.presentation.labels ?? rawLabels), [config.presentation.labels, rawLabels]);
     const { token } = usePhiConfig();
     const { showMessage } = usePhiApplicationFeedback();
     const selectionState = usePhiImagePreviewStore(PHI_ASSET_CONTROLLER_STORE_KEY);
@@ -114,7 +132,7 @@ export function PhiAssetCollectionViewBinding({ config, binding, labels: rawLabe
         signalRoutes: config.signalRoutes,
         valueType: "json",
         typeKey: "collection-view",
-        coerceValue: (nextValue) => nextValue && typeof nextValue === "object" && !Array.isArray(nextValue)
+        coerceValue: (nextValue) => isPhiRecord(nextValue)
             ? nextValue
             : null,
     });

package/plugins/runtime-modules/core/widgets/collection-view/config.d.ts

@@ -3,10 +3,7 @@ import type { PhiCmsCollectionViewWidgetConfig } from "../../../../../types/coll
 export type PhiCmsAssetPreviewGridWidgetConfig = PhiCmsWidgetConfigBase & {
     emptyDescription?: string;
 };
-export declare function normalizePhiCmsAssetPreviewGridWidgetConfig(config: unknown): PhiCmsAssetPreviewGridWidgetConfig;
-export declare function parsePhiCmsAssetPreviewGridWidgetConfig(config: Record<string, unknown>): PhiCmsAssetPreviewGridWidgetConfig;
-export declare function normalizePhiCmsCollectionViewWidgetConfig(config: unknown): PhiCmsCollectionViewWidgetConfig;
-export declare function parsePhiCmsCollectionViewWidgetConfig(config: Record<string, unknown>): PhiCmsCollectionViewWidgetConfig;
+declare function parsePhiCmsCollectionViewWidgetConfig(config: Record<string, unknown>): PhiCmsCollectionViewWidgetConfig;
 export declare const PHI_COLLECTION_VIEW_WIDGET_DEFINITION: {
     kind: "widget";
     pluginKey: string;
@@ -397,3 +394,4 @@ export declare const PHI_COLLECTION_VIEW_WIDGET_DEFINITION: {
     parseConfig: typeof parsePhiCmsCollectionViewWidgetConfig;
 };
 export declare const PHI_COLLECTION_VIEW_WIDGET_PLUGIN_TYPE: string;
+export {};

package/plugins/runtime-modules/core/widgets/collection-view/config.js

@@ -1,4 +1,5 @@
 import { resolvePhiCmsWidgetPluginKey } from "../../../../../constants/cms-widget-types";
+import { PHI_CARD_VARIANTS } from "../../../../../components/widgets/shared/card-vocabulary";
 import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
 import { readPhiProviderResourceSource } from "../../../../../types/runtime-data-provider";
 import { PHI_SIGNAL_VALUE_SCHEMAS, readPhiSignalRouteSet } from "../../../../../types/signals";
@@ -7,14 +8,6 @@ import { PHI_AUTHORING_OPTION_PROVIDER_KEYS } from "../../../../../constants/aut
 import { readPhiLengthValue } from "../../../../../types/length";
 import { readBoolean, readNumber, readNumberList, readString } from "../../../../../components/widgets/config/parser-primitives";
 import { isPhiRecord } from "../../../../../helpers/is-record";
-export function normalizePhiCmsAssetPreviewGridWidgetConfig(config) {
-    if (!config || typeof config !== "object" || Array.isArray(config))
-        return { emptyDescription: undefined };
-    return { emptyDescription: readString(config.emptyDescription) };
-}
-export function parsePhiCmsAssetPreviewGridWidgetConfig(config) {
-    return normalizePhiCmsAssetPreviewGridWidgetConfig(config);
-}
 function readCardPresentation(value) {
     if (!isPhiRecord(value)) {
         return undefined;
@@ -26,13 +19,14 @@ function readCardPresentation(value) {
         description: readString(value.description),
         meta: readString(value.meta),
         imageUrl: readString(value.imageUrl),
-        iconUrl: readString(value.iconUrl),
+        icon: readString(value.icon),
+        value: readString(value.value),
         href: readString(value.href),
         actionLabel: readString(value.actionLabel),
         actionHref: readString(value.actionHref),
-        variant: variant === "compact" || variant === "featured" || variant === "default"
-            ? variant
-            : undefined,
+        variant: PHI_CARD_VARIANTS.find((candidate) => candidate === variant),
+        body: value.body === "text" || value.body === "stat" ? value.body : undefined,
+        highlight: readString(value.highlight),
     };
 }
 function readMode(value) {
@@ -99,7 +93,7 @@ function readInitialQuery(value) {
             : undefined,
     };
 }
-export function normalizePhiCmsCollectionViewWidgetConfig(config) {
+function normalizePhiCmsCollectionViewWidgetConfig(config) {
     const raw = isPhiRecord(config) ? config : {};
     const presentation = isPhiRecord(raw.presentation) ? raw.presentation : {};
     const features = isPhiRecord(raw.features) ? raw.features : {};
@@ -145,7 +139,7 @@ export function normalizePhiCmsCollectionViewWidgetConfig(config) {
         signalRoutes: readPhiSignalRouteSet(raw.signalRoutes),
     };
 }
-export function parsePhiCmsCollectionViewWidgetConfig(config) {
+function parsePhiCmsCollectionViewWidgetConfig(config) {
     return normalizePhiCmsCollectionViewWidgetConfig(config);
 }
 export const PHI_COLLECTION_VIEW_WIDGET_DEFINITION = {

package/plugins/runtime-modules/core/widgets/color/client.js

@@ -14,5 +14,5 @@ export function PhiColorWidget({ config, disabled = config.disabled ?? false })
         clearValue: defaultValue,
         coerceValue: (nextValue) => (typeof nextValue === "string" ? nextValue : null),
     });
-    return (_jsx(PhiColorFieldControl, { label: config.label, value: config.value, defaultValue: defaultValue, tokenKey: config.key, mode: config.mode, disabled: controlSignals.disabled || controlSignals.readOnly, onChange: (nextValue) => controlSignals.emitChange(nextValue), onClear: () => controlSignals.emitClear() }));
+    return (_jsx(PhiColorFieldControl, { label: config.label, value: config.value, defaultValue: defaultValue, tokenKey: config.key, mode: config.mode, showText: config.display === "swatch" ? false : undefined, allowClear: config.allowClear, disabled: controlSignals.disabled || controlSignals.readOnly, onChange: (nextValue) => controlSignals.emitChange(nextValue), onClear: () => controlSignals.emitClear() }));
 }

package/plugins/runtime-modules/core/widgets/color/config.d.ts

@@ -1,17 +1,20 @@
 import type { PhiSignalRouteSet } from "../../../../../types/signals";
 import type { PhiCmsConfigFieldColorMode } from "../../../../../types/cms-plugins";
+/** What the trigger shows: the swatch with its value written out, or the swatch alone. */
+export type PhiColorWidgetDisplay = "value" | "swatch";
 export type PhiColorWidgetConfig = {
     label?: string;
     value?: string;
     defaultValue?: string;
     mode?: PhiCmsConfigFieldColorMode;
+    display?: PhiColorWidgetDisplay;
     signalRoutes?: PhiSignalRouteSet | null;
     key?: string;
     allowClear?: boolean;
     readOnly?: boolean;
     disabled?: boolean;
 };
-export declare function parsePhiColorWidgetConfig(config: Record<string, unknown>): PhiColorWidgetConfig;
+declare function parsePhiColorWidgetConfig(config: Record<string, unknown>): PhiColorWidgetConfig;
 export declare const PHI_COLOR_WIDGET_DEFINITION: {
     kind: "widget";
     pluginKey: string;
@@ -20,6 +23,7 @@ export declare const PHI_COLOR_WIDGET_DEFINITION: {
     title: string;
     description: string;
     category: "configuration";
+    icon: string;
     iconFamily: string;
     runtimeSignals: {
         emits: {
@@ -66,8 +70,10 @@ export declare const PHI_COLOR_WIDGET_DEFINITION: {
         options?: undefined;
     })[];
     defaultConfig: {
-        mode: "both";
+        mode: "single";
+        display: "value";
         key: string;
     };
     parseConfig: typeof parsePhiColorWidgetConfig;
 };
+export {};

package/plugins/runtime-modules/core/widgets/color/config.js

@@ -9,7 +9,11 @@ function readColorMode(value) {
     }
     return undefined;
 }
-export function parsePhiColorWidgetConfig(config) {
+function readColorDisplay(value) {
+    const display = readString(value);
+    return display === "value" || display === "swatch" ? display : undefined;
+}
+function parsePhiColorWidgetConfig(config) {
     const controlState = parsePhiControlStateConfig(config, {
         key: "color",
     });
@@ -19,6 +23,7 @@ export function parsePhiColorWidgetConfig(config) {
         value: readString(config.value),
         defaultValue: readString(config.defaultValue),
         mode: readColorMode(config.mode),
+        display: readColorDisplay(config.display),
         allowClear: readBoolean(config.allowClear),
     };
 }
@@ -30,6 +35,7 @@ export const PHI_COLOR_WIDGET_DEFINITION = {
     title: "Color",
     description: "Reusable color control widget for CMS builder surfaces.",
     category: "configuration",
+    icon: "antd:bg-colors-outlined",
     iconFamily: "config",
     runtimeSignals: {
         ...PHI_COLOR_CONTROL_SIGNALS,
@@ -46,13 +52,23 @@ export const PHI_COLOR_WIDGET_DEFINITION = {
                 { value: "both", label: "Both" },
             ],
         },
+        {
+            key: "display",
+            type: "choice",
+            label: "Display",
+            options: [
+                { value: "value", label: "Swatch and value" },
+                { value: "swatch", label: "Swatch only" },
+            ],
+        },
         { key: "value", type: "color", label: "Value", mode: "both" },
         { key: "defaultValue", type: "color", label: "Default Value", mode: "both" },
         { key: "allowClear", type: "boolean", label: "Allow Clear" },
         ...PHI_CONTROL_STATE_FIELDS,
     ],
     defaultConfig: {
-        mode: "both",
+        mode: "single",
+        display: "value",
         key: "color",
     },
     parseConfig: parsePhiColorWidgetConfig,

package/plugins/runtime-modules/core/widgets/color/plugin.js

@@ -1,19 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { buildPhiWidgetLabelTranslatorOptions } from "../../../../../components/widgets/label-sets/runtime-options";
 import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
 import { PhiRuntimeModuleRenderClientHost } from "../../../../../components/runtime/runtime-module-render-client-manifest";
 import { PHI_COLOR_WIDGET_DEFINITION } from "./config";
-import { getPhiColorPickerLabelsForRuntime } from "../../../../../components/widgets/label-sets/color-picker";
+import { getPhiColorPickerLabels } from "../../../../../components/widgets/label-sets/color-picker";
 export const PHI_COLOR_WIDGET_PLUGIN = {
     ...PHI_COLOR_WIDGET_DEFINITION,
     render: async ({ widget, config, runtime }) => (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiCmsWidgetType.Color, componentProps: {
             blockId: widget.id,
             config,
-            labels: await getPhiColorPickerLabelsForRuntime(runtime),
+            labels: await getPhiColorPickerLabels(buildPhiWidgetLabelTranslatorOptions(runtime)),
         } })),
     renderPreview: async ({ widget, config, runtime }) => (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiCmsWidgetType.Color, componentProps: {
             blockId: widget.id,
             config,
-            labels: await getPhiColorPickerLabelsForRuntime(runtime),
+            labels: await getPhiColorPickerLabels(buildPhiWidgetLabelTranslatorOptions(runtime)),
             disabled: true,
             signalsEnabled: false,
         } })),

package/plugins/runtime-modules/core/widgets/command-toolbar/authoring.js

@@ -1,14 +1,15 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PhiCommandToolbarWidget } from "./client";
-import { PHI_COMMAND_TOOLBAR_WIDGET_DEFINITION, filterPhiCommandToolbarButtonsForViewer, } from "./config";
+import { PHI_COMMAND_TOOLBAR_BUTTON_BOUNDS, PHI_COMMAND_TOOLBAR_WIDGET_DEFINITION, } from "./config";
+import { filterPhiCommandButtonsForViewer } from "../../../../../components/widgets/config/command-buttons";
 import { PHI_COMMON_CONTROL_DEFAULT_LABELS } from "../../../../../components/widgets/label-types/common-controls";
-import { PhiCommandToolbarAuthoringTools } from "./authoring-tools";
+import { PhiCommandButtonsAuthoringTools } from "../../../../../components/widgets/client/shared/phi-command-buttons-authoring-tools";
 export const PHI_COMMAND_TOOLBAR_WIDGET_BUILDER_PLUGIN = {
     ...PHI_COMMAND_TOOLBAR_WIDGET_DEFINITION,
     renderEditor: ({ widget, config, runtime, registry }) => (_jsx(PhiCommandToolbarWidget, { blockId: widget.id, config: {
             ...config,
-            buttons: filterPhiCommandToolbarButtonsForViewer(config.buttons, runtime.viewer, registry?.roleProviderIdByWidgetType.get(widget.widgetType)),
+            buttons: filterPhiCommandButtonsForViewer(config.buttons, runtime.viewer, registry?.roleProviderIdByWidgetType.get(widget.widgetType)),
         }, labels: PHI_COMMON_CONTROL_DEFAULT_LABELS })),
-    renderEditorTools: ({ config, authoring }) => authoring?.updateConfig ? (_jsx(PhiCommandToolbarAuthoringTools, { buttons: config.buttons, onChange: (buttons) => authoring.updateConfig?.({ buttons }) })) : null,
+    renderEditorTools: ({ config, authoring }) => authoring?.updateConfig ? (_jsx(PhiCommandButtonsAuthoringTools, { buttons: config.buttons, bounds: PHI_COMMAND_TOOLBAR_BUTTON_BOUNDS, onChange: (buttons) => authoring.updateConfig?.({ buttons }) })) : null,
 };