@phis/ui 0.2.0 → 0.3.0

package/plugins/runtime-modules/builder/trees/phi-default-builder-area-preset-tree.js

@@ -1,6 +1,6 @@
 import { createPhiPresetCmsInstanceIdMap, } from "../../../../types/cms-instance-id";
 import { PHI_CMS_DEFAULT_SLOT_INDEX, PHI_CMS_SEQUENTIAL_LAYOUT_SLOTS, PHI_CMS_THREE_COLUMN_LAYOUT_SLOT_INDEX, } from "../../../../constants/cms-layout-types";
-import { PhiCmsRegionType, PhiCmsStatus } from "../../../../constants/phi-cms";
+import { PhiCmsFlags, PhiCmsRegionType, PhiCmsStatus } from "../../../../constants/phi-cms";
 import { PHI_CMS_AREA_KEYS } from "../../../../constants/cms-areas";
 import { buildPhiCmsLayoutNode } from "../../../../helpers/cms-node-factories";
 import { createPhiCmsPresetNodes } from "../../../../helpers/cms-preset-nodes";
@@ -9,8 +9,9 @@ import { remapPhiSignalRoutesInConfig } from "../../../../helpers/signal-route-l
 import { resolvePhiShellHeaderHeight, resolvePhiShellMetric } from "../../../../helpers/shell-region-style";
 import { PHI_SIGNAL_VALUE_SCHEMAS, createPhiSignalAddress, createPhiSignalSubcontrolAddress, } from "../../../../types";
 import { PHI_LAYOUT } from "../../../../theme/phi-tokens";
-import { PHI_COLOR, PHI_SPACE } from "../../../../theme/antd-css-var-contract";
-import { createPhiBuilderControllerAddress } from "../controller/address";
+import { PHI_SPACE } from "../../../../theme/antd-css-var-contract";
+import { createPhiBuilderControllerAddress, PHI_BUILDER_CONTROLLER_INSTANCE_KEY, PHI_BUILDER_CONTROLLER_TYPE, } from "../controller/address";
+import { createPhiRuntimeFormControllerAddress } from "../../../../components/forms/runtime-form-controller-address";
 import { isPhiAreaScopedBuilderPage, isPhiDebugScaffoldBuilderPage, readPhiDeveloperBuilderWorkspaceKey, } from "../route-scope";
 import { PHI_BUILDER_RUNTIME_MODULE_ID } from "../ids";
 import { PHI_BUILDER_RUNTIME_DATA_PROVIDER_KEYS } from "../ids";
@@ -27,6 +28,7 @@ import { PHI_BUILDER_PAGE_META_FORM_ID } from "../page-meta-form";
 import { PHI_BUILDER_AREA_SETTINGS_FORM_ID } from "../area-settings-form";
 import { getPhiBuilderNavigationPageLabels } from "./builder-navigation-label-set";
 import { readPhiServerApiCredentials } from "../../../../helpers/phis-server-credentials";
