@phis/ui 0.4.1 → 0.4.3

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

@@ -3,7 +3,8 @@ import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
 import { readPhiLinkTarget } from "../../../../../types/references";
 import { readPhiMediaImageSourceConfig } from "../../../../../components/widgets/config/image-source-parser";
 import { PHI_SURFACE_CARD } from "../../../../../helpers/surface-presets";
-import { PHI_CARD_HEADING_LEVELS, PHI_CARD_HOVER_EFFECTS, PHI_CARD_ICON_PLACEMENTS, PHI_CARD_TEXT_ALIGNS, PHI_CARD_VARIANTS, } from "../../../../../components/widgets/shared/card-vocabulary";
+import { buildPhiBulletListFields, readPhiBulletListEntries, readPhiBulletListStyle, } from "../../../../../components/widgets/shared/bullet-list-vocabulary";
+import { PHI_CARD_HEADING_LEVELS, PHI_CARD_HOVER_EFFECTS, PHI_CARD_ICON_PLACEMENTS, PHI_CARD_TEXT_ALIGNS, PHI_CARD_VARIANTS, readPhiCardBillingPeriod, } from "../../../../../components/widgets/shared/card-vocabulary";
 import { readPhiControlLabel } from "../../../../../components/widgets/config/common-action-field";
 import { PHI_CARD_SIGNALS } from "../../../../../components/widgets/signals/control-signal-capabilities";
 import { readPhiSignalRouteSet } from "../../../../../types/signals";
@@ -24,7 +25,16 @@ function parsePhiCmsCardWidgetConfig(config) {
         description: readString(config.description),
         meta: readString(config.meta),
         value: readString(config.value),
-        body: readChoice(readString(config.body), ["text", "stat"]),
+        badge: readString(config.badge),
+        badgeColor: readString(config.badgeColor),
+        price: readString(config.price),
+        pricePeriod: readString(config.pricePeriod),
+        priceYearly: readString(config.priceYearly),
+        pricePeriodYearly: readString(config.pricePeriodYearly),
+        billingPeriod: readPhiCardBillingPeriod(config.billingPeriod),
+        features: config.features === undefined ? undefined : readPhiBulletListEntries(config.features),
+        featureList: readPhiBulletListStyle(config.featureList),
+        body: readChoice(readString(config.body), ["text", "stat", "plan"]),
         headingLevel: readChoice(readString(config.headingLevel), PHI_CARD_HEADING_LEVELS),
         textAlign: readChoice(readString(config.textAlign), PHI_CARD_TEXT_ALIGNS),
         icon: readString(config.icon),
@@ -69,7 +79,17 @@ export const PHI_CARD_WIDGET_DEFINITION = {
     icon: "antd:idcard-outlined",
     iconFamily: "basic",
     translatesOwnText: true,
-    slotSizePolicy: "fill-inline",
+    /*
+     * A card fills its slot both ways, as a Layout does.
+     *
+     * It filled only across, and stood at its own content's height inside the slot: three cards whose
+     * texts differ, side by side in a Grid row, ended at three different lines although the row had laid
+     * their slots out at one height. Filling the block axis lets the row's height reach the card. Where
+     * the slot has no height of its own -- a Stack or a Masonry column of content height -- a percentage
+     * against it stays auto and the card is as tall as its content, as before. A card in a container of
+     * fixed height grows into it, as a Layout there does; a card that should not says so with a height.
+     */
+    slotSizePolicy: "fill",
     /*
      * The card draws its Surface itself: its picture zooms inside the box under the pointer, and the box
      * clips it to its corners, so the ground has to be the card's own and not the slot frame's.
@@ -102,6 +122,22 @@ export const PHI_CARD_WIDGET_DEFINITION = {
             options: [
                 { value: "text", label: "Text" },
                 { value: "stat", label: "Statistic" },
+                { value: "plan", label: "Plan" },
+            ],
+        },
+        /*
+         * The prices and the features are written on the card; asked here is only which price it shows
+         * first. The canvas shows that one, so the yearly price is written by choosing Yearly here.
+         */
+        {
+            key: "billingPeriod",
+            type: "choice",
+            label: "Price shown",
+            presentation: "segmented",
+            visibleWhen: { field: "body", equals: "plan" },
+            options: [
+                { value: "monthly", label: "Monthly" },
+                { value: "yearly", label: "Yearly" },
             ],
         },
         {
@@ -223,6 +259,19 @@ export const PHI_CARD_WIDGET_DEFINITION = {
             ],
         },
         { key: "highlight", type: "boolean", label: "Highlight" },
+        /* The band's words are written on the card; its colour is the one thing asked here. */
+        {
+            key: "badgeColor",
+            type: "color",
+            heading: "Badge",
+            label: "Color",
+            mode: "single",
+            defaultToken: "colorPrimary",
+        },
+        ...buildPhiBulletListFields("featureList", "Features").map((field) => ({
+            ...field,
+            visibleWhen: { field: "body", equals: "plan" },
+        })),
     ],
     parseConfig: parsePhiCmsCardWidgetConfig,
 };

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

