@phis/ui 0.1.0 → 0.2.1

package/plugins/runtime-modules/auth/widgets/logout/client.js

@@ -1,39 +1,22 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { requestPhiLogout } from "../../../../../helpers/logout";
 import { useEffect, useState } from "react";
-import { Flex, Spin, Typography } from "antd";
 import { PhiButtonControl } from "../../../../../components/controls/phi-button-control";
 import { PhiAlertControl } from "../../../../../components/controls/phi-alert-control";
-import { PHIS_SITE_KEY_HEADER } from "../../../../../constants/http-headers";
+import { PhiFlexControl } from "../../../../../components/controls/phi-flex-control";
+import { PhiTypographyControl } from "../../../../../components/controls/phi-typography-control";
+import { PhiSpinControl } from "../../../../../components/controls/phi-spin-control";
 export function PhiAuthLogoutWidgetClient({ runtime, }) {
     const [error, setError] = useState(null);
-    const locale = runtime?.locale.current ?? "en";
-    const siteKey = runtime?.site.key ?? "";
+    const locale = runtime.locale.current;
+    const siteKey = runtime.site.key;
     useEffect(() => {
         const controller = new AbortController();
         async function logout() {
             try {
-                const csrfResponse = await fetch("/api/auth/csrf", {
-                    credentials: "include",
-                    cache: "no-store",
-                    signal: controller.signal,
-                });
-                const csrfPayload = await csrfResponse.json().catch(() => null);
-                const token = typeof csrfPayload?.token === "string" ? csrfPayload.token : "";
-                if (!csrfResponse.ok || !token)
-                    throw new Error("Logout could not be initialized.");
-                const headers = new Headers({ "x-csrf-token": token });
-                if (siteKey)
-                    headers.set(PHIS_SITE_KEY_HEADER, siteKey);
-                const response = await fetch("/api/auth/logout", {
-                    method: "POST",
-                    credentials: "include",
-                    cache: "no-store",
-                    headers,
-                    signal: controller.signal,
-                });
-                if (!response.ok)
-                    throw new Error("Logout failed.");
+                await requestPhiLogout({ signal: controller.signal, failedMessage: "Logout failed." });
+                /* Replaced, not assigned: Back must not return to a sign-out that already happened. */
                 window.location.replace(`/${locale}`);
             }
             catch (caught) {
@@ -45,5 +28,5 @@ export function PhiAuthLogoutWidgetClient({ runtime, }) {
         void logout();
         return () => controller.abort();
     }, [locale, siteKey]);
-    return (_jsx(Flex, { vertical: true, align: "center", gap: "middle", children: error ? (_jsxs(_Fragment, { children: [_jsx(PhiAlertControl, { level: "error", showIcon: true, title: error }), _jsx(PhiButtonControl, { onClick: () => window.location.reload(), label: "Try again" })] })) : (_jsxs(_Fragment, { children: [_jsx(Spin, {}), _jsx(Typography.Text, { type: "secondary", children: "Signing out\u2026" })] })) }));
+    return (_jsx(PhiFlexControl, { vertical: true, align: "center", gap: "middle", children: error ? (_jsxs(_Fragment, { children: [_jsx(PhiAlertControl, { level: "error", showIcon: true, title: error }), _jsx(PhiButtonControl, { onClick: () => window.location.reload(), label: "Try again" })] })) : (_jsxs(_Fragment, { children: [_jsx(PhiSpinControl, {}), _jsx(PhiTypographyControl, { type: "secondary", children: "Signing out\u2026" })] })) }));
 }

package/plugins/runtime-modules/auth/widgets/logout/config.d.ts

@@ -3,6 +3,7 @@ export declare const PHI_AUTH_LOGOUT_WIDGET_DEFINITION: {
     kind: "widget";
     pluginKey: string;
     typeKey: string;
+    slotSizePolicy: "intrinsic";
     title: string;
     description: string;
     category: "account";

package/plugins/runtime-modules/auth/widgets/logout/config.js

@@ -4,6 +4,7 @@ export const PHI_AUTH_LOGOUT_WIDGET_DEFINITION = {
     kind: "widget",
     pluginKey: resolvePhiCmsWidgetPluginKey("auth-logout"),
     typeKey: "auth-logout",
+    slotSizePolicy: "intrinsic",
     title: "Logout",
     description: "Revokes the current session through the Core Auth endpoint.",
     category: "account",

package/plugins/runtime-modules/auth/widgets/security/client.d.ts

@@ -1,3 +1,8 @@
-export declare function PhiAuthSecurityWidgetClient({ apiPath }: {
+import type { PhiAuthWorkflowBodyLabels } from "../../../../../components/widgets/label-types/auth-workflow";
+import { type PhiAuthSecurityWidgetLabels } from "../../../../../components/widgets/label-types/security";
+export declare function PhiAuthSecurityWidgetClient({ apiPath, labels, workflowLabels, }: {
     apiPath?: string;
+    labels: PhiAuthSecurityWidgetLabels;
+    /** The shared second-factor body's own words; adding a device is drawn by that component. */
+    workflowLabels: PhiAuthWorkflowBodyLabels;
 }): import("react").JSX.Element;

package/plugins/runtime-modules/auth/widgets/security/client.js

@@ -1,22 +1,20 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { lazy, Suspense, useCallback, useEffect, useState } from "react";
-import { Card, Flex, List, Skeleton, Typography } from "antd";
 import { PhiTagControl } from "../../../../../components/controls/phi-tag-control";
 import { PhiButtonControl } from "../../../../../components/controls/phi-button-control";
+import { PhiCardControl } from "../../../../../components/controls/phi-card-control";
+import { PhiEntryListControl } from "../../../../../components/controls/phi-entry-list-control";
 import { PhiAlertControl } from "../../../../../components/controls/phi-alert-control";
 import { PhiConfirmControl } from "../../../../../components/controls/phi-confirm-control";
+import { PhiFlexControl } from "../../../../../components/controls/phi-flex-control";
+import { PhiTypographyControl } from "../../../../../components/controls/phi-typography-control";
+import { PhiSkeletonControl } from "../../../../../components/controls/phi-skeleton-control";
+import { readPhiJsonError, requestPhiJson } from "../../../../../helpers/client-json-request";
+import { formatPhiAuthSecurityWidgetLabel, } from "../../../../../components/widgets/label-types/security";
 const PhiAuthWorkflowBody = lazy(() => import("../../../../../components/widgets/client/auth-workflow-body")
     .then((module) => ({ default: module.PhiAuthWorkflowBody })));
-async function getCsrfToken() {
-    const response = await fetch("/api/auth/csrf", { credentials: "include", cache: "no-store" });
-    const payload = await response.json().catch(() => null);
-    const token = typeof payload?.token === "string" ? payload.token : "";
-    if (!response.ok || !token)
-        throw new Error("Could not initialize authentication session.");
-    return token;
-}
-export function PhiAuthSecurityWidgetClient({ apiPath = "/api/auth/account/security" }) {
+export function PhiAuthSecurityWidgetClient({ apiPath = "/api/auth/account/security", labels, workflowLabels, }) {
     const [payload, setPayload] = useState(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
@@ -24,81 +22,87 @@ export function PhiAuthSecurityWidgetClient({ apiPath = "/api/auth/account/secur
     const load = useCallback(async (signal) => {
         setLoading(true);
         try {
-            const response = await fetch(apiPath, {
-                credentials: "include",
-                cache: "no-store",
-                headers: { accept: "application/json" },
-                signal,
-            });
-            const next = await response.json().catch(() => null);
-            if (!response.ok || !next?.ok)
-                throw new Error("Account security could not be loaded.");
+            const { ok, payload: next } = await requestPhiJson(apiPath, { signal });
+            if (!ok || !next?.ok)
+                throw new Error(labels.errors.loadFailed);
             setPayload(next);
             setError(null);
         }
         catch (caught) {
             if (!signal?.aborted)
-                setError(caught instanceof Error ? caught.message : "Account security could not be loaded.");
+                setError(caught instanceof Error ? caught.message : labels.errors.loadFailed);
         }
         finally {
             if (!signal?.aborted)
                 setLoading(false);
         }
-    }, [apiPath]);
+    }, [apiPath, labels.errors.loadFailed]);
     useEffect(() => {
         const controller = new AbortController();
         queueMicrotask(() => void load(controller.signal));
         return () => controller.abort();
     }, [load]);
-    async function removeFactor(factorId) {
+    /*
+     * Both removals are one delete behind a confirm, which no Form expresses: there is nothing to fill
+     * in. The answer is the list read again, because the server decides what remains.
+     */
+    async function removeAndReload(path, failedMessage) {
         try {
-            const token = await getCsrfToken();
-            const response = await fetch(`/api/auth/account/factors/${encodeURIComponent(factorId)}`, {
+            const reply = await requestPhiJson(path, {
                 method: "DELETE",
-                credentials: "include",
-                cache: "no-store",
-                headers: { accept: "application/json", "x-csrf-token": token },
+                csrf: true,
+                csrfUnavailableMessage: labels.errors.csrfFailed,
             });
-            const body = await response.json().catch(() => null);
-            if (!response.ok)
-                throw new Error(body?.error ?? "Authentication factor could not be removed.");
+            if (!reply.ok)
+                throw new Error(readPhiJsonError(reply.payload, failedMessage));
             await load();
         }
         catch (caught) {
-            setError(caught instanceof Error ? caught.message : "Authentication factor could not be removed.");
+            setError(caught instanceof Error ? caught.message : failedMessage);
         }
     }
-    async function revokeSession(sessionId) {
-        try {
-            const token = await getCsrfToken();
-            const response = await fetch(`/api/auth/account/sessions/${encodeURIComponent(sessionId)}`, {
-                method: "DELETE",
-                credentials: "include",
-                cache: "no-store",
-                headers: { accept: "application/json", "x-csrf-token": token },
-            });
-            const body = await response.json().catch(() => null);
-            if (!response.ok)
-                throw new Error(body?.error ?? "Session could not be revoked.");
-            await load();
-        }
-        catch (caught) {
-            setError(caught instanceof Error ? caught.message : "Session could not be revoked.");
-        }
+    function removeFactor(factorId) {
+        return removeAndReload(`/api/auth/account/factors/${encodeURIComponent(factorId)}`, labels.errors.factorRemoveFailed);
+    }
+    function revokeSession(sessionId) {
+        return removeAndReload(`/api/auth/account/sessions/${encodeURIComponent(sessionId)}`, labels.errors.sessionRevokeFailed);
     }
     if (enrolling) {
-        return (_jsx(Suspense, { fallback: _jsx(Skeleton, { active: true, title: false, paragraph: { rows: 4 } }), children: _jsx(PhiAuthWorkflowBody, { workflow: { state: "factor-enrollment-required", methodKey: "totp", next: "/app/security" }, onComplete: async () => {
+        return (_jsx(Suspense, { fallback: _jsx(PhiSkeletonControl, { lines: 4 }), children: _jsx(PhiAuthWorkflowBody, { mode: "enroll", next: "/app/security", labels: workflowLabels, onComplete: async () => {
                     setEnrolling(false);
                     await load();
                 } }) }));
     }
     if (loading)
-        return _jsx(Skeleton, { active: true, paragraph: { rows: 8 } });
+        return _jsx(PhiSkeletonControl, { lines: 8, withTitle: true });
     if (!payload)
-        return _jsx(PhiAlertControl, { level: "error", showIcon: true, title: error ?? "Account security is unavailable." });
-    return (_jsxs(Flex, { vertical: true, gap: "large", children: [_jsxs("div", { children: [_jsx(Typography.Title, { level: 3, children: "Security" }), _jsx(Typography.Paragraph, { type: "secondary", children: "Manage authenticator apps, linked login providers, and sessions for this site." })] }), error ? _jsx(PhiAlertControl, { level: "error", showIcon: true, title: error, dismissible: true, onDismiss: () => setError(null) }) : null, _jsx(Card, { title: "Authenticator apps", extra: _jsx(PhiButtonControl, { type: "primary", onClick: () => setEnrolling(true), label: "Add authenticator" }), children: _jsx(List, { locale: { emptyText: "No authenticator configured." }, dataSource: payload.factors.filter((factor) => factor.type === 2 && factor.confirmedAt), renderItem: (factor) => (_jsxs(List.Item, { actions: [
-                            _jsx(PhiConfirmControl, { title: "Remove this authenticator?", onConfirm: () => void removeFactor(factor.id), danger: true, trigger: { label: "Remove", type: "link", danger: true } }, "remove"),
-                        ], children: [_jsx(List.Item.Meta, { title: factor.label ?? "Authenticator app", description: factor.lastUsedAt ? `Last used ${new Date(factor.lastUsedAt).toLocaleString()}` : "Not used yet" }), payload.policy.factor?.requiredMethod === "totp" ? _jsx(PhiTagControl, { color: "blue", children: "Required" }) : null] })) }) }), _jsx(Card, { title: "Linked login providers", children: _jsx(List, { locale: { emptyText: "No external login provider linked." }, dataSource: payload.identities, renderItem: (identity) => (_jsx(List.Item, { children: _jsx(List.Item.Meta, { title: identity.providerKey, description: identity.issuer }) })) }) }), _jsx(Card, { title: "Sessions", children: _jsx(List, { dataSource: payload.sessions, renderItem: (session) => (_jsxs(List.Item, { actions: session.id !== payload.currentSessionId && !session.revokedAt ? [
-                            _jsx(PhiConfirmControl, { title: "Revoke this session?", onConfirm: () => void revokeSession(session.id), danger: true, trigger: { label: "Revoke", type: "link", danger: true } }, "revoke"),
-                        ] : undefined, children: [_jsx(List.Item.Meta, { title: session.id === payload.currentSessionId ? "Current session" : "Session", description: [session.ipAddress, session.userAgent].filter(Boolean).join(" · ") || "No device details" }), session.revokedAt ? _jsx(PhiTagControl, { children: "Revoked" }) : _jsx(PhiTagControl, { color: "green", children: "Active" })] })) }) })] }));
+        return _jsx(PhiAlertControl, { level: "error", showIcon: true, title: error ?? labels.errors.unavailable });
+    return (_jsxs(PhiFlexControl, { vertical: true, gap: "large", children: [_jsx(PhiTypographyControl, { presentation: "paragraph", type: "secondary", children: labels.intro }), error ? _jsx(PhiAlertControl, { level: "error", showIcon: true, title: error, dismissible: true, onDismiss: () => setError(null) }) : null, _jsx(PhiCardControl, { title: labels.authenticators.title, toolbar: _jsx(PhiButtonControl, { type: "primary", onClick: () => setEnrolling(true), label: labels.authenticators.add }), children: _jsx(PhiEntryListControl, { emptyDescription: labels.authenticators.empty, entries: payload.factors
+                        .filter((factor) => factor.type === 2 && factor.confirmedAt)
+                        .map((factor) => ({
+                        key: String(factor.id),
+                        title: factor.label ?? labels.authenticators.unnamed,
+                        description: factor.lastUsedAt
+                            ? formatPhiAuthSecurityWidgetLabel(labels.authenticators.lastUsed, new Date(factor.lastUsedAt).toLocaleString())
+                            : labels.authenticators.neverUsed,
+                        status: payload.policy.factor?.requiredMethod === "totp"
+                            ? _jsx(PhiTagControl, { color: "blue", children: labels.authenticators.required })
+                            : null,
+                        action: (_jsx(PhiConfirmControl, { title: labels.authenticators.removeConfirm, onConfirm: () => void removeFactor(factor.id), danger: true, trigger: { label: labels.authenticators.remove, type: "link", danger: true } })),
+                    })) }) }), _jsx(PhiCardControl, { title: labels.providers.title, children: _jsx(PhiEntryListControl, { emptyDescription: labels.providers.empty, entries: payload.identities.map((identity) => ({
+                        key: identity.providerKey,
+                        title: identity.providerKey,
+                        description: identity.issuer,
+                    })) }) }), _jsx(PhiCardControl, { title: labels.sessions.title, children: _jsx(PhiEntryListControl, { emptyDescription: labels.sessions.empty, entries: payload.sessions.map((session) => ({
+                        key: String(session.id),
+                        title: session.id === payload.currentSessionId ? labels.sessions.current : labels.sessions.other,
+                        description: [session.ipAddress, session.userAgent].filter(Boolean).join(" · ")
+                            || labels.sessions.noDeviceDetails,
+                        status: session.revokedAt
+                            ? _jsx(PhiTagControl, { children: labels.sessions.revoked })
+                            : _jsx(PhiTagControl, { color: "green", children: labels.sessions.active }),
+                        action: session.id !== payload.currentSessionId && !session.revokedAt
+                            ? (_jsx(PhiConfirmControl, { title: labels.sessions.revokeConfirm, onConfirm: () => void revokeSession(session.id), danger: true, trigger: { label: labels.sessions.revoke, type: "link", danger: true } }))
+                            : null,
+                    })) }) })] }));
 }

package/plugins/runtime-modules/auth/widgets/security/config.d.ts

@@ -3,6 +3,7 @@ export declare const PHI_AUTH_SECURITY_WIDGET_DEFINITION: {
     kind: "widget";
     pluginKey: string;
     typeKey: string;
+    slotSizePolicy: "intrinsic";
     title: string;
     description: string;
     category: "account";

package/plugins/runtime-modules/auth/widgets/security/config.js

@@ -4,6 +4,7 @@ export const PHI_AUTH_SECURITY_WIDGET_DEFINITION = {
     kind: "widget",
     pluginKey: resolvePhiCmsWidgetPluginKey("auth-security"),
     typeKey: "auth-security",
+    slotSizePolicy: "intrinsic",
     title: "Account Security",
     description: "Authenticated self-service for factors, identities, recovery, and sessions.",
     category: "account",

package/plugins/runtime-modules/auth/widgets/security/server.js

@@ -1,6 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PhiRuntimeRenderClientType } from "../../../../../constants/runtime-render-client-types";
 import { PhiRuntimeModuleRenderClientHost } from "../../../../../components/runtime/runtime-module-render-client-manifest";
+import { getPhiAuthSecurityWidgetLabels } from "../../../../../components/widgets/label-sets/security";
+import { getPhiAuthWorkflowBodyLabels } from "../../../../../components/widgets/label-sets/auth-workflow";
+import { phiRuntime } from "../../../../../server-helpers/phi-runtime";
 export async function PhiAuthSecurityWidget({ runtime, config }) {
-    return (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiRuntimeRenderClientType.AuthSecurity, componentProps: { runtime, config, apiPath: "/api/auth/account/security" } }));
+    const rt = phiRuntime(runtime);
+    /* Two sets: this surface's own, and the body's, because adding a device is drawn by the shared one. */
+    const [labels, workflowLabels] = await Promise.all([
+        getPhiAuthSecurityWidgetLabels({
+            apiBaseUrl: rt.apiBaseUrl,
+            internalToken: rt.internalToken,
+            locale: runtime.locale.current,
+        }),
+        getPhiAuthWorkflowBodyLabels({
+            apiBaseUrl: rt.apiBaseUrl,
+            internalToken: rt.internalToken,
+            locale: runtime.locale.current,
+        }),
+    ]);
+    return (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiRuntimeRenderClientType.AuthSecurity, componentProps: { runtime, config, labels, workflowLabels, apiPath: "/api/auth/account/security" } }));
 }

package/plugins/runtime-modules/avatar/addresses.js

@@ -0,0 +1,19 @@
+import { PHI_AVATAR_RUNTIME_MODULE_ID } from "./ids";
+import { createPhiPresetCmsInstanceIdMap } from "../../../types/cms-instance-id";
+/**
+ * The Avatar Module's Area-owned Overlay.
+ *
+ * Area-owned rather than Page-owned so it exists wherever the App is: a Page-owned Overlay would only
+ * be reachable while its own Page is the current tree, which is not what "change my picture" means.
+ * Ids come from the preset-id factory, so they survive an Area revision and can be addressed by a
+ * Widget that was rendered from a different preset.
+ */
+const PRESET_KEY = "avatar-app-picker-overlay";
+export const PHI_AVATAR_OVERLAY_IDS = {
+    presetKey: PRESET_KEY,
+    ...createPhiPresetCmsInstanceIdMap({
+        domain: "area",
+        ownerModuleId: PHI_AVATAR_RUNTIME_MODULE_ID,
+        presetKey: PRESET_KEY,
+    }, ["overlayPicker", "layoutBody", "widgetUpload", "widgetPicker"]),
+};

package/plugins/runtime-modules/avatar/definition.d.ts

@@ -18,10 +18,10 @@ export declare const PHI_AVATAR_RUNTIME_MODULE_DEFINITION: {
     title: string;
     description: string;
     category: "identity";
-    iconFamily: string;
+    icon: string;
     mediaSpaces: {
         user: {
-            kinds: "image"[];
+            kinds: readonly ["image"];
         };
     };
 };

package/plugins/runtime-modules/avatar/definition.js

@@ -1,4 +1,5 @@
 import { PHI_AVATAR_RUNTIME_MODULE_ID } from "./ids";
+import { PHI_AVATAR_USER_SPACE_MEDIA_KINDS } from "./media-spaces";
 import { PHI_CORE_SERVER_BINDING } from "../../../types/server-capabilities";
 /**
  * The picture a person shows as themselves, and the first Module to need User Media Spaces.
@@ -20,7 +21,9 @@ export const PHI_AVATAR_RUNTIME_MODULE_DEFINITION = {
     title: "Avatar",
     description: "A personal picture, stored in the person's own Media Space.",
     category: "identity",
-    iconFamily: "account",
+    icon: "antd:user-outlined",
     // A picture and nothing else: the Module has one purpose and states it rather than inheriting a list.
-    mediaSpaces: { user: { kinds: ["image"] } },
+    // The list is its own module, because the picker reads the same one to decide what its file dialog
+    // accepts -- and it runs in a browser.
+    mediaSpaces: { user: { kinds: PHI_AVATAR_USER_SPACE_MEDIA_KINDS } },
 };

package/plugins/runtime-modules/avatar/labels.d.ts

@@ -0,0 +1,25 @@
+import "server-only";
+import { type PhiGlobalTranslatorOptions } from "../../../gateway/tr";
+export declare function getPhiAvatarWidgetLabels(options: PhiGlobalTranslatorOptions): Promise<{
+    title: string;
+    description: string;
+    changeLabel: string;
+    removeLabel: string;
+    emptyText: string;
+    overlayTitle: string;
+    uploadLabel: string;
+    uploadHint: string;
+    unavailableText: string;
+    feedback: {
+        errorTitle: string;
+        errorGeneric: string;
+        errorNetwork: string;
+        errorTooLarge: string;
+        errorNotAnImage: string;
+        errorDuplicate: string;
+        errorQuotaExceeded: string;
+        errorSpaceUnavailable: string;
+        errorStorageUnreachable: string;
+        successText: string;
+    };
+}>;

package/plugins/runtime-modules/avatar/media-spaces.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A picture and nothing else, as both halves of the offer need to read it.
+ *
+ * Its own file because the two readers sit on opposite sides of the Server/Client seam: the Module
+ * definition declares the Space on the Server, and the picker offers the file dialog in a browser. A
+ * Client Widget that reached for the definition to find this out would pull the Module's Providers and
+ * Forms into the browser bundle with it.
+ */
+export declare const PHI_AVATAR_USER_SPACE_MEDIA_KINDS: readonly ["image"];

package/plugins/runtime-modules/avatar/media-spaces.js

@@ -0,0 +1,9 @@
+/**
+ * A picture and nothing else, as both halves of the offer need to read it.
+ *
+ * Its own file because the two readers sit on opposite sides of the Server/Client seam: the Module
+ * definition declares the Space on the Server, and the picker offers the file dialog in a browser. A
+ * Client Widget that reached for the definition to find this out would pull the Module's Providers and
+ * Forms into the browser bundle with it.
+ */
+export const PHI_AVATAR_USER_SPACE_MEDIA_KINDS = ["image"];

package/plugins/runtime-modules/avatar/module.d.ts

@@ -11,10 +11,10 @@ export declare const PHI_AVATAR_RUNTIME_MODULE: {
     title: string;
     description: string;
     category: "identity";
-    iconFamily: string;
+    icon: string;
     mediaSpaces: {
         user: {
-            kinds: "image"[];
+            kinds: readonly ["image"];
         };
     };
 };

package/plugins/runtime-modules/avatar/overlay-tree.js

@@ -0,0 +1,12 @@
+import { PHI_AVATAR_RUNTIME_MODULE_ID } from "./ids";
+import { PHI_AVATAR_OVERLAY_IDS } from "./addresses";
+export const PHI_AVATAR_RUNTIME_MODULE_AREA_OVERLAYS = [{
+        ownerModuleId: PHI_AVATAR_RUNTIME_MODULE_ID,
+        presetKey: PHI_AVATAR_OVERLAY_IDS.presetKey,
+        presetVersion: 1,
+        area: "app",
+        loadTree: async ({ page, runtime }) => {
+            const { buildPhiAvatarAreaPickerOverlayTree } = await import("./overlay-tree.server");
+            return buildPhiAvatarAreaPickerOverlayTree({ page, runtime });
+        },
+    }];

package/plugins/runtime-modules/avatar/overlay-tree.server.js

@@ -0,0 +1,95 @@
+import { PHI_CMS_DEFAULT_SLOT_INDEX } from "../../../constants/cms-layout-types";
+import { createPhiCmsPresetNodes } from "../../../helpers/cms-preset-nodes";
+import { PHI_COLOR, PHI_SPACE } from "../../../theme/antd-css-var-contract";
+import { createPhiSignalAddress } from "../../../types/signals";
+import { getPhiAvatarWidgetLabels } from "./labels";
+import { PHI_AVATAR_OVERLAY_IDS } from "./addresses";
+import { readPhiServerApiCredentials } from "../../../helpers/phis-server-credentials";
+/**
+ * The Avatar Module's Overlay: one modal holding the picker.
+ *
+ * `mountPolicy` is the default, so the body is built on first open rather than on every App page --
+ * an upload control nobody has asked for should not cost a render. The Overlay listens for `open` and
+ * `close` on its own address, which is all a Widget elsewhere needs to reach it, and emits nothing:
+ * there is no Controller here to tell, because binding the picture is a route call the picker makes.
+ */
+export async function buildPhiAvatarAreaPickerOverlayTree({ page, runtime, }) {
+    const ids = PHI_AVATAR_OVERLAY_IDS;
+    const labels = await getPhiAvatarWidgetLabels({
+        apiBaseUrl: readPhiServerApiCredentials().apiBaseUrl,
+        internalToken: readPhiServerApiCredentials().internalToken,
+        locale: runtime.locale.current,
+    });
+    const nodes = createPhiCmsPresetNodes(page);
+    return {
+        page,
+        regions: [],
+        overlays: [nodes.overlay({
+                id: ids.overlayPicker,
+                overlayType: "modal",
+                bodyLayoutNodeId: ids.layoutBody,
+                sortOrder: 0,
+                label: "app avatar picker",
+                config: {
+                    title: labels.overlayTitle,
+                    controlSize: "medium",
+                    width: { compact: "calc(100vw - 32px)", medium: 480, wide: 520 },
+                    /*
+                     * `immediate`, not `request`. Request mode keeps the Overlay open and emits a `closeRequest`
+                     * for a Controller to answer -- and this Module has no Controller, so the X and the mask were
+                     * asking a question nobody was listening for. Nothing here is transactional enough to need
+                     * that: an upload abandoned mid-flight leaves a staging object and an expiring session, both
+                     * of which the maintenance path already reaches.
+                     */
+                    closeMode: "immediate",
+                    signalRoutes: {
+                        listens: [
+                            {
+                                routeKey: "avatar-app-picker-open",
+                                capabilityId: "open",
+                                scope: "area",
+                                channel: "dialog",
+                                action: "activate",
+                                valueType: "none",
+                                receiver: createPhiSignalAddress("cms", ids.overlayPicker),
+                            },
+                            {
+                                routeKey: "avatar-app-picker-close",
+                                capabilityId: "close",
+                                scope: "area",
+                                channel: "dialog",
+                                action: "close",
+                                valueType: "none",
+                                receiver: createPhiSignalAddress("cms", ids.overlayPicker),
+                            },
+                        ],
+                    },
+                },
+            })],
+        layoutNodes: [nodes.layout({
+                id: ids.layoutBody,
+                parentLayoutNodeId: null,
+                creationPreset: { layoutKind: "verticalflex", preset: "panel" },
+                typeKey: "flex-vertical",
+                slotIndex: PHI_CMS_DEFAULT_SLOT_INDEX,
+                sortOrder: 0,
+                label: "app avatar picker body",
+                config: {
+                    gap: PHI_SPACE.base,
+                    padding: PHI_SPACE.base,
+                    margin: 0,
+                    background: PHI_COLOR.bgLayout,
+                    border: false,
+                },
+            })],
+        contentWidgets: [nodes.widget({
+                id: ids.widgetUpload,
+                parentLayoutNodeId: ids.layoutBody,
+                typeKey: "account-avatar-picker",
+                slotIndex: PHI_CMS_DEFAULT_SLOT_INDEX,
+                sortOrder: 0,
+                label: "app avatar picker upload",
+                config: {},
+            })],
+    };
+}

package/plugins/runtime-modules/avatar/presets.js

@@ -1,4 +1,4 @@
-import { PHI_AVATAR_OVERLAY_IDS } from "../../../components/runtime/avatar-overlay-ids";
+import { PHI_AVATAR_OVERLAY_IDS } from "./addresses";
 import { PHI_APP_ACCOUNT_NAV_ITEM_KEY } from "../area-definitions";
 /**
  * The Avatar Module's one entry in the App account menu.

package/plugins/runtime-modules/avatar/server.js

@@ -1,7 +1,6 @@
 import { definePhiRuntimeModuleServerAreaContribution } from "../area-contributions";
 import { PHI_AVATAR_RUNTIME_MODULE_DEFINITION } from "./definition";
-// Der Overlay-Baum liegt noch unter components/regions/presets; Stufe 2 holt ihn hierher.
-import { PHI_AVATAR_RUNTIME_MODULE_AREA_OVERLAYS } from "../../../components/regions/presets/phi-avatar-area-overlay-tree";
+import { PHI_AVATAR_RUNTIME_MODULE_AREA_OVERLAYS } from "./overlay-tree";
 import { PHI_AVATAR_RUNTIME_MODULE_NAVIGATION } from "./presets";
 import { PHI_AVATAR_RUNTIME_MODULE_WIDGETS } from "./widgets";
 export function createPhiAvatarRuntimeModuleServerAreaContribution() {

package/plugins/runtime-modules/avatar/widgets/account-avatar/authoring.d.ts

@@ -1,3 +1,2 @@
-import type { PhiCmsBuilderWidgetPlugin } from "../../../../../types";
 import type { PhiCmsPaddingOnlyWidgetConfig } from "../../../../../components/widgets/config/helpers";
-export declare const PHI_ACCOUNT_AVATAR_WIDGET_BUILDER_PLUGIN: PhiCmsBuilderWidgetPlugin<PhiCmsPaddingOnlyWidgetConfig>;
+export declare const PHI_ACCOUNT_AVATAR_WIDGET_BUILDER_PLUGIN: import("../../../../../types").PhiCmsBuilderWidgetPlugin<PhiCmsPaddingOnlyWidgetConfig>;

package/plugins/runtime-modules/avatar/widgets/account-avatar/authoring.js

@@ -1,8 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { createPhiCmsBuilderWidgetPlugin } from "../../../../../plugins/factories/widget-builder-plugin";
 import { PHI_ACCOUNT_AVATAR_WIDGET_DEFINITION } from "../../../../../plugins/runtime-modules/avatar/widgets/account-avatar/config";
 import { PhiWidgetEditorPlaceholder } from "../../../../../components/widgets/builder/widget-editor-placeholder";
-export const PHI_ACCOUNT_AVATAR_WIDGET_BUILDER_PLUGIN = {
-    ...PHI_ACCOUNT_AVATAR_WIDGET_DEFINITION,
-    renderEditor: ({ widget }) => (_jsx(PhiWidgetEditorPlaceholder, { widget: widget, pluginTitle: PHI_ACCOUNT_AVATAR_WIDGET_DEFINITION.title, summary: "The signed-in person's own picture, with a control to change it." })),
-};
+export const PHI_ACCOUNT_AVATAR_WIDGET_BUILDER_PLUGIN = createPhiCmsBuilderWidgetPlugin(PHI_ACCOUNT_AVATAR_WIDGET_DEFINITION, ({ widget }) => (_jsx(PhiWidgetEditorPlaceholder, { widget: widget, pluginTitle: PHI_ACCOUNT_AVATAR_WIDGET_DEFINITION.title, summary: "The signed-in person's own picture, with a control to change it." })));

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

@@ -1,16 +1,16 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from "react";
-import { Flex, Typography } from "antd";
-import { UserOutlined } from "@ant-design/icons";
-import { Avatar } from "antd";
 import { PhiAlertControl } from "../../../../../components/controls/phi-alert-control";
+import { PhiAvatarControl } from "../../../../../components/controls/phi-avatar-control";
 import { PhiButtonControl } from "../../../../../components/controls/phi-button-control";
 import { clearPhiViewerAvatar, fetchPhiViewerAvatar, } from "../../../../../components/account/avatar-client";
 import { PHI_AVATAR_REVISION } from "../../../../../components/account/avatar-revision";
-import { PHI_AVATAR_OVERLAY_IDS } from "../../../../../components/runtime/avatar-overlay-ids";
+import { PHI_AVATAR_OVERLAY_IDS } from "../../addresses";
 import { createPhiSignalAddress } from "../../../../../types/signals";
 import { createPhiSignalCorrelationId, usePhiSignalDispatcher, } from "../../../../../components/runtime/runtime-signal-bus";
+import { PhiFlexControl } from "../../../../../components/controls/phi-flex-control";
+import { PhiTypographyControl } from "../../../../../components/controls/phi-typography-control";
 export function PhiAccountAvatarWidgetClient({ labels, config }) {
     const dispatchSignal = usePhiSignalDispatcher();
     const revision = useSyncExternalStore(PHI_AVATAR_REVISION.subscribe, PHI_AVATAR_REVISION.getSnapshot, PHI_AVATAR_REVISION.getServerSnapshot);
@@ -59,5 +59,5 @@ export function PhiAccountAvatarWidgetClient({ labels, config }) {
     // Thumbnail first, then the original: a freshly uploaded picture has no variant yet, and showing
     // nothing until one exists would read as a failed upload.
     const src = avatar?.thumbnailUrl ?? avatar?.previewUrl ?? avatar?.deliveryUrl ?? undefined;
-    return (_jsxs(Flex, { vertical: true, gap: "small", style: { padding: config?.padding }, children: [_jsx(Typography.Title, { level: 5, style: { margin: 0 }, children: labels.title }), _jsx(Typography.Text, { type: "secondary", children: labels.description }), error ? _jsx(PhiAlertControl, { level: "error", title: labels.feedback.errorTitle, description: error }) : null, _jsxs(Flex, { align: "center", gap: "middle", children: [_jsx(Avatar, { size: 64, src: src, icon: _jsx(UserOutlined, {}), alt: avatar?.altText ?? labels.title }), _jsxs(Flex, { vertical: true, gap: "small", children: [!avatar ? _jsx(Typography.Text, { type: "secondary", children: labels.emptyText }) : null, _jsxs(Flex, { gap: "small", wrap: true, children: [_jsx(PhiButtonControl, { type: "primary", label: labels.changeLabel, onClick: openPicker, disabled: busy }), avatar ? (_jsx(PhiButtonControl, { label: labels.removeLabel, onClick: removePicture, disabled: busy })) : null] })] })] })] }));
+    return (_jsxs(PhiFlexControl, { vertical: true, gap: "small", style: { padding: config?.padding }, children: [_jsx(PhiTypographyControl, { presentation: "title", level: 5, style: { margin: 0 }, children: labels.title }), _jsx(PhiTypographyControl, { type: "secondary", children: labels.description }), error ? _jsx(PhiAlertControl, { level: "error", title: labels.feedback.errorTitle, description: error }) : null, _jsxs(PhiFlexControl, { align: "center", gap: "middle", children: [_jsx(PhiAvatarControl, { size: 64, src: src, alt: avatar?.altText ?? labels.title }), _jsxs(PhiFlexControl, { vertical: true, gap: "small", children: [!avatar ? _jsx(PhiTypographyControl, { type: "secondary", children: labels.emptyText }) : null, _jsxs(PhiFlexControl, { gap: "small", wrap: true, children: [_jsx(PhiButtonControl, { type: "primary", label: labels.changeLabel, onClick: openPicker, disabled: busy }), avatar ? (_jsx(PhiButtonControl, { label: labels.removeLabel, onClick: removePicture, disabled: busy })) : null] })] })] })] }));
 }

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

@@ -10,10 +10,10 @@ export declare const PHI_ACCOUNT_AVATAR_WIDGET_DEFINITION: {
     kind: "widget";
     pluginKey: string;
     typeKey: string;
+    slotSizePolicy: "intrinsic";
     title: string;
     description: string;
     category: "account";
     fields: never[];
     parseConfig: typeof parsePhiPaddingOnlyWidgetConfig;
 };
-export declare const PHI_ACCOUNT_AVATAR_WIDGET_PLUGIN_TYPE: string;