@phis/ui 0.1.0 → 0.2.0

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

@@ -1,28 +1,43 @@
 import { resolvePhiCmsWidgetPluginKey } from "../../../../../constants/cms-widget-types";
 import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
-import { readBoolean, readNumber, readRenderableBlockConfig, readString, } from "../../../../../components/widgets/config/parser-primitives";
+import { readRenderableBlockConfig, } from "../../../../../components/widgets/config/parser-primitives";
+import { readPhiWidgetFontFamily } from "../../../../../components/widgets/helpers/font-family";
+import { readPhiWidgetFontSize } from "../../../../../components/widgets/helpers/font-size";
+const PHI_BRAND_WIDGET_MODE_OPTIONS = [
+    { value: "lockup", label: "Logo and wordmark" },
+    { value: "logo", label: "Logo only" },
+    { value: "wordmark", label: "Wordmark only" },
+    { value: "slogan", label: "Slogan" },
+    { value: "location", label: "Location" },
+];
+function readBrandWidgetMode(value) {
+    return value === "lockup"
+        || value === "logo"
+        || value === "wordmark"
+        || value === "slogan"
+        || value === "location"
+        ? value
+        : undefined;
+}
 export function parsePhiCmsBrandWidgetConfig(config) {
     return {
         ...readRenderableBlockConfig(config),
-        fallbackTitle: readString(config.fallbackTitle),
-        fallbackEyebrow: readString(config.fallbackEyebrow),
-        showLogo: readBoolean(config.showLogo) ?? true,
-        logoYOffset: readNumber(config.logoYOffset) ?? 0,
+        mode: readBrandWidgetMode(config.mode),
+        fontFamily: readPhiWidgetFontFamily(config.fontFamily),
+        fontSize: readPhiWidgetFontSize(config.fontSize),
     };
 }
 export const PHI_BRAND_WIDGET_DEFINITION = {
     kind: "widget",
     pluginKey: resolvePhiCmsWidgetPluginKey("brand"),
     typeKey: "brand",
+    slotSizePolicy: "intrinsic",
     title: "Brand",
     category: "content",
     description: "Site brand mark and wordmark.",
     iconFamily: "brand",
     fields: [
-        { key: "fallbackTitle", type: "string", label: "Fallback Title" },
-        { key: "fallbackEyebrow", type: "string", label: "Fallback Eyebrow" },
-        { key: "showLogo", type: "boolean", label: "Show Logo" },
-        { key: "logoYOffset", type: "number", label: "Logo Y Offset" },
+        { key: "mode", type: "choice", label: "Shows", options: PHI_BRAND_WIDGET_MODE_OPTIONS },
     ],
     parseConfig: parsePhiCmsBrandWidgetConfig,
 };

package/plugins/runtime-modules/core/widgets/brand/mode.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Which part of the Brand this Widget stands for, and the only thing it is asked.
+ *
+ * What the Brand *is* -- the Logo, the Wordmark's parts and their type, the eyebrow, the two lines --
+ * is stated once in the Theme (`PhiSiteThemeBrand`). A placement never restates it; it picks which part
+ * of it to draw here, and reads the rest. That is why there is one field and no overrides beside it.
+ *
+ * `lockup` is the Logo and the Wordmark set together, which is what the trade calls that pairing. It is
+ * deliberately not named `mark`: a mark is the picture and a wordmark is the name in type, so a `mark`
+ * that meant "both" left `mark` and `wordmark` reading like a typo for one another.
+ *
+ * The lines are modes rather than a second field. They were `mode: "line"` plus `line: "slogan"`, which
+ * is one question asked twice -- and a Widget that had answered only the first was guessed at.
+ *
+ * The one thing beside the mode is the type of the two lines, and it is not an override of the Brand: the
+ * Brand writes the sentence, the placement says how large it stands here, because the same slogan sits in
+ * a header strip and in a footer column. It is asked on the scaffold's toolbar, where a Simple Text is
+ * asked the same thing, and nowhere else -- the mark modes take their type from the Theme's Wordmark.
+ */
+export type PhiBrandWidgetMode = "lockup" | "logo" | "wordmark" | "slogan" | "location";
+/** The modes that draw one of the Brand's sentences rather than the Brand itself. */
+export type PhiBrandWidgetLineMode = Extract<PhiBrandWidgetMode, "slogan" | "location">;
+export declare function isPhiBrandWidgetLineMode(mode: PhiBrandWidgetMode | undefined): mode is PhiBrandWidgetLineMode;

