@phis/ui 0.3.0 → 0.4.1

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

@@ -1,9 +1,10 @@
 import { resolvePhiCmsWidgetPluginKey } from "../../../../../constants/cms-widget-types";
 import { PHI_MEDIA_LIBRARY_DATA_PROVIDER_KEYS } from "../../../../../constants/media-library-provider-keys";
+import { PHI_MEDIA_ASPECT_RATIOS, PHI_MEDIA_ASPECT_RATIO_OPTIONS, } from "../../../../../components/media/aspect-ratios";
 import { PHI_IMAGE_VARIANT_OPTIONS } from "../../../../../components/widgets/config/image-variant-options";
+import { buildPhiSequenceSettingsFields, PHI_SEQUENCE_SETTINGS_DEFAULTS, readPhiSequenceSettings, } from "../../../../../components/widgets/config/sequence-settings";
+import { PHI_GALLERY_DEFAULT_ASPECT_RATIO } from "./defaults";
 import { readPhiRuntimeDataProviderBinding, } from "../../../../../types/runtime-data-provider";
-import { PHI_MOTION_EASING_FIELD_OPTIONS, PHI_SEQUENCE_TRANSITION_MAX_MS, PHI_SEQUENCE_TRANSITION_MIN_MS, PHI_SEQUENCE_TRANSITION_STEP_MS, clampPhiSequenceTransitionMs, PHI_SEQUENCE_ANCHORS, PHI_SEQUENCE_TRANSITIONS, readPhiMotionEasing, } from "../../../../../helpers/motion";
-import { PHI_CMS_MOUNT_POLICY_FIELD_OPTIONS, readPhiCmsMountPolicy, } from "../../../../../types/cms-mount-policy";
 import { readRenderableBlockConfig, } from "../../../../../components/widgets/config/parser-primitives";
 /*
  * Read strictly, and say so when a document is wrong.
@@ -24,14 +25,6 @@ function readMember(value, members, key) {
     }
     return value;
 }
-function readCount(value, key, min) {
-    if (value === undefined || value === null)
-        return undefined;
-    if (typeof value !== "number" || !Number.isInteger(value) || value < min) {
-        fail(key, value, `a whole number of at least ${min}`);
-    }
-    return value;
-}
 function readFlag(value, key) {
     if (value === undefined || value === null)
         return undefined;
@@ -39,55 +32,38 @@ function readFlag(value, key) {
         fail(key, value, "true or false");
     return value;
 }
-function readText(value, key) {
+/** The Folder the pictures come from; a binding to any other Provider is a mistake in the document. */
+function readFolderSource(value) {
+    const binding = readPhiRuntimeDataProviderBinding(value);
+    if (binding && binding.providerKey !== PHI_MEDIA_LIBRARY_DATA_PROVIDER_KEYS.folderImages) {
+        fail("source", binding.providerKey, PHI_MEDIA_LIBRARY_DATA_PROVIDER_KEYS.folderImages);
+    }
+    return binding;
+}
+function readVariantKey(value) {
     if (value === undefined || value === null)
         return undefined;
-    if (typeof value !== "string" || value.trim() === "")
-        fail(key, value, "a non-empty string");
+    if (!PHI_IMAGE_VARIANT_OPTIONS.some((option) => option.value === value)) {
+        fail("variantKey", value, `one of ${PHI_IMAGE_VARIANT_OPTIONS.map((option) => option.value).join(", ")}`);
+    }
     return value;
 }
 export function parsePhiCmsGalleryWidgetConfig(raw) {
-    const visibleCount = readCount(raw.visibleCount, "visibleCount", 1);
-    const windowAnchor = readMember(raw.windowAnchor, PHI_SEQUENCE_ANCHORS, "windowAnchor");
-    const transition = readMember(raw.transition, PHI_SEQUENCE_TRANSITIONS, "transition");
-    const easing = readPhiMotionEasing(raw.easing, undefined);
-    const gap = readText(raw.gap, "gap");
-    const lookahead = readCount(raw.lookahead, "lookahead", 0);
-    const aspectRatio = readText(raw.aspectRatio, "aspectRatio");
+    const aspectRatio = readMember(raw.aspectRatio, PHI_MEDIA_ASPECT_RATIOS, "aspectRatio");
     const fit = readMember(raw.fit, ["cover", "contain"], "fit");
-    const controls = readMember(raw.controls, ["none", "arrows", "dots", "both"], "controls");
-    const loop = readFlag(raw.loop, "loop");
-    const autoplayMs = readCount(raw.autoplayMs, "autoplayMs", 0);
-    const variantKey = readMember(raw.variantKey, PHI_IMAGE_VARIANT_OPTIONS.map((option) => option.value), "variantKey");
+    const variantKey = readVariantKey(raw.variantKey);
     const preview = readFlag(raw.preview, "preview");
     return {
         ...readRenderableBlockConfig(raw),
-        source: readPhiRuntimeDataProviderBinding(raw.source),
+        ...readPhiSequenceSettings(raw, fail),
+        source: readFolderSource(raw.source),
         ...(variantKey === undefined ? {} : { variantKey }),
         ...(preview === undefined ? {} : { preview }),
-        ...(visibleCount === undefined ? {} : { visibleCount }),
-        ...(windowAnchor === undefined ? {} : { windowAnchor }),
-        ...(transition === undefined ? {} : { transition }),
-        // Absent stays absent: the viewport then moves at the pace the theme sets rather than one this
-        // Widget invented.
-        ...(raw.durationMs === undefined || raw.durationMs === null
-            ? {}
-            : { durationMs: clampPhiSequenceTransitionMs(raw.durationMs) }),
-        ...(easing === undefined ? {} : { easing }),
-        ...(gap === undefined ? {} : { gap }),
-        ...(lookahead === undefined ? {} : { lookahead }),
-        mountPolicy: readPhiCmsMountPolicy(raw.mountPolicy, "lazy-keep"),
         ...(aspectRatio === undefined ? {} : { aspectRatio }),
         ...(fit === undefined ? {} : { fit }),
-        ...(controls === undefined ? {} : { controls }),
-        ...(loop === undefined ? {} : { loop }),
-        // Zero is how "does not move on its own" is written, so it is the one number below the floor
-        // that means something.
-        ...(autoplayMs === undefined || autoplayMs === 0
-            ? {}
-            : { autoplayMs: clampPhiSequenceTransitionMs(autoplayMs) }),
     };
 }
