@phis/ui 0.2.0 → 0.3.0

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

@@ -1,3 +1,4 @@
+import { type PhiRuntimeDataProviderBinding } from "../../../../../types/runtime-data-provider";
 import { type PhiMotionEasing, type PhiSequenceAnchor, type PhiSequenceTransition } from "../../../../../helpers/motion";
 import { type PhiCmsMountPolicy } from "../../../../../types/cms-mount-policy";
 import { type PhiCmsWidgetConfigBase } from "../../../../../components/widgets/config/parser-primitives";
@@ -5,17 +6,18 @@ import { type PhiCmsWidgetConfigBase } from "../../../../../components/widgets/c
  * A run of pictures, shown a few at a time.
  *
  * Not a layout. A layout's slots are authored -- twelve of them, and somebody drops a Widget into
- * each -- while the pictures here are data: an unknown number per row, out of an assets slot whose
- * cardinality is `many`. A Carousel over authored slots could never show them, which is why the two
- * are separate things that share a viewport rather than one thing with a switch.
+ * each -- while the pictures here are data: however many a Media Folder holds, read on the server
+ * while the page is drawn through the record Provider the binding names. A Carousel over authored
+ * slots could never show them, which is why the two are separate things that share a viewport rather
+ * than one thing with a switch.
  */