package/plugins/runtime-modules/core/widgets/brand/mode.js

@@ -0,0 +1,7 @@
+/*
+ * The Brand Widget's modes, apart from `config.ts` because the live client asks which one it is on every
+ * render, and the config module is the parser with the block defaults merge behind it.
+ */
+export function isPhiBrandWidgetLineMode(mode) {
+    return mode === "slogan" || mode === "location";
+}

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

@@ -1,9 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { resolvePhiBrandWordmarkText } from "../../../../../helpers/brand-wordmark";
 import { PhiBrandWidget } from "./server";
 import { PHI_BRAND_WIDGET_DEFINITION, PHI_BRAND_WIDGET_PLUGIN_TYPE, } from "./config";
+/*
+ * What the Widget says when the Theme's Wordmark says nothing: this Site's name, read at render.
+ *
+ * It is resolved here rather than written into a Preset, because a Preset is followed by every Site
+ * that adopts it and a name written there is one Site's. Filling it in made the Widget carry whatever
+ * the Site happened to be called the moment its Preset was taken over -- a name that then stayed put
+ * while the Site's own changed underneath it. `resolvePhiBrandWordmarkText` is the same order the rest
+ * of the frame reads it in: the Theme's Wordmark, then the Site's name, then its key.
+ */
 export const PHI_BRAND_WIDGET_PLUGIN = {
     ...PHI_BRAND_WIDGET_DEFINITION,
-    render: ({ widget, config }) => (_jsx(PhiBrandWidget, { fallbackTitle: config.fallbackTitle, fallbackEyebrow: config.fallbackEyebrow, showLogo: config.showLogo, logoYOffset: config.logoYOffset }, `widget-${widget.id}`)),
-    renderPreview: ({ widget, config }) => (_jsx(PhiBrandWidget, { fallbackTitle: config.fallbackTitle, fallbackEyebrow: config.fallbackEyebrow, showLogo: config.showLogo, logoYOffset: config.logoYOffset, interactive: false }, `widget-${widget.id}`)),
+    render: ({ widget, config, runtime }) => (_jsx(PhiBrandWidget, { fallbackTitle: resolvePhiBrandWordmarkText(runtime), mode: config.mode, fontFamily: config.fontFamily, fontSize: config.fontSize }, `widget-${widget.id}`)),
+    renderPreview: ({ widget, config, runtime }) => (_jsx(PhiBrandWidget, { fallbackTitle: resolvePhiBrandWordmarkText(runtime), mode: config.mode, fontFamily: config.fontFamily, fontSize: config.fontSize, interactive: false }, `widget-${widget.id}`)),
 };
 export { PHI_BRAND_WIDGET_PLUGIN_TYPE };

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

@@ -1,6 +1,3 @@
-import type { PhiBrandWidgetClientProps } from "./client";
-export type PhiBrandWidgetProps = Pick<PhiBrandWidgetClientProps, "fallbackTitle" | "fallbackEyebrow" | "interactive"> & {
-    showLogo?: boolean;
-    logoYOffset?: number;
-};
-export declare function PhiBrandWidget({ fallbackTitle, fallbackEyebrow, interactive, showLogo, logoYOffset, }: PhiBrandWidgetProps): import("react").JSX.Element;
+import type { PhiBrandWidgetClientProps, PhiBrandWidgetConfig } from "./client";
+export type PhiBrandWidgetProps = Pick<PhiBrandWidgetClientProps, "fallbackTitle" | "interactive"> & PhiBrandWidgetConfig;
+export declare function PhiBrandWidget({ fallbackTitle, interactive, mode, fontFamily, fontSize, }: PhiBrandWidgetProps): import("react").JSX.Element;

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

@@ -5,15 +5,11 @@ import { PhiRuntimeModuleRenderClientHost } from "../../../../../components/runt
  * The Brand itself is not read here. It comes from the root on the Client (`usePhiSiteBrand`), which
  * holds it with the Theme Set's Logo folded in and follows a live Theme draft.
  */