+const PHI_GALLERY_SEQUENCE_FIELDS = buildPhiSequenceSettingsFields({ countLabel: "Visible Pictures" });
 export const PHI_GALLERY_WIDGET_DEFINITION = {
     kind: "widget",
     pluginKey: resolvePhiCmsWidgetPluginKey("gallery"),
@@ -104,63 +80,33 @@ export const PHI_GALLERY_WIDGET_DEFINITION = {
             key: "source",
             type: "data-provider",
             providerKind: "record",
-            label: "Pictures",
-            description: "Where the pictures come from. The folder and its order are set inside the binding.",
+            // Always a Folder: the Inspector asks for the folder and its order, never for a Provider.
+            providerKey: PHI_MEDIA_LIBRARY_DATA_PROVIDER_KEYS.folderImages,
+            label: "Source",
         },
         {
             key: "variantKey",
             type: "choice",
+            valueType: "number",
+            heading: "Picture",
             label: "Variant",
             options: PHI_IMAGE_VARIANT_OPTIONS,
             emptyOption: { value: "__original__", label: "Original" },
             emptyValue: null,
         },
-        { key: "preview", type: "boolean", label: "Lightbox", description: "Open a picture larger over the page when it is clicked." },
-        { key: "visibleCount", type: "number", label: "Visible Pictures", min: 1 },
-        {
-            key: "windowAnchor",
-            type: "choice",
-            label: "Window Anchor",
-            options: [
-                { value: "start", label: "Leading edge" },
-                { value: "center", label: "Centre" },
-            ],
-        },
-        {
-            key: "transition",
-            type: "choice",
-            label: "Transition",
-            options: [
-                { value: "none", label: "None" },
-                { value: "fade", label: "Fade" },
-                { value: "slide", label: "Slide" },
-                { value: "diagonal", label: "Diagonal" },
-            ],
-        },
-        {
-            key: "durationMs",
-            type: "number",
-            label: "Duration",
-            min: PHI_SEQUENCE_TRANSITION_MIN_MS,
-            max: PHI_SEQUENCE_TRANSITION_MAX_MS,
-            step: PHI_SEQUENCE_TRANSITION_STEP_MS,
-            prefix: "ms",
-        },
-        {
-            key: "easing",
-            type: "choice",
-            label: "Easing",
-            options: [...PHI_MOTION_EASING_FIELD_OPTIONS],
-        },
-        { key: "gap", type: "string", label: "Gap" },
-        { key: "lookahead", type: "number", label: "Preload Ahead", min: 0 },
+        /*
+         * Proportion and fit are questions only the original asks. A variant is cut to its own width and
+         * height, so the frame takes that proportion and the picture fills it exactly; a second ratio on
+         * top would crop a crop. Originals come in every shape, and a run of them needs one frame to
+         * stand in, or the Gallery changes height with every step.
+         */
         {
-            key: "mountPolicy",
+            key: "aspectRatio",
             type: "choice",
-            label: "Mounting",
-            options: [...PHI_CMS_MOUNT_POLICY_FIELD_OPTIONS],
+            label: "Aspect Ratio",
+            options: PHI_MEDIA_ASPECT_RATIO_OPTIONS,
+            visibleWhen: { field: "variantKey", equals: null },
         },
-        { key: "aspectRatio", type: "string", label: "Aspect Ratio" },
         {
             key: "fit",
             type: "choice",
@@ -169,31 +115,24 @@ export const PHI_GALLERY_WIDGET_DEFINITION = {
                 { value: "cover", label: "Cover" },
                 { value: "contain", label: "Contain" },
             ],
+            visibleWhen: { field: "variantKey", equals: null },
         },
-        {
-            key: "controls",
-            type: "choice",
-            label: "Controls",
-            options: [
-                { value: "both", label: "Arrows and dots" },
-                { value: "arrows", label: "Arrows" },
-                { value: "dots", label: "Dots" },
-                { value: "none", label: "None" },
-            ],
-        },
-        { key: "loop", type: "boolean", label: "Wrap Around" },
-        {
-            // Zero is the one value below the floor that means something: it does not move on its own.
-            key: "autoplayMs",
-            type: "number",
-            label: "Autoplay",
-            min: 0,
-            max: PHI_SEQUENCE_TRANSITION_MAX_MS,
-            step: PHI_SEQUENCE_TRANSITION_STEP_MS,
-            prefix: "ms",
-        },
+        { key: "preview", type: "boolean", label: "Lightbox", description: "Open a picture larger over the page when it is clicked." },
+        ...PHI_GALLERY_SEQUENCE_FIELDS.window,
+        ...PHI_GALLERY_SEQUENCE_FIELDS.movement,
+        ...PHI_GALLERY_SEQUENCE_FIELDS.controls,
     ],
