@phis/ui 0.2.1 → 0.3.0

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

@@ -7,144 +7,12 @@ export declare const PHI_BUILDER_RUNTIME_MODULE_AREA_SHELLS: {
     loadTree: ({ page, runtime }: import("../../../types").PhiCmsDescriptorBuildContext) => Promise<import("../../../types").PhiResolvedCmsPageTree>;
 }[];
 export declare const PHI_BUILDER_RUNTIME_MODULE_ROUTES: (PhiCmsRoutePresetDescriptor | {
-    ownerModuleId: "@phis/ui/modules/builder";
-    presetKey: "builder-modules-page" | "builder-shells-page" | "builder-pages-page" | "builder-navigation-page";
-    presetVersion: number;
-    area: "builder";
-    title: "Modules" | "Shells" | "Pages" | "Navigation";
-    path: "/shells" | "/pages" | "/navigation" | "/modules";
-    loadTree: ({ page, runtime }: import("../../../types").PhiCmsDescriptorBuildContext & {
-        activeModuleIds: ReadonlySet<import("../contracts").PhiRuntimeModuleId>;
-        params: Readonly<Record<string, string>>;
-    }) => Promise<import("../../../types").PhiResolvedCmsPageTree | {
-        page: {
-            heroRootLayoutNodeId: import("@phis/contracts/cms").PhiCmsInstanceId | null;
-            headerBottomRootLayoutNodeId: import("@phis/contracts/cms").PhiCmsInstanceId | null;
-            siderRightRootLayoutNodeId: import("@phis/contracts/cms").PhiCmsInstanceId | null;
-            footerTopRootLayoutNodeId: import("@phis/contracts/cms").PhiCmsInstanceId | null;
-            drawerRightRootLayoutNodeId: import("@phis/contracts/cms").PhiCmsInstanceId | null;
-            contentRootLayoutNodeId: import("@phis/contracts/cms").PhiCmsInstanceId | null;
-            id: number;
-            siteId: number;
-            areaMask: number;
-            path: string;
-            pageType: number;
-            status: number;
-            flags: number;
-            visibilityMask: number;
-            accessPolicy: import("@phis/contracts/access").PhiViewerAccessPolicy;
-            titleMsgId: number | null;
-            descriptionMsgId: number | null;
-            layoutConfig: Record<string, unknown>;
-        };
-        regions: {
-            rootLayoutNodeId: import("@phis/contracts/cms").PhiCmsInstanceId;
-            id: number;
-            pageId: number;
-            areaPresetId?: number | null;
-            regionType: number;
-            status: number;
-            flags: number;
-            visibilityMask: number;
-            sortOrder: number;
-            config: Record<string, unknown>;
-        }[];
-        overlays: ({
-            config: Record<string, unknown>;
-            footerPresentation: "none";
-            footerLayoutNodeId: null;
-            id: import("@phis/contracts/cms").PhiCmsInstanceId;
-            headerLayoutNodeId: import("@phis/contracts/cms").PhiCmsInstanceId | null;
-            bodyLayoutNodeId: import("@phis/contracts/cms").PhiCmsInstanceId;
-            overlayType: import("../../../types").PhiCmsOverlayType;
-            status: number;
-            flags: number;
-            visibilityMask: number;
-            sortOrder: number;
-            label: string | null;
-        } | {
-            config: Record<string, unknown>;
-            footerPresentation: "custom" | "actions";
-            footerLayoutNodeId: import("@phis/contracts/cms").PhiCmsInstanceId;
-            id: import("@phis/contracts/cms").PhiCmsInstanceId;
-            headerLayoutNodeId: import("@phis/contracts/cms").PhiCmsInstanceId | null;
-            bodyLayoutNodeId: import("@phis/contracts/cms").PhiCmsInstanceId;
-            overlayType: import("../../../types").PhiCmsOverlayType;
-            status: number;
-            flags: number;
-            visibilityMask: number;
-            sortOrder: number;
-            label: string | null;
-        } | {
-            config: Record<string, unknown>;
-            footerPresentation: "none";
-            footerLayoutNodeId: null;
-            id: import("@phis/contracts/cms").PhiCmsInstanceId;
-            headerLayoutNodeId: import("@phis/contracts/cms").PhiCmsInstanceId | null;
-            bodyLayoutNodeId: import("@phis/contracts/cms").PhiCmsInstanceId;
-            overlayType: import("../../../types").PhiCmsOverlayType;
-            status: number;
-            flags: number;
-            visibilityMask: number;
-            sortOrder: number;
-            label: string | null;
-        } | {
-            config: Record<string, unknown>;
-            footerPresentation: "custom" | "actions";
-            footerLayoutNodeId: import("@phis/contracts/cms").PhiCmsInstanceId;
-            id: import("@phis/contracts/cms").PhiCmsInstanceId;
-            headerLayoutNodeId: import("@phis/contracts/cms").PhiCmsInstanceId | null;
-            bodyLayoutNodeId: import("@phis/contracts/cms").PhiCmsInstanceId;
-            overlayType: import("../../../types").PhiCmsOverlayType;
-            status: number;
-            flags: number;
-            visibilityMask: number;
-            sortOrder: number;
-            label: string | null;
-        })[];
-        layoutNodes: {
-            id: import("@phis/contracts/cms").PhiCmsInstanceId;
-            parentLayoutNodeId: import("@phis/contracts/cms").PhiCmsInstanceId | null;
-            config: Record<string, unknown>;
-            siteId: number;
-            widgetType: string;
-            slotIndex: number;
-            sortOrder: number;
-            status: number;
-            flags: number;
-            visibilityMask: number;
-            label: string | null;
-        }[];
-        contentWidgets: {
-            id: import("@phis/contracts/cms").PhiCmsInstanceId;
-            parentLayoutNodeId: import("@phis/contracts/cms").PhiCmsInstanceId;
-            config: Record<string, unknown>;
-            siteId: number;
-            widgetType: string;
-            slotIndex: number;
-            sortOrder: number;
-            status: number;
-            flags: number;
-            visibilityMask: number;
-            label: string | null;
-            contentId: number | null;
-            contentVersionId?: number | null;
-            resolvedContent?: import("../../../types").PhiCmsResolvedContent | null;
-        }[];
-        pageMeta?: import("../../../types").PhiCmsResolvedPageMeta | null;
-        runtimeModuleIds?: import("../contracts").PhiRuntimeModuleId[] | null;
-        controllerSettings?: readonly import("../../../types").PhiRuntimeControllerSetting[] | null;
-    }>;
-} | {
     ownerModuleId: "@phis/ui/modules/builder";
     presetKey: string;
     presetVersion: number;
     area: "builder";
     title: string;
     path: string;
-    mount: {
-        mountKey: string;
-    };
     loadTree: ({ page, runtime }: import("../../../types").PhiCmsDescriptorBuildContext & {
         activeModuleIds: ReadonlySet<import("../contracts").PhiRuntimeModuleId>;
         params: Readonly<Record<string, string>>;

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

@@ -44,7 +44,6 @@ const BUILDER_SETTINGS_ROUTES = [
         area: "builder",
         title: "General",
         path: "/settings/general",
-        mount: { mountKey: "settings" },
         loadTree: ({ page, runtime }) => import("./trees/phi-default-builder-settings-page-tree")
             .then((module) => module.buildPhiDefaultBuilderSettingsPageTree({ page, runtime })),
     },

package/plugins/runtime-modules/builder/preview-transport.d.ts

@@ -1,35 +1,19 @@
-import type { PhiCmsContentWidgetNode, PhiCmsLayoutRenderNode } from "../../../types/cms";
-import type { PhiCmsBorderWidgetConfig, PhiCmsPaddingWidgetConfig } from "../../../types/cms-config";
-import type { PhiCmsBackgroundWidgetConfig } from "../../../components/widgets/config/background";
+import type { PhiCmsLayoutRenderNode } from "../../../types/cms";
 import type { PhiCmsGeometryWidgetConfig } from "../../../components/widgets/config/geometry";
-import type { PhiAnchorWidgetPlacement } from "../../../components/controls/phi-anchor-control-contract";
-import type { PhiCmsInstanceId } from "../../../types/cms-instance-id";
 import type { PhiRuntimeModuleId } from "../../../types/cms-plugins";
-import type { PhiShadow, PhiLayoutEffectId } from "../../../types/layout-style";
+import type { PhiSurface } from "../../../types/surface";
 export declare const PHI_BUILDER_PREVIEW_SEARCH_PARAM = "phiBuilderPreview";
-export declare const PHI_BUILDER_PREVIEW_ROUTE = "/builder/api/preview";
 export declare const PHI_BUILDER_PREVIEW_TTL_MS: number;
 export type PhiBuilderRootNodeKind = "layout" | "widget" | null;
 export type PhiBuilderPreviewRegionDraft = PhiCmsGeometryWidgetConfig & {
-    background?: PhiCmsBackgroundWidgetConfig | null;
-    border?: PhiCmsBorderWidgetConfig | null;
-    effect?: PhiLayoutEffectId | null;
-    shadow?: PhiShadow | null;
+    /** The Region's own look; the root Layout's is its `config.surface`. */
+    surface?: PhiSurface | null;
     regionConfig?: Record<string, unknown> | null;
-    rootNodeId?: PhiCmsInstanceId | null;
-    rootNodeTypeKey?: string | null;
-    rootNodeKind?: PhiBuilderRootNodeKind;
-    rootNodeTitle?: string | null;
-    rootNodePackageName?: string | null;
-    rootNodeConfig?: Record<string, unknown> | null;
-    rootNodeGeometry?: PhiCmsGeometryWidgetConfig | null;
-    rootNodeAnchor?: PhiAnchorWidgetPlacement | null;
-    rootNodePadding?: PhiCmsPaddingWidgetConfig | null;
-    rootNodeBackground?: PhiCmsBackgroundWidgetConfig | null;
-    rootNodeBorder?: PhiCmsBorderWidgetConfig | null;
-    rootNodeShadow?: PhiShadow | null;
-    rootNodeChildLayouts?: PhiCmsLayoutRenderNode[];
-    rootNodeChildWidgets?: PhiCmsContentWidgetNode[];
+    /**
+     * The Region's root Layout: one Layout node like every node nested in it, edited, rendered and
+     * stored the same way. Its look is its `config.surface`; the Region's own is `surface` above.
+     */
+    rootNode?: PhiCmsLayoutRenderNode | null;
 };
 export type PhiBuilderPreviewSnapshot = {
     version: 2;
@@ -39,6 +23,5 @@ export type PhiBuilderPreviewSnapshot = {
     regionDrafts: Record<string, PhiBuilderPreviewRegionDraft>;
 };
 export type PhiBuilderPreviewSnapshotId = string;
-export declare function serializePhiBuilderPreviewSnapshot(snapshot: PhiBuilderPreviewSnapshot): string;
 export declare function parsePhiBuilderPreviewSnapshot(value: string | null | undefined): PhiBuilderPreviewSnapshot | null;
 export declare function savePhiBuilderPreviewSnapshotRequest(snapshot: PhiBuilderPreviewSnapshot): Promise<PhiBuilderPreviewSnapshotId>;

package/plugins/runtime-modules/builder/preview-transport.js

@@ -1,8 +1,8 @@
 import { isPhiRecord } from "../../../helpers/is-record";
 export const PHI_BUILDER_PREVIEW_SEARCH_PARAM = "phiBuilderPreview";
-export const PHI_BUILDER_PREVIEW_ROUTE = "/builder/api/preview";
+const PHI_BUILDER_PREVIEW_ROUTE = "/builder/api/preview";
 export const PHI_BUILDER_PREVIEW_TTL_MS = 1000 * 60 * 30;
-export function serializePhiBuilderPreviewSnapshot(snapshot) {
+function serializePhiBuilderPreviewSnapshot(snapshot) {
     return JSON.stringify(snapshot);
 }
 export function parsePhiBuilderPreviewSnapshot(value) {

package/plugins/runtime-modules/builder/public-route-collisions.d.ts

@@ -1,38 +1,5 @@
-import { type PhiPublicRouteAddressHolder } from "../../../helpers/public-route-claims";
 import type { PhiRuntimeModuleId } from "../../../types";
 import type { PhiBuilderPublicRouteCollisionAnswer, PhiBuilderPublicRouteCollisionRequest, PhiDeveloperBuilderArea, PhiDeveloperBuilderWorkspaceState } from "./developer-workspace-types";
-/**
- * Which Public addresses a Site Page already occupies.
- *
- * A Page is not a Module and cannot be asked to move, so from a Module's side its address is simply
- * taken. Saying that in the dialog is better than letting the Module take the address and a Page stop
- * opening -- the read resolves first claim wins, and which claim is first is not something an operator
- * should have to reason about.
- */
-export declare function resolvePhiBuilderPersistedPublicPages(state: Pick<PhiDeveloperBuilderWorkspaceState, "persistedPageCatalogByArea">): {
-    path: string;
-    title: string;
-}[];
-/**
- * What answers on each Public address in the draft the Builder is editing.
- *
- * The draft, not the published Area: freeing an address by switching one Module off and claiming it
- * with another has to work in one editing session, and it does because both halves are read from the
- * same unsaved selection.
- */
-export declare function buildPhiBuilderPublicAddressMap(state: Pick<PhiDeveloperBuilderWorkspaceState, "publicRouteClaims" | "publicRoutePaths" | "runtimeModuleIdsByArea" | "persistedPageCatalogByArea">, options?: {
-    without?: PhiRuntimeModuleId;
-}): Map<string, PhiPublicRouteAddressHolder>;
-/**
- * A first suggestion for an address that is taken, so the dialog opens with something to accept.
- *
- * The Module's own package is where a second `/login` can live without asking anybody: `/phis/dev/login`
- * reads as what it is, and it is free by construction because a package name is unique. Only a
- * suggestion -- Public is the Site's address space, and a Builder types over it whenever a better name
- * exists.
- */
-export declare function suggestPhiPublicRoutePath(moduleId: PhiRuntimeModuleId, declaredPath: string, taken: ReadonlyMap<string, PhiPublicRouteAddressHolder>): string;
-export declare function describePhiPublicRouteAddressHolder(holder: PhiPublicRouteAddressHolder, moduleTitles: ReadonlyMap<string, string>): string;
 /**
  * The question to put to the Builder before a Module may be enabled for Public.
  *

package/plugins/runtime-modules/builder/public-route-collisions.js

@@ -11,7 +11,7 @@ import { markPhiBuilderModuleAreasDirty } from "./runtime-module-selection";
  * opening -- the read resolves first claim wins, and which claim is first is not something an operator
  * should have to reason about.
  */
-export function resolvePhiBuilderPersistedPublicPages(state) {
+function resolvePhiBuilderPersistedPublicPages(state) {
     return (state.persistedPageCatalogByArea?.public ?? [])
         .filter((entry) => !entry.tombstoned && typeof entry.path === "string" && entry.path.length > 0)
         // A Page that came from a Module preset is that Module's route, counted with the Modules below.
@@ -25,7 +25,7 @@ export function resolvePhiBuilderPersistedPublicPages(state) {
  * with another has to work in one editing session, and it does because both halves are read from the
  * same unsaved selection.
  */
-export function buildPhiBuilderPublicAddressMap(state, options) {
+function buildPhiBuilderPublicAddressMap(state, options) {
     const activeModuleIds = new Set((state.runtimeModuleIdsByArea?.public ?? []).filter((moduleId) => moduleId !== options?.without));
     return buildPhiPublicRouteAddressMap({
         claims: state.publicRouteClaims ?? [],
@@ -42,7 +42,7 @@ export function buildPhiBuilderPublicAddressMap(state, options) {
  * suggestion -- Public is the Site's address space, and a Builder types over it whenever a better name
  * exists.
  */
-export function suggestPhiPublicRoutePath(moduleId, declaredPath, taken) {
+function suggestPhiPublicRoutePath(moduleId, declaredPath, taken) {
     const namespaced = `${buildPhiRuntimeModulePackageRoutePrefix(moduleId)}${declaredPath}`;
     if (!taken.has(namespaced)) {
         return namespaced;
@@ -55,7 +55,7 @@ export function suggestPhiPublicRoutePath(moduleId, declaredPath, taken) {
     }
     return namespaced;
 }
-export function describePhiPublicRouteAddressHolder(holder, moduleTitles) {
+function describePhiPublicRouteAddressHolder(holder, moduleTitles) {
     return holder.kind === "page"
         ? holder.title
         : `${moduleTitles.get(holder.claim.ownerModuleId) ?? holder.claim.ownerModuleId}: ${holder.claim.title}`;

package/plugins/runtime-modules/builder/region-defaults.js

@@ -1,15 +1,5 @@
 import { PHI_LAYOUT } from "../../../theme/phi-tokens";
-function createDefaultRegionBackground() {
-    return {
-        base: {
-            kind: "none",
-        },
-        overlay: null,
-        effect: null,
-    };
-}
 export function getPhiBuilderDefaultRegionDraft(regionKey) {
-    const background = createDefaultRegionBackground();
     switch (regionKey) {
         case "header_top":
             return {
@@ -19,10 +9,8 @@ export function getPhiBuilderDefaultRegionDraft(regionKey) {
                     height: 34,
                 },
                 zIndex: 210,
-                background,
-                border: null,
-                shadow: null,
-                rootNodeShadow: null,
+                surface: null,
+                rootNode: null,
             };
         case "header_main":
             return {
@@ -32,10 +20,8 @@ export function getPhiBuilderDefaultRegionDraft(regionKey) {
                     height: PHI_LAYOUT.headerHeight,
                 },
                 zIndex: 200,
-                background,
-                border: null,
-                shadow: null,
-                rootNodeShadow: null,
+                surface: null,
+                rootNode: null,
             };
         case "header_bottom":
             return {
@@ -43,10 +29,8 @@ export function getPhiBuilderDefaultRegionDraft(regionKey) {
                 offsetTop: 0,
                 size: undefined,
                 zIndex: 220,
-                background,
-                border: null,
-                shadow: null,
-                rootNodeShadow: null,
+                surface: null,
+                rootNode: null,
             };
         case "sider_left":
             return {
@@ -56,10 +40,8 @@ export function getPhiBuilderDefaultRegionDraft(regionKey) {
                     width: PHI_LAYOUT.sidebarWidth,
                 },
                 zIndex: 300,
-                background,
-                border: null,
-                shadow: null,
-                rootNodeShadow: null,
+                surface: null,
+                rootNode: null,
             };
         case "sider_right":
             return {
@@ -69,10 +51,8 @@ export function getPhiBuilderDefaultRegionDraft(regionKey) {
                     width: PHI_LAYOUT.sidebarWidth,
                 },
                 zIndex: 100,
-                background,
-                border: null,
-                shadow: null,
-                rootNodeShadow: null,
+                surface: null,
+                rootNode: null,
             };
         case "footer_top":
             return {
@@ -80,10 +60,8 @@ export function getPhiBuilderDefaultRegionDraft(regionKey) {
                 offsetTop: 0,
                 size: undefined,
                 zIndex: 220,
-                background,
-                border: null,
-                shadow: null,
-                rootNodeShadow: null,
+                surface: null,
+                rootNode: null,
             };
         case "footer_main":
             return {
@@ -91,10 +69,8 @@ export function getPhiBuilderDefaultRegionDraft(regionKey) {
                 offsetTop: 0,
                 size: undefined,
                 zIndex: 200,
-                background,
-                border: null,
-                shadow: null,
-                rootNodeShadow: null,
+                surface: null,
+                rootNode: null,
             };
         case "footer_bottom":
             return {
@@ -102,10 +78,8 @@ export function getPhiBuilderDefaultRegionDraft(regionKey) {
                 offsetTop: 0,
                 size: undefined,
                 zIndex: 210,
-                background,
-                border: null,
-                shadow: null,
-                rootNodeShadow: null,
+                surface: null,
+                rootNode: null,
             };
         default:
             return {
@@ -113,10 +87,8 @@ export function getPhiBuilderDefaultRegionDraft(regionKey) {
                 offsetTop: 0,
                 size: undefined,
                 zIndex: 0,
-                background,
-                border: null,
-                shadow: null,
-                rootNodeShadow: null,
+                surface: null,
+                rootNode: null,
             };
     }
 }

package/plugins/runtime-modules/builder/region-hydration.d.ts

@@ -1,14 +1,11 @@
-import { type PhiCmsBackgroundWidgetConfig } from "../../../components/widgets/config/background";
-import type { PhiCmsBorderWidgetConfig } from "../../../types/cms-config";
 import type { PhiResolvedCmsPageTree } from "../../../types/cms";
 import { type PhiDeveloperBuilderArea, type PhiDeveloperBuilderRegionDraft } from "./developer-workspace-types";
 import type { PhiRenderableBlockResponsiveSize } from "../../../types/renderable-block";
 import { type PhiCssLength } from "../../../types/length";
 import { type PhiBuilderRegionKey } from "./region-keys";
-import { type PhiShadow, type PhiLayoutEffectId } from "../../../types/layout-style";
 type BuilderPersistedRegionConfig = {
-    fullHeight?: boolean;
-    sticky?: boolean;
+    /** The Region's behaviour bits (`PhiCmsFlags`); `Sticky` is the draft's own `sticky` on its way out. */
+    flags?: number;
     offsetTop?: PhiCssLength;
     size?: PhiRenderableBlockResponsiveSize;
     minSize?: PhiRenderableBlockResponsiveSize;
@@ -20,10 +17,9 @@ type BuilderPersistedRegionConfig = {
     minHeight?: number | string;
     maxHeight?: number | string;
     zIndex?: number;
-    effect?: PhiLayoutEffectId;
-    backgroundConfig?: PhiCmsBackgroundWidgetConfig | null;
-    border?: boolean | string | PhiCmsBorderWidgetConfig;
-    shadow?: PhiShadow;
+    /** The widths the Region shows on (`PhiViewport` bits); none stored is every width. */
+    viewportFlags?: number;
+    surface?: unknown;
     padding?: number | string;
     paddingTop?: number | string;
     paddingRight?: number | string;

package/plugins/runtime-modules/builder/region-hydration.js

@@ -1,51 +1,22 @@
-import { normalizePhiBackgroundWidgetConfig, } from "../../../components/widgets/config/background";
-import { normalizePhiGeometryWidgetConfig } from "../../../components/widgets/config/geometry";
+import { isPhiRecord } from "../../../helpers/is-record";
 import { stripPhiResolvedAssetProjections } from "../../../components/media/image-presentation";
 import { comparePhiCmsInstanceIds } from "../../../types/cms-instance-id";
 import { resolvePhiCmsRegionKey } from "../../../helpers/cms-region-keys";
 import {} from "./developer-workspace-types";
 import { readPhiLengthValue } from "../../../types/length";
 import { getPhiBuilderDefaultRegionDraft } from "./region-defaults";
-import { resolvePhiBuilderRootNodeDefaults } from "./root-node-normalization";
 import { getPhiBuilderRegionDraftKey, PHI_BUILDER_PAGE_REGION_KEYS, PHI_BUILDER_SHELL_REGION_KEYS, } from "./region-keys";
-import { resolvePhiAnchorPlacement } from "../../../components/layouts/phi-layout-contract";
-import { splitPhiCmsLayoutNamespacedTypeKey } from "../../../constants/cms-layout-types";
-import { isPhiAnchorWidgetPlacement } from "../../../components/controls/phi-anchor-control-contract";
-import { isPhiLayoutEffectId, readPhiShadow, } from "../../../types/layout-style";
+import { readPhiSurface } from "../../../types/surface";
+import { normalizePhiRenderableBlockSize } from "../../../helpers/renderable-block-normalizers";
+import { hasPhiFlag, readPhiFlags } from "../../../helpers/flags";
+import { PhiCmsFlags } from "../../../constants/phi-cms";
+import { normalizePhiViewportFlags } from "../../../types/access";
 const BUILDER_REGION_KEYS = [...PHI_BUILDER_SHELL_REGION_KEYS, ...PHI_BUILDER_PAGE_REGION_KEYS];
 function toJsonRecord(value) {
-    return value && typeof value === "object" && !Array.isArray(value)
+    return isPhiRecord(value)
         ? value
         : {};
 }
-function readObjectConfig(value) {
-    return value && typeof value === "object" && !Array.isArray(value) ? value : null;
-}
-function readGeometrySize(value) {
-    if (typeof value === "number" && Number.isFinite(value)) {
-        return value;
-    }
-    if (typeof value === "string") {
-        const trimmed = value.trim();
-        return trimmed.length > 0 ? trimmed : null;
-    }
-    return null;
-}
-function readRenderableBlockSize(value) {
-    if (!value || typeof value !== "object" || Array.isArray(value)) {
-        return null;
-    }
-    const raw = value;
-    const width = readGeometrySize(raw.width);
-    const height = readGeometrySize(raw.height);
-    if (width == null && height == null) {
-        return null;
-    }
-    return {
-        ...(width == null ? {} : { width }),
-        ...(height == null ? {} : { height }),
-    };
-}
 function isPhiBuilderRegionKey(value) {
     return BUILDER_REGION_KEYS.includes(value);
 }
@@ -87,23 +58,6 @@ function buildLayoutRenderTree(tree, rootLayoutNodeId) {
     }
     return createNode(rootLayoutNodeId);
 }
-function resolveRootNodeKind(widgetType) {
-    splitPhiCmsLayoutNamespacedTypeKey(widgetType);
-    return "layout";
-}
-function resolveRootNodePackageName(widgetType) {
-    const segments = widgetType.split("/").filter(Boolean);
-    if (segments.length < 2) {
-        return null;
-    }
-    return segments.slice(0, -1).join("/");
-}
-function resolveRegionBackground(regionConfig, fallback) {
-    if (regionConfig.backgroundConfig != null) {
-        return normalizePhiBackgroundWidgetConfig(regionConfig.backgroundConfig);
-    }
-    return fallback;
-}
 function normalizeHydratedChildLayouts(nodes) {
     return nodes.map((node) => ({
         ...node,
@@ -116,49 +70,28 @@ function normalizeHydratedChildWidgets(widgets) {
 }
 function buildRegionDraft(regionKey, regionConfig, rootNode) {
     const fallback = getPhiBuilderDefaultRegionDraft(regionKey);
-    const hydratedBackground = resolveRegionBackground(regionConfig, fallback.background);
-    const resolvedEffect = isPhiLayoutEffectId(regionConfig.effect)
-        ? regionConfig.effect
-        : hydratedBackground.effect ?? fallback.effect;
-    const resolvedBackground = {
-        ...hydratedBackground,
-        effect: null,
-    };
-    const resolvedRootNodeKind = rootNode ? resolveRootNodeKind(rootNode.widgetType) : null;
-    const rootNodeDefaults = rootNode && resolvedRootNodeKind
-        ? resolvePhiBuilderRootNodeDefaults(rootNode.config ?? null)
-        : { rootNodePadding: null, rootNodeBackground: null, rootNodeBorder: null };
     return {
         ...fallback,
         regionConfig: toJsonRecord(regionConfig),
-        sticky: typeof regionConfig.sticky === "boolean" ? regionConfig.sticky : fallback.sticky,
+        sticky: hasPhiFlag(readPhiFlags(regionConfig.flags), PhiCmsFlags.Sticky),
         offsetTop: readPhiLengthValue(regionConfig.offsetTop) ?? fallback.offsetTop,
-        size: readRenderableBlockSize(regionConfig.size) ?? fallback.size,
-        minSize: readRenderableBlockSize(regionConfig.minSize) ?? fallback.minSize,
-        maxSize: readRenderableBlockSize(regionConfig.maxSize) ?? fallback.maxSize,
+        size: normalizePhiRenderableBlockSize(regionConfig.size) ?? fallback.size,
+        minSize: normalizePhiRenderableBlockSize(regionConfig.minSize) ?? fallback.minSize,
+        maxSize: normalizePhiRenderableBlockSize(regionConfig.maxSize) ?? fallback.maxSize,
         zIndex: typeof regionConfig.zIndex === "number" && Number.isInteger(regionConfig.zIndex)
             ? regionConfig.zIndex
             : fallback.zIndex,
-        effect: resolvedEffect,
-        background: resolvedBackground,
-        border: readObjectConfig(regionConfig.border),
-        rootNodeId: rootNode?.id ?? null,
-        rootNodeTypeKey: rootNode?.widgetType ?? null,
-        rootNodeKind: resolvedRootNodeKind,
-        rootNodeTitle: rootNode?.label ?? null,
-        rootNodePackageName: rootNode ? resolveRootNodePackageName(rootNode.widgetType) : null,
-        rootNodeConfig: rootNode?.config ?? null,
-        rootNodeGeometry: rootNode ? normalizePhiGeometryWidgetConfig(rootNode.config) : null,
-        rootNodeAnchor: (isPhiAnchorWidgetPlacement(rootNode?.config?.anchor)
-            ? rootNode.config.anchor
-            : resolvePhiAnchorPlacement(rootNode?.config?.anchor)) ?? null,
-        rootNodePadding: rootNodeDefaults.rootNodePadding,
-        rootNodeBackground: rootNodeDefaults.rootNodeBackground,
-        rootNodeBorder: rootNodeDefaults.rootNodeBorder,
-        shadow: readPhiShadow(regionConfig.shadow) ?? null,
-        rootNodeShadow: rootNode ? readPhiShadow(rootNode.config.rootNodeShadow) ?? null : null,
-        rootNodeChildLayouts: rootNode ? normalizeHydratedChildLayouts(rootNode.childLayouts ?? []) : [],
-        rootNodeChildWidgets: rootNode ? normalizeHydratedChildWidgets(rootNode.childWidgets ?? []) : [],
+        // On which widths the Region shows; the Inspector's Viewport section edits it, so it reads back here.
+        viewportFlags: normalizePhiViewportFlags(regionConfig.viewportFlags),
+        surface: readPhiSurface(regionConfig.surface),
+        // The root Layout as the node it is in the tree; its config is the one copy of what it says.
+        rootNode: rootNode
+            ? {
+                ...rootNode,
+                childLayouts: normalizeHydratedChildLayouts(rootNode.childLayouts ?? []),
+                childWidgets: normalizeHydratedChildWidgets(rootNode.childWidgets ?? []),
+            }
+            : null,
     };
 }
 export function buildPhiDeveloperBuilderRegionDraftsFromTree(tree, area, 
@@ -184,7 +117,9 @@ export function serializePhiDeveloperBuilderRegionConfig(_regionKey, draft) {
     const base = {
         ...toJsonRecord(draft.regionConfig),
     };
-    base.sticky = draft.sticky ?? false;
+    base.flags = draft.sticky
+        ? readPhiFlags(base.flags) | PhiCmsFlags.Sticky
+        : readPhiFlags(base.flags) & ~PhiCmsFlags.Sticky;
     base.offsetTop = draft.offsetTop ?? 0;
     if (draft.size?.width != null || draft.size?.height != null) {
         base.size = {
@@ -225,29 +160,25 @@ export function serializePhiDeveloperBuilderRegionConfig(_regionKey, draft) {
     else {
         delete base.zIndex;
     }
-    if (draft.effect != null) {
-        base.effect = draft.effect;
+    /*
+     * Every width is the default and is stored as nothing. The Inspector edited this on the draft and the
+     * save never wrote it, so a Region set to wide screens only came back on every width after a reload.
+     */
+    const viewportFlags = normalizePhiViewportFlags(draft.viewportFlags);
+    if (viewportFlags !== 0) {
+        base.viewportFlags = viewportFlags;
     }
     else {
-        delete base.effect;
+        delete base.viewportFlags;
     }
     // The draft Background carries the Picker's delivery projection so the Editor can draw the current
     // crop; stored content must not, or a focal change would leave a stale revision behind.
-    base.backgroundConfig = stripPhiResolvedAssetProjections({
-        ...draft.background,
-        effect: null,
-    });
-    if (draft.border != null) {
-        base.border = draft.border;
-    }
-    else {
-        delete base.border;
-    }
-    if (draft.shadow != null) {
-        base.shadow = draft.shadow;
+    const surface = readPhiSurface(draft.surface);
+    if (surface != null) {
+        base.surface = stripPhiResolvedAssetProjections(surface);
     }
     else {
-        delete base.shadow;
+        delete base.surface;
     }
     return base;
 }