@phis/ui 0.2.1 → 0.4.0

package/plugins/runtime-modules/builder/clients/layout-inspector.d.ts

@@ -1,4 +1,6 @@
 import { type PhiBackgroundControlProps } from "../../../../components/controls/phi-background-control";
+import type { PhiInspectorSurfaceLabels } from "./inspector-surface-labels";
+import type { PhiInspectorWidgetLabels } from "../../../../components/widgets/label-types/inspector";
 import type { PhiBackgroundWidgetLabels } from "../../../../components/widgets/label-types/background";
 import type { PhiBorderWidgetLabels } from "../../../../components/widgets/label-types/border";
 import type { PhiPaddingWidgetLabels } from "../../../../components/widgets/label-types/padding";
@@ -6,12 +8,11 @@ import type { PhiAnchorWidgetPlacement } from "../../../../components/controls/p
 import type { PhiSignalsWidgetLabels } from "../../../../components/widgets/label-types/signals";
 import type { PhiColorPickerLabels } from "../../../../components/widgets/label-types/color-picker";
 import type { PhiIconPickerControlLabels } from "../../../../components/widgets/label-types/icon-picker";
-import type { PhiCmsBorderWidgetConfig, PhiCmsPaddingWidgetConfig } from "../../../../types/cms-config";
-import type { PhiCmsBackgroundWidgetConfig } from "../../../../components/widgets/config/background";
+import type { PhiCmsPaddingWidgetConfig } from "../../../../types/cms-config";
 import type { PhiRuntimeModuleDataProviderDescriptor } from "../../../../types/cms-plugins";
 import type { PhiCalendarAdapterDescriptor } from "../../../../types/calendar";
 import type { PhiVideoProviderDescriptor } from "../../../../types/video";
-import { type PhiShadow } from "../../../../types/layout-style";
+import type { PhiSurface } from "../../../../types/surface";
 import { type PhiDeveloperBuilderMode, type PhiDeveloperBuilderNodeKind, type PhiDeveloperBuilderStructureNodeDraft } from "../developer-workspace-types";
 import type { PhiSignalRoute } from "../../../../types/signals";
 import type { PhiBuilderContainerMeta } from "../../../../types/builder";
@@ -23,25 +24,33 @@ type PhiDeveloperBuilderLayoutInspectorWidgetClientProps = {
     selectedStructureDefaultConfig?: Record<string, unknown> | null;
     selectedStructurePlugin?: PhiBuilderContainerMeta | null;
     currentDraft?: PhiDeveloperBuilderStructureNodeDraft | null;
-    currentShadow?: PhiShadow | null;
     signalRouteScope?: PhiSignalRoute["scope"];
     selectedLayoutAnchor?: PhiAnchorWidgetPlacement | null;
     onLayoutAnchorChange?: (next: PhiAnchorWidgetPlacement) => void;
     onPaddingChange?: (next: PhiCmsPaddingWidgetConfig | null) => void;
-    onBackgroundChange?: (next: PhiCmsBackgroundWidgetConfig) => void;
-    onBorderChange?: (next: PhiCmsBorderWidgetConfig) => void;
-    onShadowChange?: (next: PhiShadow) => void;
-    onConfigChange?: (key: string, value: unknown) => void;
+    /** The whole next Surface, or `null` once nothing is left in it. */
+    onSurfaceChange?: (next: PhiSurface | null) => void;
+    /**
+     * Every key one change of a field set answers, together: a padding control answers four sides and a
+     * grid placement columns and placements at once, and each is one step to take back, not several.
+     */
+    onConfigPatch?: (patch: Record<string, unknown>) => void;
+    /** Sets the node's `NoTranslate` flag; offered for a Layout that translates its own text. */
+    onTranslateChange?: (translate: boolean) => void;
     paddingLabels?: PhiPaddingWidgetLabels;
+    surfaceLabels?: PhiInspectorSurfaceLabels;
+    gridLabels?: PhiInspectorWidgetLabels["grid"];
     backgroundLabels?: PhiBackgroundWidgetLabels;
     borderLabels?: PhiBorderWidgetLabels;
     signalsLabels?: PhiSignalsWidgetLabels;
     colorPickerLabels?: PhiColorPickerLabels;
     iconPickerLabels?: PhiIconPickerControlLabels;
+    /** The Inspector's own words in its field controls, from the `widget:inspector` label set. */
+    fieldLabels?: PhiInspectorWidgetLabels["fields"];
     dataProviderDescriptors?: readonly PhiRuntimeModuleDataProviderDescriptor[];
     calendarAdapterDescriptors?: readonly PhiCalendarAdapterDescriptor[];
     videoProviderDescriptors?: readonly PhiVideoProviderDescriptor[];
     renderMediaPicker?: PhiBackgroundControlProps["renderMediaPicker"];
 };
-export declare function PhiDeveloperBuilderLayoutInspectorWidgetClient({ section, builderMode, selectedStructureNodeKind, selectedStructureDefaultConfig, selectedStructurePlugin, currentDraft, currentShadow, signalRouteScope, selectedLayoutAnchor, onLayoutAnchorChange, onPaddingChange, onBackgroundChange, onBorderChange, onShadowChange, onConfigChange, paddingLabels, backgroundLabels, borderLabels, signalsLabels, colorPickerLabels, iconPickerLabels, dataProviderDescriptors, calendarAdapterDescriptors, videoProviderDescriptors, renderMediaPicker, }: PhiDeveloperBuilderLayoutInspectorWidgetClientProps): import("react").JSX.Element;
+export declare function PhiDeveloperBuilderLayoutInspectorWidgetClient({ section, builderMode, selectedStructureNodeKind, selectedStructureDefaultConfig, selectedStructurePlugin, currentDraft, signalRouteScope, selectedLayoutAnchor, onLayoutAnchorChange, onPaddingChange, onSurfaceChange, onConfigPatch, onTranslateChange, paddingLabels, surfaceLabels, gridLabels, backgroundLabels, borderLabels, signalsLabels, colorPickerLabels, iconPickerLabels, fieldLabels, dataProviderDescriptors, calendarAdapterDescriptors, videoProviderDescriptors, renderMediaPicker, }: PhiDeveloperBuilderLayoutInspectorWidgetClientProps): import("react").JSX.Element;
 export {};

