@phis/ui 0.4.3 → 0.4.4

package/plugins/runtime-modules/core/widgets/simple-text/client.js

@@ -50,7 +50,7 @@ export function PhiSimpleTextWidgetClient({ blockId, labels, config, }) {
     const resolvedFontFamily = styleValue.code
         ? token.fontFamilyCode
         : resolvePhiWidgetFontFamily(fontFamilyValue, fonts, token);
-    const resolvedFontSize = resolvePhiWidgetFontSize(fontSizeValue, token, "lg");
+    const resolvedFontSize = resolvePhiWidgetFontSize(fontSizeValue, token, "base");
     const receiver = createPhiRenderableBlockReceiver("widget", blockId);
     usePhiRenderableBlockSignalListener(receiver, (signal) => {
         if (signal.channel === "text") {
@@ -105,16 +105,21 @@ export function PhiSimpleTextWidgetClient({ blockId, labels, config, }) {
             code: typeof stylePayload.code === "boolean" ? stylePayload.code : current.code,
         }));
     });
+    /*
+     * A linked text's colour is the link's (`PhiLink`), which answers the pointer; the words inside inherit
+     * it. Stated on them as well, the colour stood over the link's and the hover never showed.
+     */
+    const contentColor = hasHref ? undefined : textColor;
     const contentNode = (_jsxs(PhiFlexControl, { align: "center", gap: 8, style: {
             width: "fit-content",
             maxWidth: "100%",
             minWidth: 0,
             fontSize: resolvedFontSize ?? "inherit",
             lineHeight: resolvedFontSize ? PHI_LINE_HEIGHT_LG : "inherit",
-            color: textColor ?? undefined,
+            color: contentColor ?? undefined,
             fontFamily: resolvedFontFamily,
         }, children: [iconValue ? _jsx(PhiIcon, { name: iconValue, size: "1.25em" }) : null, _jsx(PhiTypographyControl, { type: config?.tone, strong: styleValue.strong, italic: styleValue.italic, underline: styleValue.underline, delete: styleValue.delete, disabled: styleValue.disabled, code: styleValue.code, style: {
-                    color: textColor ?? "inherit",
+                    color: contentColor ?? "inherit",
                     fontSize: resolvedFontSize ?? "inherit",
                     lineHeight: resolvedFontSize ? PHI_LINE_HEIGHT_LG : "inherit",
                     ...(resolvedFontFamily ? { fontFamily: resolvedFontFamily } : {}),

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

@@ -50,6 +50,7 @@ export declare const PHI_SIMPLE_TEXT_WIDGET_DEFINITION: {
     } & {
         type: "string" | "url" | "icon";
         emptyValue?: "";
+        placeholder?: string;
     }) | ({
         key: string;
         label: string;

package/plugins/runtime-modules/core/widgets/simple-text/editor.js

@@ -43,7 +43,7 @@ export function PhiSimpleTextWidgetColorButton({ config, onChange, }) {
 }
 export function PhiSimpleTextWidgetTypographyButton({ config, onChange, }) {
     const labels = usePhiAuthoringToolsLabels();
-    return (_jsx(PhiWidgetTypographyToolButton, { fontFamily: config?.fontFamily, fontSize: config?.fontSize, defaultFontSize: "lg", ariaLabel: labels.text.typography, onChange: ({ fontFamily, fontSize }) => onChange({
+    return (_jsx(PhiWidgetTypographyToolButton, { fontFamily: config?.fontFamily, fontSize: config?.fontSize, defaultFontSize: "base", ariaLabel: labels.text.typography, onChange: ({ fontFamily, fontSize }) => onChange({
             ...(fontFamily !== undefined ? { fontFamily: fontFamily ?? undefined } : {}),
             ...(fontSize !== undefined ? { fontSize: fontSize ?? undefined } : {}),
         }) }));
@@ -71,7 +71,7 @@ export function PhiSimpleTextWidgetEditor({ text, config, onChangeText, }) {
     const resolvedFontFamily = hasPhiSimpleTextMark(config, "code")
         ? token.fontFamilyCode
         : resolvePhiWidgetFontFamily(config?.fontFamily, fonts, token);
-    const resolvedFontSize = resolvePhiWidgetFontSize(config?.fontSize, token, "lg");
+    const resolvedFontSize = resolvePhiWidgetFontSize(config?.fontSize, token, "base");
     return (_jsxs(PhiFlexControl, { align: "center", gap: 8, style: {
             width: "fit-content",
             maxWidth: "100%",

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

@@ -73,6 +73,7 @@ export declare const PHI_TABLE_WIDGET_DEFINITION: {
     } & {
         type: "string" | "url" | "icon";
         emptyValue?: "";
+        placeholder?: string;
     }) | ({
         key: string;
         label: string;
@@ -373,6 +374,7 @@ export declare const PHI_TABLE_WIDGET_DEFINITION: {
         heading?: string;
         type: "string" | "url" | "icon";
         emptyValue?: "";
+        placeholder?: string;
     } | {
         visibleWhen: {
             field: string;
@@ -738,6 +740,7 @@ export declare const PHI_TABLE_WIDGET_DEFINITION: {
             heading?: string;
             type: "string" | "url" | "icon";
             emptyValue?: "";
+            placeholder?: string;
         } | {
             visibleWhen: {
                 field: string;

package/plugins/runtime-modules/dashboard/card-rows.d.ts

@@ -1,5 +1,7 @@
-import { type PhiDashboardCardPayload, type PhiDashboardCardRow } from "../../../types/dashboard-cards";
+import { type PhiDashboardCardPayload, type PhiDashboardCardSeries, type PhiDashboardCardRow } from "../../../types/dashboard-cards";
 /** The card rows a list answer carries, or a Collection holds. */
 export declare function readPhiDashboardCardRows(value: unknown, source?: string): PhiDashboardCardRow[];
 /** One card's refreshed payload. */
 export declare function readPhiDashboardCardPayload(value: unknown): PhiDashboardCardPayload;
+/** The latest figure of the first series: the headline of a `series` card whose provider states none. */
+export declare function readPhiDashboardSeriesHeadline(series: PhiDashboardCardSeries, locale: string): string | undefined;

package/plugins/runtime-modules/dashboard/card-rows.js

@@ -9,16 +9,38 @@ import { createPhiResponseReader, requirePhiField, } from "../../../components/w
  * shape rendered as an empty card. Read field by field now, a wrong answer is an error naming the field,
  * which the Collection shows as the card list's error.
  */
-const PHI_DASHBOARD_CARD_FORMS = ["stat", "list"];
+const PHI_DASHBOARD_CARD_FORMS = ["stat", "list", "series"];
 function readCardId(reader) {
     return requirePhiField(reader, "cardId", "a Dashboard card id", (key) => reader.value(key, "a Dashboard card id", (value) => (isPhiDashboardCardId(value) ? value : undefined)));
 }
 function readTimelineEntry(reader, index) {
     return readPhiTimelineEntry(reader.record) ?? reader.fail(String(index), "a timeline entry with a key", reader.record);
 }
+/*
+ * A series is read whole: a point with one value too few would draw a line that drops to nothing on the
+ * day it lost, which looks like data. So each point states a finite number for every label, or the payload
+ * is an error naming the point.
+ */
+function readSeries(reader) {
+    const labels = requirePhiField(reader, "labels", "a list of series labels", reader.stringList);
+    if (labels.length === 0) {
+        reader.fail("labels", "at least one series label", labels);
+    }
+    const points = requirePhiField(reader, "points", "a list of points", (key) => reader.list(key, (point) => ({
+        at: requirePhiField(point, "at", "an ISO date or instant", point.string),
+        values: requirePhiField(point, "values", `${labels.length} finite numbers, one per label`, (valuesKey) => point.value(valuesKey, `${labels.length} finite numbers, one per label`, (value) => Array.isArray(value)
+            && value.length === labels.length
+            && value.every((entry) => typeof entry === "number" && Number.isFinite(entry))
+            ? value
+            : undefined)),
+    })));
+    const unit = reader.string("unit");
+    return { labels, points, ...(unit === undefined ? {} : { unit }) };
+}
 function readPayloadFields(reader) {
     const value = reader.string("value");
     const entries = reader.list("entries", readTimelineEntry);
+    const series = reader.object("series", readSeries);
     const description = reader.string("description");
     const meta = reader.string("meta");
     const error = reader.string("error");
@@ -26,6 +48,7 @@ function readPayloadFields(reader) {
         cardId: readCardId(reader),
         ...(value === undefined ? {} : { value }),
         ...(entries === undefined ? {} : { entries }),
+        ...(series === undefined ? {} : { series }),
         ...(description === undefined ? {} : { description }),
         ...(meta === undefined ? {} : { meta }),
         ...(error === undefined ? {} : { error }),
@@ -40,7 +63,7 @@ function readRowFields(reader) {
     const payload = reader.object("payload", readPayloadFields);
     return {
         cardId: readCardId(reader),
-        form: requirePhiField(reader, "form", '"stat" or "list"', (key) => reader.oneOf(key, PHI_DASHBOARD_CARD_FORMS)),
+        form: requirePhiField(reader, "form", '"stat", "list" or "series"', (key) => reader.oneOf(key, PHI_DASHBOARD_CARD_FORMS)),
         title: requirePhiField(reader, "title", "a text", reader.string),
         ...(eyebrow === undefined ? {} : { eyebrow }),
         ...(description === undefined ? {} : { description }),
@@ -57,3 +80,8 @@ export function readPhiDashboardCardRows(value, source = "The Dashboard card lis
 export function readPhiDashboardCardPayload(value) {
     return readPayloadFields(createPhiResponseReader(value, "The Dashboard card"));
 }
+/** The latest figure of the first series: the headline of a `series` card whose provider states none. */
+export function readPhiDashboardSeriesHeadline(series, locale) {
+    const latest = series.points[series.points.length - 1]?.values[0];
+    return latest === undefined ? undefined : new Intl.NumberFormat(locale).format(latest);
+}

package/plugins/runtime-modules/dashboard/clients/dashboard-card-view.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { readPhiTimelineEntries } from "@phis/contracts/timeline";
-import { PHI_DASHBOARD_CARD_LIST_LIMIT, } from "../../../../types/dashboard-cards";
+import { PHI_DASHBOARD_CARD_LIST_LIMIT, PHI_DASHBOARD_CARD_SERIES_LIMIT, } from "../../../../types/dashboard-cards";
 import { PhiCardWidgetClient } from "../../../../components/widgets/shared/card-body-client";
 import {} from "../../../../components/widgets/shared/card-vocabulary";
 import { PHI_SURFACE_CARD } from "../../../../helpers/surface-presets";
@@ -10,10 +10,11 @@ import { PhiCollectionViewControl } from "../../../../components/controls/phi-co
 import { PhiAlertControl } from "../../../../components/controls/phi-alert-control";
 import { PhiEmptyControl } from "../../../../components/controls/phi-empty-control";
 import { usePhiPathname } from "../../../../components/runtime/use-phi-pathname";
-import { readPhiDashboardCardPayload, readPhiDashboardCardRows } from "../card-rows";
+import { readPhiDashboardCardPayload, readPhiDashboardCardRows, readPhiDashboardSeriesHeadline, } from "../card-rows";
 import { PhiTimelineControl } from "../../../../components/controls/phi-timeline-control";
+import { PhiSeriesChartControl } from "../../../../components/controls/phi-series-chart-control";
 import { usePhiIntlLocale } from "../../../../components/root/phi-intl-locale";
-import { formatPhiRelativeTime } from "../../../../helpers/format-date-time";
+import { formatPhiDate, formatPhiRelativeTime } from "../../../../helpers/format-date-time";
 /**
  * A Dashboard, drawn.
  *
@@ -33,8 +34,7 @@ const CARD_MIN_COLUMN_WIDTH = 260;
  * A Module's form, and the Core body that draws it.
  *
  * Two vocabularies that agree today, and deliberately not one type. `form` is what a Module
- * declares about its contribution; `body` is what Core draws. They agree now and are allowed to stop:
- * a `series` form would reasonably draw in whatever body Core has for a graphic, under another name.
+ * declares about its contribution; `body` is what Core draws. They agree now and are allowed to stop.
  *
  * A total map rather than a condition, so a form that joins the vocabulary stops this file compiling
  * instead of quietly falling back to a heading.
@@ -42,6 +42,7 @@ const CARD_MIN_COLUMN_WIDTH = 260;
 const CARD_BODY_BY_FORM = {
     stat: "stat",
     list: "list",
+    series: "series",
 };
 /**
  * A `list` card's entries as the Timeline draws them: the first few, each time in the page's locale.
@@ -62,6 +63,24 @@ function PhiDashboardCardList({ entries }) {
             ...(entry.pending ? { pending: true } : {}),
         })) }));
 }
+/*
+ * A point's day as the calendar day it names. An ISO date read by `Date` is midnight in UTC, which is
+ * the day before west of Greenwich; an instant is formatted where the reader is.
+ */
+function formatSeriesKey(at, locale) {
+    return /^\d{4}-\d{2}-\d{2}$/.test(at)
+        ? new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeZone: "UTC" }).format(new Date(`${at}T00:00:00Z`))
+        : formatPhiDate(at, locale);
+}
+/**
+ * A `series` card's chart: its first few series over every point, each day in the page's locale. Drawn
+ * here and handed to the card, as a list is, so a Card on a Public page never loads the chart Control.
+ */
+function PhiDashboardCardSeriesChart({ series, title }) {
+    const locale = usePhiIntlLocale();
+    const labels = series.labels.slice(0, PHI_DASHBOARD_CARD_SERIES_LIMIT);
+    return (_jsx(PhiSeriesChartControl, { locale: locale, title: title, keys: series.points.map((point) => formatSeriesKey(point.at, locale)), series: labels.map((label, index) => ({ label, values: series.points.map((point) => point.values[index]) })), ...(series.unit ? { unit: series.unit } : {}) }));
+}
 function readRows(binding) {
     // A Collection holds items of no particular type; the rows are read again, not cast.
     return readPhiDashboardCardRows(binding.data?.items ?? [], "The Dashboard Collection");
@@ -84,6 +103,7 @@ function PhiDashboardCard({ row, area, pathname, }) {
      * says the same thing by comparison: an answer to a question no longer being asked is simply not this
      * card's answer.
      */
+    const locale = usePhiIntlLocale();
     const requestKey = `${area}\u0000${pathname}\u0000${row.cardId}`;
     const delivered = row.payload ?? null;
     const [resolved, setResolved] = useState(null);
@@ -125,6 +145,8 @@ function PhiDashboardCard({ row, area, pathname, }) {
     const payload = current?.payload ?? null;
     const error = current?.failure ?? payload?.error ?? null;
     const entries = row.form === "list" ? readPhiTimelineEntries(payload?.entries) : [];
+    const series = row.form === "series" ? payload?.series ?? null : null;
+    const value = payload?.value ?? (series ? readPhiDashboardSeriesHeadline(series, locale) : undefined);
     return (_jsx(PhiCardWidgetClient, { labels: {
             ...(row.eyebrow ? { eyebrow: row.eyebrow } : {}),
             /*
@@ -135,7 +157,7 @@ function PhiDashboardCard({ row, area, pathname, }) {
              * screen together and the card reads the same before and after it resolves.
              */
             title: row.title,
-            ...(payload?.value ? { value: payload.value } : {}),
+            ...(value ? { value } : {}),
             ...(payload?.description ?? row.description
                 ? { description: payload?.description ?? row.description }
                 : {}),
@@ -152,7 +174,7 @@ function PhiDashboardCard({ row, area, pathname, }) {
          * this; that this file still does is what will move to a Controller when the Dashboard gets a
          * clock (DASHBOARD.md section 4).
          */
-        binding: { loading: current === null, error }, listContent: entries.length > 0 ? _jsx(PhiDashboardCardList, { entries: entries }) : null }));
+        binding: { loading: current === null, error }, listContent: series ? (_jsx(PhiDashboardCardSeriesChart, { series: series, title: row.title })) : entries.length > 0 ? _jsx(PhiDashboardCardList, { entries: entries }) : null }));
 }
 export function PhiDashboardCardCollectionViewBinding({ config, binding, widgetId, }) {
     void widgetId;

package/plugins/runtime-modules/dashboard/trees/phi-default-builder-dashboard-page-tree.js

@@ -1,25 +1,19 @@
 import { createPhiPresetCmsInstanceIdMap } from "../../../../types/cms-instance-id";
 import { PHI_DASHBOARD_RUNTIME_MODULE_ID } from "../ids";
-import { PHI_CMS_DEFAULT_SLOT_INDEX } from "../../../../constants/cms-layout-types";
-import { PhiCmsFlags, PhiCmsPageType, PhiCmsRegionType } from "../../../../constants/phi-cms";
+import { PhiCmsPageType } from "../../../../constants/phi-cms";
 import { createPhiCmsPresetNodes } from "../../../../helpers/cms-preset-nodes";
-import { resolvePhiShellHeaderHeight } from "../../../../helpers/shell-region-style";
 import { buildPhiBasePageContentScaffold } from "../../../../components/regions/presets/phi-base-page-layout";
 import { getPhiBuilderChromeWidgetLabels } from "../../../../components/widgets/label-sets/builder-chrome";
 import { readPhiServerApiCredentials } from "../../../../helpers/phis-server-credentials";
 import { buildPhiDashboardCardsWidget } from "./dashboard-cards-page-tree";
 import { getPhiDashboardCardsEmptyDescription } from "./area-dashboard-label-set";
+/*
+ * No Header bottom band: the Dashboard has no commands -- nothing to save, preview or publish -- and the
+ * band stood empty under the title.
+ */
 const SYNTHETIC_BUILDER_DASHBOARD_REGION_IDS = {
-    regionHeaderBottom: -580,
     regionContent: -581,
 };
-const SYNTHETIC_BUILDER_DASHBOARD_LAYOUT_IDS = createPhiPresetCmsInstanceIdMap({
-    domain: "page",
-    ownerModuleId: PHI_DASHBOARD_RUNTIME_MODULE_ID,
-    presetKey: "builder-dashboard-page",
-}, [
-    "layoutHeaderBottom",
-]);
 const SYNTHETIC_BUILDER_DASHBOARD_WIDGET_IDS = createPhiPresetCmsInstanceIdMap({
     domain: "page",
     ownerModuleId: PHI_DASHBOARD_RUNTIME_MODULE_ID,
@@ -56,38 +50,9 @@ export async function buildPhiDefaultBuilderDashboardPageTree({ page, runtime, }
         },
         overlays: [],
         regions: [
-            nodes.region({
-                id: SYNTHETIC_BUILDER_DASHBOARD_REGION_IDS.regionHeaderBottom,
-                regionType: PhiCmsRegionType.HeaderBottom,
-                rootLayoutNodeId: SYNTHETIC_BUILDER_DASHBOARD_LAYOUT_IDS.layoutHeaderBottom,
-                sortOrder: 25,
-                config: {
-                    flags: PhiCmsFlags.Sticky,
-                    /*
-                     * No Effect or Shadow of its own, like every other Builder Header. A `glass` authored here
-                     * frosts this one Region against the Site's Shell Chrome Overlay, so the Dashboard's Header
-                     * stopped matching the Sider and Footer beside it. What the frame looks like belongs to the Theme.
-                     */
-                    size: { height: `${resolvePhiShellHeaderHeight(runtime.site.theme?.shell, "bottom")}px` },
-                    offsetTop: resolvePhiShellHeaderHeight(runtime.site.theme?.shell, "main"),
-                },
-            }),
             scaffold.region,
         ],
         layoutNodes: [
-            nodes.layout({
-                creationPreset: { layoutKind: "threecol", preset: "panel" },
-                typeKey: "three-column",
-                id: SYNTHETIC_BUILDER_DASHBOARD_LAYOUT_IDS.layoutHeaderBottom,
-                parentLayoutNodeId: null,
-                slotIndex: PHI_CMS_DEFAULT_SLOT_INDEX,
-                sortOrder: 0,
-                label: "builder dashboard header bottom",
-                config: {
-                    balancedSides: true,
-                    contentAlign: "center",
-                },
-            }),
             scaffold.layoutNode,
         ],
         contentWidgets: [

package/plugins/runtime-modules/theme/widgets/brand-controls/client.js

@@ -24,7 +24,7 @@ import { PHI_SPACING_TOKEN_KEYS } from "../../../../../components/widgets/config
 import { PhiColorFieldControl } from "../../../../../components/controls/phi-color-field-control";
 import { PhiBrandControl, resolvePhiBrandLogoUrl } from "../../../../../components/controls/phi-brand-control";
 import { PhiBackgroundControl } from "../../../../../components/controls/phi-background-control";
-import { PHI_ROOT_BACKGROUND_IMAGE_SOURCE_KINDS, PHI_ROOT_BACKGROUND_FILTERS, PHI_ROOT_BACKGROUND_MOTION_MODES, resolvePhiRootBackgroundPaintStyle, } from "../../../../../components/root/phi-root-background";
+import { PHI_ROOT_BACKGROUND_BASE_KINDS, PHI_ROOT_BACKGROUND_IMAGE_SOURCE_KINDS, PHI_ROOT_BACKGROUND_FILTERS, PHI_ROOT_BACKGROUND_MOTION_MODES, resolvePhiRootBackgroundPaintStyle, } from "../../../../../components/root/phi-root-background";
 import { PHI_SHELL_CHROME_OVERLAY_BASE_KINDS, PHI_SHELL_CHROME_OVERLAY_FILTERS, PHI_SHELL_CHROME_OVERLAY_IMAGE_SOURCE_KINDS, PHI_SHELL_CHROME_OVERLAY_MOTION_MODES, resolvePhiShellChromeOverlayConfig, resolvePhiShellChromePaneShadow, resolvePhiShellChromePaneShadows, resolvePhiShellChromeOverlayStyle, } from "../../../../../components/root/phi-shell-chrome-overlay";
 import { normalizePhiBackgroundWidgetConfig } from "../../../../../components/widgets/config/background";
 import { PhiMediaPickerBinding } from "../../../../../components/media/phi-media-picker-binding";
@@ -34,13 +34,12 @@ import { buildPhiMediaAssetContentDeliveryUrl, PhiMediaAssetFlags, PhiMediaKind,
 import { createPhiMediaPickerAssetControllerRoutes } from "../../../../../components/media/asset-controller-routes";
 import { PhiPresetSizeControl } from "../../../../../components/controls/phi-preset-size-control";
 import { PhiButtonControl } from "../../../../../components/controls/phi-button-control";
-import { PhiCascaderControl } from "../../../../../components/controls/phi-cascader-control";
 import { PhiCheckboxControl } from "../../../../../components/controls/phi-checkbox-control";
 import { PhiLabeledControl } from "../../../../../components/controls/phi-labeled-control";
 import { PhiNumberControl } from "../../../../../components/controls/phi-number-control";
 import { PhiColorControl } from "../../../../../components/controls/phi-color-control";
-import { usePhiControlOptionsProvider } from "../../../../../components/controls/phi-options-provider";
-import { PHI_AUTHORING_OPTION_PROVIDER_KEYS } from "../../../../../constants/authoring-option-provider-keys";
+import { PhiLinkTargetControl } from "../../../../../components/widgets/client/shared/phi-link-target-control";
+import { usePhiPageReferenceOptions } from "../../../../../components/widgets/client/shared/use-page-reference-options";
 import { PhiShadowControl } from "../../../../../components/controls/phi-shadow-control";
 import { PhiIcon } from "../../../../../components/shell/phi-icon";
 import { PhiIconPickerControl } from "../../../../../components/controls/phi-icon-picker-control";
@@ -1476,13 +1475,11 @@ export function PhiBuilderBrandIdentityControlsWidgetClient({ runtime, config, }
      */
     const fallbackWordmark = runtime.site.name ?? runtime.site.key;
     /*
-     * The Pages of the public Area, from the same provider the Builder's own Page Cascader reads. The
-     * Widget declares the provider so the Page mounts it; without that the list is simply empty, which
-     * would look like a Site with one Page.
+     * The Pages of the public Area as references, from the list every link picker outside the Builder's
+     * own catalog reads (`/api/site/page-references`). The Brand leads into the public Area wherever it
+     * is drawn, so that is the Area written into the target.
      */
-    const { options: homePathOptions } = usePhiControlOptionsProvider({
-        optionsProvider: { providerKey: PHI_AUTHORING_OPTION_PROVIDER_KEYS.pages },
-    });
+    const { options: homePageOptions, failed: homePagesFailed } = usePhiPageReferenceOptions("public", "phi-theme-brand");
     function updateWordmarkPart(index, patch) {
         publishDraft(mergeThemeWordmarkParts(state.draft, editableWordmarkParts.map((part, at) => (at === index ? { ...part, ...patch } : part))));
     }
@@ -1506,7 +1503,7 @@ export function PhiBuilderBrandIdentityControlsWidgetClient({ runtime, config, }
                                                     backgroundSize: "contain",
                                                     backgroundRepeat: "no-repeat",
                                                     backgroundPosition: "left center",
-                                                } })) : (_jsx(PhiTypographyControl, { type: "secondary", style: { color: readAliasTokenString(logoGroundToken, "colorTextTertiary") }, children: "No Logo" })) }), _jsxs(PhiFlexControl, { align: "center", gap: clientToken.paddingXXS, style: { flexShrink: 0 }, children: [_jsx(PhiBrandBlockResetButton, { disabled: brand.logo?.[mode] == null, blockTitle: markSet.title, onReset: () => publishDraft(mergeThemeBrandLogo(state.draft, mode, undefined)) }), _jsx(PhiBrandCopyModeButton, { mode: mode, disabled: JSON.stringify(logo) === JSON.stringify(logos[otherMode] ?? null), onCopy: () => publishDraft(mergeThemeBrandLogo(state.draft, otherMode, logo ?? { sourceKind: "none" })) })] })] }), _jsx(PhiMediaPickerBinding, { config: {
+                                                } })) : (_jsx(PhiTypographyControl, { type: "secondary", style: { color: readAliasTokenString(logoGroundToken, "colorTextTertiary") }, children: "No Logo" })) }), _jsxs(PhiFlexControl, { vertical: true, align: "stretch", gap: clientToken.paddingXXS, style: { flexShrink: 0 }, children: [_jsx(PhiBrandBlockResetButton, { disabled: brand.logo?.[mode] == null, blockTitle: markSet.title, onReset: () => publishDraft(mergeThemeBrandLogo(state.draft, mode, undefined)) }), _jsx(PhiBrandCopyModeButton, { mode: mode, disabled: JSON.stringify(logo) === JSON.stringify(logos[otherMode] ?? null), onCopy: () => publishDraft(mergeThemeBrandLogo(state.draft, otherMode, logo ?? { sourceKind: "none" })) })] })] }), _jsx(PhiMediaPickerBinding, { config: {
                                         mediaType: PhiMediaKind.Image,
                                         pageSize: 12,
                                         showPagination: true,
@@ -1530,8 +1527,15 @@ export function PhiBuilderBrandIdentityControlsWidgetClient({ runtime, config, }
                                                 })) }) }), _jsx(PhiLabeledControl, { label: "Offset", fill: true, children: _jsx(PhiNumberControl, { prefix: "px", style: { width: "100%" }, value: brand.logoYOffset ?? 0, step: 1, min: -16, max: 16, onChange: (next) => publishDraft(mergeThemeBrand(state.draft, {
                                                     // No offset is no key, the way `Forward` spells its default away below.
                                                     logoYOffset: next ? next : null,
-                                                })) }) }), _jsx(PhiLabeledControl, { label: "Forward", fill: true, children: _jsx(PhiCascaderControl, { value: brand.homeHref ?? "/", options: homePathOptions, placeholder: "Where the Brand leads", onChange: (next) => publishDraft(mergeThemeBrand(state.draft, {
-                                                    homeHref: next === "/" ? null : next,
+                                                })) }) }), _jsx(PhiLabeledControl, { label: "Forward", fill: true, children: _jsx(PhiLinkTargetControl, { value: brand.homeLinkTarget, options: homePageOptions, area: "public", labels: {
+                                                    none: "Site root",
+                                                    page: "Page",
+                                                    external: "Address",
+                                                    pagePlaceholder: homePagesFailed ? "The Pages could not be loaded." : "Select a Page",
+                                                    externalPlaceholder: "https://example.com",
+                                                    newTab: "Open in a new tab",
+                                                }, onChange: (next) => publishDraft(mergeThemeBrand(state.draft, {
+                                                    homeLinkTarget: next ?? null,
                                                 })) }) })] })] })),
                     },
                     {
@@ -1611,12 +1615,12 @@ export function PhiBuilderBrandBackgroundControlsWidgetClient({ runtime, config,
                         {
                             key: "root",
                             label: _jsx(PhiTypographyControl, { strong: true, children: "Root Background" }),
-                            children: (_jsxs(PhiFlexControl, { vertical: true, gap: clientToken.paddingXS, children: [_jsxs(PhiFlexControl, { align: "center", justify: "space-between", gap: clientToken.paddingXS, children: [_jsxs(PhiTypographyControl, { type: "secondary", children: [modeLabel, ". One layer behind the whole Site, fixed to the viewport."] }), _jsxs(PhiFlexControl, { align: "center", gap: clientToken.paddingXXS, style: { flexShrink: 0 }, children: [_jsx(PhiBrandBlockResetButton, { disabled: state.draft.root?.background?.[mode] == null, blockTitle: composition.ground.title, onReset: () => publishDraft(clearThemeRootSurface(state.draft, "background", mode)) }), _jsx(PhiBrandCopyModeButton, { mode: mode, disabled: isSamePhiBackgroundConfig(rootBackground, otherRootBackground), onCopy: () => publishDraft(mergeThemeRootSurface(state.draft, "background", otherMode, rootBackground)) })] })] }), _jsx(PhiBackgroundControl, { value: rootBackground, motionModes: PHI_ROOT_BACKGROUND_MOTION_MODES, filters: PHI_ROOT_BACKGROUND_FILTERS, imageSourceKinds: PHI_ROOT_BACKGROUND_IMAGE_SOURCE_KINDS, renderMediaPicker: renderPhiThemeRootBackgroundMediaPicker, editTransaction: editTransaction, onChange: (value) => publishDraft(mergeThemeRootSurface(state.draft, "background", mode, value)) }, mode)] })),
+                            children: (_jsxs(PhiFlexControl, { vertical: true, gap: clientToken.paddingXS, children: [_jsxs(PhiFlexControl, { align: "center", justify: "space-between", gap: clientToken.paddingXS, children: [_jsxs(PhiTypographyControl, { type: "secondary", children: [modeLabel, ". One layer behind the whole Site, fixed to the viewport."] }), _jsxs(PhiFlexControl, { vertical: true, align: "stretch", gap: clientToken.paddingXXS, style: { flexShrink: 0 }, children: [_jsx(PhiBrandBlockResetButton, { disabled: state.draft.root?.background?.[mode] == null, blockTitle: composition.ground.title, onReset: () => publishDraft(clearThemeRootSurface(state.draft, "background", mode)) }), _jsx(PhiBrandCopyModeButton, { mode: mode, disabled: isSamePhiBackgroundConfig(rootBackground, otherRootBackground), onCopy: () => publishDraft(mergeThemeRootSurface(state.draft, "background", otherMode, rootBackground)) })] })] }), _jsx(PhiBackgroundControl, { value: rootBackground, motionModes: PHI_ROOT_BACKGROUND_MOTION_MODES, filters: PHI_ROOT_BACKGROUND_FILTERS, baseKinds: PHI_ROOT_BACKGROUND_BASE_KINDS, imageSourceKinds: PHI_ROOT_BACKGROUND_IMAGE_SOURCE_KINDS, renderMediaPicker: renderPhiThemeRootBackgroundMediaPicker, editTransaction: editTransaction, onChange: (value) => publishDraft(mergeThemeRootSurface(state.draft, "background", mode, value)) }, mode)] })),
                         },
                         {
                             key: "chrome",
                             label: _jsx(PhiTypographyControl, { strong: true, children: "Chrome Overlay" }),
-                            children: (_jsxs(PhiFlexControl, { vertical: true, gap: clientToken.paddingXS, children: [_jsxs(PhiFlexControl, { align: "center", justify: "space-between", gap: clientToken.paddingXS, children: [_jsxs(PhiTypographyControl, { type: "secondary", children: [modeLabel, ". Shared by the Header, Sider and Footer Regions. Content and Hero never take it, and a Region that authors its own Background or Effect paints over it."] }), _jsxs(PhiFlexControl, { align: "center", gap: clientToken.paddingXXS, style: { flexShrink: 0 }, children: [_jsx(PhiBrandBlockResetButton, { disabled: state.draft.root?.chrome?.[mode] == null, blockTitle: composition.ground.title, onReset: () => publishDraft(clearThemeRootSurface(state.draft, "chrome", mode)) }), _jsx(PhiBrandCopyModeButton, { mode: mode, disabled: isSamePhiBackgroundConfig(chromeOverlay, otherChromeOverlay), onCopy: () => publishDraft(mergeThemeRootSurface(state.draft, "chrome", otherMode, chromeOverlay)) })] })] }), _jsx(PhiBackgroundControl, { value: chromeOverlay, motionModes: PHI_SHELL_CHROME_OVERLAY_MOTION_MODES, filters: PHI_SHELL_CHROME_OVERLAY_FILTERS, baseKinds: PHI_SHELL_CHROME_OVERLAY_BASE_KINDS, imageSourceKinds: PHI_SHELL_CHROME_OVERLAY_IMAGE_SOURCE_KINDS, renderMediaPicker: renderPhiThemeRootBackgroundMediaPicker, editTransaction: editTransaction, onChange: (value) => publishDraft(mergeThemeRootSurface(state.draft, "chrome", mode, value)) }, `chrome-${mode}`)] })),
+                            children: (_jsxs(PhiFlexControl, { vertical: true, gap: clientToken.paddingXS, children: [_jsxs(PhiFlexControl, { align: "center", justify: "space-between", gap: clientToken.paddingXS, children: [_jsxs(PhiTypographyControl, { type: "secondary", children: [modeLabel, ". Shared by the Header, Sider and Footer Regions. Content and Hero never take it, and a Region that authors its own Background or Effect paints over it."] }), _jsxs(PhiFlexControl, { vertical: true, align: "stretch", gap: clientToken.paddingXXS, style: { flexShrink: 0 }, children: [_jsx(PhiBrandBlockResetButton, { disabled: state.draft.root?.chrome?.[mode] == null, blockTitle: composition.ground.title, onReset: () => publishDraft(clearThemeRootSurface(state.draft, "chrome", mode)) }), _jsx(PhiBrandCopyModeButton, { mode: mode, disabled: isSamePhiBackgroundConfig(chromeOverlay, otherChromeOverlay), onCopy: () => publishDraft(mergeThemeRootSurface(state.draft, "chrome", otherMode, chromeOverlay)) })] })] }), _jsx(PhiBackgroundControl, { value: chromeOverlay, motionModes: PHI_SHELL_CHROME_OVERLAY_MOTION_MODES, filters: PHI_SHELL_CHROME_OVERLAY_FILTERS, baseKinds: PHI_SHELL_CHROME_OVERLAY_BASE_KINDS, imageSourceKinds: PHI_SHELL_CHROME_OVERLAY_IMAGE_SOURCE_KINDS, renderMediaPicker: renderPhiThemeRootBackgroundMediaPicker, editTransaction: editTransaction, onChange: (value) => publishDraft(mergeThemeRootSurface(state.draft, "chrome", mode, value)) }, `chrome-${mode}`)] })),
                         },
                         {
                             key: "shadow",

package/plugins/runtime-modules/theme/widgets/brand-controls/config.js

@@ -1,6 +1,5 @@
 import { isPhiCmsAreaKey, } from "../../../../../constants/cms-areas";
 import { PHI_MEDIA_LIBRARY_DATA_PROVIDER_KEYS } from "../../../../../constants/media-library-provider-keys";
-import { PHI_AUTHORING_OPTION_PROVIDER_KEYS } from "../../../../../constants/authoring-option-provider-keys";
 import { PHI_THEME_SIGNAL_CHANNELS } from "../../../../../plugins/runtime-modules/theme/controller/signals";
 import { createPhiCmsWidgetDefinition } from "../../../../../components/widgets/config/helpers";
 import { readString } from "../../../../../components/widgets/config/parser-primitives";
@@ -52,15 +51,12 @@ export const PHI_BUILDER_BRAND_IDENTITY_CONTROLS_WIDGET_DEFINITION = createPhiCm
     iconFamily: "theme",
     slotSizePolicy: "fill-inline",
     /*
-     * The Logo is picked from the Media library and the Brand's link from the Page catalogue, and a Page
-     * mounts only the Data Providers its tree asks for. The scan reads this declaration; a Provider a
-     * Widget reaches for from inside its client code is invisible to it. Same reason the Background
-     * panel declares its own.
+     * The Logo is picked from the Media library, and a Page mounts only the Data Providers its tree asks
+     * for. The scan reads this declaration; a Provider a Widget reaches for from inside its client code is
+     * invisible to it. Same reason the Background panel declares its own. The Brand's link needs none: its
+     * Pages come from `/api/site/page-references`, as every link picker's outside the Builder catalog do.
      */
-    requiredDataProviders: [
-        PHI_MEDIA_LIBRARY_DATA_PROVIDER_KEYS.collection,
-        PHI_AUTHORING_OPTION_PROVIDER_KEYS.pages,
-    ],
+    requiredDataProviders: [PHI_MEDIA_LIBRARY_DATA_PROVIDER_KEYS.collection],
     runtimeSignals: PHI_BUILDER_BRAND_PREVIEW_MODE_SIGNALS,
     fields: [
         { key: "themeKey", type: "string", label: "Theme Key" },

package/server-helpers/cms-link-targets.js

@@ -21,6 +21,12 @@ export async function resolvePhiCmsTreeLinkTargets(tree, runtime) {
     for (const node of [...tree.regions, ...tree.overlays, ...tree.layoutNodes, ...tree.contentWidgets]) {
         collectPhiLinkTargetReferences(node.config, references);
     }
+    /*
+     * And the Brand's, which is the Site's and not any node's (THEME.md "Brand"): the Brand Widget leads
+     * where the Theme says, and that target resolves with the rest of the page rather than in a round
+     * trip of its own per Brand drawn -- a header and a footer would be two.
+     */
+    collectPhiLinkTargetReferences(runtime.site.theme?.brand, references);
     return resolvePhiLinkTargetReferences(references, runtime);
 }
 /**

package/styles/controls.css

@@ -501,6 +501,18 @@ h5.phi-typography, .phi-typography h5 {
   top: var(--phi-table-sticky-top, var(--phi-shell-sticky-top, 0px)) !important;
 }
 
+/*
+ * A sticky header row is a table of its own, and its columns are the body's: Ant Design measures the
+ * body's columns and writes their widths into the header's `<colgroup>`. In `auto` layout those widths
+ * are only a floor, and a `content` column's header cell carries `width: 1%` -- so each header cell shrank
+ * to its title and a `fill` column took the rest, out of line with the rows under it. Fixed layout makes
+ * the `<colgroup>` the header's widths. The body keeps the configured `layout.mode`; Ant Design writes
+ * that inline on both tables, so the header's is stated over it.
+ */
+.phi-table-control.phi-table-control--sticky-header [class~="ant-table-sticky-holder"] > table {
+  table-layout: fixed !important;
+}
+
 :is([data-phi-modal-body-content], [data-phi-drawer-body-content]) {
   --phi-table-sticky-top: 0px;
 }
@@ -562,6 +574,55 @@ h5.phi-typography, .phi-typography h5 {
   align-self: center;
 }
 
+/*
+ * Its arrow on the switcher's own centre. antd sets the switcher's line height to the row height and lets
+ * the arrow stand on that line's baseline, which leaves a small icon above the middle of the box. The box
+ * keeps a compact control's height, so its hover ground is the square it was.
+ */
+.phi-tree-control.phi-tree-control [class~="ant-tree-switcher"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-block-size: var(--ant-control-height-sm);
+}
+
+/* --- Compact Select ------------------------------------------------------------------------------ */
+
+/*
+ * A compact control writes small: Input, InputNumber, DatePicker and Button take the scale's `sm` through
+ * their component tokens (theme/phi-theme.ts). Select has no such token -- it sizes its words by variables
+ * of its own and gives `-sm` the body's -- so its compact form is told here. Both variables move together:
+ * Select reckons its padding as (height - font height) / 2, so a smaller font size with the body's font
+ * height would leave the box short of `controlHeightSM` by the difference.
+ */
+[class~="ant-select"][class~="ant-select-sm"] {
+  --ant-select-font-size: var(--ant-font-size-sm);
+  --ant-select-font-height: calc(var(--ant-font-size-sm) * var(--ant-select-line-height));
+}
+
+/* The list a compact Select opens writes as the field does; Ant Design gives every Select's list the body size. */
+.phi-select-popup--sm [class~="ant-select-item"] {
+  font-size: var(--ant-font-size-sm);
+}
+
+/* --- Running text --------------------------------------------------------------------------------- */
+
+/*
+ * Markdown and HTML text breaks long words at their syllables, by the rules of the page's language
+ * (`<html lang>`), rather than leaving a ragged edge or running a word past its column. Code keeps its
+ * characters as written.
+ */
+.phi-markdown-text,
+.phi-html-widget__content {
+  hyphens: auto;
+  overflow-wrap: break-word;
+}
+
+.phi-markdown-text :is(pre, code),
+.phi-html-widget__content :is(pre, code) {
+  hyphens: manual;
+}
+
 /* --- Plain table --------------------------------------------------------------------------------- */
 
 /* Wide tables scroll inside their own box instead of widening the Page. */
@@ -570,11 +631,12 @@ h5.phi-typography, .phi-typography h5 {
   overflow-x: auto;
 }
 
+/* A table is read across, not down: its cells take the small size, as the Table Control's do. */
 .phi-plain-table {
   width: 100%;
   border-collapse: collapse;
-  font-size: var(--ant-font-size);
-  line-height: var(--ant-line-height);
+  font-size: var(--ant-font-size-sm);
+  line-height: var(--ant-line-height-sm);
   color: var(--ant-color-text);
 }
 

package/styles/layout.css

@@ -493,8 +493,13 @@
  * COLOUR the page already computed from them, not the variable -- so the box states its text colour again
  * and its content reads it from the variables in force there. When the content is already in that mode,
  * the class has no variables of its own and this resolves to what the page has anyway.
+ *
+ * The box only, not an Ant Design component inside it: the tone scope keys its variables to the same
+ * class, and Ant Design puts that key on every component it draws there. Stated on those too, the colour
+ * stopped inheritance at each of them -- a Quick Link's words kept the text colour while the link turned
+ * to its hover colour around them.
  */
-:where(.phi-tone-light, .phi-tone-dark, .phi-tone-inverse) {
+:where(.phi-tone-light, .phi-tone-dark, .phi-tone-inverse):where(:not([class^="ant-"], [class*=" ant-"])) {
   color: var(--ant-color-text);
 }
 
@@ -576,6 +581,43 @@
   transition: scale 300ms ease;
 }
 
+/*
+ * A card with a ribbon stands in the ribbon's wrapper (`PhiRibbonWrapControl`): a column that takes the
+ * slot's size and hands it to the card. A card that lifts carries its ribbon with it -- the ribbon is the
+ * card's sibling, so the wrapper moves it when the card moves.
+ */
+:where(.phi-card-ribbon) {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+:where(.phi-card-ribbon) > :where(.phi-card) {
+  flex: 1 1 auto;
+}
+
+/*
+ * A little lower than Ant Design sets it, so the ribbon stands centred on the eyebrow's line. Outside
+ * `:where`: Ant Design's own `.ant-ribbon` states `top`, and this has to outrank it.
+ */
+.phi-card-ribbon > .ant-ribbon {
+  top: calc(var(--ant-margin-xs) + 3px);
+}
+
+:where(.phi-card-ribbon--lift) > :where(.ant-ribbon) {
+  transition: translate 200ms ease;
+}
+
+@media (hover: hover) {
+  :where(.phi-card-ribbon--lift):has(> .phi-card:hover) > :where(.ant-ribbon) {
+    translate: 0 -4px;
+  }
+}
+
+:where(.phi-card-ribbon--lift):has(> .phi-card:focus-within) > :where(.ant-ribbon) {
+  translate: 0 -4px;
+}
+
 @media (hover: hover) {
   :where(.phi-card--hover-lift):hover {
     translate: 0 -4px;
@@ -629,7 +671,8 @@
     transition: none;
   }
 
-  .phi-card--hover-lift:is(:hover, :focus-within) {
+  .phi-card--hover-lift:is(:hover, :focus-within),
+  .phi-card-ribbon--lift > .ant-ribbon {
     translate: none;
   }