@phis/ui 0.1.0 → 0.2.1

package/plugins/runtime-modules/core/widgets/simple-text/config.js

@@ -1,58 +1,40 @@
 import { resolvePhiCmsWidgetPluginKey } from "../../../../../constants/cms-widget-types";
+import { PHI_SIMPLE_TEXT_MARKS } from "../../../../../types/core-widget-placements";
 import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
 import { PHI_RENDERABLE_BLOCK_GEOMETRY_FIELDS } from "../../../../../helpers/renderable-block-plugin-fields";
 import { readBoolean, readRenderableBlockConfig, readString, } from "../../../../../components/widgets/config/parser-primitives";
+import { PHI_WIDGET_FONT_FAMILY_OPTIONS, readPhiWidgetFontFamily, } from "../../../../../components/widgets/helpers/font-family";
+import { PHI_WIDGET_FONT_SIZE_OPTIONS, readPhiWidgetFontSize, } from "../../../../../components/widgets/helpers/font-size";
+import { PHI_TEXT_TONE_FIELD_OPTIONS, readPhiTextTone, } from "../../../../../components/widgets/config/text-tone";
+function readSimpleTextMarks(value) {
+    if (!Array.isArray(value)) {
+        return undefined;
+    }
+    return PHI_SIMPLE_TEXT_MARKS.filter((mark) => value.includes(mark));
+}
 export function parsePhiCmsSimpleTextWidgetConfig(config) {
     const renderableBlockConfig = readRenderableBlockConfig(config);
     return {
         ...renderableBlockConfig,
-        size: renderableBlockConfig.size ?? { width: "fit-content", height: "auto" },
-        maxSize: {
-            ...(renderableBlockConfig.maxSize ?? {}),
-            ...(renderableBlockConfig.maxSize?.width == null ? { width: "100%" } : {}),
-        },
         text: readString(config.text),
         href: readString(config.href),
         icon: readString(config.icon),
         color: readString(config.color),
-        fontFamily: (() => {
-            const value = readString(config.fontFamily);
-            return value === "inherit" ||
-                value === "system" ||
-                value === "body" ||
-                value === "mono" ||
-                value === "serif" ||
-                value === "accent" ||
-                value === "display"
-                ? value
-                : undefined;
-        })(),
-        fontSize: (() => {
-            const value = readString(config.fontSize);
-            return value === "inherit" || value === "xs" || value === "sm" || value === "base" || value === "lg" || value === "xl"
-                ? value
-                : undefined;
-        })(),
+        fontFamily: readPhiWidgetFontFamily(config.fontFamily),
+        fontSize: readPhiWidgetFontSize(config.fontSize),
         external: readBoolean(config.external),
         newTab: readBoolean(config.newTab),
-        type: (() => {
-            const value = readString(config.type);
-            return value === "secondary" || value === "success" || value === "warning" || value === "danger"
-                ? value
-                : undefined;
-        })(),
-        strong: readBoolean(config.strong),
-        italic: readBoolean(config.italic),
-        underline: readBoolean(config.underline),
-        delete: readBoolean(config.delete),
+        tone: readPhiTextTone(config.tone),
+        marks: readSimpleTextMarks(config.marks),
         disabled: readBoolean(config.disabled),
-        code: readBoolean(config.code),
     };
 }
 export const PHI_SIMPLE_TEXT_WIDGET_DEFINITION = {
     kind: "widget",
     pluginKey: resolvePhiCmsWidgetPluginKey("simple-text"),
     typeKey: "simple-text",
+    translatesOwnText: true,
+    slotSizePolicy: "intrinsic",
     title: "Simple Text",
     category: "content",
     description: "Plain text or a single link with optional icon and text styling.",
@@ -73,55 +55,33 @@ export const PHI_SIMPLE_TEXT_WIDGET_DEFINITION = {
             type: "choice",
             label: "Font Family",
             editorPlacement: "toolbar",
-            options: [
-                { value: "inherit", label: "Inherit" },
-                { value: "system", label: "System" },
-                { value: "body", label: "Body" },
-                { value: "mono", label: "Mono" },
-                { value: "serif", label: "Serif" },
-                { value: "accent", label: "Accent" },
-                { value: "display", label: "Display" },
-            ],
+            options: [...PHI_WIDGET_FONT_FAMILY_OPTIONS],
         },
         {
             key: "fontSize",
             type: "choice",
             label: "Font Size",
             editorPlacement: "toolbar",
-            options: [
-                { value: "inherit", label: "Inherit" },
-                { value: "xs", label: "XS" },
-                { value: "sm", label: "SM" },
-                { value: "base", label: "Base" },
-                { value: "lg", label: "LG" },
-                { value: "xl", label: "XL" },
-            ],
+            options: [...PHI_WIDGET_FONT_SIZE_OPTIONS],
         },
         {
-            key: "type",
+            key: "tone",
             type: "choice",
-            label: "Type",
-            options: [
-                { value: "secondary", label: "Secondary" },
-                { value: "success", label: "Success" },
-                { value: "warning", label: "Warning" },
-                { value: "danger", label: "Danger" },
-            ],
+            label: "Tone",
+            options: [...PHI_TEXT_TONE_FIELD_OPTIONS],
         },
         { key: "external", type: "boolean", label: "External" },
         { key: "newTab", type: "boolean", label: "Open In New Tab" },
-        { key: "strong", type: "boolean", label: "Strong", editorPlacement: "toolbar" },
-        { key: "italic", type: "boolean", label: "Italic", editorPlacement: "toolbar" },
-        { key: "underline", type: "boolean", label: "Underline", editorPlacement: "toolbar" },
-        { key: "delete", type: "boolean", label: "Delete", editorPlacement: "toolbar" },
+        { key: "marks", type: "string", label: "Marks", editorPlacement: "toolbar" },
         { key: "disabled", type: "boolean", label: "Disabled" },
-        { key: "code", type: "boolean", label: "Code", editorPlacement: "toolbar" },
     ],
     defaultConfig: {
-        size: {
-            width: "fit-content",
-            height: "auto",
-        },
+        /*
+         * No size: the `intrinsic` slot policy already draws a text as wide as its content
+         * (`slot-size-policy.ts`), and a *stated* size means something else -- it fixes the axis and takes
+         * the child out of its Layout's hands. The cap is the one thing worth saying, and it says only
+         * "never wider than the slot".
+         */
         maxSize: {
             width: "100%",
         },

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

@@ -0,0 +1,32 @@
+import { type PhiSimpleTextWidgetRenderableConfig } from "./config";
+export type PhiSimpleTextWidgetEditorProps = {
+    text: string;
+    config?: PhiSimpleTextWidgetRenderableConfig | null;
+    onChangeText?: (text: string) => void;
+};
+export type PhiSimpleTextWidgetStyleButtonProps = {
+    config?: PhiSimpleTextWidgetRenderableConfig | null;
+    onChange: (patch: Partial<PhiSimpleTextWidgetRenderableConfig>) => void;
+};
+export declare function PhiSimpleTextWidgetStyleButton({ config, onChange, }: PhiSimpleTextWidgetStyleButtonProps): import("react").JSX.Element;
+export type PhiSimpleTextWidgetColorButtonProps = {
+    config?: PhiSimpleTextWidgetRenderableConfig | null;
+    onChange: (color: string | null) => void;
+};
+export declare function PhiSimpleTextWidgetColorButton({ config, onChange, }: PhiSimpleTextWidgetColorButtonProps): import("react").JSX.Element;
+export type PhiSimpleTextWidgetTypographyButtonProps = {
+    config?: PhiSimpleTextWidgetRenderableConfig | null;
+    onChange: (patch: Partial<PhiSimpleTextWidgetRenderableConfig>) => void;
+};
+export declare function PhiSimpleTextWidgetTypographyButton({ config, onChange, }: PhiSimpleTextWidgetTypographyButtonProps): import("react").JSX.Element;
+export declare function PhiSimpleTextWidgetEditor({ text, config, onChangeText, }: PhiSimpleTextWidgetEditorProps): import("react").JSX.Element;
+export declare function renderPhiSimpleTextWidgetEditor(config: PhiSimpleTextWidgetRenderableConfig | undefined, fallbackText?: string, onChangeText?: (text: string) => void): import("react").JSX.Element;
+export declare function PhiSimpleTextWidgetEditorPluginBody({ label, config, onChange, }: {
+    label?: string | null;
+    config: PhiSimpleTextWidgetRenderableConfig;
+    onChange?: (patch: Partial<PhiSimpleTextWidgetRenderableConfig>) => void;
+}): import("react").JSX.Element;
+export declare function PhiSimpleTextWidgetEditorPluginTools({ config, onChange, }: {
+    config: PhiSimpleTextWidgetRenderableConfig;
+    onChange: (patch: Partial<PhiSimpleTextWidgetRenderableConfig>) => void;
+}): import("react").JSX.Element;

package/plugins/runtime-modules/core/widgets/simple-text/editor.js

@@ -0,0 +1,143 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { FormatPainterOutlined } from "@ant-design/icons";
+import { PhiInlineTextEditor } from "../../../../../components/controls/phi-inline-text-editor";
+import { PhiButtonControl } from "../../../../../components/controls/phi-button-control";
+import { PhiCheckboxControl } from "../../../../../components/controls/phi-checkbox-control";
+import { PhiPopoverControl } from "../../../../../components/controls/phi-popover-control";
+import { usePhiConfig } from "../../../../../components/root/phi-config-provider";
+import { PhiIcon } from "../../../../../components/shell/phi-icon";
+import { PhiWidgetColorToolButton, PhiWidgetIconToolButton, PhiWidgetTypographyToolButton, } from "../../../../../components/widgets/client/shared/phi-widget-tool-buttons";
+import { usePhiWidgetScaffoldPopup } from "../../../../../components/widgets/client/shared/phi-widget-scaffold-popup";
+import { usePhiAuthoringToolsLabels } from "../../../../../components/widgets/client/shared/phi-authoring-tools-labels";
+import { PHI_SIMPLE_TEXT_MARKS } from "../../../../../types/core-widget-placements";
+import { resolvePhiSimpleTextWidgetText, } from "./config";
+import { hasPhiSimpleTextMark } from "./marks";
+import { resolvePhiWidgetFontFamily } from "../../../../../components/widgets/helpers/font-family";
+import { resolvePhiWidgetFontSize } from "../../../../../components/widgets/helpers/font-size";
+import { PHI_Z_INDEX } from "../../../../../theme/phi-tokens";
+import { PhiFlexControl } from "../../../../../components/controls/phi-flex-control";
+const STYLE_TOGGLES = [
+    { key: "bold", label: "Strong" },
+    { key: "italic", label: "Italic" },
+    { key: "underline", label: "Underline" },
+    { key: "strike", label: "Delete" },
+    { key: "code", label: "Code" },
+];
+export function PhiSimpleTextWidgetStyleButton({ config, onChange, }) {
+    const labels = usePhiAuthoringToolsLabels();
+    const [open, setOpen] = useState(false);
+    const popup = usePhiWidgetScaffoldPopup();
+    const handleOpenChange = (nextOpen) => {
+        setOpen(nextOpen);
+        popup.setOpen(nextOpen);
+    };
+    return (_jsx(PhiPopoverControl, { open: open, trigger: "click", placement: "bottomRight", onOpenChange: handleOpenChange, getPopupContainer: popup.getPopupContainer, rootClassName: popup.rootClassName, zIndex: PHI_Z_INDEX.authoringPopup, content: _jsx(PhiFlexControl, { vertical: true, gap: 8, children: STYLE_TOGGLES.map((toggle) => (_jsx(PhiCheckboxControl, { checked: hasPhiSimpleTextMark(config, toggle.key), label: toggle.label, onChange: (checked) => {
+                    const marks = PHI_SIMPLE_TEXT_MARKS.filter((mark) => mark === toggle.key ? checked : hasPhiSimpleTextMark(config, mark));
+                    onChange({ marks });
+                } }, toggle.key))) }), children: _jsx("span", { style: { display: "inline-flex" }, children: _jsx(PhiButtonControl, { type: "text", size: "small", ariaLabel: labels.text.styles, icon: _jsx(FormatPainterOutlined, {}), onClick: () => undefined }) }) }));
+}
+export function PhiSimpleTextWidgetColorButton({ config, onChange, }) {
+    const labels = usePhiAuthoringToolsLabels();
+    return (_jsx(PhiWidgetColorToolButton, { value: config?.color ?? null, ariaLabel: labels.text.color, onChange: onChange }));
+}
+export function PhiSimpleTextWidgetTypographyButton({ config, onChange, }) {
+    const labels = usePhiAuthoringToolsLabels();
+    return (_jsx(PhiWidgetTypographyToolButton, { fontFamily: config?.fontFamily, fontSize: config?.fontSize, defaultFontSize: "lg", ariaLabel: labels.text.typography, onChange: ({ fontFamily, fontSize }) => onChange({
+            ...(fontFamily !== undefined ? { fontFamily: fontFamily ?? undefined } : {}),
+            ...(fontSize !== undefined ? { fontSize: fontSize ?? undefined } : {}),
+        }) }));
+}
+export function PhiSimpleTextWidgetEditor({ text, config, onChangeText, }) {
+    const labels = usePhiAuthoringToolsLabels();
+    const { fonts, token } = usePhiConfig();
+    /*
+     * What is being typed, held here and nowhere else until the field is left.
+     *
+     * The characters belong to the input: it has its own undo while it holds the focus, and the
+     * Builder's history has no business recording one entry per keystroke. `null` means nothing is
+     * being edited, so the field shows the stored text -- which is what makes an undo visible here at
+     * all: a draft kept past the blur would go on showing the typed value while the text underneath
+     * had already been taken back.
+     */
+    const [editedText, setEditedText] = useState(null);
+    const draftText = editedText ?? text;
+    const textDecoration = [
+        hasPhiSimpleTextMark(config, "underline") ? "underline" : null,
+        hasPhiSimpleTextMark(config, "strike") ? "line-through" : null,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const resolvedFontFamily = hasPhiSimpleTextMark(config, "code")
+        ? token.fontFamilyCode
+        : resolvePhiWidgetFontFamily(config?.fontFamily, fonts, token);
+    const resolvedFontSize = resolvePhiWidgetFontSize(config?.fontSize, token, "lg");
+    return (_jsxs(PhiFlexControl, { align: "center", gap: 8, style: {
+            width: "fit-content",
+            maxWidth: "100%",
+            minWidth: 0,
+            fontSize: resolvedFontSize ?? "inherit",
+            lineHeight: resolvedFontSize ? 1.6 : "inherit",
+            color: config?.color ?? undefined,
+            fontFamily: resolvedFontFamily,
+        }, children: [config?.icon ? _jsx(PhiIcon, { name: config.icon, size: "1.25em" }) : null, _jsx(PhiInlineTextEditor, { value: draftText, variant: "underlined", 
+                /*
+                 * Compact, because the field stands in the page and not in a form.
+                 *
+                 * A field of the ordinary size keeps a control's worth of room around its text, and that room is
+                 * what a Widget in a Region does not have: the same sentence would stand taller here than it
+                 * stands once it is read, and the strip around it would move as soon as it is edited. Small
+                 * leaves the hairline under the text and nothing else.
+                 */
+                size: "small", placeholder: labels.text.placeholder, readOnly: !onChangeText, onFocus: () => setEditedText(text), onChange: (nextText) => setEditedText(nextText), onCommit: (committedText) => {
+                    setEditedText(null);
+                    if (committedText !== text) {
+                        onChangeText?.(committedText);
+                    }
+                }, onCancel: () => setEditedText(null), inputStyle: {
+                    paddingInline: 0,
+                    paddingBlock: 0,
+                    /*
+                     * No control line as a floor, because this field is a text and not a control.
+                     *
+                     * Ant Design gives a text area `min-height: controlHeight` -- one whole control line, and inside
+                     * an affix wrapper that minus its two borders (`input/style/textarea.js`). It hangs on
+                     * `controlHeight` and on nothing else, so no size takes it back: measured in the Builder, the
+                     * field kept a 32px box around a 22.4px line while `autoSize` had written the right 22px
+                     * beside it, and the text sat at the top of the remaining ten pixels. That is what a text in
+                     * a header strip stood higher than everything beside it for.
+                     */
+                    minHeight: 0,
+                    fontSize: resolvedFontSize ?? "inherit",
+                    lineHeight: resolvedFontSize ? 1.6 : "inherit",
+                    fontWeight: hasPhiSimpleTextMark(config, "bold") ? 600 : undefined,
+                    fontStyle: hasPhiSimpleTextMark(config, "italic") ? "italic" : undefined,
+                    textDecoration: textDecoration || undefined,
+                    color: config?.color ?? undefined,
+                    fontFamily: resolvedFontFamily,
+                    /*
+                     * The page shows through: an edit in place must not paint over what is behind the text.
+                     *
+                     * Ant Design's underlined field fills itself with the container colour, which is right for a
+                     * form and wrong here -- the Widget stands on whatever its Region is painted with. Code text is
+                     * the exception, because there the fill is part of how the text reads.
+                     */
+                    backgroundColor: hasPhiSimpleTextMark(config, "code") ? "var(--ant-color-fill-secondary, rgba(0, 0, 0, 0.04))" : "transparent",
+                }, fitContent: true, style: {
+                    minWidth: 0,
+                    flex: "0 0 auto",
+                    maxWidth: "100%",
+                } })] }));
+}
+export function renderPhiSimpleTextWidgetEditor(config, fallbackText = "Text", onChangeText) {
+    const text = resolvePhiSimpleTextWidgetText(config, { preferConfigText: true }, fallbackText);
+    return (_jsx(PhiSimpleTextWidgetEditor, { text: text, config: config, onChangeText: onChangeText }));
+}
+export function PhiSimpleTextWidgetEditorPluginBody({ label, config, onChange, }) {
+    return renderPhiSimpleTextWidgetEditor({ ...config, label: label ?? undefined }, "Text", onChange ? (text) => onChange({ text }) : undefined);
+}
+export function PhiSimpleTextWidgetEditorPluginTools({ config, onChange, }) {
+    const labels = usePhiAuthoringToolsLabels();
+    return (_jsxs(_Fragment, { children: [_jsx(PhiWidgetIconToolButton, { value: config.icon ?? null, ariaLabel: labels.text.icon, onChange: (icon) => onChange({ icon: icon ?? undefined }) }), _jsx(PhiSimpleTextWidgetColorButton, { config: config, onChange: (color) => onChange({ color: color ?? undefined }) }), _jsx(PhiSimpleTextWidgetTypographyButton, { config: config, onChange: onChange }), _jsx(PhiSimpleTextWidgetStyleButton, { config: config, onChange: onChange })] }));
+}

package/plugins/runtime-modules/core/widgets/simple-text/marks.d.ts

@@ -0,0 +1,4 @@
+import type { PhiSimpleTextMark } from "../../../../../types/core-widget-placements";
+export declare function hasPhiSimpleTextMark(config: {
+    marks?: readonly PhiSimpleTextMark[];
+} | null | undefined, mark: PhiSimpleTextMark): boolean;

package/plugins/runtime-modules/core/widgets/simple-text/marks.js

@@ -0,0 +1,8 @@
+/*
+ * Whether a Simple Text carries a mark. Apart from `config.ts` because the live client reads it on every
+ * render, and the config module is the parser -- with the block defaults merge and its normalizers
+ * behind it, which the client has no use for.
+ */
+export function hasPhiSimpleTextMark(config, mark) {
+    return config?.marks?.includes(mark) === true;
+}

package/plugins/runtime-modules/core/widgets/simple-text/server.js

@@ -1,12 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { trGlobal, trGlobalForLocale, } from "../../../../../server-helpers/translate";
+import { maskPhiTextPlaceholders, resolvePhiTextPlaceholders } from "../../../../../helpers/text-placeholders";
 import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
 import { PhiRuntimeModuleRenderClientHost } from "../../../../../components/runtime/runtime-module-render-client-manifest";
 export async function PhiSimpleTextWidget({ blockId, labels, config, translate, runtime, }) {
     const locale = runtime?.locale.current;
-    const text = translate && labels.text
-        ? locale ? await trGlobalForLocale(locale, labels.text) : await trGlobal(labels.text)
-        : labels.text;
+    /*
+     * Masked before the translation and filled after it.
+     *
+     * Before, because a translator translates `{year}` and hands back `{Jahr}`, which nothing answers.
+     * After, because a translator may move the placeholder to the other end of the sentence and the
+     * value belongs to where it ended up. See `helpers/text-placeholders.ts`.
+     */
+    const masked = maskPhiTextPlaceholders(labels.text);
+    const translated = translate && masked.text
+        ? locale ? await trGlobalForLocale(locale, masked.text) : await trGlobal(masked.text)
+        : masked.text;
+    const text = resolvePhiTextPlaceholders(translated, masked.names, runtime);
     return (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiCmsWidgetType.SimpleText, componentProps: {
             blockId,
             labels: { text },

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

@@ -1,4 +1,3 @@
 import type { PhiCmsBuilderWidgetPlugin } from "../../../../../types";
-import { PHI_SLIDER_WIDGET_PLUGIN_TYPE, type PhiSliderWidgetConfig } from "./config";
+import { type PhiSliderWidgetConfig } from "./config";
 export declare const PHI_SLIDER_WIDGET_BUILDER_PLUGIN: PhiCmsBuilderWidgetPlugin<PhiSliderWidgetConfig>;
-export { PHI_SLIDER_WIDGET_PLUGIN_TYPE };

package/plugins/runtime-modules/core/widgets/slider/authoring.js

@@ -1,9 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PhiSliderWidget } from "./client";
-import { PHI_SLIDER_WIDGET_DEFINITION, PHI_SLIDER_WIDGET_PLUGIN_TYPE, } from "./config";
+import { PHI_SLIDER_WIDGET_DEFINITION, } from "./config";
 export const PHI_SLIDER_WIDGET_BUILDER_PLUGIN = {
     ...PHI_SLIDER_WIDGET_DEFINITION,
     renderEditor: ({ widget, config }) => (_jsx(PhiSliderWidget, { blockId: widget.id, config: config })),
 };
-export { PHI_SLIDER_WIDGET_PLUGIN_TYPE };

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { PhiSliderControl } from "../../../../../components/controls/phi-slider-control";
-import { clampPhiSliderValue } from "./config";
+import { clampPhiSliderValue } from "./value";
 import { usePhiControlSignalController } from "../../../../../components/widgets/client/shared/phi-control-signals";
 export function PhiSliderWidget({ config, value: controlledValue, disabled, readOnly, signalsEnabled = true, onChange, onChangeComplete, }) {
     const min = config?.min ?? 0;

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

@@ -12,7 +12,6 @@ export type PhiSliderWidgetConfig = PhiControlStateConfig & {
     tooltipMode?: PhiSliderTooltipMode;
     tooltipSuffix?: string;
 };
-export declare function clampPhiSliderValue(value: number, min: number, max: number): number;
 export declare function parsePhiSliderWidgetConfig(config: Record<string, unknown>): PhiSliderWidgetConfig;
 export declare const PHI_SLIDER_WIDGET_DEFINITION: {
     kind: "widget";
@@ -78,4 +77,3 @@ export declare const PHI_SLIDER_WIDGET_DEFINITION: {
     };
     parseConfig: typeof parsePhiSliderWidgetConfig;
 };
-export declare const PHI_SLIDER_WIDGET_PLUGIN_TYPE: string;

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

@@ -1,12 +1,9 @@
 import { resolvePhiCmsWidgetPluginKey } from "../../../../../constants/cms-widget-types";
-import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
 import { PHI_SLIDER_TOOLTIP_MODES, } from "../../../../../components/controls/phi-slider-control-contract";
 import { PHI_NUMBER_CONTROL_SIGNALS } from "../../../../../components/widgets/signals/control-signal-capabilities";
 import { PHI_CONTROL_STATE_FIELDS, parsePhiControlStateConfig, } from "../../../../../components/widgets/config/control-signal-config";
 import { readBoolean, readNumber, readString } from "../../../../../components/widgets/config/parser-primitives";
-export function clampPhiSliderValue(value, min, max) {
-    return Math.min(max, Math.max(min, value));
-}
+import { clampPhiSliderValue } from "./value";
 function readPhiSliderTooltipMode(value) {
     return typeof value === "string" && PHI_SLIDER_TOOLTIP_MODES.includes(value)
         ? value
@@ -70,4 +67,3 @@ export const PHI_SLIDER_WIDGET_DEFINITION = {
     },
     parseConfig: parsePhiSliderWidgetConfig,
 };
-export const PHI_SLIDER_WIDGET_PLUGIN_TYPE = PhiCmsWidgetType.Slider;

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

@@ -1,4 +1,3 @@
 import type { PhiCmsServerWidgetPlugin } from "../../../../../types";
-import { PHI_SLIDER_WIDGET_PLUGIN_TYPE, type PhiSliderWidgetConfig } from "./config";
+import { type PhiSliderWidgetConfig } from "./config";
 export declare const PHI_SLIDER_WIDGET_PLUGIN: PhiCmsServerWidgetPlugin<PhiSliderWidgetConfig>;
-export { PHI_SLIDER_WIDGET_PLUGIN_TYPE };

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

@@ -1,10 +1,9 @@
 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_SLIDER_WIDGET_DEFINITION, PHI_SLIDER_WIDGET_PLUGIN_TYPE, } from "./config";
+import { PHI_SLIDER_WIDGET_DEFINITION, } from "./config";
 export const PHI_SLIDER_WIDGET_PLUGIN = {
     ...PHI_SLIDER_WIDGET_DEFINITION,
     render: ({ widget, config }) => (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiCmsWidgetType.Slider, componentProps: { blockId: widget.id, config } })),
     renderPreview: ({ widget, config }) => (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiCmsWidgetType.Slider, componentProps: { blockId: widget.id, config, signalsEnabled: false } })),
 };
