@phis/ui 0.4.1 → 0.4.3

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

@@ -1,10 +1,11 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef } from "react";
+import { useCallback, useMemo } from "react";
 import { PhiStructureRegionLayout } from "../../../../components/layouts/phi-structure-region-layout";
 import { hasPhiConfigFlag } from "../../../../helpers/flags";
 import { PhiCmsFlags } from "../../../../constants/phi-cms";
-import { mergePhiDeveloperRegionDrafts, usePhiDeveloperBuilderStateValue, usePhiDeveloperRegionDrafts, } from "../developer-workspace-store";
+import { usePhiDeveloperBuilderStateValue, usePhiDeveloperRegionDraftsValue, } from "../developer-workspace-store";
+import { usePhiBuilderRegionDraftHydration } from "./use-region-draft-hydration";
 import { getPhiBuilderRegionDraftKey, PHI_BUILDER_SHELL_REGION_KEYS, } from "../region-keys";
 import { usePhiBuilderModuleMetas } from "../plugin-meta-store";
 import { buildPhiStructureRegionPickItems } from "../structure-region-pick-items";
@@ -16,36 +17,18 @@ export function PhiDeveloperBuilderShellsWorkspaceWidgetClient({ serverPreviewRe
     void _pageDraftsByScope;
     void _shellTheme;
     void _disabled;
-    const area = usePhiDeveloperBuilderStateValue("public", (state) => state.area);
-    const pageKey = usePhiDeveloperBuilderStateValue("public", (state) => state.pageKey);
-    const builderMode = usePhiDeveloperBuilderStateValue("public", (state) => state.builderMode);
-    const regionDrafts = usePhiDeveloperRegionDrafts();
+    const area = usePhiDeveloperBuilderStateValue((state) => state.area);
+    const pageKey = usePhiDeveloperBuilderStateValue((state) => state.pageKey);
+    const builderMode = usePhiDeveloperBuilderStateValue((state) => state.builderMode);
     const builderModuleMetas = usePhiBuilderModuleMetas(targetArea);
     const pickItems = useMemo(() => buildPhiStructureRegionPickItems(builderModuleMetas.plugins), [builderModuleMetas.plugins]);
-    const hydratedAreaRef = useRef(null);
-    useEffect(() => {
-        if (builderMode === "preview" && previewRegionDrafts && Object.keys(previewRegionDrafts).length > 0) {
-            mergePhiDeveloperRegionDrafts(previewRegionDrafts);
-        }
-        if (hydratedAreaRef.current !== area) {
-            hydratedAreaRef.current = area;
-            const nextAreaShellDrafts = structureShellDrafts ?? {};
-            if (Object.keys(nextAreaShellDrafts).length > 0) {
-                mergePhiDeveloperRegionDrafts(nextAreaShellDrafts);
-                return;
-            }
-        }
-        const shellDraftKeys = PHI_BUILDER_SHELL_REGION_KEYS.map((regionKey) => getPhiBuilderRegionDraftKey(area, regionKey, pageKey));
-        const needsShellHydration = shellDraftKeys.some((draftKey) => regionDrafts[draftKey] == null);
-        if (!needsShellHydration) {
-            return;
-        }
-        const nextShellDrafts = structureShellDrafts ?? {};
-        const missingShellDrafts = Object.fromEntries(Object.entries(nextShellDrafts).filter(([draftKey]) => regionDrafts[draftKey] == null));
-        if (Object.keys(missingShellDrafts).length > 0) {
-            mergePhiDeveloperRegionDrafts(missingShellDrafts);
-        }
-    }, [area, builderMode, pageKey, previewRegionDrafts, regionDrafts, structureShellDrafts]);
+    const shellDraftKeys = useMemo(() => PHI_BUILDER_SHELL_REGION_KEYS.map((regionKey) => getPhiBuilderRegionDraftKey(area, regionKey, pageKey)), [area, pageKey]);
+    usePhiBuilderRegionDraftHydration({
+        draftKeys: shellDraftKeys,
+        serverDrafts: structureShellDrafts,
+        builderMode,
+        previewRegionDrafts,
+    });
     /*
      * What the left Sider is doing, read the same way the controller reads it.
      *
@@ -55,7 +38,8 @@ export function PhiDeveloperBuilderShellsWorkspaceWidgetClient({ serverPreviewRe
      * state.
      */
     const siderLeftDraftKey = getPhiBuilderRegionDraftKey(area, "sider_left", pageKey);
-    const siderLeftFullHeight = hasPhiConfigFlag((regionDrafts[siderLeftDraftKey] ?? structureShellDrafts?.[siderLeftDraftKey])?.regionConfig, PhiCmsFlags.FullHeight);
+    const siderLeftDraft = usePhiDeveloperRegionDraftsValue(useCallback((drafts) => drafts[siderLeftDraftKey] ?? null, [siderLeftDraftKey]));
+    const siderLeftFullHeight = hasPhiConfigFlag((siderLeftDraft ?? structureShellDrafts?.[siderLeftDraftKey])?.regionConfig, PhiCmsFlags.FullHeight);
     const renderStructureRegion = (regionKey, title, subtitle) => {
         const fallbackDraft = structureShellDrafts?.[getPhiBuilderRegionDraftKey(area, regionKey, pageKey)] ?? null;
         return (_jsx(PhiStructureRegionScaffold, { config: {

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

@@ -155,7 +155,7 @@ function PhiDeveloperBuilderCanvasRegion({ node, area, pageKey, isPagesWorkspace
 }
 export function PhiDeveloperBuilderStructureCanvas({ workspace = "structure", builderMode, area, pageKey, pageDraftsByScope, serverPreviewRegions, pickItems, regionLabels = PHI_REGION_WIDGET_DEFAULT_LABELS, pickerLabels = PHI_BUILDER_CHROME_WIDGET_DEFAULT_LABELS.canvas.picker, }) {
     const { token } = usePhiConfig();
-    const debugScaffold = usePhiDeveloperBuilderStateValue("public", (state) => state.debugScaffold);
+    const debugScaffold = usePhiDeveloperBuilderStateValue((state) => state.debugScaffold);
     const isPreviewMode = builderMode === "preview";
     const isPagesWorkspace = workspace === "pages";
     const workspaceSpec = isPagesWorkspace ? PHI_PAGES_WORKSPACE_SPEC : PHI_STRUCTURE_WORKSPACE_SPEC;

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

@@ -0,0 +1,26 @@
+import type { PhiDeveloperBuilderRegionDraft } from "../developer-workspace-types";
+import type { PhiBuilderPreviewRegionDraft } from "../preview-transport";
+/**
+ * Brings the server's Region drafts into the Builder store -- only the ones the store does not hold yet.
+ *
+ * The Shells and the Pages workspace each did this for themselves, and differently. The Shells workspace
+ * merged every server draft of an Area whenever the Area changed, over whatever the store held: an
+ * unsaved edit to the Public shell was gone after a look at the Admin shell and back, while the Undo
+ * button still offered to take it back. A draft in the store is the author's; the server's answer only
+ * fills what is missing.
+ *
+ * It renders again only when the set of missing drafts changes. Subscribing to the whole draft map for
+ * that question re-rendered the workspace, and every Region scaffold below it, on every write to any
+ * draft.
+ *
+ * A preview snapshot is the exception: in preview mode the drafts it carries are what is being looked at,
+ * so they are merged as they are.
+ */
+export declare function usePhiBuilderRegionDraftHydration({ draftKeys, serverDrafts, builderMode, previewRegionDrafts, }: {
+    /** The drafts this workspace shows. */
+    draftKeys: readonly string[];
+    /** What the server answered for them, keyed like the store. */
+    serverDrafts: Readonly<Record<string, PhiDeveloperBuilderRegionDraft | null | undefined>> | null | undefined;
+    builderMode: string;
+    previewRegionDrafts: Record<string, PhiBuilderPreviewRegionDraft> | null | undefined;
+}): void;

package/plugins/runtime-modules/builder/clients/use-region-draft-hydration.js

@@ -0,0 +1,36 @@
+"use client";
+import { useCallback, useEffect } from "react";
+import { getPhiDeveloperRegionDraftsSnapshot, mergePhiDeveloperRegionDrafts, usePhiDeveloperRegionDraftsValue, } from "../developer-workspace-store";
+/**
+ * Brings the server's Region drafts into the Builder store -- only the ones the store does not hold yet.
+ *
+ * The Shells and the Pages workspace each did this for themselves, and differently. The Shells workspace
+ * merged every server draft of an Area whenever the Area changed, over whatever the store held: an
+ * unsaved edit to the Public shell was gone after a look at the Admin shell and back, while the Undo
+ * button still offered to take it back. A draft in the store is the author's; the server's answer only
+ * fills what is missing.
+ *
+ * It renders again only when the set of missing drafts changes. Subscribing to the whole draft map for
+ * that question re-rendered the workspace, and every Region scaffold below it, on every write to any
+ * draft.
+ *
+ * A preview snapshot is the exception: in preview mode the drafts it carries are what is being looked at,
+ * so they are merged as they are.
+ */
+export function usePhiBuilderRegionDraftHydration({ draftKeys, serverDrafts, builderMode, previewRegionDrafts, }) {
+    const missingDraftKeys = usePhiDeveloperRegionDraftsValue(useCallback((drafts) => draftKeys.filter((draftKey) => drafts[draftKey] == null).join("\u0000"), [draftKeys]));
+    useEffect(() => {
+        if (builderMode === "preview" && previewRegionDrafts && Object.keys(previewRegionDrafts).length > 0) {
+            mergePhiDeveloperRegionDrafts(previewRegionDrafts);
+        }
+        if (!missingDraftKeys || !serverDrafts) {
+            return;
+        }
+        // `missingDraftKeys` is the reason to run again; the snapshot is what is read.
+        const regionDrafts = getPhiDeveloperRegionDraftsSnapshot();
+        const missingDrafts = Object.fromEntries(Object.entries(serverDrafts).filter((entry) => entry[1] != null && regionDrafts[entry[0]] == null));
+        if (Object.keys(missingDrafts).length > 0) {
+            mergePhiDeveloperRegionDrafts(missingDrafts);
+        }
+    }, [builderMode, missingDraftKeys, previewRegionDrafts, serverDrafts]);
+}

package/plugins/runtime-modules/builder/clients/widget-effects-editor.js

@@ -9,7 +9,7 @@ export function PhiWidgetEffectsToolButton({ effects, target, disabled = false,
     const open = () => {
         if (disabled || !onChange)
             return;
-        openPhiDeveloperBuilderEffectsEditor("public", effects ?? {}, target, onChange);
+        openPhiDeveloperBuilderEffectsEditor(effects ?? {}, target, onChange);
     };
     return (_jsx("div", { className: "phi-layout-affordance phi-layout-affordance--effects", onMouseDown: (event) => { event.preventDefault(); event.stopPropagation(); }, onClick: (event) => event.stopPropagation(), style: { "--phi-layout-affordance-size": "var(--ant-control-height-sm)" }, children: _jsx(PhiButtonControl, { ariaLabel: labels.openEditor, tooltip: labels.openEditor, icon: _jsx(PhiIcon, { name: "node-index", size: "inherit" }), type: "text", size: "small", disabled: disabled || !onChange, onClick: open }) }));
 }

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

@@ -74,6 +74,7 @@ export function PhiDeveloperBuilderWidgetInspectorWidgetClient({ section, builde
             widgetReferenceOptions,
             backgroundLabels,
             borderLabels,
+            renderMediaPicker,
             colorPickerLabels,
             iconPickerLabels,
             fieldLabels,

package/plugins/runtime-modules/builder/clients/workspace-scope-boundary.js

@@ -8,8 +8,8 @@ import { usePhiSignalIdentity } from "../../../../components/runtime/runtime-sig
 import { usePhiVisualAnchorParts } from "../../../../components/runtime/runtime-visual-anchors";
 import { PHI_BUILDER_PAGE_REGION_KEYS, PHI_BUILDER_SHELL_REGION_KEYS } from "../region-keys";
 export function PhiBuilderWorkspaceScopeBoundary({ kind, targetArea, targetPageKey, children, }) {
-    const activeArea = usePhiDeveloperBuilderStateValue("public", (state) => state.area);
-    const activePageKey = usePhiDeveloperBuilderStateValue("public", (state) => state.pageKey);
+    const activeArea = usePhiDeveloperBuilderStateValue((state) => state.area);
+    const activePageKey = usePhiDeveloperBuilderStateValue((state) => state.pageKey);
     const scopeMatches = activeArea === targetArea &&
         (targetPageKey == null || activePageKey === targetPageKey);
     /*

package/plugins/runtime-modules/builder/cms-instance-allocator.js

@@ -2,7 +2,7 @@
 import { createPhiDraftCmsInstanceId } from "../../../types/cms-instance-id";
 import { isPhiBuilderPageScopedRegion } from "./region-keys";
 import { getPhiDeveloperBuilderDraftAllocation, savePhiDeveloperBuilderDraft, } from "./persistence";
-import { builderWorkspaceStore, getPhiDeveloperBuilderStateSnapshot, getPhiDeveloperRegionDraftsSnapshot, } from "./developer-workspace-store";
+import { takePhiBuilderDraftNodeSequence, getPhiDeveloperBuilderStateSnapshot, getPhiDeveloperRegionDraftsSnapshot, } from "./developer-workspace-store";
 import { createPhiBuilderDraftAllocationKey } from "./draft-allocation-key";
 import { resolvePhiBuilderActivePageCatalog } from "../../../helpers/cms-page-catalog";
 const pendingDraftCreations = new Map();
@@ -11,13 +11,13 @@ function getPhiBuilderDraftAllocationKey(area, pageKey, regionKey) {
 }
 async function ensurePhiBuilderDraftAllocation(input) {
     const allocationKey = getPhiBuilderDraftAllocationKey(input.area, input.pageKey, input.regionKey);
-    if (getPhiDeveloperBuilderStateSnapshot("public").draftAllocations[allocationKey]) {
+    if (getPhiDeveloperBuilderStateSnapshot().draftAllocations[allocationKey]) {
         return;
     }
     let pending = pendingDraftCreations.get(allocationKey);
     if (!pending) {
         pending = (async () => {
-            const state = getPhiDeveloperBuilderStateSnapshot("public");
+            const state = getPhiDeveloperBuilderStateSnapshot();
             const workspaceKind = isPhiBuilderPageScopedRegion(input.regionKey) ? "pages" : "structure";
             const existing = await getPhiDeveloperBuilderDraftAllocation({
                 area: input.area,
@@ -44,30 +44,10 @@ async function ensurePhiBuilderDraftAllocation(input) {
 export async function allocatePhiBuilderCmsInstanceId(input) {
     await ensurePhiBuilderDraftAllocation(input);
     const allocationKey = getPhiBuilderDraftAllocationKey(input.area, input.pageKey, input.regionKey);
-    let allocated = null;
-    builderWorkspaceStore.patch("public", (current) => {
-        const allocation = current.draftAllocations[allocationKey];
-        if (!allocation) {
-            throw new Error(`Missing Draft allocation state for "${allocationKey}".`);
-        }
-        allocated = createPhiDraftCmsInstanceId({
-            domain: isPhiBuilderPageScopedRegion(input.regionKey) ? "page" : "area",
-            draftRevisionId: allocation.revisionId,
-            sequence: allocation.nextNodeSequence,
-        });
-        return {
-            ...current,
-            draftAllocations: {
-                ...current.draftAllocations,
-                [allocationKey]: {
-                    ...allocation,
-                    nextNodeSequence: allocation.nextNodeSequence + 1,
-                },
-            },
-        };
+    const allocation = takePhiBuilderDraftNodeSequence(allocationKey);
+    return createPhiDraftCmsInstanceId({
+        domain: isPhiBuilderPageScopedRegion(input.regionKey) ? "page" : "area",
+        draftRevisionId: allocation.revisionId,
+        sequence: allocation.nextNodeSequence,
     });
-    if (!allocated) {
-        throw new Error(`Failed to allocate a CMS instance id for "${allocationKey}".`);
-    }
-    return allocated;
 }

package/plugins/runtime-modules/builder/controller/client.d.ts

@@ -11,20 +11,10 @@ export declare const PHI_BUILDER_RUNTIME_CONTROLLER_PLUGIN: {
     allowedMountScopes: "area"[];
     runtimeSignals: {
         emits: ({
-            id: string;
-            action: "start";
-            valueType: "json";
-            valueSchema: `${string}/signals/${string}`;
-        } | {
             id: string;
             action: "change";
             valueType: "json";
             valueSchema: `${string}/signals/${string}`;
-        } | {
-            id: string;
-            action: "stop";
-            valueType: "json";
-            valueSchema: `${string}/signals/${string}`;
         } | {
             id: string;
             action: "activate";
@@ -48,11 +38,6 @@ export declare const PHI_BUILDER_RUNTIME_CONTROLLER_PLUGIN: {
             action: "change";
             valueType: "boolean";
             valueSchema?: undefined;
-        } | {
-            id: string;
-            action: "drop";
-            valueType: "json";
-            valueSchema: `${string}/signals/${string}`;
         })[];
         listens: ({
             id: string;

package/plugins/runtime-modules/builder/controller/definition.d.ts

@@ -60,20 +60,10 @@ export declare const PHI_BUILDER_RUNTIME_CONTROLLER_DEFINITION: {
     allowedMountScopes: "area"[];
     runtimeSignals: {
         emits: ({
-            id: string;
-            action: "start";
-            valueType: "json";
-            valueSchema: `${string}/signals/${string}`;
-        } | {
             id: string;
             action: "change";
             valueType: "json";
             valueSchema: `${string}/signals/${string}`;
-        } | {
-            id: string;
-            action: "stop";
-            valueType: "json";
-            valueSchema: `${string}/signals/${string}`;
         } | {
             id: string;
             action: "activate";
@@ -97,11 +87,6 @@ export declare const PHI_BUILDER_RUNTIME_CONTROLLER_DEFINITION: {
             action: "change";
             valueType: "boolean";
             valueSchema?: undefined;
-        } | {
-            id: string;
-            action: "drop";
-            valueType: "json";
-            valueSchema: `${string}/signals/${string}`;
         })[];
         listens: ({
             id: string;

package/plugins/runtime-modules/builder/controller/definition.js

@@ -1,6 +1,5 @@
 import { PHI_SIGNAL_VALUE_SCHEMAS, readPhiSignalRouteSet, } from "../../../../types/signals";
 import { PHI_BUILDER_CONTROLLER_KEY, PHI_BUILDER_CONTROLLER_PLUGIN_KEY } from "./address";
-import { PHI_DRAG_SOURCE_CONTROL_SIGNALS } from "../../../../components/widgets/signals/control-signal-capabilities";
 import { PHI_BUILDER_CHROME_WIDGET_DEFAULT_LABELS } from "../../../../components/widgets/label-types/builder-chrome";
 /** The three Effects Forms, each with its own values, submit and reset. */
 export const PHI_BUILDER_EFFECTS_CAPABILITY_SECTIONS = ["appearance", "transitions", "viewport"];
@@ -136,13 +135,6 @@ export const PHI_BUILDER_RUNTIME_CONTROLLER_DEFINITION = {
             ...dialogEmits("publicRoutes"),
             { id: "publicRoutesReload", action: "activate", valueType: "none" },
             { id: "modulesTableReload", action: "activate", valueType: "none" },
-            ...PHI_DRAG_SOURCE_CONTROL_SIGNALS.emits,
-            {
-                id: "drop",
-                action: "drop",
-                valueType: "json",
-                valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.dragDrop,
-            },
         ],
         listens: [
             {

package/plugins/runtime-modules/builder/controller/draft-command-controller.d.ts

@@ -2,8 +2,7 @@ import { type PhiHistoryLabels } from "../../../../components/widgets/label-type
 import type { PhiBuilderSavedHistoryHead } from "./draft-status-controller";
 import type { PhiDeveloperBuilderArea, PhiDeveloperBuilderRegionDraft, PhiDeveloperBuilderWorkspaceState } from "../developer-workspace-types";
 export type PhiDeveloperBuilderToolbarCommand = "save" | "preview" | "publish" | "undo" | "redo" | "reset";
-export declare function usePhiBuilderDraftCommandController({ defaultArea, effectiveArea, effectiveNavKey, effectivePageKey, pathname, captureHistoryHead, reportSaved, hasUnsavedChanges, shellPresetDraftsByArea, state, historyLabels, }: {
-    defaultArea: PhiDeveloperBuilderArea;
+export declare function usePhiBuilderDraftCommandController({ effectiveArea, effectiveNavKey, effectivePageKey, pathname, captureHistoryHead, reportSaved, hasUnsavedChanges, shellPresetDraftsByArea, state, historyLabels, }: {
     effectiveArea: PhiDeveloperBuilderArea;
     effectiveNavKey: string;
     effectivePageKey: string;

package/plugins/runtime-modules/builder/controller/draft-command-controller.js

@@ -12,15 +12,14 @@ import { deleteCmsDraft } from "../../../../helpers/cms-draft-delete";
 import { buildPhiBuilderLiveHref, clearPhiDeveloperBuilderDraftAllocation, createPhiDeveloperBuilderInitialPageDrafts, getPhiDeveloperBuilderModulesDraftAllocation, savePhiDeveloperBuilderModulesDraft, publishPhiDeveloperBuilderModulesDraft, previewPhiDeveloperBuilderDraft, publishPhiDeveloperBuilderDraft, savePhiDeveloperBuilderDraft, } from "../persistence";
 import { clearPhiBuilderNavigationDraft, getPhiBuilderNavigationDraftSnapshot, updatePhiBuilderNavigationDraft, restorePhiBuilderNavigationDraft, setPhiBuilderNavigationDraft, } from "../navigation-store";
 import { deletePhiBuilderNavigationDraft, loadPhiBuilderNavigationDraft, loadPhiBuilderNavigationScope, publishPhiBuilderNavigationDraft, savePhiBuilderNavigationDraft, } from "../navigation-persistence";
-import { builderWorkspaceStore, splitWorkspacePatch, getPhiDeveloperRegionDraftsSnapshot, mergePhiDeveloperRegionDrafts, restorePhiDeveloperBuilderAreaMeta, restorePhiDeveloperRegionDrafts, setPhiDeveloperBuilderAreaRootRoute, } from "../developer-workspace-store";
+import { clearPhiBuilderModuleAreasDirty, getPhiDeveloperRegionDraftsSnapshot, markPhiBuilderPageDeleted, restorePhiBuilderWorkspaceState, mergePhiDeveloperRegionDrafts, restorePhiDeveloperBuilderAreaMeta, restorePhiDeveloperRegionDrafts, setPhiDeveloperBuilderAreaRootRoute, } from "../developer-workspace-store";
 import { findPhiBuilderNavigationSurface } from "../../../../helpers/cms-navigation-catalog";
 import { createPhiBuilderHistoryContext, phiBuilderHistory, } from "../history";
 import { usePhiBuilderModuleMetas } from "../plugin-meta-store";
-import { clearPhiBuilderModuleAreasDirty } from "../runtime-module-selection";
-import { phiWorkspaceCatalogStore } from "../../../../components/workspace/catalog-store";
+import { setPhiWorkspaceModuleSelection } from "../workspace-catalog-actions";
 import { applyPhiBuilderNavigationFolderTargets, refreshPhiBuilderNavigationFolderAddresses, } from "../navigation-folder-address";
 import { createPhiBuilderNavigationPathContext } from "../navigation-path-context";
-export function usePhiBuilderDraftCommandController({ defaultArea, effectiveArea, effectiveNavKey, effectivePageKey, pathname, captureHistoryHead, reportSaved, hasUnsavedChanges, shellPresetDraftsByArea, state, historyLabels, }) {
+export function usePhiBuilderDraftCommandController({ effectiveArea, effectiveNavKey, effectivePageKey, pathname, captureHistoryHead, reportSaved, hasUnsavedChanges, shellPresetDraftsByArea, state, historyLabels, }) {
     /*
      * Every one of these is a command from a toolbar somewhere else, so there is nothing on screen to
      * hang a Popconfirm on. Drawn as a Dialog by this Controller rather than asked of Ant Design's
@@ -212,7 +211,7 @@ export function usePhiBuilderDraftCommandController({ defaultArea, effectiveArea
                     scope: { area },
                 });
             }
-            clearPhiBuilderModuleAreasDirty(defaultArea);
+            clearPhiBuilderModuleAreasDirty();
             reportSaved("published", null, savedAt);
             showMessage({
                 level: "success",
@@ -387,13 +386,7 @@ export function usePhiBuilderDraftCommandController({ defaultArea, effectiveArea
                     });
                     const pageDeleteDraftKey = getPhiBuilderRegionDraftKey(effectiveArea, "page_delete", effectivePageKey);
                     mergePhiDeveloperRegionDrafts(nextDrafts);
-                    builderWorkspaceStore.patch(defaultArea, (current) => ({
-                        ...current,
-                        deletedPageDrafts: {
-                            ...current.deletedPageDrafts,
-                            [pageDeleteDraftKey]: true,
-                        },
-                    }));
+                    markPhiBuilderPageDeleted(pageDeleteDraftKey);
                     const result = await savePhiDeveloperBuilderDraft({
                         ...state,
                         deletedPageDrafts: {
@@ -524,30 +517,18 @@ export function usePhiBuilderDraftCommandController({ defaultArea, effectiveArea
                 return;
             }
             if (snapshot.kind === "modules") {
-                phiWorkspaceCatalogStore.patch(defaultArea, (current) => ({
-                    ...current,
-                    runtimeModuleIdsByArea: {
-                        ...(current.runtimeModuleIdsByArea ?? {}),
-                        // `null` recorded "no selection stored", which resolves to the Area's default set.
-                        ...Object.fromEntries(Object.entries(snapshot.moduleIdsByArea).map(([area, moduleIds]) => [
-                            area,
-                            moduleIds ? [...moduleIds] : createPhiDefaultAreaRuntimeModuleIds(area),
-                        ])),
-                    },
-                }));
+                setPhiWorkspaceModuleSelection(Object.fromEntries(Object.entries(snapshot.moduleIdsByArea).map(([area, moduleIds]) => [
+                    area,
+                    // `null` recorded "no selection stored", which resolves to the Area's default set.
+                    moduleIds ? [...moduleIds] : createPhiDefaultAreaRuntimeModuleIds(area),
+                ])));
                 return;
             }
             /*
              * A workspace snapshot spans both halves -- customPages belongs to the catalog, the page drafts
              * to the Builder -- so undo has to put each back where it lives.
              */
-            const { catalog, tool } = splitWorkspacePatch(snapshot.state);
-            if (Object.keys(catalog).length > 0) {
-                phiWorkspaceCatalogStore.patch(defaultArea, (current) => ({ ...current, ...catalog }));
-            }
-            if (Object.keys(tool).length > 0) {
-                builderWorkspaceStore.patch(defaultArea, (current) => ({ ...current, ...tool }));
-            }
+            restorePhiBuilderWorkspaceState(snapshot.state);
         };
         /*
          * An undo says what it took back. The canvas changes in place, and a step that moved a node out of

package/plugins/runtime-modules/builder/controller/draft-status-controller.js

@@ -1,5 +1,5 @@
 "use client";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { PHI_SIGNAL_VALUE_SCHEMAS } from "../../../../types/signals";
 import { usePhiSignalDispatcher, usePhiSignalListener } from "../../../../components/runtime/runtime-signal-bus";
 import { resolvePhiBuilderCmsStoragePath } from "../../../../helpers/cms-paths";
@@ -82,6 +82,13 @@ export function usePhiBuilderDraftStatusController({ commandWorkspace, effective
     const subject = target?.subject ?? null;
     const historyContext = target?.historyContext ?? null;
     const [stored, setStored] = useState(null);
+    /*
+     * The history head each target was last saved or first read at. The status is read again whenever the
+     * target changes -- an Area switched away from and back -- and taking the head at that moment called
+     * every edit made before it saved: back on an Area with an unsaved edit, the badge said "Published".
+     * A target keeps the head it was read or saved at until it is saved again.
+     */
+    const savedHeadsRef = useRef(new Map());
     const historyHead = phiBuilderHistory.useHead(historyContext ?? PHI_BUILDER_NO_DRAFT_HISTORY_CONTEXT);
     useEffect(() => {
         if (targetUrl === null) {
@@ -95,7 +102,12 @@ export function usePhiBuilderDraftStatusController({ commandWorkspace, effective
             setStored({
                 requestKey: targetUrl,
                 ...next,
-                savedHead: historyContext === null ? null : phiBuilderHistory.getHead(historyContext),
+                savedHead: (() => {
+                    if (!savedHeadsRef.current.has(targetUrl)) {
+                        savedHeadsRef.current.set(targetUrl, historyContext === null ? null : phiBuilderHistory.getHead(historyContext));
+                    }
+                    return savedHeadsRef.current.get(targetUrl);
+                })(),
             });
         };
         void fetch(targetUrl, { method: "GET", cache: "no-store" })
@@ -177,6 +189,7 @@ export function usePhiBuilderDraftStatusController({ commandWorkspace, effective
         if (targetUrl === null) {
             return;
         }
+        savedHeadsRef.current.set(targetUrl, savedAt.head);
         setStored({
             requestKey: targetUrl,
             status,

package/plugins/runtime-modules/builder/controller/inspector-controller.d.ts

@@ -1,3 +1,2 @@
 import type { PhiBuilderInspectorAction } from "../inspector-actions";
-import type { PhiDeveloperBuilderArea } from "../developer-workspace-types";
-export declare function runPhiDeveloperBuilderInspectorAction(defaultArea: PhiDeveloperBuilderArea, action: PhiBuilderInspectorAction): void;
+export declare function runPhiDeveloperBuilderInspectorAction(action: PhiBuilderInspectorAction): void;

package/plugins/runtime-modules/builder/controller/inspector-controller.js

@@ -5,7 +5,7 @@ import { findPhiBuilderTreeNode, writePhiBuilderNode } from "../node-config-writ
 import { getDefaultRegionDraft, resolveRegionDraftKey, } from "../developer-region-drafts";
 import { getPhiBuilderRegionDraftKey, isPhiBuilderPageScopedRegion, } from "../region-keys";
 import { createPhiBuilderRegionHistoryContext } from "../history";
-import { builderWorkspaceStore, getPhiDeveloperRegionDraftsSnapshot, setPhiDeveloperRegionDraft, getPhiDeveloperBuilderStateSnapshot, } from "../developer-workspace-store";
+import { setPhiBuilderSelectedLayoutAnchor, getPhiDeveloperRegionDraftsSnapshot, setPhiDeveloperRegionDraft, getPhiDeveloperBuilderStateSnapshot, } from "../developer-workspace-store";
 function resolveWidgetSizeFromGeometry(geometry) {
     return {
         size: geometry.size ?? undefined,
@@ -85,8 +85,8 @@ function readRecordPatch(value) {
         ? value
         : null;
 }
-export function runPhiDeveloperBuilderInspectorAction(defaultArea, action) {
-    const state = getPhiDeveloperBuilderStateSnapshot(defaultArea);
+export function runPhiDeveloperBuilderInspectorAction(action) {
+    const state = getPhiDeveloperBuilderStateSnapshot();
     if (action.kind === "patchSelectedRegionDraft") {
         const patch = readRecordPatch(action.patch);
         const selectedRegionKey = state.nodeKind === "region" ? state.nodeKey.replace(/^region:/, "") : null;
@@ -161,10 +161,7 @@ export function runPhiDeveloperBuilderInspectorAction(defaultArea, action) {
             return;
         }
         patchSelectedStructureDraftConfig(state, "anchor", (config) => ({ ...config, anchor: selectedLayoutAnchor }));
-        builderWorkspaceStore.patch(defaultArea, (current) => ({
-            ...current,
-            selectedLayoutAnchor: selectedLayoutAnchor,
-        }));
+        setPhiBuilderSelectedLayoutAnchor(selectedLayoutAnchor);
         return;
     }
     if (action.kind === "patchSelectedLayoutPadding") {

package/plugins/runtime-modules/builder/controller/page-controller.d.ts

@@ -3,10 +3,9 @@ import { type PhiSignalValue } from "../../../../types/signals";
 import type { PhiBuilderPageMetaPresentationLabels } from "../controller/definition";
 type PhiBuilderPageControllerState = Pick<PhiDeveloperBuilderWorkspaceState, "customPages" | "modulePresetPagesByArea" | "pageMetaDrafts" | "persistedPageCatalogByArea">;
 type PhiPageMetaDialogMode = "create" | "update";
-export declare function usePhiBuilderPageController({ emitCapability, defaultArea, effectiveArea, effectivePageKey, pageMetaLabels, state, }: {
+export declare function usePhiBuilderPageController({ emitCapability, effectiveArea, effectivePageKey, pageMetaLabels, state, }: {
     /** The Builder Controller's own output: the Page metadata dialog is routed by the Pages Page. */
     emitCapability: (capabilityId: string, value: PhiSignalValue, correlationId?: string | null) => void;
-    defaultArea: PhiDeveloperBuilderArea;
     effectiveArea: PhiDeveloperBuilderArea;
     effectivePageKey: string;
     pageMetaLabels: PhiBuilderPageMetaPresentationLabels;