@phis/ui 0.2.1 → 0.3.0

package/plugins/runtime-modules/builder/developer-workspace-types.d.ts

@@ -1,53 +1,41 @@
-import type { PhiCmsContentWidgetNode, PhiCmsLayoutRenderNode } from "../../../types/cms";
-import type { PhiCmsBorderWidgetConfig, PhiCmsPaddingWidgetConfig } from "../../../types/cms-config";
+import type { PhiCmsLayoutRenderNode, PhiCmsTreeControllerSettings } from "../../../types/cms";
+import type { PhiCmsPaddingWidgetConfig } from "../../../types/cms-config";
 import type { PhiRenderableBlockEffects, PhiRuntimeModuleId } from "../../../types";
 import type { PhiBuilderAreaKey } from "../../../constants/cms-areas";
-import type { PhiCmsBackgroundWidgetConfig } from "../../../components/widgets/config/background";
 import type { PhiCmsGeometryWidgetConfig } from "../../../components/widgets/config/geometry";
 import type { PhiAnchorWidgetPlacement } from "../../../components/controls/phi-anchor-control-contract";
-import type { PhiShadow, PhiLayoutEffectId } from "../../../types/layout-style";
-import type { PhiBuilderRootNodeKind } from "./preview-transport";
 import type { PhiCmsInstanceId } from "../../../types/cms-instance-id";
 import type { PhiWorkspaceCatalogState } from "../../../components/workspace/catalog-state";
 import type { PhiCmsPresetSource } from "../../../types/cms-module-descriptors";
 import type { PhiAreaRootRoute, PhiAreaMeta } from "../../../helpers/cms-area-config";
+import type { PhiSurface } from "../../../types/surface";
 export type PhiDeveloperBuilderArea = PhiBuilderAreaKey;
 export type PhiDeveloperBuilderMode = "editor" | "preview";
 export type PhiDeveloperBuilderNodeKind = "page" | "region" | "layout" | "widget" | "slot";
 export type PhiDeveloperBuilderCommandWorkspace = "structure" | "pages" | "navigation" | "modules" | "theme" | null;
-export type PhiBuilderChromeControls = {
-    editorPreviewDisabled: boolean;
-    actionsDisabled: boolean;
-    debugDisabled: boolean;
-};
 export type PhiDeveloperBuilderRegionDraft = PhiCmsGeometryWidgetConfig & {
-    background: PhiCmsBackgroundWidgetConfig;
-    border?: PhiCmsBorderWidgetConfig | null;
-    effect?: PhiLayoutEffectId | null;
-    shadow?: PhiShadow | null;
+    /** The Region's own look; the root Layout's is its `config.surface`. */
+    surface?: PhiSurface | null;
     regionConfig?: Record<string, unknown> | null;
-    rootNodeId?: PhiCmsInstanceId | null;
-    rootNodeTypeKey?: string | null;
-    rootNodeKind?: PhiBuilderRootNodeKind;
-    rootNodeTitle?: string | null;
-    rootNodePackageName?: string | null;
-    rootNodeConfig?: Record<string, unknown> | null;
-    rootNodeGeometry?: PhiCmsGeometryWidgetConfig | null;
-    rootNodeAnchor?: PhiAnchorWidgetPlacement | null;
-    rootNodePadding?: PhiCmsPaddingWidgetConfig | null;
-    rootNodeBackground?: PhiCmsBackgroundWidgetConfig | null;
-    rootNodeBorder?: PhiCmsBorderWidgetConfig | null;
-    rootNodeShadow?: PhiShadow | null;
-    rootNodeChildLayouts?: PhiCmsLayoutRenderNode[];
-    rootNodeChildWidgets?: PhiCmsContentWidgetNode[];
+    /**
+     * The Region's root Layout: one Layout node like every node nested in it, edited, rendered and
+     * stored the same way. Its look is its `config.surface`; the Region's own is `surface` above.
+     */
+    rootNode?: PhiCmsLayoutRenderNode | null;
 };
 /**
- * The Inspector's draft for one node inside a Region, a Layout or the root.
+ * The Inspector's view of the selected Layout, the Region's root Layout or one nested in it alike.
  *
- * Its background is `rootNodeBackground`; the Region's own `background` belongs to the Region draft
- * and means nothing here, which is why it is left out rather than filled with a stand-in.
+ * `config` is the node's config over its Layout's defaults, the way the Settings read it; anchor, inset
+ * and Surface are read off it once. Nothing here is stored -- every edit goes to the node's config.
  */