-export { PHI_SLIDER_WIDGET_PLUGIN_TYPE };

package/plugins/runtime-modules/core/widgets/slider/value.d.ts

@@ -0,0 +1 @@
+export declare function clampPhiSliderValue(value: number, min: number, max: number): number;

package/plugins/runtime-modules/core/widgets/slider/value.js

@@ -0,0 +1,7 @@
+/*
+ * A Slider's value held inside its range. Apart from `config.ts` because the live client clamps on every
+ * change, and the config module is the parser with the block defaults merge behind it.
+ */
+export function clampPhiSliderValue(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}

package/plugins/runtime-modules/core/widgets/slot-upload/client.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { DeleteOutlined, UploadOutlined } from "@ant-design/icons";
-import { Flex, List, Progress, Typography } from "antd";
+import { PhiEntryListControl } from "../../../../../components/controls/phi-entry-list-control";
+import { PhiProgressControl } from "../../../../../components/controls/phi-progress-control";
 import { PhiButtonControl } from "../../../../../components/controls/phi-button-control";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { usePhiMediaUpload } from "../../../../../components/media/phi-media-upload";
@@ -9,7 +10,9 @@ import { runPhiAddonAssetUpload, } from "../../../../../components/media/media-u
 import { PHI_MEDIA_UPLOAD_DEFAULT_LABELS } from "../../../../../components/media/phi-media-upload";
 import { usePhiSignalListener } from "../../../../../components/runtime/runtime-signal-bus";
 import { usePhiSignalIdentity } from "../../../../../components/runtime/runtime-signal-identity";