+import { PHI_DIALOG_BODY_CONFIG, PHI_DIALOG_COMMANDS_CONFIG } from "../../../../helpers/cms-dialog";
 const SYNTHETIC_DEV_REGION_IDS = {
     regionHeaderTop: -509,
     regionHeaderMain: -510,
@@ -61,9 +63,10 @@ const PHI_BUILDER_WIDGET_NODE_KEYS = [
     "widgetNavigationSource",
     "widgetBuilderAreaSelector",
     "widgetBuilderModeSwitch",
-    "widgetHeaderMainDebugSwitch",
+    "widgetHeaderTopDebugSwitch",
     "widgetHeaderTopThemeModeSwitch",
-    "widgetHeaderTopAccount",
+    "widgetHeaderMainAccount",
+    "widgetHeaderTopTourButton",
     "widgetBuilderPageTitle",
     "widgetPagesHeaderTitle",
     "widgetPagesMetaToolbar",
@@ -112,44 +115,142 @@ function buildBuilderCommandToolbarConfig(options) {
                     receiver: createPhiBuilderControllerAddress(),
                 },
             ],
-            listens: [
+            listens: ["undo", "redo"].flatMap((controlKey) => [
                 {
-                    routeKey: "builder-toolbar-undo-enabled",
+                    routeKey: `builder-toolbar-${controlKey}-enabled`,
                     capabilityId: "enabled",
                     scope: "area",
                     channel: "enabled",
                     action: "change",
                     valueType: "boolean",
-                    receiver: createPhiSignalSubcontrolAddress("cms", SYNTHETIC_DEV_WIDGET_IDS.widgetToolbar, "undo"),
+                    receiver: createPhiSignalSubcontrolAddress("cms", SYNTHETIC_DEV_WIDGET_IDS.widgetToolbar, controlKey),
                 },
                 {
-                    routeKey: "builder-toolbar-redo-enabled",
-                    capabilityId: "enabled",
+                    routeKey: `builder-toolbar-${controlKey}-tooltip`,
+                    capabilityId: "tooltip",
                     scope: "area",
-                    channel: "enabled",
+                    channel: "tooltip",
                     action: "change",
-                    valueType: "boolean",
-                    receiver: createPhiSignalSubcontrolAddress("cms", SYNTHETIC_DEV_WIDGET_IDS.widgetToolbar, "redo"),
+                    valueType: "string",
+                    receiver: createPhiSignalSubcontrolAddress("cms", SYNTHETIC_DEV_WIDGET_IDS.widgetToolbar, controlKey),
                 },
-            ],
+            ]),
         },
         compact: true,
         showLabels: false,
         buttons: [
-            { key: "save", emits: [{ capabilityId: "command", value: "save" }], actionKey: "save", variant: "normal" },
-            { key: "preview", emits: [{ capabilityId: "command", value: "preview" }], actionKey: "livePreview" },
-            { key: "publish", emits: [{ capabilityId: "command", value: "publish" }], actionKey: "publish", variant: "normal" },
-            { key: "undo", emits: [{ capabilityId: "command", value: "undo" }], actionKey: "undo" },
-            { key: "redo", emits: [{ capabilityId: "command", value: "redo" }], actionKey: "redo" },
+            { key: "save", emits: [{ capabilityId: "command", value: "save" }], action: "save" },
+            { key: "preview", emits: [{ capabilityId: "command", value: "preview" }], action: "livePreview" },
+            { key: "publish", emits: [{ capabilityId: "command", value: "publish" }], action: "publish" },
+            { key: "undo", emits: [{ capabilityId: "command", value: "undo" }], action: "undo" },
+            { key: "redo", emits: [{ capabilityId: "command", value: "redo" }], action: "redo" },
             {
                 key: "reset",
                 emits: [{ capabilityId: "command", value: "reset" }],
-                actionKey: "reset",
+                action: "reset",
                 ...(options?.disableReset ? { disabled: true } : {}),
             },
         ],
     };
 }
