@phis/ui 0.1.0 → 0.2.1

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

@@ -1,4 +1,5 @@
 import { type PhiCmsWidgetConfigBase } from "../../../../../components/widgets/config/parser-primitives";
+import { type PhiTextTone } from "../../../../../components/widgets/config/text-tone";
 export type PhiCmsDescriptionWidgetConfig = PhiCmsWidgetConfigBase & {
     eyebrow?: string;
     title?: string;
@@ -6,12 +7,16 @@ export type PhiCmsDescriptionWidgetConfig = PhiCmsWidgetConfigBase & {
     asideTitle?: string;
     asideItems?: string[];
     footer?: string;
+    /** The tone of the description text; absent is the default secondary text. */
+    tone?: PhiTextTone;
 };
 export declare function parsePhiCmsDescriptionWidgetConfig(config: Record<string, unknown>): PhiCmsDescriptionWidgetConfig;
 export declare const PHI_DESCRIPTION_WIDGET_DEFINITION: {
     kind: "widget";
     pluginKey: string;
     typeKey: string;
+    translatesOwnText: true;
+    slotSizePolicy: "intrinsic";
     title: string;
     category: "content";
     description: string;
@@ -21,11 +26,31 @@ export declare const PHI_DESCRIPTION_WIDGET_DEFINITION: {
         type: "string";
         label: string;
         editorPlacement?: undefined;
+        options?: undefined;
     } | {
         key: string;
         type: "string";
         label: string;
         editorPlacement: "toolbar";
+        options?: undefined;
+    } | {
+        key: string;
+        type: "choice";
+        label: string;
+        options: ({
+            readonly value: "secondary";
+            readonly label: "Secondary";
+        } | {
+            readonly value: "success";
+            readonly label: "Success";
+        } | {
+            readonly value: "warning";
+            readonly label: "Warning";
+        } | {
+            readonly value: "danger";
+            readonly label: "Danger";
+        })[];
+        editorPlacement?: undefined;
     })[];
     parseConfig: typeof parsePhiCmsDescriptionWidgetConfig;
 };

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

@@ -1,6 +1,7 @@
 import { resolvePhiCmsWidgetPluginKey } from "../../../../../constants/cms-widget-types";
 import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
 import { readRenderableBlockConfig, readString } from "../../../../../components/widgets/config/parser-primitives";
