@phis/ui 0.4.2 → 0.4.4

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

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

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

@@ -1,4 +1,4 @@
-import { type PhiBackgroundControlProps } from "../../../../components/controls/phi-background-control";
+import type { PhiBackgroundControlProps } from "../../../../components/controls/phi-background-control";
 import type { PhiInspectorSurfaceLabels } from "./inspector-surface-labels";
 import type { PhiInspectorWidgetLabels } from "../../../../components/widgets/label-types/inspector";
 import type { PhiBackgroundWidgetLabels } from "../../../../components/widgets/label-types/background";

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

@@ -2,30 +2,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { usePhiBaseLayoutOwnSlotController } from "../../../../components/layouts/phi-layout-slot-state";
-import { PhiBackgroundControl } from "../../../../components/controls/phi-background-control";
-import { PhiBorderControl } from "../../../../components/controls/phi-border-control";
 import { PhiSurfaceControl } from "../../../../components/controls/phi-surface-control";
-import { PhiShadowControl } from "../../../../components/controls/phi-shadow-control";
 import { PhiViewportVisibilityControl } from "../../../../components/controls/phi-viewport-visibility-control";
 import { PhiPlacementMatrixControl } from "../../../../components/controls/phi-placement-matrix-control";
 import { PhiInspectorSectionContent } from "./inspector-section-content";
 import { PhiGridPlacementSettings } from "./grid-placement-settings";
 import { resolvePhiLayoutSignalEndpoints, resolvePhiSignalEndpointCapabilities, } from "../../../../components/widgets/signals/signal-endpoints";
-import { readPhiShadow } from "../../../../types/layout-style";
 import { normalizePhiPaddingWidgetConfig } from "../../../../types/cms-config";
 import {} from "../developer-workspace-types";
 import { isPhiInspectorConfigFieldVisible, renderPhiInspectorPaddingConfigControl, renderPhiInspectorConfigField, renderPhiInspectorSlotTextsField, renderPhiInspectorSwitchRow, } from "./inspector-config-field";
 import { hasPhiFlag } from "../../../../helpers/flags";
 import { PhiCmsFlags } from "../../../../constants/phi-cms";
 import { PhiInspectorSignalSection, } from "./inspector-signal-section";
-import { PhiFlexControl } from "../../../../components/controls/phi-flex-control";
 import { PhiTypographyControl } from "../../../../components/controls/phi-typography-control";
 const PHI_GAP_SM = "var(--ant-padding-sm)";
 function isPhiCmsChromeConfigField(field) {
     return (field.type === "padding"
-        || field.type === "background"
-        || field.type === "border"
-        || field.type === "shadow"
         || field.type === "grid-placement"
         || field.type === "column-count");
 }