-    // Bound to the Folder Provider from the start, so the inspector asks for a folder and nothing else.
-    defaultConfig: { source: { providerKey: PHI_MEDIA_LIBRARY_DATA_PROVIDER_KEYS.folderImages, params: {} } },
+    /*
+     * Bound to the Folder Provider from the start, so the inspector asks for a folder and nothing else.
+     * The rest is what the Gallery does when nobody said otherwise, stated here so the Inspector shows
+     * it as the standing answer rather than an empty box over a setting that was never in doubt.
+     */
+    defaultConfig: {
+        source: { providerKey: PHI_MEDIA_LIBRARY_DATA_PROVIDER_KEYS.folderImages, params: {} },
+        preview: false,
+        aspectRatio: PHI_GALLERY_DEFAULT_ASPECT_RATIO,
+        fit: "cover",
+        ...PHI_SEQUENCE_SETTINGS_DEFAULTS,
+    },
     parseConfig: parsePhiCmsGalleryWidgetConfig,
 };

package/plugins/runtime-modules/core/widgets/gallery/defaults.d.ts

@@ -0,0 +1,15 @@
+import { type PhiMediaAspectRatio } from "../../../../../components/media/aspect-ratios";
+import type { PhiCmsGalleryWidgetConfig } from "./config";
+/** What a Gallery is drawn at where nobody said otherwise, on the page and on the canvas alike. */
+export declare const PHI_GALLERY_DEFAULT_ASPECT_RATIO: PhiMediaAspectRatio;
+/**
+ * The frame every picture of the run stands in.
+ *
+ * A variant is cut to a width and a height of its own, so its proportion is the frame's and the
+ * picture fills it exactly -- the author's ratio and fit are not asked for and not read. Only the
+ * original, which comes in every shape, takes them.
+ */
+export declare function resolvePhiGalleryFrame(config: Pick<PhiCmsGalleryWidgetConfig, "variantKey" | "aspectRatio" | "fit"> | undefined): {
+    aspectRatio: string;
+    fit: "cover" | "contain";
+};

