@phis/ui 0.4.2 → 0.4.4

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_BADGE_STYLES, 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,17 @@ 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),
+        badgeStyle: readChoice(readString(config.badgeStyle), PHI_CARD_BADGE_STYLES),
+        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),
@@ -58,6 +69,7 @@ const PHI_CARD_DEFAULT_CONFIG = {
     imageOpacity: 100,
     headingLevel: "h3",
     textAlign: "start",
+    badgeStyle: "none",
 };
 export const PHI_CARD_WIDGET_DEFINITION = {
     kind: "widget",
@@ -69,7 +81,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 +124,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 +261,33 @@ export const PHI_CARD_WIDGET_DEFINITION = {
             ],
         },
         { key: "highlight", type: "boolean", label: "Highlight" },
+        /* The band's words are written on the card; how it is drawn and its colour are asked here. */
+        {
+            key: "badgeStyle",
+            type: "choice",
+            heading: "Badge",
+            label: "Style",
+            presentation: "segmented",
+            description: "Corner: a band in the card's top corner. Tag: a rounded mark a little down the edge. Ribbon: hangs over the card's edge with a fold, and needs room beside the card -- a Layout that clips at the card's edge cuts it off. None: hides the badge and keeps its words.",
+            options: [
+                { value: "none", label: "None" },
+                { value: "corner", label: "Corner" },
+                { value: "tag", label: "Tag" },
+                { value: "ribbon", label: "Ribbon" },
+            ],
+        },
+        {
+            key: "badgeColor",
+            type: "color",
+            label: "Color",
+            visibleWhen: { field: "badgeStyle", notEquals: "none" },
+            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,17 +8,38 @@ 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.
  */
+/*
+ * Not the badge: it is drawn only once a style is chosen for it, and a band or ribbon that disappeared
+ * whenever the pointer left the card left nothing to see of the choice just made.
+ */
 const PHI_CARD_OPTIONAL_TEXT_SLOTS = new Set(["eyebrow", "meta"]);
 /**
  * One of the card's words, edited where it stands: underlined, in the type of the text it edits.
@@ -38,7 +59,12 @@ function PhiCardInlineText({ slot, text, onCommit, }) {
          * into beside them, and its wrapping is the card's own anyway. The text still wraps and aligns as
          * the card sets it.
          */
-        style: { width: "100%" }, 
+        /*
+         * The ground stays the card's, here as well as on the text: with a clear button the field is a
+         * wrapper around the text, and Ant Design's underlined wrapper paints the container ground -- white
+         * over the badge's band, whose light words then vanished on it.
+         */
+        style: { width: "100%", backgroundColor: "transparent" }, 
         /* The text's own type, and the page showing through: an edit in place reads like what it edits. */
         inputStyle: {
             paddingInline: 0,
@@ -99,15 +125,21 @@ export function PhiCardWidgetEditor({ config, onChange }) {
         && presentation.width != null
         && canvasWidth != null
         && presentation.width < canvasWidth;
-    return (_jsxs("div", { ref: canvasRef, className: "phi-card-editor", style: { position: "relative", width: "100%" }, children: [_jsx(PhiCardWidgetClient, { labels: {
+    return (_jsxs("div", { ref: canvasRef, className: "phi-card-editor", style: { position: "relative", display: "flex", width: "100%" }, children: [_jsx(PhiCardWidgetClient, { labels: {
                     eyebrow: config.eyebrow,
                     title: config.title,
                     description: config.description,
                     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 +173,13 @@ export function PhiCardWidgetEditor({ config, onChange }) {
                     variant: config.variant,
                     body: config.body,
                     highlight: config.highlight,
+                    badgeColor: config.badgeColor,
+                    badgeStyle: config.badgeStyle,
+                    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,9 @@ export async function PhiCardWidget({ labels, config, runtime, links, translate,
         variant: config?.variant,
         body: config?.body,
         highlight: config?.highlight,
+        badgeColor: config?.badgeColor,
+        badgeStyle: config?.badgeStyle,
+        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 +129,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/client.js

@@ -8,7 +8,6 @@ import { PhiBulletListControl } from "../../../../../components/controls/phi-bul
 import { buildPhiBulletListTree, resolvePhiBulletListStyle, } from "../../../../../components/widgets/shared/bullet-list-vocabulary";
 import { resolvePhiTextPlaceholders } from "../../../../../helpers/text-placeholders";
 const PHI_LINE_HEIGHT_BASE = 1.5;
-const PHI_LINE_HEIGHT_LG = 1.6;
 const PHI_FONT_WEIGHT_STRONG = 600;
 export function PhiDescriptionWidgetClient({ labels, config, }) {
     const { token } = usePhiConfig();
@@ -18,6 +17,7 @@ export function PhiDescriptionWidgetClient({ labels, config, }) {
                     borderRadius: 999,
                     paddingInline: token.paddingSM,
                     paddingBlock: token.paddingXXS,
+                    fontSize: token.fontSizeSM,
                     fontWeight: PHI_FONT_WEIGHT_STRONG,
                     letterSpacing: "0.04em",
                     color: token.colorTextTertiary,
@@ -26,8 +26,8 @@ export function PhiDescriptionWidgetClient({ labels, config, }) {
                 }, children: labels.eyebrow })) : null, labels.title || labels.description ? (_jsxs("div", { children: [labels.title ? (_jsx(PhiTypographyControl, { presentation: "title", level: 2, style: { marginBottom: labels.description ? token.paddingXS : 0 }, children: labels.title })) : null, labels.description ? (_jsx(PhiTypographyControl, { presentation: "paragraph", type: config?.tone, style: {
                             marginBottom: 0,
                             color: config?.tone ? undefined : token.colorTextSecondary,
-                            fontSize: token.fontSizeLG,
-                            lineHeight: PHI_LINE_HEIGHT_LG,
+                            fontSize: token.fontSize,
+                            lineHeight: PHI_LINE_HEIGHT_BASE,
                         }, children: labels.description })) : null] })) : null, labels.asideTitle || asideItems.length > 0 ? (_jsxs(PhiFlexControl, { vertical: true, gap: token.paddingMD, style: { width: "100%" }, children: [labels.asideTitle ? (_jsx(PhiTypographyControl, { strong: true, style: {
                             fontSize: token.fontSize,
                             lineHeight: PHI_LINE_HEIGHT_BASE,

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

@@ -39,6 +39,7 @@ export declare const PHI_DESCRIPTION_WIDGET_DEFINITION: {
     } & {
         type: "string" | "url" | "icon";
         emptyValue?: "";
+        placeholder?: string;
     }) | ({
         key: string;
         label: string;
@@ -312,30 +313,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 +325,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,56 +55,12 @@ 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,
                         paddingInline: "var(--ant-padding-sm)",
                         paddingBlock: "var(--ant-padding-xxs)",
+                        fontSize: "var(--ant-font-size-sm)",
                         fontWeight: 600,
                         letterSpacing: "0.04em",
                         color: "var(--ant-color-text-tertiary)",
@@ -120,24 +75,13 @@ export function PhiDescriptionWidgetEditor({ config, onChange, }) {
                             } }), _jsx(PhiTextControl, { presentation: "textarea", value: draft.description, readOnly: !onChange, variant: "borderless", placeholder: "Description", autoSize: { minRows: 2, maxRows: 8 }, onChange: (value) => updateField("description", value ?? ""), onBlur: () => commitField("description"), style: {
                                 ...EDITOR_TEXTAREA_STYLE,
                                 color: "var(--ant-color-text-secondary)",
-                                fontSize: "1.125rem",
-                                lineHeight: 1.6,
+                                fontSize: "var(--ant-font-size)",
+                                lineHeight: 1.5,
                             } })] })) : null, sections.aside ? (_jsxs(PhiFlexControl, { vertical: true, gap: 12, style: { width: "100%" }, children: [_jsx(PhiTextControl, { presentation: "textarea", value: draft.asideTitle, readOnly: !onChange, variant: "borderless", placeholder: "Aside title", autoSize: { minRows: 1, maxRows: 3 }, onChange: (value) => updateField("asideTitle", value ?? ""), onBlur: () => commitField("asideTitle"), style: {
                                 ...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/description/server.js

@@ -64,6 +64,7 @@ export async function PhiDescriptionWidget({ labels, config, runtime, translate,
                     borderRadius: "9999px",
                     paddingInline: PHI_SPACE.sm,
                     paddingBlock: PHI_SPACE.xxs,
+                    fontSize: PHI_FONT_SIZE.sm,
                     fontWeight: 600,
                     letterSpacing: "0.04em",
                     color: PHI_COLOR.textTertiary,
@@ -82,8 +83,8 @@ export async function PhiDescriptionWidget({ labels, config, runtime, translate,
                             margin: 0,
                             marginBottom: 0,
                             color: resolveDescriptionToneColor(config?.tone),
-                            fontSize: PHI_FONT_SIZE.lg,
-                            lineHeight: PHI_LINE_HEIGHT.lg,
+                            fontSize: PHI_FONT_SIZE.base,
+                            lineHeight: PHI_LINE_HEIGHT.base,
                         }, children: description })) : null] })) : null, asideTitle || resolvedAsideItems.length > 0 ? (_jsxs("div", { style: subStackStyle, children: [asideTitle ? (_jsx("span", { style: {
                             display: "block",
                             fontSize: PHI_FONT_SIZE.base,

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

@@ -83,6 +83,7 @@ export declare const PHI_ENTRY_LIST_WIDGET_DEFINITION: {
     } & {
         type: "string" | "url" | "icon";
         emptyValue?: "";
+        placeholder?: string;
     }) | ({
         key: string;
         label: string;
@@ -356,30 +357,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 +369,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;