@phis/ui 0.4.1 → 0.4.3

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

@@ -2,6 +2,7 @@
 import { isPhiRecord } from "../../../../helpers/is-record";
 import { createPhiControlOptionsProviderClient, } from "../../../../components/controls/phi-options-provider";
 import { PHI_ASSET_RUNTIME_DATA_PROVIDER_KEYS } from "../ids";
+import { readPhiMediaFolders } from "../../../../components/media/phi-image-preview-data";
 import { PHI_ASSET_CONTROLLER_STORE_KEY } from "../../../../components/media/asset-controller-signals";
 import { phiImagePreviewStore } from "../../../../components/media/phi-image-preview-store";
 import { buildPhiMediaFolderCascaderOptions, buildPhiMediaFolderNamesById, buildPhiMediaFolderValueById, } from "../../../../components/media/media-folder-options";
@@ -59,8 +60,7 @@ async function loadFolders() {
     const payload = await response.json().catch(() => null);
     if (!response.ok)
         throw new Error("Failed to load the Site's media folders.");
-    const folders = isPhiRecord(payload) && Array.isArray(payload.folders) ? payload.folders : [];
-    return folders.filter(isPhiRecord);
+    return readPhiMediaFolders(isPhiRecord(payload) ? payload.folders : undefined, "The media folders route");
 }
 export const PhiMediaFolderChoicesOptionsProviderClient = createPhiControlOptionsProviderClient({
     key: PHI_ASSET_RUNTIME_DATA_PROVIDER_KEYS.mediaFolderChoices,

package/plugins/runtime-modules/builder/area-settings-answer.js

@@ -1,3 +1,4 @@
+import { PHI_WORKSPACE_CATALOG_SCOPE } from "../../../components/workspace/catalog-store";
 import { PHI_AREA_META_PUBLIC_DEFAULTS, } from "../../../helpers/cms-area-config";
 import { isPhiRecord } from "../../../helpers/is-record";
 import { builderWorkspaceStore, readPhiBuilderEffectiveAreaMeta, readPhiBuilderEffectiveAreaRootRoute, restorePhiDeveloperBuilderAreaMeta, setPhiDeveloperBuilderAreaRootRoute, } from "./developer-workspace-store";
@@ -54,7 +55,7 @@ function isSamePhiBuilderAreaAnswer(left, right) {
  * unsaved. `rootRoute` is `undefined` when the dialog did not ask it.
  */
 export function applyPhiBuilderAreaSettingsAnswer({ area, historyContext, rootRoute, meta, }) {
-    const current = builderWorkspaceStore.getSnapshot("public");
+    const current = builderWorkspaceStore.getSnapshot(PHI_WORKSPACE_CATALOG_SCOPE);
     const before = [];
     const after = [];
     if (rootRoute !== undefined && !isSamePhiBuilderAreaAnswer(readPhiBuilderEffectiveAreaRootRoute(current, area), rootRoute)) {

package/plugins/runtime-modules/builder/authoring-canvas.js

@@ -13,12 +13,12 @@ import { getPhiBuilderNavigationDraftSnapshot } from "./navigation-store";
  * learn which Area they are being edited in.
  */
 export function usePhiBuilderAuthoringCanvas() {
-    const area = usePhiDeveloperBuilderStateValue("public", (state) => state.area);
-    const catalogHydrated = usePhiDeveloperBuilderStateValue("public", (state) => state.catalogHydrated);
-    const navigationSurfaces = usePhiDeveloperBuilderStateValue("public", (state) => state.navigationSurfacesByArea[state.area] ?? null);
-    const modulePresetPagesByArea = usePhiDeveloperBuilderStateValue("public", (state) => state.modulePresetPagesByArea);
-    const customPages = usePhiDeveloperBuilderStateValue("public", (state) => state.customPages);
-    const persistedPageCatalogByArea = usePhiDeveloperBuilderStateValue("public", (state) => state.persistedPageCatalogByArea);
+    const area = usePhiDeveloperBuilderStateValue((state) => state.area);
+    const catalogHydrated = usePhiDeveloperBuilderStateValue((state) => state.catalogHydrated);
+    const navigationSurfaces = usePhiDeveloperBuilderStateValue((state) => state.navigationSurfacesByArea[state.area] ?? null);
+    const modulePresetPagesByArea = usePhiDeveloperBuilderStateValue((state) => state.modulePresetPagesByArea);
+    const customPages = usePhiDeveloperBuilderStateValue((state) => state.customPages);
+    const persistedPageCatalogByArea = usePhiDeveloperBuilderStateValue((state) => state.persistedPageCatalogByArea);
     return useMemo(() => ({
         area,
         catalogHydrated,

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

@@ -2,7 +2,6 @@ import "server-only";
 import { PHI_TR_CTX_WEB_UI_LABEL } from "../../../gateway/tr";
 import { definePhiRuntimeModuleLabelSet, getPhiLabelSet } from "../../../gateway/label-set";
 import { getPhiBuilderModulesPageLabels } from "../../../components/widgets/label-sets/builder-modules";
-import { PHI_FIRST_PARTY_RUNTIME_MODULE_CATALOG } from "../catalog";
 import { createPhiDashboardCardId, } from "../../../types/dashboard-cards";
 import { readPhiBuilderAreasWithOpenDraft } from "./area-shell-presets.server";
 import { PHI_BUILDER_RUNTIME_MODULE_ID, PHI_BUILDER_RUNTIME_MODULE_IDENTITY } from "./ids";
@@ -12,9 +11,8 @@ import { PHI_BUILDER_RUNTIME_MODULE_ID, PHI_BUILDER_RUNTIME_MODULE_IDENTITY } fr
  * The first `list` card. A structure author opening the Builder wants to know where they left off,
  * which is a set of names rather than a count -- "Public and App" says where to go, "2" does not.
  *
- * The Area shells are read from the first-party catalog. A provider is handed no catalog, and every
- * Area's shell is contributed by its first-party base Module, so the Builder's catalog and this one name
- * the same shell sources; a Site's own Modules add Pages, not Areas.
+ * The Area shells are read from the catalog of the Area the Dashboard stands in -- the Builder's, which
+ * carries every Area's base Module, because the Builder edits them all.
  */
 const PHI_BUILDER_DASHBOARD_CARD_LABEL_SET = definePhiRuntimeModuleLabelSet(PHI_BUILDER_RUNTIME_MODULE_IDENTITY, {
     key: "cards:builder-drafts",
@@ -59,7 +57,7 @@ export const PHI_BUILDER_RUNTIME_MODULE_DASHBOARD_CARDS = {
         const [labels, areaLabels, drafted] = await Promise.all([
             getPhiLabelSet(options, PHI_BUILDER_DASHBOARD_CARD_LABEL_SET),
             getPhiBuilderModulesPageLabels(options).then((page) => page.areas),
-            readPhiBuilderAreasWithOpenDraft(PHI_FIRST_PARTY_RUNTIME_MODULE_CATALOG, {
+            readPhiBuilderAreasWithOpenDraft(context.runtimeModuleCatalog, {
                 siteKey: context.siteKey,
                 locale: context.locale,
                 apiBaseUrl: context.apiBaseUrl,

package/plugins/runtime-modules/builder/clients/builder-region-overrides.js

@@ -8,9 +8,9 @@ import { PhiAuthoringRegionOverridesProvider } from "../../../../components/runt
 import { getDefaultRegionDraft, resolveRegionDraftKey } from "../developer-region-drafts";
 import { usePhiDeveloperBuilderStateValue, usePhiDeveloperRegionDrafts } from "../developer-workspace-store";
 export function PhiBuilderCanvasRegionOverrides({ children }) {
-    const builderMode = usePhiDeveloperBuilderStateValue("public", (state) => state.builderMode);
-    const area = usePhiDeveloperBuilderStateValue("public", (state) => state.area);
-    const pageKey = usePhiDeveloperBuilderStateValue("public", (state) => state.pageKey);
+    const builderMode = usePhiDeveloperBuilderStateValue((state) => state.builderMode);
+    const area = usePhiDeveloperBuilderStateValue((state) => state.area);
+    const pageKey = usePhiDeveloperBuilderStateValue((state) => state.pageKey);
     const regionDrafts = usePhiDeveloperRegionDrafts();
     const value = useMemo(() => {
         const siderRight = resolveRegionDraftKey(regionDrafts, area, "sider_right", pageKey) ?? getDefaultRegionDraft("sider_right");

package/plugins/runtime-modules/builder/clients/canvas-widget.js

@@ -1,75 +1,36 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo } from "react";
+import { useMemo } from "react";
 import { PhiDeveloperBuilderStructureCanvas, } from "./structure-canvas";
-import { getPhiDeveloperRegionDraftsSnapshot, mergePhiDeveloperRegionDrafts, usePhiDeveloperBuilderStateValue, usePhiDeveloperRegionDraftsValue, } from "../developer-workspace-store";
+import { usePhiDeveloperBuilderStateValue } from "../developer-workspace-store";
+import { usePhiBuilderRegionDraftHydration } from "./use-region-draft-hydration";
 import { getPhiBuilderRegionDraftKey, PHI_BUILDER_PAGE_REGION_KEYS, PHI_BUILDER_SHELL_REGION_KEYS, } from "../region-keys";
 import { usePhiBuilderModuleMetas } from "../plugin-meta-store";
 import { buildPhiStructureRegionPickItems } from "../structure-region-pick-items";
 export function PhiDeveloperBuilderCanvasWidgetClient({ workspace, serverPreviewRegions, structureShellDraftsByArea, pageDraftsByScope, previewRegionDrafts = null, shellTheme, disabled: _disabled = false, targetArea, regionLabels, pickerLabels, }) {
     void _disabled;
-    const area = usePhiDeveloperBuilderStateValue("public", (state) => state.area);
-    const pageKey = usePhiDeveloperBuilderStateValue("public", (state) => state.pageKey);
-    const builderMode = usePhiDeveloperBuilderStateValue("public", (state) => state.builderMode);
+    const area = usePhiDeveloperBuilderStateValue((state) => state.area);
+    const pageKey = usePhiDeveloperBuilderStateValue((state) => state.pageKey);
+    const builderMode = usePhiDeveloperBuilderStateValue((state) => state.builderMode);
     const builderModuleMetas = usePhiBuilderModuleMetas(targetArea);
     const pickItems = useMemo(() => buildPhiStructureRegionPickItems(builderModuleMetas.plugins), [builderModuleMetas.plugins]);
     const isStructureWorkspace = workspace === "structure";
     const isPagesWorkspace = workspace === "pages";
-    /*
-     * Which of this workspace's drafts are not in the store, as one string. The Canvas used to subscribe
-     * to the whole draft map for this question, so every write to any draft re-rendered it and, below it,
-     * every Region scaffold on the canvas with its whole tree. The Regions read their own draft now
-     * (`structure-canvas.tsx`); this widget renders when the set of missing drafts changes and not before.
-     */
     const hydrationDraftKeys = useMemo(() => (isStructureWorkspace
         ? PHI_BUILDER_SHELL_REGION_KEYS.map((regionKey) => getPhiBuilderRegionDraftKey(area, regionKey, pageKey))
         : isPagesWorkspace
             ? PHI_BUILDER_PAGE_REGION_KEYS.map((regionKey) => getPhiBuilderRegionDraftKey(area, regionKey, pageKey))
             : []), [area, isPagesWorkspace, isStructureWorkspace, pageKey]);
-    const missingDraftKeys = usePhiDeveloperRegionDraftsValue(useCallback((drafts) => hydrationDraftKeys.filter((draftKey) => drafts[draftKey] == null).join("\u0000"), [hydrationDraftKeys]));
-    useEffect(() => {
-        if (!isStructureWorkspace && !isPagesWorkspace) {
-            return;
-        }
-        if (builderMode === "preview" && previewRegionDrafts && Object.keys(previewRegionDrafts).length > 0) {
-            mergePhiDeveloperRegionDrafts(previewRegionDrafts);
-        }
-        const regionDrafts = getPhiDeveloperRegionDraftsSnapshot();
-        const shellDraftKeys = PHI_BUILDER_SHELL_REGION_KEYS
-            .map((regionKey) => getPhiBuilderRegionDraftKey(area, regionKey, pageKey));
-        const pageDraftKeys = PHI_BUILDER_PAGE_REGION_KEYS
-            .map((regionKey) => getPhiBuilderRegionDraftKey(area, regionKey, pageKey));
-        const needsShellHydration = isStructureWorkspace && shellDraftKeys.some((draftKey) => regionDrafts[draftKey] == null);
-        const needsPageHydration = isPagesWorkspace &&
-            pageDraftKeys.some((draftKey) => regionDrafts[draftKey] == null);
-        if (needsShellHydration) {
-            const nextShellDrafts = structureShellDraftsByArea?.[area] ?? {};
-            const missingShellDrafts = Object.fromEntries(Object.entries(nextShellDrafts).filter(([draftKey]) => regionDrafts[draftKey] == null));
-            if (Object.keys(missingShellDrafts).length > 0) {
-                mergePhiDeveloperRegionDrafts(missingShellDrafts);
-            }
-        }
-        if (!needsPageHydration) {
-            return;
-        }
-        const nextPageDrafts = pageDraftsByScope?.[area]?.[pageKey] ?? {};
-        const missingPageDrafts = Object.fromEntries(Object.entries(nextPageDrafts).filter(([draftKey]) => regionDrafts[draftKey] == null));
-        if (Object.keys(missingPageDrafts).length > 0) {
-            mergePhiDeveloperRegionDrafts(missingPageDrafts);
-            return;
-        }
-        // `missingDraftKeys` is the reason to run again; the snapshot inside is what is read.
-    }, [
-        isPagesWorkspace,
-        isStructureWorkspace,
-        missingDraftKeys,
-        pageDraftsByScope,
-        previewRegionDrafts,
-        area,
+    usePhiBuilderRegionDraftHydration({
+        draftKeys: hydrationDraftKeys,
+        serverDrafts: isStructureWorkspace
+            ? structureShellDraftsByArea?.[area]
+            : isPagesWorkspace
+                ? pageDraftsByScope?.[area]?.[pageKey] ?? undefined
+                : undefined,
         builderMode,
-        pageKey,
-        structureShellDraftsByArea,
-    ]);
+        previewRegionDrafts: isStructureWorkspace || isPagesWorkspace ? previewRegionDrafts : null,
+    });
     if (isStructureWorkspace) {
         return (_jsx(PhiDeveloperBuilderStructureCanvas, { workspace: "structure", builderMode: builderMode, area: area, pageKey: pageKey, shellTheme: shellTheme, pageDraftsByScope: pageDraftsByScope, serverPreviewRegions: serverPreviewRegions, pickItems: pickItems, regionLabels: regionLabels, pickerLabels: pickerLabels }));
     }

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

@@ -1,4 +1,5 @@
 import { type ReactNode } from "react";
+import type { PhiBackgroundControlProps } from "../../../../components/controls/phi-background-control";
 import type { PhiCmsConfigField, PhiRuntimeModuleDataProviderDescriptor } from "../../../../types/cms-plugins";
 import type { PhiCalendarAdapterDescriptor } from "../../../../types/calendar";
 import type { PhiVideoProviderDescriptor } from "../../../../types/video";
@@ -69,7 +70,7 @@ export declare function renderPhiInspectorPaddingConfigControl({ field, config,
     onChange?: (nextPadding: PhiCmsPaddingWidgetConfig | null, patch: Record<string, unknown>) => void;
 }): import("react").JSX.Element;
 export declare function renderPhiInspectorConfigField(args: Parameters<typeof renderPhiInspectorConfigFieldBody>[0]): import("react").JSX.Element | null;
-declare function renderPhiInspectorConfigFieldBody({ field, value, defaultValue, config, defaultConfig, disabled, onChange, widgetReferenceOptions, paddingLabels, backgroundLabels, borderLabels, colorPickerLabels, iconPickerLabels, fieldLabels, dataProviderDescriptors, calendarAdapterDescriptors, videoProviderDescriptors, blockId, }: {
+declare function renderPhiInspectorConfigFieldBody({ field, value, defaultValue, config, defaultConfig, disabled, onChange, widgetReferenceOptions, paddingLabels, backgroundLabels, borderLabels, renderMediaPicker, colorPickerLabels, iconPickerLabels, fieldLabels, dataProviderDescriptors, calendarAdapterDescriptors, videoProviderDescriptors, blockId, }: {
     field: PhiCmsConfigField;
     value: unknown;
     defaultValue: unknown;
@@ -82,6 +83,8 @@ declare function renderPhiInspectorConfigFieldBody({ field, value, defaultValue,
     paddingLabels?: PhiPaddingWidgetLabels;
     backgroundLabels?: PhiBackgroundWidgetLabels;
     borderLabels?: PhiBorderWidgetLabels;
+    /** The Media library's picker, so a Surface field can take a background image like a block's own. */
+    renderMediaPicker?: PhiBackgroundControlProps["renderMediaPicker"];
     colorPickerLabels?: PhiColorPickerLabels;
     iconPickerLabels?: PhiIconPickerControlLabels;
     /** The Inspector's own words in its field controls, from the `widget:inspector` label set. */

package/plugins/runtime-modules/builder/clients/inspector-config-field.js

@@ -7,8 +7,6 @@ import { PhiDividerControl } from "../../../../components/controls/phi-divider-c
 import { usePhiConfig } from "../../../../components/root/phi-config-provider";
 import { readPhiLengthValue } from "../../../../types";
 import { normalizePhiPaddingWidgetConfig, } from "../../../../types/cms-config";
-import { PhiBackgroundControl } from "../../../../components/controls/phi-background-control";
-import { PhiBorderControl } from "../../../../components/controls/phi-border-control";
 import { PhiColorFieldControl } from "../../../../components/controls/phi-color-field-control";
 import { PhiInspectorLinkTargetFieldControl, } from "./inspector-link-target-field";
 import { PhiInspectorImageFieldControl } from "./inspector-image-field";
@@ -30,10 +28,8 @@ import { PhiDialogControl } from "../../../../components/controls/phi-dialog-con
 import { PhiIcon } from "../../../../components/shell/phi-icon";
 import { PhiPaddingControl } from "../../../../components/controls/phi-padding-control";
 import { PHI_INSPECTOR_FIELD_LABEL_WIDTH, PhiInspectorFieldRow } from "../../../../components/widgets/inspector-field-row";
-import { PhiShadowControl } from "../../../../components/controls/phi-shadow-control";
 import { PhiSurfaceControl } from "../../../../components/controls/phi-surface-control";
 import { readPhiSurface } from "../../../../types/surface";
-import { readPhiShadow } from "../../../../types/layout-style";
 import { readInspectorChoiceMultiValue, readInspectorChoiceSingleValue, } from "./inspector-choice-values";
 import { PhiFlexControl } from "../../../../components/controls/phi-flex-control";
 import { PhiTypographyControl } from "../../../../components/controls/phi-typography-control";
@@ -248,12 +244,6 @@ function resolveInspectorColorMode(mode) {
     }
     return "single";
 }
-function normalizeInspectorBorderValue(value) {
-    if (!isPhiRecord(value)) {
-        return null;
-    }
-    return value;
-}
 function readPhiInspectorCollectionItems(value) {
     return Array.isArray(value)
         ? value.filter(isPhiRecord)
@@ -377,7 +367,7 @@ function PhiInspectorChoiceFieldControl({ field, config, value, defaultValue, di
             });
         } }));
 }
-function PhiInspectorCollectionFieldControl({ field, config, labels, value, defaultValue, disabled, widgetReferenceOptions, paddingLabels, backgroundLabels, borderLabels, colorPickerLabels, iconPickerLabels, dataProviderDescriptors, calendarAdapterDescriptors, videoProviderDescriptors, onChange, }) {
+function PhiInspectorCollectionFieldControl({ field, config, labels, value, defaultValue, disabled, widgetReferenceOptions, paddingLabels, backgroundLabels, borderLabels, renderMediaPicker, colorPickerLabels, iconPickerLabels, dataProviderDescriptors, calendarAdapterDescriptors, videoProviderDescriptors, onChange, }) {
     const { token } = usePhiConfig();
     const popup = usePhiWidgetScaffoldPopup();
     const [overlayOpen, setOverlayOpen] = useState(false);
@@ -440,6 +430,7 @@ function PhiInspectorCollectionFieldControl({ field, config, labels, value, defa
                     paddingLabels,
                     backgroundLabels,
                     borderLabels,
+                    renderMediaPicker,
                     colorPickerLabels,
                     iconPickerLabels,
                     fieldLabels: labels,
@@ -521,7 +512,7 @@ export function renderPhiInspectorConfigField(args) {
         return body;
     return (_jsxs(Fragment, { children: [_jsx(PhiDividerControl, { titlePlacement: "start", style: { marginBlock: 0 }, children: args.field.heading }), body] }, args.field.key));
 }
-function renderPhiInspectorConfigFieldBody({ field, value, defaultValue, config, defaultConfig, disabled, onChange, widgetReferenceOptions, paddingLabels, backgroundLabels, borderLabels, colorPickerLabels, iconPickerLabels, fieldLabels = PHI_INSPECTOR_WIDGET_DEFAULT_LABELS.fields, dataProviderDescriptors = [], calendarAdapterDescriptors = [], videoProviderDescriptors = [], blockId, }) {
+function renderPhiInspectorConfigFieldBody({ field, value, defaultValue, config, defaultConfig, disabled, onChange, widgetReferenceOptions, paddingLabels, backgroundLabels, borderLabels, renderMediaPicker, colorPickerLabels, iconPickerLabels, fieldLabels = PHI_INSPECTOR_WIDGET_DEFAULT_LABELS.fields, dataProviderDescriptors = [], calendarAdapterDescriptors = [], videoProviderDescriptors = [], blockId, }) {
     if (field.type === "readonly") {
         const displayValue = value ?? defaultValue;
         return renderPhiInspectorConfigFieldControl(field, _jsx(PhiTextControl, { value: displayValue == null ? "" : String(displayValue), readOnly: true, allowClear: false, style: { width: "100%" } }));
@@ -720,35 +711,15 @@ function renderPhiInspectorConfigFieldBody({ field, value, defaultValue, config,
         return (_jsx(PhiInspectorChoiceFieldControl, { field: field, config: config, value: value, defaultValue: defaultValue, disabled: disabled || !onChange, widgetReferenceOptions: widgetReferenceOptions ?? [], labels: fieldLabels, onChange: onChange }, field.key));
     }
     if (field.type === "collection") {
-        return (_jsx(PhiInspectorCollectionFieldControl, { field: field, config: config, labels: fieldLabels, value: value, defaultValue: defaultValue, disabled: disabled || !onChange, widgetReferenceOptions: widgetReferenceOptions ?? [], paddingLabels: paddingLabels, backgroundLabels: backgroundLabels, borderLabels: borderLabels, colorPickerLabels: colorPickerLabels, iconPickerLabels: iconPickerLabels, dataProviderDescriptors: dataProviderDescriptors, calendarAdapterDescriptors: calendarAdapterDescriptors, videoProviderDescriptors: videoProviderDescriptors, onChange: onChange }, field.key));
+        return (_jsx(PhiInspectorCollectionFieldControl, { field: field, config: config, labels: fieldLabels, value: value, defaultValue: defaultValue, disabled: disabled || !onChange, widgetReferenceOptions: widgetReferenceOptions ?? [], paddingLabels: paddingLabels, backgroundLabels: backgroundLabels, borderLabels: borderLabels, renderMediaPicker: renderMediaPicker, colorPickerLabels: colorPickerLabels, iconPickerLabels: iconPickerLabels, dataProviderDescriptors: dataProviderDescriptors, calendarAdapterDescriptors: calendarAdapterDescriptors, videoProviderDescriptors: videoProviderDescriptors, onChange: onChange }, field.key));
     }
     if (field.type === "color") {
         return renderPhiInspectorConfigFieldControl(field, _jsx(PhiColorFieldControl, { value: value, defaultValue: defaultValue, ...(field.defaultToken ? { defaultToken: field.defaultToken } : {}), disabled: disabled || !onChange, mode: resolveInspectorColorMode(field.mode), placement: "left", labels: colorPickerLabels, onChange: (nextValue) => onChange?.({ [field.key]: nextValue || undefined }) }));
     }
-    if (field.type === "background") {
-        const usesSelfStorage = field.storage === "self";
-        const currentValue = (usesSelfStorage ? config : value);
-        const currentDefaultValue = (usesSelfStorage ? defaultConfig : defaultValue);
-        return renderPhiInspectorConfigFieldControl(field, _jsx(PhiBackgroundControl, { mode: "control", disabled: disabled || !onChange, value: currentValue ?? null, config: currentDefaultValue ?? null, labels: backgroundLabels, colorPickerLabels: colorPickerLabels, colorPickerPlacement: "left", onChange: (nextValue) => usesSelfStorage
-                ? onChange?.(nextValue)
-                : onChange?.({ [field.key]: nextValue }) }));
-    }
-    if (field.type === "border") {
-        const usesSelfStorage = field.storage === "self";
-        const currentValue = normalizeInspectorBorderValue(usesSelfStorage ? config : value);
-        const currentDefaultValue = normalizeInspectorBorderValue(usesSelfStorage ? defaultConfig : defaultValue);
-        return renderPhiInspectorConfigFieldControl(field, _jsx(PhiBorderControl, { mode: "control", disabled: disabled || !onChange, value: currentValue, config: currentDefaultValue, labels: borderLabels, colorPickerLabels: colorPickerLabels, colorPickerPlacement: "left", onChange: (nextValue) => usesSelfStorage
-                ? onChange?.(nextValue)
-                : onChange?.({ [field.key]: nextValue }) }));
-    }
     if (field.type === "surface") {
         return renderPhiInspectorConfigFieldBlock(field, _jsx(PhiSurfaceControl, { disabled: disabled || !onChange, value: value === null ? null : readPhiSurface(value) ?? readPhiSurface(defaultValue), tone: field.tone !== false, 
             // A box inside a Widget has no layer of its own to blur.
-            backgroundFilters: ["glass", "haze"], backgroundLabels: backgroundLabels, borderLabels: borderLabels, colorPickerLabels: colorPickerLabels, onChange: (nextValue) => onChange?.({ [field.key]: nextValue }) }));
-    }
-    if (field.type === "shadow") {
-        const currentValue = readPhiShadow(value) ?? readPhiShadow(defaultValue) ?? null;
-        return renderPhiInspectorConfigFieldControl(field, _jsx(PhiShadowControl, { mode: "control", disabled: disabled || !onChange, value: currentValue, onChange: (nextValue) => onChange?.({ [field.key]: nextValue }) }));
+            backgroundFilters: ["glass", "haze"], backgroundLabels: backgroundLabels, borderLabels: borderLabels, colorPickerLabels: colorPickerLabels, renderMediaPicker: renderMediaPicker, onChange: (nextValue) => onChange?.({ [field.key]: nextValue }) }));
     }
     if (field.type === "icon") {
         const iconValue = typeof value === "string"

package/plugins/runtime-modules/builder/clients/inspector-link-target-field.js

@@ -13,7 +13,7 @@ import { PHI_INSPECTOR_WIDGET_DEFAULT_LABELS, } from "../../../../components/wid
  * of the Area the Builder is working on.
  */
 export function PhiInspectorLinkTargetFieldControl({ value, disabled, labels = PHI_INSPECTOR_WIDGET_DEFAULT_LABELS.fields.linkTarget, onChange, }) {
-    const state = usePhiDeveloperBuilderStateValue("public", (current) => current);
+    const state = usePhiDeveloperBuilderStateValue((current) => current);
     const pages = usePhiBuilderOfferedPageCatalog(state, state.area);
     const options = useMemo(() => buildPhiBuilderPageReferenceTree(state.area, pages, pages, { landing: labels.landingPage }), [labels.landingPage, pages, state.area]);
     return (_jsx(PhiLinkTargetControl, { value: value, options: options, labels: labels, disabled: disabled, onChange: onChange, 

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

@@ -76,14 +76,14 @@ function resolveDraftFromLayoutNode(node, meta) {
 }
 function usePhiBuilderInspectorSectionState(signalRoutes) {
     const dispatchSignal = usePhiSignalDispatcher();
-    const area = usePhiDeveloperBuilderStateValue("public", (state) => state.area);
-    const pageKey = usePhiDeveloperBuilderStateValue("public", (state) => state.pageKey);
-    const builderMode = usePhiDeveloperBuilderStateValue("public", (state) => state.builderMode);
-    const nodeId = usePhiDeveloperBuilderStateValue("public", (state) => state.nodeId);
-    const nodeKey = usePhiDeveloperBuilderStateValue("public", (state) => state.nodeKey);
-    const nodeKind = usePhiDeveloperBuilderStateValue("public", (state) => state.nodeKind);
-    const selectedLayoutAnchor = usePhiDeveloperBuilderStateValue("public", (state) => state.selectedLayoutAnchor);
-    const selectedRootRegionKey = usePhiDeveloperBuilderStateValue("public", (state) => state.selectedRootRegionKey);
+    const area = usePhiDeveloperBuilderStateValue((state) => state.area);
+    const pageKey = usePhiDeveloperBuilderStateValue((state) => state.pageKey);
+    const builderMode = usePhiDeveloperBuilderStateValue((state) => state.builderMode);
+    const nodeId = usePhiDeveloperBuilderStateValue((state) => state.nodeId);
+    const nodeKey = usePhiDeveloperBuilderStateValue((state) => state.nodeKey);
+    const nodeKind = usePhiDeveloperBuilderStateValue((state) => state.nodeKind);
+    const selectedLayoutAnchor = usePhiDeveloperBuilderStateValue((state) => state.selectedLayoutAnchor);
+    const selectedRootRegionKey = usePhiDeveloperBuilderStateValue((state) => state.selectedRootRegionKey);
     const activeModuleMetas = usePhiBuilderModuleMetas(area);
     const activeBuilderPlugins = activeModuleMetas.plugins;
     const activeDataProviderDescriptors = activeModuleMetas.dataProviders;

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

@@ -8,12 +8,12 @@ import { findPhiBuilderLayoutNodeById, findPhiBuilderWidgetNodeByIdInLayouts, }
 import { resolveRegionDraftKey } from "../developer-region-drafts";
 import { usePhiDeveloperBuilderStateValue, usePhiDeveloperRegionDrafts, } from "../developer-workspace-store";
 export function PhiBuilderInspectorTitleWidgetClient({ inspectorLabels, regionLabels, }) {
-    const area = usePhiDeveloperBuilderStateValue("public", (state) => state.area);
-    const pageKey = usePhiDeveloperBuilderStateValue("public", (state) => state.pageKey);
-    const nodeId = usePhiDeveloperBuilderStateValue("public", (state) => state.nodeId);
-    const nodeKey = usePhiDeveloperBuilderStateValue("public", (state) => state.nodeKey);
-    const nodeKind = usePhiDeveloperBuilderStateValue("public", (state) => state.nodeKind);
-    const selectedRootRegionKey = usePhiDeveloperBuilderStateValue("public", (state) => state.selectedRootRegionKey);
+    const area = usePhiDeveloperBuilderStateValue((state) => state.area);
+    const pageKey = usePhiDeveloperBuilderStateValue((state) => state.pageKey);
+    const nodeId = usePhiDeveloperBuilderStateValue((state) => state.nodeId);
+    const nodeKey = usePhiDeveloperBuilderStateValue((state) => state.nodeKey);
+    const nodeKind = usePhiDeveloperBuilderStateValue((state) => state.nodeKind);
+    const selectedRootRegionKey = usePhiDeveloperBuilderStateValue((state) => state.selectedRootRegionKey);
     const regionDrafts = usePhiDeveloperRegionDrafts();
     const plugins = usePhiBuilderModuleMetas(area).plugins;
     const title = useMemo(() => {

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

@@ -1,4 +1,4 @@
-import { type PhiBackgroundControlProps } from "../../../../components/controls/phi-background-control";
+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";

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

@@ -2,30 +2,22 @@
 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 { 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 { 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 { normalizePhiPaddingWidgetConfig } from "../../../../types/cms-config";
 import {} from "../developer-workspace-types";
 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)";
 function isPhiCmsChromeConfigField(field) {
     return (field.type === "padding"
-        || field.type === "background"
-        || field.type === "border"
-        || field.type === "shadow"
         || field.type === "grid-placement"
         || field.type === "column-count");
 }
@@ -70,7 +62,7 @@ export function PhiDeveloperBuilderLayoutInspectorWidgetClient({ section, builde
     const chromeFields = declaredFields
         .filter(isPhiCmsChromeConfigField)
         .filter((field) => isPhiInspectorConfigFieldVisible(field, currentLayoutConfigRecord))
-        .filter((field) => field.type !== "grid-placement" && field.type !== "column-count");
+        .filter((field) => field.type === "padding");
     const gridPlacementField = declaredFields
         .filter(isPhiCmsChromeConfigField)
         .filter((field) => isPhiInspectorConfigFieldVisible(field, currentLayoutConfigRecord))
@@ -89,8 +81,7 @@ export function PhiDeveloperBuilderLayoutInspectorWidgetClient({ section, builde
     const settingsHasContent = !settingsAnswerIsKnown || !isTargetKind || section !== "settings"
         || settingsFields.length > 0 || gridPlacementField != null
         || (slotTextsFields.length > 0 && textSlots.length > 0)
-        || selectedStructurePlugin?.translatesOwnText === true
-        || chromeFields.some((field) => field.type !== "padding");
+        || selectedStructurePlugin?.translatesOwnText === true;
     const ownSlot = usePhiBaseLayoutOwnSlotController();
     useEffect(() => {
         if (!ownSlot)
@@ -118,16 +109,13 @@ export function PhiDeveloperBuilderLayoutInspectorWidgetClient({ section, builde
             routeScope: signalRouteScope,
         });
     const signalCapabilities = resolvePhiSignalEndpointCapabilities(signalEndpoints);
-    /*
-     * The chrome fields a layout declares itself: its own padding, which has the Drawer's Paddings panel,
-     * and anything else -- Split Card's two cards -- which lives in Settings with the layout's other fields.
-     */
+    // The padding fields a layout declares itself, each with its own panel in the Drawer.
     const declaredChromeSections = chromeFields.map((field) => ({
         field,
         section: {
             key: field.section ?? field.key,
             title: field.label,
-            children: (_jsx("div", { style: { display: "grid", gap: PHI_GAP_SM, width: "100%" }, children: field.type === "padding" ? (renderPhiInspectorPaddingConfigControl({
+            children: (_jsx("div", { style: { display: "grid", gap: PHI_GAP_SM, width: "100%" }, children: renderPhiInspectorPaddingConfigControl({
                     field,
                     disabled: isPreviewMode || (!onPaddingChange && !onConfigPatch),
                     config: isCanonicalPaddingField(field)
@@ -144,14 +132,11 @@ export function PhiDeveloperBuilderLayoutInspectorWidgetClient({ section, builde
                         }
                         onConfigPatch?.(Object.fromEntries(Object.entries(patch).map(([key, value]) => [key, value ?? null])));
                     },
-                })) : 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) => 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 || gridPlacementField || declaredCardSections.length > 0 ||
+                    ...(settingsFields.length > 0 || gridPlacementField ||
                         selectedStructurePlugin?.translatesOwnText || (slotTextsFields.length > 0 && textSlots.length > 0)
                         ? [
                             {
@@ -164,6 +149,9 @@ export function PhiDeveloperBuilderLayoutInspectorWidgetClient({ section, builde
                                             config: currentDraftRecord ?? {},
                                             defaultConfig: layoutDefaultConfigRecord,
                                             disabled: isPreviewMode,
+                                            backgroundLabels,
+                                            borderLabels,
+                                            renderMediaPicker,
                                             colorPickerLabels,
                                             iconPickerLabels,
                                             fieldLabels,
@@ -185,7 +173,7 @@ export function PhiDeveloperBuilderLayoutInspectorWidgetClient({ section, builde
                                                 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)))] })),
+                                            : 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] })),
                             },
                         ]
                         : []),
@@ -207,9 +195,7 @@ export function PhiDeveloperBuilderLayoutInspectorWidgetClient({ section, builde
                             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")
-                            .map((entry) => entry.section),
+                        ...declaredChromeSections.map((entry) => entry.section),
                     ],
                     {
                         key: "signals",

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

@@ -8,7 +8,7 @@ import { usePhiConfig } from "../../../../components/root/phi-config-provider";
 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 builderMode = usePhiDeveloperBuilderStateValue((state) => state.builderMode);
     const isDisabled = disabled;
     const controlSignals = usePhiControlSignalController({
         key: "builderMode",

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

@@ -35,22 +35,22 @@ function PhiDeveloperBuilderPagesHeaderTitleField({ area, path, disabled, initia
 }
 export function PhiDeveloperBuilderPagesHeaderSection({ mode, pageTitle, disabled = false, labels = PHI_PAGE_TITLE_WIDGET_DEFAULT_LABELS, }) {
     const searchParams = useSearchParams();
-    const currentArea = usePhiDeveloperBuilderStateValue("public", (state) => state.area);
-    const currentPageKey = usePhiDeveloperBuilderStateValue("public", (state) => state.pageKey);
-    const builderMode = usePhiDeveloperBuilderStateValue("public", (state) => state.builderMode);
-    const customPages = usePhiDeveloperBuilderStateValue("public", (state) => state.customPages);
-    const modulePresetPagesByArea = usePhiDeveloperBuilderStateValue("public", (state) => state.modulePresetPagesByArea);
-    const catalogHydrated = usePhiDeveloperBuilderStateValue("public", (state) => state.catalogHydrated);
-    const persistedPageCatalogByArea = usePhiDeveloperBuilderStateValue("public", (state) => state.persistedPageCatalogByArea);
+    const currentArea = usePhiDeveloperBuilderStateValue((state) => state.area);
+    const currentPageKey = usePhiDeveloperBuilderStateValue((state) => state.pageKey);
+    const builderMode = usePhiDeveloperBuilderStateValue((state) => state.builderMode);
+    const customPages = usePhiDeveloperBuilderStateValue((state) => state.customPages);
+    const modulePresetPagesByArea = usePhiDeveloperBuilderStateValue((state) => state.modulePresetPagesByArea);
+    const catalogHydrated = usePhiDeveloperBuilderStateValue((state) => state.catalogHydrated);
+    const persistedPageCatalogByArea = usePhiDeveloperBuilderStateValue((state) => state.persistedPageCatalogByArea);
     /*
      * What the Select is allowed to name, which is narrower than what is installed: the Pages the Area
      * answers with. The three fields below are what that narrowing is read from -- which Modules are
      * switched on, and what the Area said about its root.
      */
-    const navigationSurfacesByArea = usePhiDeveloperBuilderStateValue("public", (state) => state.navigationSurfacesByArea);
-    const runtimeModuleIdsByArea = usePhiDeveloperBuilderStateValue("public", (state) => state.runtimeModuleIdsByArea);
-    const areaRootRoutes = usePhiDeveloperBuilderStateValue("public", (state) => state.areaRootRoutes);
-    const pageCatalogHydratedByArea = usePhiDeveloperBuilderStateValue("public", (state) => state.pageCatalogHydratedByArea);
+    const navigationSurfacesByArea = usePhiDeveloperBuilderStateValue((state) => state.navigationSurfacesByArea);
+    const runtimeModuleIdsByArea = usePhiDeveloperBuilderStateValue((state) => state.runtimeModuleIdsByArea);
+    const areaRootRoutes = usePhiDeveloperBuilderStateValue((state) => state.areaRootRoutes);
+    const pageCatalogHydratedByArea = usePhiDeveloperBuilderStateValue((state) => state.pageCatalogHydratedByArea);
     const resolvedCustomPages = customPages ?? {};
     const titleModeEnabled = mode === "full" || mode === "title";
     const searchArea = normalizePhiBuilderAreaSearchParam(searchParams.get(PHI_BUILDER_AREA_SEARCH_PARAM));

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

@@ -19,7 +19,7 @@ export function PhiDeveloperBuilderPagesWorkspaceWidgetClient({ pageDraftsByScop
      * Empty drafts rather than no drafts, because the merge below is a merge: leaving the keys out would
      * let the Preset's regions stand from before the Builder answered.
      */
-    const constructedRoot = usePhiDeveloperBuilderStateValue("public", (state) => isPhiBuilderConstructedRootPage(state, pageMetaArea, pageMetaPageKey));
+    const constructedRoot = usePhiDeveloperBuilderStateValue((state) => isPhiBuilderConstructedRootPage(state, pageMetaArea, pageMetaPageKey));
     const emptyPresetDrafts = useMemo(() => buildPhiDeveloperBuilderRegionDraftsFromTree({ regions: [], layoutNodes: [], contentWidgets: [] }, pageMetaArea, pageMetaPageKey, PHI_BUILDER_PAGE_REGION_KEYS), [pageMetaArea, pageMetaPageKey]);
     useEffect(() => {
         mergePhiDeveloperPagePresetDrafts(constructedRoot ? emptyPresetDrafts : pagePresetDrafts);

package/plugins/runtime-modules/builder/clients/region-visibility-fields.js

@@ -67,7 +67,7 @@ function collectNodesWithChildren(nodes, into = new Set()) {
  * field is, offered from the Pages the Area actually answers.
  */
 export function PhiRegionVisibilityFields({ regionKey, regionConfig, disabled, labels, onChange, }) {
-    const state = usePhiDeveloperBuilderStateValue("public", (current) => current);
+    const state = usePhiDeveloperBuilderStateValue((current) => current);
     const pages = usePhiBuilderOfferedPageCatalog(state, state.area);
     const tree = useMemo(() => buildPhiBuilderPageScopeTree(state.area, pages, pages, { landing: labels.landing }), [labels.landing, pages, state.area]);
     const subtreeValues = useMemo(() => collectNodesWithChildren(tree), [tree]);

package/plugins/runtime-modules/builder/clients/runtime-module-authoring-boundary.js

@@ -8,7 +8,7 @@ import { PhiRuntimeModuleProvider } from "../../../../components/runtime/runtime
 import { setPhiBuilderModuleMetas } from "../plugin-meta-store";
 import { usePhiDeveloperBuilderStateValue } from "../developer-workspace-store";
 export function PhiBuilderRuntimeModuleAuthoringBoundary({ targetArea, catalog, pickerDataProviderKeys, children, }) {
-    const selectedModuleIds = usePhiDeveloperBuilderStateValue("public", (state) => state.runtimeModuleIdsByArea[targetArea]);
+    const selectedModuleIds = usePhiDeveloperBuilderStateValue((state) => state.runtimeModuleIdsByArea[targetArea]);
     const activeEntries = useMemo(() => {
         if (selectedModuleIds == null) {
             return catalog;