@phis/ui 0.2.1 → 0.4.0

package/plugins/runtime-modules/builder/widgets/structure-region/built-in.js

@@ -1,143 +1,85 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
-import { theme as antdTheme } from "antd";
-import { PlusOutlined } from "@ant-design/icons";
+import { usePhiConfig } from "../../../../../components/root/phi-config-provider";
+import { hasPhiConfigFlag } from "../../../../../helpers/flags";
+import { PhiCmsFlags } from "../../../../../constants/phi-cms";
 import { buildPhiCmsLayoutNamespacedTypeKey, splitPhiCmsLayoutNamespacedTypeKey, } from "../../../../../constants/cms-layout-types";
 import { buildPhiCmsLayoutNode, buildPhiCmsWidgetNode } from "../../../../../helpers/cms-node-factories";
 import { PHI_CMS_MAX_LAYOUT_SUBLAYOUT_DEPTH, resolvePhiCmsRenderLayoutNodeDepth, } from "../../../../../helpers/cms-layout-depth";
 import { resolvePhiBorderWidgetStyle } from "../../../../../helpers/border-widget-style";
 import { phiBackgroundWidgetConfigPaintsGround, resolvePhiBackgroundWidgetStyle, } from "../../../../../components/widgets/config/background";
 import { combinePhiBoxShadows, resolvePhiShadow } from "../../../../../helpers/layout-style";
-import { normalizePhiGeometryWidgetConfig } from "../../../../../components/widgets/config/geometry";
 import { readPhiCmsInstanceId } from "../../../../../types/cms-instance-id";
 import { normalizePhiPaddingWidgetConfig } from "../../../../../types/cms-config";
-import { readPhiShadow } from "../../../../../types/layout-style";
 import { readPhiRenderableBlockLength, resolvePhiRenderableBlockGeometry, } from "../../../../../types/renderable-block-geometry";
 import { extractPhiStructureNode as extractStructureNode, swapPhiStructureWidgetsAcrossTrees, swapPhiStructureWidgetsInTree, } from "../../../../../helpers/structure-widget-swap";
 import { createPhiSignalAddress, } from "../../../../../types/signals";
 import { resolvePhiShellRegionTypography, resolvePhiShellRegionZIndex } from "../../../../../helpers/shell-region-style";
 import { phiCmsRegionAcceptsWidget, resolvePhiCmsRegionType } from "../../../../../helpers/cms-region-keys";
 import { usePhiRuntimeModuleState } from "../../../../../components/runtime/runtime-module-context";
-import { renderPhiRootNodeScaffold } from "../../../../../plugins/runtime-modules/builder/render-root-node-scaffold";
+import { PHI_VISUAL_ANCHOR_PART_ATTRIBUTE } from "../../../../../types/visual-anchors";
+import { renderPhiRootNodeScaffold, resolveLayoutNodeRootProps, } from "../../../../../plugins/runtime-modules/builder/render-root-node-scaffold";
 import { PhiBuilderInsertPickerControl } from "../../../../../components/controls/phi-builder-insert-picker-control";
-import { buildPhiBuilderRootNodeRenderConfig, normalizePhiBuilderRootNodeDraft, readPhiBuilderRootNodeDraftFields, resolvePhiBuilderRootNodeDefaults, } from "../../../../../plugins/runtime-modules/builder/root-node-normalization";
+import { readPhiBuilderRegionRootChildLayouts, readPhiBuilderRegionRootChildWidgets, withPhiBuilderRegionRootChildren, } from "../../../../../plugins/runtime-modules/builder/region-root-node";
 import { compactPhiCmsSequentialChildren, compactsPhiCmsSequentialSlots } from "../../../../../plugins/runtime-modules/builder/sequential-slot-helpers";
 import { findPhiBuilderLayoutNodeById } from "../../../../../plugins/runtime-modules/builder/node-finders";
 import { getDefaultRegionDraft, } from "../../../../../plugins/runtime-modules/builder/developer-region-drafts";
 import { patchPhiDeveloperBuilderState, selectPhiDeveloperBuilderNode, getPhiDeveloperRegionDraftsSnapshot, setPhiDeveloperRegionDraft, setPhiDeveloperRegionDraftAndPruneSignalRoutes, setPhiDeveloperRegionDraftsWithHistory, usePhiDeveloperBuilderStateValue, usePhiDeveloperRegionDraft, } from "../../../../../plugins/runtime-modules/builder/developer-workspace-store";
 import { allocatePhiBuilderCmsInstanceId } from "../../../../../plugins/runtime-modules/builder/cms-instance-allocator";
 import { getPhiBuilderRegionDraftKey, isPhiBuilderPageScopedRegion, } from "../../../../../plugins/runtime-modules/builder/region-keys";
-import { isPhiAnchorWidgetPlacement } from "../../../../../components/controls/phi-anchor-control-contract";
-import { resolvePhiWidgetSignalSubcontrolAddresses } from "../../../../../components/widgets/signals/signal-endpoints";
 import { createPhiBuilderRegionHistoryContext } from "../../../../../plugins/runtime-modules/builder/history";
+import { findPhiBuilderTreeNode, resolvePhiBuilderNodeHistorySubject, writePhiBuilderNode, } from "../../node-config-write";
+import { compactPhiStructureSequentialLayouts, insertPhiStructureNode, removePhiStructureNode, } from "./tree-operations";
 import { usePhiStructureDroppable, } from "../../../../../plugins/runtime-modules/builder/structure-dnd";
 import { usePhiBuilderModuleMetas } from "../../../../../plugins/runtime-modules/builder/plugin-meta-store";
 import { resolvePhiPaddingStyle } from "../../../../../components/layouts/phi-layout-contract";
 import { usePhiBuilderAuthoringCanvas } from "../../authoring-canvas";
 import { PhiFlexControl } from "../../../../../components/controls/phi-flex-control";
 import { PhiTypographyControl } from "../../../../../components/controls/phi-typography-control";
+import { PhiIcon } from "../../../../../components/shell/phi-icon";
+import { PhiSurfaceTone } from "../../../../../components/surface/phi-surface-tone";
+import { resolvePhiSurfaceToneClassName } from "../../../../../types/surface";
+/** The Region's root Layout placed into another tree, at the slot it is moved to. */
 function buildStructureRootLayoutNode(draft, parentLayoutNodeId, slotIndex) {
-    if (draft.rootNodeId == null ||
-        !draft.rootNodeTypeKey ||
-        draft.rootNodeKind !== "layout") {
+    if (!draft.rootNode) {
         return null;
     }
-    const normalized = normalizePhiBuilderRootNodeDraft({
-        id: draft.rootNodeId,
-        typeKey: draft.rootNodeTypeKey,
-        kind: draft.rootNodeKind,
-        packageName: draft.rootNodePackageName ?? null,
-        ...readPhiBuilderRootNodeDraftFields(draft),
-    });
-    const config = buildPhiBuilderRootNodeRenderConfig(normalized, "editor");
-    delete config.renderMode;
     return {
-        id: draft.rootNodeId,
-        siteId: -1,
+        ...draft.rootNode,
         parentLayoutNodeId,
-        widgetType: draft.rootNodeTypeKey,
         slotIndex,
         sortOrder: 0,
-        status: 0,
-        flags: 0,
-        visibilityMask: 0,
-        label: draft.rootNodeTitle ?? "Root",
-        config: {
-            ...config,
-            builderKind: draft.rootNodeKind,
-        },
-        childLayouts: draft.rootNodeChildLayouts ?? [],
-        childWidgets: draft.rootNodeChildWidgets ?? [],
+        label: draft.rootNode.label ?? "Root",
+        childLayouts: draft.rootNode.childLayouts ?? [],
+        childWidgets: draft.rootNode.childWidgets ?? [],
     };
 }
 function clearStructureRootNode(draft) {
-    return {
-        ...draft,
-        rootNodeId: null,
-        rootNodeTypeKey: null,
-        rootNodeKind: null,
-        rootNodeTitle: null,
-        rootNodePackageName: null,
-        rootNodeConfig: null,
-        rootNodeGeometry: null,
-        rootNodeAnchor: null,
-        rootNodePadding: null,
-        rootNodeBackground: null,
-        rootNodeBorder: null,
-        rootNodeShadow: null,
-        rootNodeChildLayouts: [],
-        rootNodeChildWidgets: [],
-    };
+    return { ...draft, rootNode: null };
 }
 function copyStructureRootNode(targetDraft, sourceDraft) {
-    return {
-        ...targetDraft,
-        rootNodeId: sourceDraft.rootNodeId ?? null,
-        rootNodeTypeKey: sourceDraft.rootNodeTypeKey ?? null,
-        rootNodeKind: sourceDraft.rootNodeKind ?? null,
-        rootNodeTitle: sourceDraft.rootNodeTitle ?? null,
-        rootNodePackageName: sourceDraft.rootNodePackageName ?? null,
-        rootNodeConfig: sourceDraft.rootNodeConfig ?? null,
-        rootNodeGeometry: sourceDraft.rootNodeGeometry ?? null,
-        rootNodeAnchor: sourceDraft.rootNodeAnchor ?? null,
-        rootNodePadding: sourceDraft.rootNodePadding ?? null,
-        rootNodeBackground: sourceDraft.rootNodeBackground ?? null,
-        rootNodeBorder: sourceDraft.rootNodeBorder ?? null,
-        rootNodeShadow: sourceDraft.rootNodeShadow ?? null,
-        rootNodeChildLayouts: sourceDraft.rootNodeChildLayouts ?? [],
-        rootNodeChildWidgets: sourceDraft.rootNodeChildWidgets ?? [],
-    };
+    return { ...targetDraft, rootNode: sourceDraft.rootNode ?? null };
 }
+/** A Layout made the Region's root: the same node, now standing at the top of the Region. */
 function promoteStructureLayoutToRoot(targetDraft, node) {
-    const rootNodeKind = "layout";
-    const rootNodeDefaults = resolvePhiBuilderRootNodeDefaults(node.config);
-    const { pluginKey } = splitPhiCmsLayoutNamespacedTypeKey(node.widgetType);
     return {
         ...targetDraft,
-        rootNodeId: node.id,
-        rootNodeTypeKey: node.widgetType,
-        rootNodeKind,
-        rootNodeTitle: node.label ?? null,
-        rootNodePackageName: pluginKey,
-        rootNodeConfig: node.config,
-        rootNodeGeometry: normalizePhiGeometryWidgetConfig(node.config),
-        rootNodeAnchor: isPhiAnchorWidgetPlacement(node.config.anchor)
-            ? node.config.anchor
-            : null,
-        rootNodePadding: rootNodeDefaults.rootNodePadding,
-        rootNodeBackground: rootNodeDefaults.rootNodeBackground,
-        rootNodeBorder: rootNodeDefaults.rootNodeBorder,
-        rootNodeShadow: readPhiShadow(node.config.rootNodeShadow) ?? null,
-        rootNodeChildLayouts: node.childLayouts ?? [],
-        rootNodeChildWidgets: node.childWidgets ?? [],
+        rootNode: {
+            ...node,
+            parentLayoutNodeId: null,
+            slotIndex: 0,
+            sortOrder: 0,
+            childLayouts: node.childLayouts ?? [],
+            childWidgets: node.childWidgets ?? [],
+        },
     };
 }
 function resolveStructureLayoutSubtreeDepth(node) {
     return (node.childLayouts ?? []).reduce((maxDepth, child) => Math.max(maxDepth, 1 + resolveStructureLayoutSubtreeDepth(child)), 0);
 }
 function canMoveStructureLayoutToTarget(node, targetParentLayoutNodeId, targetRootNodeId, targetChildLayouts) {
-    if ("contentId" in node) {
+    if ("contentVersionId" in node) {
         return true;
     }
     const targetDepth = targetParentLayoutNodeId === targetRootNodeId
@@ -155,38 +97,6 @@ function buildPhiBuilderContainerMetaMap(pluginMetas) {
         meta,
     ]));
 }