-import { readPhiTableBindingParamsSignalValue } from "../../../../../types/table-widget";
+import { readPhiTableBindingParamsSignalValue } from "../../../../../types/table-signal-values";
+import { PhiFlexControl } from "../../../../../components/controls/phi-flex-control";
+import { PhiTypographyControl } from "../../../../../components/controls/phi-typography-control";
 function matchesListenRoute(route, signal) {
     return route.receiver !== null && route.channel === signal.channel && route.action === signal.action &&
         route.valueType === signal.valueType &&
@@ -170,14 +173,16 @@ export function PhiSlotUploadWidgetClient({ config }) {
         await reload();
     }, [base, ownerId, read, reload]);
     if (!base || !slotName) {
-        return _jsx(Typography.Text, { type: "secondary", children: "This field names no Add-on, table or slot." });
+        return _jsx(PhiTypographyControl, { type: "secondary", children: "This field names no Add-on, table or slot." });
     }
-    return (_jsxs(Flex, { vertical: true, gap: 8, "data-phis-slot-upload": slotName, children: [ownerId === null ? (_jsx(Typography.Text, { type: "secondary", children: "Nothing selected." })) : (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileInputRef, type: "file", hidden: true, multiple: slot?.cardinality === "many", accept: slot?.contentTypes.join(","), onChange: (event) => {
+    return (_jsxs(PhiFlexControl, { vertical: true, gap: 8, "data-phis-slot-upload": slotName, children: [ownerId === null ? (_jsx(PhiTypographyControl, { type: "secondary", children: "Nothing selected." })) : (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileInputRef, type: "file", hidden: true, multiple: slot?.cardinality === "many", accept: slot?.contentTypes.join(","), onChange: (event) => {
                             for (const file of Array.from(event.target.files ?? []))
                                 void upload.upload(file);
                             // Cleared so choosing the same file again is a change, and uploads again.
                             event.target.value = "";
-                        } }), _jsx(PhiButtonControl, { icon: _jsx(UploadOutlined, {}), label: "Choose a file", onClick: () => fileInputRef.current?.click() })] })), upload.items.filter((item) => item.status === "uploading").map((item) => (_jsx(Progress, { percent: item.progress, size: "small" }, item.localId))), failure ? _jsx(Typography.Text, { type: "danger", role: "alert", children: failure }) : null, _jsx(List, { size: "small", dataSource: [...files], locale: { emptyText: "Nothing here yet." }, renderItem: (file) => (_jsx(List.Item, { actions: [
-                        _jsx(PhiButtonControl, { size: "small", icon: _jsx(DeleteOutlined, {}), onClick: () => { void remove(file.id).catch(() => setFailure("That file stayed.")); } }, "remove"),
-                    ], children: _jsxs(Typography.Text, { children: [file.contentType, " \u2014 ", file.byteSize, " bytes"] }) })) })] }));
+                        } }), _jsx(PhiButtonControl, { icon: _jsx(UploadOutlined, {}), label: "Choose a file", onClick: () => fileInputRef.current?.click() })] })), upload.items.filter((item) => item.status === "uploading").map((item) => (_jsx(PhiProgressControl, { percent: item.progress, size: "small" }, item.localId))), failure ? _jsx(PhiTypographyControl, { type: "danger", role: "alert", children: failure }) : null, _jsx(PhiEntryListControl, { emptyDescription: "Nothing here yet.", entries: [...files].map((file) => ({
+                    key: String(file.id),
+                    title: `${file.contentType} — ${file.byteSize} bytes`,
+                    action: (_jsx(PhiButtonControl, { size: "small", icon: _jsx(DeleteOutlined, {}), ariaLabel: "Remove this file", tooltip: "Remove this file", onClick: () => { void remove(file.id).catch(() => setFailure("That file stayed.")); } })),
+                })) })] }));
 }

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

