@phis/ui 0.2.0 → 0.3.0

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

@@ -3,6 +3,5 @@ export declare const PHI_BUILDER_PAGE_REGION_KEYS: readonly ["header_bottom", "h
 export type PhiBuilderShellRegionKey = (typeof PHI_BUILDER_SHELL_REGION_KEYS)[number];
 export type PhiBuilderPageRegionKey = (typeof PHI_BUILDER_PAGE_REGION_KEYS)[number];
 export type PhiBuilderRegionKey = PhiBuilderShellRegionKey | PhiBuilderPageRegionKey;
-export declare function isPhiBuilderShellRegion(regionKey: string): regionKey is PhiBuilderShellRegionKey;
 export declare function isPhiBuilderPageScopedRegion(regionKey: string): regionKey is PhiBuilderPageRegionKey;
 export declare function getPhiBuilderRegionDraftKey(area: string, regionKey: string, pageKey?: string | null): string;

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

@@ -1,9 +1,6 @@
-import { PHI_CMS_PAGE_OWNED_REGION_KEYS, PHI_CMS_SHELL_OWNED_REGION_KEYS, isPhiCmsPageOwnedRegion, isPhiCmsShellOwnedRegion, } from "../../../helpers/cms-region-keys";
+import { PHI_CMS_PAGE_OWNED_REGION_KEYS, PHI_CMS_SHELL_OWNED_REGION_KEYS, isPhiCmsPageOwnedRegion, } from "../../../helpers/cms-region-keys";
 export const PHI_BUILDER_SHELL_REGION_KEYS = PHI_CMS_SHELL_OWNED_REGION_KEYS;
 export const PHI_BUILDER_PAGE_REGION_KEYS = PHI_CMS_PAGE_OWNED_REGION_KEYS;
-export function isPhiBuilderShellRegion(regionKey) {
-    return isPhiCmsShellOwnedRegion(regionKey);
-}
 export function isPhiBuilderPageScopedRegion(regionKey) {
     return isPhiCmsPageOwnedRegion(regionKey);
 }

package/plugins/runtime-modules/builder/region-root-node.d.ts

@@ -0,0 +1,22 @@
+import type { PhiCmsContentWidgetNode, PhiCmsLayoutRenderNode } from "../../../types/cms";
+/**
+ * The Region's root Layout, read and written as the one node it is.
+ *
+ * A Region draft holds its root Layout as `rootNode`, a Layout node like every node nested in it, so
+ * the Inspector, the Canvas and persistence treat the two alike. These helpers are for the many places
+ * that only touch the root's children; whatever touches the root's config goes through the node.
+ */
+type PhiBuilderRegionRootHolder = {
+    rootNode?: PhiCmsLayoutRenderNode | null;
+};
+export declare function readPhiBuilderRegionRootChildLayouts(draft: PhiBuilderRegionRootHolder | null | undefined): PhiCmsLayoutRenderNode[];
+export declare function readPhiBuilderRegionRootChildWidgets(draft: PhiBuilderRegionRootHolder | null | undefined): PhiCmsContentWidgetNode[];
+/**
+ * The draft with its root's children replaced; a side left out stays as it is. A draft without a root
+ * has no children to replace and comes back unchanged.
+ */
+export declare function withPhiBuilderRegionRootChildren<TDraft extends PhiBuilderRegionRootHolder>(draft: TDraft, children: {
+    childLayouts?: PhiCmsLayoutRenderNode[];
+    childWidgets?: PhiCmsContentWidgetNode[];
+}): TDraft;
+export {};

package/plugins/runtime-modules/builder/region-root-node.js

@@ -0,0 +1,25 @@
+const PHI_BUILDER_NO_CHILD_LAYOUTS = [];
+const PHI_BUILDER_NO_CHILD_WIDGETS = [];
+export function readPhiBuilderRegionRootChildLayouts(draft) {
+    return draft?.rootNode?.childLayouts ?? PHI_BUILDER_NO_CHILD_LAYOUTS;
+}
+export function readPhiBuilderRegionRootChildWidgets(draft) {
+    return draft?.rootNode?.childWidgets ?? PHI_BUILDER_NO_CHILD_WIDGETS;
+}
+/**
+ * The draft with its root's children replaced; a side left out stays as it is. A draft without a root
+ * has no children to replace and comes back unchanged.
+ */
+export function withPhiBuilderRegionRootChildren(draft, children) {
+    if (!draft.rootNode) {
+        return draft;
+    }
+    return {
+        ...draft,
+        rootNode: {
+            ...draft.rootNode,
+            ...(children.childLayouts ? { childLayouts: children.childLayouts } : {}),
+            ...(children.childWidgets ? { childWidgets: children.childWidgets } : {}),
+        },
+    };
+}

package/plugins/runtime-modules/builder/render-root-node-preview.server.d.ts

@@ -1,28 +1,11 @@
 import type { ReactNode } from "react";
 import type { PhiBlockRuntime } from "../../../types";
 import type { PhiCmsRuntimeRenderRegistry } from "../../../types/cms-plugins";
-import type { PhiCmsContentWidgetNode, PhiCmsLayoutNode, PhiResolvedCmsPageTree } from "../../../types/cms";
-import type { PhiCmsBackgroundWidgetConfig } from "../../../components/widgets/config/background";
+import type { PhiResolvedCmsPageTree } from "../../../types/cms";
 import { type PhiBuilderPreviewRegionDraft, type PhiBuilderPreviewSnapshot } from "./preview-transport";
-import { type PhiBuilderRootNodeDraft } from "./root-node-normalization";
-export type PhiBuilderRootNodePreviewInput = PhiBuilderRootNodeDraft;
 export type PhiBuilderServerPreviewRegionKey = "header_top" | "header_main" | "header_bottom" | "hero" | "sider_left" | "sider_right" | "content" | "footer_top" | "footer_main" | "footer_bottom";
-export type PhiBuilderRootNodeServerPreviewProps = {
-    rootNode: PhiBuilderRootNodePreviewInput;
-    runtime: PhiBlockRuntime;
-    regionType?: number;
-    regionKey?: string;
-    registry: PhiCmsRuntimeRenderRegistry;
-    regionConfig?: Record<string, unknown> | null;
-    regionBackgroundConfig?: PhiCmsBackgroundWidgetConfig | null;
-    extraPreviewNodes?: {
-        layoutNodes: PhiCmsLayoutNode[];
-        contentWidgets: PhiCmsContentWidgetNode[];
-    };
-};
 export declare function resolvePhiBuilderPreviewRegionConfig(draft: PhiBuilderPreviewRegionDraft): {
-    shadow?: import("../../../types").PhiShadow | undefined;
-    effect?: "glass" | "haze" | "blur" | "dim" | undefined;
+    surface?: import("../../../types/surface").PhiSurface | undefined;
 };
 export declare function buildPhiBuilderPreviewRenderableTrees(snapshot: PhiBuilderPreviewSnapshot | null): PhiResolvedCmsPageTree[];
 export declare function PhiBuilderRegionServerPreview({ snapshot, draft, regionKey, runtime, registry, }: {
@@ -37,4 +20,3 @@ export declare function buildPhiBuilderServerPreviewRegions({ snapshot, runtime,
     runtime: PhiBlockRuntime;
     registry: PhiCmsRuntimeRenderRegistry;
 }): Partial<Record<PhiBuilderServerPreviewRegionKey, ReactNode>>;
-export declare function PhiBuilderRootNodeServerPreview({ rootNode, runtime, regionType, registry, regionConfig, regionBackgroundConfig, extraPreviewNodes, }: PhiBuilderRootNodeServerPreviewProps): Promise<ReactNode>;

package/plugins/runtime-modules/builder/render-root-node-preview.server.js

@@ -5,26 +5,24 @@ import { PhiSlotChildFrame } from "../../../plugins/runtime/phi-slot-child-frame
 import { resolvePhiCmsRegionType } from "../../../helpers/cms-region-keys";
 import {} from "./preview-transport";
 import { getPhiBuilderRegionDraftKey } from "./region-keys";
-import { readPhiBuilderRootNodeDraftFields, } from "./root-node-normalization";
+import { normalizePhiBuilderRootNodeDraft, readPhiBuilderRootNodeDraft, } from "./root-node-normalization";
 import { resolvePhiRenderableBlockGeometry } from "../../../types/renderable-block-geometry";
 import { resolvePhiRootScaffoldProperties } from "./builder-geometry";
 import { buildPhiBuilderRootNodeRenderableTree } from "./root-node-renderable-tree";
 import { normalizePhiPaddingWidgetConfig } from "../../../types/cms-config";
 import { resolvePhiPaddingStyle } from "../../../components/layouts/phi-layout-contract";
-function buildPreviewTree(rootNode, regionType, regionConfig, regionBackgroundConfig) {
+function buildPreviewTree(rootNode, regionType, regionConfig) {
     return buildPhiBuilderRootNodeRenderableTree({
         rootNode,
         regionType,
         renderMode: "preview",
         regionConfig,
-        regionBackgroundConfig,
     });
 }
 export function resolvePhiBuilderPreviewRegionConfig(draft) {
     return {
         ...(draft.regionConfig ?? {}),
-        ...(draft.effect == null ? {} : { effect: draft.effect }),
-        ...(draft.shadow == null ? {} : { shadow: draft.shadow }),
+        ...(draft.surface == null ? {} : { surface: draft.surface }),
     };
 }
 function mergePreviewTreeNodes(tree, extraPreviewNodes) {
@@ -45,22 +43,8 @@ function mergePreviewTreeNodes(tree, extraPreviewNodes) {
         contentWidgets: [...contentWidgetsById.values()],
     };
 }
-function resolvePreviewRootNodeKind(kind) {
-    if (kind === "layout" || kind === "widget") {
-        return kind;
-    }
-    return null;
-}
 function resolveRootNodeFromPreviewDraft(draft) {
-    if (!draft?.rootNodeTypeKey) {
-        return null;
-    }
-    return {
-        id: draft.rootNodeId ?? null,
-        typeKey: draft.rootNodeTypeKey,
-        kind: resolvePreviewRootNodeKind(draft.rootNodeKind ?? null),
-        ...readPhiBuilderRootNodeDraftFields(draft),
-    };
+    return draft?.rootNode ? readPhiBuilderRootNodeDraft(draft.rootNode) : null;
 }
 function buildPreviewSnapshotNodes(snapshot) {
     const layoutNodes = [];
@@ -74,7 +58,7 @@ function buildPreviewSnapshotNodes(snapshot) {
         if (!rootNode || !regionKey) {
             continue;
         }
-        const tree = buildPreviewTree(rootNode, resolvePhiCmsRegionType(regionKey), resolvePhiBuilderPreviewRegionConfig(draft), draft.background ?? null);
+        const tree = buildPreviewTree(rootNode, resolvePhiCmsRegionType(regionKey), resolvePhiBuilderPreviewRegionConfig(draft));
         if (!tree) {
             continue;
         }
@@ -93,7 +77,7 @@ export function buildPhiBuilderPreviewRenderableTrees(snapshot) {
         if (!rootNode) {
             return [];
         }
-        const tree = buildPreviewTree(rootNode, PhiCmsRegionType.Content, resolvePhiBuilderPreviewRegionConfig(draft), draft.background ?? null);
+        const tree = buildPreviewTree(rootNode, PhiCmsRegionType.Content, resolvePhiBuilderPreviewRegionConfig(draft));
         return tree ? [mergePreviewTreeNodes(tree, extraPreviewNodes)] : [];
     });
 }
@@ -106,12 +90,11 @@ export function PhiBuilderRegionServerPreview({ snapshot, draft, regionKey, runt
     const previewRegionConfig = previewDraft
         ? resolvePhiBuilderPreviewRegionConfig(previewDraft)
         : null;
-    const regionBackgroundConfig = previewDraft?.background ?? null;
     const extraPreviewNodes = buildPreviewSnapshotNodes(snapshot);
     if (!rootNode) {
         return null;
     }
-    return (_jsx(PhiBuilderRootNodeServerPreview, { rootNode: rootNode, runtime: runtime, regionKey: regionKey, regionType: resolvePhiCmsRegionType(regionKey), registry: registry, regionConfig: previewRegionConfig, regionBackgroundConfig: regionBackgroundConfig, extraPreviewNodes: extraPreviewNodes }));
+    return (_jsx(PhiBuilderRootNodeServerPreview, { rootNode: rootNode, runtime: runtime, regionKey: regionKey, regionType: resolvePhiCmsRegionType(regionKey), registry: registry, regionConfig: previewRegionConfig, extraPreviewNodes: extraPreviewNodes }));
 }
 export function buildPhiBuilderServerPreviewRegions({ snapshot, runtime, registry, }) {
     if (!snapshot) {
@@ -134,10 +117,10 @@ export function buildPhiBuilderServerPreviewRegions({ snapshot, runtime, registr
         _jsx(PhiBuilderRegionServerPreview, { snapshot: snapshot, regionKey: regionKey, runtime: runtime, registry: registry }, regionKey),
     ]));
 }
-export async function PhiBuilderRootNodeServerPreview({ rootNode, runtime, regionType = PhiCmsRegionType.Content, registry, regionConfig = null, regionBackgroundConfig = null, extraPreviewNodes, }) {
+async function PhiBuilderRootNodeServerPreview({ rootNode, runtime, regionType = PhiCmsRegionType.Content, registry, regionConfig = null, extraPreviewNodes, }) {
     const rootSlotChildKind = rootNode.kind === "widget" ? "widget" : "layout";
-    const rootGeometry = resolvePhiRenderableBlockGeometry(rootNode.rootNodeGeometry);
-    const tree = buildPreviewTree(rootNode, regionType, regionConfig, regionBackgroundConfig);
+    const rootGeometry = resolvePhiRenderableBlockGeometry(normalizePhiBuilderRootNodeDraft(rootNode).rootNodeGeometry);
+    const tree = buildPreviewTree(rootNode, regionType, regionConfig);
     if (!tree) {
         return null;
     }

package/plugins/runtime-modules/builder/render-root-node-scaffold.d.ts

@@ -2,7 +2,7 @@ import { type ReactElement, type ReactNode } from "react";
 import type { PhiCmsContentWidgetNode, PhiCmsLayoutRenderNode, PhiResolvedCmsRenderableTree } from "../../../types/cms";
 import { type PhiCmsInstanceId } from "../../../types/cms-instance-id";
 import { type PhiStructureDragData, type PhiStructureDropTargetData } from "./structure-dnd";
-import { type PhiAnchorWidgetPlacement } from "../../../components/controls/phi-anchor-control-contract";
+import type { PhiAnchorWidgetPlacement } from "../../../components/controls/phi-anchor-control-contract";
 import type { PhiEffectsWidgetLabels } from "../../../components/widgets/label-types/effects";
 import type { PhiAuthoringToolsLabels } from "../../../components/widgets/label-types/authoring-tools";
 import type { PhiCmsWidgetAuthoringCanvas } from "../../../types";
@@ -19,6 +19,18 @@ type PhiBuilderDemandControllerContext = {
 type PhiBuilderDemandControllerContextInput = Omit<PhiBuilderDemandControllerContext, "tree"> & {
     tree?: PhiResolvedCmsRenderableTree;
 };
+/** A Layout node as the scaffold takes it: the node, and the anchor its slots are edited at. */
+export declare function resolveLayoutNodeRootProps(node: PhiCmsLayoutRenderNode): {
+    editSlotAnchor: PhiAnchorWidgetPlacement | undefined;
+    id?: PhiCmsInstanceId | null;
+    typeKey: string;
+    kind: import("./preview-transport").PhiBuilderRootNodeKind;
+    title?: string | null;
+    packageName?: string | null;
+    rootNodeConfig?: Record<string, unknown> | null;
+    childLayouts?: PhiCmsLayoutRenderNode[];
+    childWidgets?: PhiCmsContentWidgetNode[];
+};
 export declare function renderPhiRootNodeScaffold(rootNode: PhiBuilderRootNodeDraft & {
     regionKey: string;
     editSlotAnchor?: PhiAnchorWidgetPlacement | null;
@@ -58,7 +70,4 @@ export declare function renderPhiRootNodeScaffold(rootNode: PhiBuilderRootNodeDr
         targetNodeId: PhiCmsInstanceId;
     }) => ReactNode;
 }): import("react").JSX.Element | null;
-export declare function renderPhiRootNodePreview(rootNode: PhiBuilderRootNodeDraft & {
-    editSlotAnchor?: PhiAnchorWidgetPlacement | null;
-}): import("react").JSX.Element;
 export {};

package/plugins/runtime-modules/builder/render-root-node-scaffold.js

@@ -1,15 +1,9 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, isValidElement, Suspense, useCallback, useEffect, useRef, useState } from "react";
-import { NodeIndexOutlined, ShareAltOutlined, WarningOutlined } from "@ant-design/icons";
-import { theme as antdTheme } from "antd";
+import { usePhiConfig } from "../../../components/root/phi-config-provider";
 import { PhiEditScaffoldDrawer } from "./edit-scaffold-drawer";
 import { comparePhiCmsInstanceIds } from "../../../types/cms-instance-id";
-import { normalizePhiPaddingWidgetConfig } from "../../../types/cms-config";
-import { resolvePhiBackgroundWidgetStyle, } from "../../../components/widgets/config/background";
-import { resolvePhiSourcedBorderStyle } from "../../../helpers/border-widget-style";
-import { readPhiCmsBorderSource, resolvePhiCmsBorderSource, } from "../../../types/cms-border-source";
-import { resolvePhiAnchorPlacement } from "../../../components/layouts/phi-layout-contract";
 import { PhiSlotChildFrame } from "../../../plugins/runtime/phi-slot-child-frame";
 import { PhiLayoutDeleteButtonOverlay, PhiLayoutDragButtonOverlay, PhiLayoutPlusButtonOverlay, } from "./clients/layout-scaffold-overlays";
 import { PhiPlusButtonWidget, } from "./clients/layout-scaffold-buttons";
@@ -20,17 +14,14 @@ import { usePhiAuthoringLayoutDefinition, usePhiRuntimeModuleAuthoringRegistrati
 import { usePhiRuntimeModuleState } from "../../../components/runtime/runtime-module-context";
 import { PhiCmsRenderDiagnostic } from "../../../components/cms/phi-cms-render-diagnostic";
 import { PhiCmsRenderErrorBoundary } from "../../../components/cms/phi-cms-render-error-boundary";
-import { isPhiAnchorWidgetPlacement } from "../../../components/controls/phi-anchor-control-contract";
 import { PhiAuthoringToolsLabelsProvider } from "../../../components/widgets/client/shared/phi-authoring-tools-labels";
 import { PhiBuilderPageReferencesProvider } from "./page-references-provider";
-import { readPhiShadow } from "../../../types/layout-style";
-import { combinePhiBoxShadows, resolvePhiShadow } from "../../../helpers/layout-style";
-import { PHI_VIEWER_ACCESS_ANYONE, intersectPhiInheritedViewportFlags, } from "../../../types/access";
+import { intersectPhiInheritedViewportFlags } from "../../../types/access";
 import { mergeRenderableBlockDefaults } from "../../../helpers/renderable-block-serialization";
 import { PHI_RENDERABLE_BLOCK_DEFAULT_TRANSITION } from "../../../helpers/renderable-block-defaults";
 import { PhiWidgetEffectsToolButton } from "./clients/widget-effects-editor";
 import { PHI_WIDGET_SCAFFOLD_POPUP_CLASS_NAME, PhiWidgetScaffoldPopupProvider, } from "../../../components/widgets/client/shared/phi-widget-scaffold-popup";
-import { buildPhiBuilderRootNodeRenderConfig, normalizePhiBuilderRootNodeDraft, } from "./root-node-normalization";
+import { buildPhiBuilderPreviewPageNode, buildPhiBuilderRootLayoutRenderNode, buildPhiBuilderRootNodeRenderConfig, normalizePhiBuilderRootNodeDraft, readPhiBuilderRootNodeDraft, } from "./root-node-normalization";
 import { resolvePhiRenderableBlockGeometry } from "../../../types/renderable-block-geometry";
 import { resolvePhiRootScaffoldProperties } from "./builder-geometry";
 import { PhiWidgetPreviewFallback } from "../../../components/widgets/built-in/widget-preview";
@@ -38,6 +29,7 @@ import { splitPhiCmsLayoutNamespacedTypeKey } from "../../../constants/cms-layou
 import { PhiBuilderDemandControllerRegistration } from "./demand-controller-registration";
 import { buildPhiBuilderRootNodeRenderableTree } from "./root-node-renderable-tree";
 import { readPhiDeveloperBuilderEffectsPreview, usePhiDeveloperBuilderStateValue, } from "./developer-workspace-store";
+import { PhiIcon } from "../../../components/shell/phi-icon";
 function resolvePhiAuthoringLayoutType(type) {
     const { pluginKey, typeKey } = splitPhiCmsLayoutNamespacedTypeKey(type);
     return `${pluginKey}/${typeKey}`;
@@ -108,7 +100,7 @@ function PhiAuthoringWidgetLoader({ widget, config, slotSizePolicy, demandContro
             } });
     }
     const WidgetModule = authoringModule.WidgetModule;
-    return (_jsx(PhiCmsRenderErrorBoundary, { kind: "widget", blockId: blockId, typeKey: type, moduleId: definition.ownerModuleId, children: _jsx(Suspense, { fallback: (_jsx(PhiSlotChildFrame, { kind: "widget", slotSizePolicy: slotSizePolicy ?? definition.slotSizePolicy, blockId: null, config: config, disableEffects: true, runtimeSignalEmissionsEnabled: false, className: "phi-widget-authoring-loading", children: _jsx(PhiWidgetPreviewFallback, { widget: widget, pluginTitle: definition.title }) })), children: _jsx(WidgetModule, { type: type, children: (plugin) => plugin
+    return (_jsx(PhiCmsRenderErrorBoundary, { kind: "widget", blockId: blockId, typeKey: type, moduleId: definition.ownerModuleId, children: _jsx(Suspense, { fallback: (_jsx(PhiSlotChildFrame, { kind: "widget", slotSizePolicy: slotSizePolicy ?? definition.slotSizePolicy, surfacePolicy: definition.surface, blockId: null, config: config, disableEffects: true, runtimeSignalEmissionsEnabled: false, className: "phi-widget-authoring-loading", children: _jsx(PhiWidgetPreviewFallback, { widget: widget, pluginTitle: definition.title }) })), children: _jsx(WidgetModule, { type: type, children: (plugin) => plugin
                     ? demandControllerContext && plugin.requiredRuntimeControllers
                         ? (_jsx(PhiBuilderDemandControllerRegistration, { area: demandControllerContext.area, ownerKey: demandControllerContext.ownerKey, ownerMountScope: demandControllerContext.ownerMountScope, pageKey: demandControllerContext.pageKey, widget: widget, tree: demandControllerContext.tree, plugin: plugin, children: children(plugin, definition) }))
                         : children(plugin, definition)
@@ -217,7 +209,7 @@ function PhiEffectsPreviewButton({ config, blockKind, onRun, }) {
     return (_jsx("span", { style: { display: "contents" }, onMouseDown: (event) => {
             event.preventDefault();
             event.stopPropagation();
-        }, onClick: (event) => event.stopPropagation(), children: _jsx(PhiButtonControl, { className: "phi-layout-affordance phi-layout-affordance--effects-preview", ariaLabel: previewLabel, tooltip: previewLabel, icon: _jsx(NodeIndexOutlined, {}), type: "text", size: "small", onClick: onRun, style: {
+        }, onClick: (event) => event.stopPropagation(), children: _jsx(PhiButtonControl, { className: "phi-layout-affordance phi-layout-affordance--effects-preview", ariaLabel: previewLabel, tooltip: previewLabel, icon: _jsx(PhiIcon, { name: "node-index", size: "inherit" }), type: "text", size: "small", onClick: onRun, style: {
                 position: "absolute",
                 top: "50%",
                 left: "50%",
@@ -239,7 +231,7 @@ function PhiSignalWiringToolButton({ onOpen }) {
              * two sat side by side in the same toolbar meaning entirely different things. The flow-graph
              * glyph is taken by the effects editor, so wiring gets the connected-nodes one.
              */
-            icon: _jsx(ShareAltOutlined, {}), onClick: onOpen }) }));
+            icon: _jsx(PhiIcon, { name: "share-alt", size: "inherit" }), onClick: onOpen }) }));
 }
 function PhiViewportIntersectionDiagnostic() {
     return (_jsx("span", { "aria-label": "This block is hidden at every viewport because its visibility does not overlap its ancestors.", title: "Hidden at every viewport: this block's Compact/Medium/Wide selection has no overlap with its ancestors.", style: {
@@ -249,7 +241,7 @@ function PhiViewportIntersectionDiagnostic() {
             height: "var(--ant-control-height-sm)",
             justifyContent: "center",
             width: "var(--ant-control-height-sm)",
-        }, children: _jsx(WarningOutlined, {}) }));
+        }, children: _jsx(PhiIcon, { name: "warning", size: "inherit" }) }));
 }
 const PHI_WIDGET_AUTHORING_TEXT_SELECTOR = [
     "textarea:not([disabled]):not([readonly])",
@@ -271,8 +263,8 @@ function findPhiWidgetAuthoringTextTarget(container, clientX, clientY) {
             clientY <= rect.bottom);
     }) ?? null;
 }
-function PhiWidgetEffectsPreviewFrame({ kind, slotSizePolicy, blockId, regionKey, config: committedConfig, title, scaffoldLabel, editorInteraction = "inert", onSelect, dropTarget, tools, style, children, }) {
-    const { token } = antdTheme.useToken();
+function PhiWidgetEffectsPreviewFrame({ kind, slotSizePolicy, surfacePolicy, blockId, regionKey, config: committedConfig, title, scaffoldLabel, editorInteraction = "inert", onSelect, dropTarget, tools, style, children, }) {
+    const { token } = usePhiConfig();
     const selected = usePhiDeveloperBuilderStateValue("public", (state) => blockId != null &&
         regionKey != null &&
         state.selectedRootRegionKey === regionKey &&
@@ -482,7 +474,7 @@ function PhiWidgetEffectsPreviewFrame({ kind, slotSizePolicy, blockId, regionKey
      */
     const scaffoldChrome = isAuthoringActive ? null : tools;
     if (!hasRenderableBlockPreviewEffects(config)) {
-        return (_jsx(PhiWidgetScaffoldPopupProvider, { onOpenChange: setIsToolbarPopupOpen, children: _jsx(PhiSlotChildFrame, { kind: kind, slotSizePolicy: slotSizePolicy, blockId: blockId, config: config, disableEffects: true, runtimeSignalEmissionsEnabled: false, className: "phi-builder-widget-scaffold", style: widgetScaffoldStyle, builderWidgetTitle: scaffoldLabel?.trim() || title, builderWidgetSelected: selected, builderWidgetPopupOpen: isToolbarPopupOpen, onPointerLeave: isAuthoringActive && !isToolbarPopupOpen ? finishAuthoringOnPointerLeave : undefined, chrome: scaffoldChrome, children: renderEditorLayers() }) }));
+        return (_jsx(PhiWidgetScaffoldPopupProvider, { onOpenChange: setIsToolbarPopupOpen, children: _jsx(PhiSlotChildFrame, { kind: kind, slotSizePolicy: slotSizePolicy, surfacePolicy: surfacePolicy, blockId: blockId, config: config, disableEffects: true, runtimeSignalEmissionsEnabled: false, className: "phi-builder-widget-scaffold", style: widgetScaffoldStyle, builderWidgetTitle: scaffoldLabel?.trim() || title, builderWidgetSelected: selected, builderWidgetPopupOpen: isToolbarPopupOpen, onPointerLeave: isAuthoringActive && !isToolbarPopupOpen ? finishAuthoringOnPointerLeave : undefined, chrome: scaffoldChrome, children: renderEditorLayers() }) }));
     }
     const previewConfig = {
         ...config,
@@ -491,7 +483,7 @@ function PhiWidgetEffectsPreviewFrame({ kind, slotSizePolicy, blockId, regionKey
             transitionTrigger: "on_mount",
         },
     };
-    return (_jsx(PhiWidgetScaffoldPopupProvider, { onOpenChange: setIsToolbarPopupOpen, children: _jsx(PhiSlotChildFrame, { kind: kind, slotSizePolicy: slotSizePolicy, blockId: blockId, config: previewConfig, disableEffects: !isPreviewing, runtimeSignalEmissionsEnabled: false, className: "phi-builder-widget-scaffold", style: widgetScaffoldStyle, builderWidgetTitle: scaffoldLabel?.trim() || title, builderWidgetSelected: selected, builderWidgetPopupOpen: isToolbarPopupOpen, onPointerLeave: isAuthoringActive && !isToolbarPopupOpen ? finishAuthoringOnPointerLeave : undefined, chrome: scaffoldChrome === null ? null : (_jsxs(_Fragment, { children: [scaffoldChrome, !isPreviewing ? (_jsx(PhiEffectsPreviewButton, { config: config, blockKind: "widget", onRun: () => {
+    return (_jsx(PhiWidgetScaffoldPopupProvider, { onOpenChange: setIsToolbarPopupOpen, children: _jsx(PhiSlotChildFrame, { kind: kind, slotSizePolicy: slotSizePolicy, surfacePolicy: surfacePolicy, blockId: blockId, config: previewConfig, disableEffects: !isPreviewing, runtimeSignalEmissionsEnabled: false, className: "phi-builder-widget-scaffold", style: widgetScaffoldStyle, builderWidgetTitle: scaffoldLabel?.trim() || title, builderWidgetSelected: selected, builderWidgetPopupOpen: isToolbarPopupOpen, onPointerLeave: isAuthoringActive && !isToolbarPopupOpen ? finishAuthoringOnPointerLeave : undefined, chrome: scaffoldChrome === null ? null : (_jsxs(_Fragment, { children: [scaffoldChrome, !isPreviewing ? (_jsx(PhiEffectsPreviewButton, { config: config, blockKind: "widget", onRun: () => {
                             setIsPreviewing(false);
                             window.requestAnimationFrame(() => {
                                 setPreviewRunId((current) => current + 1);
@@ -537,9 +529,6 @@ function PhiAuthoringLayoutEffectsPreviewFrame({ type, ...props }) {
     const definition = usePhiAuthoringLayoutDefinition(resolvePhiAuthoringLayoutType(type));
     return (_jsx(PhiLayoutEffectsPreviewFrame, { ...props, slotSizePolicy: definition?.slotSizePolicy }));
 }
-function readObjectConfig(value) {
-    return typeof value === "object" && value != null ? value : null;
-}
 /**
  * The band under a scaffold: what this node is called, and then what it is.
  *
@@ -570,41 +559,11 @@ function formatLayoutScaffoldLabel(typeKey, _kind, definitionTitle, name) {
     const typeName = definitionTitle?.trim() || typeTitle;
     return formatPhiScaffoldLabel(name, `${typeName} ${kindLabel}`, typeName);
 }
-function resolveLayoutNodeRootProps(node) {
+/** A Layout node as the scaffold takes it: the node, and the anchor its slots are edited at. */
+export function resolveLayoutNodeRootProps(node) {
     return {
-        id: node.id,
-        typeKey: node.widgetType,
-        kind: "layout",
-        title: node.label ?? undefined,
-        editSlotAnchor: (typeof node.config.anchor === "string" && isPhiAnchorWidgetPlacement(node.config.anchor)
-            ? node.config.anchor
-            : resolvePhiAnchorPlacement(node.config.anchor)) ?? undefined,
-        rootNodeConfig: node.config,
-        rootNodeGeometry: node.config,
-        rootNodePadding: normalizePhiPaddingWidgetConfig(node.config),
-        rootNodeBackground: readObjectConfig(node.config.rootNodeBackground),
-        rootNodeBorder: readObjectConfig(node.config.rootNodeBorder),
-        rootNodeShadow: readPhiShadow(node.config.rootNodeShadow) ?? null,
-        childLayouts: node.childLayouts,
-        childWidgets: node.childWidgets,
-    };
-}
-function resolveRootNodeChromeStyle({ background, borderSource, border, shadow, style, }) {
-    /*
-     * The Canvas draws the same chrome the page will, so it has to ask the same question: where does the
-     * outline come from. `theme` draws a line where nothing is stored, which is why the shortcut below
-     * can no longer take "nothing stored" for "nothing to draw".
-     */
-    const resolvedBorderSource = resolvePhiCmsBorderSource(borderSource, border);
-    if (background == null && border == null && shadow == null && resolvedBorderSource !== "theme") {
-        return style;
-    }
-    const backgroundStyle = background == null ? {} : resolvePhiBackgroundWidgetStyle(background);
-    return {
-        ...style,
-        ...backgroundStyle,
-        ...resolvePhiSourcedBorderStyle(resolvedBorderSource, border),
-        boxShadow: combinePhiBoxShadows(backgroundStyle.boxShadow, resolvePhiShadow(shadow)),
+        ...readPhiBuilderRootNodeDraft(node),
+        editSlotAnchor: normalizePhiBuilderRootNodeDraft(readPhiBuilderRootNodeDraft(node)).rootNodeAnchor ?? undefined,
     };
 }
 function resolvePhiAuthoringLayoutRenderer(plugin, definition, renderMode) {
@@ -644,42 +603,9 @@ function resolvePhiRootNodeRenderedBody(rootNode, renderMode, plugin, definition
         return null;
     }
     const resolvedViewportFlags = intersectPhiInheritedViewportFlags(inheritedViewportFlags, normalizedRootNode.rootNodeConfig?.viewportFlags);
-    const syntheticRootNode = {
-        id: normalizedRootNode.id,
-        siteId: -1,
-        widgetType: normalizedRootNode.typeKey,
-        slotIndex: 0,
-        sortOrder: 0,
-        status: 0,
-        flags: 0,
-        visibilityMask: 0,
-        label: normalizedRootNode.title ?? "Root",
-        config: buildPhiBuilderRootNodeRenderConfig(normalizedRootNode, renderMode),
-        parentLayoutNodeId: null,
-        childLayouts: normalizedRootNode.childLayouts ?? [],
-        childWidgets: normalizedRootNode.childWidgets ?? [],
-    };
+    const syntheticRootNode = buildPhiBuilderRootLayoutRenderNode({ ...normalizedRootNode, id: normalizedRootNode.id }, buildPhiBuilderRootNodeRenderConfig(normalizedRootNode, renderMode));
     const previewTree = demandControllerContext?.tree ?? {
-        page: {
-            id: -1,
-            siteId: -1,
-            areaMask: 0,
-            path: "",
-            pageType: 0,
-            status: 0,
-            flags: 0,
-            visibilityMask: 0,
-            accessPolicy: PHI_VIEWER_ACCESS_ANYONE,
-            titleMsgId: null,
-            descriptionMsgId: null,
-            heroRootLayoutNodeId: null,
-            headerBottomRootLayoutNodeId: null,
-            siderRightRootLayoutNodeId: null,
-            footerTopRootLayoutNodeId: null,
-            drawerRightRootLayoutNodeId: null,
-            contentRootLayoutNodeId: null,
-            layoutConfig: {},
-        },
+        page: buildPhiBuilderPreviewPageNode(null),
         regions: [],
         overlays: [],
         layoutNodes: [],
@@ -757,9 +683,9 @@ function resolvePhiRootNodeRenderedBody(rootNode, renderMode, plugin, definition
                         typeof onOpenInspectorWidgetNode === "function" ||
                         typeof onUpdateWidgetNodeConfig === "function");
                 if (!shouldWrapWidgetNode) {
-                    return (_jsx(PhiWidgetEffectsPreviewFrame, { kind: "widget", slotSizePolicy: plugin.slotSizePolicy, blockId: widget.id, regionKey: regionKey, config: editorConfig, title: widgetTitle, scaffoldLabel: widgetScaffoldLabel, editorInteraction: plugin.editorInteraction, children: renderedNode }, `widget-${widget.id}`));
+                    return (_jsx(PhiWidgetEffectsPreviewFrame, { kind: "widget", slotSizePolicy: plugin.slotSizePolicy, surfacePolicy: definition.surface, blockId: widget.id, regionKey: regionKey, config: editorConfig, title: widgetTitle, scaffoldLabel: widgetScaffoldLabel, editorInteraction: plugin.editorInteraction, children: renderedNode }, `widget-${widget.id}`));
                 }
-                return (_jsx(PhiWidgetEffectsPreviewFrame, { kind: "widget", slotSizePolicy: plugin.slotSizePolicy, blockId: widget.id, regionKey: regionKey, config: editorConfig, title: widgetTitle, scaffoldLabel: widgetScaffoldLabel, editorInteraction: plugin.editorInteraction, onSelect: onOpenInspectorWidgetNode
+                return (_jsx(PhiWidgetEffectsPreviewFrame, { kind: "widget", slotSizePolicy: plugin.slotSizePolicy, surfacePolicy: definition.surface, blockId: widget.id, regionKey: regionKey, config: editorConfig, title: widgetTitle, scaffoldLabel: widgetScaffoldLabel, editorInteraction: plugin.editorInteraction, onSelect: onOpenInspectorWidgetNode
                         ? () => onOpenInspectorWidgetNode({ ...widget })
                         : undefined, dropTarget: resolveWidgetDropTarget?.(widget) ?? null, tools: onDeleteWidgetNode ? (_jsxs(_Fragment, { children: [resolveWidgetDragData ? (_jsx(PhiLayoutDragButtonOverlay, { ariaLabel: `Move ${widgetTitle}`, nodeKind: "widget", dragData: resolveWidgetDragData(widget) })) : null, _jsx(PhiLayoutDeleteButtonOverlay, { onOpenInspector: onOpenInspectorWidgetNode
                                     ? () => onOpenInspectorWidgetNode({ ...widget })
@@ -786,7 +712,7 @@ function resolvePhiRootNodeRenderedBody(rootNode, renderMode, plugin, definition
         .sort((left, right) => left.sortOrder - right.sortOrder || comparePhiCmsInstanceIds(left.id, right.id))
         .map((entry) => ({
         slotIndex: entry.slotIndex,
-        rendered: "contentId" in entry
+        rendered: "contentVersionId" in entry
             ? renderWidgetNode(entry)
             : renderChildLayoutNode
                 ? renderChildLayoutNode(entry)
@@ -859,21 +785,7 @@ export function renderPhiRootNodeScaffold(rootNode, onOpenInsert, onOpenInspecto
     const rootNodeEffects = mergeRenderableBlockDefaults(normalizedRootNode.rootNodeConfig).effects;
     const rootNodeRenderableConfig = (normalizedRootNode.rootNodeConfig ?? {});
     const resolvedViewportFlags = intersectPhiInheritedViewportFlags(options?.inheritedViewportFlags, rootNodeRenderableConfig.viewportFlags);
-    const syntheticRootNodeForUpdates = {
-        id: normalizedRootNode.id,
-        siteId: -1,
-        widgetType: normalizedRootNode.typeKey,
-        slotIndex: 0,
-        sortOrder: 0,
-        status: 0,
-        flags: 0,
-        visibilityMask: 0,
-        label: normalizedRootNode.title ?? "Root",
-        config: normalizedRootNode.rootNodeConfig ?? {},
-        parentLayoutNodeId: null,
-        childLayouts: normalizedRootNode.childLayouts ?? [],
-        childWidgets: normalizedRootNode.childWidgets ?? [],
-    };
+    const syntheticRootNodeForUpdates = buildPhiBuilderRootLayoutRenderNode({ ...normalizedRootNode, id: normalizedRootNode.id }, normalizedRootNode.rootNodeConfig ?? {});
     const wrapRootScaffoldChild = (child) => (_jsx(PhiLayoutEffectsPreviewFrame, { kind: "layout", blockId: normalizedRootNode.id ?? null, config: rootNodeRenderableConfig, explicitInlineSize: rootGeometry.explicitInline, explicitBlockSize: rootGeometry.explicitBlock, children: child }));
     const renderRootScaffoldToolbar = () => {
         if (typeof onDeleteRootNode !== "function") {
@@ -912,7 +824,7 @@ export function renderPhiRootNodeScaffold(rootNode, onOpenInsert, onOpenInspecto
     const renderChildLayoutNode = (node) => {
         const nodeKind = "layout";
         const rootProps = resolveLayoutNodeRootProps(node);
-        const rootPropsGeometry = resolvePhiRenderableBlockGeometry(rootProps.rootNodeGeometry);
+        const rootPropsGeometry = resolvePhiRenderableBlockGeometry(normalizePhiBuilderRootNodeDraft(rootProps).rootNodeGeometry);
         return (_jsx(PhiAuthoringLayoutEffectsPreviewFrame, { type: node.widgetType, kind: nodeKind, blockId: node.id, config: node.config, explicitInlineSize: rootPropsGeometry.explicitInline, explicitBlockSize: rootPropsGeometry.explicitBlock, children: renderPhiRootNodeScaffold({ ...rootProps, regionKey }, (options) => onOpenInsert?.({
                 ...options,
                 slotIndex: options?.slotIndex ?? 0,
@@ -995,20 +907,13 @@ export function renderPhiRootNodeScaffold(rootNode, onOpenInsert, onOpenInspecto
                 paddingRight: normalizedRootNode.rootNodePadding?.paddingRight ?? undefined,
                 paddingBottom: normalizedRootNode.rootNodePadding?.paddingBottom ?? undefined,
                 paddingLeft: normalizedRootNode.rootNodePadding?.paddingLeft ?? undefined,
-                style: resolveRootNodeChromeStyle({
-                    background: normalizedRootNode.rootNodeBackground,
-                    borderSource: readPhiCmsBorderSource(normalizedRootNode.rootNodeConfig?.borderSource),
-                    border: normalizedRootNode.rootNodeBorder,
-                    shadow: normalizedRootNode.rootNodeShadow,
-                    style: rendered.props.style,
-                }),
-                rootNodeBackground: normalizedRootNode.rootNodeBackground ?? null,
-                rootNodeBorder: normalizedRootNode.rootNodeBorder ?? null,
+                // The Canvas draws the Surface the page will, through the Layout's own chrome.
+                surface: normalizedRootNode.rootNodeSurface ?? undefined,
             }), definition.title);
         } }));
     return (_jsx(PhiAuthoringToolsLabelsProvider, { labels: options?.authoringToolsLabels, children: _jsx(PhiBuilderPageReferencesProvider, { children: scaffold }) }));
 }
-export function renderPhiRootNodePreview(rootNode) {
+function renderPhiRootNodePreview(rootNode) {
     const normalizedRootNode = normalizePhiBuilderRootNodeDraft(rootNode);
     const rootGeometry = resolvePhiRenderableBlockGeometry(normalizedRootNode.rootNodeGeometry);
     return (_jsx(PhiSlotChildFrame, { className: "phi-builder-root-scaffold__slot", kind: resolveRootNodeSlotChildKind(normalizedRootNode.kind), blockId: normalizedRootNode.id ?? null, explicitInlineSize: rootGeometry.explicitInline, explicitBlockSize: rootGeometry.explicitBlock, config: normalizedRootNode.rootNodeConfig, children: _jsx(PhiAuthoringLayoutLoader, { type: normalizedRootNode.typeKey, kind: "layout", blockId: normalizedRootNode.id ?? null, children: (plugin, definition, widgetDefinitionsByType) => {
@@ -1026,15 +931,7 @@ export function renderPhiRootNodePreview(rootNode) {
                         paddingRight: normalizedRootNode.rootNodePadding?.paddingRight ?? undefined,
                         paddingBottom: normalizedRootNode.rootNodePadding?.paddingBottom ?? undefined,
                         paddingLeft: normalizedRootNode.rootNodePadding?.paddingLeft ?? undefined,
-                        style: resolveRootNodeChromeStyle({
-                            background: normalizedRootNode.rootNodeBackground,
-                            borderSource: readPhiCmsBorderSource(normalizedRootNode.rootNodeConfig?.borderSource),
-                            border: normalizedRootNode.rootNodeBorder,
-                            shadow: normalizedRootNode.rootNodeShadow,
-                            style: rendered.props.style,
-                        }),
-                        rootNodeBackground: normalizedRootNode.rootNodeBackground ?? null,
-                        rootNodeBorder: normalizedRootNode.rootNodeBorder ?? null,
+                        surface: normalizedRootNode.rootNodeSurface ?? undefined,
                     })
                     : rendered;
             } }) }));

package/plugins/runtime-modules/builder/root-node-normalization.d.ts

@@ -1,12 +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 { PhiCmsGeometryWidgetConfig } from "../../../components/widgets/config/geometry";
+import type { PhiCmsContentWidgetNode, PhiCmsLayoutRenderNode, PhiCmsPageNode } from "../../../types/cms";
+import type { PhiCmsPaddingWidgetConfig } from "../../../types/cms-config";
+import { type PhiCmsGeometryWidgetConfig } from "../../../components/widgets/config/geometry";
 import { type PhiAnchorWidgetPlacement } from "../../../components/controls/phi-anchor-control-contract";
 import type { PhiRenderableBlockRenderMode } from "../../../types";
 import type { PhiCmsInstanceId } from "../../../types/cms-instance-id";
-import type { PhiBuilderPreviewRegionDraft, PhiBuilderRootNodeKind } from "./preview-transport";
-import { type PhiShadow } from "../../../types/layout-style";
+import type { PhiBuilderRootNodeKind } from "./preview-transport";
+import { type PhiSurface } from "../../../types/surface";
+/**
+ * A Layout node as the Canvas renders it at the top of a scaffold: the Region's root Layout and every
+ * Layout nested in it alike.
+ *
+ * It carries what the node is -- its id, type, label, config and children -- and nothing else. Its
+ * anchor, inset, Surface and geometry live in `rootNodeConfig`, as they do in every node, and are read
+ * from there (`normalizePhiBuilderRootNodeDraft`); nothing keeps a second copy that could disagree.
+ */
 export type PhiBuilderRootNodeDraft = {
     id?: PhiCmsInstanceId | null;
     typeKey: string;
@@ -14,26 +21,27 @@ export type PhiBuilderRootNodeDraft = {
     title?: string | null;
     packageName?: 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;
     childLayouts?: PhiCmsLayoutRenderNode[];
     childWidgets?: PhiCmsContentWidgetNode[];
 };
-/**
- * What a region draft says about its root node, as a root node draft reads it: every field but the ones
- * that name the node (`id`, `typeKey`, `kind`, `packageName`), which each caller answers for itself.
- */
-export declare function readPhiBuilderRootNodeDraftFields(draft: Pick<PhiBuilderPreviewRegionDraft, "rootNodeTitle" | "rootNodeConfig" | "rootNodeGeometry" | "rootNodeAnchor" | "rootNodePadding" | "rootNodeBackground" | "rootNodeBorder" | "rootNodeShadow" | "rootNodeChildLayouts" | "rootNodeChildWidgets">): Omit<PhiBuilderRootNodeDraft, "id" | "typeKey" | "kind" | "packageName">;
-export type PhiBuilderRootNodeDefaults = {
+/** The scaffold's input for one Layout node: the node itself, nothing derived. */
+export declare function readPhiBuilderRootNodeDraft(node: PhiCmsLayoutRenderNode): PhiBuilderRootNodeDraft;
+/** What the scaffold reads off a node's config, read once and never stored. */
+export type PhiBuilderRootNodeView = PhiBuilderRootNodeDraft & {
+    rootNodeGeometry: PhiCmsGeometryWidgetConfig | null;
+    rootNodeAnchor: PhiAnchorWidgetPlacement | null;
     rootNodePadding: PhiCmsPaddingWidgetConfig | null;
-    rootNodeBackground: PhiCmsBackgroundWidgetConfig | null;
-    rootNodeBorder: PhiCmsBorderWidgetConfig | null;
+    rootNodeSurface: PhiSurface | null;
 };
-export declare function resolvePhiBuilderRootNodeDefaults(resolvedConfig?: Record<string, unknown> | null): PhiBuilderRootNodeDefaults;
-export declare function resolvePhiBuilderRootNodeDefaultsFromConfig(resolvedConfig: Record<string, unknown>): PhiBuilderRootNodeDefaults;
-export declare function normalizePhiBuilderRootNodeDraft(rootNode: PhiBuilderRootNodeDraft): PhiBuilderRootNodeDraft;
+export declare function normalizePhiBuilderRootNodeDraft(rootNode: PhiBuilderRootNodeDraft): PhiBuilderRootNodeView;
+/** The node's config as its Layout plugin parses it: the stored config, in the render mode asked for. */
 export declare function buildPhiBuilderRootNodeRenderConfig(rootNode: PhiBuilderRootNodeDraft, renderMode: PhiRenderableBlockRenderMode): Record<string, unknown>;
+/**
+ * The root Layout as a render node: the Canvas, its update pass and the renderable tree each built this
+ * from the normalized draft, and only the config they put on it differed.
+ */
+export declare function buildPhiBuilderRootLayoutRenderNode(rootNode: Pick<PhiBuilderRootNodeDraft, "typeKey" | "title" | "childLayouts" | "childWidgets"> & {
+    id: PhiCmsInstanceId;
+}, config: Record<string, unknown>): PhiCmsLayoutRenderNode;
+/** The Page a Builder preview stands in: no Site, no path, every Region root unset but the content's. */
+export declare function buildPhiBuilderPreviewPageNode(contentRootLayoutNodeId: PhiCmsInstanceId | null): PhiCmsPageNode;