-function compactStructureSequentialLayouts(nodes, layoutMetasByType) {
-    return nodes.map((node) => {
-        const nestedLayouts = compactStructureSequentialLayouts(node.childLayouts ?? [], layoutMetasByType);
-        const definition = layoutMetasByType.get(node.widgetType);
-        if (!compactsPhiCmsSequentialSlots(definition)) {
-            return {
-                ...node,
-                childLayouts: nestedLayouts,
-            };
-        }
-        const compacted = compactPhiCmsSequentialChildren({
-            childLayouts: nestedLayouts,
-            childWidgets: node.childWidgets ?? [],
-        });
-        return {
-            ...node,
-            childLayouts: compacted.childLayouts,
-            childWidgets: compacted.childWidgets,
-        };
-    });
-}
-function resolvePickItemPackageName(item) {
-    const raw = item.packageName ?? item.origin ?? "";
-    if (!raw) {
-        return null;
-    }
-    const parts = raw.split("/");
-    if (raw.startsWith("@") && parts.length >= 2) {
-        return `${parts[0]}/${parts[1]}`;
-    }
-    return parts[0] ?? raw;
-}
 function resolveSlotBodyMinHeight(geometry, fallbackMinHeight, fillAvailableHeight = false) {
     return (geometry.block.min?.css ??
         geometry.block.size?.css ??
@@ -234,7 +144,6 @@ function buildInsertedWidgetNode(item, id, parentLayoutNodeId, slotIndex, sortOr
         visibilityMask: 0,
         label: item.title,
         config: resolvedDefaultConfig,
-        contentId: null,
     });
 }
 function resolveInsertedItemDefaultConfig(item) {
@@ -282,6 +191,38 @@ function appendWidgetChildById(nodes, targetNodeId, nextChild, compactSequential
         };
     });
 }