@@ -8,18 +8,35 @@ import { PhiInlineTextEditor } from "../../../../../components/controls/phi-inli
 import { PhiTypographyControl } from "../../../../../components/controls/phi-typography-control";
 import { PhiCardWidgetClient, } from "../../../../../components/widgets/shared/card-body-client";
 import { PHI_CARD_WIDGET_DEFAULT_LABELS } from "../../../../../components/widgets/label-types/card";
+import { PhiBulletListEntriesEditor } from "../../../../../components/widgets/client/bullet-list-entries-editor";
+import { resolvePhiBulletListStyle, } from "../../../../../components/widgets/shared/bullet-list-vocabulary";
+/* One empty list for every card without features, so the list editor's draft is not reset per render. */
+const PHI_CARD_NO_FEATURES = [];
 const PHI_CARD_TEXT_PLACEHOLDERS = {
     eyebrow: "Eyebrow",
     title: "Title",
     description: "Description",
     meta: "Meta",
     value: "Value",
+    badge: "Badge",
+    price: "Price",
+    pricePeriod: "/ month",
+    priceYearly: "Yearly price",
+    pricePeriodYearly: "/ year",
+};
+/* Slots only one body draws; under any other the editor offers no field for them. */
+const PHI_CARD_BODY_TEXT_SLOTS = {
+    value: "stat",
+    price: "plan",
+    pricePeriod: "plan",
+    priceYearly: "plan",
+    pricePeriodYearly: "plan",
 };
 /*
  * Slots a card often goes without. Empty, they stand on the canvas only while the card is under the
  * pointer or being written in (`styles/layout.css`), so an empty card does not read as four empty lines.
  */