package/plugins/runtime-modules/builder/clients/layout-inspector.js

@@ -1,38 +1,33 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
 import { usePhiBaseLayoutOwnSlotController } from "../../../../components/layouts/phi-layout-slot-state";
 import { PhiBackgroundControl } from "../../../../components/controls/phi-background-control";
 import { PhiBorderControl } from "../../../../components/controls/phi-border-control";
-import { PhiSegmentedControl } from "../../../../components/controls/phi-segmented-control";
-import { PHI_CMS_BORDER_SOURCES, resolvePhiCmsBorderSource, } from "../../../../types/cms-border-source";
+import { PhiSurfaceControl } from "../../../../components/controls/phi-surface-control";
 import { PhiShadowControl } from "../../../../components/controls/phi-shadow-control";
 import { PhiViewportVisibilityControl } from "../../../../components/controls/phi-viewport-visibility-control";
 import { PhiPlacementMatrixControl } from "../../../../components/controls/phi-placement-matrix-control";
-import { PhiSelectControl } from "../../../../components/controls/phi-select-control";
-import { PhiNumberControl } from "../../../../components/controls/phi-number-control";
 import { PhiInspectorSectionContent } from "./inspector-section-content";
+import { PhiGridPlacementSettings } from "./grid-placement-settings";
 import { resolvePhiLayoutSignalEndpoints, resolvePhiSignalEndpointCapabilities, } from "../../../../components/widgets/signals/signal-endpoints";
 import { readPhiShadow } from "../../../../types/layout-style";
-import { expandPhiBorderRadiusConfig, mergePhiBorderWidgetConfig, normalizePhiPaddingWidgetConfig, } from "../../../../types/cms-config";
+import { normalizePhiPaddingWidgetConfig } from "../../../../types/cms-config";
 import {} from "../developer-workspace-types";
-import { isPhiInspectorConfigFieldVisible, renderPhiInspectorPaddingConfigControl, renderPhiInspectorConfigField, renderPhiInspectorSettingsRow, } from "./inspector-config-field";
+import { isPhiInspectorConfigFieldVisible, renderPhiInspectorPaddingConfigControl, renderPhiInspectorConfigField, renderPhiInspectorSlotTextsField, renderPhiInspectorSwitchRow, } from "./inspector-config-field";
+import { hasPhiFlag } from "../../../../helpers/flags";
+import { PhiCmsFlags } from "../../../../constants/phi-cms";
 import { PhiInspectorSignalSection, } from "./inspector-signal-section";
 import { PhiFlexControl } from "../../../../components/controls/phi-flex-control";
 import { PhiTypographyControl } from "../../../../components/controls/phi-typography-control";
 const PHI_GAP_SM = "var(--ant-padding-sm)";