-export type PhiGalleryImage = {
-    url: string;
-    alt?: string;
-    href?: string;
-};
 export type PhiCmsGalleryWidgetConfig = PhiCmsWidgetConfigBase & {
-    images: PhiGalleryImage[];
+    /** The record Provider the pictures come from; starts on the Media Folder Provider. */
+    source: PhiRuntimeDataProviderBinding | null;
+    /** The rendition each picture is drawn in; absent is the original. */
+    variantKey?: string;
+    /** Opens a picture larger over the page when clicked. */
+    preview?: boolean;
     visibleCount?: number;
     windowAnchor?: PhiSequenceAnchor;
     transition?: PhiSequenceTransition;
@@ -45,18 +47,67 @@ export declare const PHI_GALLERY_WIDGET_DEFINITION: {
     kind: "widget";
     pluginKey: string;
     typeKey: string;
-    slotSizePolicy: "intrinsic";
+    slotSizePolicy: "fill-inline";
     title: string;
     description: string;
     category: "media";
     icon: string;
     iconFamily: string;
     fields: ({
+        key: string;
+        type: "data-provider";
+        providerKind: "record";
+        label: string;
+        description: string;
+        options?: undefined;
+        emptyOption?: undefined;
+        emptyValue?: undefined;
+        min?: undefined;
+        max?: undefined;
+        step?: undefined;
+        prefix?: undefined;
+    } | {
+        key: string;
+        type: "choice";
+        label: string;
+        options: {
+            value: string;
+            label: string;
+        }[];
+        emptyOption: {
+            value: string;
+            label: string;
+        };
+        emptyValue: null;
+        providerKind?: undefined;
+        description?: undefined;
+        min?: undefined;
+        max?: undefined;
+        step?: undefined;
+        prefix?: undefined;
+    } | {
+        key: string;
+        type: "boolean";
+        label: string;
+        description: string;
+        providerKind?: undefined;
+        options?: undefined;
+        emptyOption?: undefined;
+        emptyValue?: undefined;
+        min?: undefined;
+        max?: undefined;
+        step?: undefined;
+        prefix?: undefined;
+    } | {
         key: string;
         type: "number";
         label: string;
         min: number;
+        providerKind?: undefined;
+        description?: undefined;
         options?: undefined;
+        emptyOption?: undefined;
+        emptyValue?: undefined;
         max?: undefined;
         step?: undefined;
         prefix?: undefined;
@@ -68,6 +119,10 @@ export declare const PHI_GALLERY_WIDGET_DEFINITION: {
             value: string;
             label: string;
         }[];
+        providerKind?: undefined;
+        description?: undefined;
+        emptyOption?: undefined;
+        emptyValue?: undefined;
         min?: undefined;
         max?: undefined;
         step?: undefined;
@@ -80,13 +135,21 @@ export declare const PHI_GALLERY_WIDGET_DEFINITION: {
         max: number;
         step: number;
         prefix: string;
+        providerKind?: undefined;
+        description?: undefined;
         options?: undefined;
+        emptyOption?: undefined;
+        emptyValue?: undefined;
     } | {
         key: string;
         type: "string";
         label: string;
-        min?: undefined;
+        providerKind?: undefined;
+        description?: undefined;
         options?: undefined;
+        emptyOption?: undefined;
+        emptyValue?: undefined;
+        min?: undefined;
         max?: undefined;
         step?: undefined;
         prefix?: undefined;
@@ -104,6 +167,10 @@ export declare const PHI_GALLERY_WIDGET_DEFINITION: {
             readonly value: "eager";
             readonly label: "Mount everything";
         })[];
+        providerKind?: undefined;
+        description?: undefined;
+        emptyOption?: undefined;
+        emptyValue?: undefined;
         min?: undefined;
         max?: undefined;
         step?: undefined;
@@ -112,11 +179,21 @@ export declare const PHI_GALLERY_WIDGET_DEFINITION: {
         key: string;
         type: "boolean";
         label: string;
-        min?: undefined;
+        providerKind?: undefined;
+        description?: undefined;
         options?: undefined;
+        emptyOption?: undefined;
+        emptyValue?: undefined;
+        min?: undefined;
         max?: undefined;
         step?: undefined;
         prefix?: undefined;
     })[];
+    defaultConfig: {
+        source: {
+            providerKey: `${string}/${string}`;
+            params: {};
+        };
+    };
     parseConfig: typeof parsePhiCmsGalleryWidgetConfig;
 };

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

@@ -1,4 +1,7 @@
 import { resolvePhiCmsWidgetPluginKey } from "../../../../../constants/cms-widget-types";
+import { PHI_MEDIA_LIBRARY_DATA_PROVIDER_KEYS } from "../../../../../constants/media-library-provider-keys";
+import { PHI_IMAGE_VARIANT_OPTIONS } from "../../../../../components/widgets/config/image-variant-options";
+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";
@@ -43,24 +46,6 @@ function readText(value, key) {
         fail(key, value, "a non-empty string");
     return value;
 }
-function readGalleryImages(value) {
-    if (value === undefined || value === null)
-        return [];
-    if (!Array.isArray(value))
-        fail("images", value, "an array of pictures");
-    return value.map((entry, index) => {
-        if (!entry || typeof entry !== "object" || Array.isArray(entry)) {
-            fail(`images[${index}]`, entry, "an object with a url");
-        }
-        const record = entry;
-        const url = readText(record.url, `images[${index}].url`);
-        if (!url)
-            fail(`images[${index}].url`, record.url, "a non-empty string");
-        const alt = readText(record.alt, `images[${index}].alt`);
-        const href = readText(record.href, `images[${index}].href`);
-        return { url, ...(alt ? { alt } : {}), ...(href ? { href } : {}) };
-    });
-}
 export function parsePhiCmsGalleryWidgetConfig(raw) {
     const visibleCount = readCount(raw.visibleCount, "visibleCount", 1);
     const windowAnchor = readMember(raw.windowAnchor, PHI_SEQUENCE_ANCHORS, "windowAnchor");
@@ -73,9 +58,13 @@ export function parsePhiCmsGalleryWidgetConfig(raw) {
     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 preview = readFlag(raw.preview, "preview");
     return {
         ...readRenderableBlockConfig(raw),
-        images: readGalleryImages(raw.images),
+        source: readPhiRuntimeDataProviderBinding(raw.source),
+        ...(variantKey === undefined ? {} : { variantKey }),
+        ...(preview === undefined ? {} : { preview }),
         ...(visibleCount === undefined ? {} : { visibleCount }),
         ...(windowAnchor === undefined ? {} : { windowAnchor }),
         ...(transition === undefined ? {} : { transition }),
@@ -103,13 +92,30 @@ export const PHI_GALLERY_WIDGET_DEFINITION = {
     kind: "widget",
     pluginKey: resolvePhiCmsWidgetPluginKey("gallery"),
     typeKey: "gallery",
-    slotSizePolicy: "intrinsic",
+    // A slideshow is as wide as the place it is put; its height follows from the aspect ratio.
+    slotSizePolicy: "fill-inline",
     title: "Gallery",
     description: "A run of pictures shown a few at a time, with arrows, dots and optional autoplay.",
     category: "media",
     icon: "antd:picture-outlined",
     iconFamily: "media",
     fields: [
+        {
+            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.",
+        },
+        {
+            key: "variantKey",
+            type: "choice",
+            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",
@@ -187,5 +193,7 @@ export const PHI_GALLERY_WIDGET_DEFINITION = {
             prefix: "ms",
         },
     ],
+    // 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: {} } },
     parseConfig: parsePhiCmsGalleryWidgetConfig,
 };

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

@@ -1,9 +1,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_GALLERY_WIDGET_DEFINITION, } from "./config";
+import { PhiGalleryWidgetServer } from "./server";
 export const PHI_GALLERY_WIDGET_PLUGIN = {
     ...PHI_GALLERY_WIDGET_DEFINITION,
-    ...definePhiPassiveWidgetRenderers(({ config }) => (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiCmsWidgetType.Gallery, componentProps: { config } }))),
+    ...definePhiPassiveWidgetRenderers(({ widget, runtime, registry, config }) => (_jsx(PhiGalleryWidgetServer, { runtime: runtime, registry: registry, config: config }, `widget-${widget.id}`))),
 };

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

@@ -0,0 +1,17 @@
+import "server-only";
+import type { PhiBlockRuntime } from "../../../../../types";
+import type { PhiCmsRuntimeRenderRegistry } from "../../../../../types/cms-plugins";
+import type { PhiCmsGalleryWidgetConfig } from "./config";
+export type PhiGalleryWidgetServerProps = {
+    runtime: PhiBlockRuntime;
+    /** Where the record binding is answered; absent outside a page render, where nothing is bound. */
+    registry?: Pick<PhiCmsRuntimeRenderRegistry, "recordProviderLoadersByKey">;
+    config: PhiCmsGalleryWidgetConfig;
+};
+/**
+ * The pictures come from the record the binding names -- a Folder, read while the page is drawn -- so
+ * they are in the HTML and the window knows what to load before anything is on screen. A record of
+ * another shape is somebody else's Provider bound here by mistake, and is said as unavailable rather
+ * than drawn as an empty gallery.
+ */
+export declare function PhiGalleryWidgetServer({ runtime, registry, config }: PhiGalleryWidgetServerProps): Promise<import("react").JSX.Element | null>;

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "server-only";
+import { PhiAlertControl } from "../../../../../components/controls/phi-alert-control";
+import { PhiRuntimeModuleRenderClientHost } from "../../../../../components/runtime/runtime-module-render-client-manifest";
+import { getPhiGalleryWidgetLabels } from "../../../../../components/widgets/label-sets/gallery";
+import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
+import { readPhiServerApiCredentials } from "../../../../../helpers/phis-server-credentials";
+import { resolvePhiRecordSource } from "../../../../../server-helpers/record-source";
+function isPublicAssetReference(value) {
+    return typeof value === "object" && value !== null &&
+        typeof value.id === "number" &&
+        typeof value.deliveryUrl === "string";
+}
+/**
+ * The pictures come from the record the binding names -- a Folder, read while the page is drawn -- so
+ * they are in the HTML and the window knows what to load before anything is on screen. A record of
+ * another shape is somebody else's Provider bound here by mistake, and is said as unavailable rather
+ * than drawn as an empty gallery.
+ */
+export async function PhiGalleryWidgetServer({ runtime, registry, config }) {
+    const labels = await getPhiGalleryWidgetLabels({
+        apiBaseUrl: readPhiServerApiCredentials().apiBaseUrl,
+        internalToken: readPhiServerApiCredentials().internalToken,
+        locale: runtime.locale.current,
+    });
+    const result = registry && config.source
+        ? await resolvePhiRecordSource({ registry, runtime, binding: config.source })
+        : { status: "missing" };
+    if (result.status === "unavailable") {
+        return _jsx(PhiAlertControl, { level: "error", showIcon: true, title: labels.unavailable, description: result.reason });
+    }
+    const images = result.status === "ok" && Array.isArray(result.record)
+        ? result.record.filter(isPublicAssetReference)
+        : null;
+    if (result.status === "ok" && images == null) {
+        return _jsx(PhiAlertControl, { level: "error", showIcon: true, title: labels.unavailable });
+    }
+    if (!images || images.length === 0) {
+        return null;
+    }
+    return (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiCmsWidgetType.Gallery, componentProps: { config, images, labels } }));
+}

package/plugins/runtime-modules/core/widgets/header-navigation/client.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { usePathname } from "next/navigation";
 import { collectPhiSelectedNavKeys } from "../../../../../helpers/nav-selection";
 import { PhiMenuControl } from "../../../../../components/controls/phi-menu-control";
 import { usePhiConfig } from "../../../../../components/root/phi-config-provider";
 import { mapPhiNavItems } from "../../../../../components/shell/menu-items";
 import {} from "../../../../../components/shell/shell-types";
+import { usePhiPathname } from "../../../../../components/runtime/use-phi-pathname";
 export function PhiHeaderNavigationWidgetClient({ runtime, items, menuTheme, height, align = "left", interactive = true, }) {
     const { token } = usePhiConfig();
-    const pathname = usePathname() ?? "/";
+    const pathname = usePhiPathname();
     const availableLocales = runtime.site.availableLocales.map((option) => option.code);
     const selectedKeys = collectPhiSelectedNavKeys(pathname, items, availableLocales);
     const menuItems = mapPhiNavItems(runtime.locale.current, runtime.area, pathname, items, availableLocales, { interactive });
@@ -46,7 +46,7 @@ export function PhiHeaderNavigationWidgetClient({ runtime, items, menuTheme, hei
             minHeight: 0,
             flex: 1,
             justifyContent: align === "center" ? "center" : "flex-start",
-        }, children: _jsx(PhiMenuControl, { scope: "header-navigation", mode: "horizontal", menuTheme: menuTheme, selectedKeys: selectedKeys, items: menuItems, fontSize: token.fontSizeLG, style: {
+        }, children: _jsx(PhiMenuControl, { mode: "horizontal", menuTheme: menuTheme, selectedKeys: selectedKeys, items: menuItems, fontSize: token.fontSizeLG, style: {
                 display: "flex",
                 alignItems: "center",
                 justifyContent: align === "center" ? "center" : "flex-start",

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

@@ -4,7 +4,7 @@ export type PhiCmsHeaderNavigationWidgetConfig = PhiCmsWidgetConfigBase & {
     navKey?: string;
     align?: "left" | "center";
 };
-export declare function parsePhiCmsHeaderNavigationWidgetConfig(config: Record<string, unknown>): PhiCmsHeaderNavigationWidgetConfig;
+declare function parsePhiCmsHeaderNavigationWidgetConfig(config: Record<string, unknown>): PhiCmsHeaderNavigationWidgetConfig;
 export type PhiHeaderNavigationWidgetRenderableConfig = Pick<PhiCmsHeaderNavigationWidgetConfig, "align"> & {
     height?: CSSProperties["height"];
 };
@@ -50,3 +50,4 @@ export declare const PHI_HEADER_NAVIGATION_WIDGET_DEFINITION: {
     parseConfig: typeof parsePhiCmsHeaderNavigationWidgetConfig;
 };
 export declare const PHI_HEADER_NAVIGATION_WIDGET_PLUGIN_TYPE: string;
+export {};

package/plugins/runtime-modules/core/widgets/header-navigation/config.js

@@ -2,7 +2,7 @@ import { resolvePhiCmsWidgetPluginKey } from "../../../../../constants/cms-widge
 import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
 import { PHI_AUTHORING_OPTION_PROVIDER_KEYS } from "../../../../../constants/authoring-option-provider-keys";
 import { readRenderableBlockConfig, readString, } from "../../../../../components/widgets/config/parser-primitives";
-export function parsePhiCmsHeaderNavigationWidgetConfig(config) {
+function parsePhiCmsHeaderNavigationWidgetConfig(config) {
     return {
         ...readRenderableBlockConfig(config),
         navKey: readString(config.navKey),

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

@@ -14,7 +14,7 @@ export type PhiCmsHtmlWidgetConfig = PhiCmsWidgetConfigBase & {
 export type PhiHtmlWidgetContentConfig = PhiHtmlWidgetClientConfig & {
     resolvedContent?: PhiCmsResolvedContent | null;
 };
-export declare function parsePhiCmsHtmlWidgetConfig(config: Record<string, unknown>): PhiCmsHtmlWidgetConfig;
+declare function parsePhiCmsHtmlWidgetConfig(config: Record<string, unknown>): PhiCmsHtmlWidgetConfig;
 export type PhiHtmlWidgetRenderableConfig = PhiHtmlWidgetContentConfig & {
     sourceMode?: "inline" | "url";
     sourceUrl?: string;
@@ -28,6 +28,7 @@ export declare const PHI_HTML_WIDGET_DEFINITION: {
     title: string;
     category: "content";
     description: string;
+    icon: string;
     iconFamily: string;
     translatesOwnText: true;
     slotSizePolicy: "fill-inline";
@@ -60,3 +61,4 @@ export declare function resolvePhiHtmlWidgetMarkup(config: PhiHtmlWidgetRenderab
     allowInternalReferences?: boolean;
 }): string;
 export declare const PHI_HTML_WIDGET_PLUGIN_TYPE: string;
+export {};

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

@@ -5,7 +5,7 @@ import { sanitizePhiHtmlWidgetMarkup } from "../../../../../components/widgets/h
 import { readNumber, readRenderableBlockConfig, readString, } from "../../../../../components/widgets/config/parser-primitives";
 import { readPhiWidgetFontFamily } from "../../../../../components/widgets/helpers/font-family";
 import { readPhiWidgetFontSize } from "../../../../../components/widgets/helpers/font-size";
-export function parsePhiCmsHtmlWidgetConfig(config) {
+function parsePhiCmsHtmlWidgetConfig(config) {
     const renderableBlockConfig = readRenderableBlockConfig(config);
     return {
         ...renderableBlockConfig,
@@ -25,6 +25,7 @@ export const PHI_HTML_WIDGET_DEFINITION = {
     title: "Rich Text",
     category: "content",
     description: "HTML-backed editorial text block with a Lexical authoring scaffold in edit mode.",
+    icon: "antd:font-colors-outlined",
     iconFamily: "content",
     translatesOwnText: true,
     slotSizePolicy: "fill-inline",

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

@@ -3,7 +3,7 @@ export type PhiCmsIconWidgetConfig = PhiCmsWidgetConfigBase & {
     icon?: string;
     color?: string;
 };
-export declare function parsePhiCmsIconWidgetConfig(config: Record<string, unknown>): PhiCmsIconWidgetConfig;
+declare function parsePhiCmsIconWidgetConfig(config: Record<string, unknown>): PhiCmsIconWidgetConfig;
 export declare const PHI_ICON_WIDGET_DEFINITION: {
     kind: "widget";
     pluginKey: string;
@@ -20,3 +20,4 @@ export declare const PHI_ICON_WIDGET_DEFINITION: {
     parseConfig: typeof parsePhiCmsIconWidgetConfig;
 };
 export declare const PHI_ICON_WIDGET_PLUGIN_TYPE: string;
+export {};

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

@@ -1,7 +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";
-export function parsePhiCmsIconWidgetConfig(config) {
+function parsePhiCmsIconWidgetConfig(config) {
     return {
         ...readRenderableBlockConfig(config),
         icon: readString(config.icon),

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

@@ -1,12 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Image as AntImage } from "antd";
-import NextImage from "next/image";
 import { isPhiMediaAssetOriginalOptimizable, isPhiMediaAssetPublic } from "../../../../../constants/media";
 import { resolvePhiImagePresentation } from "../../../../../components/media/image-presentation";
 import { usePhiConfig } from "../../../../../components/root/phi-config-provider";
 import { resolvePhiMaskStyle } from "../../../../../components/widgets/config/mask";
 import { PhiEmptyControl } from "../../../../../components/controls/phi-empty-control";
+import { PhiImageControl } from "../../../../../components/controls/phi-image-control";
 import { PhiFlexControl } from "../../../../../components/controls/phi-flex-control";
 import { PhiTypographyControl } from "../../../../../components/controls/phi-typography-control";
 function formatImageSize(value) {
@@ -18,9 +17,6 @@ function formatImageSize(value) {
     }
     return undefined;
 }
-function isTrustedSource(sourceKind, trusted) {
-    return sourceKind === "asset" || trusted === true;
-}
 function resolveImageDimension(overrideSize, overrideValue, presentedValue) {
     if (overrideSize) {
         return overrideValue ?? presentedValue ?? null;
@@ -55,16 +51,12 @@ export function PhiImageWidget({ labels, config, resolvedAsset, focalRect, autho
     const overrideSize = config?.imageSize != null;
     const width = resolveImageDimension(overrideSize, config?.imageSize?.width, presentation.width);
     const height = resolveImageDimension(overrideSize, config?.imageSize?.height, presentation.height);
-    const blurDataUrl = config?.blurDataUrl ?? resolvedAsset?.blurDataUrl ?? null;
     const alt = (sourceKind === "asset"
         ? (resolvedAsset?.altText ?? "")
         : (config?.alt ?? resolvedAsset?.altText ?? "")).trim();
     const title = (sourceKind === "asset"
         ? (resolvedAsset?.title ?? "")
         : (config?.title ?? resolvedAsset?.title ?? "")).trim();
-    const fit = presentation.fit;
-    const objectPosition = presentation.objectPosition;
-    const authoringVariantCropStyle = presentation.simulatedCropStyle;
     const isPublicAsset = isPhiMediaAssetPublic(resolvedAsset?.deliveryPolicy, resolvedAsset?.lifecycleStatus);
     /*
      * A generated variant is raster and optimisable whenever the Asset is public; the original is the
@@ -73,9 +65,6 @@ export function PhiImageWidget({ labels, config, resolvedAsset, focalRect, autho
     const optimizable = presentation.kind === "generated-variant"
         ? isPublicAsset
         : resolvedAsset != null && isPhiMediaAssetOriginalOptimizable(resolvedAsset);
-    const previewMode = config?.previewMode ?? "none";
-    const preload = config?.preload === true && isPublicAsset;
-    const trusted = isTrustedSource(sourceKind, config?.trusted);
     const renderedWidth = formatImageSize(width);
     const renderedHeight = formatImageSize(height);
     const maskStyle = resolvePhiMaskStyle(config?.mask);
@@ -98,32 +87,11 @@ 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 })] }));
     }
-    const wrapperStyle = {
-        position: authoringVariantCropStyle ? "relative" : undefined,
-        width: renderedWidth ?? "100%",
-        height: renderedHeight,
-        maxWidth: "100%",
-        ...radiusStyle,
-        ...maskStyle,
-        overflow: authoringVariantCropStyle || Object.values(radiusStyle).some((value) => value != null)
-            ? "hidden"
-            : undefined,
-        lineHeight: 0,
-    };
-    const imageStyle = {
-        objectFit: fit,
-        objectPosition,
-        display: "block",
-        width: "100%",
-        height: renderedHeight ? "100%" : "auto",
-        ...authoringVariantCropStyle,
-        ...radiusStyle,
-    };
-    if (previewMode === "lightbox") {
-        return (_jsx("div", { style: wrapperStyle, children: _jsx(AntImage, { alt: alt, src: renderUrl, title: title || undefined, width: typeof width === "number" ? width : undefined, height: typeof height === "number" ? height : undefined, style: imageStyle, preview: true }) }));
-    }
-    if (trusted && typeof width === "number" && typeof height === "number") {
-        return (_jsx("div", { style: wrapperStyle, children: _jsx(NextImage, { alt: alt, src: renderUrl, title: title || undefined, width: width, height: height, sizes: config?.sizes?.trim() || undefined, unoptimized: !optimizable, placeholder: blurDataUrl ? "blur" : undefined, blurDataURL: blurDataUrl || undefined, preload: preload, style: imageStyle }) }));
-    }
-    return (_jsx("div", { style: wrapperStyle, children: _jsx("img", { alt: alt, src: renderUrl, title: title || undefined, width: typeof width === "number" ? width : undefined, height: typeof height === "number" ? height : undefined, style: imageStyle }) }));
+    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: {
+            ...radiusStyle,
+            ...maskStyle,
+            overflow: presentation.simulatedCropStyle || Object.values(radiusStyle).some((value) => value != null)
+                ? "hidden"
+                : undefined,
+        }, imageStyle: radiusStyle }));
 }

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

@@ -22,7 +22,7 @@ export type PhiCmsImageWidgetConfig = PhiCmsWidgetConfigBase & PhiMediaImageSour
     mask?: PhiMaskConfig;
 };
 export declare function normalizePhiImageWidgetConfig(config: unknown): PhiCmsImageWidgetConfig;
-export declare function parsePhiCmsImageWidgetConfig(config: Record<string, unknown>): PhiCmsImageWidgetConfig;
+declare function parsePhiCmsImageWidgetConfig(config: Record<string, unknown>): PhiCmsImageWidgetConfig;
 export declare const PHI_IMAGE_WIDGET_DEFINITION: {
     kind: "widget";
     pluginKey: string;
@@ -31,6 +31,7 @@ export declare const PHI_IMAGE_WIDGET_DEFINITION: {
     title: string;
     description: string;
     category: "content";
+    icon: string;
     iconFamily: string;
     fields: ({
         key: string;
@@ -162,3 +163,4 @@ export declare const PHI_IMAGE_WIDGET_DEFINITION: {
     parseConfig: typeof parsePhiCmsImageWidgetConfig;
 };
 export declare const PHI_IMAGE_WIDGET_PLUGIN_TYPE: string;
+export {};

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

@@ -1,3 +1,5 @@
+import { isPhiRecord } from "../../../../../helpers/is-record";
+import { PHI_IMAGE_VARIANT_OPTIONS } from "../../../../../components/widgets/config/image-variant-options";
 import { resolvePhiCmsWidgetPluginKey } from "../../../../../constants/cms-widget-types";
 import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
 import { PhiImageAssetVariantKey } from "../../../../../constants/media";
@@ -5,7 +7,7 @@ import { readPhiMediaImageSourceConfig } from "../../../../../components/widgets
 import { readBoolean, readCssSize, readRenderableBlockConfig, readString, } from "../../../../../components/widgets/config/parser-primitives";
 import { normalizePhiMaskConfig, } from "../../../../../components/widgets/config/mask";
 function readImageSize(value) {
-    if (!value || typeof value !== "object" || Array.isArray(value)) {
+    if (!isPhiRecord(value)) {
         return undefined;
     }
     const record = value;
@@ -22,7 +24,7 @@ function readImageFit(value) {
     return fit === "contain" || fit === "fill" ? fit : "cover";
 }
 export function normalizePhiImageWidgetConfig(config) {
-    if (!config || typeof config !== "object" || Array.isArray(config)) {
+    if (!isPhiRecord(config)) {
         return {
             ...readRenderableBlockConfig({}),
             sourceKind: "url",
@@ -38,7 +40,6 @@ export function normalizePhiImageWidgetConfig(config) {
             preload: false,
             previewMode: "none",
             imageSize: undefined,
-            blurDataUrl: undefined,
             borderTopLeftRadius: undefined,
             borderTopRightRadius: undefined,
             borderBottomLeftRadius: undefined,
@@ -59,7 +60,6 @@ export function normalizePhiImageWidgetConfig(config) {
         preload: readBoolean(raw.preload) ?? false,
         previewMode: readImagePreviewMode(raw.previewMode),
         imageSize: readImageSize(raw.imageSize),
-        blurDataUrl: readString(raw.blurDataUrl),
         borderTopLeftRadius: readCssSize(raw.borderTopLeftRadius),
         borderTopRightRadius: readCssSize(raw.borderTopRightRadius),
         borderBottomLeftRadius: readCssSize(raw.borderBottomLeftRadius),
@@ -70,21 +70,9 @@ export function normalizePhiImageWidgetConfig(config) {
         ? { ...normalized, ...source, variantKey: source.variantKey ?? PhiImageAssetVariantKey.Card }
         : { ...normalized, ...source };
 }
-export function parsePhiCmsImageWidgetConfig(config) {
+function parsePhiCmsImageWidgetConfig(config) {
     return normalizePhiImageWidgetConfig(config);
 }
-const IMAGE_VARIANT_OPTIONS = [
-    { value: String(PhiImageAssetVariantKey.Thumbnail), label: "Thumbnail" },
-    { value: String(PhiImageAssetVariantKey.Preview), label: "Preview" },
-    { value: String(PhiImageAssetVariantKey.Banner), label: "Banner" },
-    { value: String(PhiImageAssetVariantKey.Header), label: "Header" },
-    { value: String(PhiImageAssetVariantKey.Card), label: "Card" },
-    { value: String(PhiImageAssetVariantKey.Hero), label: "Hero" },
-    { value: String(PhiImageAssetVariantKey.Avatar), label: "Avatar" },
-    { value: String(PhiImageAssetVariantKey.Logo), label: "Logo" },
-    { value: String(PhiImageAssetVariantKey.Landscape), label: "Landscape" },
-    { value: String(PhiImageAssetVariantKey.Portrait), label: "Portrait" },
-];
 const IMAGE_OBJECT_POSITION_OPTIONS = [
     { value: "center", label: "Center" },
     { value: "top", label: "Top" },
@@ -104,6 +92,7 @@ export const PHI_IMAGE_WIDGET_DEFINITION = {
     title: "Image",
     description: "Flexible image renderer for local media, trusted URLs, and on-demand renditions.",
     category: "content",
+    icon: "antd:picture-outlined",
     iconFamily: "content",
     fields: [
         {
@@ -120,7 +109,7 @@ export const PHI_IMAGE_WIDGET_DEFINITION = {
             key: "variantKey",
             type: "choice",
             label: "Variant",
-            options: IMAGE_VARIANT_OPTIONS,
+            options: PHI_IMAGE_VARIANT_OPTIONS,
             emptyOption: { value: "__original__", label: "Original" },
             emptyValue: null,
             visibleWhen: { field: "sourceKind", equals: "asset" },