-const PHI_CARD_OPTIONAL_TEXT_SLOTS = new Set(["eyebrow", "meta"]);
+const PHI_CARD_OPTIONAL_TEXT_SLOTS = new Set(["eyebrow", "meta", "badge"]);
 /**
  * One of the card's words, edited where it stands: underlined, in the type of the text it edits.
  *
@@ -106,8 +123,14 @@ export function PhiCardWidgetEditor({ config, onChange }) {
                     meta: config.meta,
                     actionLabel: config.actionLabel ?? PHI_CARD_WIDGET_DEFAULT_LABELS.actionLabel,
                     value: config.value,
+                    badge: config.badge,
+                    price: config.price,
+                    pricePeriod: config.pricePeriod,
+                    priceYearly: config.priceYearly,
+                    pricePeriodYearly: config.pricePeriodYearly,
                 }, renderText: (slot, text) => {
-                    if (slot === "value" && config.body !== "stat")
+                    const onlyUnder = PHI_CARD_BODY_TEXT_SLOTS[slot];
+                    if (onlyUnder && (config.body ?? "text") !== onlyUnder)
                         return null;
                     const field = (_jsx(PhiCardInlineText, { slot: slot, text: text ?? "", ...(onChange ? { onCommit: (next) => onChange({ [slot]: next || undefined }) } : {}) }));
                     return !text && PHI_CARD_OPTIONAL_TEXT_SLOTS.has(slot)
@@ -141,8 +164,12 @@ export function PhiCardWidgetEditor({ config, onChange }) {
                     variant: config.variant,
                     body: config.body,
                     highlight: config.highlight,
+                    badgeColor: config.badgeColor,
+                    billingPeriod: config.billingPeriod,
                     hoverEffect: config.linkTarget ? config.hoverEffect : undefined,
-                } }), pictureTooNarrow ? (_jsx(PhiTypographyControl, { style: {
+                }, ...(config.body === "plan" ? {
+                    listContent: (_jsx(PhiBulletListEntriesEditor, { entries: config.features ?? PHI_CARD_NO_FEATURES, listStyle: resolvePhiBulletListStyle(config.featureList), states: true, ...(onChange ? { onCommit: (features) => onChange({ features }) } : {}) })),
+                } : {}) }), pictureTooNarrow ? (_jsx(PhiTypographyControl, { style: {
                     position: "absolute",
                     left: "0.375rem",
                     top: "0.375rem",

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

@@ -7,6 +7,9 @@ export type PhiCardWidgetLabels = {
     description?: string;
     meta?: string;
     actionLabel?: string;
+    badge?: string;
+    pricePeriod?: string;
+    pricePeriodYearly?: string;
 };
 export type PhiCardWidgetProps = PhiServerBlockBaseProps<PhiCardWidgetLabels, PhiCmsCardWidgetConfig> & {
     links?: PhiResolvedLinkTargets | null;

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

@@ -7,6 +7,9 @@ import { resolvePhiLinkHref } from "../../../../../helpers/link-target";
 import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
 import { PhiRuntimeModuleRenderClientHost } from "../../../../../components/runtime/runtime-module-render-client-manifest";
 import { getPhiCardWidgetLabelsForRuntime } from "../../../../../components/widgets/label-sets/card";
+import { PhiBulletListControl } from "../../../../../components/controls/phi-bullet-list-control";
+import { buildPhiBulletListTree, resolvePhiBulletListStyle, } from "../../../../../components/widgets/shared/bullet-list-vocabulary";
+import { maskPhiTextPlaceholders, resolvePhiTextPlaceholders } from "../../../../../helpers/text-placeholders";
 export async function PhiCardWidget({ labels, config, runtime, links, translate, preview = false, }) {
     /*
      * The button's words: the author's, or none where they emptied them for an icon-only button, or the
@@ -15,19 +18,36 @@ export async function PhiCardWidget({ labels, config, runtime, links, translate,
     const actionEnabled = config?.actionEnabled === true;
     const defaultLabels = actionEnabled ? await getPhiCardWidgetLabelsForRuntime(runtime) : null;
     const ownActionLabel = labels.actionLabel ?? config?.actionLabel;
+    const plan = config?.body === "plan";
     const textEntries = [
         ["eyebrow", labels.eyebrow ?? config?.eyebrow],
         ["title", labels.title ?? config?.title],
         ["description", labels.description ?? config?.description],
         ["meta", labels.meta ?? config?.meta],
         ["actionLabel", actionEnabled ? ownActionLabel : undefined],
+        ["badge", labels.badge ?? config?.badge],
+        ["pricePeriod", plan ? labels.pricePeriod ?? config?.pricePeriod : undefined],
+        ["pricePeriodYearly", plan ? labels.pricePeriodYearly ?? config?.pricePeriodYearly : undefined],
     ];
+    /*
+     * A plan's features, masked as every list entry is: their values stand as `%1` onwards and never reach
+     * a translator, and `{site.name}` is filled after (`helpers/text-placeholders.ts`).
+     */
+    const features = plan ? (config?.features ?? []).filter((entry) => Boolean(entry.text)) : [];
+    const maskedFeatures = features.map((entry) => maskPhiTextPlaceholders(entry.text, entry.values?.length ?? 0));
+    const sourceTexts = [...textEntries.map(([, value]) => value ?? ""), ...maskedFeatures.map((masked) => masked.text)];
     const translatedTexts = translate
         ? await (runtime?.locale.current
-            ? trBulkForLocale(runtime.locale.current, textEntries.map(([, value]) => value ?? ""))
-            : trBulk(textEntries.map(([, value]) => value ?? "")))
-        : textEntries.map(([, value]) => value ?? "");
+            ? trBulkForLocale(runtime.locale.current, sourceTexts)
+            : trBulk(sourceTexts))
+        : sourceTexts;
     const translatedByKey = new Map(textEntries.map(([key], index) => [key, translatedTexts[index] || undefined]));
