@phis/ui 0.4.2 → 0.4.3

package/components/widgets/label-types/effects.d.ts

@@ -92,6 +92,7 @@ export type PhiEffectsWidgetLabels = {
     viewport: {
         x: string;
         y: string;
+        z: string;
         translate: string;
         opacity: string;
         rotate: string;

package/components/widgets/label-types/effects.js

@@ -91,6 +91,7 @@ export const PHI_EFFECTS_WIDGET_DEFAULT_LABELS = {
     viewport: {
         x: "X",
         y: "Y",
+        z: "Z",
         translate: "Translate",
         opacity: "Opacity",
         rotate: "Rotate",

package/components/widgets/navigation-descriptor-resolver.server.js

@@ -3,6 +3,7 @@ import { isPhiCmsNavigationOverlayTarget, readPhiCmsNavigationTargetPath, } from
 import { createPhiPresetCmsInstanceId } from "../../types/cms-instance-id";
 import { createGlobalTranslator, createSiteTranslator, PHI_TR_CTX_WEB_UI_LABEL, } from "../../gateway/tr";
 import { resolvePhiCmsNavigationOverlay, resolvePhiCmsActiveNavigationSurfaces, resolvePhiCmsRoutePresetByPageId, } from "../../plugins/runtime-modules/descriptor-compiler";
+import { cache } from "react";
 import { logRuntimeEvent } from "../../net/log";
 import { phiRuntime } from "../../server-helpers/phi-runtime";
 import { getPhiRequestNavigationContext } from "../../server-helpers/request-runtime";
@@ -58,19 +59,30 @@ function mapResolvedNavigationItem(item, translatedLabels) {
             : {}),
     };
 }
+/*
+ * Every active navigation surface of an Area, resolved once per request (audit K15).
+ *
+ * A page carries a navigation Widget per surface -- header, footer, sider -- and each one resolved all of
+ * the Area's surfaces to pick its own, hashing an instance id per item each time. The request's navigation
+ * context and its viewer are one object each per request, so React's `cache` keyed by them keeps the
+ * answer for exactly that request and nothing longer.
+ */
+const resolveActiveNavigationSurfaces = cache((context, area, viewer) => resolvePhiCmsActiveNavigationSurfaces({
+    catalog: context.catalog,
+    area,
+    activeModuleIds: context.activeModuleIds,
+    routeTable: context.routeTable,
+    viewer,
+}));
 export async function resolvePhiDescriptorNavigationItems(runtime, navKey, overlay = null) {
     const normalizedNavKey = navKey.trim().toLowerCase();
     if (!normalizedNavKey.startsWith(`${runtime.area}:`)) {
         return null;
     }
-    const { catalog, activeModuleIds, routeTable } = getPhiRequestNavigationContext(runtime.area);
-    const descriptorSurface = resolvePhiCmsActiveNavigationSurfaces({
-        catalog,
-        area: runtime.area,
-        activeModuleIds,
-        routeTable,
-        viewer: runtime.viewer,
-    }).find((candidate) => candidate.navKey === normalizedNavKey);
+    const navigationContext = getPhiRequestNavigationContext(runtime.area);
+    const { routeTable } = navigationContext;
+    const descriptorSurface = resolveActiveNavigationSurfaces(navigationContext, runtime.area, runtime.viewer)
+        .find((candidate) => candidate.navKey === normalizedNavKey);
     if (!descriptorSurface && !overlay) {
         return null;
     }

package/components/widgets/shared/bullet-list-vocabulary.d.ts

@@ -46,6 +46,15 @@ export declare function readPhiBulletListStyle(value: unknown): PhiBulletListSty
 export declare function resolvePhiBulletListStyle(style: PhiBulletListStyle | null | undefined): PhiResolvedBulletListStyle;
 /** The level an entry at `depth` (1 for the outermost) is drawn at. */
 export declare function resolvePhiBulletListLevel(depth: number): PhiBulletListLevel;
+/**
+ * What an entry says about the thing the list belongs to, where the list is a list of what is in it -- a
+ * plan's features. `included` draws a tick, `excluded` a dash and the entry's words quieter; `neutral`
+ * is the list's own marker, and is what an entry without a state is. Stored only where it is not neutral.
+ */
+export declare const PHI_BULLET_LIST_ENTRY_STATES: readonly ["included", "excluded", "neutral"];
+export type PhiBulletListEntryState = (typeof PHI_BULLET_LIST_ENTRY_STATES)[number];
+/** The state after `state`, in the order a click on a marker steps through them. */
+export declare function nextPhiBulletListEntryState(state: PhiBulletListEntryState | undefined): PhiBulletListEntryState;
 /**
  * One entry of a list written as a list: its text, how deep it stands, and the values its text names.
  *
@@ -58,11 +67,17 @@ export type PhiBulletListEntry = {
     /** 1 for the outermost level, which is what an entry without one stands at. */
     level?: number;
     values?: string[];
+    /** Absent is `neutral`. */
+    state?: Exclude<PhiBulletListEntryState, "neutral">;
 };
 export declare function readPhiBulletListEntries(value: unknown): PhiBulletListEntry[];
 /** An entry of the tree the Control draws: what it shows, and the entries one level below it. */
 export type PhiBulletListNode<Content> = {
     content: Content;
+    /** Absent is `neutral`: the marker of the entry's level. */
+    state?: PhiBulletListEntryState;
+    /** Set by an editor: the marker becomes a button that steps the entry's state on. */
+    onMarkerClick?: () => void;
     children?: PhiBulletListNode<Content>[];
 };
 /**
@@ -72,7 +87,8 @@ export type PhiBulletListNode<Content> = {
  */
 export declare function buildPhiBulletListTree<Entry extends {
     level?: number;
-}, Content>(entries: readonly Entry[], content: (entry: Entry, index: number) => Content): PhiBulletListNode<Content>[];
+    state?: PhiBulletListEntryState;
+}, Content>(entries: readonly Entry[], content: (entry: Entry, index: number) => Content, onMarkerClick?: (entry: Entry, index: number) => void): PhiBulletListNode<Content>[];
 /**
  * The Inspector fields for a list style stored under `key`, under a divider titled `heading`. Every Widget
  * with a list offers these, so a list is set the same way wherever it stands.

package/components/widgets/shared/bullet-list-vocabulary.js

@@ -69,6 +69,17 @@ export function resolvePhiBulletListLevel(depth) {
     const deepest = PHI_BULLET_LIST_LEVELS[PHI_BULLET_LIST_LEVELS.length - 1];
     return Math.min(Math.max(1, Math.trunc(depth) || 1), deepest);
 }
+/**
+ * What an entry says about the thing the list belongs to, where the list is a list of what is in it -- a
+ * plan's features. `included` draws a tick, `excluded` a dash and the entry's words quieter; `neutral`
+ * is the list's own marker, and is what an entry without a state is. Stored only where it is not neutral.
+ */
+export const PHI_BULLET_LIST_ENTRY_STATES = ["included", "excluded", "neutral"];
+/** The state after `state`, in the order a click on a marker steps through them. */
+export function nextPhiBulletListEntryState(state) {
+    const index = PHI_BULLET_LIST_ENTRY_STATES.indexOf(state ?? "neutral");
+    return PHI_BULLET_LIST_ENTRY_STATES[(index + 1) % PHI_BULLET_LIST_ENTRY_STATES.length];
+}
 export function readPhiBulletListEntries(value) {
     if (!Array.isArray(value)) {
         return [];
@@ -82,10 +93,12 @@ export function readPhiBulletListEntries(value) {
         const values = Array.isArray(record.values)
             ? record.values.map((item) => (typeof item === "string" || typeof item === "number" ? String(item) : ""))
             : [];
+        const state = record.state === "included" || record.state === "excluded" ? record.state : undefined;
         return [{
                 text: record.text,
                 ...(level > 1 ? { level } : {}),
                 ...(values.length > 0 ? { values } : {}),
+                ...(state ? { state } : {}),
             }];
     });
 }
@@ -94,14 +107,18 @@ export function readPhiBulletListEntries(value) {
  * more than a level hangs one level below it all the same: a level cannot be skipped in a nested list,
  * and an entry that tried stays with the entry it follows rather than jumping.
  */
-export function buildPhiBulletListTree(entries, content) {
+export function buildPhiBulletListTree(entries, content, onMarkerClick) {
     const root = [];
     const open = [root];
     entries.forEach((entry, index) => {
         const wanted = resolvePhiBulletListLevel(entry.level ?? 1);
         const level = Math.min(wanted, open.length);
         open.length = level;
-        const node = { content: content(entry, index) };
+        const node = {
+            content: content(entry, index),
+            ...(entry.state && entry.state !== "neutral" ? { state: entry.state } : {}),
+            ...(onMarkerClick ? { onMarkerClick: () => onMarkerClick(entry, index) } : {}),
+        };
         open[level - 1].push(node);
         node.children = [];
         open.push(node.children);

package/components/widgets/shared/card-body-client.d.ts

@@ -4,8 +4,8 @@ import type { PhiImagePresentation } from "../../media/image-presentation";
 import type { PhiClientBlockBaseProps } from "../../../types";
 import type { PhiSurface } from "../../../types/surface";
 import type { PhiSignalRouteSet } from "../../../types/signals";
-import type { PhiCardHeadingLevel, PhiCardHoverEffect, PhiCardIconPlacement, PhiCardTextAlign, PhiCardTextSlot, PhiCardVariant, PhiCardWidgetBody } from "./card-vocabulary";
-export type { PhiCardHeadingLevel, PhiCardHoverEffect, PhiCardIconPlacement, PhiCardTextAlign, PhiCardTextSlot, PhiCardVariant, PhiCardWidgetBody, } from "./card-vocabulary";
+import type { PhiCardBillingPeriod, PhiCardHeadingLevel, PhiCardHoverEffect, PhiCardIconPlacement, PhiCardTextAlign, PhiCardTextSlot, PhiCardVariant, PhiCardWidgetBody } from "./card-vocabulary";
+export type { PhiCardBillingPeriod, PhiCardHeadingLevel, PhiCardHoverEffect, PhiCardIconPlacement, PhiCardTextAlign, PhiCardTextSlot, PhiCardVariant, PhiCardWidgetBody, } from "./card-vocabulary";
 export type PhiCardWidgetClientLabels = {
     eyebrow?: string;
     /**
@@ -19,6 +19,13 @@ export type PhiCardWidgetClientLabels = {
     actionLabel?: string;
     /** The figure a `stat` body draws. Data rather than copy, and never translated. */
     value?: string;
+    /** The band at the card's end edge. */
+    badge?: string;
+    /** A `plan` body's prices, data and never translated, and their periods, which are words. */
+    price?: string;
+    pricePeriod?: string;
+    priceYearly?: string;
+    pricePeriodYearly?: string;
 };
 /**
  * What is true about a card's content right now, as opposed to what the card says.
@@ -63,6 +70,10 @@ export type PhiCardWidgetClientConfig = {
     variant?: PhiCardVariant;
     body?: PhiCardWidgetBody;
     highlight?: boolean;
+    /** The badge's ground; absent, the Theme's primary. */
+    badgeColor?: string;
+    /** Which price a `plan` shows until a `billingPeriod` signal says otherwise. Absent is `monthly`. */
+    billingPeriod?: PhiCardBillingPeriod;
     hoverEffect?: PhiCardHoverEffect;
     /** The card's wired signals (`PHI_CARD_SIGNALS`); absent where nothing is wired, as on the canvas. */
     signalRoutes?: PhiSignalRouteSet | null;
@@ -78,10 +89,11 @@ export type PhiCardWidgetAction = {
 export type PhiCardWidgetClientProps = PhiClientBlockBaseProps<PhiCardWidgetClientLabels, PhiCardWidgetClientConfig> & {
     binding?: PhiCardWidgetClientBinding;
     /**
-     * What a `list` body draws, already drawn.
+     * What a `list` body draws, and a `plan` body's features, already drawn.
      *
      * Handed in rather than drawn here: the Card is on Public pages, and a list Control imported by it
-     * would load on every page with a Card. A Dashboard draws its entries and passes them.
+     * would load on every page with a Card. A Dashboard draws its entries and passes them; a plan card's
+     * server half draws its features on the server, and its editor draws them as fields.
      */
     listContent?: ReactNode;
     /**

package/components/widgets/shared/card-body-client.js

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { PhiButtonControl } from "../../controls/phi-button-control";
 import { PhiFlexControl } from "../../controls/phi-flex-control";
 import { PhiImageControl } from "../../controls/phi-image-control";
+import { PhiRibbonControl } from "../../controls/phi-ribbon-control";
 import { PhiSkeletonControl } from "../../controls/phi-skeleton-control";
 import { PhiStatisticControl } from "../../controls/phi-statistic-control";
 import { PhiTypographyControl } from "../../controls/phi-typography-control";
@@ -14,8 +15,9 @@ import { PhiSurfaceGroundLayer } from "../../surface/phi-surface-ground";
 import { PhiSurfaceTone } from "../../surface/phi-surface-tone";
 import { resolvePhiSurfaceStyle } from "../../../helpers/surface-style";
 import { usePhiControlSignalController } from "../client/shared/phi-control-signals";
-import { PHI_SPACE } from "../../../theme/antd-css-var-contract";
-const PHI_CARD_SIGNAL_TEXT_SLOTS = new Set(["eyebrow", "title", "description", "meta", "value"]);
+import { PHI_COLOR, PHI_SPACE } from "../../../theme/antd-css-var-contract";
+import { PHI_CARD_TEXT_SLOTS, readPhiCardBillingPeriod } from "./card-vocabulary";
+const PHI_CARD_SIGNAL_TEXT_SLOTS = new Set(PHI_CARD_TEXT_SLOTS);
 /*
  * What each variant sets, in one row per variant. A further variant -- a featured card -- is a row here
  * and an entry in `PHI_CARD_VARIANTS`.
@@ -71,13 +73,19 @@ const PHI_CARD_HIDDEN_TEXT = {
     whiteSpace: "nowrap",
     border: 0,
 };
-const PHI_CARD_THEME_CORNER = "var(--phi-surface-radius, var(--ant-border-radius-lg))";
+const PHI_CARD_THEME_CORNER = "var(--phi-surface-radius)";
 /** The box a picture is shown in takes the picture's own proportion; 3:2 where nothing is known. */
 function resolveMediaAspectRatio(presentation) {
     return presentation.width && presentation.height
         ? `${presentation.width} / ${presentation.height}`
         : "3 / 2";
 }
+/*
+ * Every colour the card paints is the Theme's variable (`PHI_COLOR`), never a token's resolved value: a
+ * Surface with a `tone` writes the other mode's variables on the card's box, and only a variable reaches
+ * the words inside it. Resolved values were the page's mode written in by hand, and dark words stayed
+ * dark on a photograph darkened for light ones.
+ */
 export function PhiCardWidgetClient({ labels: placedLabels, config, binding, listContent, renderText, }) {
     const { token } = usePhiConfig();
     const [overrides, setOverrides] = useState({});
@@ -94,6 +102,11 @@ export function PhiCardWidgetClient({ labels: placedLabels, config, binding, lis
             else if (capabilityId === "loading" || capabilityId === "highlight") {
                 setOverrides((current) => ({ ...current, [capabilityId]: signal.value === true }));
             }
+            else if (capabilityId === "billingPeriod") {
+                const billingPeriod = readPhiCardBillingPeriod(signal.value);
+                if (billingPeriod)
+                    setOverrides((current) => ({ ...current, billingPeriod }));
+            }
             return true;
         },
     });
@@ -157,15 +170,28 @@ export function PhiCardWidgetClient({ labels: placedLabels, config, binding, lis
     const title = textOf("title");
     const description = textOf("description");
     const meta = textOf("meta");
+    const badge = textOf("badge");
     const eyebrowType = { fontSize: token.fontSizeSM, letterSpacing: "0.04em", textTransform: "uppercase" };
     /* On the picture's corner where the variant puts it there and there is a picture to put it on. */
     const eyebrowOnMedia = metrics.eyebrowOnMedia === true && image != null;
-    const heading = title != null ? (_jsx(PhiTypographyControl, { presentation: "title", level: Number(headingLevel.slice(1)), style: { margin: 0, ...headingType[headingLevel], color: token.colorTextHeading, ...slotWidth }, children: title })) : null;
+    const heading = title != null ? (_jsx(PhiTypographyControl, { presentation: "title", level: Number(headingLevel.slice(1)), style: { margin: 0, ...headingType[headingLevel], color: PHI_COLOR.textHeading, ...slotWidth }, children: title })) : null;
     /*
      * The icon's colours as custom properties, which `.phi-card__icon` paints (`styles/layout.css`): the
      * `icon` hover effect turns them round, and a colour stated inline could not be turned by a rule.
      */
-    const iconColours = (color, background) => ({ "--phi-card-icon-color": color, "--phi-card-icon-background": background });
+    const iconColours = (color, background) => ({
+        "--phi-card-icon-color": color,
+        "--phi-card-icon-background": background,
+        /* The mark's colour once the `icon` effect turns them round: a ground it can be read on. */
+        "--phi-card-icon-hover-color": config?.iconBackground ?? PHI_COLOR.bgContainer,
+    });
+    /*
+     * The corner of the icon's ground: the Theme's Control shape at the large size, scaled from a large
+     * Control's height to the ground's side. So `square` draws a square, `pill` a circle -- half the large
+     * height scaled to the side is half the side -- and the steps between keep their proportion, as a
+     * Segmented's items follow their track. The Theme's plain corner did not: a pill Site drew square marks.
+     */
+    const iconCorner = (side) => `calc(var(--phi-control-radius-lg, ${token.borderRadiusLG}px) * ${side / token.controlHeightLG})`;
     const iconMark = (size, framed) => iconName ? (_jsx("span", { "aria-hidden": "true", className: "phi-card__icon", style: {
             display: "inline-flex",
             flex: "none",
@@ -173,21 +199,37 @@ export function PhiCardWidgetClient({ labels: placedLabels, config, binding, lis
             justifyContent: "center",
             width: framed,
             height: framed,
-            borderRadius: token.borderRadius,
-            ...iconColours(config?.iconColor ?? (highlight ? token.colorPrimary : token.colorTextSecondary), config?.iconBackground ?? token.colorFillQuaternary),
+            borderRadius: iconCorner(framed),
+            ...iconColours(config?.iconColor ?? (highlight ? PHI_COLOR.primary : PHI_COLOR.textSecondary), config?.iconBackground ?? PHI_COLOR.fillQuaternary),
         }, children: _jsx(PhiIcon, { name: iconName, size: size }) })) : null;
     /*
      * A failure stands where the figure would, at body size, because a sentence in figure type is
      * unreadable. A card whose figure is the only thing it has makes the figure the link.
      */
     const valueText = renderText ? renderText("value", labels.value) : null;
-    const figure = valueText != null ? (_jsx("div", { style: { fontSize: token.fontSizeHeading3, color: highlight ? token.colorPrimary : token.colorTextHeading, ...slotWidth }, children: valueText })) : (_jsx(PhiStatisticControl, { value: binding?.error ?? labels.value ?? "", loading: binding?.loading === true || overrides.loading === true, styles: {
+    const figure = valueText != null ? (_jsx("div", { style: { fontSize: token.fontSizeHeading3, color: highlight ? PHI_COLOR.primary : PHI_COLOR.textHeading, ...slotWidth }, children: valueText })) : (_jsx(PhiStatisticControl, { value: binding?.error ?? labels.value ?? "", loading: binding?.loading === true || overrides.loading === true, styles: {
             content: binding?.error
-                ? { color: token.colorError, fontSize: token.fontSize }
-                : { color: highlight ? token.colorPrimary : token.colorTextHeading },
+                ? { color: PHI_COLOR.error, fontSize: token.fontSize }
+                : { color: highlight ? PHI_COLOR.primary : PHI_COLOR.textHeading },
         } }));
     /* A failure stands where the lines would, as it does for a figure; a list still coming is three lines. */
-    const list = binding?.error ? (_jsx(PhiTypographyControl, { style: { color: token.colorError, ...slotWidth }, children: binding.error })) : binding?.loading === true || overrides.loading === true ? (_jsx(PhiSkeletonControl, { lines: 3 })) : listContent ?? null;
+    const list = binding?.error ? (_jsx(PhiTypographyControl, { style: { color: PHI_COLOR.error, ...slotWidth }, children: binding.error })) : binding?.loading === true || overrides.loading === true ? (_jsx(PhiSkeletonControl, { lines: 3 })) : listContent ?? null;
+    /*
+     * A plan's price: the period's own where it states one, the monthly one where it does not, so a switch
+     * to yearly never leaves a card without a price. An editor is asked for the shown period's fields.
+     */
+    const yearly = (overrides.billingPeriod ?? config?.billingPeriod) === "yearly";
+    const showsYearly = yearly && (renderText != null || Boolean(labels.priceYearly));
+    const priceText = body === "plan" ? textOf(showsYearly ? "priceYearly" : "price") : null;
+    const periodText = body === "plan" ? textOf(showsYearly ? "pricePeriodYearly" : "pricePeriod") : null;
+    const plan = body === "plan" ? (_jsxs("div", { style: { display: "grid", gap, justifySelf: "stretch", justifyItems, minWidth: 0 }, children: [priceText != null || periodText != null ? (_jsxs("div", { style: { display: "flex", flexWrap: "wrap", alignItems: "baseline", justifyContent: justify, columnGap: PHI_SPACE.xs, ...slotWidth }, children: [priceText != null ? (_jsx("span", { className: "phi-card__price", style: {
+                            fontSize: token.fontSizeHeading2,
+                            lineHeight: token.lineHeightHeading2,
+                            fontWeight: 600,
+                            fontVariantNumeric: "tabular-nums",
+                            color: highlight ? PHI_COLOR.primary : PHI_COLOR.textHeading,
+                            ...slotWidth,
+                        }, children: priceText })) : null, periodText != null ? (_jsx("span", { style: { color: PHI_COLOR.textSecondary, ...slotWidth }, children: periodText })) : null] })) : null, list != null ? _jsx("div", { style: { justifySelf: "stretch", minWidth: 0, textAlign: "start" }, children: list }) : null] })) : null;
     const headingRow = iconPlacement === "inline" && iconName ? (_jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: justify, gap, ...slotWidth }, children: [iconMark(iconSize, iconSize + 16), heading] })) : heading;
     const media = image ? (_jsxs("div", { className: "phi-card__media", style: {
             position: "relative",
@@ -208,9 +250,9 @@ export function PhiCardWidgetClient({ labels: placedLabels, config, binding, lis
                     justifyContent: "center",
                     width: topIconSize + 24,
                     height: topIconSize + 24,
-                    borderRadius: "50%",
+                    borderRadius: iconCorner(topIconSize + 24),
                     // A ground of its own, so the mark reads on a bright picture and on a dark one alike.
-                    ...iconColours(config?.iconColor ?? (highlight ? token.colorPrimary : token.colorText), config?.iconBackground ?? `color-mix(in srgb, ${token.colorBgContainer} 88%, transparent)`),
+                    ...iconColours(config?.iconColor ?? (highlight ? PHI_COLOR.primary : PHI_COLOR.text), config?.iconBackground ?? `color-mix(in srgb, ${PHI_COLOR.bgContainer} 88%, transparent)`),
                     boxShadow: token.boxShadowTertiary,
                 }, children: _jsx(PhiIcon, { name: iconName, size: topIconSize }) })) : null, eyebrowOnMedia && eyebrow != null ? (_jsx(PhiTypographyControl, { type: "secondary", style: {
                     ...eyebrowType,
@@ -222,8 +264,8 @@ export function PhiCardWidgetClient({ labels: placedLabels, config, binding, lis
                     paddingInline: token.paddingXS,
                     borderRadius: token.borderRadiusSM,
                     // A ground of its own, as the icon has, so the words read on any picture.
-                    background: `color-mix(in srgb, ${token.colorBgContainer} 88%, transparent)`,
-                    color: highlight ? token.colorPrimary : token.colorText,
+                    background: `color-mix(in srgb, ${PHI_COLOR.bgContainer} 88%, transparent)`,
+                    color: highlight ? PHI_COLOR.primary : PHI_COLOR.text,
                 }, children: eyebrow })) : null] })) : null;
     const boxStyle = {
         ...(config?.surface ? {} : { borderRadius: PHI_CARD_THEME_CORNER }),
@@ -235,21 +277,36 @@ export function PhiCardWidgetClient({ labels: placedLabels, config, binding, lis
         minWidth: 0,
         overflow: "hidden",
         textAlign,
-        color: token.colorText,
+        color: PHI_COLOR.text,
         /* The ring's colour; `.phi-card--highlight` draws it (`styles/layout.css`). */
-        ...(highlight ? { "--phi-card-highlight-color": token.colorPrimary } : {}),
+        ...(highlight ? { "--phi-card-highlight-color": PHI_COLOR.primary } : {}),
     };
-    const content = (_jsxs(_Fragment, { children: [media, _jsxs("div", { style: { display: "grid", gap, padding: inset, justifyItems }, children: [iconAtTop && iconName && !image ? (_jsx("div", { style: { justifySelf: markSide === "center" ? "center" : markSide === "end" ? "end" : "start" }, children: iconMark(topIconSize, topIconSize + 24) })) : null, eyebrow != null && !eyebrowOnMedia && !labels.eyebrowEnd ? (_jsx(PhiTypographyControl, { type: "secondary", style: { ...eyebrowType, color: highlight ? token.colorPrimary : token.colorTextTertiary, ...slotWidth }, children: eyebrow })) : null, labels.eyebrowEnd && !eyebrowOnMedia ? (_jsxs(PhiFlexControl, { justify: "space-between", align: "baseline", wrap: true, gap: PHI_SPACE.xs, style: { justifySelf: "stretch", minWidth: 0 }, children: [_jsx(PhiTypographyControl, { type: "secondary", style: { ...eyebrowType, color: highlight ? token.colorPrimary : token.colorTextTertiary }, children: eyebrow ?? "" }), _jsx(PhiTypographyControl, { type: "secondary", style: { ...eyebrowType, color: token.colorTextTertiary }, children: labels.eyebrowEnd })] })) : null, headingRow, body === "stat" ? figure : null, body === "list" && list != null ? (_jsx("div", { style: { justifySelf: "stretch", minWidth: 0 }, children: list })) : null, description != null ? (_jsx(PhiTypographyControl, { presentation: "paragraph", style: {
-                            marginBottom: 0,
-                            color: token.colorTextSecondary,
-                            fontSize: descriptionSize,
-                            ...slotWidth,
-                        }, children: description })) : null, meta != null ? (_jsx(PhiTypographyControl, { type: "secondary", style: { fontSize: token.fontSizeSM, color: token.colorTextTertiary, ...slotWidth }, children: meta })) : null, action ? (_jsx("div", { className: "phi-card__action", children: _jsx(PhiButtonControl, { type: highlight ? "primary" : "default", size: buttonSize, ...(action.href ? { href: action.href, newTab: action.newTab, external: action.external } : {}), label: labels.actionLabel || undefined, ...(labels.actionLabel ? {} : { ariaLabel: action.ariaLabel }), ...(action.icon ? { icon: _jsx(PhiIcon, { name: action.icon, size: "1em" }) } : {}), ...(activates ? { onClick: () => controlSignals.emitCapability("activate", null) } : {}) }) })) : null] }), cardLink] }));
+    /*
+     * A plan's button stands at the card's foot: plans side by side in a row have lists of different
+     * lengths, and their buttons belong on one line. The words keep their grid; the grid and the button
+     * stand in a column that fills the card, and the button takes what is left above it.
+     */
+    const footAction = body === "plan" && action != null;
+    const actionButton = action ? (_jsx("div", { className: "phi-card__action", 
+        /* At the foot, it stands where the words' alignment puts it, as it does among them. */
+        style: footAction ? { marginTop: "auto", alignSelf: textAlign === "center" ? "center" : textAlign === "end" ? "flex-end" : "flex-start" } : undefined, children: _jsx(PhiButtonControl, { type: highlight ? "primary" : "default", size: buttonSize, ...(action.href ? { href: action.href, newTab: action.newTab, external: action.external } : {}), label: labels.actionLabel || undefined, ...(labels.actionLabel ? {} : { ariaLabel: action.ariaLabel }), ...(action.icon ? { icon: _jsx(PhiIcon, { name: action.icon, size: "1em" }) } : {}), ...(activates ? { onClick: () => controlSignals.emitCapability("activate", null) } : {}) }) })) : null;
+    /*
+     * The band in the card's top end corner, floating (`PhiRibbonControl`): the words below it start where
+     * they start in a card without one, so plans side by side keep their headings on one line.
+     */
+    const ribbon = badge != null ? (_jsx(PhiRibbonControl, { color: config?.badgeColor, placement: "corner", ...(renderText ? { style: { pointerEvents: "auto", minWidth: "6em" } } : {}), children: badge })) : null;
+    const words = (_jsxs("div", { style: { display: "grid", gap, padding: footAction ? 0 : inset, justifyItems }, children: [iconAtTop && iconName && !image ? (_jsx("div", { style: { justifySelf: markSide === "center" ? "center" : markSide === "end" ? "end" : "start" }, children: iconMark(topIconSize, topIconSize + 24) })) : null, eyebrow != null && !eyebrowOnMedia && !labels.eyebrowEnd ? (_jsx(PhiTypographyControl, { type: "secondary", style: { ...eyebrowType, color: highlight ? PHI_COLOR.primary : PHI_COLOR.textTertiary, ...slotWidth }, children: eyebrow })) : null, labels.eyebrowEnd && !eyebrowOnMedia ? (_jsxs(PhiFlexControl, { justify: "space-between", align: "baseline", wrap: true, gap: PHI_SPACE.xs, style: { justifySelf: "stretch", minWidth: 0 }, children: [_jsx(PhiTypographyControl, { type: "secondary", style: { ...eyebrowType, color: highlight ? PHI_COLOR.primary : PHI_COLOR.textTertiary }, children: eyebrow ?? "" }), _jsx(PhiTypographyControl, { type: "secondary", style: { ...eyebrowType, color: PHI_COLOR.textTertiary }, children: labels.eyebrowEnd })] })) : null, headingRow, body === "stat" ? figure : null, body === "list" && list != null ? (_jsx("div", { style: { justifySelf: "stretch", minWidth: 0 }, children: list })) : null, description != null ? (_jsx(PhiTypographyControl, { presentation: "paragraph", style: {
+                    marginBottom: 0,
+                    color: PHI_COLOR.textSecondary,
+                    fontSize: descriptionSize,
+                    ...slotWidth,
+                }, children: description })) : null, plan, meta != null ? (_jsx(PhiTypographyControl, { type: "secondary", style: { fontSize: token.fontSizeSM, color: PHI_COLOR.textTertiary, ...slotWidth }, children: meta })) : null, footAction ? null : actionButton] }));
+    const content = (_jsxs(_Fragment, { children: [media, footAction ? (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap, padding: inset, flex: "1 1 auto", minWidth: 0 }, children: [words, actionButton] })) : words, cardLink] }));
     return (_jsxs("article", { className: [
             "phi-card",
             href ? "phi-card--link" : null,
             highlight ? "phi-card--highlight" : null,
             hoverEffect !== "none" ? `phi-card--hover-${hoverEffect}` : null,
             surface.className,
-        ].filter(Boolean).join(" "), "data-phi-card-variant": variant, style: boxStyle, children: [_jsx(PhiSurfaceGroundLayer, { ground: surface.ground, className: "phi-card__ground" }), surface.className ? _jsx(PhiSurfaceTone, { tone: config?.surface?.tone, children: content }) : content] }));
+        ].filter(Boolean).join(" "), "data-phi-card-variant": variant, style: boxStyle, children: [_jsx(PhiSurfaceGroundLayer, { ground: surface.ground, className: "phi-card__ground" }), ribbon, surface.className ? _jsx(PhiSurfaceTone, { tone: config?.surface?.tone, children: content }) : content] }));
 }

package/components/widgets/shared/card-vocabulary.d.ts

@@ -4,12 +4,24 @@
  * `text` is a heading. `stat` is a labelled figure: the label is the heading, so a card that counts
  * something says what it counted in the same place and type a text card says what it is about, and the
  * figure is drawn by the house's one statistic Control. `list` is a heading over a few lines the caller
- * draws and hands in (`listContent`), which only a Dashboard does today.
+ * draws and hands in (`listContent`), which only a Dashboard does today. `plan` is an offer: a price
+ * and what it is paid per, a monthly and a yearly one of each, over a list of what the plan includes and
+ * what it does not (`PhiBulletListEntry.state`). Several plan cards side by side are a Layout's row, and
+ * the recommended one is the card that is `highlight`ed.
  *
  * The body is chosen, never inferred from whether a value happens to have arrived. A card that decided
  * by presence would draw as text and reflow into a statistic the moment its figure landed.
  */
-export type PhiCardWidgetBody = "text" | "stat" | "list";
+export type PhiCardWidgetBody = "text" | "stat" | "list" | "plan";
+/**
+ * Which of a plan card's two prices it shows. A plan states one, the other, or both; one that states
+ * only the monthly price shows it under `yearly` as well, so a period switch on the page never leaves a
+ * card without a price. The page switches every plan at once by sending `billingPeriod`.
+ */
+export declare const PHI_CARD_BILLING_PERIODS: readonly ["monthly", "yearly"];
+export type PhiCardBillingPeriod = (typeof PHI_CARD_BILLING_PERIODS)[number];
+/** A sent period as one of the two; anything else is not a period and changes nothing. */
+export declare function readPhiCardBillingPeriod(value: unknown): PhiCardBillingPeriod | undefined;
 /**
  * The tag of the card's heading, and the step it is drawn at.
  *
@@ -48,6 +60,11 @@ export type PhiCardHoverEffect = (typeof PHI_CARD_HOVER_EFFECTS)[number];
  */
 export declare const PHI_CARD_VARIANTS: readonly ["default", "compact", "center"];
 export type PhiCardVariant = (typeof PHI_CARD_VARIANTS)[number];
-/** The words a card shows, each in its own place; what an editor can put a field in. */
-export declare const PHI_CARD_TEXT_SLOTS: readonly ["eyebrow", "title", "description", "meta", "value"];
+/**
+ * The words a card shows, each in its own place; what an editor can put a field in, and what a signal can
+ * write. `badge` is the band at the card's end edge, any body may carry one. The prices are figures like
+ * `value` and are never translated: a price that differs by country is sent by a Controller or comes
+ * from a Provider's row, not from a translator. The periods (`/ month`) are words and are.
+ */
+export declare const PHI_CARD_TEXT_SLOTS: readonly ["eyebrow", "title", "description", "meta", "value", "badge", "price", "pricePeriod", "priceYearly", "pricePeriodYearly"];
 export type PhiCardTextSlot = (typeof PHI_CARD_TEXT_SLOTS)[number];

package/components/widgets/shared/card-vocabulary.js

@@ -2,6 +2,16 @@
  * The Card Widget's words, apart from its Client half: the Widget's definition is read on the server, and
  * a value imported from the Client file would make that file a client reference of every route.
  */
+/**
+ * Which of a plan card's two prices it shows. A plan states one, the other, or both; one that states
+ * only the monthly price shows it under `yearly` as well, so a period switch on the page never leaves a
+ * card without a price. The page switches every plan at once by sending `billingPeriod`.
+ */
+export const PHI_CARD_BILLING_PERIODS = ["monthly", "yearly"];
+/** A sent period as one of the two; anything else is not a period and changes nothing. */
+export function readPhiCardBillingPeriod(value) {
+    return PHI_CARD_BILLING_PERIODS.includes(value) ? value : undefined;
+}
 /**
  * The tag of the card's heading, and the step it is drawn at.
  *
@@ -35,5 +45,21 @@ export const PHI_CARD_HOVER_EFFECTS = ["none", "lift", "zoom", "icon"];
  * not another branch in every size the card draws. `default` is what a card without one is.
  */
 export const PHI_CARD_VARIANTS = ["default", "compact", "center"];
-/** The words a card shows, each in its own place; what an editor can put a field in. */
-export const PHI_CARD_TEXT_SLOTS = ["eyebrow", "title", "description", "meta", "value"];
+/**
+ * The words a card shows, each in its own place; what an editor can put a field in, and what a signal can
+ * write. `badge` is the band at the card's end edge, any body may carry one. The prices are figures like
+ * `value` and are never translated: a price that differs by country is sent by a Controller or comes
+ * from a Provider's row, not from a translator. The periods (`/ month`) are words and are.
+ */
+export const PHI_CARD_TEXT_SLOTS = [
+    "eyebrow",
+    "title",
+    "description",
+    "meta",
+    "value",
+    "badge",
+    "price",
+    "pricePeriod",
+    "priceYearly",
+    "pricePeriodYearly",
+];

package/components/widgets/signals/control-signal-capabilities.d.ts

@@ -328,21 +328,3 @@ export declare const PHI_MULTI_SELECT_CONTROL_SIGNALS: {
         valueType: "none";
     })[];
 };
-export declare const PHI_DRAG_SOURCE_CONTROL_SIGNALS: {
-    emits: ({
-        id: string;
-        action: "start";
-        valueType: "json";
-        valueSchema: `${string}/signals/${string}`;
-    } | {
-        id: string;
-        action: "change";
-        valueType: "json";
-        valueSchema: `${string}/signals/${string}`;
-    } | {
-        id: string;
-        action: "stop";
-        valueType: "json";
-        valueSchema: `${string}/signals/${string}`;
-    })[];
-};

package/components/widgets/signals/control-signal-capabilities.js

@@ -89,6 +89,16 @@ export const PHI_CARD_SIGNALS = {
         { id: "description", channel: "description", action: "change", valueType: "string" },
         { id: "meta", channel: "meta", action: "change", valueType: "string" },
         { id: "highlight", channel: "highlight", action: "change", valueType: "boolean" },
+        { id: "badge", channel: "badge", action: "change", valueType: "string" },
+        /*
+         * A plan's prices, for a Controller that knows them better than the page does -- by the reader's
+         * country, say -- and the period a switch on the page shows (`monthly` or `yearly`).
+         */
+        { id: "price", channel: "price", action: "change", valueType: "string" },
+        { id: "pricePeriod", channel: "pricePeriod", action: "change", valueType: "string" },
+        { id: "priceYearly", channel: "priceYearly", action: "change", valueType: "string" },
+        { id: "pricePeriodYearly", channel: "pricePeriodYearly", action: "change", valueType: "string" },
+        { id: "billingPeriod", channel: "billingPeriod", action: "change", valueType: "string" },
     ],
 };
 export const PHI_TEXT_CONTROL_SIGNALS = {
@@ -227,25 +237,3 @@ export const PHI_MULTI_SELECT_CONTROL_SIGNALS = {
         { ...PHI_CONTROL_CLEAR_SIGNAL, channel: "selection" },
     ],
 };
-export const PHI_DRAG_SOURCE_CONTROL_SIGNALS = {
-    emits: [
-        {
-            id: "dragStart",
-            action: "start",
-            valueType: "json",
-            valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.dragDrop,
-        },
-        {
-            id: "dragChange",
-            action: "change",
-            valueType: "json",
-            valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.dragDrop,
-        },
-        {
-            id: "dragEnd",
-            action: "stop",
-            valueType: "json",
-            valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.dragDrop,
-        },
-    ],
-};

package/components/workspace/catalog-store.d.ts

@@ -1,9 +1,10 @@
 import type { PhiWorkspaceCatalogState } from "./catalog-state";
 export type { PhiWorkspaceCatalogArea, PhiWorkspaceCatalogState } from "./catalog-state";
 /**
- * One scope per workspace host. Both the Builder and, later, the Editor write into "public".
+ * One scope per workspace host, not one per Area. Both the Builder and, later, the Editor write into it;
+ * which Area is open is `area` inside it, and what belongs to an Area is keyed by Area there.
  */
 export declare const PHI_WORKSPACE_CATALOG_SCOPE = "public";
 export declare const phiWorkspaceCatalogStore: import("../state/plugin-state-store").PhiPluginStateStore<PhiWorkspaceCatalogState>;
-export declare function usePhiWorkspaceCatalogValue<TSelected>(scopeKey: string, selector: (state: PhiWorkspaceCatalogState) => TSelected): TSelected;
-export declare function getPhiWorkspaceCatalogSnapshot(scopeKey: string): PhiWorkspaceCatalogState;
+export declare function usePhiWorkspaceCatalogValue<TSelected>(selector: (state: PhiWorkspaceCatalogState) => TSelected): TSelected;
+export declare function getPhiWorkspaceCatalogSnapshot(): PhiWorkspaceCatalogState;

package/components/workspace/catalog-store.js

@@ -2,7 +2,8 @@
 import { createEmptyPhiBuilderModulePresetPagesByArea } from "../../helpers/cms-page-catalog";
 import { createPhiPluginStateStore } from "../state/plugin-state-store";
 /**
- * One scope per workspace host. Both the Builder and, later, the Editor write into "public".
+ * One scope per workspace host, not one per Area. Both the Builder and, later, the Editor write into it;
+ * which Area is open is `area` inside it, and what belongs to an Area is keyed by Area there.
  */
 export const PHI_WORKSPACE_CATALOG_SCOPE = "public";
 function createDefaultWorkspaceCatalogState(scopeKey) {
@@ -25,9 +26,9 @@ function createDefaultWorkspaceCatalogState(scopeKey) {
     };
 }
 export const phiWorkspaceCatalogStore = createPhiPluginStateStore("@phis/ui/workspace-catalog", createDefaultWorkspaceCatalogState);
-export function usePhiWorkspaceCatalogValue(scopeKey, selector) {
-    return phiWorkspaceCatalogStore.useStoreSelector(scopeKey, selector);
+export function usePhiWorkspaceCatalogValue(selector) {
+    return phiWorkspaceCatalogStore.useStoreSelector(PHI_WORKSPACE_CATALOG_SCOPE, selector);
 }
-export function getPhiWorkspaceCatalogSnapshot(scopeKey) {
-    return phiWorkspaceCatalogStore.getSnapshot(scopeKey);
+export function getPhiWorkspaceCatalogSnapshot() {
+    return phiWorkspaceCatalogStore.getSnapshot(PHI_WORKSPACE_CATALOG_SCOPE);
 }

package/gateway/dashboard-cards-route.js

@@ -79,6 +79,7 @@ async function resolveDashboardCardScope({ bridge, area, locale, path, cookieHea
         locale,
         area,
         viewer: requestContext.viewer,
+        runtimeModuleCatalog: bridge.runtimeModuleCatalog,
     };
     /*
      * A route handler has no request runtime bound, and the label sets a card reads for its own title