+import { PHI_TEXT_TONE_FIELD_OPTIONS, readPhiTextTone, } from "../../../../../components/widgets/config/text-tone";
 export function parsePhiCmsDescriptionWidgetConfig(config) {
     const asideItemsRaw = Array.isArray(config.asideItems) ? config.asideItems : [];
     return {
@@ -13,12 +14,15 @@ export function parsePhiCmsDescriptionWidgetConfig(config) {
             .map((item) => (typeof item === "string" ? item : undefined))
             .filter((item) => item != null),
         footer: readString(config.footer),
+        tone: readPhiTextTone(config.tone),
     };
 }
 export const PHI_DESCRIPTION_WIDGET_DEFINITION = {
     kind: "widget",
     pluginKey: resolvePhiCmsWidgetPluginKey("description"),
     typeKey: "description",
+    translatesOwnText: true,
+    slotSizePolicy: "intrinsic",
     title: "Description",
     category: "content",
     description: "Introductory text block with eyebrow, title, body, bullet list, and footer.",
@@ -30,6 +34,7 @@ export const PHI_DESCRIPTION_WIDGET_DEFINITION = {
         { key: "asideTitle", type: "string", label: "Aside Title" },
         { key: "asideItems", type: "string", label: "Aside Items", editorPlacement: "toolbar" },
         { key: "footer", type: "string", label: "Footer" },
+        { key: "tone", type: "choice", label: "Tone", options: [...PHI_TEXT_TONE_FIELD_OPTIONS] },
     ],
     parseConfig: parsePhiCmsDescriptionWidgetConfig,
 };

package/plugins/runtime-modules/core/widgets/description/editor.d.ts

@@ -0,0 +1,6 @@
+import type { PhiCmsDescriptionWidgetConfig } from "./config";
+export type PhiDescriptionWidgetEditorProps = {
+    config?: PhiCmsDescriptionWidgetConfig | null;
+    onChange?: (patch: Partial<PhiCmsDescriptionWidgetConfig>) => void;
+};
+export declare function PhiDescriptionWidgetEditor({ config, onChange, }: PhiDescriptionWidgetEditorProps): import("react").JSX.Element;

package/plugins/runtime-modules/core/widgets/description/editor.js

@@ -0,0 +1,129 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { PhiTagControl } from "../../../../../components/controls/phi-tag-control";
+import { PhiTextControl } from "../../../../../components/controls/phi-text-control";
+import { PhiFlexControl } from "../../../../../components/controls/phi-flex-control";
+import { resolvePhiDescriptionEditorSections } from "../../../../../components/widgets/client/description-editor-sections";
+function resolveEditorConfig(config) {
+    return {
+        eyebrow: config?.eyebrow ?? "",
+        title: config?.title ?? "",
+        description: config?.description ?? "",
+        asideTitle: config?.asideTitle ?? "",
+        asideItems: Array.isArray(config?.asideItems) ? [...config.asideItems] : [],
+        footer: config?.footer ?? "",
+    };
+}
+const EDITOR_TEXTAREA_STYLE = {
+    paddingInline: 0,
+    paddingBlock: 6,
+    borderRadius: 0,
+    borderWidth: 0,
+    borderBottom: "1px solid var(--ant-color-border, rgba(0, 0, 0, 0.15))",
+    backgroundColor: "transparent",
+    resize: "none",
+};
+export function PhiDescriptionWidgetEditor({ config, onChange, }) {
+    const resolvedConfig = useMemo(() => resolveEditorConfig(config), [config]);
+    const [draftState, setDraftState] = useState(() => ({ source: config, value: resolvedConfig }));
+    const draft = draftState.source === config ? draftState.value : resolvedConfig;
+    /*
+     * The parts that stand follow the stored config, never the draft: a field that mounted or unmounted
+     * as it was typed into would lose the caret on its first character, and one cleared to nothing
+     * would be gone before its blur could write the empty value.
+     */
+    const sections = resolvePhiDescriptionEditorSections(resolvedConfig, Boolean(onChange));
+    /*
+     * Typing changes the draft and nothing else.
+     *
+     * Each of these fields is a textarea with an undo of its own, and it keeps it while it has the
+     * focus. What leaves this Widget is one write per field, when that field is left -- so the
+     * Builder's history holds "the title was changed", not one entry per character of it.
+     */
+    function updateField(key, value) {
+        setDraftState((current) => {
+            const currentDraft = current.source === config ? current.value : resolvedConfig;
+            return { source: config, value: { ...currentDraft, [key]: value } };
+        });
+    }
+    function commitField(key) {
+        if (draft[key] === resolvedConfig[key]) {
+            return;
+        }
+        onChange?.({ [key]: draft[key] });
+    }
+    function updateAsideItem(index, value) {
+        setDraftState((current) => {
+            const currentDraft = current.source === config ? current.value : resolvedConfig;
+            const nextItems = [...currentDraft.asideItems];
+            nextItems[index] = value;
+            return {
+                source: config,
+                value: {
+                    ...currentDraft,
+                    asideItems: nextItems,
+                },
+            };
+        });
+    }
+    function commitAsideItems() {
+        const items = draft.asideItems;
+        const storedItems = resolvedConfig.asideItems;
+        if (items.length === storedItems.length &&
+            items.every((item, index) => item === storedItems[index])) {
+            return;
+        }
+        onChange?.({ asideItems: items });
+    }
+    return (_jsx(PhiFlexControl, { vertical: true, gap: 16, style: { width: "100%", minWidth: 0 }, children: _jsxs(PhiFlexControl, { vertical: true, gap: 10, style: { width: "100%", minWidth: 0 }, children: [sections.eyebrowTag ? (_jsx(PhiTagControl, { color: "default", style: {
+                        width: "fit-content",
+                        borderRadius: 999,
+                        paddingInline: "var(--ant-padding-sm)",
+                        paddingBlock: "var(--ant-padding-xxs)",
+                        fontWeight: 600,
+                        letterSpacing: "0.04em",
+                        color: "var(--ant-color-text-tertiary)",
+                        borderColor: "var(--ant-color-border-secondary)",
+                        background: "var(--ant-color-fill-quaternary)",
+                    }, children: _jsx(PhiTextControl, { presentation: "textarea", value: draft.eyebrow, readOnly: !onChange, variant: "borderless", placeholder: "Eyebrow", autoSize: { minRows: 1, maxRows: 2 }, onChange: (value) => updateField("eyebrow", value ?? ""), onBlur: () => commitField("eyebrow"), style: { ...EDITOR_TEXTAREA_STYLE, borderBottom: "none", paddingBlock: 0 } }) })) : (_jsx(PhiTextControl, { presentation: "textarea", value: draft.eyebrow, readOnly: !onChange, variant: "borderless", placeholder: "Eyebrow", autoSize: { minRows: 1, maxRows: 2 }, onChange: (value) => updateField("eyebrow", value ?? ""), onBlur: () => commitField("eyebrow"), style: EDITOR_TEXTAREA_STYLE })), sections.heading ? (_jsxs("div", { children: [_jsx(PhiTextControl, { presentation: "textarea", value: draft.title, readOnly: !onChange, variant: "borderless", placeholder: "Title", autoSize: { minRows: 1, maxRows: 4 }, onChange: (value) => updateField("title", value ?? ""), onBlur: () => commitField("title"), style: {
+                                ...EDITOR_TEXTAREA_STYLE,
+                                fontSize: "var(--ant-font-size-heading-2, 2rem)",
+                                lineHeight: 1.2,
+                                fontWeight: 600,
+                                marginBottom: draft.description ? "var(--ant-padding-xs)" : 0,
+                            } }), _jsx(PhiTextControl, { presentation: "textarea", value: draft.description, readOnly: !onChange, variant: "borderless", placeholder: "Description", autoSize: { minRows: 2, maxRows: 8 }, onChange: (value) => updateField("description", value ?? ""), onBlur: () => commitField("description"), style: {
+                                ...EDITOR_TEXTAREA_STYLE,
+                                color: "var(--ant-color-text-secondary)",
+                                fontSize: "1.125rem",
+                                lineHeight: 1.6,
+                            } })] })) : null, sections.aside ? (_jsxs(PhiFlexControl, { vertical: true, gap: 12, style: { width: "100%" }, children: [_jsx(PhiTextControl, { presentation: "textarea", value: draft.asideTitle, readOnly: !onChange, variant: "borderless", placeholder: "Aside title", autoSize: { minRows: 1, maxRows: 3 }, onChange: (value) => updateField("asideTitle", value ?? ""), onBlur: () => commitField("asideTitle"), style: {
+                                ...EDITOR_TEXTAREA_STYLE,
+                                color: "var(--ant-color-text-heading)",
+                                fontWeight: 600,
+                            } }), _jsx(PhiFlexControl, { vertical: true, gap: 8, style: { width: "100%" }, children: draft.asideItems.map((item, index) => (_jsxs("div", { style: {
+                                    display: "flex",
+                                    alignItems: "flex-start",
+                                    gap: "var(--ant-padding-xs)",
+                                    padding: "var(--ant-padding-sm) var(--ant-padding)",
+                                    borderRadius: "var(--ant-border-radius-lg)",
+                                    background: "var(--ant-color-bg-container)",
+                                    border: "1px solid var(--ant-color-border-secondary)",
+                                }, children: [_jsx("div", { "aria-hidden": "true", style: {
+                                            width: "var(--ant-padding-xs)",
+                                            height: "var(--ant-padding-xs)",
+                                            // the item text is a borderless auto-sizing textarea, so the first
+                                            // text line sits at the control's own height, not at the raw line box
+                                            marginTop: "calc((var(--ant-control-height) - var(--ant-padding-xs)) / 2)",
+                                            borderRadius: "50%",
+                                            background: "var(--ant-color-primary)",
+                                            flexShrink: 0,
+                                        } }), _jsx(PhiTextControl, { presentation: "textarea", value: item, readOnly: !onChange, variant: "borderless", placeholder: `Item ${index + 1}`, autoSize: { minRows: 1, maxRows: 6 }, onChange: (value) => updateAsideItem(index, value ?? ""), onBlur: () => commitAsideItems(), style: {
+                                            ...EDITOR_TEXTAREA_STYLE,
+                                            borderBottom: "none",
+                                            paddingBlock: 0,
+                                        } })] }, index))) })] })) : null, _jsx(PhiTextControl, { presentation: "textarea", value: draft.footer, readOnly: !onChange, variant: "borderless", placeholder: "Footer", autoSize: { minRows: 1, maxRows: 5 }, onChange: (value) => updateField("footer", value ?? ""), onBlur: () => commitField("footer"), style: {
+                        ...EDITOR_TEXTAREA_STYLE,
+                        color: "var(--ant-color-text-tertiary)",
+                    } })] }) }));
+}

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

@@ -1,4 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { PhiCmsFlags } from "../../../../../constants/phi-cms";
+import { hasPhiFlag } from "../../../../../helpers/flags";
 import { PhiDescriptionWidget } from "./server";
 import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
 import { PhiRuntimeModuleRenderClientHost } from "../../../../../components/runtime/runtime-module-render-client-manifest";
@@ -12,7 +14,7 @@ export const PHI_DESCRIPTION_WIDGET_PLUGIN = {
             asideTitle: config.asideTitle,
             asideItems: config.asideItems,
             footer: config.footer,
-        }, config: config, runtime: runtime }, `widget-${widget.id}`)),
+        }, config: config, translate: !hasPhiFlag(widget.flags, PhiCmsFlags.NoTranslate), runtime: runtime }, `widget-${widget.id}`)),
     renderPreview: ({ widget, config }) => (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiCmsWidgetType.Description, componentProps: {
             labels: {
                 eyebrow: config.eyebrow,
@@ -22,7 +24,7 @@ export const PHI_DESCRIPTION_WIDGET_PLUGIN = {
                 asideItems: config.asideItems,
                 footer: config.footer,
             },
-            config: {},
+            config: { tone: config.tone },
         } }, `widget-preview-${widget.id}`)),
 };
 export { PHI_DESCRIPTION_WIDGET_PLUGIN_TYPE };