+    const translatedFeatures = features.map((entry, index) => ({
+        ...entry,
+        text: resolvePhiTextPlaceholders(translatedTexts[textEntries.length + index] ?? entry.text, maskedFeatures[index].names, runtime, entry.values),
+    }));
+    /* Drawn here, so the list Control never reaches the browser with the Card (`listContent`). */
+    const featureList = translatedFeatures.length > 0 ? (_jsx(PhiBulletListControl, { listStyle: resolvePhiBulletListStyle(config?.featureList), items: buildPhiBulletListTree(translatedFeatures, (entry) => entry.text) })) : null;
     /*
      * The figure is left out of the translation on purpose: a Site's own number is not a word, and
      * `translate` is a per-Widget switch, so a stat card that turned it off to protect the figure would
@@ -92,6 +112,8 @@ export async function PhiCardWidget({ labels, config, runtime, links, translate,
         variant: config?.variant,
         body: config?.body,
         highlight: config?.highlight,
+        badgeColor: config?.badgeColor,
+        billingPeriod: config?.billingPeriod,
         // Only a card that leads somewhere answers the pointer; the preview has no link but shows it.
         hoverEffect: config?.linkTarget ? config.hoverEffect : undefined,
         signalRoutes: preview ? null : config?.signalRoutes ?? null,
@@ -106,7 +128,13 @@ export async function PhiCardWidget({ labels, config, runtime, links, translate,
                     ? defaultLabels?.actionLabel
                     : translatedByKey.get("actionLabel") ?? "",
                 value,
+                badge: translatedByKey.get("badge"),
+                price: plan ? config?.price : undefined,
+                pricePeriod: translatedByKey.get("pricePeriod"),
+                priceYearly: plan ? config?.priceYearly : undefined,
+                pricePeriodYearly: translatedByKey.get("pricePeriodYearly"),
             },
             config: clientConfig,
+            ...(featureList ? { listContent: featureList } : {}),
         } }));
 }

package/plugins/runtime-modules/core/widgets/collection-view/asset-binding.js

@@ -23,6 +23,7 @@ import { buildPhiMediaSpaceOptions, usePhiMediaSpaceSelectionAllowed, } from "..
 import { buildPhiMediaFolderCascaderOptions, buildPhiMediaFolderValueById, combinePhiMediaFlagValues, resolvePhiMediaFolderIdFromValue, } from "../../../../../components/media/media-folder-options";
 import { PHI_ASSET_CONTROLLER_STORE_KEY } from "../../../../../components/media/asset-controller-signals";
 import { applyPhiAssetCollectionData } from "../../../../../components/media/asset-collection-runtime";
+import { readPhiMediaAssetTiles, readPhiMediaFolders } from "../../../../../components/media/phi-image-preview-data";
 import { PhiAssetFolderControl } from "../../../../../components/media/phi-asset-folder-control";
 import { PhiAreaUploadBinding } from "../../../../../components/media/phi-area-upload-widget";
 import { PHI_MEDIA_WIDGET_DEFAULT_LABELS } from "../../../../../components/media/media-widget-labels";
@@ -65,10 +66,9 @@ export function PhiAssetCollectionViewBinding({ config, binding, labels: rawLabe
     const selectionState = usePhiImagePreviewStore(PHI_ASSET_CONTROLLER_STORE_KEY);
     const query = binding.query;
     const setQuery = binding.setQuery;
-    const assets = (binding.data?.items ?? []);
-    const folders = Array.isArray(binding.data?.meta?.folders)
-        ? binding.data.meta.folders
-        : [];
+    // A Collection carries items of no particular type; they are read as tiles, not cast to them.
+    const assets = useMemo(() => readPhiMediaAssetTiles(binding.data?.items ?? []), [binding.data?.items]);
+    const folders = useMemo(() => readPhiMediaFolders(binding.data?.meta?.folders), [binding.data?.meta?.folders]);
     const queryKind = query.filters?.kind;
     const queryFlags = query.filters?.presentationFlags;
     const queryFolderId = query.filters?.folderId;
@@ -82,7 +82,8 @@ export function PhiAssetCollectionViewBinding({ config, binding, labels: rawLabe
         pageSize: query.pageSize ?? 20,
         assets,
         folders,
-        pagination: { total: binding.data?.total ?? assets.length },
+        // Nothing read yet is nothing counted yet; the assets of a page are never the count.
+        pagination: { total: binding.data?.total ?? 0 },
         loading: binding.loading,
         error: binding.error,
         uploadPanelOpen: binding.openPanelKey === "upload",
@@ -259,7 +260,7 @@ export function PhiAssetCollectionViewBinding({ config, binding, labels: rawLabe
             } })) : null, diagnostics: state.error ? _jsx(PhiAlertControl, { level: "error", showIcon: true, title: state.error }) : null, body: body, items: state.assets.map((asset) => (_jsx(PhiMediaAssetTileControl, { asset: asset, minColumnWidth: minColumnWidth, selected: state.selectedAssetId === asset.id, mode: mode, deleting: deletingAssetIds.includes(asset.id), onSelect: selectAsset, onDelete: (nextAsset) => { void deleteAsset(nextAsset); }, deleteLabel: labels.grid.deleteLabel, showTypeLabel: true, showDeleteAction: true, showDimensions: true, showIdLabel: true }, asset.id))), mode: mode, gap: gap, minColumnWidth: minColumnWidth, pagination: features.pagination?.enabled === false ? null : {
             page: state.page,
             pageSize: state.pageSize,
-            total: state.pagination?.total ?? state.assets.length,
+            total: state.pagination?.total ?? 0,
             simple: features.pagination?.compact,
             showSizeChanger: (features.pagination?.pageSizes?.length ?? 0) > 0,
             pageSizeOptions: features.pagination?.pageSizes,

package/plugins/runtime-modules/core/widgets/collection-view/config.js

@@ -1,5 +1,5 @@
 import { resolvePhiCmsWidgetPluginKey } from "../../../../../constants/cms-widget-types";
-import { PHI_CARD_VARIANTS } from "../../../../../components/widgets/shared/card-vocabulary";
+import { PHI_CARD_VARIANTS, readPhiCardBillingPeriod } from "../../../../../components/widgets/shared/card-vocabulary";
 import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
 import { readPhiProviderResourceSource } from "../../../../../types/runtime-data-provider";
 import { PHI_SIGNAL_VALUE_SCHEMAS, readPhiSignalRouteSet } from "../../../../../types/signals";
@@ -25,8 +25,15 @@ function readCardPresentation(value) {
         actionLabel: readString(value.actionLabel),
         actionHref: readString(value.actionHref),
         variant: PHI_CARD_VARIANTS.find((candidate) => candidate === variant),
-        body: value.body === "text" || value.body === "stat" ? value.body : undefined,
+        body: value.body === "text" || value.body === "stat" || value.body === "plan" ? value.body : undefined,
         highlight: readString(value.highlight),
+        badge: readString(value.badge),
+        price: readString(value.price),
+        pricePeriod: readString(value.pricePeriod),
+        priceYearly: readString(value.priceYearly),
+        pricePeriodYearly: readString(value.pricePeriodYearly),
+        features: readString(value.features),
+        billingPeriod: readPhiCardBillingPeriod(value.billingPeriod),
     };
 }
 function readMode(value) {

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

@@ -312,30 +312,6 @@ export declare const PHI_DESCRIPTION_WIDGET_DEFINITION: {
         editorPlacement?: "inspector" | "geometry" | "toolbar";
         visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
         heading?: string;
-    } & {
-        type: "background";
-        section?: string;
-        storage?: import("../../../../../types").PhiCmsConfigFieldValueStorage;
-    }) | ({
-        key: string;
-        label: string;
-        description?: string;
-        required?: boolean;
-        editorPlacement?: "inspector" | "geometry" | "toolbar";
-        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
-        heading?: string;
-    } & {
-        type: "border";
-        section?: string;
-        storage?: import("../../../../../types").PhiCmsConfigFieldValueStorage;
-    }) | ({
-        key: string;
-        label: string;
-        description?: string;
-        required?: boolean;
-        editorPlacement?: "inspector" | "geometry" | "toolbar";
-        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
-        heading?: string;
     } & {
         type: "surface";
         tone?: false;
@@ -348,7 +324,7 @@ export declare const PHI_DESCRIPTION_WIDGET_DEFINITION: {
         visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
         heading?: string;
     } & {
-        type: "shadow" | "grid-placement" | "column-count";
+        type: "grid-placement" | "column-count";
         section?: string;
     }) | {
         key: string;

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

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useRef, useState } from "react";
+import { useMemo, useState } from "react";
 import { PhiTagControl } from "../../../../../components/controls/phi-tag-control";
 import { PhiTextControl } from "../../../../../components/controls/phi-text-control";
 import { PhiFlexControl } from "../../../../../components/controls/phi-flex-control";
 import { resolvePhiDescriptionEditorSections } from "../../../../../components/widgets/client/description-editor-sections";
-import { PhiBulletListControl } from "../../../../../components/controls/phi-bullet-list-control";
-import { buildPhiBulletListTree, resolvePhiBulletListLevel, resolvePhiBulletListStyle, } from "../../../../../components/widgets/shared/bullet-list-vocabulary";
+import { PhiBulletListEntriesEditor } from "../../../../../components/widgets/client/bullet-list-entries-editor";
+import { resolvePhiBulletListStyle, } from "../../../../../components/widgets/shared/bullet-list-vocabulary";
 function resolveEditorConfig(config) {
     return {
         eyebrow: config?.eyebrow ?? "",
@@ -36,7 +36,6 @@ export function PhiDescriptionWidgetEditor({ config, onChange, }) {
      * would be gone before its blur could write the empty value.
      */
     const sections = resolvePhiDescriptionEditorSections(resolvedConfig, Boolean(onChange));
