@phis/ui 0.2.0 → 0.3.0

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

@@ -1,5 +1,6 @@
 import { buildPhiSidebarRoutePresetDescriptor } from "../sidebar-route";
 import { PHI_LOCALIZATION_RUNTIME_MODULE_ID } from "./ids";
+import { PHI_EDITOR_TRANSLATIONS_TOUR } from "./tour";
 export const PHI_LOCALIZATION_RUNTIME_MODULE_ROUTES = [
     buildPhiSidebarRoutePresetDescriptor({
         area: "admin",
@@ -21,16 +22,19 @@ export const PHI_LOCALIZATION_RUNTIME_MODULE_ROUTES = [
      * off left the Page and its menu entry standing over a Table that could not load. Now it goes with the
      * Module, like the Locales Page above it and like any Module outside this package would have to.
      */
-    buildPhiSidebarRoutePresetDescriptor({
-        area: "editor",
-        anchor: "main",
-        ownerModuleId: PHI_LOCALIZATION_RUNTIME_MODULE_ID,
-        presetKey: "editor-translations-page",
-        title: "Translations",
-        path: "/translations",
-        itemKey: "@phis/ui/modules/localization/nav/editor/translations",
-        icon: "antd:translation",
-        loadTree: ({ page, runtime }) => import("./trees/phi-default-editor-translations-page-tree")
-            .then((module) => module.buildPhiDefaultEditorTranslationsPageTree({ page, runtime })),
-    }),
+    {
+        ...buildPhiSidebarRoutePresetDescriptor({
+            area: "editor",
+            anchor: "main",
+            ownerModuleId: PHI_LOCALIZATION_RUNTIME_MODULE_ID,
+            presetKey: "editor-translations-page",
+            title: "Translations",
+            path: "/translations",
+            itemKey: "@phis/ui/modules/localization/nav/editor/translations",
+            icon: "antd:translation",
+            loadTree: ({ page, runtime }) => import("./trees/phi-default-editor-translations-page-tree")
+                .then((module) => module.buildPhiDefaultEditorTranslationsPageTree({ page, runtime })),
+        }),
+        tour: PHI_EDITOR_TRANSLATIONS_TOUR,
+    },
 ];

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

@@ -12,6 +12,7 @@ export function createPhiLocalizationRuntimeModuleServerAreaContribution() {
             layouts: [],
             routes: PHI_LOCALIZATION_RUNTIME_MODULE_ROUTES,
             dashboardCards: {
+                areas: ["admin"],
                 load: () => import("./cards")
                     .then((module) => module.PHI_LOCALIZATION_RUNTIME_MODULE_DASHBOARD_CARDS),
             },

package/plugins/runtime-modules/localization/services/options.js

@@ -1,12 +1,13 @@
 "use client";
+import { isPhiRecord } from "../../../../helpers/is-record";
 import { createPhiControlOptionsProviderClient, } from "../../../../components/controls/phi-options-provider";
 import { PHI_LOCALIZATION_RUNTIME_DATA_PROVIDER_KEYS } from "../ids";
 function readOptions(value) {
-    if (!value || typeof value !== "object" || Array.isArray(value))
+    if (!isPhiRecord(value))
         return [];
     const locales = value.platformLocales;
     return Array.isArray(locales) ? locales.flatMap((entry) => {
-        if (!entry || typeof entry !== "object" || Array.isArray(entry))
+        if (!isPhiRecord(entry))
             return [];
         const record = entry;
         return typeof record.code === "string"
@@ -15,16 +16,16 @@ function readOptions(value) {
     }) : [];
 }
 function readSiteLocaleOptions(value, localeKey = "availableLocales") {
-    if (!value || typeof value !== "object" || Array.isArray(value))
+    if (!isPhiRecord(value))
         return { options: [] };
     const record = value;
-    const site = record.site && typeof record.site === "object" && !Array.isArray(record.site)
+    const site = isPhiRecord(record.site)
         ? record.site
         : {};
     const locales = Array.isArray(site[localeKey]) ? site[localeKey] : [];
     return {
         options: locales.flatMap((entry) => {
-            if (!entry || typeof entry !== "object" || Array.isArray(entry))
+            if (!isPhiRecord(entry))
                 return [];
             const locale = entry;
             return typeof locale.code === "string"
@@ -35,12 +36,12 @@ function readSiteLocaleOptions(value, localeKey = "availableLocales") {
     };
 }
 function readContextOptions(value) {
-    if (!value || typeof value !== "object" || Array.isArray(value))
+    if (!isPhiRecord(value))
         return { options: [] };
     const contexts = value.contexts;
     return {
         options: [{ value: "all", label: "All" }, ...(Array.isArray(contexts) ? contexts.flatMap((entry) => {
-                if (!entry || typeof entry !== "object" || Array.isArray(entry))
+                if (!isPhiRecord(entry))
                     return [];
                 const context = entry;
                 return typeof context.context === "string" && context.context.trim() !== ""
@@ -68,7 +69,14 @@ function resolveAdminSiteLocales(context) {
     return readSiteLocaleOptions(context.asyncData, "targetLocales");
 }
 function resolvePlatformLocales(context) {
-    return { options: readOptions(context.asyncData) };
+    const options = readOptions(context.asyncData);
+    // A field that depends on the chosen languages is offered only those; the chooser itself, all of them.
+    const chosen = context.dependencies.availableLocales;
+    return {
+        options: Array.isArray(chosen)
+            ? options.filter((option) => chosen.includes(option.value))
+            : options,
+    };
 }
 export const PhiLocalizationPlatformLocalesOptionsProviderClient = createPhiControlOptionsProviderClient({
     key: PHI_LOCALIZATION_RUNTIME_DATA_PROVIDER_KEYS.platformLocales,

package/plugins/runtime-modules/localization/services/table.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useMemo, useRef } from "react";
+import { buildPhiTablePageParams, createPhiTableProviderRequestInit, readPhiTableRows, readPhiTableStringFilter, } from "../../../../components/widgets/client/shared/phi-table-provider-request";
 import { PHI_LOCALIZATION_RUNTIME_DATA_PROVIDER_KEYS } from "../ids";
 import { PHI_SIGNAL_VALUE_SCHEMAS } from "../../../../types/signals";
 import { PhiTableProviderError, } from "../../../../types/table-widget";
@@ -12,19 +13,9 @@ import { isPhiRecord } from "../../../../helpers/is-record";
 import { readPhiTableProviderResponse, } from "../../../../components/widgets/client/shared/phi-table-provider-response";
 const ADMIN_LOCALES_API_PATH = "/api/site/admin/locales";
 const EDITOR_TRANSLATIONS_API_PATH = "/api/site/editor/translations";
-function readRows(value) {
-    return Array.isArray(value) ? value.filter(isPhiRecord) : [];
-}
-function readStringFilter(query, key) {
-    const value = query.filters?.[key];
-    return typeof value === "string" ? value.trim() : "";
-}
 const RESPONSE_OPTIONS = { subject: "Localization" };
 function buildQueryParams(query) {
-    const params = new URLSearchParams({
-        page: String(query.page && query.page > 0 ? query.page : 1),
-        pageSize: String(query.pageSize && query.pageSize > 0 ? query.pageSize : 25),
-    });
+    const params = buildPhiTablePageParams(query);
     const search = query.search?.trim() ?? "";
     if (search)
         params.set("search", search);
@@ -32,18 +23,13 @@ function buildQueryParams(query) {
 }
 async function loadSiteTranslations({ query, signal, }) {
     const params = buildQueryParams(query);
-    const locale = readStringFilter(query, "locale");
+    const locale = readPhiTableStringFilter(query, "locale");
     if (locale)
         params.set("locale", locale);
-    const result = await readPhiTableProviderResponse(await fetch(`${ADMIN_LOCALES_API_PATH}?${params.toString()}`, {
-        cache: "no-store",
-        credentials: "include",
-        headers: { accept: "application/json" },
-        signal,
-    }), RESPONSE_OPTIONS);
+    const result = await readPhiTableProviderResponse(await fetch(`${ADMIN_LOCALES_API_PATH}?${params.toString()}`, createPhiTableProviderRequestInit(signal)), RESPONSE_OPTIONS);
     const translations = isPhiRecord(result?.translations) ? result.translations : {};
     const selectedLocale = typeof result?.selectedLocale === "string" ? result.selectedLocale : "";
-    const rows = readRows(translations.rows).map((row) => ({
+    const rows = readPhiTableRows(translations.rows).map((row) => ({
         ...row,
         sourceContext: typeof row.sourceContext === "string" && row.sourceContext.trim()
             ? row.sourceContext
@@ -62,31 +48,26 @@ async function loadSiteTranslations({ query, signal, }) {
             : undefined,
         facets: {
             site: isPhiRecord(result?.site) ? result.site : {},
-            platformLocales: readRows(result?.platformLocales),
+            platformLocales: readPhiTableRows(result?.platformLocales),
             selectedLocale,
         },
     };
 }
 async function loadEditorTranslations({ query, signal, }) {
     const params = buildQueryParams(query);
-    const locale = readStringFilter(query, "locale");
-    const context = readStringFilter(query, "context");
-    const status = readStringFilter(query, "status");
+    const locale = readPhiTableStringFilter(query, "locale");
+    const context = readPhiTableStringFilter(query, "context");
+    const status = readPhiTableStringFilter(query, "status");
     if (locale)
         params.set("locale", locale);
     if (context && context !== "all")
         params.set("ctx", context);
     if (status)
         params.set("status", status);
-    const result = await readPhiTableProviderResponse(await fetch(`${EDITOR_TRANSLATIONS_API_PATH}?${params.toString()}`, {
-        cache: "no-store",
-        credentials: "include",
-        headers: { accept: "application/json" },
-        signal,
-    }), RESPONSE_OPTIONS);
+    const result = await readPhiTableProviderResponse(await fetch(`${EDITOR_TRANSLATIONS_API_PATH}?${params.toString()}`, createPhiTableProviderRequestInit(signal)), RESPONSE_OPTIONS);
     const translations = isPhiRecord(result?.translations) ? result.translations : {};
     const selectedLocale = typeof result?.selectedLocale === "string" ? result.selectedLocale : "";
-    const rows = readRows(translations.rows).map((row) => ({
+    const rows = readPhiTableRows(translations.rows).map((row) => ({
         ...row,
         status: row.hasTranslation === true ? "translated" : "missing",
     }));
@@ -98,30 +79,29 @@ async function loadEditorTranslations({ query, signal, }) {
             ? { filters: { locale: selectedLocale } }
             : undefined,
         facets: {
-            sourceLocale: typeof result?.sourceLocale === "string" ? result.sourceLocale : "",
             selectedLocale,
-            availableLocales: readRows(site.availableLocales),
-            contexts: readRows(result?.contexts),
+            availableLocales: readPhiTableRows(site.availableLocales),
+            contexts: readPhiTableRows(result?.contexts),
         },
     };
 }
 async function loadSiteLocaleSettings(signal) {
-    const result = await readPhiTableProviderResponse(await fetch(`${ADMIN_LOCALES_API_PATH}?page=1&pageSize=1`, {
-        cache: "no-store",
-        credentials: "include",
-        headers: { accept: "application/json" },
-        signal,
-    }), RESPONSE_OPTIONS);
+    const result = await readPhiTableProviderResponse(await fetch(`${ADMIN_LOCALES_API_PATH}?page=1&pageSize=1`, createPhiTableProviderRequestInit(signal)), RESPONSE_OPTIONS);
     const site = isPhiRecord(result?.site) ? result.site : {};
     return {
         id: "site",
         sourceLocale: typeof site.sourceLocale === "string" ? site.sourceLocale : "",
         defaultLocale: typeof site.defaultLocale === "string" ? site.defaultLocale : "",
-        availableLocales: readRows(site.availableLocales).flatMap((entry) => typeof entry.code === "string" ? [entry.code] : []),
+        availableLocales: readPhiTableRows(site.availableLocales).flatMap((entry) => typeof entry.code === "string" ? [entry.code] : []),
     };
 }
 export function PhiLocalizationTableProviderClient({ children }) {
-    const emitSignal = usePhiSignalEmitter(createPhiLocalizationControllerAddress());
+    /*
+     * What a load learned about the workspace -- the locales, the selected one, the query -- told to the
+     * Localization Controller that keeps the filters. Under whatever sends from here, not under the
+     * Controller's address: a Controller does not take what arrives under its own name for a request.
+     */
+    const emitSignal = usePhiSignalEmitter();
     const recordsRef = useRef(new Map());
     const query = useCallback(async (request) => {
         if (request.resourceKey === "siteTranslations") {
@@ -145,12 +125,12 @@ export function PhiLocalizationTableProviderClient({ children }) {
                     ...(data.facets ?? {}),
                     query: {
                         locale: typeof data.facets?.selectedLocale === "string" ? data.facets.selectedLocale : "",
-                        context: readStringFilter(request.query, "context"),
-                        status: readStringFilter(request.query, "status") || "all",
+                        context: readPhiTableStringFilter(request.query, "context"),
+                        status: readPhiTableStringFilter(request.query, "status") || "all",
                         search: request.query.search?.trim() ?? "",
                     },
                 },
-                receiver: "broadcast",
+                receiver: createPhiLocalizationControllerAddress(),
             });
             return data;
         }

package/plugins/runtime-modules/localization/tour.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The Editor's Translations Tour: where the Site's words come from, how to find the ones worth checking,
+ * and what correcting one does. What the Page does not say is that it is a correction desk -- the Site is
+ * translated by itself, and this is where a person overrides it.
+ */
+export declare const PHI_EDITOR_TRANSLATIONS_TOUR: {
+    readonly id: "@phis/ui/modules/localization/editor-translations";
+    readonly version: 1;
+    readonly steps: readonly [{
+        readonly key: "source-language";
+        readonly target: `cms:${import("@phis/contracts/cms").PhiCmsInstanceId}`;
+        readonly title: "The language the Site is written in";
+        readonly description: "Every text of the Site is written in this language and translated from it. It is chosen when the Site is created and does not change.";
+        readonly placement: "bottom";
+    }, {
+        readonly key: "texts";
+        readonly target: `cms:${import("@phis/contracts/cms").PhiCmsInstanceId}:header`;
+        readonly title: "Each text and its translation";
+        readonly description: "One row per text of the Site -- a Page's words, a menu entry, an entry's title: the text as written, where it is used, and its translation in the chosen language. Missing means it has none in that language yet.";
+        readonly placement: "bottom";
+    }, {
+        readonly key: "filters";
+        readonly target: `cms:${import("@phis/contracts/cms").PhiCmsInstanceId}:filters`;
+        readonly title: "Finding what to check";
+        readonly description: "Pick the language, narrow to one context -- where a text is used -- or show only what is missing. Search looks through the text, its context and its translation.";
+        readonly placement: "bottom";
+        readonly ifMissing: "skip";
+    }, {
+        readonly key: "correcting";
+        readonly target: `cms:${import("@phis/contracts/cms").PhiCmsInstanceId}:row-actions`;
+        readonly title: "Correcting a translation";
+        readonly description: "Edit opens one translation; what you save is shown from then on. Delete removes it, and the text is translated anew the next time a Page needs it.";
+        readonly placement: "left";
+    }];
+};

package/plugins/runtime-modules/localization/tour.js

@@ -0,0 +1,42 @@
+import { PHI_LOCALIZATION_RUNTIME_MODULE_ID } from "./ids";
+import { PHI_EDITOR_TRANSLATIONS_SOURCE_LOCALE_WIDGET_ID, PHI_EDITOR_TRANSLATIONS_WIDGET_ID, } from "./trees/editor-translations-shell";
+/**
+ * The Editor's Translations Tour: where the Site's words come from, how to find the ones worth checking,
+ * and what correcting one does. What the Page does not say is that it is a correction desk -- the Site is
+ * translated by itself, and this is where a person overrides it.
+ */
+export const PHI_EDITOR_TRANSLATIONS_TOUR = {
+    id: `${PHI_LOCALIZATION_RUNTIME_MODULE_ID}/editor-translations`,
+    version: 1,
+    steps: [
+        {
+            key: "source-language",
+            target: `cms:${PHI_EDITOR_TRANSLATIONS_SOURCE_LOCALE_WIDGET_ID}`,
+            title: "The language the Site is written in",
+            description: "Every text of the Site is written in this language and translated from it. It is chosen when the Site is created and does not change.",
+            placement: "bottom",
+        },
+        {
+            key: "texts",
+            target: `cms:${PHI_EDITOR_TRANSLATIONS_WIDGET_ID}:header`,
+            title: "Each text and its translation",
+            description: "One row per text of the Site -- a Page's words, a menu entry, an entry's title: the text as written, where it is used, and its translation in the chosen language. Missing means it has none in that language yet.",
+            placement: "bottom",
+        },
+        {
+            key: "filters",
+            target: `cms:${PHI_EDITOR_TRANSLATIONS_WIDGET_ID}:filters`,
+            title: "Finding what to check",
+            description: "Pick the language, narrow to one context -- where a text is used -- or show only what is missing. Search looks through the text, its context and its translation.",
+            placement: "bottom",
+            ifMissing: "skip",
+        },
+        {
+            key: "correcting",
+            target: `cms:${PHI_EDITOR_TRANSLATIONS_WIDGET_ID}:row-actions`,
+            title: "Correcting a translation",
+            description: "Edit opens one translation; what you save is shown from then on. Delete removes it, and the text is translated anew the next time a Page needs it.",
+            placement: "left",
+        },
+    ],
+};

package/plugins/runtime-modules/localization/trees/admin-locales-label-set.js

@@ -1,7 +1,8 @@
 import "server-only";
 import { PHI_TR_CTX_WEB_UI_LABEL } from "../../../../gateway/tr";
-import { definePhiLabelSet, definePhiMessageLabel, getPhiLabelSet } from "../../../../gateway/label-set";
-const PHI_ADMIN_LOCALES_PAGE_LABEL_SET = definePhiLabelSet({
+import { definePhiRuntimeModuleLabelSet, definePhiMessageLabel, getPhiLabelSet } from "../../../../gateway/label-set";
+import { PHI_LOCALIZATION_RUNTIME_MODULE_IDENTITY } from "../ids";
+const PHI_ADMIN_LOCALES_PAGE_LABEL_SET = definePhiRuntimeModuleLabelSet(PHI_LOCALIZATION_RUNTIME_MODULE_IDENTITY, {
     key: "preset:admin-locales-page",
     ctx: PHI_TR_CTX_WEB_UI_LABEL,
     labels: {

package/plugins/runtime-modules/localization/trees/editor-translations-label-set.js

@@ -1,7 +1,8 @@
 import "server-only";
 import { PHI_TR_CTX_WEB_UI_LABEL } from "../../../../gateway/tr";
-import { definePhiLabelSet, definePhiMessageLabel, getPhiLabelSet } from "../../../../gateway/label-set";
-const PHI_EDITOR_TRANSLATIONS_PAGE_LABEL_SET = definePhiLabelSet({
+import { definePhiRuntimeModuleLabelSet, definePhiMessageLabel, getPhiLabelSet } from "../../../../gateway/label-set";
+import { PHI_LOCALIZATION_RUNTIME_MODULE_IDENTITY } from "../ids";
+const PHI_EDITOR_TRANSLATIONS_PAGE_LABEL_SET = definePhiRuntimeModuleLabelSet(PHI_LOCALIZATION_RUNTIME_MODULE_IDENTITY, {
     key: "preset:editor-translations-page",
     ctx: PHI_TR_CTX_WEB_UI_LABEL,
     labels: {

package/plugins/runtime-modules/localization/trees/editor-translations-widget-label-set.d.ts

@@ -32,6 +32,7 @@ export type PhiEditorTranslationsWidgetLabels = {
     actions: {
         edit: string;
         save: string;
+        saving: string;
         cancel: string;
         delete: string;
     };
@@ -52,5 +53,6 @@ export type PhiEditorTranslationsWidgetLabels = {
         load: string;
         save: string;
         delete: string;
+        requiredTranslation: string;
     };
 };

package/plugins/runtime-modules/localization/trees/editor-translations-widget-label-set.js

@@ -1,7 +1,8 @@
 import "server-only";
 import { PHI_TR_CTX_WEB_UI_LABEL } from "../../../../gateway/tr";
-import { definePhiLabelSet, definePhiMessageLabel, getPhiLabelSet } from "../../../../gateway/label-set";
-const PHI_EDITOR_TRANSLATIONS_WIDGET_LABEL_SET = definePhiLabelSet({
+import { definePhiRuntimeModuleLabelSet, definePhiMessageLabel, getPhiLabelSet } from "../../../../gateway/label-set";
+import { PHI_LOCALIZATION_RUNTIME_MODULE_IDENTITY } from "../ids";
+const PHI_EDITOR_TRANSLATIONS_WIDGET_LABEL_SET = definePhiRuntimeModuleLabelSet(PHI_LOCALIZATION_RUNTIME_MODULE_IDENTITY, {
     key: "widget:editor-translations",
     ctx: PHI_TR_CTX_WEB_UI_LABEL,
     labels: {
@@ -28,6 +29,7 @@ const PHI_EDITOR_TRANSLATIONS_WIDGET_LABEL_SET = definePhiLabelSet({
         column_actions: "Actions",
         action_edit: "Edit",
         action_save: "Save",
+        action_saving: "Saving...",
         action_cancel: "Cancel",
         action_delete: "Delete",
         translation_placeholder: "Enter translation",
@@ -37,6 +39,7 @@ const PHI_EDITOR_TRANSLATIONS_WIDGET_LABEL_SET = definePhiLabelSet({
         empty_text: definePhiMessageLabel("No source messages match the current filters."),
         load_error: definePhiMessageLabel("Failed to load translations."),
         save_error: definePhiMessageLabel("Failed to save translation."),
+        required_translation: definePhiMessageLabel("A translation is required."),
         delete_error: definePhiMessageLabel("Failed to delete translation."),
         save_success: definePhiMessageLabel("Translation saved."),
         delete_success: definePhiMessageLabel("Translation deleted."),
@@ -75,6 +78,7 @@ export async function getPhiEditorTranslationsWidgetLabels(options) {
         actions: {
             edit: labels.action_edit,
             save: labels.action_save,
+            saving: labels.action_saving,
             cancel: labels.action_cancel,
             delete: labels.action_delete,
         },
@@ -95,6 +99,7 @@ export async function getPhiEditorTranslationsWidgetLabels(options) {
             load: labels.load_error,
             save: labels.save_error,
             delete: labels.delete_error,
+            requiredTranslation: labels.required_translation,
         },
     };
 }

package/plugins/runtime-modules/localization/trees/phi-default-admin-locales-page-tree.js

@@ -43,7 +43,6 @@ export async function buildPhiDefaultAdminLocalesPageTree({ page, runtime, }) {
     const scaffold = buildPhiBasePageContentScaffold({
         page,
         regionId: SYNTHETIC_ADMIN_LOCALES_REGION_IDS.regionContent,
-        regionConfig: { border: false },
     });
     const nodes = createPhiCmsPresetNodes(page);
     return {
@@ -66,15 +65,10 @@ export async function buildPhiDefaultAdminLocalesPageTree({ page, runtime, }) {
                 sortOrder: 0,
                 label: labels.contentLabel,
                 config: {
-                    gap: PHI_SPACE.base,
-                    columns: 24,
-                    slotPlacements: [
-                        { slotIndex: 0, span: { compact: 24, medium: 24, wide: 24 }, offset: { compact: 0, medium: 0, wide: 0 } },
-                        { slotIndex: 1, span: { compact: 24, medium: 24, wide: 24 }, offset: { compact: 0, medium: 0, wide: 0 } },
-                    ],
-                    margin: 0,
+                    gap: PHI_SPACE.sm,
+                    // One slot a row at every width: the form and the list stand under one another.
+                    columns: { compact: 1, medium: 1, wide: 1 },
                     padding: 0,
-                    border: false,
                 },
             }),
         ],

package/plugins/runtime-modules/localization/trees/phi-default-editor-translations-page-tree.js

@@ -1,7 +1,6 @@
 import { PHI_CMS_DEFAULT_SLOT_INDEX, PHI_CMS_SEQUENTIAL_LAYOUT_SLOTS, } from "../../../../constants/cms-layout-types";
 import { PhiCmsPageType } from "../../../../constants/phi-cms";
 import { createPhiCmsPresetNodes } from "../../../../helpers/cms-preset-nodes";
-import { PHI_SPACE } from "../../../../theme/antd-css-var-contract";
 import { createPhiSignalAddress, createPhiSignalSubcontrolAddress } from "../../../../types/signals";
 import { PHI_EDITOR_TRANSLATION_FORM_WIDGET_ID, PHI_EDITOR_TRANSLATION_COMMANDS_WIDGET_ID, PHI_EDITOR_TRANSLATION_OVERLAY_ID, PHI_EDITOR_TRANSLATION_OVERLAY_FOOTER_LAYOUT_ID, PHI_EDITOR_TRANSLATION_OVERLAY_LAYOUT_ID, PHI_EDITOR_TRANSLATIONS_SOURCE_LOCALE_WIDGET_ID, PHI_EDITOR_TRANSLATIONS_WIDGET_ID, } from "./editor-translations-shell";
 import { buildPhiBasePageContentScaffold, PHI_BASE_PAGE_LAYOUT_NODE_ID } from "../../../../components/regions/presets/phi-base-page-layout";
@@ -10,8 +9,9 @@ import { getPhiEditorTranslationsWidgetLabels } from "./editor-translations-widg
 import { PHI_LOCALIZATION_RUNTIME_DATA_PROVIDER_KEYS } from "../ids";
 import { PHI_LOCALIZATION_FORM_IDS } from "../forms";
 import { PHI_SIGNAL_VALUE_SCHEMAS } from "../../../../types/signals";
-import { createPhiLocalizationControllerAddress } from "../controller/address";
+import { PHI_LOCALIZATION_CONTROLLER_INSTANCE_KEY, PHI_LOCALIZATION_CONTROLLER_TYPE, createPhiLocalizationControllerAddress, } from "../controller/address";
 import { readPhiServerApiCredentials } from "../../../../helpers/phis-server-credentials";
+import { PHI_DIALOG_BODY_CONFIG, PHI_DIALOG_COMMANDS_CONFIG } from "../../../../helpers/cms-dialog";
 const SYNTHETIC_EDITOR_TRANSLATIONS_REGION_IDS = { regionContent: -561 };
 export async function buildPhiDefaultEditorTranslationsPageTree({ page, runtime, }) {
     const labels = await getPhiEditorTranslationsPageLabels({
@@ -29,8 +29,41 @@ export async function buildPhiDefaultEditorTranslationsPageTree({ page, runtime,
         regionId: SYNTHETIC_EDITOR_TRANSLATIONS_REGION_IDS.regionContent,
     });
     const nodes = createPhiCmsPresetNodes(page);
+    const overlayAddress = createPhiSignalAddress("cms", PHI_EDITOR_TRANSLATION_OVERLAY_ID);
+    const formAddress = createPhiSignalAddress("cms", PHI_EDITOR_TRANSLATION_FORM_WIDGET_ID);
+    const tableAddress = createPhiSignalAddress("cms", PHI_EDITOR_TRANSLATIONS_WIDGET_ID);
+    const saveAddress = createPhiSignalSubcontrolAddress("cms", PHI_EDITOR_TRANSLATION_COMMANDS_WIDGET_ID, "save");
+    /*
+     * What every translation here starts from, written into the field by the Page: the Site config carries
+     * it, so the field needs neither the translations endpoint nor the Controller to learn it.
+     */
+    const sourceLocale = runtime.site.availableLocales.find((option) => option.code === runtime.site.sourceLocale);
+    const sourceLocaleText = sourceLocale ? `${sourceLocale.label} (${sourceLocale.code})` : runtime.site.sourceLocale;
     return {
         page: nodes.page({ pageType: PhiCmsPageType.Standard }),
+        /*
+         * The Localization Controller is mounted by this Page and told here whom it speaks to: it used to
+         * name these Widgets itself, which tied it to this one arrangement of them.
+         */
+        controllerSettings: [{
+                type: PHI_LOCALIZATION_CONTROLLER_TYPE,
+                instanceKey: PHI_LOCALIZATION_CONTROLLER_INSTANCE_KEY,
+                mountScope: "page",
+                config: {
+                    signalRoutes: {
+                        emits: [
+                            { routeKey: "editor-translations-controller-dialog-open", capabilityId: "dialogOpen", scope: "page", channel: "dialog", action: "activate", valueType: "none", receiver: overlayAddress },
+                            { routeKey: "editor-translations-controller-dialog-close", capabilityId: "dialogClose", scope: "page", channel: "dialog", action: "close", valueType: "none", receiver: overlayAddress },
+                            { routeKey: "editor-translations-controller-form-open", capabilityId: "recordOpen", scope: "page", channel: "action", action: "activate", valueType: "json", valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.tableAction, receiver: formAddress },
+                            { routeKey: "editor-translations-controller-form-submit", capabilityId: "formSubmit", scope: "page", channel: "submit", action: "activate", valueType: "none", receiver: formAddress },
+                            { routeKey: "editor-translations-controller-form-reset", capabilityId: "formReset", scope: "page", channel: "reset", action: "activate", valueType: "none", receiver: formAddress },
+                            { routeKey: "editor-translations-controller-save-submitting", capabilityId: "saveSubmitting", scope: "page", channel: "submitting", action: "change", valueType: "boolean", receiver: saveAddress },
+                            { routeKey: "editor-translations-controller-table-reload", capabilityId: "reload", scope: "page", channel: "reload", action: "activate", valueType: "none", receiver: tableAddress },
+                            { routeKey: "editor-translations-controller-table-filters", capabilityId: "filters", scope: "page", channel: "filters", action: "change", valueType: "json", valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.tableFilters, receiver: tableAddress },
+                        ],
+                    },
+                },
+            }],
         overlays: [nodes.overlay({
                 id: PHI_EDITOR_TRANSLATION_OVERLAY_ID,
                 overlayType: "modal",
@@ -72,11 +105,8 @@ export async function buildPhiDefaultEditorTranslationsPageTree({ page, runtime,
                  * Modal adds none, so the Form stands one `base` in from every edge, as in every other dialog.
                  */
                 config: {
+                    ...PHI_DIALOG_BODY_CONFIG,
                     anchor: { horizontal: "left", vertical: "top" },
-                    gap: PHI_SPACE.base,
-                    margin: 0,
-                    padding: PHI_SPACE.base,
-                    border: false,
                 },
             }),
             nodes.layout({
@@ -99,22 +129,11 @@ export async function buildPhiDefaultEditorTranslationsPageTree({ page, runtime,
                 sortOrder: 0,
                 label: "editor source locale",
                 config: {
-                    text: "",
+                    text: sourceLocaleText,
                     placeholder: widgetLabels.sourceLocaleLabel,
                     readOnly: true,
                     allowClear: false,
                     controlSize: "small",
-                    signalRoutes: {
-                        listens: [{
-                                routeKey: "editor-translations-source-locale",
-                                capabilityId: "change",
-                                scope: "area",
-                                channel: "text",
-                                action: "change",
-                                valueType: "string",
-                                receiver: createPhiSignalAddress("cms", PHI_EDITOR_TRANSLATIONS_SOURCE_LOCALE_WIDGET_ID),
-                            }],
-                    },
                 },
             }),
             nodes.widget({
@@ -290,13 +309,10 @@ export async function buildPhiDefaultEditorTranslationsPageTree({ page, runtime,
                 label: "editor translation commands",
                 config: {
                     key: "editor-translation-commands",
-                    compact: false,
-                    wrap: true,
-                    showLabels: true,
-                    controlSize: "medium",
+                    ...PHI_DIALOG_COMMANDS_CONFIG,
                     buttons: [
-                        { key: "cancel", emits: [{ capabilityId: "command", value: "cancel" }], actionKey: "cancel", label: widgetLabels.actions.cancel },
-                        { key: "save", emits: [{ capabilityId: "command", value: "save" }], actionKey: "save", label: widgetLabels.actions.save, variant: "primary" },
+                        { key: "cancel", emits: [{ capabilityId: "command", value: "cancel" }], label: widgetLabels.actions.cancel, icon: "cancel" },
+                        { key: "save", emits: [{ capabilityId: "command", value: "save" }], label: widgetLabels.actions.save, variant: "primary", icon: "save" },
                     ],
                     signalRoutes: {
                         emits: [{

package/plugins/runtime-modules/module-labels.server.js

@@ -2,27 +2,22 @@ import "server-only";
 import { resolvePhiRuntimeModuleSourceLocale } from "../../types/runtime-module-locale";
 import { PHI_TR_CTX_MODULE_DESCRIPTION, PHI_TR_CTX_WEB_UI_LABEL, createGlobalTranslator, } from "../../gateway/tr";
 import { readPhiServerApiCredentials } from "../../helpers/phis-server-credentials";
-const MODULE_LABEL_CACHE = new Map();
-function buildModuleLabelCacheKey(locale, definitions) {
-    return JSON.stringify([
-        locale.trim().toLowerCase(),
-        definitions.map((definition) => [
-            definition.moduleId,
-            resolvePhiRuntimeModuleSourceLocale(definition),
-            definition.title,
-            definition.description,
-        ]),
-    ]);
+/**
+ * Module titles and descriptions in the language of the request.
+ *
+ * Nothing is kept here between requests: `trBulk` keeps every answer in the translation cache, which
+ * a translation write empties in every process (gateway/CACHES.md). A map of its own beside it kept
+ * whatever the first request got -- a provisional answer, or the source text after a failed batch --
+ * until the process restarted.
+ *
+ * Each text is asked for once, however many Modules share it, and the answers are looked up by text.
+ */
+async function translateTexts(translator, texts, ctx) {
+    const sources = [...new Set(texts.map((text) => text.trim()))];
+    const translated = await translator.trBulk(sources, ctx);
+    return new Map(sources.map((source, index) => [source, translated[index] ?? source]));
 }
 export async function localizePhiRuntimeModuleDefinitions(runtime, definitions) {
-    const cacheKey = buildModuleLabelCacheKey(runtime.locale.current, definitions);
-    const cached = MODULE_LABEL_CACHE.get(cacheKey);
-    if (cached) {
-        return definitions.map((definition) => {
-            const labels = cached.get(definition.moduleId);
-            return labels ? { ...definition, ...labels } : definition;
-        });
-    }
     const definitionsBySourceLocale = new Map();
     for (const definition of definitions) {
         const sourceLocale = resolvePhiRuntimeModuleSourceLocale(definition);
@@ -38,18 +33,17 @@ export async function localizePhiRuntimeModuleDefinitions(runtime, definitions)
             locale: runtime.locale.current,
             sourceLocale,
         });
-        const [translatedTitles, translatedDescriptions] = await Promise.all([
-            translator.trBulk(sourceDefinitions.map((definition) => definition.title), PHI_TR_CTX_WEB_UI_LABEL),
-            translator.trBulk(sourceDefinitions.map((definition) => definition.description), PHI_TR_CTX_MODULE_DESCRIPTION),
+        const [titles, descriptions] = await Promise.all([
+            translateTexts(translator, sourceDefinitions.map((definition) => definition.title), PHI_TR_CTX_WEB_UI_LABEL),
+            translateTexts(translator, sourceDefinitions.map((definition) => definition.description), PHI_TR_CTX_MODULE_DESCRIPTION),
         ]);
-        sourceDefinitions.forEach((definition, index) => {
+        for (const definition of sourceDefinitions) {
             localizedLabelsByModuleId.set(definition.moduleId, {
-                title: translatedTitles[index] ?? definition.title,
-                description: translatedDescriptions[index] ?? definition.description,
+                title: titles.get(definition.title.trim()) ?? definition.title,
+                description: descriptions.get(definition.description.trim()) ?? definition.description,
             });
-        });
+        }
     }));
-    MODULE_LABEL_CACHE.set(cacheKey, localizedLabelsByModuleId);
     return definitions.map((definition) => {
         const labels = localizedLabelsByModuleId.get(definition.moduleId);
         return labels ? { ...definition, ...labels } : definition;