@itwin/appui-react 4.8.3 → 4.9.0

package/lib/esm/appui-react/widget-panels/Frontstage.js

@@ -6,37 +6,47 @@
  * @module Frontstage
  */
 // cSpell:ignore popout
-import "./Frontstage.scss";
+import { ToolbarPopupAutoHideContext } from "@itwin/components-react";
+import { assert, Logger, ProcessDetector } from "@itwin/core-bentley";
+import { IModelApp } from "@itwin/core-frontend";
+import { Size, UiStateStorageStatus } from "@itwin/core-react";
+import classNames from "classnames";
 import produce from "immer";
 import * as React from "react";
 import { unstable_batchedUpdates } from "react-dom";
-import { Logger, ProcessDetector } from "@itwin/core-bentley";
-import { Rectangle, UiStateStorageStatus } from "@itwin/core-react";
-import { ToolbarPopupAutoHideContext } from "@itwin/components-react";
-import { addDockedToolSettings, addFloatingWidget, addPanelWidget, addRemovedTab, addTab, addTabToWidget, createLayoutStore, createNineZoneState, floatingWidgetBringToFront, FloatingWidgets, getTabLocation, getUniqueId, getWidgetPanelSectionId, isFloatingTabLocation, isPanelTabLocation, NineZone, NineZoneStateReducer, PreviewLayoutFeaturesProvider, PreviewMaximizedWidgetFeatureProvider, removeTab, useLayout, WidgetPanels, } from "@itwin/appui-layout-react";
-import { useActiveFrontstageDef, } from "../frontstage/FrontstageDef";
-import { StagePanelState, toPanelSide } from "../stagepanels/StagePanelDef";
+import { useSelector } from "react-redux";
+import { useActiveFrontstageDef } from "../frontstage/FrontstageDef";
+import { InternalFrontstageManager } from "../frontstage/InternalFrontstageManager";
+import { useEscapeSetFocusToHome } from "../hooks/useEscapeSetFocusToHome";
+import { useUiVisibility } from "../hooks/useUiVisibility";
+import { createLayoutStore, useLayout } from "../layout/base/LayoutStore";
+import { getUniqueId, NineZone } from "../layout/base/NineZone";
+import { activateDroppedTab } from "../layout/state/activateDroppedTab";
+import { createNineZoneState } from "../layout/state/NineZoneState";
+import { NineZoneStateReducer } from "../layout/state/NineZoneStateReducer";
+import { getWidgetPanelSectionId } from "../layout/state/PanelState";
+import { WidgetPanels } from "../layout/widget-panels/Panels";
+import { FloatingWidgets } from "../layout/widget/FloatingWidgets";
+import { PreviewHorizontalPanelAlignFeatureProvider } from "../layout/widget/PreviewHorizontalPanelAlign";
+import { PreviewMaximizedWidgetFeatureProvider } from "../layout/widget/PreviewMaximizeToggle";
+import { usePreviewFeatures } from "../preview/PreviewFeatures";
+import { toPanelSide } from "../stagepanels/StagePanelDef";
+import { StagePanelLocation } from "../stagepanels/StagePanelLocation";
+import { StagePanelSection } from "../stagepanels/StagePanelSection";
+import { StagePanelState } from "../stagepanels/StagePanelState";
+import { UiItemsManager } from "../ui-items-provider/UiItemsManager";
 import { UiFramework } from "../UiFramework";
 import { useUiStateStorageHandler } from "../uistate/useUiStateStorage";
+import { WidgetState } from "../widgets/WidgetState";
 import { WidgetContent } from "./Content";
+import { FloatingWidget } from "./FloatingWidget";
+import "./Frontstage.scss";
 import { WidgetPanelsFrontstageContent } from "./FrontstageContent";
 import { ModalFrontstageComposer, useActiveModalFrontstageInfo, } from "./ModalFrontstageComposer";
 import { WidgetPanelsStatusBar } from "./StatusBar";
 import { WidgetPanelsTab } from "./Tab";
 import { WidgetPanelsToolbars } from "./Toolbars";
 import { ToolSettingsContent, useShouldRenderDockedToolSettings, WidgetPanelsToolSettings, } from "./ToolSettings";
-import { useEscapeSetFocusToHome } from "../hooks/useEscapeSetFocusToHome";
-import { useSelector } from "react-redux";
-import { useUiVisibility } from "../hooks/useUiVisibility";
-import { IModelApp } from "@itwin/core-frontend";
-import { FloatingWidget } from "./FloatingWidget";
-import { InternalFrontstageManager } from "../frontstage/InternalFrontstageManager";
-import { WidgetState } from "../widgets/WidgetState";
-import { StagePanelSection } from "../stagepanels/StagePanelSection";
-import { StagePanelLocation } from "../stagepanels/StagePanelLocation";
-import { UiItemsManager } from "../ui-items-provider/UiItemsManager";
-import { usePreviewFeatures } from "../preview/PreviewFeatures";
-import classNames from "classnames";
 function WidgetPanelsFrontstageComponent() {
     const activeModalFrontstageInfo = useActiveModalFrontstageInfo();
     const uiIsVisible = useUiVisibility();
@@ -49,8 +59,8 @@ function WidgetPanelsFrontstageComponent() {
     }) &&
         previewFeatures.contentAlwaysMaxSize &&
         "preview-contentAlwaysMaxSize-topPanelActive";