-/** Read only where the Border labels have not arrived; the words themselves live in their label set. */
-const PHI_BORDER_SOURCE_FALLBACK_LABELS = {
-    none: "None",
-    theme: "Theme",
-    custom: "Custom",
-};
 function isPhiCmsChromeConfigField(field) {
     return (field.type === "padding"
         || field.type === "background"
         || field.type === "border"
         || field.type === "shadow"
-        || field.type === "slot-placement");
+        || field.type === "grid-placement"
+        || field.type === "column-count");
 }
 function isCanonicalPaddingField(field) {
     return ((field.paddingKey ?? "padding") === "padding"
@@ -42,37 +37,44 @@ function isCanonicalPaddingField(field) {
         && (field.paddingBottomKey ?? "paddingBottom") === "paddingBottom"
         && (field.paddingLeftKey ?? "paddingLeft") === "paddingLeft");
 }
-export function PhiDeveloperBuilderLayoutInspectorWidgetClient({ section, builderMode = "editor", selectedStructureNodeKind = null, selectedStructureDefaultConfig = null, selectedStructurePlugin = null, currentDraft = null, currentShadow = null, signalRouteScope = "layout", selectedLayoutAnchor = "center", onLayoutAnchorChange, onPaddingChange, onBackgroundChange, onBorderChange, onShadowChange, onConfigChange, paddingLabels, backgroundLabels, borderLabels, signalsLabels, colorPickerLabels, iconPickerLabels, dataProviderDescriptors = [], calendarAdapterDescriptors = [], videoProviderDescriptors = [], renderMediaPicker, }) {
+export function PhiDeveloperBuilderLayoutInspectorWidgetClient({ section, builderMode = "editor", selectedStructureNodeKind = null, selectedStructureDefaultConfig = null, selectedStructurePlugin = null, currentDraft = null, signalRouteScope = "layout", selectedLayoutAnchor = "center", onLayoutAnchorChange, onPaddingChange, onSurfaceChange, onConfigPatch, onTranslateChange, paddingLabels, surfaceLabels, gridLabels, backgroundLabels, borderLabels, signalsLabels, colorPickerLabels, iconPickerLabels, fieldLabels, dataProviderDescriptors = [], calendarAdapterDescriptors = [], videoProviderDescriptors = [], renderMediaPicker, }) {
     const isPreviewMode = builderMode === "preview";
     const isTargetKind = selectedStructureNodeKind === "layout";
-    const resolvedLayoutAnchor = currentDraft?.rootNodeAnchor ?? selectedLayoutAnchor;
-    const resolvedLayoutPadding = currentDraft?.rootNodePadding ?? null;
-    const resolvedLayoutBackground = currentDraft?.rootNodeBackground ?? null;
-    const resolvedLayoutShadow = currentShadow;
-    const currentDraftRecord = currentDraft;
+    const resolvedLayoutAnchor = currentDraft?.anchor ?? selectedLayoutAnchor;
+    const resolvedLayoutPadding = currentDraft?.padding ?? null;
+    const currentDraftRecord = currentDraft?.config ?? null;
     const layoutDefaultConfigRecord = selectedStructureDefaultConfig;
     const currentLayoutConfigRecord = {
         ...(layoutDefaultConfigRecord ?? {}),
         ...(currentDraftRecord ?? {}),
     };
-    const resolvedLayoutBorder = mergePhiBorderWidgetConfig(expandPhiBorderRadiusConfig(currentDraftRecord?.borderRadius ?? layoutDefaultConfigRecord?.borderRadius), currentDraft?.rootNodeBorder);
     const resolvedLayoutPaddingDefaults = normalizePhiPaddingWidgetConfig(layoutDefaultConfigRecord);
+    const declaredFields = selectedStructurePlugin?.fields ?? [];
+    const settingsFields = declaredFields.filter((field) => !isPhiCmsChromeConfigField(field) && field.type !== "slot-texts"
+        && isPhiInspectorConfigFieldVisible(field, currentLayoutConfigRecord));
+    const slotTextsFields = declaredFields.filter((field) => field.type === "slot-texts" && isPhiInspectorConfigFieldVisible(field, currentLayoutConfigRecord));
     /*
-     * Where this Layout's outline comes from. Asked of the same resolver the drawing asks, so a Layout
-     * written before the field reads the same on both sides -- a configured line means `custom`, and the
-     * absence of one means `none` rather than "unanswered".
+     * The slots a `slot-texts` field offers a line for: the occupied ones, named by their title where the
+     * Layout has one -- the panel the author is looking at, not an index.
      */
-    const layoutBorderSource = resolvePhiCmsBorderSource(currentLayoutConfigRecord.borderSource, currentDraft?.rootNodeBorder ?? currentLayoutConfigRecord.border);
-    const declaredFields = selectedStructurePlugin?.fields ?? [];
-    const settingsFields = declaredFields.filter((field) => !isPhiCmsChromeConfigField(field) && isPhiInspectorConfigFieldVisible(field, currentLayoutConfigRecord));
+    const occupiedSlotIndices = currentDraft
+        ? new Set([...currentDraft.node.childLayouts, ...currentDraft.node.childWidgets].map((child) => child.slotIndex))
+        : new Set();
+    const draftSlotTitles = Array.isArray(currentDraftRecord?.slotTitles) ? currentDraftRecord.slotTitles : [];
+    const textSlots = (selectedStructurePlugin?.slots ?? [])
+        .filter((slot) => occupiedSlotIndices.has(slot.slotIndex))
+        .map((slot) => {
+        const title = draftSlotTitles[slot.slotIndex];
+        return { slotIndex: slot.slotIndex, label: typeof title === "string" && title.trim() ? title.trim() : slot.label };
+    });
     const chromeFields = declaredFields
         .filter(isPhiCmsChromeConfigField)
         .filter((field) => isPhiInspectorConfigFieldVisible(field, currentLayoutConfigRecord))
-        .filter((field) => field.type !== "slot-placement");
-    const slotPlacementField = declaredFields
+        .filter((field) => field.type !== "grid-placement" && field.type !== "column-count");
+    const gridPlacementField = declaredFields
         .filter(isPhiCmsChromeConfigField)
         .filter((field) => isPhiInspectorConfigFieldVisible(field, currentLayoutConfigRecord))
-        .find((field) => field.type === "slot-placement") ?? null;
+        .find((field) => field.type === "grid-placement" || field.type === "column-count") ?? null;
     /*
      * The Settings panel hides itself when the layout declares nothing for it. It is the Drawer's first
      * panel and open by default, so it is mounted and can act; the Drawer itself lists one Collapse item
@@ -85,7 +87,9 @@ export function PhiDeveloperBuilderLayoutInspectorWidgetClient({ section, builde
      */
     const settingsAnswerIsKnown = selectedStructurePlugin != null;
     const settingsHasContent = !settingsAnswerIsKnown || !isTargetKind || section !== "settings"
-        || settingsFields.length > 0 || slotPlacementField != null
+        || settingsFields.length > 0 || gridPlacementField != null
+        || (slotTextsFields.length > 0 && textSlots.length > 0)
+        || selectedStructurePlugin?.translatesOwnText === true
         || chromeFields.some((field) => field.type !== "padding");
     const ownSlot = usePhiBaseLayoutOwnSlotController();
     useEffect(() => {
@@ -99,86 +103,16 @@ export function PhiDeveloperBuilderLayoutInspectorWidgetClient({ section, builde
         if (ownSlot.state === "hidden")
             ownSlot.show();
     }, [ownSlot, settingsHasContent]);
-    const resolveGridSlotPlacements = (value) => {
-        if (!Array.isArray(value)) {
-            return [];
-        }
-        return value.flatMap((entry) => {
-            if (!entry || typeof entry !== "object" || Array.isArray(entry)) {
-                return [];
-            }
-            const slotIndex = typeof entry.slotIndex === "number" ? entry.slotIndex : null;
-            if (slotIndex == null) {
-                return [];
-            }
-            const readResponsive = (key) => {
-                const input = entry[key];
-                if (!input || typeof input !== "object" || Array.isArray(input))
-                    return undefined;
-                const record = input;
-                return {
-                    compact: typeof record.compact === "number" ? record.compact : undefined,
-                    medium: typeof record.medium === "number" ? record.medium : undefined,
-                    wide: typeof record.wide === "number" ? record.wide : undefined,
-                };
-            };
-            return [
-                {
-                    slotIndex,
-                    span: readResponsive("span"),
-                    offset: readResponsive("offset"),
-                },
-            ];
-        });
-    };
-    const resolvedCurrentSlotPlacements = resolveGridSlotPlacements(currentDraftRecord?.slotPlacements);
-    const resolvedSlotPlacements = resolvedCurrentSlotPlacements.length > 0
-        ? resolvedCurrentSlotPlacements
-        : resolveGridSlotPlacements(layoutDefaultConfigRecord?.slotPlacements);
-    const gridSlotDefinitions = slotPlacementField
-        ? [...(selectedStructurePlugin?.slots ?? [])].sort((left, right) => left.slotIndex - right.slotIndex)
+    const gridOccupiedSlotIndices = gridPlacementField && currentDraft
+        ? [...new Set([...currentDraft.node.childLayouts, ...currentDraft.node.childWidgets].map((child) => child.slotIndex))]
+            .sort((left, right) => left - right)
         : [];
-    const [selectedGridSlotOverride, setSelectedGridSlotOverride] = useState(null);
-    const selectedGridSlotIndex = selectedGridSlotOverride != null && gridSlotDefinitions.some((slot) => slot.slotIndex === selectedGridSlotOverride)
-        ? selectedGridSlotOverride
-        : gridSlotDefinitions[0]?.slotIndex ?? null;
-    const updateGridSlotPlacement = (slotIndex, field, profile, value) => {
-        if (!slotPlacementField || !onConfigChange) {
-            return;
-        }
-        const nextSlotPlacements = [...resolvedSlotPlacements];
-        const existingIndex = nextSlotPlacements.findIndex((entry) => entry.slotIndex === slotIndex);
-        const existingEntry = existingIndex >= 0
-            ? nextSlotPlacements[existingIndex]
-            : {
-                slotIndex,
-            };
-        const currentResponsive = existingEntry[field] ?? {};
-        const nextResponsive = { ...currentResponsive, [profile]: value == null ? undefined : value };
-        const nextEntry = {
-            ...existingEntry,
-            [field]: Object.values(nextResponsive).some((entry) => entry != null) ? nextResponsive : undefined,
-        };
-        if (nextEntry.span == null && nextEntry.offset == null) {
-            if (existingIndex >= 0) {
-                nextSlotPlacements.splice(existingIndex, 1);
-            }
-        }
-        else if (existingIndex >= 0) {
-            nextSlotPlacements[existingIndex] = nextEntry;
-        }
-        else {
-            nextSlotPlacements.push(nextEntry);
-        }
-        onConfigChange(slotPlacementField.key, nextSlotPlacements.length > 0 ? nextSlotPlacements.sort((left, right) => left.slotIndex - right.slotIndex) : null);
-    };
-    const selectedGridSlotPlacement = selectedGridSlotIndex == null ? null : resolvedSlotPlacements.find((entry) => entry.slotIndex === selectedGridSlotIndex) ?? null;
-    const signalEndpoints = currentDraft?.rootNodeId == null
+    const signalEndpoints = currentDraft == null
         ? []
         : resolvePhiLayoutSignalEndpoints({
-            blockId: currentDraft.rootNodeId,
-            label: currentDraft.rootNodeTitle ?? currentDraft.rootNodeId,
-            typeKey: currentDraft.rootNodeTypeKey,
+            blockId: currentDraft.node.id,
+            label: currentDraft.node.label ?? currentDraft.node.id,
+            typeKey: currentDraft.node.widgetType,
             kind: "layout",
             runtimeSignals: selectedStructurePlugin?.runtimeSignals ?? null,
             routeScope: signalRouteScope,
@@ -195,7 +129,7 @@ export function PhiDeveloperBuilderLayoutInspectorWidgetClient({ section, builde
             title: field.label,
             children: (_jsx("div", { style: { display: "grid", gap: PHI_GAP_SM, width: "100%" }, children: field.type === "padding" ? (renderPhiInspectorPaddingConfigControl({
                     field,
-                    disabled: isPreviewMode || (!onPaddingChange && !onConfigChange),
+                    disabled: isPreviewMode || (!onPaddingChange && !onConfigPatch),
                     config: isCanonicalPaddingField(field)
                         ? { ...(currentDraftRecord ?? {}), ...(resolvedLayoutPadding ?? {}) }
                         : currentDraftRecord ?? {},
@@ -208,21 +142,17 @@ export function PhiDeveloperBuilderLayoutInspectorWidgetClient({ section, builde
                             onPaddingChange?.(padding);
                             return;
                         }
-                        if (!onConfigChange) {
-                            return;
-                        }
-                        for (const [key, value] of Object.entries(patch)) {
-                            onConfigChange(key, value ?? null);
-                        }
+                        onConfigPatch?.(Object.fromEntries(Object.entries(patch).map(([key, value]) => [key, value ?? null])));
                     },
-                })) : field.type === "background" ? (_jsx(PhiBackgroundControl, { mode: "control", disabled: isPreviewMode || !onConfigChange, value: currentDraftRecord?.[field.key] ?? null, config: layoutDefaultConfigRecord?.[field.key] ?? null, onChange: (background) => onConfigChange?.(field.key, background), labels: backgroundLabels, colorPickerLabels: colorPickerLabels, colorPickerPlacement: "left", renderMediaPicker: renderMediaPicker })) : field.type === "border" ? (_jsx(PhiBorderControl, { mode: "control", disabled: isPreviewMode || !onConfigChange, value: currentDraftRecord?.[field.key] ?? null, config: layoutDefaultConfigRecord?.[field.key] ?? null, onChange: (border) => onConfigChange?.(field.key, border), labels: borderLabels, colorPickerLabels: colorPickerLabels, colorPickerPlacement: "left" })) : (_jsx(PhiShadowControl, { mode: "control", disabled: isPreviewMode || !onConfigChange, value: readPhiShadow(currentDraftRecord?.[field.key]) ??
+                })) : field.type === "background" ? (_jsx(PhiBackgroundControl, { mode: "control", disabled: isPreviewMode || !onConfigPatch, value: currentDraftRecord?.[field.key] ?? null, config: layoutDefaultConfigRecord?.[field.key] ?? null, onChange: (background) => onConfigPatch?.({ [field.key]: background }), labels: backgroundLabels, colorPickerLabels: colorPickerLabels, colorPickerPlacement: "left", renderMediaPicker: renderMediaPicker })) : field.type === "border" ? (_jsx(PhiBorderControl, { mode: "control", disabled: isPreviewMode || !onConfigPatch, value: currentDraftRecord?.[field.key] ?? null, config: layoutDefaultConfigRecord?.[field.key] ?? null, onChange: (border) => onConfigPatch?.({ [field.key]: border }), labels: borderLabels, colorPickerLabels: colorPickerLabels, colorPickerPlacement: "left" })) : (_jsx(PhiShadowControl, { mode: "control", disabled: isPreviewMode || !onConfigPatch, value: readPhiShadow(currentDraftRecord?.[field.key]) ??
                         readPhiShadow(layoutDefaultConfigRecord?.[field.key]) ??
-                        null, onChange: (shadow) => onConfigChange?.(field.key, shadow) })) })),
+                        null, onChange: (shadow) => onConfigPatch?.({ [field.key]: shadow }) })) })),
         },
     }));
     const declaredCardSections = declaredChromeSections.filter((entry) => entry.field.type !== "padding");
     return (_jsx("div", { style: { display: "grid", gap: PHI_GAP_SM, width: "100%" }, children: !isTargetKind ? (_jsx(PhiTypographyControl, { type: "secondary", children: "Select a layout to edit its geometry." })) : (_jsx("div", { style: { display: "grid", gap: PHI_GAP_SM, width: "100%" }, children: _jsx(PhiInspectorSectionContent, { sectionKey: section ?? "settings", sections: [
-                    ...(settingsFields.length > 0 || slotPlacementField || declaredCardSections.length > 0
+                    ...(settingsFields.length > 0 || gridPlacementField || declaredCardSections.length > 0 ||
+                        selectedStructurePlugin?.translatesOwnText || (slotTextsFields.length > 0 && textSlots.length > 0)
                         ? [
                             {
                                 key: "settings",
@@ -236,29 +166,26 @@ export function PhiDeveloperBuilderLayoutInspectorWidgetClient({ section, builde
                                             disabled: isPreviewMode,
                                             colorPickerLabels,
                                             iconPickerLabels,
+                                            fieldLabels,
                                             dataProviderDescriptors,
                                             calendarAdapterDescriptors,
                                             videoProviderDescriptors,
-                                            onChange: onConfigChange
-                                                ? (next) => {
-                                                    for (const [key, value] of Object.entries(next)) {
-                                                        onConfigChange(key, value);
-                                                    }
-                                                }
-                                                : undefined,
-                                        })), slotPlacementField && selectedGridSlotIndex != null
-                                            ? (_jsxs(_Fragment, { children: [renderPhiInspectorSettingsRow("Slot", _jsx(PhiSelectControl, { options: gridSlotDefinitions.map((slot) => ({
-                                                            value: String(slot.slotIndex),
-                                                            label: String(slot.slotIndex),
-                                                        })), value: String(selectedGridSlotIndex), disabled: isPreviewMode, style: { width: "100%" }, onChange: (nextValue) => setSelectedGridSlotOverride(Number(nextValue)) }), "grid-slot-index"), ["compact", "medium", "wide"].flatMap((profile) => ([
-                                                        renderPhiInspectorSettingsRow(`${profile} span`, _jsx(PhiNumberControl, { disabled: isPreviewMode || !onConfigChange, value: selectedGridSlotPlacement?.span?.[profile] ?? null, min: 1, max: 24, precision: 0, placeholder: "6", style: { width: "100%" }, onChange: (nextValue) => updateGridSlotPlacement(selectedGridSlotIndex, "span", profile, typeof nextValue === "number" && Number.isFinite(nextValue)
-                                                                ? Math.min(24, Math.max(1, Math.round(nextValue)))
-                                                                : null) }), `grid-slot-${profile}-span`),
-                                                        renderPhiInspectorSettingsRow(`${profile} offset`, _jsx(PhiNumberControl, { disabled: isPreviewMode || !onConfigChange, value: selectedGridSlotPlacement?.offset?.[profile] ?? null, min: 0, max: 23, precision: 0, placeholder: "0", style: { width: "100%" }, onChange: (nextValue) => updateGridSlotPlacement(selectedGridSlotIndex, "offset", profile, typeof nextValue === "number" && Number.isFinite(nextValue)
-                                                                ? Math.min(23, Math.max(0, Math.round(nextValue)))
-                                                                : null) }), `grid-slot-${profile}-offset`),
-                                                    ]))] }))
-                                            : null, declaredCardSections.map((entry) => (_jsxs(PhiFlexControl, { vertical: true, gap: 8, style: { width: "100%", minWidth: 0 }, children: [_jsx(PhiTypographyControl, { children: entry.section.title }), entry.section.children] }, entry.section.key)))] })),
+                                            onChange: onConfigPatch,
+                                        })), slotTextsFields.map((field) => renderPhiInspectorSlotTextsField({
+                                            field,
+                                            value: currentDraftRecord?.[field.key],
+                                            slots: textSlots,
+                                            disabled: isPreviewMode,
+                                            onChange: onConfigPatch,
+                                        })), selectedStructurePlugin?.translatesOwnText
+                                            ? renderPhiInspectorSwitchRow({
+                                                key: "translate-text",
+                                                label: "Translate text",
+                                                checked: !hasPhiFlag(currentDraft?.node.flags ?? 0, PhiCmsFlags.NoTranslate),
+                                                disabled: isPreviewMode,
+                                                ...(onTranslateChange ? { onChange: onTranslateChange } : {}),
+                                            })
+                                            : null, gridPlacementField ? (_jsx(PhiGridPlacementSettings, { config: currentDraftRecord ?? {}, defaultConfig: layoutDefaultConfigRecord, occupiedSlotIndices: gridOccupiedSlotIndices, labels: gridLabels, withDistribution: gridPlacementField.type === "grid-placement", disabled: isPreviewMode, onConfigChange: onConfigPatch ? (key, value) => onConfigPatch({ [key]: value }) : undefined })) : null, declaredCardSections.map((entry) => (_jsxs(PhiFlexControl, { vertical: true, gap: 8, style: { width: "100%", minWidth: 0 }, children: [_jsx(PhiTypographyControl, { children: entry.section.title }), entry.section.children] }, entry.section.key)))] })),
                             },
                         ]
                         : []),