package/plugins/runtime-modules/core/widgets/gallery/defaults.js

@@ -0,0 +1,20 @@
+import { resolvePhiImageAssetVariantSpec } from "../../../../../constants/media";
+import { resolvePhiMediaAspectRatioCss } from "../../../../../components/media/aspect-ratios";
+/** What a Gallery is drawn at where nobody said otherwise, on the page and on the canvas alike. */
+export const PHI_GALLERY_DEFAULT_ASPECT_RATIO = "16:9";
+/**
+ * The frame every picture of the run stands in.
+ *
+ * A variant is cut to a width and a height of its own, so its proportion is the frame's and the
+ * picture fills it exactly -- the author's ratio and fit are not asked for and not read. Only the
+ * original, which comes in every shape, takes them.
+ */
+export function resolvePhiGalleryFrame(config) {
+    const spec = config?.variantKey == null ? null : resolvePhiImageAssetVariantSpec(config.variantKey);
+    return spec
+        ? { aspectRatio: `${spec.width} / ${spec.height}`, fit: "cover" }
+        : {
+            aspectRatio: resolvePhiMediaAspectRatioCss(config?.aspectRatio ?? PHI_GALLERY_DEFAULT_ASPECT_RATIO),
+            fit: config?.fit ?? "cover",
+        };
+}

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

@@ -52,7 +52,7 @@ export async function PhiHtmlWidget({ blockId, config, runtime, }) {
     }
     const translatedHtml = (sourceMode !== "url" && config?.resolvedContent != null) || config?.preferSource === true
         ? sourceHtml
-        : await translateSemanticHtml(sourceHtml, sourceMode === "url" ? config?.sourceLocale?.trim() : undefined);
+        : await translateSemanticHtml(sourceHtml, sourceMode === "url" ? config?.sourceLocale?.trim() : undefined, runtime.locale.current);
     if (!translatedHtml) {
         return null;
     }

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

@@ -87,7 +87,7 @@ export function PhiImageWidget({ labels, config, resolvedAsset, focalRect, autho
                 textAlign: "center",
             }, children: [_jsx(PhiEmptyControl, {}), _jsx(PhiTypographyControl, { type: "secondary", strong: false, children: labels.emptyTitle }), _jsx(PhiTypographyControl, { type: "secondary", children: labels.emptyDescription })] }));
     }