@@ -29,6 +29,7 @@ export declare const PHI_SLOT_UPLOAD_WIDGET_DEFINITION: {
     kind: "widget";
     pluginKey: string;
     typeKey: string;
+    slotSizePolicy: "intrinsic";
     title: string;
     category: "media";
     description: string;

package/plugins/runtime-modules/core/widgets/slot-upload/config.js

@@ -29,6 +29,7 @@ export const PHI_SLOT_UPLOAD_WIDGET_DEFINITION = {
     kind: "widget",
     pluginKey: PHI_SLOT_UPLOAD_WIDGET_PLUGIN_KEY,
     typeKey: PHI_SLOT_UPLOAD_WIDGET_TYPE_KEY,
+    slotSizePolicy: "intrinsic",
     title: "Slot upload",
     category: "media",
     description: "Puts a file into a declared slot on a row of an Add-on's table.",

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

@@ -1,3 +1 @@
-import { PHI_SPACER_WIDGET_PLUGIN_TYPE } from "./config";
-export declare const PHI_SPACER_WIDGET_BUILDER_PLUGIN: import("../../../../../types").PhiCmsBuilderWidgetPlugin<Record<string, never>>;
-export { PHI_SPACER_WIDGET_PLUGIN_TYPE };
+export declare const PHI_SPACER_WIDGET_BUILDER_PLUGIN: import("../../../../../types").PhiCmsBuilderWidgetPlugin<import("../../../../../types").PhiCmsWidgetConfigBase>;

package/plugins/runtime-modules/core/widgets/spacer/authoring.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createPhiCmsBuilderWidgetPlugin } from "../../../../../plugins/factories/widget-builder-plugin";
 import { PhiSpacerWidget } from "./client";
-import { PHI_SPACER_WIDGET_DEFINITION, PHI_SPACER_WIDGET_PLUGIN_TYPE } from "./config";
+import { PHI_SPACER_WIDGET_DEFINITION } from "./config";
 export const PHI_SPACER_WIDGET_BUILDER_PLUGIN = createPhiCmsBuilderWidgetPlugin(PHI_SPACER_WIDGET_DEFINITION, ({ config }) => _jsx(PhiSpacerWidget, { config: config }));
-export { PHI_SPACER_WIDGET_PLUGIN_TYPE };

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

@@ -1,4 +1,4 @@
-import type { PhiBlockBaseProps, PhiNoLabels, PhiRenderableBlockBase } from "../../../../../types";
-export type PhiSpacerWidgetConfig = PhiRenderableBlockBase;
+import type { PhiBlockBaseProps, PhiNoLabels } from "../../../../../types";
+import type { PhiSpacerWidgetConfig } from "./config";
 export type PhiSpacerWidgetProps = PhiBlockBaseProps<PhiNoLabels, PhiSpacerWidgetConfig>;
 export declare function PhiSpacerWidget({ config, }: PhiSpacerWidgetProps): import("react").JSX.Element;

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

@@ -1,4 +1,6 @@
-import { parsePhiEmptyWidgetConfig } from "../../../../../components/widgets/config/helpers";
+import { type PhiCmsWidgetConfigBase } from "../../../../../components/widgets/config/parser-primitives";
+/** A Spacer has no settings of its own; what it takes is the block's: size, anchor, effects. */
+export type PhiSpacerWidgetConfig = PhiCmsWidgetConfigBase;
 export declare const PHI_SPACER_WIDGET_DEFINITION: {
     kind: "widget";
     pluginKey: string;
@@ -10,6 +12,5 @@ export declare const PHI_SPACER_WIDGET_DEFINITION: {
     iconFamily: string;
     slotSizePolicy: "fill";
     fields: never[];
-    parseConfig: typeof parsePhiEmptyWidgetConfig;
+    parseConfig: (config: Record<string, unknown>) => PhiSpacerWidgetConfig;
 };
-export declare const PHI_SPACER_WIDGET_PLUGIN_TYPE: string;

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

@@ -1,6 +1,5 @@
 import { resolvePhiCmsWidgetPluginKey } from "../../../../../constants/cms-widget-types";
-import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
-import { parsePhiEmptyWidgetConfig } from "../../../../../components/widgets/config/helpers";
+import { readRenderableBlockConfig, } from "../../../../../components/widgets/config/parser-primitives";
 export const PHI_SPACER_WIDGET_DEFINITION = {
     kind: "widget",
     pluginKey: resolvePhiCmsWidgetPluginKey("spacer"),
@@ -12,6 +11,5 @@ export const PHI_SPACER_WIDGET_DEFINITION = {
     iconFamily: "layout",
     slotSizePolicy: "fill",
     fields: [],
-    parseConfig: parsePhiEmptyWidgetConfig,
+    parseConfig: (config) => readRenderableBlockConfig(config),
 };
-export const PHI_SPACER_WIDGET_PLUGIN_TYPE = PhiCmsWidgetType.Spacer;

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

@@ -1,4 +1,3 @@
 import type { PhiCmsServerWidgetPlugin } from "../../../../../types";
-import { PHI_SPACER_WIDGET_PLUGIN_TYPE } from "./config";
-export declare const PHI_SPACER_WIDGET_PLUGIN: PhiCmsServerWidgetPlugin<Record<string, never>>;
-export { PHI_SPACER_WIDGET_PLUGIN_TYPE };
+import { type PhiSpacerWidgetConfig } from "./config";
+export declare const PHI_SPACER_WIDGET_PLUGIN: PhiCmsServerWidgetPlugin<PhiSpacerWidgetConfig>;

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

@@ -2,9 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { definePhiPassiveWidgetRenderers } from "../../../../../plugins/factories/widget-renderers";
 import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
 import { PhiRuntimeModuleRenderClientHost } from "../../../../../components/runtime/runtime-module-render-client-manifest";
-import { PHI_SPACER_WIDGET_DEFINITION, PHI_SPACER_WIDGET_PLUGIN_TYPE } from "./config";
+import { PHI_SPACER_WIDGET_DEFINITION } from "./config";
 export const PHI_SPACER_WIDGET_PLUGIN = {
     ...PHI_SPACER_WIDGET_DEFINITION,
     ...definePhiPassiveWidgetRenderers(({ config }) => (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiCmsWidgetType.Spacer, componentProps: { config } }))),
 };
-export { PHI_SPACER_WIDGET_PLUGIN_TYPE };

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

@@ -35,5 +35,5 @@ export function PhiSwitchWidget({ config, disabled, readOnly, checked: controlle
         onChange?.(nextChecked);
         controlSignals.emitChange(nextChecked);
     }
-    return (_jsx(PhiSwitchControl, { checked: checked, disabled: resolvedDisabled, readOnly: controlSignals.readOnly, size: config?.controlSize, label: config?.label, checkedChildren: config?.checkedChildren, unCheckedChildren: config?.unCheckedChildren, onChange: publish }));
+    return (_jsx(PhiSwitchControl, { checked: checked, disabled: resolvedDisabled, readOnly: controlSignals.readOnly, size: config?.controlSize, label: config?.label, checkedLabel: config?.checkedLabel, uncheckedLabel: config?.uncheckedLabel, onChange: publish }));
 }