@@ -270,29 +197,15 @@ export function PhiDeveloperBuilderLayoutInspectorWidgetClient({ section, builde
                     {
                         key: "viewport",
                         title: "Viewport",
-                        children: (_jsx(PhiViewportVisibilityControl, { disabled: isPreviewMode || !onConfigChange, value: typeof currentDraftRecord?.viewportFlags === "number"
+                        children: (_jsx(PhiViewportVisibilityControl, { disabled: isPreviewMode || !onConfigPatch, value: typeof currentDraftRecord?.viewportFlags === "number"
                                 ? currentDraftRecord.viewportFlags
-                                : 0, onChange: (viewportFlags) => onConfigChange?.("viewportFlags", viewportFlags) })),
+                                : 0, onChange: (viewportFlags) => onConfigPatch?.({ viewportFlags }) })),
                     },
                     ...[
                         {
-                            key: "background",
-                            title: backgroundLabels?.title ?? "Background",
-                            children: (_jsx("div", { style: { display: "grid", gap: PHI_GAP_SM, width: "100%" }, children: _jsx(PhiBackgroundControl, { mode: "control", disabled: isPreviewMode, value: resolvedLayoutBackground, onChange: (background) => onBackgroundChange?.(background), labels: backgroundLabels, colorPickerLabels: colorPickerLabels, colorPickerPlacement: "left", renderMediaPicker: renderMediaPicker }) })),
-                        },
-                        {
-                            key: "border",
-                            title: borderLabels?.title ?? "Border",
-                            children: (_jsxs("div", { style: { display: "grid", gap: PHI_GAP_SM, width: "100%" }, children: [_jsx(PhiSegmentedControl, { value: layoutBorderSource, options: PHI_CMS_BORDER_SOURCES.map((source) => ({
-                                            value: source,
-                                            label: borderLabels?.sources?.[source]
-                                                ?? PHI_BORDER_SOURCE_FALLBACK_LABELS[source],
-                                        })), block: true, disabled: isPreviewMode, onChange: (source) => onConfigChange?.("borderSource", source) }), layoutBorderSource === "custom" ? (_jsx(PhiBorderControl, { mode: "control", disabled: isPreviewMode, value: resolvedLayoutBorder, onChange: (border) => onBorderChange?.(border), labels: borderLabels, colorPickerLabels: colorPickerLabels, colorPickerPlacement: "left" })) : null] })),
-                        },
-                        {
-                            key: "shadow",
-                            title: "Shadow",
-                            children: (_jsx("div", { style: { display: "grid", gap: PHI_GAP_SM, width: "100%" }, children: _jsx(PhiShadowControl, { mode: "control", disabled: isPreviewMode, value: resolvedLayoutShadow, onChange: (shadow) => onShadowChange?.(shadow) }) })),
+                            key: "surface",
+                            title: surfaceLabels?.section ?? "Surface",
+                            children: (_jsx(PhiSurfaceControl, { disabled: isPreviewMode, value: currentDraft?.surface ?? null, onChange: (surface) => onSurfaceChange?.(surface), labels: surfaceLabels?.parts, backgroundLabels: backgroundLabels, borderLabels: borderLabels, colorPickerLabels: colorPickerLabels, renderMediaPicker: renderMediaPicker })),
                         },
                         ...declaredChromeSections
                             .filter((entry) => entry.field.type === "padding")

package/plugins/runtime-modules/builder/clients/layout-scaffold-buttons.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PhiButtonControl } from "../../../../components/controls/phi-button-control";
 import { PhiDragHandleControl } from "../../../../components/controls/phi-drag-handle-control";
-import { DeleteOutlined, PlusOutlined, SettingOutlined } from "@ant-design/icons";
 import { useMemo, useRef } from "react";
 import { usePhiStructureDraggable, usePhiStructureDroppable, } from "../structure-dnd";
+import { PhiIcon } from "../../../../components/shell/phi-icon";
 /*
  * The scaffold's own buttons sit on a surface that selects on a press, and a press on one of them must
  * not also select the node beneath. That is stopped here, around each button, rather than inside it:
@@ -31,7 +31,7 @@ export function PhiPlusButtonWidget({ slotIndex, label, onInsert, ariaLabel, dro
         : isOver
             ? " phi-layout-affordance--drop-rejected"
             : "";
-    return (_jsx("span", { style: PHI_SCAFFOLD_BUTTON_BOUNDARY_STYLE, onClick: stopAtScaffold, children: _jsx(PhiButtonControl, { ref: setNodeRef, className: `phi-layout-affordance phi-layout-affordance--insert${dropStateClassName}`, type: "dashed", size: "small", icon: _jsx(PlusOutlined, {}), ariaLabel: ariaLabel ?? (labelText ? `Insert child after ${labelText}` : "Insert child"), onClick: () => onInsert(slotIndex), style: {
+    return (_jsx("span", { style: PHI_SCAFFOLD_BUTTON_BOUNDARY_STYLE, onClick: stopAtScaffold, children: _jsx(PhiButtonControl, { ref: setNodeRef, className: `phi-layout-affordance phi-layout-affordance--insert${dropStateClassName}`, type: "dashed", size: "small", icon: _jsx(PhiIcon, { name: "plus", size: "inherit" }), ariaLabel: ariaLabel ?? (labelText ? `Insert child after ${labelText}` : "Insert child"), onClick: () => onInsert(slotIndex), style: {
                 "--phi-layout-affordance-size": "var(--ant-control-height)",
             } }) }, `insert-${slotIndex}`));
 }
@@ -55,12 +55,12 @@ export function PhiLayoutDragButtonWidget({ dragData, ariaLabel = "Move node", }
         } }));
 }
 export function PhiLayoutDeleteButtonWidget({ onDelete, ariaLabel = "Delete layout" }) {
-    return (_jsx("span", { style: PHI_SCAFFOLD_BUTTON_BOUNDARY_STYLE, onMouseDown: holdFocusAtScaffold, onClick: stopAtScaffold, children: _jsx(PhiButtonControl, { className: "phi-layout-affordance phi-layout-affordance--delete", ariaLabel: ariaLabel, icon: _jsx(DeleteOutlined, {}), danger: true, type: "text", size: "small", onClick: onDelete, style: {
+    return (_jsx("span", { style: PHI_SCAFFOLD_BUTTON_BOUNDARY_STYLE, onMouseDown: holdFocusAtScaffold, onClick: stopAtScaffold, children: _jsx(PhiButtonControl, { className: "phi-layout-affordance phi-layout-affordance--delete", ariaLabel: ariaLabel, icon: _jsx(PhiIcon, { name: "delete", size: "inherit" }), danger: true, type: "text", size: "small", onClick: onDelete, style: {
                 "--phi-layout-affordance-size": "var(--ant-control-height-sm)",
             } }) }));
 }
 export function PhiLayoutConfigButtonWidget({ onOpenInspector, ariaLabel = "Open inspector", }) {
-    return (_jsx("span", { style: PHI_SCAFFOLD_BUTTON_BOUNDARY_STYLE, onMouseDown: holdFocusAtScaffold, onClick: stopAtScaffold, children: _jsx(PhiButtonControl, { className: "phi-layout-affordance phi-layout-affordance--config", ariaLabel: ariaLabel, icon: _jsx(SettingOutlined, {}), type: "text", size: "small", onClick: onOpenInspector, style: {
+    return (_jsx("span", { style: PHI_SCAFFOLD_BUTTON_BOUNDARY_STYLE, onMouseDown: holdFocusAtScaffold, onClick: stopAtScaffold, children: _jsx(PhiButtonControl, { className: "phi-layout-affordance phi-layout-affordance--config", ariaLabel: ariaLabel, icon: _jsx(PhiIcon, { name: "setting", size: "inherit" }), type: "text", size: "small", onClick: onOpenInspector, style: {
                 "--phi-layout-affordance-size": "var(--ant-control-height-sm)",
             } }) }));
 }

package/plugins/runtime-modules/builder/clients/layout-scaffold-overlays.js

@@ -1,6 +1,6 @@
 "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 {} from "../node-kind-theme";
 import { PhiLayoutAnchoredOverlay } from "../../../../components/layouts/clients/phi-layout-anchored-overlay";
 import { PhiLayoutConfigButtonWidget, PhiLayoutDeleteButtonWidget, PhiLayoutDragButtonWidget, PhiPlusButtonWidget, } from "./layout-scaffold-buttons";
@@ -8,7 +8,7 @@ export function PhiLayoutPlusButtonOverlay({ slotIndex, label, onInsert, anchor,
     return (_jsx(PhiLayoutAnchoredOverlay, { anchor: anchor, slotRole: slotRole, inset: inset, children: children ?? (_jsx(PhiPlusButtonWidget, { slotIndex: slotIndex, label: label, ariaLabel: ariaLabel, onInsert: onInsert, dropTarget: dropTarget })) }));
 }
 export function PhiLayoutDeleteButtonOverlay({ onDelete, onOpenInspector, ariaLabel, inspectorAriaLabel, top, right, bottom, left, placement, transform, zIndex = 10, nodeKind, leading, children, }) {
-    const { token } = antdTheme.useToken();
+    const { token } = usePhiConfig();
     const resolvedTop = top ?? (placement ? "auto" : -10);
     const resolvedRight = right ?? (placement === "bottom-left" ? "auto" : 0);
     const resolvedBottom = bottom ?? (placement ? -10 : "auto");

package/plugins/runtime-modules/builder/clients/mode-switch.js

@@ -1,20 +1,18 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PhiSegmentedControl } from "../../../../components/controls/phi-segmented-control";
-import { createDefaultBuilderChromeControls, usePhiDeveloperBuilderStateValue, } from "../developer-workspace-store";
+import { usePhiDeveloperBuilderStateValue } from "../developer-workspace-store";
 import { PHI_BUILDER_CHROME_WIDGET_DEFAULT_LABELS, } from "../../../../components/widgets/label-types/builder-chrome";
 import { usePhiControlSignalController } from "../../../../components/widgets/client/shared/phi-control-signals";
 import { usePhiConfig } from "../../../../components/root/phi-config-provider";
-import { createPhiBuilderControllerAddress } from "../controller/address";
 import { PhiFlexControl } from "../../../../components/controls/phi-flex-control";
 export function PhiBuilderModeSwitchWidgetClient({ disabled = false, labels = PHI_BUILDER_CHROME_WIDGET_DEFAULT_LABELS, }) {
     const { token } = usePhiConfig();
     const builderMode = usePhiDeveloperBuilderStateValue("public", (state) => state.builderMode);
-    const builderChromeControls = usePhiDeveloperBuilderStateValue("public", (state) => state.builderChromeControls) ?? createDefaultBuilderChromeControls();
-    const isDisabled = disabled || builderChromeControls.editorPreviewDisabled;
+    const isDisabled = disabled;
     const controlSignals = usePhiControlSignalController({
         key: "builderMode",
-        sender: createPhiBuilderControllerAddress(),
+        // The Widget's own address: the Builder Controller does not answer what was sent under its own.
         signalRoutes: {
             emits: [
                 {

package/plugins/runtime-modules/builder/clients/pages-header.js

@@ -1,33 +1,17 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { resolvePhiBuilderCatalogPathForCatalog, resolvePhiBuilderActivePageKey, } from "../../../../helpers/cms-page-catalog";
-import { resolvePhiBuilderOfferedPageCatalog, resolvePhiBuilderOfferedPageKeyFromCatalogPath, } from "../offered-page-catalog";
+import { useSearchParams } from "next/navigation";
+import { findPhiPageNodePath, resolvePhiBuilderActivePageKey, resolvePhiBuilderCatalogPathForCatalog, } from "../../../../helpers/cms-page-catalog";
+import { resolvePhiBuilderOfferedPageCatalog } from "../offered-page-catalog";
 import { PHI_BUILDER_AREA_SEARCH_PARAM, PHI_BUILDER_PAGE_SEARCH_PARAM, normalizePhiBuilderAreaSearchParam, normalizePhiBuilderPageSearchParam, } from "../../../../helpers/cms-scope-search-params";
-import { dispatchPhiDeveloperBuilderState, usePhiDeveloperBuilderStateValue, } from "../developer-workspace-store";
+import { usePhiDeveloperBuilderStateValue } from "../developer-workspace-store";
 import { PhiTextControl } from "../../../../components/controls/phi-text-control";
-import { usePhiSignalDispatcher, usePhiSignalListener, } from "../../../../components/runtime/runtime-signal-bus";
-import { emitPhiPageTitleMetaSignal, } from "../../../../components/widgets/signals/page-title-signals";
+import { usePhiSignalDispatcher } from "../../../../components/runtime/runtime-signal-bus";
 import { PHI_PAGE_TITLE_WIDGET_DEFAULT_LABELS, } from "../../../../components/widgets/label-types/page-title";
 import { emitPhiPageTitleInputSignal } from "../page-title-signal";
 import { PhiFlexControl } from "../../../../components/controls/phi-flex-control";
 import { PhiTypographyControl } from "../../../../components/controls/phi-typography-control";
-function findPageNodePath(nodes, targetKey, prefix = []) {
-    for (const node of nodes) {
-        const currentPath = [...prefix, node];
-        if (node.key === targetKey) {
-            return currentPath;
-        }
-        const childPath = node.children
-            ? findPageNodePath(node.children, targetKey, currentPath)
-            : null;
-        if (childPath) {
-            return childPath;
-        }
-    }
-    return null;
-}
 function PhiDeveloperBuilderPagesHeaderTitleField({ area, path, disabled, initialTitle, labels, }) {
     const emitSignal = usePhiSignalDispatcher();
     const [pageTitleState, setPageTitleState] = useState(() => ({
@@ -50,9 +34,6 @@ function PhiDeveloperBuilderPagesHeaderTitleField({ area, path, disabled, initia
                     }, style: { width: "100%" } })] }) }));
 }
 export function PhiDeveloperBuilderPagesHeaderSection({ mode, pageTitle, disabled = false, labels = PHI_PAGE_TITLE_WIDGET_DEFAULT_LABELS, }) {
-    const emitSignal = usePhiSignalDispatcher();
-    const pathname = usePathname();
-    const router = useRouter();
     const searchParams = useSearchParams();
     const currentArea = usePhiDeveloperBuilderStateValue("public", (state) => state.area);
     const currentPageKey = usePhiDeveloperBuilderStateValue("public", (state) => state.pageKey);
@@ -90,7 +71,7 @@ export function PhiDeveloperBuilderPagesHeaderSection({ mode, pageTitle, disable
     const pageTree = resolvePhiBuilderOfferedPageCatalog(offeredCatalogState, area);
     const pageSelectionReady = catalogHydrated && pageCatalogHydratedByArea[area] === true && pageKey.length > 0;
     const selectedPath = pageSelectionReady
-        ? findPageNodePath(pageTree, pageKey) ?? [{ key: pageKey, title: pageKey }]
+        ? findPhiPageNodePath(pageTree, pageKey) ?? [{ key: pageKey, title: pageKey }]
         : [];
     const selectedPageTitle = selectedPath.at(-1)?.title ?? pageKey;
     const catalogPath = pageSelectionReady
@@ -98,45 +79,12 @@ export function PhiDeveloperBuilderPagesHeaderSection({ mode, pageTitle, disable
         : null;
     const resolvedInitialPageTitle = (pageTitle?.trim() ?? "") || selectedPageTitle;
     const isPreviewMode = builderMode === "preview";
-    function navigateToPage(nextPageKey, nextTitle) {
-        const nextPagePath = findPageNodePath(pageTree, nextPageKey);
-        const nextPageTitle = nextTitle?.trim() || nextPagePath?.at(-1)?.title || nextPageKey;
-        dispatchPhiDeveloperBuilderState(emitSignal, "public", {
-            area,
-            pageKey: nextPageKey,
-            nodeKey: `page:${nextPageKey}`,
-            nodeKind: "page",
-            sidebarKey: "pages",
-        });
-        emitPhiPageTitleMetaSignal({
-            emitSignal,
-            area,
-            pageKey: nextPageKey,
-            title: nextPageTitle,
-        });
-        if (typeof pathname === "string") {
-            const nextSearchParams = new URLSearchParams(searchParams.toString());
-            nextSearchParams.set(PHI_BUILDER_AREA_SEARCH_PARAM, area);
-            nextSearchParams.set(PHI_BUILDER_PAGE_SEARCH_PARAM, nextPageKey);
-            router.replace(`${pathname}?${nextSearchParams.toString()}`, { scroll: false });
-        }
-    }
     const titleInput = (titleModeEnabled && catalogPath !== null ? (_jsx(PhiDeveloperBuilderPagesHeaderTitleField, { area: area, path: catalogPath, disabled: disabled, initialTitle: resolvedInitialPageTitle, labels: labels }, catalogPath)) : null);
-    usePhiSignalListener((signal) => {
-        if (disabled || !pageSelectionReady) {
-            return;
-        }
-        if (titleModeEnabled && signal.channel === "page" && signal.action === "change") {
-            const signalValue = signal.value;
-            const nextPageKey = typeof signalValue === "string"
-                ? resolvePhiBuilderOfferedPageKeyFromCatalogPath(offeredCatalogState, area, signalValue)
-                : null;
-            if (nextPageKey && nextPageKey !== pageKey) {
-                navigateToPage(nextPageKey);
-            }
-            return;
-        }
-    });
+    /*
+     * Choosing a Page is the Builder Controller's: it hears the selector's `path` and `page` signals,
+     * moves the workspace and writes the address, once. This header used to do the same from its own
+     * listener, so one choice was navigated to by both of them.
+     */
     if (!pageSelectionReady) {
         return null;
     }