+/**
+ * A moved node put into its target: under the root or under a Layout, as a Widget or a Layout, with the
+ * sequential compaction the target asks for. The two drop paths -- within a Region and across Regions --
+ * carried this four-way block twice.
+ */
+function insertStructureNodeIntoTarget({ childLayouts, childWidgets, movedNode, parentLayoutNodeId, targetsRoot, compact, }) {
+    let nextLayouts = childLayouts;
+    let nextWidgets = childWidgets;
+    if (targetsRoot) {
+        if (compact) {
+            const inserted = insertPhiCmsSequentialChild(nextLayouts, nextWidgets, movedNode);
+            nextLayouts = inserted.childLayouts;
+            nextWidgets = inserted.childWidgets;
+        }
+        else if ("contentVersionId" in movedNode) {
+            nextWidgets = [...nextWidgets, movedNode];
+        }
+        else {
+            nextLayouts = [...nextLayouts, movedNode];
+        }
+    }
+    else if ("contentVersionId" in movedNode) {
+        nextLayouts = appendWidgetChildById(nextLayouts, parentLayoutNodeId, movedNode, compact);
+    }
+    else {
+        nextLayouts = appendLayoutChildById(nextLayouts, parentLayoutNodeId, movedNode, compact);
+    }
+    if (targetsRoot && compact) {
+        return compactPhiCmsSequentialChildren({ childLayouts: nextLayouts, childWidgets: nextWidgets });
+    }
+    return { childLayouts: nextLayouts, childWidgets: nextWidgets };
+}
 function insertPhiCmsSequentialChild(childLayouts, childWidgets, child) {
     const compacted = compactPhiCmsSequentialChildren({
         childLayouts,
@@ -302,7 +243,7 @@ function insertPhiCmsSequentialChild(childLayouts, childWidgets, child) {
         slotIndex: insertionIndex,
         sortOrder: Math.max(0, child.sortOrder),
     };
-    return "contentId" in insertedChild
+    return "contentVersionId" in insertedChild
         ? {
             childLayouts: shiftedLayouts,
             childWidgets: [...shiftedWidgets, insertedChild],
@@ -312,24 +253,6 @@ function insertPhiCmsSequentialChild(childLayouts, childWidgets, child) {
             childWidgets: shiftedWidgets,
         };
 }
-function removeLayoutChildById(nodes, targetNodeId) {
-    return nodes
-        .filter((node) => node.id !== targetNodeId)
-        .map((node) => ({
-        ...node,
-        childLayouts: (node.childLayouts ?? []).length > 0 ? removeLayoutChildById(node.childLayouts, targetNodeId) : [],
-    }));
-}
-function removeWidgetChildById(nodes, targetNodeId) {
-    return nodes.map((node) => ({
-        ...node,
-        childLayouts: (node.childLayouts ?? []).length > 0 ? removeWidgetChildById(node.childLayouts, targetNodeId) : [],
-        childWidgets: (node.childWidgets ?? []).filter((child) => child.id !== targetNodeId),
-    }));
-}
-function removeContentWidgetById(nodes, targetNodeId) {
-    return nodes.filter((child) => child.id !== targetNodeId);
-}
 function resolveLayoutNodeSignalAddress(node) {
     return createPhiSignalAddress("cms", node.id);
 }
@@ -342,18 +265,6 @@ function collectLayoutNodeSignalAddresses(node, addresses) {
         collectLayoutNodeSignalAddresses(childLayout, addresses);
     }
 }
-function findLayoutNodeById(nodes, targetNodeId) {
-    for (const node of nodes) {
-        if (node.id === targetNodeId) {
-            return node;
-        }
-        const child = findLayoutNodeById(node.childLayouts ?? [], targetNodeId);
-        if (child) {
-            return child;
-        }
-    }
-    return null;
-}
 function collectDeletedNodeSignalAddresses({ targetNodeId, targetNodeKind, rootNodeId, rootNodeKind, childLayouts, childWidgets, }) {
     const addresses = [];
     if (targetNodeId === rootNodeId) {
@@ -371,7 +282,7 @@ function collectDeletedNodeSignalAddresses({ targetNodeId, targetNodeKind, rootN
     if (targetNodeKind === "widget") {
         return [createPhiSignalAddress("cms", targetNodeId)];
     }
-    const targetLayout = findLayoutNodeById(childLayouts, targetNodeId);
+    const targetLayout = findPhiBuilderLayoutNodeById(childLayouts, targetNodeId);
     if (targetLayout) {
         collectLayoutNodeSignalAddresses(targetLayout, addresses);
     }
@@ -380,41 +291,8 @@ function collectDeletedNodeSignalAddresses({ targetNodeId, targetNodeKind, rootN
     }
     return addresses;
 }
-function updateLayoutChildConfigById(nodes, targetNodeId, configPatch) {
-    return nodes.map((node) => {
-        if (node.id === targetNodeId) {
-            return {
-                ...node,
-                config: {
-                    ...(node.config ?? {}),
-                    ...configPatch,
-                },
-            };
-        }
-        if ((node.childLayouts?.length ?? 0) === 0) {
-            return node;
-        }
-        return {
-            ...node,
-            childLayouts: updateLayoutChildConfigById(node.childLayouts, targetNodeId, configPatch),
-        };
-    });
-}
-function updateWidgetChildConfigById(nodes, targetNodeId, nextConfig) {
-    return nodes.map((node) => {
-        const childWidgets = (node.childWidgets ?? []).map((widget) => widget.id === targetNodeId
-            ? { ...widget, config: nextConfig }
-            : widget);
-        const childLayouts = (node.childLayouts?.length ?? 0) > 0
-            ? updateWidgetChildConfigById(node.childLayouts, targetNodeId, nextConfig)
-            : node.childLayouts ?? [];
-        const changed = childWidgets.some((widget, index) => widget !== node.childWidgets?.[index]) ||
-            childLayouts.some((layout, index) => layout !== node.childLayouts?.[index]);
-        return changed ? { ...node, childWidgets, childLayouts } : node;
-    });
-}
 export function PhiStructureRegionScaffold({ config, serverPreview, structureDraftsByArea, pageDraftsByScope, effectsLabels, authoringToolsLabels, pickerLabels, containerStyle, containerClassName, }) {
-    const { token } = antdTheme.useToken();
+    const { token } = usePhiConfig();
     const activeModules = usePhiRuntimeModuleState();
     const authoringCanvas = usePhiBuilderAuthoringCanvas();
     const builderState = {
@@ -425,7 +303,6 @@ export function PhiStructureRegionScaffold({ config, serverPreview, structureDra
         pickerWidgetCategoryFilters: usePhiDeveloperBuilderStateValue("public", (state) => state.pickerWidgetCategoryFilters),
         selectedLayoutAnchor: usePhiDeveloperBuilderStateValue("public", (state) => state.selectedRootRegionKey === config.regionKey ? state.selectedLayoutAnchor : null),
         regionSelected: usePhiDeveloperBuilderStateValue("public", (state) => state.nodeKind === "region" && state.selectedRegionKey === config.regionKey),
-        regionDrafts: usePhiDeveloperBuilderStateValue("public", (state) => state.regionDrafts),
     };
     const builderModuleMetas = usePhiBuilderModuleMetas(builderState.area);
     const layoutMetasByType = useMemo(() => buildPhiBuilderContainerMetaMap(builderModuleMetas.plugins), [builderModuleMetas.plugins]);
@@ -464,22 +341,20 @@ export function PhiStructureRegionScaffold({ config, serverPreview, structureDra
         fallbackPageDraft ??
         getDefaultRegionDraft(config.regionKey);
     const draftGeometry = resolvePhiRenderableBlockGeometry(effectiveDraft);
-    const rootNodeDefinition = effectiveDraft?.rootNodeKind == null || !effectiveDraft.rootNodeTypeKey
-        ? null
-        : layoutMetasByType.get(effectiveDraft.rootNodeTypeKey) ?? null;
+    const rootNodeDefinition = effectiveDraft?.rootNode
+        ? layoutMetasByType.get(effectiveDraft.rootNode.widgetType) ?? null
+        : null;
     const offsetTop = effectiveDraft?.offsetTop ?? 0;
     const shouldFillAvailableHeight = isFullHeightRegion &&
-        effectiveDraft?.regionConfig?.fullHeight !== false &&
+        hasPhiConfigFlag(effectiveDraft?.regionConfig, PhiCmsFlags.FullHeight) &&
         draftGeometry.block.size == null &&
         draftGeometry.block.min == null &&
         draftGeometry.block.max == null;
     const shouldStretchAvailableHeight = shouldFillAvailableHeight || shouldStretchContentRegion;
     const hasExplicitSidebarWidth = isFullHeightRegion && draftGeometry.explicitInline;
-    const slotBackgroundStyle = effectiveDraft?.background
-        ? resolvePhiBackgroundWidgetStyle({
-            ...effectiveDraft.background,
-            effect: effectiveDraft.effect ?? null,
-        })
+    const regionToneClassName = resolvePhiSurfaceToneClassName(effectiveDraft?.surface?.tone);
+    const slotBackgroundStyle = effectiveDraft?.surface?.background
+        ? resolvePhiBackgroundWidgetStyle(effectiveDraft.surface.background)
         : {};
     /*
      * Whether the author gave this Region a ground. The Builder writes a Background config onto every
@@ -487,8 +362,8 @@ export function PhiStructureRegionScaffold({ config, serverPreview, structureDra
      * transparent in the live Shell, and the Canvas keeps that legible: its slot paints a half-transparent
      * container tint, so the Theme Root Background stays visible through it.
      */
-    const hasAuthoredGround = phiBackgroundWidgetConfigPaintsGround(effectiveDraft?.background);
-    const slotBorderStyle = effectiveDraft?.border ? resolvePhiBorderWidgetStyle(effectiveDraft.border) : {};
+    const hasAuthoredGround = phiBackgroundWidgetConfigPaintsGround(effectiveDraft?.surface?.background ?? null);
+    const slotBorderStyle = effectiveDraft?.surface?.border ? resolvePhiBorderWidgetStyle(effectiveDraft.surface.border) : {};
     const regionConfig = (effectiveDraft?.regionConfig ?? null);
     const regionPaddingStyle = resolvePhiPaddingStyle(normalizePhiPaddingWidgetConfig(effectiveDraft?.regionConfig) ?? {});
     const resolvedRegionZIndex = effectiveDraft?.zIndex ??
@@ -527,26 +402,24 @@ export function PhiStructureRegionScaffold({ config, serverPreview, structureDra
             : draftGeometry.block.max?.css ?? draftHeight;
     const slotBodyMinHeight = resolveSlotBodyMinHeight(draftGeometry, shouldFillAvailableHeight ? 0 : resolvedFallbackMinHeight, slotKind === "structure");
     const slotBodyFallbackHeight = slotBodyMinHeight ?? `${resolvedFallbackMinHeight}px`;
-    const hasRootNode = effectiveDraft?.rootNodeTypeKey != null;
+    const hasRootNode = effectiveDraft?.rootNode != null;
     const shouldUseFallbackBodyHeightForRoot = shouldFillAvailableHeight;
     const resolvedRootBodyHeight = hasRootNode
         ? (slotHeight ??
             (shouldUseFallbackBodyHeightForRoot ? slotBodyFallbackHeight : undefined) ??
             (shouldStretchAvailableHeight ? "100%" : undefined))
         : undefined;
-    const rootNodeId = effectiveDraft?.rootNodeId ?? null;
-    const rootNodeKind = effectiveDraft?.rootNodeKind ?? null;
-    const rootNodeTypeKey = effectiveDraft?.rootNodeTypeKey ?? "";
-    const rootNodeChildLayouts = effectiveDraft?.rootNodeChildLayouts ?? [];
-    const rootNodeChildWidgets = effectiveDraft?.rootNodeChildWidgets ?? [];
-    const resolvedRootNodeAnchor = effectiveDraft?.rootNodeAnchor ?? builderState.selectedLayoutAnchor;
-    const resolveNextSlotSortOrder = (slotIndex) => {
-        const slotChildren = [
-            ...rootNodeChildLayouts.filter((layout) => layout.slotIndex === slotIndex),
-            ...rootNodeChildWidgets.filter((widget) => widget.slotIndex === slotIndex),
-        ];
-        return slotChildren.reduce((maxSortOrder, child) => Math.max(maxSortOrder, child.sortOrder), -1) + 1;
-    };
+    const rootNode = effectiveDraft?.rootNode ?? null;
+    const rootNodeId = rootNode?.id ?? null;
+    const rootNodeKind = rootNode ? "layout" : null;
+    const rootNodeTypeKey = rootNode?.widgetType ?? "";
+    const rootNodeChildLayouts = readPhiBuilderRegionRootChildLayouts(effectiveDraft);
+    const rootNodeChildWidgets = readPhiBuilderRegionRootChildWidgets(effectiveDraft);
+    // The root Layout's anchor is read off its config, as every Layout's is.
+    const rootNodeProps = rootNode ? resolveLayoutNodeRootProps(rootNode) : null;
+    const resolvedRootNodeAnchor = rootNodeProps?.editSlotAnchor ?? builderState.selectedLayoutAnchor;
+    /** The draft patch that gives the root Layout these children; a side left out stays as it is. */
+    const rootChildren = (children) => rootNode ? { rootNode: withPhiBuilderRegionRootChildren({ rootNode }, children).rootNode } : {};
     const openRootInspector = (options) => {
         if (!hasRootNode || isPreviewMode || !rootNodeKind) {
             return;
@@ -580,101 +453,44 @@ export function PhiStructureRegionScaffold({ config, serverPreview, structureDra
             childLayouts: rootNodeChildLayouts,
             childWidgets: rootNodeChildWidgets,
         });
-        if (targetNodeId === rootNodeId) {
-            updateDraftAndPruneSignalRoutes({
-                rootNodeId: null,
-                rootNodeTypeKey: null,
-                rootNodeKind: null,
-                rootNodeTitle: null,
-                rootNodePackageName: null,
-                rootNodeGeometry: null,
-                rootNodePadding: null,
-                rootNodeAnchor: null,
-                rootNodeBackground: null,
-                rootNodeBorder: null,
-                rootNodeShadow: null,
-                shadow: null,
-                rootNodeChildLayouts: [],
-                rootNodeChildWidgets: [],
-            }, deletedAddresses);
-            return;
-        }
-        const nextChildLayouts = targetNodeKind === "widget"
-            ? removeWidgetChildById(rootNodeChildLayouts, targetNodeId)
-            : removeLayoutChildById(rootNodeChildLayouts, targetNodeId);
-        const nextChildWidgets = targetNodeKind === "widget"
-            ? removeContentWidgetById(rootNodeChildWidgets, targetNodeId)
-            : rootNodeChildWidgets;
-        const compactedChildren = compactsPhiCmsSequentialSlots(rootNodeDefinition)
-            ? compactPhiCmsSequentialChildren({
-                childLayouts: nextChildLayouts,
-                childWidgets: nextChildWidgets,
-            })
-            : {
-                childLayouts: nextChildLayouts,
-                childWidgets: nextChildWidgets,
-            };
-        updateDraftAndPruneSignalRoutes({
-            rootNodeChildLayouts: compactedChildren.childLayouts,
-            rootNodeChildWidgets: compactedChildren.childWidgets,
-        }, deletedAddresses);
-    };
-    const updateWidgetNodeConfig = (node, configPatch) => {
-        if (isPreviewMode || !hasRootNode) {
-            return;
-        }
-        const currentConfig = node.config ?? {};
-        const nextConfig = {
-            ...currentConfig,
-            ...configPatch,
+        const deletedNode = rootNode ? findPhiBuilderTreeNode(rootNode, targetNodeId) : null;
+        const action = {
+            key: "deleteNode",
+            subject: deletedNode ? resolvePhiBuilderNodeHistorySubject(builderState.area, deletedNode) : null,
         };
-        const signalSubcontrols = activeModules.widgetDefinitionsByType.get(node.widgetType)?.signalSubcontrols;
-        const nextSubcontrolAddresses = new Set(resolvePhiWidgetSignalSubcontrolAddresses({
-            blockId: node.id,
-            config: nextConfig,
-            signalSubcontrols,
-        }));
-        const removedSubcontrolAddresses = resolvePhiWidgetSignalSubcontrolAddresses({
-            blockId: node.id,
-            config: currentConfig,
-            signalSubcontrols,
-        }).filter((address) => !nextSubcontrolAddresses.has(address));
-        const nextChildWidgets = rootNodeChildWidgets.map((widget) => widget.id === node.id
-            ? {
-                ...widget,
-                config: nextConfig,
-            }
-            : widget);
-        const nextChildLayouts = updateWidgetChildConfigById(rootNodeChildLayouts, node.id, nextConfig);
-        if (removedSubcontrolAddresses.length > 0) {
-            updateDraftAndPruneSignalRoutes({
-                rootNodeChildLayouts: nextChildLayouts,
-                rootNodeChildWidgets: nextChildWidgets,
-            }, removedSubcontrolAddresses);
+        if (targetNodeId === rootNodeId) {
+            updateDraftAndPruneSignalRoutes({ rootNode: null }, deletedAddresses, action);
             return;
         }
-        updateDraft({
-            rootNodeChildLayouts: nextChildLayouts,
-            rootNodeChildWidgets: nextChildWidgets,
+        const remaining = removePhiStructureNode({
+            children: { childLayouts: rootNodeChildLayouts, childWidgets: rootNodeChildWidgets },
+            nodeId: targetNodeId,
+            nodeKind: targetNodeKind === "widget" ? "widget" : "layout",
+            rootDefinition: rootNodeDefinition,
+            layoutMetasByType,
         });
+        updateDraftAndPruneSignalRoutes(rootChildren(remaining), deletedAddresses, action);
     };
-    const updateLayoutNodeConfig = (node, configPatch) => {
+    /*
+     * A config edit made on the Canvas itself -- an inline text, the effects button, a slot title -- goes
+     * the one way every in-place node edit goes (`writePhiBuilderNode`), the same as the Inspector's.
+     */
+    const writeNodeConfig = (nodeId, configPatch) => {
         if (isPreviewMode || !hasRootNode) {
             return;
         }
-        if (node.id === rootNodeId) {
-            updateDraft({
-                rootNodeConfig: {
-                    ...(effectiveDraft?.rootNodeConfig ?? {}),
-                    ...configPatch,
-                },
-            });
-            return;
-        }
-        updateDraft({
-            rootNodeChildLayouts: updateLayoutChildConfigById(rootNodeChildLayouts, node.id, configPatch),
+        writePhiBuilderNode({
+            area: builderState.area,
+            pageKey: builderState.pageKey,
+            regionKey: config.regionKey,
+            draftKey,
+            baseDraft: readCurrentDraft(),
+            nodeId,
+            patchConfig: (current) => ({ ...current, ...configPatch }),
         });
     };
+    const updateWidgetNodeConfig = (node, configPatch) => writeNodeConfig(node.id, configPatch);
+    const updateLayoutNodeConfig = (node, configPatch) => writeNodeConfig(node.id, configPatch);
     const resolveStructureDragData = (node, title) => ({
         area: builderState.area,
         pageKey: builderState.pageKey,
@@ -708,13 +524,13 @@ export function PhiStructureRegionScaffold({ config, serverPreview, structureDra
                 return false;
             }
             const sourceDraft = getPhiDeveloperRegionDraftsSnapshot()[getPhiBuilderRegionDraftKey(payload.area, payload.regionKey, payload.pageKey)] ?? null;
-            if (!sourceDraft?.rootNodeId || !sourceDraft.rootNodeTypeKey) {
+            if (!sourceDraft?.rootNode) {
                 return false;
             }
             draggedNode =
-                payload.nodeId === sourceDraft.rootNodeId
+                payload.nodeId === sourceDraft.rootNode?.id
                     ? buildStructureRootLayoutNode(sourceDraft, target.parentLayoutNodeId, target.slotIndex)
-                    : extractStructureNode(sourceDraft.rootNodeChildLayouts ?? [], sourceDraft.rootNodeChildWidgets ?? [], payload.nodeId, payload.nodeKind).node;
+                    : extractStructureNode(readPhiBuilderRegionRootChildLayouts(sourceDraft), readPhiBuilderRegionRootChildWidgets(sourceDraft), payload.nodeId, payload.nodeKind).node;
             targetTreeLayouts = rootNodeChildLayouts;
             targetTreeWidgets = rootNodeChildWidgets;
         }
@@ -783,17 +599,17 @@ export function PhiStructureRegionScaffold({ config, serverPreview, structureDra
             return false;
         }
         const { sourceDraft } = resolveWidgetSwapSourceDraft(payload);
-        if (!sourceDraft?.rootNodeId || !sourceDraft.rootNodeTypeKey) {
+        if (!sourceDraft?.rootNode) {
             return false;
         }
-        return extractStructureNode(sourceDraft.rootNodeChildLayouts ?? [], sourceDraft.rootNodeChildWidgets ?? [], payload.nodeId, "widget").node != null;
+        return extractStructureNode(readPhiBuilderRegionRootChildLayouts(sourceDraft), readPhiBuilderRegionRootChildWidgets(sourceDraft), payload.nodeId, "widget").node != null;
     };
     const swapStructureWidgets = (targetWidget, payload) => {
         if (!canSwapStructureWidgets(targetWidget, payload) || !rootNodeId) {
             return;
         }
         const { sourceDraftKey, sourceDraft } = resolveWidgetSwapSourceDraft(payload);
-        if (!sourceDraft?.rootNodeId) {
+        if (!sourceDraft?.rootNode?.id) {
             return;
         }
         if (payload.regionKey === config.regionKey) {
@@ -807,21 +623,16 @@ export function PhiStructureRegionScaffold({ config, serverPreview, structureDra
             if (!swapped) {
                 return;
             }
-            setPhiDeveloperRegionDraft(draftKey, {
-                ...effectiveDraft,
-                rootNodeChildLayouts: swapped.childLayouts,
-                rootNodeChildWidgets: swapped.childWidgets,
-            }, {
-                historyContext,
-                historyLabel: "Swap widgets",
+            setPhiDeveloperRegionDraft(draftKey, withPhiBuilderRegionRootChildren(effectiveDraft, { childLayouts: swapped.childLayouts, childWidgets: swapped.childWidgets }), {
+                history: { context: historyContext, action: { key: "swapWidgets", subject: payload.title } },
             });
             return;
         }
         const swapped = swapPhiStructureWidgetsAcrossTrees({
             source: {
-                childLayouts: sourceDraft.rootNodeChildLayouts ?? [],
-                childWidgets: sourceDraft.rootNodeChildWidgets ?? [],
-                rootNodeId: sourceDraft.rootNodeId,
+                childLayouts: readPhiBuilderRegionRootChildLayouts(sourceDraft),
+                childWidgets: readPhiBuilderRegionRootChildWidgets(sourceDraft),
+                rootNodeId: sourceDraft.rootNode?.id,
                 widgetId: payload.nodeId,
             },
             target: {
@@ -835,19 +646,10 @@ export function PhiStructureRegionScaffold({ config, serverPreview, structureDra
             return;
         }
         setPhiDeveloperRegionDraftsWithHistory({
-            [sourceDraftKey]: {
-                ...sourceDraft,
-                rootNodeChildLayouts: swapped.source.childLayouts,
-                rootNodeChildWidgets: swapped.source.childWidgets,
-            },
-            [draftKey]: {
-                ...effectiveDraft,
-                rootNodeChildLayouts: swapped.target.childLayouts,
-                rootNodeChildWidgets: swapped.target.childWidgets,
-            },
+            [sourceDraftKey]: withPhiBuilderRegionRootChildren(sourceDraft, { childLayouts: swapped.source.childLayouts, childWidgets: swapped.source.childWidgets }),
+            [draftKey]: withPhiBuilderRegionRootChildren(effectiveDraft, { childLayouts: swapped.target.childLayouts, childWidgets: swapped.target.childWidgets }),
         }, {
-            historyContext,
-            historyLabel: "Swap widgets",
+            history: { context: historyContext, action: { key: "swapWidgets", subject: payload.title } },
         });
     };
     const resolveWidgetSwapDropTarget = (targetWidget) => ({
@@ -883,10 +685,10 @@ export function PhiStructureRegionScaffold({ config, serverPreview, structureDra
             }
             const sourceDraftKey = getPhiBuilderRegionDraftKey(payload.area, payload.regionKey, payload.pageKey);
             const sourceDraft = getPhiDeveloperRegionDraftsSnapshot()[sourceDraftKey] ?? null;
-            if (!sourceDraft?.rootNodeId || !sourceDraft.rootNodeTypeKey) {
+            if (!sourceDraft?.rootNode) {
                 return;
             }
-            const movingSourceRoot = payload.nodeId === sourceDraft.rootNodeId &&
+            const movingSourceRoot = payload.nodeId === sourceDraft.rootNode?.id &&
                 (payload.nodeKind === "layout");
             const sourceRootNode = movingSourceRoot
                 ? buildStructureRootLayoutNode(sourceDraft, target.parentLayoutNodeId, target.slotIndex)
@@ -897,7 +699,7 @@ export function PhiStructureRegionScaffold({ config, serverPreview, structureDra
                     childWidgets: [],
                     node: sourceRootNode,
                 }
-                : extractStructureNode(sourceDraft.rootNodeChildLayouts ?? [], sourceDraft.rootNodeChildWidgets ?? [], payload.nodeId, payload.nodeKind);
+                : extractStructureNode(readPhiBuilderRegionRootChildLayouts(sourceDraft), readPhiBuilderRegionRootChildWidgets(sourceDraft), payload.nodeId, payload.nodeKind);
             if (!extractedSource.node) {
                 return;
             }
@@ -932,47 +734,17 @@ export function PhiStructureRegionScaffold({ config, serverPreview, structureDra
                 slotIndex: target.slotIndex,
                 sortOrder: Math.max(0, extractedSource.node.sortOrder),
             };
-            let nextTargetLayouts = rootNodeChildLayouts;
-            let nextTargetWidgets = rootNodeChildWidgets;
             const targetsRoot = target.parentLayoutNodeId === rootNodeId;
-            if ("contentId" in movedNode) {
-                if (targetsRoot) {
-                    if (compactTarget) {
-                        const inserted = insertPhiCmsSequentialChild(nextTargetLayouts, nextTargetWidgets, movedNode);
-                        nextTargetLayouts = inserted.childLayouts;
-                        nextTargetWidgets = inserted.childWidgets;
-                    }
-                    else {
-                        nextTargetWidgets = [...nextTargetWidgets, movedNode];
-                    }
-                }
-                else {
-                    nextTargetLayouts = appendWidgetChildById(nextTargetLayouts, target.parentLayoutNodeId, movedNode, compactTarget);
-                }
-            }
-            else if (targetsRoot) {
-                if (compactTarget) {
-                    const inserted = insertPhiCmsSequentialChild(nextTargetLayouts, nextTargetWidgets, movedNode);
-                    nextTargetLayouts = inserted.childLayouts;
-                    nextTargetWidgets = inserted.childWidgets;
-                }
-                else {
-                    nextTargetLayouts = [...nextTargetLayouts, movedNode];
-                }
-            }
-            else {
-                nextTargetLayouts = appendLayoutChildById(nextTargetLayouts, target.parentLayoutNodeId, movedNode, compactTarget);
-            }
-            if (targetsRoot && compactTarget) {
-                const compactedTarget = compactPhiCmsSequentialChildren({
-                    childLayouts: nextTargetLayouts,
-                    childWidgets: nextTargetWidgets,
-                });
-                nextTargetLayouts = compactedTarget.childLayouts;
-                nextTargetWidgets = compactedTarget.childWidgets;
-            }
-            const sourceRootDefinition = layoutMetasByType.get(sourceDraft.rootNodeTypeKey) ?? null;
-            let nextSourceLayouts = compactStructureSequentialLayouts(extractedSource.childLayouts, layoutMetasByType);
+            const { childLayouts: nextTargetLayouts, childWidgets: nextTargetWidgets } = insertStructureNodeIntoTarget({
+                childLayouts: rootNodeChildLayouts,
+                childWidgets: rootNodeChildWidgets,
+                movedNode,
+                parentLayoutNodeId: target.parentLayoutNodeId,
+                targetsRoot,
+                compact: compactTarget,
+            });
+            const sourceRootDefinition = layoutMetasByType.get(sourceDraft.rootNode.widgetType) ?? null;
+            let nextSourceLayouts = compactPhiStructureSequentialLayouts(extractedSource.childLayouts, layoutMetasByType);
             let nextSourceWidgets = extractedSource.childWidgets;
             if (compactsPhiCmsSequentialSlots(sourceRootDefinition)) {
                 const compactedSource = compactPhiCmsSequentialChildren({
@@ -985,19 +757,10 @@ export function PhiStructureRegionScaffold({ config, serverPreview, structureDra
             setPhiDeveloperRegionDraftsWithHistory({
                 [sourceDraftKey]: movingSourceRoot
                     ? clearStructureRootNode(sourceDraft)
-                    : {
-                        ...sourceDraft,
-                        rootNodeChildLayouts: nextSourceLayouts,
-                        rootNodeChildWidgets: nextSourceWidgets,
-                    },
-                [draftKey]: {
-                    ...(effectiveDraft ?? getDefaultRegionDraft(config.regionKey)),
-                    rootNodeChildLayouts: compactStructureSequentialLayouts(nextTargetLayouts, layoutMetasByType),
-                    rootNodeChildWidgets: nextTargetWidgets,
-                },
+                    : withPhiBuilderRegionRootChildren(sourceDraft, { childLayouts: nextSourceLayouts, childWidgets: nextSourceWidgets }),
+                [draftKey]: withPhiBuilderRegionRootChildren((effectiveDraft ?? getDefaultRegionDraft(config.regionKey)), { childLayouts: compactPhiStructureSequentialLayouts(nextTargetLayouts, layoutMetasByType), childWidgets: nextTargetWidgets }),
             }, {
-                historyContext,
-                historyLabel: "Move structure node",
+                history: { context: historyContext, action: { key: "moveNode", subject: payload.title } },
             });
             return;
         }
@@ -1041,51 +804,16 @@ export function PhiStructureRegionScaffold({ config, serverPreview, structureDra
             slotIndex: insertionSlotIndex,
             sortOrder: Math.max(0, extracted.node.sortOrder),
         };
-        let nextChildLayouts = extracted.childLayouts;
-        let nextChildWidgets = extracted.childWidgets;
-        if ("contentId" in movedNode) {
-            if (targetsRoot) {
-                if (compactSequential) {
-                    const inserted = insertPhiCmsSequentialChild(nextChildLayouts, nextChildWidgets, movedNode);
-                    nextChildLayouts = inserted.childLayouts;
-                    nextChildWidgets = inserted.childWidgets;
-                }
-                else {
-                    nextChildWidgets = [...nextChildWidgets, movedNode];
-                }
-            }
-            else {
-                nextChildLayouts = appendWidgetChildById(nextChildLayouts, target.parentLayoutNodeId, movedNode, compactSequential);
-            }
-        }
-        else if (targetsRoot) {
-            if (compactSequential) {
-                const inserted = insertPhiCmsSequentialChild(nextChildLayouts, nextChildWidgets, movedNode);
-                nextChildLayouts = inserted.childLayouts;
-                nextChildWidgets = inserted.childWidgets;
-            }
-            else {
-                nextChildLayouts = [...nextChildLayouts, movedNode];
-            }
-        }
-        else {
-            nextChildLayouts = appendLayoutChildById(nextChildLayouts, target.parentLayoutNodeId, movedNode, compactSequential);
-        }
-        if (targetsRoot && compactSequential) {
-            const compacted = compactPhiCmsSequentialChildren({
-                childLayouts: nextChildLayouts,
-                childWidgets: nextChildWidgets,
-            });
-            nextChildLayouts = compacted.childLayouts;
-            nextChildWidgets = compacted.childWidgets;
-        }
-        setPhiDeveloperRegionDraft(draftKey, {
-            ...(effectiveDraft ?? getDefaultRegionDraft(config.regionKey)),
-            rootNodeChildLayouts: compactStructureSequentialLayouts(nextChildLayouts, layoutMetasByType),
-            rootNodeChildWidgets: nextChildWidgets,
-        }, {
-            historyContext,
-            historyLabel: "Move structure node",
+        const { childLayouts: nextChildLayouts, childWidgets: nextChildWidgets } = insertStructureNodeIntoTarget({
+            childLayouts: extracted.childLayouts,
+            childWidgets: extracted.childWidgets,
+            movedNode,
+            parentLayoutNodeId: target.parentLayoutNodeId,
+            targetsRoot,
+            compact: compactSequential,
+        });
+        setPhiDeveloperRegionDraft(draftKey, withPhiBuilderRegionRootChildren((effectiveDraft ?? getDefaultRegionDraft(config.regionKey)), { childLayouts: compactPhiStructureSequentialLayouts(nextChildLayouts, layoutMetasByType), childWidgets: nextChildWidgets }), {
+            history: { context: historyContext, action: { key: "moveNode", subject: payload.title } },
         });
     };
     const canDropStructureNodeAsRoot = (payload) => {
@@ -1101,21 +829,15 @@ export function PhiStructureRegionScaffold({ config, serverPreview, structureDra
             return false;
         }
         const sourceDraft = getPhiDeveloperRegionDraftsSnapshot()[getPhiBuilderRegionDraftKey(payload.area, payload.regionKey, payload.pageKey)] ?? null;
-        if (!sourceDraft?.rootNodeId ||
-            !sourceDraft.rootNodeTypeKey ||
-            !sourceDraft.rootNodeKind) {
-            return false;
-        }
-        const movingSourceRoot = payload.nodeId === sourceDraft.rootNodeId;
-        if (movingSourceRoot &&
-            sourceDraft.rootNodeKind !== "layout") {
+        if (!sourceDraft?.rootNode) {
             return false;
         }
+        const movingSourceRoot = payload.nodeId === sourceDraft.rootNode.id;
         const extractedSource = movingSourceRoot
             ? null
-            : extractStructureNode(sourceDraft.rootNodeChildLayouts ?? [], sourceDraft.rootNodeChildWidgets ?? [], payload.nodeId, payload.nodeKind);
+            : extractStructureNode(readPhiBuilderRegionRootChildLayouts(sourceDraft), readPhiBuilderRegionRootChildWidgets(sourceDraft), payload.nodeId, payload.nodeKind);
         if (!movingSourceRoot &&
-            (!extractedSource?.node || "contentId" in extractedSource.node)) {
+            (!extractedSource?.node || "contentVersionId" in extractedSource.node)) {
             return false;
         }
         return true;
@@ -1126,10 +848,10 @@ export function PhiStructureRegionScaffold({ config, serverPreview, structureDra
         }
         const sourceDraftKey = getPhiBuilderRegionDraftKey(payload.area, payload.regionKey, payload.pageKey);
         const sourceDraft = getPhiDeveloperRegionDraftsSnapshot()[sourceDraftKey];
-        const movingSourceRoot = payload.nodeId === sourceDraft.rootNodeId;
+        const movingSourceRoot = payload.nodeId === sourceDraft.rootNode?.id;
         const extractedSource = movingSourceRoot
             ? null
-            : extractStructureNode(sourceDraft.rootNodeChildLayouts ?? [], sourceDraft.rootNodeChildWidgets ?? [], payload.nodeId, payload.nodeKind);
+            : extractStructureNode(readPhiBuilderRegionRootChildLayouts(sourceDraft), readPhiBuilderRegionRootChildWidgets(sourceDraft), payload.nodeId, payload.nodeKind);
         let nextSourceDraft;
         let nextTargetDraft;
         const targetBase = effectiveDraft ?? getDefaultRegionDraft(config.regionKey);
@@ -1138,8 +860,8 @@ export function PhiStructureRegionScaffold({ config, serverPreview, structureDra
             nextTargetDraft = copyStructureRootNode(targetBase, sourceDraft);
         }
         else {
-            const sourceRootDefinition = layoutMetasByType.get(sourceDraft.rootNodeTypeKey) ?? null;
-            let nextSourceLayouts = compactStructureSequentialLayouts(extractedSource.childLayouts, layoutMetasByType);
+            const sourceRootDefinition = layoutMetasByType.get(sourceDraft.rootNode.widgetType) ?? null;
+            let nextSourceLayouts = compactPhiStructureSequentialLayouts(extractedSource.childLayouts, layoutMetasByType);
             let nextSourceWidgets = extractedSource.childWidgets;
             if (compactsPhiCmsSequentialSlots(sourceRootDefinition)) {
                 const compactedSource = compactPhiCmsSequentialChildren({
@@ -1149,19 +871,14 @@ export function PhiStructureRegionScaffold({ config, serverPreview, structureDra
                 nextSourceLayouts = compactedSource.childLayouts;
                 nextSourceWidgets = compactedSource.childWidgets;
             }
-            nextSourceDraft = {
-                ...sourceDraft,
-                rootNodeChildLayouts: nextSourceLayouts,
-                rootNodeChildWidgets: nextSourceWidgets,
-            };
+            nextSourceDraft = withPhiBuilderRegionRootChildren(sourceDraft, { childLayouts: nextSourceLayouts, childWidgets: nextSourceWidgets });
             nextTargetDraft = promoteStructureLayoutToRoot(targetBase, extractedSource.node);
         }
         setPhiDeveloperRegionDraftsWithHistory({
             [sourceDraftKey]: nextSourceDraft,
             [draftKey]: nextTargetDraft,
         }, {
-            historyContext,
-            historyLabel: "Move layout to region root",
+            history: { context: historyContext, action: { key: "moveLayoutToRoot", subject: payload.title } },
         });
     };
     const rootDropTarget = !isPreviewMode && !hasRootNode
@@ -1199,23 +916,12 @@ export function PhiStructureRegionScaffold({ config, serverPreview, structureDra
         return activeModules.layoutTypes.has(`${pluginKey}/${typeKey}`);
     });
     const pickerPlacement = config.regionKey === "sider_left" ? "right" : "top";
-    const rootNodeScaffold = hasRootNode
+    const rootNodeScaffold = rootNodeProps
         ? renderPhiRootNodeScaffold({
+            // The root Layout is scaffolded from its node, as every Layout below it is.
+            ...rootNodeProps,
             regionKey: config.regionKey,
-            id: rootNodeId,
-            typeKey: rootNodeTypeKey,
-            kind: rootNodeKind,
-            title: effectiveDraft?.rootNodeTitle ?? null,
-            packageName: effectiveDraft?.rootNodePackageName ?? null,
             editSlotAnchor: resolvedRootNodeAnchor,
-            rootNodeConfig: effectiveDraft?.rootNodeConfig ?? null,
-            rootNodeGeometry: effectiveDraft?.rootNodeGeometry ?? null,
-            rootNodePadding: effectiveDraft?.rootNodePadding ?? null,
-            rootNodeBackground: effectiveDraft?.rootNodeBackground ?? null,
-            rootNodeBorder: effectiveDraft?.rootNodeBorder ?? null,
-            rootNodeShadow: effectiveDraft?.rootNodeShadow ?? null,
-            childLayouts: rootNodeChildLayouts,
-            childWidgets: rootNodeChildWidgets,
         }, openSlot, openRootInspector, deleteRootNode, updateWidgetNodeConfig, updateLayoutNodeConfig, {
             effectsLabels,
             authoringToolsLabels,
@@ -1242,122 +948,55 @@ export function PhiStructureRegionScaffold({ config, serverPreview, structureDra
             regionKey: config.regionKey,
             builderPlugins: builderModuleMetas.plugins,
         });
-        const targetLayoutNodeId = currentSlotPickerContext?.targetNodeId ?? rootNodeId;
-        const targetsRootLayout = targetLayoutNodeId === rootNodeId;
-        const parentLayoutNodeId = targetLayoutNodeId;
-        const insertionSlotIndex = currentSlotPickerContext?.slotIndex ?? null;
-        const parentLayoutNode = targetsRootLayout || targetLayoutNodeId == null
-            ? null
-            : findPhiBuilderLayoutNodeById(rootNodeChildLayouts, targetLayoutNodeId);
-        const parentLayoutDefinition = parentLayoutNode == null
-            ? rootNodeDefinition
-            : layoutMetasByType.get(parentLayoutNode.widgetType) ?? null;
-        const compactSequential = compactsPhiCmsSequentialSlots(parentLayoutDefinition);
-        const isSlotInsertion = hasRootNode &&
-            insertionSlotIndex != null &&
-            parentLayoutNodeId != null;
-        if (isSlotInsertion
-            && item.kind === "widget"
-            && currentSlotPickerContext?.allowWidgetSection
-            && insertionSlotIndex != null
-            && parentLayoutNodeId != null) {
-            const nextWidget = buildInsertedWidgetNode(item, instanceId, parentLayoutNodeId, insertionSlotIndex, resolveNextSlotSortOrder(insertionSlotIndex));
-            updateDraft(!targetsRootLayout
-                ? {
-                    rootNodeChildLayouts: appendWidgetChildById(rootNodeChildLayouts, parentLayoutNodeId, nextWidget, compactSequential),
-                }
-                : compactSequential
-                    ? (() => {
-                        const nextChildren = compactPhiCmsSequentialChildren({
-                            childLayouts: rootNodeChildLayouts,
-                            childWidgets: [...rootNodeChildWidgets, nextWidget],
-                        });
-                        return {
-                            rootNodeChildLayouts: nextChildren.childLayouts,
-                            rootNodeChildWidgets: nextChildren.childWidgets,
-                        };
-                    })()
-                    : { rootNodeChildWidgets: [...rootNodeChildWidgets, nextWidget] });
-        }
-        else if (isSlotInsertion
-            && item.kind !== "widget"
-            && currentSlotPickerContext?.allowLayoutSection
-            && insertionSlotIndex != null
-            && parentLayoutNodeId != null) {
-            const nextLayout = buildInsertedLayoutNode(item, instanceId, parentLayoutNodeId, insertionSlotIndex, resolveNextSlotSortOrder(insertionSlotIndex));
-            /*
-             * An append that cannot find its parent returns the tree it was given, unchanged and without
-             * complaint -- the picker closes, the draft is written, and the slot is as empty as before. That
-             * is indistinguishable from a refusal, so say which of the two happened.
-             */
-            if (!targetsRootLayout) {
-                const countNodes = (nodes) => nodes.reduce((total, node) => total + 1 + countNodes(node.childLayouts ?? []), 0);
-                const appended = appendLayoutChildById(rootNodeChildLayouts, parentLayoutNodeId, nextLayout, compactSequential);
-                if (countNodes(appended) === countNodes(rootNodeChildLayouts)) {
-                    console.error("Phi Builder: the Layout was built but its parent slot was not found, so nothing was added.", {
-                        parentLayoutNodeId,
-                        insertionSlotIndex,
-                        compactSequential,
-                        parentSlotPositions: parentLayoutDefinition?.slotPositions ?? null,
-                        knownRootChildIds: rootNodeChildLayouts.map((node) => node.id),
-                    });
-                }
-            }
-            updateDraft(!targetsRootLayout
-                ? {
-                    rootNodeChildLayouts: appendLayoutChildById(rootNodeChildLayouts, parentLayoutNodeId, nextLayout, compactSequential),
-                }
-                : compactSequential
-                    ? (() => {
-                        const nextChildren = compactPhiCmsSequentialChildren({
-                            childLayouts: [...rootNodeChildLayouts, nextLayout],
-                            childWidgets: rootNodeChildWidgets,
-                        });
-                        return {
-                            rootNodeChildLayouts: nextChildren.childLayouts,
-                            rootNodeChildWidgets: nextChildren.childWidgets,
-                        };
-                    })()
-                    : { rootNodeChildLayouts: [...rootNodeChildLayouts, nextLayout] });
-        }
-        else if (!hasRootNode) {
-            const resolvedDefaultConfig = resolveInsertedItemDefaultConfig(item);
-            const rootNodeDefaults = resolvePhiBuilderRootNodeDefaults(resolvedDefaultConfig);
-            updateDraft({
-                rootNodeId: instanceId,
-                rootNodeTypeKey: item.key,
-                rootNodeKind: item.kind,
-                rootNodeTitle: item.title,
-                rootNodePackageName: resolvePickItemPackageName(item),
-                rootNodeConfig: resolvedDefaultConfig,
-                rootNodeGeometry: null,
-                rootNodeAnchor: item.defaultAnchor ?? null,
-                rootNodePadding: rootNodeDefaults.rootNodePadding,
-                rootNodeBackground: rootNodeDefaults.rootNodeBackground,
-                rootNodeBorder: rootNodeDefaults.rootNodeBorder,
-                rootNodeShadow: readPhiShadow(resolvedDefaultConfig?.shadow) ?? null,
-                rootNodeChildLayouts: [],
-                rootNodeChildWidgets: [],
-            });
+        /*
+         * The tree as it stands now, not as it stood when the picker opened: allocating the id waits for
+         * the server, and an edit made meanwhile -- in this Region or by the Inspector -- would otherwise
+         * be written over by the tree read at render.
+         */
+        const currentDraft = readCurrentDraft();
+        const currentRootNode = currentDraft.rootNode ?? null;
+        const action = { key: "insertNode", subject: item.title };
+        if (!currentRootNode) {
+            // The root Layout is created like every Layout below it.
+            updateDraft({ rootNode: buildInsertedLayoutNode(item, instanceId, null, 0, 0) }, action);
+            return;
         }
-        else {
+        const targetLayoutNodeId = currentSlotPickerContext?.targetNodeId ?? currentRootNode.id;
+        const insertionSlotIndex = currentSlotPickerContext?.slotIndex ?? null;
+        const sectionAllowed = item.kind === "widget"
+            ? currentSlotPickerContext?.allowWidgetSection === true
+            : currentSlotPickerContext?.allowLayoutSection === true;
+        const inserted = insertionSlotIndex != null && sectionAllowed
+            ? insertPhiStructureNode({
+                children: {
+                    childLayouts: readPhiBuilderRegionRootChildLayouts(currentDraft),
+                    childWidgets: readPhiBuilderRegionRootChildWidgets(currentDraft),
+                },
+                rootNodeId: currentRootNode.id,
+                rootDefinition: layoutMetasByType.get(currentRootNode.widgetType) ?? null,
+                layoutMetasByType,
+                parentLayoutNodeId: targetLayoutNodeId,
+                slotIndex: insertionSlotIndex,
+                buildNode: (sortOrder) => item.kind === "widget"
+                    ? buildInsertedWidgetNode(item, instanceId, targetLayoutNodeId, insertionSlotIndex, sortOrder)
+                    : buildInsertedLayoutNode(item, instanceId, targetLayoutNodeId, insertionSlotIndex, sortOrder),
+            })
+            : null;
+        if (!inserted) {
             /*
-             * Nothing matched, and a pick that does nothing must at least say so.
+             * Nothing was inserted, and a pick that does nothing must at least say so.
              *
              * The picker closes on every pick, so a refused insertion and a successful one look the same:
-             * the panel goes away and the slot is unchanged. Four conditions can refuse it -- no root node,
-             * no slot index, a section the context does not allow, or a target that could not be read -- and
-             * from outside they are one symptom. The Builder is authoring, so this goes to the console with
-             * the state that decided it rather than to the author as a message they cannot act on.
+             * the panel goes away and the slot is unchanged. No slot index, a section the context does not
+             * allow, or a target Layout that is gone by the time the id arrived are one symptom from
+             * outside. The Builder is authoring, so this goes to the console with the state that decided
+             * it rather than to the author as a message they cannot act on.
              */
             console.error("Phi Builder: the picked item was not inserted.", {
                 item: { key: item.key, kind: item.kind, title: item.title },
-                isSlotInsertion,
-                hasRootNode,
                 insertionSlotIndex,
                 targetLayoutNodeId,
-                targetsRootLayout,
-                parentSlotPositions: parentLayoutDefinition?.slotPositions ?? null,
+                sectionAllowed,
                 slotPickerContext: currentSlotPickerContext
                     ? {
                         allowWidgetSection: currentSlotPickerContext.allowWidgetSection,
@@ -1368,14 +1007,11 @@ export function PhiStructureRegionScaffold({ config, serverPreview, structureDra
                         targetNodeId: currentSlotPickerContext.targetNodeId,
                     }
                     : null,
-                // The condition each branch wanted, so the failing one names itself.
-                wantedByWidgetBranch: isSlotInsertion && item.kind === "widget"
-                    && currentSlotPickerContext?.allowWidgetSection === true,
-                wantedByLayoutBranch: isSlotInsertion && item.kind !== "widget"
-                    && currentSlotPickerContext?.allowLayoutSection === true,
+                knownRootChildIds: readPhiBuilderRegionRootChildLayouts(currentDraft).map((node) => node.id),
             });
             return;
         }
+        updateDraft({ rootNode: withPhiBuilderRegionRootChildren({ rootNode: currentRootNode }, inserted).rootNode }, action);
     }
     const pickerActionIconFrameSize = token.controlHeight;
     const pickerActionIconSize = token.fontSizeHeading4;
@@ -1402,7 +1038,7 @@ export function PhiStructureRegionScaffold({ config, serverPreview, structureDra
             return;
         }
         // Seed the structure workspace exactly once per draft key.
-        // An empty draft with `rootNodeTypeKey: null` is still a valid loaded state,
+        // An empty draft with `rootNode: null` is still a valid loaded state,
         // for example after deleting the region root layout or after loading a
         // persisted empty shell region from the server.
         if (regionDraft != null) {
@@ -1414,11 +1050,11 @@ export function PhiStructureRegionScaffold({ config, serverPreview, structureDra
         if (slotKind === "structure") {
             return;
         }
-        if (!fallbackPageDraft || fallbackPageDraft.rootNodeTypeKey == null) {
+        if (!fallbackPageDraft || fallbackPageDraft.rootNode == null) {
             return;
         }
         // Seed the page workspace exactly once per draft key.
-        // An empty draft with `rootNodeTypeKey: null` is still a valid loaded state,
+        // An empty draft with `rootNode: null` is still a valid loaded state,
         // for example after deleting the page root layout or after loading a
         // persisted empty page region from the server.
         if (regionDraft != null) {
@@ -1491,53 +1127,58 @@ export function PhiStructureRegionScaffold({ config, serverPreview, structureDra
         setSlotPickerContext(null);
     }
     function renderInsertPicker({ trigger, slotIndex, targetNodeId, }) {
-        const isActiveTarget = isPicking
-            && slotPickerContext?.slotIndex === slotIndex
-            && slotPickerContext.targetNodeId === targetNodeId;
-        return (_jsx(PhiBuilderInsertPickerControl, { open: isActiveTarget, trigger: trigger, items: availablePickItems, section: pickSection, packageFilters: pickPackageFilters, widgetCategoryFilters: widgetCategoryFilters, allowLayoutSection: slotPickerContext?.allowLayoutSection ?? true, allowWidgetSection: slotPickerContext?.allowWidgetSection ?? false, placement: pickerPlacement, labels: pickerLabels, onOpenChange: (nextOpen) => {
-                if (!nextOpen && isActiveTarget)
-                    closePicker();
-            }, onSectionChange: setPickSection, onPackageFiltersChange: setPickPackageFilters, onWidgetCategoryFiltersChange: (filters) => {
-                patchPhiDeveloperBuilderState("public", { pickerWidgetCategoryFilters: filters });
-            }, onChange: (item) => void insertPickedItem(item) }, `insert-picker:${targetNodeId}:${slotIndex}`));
+        return renderPickerControl({
+            key: `insert-picker:${targetNodeId}:${slotIndex}`,
+            isActiveTarget: isPicking
+                && slotPickerContext?.slotIndex === slotIndex
+                && slotPickerContext.targetNodeId === targetNodeId,
+            trigger,
+        });
     }
     function renderRegionPicker(trigger) {
         if (hasRootNode)
             return trigger;
-        const isActiveTarget = isPicking
-            && slotPickerContext?.slotIndex == null
-            && slotPickerContext?.targetNodeId == null;
+        return renderPickerControl({
+            key: `insert-picker:region:${config.regionKey}`,
+            isActiveTarget: isPicking && slotPickerContext?.slotIndex == null && slotPickerContext?.targetNodeId == null,
+            trigger,
+        });
+    }
+    /** The one picker, opened for a slot or for an empty Region; only the key and what makes it active differ. */
+    function renderPickerControl({ key, isActiveTarget, trigger }) {
         return (_jsx(PhiBuilderInsertPickerControl, { open: isActiveTarget, trigger: trigger, items: availablePickItems, section: pickSection, packageFilters: pickPackageFilters, widgetCategoryFilters: widgetCategoryFilters, allowLayoutSection: slotPickerContext?.allowLayoutSection ?? true, allowWidgetSection: slotPickerContext?.allowWidgetSection ?? false, placement: pickerPlacement, labels: pickerLabels, onOpenChange: (nextOpen) => {
                 if (!nextOpen && isActiveTarget)
                     closePicker();
             }, onSectionChange: setPickSection, onPackageFiltersChange: setPickPackageFilters, onWidgetCategoryFiltersChange: (filters) => {
                 patchPhiDeveloperBuilderState("public", { pickerWidgetCategoryFilters: filters });
-            }, onChange: (item) => void insertPickedItem(item) }, `insert-picker:region:${config.regionKey}`));
+            }, onChange: (item) => void insertPickedItem(item) }, key));
     }
-    function updateDraft(nextDraft) {
-        const baseDraft = effectiveDraft ?? getDefaultRegionDraft(config.regionKey);
+    /*
+     * The draft the Region's edits are made against: the one in the store when there is one. An edit
+     * that waits -- an insertion waits for its node's id -- reads it after waiting, so what another edit
+     * wrote meanwhile is kept rather than overwritten by the tree read at render.
+     */
+    function readCurrentDraft() {
+        return getPhiDeveloperRegionDraftsSnapshot()[draftKey] ?? effectiveDraft ?? getDefaultRegionDraft(config.regionKey);
+    }
+    function updateDraft(nextDraft, action) {
         setPhiDeveloperRegionDraft(draftKey, {
-            ...baseDraft,
+            ...readCurrentDraft(),
             ...nextDraft,
-        }, {
-            historyContext,
-            historyLabel: "Update structure",
-        });
+        }, { history: { context: historyContext, action } });
     }
-    function updateDraftAndPruneSignalRoutes(nextDraft, addresses) {
-        const baseDraft = effectiveDraft ?? getDefaultRegionDraft(config.regionKey);
+    function updateDraftAndPruneSignalRoutes(nextDraft, addresses, action) {
         const routeScope = isPhiBuilderPageScopedRegion(config.regionKey) ? "page" : "area";
         setPhiDeveloperRegionDraftAndPruneSignalRoutes({
             draftKey,
             draft: {
-                ...baseDraft,
+                ...readCurrentDraft(),
                 ...nextDraft,
             },
             area: builderState.area,
             pageKey: builderState.pageKey,
             targets: addresses.map((address) => ({ address, scope: routeScope })),
-            historyContext,
-            historyLabel: "Update structure",
+            history: { context: historyContext, action },
         });
     }
     if (isPreviewMode) {
@@ -1553,7 +1194,7 @@ export function PhiStructureRegionScaffold({ config, serverPreview, structureDra
             : shouldStretchAvailableHeight
                 ? "100%"
                 : undefined;
-        return (_jsx("div", { "data-phi-region-slot": config.regionKey, className: "phi-builder-structure-region__slot", "data-phi-builder-region-mode": "preview", "data-phi-builder-region-has-root-node": hasRootNode ? "true" : "false", "data-phi-builder-region-selected": "false", "data-phi-builder-region-picking": "false", style: {
+        return (_jsx("div", { "data-phi-region-slot": config.regionKey, [PHI_VISUAL_ANCHOR_PART_ATTRIBUTE]: config.regionKey, className: ["phi-builder-structure-region__slot", regionToneClassName].filter(Boolean).join(" "), "data-phi-builder-region-mode": "preview", "data-phi-builder-region-has-root-node": hasRootNode ? "true" : "false", "data-phi-builder-region-selected": "false", "data-phi-builder-region-picking": "false", style: {
                 width: slotWidth,
                 minWidth: slotMinWidth,
                 maxWidth: slotMaxWidth,
@@ -1564,29 +1205,29 @@ export function PhiStructureRegionScaffold({ config, serverPreview, structureDra
                 ...slotCentreStyle,
                 ...slotBackgroundStyle,
                 ...slotBorderStyle,
-                boxShadow: combinePhiBoxShadows(slotBackgroundStyle.boxShadow, resolvePhiShadow(effectiveDraft?.shadow)),
+                boxShadow: combinePhiBoxShadows(slotBackgroundStyle.boxShadow, resolvePhiShadow(effectiveDraft?.surface?.shadow)),
                 zIndex: resolvedRegionZIndex,
                 position: resolvedRegionZIndex != null ? "relative" : undefined,
                 flex: shouldStretchAvailableHeight ? "1 1 auto" : undefined,
                 ...(resolvedRegionTypography.fontSize ? { fontSize: resolvedRegionTypography.fontSize } : {}),
                 ...(resolvedRegionTypography.lineHeight ? { lineHeight: resolvedRegionTypography.lineHeight } : {}),
-            }, children: _jsx("div", { "data-phi-debug-scaffold": resolvedDebugScaffold, style: {
-                    flex: "1 1 auto",
-                    height: previewRootBodyHeight,
-                    minHeight: shouldStretchAvailableHeight ? 0 : slotBodyMinHeight,
-                    display: "flex",
-                    flexDirection: "column",
-                    justifyContent: "stretch",
-                    alignItems: "stretch",
-                    minWidth: 0,
-                }, children: previewRoot }) }));
+            }, children: _jsx(PhiSurfaceTone, { tone: effectiveDraft?.surface?.tone, children: _jsx("div", { "data-phi-debug-scaffold": resolvedDebugScaffold, style: {
+                        flex: "1 1 auto",
+                        height: previewRootBodyHeight,
+                        minHeight: shouldStretchAvailableHeight ? 0 : slotBodyMinHeight,
+                        display: "flex",
+                        flexDirection: "column",
+                        justifyContent: "stretch",
+                        alignItems: "stretch",
+                        minWidth: 0,
+                    }, children: previewRoot }) }) }));
     }
     return (_jsxs("div", { className: [
             "phi-builder-structure-region",
             shouldFillAvailableHeight ? "phi-builder-structure-region--full-height" : null,
             !shouldFillAvailableHeight ? "phi-builder-structure-region--compact" : null,
             containerClassName,
-        ].filter(Boolean).join(" "), "data-phi-builder-region-mode": isPreviewMode ? "preview" : "editor", "data-phi-builder-region-has-root-node": hasRootNode ? "true" : "false", "data-phi-builder-region-selected": isSelected ? "true" : "false", "data-phi-builder-region-picking": isPicking ? "true" : "false", role: config.allowSelect && !isPreviewMode ? "button" : undefined, tabIndex: config.allowSelect && !isPreviewMode ? 0 : undefined, style: {
+        ].filter(Boolean).join(" "), [PHI_VISUAL_ANCHOR_PART_ATTRIBUTE]: config.regionKey, "data-phi-builder-region-mode": isPreviewMode ? "preview" : "editor", "data-phi-builder-region-has-root-node": hasRootNode ? "true" : "false", "data-phi-builder-region-selected": isSelected ? "true" : "false", "data-phi-builder-region-picking": isPicking ? "true" : "false", role: config.allowSelect && !isPreviewMode ? "button" : undefined, tabIndex: config.allowSelect && !isPreviewMode ? 0 : undefined, style: {
             border: `1px dashed ${token.colorBorderSecondary}`,
             // The area a Region lives in: a faint layout tint so the Theme Root Background stays visible.
             backgroundColor: `color-mix(in srgb, ${token.colorBgLayout} 20%, transparent)`,
@@ -1609,14 +1250,15 @@ export function PhiStructureRegionScaffold({ config, serverPreview, structureDra
                 : {}),
             ...containerStyle,
         }, onClick: isPreviewMode ? undefined : selectRegion, onKeyDown: (event) => {
-            if (!config.allowSelect || isPreviewMode) {
+            // Only the region's own focus: Enter on a button inside it is that button's.
+            if (!config.allowSelect || isPreviewMode || event.target !== event.currentTarget) {
                 return;
             }
             if (event.key === "Enter" || event.key === " ") {
                 event.preventDefault();
                 selectRegion();
             }
-        }, children: [isPreviewMode ? null : (_jsxs(PhiFlexControl, { vertical: true, gap: 0, style: { minWidth: 0, width: "100%" }, children: [_jsxs(PhiFlexControl, { align: "center", gap: 6, wrap: false, style: { minWidth: 0, width: "100%", whiteSpace: "nowrap" }, children: [_jsx(PhiTypographyControl, { strong: true, style: { minWidth: 0, whiteSpace: "nowrap" }, children: config.title }), _jsxs(PhiTypographyControl, { type: "secondary", style: { minWidth: 0, whiteSpace: "nowrap" }, children: ["\u00B7 ", config.regionKey] })] }), config.subtitle ? (_jsx(PhiTypographyControl, { type: "secondary", style: { display: "block", whiteSpace: "normal", overflowWrap: "anywhere" }, children: config.subtitle })) : null] })), renderRegionPicker(_jsx("div", { ref: setRootDropNodeRef, "data-phi-region-slot": config.regionKey, className: "phi-builder-structure-region__slot", "data-phi-builder-region-mode": "editor", "data-phi-structure-drop-state": rootDropAccepted
+        }, children: [isPreviewMode ? null : (_jsxs(PhiFlexControl, { vertical: true, gap: 0, style: { minWidth: 0, width: "100%" }, children: [_jsxs(PhiFlexControl, { align: "center", gap: 6, wrap: false, style: { minWidth: 0, width: "100%", whiteSpace: "nowrap" }, children: [_jsx(PhiTypographyControl, { strong: true, style: { minWidth: 0, whiteSpace: "nowrap" }, children: config.title }), _jsxs(PhiTypographyControl, { type: "secondary", style: { minWidth: 0, whiteSpace: "nowrap" }, children: ["\u00B7 ", config.regionKey] })] }), config.subtitle ? (_jsx(PhiTypographyControl, { type: "secondary", style: { display: "block", whiteSpace: "normal", overflowWrap: "anywhere" }, children: config.subtitle })) : null] })), renderRegionPicker(_jsx("div", { ref: setRootDropNodeRef, "data-phi-region-slot": config.regionKey, className: ["phi-builder-structure-region__slot", regionToneClassName].filter(Boolean).join(" "), "data-phi-builder-region-mode": "editor", "data-phi-structure-drop-state": rootDropAccepted
                     ? "accepted"
                     : rootDropIsOver
                         ? "rejected"
@@ -1631,7 +1273,7 @@ export function PhiStructureRegionScaffold({ config, serverPreview, structureDra
                                 ? token.colorFillQuaternary
                                 : `color-mix(in srgb, ${token.colorBgContainer} 50%, transparent)`,
                         }),
-                    boxShadow: combinePhiBoxShadows(slotBackgroundStyle.boxShadow, resolvePhiShadow(effectiveDraft?.shadow) ??
+                    boxShadow: combinePhiBoxShadows(slotBackgroundStyle.boxShadow, resolvePhiShadow(effectiveDraft?.surface?.shadow) ??
                         `inset 0 0 0 1px ${isPicking || isSelected ? token.colorPrimary : token.colorBorderSecondary}`),
                     width: slotWidth,
                     minWidth: slotMinWidth,
@@ -1661,35 +1303,35 @@ export function PhiStructureRegionScaffold({ config, serverPreview, structureDra
                     }
                     openSlot();
                 }, onKeyDown: (event) => {
-                    if (!config.allowInsert || hasRootNode) {
+                    if (!config.allowInsert || hasRootNode || event.target !== event.currentTarget) {
                         return;
                     }
                     if (event.key === "Enter" || event.key === " ") {
                         event.preventDefault();
                         openSlot();
                     }
-                }, children: _jsx("div", { "data-phi-debug-scaffold": resolvedDebugScaffold, style: {
-                        flex: "1 1 auto",
-                        minHeight: shouldStretchAvailableHeight ? 0 : slotBodyMinHeight,
-                        height: resolvedRootBodyHeight,
-                        boxSizing: "border-box",
-                        display: "flex",
-                        flexDirection: "column",
-                        justifyContent: hasRootNode ? "stretch" : "center",
-                        alignItems: hasRootNode ? "stretch" : "center",
-                        ...regionPaddingStyle,
-                        gap: 0,
-                        minWidth: 0,
-                    }, children: hasRootNode ? (rootNodeScaffold ? (rootNodeScaffold) : null) : (_jsx("span", { "aria-hidden": true, style: {
-                            width: pickerActionIconFrameSize,
-                            height: pickerActionIconFrameSize,
-                            lineHeight: 1,
-                            display: "inline-flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            fontSize: pickerActionIconSize,
-                            color: isPicking ? token.colorPrimary : token.colorTextSecondary,
-                        }, children: _jsx(PlusOutlined, {}) })) }) }))] }));
+                }, children: _jsx(PhiSurfaceTone, { tone: effectiveDraft?.surface?.tone, children: _jsx("div", { "data-phi-debug-scaffold": resolvedDebugScaffold, style: {
+                            flex: "1 1 auto",
+                            minHeight: shouldStretchAvailableHeight ? 0 : slotBodyMinHeight,
+                            height: resolvedRootBodyHeight,
+                            boxSizing: "border-box",
+                            display: "flex",
+                            flexDirection: "column",
+                            justifyContent: hasRootNode ? "stretch" : "center",
+                            alignItems: hasRootNode ? "stretch" : "center",
+                            ...regionPaddingStyle,
+                            gap: 0,
+                            minWidth: 0,
+                        }, children: hasRootNode ? (rootNodeScaffold ? (rootNodeScaffold) : null) : (_jsx("span", { "aria-hidden": true, style: {
+                                width: pickerActionIconFrameSize,
+                                height: pickerActionIconFrameSize,
+                                lineHeight: 1,
+                                display: "inline-flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                fontSize: pickerActionIconSize,
+                                color: isPicking ? token.colorPrimary : token.colorTextSecondary,
+                            }, children: _jsx(PhiIcon, { name: "plus", size: "inherit" }) })) }) }) }))] }));
 }
 export function PhiStructureRegionWidget(props) {
     return _jsx(PhiStructureRegionScaffold, { ...props });