+/** The Builder Controller's setting in one of its trees: what it sends into the receivers that tree holds. */
+function buildBuilderControllerSetting(mountScope, emits) {
+    return [{
+            type: PHI_BUILDER_CONTROLLER_TYPE,
+            instanceKey: PHI_BUILDER_CONTROLLER_INSTANCE_KEY,
+            mountScope,
+            config: { signalRoutes: { emits: [...emits] } },
+        }];
+}
+function builderDialogRoutes(name, routeKey, channel, overlay) {
+    return [
+        { routeKey: `${routeKey}-open`, capabilityId: `${name}Open`, scope: "page", channel, action: "activate", valueType: "none", receiver: overlay },
+        { routeKey: `${routeKey}-close`, capabilityId: `${name}Close`, scope: "page", channel, action: "close", valueType: "none", receiver: overlay },
+    ];
+}
+/*
+ * Whom the Builder Controller answers into on one Builder Page: the toolbar's undo and redo, and the
+ * dialogs this Page carries. The Area runs the Controller; while the Page is shown these join what the
+ * Area told it (`mergePhiRuntimeControllerConfigOverlay`), and a Page without a dialog names none.
+ */
+function buildBuilderPageControllerRoutes(page) {
+    const toolbarRoutes = ["undo", "redo"].flatMap((controlKey) => [
+        {
+            routeKey: `builder-controller-${controlKey}-enabled`,
+            capabilityId: `${controlKey}Enabled`,
+            scope: "area",
+            channel: "enabled",
+            action: "change",
+            valueType: "boolean",
+            receiver: createPhiSignalSubcontrolAddress("cms", SYNTHETIC_DEV_WIDGET_IDS.widgetToolbar, controlKey),
+        },
+        {
+            routeKey: `builder-controller-${controlKey}-tooltip`,
+            capabilityId: `${controlKey}Tooltip`,
+            scope: "area",
+            channel: "tooltip",
+            action: "change",
+            valueType: "string",
+            receiver: createPhiSignalSubcontrolAddress("cms", SYNTHETIC_DEV_WIDGET_IDS.widgetToolbar, controlKey),
+        },
+    ]);
+    const areaSettingsForm = createPhiSignalAddress("cms", PHI_BUILDER_AREA_SETTINGS_WIDGET_IDS.areaSettingsForm);
+    const areaSettingsRoutes = page.isStructurePage ? [
+        ...builderDialogRoutes("areaSettings", "builder-controller-area-settings", "areaSettingsDialog", createPhiSignalAddress("cms", PHI_BUILDER_AREA_SETTINGS_OVERLAY_IDS.overlayAreaSettings)),
+        {
+            routeKey: "builder-controller-area-settings-values",
+            capabilityId: "areaSettingsValues",
+            scope: "page",
+            channel: "values",
+            action: "change",
+            valueType: "json",
+            valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.formValues,
+            receiver: createPhiRuntimeFormControllerAddress(`widget-${PHI_BUILDER_AREA_SETTINGS_WIDGET_IDS.areaSettingsForm}`),
+        },
+        { routeKey: "builder-controller-area-settings-submit", capabilityId: "areaSettingsSubmit", scope: "page", channel: "submit", action: "activate", valueType: "none", receiver: areaSettingsForm },
+        { routeKey: "builder-controller-area-settings-reset", capabilityId: "areaSettingsReset", scope: "page", channel: "reset", action: "activate", valueType: "none", receiver: areaSettingsForm },
+    ] : [];
+    const pageMetaOverlay = createPhiSignalAddress("cms", PHI_BUILDER_PAGE_META_OVERLAY_IDS.editor);
+    const pageMetaForm = createPhiSignalAddress("cms", PHI_BUILDER_PAGE_META_WIDGET_IDS.form);
+    const pageMetaSave = createPhiSignalSubcontrolAddress("cms", PHI_BUILDER_PAGE_META_WIDGET_IDS.commands, "save");
+    const pageMetaRoutes = page.isPagesPage ? [
+        ...builderDialogRoutes("pageMeta", "builder-controller-page-meta", "dialog", pageMetaOverlay),
+        { routeKey: "builder-controller-page-meta-title", capabilityId: "overlayTitle", scope: "page", channel: "title", action: "change", valueType: "string", receiver: pageMetaOverlay },
+        { routeKey: "builder-controller-page-meta-save-label", capabilityId: "commandLabel", scope: "page", channel: "label", action: "change", valueType: "string", receiver: pageMetaSave },
+        { routeKey: "builder-controller-page-meta-submitting", capabilityId: "pageMetaSubmitting", scope: "page", channel: "pageMetaSubmitting", action: "change", valueType: "boolean", receiver: pageMetaSave },
+        {
+            routeKey: "builder-controller-page-meta-values",
+            capabilityId: "pageMetaFormValues",
+            scope: "page",
+            channel: "values",
+            action: "change",
+            valueType: "json",
+            valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.formValues,
+            receiver: createPhiRuntimeFormControllerAddress(`widget-${PHI_BUILDER_PAGE_META_WIDGET_IDS.form}`),
+        },
+        { routeKey: "builder-controller-page-meta-submit", capabilityId: "pageMetaSubmit", scope: "page", channel: "submit", action: "activate", valueType: "none", receiver: pageMetaForm },
+        { routeKey: "builder-controller-page-meta-reset", capabilityId: "pageMetaReset", scope: "page", channel: "reset", action: "activate", valueType: "none", receiver: pageMetaForm },
+    ] : [];
+    const modulesRoutes = page.isModulesPage ? [
+        { routeKey: "builder-controller-modules-table-reload", capabilityId: "modulesTableReload", scope: "area", channel: "reload", action: "activate", valueType: "none", receiver: createPhiSignalAddress("cms", PHI_BUILDER_MODULES_TABLE_WIDGET_ID) },
+        {
+            routeKey: "builder-controller-module-detail-params",
+            capabilityId: "moduleDetailParams",
+            scope: "page",
+            channel: "bindingParams",
+            action: "change",
+            valueType: "json",
+            valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.tableBindingParams,
+            receiver: createPhiSignalAddress("cms", PHI_BUILDER_MODULE_DETAIL_WIDGET_IDS.fields),
+        },
+        { routeKey: "builder-controller-module-detail-open", capabilityId: "moduleDetailOpen", scope: "page", channel: "dialog", action: "activate", valueType: "none", receiver: createPhiSignalAddress("cms", PHI_BUILDER_MODULE_DETAIL_OVERLAY_IDS.overlayModuleDetail) },
+        ...builderDialogRoutes("moduleUsage", "builder-controller-module-usage", "moduleUsageDialog", createPhiSignalAddress("cms", PHI_BUILDER_MODULE_USAGE_OVERLAY_IDS.overlayModuleUsage)),
+        { routeKey: "builder-controller-module-usage-reload", capabilityId: "moduleUsageReload", scope: "page", channel: "reload", action: "activate", valueType: "none", receiver: createPhiSignalAddress("cms", PHI_BUILDER_MODULE_USAGE_WIDGET_IDS.moduleUsageTable) },
+        ...builderDialogRoutes("publicRoutes", "builder-controller-public-routes", "publicRoutesDialog", createPhiSignalAddress("cms", PHI_BUILDER_PUBLIC_ROUTES_OVERLAY_IDS.overlayPublicRoutes)),
+        { routeKey: "builder-controller-public-routes-reload", capabilityId: "publicRoutesReload", scope: "page", channel: "reload", action: "activate", valueType: "none", receiver: createPhiSignalAddress("cms", PHI_BUILDER_PUBLIC_ROUTES_WIDGET_IDS.publicRoutesTable) },
+    ] : [];
+    return [...toolbarRoutes, ...areaSettingsRoutes, ...pageMetaRoutes, ...modulesRoutes];
+}
 function remapBuilderPresetTreeInstanceIds(tree, ownerModuleId, presetKey) {
     const nextLayoutIds = createPhiPresetCmsInstanceIdMap({
         domain: "area",
@@ -207,6 +308,11 @@ function remapBuilderPresetTreeInstanceIds(tree, ownerModuleId, presetKey) {
             parentLayoutNodeId: remapInstanceId(node.parentLayoutNodeId),
             config: remapPhiSignalRoutesInConfig(node.config, signalRemaps),
         })),
+        // The Controller's routes name the same receivers the nodes' routes do, so they move with them.
+        controllerSettings: (tree.controllerSettings ?? []).map((setting) => ({
+            ...setting,
+            config: setting.config ? remapPhiSignalRoutesInConfig(setting.config, signalRemaps) : setting.config,
+        })),
         contentWidgets: tree.contentWidgets.map((node) => ({
             ...node,
             id: remapInstanceId(node.id),
@@ -242,6 +348,15 @@ export async function buildPhiDefaultBuilderAreaPresetTree({ page, runtime, }) {
             description: null,
         },
         runtimeModuleIds: createPhiDefaultAreaRuntimeModuleIds("builder"),
+        /*
+         * The Shell's own receivers: the header's Area selector and debug switch, which the Controller arms
+         * on the Pages that use them. The Inspector Overlay contribution adds its receivers to this setting
+         * when the two are composed (`concatPhiCmsTreeControllerSettings`).
+         */
+        controllerSettings: buildBuilderControllerSetting("area", [
+            { routeKey: "builder-controller-area-selector-enabled", capabilityId: "areaSelectorEnabled", scope: "area", channel: "enabled", action: "change", valueType: "boolean", receiver: createPhiSignalAddress("cms", SYNTHETIC_DEV_WIDGET_IDS.widgetBuilderAreaSelector) },
+            { routeKey: "builder-controller-debug-switch-enabled", capabilityId: "debugSwitchEnabled", scope: "area", channel: "enabled", action: "change", valueType: "boolean", receiver: createPhiSignalAddress("cms", SYNTHETIC_DEV_WIDGET_IDS.widgetHeaderTopDebugSwitch) },
+        ]),
         overlays: [],
         regions: [
             nodes.region({
@@ -250,7 +365,6 @@ export async function buildPhiDefaultBuilderAreaPresetTree({ page, runtime, }) {
                 rootLayoutNodeId: SYNTHETIC_DEV_LAYOUT_IDS.layoutHeaderTop,
                 sortOrder: -10,
                 config: {
-                    sticky: false,
                     /*
                      * No Effect, Shadow, border, or ground of its own (SHELL.md, Shell Chrome Overlay).
                      *
@@ -269,7 +383,7 @@ export async function buildPhiDefaultBuilderAreaPresetTree({ page, runtime, }) {
                 rootLayoutNodeId: SYNTHETIC_DEV_LAYOUT_IDS.layoutHeaderMain,
                 sortOrder: 0,
                 config: {
-                    sticky: true,
+                    flags: PhiCmsFlags.Sticky,
                     // No chrome of its own, for the reason given on `header_top` above.
                     size: { height: `${headerMainHeight}px` },
                     offsetTop: 0,
@@ -281,9 +395,7 @@ export async function buildPhiDefaultBuilderAreaPresetTree({ page, runtime, }) {
                 rootLayoutNodeId: SYNTHETIC_DEV_LAYOUT_IDS.layoutSiderLeft,
                 sortOrder: 10,
                 config: {
-                    sticky: true,
-                    fullHeight: true,
-                    collapsible: true,
+                    flags: PhiCmsFlags.Sticky | PhiCmsFlags.FullHeight | PhiCmsFlags.Collapsible,
                     /*
                      * No border either, for the reason the Effect went: it is the preset authoring the frame's
                      * appearance. It drew a hard light line down the seam between the Sider and the Header
@@ -322,7 +434,6 @@ export async function buildPhiDefaultBuilderAreaPresetTree({ page, runtime, }) {
                 config: {
                     balancedSides: true,
                     contentAlign: "center",
-                    style: { height: "100%" },
                 },
             }),
             nodes.layout({
@@ -336,7 +447,6 @@ export async function buildPhiDefaultBuilderAreaPresetTree({ page, runtime, }) {
                 config: {
                     balancedSides: true,
                     contentAlign: "center",
-                    style: { height: "100%" },
                 },
             }),
             buildPhiHeaderTopActionsLayoutNode(nodes, {
@@ -384,9 +494,6 @@ export async function buildPhiDefaultBuilderAreaPresetTree({ page, runtime, }) {
                     padding: 0,
                     paddingLeft: 0,
                     paddingRight: 0,
-                    background: "transparent",
-                    border: "none",
-                    borderRadius: 0,
                 },
             }),
         ],
@@ -436,18 +543,18 @@ export async function buildPhiDefaultBuilderAreaPresetTree({ page, runtime, }) {
             }),
             nodes.widget({
                 typeKey: "account",
-                id: SYNTHETIC_DEV_WIDGET_IDS.widgetHeaderTopAccount,
-                parentLayoutNodeId: SYNTHETIC_DEV_LAYOUT_IDS.layoutHeaderTopActions,
-                slotIndex: 1,
-                sortOrder: 10,
+                id: SYNTHETIC_DEV_WIDGET_IDS.widgetHeaderMainAccount,
+                parentLayoutNodeId: SYNTHETIC_DEV_LAYOUT_IDS.layoutHeaderMainRightActions,
+                slotIndex: 0,
                 label: "Account",
                 config: {},
             }),
             nodes.widget({
                 typeKey: "switch",
-                id: SYNTHETIC_DEV_WIDGET_IDS.widgetHeaderMainDebugSwitch,
-                parentLayoutNodeId: SYNTHETIC_DEV_LAYOUT_IDS.layoutHeaderMainRightActions,
-                slotIndex: 0,
+                id: SYNTHETIC_DEV_WIDGET_IDS.widgetHeaderTopDebugSwitch,
+                parentLayoutNodeId: SYNTHETIC_DEV_LAYOUT_IDS.layoutHeaderTopActions,
+                slotIndex: 1,
+                sortOrder: 10,
                 label: "Debug switch",
                 config: {
                     label: labels.themeSwitch.debug,
@@ -480,7 +587,7 @@ export async function buildPhiDefaultBuilderAreaPresetTree({ page, runtime, }) {
                                 channel: "enabled",
                                 action: "change",
                                 valueType: "boolean",
-                                receiver: createPhiSignalAddress("cms", SYNTHETIC_DEV_WIDGET_IDS.widgetHeaderMainDebugSwitch),
+                                receiver: createPhiSignalAddress("cms", SYNTHETIC_DEV_WIDGET_IDS.widgetHeaderTopDebugSwitch),
                             },
                         ],
                     },
@@ -490,11 +597,25 @@ export async function buildPhiDefaultBuilderAreaPresetTree({ page, runtime, }) {
                 typeKey: "theme-mode-switch",
                 id: SYNTHETIC_DEV_WIDGET_IDS.widgetHeaderTopThemeModeSwitch,
                 parentLayoutNodeId: SYNTHETIC_DEV_LAYOUT_IDS.layoutHeaderTop,
-                slotIndex: PHI_CMS_THREE_COLUMN_LAYOUT_SLOT_INDEX.Left,
-                sortOrder: 1,
+                slotIndex: PHI_CMS_THREE_COLUMN_LAYOUT_SLOT_INDEX.Middle,
+                sortOrder: 0,
                 label: "Theme mode switch",
                 config: {},
             }),
+            /*
+             * The Tour button is Core's, so this Shell does not depend on the Tour Module. It shows only on a
+             * Page that carries a Tour and only while the Tour Module answers for the Area; otherwise it draws
+             * nothing.
+             */
+            nodes.widget({
+                typeKey: "tour-button",
+                id: SYNTHETIC_DEV_WIDGET_IDS.widgetHeaderTopTourButton,
+                parentLayoutNodeId: SYNTHETIC_DEV_LAYOUT_IDS.layoutHeaderTop,
+                slotIndex: PHI_CMS_THREE_COLUMN_LAYOUT_SLOT_INDEX.Left,
+                sortOrder: 0,
+                label: "Tour button",
+                config: {},
+            }),
             nodes.widget({
                 typeKey: "sidebar-navigation",
                 id: SYNTHETIC_DEV_WIDGET_IDS.widgetSidebarNav,
@@ -596,6 +717,7 @@ async function buildPhiDefaultBuilderPagePresetTemplateTree({ page, runtime, pre
             },
             description: null,
         },
+        controllerSettings: buildBuilderControllerSetting("page", buildBuilderPageControllerRoutes({ isStructurePage, isPagesPage, isModulesPage })),
         overlays: [
             /*
              * Everything the Area says about itself, in one place.
@@ -729,7 +851,7 @@ async function buildPhiDefaultBuilderPagePresetTemplateTree({ page, runtime, pre
                         rootLayoutNodeId: SYNTHETIC_DEV_LAYOUT_IDS.layoutHeaderBottom,
                         sortOrder: 5,
                         config: {
-                            sticky: true,
+                            flags: PhiCmsFlags.Sticky,
                             // No chrome of its own, for the reason given on `header_top` above.
                             size: { height: `${resolvePhiShellHeaderHeight(runtime.site.theme?.shell, "bottom")}px` },
                             offsetTop: resolvePhiShellHeaderHeight(runtime.site.theme?.shell, "main"),
@@ -764,7 +886,6 @@ async function buildPhiDefaultBuilderPagePresetTemplateTree({ page, runtime, pre
                         config: {
                             balancedSides: true,
                             contentAlign: "center",
-                            style: { height: "100%" },
                         },
                     }),
                 ]
@@ -792,12 +913,9 @@ async function buildPhiDefaultBuilderPagePresetTemplateTree({ page, runtime, pre
                             horizontal: "center",
                             vertical: "top",
                         },
-                        gap: PHI_SPACE.base,
+                        gap: PHI_SPACE.sm,
                         margin: 0,
                         padding: PHI_SPACE.base,
-                        background: "transparent",
-                        border: "none",
-                        borderRadius: 0,
                     },
                 }
                 : isNavigationPage
@@ -818,15 +936,12 @@ async function buildPhiDefaultBuilderPagePresetTemplateTree({ page, runtime, pre
                                 horizontal: "left",
                                 vertical: "top",
                             },
-                            gap: PHI_SPACE.base,
+                            gap: PHI_SPACE.sm,
                             wrap: true,
                             margin: 0,
                             padding: PHI_SPACE.base,
                             paddingTop: PHI_SPACE.base,
                             paddingBottom: PHI_SPACE.base,
-                            background: "transparent",
-                            border: "none",
-                            borderRadius: 0,
                         },
                     }
                     : isModulesPage
@@ -847,12 +962,9 @@ async function buildPhiDefaultBuilderPagePresetTemplateTree({ page, runtime, pre
                                     horizontal: "center",
                                     vertical: "top",
                                 },
-                                gap: PHI_SPACE.base,
+                                gap: PHI_SPACE.sm,
                                 margin: 0,
                                 padding: PHI_SPACE.base,
-                                background: "transparent",
-                                border: "none",
-                                borderRadius: 0,
                             },
                         }
                         : {
@@ -869,7 +981,6 @@ async function buildPhiDefaultBuilderPagePresetTemplateTree({ page, runtime, pre
                             config: {
                                 margin: 0,
                                 padding: 0,
-                                background: "transparent",
                             },
                         }),
             ...((isStructurePage || isPagesPage)
@@ -884,12 +995,10 @@ async function buildPhiDefaultBuilderPagePresetTemplateTree({ page, runtime, pre
                         config: {
                             balancedSides: true,
                             contentAlign: "center",
-                            gap: PHI_SPACE.base,
+                            gap: PHI_SPACE.sm,
                             padding: PHI_SPACE.xs,
                             paddingLeft: 0,
                             paddingRight: 0,
-                            border: "none",
-                            borderRadius: 0,
                             // A header as tall as its content, against the Layout default of filling its slot.
                             size: { height: "auto" },
                         },
@@ -906,10 +1015,7 @@ async function buildPhiDefaultBuilderPagePresetTemplateTree({ page, runtime, pre
                     sortOrder: 0,
                     label: "Builder module usage body",
                     config: {
-                        gap: PHI_SPACE.base,
-                        padding: PHI_SPACE.base,
-                        background: PHI_COLOR.bgLayout,
-                        border: "none",
+                        ...PHI_DIALOG_BODY_CONFIG,
                     },
                 }),
                 nodes.layout({
@@ -931,10 +1037,7 @@ async function buildPhiDefaultBuilderPagePresetTemplateTree({ page, runtime, pre
                     sortOrder: 0,
                     label: "Builder public route collision body",
                     config: {
-                        gap: PHI_SPACE.base,
-                        padding: PHI_SPACE.base,
-                        background: PHI_COLOR.bgLayout,
-                        border: "none",
+                        ...PHI_DIALOG_BODY_CONFIG,
                     },
                 }),
                 nodes.layout({
@@ -956,10 +1059,7 @@ async function buildPhiDefaultBuilderPagePresetTemplateTree({ page, runtime, pre
                     sortOrder: 0,
                     label: "Builder module detail body",
                     config: {
-                        gap: PHI_SPACE.base,
-                        padding: PHI_SPACE.base,
-                        background: PHI_COLOR.bgLayout,
-                        border: "none",
+                        ...PHI_DIALOG_BODY_CONFIG,
                     },
                 }),
             ] : []),
@@ -979,9 +1079,7 @@ async function buildPhiDefaultBuilderPagePresetTemplateTree({ page, runtime, pre
                     sortOrder: 0,
                     label: "Builder area settings body",
                     config: {
-                        padding: PHI_SPACE.base,
-                        background: PHI_COLOR.bgLayout,
-                        border: "none",
+                        ...PHI_DIALOG_BODY_CONFIG,
                     },
                 }),
                 nodes.layout({
@@ -993,9 +1091,7 @@ async function buildPhiDefaultBuilderPagePresetTemplateTree({ page, runtime, pre
                     sortOrder: 0,
                     label: "Builder area settings fields",
                     config: {
-                        gap: PHI_SPACE.base,
-                        background: "transparent",
-                        border: "none",
+                        gap: PHI_SPACE.sm,
                     },
                 }),
                 nodes.layout({
@@ -1019,10 +1115,7 @@ async function buildPhiDefaultBuilderPagePresetTemplateTree({ page, runtime, pre
                     sortOrder: 0,
                     label: "Builder page metadata body",
                     config: {
-                        gap: PHI_SPACE.base,
-                        padding: PHI_SPACE.base,
-                        background: PHI_COLOR.bgLayout,
-                        border: "none",
+                        ...PHI_DIALOG_BODY_CONFIG,
                     },
                 }),
                 nodes.layout({
@@ -1064,13 +1157,10 @@ async function buildPhiDefaultBuilderPagePresetTemplateTree({ page, runtime, pre
                     label: "Page metadata commands",
                     config: {
                         key: "page-meta-commands",
-                        compact: false,
-                        wrap: true,
-                        showLabels: true,
-                        controlSize: "medium",
+                        ...PHI_DIALOG_COMMANDS_CONFIG,
                         buttons: [
-                            { key: "cancel", emits: [{ capabilityId: "command", value: "cancel" }], actionKey: "cancel" },
-                            { key: "save", emits: [{ capabilityId: "command", value: "save" }], actionKey: "save", variant: "primary" },
+                            { key: "cancel", emits: [{ capabilityId: "command", value: "cancel" }], action: "cancel" },
+                            { key: "save", emits: [{ capabilityId: "command", value: "save" }], action: "save" },
                         ],
                         signalRoutes: {
                             emits: [{
@@ -1259,14 +1349,12 @@ async function buildPhiDefaultBuilderPagePresetTemplateTree({ page, runtime, pre
                         label: "Area settings commands",
                         config: {
                             key: "area-settings-commands",
+                            ...PHI_DIALOG_COMMANDS_CONFIG,
                             /*
                              * The two buttons as one group rather than as two things that happen to stand near
                              * each other: they are the two ends of a single decision, and a gap between them
                              * reads as two unrelated offers.
                              */
-                            compact: true,
-                            showLabels: true,
-                            controlSize: "medium",
                             /*
                              * Two buttons, because the Form holds the answers until one of them is pressed.
                              *
@@ -1279,13 +1367,13 @@ async function buildPhiDefaultBuilderPagePresetTemplateTree({ page, runtime, pre
                             buttons: [{
                                     key: "cancel",
                                     emits: [{ capabilityId: "command", value: "cancel" }],
-                                    actionKey: "cancel",
+                                    action: "cancel",
                                 }, {
                                     key: "close",
                                     emits: [{ capabilityId: "command", value: "close" }],
-                                    actionKey: "save",
                                     variant: "primary",
                                     label: labels.areaSettings.close,
+                                    icon: "save",
                                 }],
                             signalRoutes: {
                                 emits: [{
@@ -1400,6 +1488,7 @@ async function buildPhiDefaultBuilderPagePresetTemplateTree({ page, runtime, pre
                                         emits: [{ capabilityId: "command", value: "createPage" }],
                                         label: labels.pages.newPage,
                                         icon: "plus",
+                                        variant: "primary",
                                     },
                                     {
                                         key: "editPageMeta",
@@ -1455,6 +1544,12 @@ async function buildPhiDefaultBuilderPagePresetTemplateTree({ page, runtime, pre
                                             missingLabels: modulesLabels
                                                 ? { missing: modulesLabels.missing.category, missingHint: modulesLabels.missing.hint }
                                                 : null,
+                                            serverUnavailableLabels: modulesLabels
+                                                ? {
+                                                    category: modulesLabels.serverUnavailable.category,
+                                                    hint: modulesLabels.serverUnavailable.hint,
+                                                }
+                                                : null,
                                             areaLabels: modulesLabels?.areas ?? null,
                                             usageLabels: modulesLabels
                                                 ? { shell: modulesLabels.usage.shell, signIn: modulesLabels.usage.signIn }
@@ -1561,7 +1656,7 @@ async function buildPhiDefaultBuilderPagePresetTemplateTree({ page, runtime, pre
                                     },
                                     signalRoutes: {
                                         emits: [
-                                            { routeKey: "builder-modules-table-action", capabilityId: "actionActivate", scope: "area", channel: "action", action: "activate", valueType: "json", valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.tableAction, receiver: createPhiBuilderControllerAddress() },
+                                            { routeKey: "builder-modules-table-action", capabilityId: "actionActivate", scope: "area", channel: "moduleTableAction", action: "activate", valueType: "json", valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.tableAction, receiver: createPhiBuilderControllerAddress() },
                                         ],
                                     },
                                 },
@@ -1622,13 +1717,10 @@ async function buildPhiDefaultBuilderPagePresetTemplateTree({ page, runtime, pre
                                 label: "Builder module usage commands",
                                 config: {
                                     key: "module-usage-commands",
-                                    compact: false,
-                                    wrap: true,
-                                    showLabels: true,
-                                    controlSize: "medium",
+                                    ...PHI_DIALOG_COMMANDS_CONFIG,
                                     buttons: [
-                                        { key: "cancel", emits: [{ capabilityId: "command", value: "cancel" }], actionKey: "cancel", label: modulesLabels?.usage.cancel ?? "Keep it on" },
-                                        { key: "confirm", emits: [{ capabilityId: "command", value: "confirm" }], actionKey: "save", variant: "primary", label: modulesLabels?.usage.confirm ?? "Switch off anyway" },
+                                        { key: "cancel", emits: [{ capabilityId: "command", value: "cancel" }], label: modulesLabels?.usage.cancel ?? "Keep it on", icon: "cancel" },
+                                        { key: "confirm", emits: [{ capabilityId: "command", value: "confirm" }], variant: "primary", label: modulesLabels?.usage.confirm ?? "Switch off anyway", icon: "save" },
                                     ],
                                     signalRoutes: {
                                         emits: [{
@@ -1707,13 +1799,10 @@ async function buildPhiDefaultBuilderPagePresetTemplateTree({ page, runtime, pre
                                 label: "Builder public route collision commands",
                                 config: {
                                     key: "public-routes-commands",
-                                    compact: false,
-                                    wrap: true,
-                                    showLabels: true,
-                                    controlSize: "medium",
+                                    ...PHI_DIALOG_COMMANDS_CONFIG,
                                     buttons: [
-                                        { key: "cancel", emits: [{ capabilityId: "command", value: "cancel" }], actionKey: "cancel", label: modulesLabels?.publicRoutes.cancel ?? "Cancel" },
-                                        { key: "assign", emits: [{ capabilityId: "command", value: "assign" }], actionKey: "save", variant: "primary", label: modulesLabels?.publicRoutes.assign ?? "Enable" },
+                                        { key: "cancel", emits: [{ capabilityId: "command", value: "cancel" }], label: modulesLabels?.publicRoutes.cancel ?? "Cancel", icon: "cancel" },
+                                        { key: "assign", emits: [{ capabilityId: "command", value: "assign" }], variant: "primary", label: modulesLabels?.publicRoutes.assign ?? "Enable", icon: "save" },
                                     ],
                                     signalRoutes: {
                                         emits: [{
@@ -1940,9 +2029,9 @@ async function buildPhiDefaultBuilderPagePresetTemplateTree({ page, runtime, pre
                                             structure: { mode: "tree", parentRowIdentityPath: "parentId", expandColumnKey: "icon", expandRowByClick: true },
                                             actions: {
                                                 toolbar: [
-                                                    { key: "add-link", label: navigationLabels.actions.addLink, icon: "antd:plus", display: "icon", execution: "provider" },
-                                                    { key: "add-container", label: navigationLabels.actions.addContainer, icon: "antd:folder-add", display: "icon", execution: "provider" },
-                                                    { key: "add-separator", label: navigationLabels.actions.addSeparator, icon: "antd:minus", display: "icon", execution: "provider" },
+                                                    { key: "add-link", label: navigationLabels.actions.addLink, icon: "antd:plus", display: "icon", mode: "primary", execution: "provider" },
+                                                    { key: "add-container", label: navigationLabels.actions.addContainer, icon: "antd:folder-add", display: "icon", mode: "primary", execution: "provider" },
+                                                    { key: "add-separator", label: navigationLabels.actions.addSeparator, icon: "antd:minus", display: "icon", mode: "primary", execution: "provider" },
                                                 ],
                                                 row: [
                                                     { key: "hide", label: navigationLabels.actions.hide, icon: "antd:eye", display: "icon", execution: "provider" },

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

@@ -34,12 +34,15 @@ export async function buildPhiDefaultBuilderSettingsPageTree({ page, runtime, })
                         typeKey: "description",
                         label: labels.sections.technical.title,
                         config: {
+                            // The words and the values apart: the words come from the label set, the values never pass a translator.
                             asideItems: [
-                                `${labels.fields.siteKey}: ${runtime.site.key}`,
-                                `${labels.fields.area}: ${PHI_BUILDER_SETTINGS_AREA}`,
-                                `${labels.fields.baseModule}: ${PHI_BUILDER_RUNTIME_MODULE_ID}`,
-                                `${labels.fields.settingsPath}: ${page.path}`,
+                                { text: `${labels.fields.siteKey}: %1`, values: [runtime.site.key] },
+                                { text: `${labels.fields.area}: %1`, values: [PHI_BUILDER_SETTINGS_AREA] },
+                                { text: `${labels.fields.baseModule}: %1`, values: [PHI_BUILDER_RUNTIME_MODULE_ID] },
+                                { text: `${labels.fields.settingsPath}: %1`, values: [page.path] },
                             ],
+                            // Facts in a panel, not cards on a page: bare entries on the panel's own ground.
+                            asideList: { itemSurface: null },
                         },
                     }],
             },