@phis/ui 0.2.0 → 0.3.0

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

@@ -1,243 +1,17 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { resolvePhiButtonVariantType } from "../../../../../components/widgets/config/button-variant";
-import { resolvePhiCommonControlAction } from "../../../../../components/widgets/client/shared/phi-common-controls";
-import { resolvePhiButtonIcon } from "../../../../../components/widgets/client/shared/phi-button-icons";
-import { createPhiSignalSubcontrolAddress, findPhiSignalRoutesByCapabilityId } from "../../../../../types/signals";
-import { usePhiSignalListener } from "../../../../../components/runtime/runtime-signal-bus";
-import { usePhiSignalEmitter, usePhiSignalIdentity } from "../../../../../components/runtime/runtime-signal-identity";
-import { registerPhiSignalInstance } from "../../../../../components/runtime/runtime-signal-registry";
-import { usePhiSignalRuntimePartition } from "../../../../../components/runtime/runtime-signal-partition";
+import { usePhiCommandButtons } from "../../../../../components/widgets/client/shared/phi-command-buttons";
 import { PhiToolbarControl } from "../../../../../components/controls/phi-toolbar-control";
-function resolveButtonSubcontrolAddress(blockId, key) {
-    return blockId == null ? null : createPhiSignalSubcontrolAddress("cms", blockId, key);
-}
-function readToolbarButtonSignalValue(signal) {
-    if (signal.valueType === "string") {
-        return typeof signal.value === "string" ? signal.value : signal.value == null ? "" : String(signal.value);
-    }
-    if (signal.valueType === "number") {
-        return typeof signal.value === "number" && Number.isFinite(signal.value) ? signal.value : null;
-    }
-    if (signal.valueType === "boolean") {
-        return typeof signal.value === "boolean" ? signal.value : null;
-    }
-    if (signal.valueType === "icon") {
-        return typeof signal.value === "string" ? signal.value : null;
-    }
-    return null;
-}
+/* One empty list, so a toolbar without config does not hand the buttons a new identity every render. */
+const NO_BUTTONS = [];
 export function PhiCommandToolbarWidget({ config, blockId, labels, disabled, signalsEnabled = true, }) {
-    const buttons = useMemo(() => config?.buttons ?? [], [config?.buttons]);
-    const signalIdentity = usePhiSignalIdentity();
-    const signalPartition = usePhiSignalRuntimePartition();
-    const emitSignal = usePhiSignalEmitter(null);
-    const emitRoutes = useMemo(() => config?.signalRoutes?.emits ?? [], [config?.signalRoutes?.emits]);
-    const listenRoutes = useMemo(() => config?.signalRoutes?.listens ?? [], [config?.signalRoutes?.listens]);
-    const [commandDisabled, setCommandDisabled] = useState(null);
-    const [buttonStateByKey, setButtonStateByKey] = useState({});
-    const resolvedDisabled = disabled || commandDisabled === true || config?.disabled === true;
-    const readOnly = config?.readOnly === true;
-    const toolbarReceiver = signalIdentity.sender;
-    const buttonAddresses = useMemo(() => new Map(buttons.map((button) => [button.key, resolveButtonSubcontrolAddress(blockId, button.key)])), [blockId, buttons]);
-    useEffect(() => {
-        /*
-         * A subcontrol only receives what its address is registered for, in the signal's own scope. The
-         * identity context supplies a scope only inside an Overlay, so every toolbar outside one left its
-         * buttons unregistered and every signal aimed at them was dropped before delivery -- which is why
-         * Undo and Redo stayed clickable on an empty history. The scope a button is addressed in is the one
-         * declared by the routes that address it; the identity scope stands in where no route names it.
-         */
-        const scopeByAddress = new Map();
-        for (const route of listenRoutes) {
-            if (typeof route.receiver !== "string" || route.receiver === "broadcast")
-                continue;
-            if (!scopeByAddress.has(route.receiver))
-                scopeByAddress.set(route.receiver, route.scope);
-        }
-        const unregister = Array.from(buttonAddresses.values()).flatMap((address) => {
-            const scope = address == null ? null : scopeByAddress.get(address) ?? signalIdentity.scope;
-            return address == null || !scope
-                ? []
-                : [registerPhiSignalInstance(signalPartition, {
-                        address,
-                        scope,
-                    })];
-        });
-        return () => {
-            for (const dispose of unregister)
-                dispose();
-        };
-    }, [buttonAddresses, listenRoutes, signalIdentity.scope, signalPartition]);
-    const readButtonKeyFromReceiver = useCallback((receiver) => {
-        if (typeof receiver !== "string") {
-            return null;
-        }
-        for (const [buttonKey, address] of buttonAddresses) {
-            if (address === receiver) {
-                return buttonKey;
-            }
-        }
-        return null;
-    }, [buttonAddresses]);
-    function publish(buttonKey) {
-        if (!signalsEnabled || readOnly) {
-            return;
-        }
-        const button = buttons.find((candidate) => candidate.key === buttonKey);
-        if (!button) {
-            return;
-        }
-        const sender = buttonAddresses.get(button.key) ?? toolbarReceiver;
-        for (const buttonEmit of button.emits) {
-            for (const route of findPhiSignalRoutesByCapabilityId(emitRoutes, buttonEmit.capabilityId)) {
-                if (route.receiver == null || (route.valueType === "json" && !route.valueSchema)) {
-                    continue;
-                }
-                emitSignal({
-                    sender,
-                    scope: route.scope,
-                    channel: route.channel,
-                    action: route.action,
-                    value: route.valueType === "none" ? null : buttonEmit.value,
-                    valueType: route.valueType,
-                    valueSchema: route.valueSchema ?? null,
-                    receiver: route.receiver,
-                });
-            }
-        }
-    }
-    const handleSignal = useCallback((signal) => {
-        if (!signalsEnabled || listenRoutes.length === 0) {
-            return;
-        }
-        const route = listenRoutes.find((candidate) => candidate.channel === signal.channel &&
-            candidate.action === signal.action &&
-            candidate.valueType === signal.valueType &&
-            (candidate.valueType !== "json" ||
-                (candidate.valueSchema != null && candidate.valueSchema === signal.valueSchema)) &&
-            candidate.receiver !== null);
-        if (!route) {
-            return;
-        }
-        const targetsToolbar = signal.receiver === "broadcast" || (toolbarReceiver != null && signal.receiver === toolbarReceiver);
-        const buttonKey = readButtonKeyFromReceiver(signal.receiver);
-        if (!targetsToolbar && !buttonKey) {
-            return;
-        }
-        if (targetsToolbar) {
-            if (signal.channel === "enabled" && signal.action === "change") {
-                setCommandDisabled(typeof signal.value === "boolean" ? !signal.value : false);
-            }
-            return;
-        }
-        if (!buttonKey) {
-            return;
-        }
-        const value = readToolbarButtonSignalValue(signal);
-        setButtonStateByKey((current) => {
-            const previous = current[buttonKey] ?? {};
-            if (signal.channel === "enabled" && signal.action === "change") {
-                return {
-                    ...current,
-                    [buttonKey]: {
-                        ...previous,
-                        enabled: typeof value === "boolean" ? value : undefined,
-                    },
-                };
-            }
-            if (signal.channel === "visibility" && signal.action === "change") {
-                return {
-                    ...current,
-                    [buttonKey]: {
-                        ...previous,
-                        visible: typeof value === "boolean" ? value : undefined,
-                    },
-                };
-            }
-            if (signal.channel === "loading" && signal.action === "change") {
-                return {
-                    ...current,
-                    [buttonKey]: {
-                        ...previous,
-                        loading: typeof value === "boolean" ? value : undefined,
-                    },
-                };
-            }
-            if (signal.channel === "badge" && signal.action === "change") {
-                return {
-                    ...current,
-                    [buttonKey]: {
-                        ...previous,
-                        badge: typeof value === "string" || typeof value === "number" ? value : null,
-                    },
-                };
-            }
-            if (signal.channel === "icon" && signal.action === "change") {
-                return {
-                    ...current,
-                    [buttonKey]: {
-                        ...previous,
-                        icon: typeof value === "string" ? value : null,
-                    },
-                };
-            }
-            if (signal.channel === "label" && signal.action === "change") {
-                return {
-                    ...current,
-                    [buttonKey]: {
-                        ...previous,
-                        label: typeof value === "string" ? value : null,
-                    },
-                };
-            }
-            return current;
-        });
-    }, [listenRoutes, readButtonKeyFromReceiver, signalsEnabled, toolbarReceiver]);
-    const signalFilter = useMemo(() => {
-        if (listenRoutes.length === 0) {
-            return null;
-        }
-        const valueSchemas = Array.from(new Set(listenRoutes.map((route) => route.valueSchema).filter((schema) => Boolean(schema))));
-        return {
-            scopes: Array.from(new Set(listenRoutes.map((route) => route.scope))),
-            channels: Array.from(new Set(listenRoutes.map((route) => route.channel))),
-            ...(valueSchemas.length > 0 ? { valueSchemas } : null),
-        };
-    }, [listenRoutes]);
-    /*
-     * The addresses this one listener answers for: the toolbar, and every button in it.
-     *
-     * Registering the buttons as instances was only half of it. A receiver with an instance and no
-     * listener counted for it is not wrong, it is "not ready yet", so an addressed signal was held and
-     * never delivered -- the Save button in the Page dialog never learned it should read "Create", and
-     * Undo never learned it was disabled. Both were sent, both waited.
-     */
-    const answeredAddresses = useMemo(() => [toolbarReceiver, ...buttonAddresses.values()]
-        .filter((address) => typeof address === "string"), [buttonAddresses, toolbarReceiver]);
-    usePhiSignalListener(handleSignal, signalFilter, answeredAddresses);
-    const controlItems = buttons.map((button) => {
-        const buttonState = buttonStateByKey[button.key] ?? {};
-        const action = resolvePhiCommonControlAction(labels, button.actionKey ?? button.key);
-        const resolvedIcon = resolvePhiButtonIcon(buttonState.icon ?? button.icon ?? action?.icon ?? button.key);
-        const label = buttonState.label ?? button.label ?? action?.label ?? button.key;
-        return {
-            key: button.key,
-            ariaLabel: label,
-            label,
-            tooltip: button.tooltip ?? action?.tooltip,
-            showLabel: button.display == null ? undefined : button.display !== "icon",
-            type: resolvePhiButtonVariantType(button.variant ?? action?.variant) ?? "default",
-            danger: button.danger === true || action?.danger === true,
-            disabled: button.disabled === true || buttonState.enabled === false,
-            loading: buttonState.loading,
-            icon: button.display === "label" ? null : resolvedIcon,
-            visible: buttonState.visible,
-            badge: buttonState.badge == null
-                ? undefined
-                : { enabled: true, value: buttonState.badge },
-        };
+    const commands = usePhiCommandButtons({
+        buttons: config?.buttons ?? NO_BUTTONS,
+        signalRoutes: config?.signalRoutes,
+        blockId,
+        labels,
+        disabled,
+        signalsEnabled,
     });
-    return (_jsx(PhiToolbarControl, { items: controlItems, compact: config?.compact !== false, wrap: config?.wrap === true, showLabels: config?.showLabels === true, disabled: resolvedDisabled || readOnly, size: config?.controlSize, onActivate: publish }));
+    return (_jsx(PhiToolbarControl, { items: commands.items, compact: config?.compact !== false, wrap: config?.wrap === true, showLabels: config?.showLabels === true, disabled: commands.disabled, size: config?.controlSize, onActivate: commands.activate }));
 }

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

@@ -1,15 +1,18 @@
-import type { PhiCommandToolbarButtonConfig } from "../../../../../types/core-widget-placements";
+import type { PhiCommandButtonConfig } from "../../../../../types/core-widget-placements";
 import { type PhiCmsWidgetConfigBase } from "../../../../../components/widgets/config/parser-primitives";
 import { type PhiControlConfig } from "../../../../../components/widgets/config/control-signal-config";
-import { type PhiAccessViewer, type PhiRoleProviderId } from "../../../../../types/access";
 export type PhiCommandToolbarWidgetConfig = PhiCmsWidgetConfigBase & PhiControlConfig & {
     compact?: boolean;
     wrap?: boolean;
     showLabels?: boolean;
-    buttons: PhiCommandToolbarButtonConfig[];
+    buttons: PhiCommandButtonConfig[];
+};
+declare function parsePhiCommandToolbarWidgetConfig(config: Record<string, unknown>): PhiCommandToolbarWidgetConfig;
+/** The fewest and most buttons the scaffold's count offers. */
+export declare const PHI_COMMAND_TOOLBAR_BUTTON_BOUNDS: {
+    min: number;
+    max: number;
 };
-export declare function filterPhiCommandToolbarButtonsForViewer(buttons: readonly PhiCommandToolbarButtonConfig[], viewer: PhiAccessViewer, ownerProviderId?: PhiRoleProviderId | null): PhiCommandToolbarButtonConfig[];
-export declare function parsePhiCommandToolbarWidgetConfig(config: Record<string, unknown>): PhiCommandToolbarWidgetConfig;
 export declare const PHI_COMMAND_TOOLBAR_WIDGET_DEFINITION: {
     kind: "widget";
     pluginKey: string;
@@ -17,6 +20,7 @@ export declare const PHI_COMMAND_TOOLBAR_WIDGET_DEFINITION: {
     title: string;
     description: string;
     category: "form";
+    icon: string;
     iconFamily: string;
     slotSizePolicy: "intrinsic";
     runtimeSignals: {
@@ -62,12 +66,13 @@ export declare const PHI_COMMAND_TOOLBAR_WIDGET_DEFINITION: {
         configKey: string;
         keyField: string;
         labelFields: string[];
+        labelFieldValues: {
+            action: {
+                [k: string]: string;
+            };
+        };
     }[];
-    fields: ({
-        key: string;
-        type: "boolean";
-        label: string;
-    } | {
+    fields: (import("../../../../../types").PhiCmsConfigField | {
         key: string;
         type: "choice";
         label: string;
@@ -75,28 +80,14 @@ export declare const PHI_COMMAND_TOOLBAR_WIDGET_DEFINITION: {
             value: string;
             label: string;
         }[];
-    } | {
-        key: string;
-        type: "string";
-        label: string;
-        editorPlacement: "toolbar";
-        visibleWhen?: undefined;
-    } | {
-        key: string;
-        type: "boolean";
-        label: string;
-        visibleWhen: {
-            field: string;
-            equals: false;
-        };
-        editorPlacement?: undefined;
     })[];
     defaultConfig: {
         key: string;
         compact: true;
         wrap: false;
         showLabels: false;
-        buttons: never[];
+        buttons: PhiCommandButtonConfig[];
     };
     parseConfig: typeof parsePhiCommandToolbarWidgetConfig;
 };
+export {};

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

@@ -1,109 +1,9 @@
 import { resolvePhiCmsWidgetPluginKey } from "../../../../../constants/cms-widget-types";
-import { readPhiButtonVariant } from "../../../../../components/widgets/config/button-variant";
-import { readPhiCommonControlActionKey } from "../../../../../components/widgets/label-types/common-controls";
 import { PHI_COMMAND_CONTROL_SIGNALS } from "../../../../../components/widgets/signals/control-signal-capabilities";
-import { readBoolean, readNumber, readRenderableBlockConfig, readString, } from "../../../../../components/widgets/config/parser-primitives";
-import { PHI_CONTROL_PRESENTATION_FIELDS, PHI_CONTROL_STATE_FIELDS, parsePhiControlConfig, } from "../../../../../components/widgets/config/control-signal-config";
-import { canPhiViewerAccessOwnedPolicy, readPhiViewerAccessPolicy, } from "../../../../../types/access";
-function readButtonEmitValue(value) {
-    const stringValue = readString(value);
-    if (stringValue !== undefined) {
-        return stringValue;
-    }
-    const numberValue = readNumber(value);
-    if (numberValue !== undefined) {
-        return numberValue;
-    }
-    const booleanValue = readBoolean(value);
-    if (booleanValue !== undefined) {
-        return booleanValue;
-    }
-    if (value == null) {
-        return undefined;
-    }
-    if (Array.isArray(value)) {
-        const stringItems = value.filter((item) => typeof item === "string");
-        if (stringItems.length === value.length) {
-            return stringItems;
-        }
-        const numberItems = value.filter((item) => typeof item === "number" && Number.isFinite(item));
-        if (numberItems.length === value.length) {
-            return numberItems;
-        }
-        return undefined;
-    }
-    if (typeof value === "object") {
-        return value;
-    }
-    return undefined;
-}
-function readCommandButtonEmitConfig(value) {
-    if (!value || typeof value !== "object" || Array.isArray(value)) {
-        return null;
-    }
-    const record = value;
-    const capabilityId = readString(record.capabilityId);
-    if (!capabilityId) {
-        return null;
-    }
-    return {
-        capabilityId,
-        value: readButtonEmitValue(record.value),
-    };
-}
-function readCommandButtonEmits(value) {
-    if (!Array.isArray(value)) {
-        return [];
-    }
-    return value
-        .map(readCommandButtonEmitConfig)
-        .filter((item) => item != null);
-}
-function readCommandButtonConfig(value) {
-    if (!value || typeof value !== "object" || Array.isArray(value)) {
-        return null;
-    }
-    const record = value;
-    const key = readString(record.key);
-    const emits = readCommandButtonEmits(record.emits);
-    if (!key || emits.length === 0) {
-        return null;
-    }
-    const hasAccessPolicy = Object.prototype.hasOwnProperty.call(record, "accessPolicy");
-    const accessPolicy = hasAccessPolicy
-        ? readPhiViewerAccessPolicy(record.accessPolicy)
-        : null;
-    if (hasAccessPolicy && !accessPolicy) {
-        return null;
-    }
-    return {
-        key,
-        emits,
-        ...(accessPolicy ? { accessPolicy } : {}),
-        actionKey: readPhiCommonControlActionKey(readString(record.actionKey) ?? key) ?? undefined,
-        label: readString(record.label),
-        tooltip: readString(record.tooltip),
-        icon: readString(record.icon),
-        display: record.display === "icon" || record.display === "label" || record.display === "icon-label"
-            ? record.display
-            : undefined,
-        danger: readBoolean(record.danger),
-        disabled: readBoolean(record.disabled),
-        variant: readPhiButtonVariant(record.variant),
-    };
-}
-export function filterPhiCommandToolbarButtonsForViewer(buttons, viewer, ownerProviderId) {
-    return buttons.filter((button) => canPhiViewerAccessOwnedPolicy(viewer, button.accessPolicy, ownerProviderId));
-}
-function readCommandButtons(value) {
-    if (!Array.isArray(value)) {
-        return [];
-    }
-    return value
-        .map(readCommandButtonConfig)
-        .filter((item) => item != null);
-}
-export function parsePhiCommandToolbarWidgetConfig(config) {
+import { readBoolean, readRenderableBlockConfig, } from "../../../../../components/widgets/config/parser-primitives";
+import { PHI_CONTROL_PRESENTATION_FIELDS, parsePhiControlConfig, } from "../../../../../components/widgets/config/control-signal-config";
+import { PHI_COMMAND_BUTTONS_SIGNAL_SUBCONTROLS, buildPhiCommandButtonsField, createPhiCommandButton, readPhiCommandButtons, } from "../../../../../components/widgets/config/command-buttons";
+function parsePhiCommandToolbarWidgetConfig(config) {
     const controlState = parsePhiControlConfig(config, {
         key: "command",
     });
@@ -113,9 +13,11 @@ export function parsePhiCommandToolbarWidgetConfig(config) {
         compact: readBoolean(config.compact) ?? true,
         wrap: readBoolean(config.wrap) ?? false,
         showLabels: readBoolean(config.showLabels) ?? false,
-        buttons: readCommandButtons(config.buttons),
+        buttons: readPhiCommandButtons(config.buttons),
     };
 }
+/** The fewest and most buttons the scaffold's count offers. */
+export const PHI_COMMAND_TOOLBAR_BUTTON_BOUNDS = { min: 1, max: 12 };
 export const PHI_COMMAND_TOOLBAR_WIDGET_DEFINITION = {
     kind: "widget",
     pluginKey: resolvePhiCmsWidgetPluginKey("command-toolbar"),
@@ -123,21 +25,35 @@ export const PHI_COMMAND_TOOLBAR_WIDGET_DEFINITION = {
     title: "Command Toolbar",
     description: "Reusable toolbar that emits configured command values through the runtime signal bus.",
     category: "form",
+    icon: "antd:build-outlined",
     iconFamily: "form",
     slotSizePolicy: "intrinsic",
     runtimeSignals: {
         ...PHI_COMMAND_CONTROL_SIGNALS,
     },
-    signalSubcontrols: [
-        {
-            configKey: "buttons",
-            keyField: "key",
-            labelFields: ["label", "actionKey"],
-        },
-    ],
+    signalSubcontrols: PHI_COMMAND_BUTTONS_SIGNAL_SUBCONTROLS,
     fields: [
-        { key: "buttons", type: "string", label: "Buttons", editorPlacement: "toolbar" },
-        { key: "compact", type: "boolean", label: "Compact" },
+        buildPhiCommandButtonsField({ extraItemFields: [
+                /* Left at the toolbar's own answer, Show Labels decides; set, it decides for this button. */
+                {
+                    key: "display",
+                    type: "choice",
+                    label: "Display",
+                    emptyOption: { value: "", label: "Toolbar", separator: "after" },
+                    emptyValue: undefined,
+                    options: [
+                        { value: "icon", label: "Icon" },
+                        { value: "label", label: "Label" },
+                        { value: "icon-label", label: "Icon and label" },
+                    ],
+                },
+            ] }),
+        /*
+         * What holds for every button. No Read only or Disabled of the whole toolbar here: each button
+         * has its own, and switching all of them at once is what a signal is for -- every renderable block
+         * receives `enabled/change`.
+         */
+        { key: "compact", type: "boolean", label: "Compact", heading: "Toolbar" },
         /*
          * Only while the group is not compact. A compact group cannot wrap (`PhiToolbarControl`), so with
          * compact on this is a switch whose position changes nothing -- and a control that does nothing is
@@ -146,14 +62,14 @@ export const PHI_COMMAND_TOOLBAR_WIDGET_DEFINITION = {
         { key: "wrap", type: "boolean", label: "Wrap", visibleWhen: { field: "compact", equals: false } },
         { key: "showLabels", type: "boolean", label: "Show Labels" },
         ...PHI_CONTROL_PRESENTATION_FIELDS,
-        ...PHI_CONTROL_STATE_FIELDS,
     ],
     defaultConfig: {
         key: "command",
         compact: true,
         wrap: false,
         showLabels: false,
-        buttons: [],
+        /* One to start with, so a toolbar just placed is something to see and to select. */
+        buttons: [createPhiCommandButton([])],
     },
     parseConfig: parsePhiCommandToolbarWidgetConfig,
 };

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

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
 import { PhiRuntimeModuleRenderClientHost } from "../../../../../components/runtime/runtime-module-render-client-manifest";
-import { PHI_COMMAND_TOOLBAR_WIDGET_DEFINITION, filterPhiCommandToolbarButtonsForViewer, } from "./config";
+import { PHI_COMMAND_TOOLBAR_WIDGET_DEFINITION, } from "./config";
+import { filterPhiCommandButtonsForViewer } from "../../../../../components/widgets/config/command-buttons";
 import { getPhiCommonControlLabelsForRuntime } from "../../../../../components/widgets/label-sets/common-controls";
 export const PHI_COMMAND_TOOLBAR_WIDGET_PLUGIN = {
     ...PHI_COMMAND_TOOLBAR_WIDGET_DEFINITION,
@@ -9,7 +10,7 @@ export const PHI_COMMAND_TOOLBAR_WIDGET_PLUGIN = {
             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: await getPhiCommonControlLabelsForRuntime(runtime),
         } })),
@@ -17,7 +18,7 @@ export const PHI_COMMAND_TOOLBAR_WIDGET_PLUGIN = {
             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: await getPhiCommonControlLabelsForRuntime(runtime),
             disabled: true,

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

@@ -0,0 +1,3 @@
+import type { PhiCmsBuilderWidgetPlugin } from "../../../../../types";
+import { type PhiDateInputWidgetConfig } from "./config";
+export declare const PHI_DATE_INPUT_WIDGET_BUILDER_PLUGIN: PhiCmsBuilderWidgetPlugin<PhiDateInputWidgetConfig>;

package/plugins/runtime-modules/core/widgets/date-input/authoring.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PhiDateInputWidget } from "./client";
+import { PHI_DATE_INPUT_WIDGET_DEFINITION, } from "./config";
+export const PHI_DATE_INPUT_WIDGET_BUILDER_PLUGIN = {
+    ...PHI_DATE_INPUT_WIDGET_DEFINITION,
+    renderEditor: ({ widget, config }) => (_jsx(PhiDateInputWidget, { blockId: widget.id, config: config, signalsEnabled: false })),
+};

package/plugins/runtime-modules/core/widgets/date-input/client.d.ts

@@ -0,0 +1,6 @@
+import { type PhiDateInputWidgetConfig } from "./config";
+export declare function PhiDateInputWidget({ config, signalsEnabled, }: {
+    config: PhiDateInputWidgetConfig;
+    blockId?: string | number | null;
+    signalsEnabled?: boolean;
+}): import("react").JSX.Element;

package/plugins/runtime-modules/core/widgets/{date-picker → date-input}/client.js

@@ -1,17 +1,12 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { createPhiEmptyTemporalSelection } from "./selection";
 import { useState } from "react";
 import { PhiDatePickerControl } from "../../../../../components/controls/phi-date-picker-control";
 import { isPhiTemporalSelection } from "../../../../../types/calendar";
+import {} from "./config";
 import { usePhiControlSignalController } from "../../../../../components/widgets/client/shared/phi-control-signals";
-function createEmptySelection(mode) {
-    if (mode === "range")
-        return { mode: "range", start: null, end: null };
-    if (mode === "multiple")
-        return { mode: "multiple", values: [] };
-    return { mode: "single", value: null };
-}
-export function PhiDatePickerWidget({ config, signalsEnabled = true, }) {
+export function PhiDateInputWidget({ config, signalsEnabled = true, }) {
     const [selection, setSelection] = useState(config.selection);
     const signals = usePhiControlSignalController({
         key: config.key,
@@ -20,9 +15,9 @@ export function PhiDatePickerWidget({ config, signalsEnabled = true, }) {
         signalsEnabled,
         initialDisabled: config.disabled,
         initialReadOnly: config.readOnly,
-        clearValue: createEmptySelection(config.selectionMode),
+        clearValue: createPhiEmptyTemporalSelection(config.selectionMode),
         onSetValue: setSelection,
-        onClear: () => setSelection(createEmptySelection(config.selectionMode)),
+        onClear: () => setSelection(createPhiEmptyTemporalSelection(config.selectionMode)),
         coerceValue: (value) => isPhiTemporalSelection(value) ? value : null,
     });
     return (_jsx(PhiDatePickerControl, { adapterKey: config.calendarAdapterKey, label: config.label, selection: selection, selectionMode: config.selectionMode, precision: config.precision, showTime: config.showTime, timeZone: config.timeZone, format: config.format, min: config.min, max: config.max, disabledDateRules: config.disabledDateRules, disabled: signals.disabled, readOnly: signals.readOnly, allowClear: config.allowClear, placeholder: config.placeholder, rangePlaceholders: config.rangePlaceholders, controlSize: config.controlSize, variant: config.variant, onChange: (next) => {

package/plugins/runtime-modules/core/widgets/{date-picker → date-input}/config.d.ts

@@ -1,6 +1,6 @@
 import type { PhiCalendarAdapterKey, PhiCalendarDate, PhiCalendarDisabledDateRule, PhiCalendarPrecision, PhiCalendarSelectionMode, PhiTemporalSelection } from "../../../../../types";
 import { type PhiControlConfig } from "../../../../../components/widgets/config/control-signal-config";
-export type PhiDatePickerWidgetConfig = PhiControlConfig & {
+export type PhiDateInputWidgetConfig = PhiControlConfig & {
     label?: string;
     calendarAdapterKey: PhiCalendarAdapterKey;
     selectionMode: PhiCalendarSelectionMode;
@@ -17,14 +17,15 @@ export type PhiDatePickerWidgetConfig = PhiControlConfig & {
     rangePlaceholders?: readonly [string, string];
     variant?: "outlined" | "filled" | "borderless" | "underlined";
 };
-export declare function parsePhiDatePickerWidgetConfig(config: Record<string, unknown>): PhiDatePickerWidgetConfig;
-export declare const PHI_DATE_PICKER_WIDGET_DEFINITION: {
+declare function parsePhiDateInputWidgetConfig(config: Record<string, unknown>): PhiDateInputWidgetConfig;
+export declare const PHI_DATE_INPUT_WIDGET_DEFINITION: {
     kind: "widget";
     pluginKey: string;
     typeKey: string;
     title: string;
     description: string;
     category: "form";
+    icon: string;
     iconFamily: string;
     slotSizePolicy: "intrinsic";
     runtimeSignals: {
@@ -91,5 +92,6 @@ export declare const PHI_DATE_PICKER_WIDGET_DEFINITION: {
         timeZone: string;
         allowClear: true;
     };
-    parseConfig: typeof parsePhiDatePickerWidgetConfig;
+    parseConfig: typeof parsePhiDateInputWidgetConfig;
 };
+export {};