@phis/ui 0.1.0 → 0.2.1

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

@@ -5,11 +5,12 @@ import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
 import { PhiAccountMenu } from "../../../../../components/menus/phi-account-menu";
 import { normalizeLoginRedirectTarget } from "../../../../../components/widgets/login-redirect";
 import { createPhiSignalCorrelationId, usePhiSignalDispatcher, } from "../../../../../components/runtime/runtime-signal-bus";
-import { createPhiSignalAddress } from "../../../../../types/signals";
+import { createPhiSignalAddress, PHI_SIGNAL_VALUE_SCHEMAS } from "../../../../../types/signals";
+import { createPhiCoreRuntimeControllerAddress } from "../../../../../components/runtime/core-runtime-controller-address";
+import { localizeAreaPath } from "../../../../../helpers/locale";
 import { fetchPhiViewerAvatar } from "../../../../../components/account/avatar-client";
 import { PHI_AVATAR_REVISION } from "../../../../../components/account/avatar-revision";
-import { PHIS_SITE_KEY_HEADER } from "../../../../../constants/http-headers";
-export function PhiAccountWidgetClient({ runtime, avatarSrc, avatarAlt, contributedItems, state, labels, config, }) {
+export function PhiAccountWidgetClient({ runtime, avatarSrc, avatarAlt, contributedItems, areaEntries, state, labels, config, }) {
     const searchParams = useSearchParams();
     const dispatchSignal = usePhiSignalDispatcher();
     const [menuOpen, setMenuOpen] = useState(false);
@@ -18,10 +19,37 @@ export function PhiAccountWidgetClient({ runtime, avatarSrc, avatarAlt, contribu
     const showChevron = config?.showChevron;
     const nextTarget = normalizeLoginRedirectTarget(searchParams.get("next"));
     const authUiProvider = runtime?.authUiProvider ?? null;
+    /*
+     * Signing in, opened from here rather than asked of a Controller that would have to be on every page.
+     *
+     * The provider's Controller comes with its Overlay's zones, so on the first open it is not there yet:
+     * the `open` sent to it waits on the bus and reaches it the moment it mounts, carrying where the
+     * visitor is headed, while the Overlay opens at once and shows its shell. The provider names the
+     * Overlay (`authUiProvider.loginOverlayAddress`); an Area without one signs in on the Public `/login`.
+     */
     function openLoginFromMenu() {
         setMenuOpen(false);
         const provider = authUiProvider;
-        if (!provider) {
+        if (!provider || !runtime) {
+            return;
+        }
+        const correlationId = createPhiSignalCorrelationId();
+        if (!provider.loginOverlayAddress) {
+            const target = nextTarget ?? normalizeLoginRedirectTarget(`${window.location.pathname}${window.location.search}`) ?? "/";
+            dispatchSignal({
+                scope: "site",
+                channel: "path",
+                action: "activate",
+                value: {
+                    path: `${localizeAreaPath(runtime.locale.current, "public", "/login")}?${new URLSearchParams({ next: target }).toString()}`,
+                },
+                valueType: "json",
+                valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.runtimeNavigation,
+                sender: null,
+                receiver: createPhiCoreRuntimeControllerAddress(),
+                correlationId,
+                timestamp: Date.now(),
+            });
             return;
         }
         dispatchSignal({
@@ -32,40 +60,40 @@ export function PhiAccountWidgetClient({ runtime, avatarSrc, avatarAlt, contribu
             valueType: "path",
             sender: null,
             receiver: provider.controllerAddress,
+            correlationId,
+        });
+        dispatchSignal({
+            scope: "area",
+            channel: "dialog",
+            action: "activate",
+            value: null,
+            valueType: "none",
+            sender: null,
+            receiver: provider.loginOverlayAddress,
+            correlationId,
         });
     }
-    async function handleLogout() {
-        try {
-            const csrfResponse = await fetch("/api/auth/csrf", {
-                method: "GET",
-                credentials: "include",
-                cache: "no-store",
-            });
-            const csrfPayload = (await csrfResponse.json().catch(() => ({})));
-            const csrfToken = csrfPayload.token?.trim() ?? "";
-            if (!csrfResponse.ok || !csrfToken) {
-                return;
+    const emitFromItem = useCallback((item) => {
+        const sender = createPhiSignalAddress("cms", item.key);
+        for (const route of item.emits ?? []) {
+            if (route.receiver == null || (route.valueType === "json" && !route.valueSchema)) {
+                continue;
             }
-            const headers = new Headers({
-                "x-csrf-token": csrfToken,
+            dispatchSignal({
+                scope: route.scope,
+                channel: route.channel,
+                action: route.action,
+                value: null,
+                valueType: route.valueType,
+                valueSchema: route.valueSchema ?? null,
+                receiver: route.receiver,
+                sender,
+                correlationId: createPhiSignalCorrelationId(),
+                timestamp: Date.now(),
             });
-            if (runtime?.site.key?.trim()) {
-                headers.set(PHIS_SITE_KEY_HEADER, runtime.site.key.trim().toLowerCase());
-            }
-            const logoutResponse = await fetch("/api/auth/logout", {
-                method: "POST",
-                headers,
-                credentials: "include",
-                cache: "no-store",
-            });
-            if (logoutResponse.ok) {
-                window.location.reload();
-            }
         }
-        finally {
-            setMenuOpen(false);
-        }
-    }
+        setMenuOpen(false);
+    }, [dispatchSignal]);
     const openOverlay = useCallback((overlayInstanceId) => {
         dispatchSignal({
             scope: "area",
@@ -112,10 +140,6 @@ export function PhiAccountWidgetClient({ runtime, avatarSrc, avatarAlt, contribu
                 }
                 : {
                     kind: "authenticated",
-                    profileHref: state.profileHref,
-                    settingsHref: state.settingsHref,
-                    logoutHref: state.logoutHref,
                     displayName: state.displayName,
-                    onLogout: state.logoutHref ? undefined : handleLogout,
-                }, contributedItems: contributedItems, onOpenOverlay: openOverlay, avatarSrc: resolvedAvatarSrc, avatarAlt: avatarAlt, open: state.kind === "guest" ? menuOpen : undefined, onOpenChange: state.kind === "guest" ? setMenuOpen : undefined, mode: configuredVariant, showLabel: showLabel, showChevron: showChevron }) }));
+                }, contributedItems: contributedItems, areaEntries: areaEntries, onOpenOverlay: openOverlay, onEmit: emitFromItem, avatarSrc: resolvedAvatarSrc, avatarAlt: avatarAlt, open: state.kind === "guest" ? menuOpen : undefined, onOpenChange: state.kind === "guest" ? setMenuOpen : undefined, mode: configuredVariant, showLabel: showLabel, showChevron: showChevron }) }));
 }

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

@@ -4,6 +4,7 @@ export declare const PHI_ACCOUNT_WIDGET_DEFINITION: {
     kind: "widget";
     pluginKey: string;
     typeKey: string;
+    slotSizePolicy: "intrinsic";
     title: string;
     description: string;
     category: "navigation";
@@ -11,4 +12,3 @@ export declare const PHI_ACCOUNT_WIDGET_DEFINITION: {
     fields: never[];
     parseConfig: typeof parsePhiAccountWidgetConfig;
 };
-export declare const PHI_ACCOUNT_WIDGET_PLUGIN_TYPE: string;

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

@@ -1,5 +1,4 @@
 import { resolvePhiCmsWidgetPluginKey } from "../../../../../constants/cms-widget-types";
-import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
 export function parsePhiAccountWidgetConfig(rawConfig) {
     const config = (rawConfig ?? {});
     return {
@@ -16,6 +15,7 @@ export const PHI_ACCOUNT_WIDGET_DEFINITION = {
     kind: "widget",
     pluginKey: resolvePhiCmsWidgetPluginKey("account"),
     typeKey: "account",
+    slotSizePolicy: "intrinsic",
     title: "Account",
     description: "Viewer account control with guest and authenticated states.",
     category: "navigation",
@@ -23,4 +23,3 @@ export const PHI_ACCOUNT_WIDGET_DEFINITION = {
     fields: [],
     parseConfig: parsePhiAccountWidgetConfig,
 };
-export const PHI_ACCOUNT_WIDGET_PLUGIN_TYPE = PhiCmsWidgetType.Account;

package/plugins/runtime-modules/core/widgets/account/plugin.d.ts

@@ -1,5 +1,3 @@
 import type { PhiCmsServerWidgetPlugin } from "../../../../../types";
 import type { PhiAccountWidgetConfig } from "./client";
-import { PHI_ACCOUNT_WIDGET_PLUGIN_TYPE } from "./config";
 export declare const PHI_ACCOUNT_WIDGET_PLUGIN: PhiCmsServerWidgetPlugin<PhiAccountWidgetConfig>;
-export { PHI_ACCOUNT_WIDGET_PLUGIN_TYPE };

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { localizeAreaPath } from "../../../../../helpers/locale";
-import { PHI_ACCOUNT_WIDGET_DEFINITION, PHI_ACCOUNT_WIDGET_PLUGIN_TYPE } from "./config";
+import { PHI_ACCOUNT_WIDGET_DEFINITION } from "./config";
 import { PhiAccountWidget } from "./server";
 import { PhiRuntimeRenderClientType } from "../../../../../constants/runtime-render-client-types";
 import { PhiRuntimeModuleRenderClientHost } from "../../../../../components/runtime/runtime-module-render-client-manifest";
@@ -32,9 +32,14 @@ export const PHI_ACCOUNT_WIDGET_PLUGIN = {
             }
             : {
                 kind: "guest",
-                registerHref: localizeAreaPath(runtime.locale.current, runtime.area, "/register"),
-                forgotPasswordHref: localizeAreaPath(runtime.locale.current, runtime.area, "/reset-password"),
+                /*
+                 * Registering and recovering a password happen before there is a session, so both Pages are
+                 * Public's wherever the menu is drawn -- the same way the signed-in entries point into App.
+                 * Built from the Area the Widget happens to render in, a menu in App offered `/app/register`,
+                 * which is no route at all.
+                 */
+                registerHref: localizeAreaPath(runtime.locale.current, "public", "/register"),
+                forgotPasswordHref: localizeAreaPath(runtime.locale.current, "public", "/reset-password"),
             } }, `widget-${widget.id}`)),
     renderPreview: () => (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiRuntimeRenderClientType.AccountPreview, componentProps: {} })),
 };
-export { PHI_ACCOUNT_WIDGET_PLUGIN_TYPE };

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

@@ -3,18 +3,22 @@ import type { PhiAccountWidgetClientProps } from "./client";
 export type { PhiAccountWidgetConfig } from "./client";
 export type PhiAccountWidgetGuestState = {
     kind: "guest";
-    registerHref: string;
+    /**
+     * Where to create an account, or absent on a Site that does not let anybody.
+     *
+     * Optional because the Widget decides it: the caller hands over the address the Area makes of it, and
+     * whether the Site offers the Page at all is read here. Both readers below already treated it as
+     * optional, so nothing new has to be remembered.
+     */
+    registerHref?: string;
     forgotPasswordHref?: string;
 };
 export type PhiAccountWidgetAuthenticatedState = {
     kind: "authenticated";
-    profileHref?: string;
-    settingsHref?: string;
-    logoutHref?: string;
     displayName?: string;
 };
 export type PhiAccountWidgetState = PhiAccountWidgetGuestState | PhiAccountWidgetAuthenticatedState;
 export type PhiAccountWidgetProps = Pick<PhiAccountWidgetClientProps, "avatarSrc" | "avatarAlt" | "successAction" | "state" | "config"> & {
-    runtime: Pick<PhiBlockRuntime, "site" | "locale" | "viewer" | "area" | "authUiProvider">;
+    runtime: Pick<PhiBlockRuntime, "site" | "locale" | "viewer" | "area" | "request" | "authUiProvider">;
 };
 export declare function PhiAccountWidget({ runtime, avatarSrc, avatarAlt, successAction, state, config: widgetConfig, }: PhiAccountWidgetProps): Promise<import("react").JSX.Element>;

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

@@ -1,25 +1,29 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getResolvedSiteConfig } from "../../../../../gateway/site-config";
-import { localizeAreaPath } from "../../../../../helpers/locale";
+import { fetchPhiPublicAuthManifest, phiPublicAuthManifestOffersRegistration, } from "../../../../../gateway/auth-public-manifest";
 import { phiRuntime } from "../../../../../server-helpers/phi-runtime";
-import { getPhiCmsPage } from "../../../../../server-helpers/cms";
 import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
 import { PhiRuntimeModuleRenderClientHost } from "../../../../../components/runtime/runtime-module-render-client-manifest";
-import { resolvePhiDescriptorNavigationItems } from "../../../../../components/widgets/navigation-descriptor-resolver.server";
+import { resolvePhiNavigationItems } from "../../../../../components/widgets/server/navigation-request";
+import { buildPhiAccountAreaEntries } from "../../../../../components/widgets/accessible-areas";
+import { resolvePhiNavHref } from "../../../../../helpers/locale";
 import { getPhiAccountMenuLabels } from "../../../../../components/widgets/label-sets/account";
-import { readPhiServerApiCredentials } from "../../../../../helpers/phis-server-credentials";
-async function resolveProfileHref(runtime) {
-    if (runtime.viewer.access !== "authenticated") {
-        return undefined;
-    }
-    const page = await getPhiCmsPage({
-        path: "/app/profile",
-        apiBaseUrl: readPhiServerApiCredentials().apiBaseUrl,
-        internalToken: readPhiServerApiCredentials().internalToken,
-        siteKey: runtime.site.key,
-        locale: runtime.locale.current,
-    }).catch(() => null);
-    return page ? localizeAreaPath(runtime.locale.current, "app", "/profile") : undefined;
+/**
+ * A resolved entry's `href` is the route's own path, Area-local; what a link needs is the address.
+ *
+ * Every other menu applies `resolvePhiNavHref` where it renders, and the account menu got away without
+ * it for as long as nothing in it was a link -- the first contribution opened an Overlay. The profile
+ * entry is a link, and unresolved it would offer `/phis/ui/settings/profile`, which is no route in any
+ * Area. Resolved once here, because this is where the Area and the locale are known.
+ */
+function withLinkableHref(item, locale, area) {
+    return {
+        ...item,
+        ...(item.href && !item.external ? { href: resolvePhiNavHref(locale, area, item.href) } : {}),
+        ...(item.children?.length
+            ? { children: item.children.map((child) => withLinkableHref(child, locale, area)) }
+            : {}),
+    };
 }
 export async function PhiAccountWidget({ runtime, avatarSrc, avatarAlt, successAction = "reload", state, config: widgetConfig, }) {
     const rt = phiRuntime(runtime);
@@ -28,61 +32,96 @@ export async function PhiAccountWidget({ runtime, avatarSrc, avatarAlt, successA
         internalToken: rt.internalToken,
         locale: runtime.locale.current,
     };
-    const [site, accountLabels, profileHref, contributedItems,] = await Promise.all([
+    const [site, accountLabels, contributedItems, offersRegistration,] = await Promise.all([
         getResolvedSiteConfig({
             apiBaseUrl: rt.apiBaseUrl,
             internalToken: rt.internalToken,
             siteKey: rt.siteKey,
         }),
         getPhiAccountMenuLabels(labelOptions),
-        state.kind === "authenticated" && !state.profileHref
-            ? resolveProfileHref(runtime)
-            : Promise.resolve(undefined),
         /*
-         * What Modules contributed to this Area's account menu.
+         * What Modules contributed to this Area's account menu, and what the Site made of it.
          *
-         * Only for a signed-in viewer: the entries are about the person, and a guest has none. `null` when
-         * the Area declares no such surface -- Admin, Builder and Editor render the same Widget and do not,
-         * so they keep exactly the menu they had.
+         * Through the same resolver every other navigation surface uses, so the Site's own navigation
+         * overlay applies here too: an operator who reorders or hides an account entry in the Builder is
+         * editing the surface this reads. It used to read descriptors alone, which meant their editing was
+         * accepted, saved, published -- and then ignored by the one menu it was about.
+         *
+         * Only for a signed-in viewer: the entries are about the person, and a guest has none.
          */
         state.kind === "authenticated"
-            ? resolvePhiDescriptorNavigationItems(runtime, `${runtime.area}:account`).catch(() => null)
+            ? resolvePhiNavigationItems(runtime, `${runtime.area}:account`)
             : Promise.resolve(null),
+        /*
+         * Whether this Site lets anybody create an account, read here rather than handed down.
+         *
+         * A page is given the Modules' published facts only where it asks for them, and this menu stands in
+         * a Region on every page -- including all the ones that ask nothing. So it reads for itself, which
+         * is what `PhiCmsWidgetPluginRenderArgs.features` says a Widget needing a fact unconditionally
+         * should do.
+         *
+         * Only for a guest: a signed-in person is offered no way to register, so nobody pays for the read.
+         */
+        state.kind === "guest"
+            ? fetchPhiPublicAuthManifest({
+                apiBaseUrl: rt.apiBaseUrl,
+                internalToken: rt.internalToken,
+                siteKey: rt.siteKey,
+            }).then(phiPublicAuthManifestOffersRegistration)
+            : Promise.resolve(false),
     ]);
     /*
-     * The exported anchor is the place to dock, not an entry.
+     * The exported anchor is the place to dock, not an entry; everything else in the surface is one.
      *
-     * A Module attaches under it, so what belongs in the menu are its children. Rendering the anchor
-     * itself would put a label in the menu that goes nowhere and means nothing to a reader.
+     * An anchor is told from an entry by what it is, not by its key: it goes nowhere, sends nothing and
+     * opens nothing, so what belongs in the menu are its children. Rendering it would put a label there
+     * that means nothing to a reader. An Area's own entry -- signing out -- stands beside the anchor and
+     * is itself. What a contributed entry carries below it travels with it: a Module whose contribution
+     * is a group said so, and flattening it here would decide for it.
      */
-    const contributedEntries = (contributedItems ?? [])
-        .flatMap((item) => item.children ?? []);
+    const contributedEntries = (contributedItems ?? []).flatMap((item) => item.href || item.emits?.length || item.overlayInstanceId ? [item] : (item.children ?? []))
+        .map((item) => withLinkableHref(item, runtime.locale.current, runtime.area));
+    /*
+     * Where else this person may go, which no surface can say.
+     *
+     * Profile and account security are App Pages and are entries of `app:account` alone -- a navigation
+     * entry names a route of its own Area, so an Admin surface cannot point at them. What reaches them
+     * from a staff shell is this list: the Areas the viewer is allowed into, the current one shown but
+     * not offered. It is the same everywhere because it describes the person and not the Page.
+     */
+    const areaEntries = state.kind === "authenticated"
+        ? buildPhiAccountAreaEntries({
+            viewer: runtime.viewer,
+            currentArea: runtime.area,
+            locale: runtime.locale.current,
+            labels: accountLabels.areas,
+        })
+        : [];
     const config = {
         variant: widgetConfig?.variant ?? site.theme?.widgets?.account?.variant ?? undefined,
         showLabel: widgetConfig?.showLabel ?? site.theme?.widgets?.account?.showLabel ?? undefined,
         showChevron: widgetConfig?.showChevron ?? site.theme?.widgets?.account?.showChevron ?? undefined,
     };
     const labels = {
-        menu: accountLabels,
+        menu: {
+            trigger: accountLabels.trigger,
+            guest: accountLabels.guest,
+            // The heading alone: the Area names went into the entries above, and sending them twice would
+            // put the same six strings in two places for one menu to read one of them.
+            areas: { title: accountLabels.areas.title },
+        },
     };
-    const resolvedState = state.kind === "authenticated" && !state.profileHref
-        ? {
-            ...state,
-            profileHref,
-            settingsHref: state.settingsHref ?? (runtime.authUiProvider?.capabilities.includes("account-security") &&
-                runtime.authUiProvider.accountSecurityPath
-                ? localizeAreaPath(runtime.locale.current, "app", runtime.authUiProvider.accountSecurityPath)
-                : undefined),
-        }
-        : state.kind === "authenticated"
-            ? {
-                ...state,
-                settingsHref: state.settingsHref ?? (runtime.authUiProvider?.capabilities.includes("account-security") &&
-                    runtime.authUiProvider.accountSecurityPath
-                    ? localizeAreaPath(runtime.locale.current, "app", runtime.authUiProvider.accountSecurityPath)
-                    : undefined),
-            }
-            : state;
+    /*
+     * A Site with registration switched off keeps the entry out of the menu instead of leading to a form
+     * the server refuses. The Login page's own link has always been conditional on this; the menu was the
+     * last place still inviting people in, and it is the one a visitor sees on every page rather than only
+     * on `/login`.
+     *
+     * Dropped rather than disabled: a menu entry that cannot be used says nothing a reader can act on.
+     */
+    const resolvedState = state.kind === "guest" && !offersRegistration
+        ? { kind: "guest", forgotPasswordHref: state.forgotPasswordHref }
+        : state;
     return (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiCmsWidgetType.Account, componentProps: {
             runtime,
             avatarSrc,
@@ -92,5 +131,6 @@ export async function PhiAccountWidget({ runtime, avatarSrc, avatarAlt, successA
             labels,
             config,
             contributedItems: contributedEntries.length > 0 ? contributedEntries : undefined,
+            areaEntries: areaEntries.length > 0 ? areaEntries : undefined,
         } }));
 }

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

@@ -1,11 +1,71 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PhiBrandWidgetClient } from "./client";
+import { PhiBrandLineControl } from "../../../../../components/controls/phi-brand-control";
+import { usePhiSiteBrand, usePhiSiteWordmarkText, } from "../../../../../components/root/phi-root-live-theme-provider";
+import { usePhiConfig } from "../../../../../components/root/phi-config-provider";
+import { resolvePhiWidgetFontFamily } from "../../../../../components/widgets/helpers/font-family";
+import { resolvePhiWidgetFontSize } from "../../../../../components/widgets/helpers/font-size";
+import { PhiWidgetTypographyToolButton } from "../../../../../components/widgets/client/shared/phi-widget-tool-buttons";
+import { PHI_BRAND_LINE_FALLBACK_ICONS, PhiBrandWidgetClient } from "./client";
 import { PHI_BRAND_WIDGET_DEFINITION } from "./config";
+import { isPhiBrandWidgetLineMode } from "./mode";
+/** What an unset line says instead of its sentence, which is also where to go and write one. */
+const PHI_BRAND_LINE_UNSET_LABELS = {
+    slogan: "Slogan not set in the Theme",
+    location: "Location not set in the Theme",
+};
+/**
+ * The Brand as it will look, and for an unset line the shape it will take.
+ *
+ * A line the Theme has not written draws nothing, which is right on the page: the strip keeps its shape
+ * and no slogan is invented for anybody's header. In the Builder it is not -- the slot is taken, so it
+ * offers no `+` either, and a column of two invisible Widgets reads as broken rather than as unset.
+ *
+ * So the line is drawn as itself, with its own fallback icon in front, saying what is missing. Not a
+ * generic placeholder card: what the author needs to see here is the shape the line will have and how
+ * much room it takes beside its neighbours, which a card in its place would misreport.
+ *
+ * The mark modes need none of this. Their Wordmark falls back through `resolvePhiBrandWordmarkText` to
+ * the Site's name and then its key, so there is always something to draw; a Logo mode with the Logo
+ * explicitly set to none is somebody saying no, not somebody who has not answered yet.
+ */
+function PhiBrandWidgetEditor({ config }) {
+    const brand = usePhiSiteBrand();
+    const wordmarkText = usePhiSiteWordmarkText();
+    const { fonts, token } = usePhiConfig();
+    const mode = config.mode;
+    if (isPhiBrandWidgetLineMode(mode)) {
+        const line = mode === "location" ? brand?.location : brand?.slogan;
+        if (!line?.label?.trim()) {
+            /*
+             * The unset line is set like the line it stands in for, so what is missing takes the room the
+             * sentence will take -- which is the whole reason it is drawn here at all.
+             */
+            return (_jsx(PhiBrandLineControl, { line: { label: PHI_BRAND_LINE_UNSET_LABELS[mode] }, fallbackIcon: PHI_BRAND_LINE_FALLBACK_ICONS[mode], fontFamily: resolvePhiWidgetFontFamily(config.fontFamily, fonts, token), fontSize: resolvePhiWidgetFontSize(config.fontSize, token, "lg") }));
+        }
+    }
+    /*
+     * `mode` is passed on, which it was not before: a Widget set to a line, or to the Logo alone, drew the
+     * full lockup here while it was being placed -- the editor disagreed with the page about the only
+     * setting this Widget has.
+     *
+     * The Wordmark comes from the root and not from `runtime`, which on this canvas is a stub Site called
+     * "Preview" -- and that is what the Wordmark said here, beside a Logo that was the Site's own.
+     */
+    return (_jsx(PhiBrandWidgetClient, { config: { mode, fontFamily: config.fontFamily, fontSize: config.fontSize }, fallbackTitle: wordmarkText, interactive: false }));
+}
 export const PHI_BRAND_WIDGET_BUILDER_PLUGIN = {
     ...PHI_BRAND_WIDGET_DEFINITION,
-    renderEditor: ({ runtime, config }) => (_jsx(PhiBrandWidgetClient, { config: {
-            showLogo: config.showLogo,
-            logoYOffset: config.logoYOffset,
-        }, fallbackTitle: config.fallbackTitle ?? runtime.site.name ?? runtime.site.key, fallbackEyebrow: config.fallbackEyebrow, interactive: false })),
+    renderEditor: (args) => _jsx(PhiBrandWidgetEditor, { ...args }),
+    /*
+     * Only the two lines are asked, and they are asked what a Simple Text is asked.
+     *
+     * A mark takes its type from the Theme's Wordmark, so the button would offer a setting that draws
+     * nothing there. `lg` as the default is the Simple Text's default, so the popup opens on the size the
+     * line is actually drawn at rather than on "Inherit".
+     */
+    renderEditorTools: ({ config, authoring }) => authoring?.updateConfig && isPhiBrandWidgetLineMode(config.mode) ? (_jsx(PhiWidgetTypographyToolButton, { fontFamily: config.fontFamily, fontSize: config.fontSize, defaultFontSize: "lg", onChange: ({ fontFamily, fontSize }) => authoring.updateConfig?.({
+            ...(fontFamily !== undefined ? { fontFamily: fontFamily ?? undefined } : {}),
+            ...(fontSize !== undefined ? { fontSize: fontSize ?? undefined } : {}),
+        }) })) : null,
 };

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

@@ -1,12 +1,16 @@
 import type { ReactNode } from "react";
 import type { PhiClientBlockBaseProps, PhiNoLabels } from "../../../../../types";
+import { type PhiBrandWidgetLineMode, type PhiBrandWidgetMode } from "./mode";
+import type { PhiWidgetFontFamilyKey, PhiWidgetFontSizeKey } from "../../../../../types/site-theme";
 export type PhiBrandWidgetConfig = {
-    showLogo?: boolean;
-    logoYOffset?: number;
+    mode?: PhiBrandWidgetMode;
+    fontFamily?: PhiWidgetFontFamilyKey;
+    fontSize?: PhiWidgetFontSizeKey;
 };
+/** What a line shows in front of itself where the Brand names no icon for it. */
+export declare const PHI_BRAND_LINE_FALLBACK_ICONS: Record<PhiBrandWidgetLineMode, string>;
 export type PhiBrandWidgetClientProps = PhiClientBlockBaseProps<PhiNoLabels, PhiBrandWidgetConfig> & {
     fallbackTitle?: ReactNode;
-    fallbackEyebrow?: ReactNode;
     interactive?: boolean;
 };
 /**
@@ -16,4 +20,4 @@ export type PhiBrandWidgetClientProps = PhiClientBlockBaseProps<PhiNoLabels, Phi
  * because the Theme workspace preview shows the same Brand without being in a frame and without
  * leading anywhere.
  */
-export declare function PhiBrandWidgetClient({ config, fallbackTitle, fallbackEyebrow, interactive, }: PhiBrandWidgetClientProps): import("react").JSX.Element | null;
+export declare function PhiBrandWidgetClient({ config, fallbackTitle, interactive, }: PhiBrandWidgetClientProps): import("react").JSX.Element | null;

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

@@ -1,9 +1,17 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import Link from "next/link";
-import { PhiBrandControl, phiBrandControlIsEmpty, } from "../../../../../components/controls/phi-brand-control";
+import { PhiBrandControl, PhiBrandLineControl, phiBrandControlIsEmpty, } from "../../../../../components/controls/phi-brand-control";
+import { isPhiBrandWidgetLineMode, } from "./mode";
 import { usePhiConfig } from "../../../../../components/root/phi-config-provider";
 import { usePhiSiteBrand } from "../../../../../components/root/phi-root-live-theme-provider";
+import { resolvePhiWidgetFontFamily } from "../../../../../components/widgets/helpers/font-family";
+import { resolvePhiWidgetFontSize } from "../../../../../components/widgets/helpers/font-size";
+/** What a line shows in front of itself where the Brand names no icon for it. */
+export const PHI_BRAND_LINE_FALLBACK_ICONS = {
+    slogan: "antd:star",
+    location: "antd:location",
+};
 /**
  * The Brand in the Site frame: what `PhiBrandControl` shows, and where clicking it leads.
  *
@@ -11,17 +19,36 @@ import { usePhiSiteBrand } from "../../../../../components/root/phi-root-live-th
  * because the Theme workspace preview shows the same Brand without being in a frame and without
  * leading anywhere.
  */
-export function PhiBrandWidgetClient({ config, fallbackTitle, fallbackEyebrow, interactive = true, }) {
+export function PhiBrandWidgetClient({ config, fallbackTitle, interactive = true, }) {
     const brand = usePhiSiteBrand();
-    const { mode } = usePhiConfig();
-    const showLogo = config?.showLogo !== false;
+    // The Theme's mode, not the Widget's: one picks the Logo's picture, the other what is drawn at all.
+    const { fonts, token, mode: themeMode } = usePhiConfig();
+    /*
+     * A line leads nowhere, deliberately. The Wordmark is the way home and is drawn as a link; a Site's
+     * slogan or the town it sits in is a statement, and wrapping it in an anchor to the front page would
+     * offer a destination nobody was looking for.
+     */
+    if (isPhiBrandWidgetLineMode(config?.mode)) {
+        return (_jsx(PhiBrandLineControl, { line: config.mode === "location" ? brand?.location : brand?.slogan, fallbackIcon: PHI_BRAND_LINE_FALLBACK_ICONS[config.mode], fontFamily: resolvePhiWidgetFontFamily(config.fontFamily, fonts, token), 
+            /*
+             * `lg` where nothing is said, which is the Simple Text's answer too.
+             *
+             * A line used to be a Simple Text holding a copy of the sentence, and the two stood side by side
+             * in a header. Inheriting meant the line came out at whatever the strip was set in -- smaller
+             * than the Widget beside it saying the same kind of thing. The same default is the same size.
+             */
+            fontSize: resolvePhiWidgetFontSize(config.fontSize, token, "lg") }));
+    }
+    /*
+     * A Widget that never stated a mode shows the lockup, which is what it showed before there was one to
+     * state. Only the three mark modes reach here; the Control is told which of them, and reads the rest
+     * of what it draws -- the Logo, its offset, the Wordmark's type, the Eyebrow -- from the Theme.
+     */
     const presentation = {
         brand,
-        mode,
+        mode: themeMode,
         fallbackTitle,
-        fallbackEyebrow,
-        showLogo,
-        logoYOffset: typeof config?.logoYOffset === "number" ? config.logoYOffset : 0,
+        shows: config?.mode ?? "lockup",
     };
     if (phiBrandControlIsEmpty(presentation)) {
         return null;

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

@@ -1,32 +1,30 @@
+import type { PhiWidgetFontFamilyKey, PhiWidgetFontSizeKey } from "../../../../../types/site-theme";
 import { type PhiCmsWidgetConfigBase } from "../../../../../components/widgets/config/parser-primitives";
+import type { PhiBrandWidgetMode } from "./mode";
 export type PhiCmsBrandWidgetConfig = PhiCmsWidgetConfigBase & {
-    fallbackTitle?: string;
-    fallbackEyebrow?: string;
-    showLogo?: boolean;
-    logoYOffset?: number;
+    mode?: PhiBrandWidgetMode;
+    fontFamily?: PhiWidgetFontFamilyKey;
+    fontSize?: PhiWidgetFontSizeKey;
 };
 export declare function parsePhiCmsBrandWidgetConfig(config: Record<string, unknown>): PhiCmsBrandWidgetConfig;
 export declare const PHI_BRAND_WIDGET_DEFINITION: {
     kind: "widget";
     pluginKey: string;
     typeKey: string;
+    slotSizePolicy: "intrinsic";
     title: string;
     category: "content";
     description: string;
     iconFamily: string;
-    fields: ({
+    fields: {
         key: string;
-        type: "string";
+        type: "choice";
         label: string;
-    } | {
-        key: string;
-        type: "boolean";
-        label: string;
-    } | {
-        key: string;
-        type: "number";
-        label: string;
-    })[];
+        options: {
+            value: string;
+            label: string;
+        }[];
+    }[];
     parseConfig: typeof parsePhiCmsBrandWidgetConfig;
 };
 export declare const PHI_BRAND_WIDGET_PLUGIN_TYPE: string;