-    const asideListRef = useRef(null);
     /*
      * Typing changes the draft and nothing else.
      *
@@ -56,51 +55,6 @@ export function PhiDescriptionWidgetEditor({ config, onChange, }) {
         }
         onChange?.({ [key]: draft[key] });
     }
-    function updateAsideItem(index, value) {
-        setDraftState((current) => {
-            const currentDraft = current.source === config ? current.value : resolvedConfig;
-            const nextItems = [...currentDraft.asideItems];
-            nextItems[index] = { ...nextItems[index], text: value };
-            return {
-                source: config,
-                value: {
-                    ...currentDraft,
-                    asideItems: nextItems,
-                },
-            };
-        });
-    }
-    function commitAsideItems(items = draft.asideItems) {
-        if (JSON.stringify(items) === JSON.stringify(resolvedConfig.asideItems)) {
-            return;
-        }
-        onChange?.({ asideItems: items });
-    }
-    /*
-     * Tab moves an entry a level down and Shift+Tab a level up, as in every outline editor. The move is
-     * written at once, with whatever was typed into the entry so far: it is a change of structure, and
-     * waiting for the blur would let the entry jump back as the tree is drawn again.
-     */
-    function shiftAsideItemLevel(index, delta) {
-        const items = draft.asideItems;
-        const entry = items[index];
-        if (!entry)
-            return;
-        const level = resolvePhiBulletListLevel((entry.level ?? 1) + delta);
-        if (level === (entry.level ?? 1))
-            return;
-        const { level: _level, ...rest } = entry;
-        void _level;
-        const next = items.map((item, itemIndex) => (itemIndex === index ? (level > 1 ? { ...rest, level } : rest) : item));
-        setDraftState({ source: config, value: { ...draft, asideItems: next } });
-        commitAsideItems(next);
-        // The entry now hangs elsewhere in the tree and its field is a new one; the caret goes back into it.
-        requestAnimationFrame(() => {
-            const field = asideListRef.current?.querySelectorAll("textarea")[index];
-            field?.focus();
-            field?.setSelectionRange(field.value.length, field.value.length);
-        });
-    }
     return (_jsx(PhiFlexControl, { vertical: true, gap: 16, style: { width: "100%", minWidth: 0 }, children: _jsxs(PhiFlexControl, { vertical: true, gap: 10, style: { width: "100%", minWidth: 0 }, children: [sections.eyebrowTag ? (_jsx(PhiTagControl, { color: "default", style: {
                         width: "fit-content",
                         borderRadius: 999,
@@ -126,18 +80,7 @@ export function PhiDescriptionWidgetEditor({ config, onChange, }) {
                                 ...EDITOR_TEXTAREA_STYLE,
                                 color: "var(--ant-color-text-heading)",
                                 fontWeight: 600,
-                            } }), _jsx("div", { ref: asideListRef, style: { width: "100%", minWidth: 0 }, children: _jsx(PhiBulletListControl, { listStyle: resolvePhiBulletListStyle(config?.asideList), 
-                                // Each entry is a borderless text field, whose first line stands at the field's height.
-                                markerLineHeight: "var(--ant-control-height)", items: buildPhiBulletListTree(draft.asideItems, (item, index) => (_jsx(PhiTextControl, { presentation: "textarea", value: item.text, readOnly: !onChange, variant: "borderless", placeholder: `Item ${index + 1}`, autoSize: { minRows: 1, maxRows: 6 }, onChange: (value) => updateAsideItem(index, value ?? ""), onBlur: () => commitAsideItems(), onKeyDown: (event) => {
-                                        if (event.key !== "Tab" || !onChange)
-                                            return;
-                                        event.preventDefault();
-                                        shiftAsideItemLevel(index, event.shiftKey ? -1 : 1);
-                                    }, style: {
-                                        ...EDITOR_TEXTAREA_STYLE,
-                                        borderBottom: "none",
-                                        paddingBlock: 0,
-                                    } }))) }) })] })) : null, _jsx(PhiTextControl, { presentation: "textarea", value: draft.footer, readOnly: !onChange, variant: "borderless", placeholder: "Footer", autoSize: { minRows: 1, maxRows: 5 }, onChange: (value) => updateField("footer", value ?? ""), onBlur: () => commitField("footer"), style: {
+                            } }), _jsx(PhiBulletListEntriesEditor, { entries: resolvedConfig.asideItems, listStyle: resolvePhiBulletListStyle(config?.asideList), ...(onChange ? { onCommit: (asideItems) => onChange({ asideItems }) } : {}) })] })) : null, _jsx(PhiTextControl, { presentation: "textarea", value: draft.footer, readOnly: !onChange, variant: "borderless", placeholder: "Footer", autoSize: { minRows: 1, maxRows: 5 }, onChange: (value) => updateField("footer", value ?? ""), onBlur: () => commitField("footer"), style: {
                         ...EDITOR_TEXTAREA_STYLE,
                         color: "var(--ant-color-text-tertiary)",
                     } })] }) }));

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