-export function PhiBrandWidget({ fallbackTitle, fallbackEyebrow, interactive, showLogo, logoYOffset, }) {
-    const config = {
-        showLogo,
-        logoYOffset,
-    };
+export function PhiBrandWidget({ fallbackTitle, interactive, mode, fontFamily, fontSize, }) {
+    const config = { mode, fontFamily, fontSize };
     return (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiCmsWidgetType.Brand, componentProps: {
             config,
             fallbackTitle,
-            fallbackEyebrow,
             interactive,
         } }));
 }

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

@@ -1,7 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Breadcrumb, Flex } from "antd";
+import { Breadcrumb } from "antd";
 import { usePathname } from "next/navigation";
+import { PhiFlexControl } from "../../../../../components/controls/phi-flex-control";
 export function PhiBreadcrumbWidget({ config, runtime }) {
     const pathname = usePathname();
     const breadcrumbItems = [
@@ -9,5 +10,5 @@ export function PhiBreadcrumbWidget({ config, runtime }) {
         config?.showArea === false ? null : { title: runtime?.area ?? "area" },
         config?.showPath === false ? null : { title: config?.pathLabel?.trim() || pathname || "/" },
     ].filter(Boolean);
-    return (_jsx(Flex, { align: config?.align ?? "center", justify: config?.justify ?? "flex-start", gap: 12, wrap: "wrap", children: _jsx(Breadcrumb, { items: breadcrumbItems, separator: config?.separator }) }));
+    return (_jsx(PhiFlexControl, { align: config?.align ?? "center", justify: config?.justify ?? "flex-start", gap: 12, wrap: "wrap", children: _jsx(Breadcrumb, { items: breadcrumbItems, separator: config?.separator }) }));
 }

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

@@ -13,6 +13,7 @@ export declare const PHI_BREADCRUMB_WIDGET_DEFINITION: {
     kind: "widget";
     pluginKey: string;
     typeKey: string;
+    slotSizePolicy: "intrinsic";
     title: string;
     description: string;
     category: "navigation";

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

@@ -7,6 +7,7 @@ export const PHI_BREADCRUMB_WIDGET_DEFINITION = {
     kind: "widget",
     pluginKey: resolvePhiCmsWidgetPluginKey("breadcrumb"),
     typeKey: "breadcrumb",
+    slotSizePolicy: "intrinsic",
     title: "Breadcrumb",
     description: "Generic breadcrumb trail for page and header contexts.",
     category: "navigation",

package/plugins/runtime-modules/core/widgets/button/client.d.ts

@@ -1,9 +1,22 @@
 import type { PhiButtonWidgetConfig } from "./config";
 import type { PhiCommonControlLabels } from "../../../../../components/widgets/label-types/common-controls";
-export declare function PhiButtonWidget({ config, labels, disabled, signalsEnabled, onClick, }: {
+export type PhiButtonWidgetLink = {
+    href: string;
+    newTab: boolean;
+    external: boolean;
+};
+export declare function PhiButtonWidget({ config, labels, link, disabled, signalsEnabled, onClick, }: {
     config?: PhiButtonWidgetConfig | null;
     blockId?: string | number | null;
     labels?: PhiCommonControlLabels | null;
+    /**
+     * Where the target leads, resolved before this ever ran.
+     *
+     * A Page reference means nothing in a browser: only the server knows which address it answers on now,
+     * and only it resolved every target on the page in one go. Absent means either no target or one that
+     * did not resolve, and both draw the same thing -- a Button that is not a link.
+     */
+    link?: PhiButtonWidgetLink | null;
     disabled?: boolean;
     signalsEnabled?: boolean;
     onClick?: () => void;

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

@@ -1,16 +1,18 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { resolvePhiButtonVariantType } from "../../../../../components/widgets/config/button-variant";
 import { usePhiControlSignalController } from "../../../../../components/widgets/client/shared/phi-control-signals";
 import { usePhiControlBadgeController } from "../../../../../components/widgets/client/shared/phi-control-badge";
 import { resolvePhiButtonIcon } from "../../../../../components/widgets/client/shared/phi-button-icons";
 import { resolvePhiCommonControlAction } from "../../../../../components/widgets/client/shared/phi-common-controls";
 import { PhiButtonControl } from "../../../../../components/controls/phi-button-control";
 import { findPhiSignalRoutesByCapabilityId } from "../../../../../types/signals";
-export function PhiButtonWidget({ config, labels, disabled, signalsEnabled = true, onClick, }) {
+export function PhiButtonWidget({ config, labels, link, disabled, signalsEnabled = true, onClick, }) {
     const signalValue = config?.value ?? config?.key ?? "click";
     const action = resolvePhiCommonControlAction(labels, config?.actionKey ?? config?.value);
     const icon = resolvePhiButtonIcon(config?.icon ?? action?.icon);
     const controlSignals = usePhiControlSignalController({
+        /* Not the parser's default repeated: `config` itself is optional here, and this is that case. */
         key: config?.key ?? "button",
         signalRoutes: config?.signalRoutes,
         typeKey: "button",
@@ -25,7 +27,13 @@ export function PhiButtonWidget({ config, labels, disabled, signalsEnabled = tru
         signalRoutes: config?.signalRoutes,
         signalsEnabled,
     });
-    const resolvedDisabled = disabled || controlSignals.disabled;
+    /*
+     * Read-only shows. `publish` already refused to emit for it, so the Button sat there looking alive and
+     * doing nothing when clicked, with no way to tell it from one that simply had nothing wired. A Button
+     * is not a value somebody reads without editing it -- there is nothing for read-only to mean here that
+     * disabled does not already say, and saying it visibly is the whole difference.
+     */
+    const resolvedDisabled = disabled || controlSignals.disabled || controlSignals.readOnly;
     function publish() {
         if (controlSignals.readOnly) {
             return;
@@ -38,14 +46,16 @@ export function PhiButtonWidget({ config, labels, disabled, signalsEnabled = tru
          * A wired `navigate` carries the target; the ordinary capability carries whatever this Button is for.
          * Both can be wired at once -- a Button that records something and then moves on.
          */
-        if (config?.href && findPhiSignalRoutesByCapabilityId(config.signalRoutes?.emits, "navigate").length > 0) {
-            controlSignals.emitCapability("navigate", { path: config.href });
+        if (link && findPhiSignalRoutesByCapabilityId(config?.signalRoutes?.emits, "navigate").length > 0) {
+            controlSignals.emitCapability("navigate", { path: link.href });
         }
         controlSignals.emitCapability(config?.signalRoutes?.emits?.[0]?.capabilityId ?? "activate", signalValue);
     }
     const label = config?.label ?? action?.label ?? controlSignals.key;
     const tooltip = config?.tooltip ?? action?.tooltip;
-    return (_jsx(PhiButtonControl, { label: label, ...(config?.href && !config.signalRoutes?.emits?.length ? { href: config.href } : {}), tooltip: tooltip, type: config?.buttonType ?? action?.buttonType ?? "default", danger: config?.danger === true || action?.danger === true, disabled: resolvedDisabled, size: config?.controlSize, icon: icon, onClick: publish, badge: {
+    return (_jsx(PhiButtonControl, { label: label, ...(link && !config?.signalRoutes?.emits?.length
+            ? { href: link.href, newTab: link.newTab, external: link.external }
+            : {}), tooltip: tooltip, type: resolvePhiButtonVariantType(config?.variant ?? action?.variant), danger: config?.danger === true || action?.danger === true, disabled: resolvedDisabled, size: config?.controlSize, icon: icon, onClick: publish, badge: {
             enabled: badge.enabled,
             value: badge.visible ? badge.value : 0,
             color: badge.color,

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

@@ -1,21 +1,28 @@
+import { type PhiButtonVariant } from "../../../../../components/widgets/config/button-variant";
 import { type PhiCommonControlActionKey } from "../../../../../components/widgets/label-types/common-controls";
-import { type PhiButtonType } from "../../../../../components/controls/phi-button-types";
+import { type PhiLinkTarget } from "../../../../../types/references";
+import { type PhiCmsWidgetConfigBase } from "../../../../../components/widgets/config/parser-primitives";
 import { type PhiControlBadgeConfig, type PhiControlConfig } from "../../../../../components/widgets/config/control-signal-config";
-export type PhiButtonWidgetConfig = PhiControlBadgeConfig & PhiControlConfig & {
+export type PhiButtonWidgetConfig = PhiCmsWidgetConfigBase & PhiControlBadgeConfig & PhiControlConfig & {
     actionKey?: PhiCommonControlActionKey;
     label?: string;
     tooltip?: string;
     icon?: string;
     value?: string;
-    buttonType?: PhiButtonType;
+    variant?: PhiButtonVariant;
     /**
      * Where it leads, for a Button that is a way somewhere rather than a command.
      *
      * The Control already renders a real anchor for this -- it works before hydration and on a page that
      * mounts no Controller. A Button with a target emits nothing and needs no route: "Create account"
      * beside a sign-in form is a link, and making it a signal would only add a wire that can break.
+     *
+     * A structured target rather than an href, so an internal Page is named by identity and survives its
+     * path moving. `REFERENCES.md` requires that of every Control that selects a Page; this Widget offered
+     * a text box instead, which meant it offered no way to select one at all, and the paths authors typed
+     * went stale the moment the Page moved.
      */
-    href?: string;
+    linkTarget?: PhiLinkTarget;
     danger?: boolean;
 };
 export declare function parsePhiButtonWidgetConfig(config: Record<string, unknown>): PhiButtonWidgetConfig;
@@ -27,6 +34,7 @@ export declare const PHI_BUTTON_WIDGET_DEFINITION: {
     description: string;
     category: "form";
     iconFamily: string;
+    translatesOwnText: true;
     slotSizePolicy: "intrinsic";
     runtimeSignals: {
         emits: ({
@@ -95,23 +103,69 @@ export declare const PHI_BUTTON_WIDGET_DEFINITION: {
         description?: undefined;
     } | {
         key: string;
-        type: "string";
+        type: "choice";
+        label: string;
+        emptyOption: {
+            value: string;
+            label: string;
+        };
+        emptyValue: undefined;
+        options: {
+            value: PhiCommonControlActionKey;
+            label: string;
+        }[];
+        editorPlacement?: undefined;
+    } | {
+        key: string;
+        type: "link-target";
         label: string;
+        emptyOption?: undefined;
+        emptyValue?: undefined;
+        options?: undefined;
         editorPlacement?: undefined;
     } | {
         key: string;
-        type: "url";
+        type: "string";
         label: string;
+        emptyOption?: undefined;
+        emptyValue?: undefined;
+        options?: undefined;
         editorPlacement?: undefined;
     } | {
         key: string;
         type: "icon";
         label: string;
         editorPlacement: "toolbar";
+        emptyOption?: undefined;
+        emptyValue?: undefined;
+        options?: undefined;
+    } | {
+        key: string;
+        type: "choice";
+        label: string;
+        options: ({
+            readonly value: "normal";
+            readonly label: "Normal";
+        } | {
+            readonly value: "primary";
+            readonly label: "Primary";
+        } | {
+            readonly value: "dashed";
+            readonly label: "Dashed";
+        } | {
+            readonly value: "subtle";
+            readonly label: "Subtle";
+        } | {
+            readonly value: "link";
+            readonly label: "Link";
+        })[];
+        emptyOption?: undefined;
+        emptyValue?: undefined;
+        editorPlacement?: undefined;
     })[];
     defaultConfig: {
         key: string;
-        buttonType: "default";
+        variant: "normal";
         badgeEnabled: false;
     };
     parseConfig: typeof parsePhiButtonWidgetConfig;

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

@@ -1,29 +1,36 @@
 import { resolvePhiCmsWidgetPluginKey } from "../../../../../constants/cms-widget-types";
+import { PHI_BUTTON_VARIANT_FIELD_OPTIONS, readPhiButtonVariant, } from "../../../../../components/widgets/config/button-variant";
 import { PHI_SIGNAL_VALUE_SCHEMAS } from "../../../../../types/signals";
-import { readPhiCommonControlActionKey } from "../../../../../components/widgets/label-types/common-controls";
+import { PHI_COMMON_CONTROL_DEFAULT_LABELS, readPhiCommonControlActionKey, } from "../../../../../components/widgets/label-types/common-controls";
+import { readPhiLinkTarget } from "../../../../../types/references";
 import { PHI_BUTTON_CONTROL_SIGNALS } from "../../../../../components/widgets/signals/control-signal-capabilities";
-import { readBoolean, readString } from "../../../../../components/widgets/config/parser-primitives";
-import { readPhiButtonType } from "../../../../../components/controls/phi-button-types";
+import { readBoolean, readRenderableBlockConfig, readString, } from "../../../../../components/widgets/config/parser-primitives";
 import { PHI_CONTROL_BADGE_FIELDS, PHI_CONTROL_PRESENTATION_FIELDS, PHI_CONTROL_STATE_FIELDS, parsePhiControlBadgeConfig, parsePhiControlConfig, } from "../../../../../components/widgets/config/control-signal-config";
 export function parsePhiButtonWidgetConfig(config) {
     const controlState = parsePhiControlConfig(config, {
         key: "button",
     });
     return {
+        ...readRenderableBlockConfig(config),
         ...controlState,
         ...parsePhiControlBadgeConfig(config),
-        actionKey: readPhiCommonControlActionKey(readString(config.actionKey) ?? readString(config.action)) ?? undefined,
+        actionKey: readPhiCommonControlActionKey(readString(config.actionKey)) ?? undefined,
         label: readString(config.label),
         tooltip: readString(config.tooltip),
         icon: readString(config.icon),
         value: readString(config.value),
-        buttonType: readString(config.buttonType) == null
-            ? undefined
-            : readPhiButtonType(config.buttonType),
-        href: readString(config.href),
+        variant: readPhiButtonVariant(config.variant),
+        linkTarget: readPhiLinkTarget(config.linkTarget) ?? undefined,
         danger: readBoolean(config.danger),
     };
 }
+/*
+ * The action keys as a list to pick from, read off the label set that defines them rather than typed a
+ * second time here. It was a free-text field over a closed enum, so a typo silently became "no action":
+ * the Button kept its own label and lost the icon, the tooltip, the type and the danger colour the key
+ * would have brought, with nothing anywhere saying why.
+ */
+const PHI_BUTTON_ACTION_KEY_OPTIONS = Object.keys(PHI_COMMON_CONTROL_DEFAULT_LABELS.actions).map((value) => ({ value, label: PHI_COMMON_CONTROL_DEFAULT_LABELS.actions[value].label }));
 export const PHI_BUTTON_WIDGET_DEFINITION = {
     kind: "widget",
     pluginKey: resolvePhiCmsWidgetPluginKey("button"),
@@ -32,6 +39,7 @@ export const PHI_BUTTON_WIDGET_DEFINITION = {
     description: "Reusable command button that emits a configured runtime signal.",
     category: "form",
     iconFamily: "form",
+    translatesOwnText: true,
     slotSizePolicy: "intrinsic",
     runtimeSignals: {
         ...PHI_BUTTON_CONTROL_SIGNALS,
@@ -54,23 +62,24 @@ export const PHI_BUTTON_WIDGET_DEFINITION = {
         ],
     },
     fields: [
-        { key: "actionKey", type: "string", label: "Action Key" },
-        { key: "href", type: "url", label: "Link target" },
+        {
+            key: "actionKey",
+            type: "choice",
+            label: "Action Key",
+            emptyOption: { value: "", label: "None" },
+            emptyValue: undefined,
+            options: PHI_BUTTON_ACTION_KEY_OPTIONS,
+        },
+        { key: "linkTarget", type: "link-target", label: "Link target" },
         { key: "label", type: "string", label: "Label" },
         { key: "tooltip", type: "string", label: "Tooltip" },
         { key: "icon", type: "icon", label: "Icon", editorPlacement: "toolbar" },
         { key: "value", type: "string", label: "Signal Value" },
         {
-            key: "buttonType",
+            key: "variant",
             type: "choice",
-            label: "Button Type",
-            options: [
-                { value: "default", label: "Default" },
-                { value: "primary", label: "Primary" },
-                { value: "dashed", label: "Dashed" },
-                { value: "text", label: "Text" },
-                { value: "link", label: "Link" },
-            ],
+            label: "Variant",
+            options: [...PHI_BUTTON_VARIANT_FIELD_OPTIONS],
         },
         { key: "danger", type: "boolean", label: "Danger" },
         ...PHI_CONTROL_PRESENTATION_FIELDS,
@@ -79,7 +88,7 @@ export const PHI_BUTTON_WIDGET_DEFINITION = {
     ],
     defaultConfig: {
         key: "button",
-        buttonType: "default",
+        variant: "normal",
         badgeEnabled: false,
     },
     parseConfig: parsePhiButtonWidgetConfig,

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

@@ -1,19 +1,49 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { PhiCmsFlags } from "../../../../../constants/phi-cms";
+import { hasPhiFlag } from "../../../../../helpers/flags";
 import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
 import { PhiRuntimeModuleRenderClientHost } from "../../../../../components/runtime/runtime-module-render-client-manifest";
 import { PHI_BUTTON_WIDGET_DEFINITION } from "./config";
 import { getPhiCommonControlLabelsForRuntime } from "../../../../../components/widgets/label-sets/common-controls";
+import { resolvePhiLinkHref } from "../../../../../helpers/link-target";
+import { trBulkForLocale } from "../../../../../server-helpers/translate";
+/**
+ * The Button's own words in the reader's language.
+ *
+ * Every Widget translates the text written into it itself; nothing does it for them on the way in. The
+ * common control labels beside it are a global label set and arrive translated already.
+ */
+async function translatePhiButtonConfig(config, runtime, translate) {
+    if (!translate)
+        return config;
+    const entries = [["label", config.label], ["tooltip", config.tooltip]]
+        .filter((entry) => Boolean(entry[1]?.trim()));
+    if (entries.length === 0)
+        return config;
+    const translated = await trBulkForLocale(runtime.locale.current, entries.map(([, text]) => text));
+    return {
+        ...config,
+        ...Object.fromEntries(entries.map(([key, text], index) => [key, translated[index]?.trim() || text])),
+    };
+}
 export const PHI_BUTTON_WIDGET_PLUGIN = {
     ...PHI_BUTTON_WIDGET_DEFINITION,
-    render: async ({ widget, config, runtime }) => (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiCmsWidgetType.Button, componentProps: {
+    /*
+     * The target is resolved here and the address travels, not the reference. A Page reference means
+     * nothing in a browser -- which address it answers on is the server's to know, and it resolved every
+     * target on this page in one pass before anything drew.
+     */
+    render: async ({ widget, config, runtime, links }) => (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiCmsWidgetType.Button, componentProps: {
             blockId: widget.id,
-            config,
+            config: await translatePhiButtonConfig(config, runtime, !hasPhiFlag(widget.flags, PhiCmsFlags.NoTranslate)),
             labels: await getPhiCommonControlLabelsForRuntime(runtime),
+            link: resolvePhiLinkHref(config.linkTarget, links),
         } })),
-    renderPreview: async ({ widget, config, runtime }) => (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiCmsWidgetType.Button, componentProps: {
+    renderPreview: async ({ widget, config, runtime, links }) => (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiCmsWidgetType.Button, componentProps: {
             blockId: widget.id,
-            config,
+            config: await translatePhiButtonConfig(config, runtime, !hasPhiFlag(widget.flags, PhiCmsFlags.NoTranslate)),
             labels: await getPhiCommonControlLabelsForRuntime(runtime),
+            link: resolvePhiLinkHref(config.linkTarget, links),
             disabled: true,
             signalsEnabled: false,
         } })),

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PhiCardWidgetEditor } from "../../../../../components/widgets/client/card-editor";
+import { PhiCardWidgetEditor } from "./editor";
 import { PhiWidgetImageToolButton } from "../../../../../components/widgets/client/shared/phi-widget-image-tool-button";
 import { PHI_CARD_WIDGET_DEFINITION } from "./config";
 export const PHI_CARD_WIDGET_BUILDER_PLUGIN = {

package/plugins/runtime-modules/core/widgets/card/collection-view-binding.d.ts

@@ -0,0 +1,9 @@
+import type { PhiCmsInstanceId } from "../../../../../types/cms-instance-id";
+import type { PhiCollectionViewBindingModel } from "../../../../../types/collection-provider";
+import type { PhiCmsCollectionViewWidgetConfig } from "../../../../../types/collection-view-widget";
+export declare function PhiCardCollectionViewBinding({ config, binding, widgetId, }: {
+    config: PhiCmsCollectionViewWidgetConfig;
+    binding: PhiCollectionViewBindingModel;
+    labels?: unknown;
+    widgetId?: PhiCmsInstanceId | null;
+}): import("react").JSX.Element;