-    return (React.createElement(PreviewLayoutFeaturesProvider, { ...previewFeatures },
-        React.createElement(PreviewMaximizedWidgetFeatureProvider, { enabled: previewFeatures.enableMaximizedFloatingWidget },
+    return (React.createElement(PreviewMaximizedWidgetFeatureProvider, { enabled: previewFeatures.enableMaximizedFloatingWidget },
+        React.createElement(PreviewHorizontalPanelAlignFeatureProvider, { enabled: previewFeatures.horizontalPanelAlignment },
             React.createElement(WidgetPanelsToolSettings, null),
             React.createElement(ToolbarPopupAutoHideContext.Provider, { value: !uiIsVisible },
                 React.createElement(ModalFrontstageComposer, { stageInfo: activeModalFrontstageInfo }),
@@ -83,8 +93,7 @@ export function useLayoutStore(frontstageDef) {
 export function useUpdateNineZoneSize(frontstageDef) {
     React.useEffect(() => {
         const size = InternalFrontstageManager.nineZoneSize;
-        const state = frontstageDef.nineZoneState;
-        if (!size || !state)
+        if (!size)
             return;
         frontstageDef.dispatch({
             type: "RESIZE",
@@ -95,14 +104,36 @@ export function useUpdateNineZoneSize(frontstageDef) {
         });
     }, [frontstageDef]);
 }
+const log = (reducer) => (state, action) => {
+    Logger.logTrace("appui-react:reducer", `action ${action.type}`, () => ({
+        action,
+        state,
+    }));
+    return reducer(state, action);
+};
 /** @internal */
 export function useNineZoneDispatch(frontstageDef) {
-    return React.useMemo(() => frontstageDef.dispatch, [frontstageDef]);
+    const features = usePreviewFeatures();
+    const reducer = React.useMemo(() => {
+        let nineZoneStateReducer = log(NineZoneStateReducer);
+        nineZoneStateReducer = features.activateDroppedTab
+            ? activateDroppedTab(nineZoneStateReducer)
+            : nineZoneStateReducer;
+        return nineZoneStateReducer;
+    }, [features.activateDroppedTab]);
+    return React.useCallback((action) => {
+        if (action.type === "RESIZE") {
+            InternalFrontstageManager.nineZoneSize = Size.create(action.size);
+        }
+        const state = frontstageDef.nineZoneState;
+        if (!state)
+            return;
+        frontstageDef.nineZoneState = reducer(state, action);
+    }, [frontstageDef, reducer]);
 }
 /** @internal */
 export function WidgetPanelsFrontstage() {
     const frontstageDef = useActiveFrontstageDef();
-    const layout = useLayoutStore(frontstageDef);
     React.useEffect(() => {
         const triggerWidowCloseProcessing = () => {
             frontstageDef && frontstageDef.setIsApplicationClosing(true);
@@ -114,14 +145,16 @@ export function WidgetPanelsFrontstage() {
     }, [frontstageDef]);
     if (!frontstageDef)
         return null;
-    return (React.createElement(ActiveFrontstageDefProvider, { frontstageDef: frontstageDef, layout: layout }));
+    return React.createElement(ActiveFrontstageDefProvider, { frontstageDef: frontstageDef });
 }
 const defaultNineZone = createNineZoneState();
 const tabElement = React.createElement(WidgetPanelsTab, null);
 const floatingWidgetElement = React.createElement(FloatingWidget, null);
 /** @internal */
-export function ActiveFrontstageDefProvider({ frontstageDef, layout, }) {
+export function ActiveFrontstageDefProvider({ frontstageDef, }) {
     const dispatch = useNineZoneDispatch(frontstageDef);
+    frontstageDef.dispatch = dispatch;
+    const layout = useLayoutStore(frontstageDef);
     useUpdateNineZoneSize(frontstageDef);
     useSavedFrontstageState(frontstageDef);
     useSaveFrontstageSettings(frontstageDef, layout);
@@ -178,183 +211,116 @@ function toTabArgs(widget) {
     };
     return args;
 }
-/** @internal */
-export function addWidgets(state, widgets, side, widgetId) {
-    const visibleWidgets = widgets.filter((w) => w.isVisible && w.defaultState !== WidgetState.Floating);
-    if (visibleWidgets.length === 0)
-        return state;
-    const tabs = new Array();
-    for (const widget of visibleWidgets) {
-        state = addTab(state, widget.id, toTabArgs(widget));
-        tabs.push(widget.id);
-    }
-    const activeWidget = visibleWidgets.find((widget) => widget.isActive);
-    const minimized = false;
-    // istanbul ignore else
-    if ((activeWidget === null || activeWidget === void 0 ? void 0 : activeWidget.defaultState) !== WidgetState.Floating) {
-        state = addPanelWidget(state, side, widgetId, tabs, {
-            activeTabId: activeWidget ? activeWidget.id : tabs[0],
-            minimized,
-        });
-    }
-    return state;
-}
-/** @internal */
-// istanbul ignore next
-export function appendWidgets(state, widgetDefs, location, section) {
+function addWidgetDef(frontstageDef, widgetDef, location, section) {
     const side = toPanelSide(location);
-    // Add missing widget tabs.
-    for (const widgetDef of widgetDefs) {
-        const saveTab = state.tabs[widgetDef.id];
-        const preferredPanelWidgetSize = saveTab
-            ? saveTab.preferredPanelWidgetSize
-            : widgetDef.preferredPanelSize;
-        const preferredFloatingWidgetSize = saveTab
-            ? saveTab.preferredFloatingWidgetSize
-            : widgetDef.defaultFloatingSize;
-        // if a defaultFloatingSize is specified then this mean the widget can't determine its intrinsic size and must be explicitly sized
-        const userSized = saveTab
-            ? saveTab.userSized ||
-                (!!widgetDef.defaultFloatingSize &&
-                    !!saveTab.preferredFloatingWidgetSize)
-            : !!widgetDef.defaultFloatingSize;
-        state = addTab(state, widgetDef.id, {
+    const isFloatingWidget = widgetDef.isFloatingStateSupported &&
+        widgetDef.defaultState === WidgetState.Floating;
+    const floatingWidgetId = widgetDef.floatingContainerId
+        ? widgetDef.floatingContainerId
+        : getUniqueId();
+    const userSized = !!widgetDef.defaultFloatingSize;
+    frontstageDef.dispatch({
+        type: "WIDGET_DEF_ADD",
+        id: widgetDef.id,
+        overrides: {
             ...toTabArgs(widgetDef),
-            preferredFloatingWidgetSize,
-            preferredPanelWidgetSize,
             userSized,
-        });
-        const savedTab = state.savedTabs.byId[widgetDef.id];
-        if (savedTab) {
-            state = addRemovedTab(state, widgetDef.id);
-        }
-        else if (widgetDef.isFloatingStateSupported &&
-            widgetDef.defaultState === WidgetState.Floating) {
-            const floatingContainerId = widgetDef.floatingContainerId
-                ? widgetDef.floatingContainerId
-                : getUniqueId();
-            const widgetContainerId = getWidgetId(location, section);
-            const preferredPosition = widgetDef.defaultFloatingPosition;
-            if (floatingContainerId in state.widgets) {
-                state = addTabToWidget(state, widgetDef.id, floatingContainerId);
-            }
-            else {
-                const tab = state.tabs[widgetDef.id];
-                const size = {
-                    height: 200,
-                    width: 300,
-                    ...tab.preferredFloatingWidgetSize,
-                };
-                const preferredPoint = preferredPosition !== null && preferredPosition !== void 0 ? preferredPosition : {
-                    x: (state.size.width - size.width) / 2,
-                    y: (state.size.height - size.height) / 2,
-                };
-                const nzBounds = Rectangle.createFromSize(state.size);
-                const bounds = Rectangle.createFromSize(size).offset(preferredPoint);
-                const containedBounds = bounds.containIn(nzBounds);
-                state = addFloatingWidget(state, floatingContainerId, [widgetDef.id], {
-                    bounds: containedBounds.toProps(),
-                    home: {
-                        widgetId: widgetContainerId,
-                        side,
-                        widgetIndex: 0,
-                    },
-                    userSized,
-                });
-            }
-        }
-        else {
-            const preferredWidgetIndex = section;
-            const widgetPanelSectionId = getWidgetPanelSectionId(side, preferredWidgetIndex);
-            if (widgetPanelSectionId in state.widgets) {
-                state = addTabToWidget(state, widgetDef.id, widgetPanelSectionId);
-            }
-            else {
-                const panel = state.panels[side];
-                if (panel.widgets.length < panel.maxWidgetCount) {
-                    state = addPanelWidget(state, side, widgetPanelSectionId, [
-                        widgetDef.id,
-                    ]);
-                }
-                else {
-                    const widgetIndex = Math.min(preferredWidgetIndex, panel.widgets.length - 1);
-                    const widgetId = panel.widgets[widgetIndex];
-                    state = addTabToWidget(state, widgetDef.id, widgetId);
-                }
-            }
-        }
-        if (widgetDef.defaultState === WidgetState.Hidden) {
-            state = NineZoneStateReducer(state, {
-                type: "WIDGET_TAB_HIDE",
-                id: widgetDef.id,
-            });
-        }
+        },
+        location: isFloatingWidget ? "floating" : "panel",
+        floatingWidget: {
+            id: floatingWidgetId,
+            preferredPosition: widgetDef.defaultFloatingPosition,
+        },
+        panelSection: {
+            id: getWidgetPanelSectionId(side, section),
+            side,
+            index: section,
+        },
+    });
+    // Hide widget if `defaultState` is `Hidden` or `Unloaded`.
+    hideWidgetDef(frontstageDef, widgetDef);
+}
+/** Adds missing widgets to the layout.
+ * @internal
+ */
+export function addPanelSectionWidgetDefs(frontstageDef, location, section) {
+    const panelDef = frontstageDef.getStagePanelDef(location);
+    if (!panelDef)
+        return;
+    const sectionDef = panelDef.getPanelSectionDef(section);
+    const widgetDefs = determineNewWidgets(frontstageDef, sectionDef.widgetDefs);
+    for (const widgetDef of widgetDefs) {
+        addWidgetDef(frontstageDef, widgetDef, location, section);
     }
-    return state;
 }
-function processPopoutWidgets(state) {
+function processPopoutWidgets(frontstageDef) {
     // Electron reopens popout windows w/o user interaction.
     if (ProcessDetector.isElectronAppFrontend) {
-        return state;
+        return;
     }
-    // Restore popout widgets to main window.
+    assert(!!frontstageDef.nineZoneState);
+    const state = frontstageDef.nineZoneState;
     for (const id of state.popoutWidgets.allIds) {
-        state = NineZoneStateReducer(state, {
+        frontstageDef.dispatch({
             type: "POPOUT_WIDGET_SEND_BACK",
             id,
         });
     }
-    return state;
 }
 /** Adds frontstageDef widgets that are missing in NineZoneState.
  * @internal
  */
-export function addMissingWidgets(frontstageDef, initialState) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    let state = initialState;
-    state = appendWidgets(state, determineNewWidgets((_a = frontstageDef.leftPanel) === null || _a === void 0 ? void 0 : _a.getPanelSectionDef(StagePanelSection.Start).widgetDefs, state), StagePanelLocation.Left, StagePanelSection.Start);
-    state = appendWidgets(state, determineNewWidgets((_b = frontstageDef.leftPanel) === null || _b === void 0 ? void 0 : _b.getPanelSectionDef(StagePanelSection.End).widgetDefs, state), StagePanelLocation.Left, StagePanelSection.End);
-    state = appendWidgets(state, determineNewWidgets((_c = frontstageDef.rightPanel) === null || _c === void 0 ? void 0 : _c.getPanelSectionDef(StagePanelSection.Start).widgetDefs, state), StagePanelLocation.Right, StagePanelSection.Start);
-    state = appendWidgets(state, determineNewWidgets((_d = frontstageDef.rightPanel) === null || _d === void 0 ? void 0 : _d.getPanelSectionDef(StagePanelSection.End).widgetDefs, state), StagePanelLocation.Right, StagePanelSection.End);
-    state = appendWidgets(state, determineNewWidgets((_e = frontstageDef.topPanel) === null || _e === void 0 ? void 0 : _e.getPanelSectionDef(StagePanelSection.Start).widgetDefs, state), StagePanelLocation.Top, StagePanelSection.Start);
-    state = appendWidgets(state, determineNewWidgets((_f = frontstageDef.topPanel) === null || _f === void 0 ? void 0 : _f.getPanelSectionDef(StagePanelSection.End).widgetDefs, state), StagePanelLocation.Top, StagePanelSection.End);
-    state = appendWidgets(state, determineNewWidgets((_g = frontstageDef.bottomPanel) === null || _g === void 0 ? void 0 : _g.getPanelSectionDef(StagePanelSection.Start).widgetDefs, state), StagePanelLocation.Bottom, StagePanelSection.Start);
-    state = appendWidgets(state, determineNewWidgets((_h = frontstageDef.bottomPanel) === null || _h === void 0 ? void 0 : _h.getPanelSectionDef(StagePanelSection.End).widgetDefs, state), StagePanelLocation.Bottom, StagePanelSection.End);
-    if (frontstageDef.toolSettings) {
-        const newToolSettingsWidgets = determineNewWidgets([frontstageDef.toolSettings], state);
-        for (const newToolSettingsWidget of newToolSettingsWidgets) {
-            state = addTab(state, newToolSettingsWidget.id, toTabArgs(newToolSettingsWidget));
-        }
+export function addFrontstageWidgetDefs(frontstageDef) {
+    [
+        StagePanelLocation.Left,
+        StagePanelLocation.Right,
+        StagePanelLocation.Top,
+        StagePanelLocation.Bottom,
+    ].forEach((location) => [StagePanelSection.Start, StagePanelSection.End].forEach((section) => addPanelSectionWidgetDefs(frontstageDef, location, section)));
+    const toolSettingsWidgetDefs = determineNewWidgets(frontstageDef, frontstageDef.toolSettings ? [frontstageDef.toolSettings] : undefined);
+    for (const toolSettingsWidgetDef of toolSettingsWidgetDefs) {
+        frontstageDef.dispatch({
+            type: "WIDGET_DEF_ADD_TOOL_SETTINGS",
+            id: toolSettingsWidgetDef.id,
+            overrides: toTabArgs(toolSettingsWidgetDef),
+        });
     }
-    return state;
 }
-/** Hide widgets with Hidden defaultState. */
-function hideWidgets(state, frontstageDef) {
+/** Hide widgets with `Hidden` or `Unloaded` defaultState. */
+function hideWidgetDefs(frontstageDef) {
+    assert(!!frontstageDef.nineZoneState);
+    const state = frontstageDef.nineZoneState;
     const tabs = Object.values(state.tabs);
     for (const tab of tabs) {
         const widgetDef = frontstageDef.findWidgetDef(tab.id);
         if (!widgetDef)
             continue;
-        if (widgetDef.defaultState === WidgetState.Hidden) {
-            state = NineZoneStateReducer(state, {
-                type: "WIDGET_TAB_HIDE",
-                id: widgetDef.id,
-            });
-        }
-        if (widgetDef.defaultState === WidgetState.Unloaded) {
-            state = NineZoneStateReducer(state, {
-                type: "WIDGET_TAB_UNLOAD",
-                id: widgetDef.id,
-            });
-        }
+        hideWidgetDef(frontstageDef, widgetDef);
+    }
+}
+/** Hide widget with `Hidden` or `Unloaded` defaultState. */
+function hideWidgetDef(frontstageDef, widgetDef) {
+    if (widgetDef.defaultState === WidgetState.Hidden) {
+        frontstageDef.dispatch({
+            type: "WIDGET_TAB_HIDE",
+            id: widgetDef.id,
+        });
+    }
+    if (widgetDef.defaultState === WidgetState.Unloaded) {
+        frontstageDef.dispatch({
+            type: "WIDGET_TAB_UNLOAD",
+            id: widgetDef.id,
+        });
     }
-    return state;
 }
 /** Removes NineZoneState widgets that are missing in frontstageDef.
  * @internal
  */
-function removeMissingWidgets(frontstageDef, state) {
+function removeMissingWidgets(frontstageDef) {
     var _a;
+    const state = frontstageDef.nineZoneState;
+    if (!state)
+        return;
     const toolSettingsTabId = (_a = state.toolSettings) === null || _a === void 0 ? void 0 : _a.tabId;
     for (const [, tab] of Object.entries(state.tabs)) {
         if (tab.id === toolSettingsTabId)
@@ -362,41 +328,18 @@ function removeMissingWidgets(frontstageDef, state) {
         const widgetDef = frontstageDef.findWidgetDef(tab.id);
         if (widgetDef)
             continue;
-        state = NineZoneStateReducer(state, {
-            type: "WIDGET_TAB_HIDE",
+        frontstageDef.dispatch({
+            type: "WIDGET_TAB_REMOVE",
             id: tab.id,
         });
-        state = removeTab(state, tab.id);
     }
-    return state;
 }
 function getWidgetLabel(label) {
     return label === "" ? "Widget" : label;
 }
 /** @internal */
-export function getWidgetId(location, section) {
-    switch (location) {
-        case StagePanelLocation.Left: {
-            if (section === StagePanelSection.Start)
-                return "leftStart";
-            return "leftEnd";
-        }
-        case StagePanelLocation.Right: {
-            if (section === StagePanelSection.Start)
-                return "rightStart";
-            return "rightEnd";
-        }
-        case StagePanelLocation.Top: {
-            if (section === StagePanelSection.Start)
-                return "topStart";
-            return "topEnd";
-        }
-        case StagePanelLocation.Bottom: {
-            if (section === StagePanelSection.Start)
-                return "bottomStart";
-            return "bottomEnd";
-        }
-    }
+export function getPanelSectionId(location, section) {
+    return `${StagePanelLocation[location].toLowerCase()}${StagePanelSection[section]}`;
 }
 /** @internal */
 export function getPanelSectionWidgets(frontstageDef, location, section) {
@@ -405,161 +348,142 @@ export function getPanelSectionWidgets(frontstageDef, location, section) {
     return (panelSection === null || panelSection === void 0 ? void 0 : panelSection.widgetDefs) || [];
 }
 /** @internal */
-export function addPanelWidgets(state, frontstageDef, location) {
-    const side = toPanelSide(location);
-    const start = getWidgetId(location, StagePanelSection.Start);
-    const startWidgets = getPanelSectionWidgets(frontstageDef, location, StagePanelSection.Start);
-    state = addWidgets(state, determineNewWidgets(startWidgets, state), side, start);
-    const end = getWidgetId(location, StagePanelSection.End);
-    const endWidgets = getPanelSectionWidgets(frontstageDef, location, StagePanelSection.End);
-    state = addWidgets(state, determineNewWidgets(endWidgets, state), side, end);
-    return state;
-}
-/** @internal */
 export function isFrontstageStateSettingResult(settingsResult) {
     if (settingsResult.status === UiStateStorageStatus.Success)
         return true;
     return false;
 }
 /** @internal */
-export function initializePanel(state, frontstageDef, location) {
+export function initializePanel(frontstageDef, location) {
+    var _a, _b;
     const side = toPanelSide(location);
-    state = addPanelWidgets(state, frontstageDef, location);
     const panelDef = frontstageDef.getStagePanelDef(location);
-    state = produce(state, (draft) => {
-        var _a, _b, _c, _d, _e, _f;
-        const panel = draft.panels[side];
-        panel.minSize = (_b = (_a = panelDef === null || panelDef === void 0 ? void 0 : panelDef.initialConfig) === null || _a === void 0 ? void 0 : _a.minSize) !== null && _b !== void 0 ? _b : panel.minSize;
-        panel.pinned = (_c = panelDef === null || panelDef === void 0 ? void 0 : panelDef.pinned) !== null && _c !== void 0 ? _c : panel.pinned;
-        panel.resizable = (_d = panelDef === null || panelDef === void 0 ? void 0 : panelDef.resizable) !== null && _d !== void 0 ? _d : panel.resizable;
-        panel.maxSize = (_f = (_e = panelDef === null || panelDef === void 0 ? void 0 : panelDef.initialConfig) === null || _e === void 0 ? void 0 : _e.maxSize) !== null && _f !== void 0 ? _f : panel.maxSize;
-    });
-    if ((panelDef === null || panelDef === void 0 ? void 0 : panelDef.size) !== undefined) {
-        state = NineZoneStateReducer(state, {
+    if (!panelDef)
+        return;
+    const size = panelDef.defaultSize;
+    size !== undefined &&
+        frontstageDef.dispatch({
             type: "PANEL_SET_SIZE",
             side,
-            size: panelDef.size,
+            size,
         });
-    }
-    return state;
+    frontstageDef.dispatch({
+        type: "PANEL_SET_PINNED",
+        side,
+        pinned: panelDef.defaultPinned,
+    });
+    frontstageDef.dispatch({
+        type: "PANEL_SET_RESIZABLE",
+        side,
+        resizable: panelDef.defaultResizable,
+    });
+    const minSize = (_a = panelDef.initialConfig) === null || _a === void 0 ? void 0 : _a.minSize;
+    minSize !== undefined &&
+        frontstageDef.dispatch({
+            type: "PANEL_SET_MIN_SIZE",
+            side,
+            minSize,
+        });
+    const maxSize = (_b = panelDef.initialConfig) === null || _b === void 0 ? void 0 : _b.maxSize;
+    maxSize !== undefined &&
+        frontstageDef.dispatch({
+            type: "PANEL_SET_MAX_SIZE",
+            side,
+            maxSize,
+        });
+    const collapsed = panelDef.defaultState !== StagePanelState.Open;
+    frontstageDef.dispatch({
+        type: "PANEL_SET_COLLAPSED",
+        side,
+        collapsed,
+    });
 }
 /** @internal */
 export const stateVersion = 17; // this needs to be bumped when NineZoneState is changed (to recreate the layout).
 /** @internal */
 export function initializeNineZoneState(frontstageDef) {
-    let nineZone = defaultNineZone;
-    nineZone = produce(nineZone, (stateDraft) => {
-        // istanbul ignore next
-        if (!InternalFrontstageManager.nineZoneSize)
-            return;
-        stateDraft.size = {
-            height: InternalFrontstageManager.nineZoneSize.height,
-            width: InternalFrontstageManager.nineZoneSize.width,
-        };
-    });
-    nineZone = initializePanel(nineZone, frontstageDef, StagePanelLocation.Left);
-    nineZone = initializePanel(nineZone, frontstageDef, StagePanelLocation.Right);
-    nineZone = initializePanel(nineZone, frontstageDef, StagePanelLocation.Top);
-    nineZone = initializePanel(nineZone, frontstageDef, StagePanelLocation.Bottom);
-    nineZone = produce(nineZone, (draft) => {
-        var _a, _b, _c, _d;
-        for (const [, panel] of Object.entries(draft.panels)) {
-            const expanded = panel.widgets.find((widgetId) => draft.widgets[widgetId].minimized === false);
-            const firstWidget = panel.widgets.length > 0 ? draft.widgets[panel.widgets[0]] : undefined;
-            // istanbul ignore next
-            if (!expanded && firstWidget) {
-                firstWidget.minimized = false;
-            }
-        }
-        draft.panels.left.collapsed = isPanelCollapsed((_a = frontstageDef.leftPanel) === null || _a === void 0 ? void 0 : _a.panelState);
-        draft.panels.right.collapsed = isPanelCollapsed((_b = frontstageDef.rightPanel) === null || _b === void 0 ? void 0 : _b.panelState);
-        draft.panels.top.collapsed = isPanelCollapsed((_c = frontstageDef.topPanel) === null || _c === void 0 ? void 0 : _c.panelState);
-        draft.panels.bottom.collapsed = isPanelCollapsed((_d = frontstageDef.bottomPanel) === null || _d === void 0 ? void 0 : _d.panelState);
+    frontstageDef.batch(() => {
+        frontstageDef.nineZoneState = defaultNineZone;
+        const size = InternalFrontstageManager.nineZoneSize;
+        size &&
+            frontstageDef.dispatch({
+                type: "RESIZE",
+                size,
+            });
+        addFrontstageWidgetDefs(frontstageDef);
+        initializePanel(frontstageDef, StagePanelLocation.Left);
+        initializePanel(frontstageDef, StagePanelLocation.Right);
+        initializePanel(frontstageDef, StagePanelLocation.Top);
+        initializePanel(frontstageDef, StagePanelLocation.Bottom);
     });
-    nineZone = addMissingWidgets(frontstageDef, nineZone);
-    const toolSettingsWidgetDef = frontstageDef.toolSettings;
-    if (toolSettingsWidgetDef) {
-        const toolSettingsTabId = toolSettingsWidgetDef.id;
-        nineZone = addDockedToolSettings(nineZone, toolSettingsTabId);
-    }
-    nineZone = hideWidgets(nineZone, frontstageDef);
-    nineZone = processPopoutWidgets(nineZone);
-    return nineZone;
 }
 /** Converts from saved NineZoneState to NineZoneState.
  * @note Restores toolSettings tab.
  * @note Restores tab labels.
  * @internal
  */
-export function restoreNineZoneState(frontstageDef, saved) {
-    let state = {
-        ...saved,
-        tabs: {},
-    };
-    for (const [, tab] of Object.entries(saved.tabs)) {
-        // Re-add the placeholder tab in order to correctly remove it from the state if WidgetDef is not found.
-        state = addTab(state, tab.id);
-        const widgetDef = frontstageDef.findWidgetDef(tab.id);
-        if (!widgetDef) {
-            Logger.logInfo(UiFramework.loggerCategory(restoreNineZoneState), "WidgetDef is not found for saved tab.", () => ({
-                frontstageId: frontstageDef.id,
-                tabId: tab.id,
-            }));
-            state = removeTab(state, tab.id);
-            continue;
-        }
-        state = produce(state, (draft) => {
-            draft.tabs[tab.id] = {
-                ...tab,
-                ...toTabArgs(widgetDef),
-                preferredFloatingWidgetSize: tab.preferredFloatingWidgetSize,
-                preferredPanelWidgetSize: tab.preferredPanelWidgetSize,
-            };
-        });
-    }
-    state = produce(state, (draft) => {
-        // remove center panel section if one is found in left or right panels
-        const oldLeftMiddleIndex = saved.panels.left.widgets.findIndex((value) => value === "leftMiddle");
-        // istanbul ignore next
-        if (-1 !== oldLeftMiddleIndex) {
-            draft.panels.left.widgets = saved.panels.left.widgets.filter((value) => value !== "leftMiddle");
-            if ("leftEnd" in draft.widgets) {
-                draft.widgets.leftMiddle.tabs.forEach((tab) => draft.widgets.leftEnd.tabs.push(tab));
-            }
-            else {
-                draft.widgets.leftEnd = { ...draft.widgets.leftMiddle };
-                delete draft.widgets.leftMiddle;
+export function restoreNineZoneState(frontstageDef, packed) {
+    frontstageDef.batch(() => {
+        frontstageDef.nineZoneState = packed;
+        for (const [, tab] of Object.entries(packed.tabs)) {
+            const widgetDef = frontstageDef.findWidgetDef(tab.id);
+            if (!widgetDef) {
+                Logger.logInfo(UiFramework.loggerCategory(restoreNineZoneState), "WidgetDef is not found for saved tab.", {
+                    frontstageId: frontstageDef.id,
+                    tabId: tab.id,
+                });
+                frontstageDef.dispatch({ type: "WIDGET_TAB_REMOVE", id: tab.id });
+                continue;
             }
+            frontstageDef.dispatch({
+                type: "WIDGET_TAB_UPDATE",
+                id: tab.id,
+                overrides: toTabArgs(widgetDef),
+            });
         }
-        const oldRightMiddleIndex = saved.panels.right.widgets.findIndex((value) => value === "rightMiddle");
-        // istanbul ignore next
-        if (-1 !== oldRightMiddleIndex) {
-            draft.panels.right.widgets = saved.panels.right.widgets.filter((value) => value !== "rightMiddle");
-            if ("rightEnd" in draft.widgets) {
-                draft.widgets.rightMiddle.tabs.forEach((tab) => draft.widgets.rightEnd.tabs.push(tab));
+        frontstageDef.nineZoneState = produce(frontstageDef.nineZoneState, (draft) => {
+            // remove center panel section if one is found in left or right panels
+            const oldLeftMiddleIndex = packed.panels.left.widgets.findIndex((value) => value === "leftMiddle");
+            // istanbul ignore next
+            if (-1 !== oldLeftMiddleIndex) {
+                draft.panels.left.widgets = packed.panels.left.widgets.filter((value) => value !== "leftMiddle");
+                if ("leftEnd" in draft.widgets) {
+                    draft.widgets.leftMiddle.tabs.forEach((tab) => draft.widgets.leftEnd.tabs.push(tab));
+                }
+                else {
+                    draft.widgets.leftEnd = { ...draft.widgets.leftMiddle };
+                    delete draft.widgets.leftMiddle;
+                }
             }
-            else {
-                draft.widgets.rightEnd = { ...draft.widgets.rightMiddle };
-                delete draft.widgets.rightMiddle;
+            const oldRightMiddleIndex = packed.panels.right.widgets.findIndex((value) => value === "rightMiddle");
+            // istanbul ignore next
+            if (-1 !== oldRightMiddleIndex) {
+                draft.panels.right.widgets = packed.panels.right.widgets.filter((value) => value !== "rightMiddle");
+                if ("rightEnd" in draft.widgets) {
+                    draft.widgets.rightMiddle.tabs.forEach((tab) => draft.widgets.rightEnd.tabs.push(tab));
+                }
+                else {
+                    draft.widgets.rightEnd = { ...draft.widgets.rightMiddle };
+                    delete draft.widgets.rightMiddle;
+                }
             }
+            return;
+        });
+        if (InternalFrontstageManager.nineZoneSize &&
+            (0 !== InternalFrontstageManager.nineZoneSize.height ||
+                0 !== InternalFrontstageManager.nineZoneSize.width)) {
+            frontstageDef.dispatch({
+                type: "RESIZE",
+                size: {
+                    height: InternalFrontstageManager.nineZoneSize.height,
+                    width: InternalFrontstageManager.nineZoneSize.width,
+                },
+            });
         }
-        return;
+        addFrontstageWidgetDefs(frontstageDef);
+        hideWidgetDefs(frontstageDef);
+        processPopoutWidgets(frontstageDef);
     });
-    if (InternalFrontstageManager.nineZoneSize &&
-        (0 !== InternalFrontstageManager.nineZoneSize.height ||
-            0 !== InternalFrontstageManager.nineZoneSize.width)) {
-        state = NineZoneStateReducer(state, {
-            type: "RESIZE",
-            size: {
-                height: InternalFrontstageManager.nineZoneSize.height,
-                width: InternalFrontstageManager.nineZoneSize.width,
-            },
-        });
-    }
-    state = addMissingWidgets(frontstageDef, state);
-    state = hideWidgets(state, frontstageDef);
-    state = processPopoutWidgets(state);
-    return state;
 }
 /** Prepares NineZoneState to be saved.
  * @note Removes toolSettings tab.
@@ -567,62 +491,16 @@ export function restoreNineZoneState(frontstageDef, saved) {
  * @internal
  */
 export function packNineZoneState(state) {
-    let packed = {
-        ...state,
-        tabs: {},
-    };
+    let packed = state;
     packed = produce(packed, (draft) => {
-        for (const [, tab] of Object.entries(state.tabs)) {
-            draft.tabs[tab.id] = {
-                id: tab.id,
-                preferredFloatingWidgetSize: tab.preferredFloatingWidgetSize,
-                userSized: tab.userSized,
-            };
+        for (const [, tab] of Object.entries(draft.tabs)) {
+            tab.label = "";
+            delete tab.iconSpec;
         }
     });
     return packed;
 }
 /** @internal */
-export function isPanelCollapsed(panelState) {
-    return panelState !== StagePanelState.Open;
-}
-/** @internal */
-export function showWidget(state, id) {
-    const location = getTabLocation(state, id);
-    if (!location)
-        return state;
-    state = produce(state, (draft) => {
-        const widget = draft.widgets[location.widgetId];
-        widget.activeTabId = id;
-        widget.minimized = false;
-        if (isPanelTabLocation(location)) {
-            const panel = draft.panels[location.side];
-            panel.collapsed = false;
-        }
-    });
-    if (isFloatingTabLocation(location)) {
-        state = floatingWidgetBringToFront(state, location.floatingWidgetId);
-    }
-    return state;
-}
-/** @internal */
-export function expandWidget(state, id) {
-    const location = getTabLocation(state, id);
-    if (!location)
-        return state;
-    return produce(state, (draft) => {
-        const widget = draft.widgets[location.widgetId];
-        if (isPanelTabLocation(location)) {
-            const panel = draft.panels[location.side];
-            panel.splitterPercent =
-                panel.widgets.findIndex((wId) => wId === location.widgetId) === 0
-                    ? 100
-                    : 0;
-        }
-        widget.minimized = false;
-    });
-}
-/** @internal */
 export function useSavedFrontstageState(frontstageDef) {
     const uiStateStorage = useUiStateStorageHandler();
     const uiStateStorageRef = React.useRef(uiStateStorage);
@@ -640,7 +518,7 @@ export function useSavedFrontstageState(frontstageDef) {
         async function fetchFrontstageState() {
             // Switching to previously initialized frontstage.
             if (frontstageDef.nineZoneState) {
-                frontstageDef.nineZoneState = processPopoutWidgets(frontstageDef.nineZoneState);
+                processPopoutWidgets(frontstageDef);
                 return;
             }
             const id = frontstageDef.id;
@@ -652,11 +530,11 @@ export function useSavedFrontstageState(frontstageDef) {
                 const setting = settingResult.setting;
                 if (setting.version === version &&
                     setting.stateVersion === stateVersion) {
-                    frontstageDef.nineZoneState = restoreNineZoneState(frontstageDef, setting.nineZone);
+                    restoreNineZoneState(frontstageDef, setting.nineZone);
                     return;
                 }
             }
-            frontstageDef.nineZoneState = initializeNineZoneState(frontstageDef);
+            initializeNineZoneState(frontstageDef);
         }
         void fetchFrontstageState();
     }, [frontstageDef]);
@@ -748,12 +626,10 @@ export function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel)
             // TODO: track restoring frontstages to support workflows:  i.e. prevent loading frontstage OR saving layout when delete is pending
             void uiSettingsStorage.deleteSetting(FRONTSTAGE_SETTINGS_NAMESPACE, getFrontstageStateSettingName(args.frontstageDef.id));
             if (frontstageDef.id === args.frontstageDef.id) {
-                args.frontstageDef.nineZoneState =
-                    initializeNineZoneState(frontstageDef);
-            }
-            else {
-                args.frontstageDef.nineZoneState = undefined;
+                initializeNineZoneState(frontstageDef);
+                return;
             }
+            args.frontstageDef.nineZoneState = undefined;
         });
     }, [uiSettingsStorage, frontstageDef]);
     const defaultLabel = React.useMemo(() => UiFramework.translate("widget.labels.toolSettings"), []);
@@ -788,20 +664,20 @@ export function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel)
         };
     }, [frontstageDef, useToolAsToolSettingsLabel, defaultLabel]);
 }
+function refreshNineZoneState(frontstageDef) {
+    // Fired for both registered/unregistered. Update definitions and remove/add missing widgets.
+    frontstageDef.updateWidgetDefs();
+    frontstageDef.batch(() => {
+        addFrontstageWidgetDefs(frontstageDef);
+        removeMissingWidgets(frontstageDef);
+    });
+}
 /** @internal */
-// istanbul ignore next
 export function useItemsManager(frontstageDef) {
-    const refreshNineZoneState = (def) => {
-        // Fired for both registered/unregistered. Update definitions and remove/add missing widgets.
-        def.updateWidgetDefs();
-        let state = def.nineZoneState;
-        if (!state)
-            return;
-        state = addMissingWidgets(def, state);
-        state = removeMissingWidgets(def, state);
-        def.nineZoneState = state;
-    };
     React.useEffect(() => {
+        // Not initialized yet.
+        if (!frontstageDef.nineZoneState)
+            return;
         // Need to refresh anytime frontstageDef changes because uiItemsProvider may have added something to
         // another stage before it was possibly unloaded in this stage.
         refreshNineZoneState(frontstageDef);
@@ -812,8 +688,9 @@ export function useItemsManager(frontstageDef) {
         });
     }, [frontstageDef]);
 }
-// istanbul ignore next
-function determineNewWidgets(defs, state) {
+function determineNewWidgets(frontstageDef, defs) {
+    const state = frontstageDef.nineZoneState;
+    assert(!!state);
     defs = defs || [];
     const uniqueDefs = defs.filter((def, index, array) => {
         return index === array.findIndex((def1) => def.id === def1.id);