@@ -356,30 +356,6 @@ export declare const PHI_ENTRY_LIST_WIDGET_DEFINITION: {
         editorPlacement?: "inspector" | "geometry" | "toolbar";
         visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
         heading?: string;
-    } & {
-        type: "background";
-        section?: string;
-        storage?: import("../../../../../types").PhiCmsConfigFieldValueStorage;
-    }) | ({
-        key: string;
-        label: string;
-        description?: string;
-        required?: boolean;
-        editorPlacement?: "inspector" | "geometry" | "toolbar";
-        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
-        heading?: string;
-    } & {
-        type: "border";
-        section?: string;
-        storage?: import("../../../../../types").PhiCmsConfigFieldValueStorage;
-    }) | ({
-        key: string;
-        label: string;
-        description?: string;
-        required?: boolean;
-        editorPlacement?: "inspector" | "geometry" | "toolbar";
-        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
-        heading?: string;
     } & {
         type: "surface";
         tone?: false;
@@ -392,7 +368,7 @@ export declare const PHI_ENTRY_LIST_WIDGET_DEFINITION: {
         visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
         heading?: string;
     } & {
-        type: "shadow" | "grid-placement" | "column-count";
+        type: "grid-placement" | "column-count";
         section?: string;
     }) | {
         key: string;

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

@@ -318,30 +318,6 @@ export declare const PHI_GALLERY_WIDGET_DEFINITION: {
         editorPlacement?: "inspector" | "geometry" | "toolbar";
         visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
         heading?: string;
-    } & {
-        type: "background";
-        section?: string;
-        storage?: import("../../../../../types").PhiCmsConfigFieldValueStorage;
-    }) | ({
-        key: string;
-        label: string;
-        description?: string;
-        required?: boolean;
-        editorPlacement?: "inspector" | "geometry" | "toolbar";
-        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
-        heading?: string;
-    } & {
-        type: "border";
-        section?: string;
-        storage?: import("../../../../../types").PhiCmsConfigFieldValueStorage;
-    }) | ({
-        key: string;
-        label: string;
-        description?: string;
-        required?: boolean;
-        editorPlacement?: "inspector" | "geometry" | "toolbar";
-        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
-        heading?: string;
     } & {
         type: "surface";
         tone?: false;
@@ -354,7 +330,7 @@ export declare const PHI_GALLERY_WIDGET_DEFINITION: {
         visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
         heading?: string;
     } & {
-        type: "shadow" | "grid-placement" | "column-count";
+        type: "grid-placement" | "column-count";
         section?: string;
     }) | {
         key: string;

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

@@ -5,7 +5,7 @@ import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
 import { PhiImageAssetVariantKey } from "../../../../../constants/media";
 import { readPhiMediaImageSourceConfig } from "../../../../../components/widgets/config/image-source-parser";
 import { readBoolean, readCssSize, readRenderableBlockConfig, readString, } from "../../../../../components/widgets/config/parser-primitives";
-import { normalizePhiMaskConfig, } from "../../../../../components/widgets/config/mask";
+import { readPhiMaskConfig, } from "../../../../../components/widgets/config/mask";
 function readImageSize(value) {
     if (!isPhiRecord(value)) {
         return undefined;
@@ -64,7 +64,7 @@ export function normalizePhiImageWidgetConfig(config) {
         borderTopRightRadius: readCssSize(raw.borderTopRightRadius),
         borderBottomLeftRadius: readCssSize(raw.borderBottomLeftRadius),
         borderBottomRightRadius: readCssSize(raw.borderBottomRightRadius),
-        mask: normalizePhiMaskConfig(raw.mask),
+        mask: readPhiMaskConfig(raw.mask),
     };
     /*
      * An Asset without a word about its variant gets the Card variant; `null` is a word -- the Inspector's

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

@@ -1,4 +1,4 @@
-import type { PhiMarkdownTextAlign } from "../../../../../types/core-widget-placements";
+import type { PhiMarkdownImageFloat, PhiMarkdownTextAlign } from "../../../../../types/core-widget-placements";
 import { type PhiSpacingScaleKey } from "../../../../../components/widgets/config/spacing-options";
 import type { PhiCmsResolvedContent } from "../../../../../types/cms";
 import { type PhiBulletListStyle } from "../../../../../components/widgets/shared/bullet-list-vocabulary";
@@ -13,6 +13,8 @@ export type PhiCmsMarkdownWidgetConfig = PhiCmsWidgetConfigBase & {
     /** Set at render from the node's `NoTranslate` flag, or by a caller that knows; never authored. */
     translate?: boolean;
     textAlign?: PhiMarkdownTextAlign;
+    /** Pictures stand at this edge and the text flows past them; absent, a picture is a line of its own. */
+    imageFloat?: PhiMarkdownImageFloat;
     textBlockSpacingBefore?: PhiSpacingScaleKey;
     textBlockSpacingAfter?: PhiSpacingScaleKey;
     headingBlockSpacingBefore?: PhiSpacingScaleKey;

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

@@ -9,6 +9,13 @@ const PHI_MARKDOWN_TEXT_ALIGN_OPTIONS = [
     { value: "end", label: "End" },
     { value: "justify", label: "Justify" },
 ];
+const PHI_MARKDOWN_IMAGE_FLOAT_OPTIONS = [
+    { value: "start", label: "Start" },
+    { value: "end", label: "End" },
+];
+function readMarkdownImageFloat(value) {
+    return value === "start" || value === "end" ? value : undefined;
+}
 // The one spacing scale every padding and gap speaks (`theme/phi-tokens.ts`), stored by its key.
 const PHI_MARKDOWN_SPACING_OPTIONS = PHI_SPACING_SCALE_KEYS.map((key) => ({ value: key, label: key }));
 function readMarkdownSourceMode(value) {
@@ -41,6 +48,7 @@ export function parsePhiCmsMarkdownWidgetConfig(config) {
         sourceLocale: readString(config.sourceLocale),
         revalidateSeconds: readNumber(config.revalidateSeconds),
         textAlign: readMarkdownTextAlign(config.textAlign),
+        imageFloat: readMarkdownImageFloat(config.imageFloat),
         textBlockSpacingBefore: readMarkdownSpacingKey(config.textBlockSpacingBefore),
         textBlockSpacingAfter: readMarkdownSpacingKey(config.textBlockSpacingAfter),
         headingBlockSpacingBefore: readMarkdownSpacingKey(config.headingBlockSpacingBefore),
@@ -115,6 +123,12 @@ export const PHI_MARKDOWN_WIDGET_DEFINITION = {
             label: "Align",
             options: PHI_MARKDOWN_TEXT_ALIGN_OPTIONS,
         },
+        {
+            key: "imageFloat",
+            type: "choice",
+            label: "Image Float",
+            options: PHI_MARKDOWN_IMAGE_FLOAT_OPTIONS,
+        },
         {
             key: "textBlockSpacingBefore",
             type: "choice",

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

@@ -92,10 +92,9 @@ export function PhiMarkdownWidgetEditor({ blockId, config, onChange, onSourceLoc
              * as a capsule.
              *
              * `grown-md` is what that stylesheet would have given it -- the capsule of one Control line,
-             * held at every height (THEME.md, "Control shape"). The fallback is the LARGE surface radius,
-             * because it is the one radius on this element that a component token does not redefine.
+             * held at every height (THEME.md, "Control shape").
              */
-            borderRadius: "var(--phi-control-radius-grown-md, var(--ant-border-radius-lg))",
+            borderRadius: "var(--phi-control-radius-grown-md)",
             background: "var(--ant-color-bg-container)",
             resize: "none",
             fontFamily: "var(--ant-font-family-code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace)",