@@ -70,7 +62,7 @@ export function PhiDeveloperBuilderLayoutInspectorWidgetClient({ section, builde
     const chromeFields = declaredFields
         .filter(isPhiCmsChromeConfigField)
         .filter((field) => isPhiInspectorConfigFieldVisible(field, currentLayoutConfigRecord))
-        .filter((field) => field.type !== "grid-placement" && field.type !== "column-count");
+        .filter((field) => field.type === "padding");
     const gridPlacementField = declaredFields
         .filter(isPhiCmsChromeConfigField)
         .filter((field) => isPhiInspectorConfigFieldVisible(field, currentLayoutConfigRecord))
@@ -89,8 +81,7 @@ export function PhiDeveloperBuilderLayoutInspectorWidgetClient({ section, builde
     const settingsHasContent = !settingsAnswerIsKnown || !isTargetKind || section !== "settings"
         || settingsFields.length > 0 || gridPlacementField != null
         || (slotTextsFields.length > 0 && textSlots.length > 0)
-        || selectedStructurePlugin?.translatesOwnText === true
-        || chromeFields.some((field) => field.type !== "padding");
+        || selectedStructurePlugin?.translatesOwnText === true;
     const ownSlot = usePhiBaseLayoutOwnSlotController();
     useEffect(() => {
         if (!ownSlot)
@@ -118,16 +109,13 @@ export function PhiDeveloperBuilderLayoutInspectorWidgetClient({ section, builde
             routeScope: signalRouteScope,
         });
     const signalCapabilities = resolvePhiSignalEndpointCapabilities(signalEndpoints);
-    /*
-     * The chrome fields a layout declares itself: its own padding, which has the Drawer's Paddings panel,
-     * and anything else -- Split Card's two cards -- which lives in Settings with the layout's other fields.
-     */
+    // The padding fields a layout declares itself, each with its own panel in the Drawer.
     const declaredChromeSections = chromeFields.map((field) => ({
         field,
         section: {
             key: field.section ?? field.key,
             title: field.label,
-            children: (_jsx("div", { style: { display: "grid", gap: PHI_GAP_SM, width: "100%" }, children: field.type === "padding" ? (renderPhiInspectorPaddingConfigControl({
+            children: (_jsx("div", { style: { display: "grid", gap: PHI_GAP_SM, width: "100%" }, children: renderPhiInspectorPaddingConfigControl({
                     field,
                     disabled: isPreviewMode || (!onPaddingChange && !onConfigPatch),
                     config: isCanonicalPaddingField(field)
@@ -144,14 +132,11 @@ export function PhiDeveloperBuilderLayoutInspectorWidgetClient({ section, builde
                         }
                         onConfigPatch?.(Object.fromEntries(Object.entries(patch).map(([key, value]) => [key, value ?? null])));
                     },
-                })) : field.type === "background" ? (_jsx(PhiBackgroundControl, { mode: "control", disabled: isPreviewMode || !onConfigPatch, value: currentDraftRecord?.[field.key] ?? null, config: layoutDefaultConfigRecord?.[field.key] ?? null, onChange: (background) => onConfigPatch?.({ [field.key]: background }), labels: backgroundLabels, colorPickerLabels: colorPickerLabels, colorPickerPlacement: "left", renderMediaPicker: renderMediaPicker })) : field.type === "border" ? (_jsx(PhiBorderControl, { mode: "control", disabled: isPreviewMode || !onConfigPatch, value: currentDraftRecord?.[field.key] ?? null, config: layoutDefaultConfigRecord?.[field.key] ?? null, onChange: (border) => onConfigPatch?.({ [field.key]: border }), labels: borderLabels, colorPickerLabels: colorPickerLabels, colorPickerPlacement: "left" })) : (_jsx(PhiShadowControl, { mode: "control", disabled: isPreviewMode || !onConfigPatch, value: readPhiShadow(currentDraftRecord?.[field.key]) ??
-                        readPhiShadow(layoutDefaultConfigRecord?.[field.key]) ??
-                        null, onChange: (shadow) => onConfigPatch?.({ [field.key]: shadow }) })) })),
+                }) })),
         },
     }));
-    const declaredCardSections = declaredChromeSections.filter((entry) => entry.field.type !== "padding");
     return (_jsx("div", { style: { display: "grid", gap: PHI_GAP_SM, width: "100%" }, children: !isTargetKind ? (_jsx(PhiTypographyControl, { type: "secondary", children: "Select a layout to edit its geometry." })) : (_jsx("div", { style: { display: "grid", gap: PHI_GAP_SM, width: "100%" }, children: _jsx(PhiInspectorSectionContent, { sectionKey: section ?? "settings", sections: [
-                    ...(settingsFields.length > 0 || gridPlacementField || declaredCardSections.length > 0 ||
+                    ...(settingsFields.length > 0 || gridPlacementField ||
                         selectedStructurePlugin?.translatesOwnText || (slotTextsFields.length > 0 && textSlots.length > 0)
                         ? [
                             {
@@ -164,6 +149,9 @@ export function PhiDeveloperBuilderLayoutInspectorWidgetClient({ section, builde
                                             config: currentDraftRecord ?? {},
                                             defaultConfig: layoutDefaultConfigRecord,
                                             disabled: isPreviewMode,
+                                            backgroundLabels,
+                                            borderLabels,
+                                            renderMediaPicker,
                                             colorPickerLabels,
                                             iconPickerLabels,
                                             fieldLabels,
@@ -185,7 +173,7 @@ export function PhiDeveloperBuilderLayoutInspectorWidgetClient({ section, builde
                                                 disabled: isPreviewMode,
                                                 ...(onTranslateChange ? { onChange: onTranslateChange } : {}),
                                             })
-                                            : null, gridPlacementField ? (_jsx(PhiGridPlacementSettings, { config: currentDraftRecord ?? {}, defaultConfig: layoutDefaultConfigRecord, occupiedSlotIndices: gridOccupiedSlotIndices, labels: gridLabels, withDistribution: gridPlacementField.type === "grid-placement", disabled: isPreviewMode, onConfigChange: onConfigPatch ? (key, value) => onConfigPatch({ [key]: value }) : undefined })) : null, declaredCardSections.map((entry) => (_jsxs(PhiFlexControl, { vertical: true, gap: 8, style: { width: "100%", minWidth: 0 }, children: [_jsx(PhiTypographyControl, { children: entry.section.title }), entry.section.children] }, entry.section.key)))] })),
+                                            : null, gridPlacementField ? (_jsx(PhiGridPlacementSettings, { config: currentDraftRecord ?? {}, defaultConfig: layoutDefaultConfigRecord, occupiedSlotIndices: gridOccupiedSlotIndices, labels: gridLabels, withDistribution: gridPlacementField.type === "grid-placement", disabled: isPreviewMode, onConfigChange: onConfigPatch ? (key, value) => onConfigPatch({ [key]: value }) : undefined })) : null] })),
                             },
                         ]
                         : []),
@@ -207,9 +195,7 @@ export function PhiDeveloperBuilderLayoutInspectorWidgetClient({ section, builde
                             title: surfaceLabels?.section ?? "Surface",
                             children: (_jsx(PhiSurfaceControl, { disabled: isPreviewMode, value: currentDraft?.surface ?? null, onChange: (surface) => onSurfaceChange?.(surface), labels: surfaceLabels?.parts, backgroundLabels: backgroundLabels, borderLabels: borderLabels, colorPickerLabels: colorPickerLabels, renderMediaPicker: renderMediaPicker })),
                         },
-                        ...declaredChromeSections
-                            .filter((entry) => entry.field.type === "padding")
-                            .map((entry) => entry.section),
+                        ...declaredChromeSections.map((entry) => entry.section),
                     ],
                     {
                         key: "signals",

package/plugins/runtime-modules/builder/clients/layout-scaffold-overlays.js

@@ -1,14 +1,19 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { usePhiConfig } from "../../../../components/root/phi-config-provider";
+import { usePhiPageModeToken } from "../../../../components/root/phi-config-provider";
+import { usePhiPageModeTone } from "../../../../components/surface/phi-surface-tone";
 import {} from "../node-kind-theme";
 import { PhiLayoutAnchoredOverlay } from "../../../../components/layouts/clients/phi-layout-anchored-overlay";
 import { PhiLayoutConfigButtonWidget, PhiLayoutDeleteButtonWidget, PhiLayoutDragButtonWidget, PhiPlusButtonWidget, } from "./layout-scaffold-buttons";
 export function PhiLayoutPlusButtonOverlay({ slotIndex, label, onInsert, anchor, slotRole, inset, ariaLabel, dropTarget, children, }) {
-    return (_jsx(PhiLayoutAnchoredOverlay, { anchor: anchor, slotRole: slotRole, inset: inset, children: children ?? (_jsx(PhiPlusButtonWidget, { slotIndex: slotIndex, label: label, ariaLabel: ariaLabel, onInsert: onInsert, dropTarget: dropTarget })) }));
+    // In the editor's mode, not a tone's: the insert button stays the Builder's inside a toned Surface.
+    const pageModeTone = usePhiPageModeTone();
+    return (_jsx(PhiLayoutAnchoredOverlay, { anchor: anchor, slotRole: slotRole, inset: inset, children: pageModeTone.wrap(children ?? (_jsx(PhiPlusButtonWidget, { slotIndex: slotIndex, label: label, ariaLabel: ariaLabel, onInsert: onInsert, dropTarget: dropTarget }))) }));
 }
 export function PhiLayoutDeleteButtonOverlay({ onDelete, onOpenInspector, ariaLabel, inspectorAriaLabel, top, right, bottom, left, placement, transform, zIndex = 10, nodeKind, leading, children, }) {
-    const { token } = usePhiConfig();
+    // The editor's colours, not a tone's: a toolbar inside a toned Surface stays in the page's mode.
+    const token = usePhiPageModeToken();
+    const pageModeTone = usePhiPageModeTone();
     const resolvedTop = top ?? (placement ? "auto" : -10);
     const resolvedRight = right ?? (placement === "bottom-left" ? "auto" : 0);
     const resolvedBottom = bottom ?? (placement ? -10 : "auto");
@@ -42,7 +47,7 @@ export function PhiLayoutDeleteButtonOverlay({ onDelete, onOpenInspector, ariaLa
             color: "inherit",
         };
     })();
-    return (_jsx("div", { className: "phi-layout-scaffold-delete", "data-phi-builder-scaffold-action": "true", "data-phi-builder-node-kind": nodeKind ?? undefined, onClick: (event) => event.stopPropagation(), onMouseDown: (event) => event.stopPropagation(), onPointerDown: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), style: {
+    return (_jsx("div", { className: pageModeTone.className ? `phi-layout-scaffold-delete ${pageModeTone.className}` : "phi-layout-scaffold-delete", "data-phi-builder-scaffold-action": "true", "data-phi-builder-node-kind": nodeKind ?? undefined, onClick: (event) => event.stopPropagation(), onMouseDown: (event) => event.stopPropagation(), onPointerDown: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), style: {
             /*
              * The bar is as wide as its buttons, and it says so itself.
              *
@@ -63,7 +68,7 @@ export function PhiLayoutDeleteButtonOverlay({ onDelete, onOpenInspector, ariaLa
             "--phi-layout-scaffold-delete-border": chromeTheme.border,
             "--phi-layout-scaffold-delete-color": chromeTheme.color,
             "--phi-layout-scaffold-delete-shadow": "var(--ant-box-shadow-tertiary)",
-        }, children: children ?? (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [leading, onOpenInspector ? (_jsx(PhiLayoutConfigButtonWidget, { onOpenInspector: onOpenInspector, ariaLabel: inspectorAriaLabel })) : null, _jsx(PhiLayoutDeleteButtonWidget, { onDelete: onDelete, ariaLabel: ariaLabel })] })) }));
+        }, children: pageModeTone.wrap(children ?? (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [leading, onOpenInspector ? (_jsx(PhiLayoutConfigButtonWidget, { onOpenInspector: onOpenInspector, ariaLabel: inspectorAriaLabel })) : null, _jsx(PhiLayoutDeleteButtonWidget, { onDelete: onDelete, ariaLabel: ariaLabel })] }))) }));
 }
 export function PhiLayoutDragButtonOverlay({ dragData, ariaLabel, nodeKind, top = "50%", left = 0, zIndex = 41, }) {
     return (_jsx(PhiLayoutDeleteButtonOverlay, { onDelete: () => undefined, top: top, right: "auto", bottom: "auto", left: left, transform: "translate(-50%, -50%)", zIndex: zIndex, nodeKind: nodeKind, children: _jsx(PhiLayoutDragButtonWidget, { ariaLabel: ariaLabel, dragData: dragData }) }));

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

@@ -8,7 +8,7 @@ import { usePhiConfig } from "../../../../components/root/phi-config-provider";
 import { PhiFlexControl } from "../../../../components/controls/phi-flex-control";
 export function PhiBuilderModeSwitchWidgetClient({ disabled = false, labels = PHI_BUILDER_CHROME_WIDGET_DEFAULT_LABELS, }) {
     const { token } = usePhiConfig();
-    const builderMode = usePhiDeveloperBuilderStateValue("public", (state) => state.builderMode);
+    const builderMode = usePhiDeveloperBuilderStateValue((state) => state.builderMode);
     const isDisabled = disabled;
     const controlSignals = usePhiControlSignalController({
         key: "builderMode",

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

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

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

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

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

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

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

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

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;