package/plugins/runtime-modules/core/widgets/description/server.d.ts

@@ -9,4 +9,6 @@ export type PhiDescriptionWidgetLabels = {
     footer?: string;
 };
 export type PhiDescriptionWidgetProps = PhiServerBlockBaseProps<PhiDescriptionWidgetLabels, PhiCmsDescriptionWidgetConfig>;
-export declare function PhiDescriptionWidget({ labels, config, runtime, }: PhiDescriptionWidgetProps): Promise<import("react").JSX.Element>;
+export declare function PhiDescriptionWidget({ labels, config, runtime, translate, }: PhiDescriptionWidgetProps & {
+    translate: boolean;
+}): Promise<import("react").JSX.Element>;

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

@@ -1,22 +1,46 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { trGlobal, trGlobalForLocale, } from "../../../../../server-helpers/translate";
+import { maskPhiTextPlaceholders, resolvePhiTextPlaceholders } from "../../../../../helpers/text-placeholders";
 import { PHI_COLOR, PHI_FONT_SIZE, PHI_LINE_HEIGHT, PHI_RADIUS, PHI_SPACE, } from "../../../../../theme/antd-css-var-contract";
-async function translateLabel(locale, value) {
+/**
+ * Masked, translated, filled -- the order `helpers/text-placeholders.ts` sets out.
+ *
+ * Seven fields here take a sentence a Preset wrote, and a Preset writes `{site.name}` rather than any
+ * one Site's name. Translating first and never filling left the braces standing; masking first keeps
+ * `{year}` out of the translator's hands, which would otherwise hand back `{Jahr}`.
+ */
+async function translateLabel(locale, value, runtime, translate) {
     if (!value) {
         return undefined;
     }
-    return locale
-        ? trGlobalForLocale(locale, value)
-        : trGlobal(value);
+    const masked = maskPhiTextPlaceholders(value);
+    const translated = !translate
+        ? masked.text
+        : locale
+            ? await trGlobalForLocale(locale, masked.text)
+            : await trGlobal(masked.text);
+    return resolvePhiTextPlaceholders(translated, masked.names, runtime);
 }
-export async function PhiDescriptionWidget({ labels, config, runtime, }) {
+function resolveDescriptionToneColor(tone) {
+    switch (tone) {
+        case "success":
+            return PHI_COLOR.success;
+        case "warning":
+            return PHI_COLOR.warning;
+        case "danger":
+            return PHI_COLOR.error;
+        default:
+            return PHI_COLOR.textSecondary;
+    }
+}
+export async function PhiDescriptionWidget({ labels, config, runtime, translate, }) {
     const locale = runtime?.locale.current;
-    const eyebrow = await translateLabel(locale, labels.eyebrow ?? config?.eyebrow);
-    const title = await translateLabel(locale, labels.title ?? config?.title);
-    const description = await translateLabel(locale, labels.description ?? config?.description);
-    const asideTitle = await translateLabel(locale, labels.asideTitle ?? config?.asideTitle);
-    const asideItems = await Promise.all((labels.asideItems ?? config?.asideItems ?? []).map((item) => translateLabel(locale, item)));
-    const footer = await translateLabel(locale, labels.footer ?? config?.footer);
+    const eyebrow = await translateLabel(locale, labels.eyebrow ?? config?.eyebrow, runtime, translate);
+    const title = await translateLabel(locale, labels.title ?? config?.title, runtime, translate);
+    const description = await translateLabel(locale, labels.description ?? config?.description, runtime, translate);
+    const asideTitle = await translateLabel(locale, labels.asideTitle ?? config?.asideTitle, runtime, translate);
+    const asideItems = await Promise.all((labels.asideItems ?? config?.asideItems ?? []).map((item) => translateLabel(locale, item, runtime, translate)));
+    const footer = await translateLabel(locale, labels.footer ?? config?.footer, runtime, translate);
     const resolvedAsideItems = asideItems.filter((item) => Boolean(item));
     const stackStyle = {
         display: "grid",
@@ -57,7 +81,7 @@ export async function PhiDescriptionWidget({ labels, config, runtime, }) {
                         }, children: title })) : null, description ? (_jsx("p", { style: {
                             margin: 0,
                             marginBottom: 0,
-                            color: PHI_COLOR.textSecondary,
+                            color: resolveDescriptionToneColor(config?.tone),
                             fontSize: PHI_FONT_SIZE.lg,
                             lineHeight: PHI_LINE_HEIGHT.lg,
                         }, children: description })) : null] })) : null, asideTitle || resolvedAsideItems.length > 0 ? (_jsxs("div", { style: subStackStyle, children: [asideTitle ? (_jsx("span", { style: {

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

@@ -11,6 +11,7 @@ export declare const PHI_DIMENSION_WIDGET_DEFINITION: {
     kind: "widget";
     pluginKey: string;
     typeKey: string;
+    slotSizePolicy: "intrinsic";
     title: string;
     description: string;
     category: "form";

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

@@ -13,6 +13,7 @@ export const PHI_DIMENSION_WIDGET_DEFINITION = {
     kind: "widget",
     pluginKey: resolvePhiCmsWidgetPluginKey("dimension"),
     typeKey: "dimension",
+    slotSizePolicy: "intrinsic",
     title: "Dimension",
     description: "Reusable width and height input with explicit CSS units.",
     category: "form",

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

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

package/plugins/runtime-modules/core/widgets/draft-status/authoring.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PhiDraftStatusWidget } from "./client";
+import { PHI_DRAFT_STATUS_WIDGET_DEFINITION } from "./config";
+export const PHI_DRAFT_STATUS_WIDGET_BUILDER_PLUGIN = {
+    ...PHI_DRAFT_STATUS_WIDGET_DEFINITION,
+    // Drawn, not wired: on the canvas it would ask the Controller of the Builder, not of the Page.
+    renderEditor: ({ config }) => (_jsx(PhiDraftStatusWidget, { config: config, signalsEnabled: false })),
+};

package/plugins/runtime-modules/core/widgets/draft-status/client.d.ts

@@ -0,0 +1,21 @@
+import { type PhiDraftStatusWidgetLabels } from "../../../../../components/widgets/label-types/draft-status";
+import type { PhiDraftStatusWidgetConfig } from "./config";
+/**
+ * The draft state a Controller states, drawn as a tag in the Theme's status colours.
+ *
+ * Nothing is read here and nothing is worked out. The Controller the placement names is asked once,
+ * when this mounts, and answers to this address; every change after reaches it as a broadcast from
+ * the same Controller. Signals on the channel from anyone else are not this Widget's draft and are
+ * passed over -- the Revisions page announces restores on it too.
+ *
+ * The address is the one the slot frame registered for this Widget, and the listener answers for it:
+ * an addressed signal is held until a listener names its receiver, so a listener that named none
+ * left the answer to the mount request waiting for good, and the tag stayed on "Checking..." whenever
+ * the Widget came up after the Controller's last broadcast. The answer arrives in the scope the frame
+ * registered, not the route's, so only a broadcast is matched on the route's scope.
+ */
+export declare function PhiDraftStatusWidget({ config, labels, signalsEnabled, }: {
+    config?: PhiDraftStatusWidgetConfig | null;
+    labels?: PhiDraftStatusWidgetLabels;
+    signalsEnabled?: boolean;
+}): import("react").JSX.Element;

package/plugins/runtime-modules/core/widgets/draft-status/client.js

@@ -0,0 +1,118 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { findPhiSignalRoutesByCapabilityId } from "../../../../../types/signals";
+import { readPhiDraftStatusSignalValue } from "../../../../../types/draft-status";
+import { usePhiConfig } from "../../../../../components/root/phi-config-provider";
+import { usePhiSignalDispatcher, usePhiSignalListener } from "../../../../../components/runtime/runtime-signal-bus";
+import { usePhiSignalIdentity } from "../../../../../components/runtime/runtime-signal-identity";
+import { PhiTagControl } from "../../../../../components/controls/phi-tag-control";
+import { PhiFlexControl } from "../../../../../components/controls/phi-flex-control";
+import { PhiTypographyControl } from "../../../../../components/controls/phi-typography-control";
+import { PHI_DRAFT_STATUS_WIDGET_DEFAULT_LABELS, formatPhiDraftStatusRevisionLabel, } from "../../../../../components/widgets/label-types/draft-status";
+function buildStatusLabel(state, labels) {
+    if (!state) {
+        return labels.checking;
+    }
+    if (state.status === "unsaved") {
+        return labels.unsaved;
+    }
+    if (state.status === "draft") {
+        return state.revisionId != null
+            ? formatPhiDraftStatusRevisionLabel(labels.draftWithRevision, state.revisionId)
+            : labels.draft;
+    }
+    if (state.status === "published") {
+        return labels.published;
+    }
+    return labels.unavailable;
+}
+/**
+ * The draft state a Controller states, drawn as a tag in the Theme's status colours.
+ *
+ * Nothing is read here and nothing is worked out. The Controller the placement names is asked once,
+ * when this mounts, and answers to this address; every change after reaches it as a broadcast from
+ * the same Controller. Signals on the channel from anyone else are not this Widget's draft and are
+ * passed over -- the Revisions page announces restores on it too.
+ *
+ * The address is the one the slot frame registered for this Widget, and the listener answers for it:
+ * an addressed signal is held until a listener names its receiver, so a listener that named none
+ * left the answer to the mount request waiting for good, and the tag stayed on "Checking..." whenever
+ * the Widget came up after the Controller's last broadcast. The answer arrives in the scope the frame
+ * registered, not the route's, so only a broadcast is matched on the route's scope.
+ */
+export function PhiDraftStatusWidget({ config, labels = PHI_DRAFT_STATUS_WIDGET_DEFAULT_LABELS, signalsEnabled = true, }) {
+    const { token } = usePhiConfig();
+    const dispatchSignal = usePhiSignalDispatcher();
+    const [state, setState] = useState(null);
+    const selfAddress = usePhiSignalIdentity().receiver ?? null;
+    const requestRoute = findPhiSignalRoutesByCapabilityId(config?.signalRoutes?.emits, "request")[0] ?? null;
+    const statusRoute = findPhiSignalRoutesByCapabilityId(config?.signalRoutes?.listens, "status")[0] ?? null;
+    const controller = requestRoute?.receiver ?? null;
+    const statusChannel = statusRoute?.channel ?? null;
+    /*
+     * Keyed on the route's facts, not on the route object: a config parsed again on every render would
+     * otherwise ask the Controller every render.
+     */
+    const requestScope = requestRoute?.scope ?? null;
+    const requestChannel = requestRoute?.channel ?? null;
+    const requestAction = requestRoute?.action ?? null;
+    const requestValueType = requestRoute?.valueType ?? null;
+    useEffect(() => {
+        if (!signalsEnabled ||
+            selfAddress === null ||
+            controller === null ||
+            requestScope === null ||
+            requestChannel === null ||
+            requestAction === null ||
+            requestValueType === null) {
+            return;
+        }
+        dispatchSignal({
+            scope: requestScope,
+            channel: requestChannel,
+            action: requestAction,
+            value: null,
+            valueType: requestValueType,
+            sender: selfAddress,
+            receiver: controller,
+        });
+    }, [
+        controller,
+        dispatchSignal,
+        requestAction,
+        requestChannel,
+        requestScope,
+        requestValueType,
+        selfAddress,
+        signalsEnabled,
+    ]);
+    usePhiSignalListener((signal) => {
+        if (!signalsEnabled || !statusRoute || controller === null) {
+            return;
+        }
+        const addressed = selfAddress !== null && signal.receiver === selfAddress;
+        const broadcast = signal.receiver === "broadcast" && signal.scope === statusRoute.scope;
+        if (signal.channel !== statusRoute.channel ||
+            signal.action !== statusRoute.action ||
+            signal.sender !== controller ||
+            (!addressed && !broadcast)) {
+            return;
+        }
+        const next = readPhiDraftStatusSignalValue(signal.value);
+        if (next) {
+            setState(next);
+        }
+    }, useMemo(() => ({ channels: statusChannel === null ? [] : [statusChannel] }), [statusChannel]), selfAddress);
+    const color = state === null
+        ? undefined
+        : state.status === "unsaved"
+            ? token.colorInfo
+            : state.status === "draft"
+                ? token.colorWarning
+                : state.status === "published"
+                    ? token.colorSuccess
+                    : token.colorError;
+    const error = state?.status === "error" ? state.error ?? labels.readFailed : null;
+    return (_jsxs(PhiFlexControl, { align: "center", justify: "space-between", gap: 12, wrap: "wrap", style: { width: "100%" }, children: [_jsxs(PhiFlexControl, { align: "center", gap: 8, wrap: true, children: [state?.subject ? (_jsx(PhiTypographyControl, { code: true, style: { fontSize: 12 }, children: state.subject })) : null, _jsx(PhiTagControl, { color: color, children: buildStatusLabel(state, labels) })] }), error ? (_jsx(PhiTypographyControl, { type: "danger", style: { fontSize: 12 }, children: error })) : null] }));
+}

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

@@ -0,0 +1,43 @@
+import { type PhiSignalRouteSet } from "../../../../../types/signals";
+import { type PhiCmsWidgetConfigBase } from "../../../../../components/widgets/config/parser-primitives";
+/**
+ * The state of a draft, as the Controller that keeps it states it: unsaved, draft, published, or not
+ * readable.
+ *
+ * The Widget knows nothing about what the draft is of. Its placement names the Controller twice --
+ * `request` is where it asks when it mounts, `status` is what it hears back and every change after --
+ * and the Controller answers in `PhiDraftStatusSignalValue`, subject included. So the Builder's
+ * workspaces, the Theme, and a Module with drafts of its own place the same Widget, each pointing it at
+ * their own Controller.
+ */
+export type PhiDraftStatusWidgetConfig = PhiCmsWidgetConfigBase & {
+    signalRoutes?: PhiSignalRouteSet | null;
+};
+export declare function parsePhiDraftStatusWidgetConfig(config: Record<string, unknown>): PhiDraftStatusWidgetConfig;
+export declare const PHI_DRAFT_STATUS_WIDGET_DEFINITION: {
+    kind: "widget";
+    pluginKey: string;
+    typeKey: string;
+    title: string;
+    description: string;
+    category: "content";
+    iconFamily: string;
+    slotSizePolicy: "intrinsic";
+    runtimeSignals: {
+        emits: {
+            id: string;
+            action: "activate";
+            valueType: "none";
+        }[];
+        listens: {
+            id: string;
+            channel: string;
+            action: "change";
+            valueType: "json";
+            valueSchema: `${string}/signals/${string}`;
+        }[];
+    };
+    fields: never[];
+    defaultConfig: {};
+    parseConfig: typeof parsePhiDraftStatusWidgetConfig;
+};

package/plugins/runtime-modules/core/widgets/draft-status/config.js

@@ -0,0 +1,37 @@
+import { resolvePhiCmsWidgetPluginKey } from "../../../../../constants/cms-widget-types";
+import { PHI_SIGNAL_VALUE_SCHEMAS, readPhiSignalRouteSet } from "../../../../../types/signals";
+import { readRenderableBlockConfig, } from "../../../../../components/widgets/config/parser-primitives";
+export function parsePhiDraftStatusWidgetConfig(config) {
+    return {
+        ...readRenderableBlockConfig(config),
+        signalRoutes: readPhiSignalRouteSet(config.signalRoutes),
+    };
+}
+export const PHI_DRAFT_STATUS_WIDGET_DEFINITION = {
+    kind: "widget",
+    pluginKey: resolvePhiCmsWidgetPluginKey("draft-status"),
+    typeKey: "draft-status",
+    title: "Draft status",
+    description: "Shows whether a Controller's draft is unsaved, saved as a draft, or published.",
+    category: "content",
+    iconFamily: "content",
+    slotSizePolicy: "intrinsic",
+    runtimeSignals: {
+        emits: [
+            // Asked once on mount, so a Widget that comes up after the last change still starts out right.
+            { id: "request", action: "activate", valueType: "none" },
+        ],
+        listens: [
+            {
+                id: "status",
+                channel: "draftStatus",
+                action: "change",
+                valueType: "json",
+                valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.revisionsDraftStatus,
+            },
+        ],
+    },
+    fields: [],
+    defaultConfig: {},
+    parseConfig: parsePhiDraftStatusWidgetConfig,
+};

package/plugins/runtime-modules/core/widgets/draft-status/plugin.d.ts

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

package/plugins/runtime-modules/core/widgets/draft-status/plugin.js

@@ -0,0 +1,23 @@
+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 { getPhiDraftStatusWidgetLabels } from "../../../../../components/widgets/label-sets/draft-status";
+import { readPhiServerApiCredentials } from "../../../../../helpers/phis-server-credentials";
+import { PHI_DRAFT_STATUS_WIDGET_DEFINITION } from "./config";
+async function loadLabels(runtime) {
+    return getPhiDraftStatusWidgetLabels({
+        apiBaseUrl: readPhiServerApiCredentials().apiBaseUrl,
+        internalToken: readPhiServerApiCredentials().internalToken,
+        locale: runtime.locale.current,
+    });
+}
+export const PHI_DRAFT_STATUS_WIDGET_PLUGIN = {
+    ...PHI_DRAFT_STATUS_WIDGET_DEFINITION,
+    render: async ({ config, runtime }) => (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiCmsWidgetType.DraftStatus, componentProps: { config, labels: await loadLabels(runtime) } })),
+    // A preview asks no Controller: it would answer for the draft being edited, not the one shown.
+    renderPreview: async ({ config, runtime }) => (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiCmsWidgetType.DraftStatus, componentProps: {
+            config,
+            labels: await loadLabels(runtime),
+            signalsEnabled: false,
+        } })),
+};

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

@@ -1,3 +1,3 @@
 import type { PhiCmsBuilderWidgetPlugin } from "../../../../../types";
-import { type PhiCmsFormWidgetConfig } from "./config";
+import type { PhiCmsFormWidgetConfig } from "../../../../../components/forms/form-widget-config";
 export declare const PHI_FORM_WIDGET_BUILDER_PLUGIN: PhiCmsBuilderWidgetPlugin<PhiCmsFormWidgetConfig>;