-export type PhiDeveloperBuilderStructureNodeDraft = Omit<PhiDeveloperBuilderRegionDraft, "background">;
+export type PhiDeveloperBuilderStructureNodeDraft = {
+    node: PhiCmsLayoutRenderNode;
+    config: Record<string, unknown>;
+    anchor: PhiAnchorWidgetPlacement | null;
+    padding: PhiCmsPaddingWidgetConfig | null;
+    surface: PhiSurface | null;
+};
 export type PhiDeveloperBuilderPageMetaDraft = {
     title?: string | null;
     description?: string | null;
@@ -134,7 +122,6 @@ export type PhiDeveloperBuilderState = {
     selectedRegionKey: string | null;
     selectedRootRegionKey: string | null;
     selectedLayoutAnchor: PhiAnchorWidgetPlacement;
-    regionDrafts: Record<string, PhiDeveloperBuilderRegionDraft>;
     pagePresetDrafts: Record<string, PhiDeveloperBuilderRegionDraft>;
     pageMetaDrafts: Record<string, PhiDeveloperBuilderPageMetaDraft>;
     deletedPageDrafts: Record<string, boolean>;
@@ -184,7 +171,6 @@ export type PhiDeveloperBuilderState = {
     darkMode: boolean;
     debugScaffold: boolean;
     commandWorkspace: PhiDeveloperBuilderCommandWorkspace;
-    builderChromeControls: PhiBuilderChromeControls;
     pickerWidgetCategoryFilters: string[];
     /**
      * The Area root route being edited, by target Area.
@@ -210,6 +196,16 @@ export type PhiDeveloperBuilderState = {
      */
     areaMetaDrafts: Record<string, PhiAreaMeta | null>;
     areaMeta: Record<string, PhiAreaMeta | null>;
+    /**
+     * What each tree tells its Controllers (`controllerSettings`), as the server handed it over: by
+     * target Area for the Shell, by Page meta draft key for a Page.
+     *
+     * Carried, not edited -- the Builder has no surface for it -- and carried because a save states the
+     * tree whole: one that left it out would store a Page whose Controllers are told nothing, and the
+     * dialog a Module wired to them would stop opening the moment somebody saved the Page.
+     */
+    areaControllerSettings: Record<string, PhiCmsTreeControllerSettings>;
+    pageControllerSettings: Record<string, PhiCmsTreeControllerSettings>;
     /**
      * Areas whose Module selection has unsaved edits. The Modules workspace is site-wide, so its save
      * and publish commands walk this list instead of the header Area scope.

package/plugins/runtime-modules/builder/edit-scaffold-drawer.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { theme as antdTheme } from "antd";
+import { usePhiConfig } from "../../../components/root/phi-config-provider";
 import { PhiButtonControl } from "../../../components/controls/phi-button-control";
-import { PlusOutlined } from "@ant-design/icons";
 import { usePhiDeveloperBuilderStateValue } from "./developer-workspace-store";
+import { PhiIcon } from "../../../components/shell/phi-icon";
 export function PhiEditScaffoldDrawer({ kind, nodeId, regionKey, scaffoldLabel, className, onOpenInsert, onClick, onKeyDown, children, chrome, style, }) {
-    const { token } = antdTheme.useToken();
+    const { token } = usePhiConfig();
     const selected = usePhiDeveloperBuilderStateValue("public", (state) => state.selectedRootRegionKey === regionKey &&
         state.nodeId === nodeId &&
         (state.nodeKind === "layout"));
@@ -30,7 +30,8 @@ export function PhiEditScaffoldDrawer({ kind, nodeId, regionKey, scaffoldLabel,
             event.stopPropagation();
             onClick?.();
         }, onKeyDown: (event) => {
-            if (event.key !== "Enter" && event.key !== " ") {
+            // The key belongs to the control that has focus; a button inside the scaffold answers it itself.
+            if ((event.key !== "Enter" && event.key !== " ") || event.target !== event.currentTarget) {
                 return;
             }
             event.preventDefault();
@@ -53,5 +54,5 @@ export function PhiEditScaffoldDrawer({ kind, nodeId, regionKey, scaffoldLabel,
                         borderRadius: 0,
                     }, 
                     // The drawer is selectable; inserting into it must not select it as well.
-                    onClick: (event) => event.stopPropagation(), children: _jsx(PhiButtonControl, { type: "dashed", size: "small", icon: _jsx(PlusOutlined, {}), ariaLabel: "Insert child", onClick: () => onOpenInsert?.() }) })) }), chrome] }));
+                    onClick: (event) => event.stopPropagation(), children: _jsx(PhiButtonControl, { type: "dashed", size: "small", icon: _jsx(PhiIcon, { name: "plus", size: "inherit" }), ariaLabel: "Insert child", onClick: () => onOpenInsert?.() }) })) }), chrome] }));
 }

package/plugins/runtime-modules/builder/effects-form-values.js

@@ -1,3 +1,4 @@
+import { isPhiRecord } from "../../../helpers/is-record";
 export const PHI_BUILDER_EFFECTS_SECTIONS = ["appearance", "transitions", "viewport"];
 function withRowKeys(values, prefix) {
     return values.map((value, index) => ({ ...value, __rowKey: `${prefix}:${index}` }));
@@ -18,7 +19,7 @@ export function splitPhiBuilderEffectsFormValues(effects) {
     };
 }
 function readRecord(value) {
-    return value && typeof value === "object" && !Array.isArray(value)
+    return isPhiRecord(value)
         ? value
         : {};
 }
@@ -26,7 +27,7 @@ function withoutRowKeys(value) {
     if (!Array.isArray(value))
         return [];
     return value.flatMap((entry) => {
-        if (!entry || typeof entry !== "object" || Array.isArray(entry))
+        if (!isPhiRecord(entry))
             return [];
         const row = { ...entry };
         delete row.__rowKey;

package/plugins/runtime-modules/builder/history.d.ts

@@ -2,6 +2,7 @@ import type { PhiBuilderNavigationTree } from "../../../helpers/cms-navigation-c
 import type { PhiAreaRootRoute, PhiAreaMeta } from "../../../helpers/cms-area-config";
 import type { PhiRuntimeModuleId } from "../../../types";
 import type { PhiDeveloperBuilderArea, PhiDeveloperBuilderRegionDraft, PhiDeveloperBuilderWorkspaceState } from "./developer-workspace-types";
+import type { PhiHistoryAction } from "../../../components/widgets/label-types/history";
 export type PhiBuilderHistoryWorkspace = "structure" | "pages" | "navigation" | "modules";
 export type PhiBuilderHistorySnapshot = {
     kind: "regionDrafts";
@@ -44,6 +45,30 @@ export type PhiBuilderHistorySnapshot = {
     kind: "areaMeta";
     area: PhiDeveloperBuilderArea;
     meta: PhiAreaMeta | null | undefined;
+} | {
+    /**
+     * Several of the kinds above, taken back as one step.
+     *
+     * For a gesture that writes into more than one place at once -- the Area settings dialog answers
+     * the root route and the SEO answers in one press of OK. Two entries made that one press two
+     * undos, and the first of them left a state the author never saw. The parts touch disjoint state,
+     * so the order they are put back in does not matter.
+     */
+    kind: "composite";
+    parts: readonly Exclude<PhiBuilderHistorySnapshot, {
+        kind: "composite";
+    }>[];
+};
+/**
+ * What one draft write records, so it can be taken back: the history it belongs to, the step it was,
+ * and -- for a control that writes while it is being used -- the gesture it continues
+ * (`PhiHistoryEntry.coalesceKey`). A write without it is not recorded, which is how undo itself and the
+ * first load of a draft put state back without making a step of it.
+ */
+export type PhiBuilderHistoryRecording = {
+    context: string;
+    action: PhiHistoryAction;
+    coalesceKey?: string;
 };
 export declare const phiBuilderHistory: {
     clear: (scopeKey: string) => void;
@@ -51,17 +76,46 @@ export declare const phiBuilderHistory: {
     getAvailability: (scopeKey: string) => {
         canUndo: boolean;
         canRedo: boolean;
+        undoAction: PhiHistoryAction | null;
+        redoAction: PhiHistoryAction | null;
     };
-    getHead: (scopeKey: string) => import("../../../components/state/history-store").PhiHistoryEntry<PhiBuilderHistorySnapshot> | null;
-    record: (scopeKey: string, entry: import("../../../components/state/history-store").PhiHistoryEntry<PhiBuilderHistorySnapshot>) => void;
-    redo: (scopeKey: string, apply: (snapshot: PhiBuilderHistorySnapshot) => void) => boolean;
+    getHead: (scopeKey: string) => {
+        action: PhiHistoryAction;
+        before: PhiBuilderHistorySnapshot;
+        after: PhiBuilderHistorySnapshot;
+        coalesceKey?: string;
+    } | null;
+    record: (scopeKey: string, entry: {
+        action: PhiHistoryAction;
+        before: PhiBuilderHistorySnapshot;
+        after: PhiBuilderHistorySnapshot;
+        coalesceKey?: string;
+    }) => void;
+    redo: (scopeKey: string, apply: (snapshot: PhiBuilderHistorySnapshot) => void) => {
+        action: PhiHistoryAction;
+        before: PhiBuilderHistorySnapshot;
+        after: PhiBuilderHistorySnapshot;
+        coalesceKey?: string;
+    } | null;
     subscribe: (scopeKey: import("../../../state").PhiPluginStateScope, listener: () => void) => () => void;
-    undo: (scopeKey: string, apply: (snapshot: PhiBuilderHistorySnapshot) => void) => boolean;
+    undo: (scopeKey: string, apply: (snapshot: PhiBuilderHistorySnapshot) => void) => {
+        action: PhiHistoryAction;
+        before: PhiBuilderHistorySnapshot;
+        after: PhiBuilderHistorySnapshot;
+        coalesceKey?: string;
+    } | null;
     useAvailability: (scopeKey: string) => {
         canUndo: boolean;
         canRedo: boolean;
+        undoAction: PhiHistoryAction | null;
+        redoAction: PhiHistoryAction | null;
     };
-    useHead: (scopeKey: string) => import("../../../components/state/history-store").PhiHistoryEntry<PhiBuilderHistorySnapshot> | null;
+    useHead: (scopeKey: string) => {
+        action: PhiHistoryAction;
+        before: PhiBuilderHistorySnapshot;
+        after: PhiBuilderHistorySnapshot;
+        coalesceKey?: string;
+    } | null;
 };
 export declare function createPhiBuilderHistoryContext(input: {
     workspace: PhiBuilderHistoryWorkspace;

package/plugins/runtime-modules/builder/ids.d.ts

@@ -1,4 +1,13 @@
 export declare const PHI_BUILDER_RUNTIME_MODULE_ID: "@phis/ui/modules/builder";
+/**
+ * The Module's identity as its Label Sets inherit it (`definePhiRuntimeModuleLabelSet`): the id and,
+ * where a Module declares one, its source locale. Stated here beside the id and spread into the
+ * definition, so a Label Set a tree or a form reads does not import the definition that imports the
+ * tree -- and a Module that writes in another language says so once.
+ */
+export declare const PHI_BUILDER_RUNTIME_MODULE_IDENTITY: {
+    readonly moduleId: "@phis/ui/modules/builder";
+};
 export declare const PHI_BUILDER_RUNTIME_DATA_PROVIDER_KEYS: {
     readonly forms: `${string}/${string}`;
     readonly builderPages: `${string}/${string}`;

package/plugins/runtime-modules/builder/ids.js

@@ -2,6 +2,15 @@ import { PHI_SHARED_PACKAGE_NAME } from "../../../types/signals";
 import { createPhiSharedRuntimeDataProviderKey } from "../../../constants/runtime-data-provider-key";
 import { PHI_AUTHORING_OPTION_PROVIDER_KEYS } from "../../../constants/authoring-option-provider-keys";
 export const PHI_BUILDER_RUNTIME_MODULE_ID = `${PHI_SHARED_PACKAGE_NAME}/modules/builder`;
+/**
+ * The Module's identity as its Label Sets inherit it (`definePhiRuntimeModuleLabelSet`): the id and,
+ * where a Module declares one, its source locale. Stated here beside the id and spread into the
+ * definition, so a Label Set a tree or a form reads does not import the definition that imports the
+ * tree -- and a Module that writes in another language says so once.
+ */
+export const PHI_BUILDER_RUNTIME_MODULE_IDENTITY = {
+    moduleId: PHI_BUILDER_RUNTIME_MODULE_ID,
+};
 export const PHI_BUILDER_RUNTIME_DATA_PROVIDER_KEYS = {
     forms: PHI_AUTHORING_OPTION_PROVIDER_KEYS.forms,
     builderPages: PHI_AUTHORING_OPTION_PROVIDER_KEYS.pages,

package/plugins/runtime-modules/builder/inspector-actions.d.ts

@@ -1,4 +1,4 @@
-import { type PhiShadow } from "../../../types/layout-style";
+import { type PhiSurface } from "../../../types/surface";
 export type PhiBuilderInspectorAction = {
     kind: "patchSelectedRegionDraft";
     patch: Record<string, unknown>;
@@ -8,27 +8,32 @@ export type PhiBuilderInspectorAction = {
 } | {
     kind: "patchSelectedWidgetGeometry";
     geometry: Record<string, unknown>;
+}
+/** The selected Widget's whole Surface; `null` takes it away. */
+ | {
+    kind: "patchSelectedWidgetSurface";
+    surface: PhiSurface | null;
 } | {
     kind: "setSelectedWidgetTranslate";
     translate: boolean;
+} | {
+    kind: "setSelectedLayoutTranslate";
+    translate: boolean;
 } | {
     kind: "patchSelectedLayoutAnchor";
     selectedLayoutAnchor: string;
 } | {
     kind: "patchSelectedLayoutPadding";
     padding: Record<string, unknown> | null;
-} | {
-    kind: "patchSelectedLayoutBackground";
-    background: unknown;
-} | {
-    kind: "patchSelectedLayoutBorder";
-    border: unknown;
-} | {
-    kind: "patchSelectedLayoutShadow";
-    shadow: PhiShadow;
-} | {
+}
+/** The selected Layout's whole Surface; `null` takes it away. */
+ | {
+    kind: "patchSelectedLayoutSurface";
+    surface: PhiSurface | null;
+}
+/** Every key one gesture changed on the selected Layout, written as one step; `null` takes a key away. */
+ | {
     kind: "patchSelectedLayoutConfig";
-    key: string;
-    value?: unknown;
+    patch: Record<string, unknown>;
 };
 export declare function readPhiBuilderInspectorAction(value: unknown): PhiBuilderInspectorAction | null;

package/plugins/runtime-modules/builder/inspector-actions.js

@@ -1,4 +1,4 @@
-import { readPhiShadow } from "../../../types/layout-style";
+import { readPhiSurface } from "../../../types/surface";
 import { isPhiRecord } from "../../../helpers/is-record";
 function readRecord(value) {
     return isPhiRecord(value) ? value : null;
@@ -19,7 +19,10 @@ export function readPhiBuilderInspectorAction(value) {
         const geometry = readRecord(value.geometry);
         return geometry ? { kind: value.kind, geometry } : null;
     }
-    if (value.kind === "setSelectedWidgetTranslate") {
+    if (value.kind === "patchSelectedWidgetSurface") {
+        return { kind: value.kind, surface: readPhiSurface(value.surface) };
+    }
+    if (value.kind === "setSelectedWidgetTranslate" || value.kind === "setSelectedLayoutTranslate") {
         return typeof value.translate === "boolean" ? { kind: value.kind, translate: value.translate } : null;
     }
     if (value.kind === "patchSelectedLayoutAnchor") {
@@ -31,22 +34,12 @@ export function readPhiBuilderInspectorAction(value) {
         const padding = value.padding == null ? null : readRecord(value.padding);
         return value.padding == null || padding ? { kind: value.kind, padding } : null;
     }
-    if (value.kind === "patchSelectedLayoutBackground") {
-        return { kind: value.kind, background: value.background };
-    }
-    if (value.kind === "patchSelectedLayoutBorder") {
-        return { kind: value.kind, border: value.border };
-    }
-    if (value.kind === "patchSelectedLayoutShadow") {
-        return {
-            kind: value.kind,
-            shadow: readPhiShadow(value.shadow) ?? "none",
-        };
+    if (value.kind === "patchSelectedLayoutSurface") {
+        return { kind: value.kind, surface: readPhiSurface(value.surface) };
     }
     if (value.kind === "patchSelectedLayoutConfig") {
-        return typeof value.key === "string"
-            ? { kind: value.kind, key: value.key, value: value.value }
-            : null;
+        const patch = readRecord(value.patch);
+        return patch ? { kind: value.kind, patch } : null;
     }
     return null;
 }

package/plugins/runtime-modules/builder/inspector-overlay-addresses.d.ts

@@ -5,12 +5,11 @@
  */
 export declare const PHI_BUILDER_INSPECTOR_OVERLAY_PRESET_KEY = "builder-inspector-overlay-preset";
 export declare const PHI_BUILDER_INSPECTOR_OVERLAY_IDS: Readonly<Record<"signalWiring" | "regionInspector" | "layoutInspector" | "widgetInspector" | "effectsEditor", import("@phis/contracts/cms").PhiCmsInstanceId>>;
-export declare const PHI_BUILDER_INSPECTOR_DRAWER_OVERLAY_IDS: readonly [import("@phis/contracts/cms").PhiCmsInstanceId, import("@phis/contracts/cms").PhiCmsInstanceId, import("@phis/contracts/cms").PhiCmsInstanceId];
 export declare const PHI_BUILDER_INSPECTOR_LAYOUT_IDS: Readonly<Record<"regionInspectorHeader" | "layoutInspectorHeader" | "widgetInspectorHeader" | "regionInspectorBody" | "layoutInspectorBody" | "widgetInspectorBody" | "effectsHeader" | "effectsBody" | "effectsFooter" | "signalWiringBody" | "signalWiringFooter", import("@phis/contracts/cms").PhiCmsInstanceId>>;
-export declare const PHI_BUILDER_INSPECTOR_WIDGET_IDS: Readonly<Record<"regionInspectorHeaderWidget" | "layoutInspectorHeaderWidget" | "widgetInspectorHeaderWidget" | "effectsTabs" | "effectsAppearanceForm" | "effectsTransitionsForm" | "effectsViewportForm" | "effectsCommands" | "signalWiringForm" | "signalWiringRoutes" | "signalWiringCommands", import("@phis/contracts/cms").PhiCmsInstanceId>>;
+export declare const PHI_BUILDER_INSPECTOR_WIDGET_IDS: Readonly<Record<"signalWiringForm" | "signalWiringRoutes" | "regionInspectorHeaderWidget" | "layoutInspectorHeaderWidget" | "widgetInspectorHeaderWidget" | "effectsTabs" | "effectsAppearanceForm" | "effectsTransitionsForm" | "effectsViewportForm" | "effectsCommands" | "signalWiringCommands", import("@phis/contracts/cms").PhiCmsInstanceId>>;
 export declare const PHI_BUILDER_EFFECTS_FORM_WIDGET_IDS: {
     readonly appearance: import("@phis/contracts/cms").PhiCmsInstanceId;
     readonly transitions: import("@phis/contracts/cms").PhiCmsInstanceId;
     readonly viewport: import("@phis/contracts/cms").PhiCmsInstanceId;
 };
-export declare const PHI_BUILDER_INSPECTOR_SECTION_WIDGET_IDS: Readonly<Record<"regionGeometry" | "regionViewport" | "regionPadding" | "regionBackground" | "regionBorder" | "regionShadow" | "layoutSettings" | "layoutAnchor" | "layoutViewport" | "layoutBackground" | "layoutBorder" | "layoutShadow" | "layoutSignals" | "widgetSettings" | "widgetGeometry" | "widgetViewport" | "widgetSignals" | "layoutPadding", import("@phis/contracts/cms").PhiCmsInstanceId>>;
+export declare const PHI_BUILDER_INSPECTOR_SECTION_WIDGET_IDS: Readonly<Record<"regionVisibility" | "regionGeometry" | "regionViewport" | "regionPadding" | "regionSurface" | "layoutSettings" | "layoutAnchor" | "layoutViewport" | "layoutSurface" | "layoutSignals" | "widgetSettings" | "widgetGeometry" | "widgetViewport" | "widgetSurface" | "widgetSignals" | "layoutPadding", import("@phis/contracts/cms").PhiCmsInstanceId>>;

package/plugins/runtime-modules/builder/inspector-overlay-addresses.js

@@ -12,11 +12,6 @@ const PHI_BUILDER_INSPECTOR_PRESET_IDENTITY = {
     presetKey: PHI_BUILDER_INSPECTOR_OVERLAY_PRESET_KEY,
 };
 export const PHI_BUILDER_INSPECTOR_OVERLAY_IDS = createPhiPresetCmsInstanceIdMap(PHI_BUILDER_INSPECTOR_PRESET_IDENTITY, ["regionInspector", "layoutInspector", "widgetInspector", "effectsEditor", "signalWiring"]);
-export const PHI_BUILDER_INSPECTOR_DRAWER_OVERLAY_IDS = [
-    PHI_BUILDER_INSPECTOR_OVERLAY_IDS.regionInspector,
-    PHI_BUILDER_INSPECTOR_OVERLAY_IDS.layoutInspector,
-    PHI_BUILDER_INSPECTOR_OVERLAY_IDS.widgetInspector,
-];
 export const PHI_BUILDER_INSPECTOR_LAYOUT_IDS = createPhiPresetCmsInstanceIdMap(PHI_BUILDER_INSPECTOR_PRESET_IDENTITY, ["regionInspectorHeader", "layoutInspectorHeader", "widgetInspectorHeader", "regionInspectorBody", "layoutInspectorBody", "widgetInspectorBody", "effectsHeader", "effectsBody", "effectsFooter", "signalWiringBody", "signalWiringFooter"]);
 export const PHI_BUILDER_INSPECTOR_WIDGET_IDS = createPhiPresetCmsInstanceIdMap(PHI_BUILDER_INSPECTOR_PRESET_IDENTITY, ["regionInspectorHeaderWidget", "layoutInspectorHeaderWidget", "widgetInspectorHeaderWidget", "effectsTabs", "effectsAppearanceForm", "effectsTransitionsForm", "effectsViewportForm", "effectsCommands", "signalWiringForm", "signalWiringRoutes", "signalWiringCommands"]);
 export const PHI_BUILDER_EFFECTS_FORM_WIDGET_IDS = {
@@ -25,8 +20,8 @@ export const PHI_BUILDER_EFFECTS_FORM_WIDGET_IDS = {
     viewport: PHI_BUILDER_INSPECTOR_WIDGET_IDS.effectsViewportForm,
 };
 export const PHI_BUILDER_INSPECTOR_SECTION_WIDGET_IDS = createPhiPresetCmsInstanceIdMap(PHI_BUILDER_INSPECTOR_PRESET_IDENTITY, [
-    "regionGeometry", "regionViewport", "regionPadding", "regionBackground", "regionBorder", "regionShadow",
-    "layoutSettings", "layoutAnchor", "layoutViewport", "layoutBackground", "layoutBorder", "layoutShadow", "layoutSignals",
-    "widgetSettings", "widgetGeometry", "widgetViewport", "widgetSignals",
+    "regionGeometry", "regionViewport", "regionVisibility", "regionPadding", "regionSurface",
+    "layoutSettings", "layoutAnchor", "layoutViewport", "layoutSurface", "layoutSignals",
+    "widgetSettings", "widgetGeometry", "widgetViewport", "widgetSurface", "widgetSignals",
     "layoutPadding",
 ]);

package/plugins/runtime-modules/builder/inspector-section-widget.js

@@ -1,11 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { buildPhiWidgetLabelTranslatorOptions } from "../../../components/widgets/label-sets/runtime-options";
 import { getPhiBorderWidgetLabels } from "../../../components/widgets/label-sets/border";
 import { getPhiBackgroundWidgetLabels } from "../../../components/widgets/label-sets/background";
 import { getPhiPaddingWidgetLabels } from "../../../components/widgets/label-sets/padding";
 import { getPhiGeometryWidgetLabels } from "../../../components/widgets/label-sets/geometry";
 import { getPhiSignalsWidgetLabels } from "../../../components/widgets/label-sets/signals";
-import { getPhiColorPickerLabelsForRuntime } from "../../../components/widgets/label-sets/color-picker";
-import { getPhiIconPickerLabelsForRuntime } from "../../../components/widgets/label-sets/icon-picker";
+import { getPhiInspectorWidgetLabels } from "../../../components/widgets/label-sets/inspector";
+import { resolvePhiInspectorSurfaceLabels } from "./clients/inspector-surface-labels";
+import { getPhiColorPickerLabels } from "../../../components/widgets/label-sets/color-picker";
+import { getPhiIconPickerLabels } from "../../../components/widgets/label-sets/icon-picker";
 import { PhiBuilderLayoutInspectorSectionWidgetClient, PhiBuilderRegionInspectorSectionWidgetClient, PhiBuilderWidgetInspectorSectionWidgetClient, } from "./clients/inspector-section-widget";
 import { buildPhiBuilderRuntimeModuleIdsForArea } from "./area-shell-presets.server";
 import { resolvePhiBuilderAreaAsCmsArea } from "../../../constants/cms-areas";
@@ -37,7 +40,7 @@ export async function PhiBuilderInspectorSectionWidget({ runtime, registry, view
             ...targetDataProviderDescriptors.map((descriptor) => descriptor.key),
         ]),
     ];
-    const [backgroundLabels, borderLabels, paddingLabels, geometryLabels, signalsLabels, colorPickerLabels, iconPickerLabels,] = await Promise.all([
+    const [backgroundLabels, borderLabels, paddingLabels, geometryLabels, signalsLabels, colorPickerLabels, iconPickerLabels, inspectorLabels,] = await Promise.all([
         getPhiBackgroundWidgetLabels({
             apiBaseUrl: readPhiServerApiCredentials().apiBaseUrl,
             internalToken: readPhiServerApiCredentials().internalToken,
@@ -63,8 +66,14 @@ export async function PhiBuilderInspectorSectionWidget({ runtime, registry, view
             internalToken: readPhiServerApiCredentials().internalToken,
             locale: runtime.locale.current,
         }),
-        getPhiColorPickerLabelsForRuntime(runtime),
-        getPhiIconPickerLabelsForRuntime(runtime),
+        getPhiColorPickerLabels(buildPhiWidgetLabelTranslatorOptions(runtime)),
+        getPhiIconPickerLabels(buildPhiWidgetLabelTranslatorOptions(runtime)),
+        getPhiInspectorWidgetLabels({
+            apiBaseUrl: readPhiServerApiCredentials().apiBaseUrl,
+            internalToken: readPhiServerApiCredentials().internalToken,
+            locale: runtime.locale.current,
+        }),
     ]);
-    return (_jsx(PhiRuntimeModuleAuthoringDataProviderHost, { providerKeys: authoringDataProviderKeys, children: _jsx(PhiRuntimeModuleDataProviderClientHost, { providerKeys: resolvePhiBuilderAuthoringPickerDataProviderKeysFromCatalog(registry.runtimeModuleCatalog), mode: "live", children: view === "region" ? (_jsx(PhiBuilderRegionInspectorSectionWidgetClient, { section: section, signalRoutes: signalRoutes, geometryLabels: geometryLabels, backgroundLabels: backgroundLabels, borderLabels: borderLabels, paddingLabels: paddingLabels, colorPickerLabels: colorPickerLabels })) : view === "layout" ? (_jsx(PhiBuilderLayoutInspectorSectionWidgetClient, { section: section, signalRoutes: signalRoutes, signalsLabels: signalsLabels, backgroundLabels: backgroundLabels, borderLabels: borderLabels, paddingLabels: paddingLabels, colorPickerLabels: colorPickerLabels, iconPickerLabels: iconPickerLabels })) : (_jsx(PhiBuilderWidgetInspectorSectionWidgetClient, { section: section, signalRoutes: signalRoutes, geometryLabels: geometryLabels, signalsLabels: signalsLabels, colorPickerLabels: colorPickerLabels, iconPickerLabels: iconPickerLabels })) }) }));
+    const surfaceLabels = resolvePhiInspectorSurfaceLabels(inspectorLabels);
+    return (_jsx(PhiRuntimeModuleAuthoringDataProviderHost, { providerKeys: authoringDataProviderKeys, children: _jsx(PhiRuntimeModuleDataProviderClientHost, { providerKeys: resolvePhiBuilderAuthoringPickerDataProviderKeysFromCatalog(registry.runtimeModuleCatalog), mode: "live", children: view === "region" ? (_jsx(PhiBuilderRegionInspectorSectionWidgetClient, { section: section, signalRoutes: signalRoutes, geometryLabels: geometryLabels, backgroundLabels: backgroundLabels, borderLabels: borderLabels, paddingLabels: paddingLabels, surfaceLabels: surfaceLabels, visibilityLabels: inspectorLabels.regionVisibility, colorPickerLabels: colorPickerLabels })) : view === "layout" ? (_jsx(PhiBuilderLayoutInspectorSectionWidgetClient, { section: section, signalRoutes: signalRoutes, signalsLabels: signalsLabels, backgroundLabels: backgroundLabels, borderLabels: borderLabels, paddingLabels: paddingLabels, surfaceLabels: surfaceLabels, gridLabels: inspectorLabels.grid, colorPickerLabels: colorPickerLabels, iconPickerLabels: iconPickerLabels, fieldLabels: inspectorLabels.fields })) : (_jsx(PhiBuilderWidgetInspectorSectionWidgetClient, { section: section, signalRoutes: signalRoutes, geometryLabels: geometryLabels, surfaceLabels: surfaceLabels, backgroundLabels: backgroundLabels, borderLabels: borderLabels, signalsLabels: signalsLabels, colorPickerLabels: colorPickerLabels, iconPickerLabels: iconPickerLabels, fieldLabels: inspectorLabels.fields })) }) }));
 }

package/plugins/runtime-modules/builder/module-authoring-catalog.d.ts

@@ -7,6 +7,8 @@ import type { PhiControlOption } from "../../../components/controls/phi-control-
 import type { PhiBuilderPluginMeta } from "../../../types/builder";
 export type PhiBuilderModuleAuthoringCatalogEntry = {
     moduleId: PhiRuntimeModuleId;
+    /** The language the Module's own texts are written in; `en` for every Module of ours. */
+    sourceLocale: string;
     locked: boolean;
     plugins: readonly PhiBuilderPluginMeta[];
     widgetDefinitions: readonly PhiRuntimeModuleClientWidgetDefinition[];

package/plugins/runtime-modules/builder/module-authoring-catalog.server.js

@@ -2,6 +2,7 @@ import "server-only";
 import { canPhiViewerAccessOwnedPolicy } from "../../../types/access";
 import { buildPhiRuntimeModuleLayoutType, buildPhiRuntimeModuleWidgetType, } from "../../../plugins/runtime-modules/contracts";
 import { buildPhiBuilderLayoutPluginMetas, buildPhiBuilderPluginMeta, } from "./plugin-metas";
+import { resolvePhiRuntimeModuleSourceLocale } from "../../../types/runtime-module-locale";
 export function buildPhiBuilderModuleAuthoringCatalog({ catalog, area, activeModuleIds, viewer, }) {
     const areaDefinition = catalog.areaDefinitions.find((definition) => definition.area === area);
     if (!areaDefinition) {
@@ -25,6 +26,7 @@ export function buildPhiBuilderModuleAuthoringCatalog({ catalog, area, activeMod
         const layouts = entry.layouts.filter((layout) => canPhiViewerAccessOwnedPolicy(viewer, layout.accessPolicy, providerId));
         return [{
                 moduleId,
+                sourceLocale: resolvePhiRuntimeModuleSourceLocale(entry.definition),
                 locked,
                 plugins: [
                     ...layouts.flatMap((layout) => buildPhiBuilderLayoutPluginMetas(layout.definition)),
@@ -36,6 +38,7 @@ export function buildPhiBuilderModuleAuthoringCatalog({ catalog, area, activeMod
                     title: widget.definition.title,
                     signalSubcontrols: widget.definition.signalSubcontrols,
                     slotSizePolicy: widget.definition.slotSizePolicy,
+                    surface: widget.definition.surface,
                     renderPolicies: widget.renderPolicies,
                 })),
                 layoutTypes: layouts.map(buildPhiRuntimeModuleLayoutType),

package/plugins/runtime-modules/builder/module-usage-client.js

@@ -13,5 +13,9 @@ export async function loadPhiBuilderModuleBlockUsage(area, moduleId) {
     if (!response.ok) {
         throw new Error(body?.error ?? "Failed to read Module usage.");
     }
-    return Array.isArray(body?.usage) ? body.usage : [];
+    if (!Array.isArray(body?.usage)) {
+        // An answer without the list is not "nothing in use"; the question has to be asked again.
+        throw new Error("Module usage answer carries no usage list.");
+    }
+    return body.usage;
 }

package/plugins/runtime-modules/builder/navigation-catalog.server.js

@@ -1,6 +1,6 @@
 import "server-only";
 import { PHI_BUILDER_AREA_KEYS, resolvePhiBuilderAreaAsCmsArea, } from "../../../constants/cms-areas";
-import { resolvePhiCmsActiveNavigationSurfaces, resolvePhiCmsDescriptorCatalog, } from "../../../plugins/runtime-modules/descriptor-compiler";
+import { compilePhiCmsActiveRouteTable, resolvePhiCmsActiveNavigationSurfaces, resolvePhiCmsDescriptorCatalog, } from "../../../plugins/runtime-modules/descriptor-compiler";
 import { fetchSiteNavigationScopes } from "../../../gateway/site-nav";
 import { createPhiBuilderCustomNavigationSurface } from "../../../helpers/cms-navigation-catalog";
 import { readPhiServerApiCredentials } from "../../../helpers/phis-server-credentials";
@@ -26,10 +26,13 @@ export async function buildPhiBuilderNavigationSurfacesByArea(runtime, runtimeMo
             areaDefinition.baseModuleId,
             ...(optionalModuleIdsByArea[builderArea] ?? []),
         ]);
+        // The declared table: this catalog names surfaces and entries, and reads no Area config, so a
+        // Public address the Site reassigned shows here as the Module declared it.
         const declaredSurfaces = resolvePhiCmsActiveNavigationSurfaces({
             catalog,
             area,
             activeModuleIds,
+            routeTable: compilePhiCmsActiveRouteTable({ catalog, area, activeModuleIds }),
         });
         const declaredKeys = new Set(declaredSurfaces.map((surface) => surface.navKey));
         const customSurfaces = persistedScopes

package/plugins/runtime-modules/builder/navigation-folder-address.d.ts

@@ -18,7 +18,6 @@ export type PhiBuilderNavigationFolderChoice = {
     label: string;
     target: PhiCmsNavigationFolderTarget;
 };
-export declare function encodePhiBuilderNavigationFolderTarget(target: PhiCmsNavigationFolderTarget): string;
 /**
  * The targets a container can lead to: what each of its direct children stands for. Two children that
  * stand for the same target are offered once.

package/plugins/runtime-modules/builder/navigation-folder-address.js

@@ -29,7 +29,7 @@ export function resolvePhiBuilderNavigationFolderAddress(container, resolveLinkP
     const [only] = folders;
     return folders.size === 1 && only !== "/" ? only : null;
 }
-export function encodePhiBuilderNavigationFolderTarget(target) {
+function encodePhiBuilderNavigationFolderTarget(target) {
     return target.kind === "page" ? `page:${target.reference}` : `folder:${target.address}`;
 }
 /** What a direct child stands for as a folder target: a Page by reference, a sub-container by address. */

package/plugins/runtime-modules/builder/navigation-path-context.js

@@ -1,9 +1,7 @@
+import { flattenPhiPresetPages } from "./page-tree-walk";
 import { resolvePhiCmsAreaAsBuilderArea } from "../../../constants/cms-areas";
 import { normalizePhiBuilderCmsCatalogPath, resolvePhiBuilderActivePageCatalog, } from "../../../helpers/cms-page-catalog";
 import { resolvePhiBuilderCmsStoragePath, resolvePhiBuilderNavigationTargetPath } from "../../../helpers/cms-paths";
-function flattenPages(pages) {
-    return pages.flatMap((page) => [page, ...flattenPages(page.children ?? [])]);
-}
 /**
  * The page catalog as the Navigation table needs it: each Page's shown path and address, the choices a
  * Site page link offers, and how a link resolves to the path a folder address is built from.
@@ -21,7 +19,7 @@ export function createPhiBuilderNavigationPathContext(state) {
         if (cached)
             return cached;
         const areaPages = resolvePhiBuilderActivePageCatalog(area, state.modulePresetPagesByArea, state.customPages, state.persistedPageCatalogByArea);
-        const pagePaths = new Map(flattenPages(areaPages).filter((page) => page.reference).map((page) => [page.reference, {
+        const pagePaths = new Map(flattenPhiPresetPages(areaPages).filter((page) => page.reference).map((page) => [page.reference, {
                 path: resolvePhiBuilderNavigationTargetPath(area, page.key, areaPages),
                 address: normalizePhiBuilderCmsCatalogPath(resolvePhiBuilderCmsStoragePath(area, page.key, areaPages)),
                 deleted: page.tombstoned === true,
@@ -31,7 +29,7 @@ export function createPhiBuilderNavigationPathContext(state) {
         return entry;
     };
     const { pages, pagePaths } = readArea(state.area);
-    const pageOptions = flattenPages(pages)
+    const pageOptions = flattenPhiPresetPages(pages)
         .filter((page) => page.reference && page.tombstoned !== true)
         .map((page) => ({ value: page.reference, label: pagePaths.get(page.reference).path }));
     const resolveLinkPath = (item) => {

package/plugins/runtime-modules/builder/navigation-store.d.ts

@@ -1,9 +1,9 @@
 import type { PhiBuilderNavigationTree } from "../../../helpers/cms-navigation-catalog";
+import { type PhiBuilderHistoryRecording } from "./history";
 export declare function usePhiBuilderNavigationDraft(navKey: string): PhiBuilderNavigationTree;
 export declare function getPhiBuilderNavigationDraftSnapshot(navKey: string): PhiBuilderNavigationTree;
 export declare function setPhiBuilderNavigationDraft(navKey: string, draft: PhiBuilderNavigationTree, options?: {
-    historyContext?: string | null;
-    historyLabel?: string;
+    history?: PhiBuilderHistoryRecording | null;
 }): void;
 export declare function updatePhiBuilderNavigationDraft(navKey: string, update: (current: PhiBuilderNavigationTree | null) => PhiBuilderNavigationTree): never;
 export declare function clearPhiBuilderNavigationDraft(navKey: string): void;

package/plugins/runtime-modules/builder/navigation-store.js

@@ -23,9 +23,9 @@ export function setPhiBuilderNavigationDraft(navKey, draft, options) {
         ...current,
         [navKey]: resolvedDraft,
     }));
-    if (options?.historyContext) {
-        phiBuilderHistory.record(options.historyContext, {
-            label: options.historyLabel ?? "Update navigation",
+    if (options?.history) {
+        phiBuilderHistory.record(options.history.context, {
+            action: options.history.action,
             before: {
                 kind: "navigation",
                 navKey,