@phis/ui 0.2.1 → 0.4.0

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

@@ -1,6 +1,10 @@
 import { resolvePhiCmsWidgetPluginKey } from "../../../../../constants/cms-widget-types";
-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 { 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 { readRenderableBlockConfig, } from "../../../../../components/widgets/config/parser-primitives";
 /*
  * Read strictly, and say so when a document is wrong.
@@ -21,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;
@@ -36,125 +32,81 @@ 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;
 }
-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");
-    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 = readVariantKey(raw.variantKey);
+    const preview = readFlag(raw.preview, "preview");
     return {
         ...readRenderableBlockConfig(raw),
-        images: readGalleryImages(raw.images),
-        ...(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"),
+        ...readPhiSequenceSettings(raw, fail),
+        source: readFolderSource(raw.source),
+        ...(variantKey === undefined ? {} : { variantKey }),
+        ...(preview === undefined ? {} : { preview }),
         ...(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"),
     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: "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: "source",
+            type: "data-provider",
+            providerKind: "record",
+            // 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: "transition",
+            key: "variantKey",
             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",
+            valueType: "number",
+            heading: "Picture",
+            label: "Variant",
+            options: PHI_IMAGE_VARIANT_OPTIONS,
+            emptyOption: { value: "__original__", label: "Original" },
+            emptyValue: null,
         },
+        /*
+         * 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: "easing",
+            key: "aspectRatio",
             type: "choice",
-            label: "Easing",
-            options: [...PHI_MOTION_EASING_FIELD_OPTIONS],
+            label: "Aspect Ratio",
+            options: PHI_MEDIA_ASPECT_RATIO_OPTIONS,
+            visibleWhen: { field: "variantKey", equals: null },
         },
-        { key: "gap", type: "string", label: "Gap" },
-        { key: "lookahead", type: "number", label: "Preload Ahead", min: 0 },
-        {
-            key: "mountPolicy",
-            type: "choice",
-            label: "Mounting",
-            options: [...PHI_CMS_MOUNT_POLICY_FIELD_OPTIONS],
-        },
-        { key: "aspectRatio", type: "string", label: "Aspect Ratio" },
         {
             key: "fit",
             type: "choice",
@@ -163,29 +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.
+     * 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/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", zoom: config?.previewMode === "native", style: {
+            ...radiusStyle,
+            ...maskStyle,
+            overflow: presentation.simulatedCropStyle || Object.values(radiusStyle).some((value) => value != null)
+                ? "hidden"
+                : undefined,
+        }, imageStyle: radiusStyle }));
 }