-    return (_jsx(PhiImageControl, { presentation: presentation, source: sourceKind === "asset" ? "asset" : config?.trusted === true ? "trusted-url" : "url", alt: alt, title: title || undefined, width: width, height: height, blurDataUrl: resolvedAsset?.blurDataUrl, optimizable: optimizable, sizes: config?.sizes, preload: config?.preload === true && isPublicAsset, preview: (config?.previewMode ?? "none") === "lightbox", style: {
+    return (_jsx(PhiImageControl, { presentation: presentation, source: sourceKind === "asset" ? "asset" : config?.trusted === true ? "trusted-url" : "url", alt: alt, title: title || undefined, width: width, height: height, blurDataUrl: resolvedAsset?.blurDataUrl, optimizable: optimizable, sizes: config?.sizes, preload: config?.preload === true && isPublicAsset, preview: (config?.previewMode ?? "none") === "lightbox", zoom: config?.previewMode === "native", style: {
             ...radiusStyle,
             ...maskStyle,
             overflow: presentation.simulatedCropStyle || Object.values(radiusStyle).some((value) => value != null)

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

@@ -42,6 +42,7 @@ export declare const PHI_IMAGE_WIDGET_DEFINITION: {
             label: string;
         }[];
         visibleWhen?: undefined;
+        valueType?: undefined;
         emptyOption?: undefined;
         emptyValue?: undefined;
         widthPlaceholder?: undefined;
@@ -59,6 +60,7 @@ export declare const PHI_IMAGE_WIDGET_DEFINITION: {
             equals: string;
         };
         options?: undefined;
+        valueType?: undefined;
         emptyOption?: undefined;
         emptyValue?: undefined;
         widthPlaceholder?: undefined;
@@ -70,11 +72,9 @@ export declare const PHI_IMAGE_WIDGET_DEFINITION: {
     } | {
         key: string;
         type: "choice";
+        valueType: "number";
         label: string;
-        options: {
-            value: string;
-            label: string;
-        }[];
+        options: import("@phis/contracts/controls").PhiControlOption<number>[];
         emptyOption: {
             value: string;
             label: string;
@@ -99,6 +99,28 @@ export declare const PHI_IMAGE_WIDGET_DEFINITION: {
             equals: string;
         };
         options?: undefined;
+        valueType?: undefined;
+        emptyOption?: undefined;
+        emptyValue?: undefined;
+        widthPlaceholder?: undefined;
+        heightPlaceholder?: undefined;
+        topLeftKey?: undefined;
+        topRightKey?: undefined;
+        bottomLeftKey?: undefined;
+        bottomRightKey?: undefined;
+    } | {
+        key: string;
+        type: "choice";
+        label: string;
+        visibleWhen: {
+            field: string;
+            equals: null;
+        };
+        options: {
+            value: string;
+            label: string;
+        }[];
+        valueType?: undefined;
         emptyOption?: undefined;
         emptyValue?: undefined;
         widthPlaceholder?: undefined;
@@ -113,6 +135,7 @@ export declare const PHI_IMAGE_WIDGET_DEFINITION: {
         label: string;
         options?: undefined;
         visibleWhen?: undefined;
+        valueType?: undefined;
         emptyOption?: undefined;
         emptyValue?: undefined;
         widthPlaceholder?: undefined;
@@ -129,6 +152,7 @@ export declare const PHI_IMAGE_WIDGET_DEFINITION: {
         heightPlaceholder: string;
         options?: undefined;
         visibleWhen?: undefined;
+        valueType?: undefined;
         emptyOption?: undefined;
         emptyValue?: undefined;
         topLeftKey?: undefined;
@@ -145,6 +169,7 @@ export declare const PHI_IMAGE_WIDGET_DEFINITION: {
         bottomRightKey: string;
         options?: undefined;
         visibleWhen?: undefined;
+        valueType?: undefined;
         emptyOption?: undefined;
         emptyValue?: undefined;
         widthPlaceholder?: undefined;

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

@@ -66,8 +66,12 @@ export function normalizePhiImageWidgetConfig(config) {
         borderBottomRightRadius: readCssSize(raw.borderBottomRightRadius),
         mask: normalizePhiMaskConfig(raw.mask),
     };
+    /*
+     * An Asset without a word about its variant gets the Card variant; `null` is a word -- the Inspector's
+     * Original -- and stays. Read from the raw config, because the source parser answers `null` for both.
+     */
     return source.sourceKind === "asset"
-        ? { ...normalized, ...source, variantKey: source.variantKey ?? PhiImageAssetVariantKey.Card }
+        ? { ...normalized, ...source, variantKey: raw.variantKey === null ? null : source.variantKey ?? PhiImageAssetVariantKey.Card }
         : { ...normalized, ...source };
 }
 function parsePhiCmsImageWidgetConfig(config) {
@@ -108,6 +112,7 @@ export const PHI_IMAGE_WIDGET_DEFINITION = {
         {
             key: "variantKey",
             type: "choice",
+            valueType: "number",
             label: "Variant",
             options: PHI_IMAGE_VARIANT_OPTIONS,
             emptyOption: { value: "__original__", label: "Original" },
@@ -116,17 +121,29 @@ export const PHI_IMAGE_WIDGET_DEFINITION = {
         },
         { key: "alt", type: "string", label: "Alt Text", visibleWhen: { field: "sourceKind", equals: "url" } },
         { key: "title", type: "string", label: "Title", visibleWhen: { field: "sourceKind", equals: "url" } },
+        /*
+         * Fit and position steer only the original picture, an Asset's or a URL's. A variant is cut to its
+         * own fit, and its position comes from the Asset's focal rectangle, so with a variant chosen both
+         * would be settings that change nothing. A URL clears the variant, so one rule covers both cases.
+         */
         {
             key: "fit",
             type: "choice",
             label: "Fit",
+            visibleWhen: { field: "variantKey", equals: null },
             options: [
                 { value: "cover", label: "Cover" },
                 { value: "contain", label: "Contain" },
                 { value: "fill", label: "Fill" },
             ],
         },
-        { key: "objectPosition", type: "choice", label: "Object Position", options: IMAGE_OBJECT_POSITION_OPTIONS },
+        {
+            key: "objectPosition",
+            type: "choice",
+            label: "Object Position",
+            options: IMAGE_OBJECT_POSITION_OPTIONS,
+            visibleWhen: { field: "variantKey", equals: null },
+        },
         {
             key: "previewMode",
             type: "choice",

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

@@ -76,7 +76,7 @@ export function PhiImageWidgetEditor({ config, onChange }) {
                 }, children: overlaySize })) : null] }));
 }
 export function PhiImageWidgetEditorTools({ blockId, config, onChange, }) {
-    return (_jsxs("span", { style: { display: "inline-flex" }, children: [_jsx(PhiWidgetImageToolButton, { blockId: blockId, onChange: (patch) => onChange?.(patch) }), _jsx(PhiMaskPickerButton, { value: config?.mask, onChange: (mask) => {
+    return (_jsxs("span", { style: { display: "inline-flex" }, children: [_jsx(PhiWidgetImageToolButton, { blockId: blockId, onChange: (patch) => onChange?.(patch) }), _jsx(PhiMaskPickerButton, { placement: "topRight", value: config?.mask, onChange: (mask) => {
                     onChange?.({ mask });
                 } })] }));
 }

package/plugins/runtime-modules/core/widgets/markdown-toc/server.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PhiCmsFlags } from "../../../../../constants/phi-cms";
 import { hasPhiFlag } from "../../../../../helpers/flags";
-import { tr } from "../../../../../server-helpers/translate";
+import { trForLocale } from "../../../../../server-helpers/translate";
 import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
 import { parsePhiCmsMarkdownWidgetConfig } from "../markdown/config";
 import { PhiRuntimeModuleRenderClientHost } from "../../../../../components/runtime/runtime-module-render-client-manifest";
@@ -25,7 +25,12 @@ function filterHeadings(headings, config) {
     return headings.filter((heading) => heading.level >= minLevel && heading.level <= maxLevel);
 }
 export async function PhiMarkdownTocWidget({ config, defaultLabels, tree, runtime, }) {
-    const title = await tr(config?.title?.trim() || defaultLabels.title);
+    /*
+     * The author's title in the render's locale; the default is a label set's and arrives translated, so
+     * asking for it again would hand a translator text that is no longer in the source language.
+     */
+    const ownTitle = config?.title?.trim();
+    const title = ownTitle ? await trForLocale(runtime.locale.current, ownTitle) : defaultLabels.title;
     const targetWidget = resolveTargetMarkdownWidget(tree, config);
     if (!targetWidget) {
         return (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiCmsWidgetType.MarkdownToc, componentProps: { config: { ...config, title, headings: [] } } }));

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

@@ -1,9 +1,12 @@
+import { type PhiTextSource } from "../../../../../helpers/text-source";
 import { type PhiCmsWidgetConfigBase } from "../../../../../components/widgets/config/parser-primitives";
 export type PhiCmsQuickLinksWidgetConfig = PhiCmsWidgetConfigBase & {
     navKey?: string;
     title?: string;
     columns?: 1 | 2 | 3;
     separator?: boolean;
+    /** `"preset"` while the words are a Preset's and translated globally (`helpers/text-source.ts`). */
+    textSource?: PhiTextSource;
 };
 declare function parsePhiCmsQuickLinksWidgetConfig(config: Record<string, unknown>): PhiCmsQuickLinksWidgetConfig;
 export declare const PHI_QUICK_LINKS_WIDGET_DEFINITION: {

package/plugins/runtime-modules/core/widgets/quick-links/config.js

@@ -1,4 +1,5 @@
 import { resolvePhiCmsWidgetPluginKey } from "../../../../../constants/cms-widget-types";
+import { readPhiTextSource } from "../../../../../helpers/text-source";
 import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
 import { PHI_AUTHORING_OPTION_PROVIDER_KEYS } from "../../../../../constants/authoring-option-provider-keys";
 import { readBoolean, readNumber, readRenderableBlockConfig, readString, } from "../../../../../components/widgets/config/parser-primitives";
@@ -11,6 +12,7 @@ function parsePhiCmsQuickLinksWidgetConfig(config) {
         title: readString(config.title),
         columns: columns === 1 || columns === 3 ? columns : 2,
         separator: readBoolean(config.separator) ?? true,
+        textSource: readPhiTextSource(config.textSource),
     };
 }
 export const PHI_QUICK_LINKS_WIDGET_DEFINITION = {

package/plugins/runtime-modules/core/widgets/quick-links/plugin.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { PhiCmsFlags } from "../../../../../constants/phi-cms";
+import { hasPhiFlag } from "../../../../../helpers/flags";
 import { PhiQuickLinksWidget } from "./server";
 import { PHI_QUICK_LINKS_WIDGET_DEFINITION, PHI_QUICK_LINKS_WIDGET_PLUGIN_TYPE, } from "./config";
 export const PHI_QUICK_LINKS_WIDGET_PLUGIN = {
     ...PHI_QUICK_LINKS_WIDGET_DEFINITION,
-    render: ({ widget, runtime, config }) => (_jsx(PhiQuickLinksWidget, { runtime: runtime, navKey: config.navKey, title: config.title, columns: config.columns, separator: config.separator }, `widget-${widget.id}`)),
-    renderPreview: ({ widget, runtime, config }) => (_jsx(PhiQuickLinksWidget, { runtime: runtime, navKey: config.navKey, title: config.title, columns: config.columns, separator: config.separator, interactive: false }, `widget-${widget.id}`)),
+    render: ({ widget, runtime, config }) => (_jsx(PhiQuickLinksWidget, { runtime: runtime, navKey: config.navKey, title: config.title, textSource: config.textSource, translate: !hasPhiFlag(widget.flags, PhiCmsFlags.NoTranslate), columns: config.columns, separator: config.separator }, `widget-${widget.id}`)),
+    renderPreview: ({ widget, runtime, config }) => (_jsx(PhiQuickLinksWidget, { runtime: runtime, navKey: config.navKey, title: config.title, textSource: config.textSource, translate: !hasPhiFlag(widget.flags, PhiCmsFlags.NoTranslate), columns: config.columns, separator: config.separator, interactive: false }, `widget-${widget.id}`)),
 };
 export { PHI_QUICK_LINKS_WIDGET_PLUGIN_TYPE };

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

@@ -1,10 +1,14 @@
 import type { PhiBlockRuntime } from "../../../../../types";
+import type { PhiTextSource } from "../../../../../helpers/text-source";
 export type PhiQuickLinksWidgetProps = {
     runtime: Pick<PhiBlockRuntime, "site" | "locale" | "area" | "viewer" | "request">;
     navKey?: string;
     title?: string;
+    /** Whose words the title is, which decides the store that translates it. */
+    textSource?: PhiTextSource;
+    translate?: boolean;
     columns?: 1 | 2 | 3;
     separator?: boolean;
     interactive?: boolean;
 };
-export declare function PhiQuickLinksWidget({ runtime, navKey, title, columns, separator, interactive, }: PhiQuickLinksWidgetProps): Promise<import("react").JSX.Element | null>;
+export declare function PhiQuickLinksWidget({ runtime, navKey, title, textSource, translate, columns, separator, interactive, }: PhiQuickLinksWidgetProps): Promise<import("react").JSX.Element | null>;

package/plugins/runtime-modules/core/widgets/quick-links/server.js

@@ -3,15 +3,17 @@ import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
 import { PhiRuntimeModuleRenderClientHost } from "../../../../../components/runtime/runtime-module-render-client-manifest";
 import { resolvePhiNavigationItems } from "../../../../../components/widgets/server/navigation-request";
 import { mapPhiNavItemsToQuickLinksItems } from "./items";
-export async function PhiQuickLinksWidget({ runtime, navKey, title, columns = 2, separator = true, interactive = true, }) {
+import { trWidgetText } from "../../../../../server-helpers/translate";
+export async function PhiQuickLinksWidget({ runtime, navKey, title, textSource, translate = true, columns = 2, separator = true, interactive = true, }) {
     const resolvedNavKey = navKey?.trim() ||
         `${runtime.area}:footer`;
     const resolvedNavigationItems = (await resolvePhiNavigationItems(runtime, resolvedNavKey)) ?? [];
     if (resolvedNavigationItems.length === 0) {
         return null;
     }
+    const ownTitle = title?.trim();
     const labels = {
-        title,
+        title: ownTitle && translate ? await trWidgetText(runtime.locale.current, ownTitle, textSource) : title,
     };
     const config = {
         columns,

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

@@ -74,6 +74,7 @@ export declare const PHI_RESULT_WIDGET_DEFINITION: {
     } & {
         type: "data-provider";
         providerKind?: import("../../../../../types").PhiRuntimeDataProviderKind;
+        providerKey?: import("@phis/contracts/controls").PhiRuntimeDataProviderKey;
     }) | ({
         key: string;
         label: string;
@@ -247,10 +248,33 @@ export declare const PHI_RESULT_WIDGET_DEFINITION: {
         editorPlacement?: "inspector" | "geometry" | "toolbar";
         visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
         heading?: string;
+    } & {
+        type: "choice";
+        valueType: "number";
+        options: import("@phis/contracts/controls").PhiControlOption<number>[];
+        emptyOption?: import("@phis/contracts/controls").PhiControlOption;
+        emptyValue?: null | undefined;
+        placeholder?: string;
+        mode?: never;
+        presentation?: never;
+        optionsProvider?: never;
+        allowCustom?: never;
+        createBehavior?: never;
+        filter?: never;
+        patchOnChange?: never;
+        optionPresets?: never;
+    }) | ({
+        key: string;
+        label: string;
+        description?: string;
+        required?: boolean;
+        editorPlacement?: "inspector" | "geometry" | "toolbar";
+        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
+        heading?: string;
     } & {
         type: "choice";
         mode?: import("../../../../../types").PhiCmsConfigFieldChoiceMode;
-        valueType?: import("../../../../../types").PhiCmsConfigFieldChoiceValueType;
+        valueType?: Exclude<import("../../../../../types").PhiCmsConfigFieldChoiceValueType, "number">;
         presentation?: import("../../../../../types").PhiCmsConfigFieldChoicePresentation;
         options?: import("@phis/contracts/controls").PhiControlOption[];
         optionsProvider?: import("@phis/contracts/controls").PhiControlOptionsProviderConfig;

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

@@ -1,3 +1,4 @@
+import { type PhiTextSource } from "../../../../../helpers/text-source";
 import { type PhiSimpleTextMark } from "../../../../../types/core-widget-placements";
 import type { PhiCmsResolvedContent } from "../../../../../types";
 import type { PhiWidgetFontFamilyKey, PhiWidgetFontSizeKey } from "../../../../../types/site-theme";
@@ -15,6 +16,8 @@ export type PhiCmsSimpleTextWidgetConfig = PhiCmsWidgetConfigBase & {
     tone?: PhiTextTone;
     marks?: PhiSimpleTextMark[];
     disabled?: boolean;
+    /** `"preset"` while the words are a Preset's and translated globally (`helpers/text-source.ts`). */
+    textSource?: PhiTextSource;
 };
 declare function parsePhiCmsSimpleTextWidgetConfig(config: Record<string, unknown>): PhiCmsSimpleTextWidgetConfig;
 export type PhiSimpleTextWidgetRenderableConfig = PhiCmsSimpleTextWidgetConfig & {
@@ -79,6 +82,7 @@ export declare const PHI_SIMPLE_TEXT_WIDGET_DEFINITION: {
     } & {
         type: "data-provider";
         providerKind?: import("../../../../../types").PhiRuntimeDataProviderKind;
+        providerKey?: import("@phis/contracts/controls").PhiRuntimeDataProviderKey;
     }) | ({
         key: string;
         label: string;
@@ -252,10 +256,33 @@ export declare const PHI_SIMPLE_TEXT_WIDGET_DEFINITION: {
         editorPlacement?: "inspector" | "geometry" | "toolbar";
         visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
         heading?: string;
+    } & {
+        type: "choice";
+        valueType: "number";
+        options: import("@phis/contracts/controls").PhiControlOption<number>[];
+        emptyOption?: import("@phis/contracts/controls").PhiControlOption;
+        emptyValue?: null | undefined;
+        placeholder?: string;
+        mode?: never;
+        presentation?: never;
+        optionsProvider?: never;
+        allowCustom?: never;
+        createBehavior?: never;
+        filter?: never;
+        patchOnChange?: never;
+        optionPresets?: never;
+    }) | ({
+        key: string;
+        label: string;
+        description?: string;
+        required?: boolean;
+        editorPlacement?: "inspector" | "geometry" | "toolbar";
+        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
+        heading?: string;
     } & {
         type: "choice";
         mode?: import("../../../../../types").PhiCmsConfigFieldChoiceMode;
-        valueType?: import("../../../../../types").PhiCmsConfigFieldChoiceValueType;
+        valueType?: Exclude<import("../../../../../types").PhiCmsConfigFieldChoiceValueType, "number">;
         presentation?: import("../../../../../types").PhiCmsConfigFieldChoicePresentation;
         options?: import("@phis/contracts/controls").PhiControlOption[];
         optionsProvider?: import("@phis/contracts/controls").PhiControlOptionsProviderConfig;