@itwin/appui-react 4.8.3 → 4.9.0

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

@@ -7,39 +7,49 @@
  * @module Frontstage
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useItemsManager = exports.useFrontstageManager = exports.getFrontstageStateSettingName = exports.FRONTSTAGE_SETTINGS_NAMESPACE = exports.useSaveFrontstageSettings = exports.useSavedFrontstageState = exports.expandWidget = exports.showWidget = exports.isPanelCollapsed = exports.packNineZoneState = exports.restoreNineZoneState = exports.initializeNineZoneState = exports.stateVersion = exports.initializePanel = exports.isFrontstageStateSettingResult = exports.addPanelWidgets = exports.getPanelSectionWidgets = exports.getWidgetId = exports.addMissingWidgets = exports.appendWidgets = exports.addWidgets = exports.useLabels = exports.ActiveFrontstageDefProvider = exports.WidgetPanelsFrontstage = exports.useNineZoneDispatch = exports.useUpdateNineZoneSize = exports.useLayoutStore = void 0;
+exports.useItemsManager = exports.useFrontstageManager = exports.getFrontstageStateSettingName = exports.FRONTSTAGE_SETTINGS_NAMESPACE = exports.useSaveFrontstageSettings = exports.useSavedFrontstageState = exports.packNineZoneState = exports.restoreNineZoneState = exports.initializeNineZoneState = exports.stateVersion = exports.initializePanel = exports.isFrontstageStateSettingResult = exports.getPanelSectionWidgets = exports.getPanelSectionId = exports.addFrontstageWidgetDefs = exports.addPanelSectionWidgetDefs = exports.useLabels = exports.ActiveFrontstageDefProvider = exports.WidgetPanelsFrontstage = exports.useNineZoneDispatch = exports.useUpdateNineZoneSize = exports.useLayoutStore = void 0;
 // cSpell:ignore popout
-require("./Frontstage.scss");
+const components_react_1 = require("@itwin/components-react");
+const core_bentley_1 = require("@itwin/core-bentley");
+const core_frontend_1 = require("@itwin/core-frontend");
+const core_react_1 = require("@itwin/core-react");
+const classnames_1 = require("classnames");
 const immer_1 = require("immer");
 const React = require("react");
 const react_dom_1 = require("react-dom");
-const core_bentley_1 = require("@itwin/core-bentley");
-const core_react_1 = require("@itwin/core-react");
-const components_react_1 = require("@itwin/components-react");
-const appui_layout_react_1 = require("@itwin/appui-layout-react");
+const react_redux_1 = require("react-redux");
 const FrontstageDef_1 = require("../frontstage/FrontstageDef");
+const InternalFrontstageManager_1 = require("../frontstage/InternalFrontstageManager");
+const useEscapeSetFocusToHome_1 = require("../hooks/useEscapeSetFocusToHome");
+const useUiVisibility_1 = require("../hooks/useUiVisibility");
+const LayoutStore_1 = require("../layout/base/LayoutStore");
+const NineZone_1 = require("../layout/base/NineZone");
+const activateDroppedTab_1 = require("../layout/state/activateDroppedTab");
+const NineZoneState_1 = require("../layout/state/NineZoneState");
+const NineZoneStateReducer_1 = require("../layout/state/NineZoneStateReducer");
+const PanelState_1 = require("../layout/state/PanelState");
+const Panels_1 = require("../layout/widget-panels/Panels");
+const FloatingWidgets_1 = require("../layout/widget/FloatingWidgets");
+const PreviewHorizontalPanelAlign_1 = require("../layout/widget/PreviewHorizontalPanelAlign");
+const PreviewMaximizeToggle_1 = require("../layout/widget/PreviewMaximizeToggle");
+const PreviewFeatures_1 = require("../preview/PreviewFeatures");
 const StagePanelDef_1 = require("../stagepanels/StagePanelDef");
+const StagePanelLocation_1 = require("../stagepanels/StagePanelLocation");
+const StagePanelSection_1 = require("../stagepanels/StagePanelSection");
+const StagePanelState_1 = require("../stagepanels/StagePanelState");
+const UiItemsManager_1 = require("../ui-items-provider/UiItemsManager");
 const UiFramework_1 = require("../UiFramework");
 const useUiStateStorage_1 = require("../uistate/useUiStateStorage");
+const WidgetState_1 = require("../widgets/WidgetState");
 const Content_1 = require("./Content");
+const FloatingWidget_1 = require("./FloatingWidget");
+require("./Frontstage.scss");
 const FrontstageContent_1 = require("./FrontstageContent");
 const ModalFrontstageComposer_1 = require("./ModalFrontstageComposer");
 const StatusBar_1 = require("./StatusBar");
 const Tab_1 = require("./Tab");
 const Toolbars_1 = require("./Toolbars");
 const ToolSettings_1 = require("./ToolSettings");
-const useEscapeSetFocusToHome_1 = require("../hooks/useEscapeSetFocusToHome");
-const react_redux_1 = require("react-redux");
-const useUiVisibility_1 = require("../hooks/useUiVisibility");
-const core_frontend_1 = require("@itwin/core-frontend");
-const FloatingWidget_1 = require("./FloatingWidget");
-const InternalFrontstageManager_1 = require("../frontstage/InternalFrontstageManager");
-const WidgetState_1 = require("../widgets/WidgetState");
-const StagePanelSection_1 = require("../stagepanels/StagePanelSection");
-const StagePanelLocation_1 = require("../stagepanels/StagePanelLocation");
-const UiItemsManager_1 = require("../ui-items-provider/UiItemsManager");
-const PreviewFeatures_1 = require("../preview/PreviewFeatures");
-const classnames_1 = require("classnames");
 function WidgetPanelsFrontstageComponent() {
     const activeModalFrontstageInfo = (0, ModalFrontstageComposer_1.useActiveModalFrontstageInfo)();
     const uiIsVisible = (0, useUiVisibility_1.useUiVisibility)();
@@ -47,27 +57,27 @@ function WidgetPanelsFrontstageComponent() {
     const previewContentAlwaysMaxSizeDockedClass = (0, ToolSettings_1.useShouldRenderDockedToolSettings)() &&
         previewFeatures.contentAlwaysMaxSize &&
         "preview-contentAlwaysMaxSize-toolSettingsDocked";
-    const previewContentAlwaysMaxSizeTopPanelClass = (0, appui_layout_react_1.useLayout)((state) => {
+    const previewContentAlwaysMaxSizeTopPanelClass = (0, LayoutStore_1.useLayout)((state) => {
         return state.panels.top.widgets.length > 0;
     }) &&
         previewFeatures.contentAlwaysMaxSize &&
         "preview-contentAlwaysMaxSize-topPanelActive";
-    return (React.createElement(appui_layout_react_1.PreviewLayoutFeaturesProvider, { ...previewFeatures },
-        React.createElement(appui_layout_react_1.PreviewMaximizedWidgetFeatureProvider, { enabled: previewFeatures.enableMaximizedFloatingWidget },
+    return (React.createElement(PreviewMaximizeToggle_1.PreviewMaximizedWidgetFeatureProvider, { enabled: previewFeatures.enableMaximizedFloatingWidget },
+        React.createElement(PreviewHorizontalPanelAlign_1.PreviewHorizontalPanelAlignFeatureProvider, { enabled: previewFeatures.horizontalPanelAlignment },
             React.createElement(ToolSettings_1.WidgetPanelsToolSettings, null),
             React.createElement(components_react_1.ToolbarPopupAutoHideContext.Provider, { value: !uiIsVisible },
                 React.createElement(ModalFrontstageComposer_1.ModalFrontstageComposer, { stageInfo: activeModalFrontstageInfo }),
-                React.createElement(appui_layout_react_1.WidgetPanels, { className: (0, classnames_1.default)("uifw-widgetPanels", previewContentAlwaysMaxSizeDockedClass, previewContentAlwaysMaxSizeTopPanelClass), centerContent: React.createElement(Toolbars_1.WidgetPanelsToolbars, null) },
+                React.createElement(Panels_1.WidgetPanels, { className: (0, classnames_1.default)("uifw-widgetPanels", previewContentAlwaysMaxSizeDockedClass, previewContentAlwaysMaxSizeTopPanelClass), centerContent: React.createElement(Toolbars_1.WidgetPanelsToolbars, null) },
                     React.createElement(FrontstageContent_1.WidgetPanelsFrontstageContent, null)),
                 React.createElement(StatusBar_1.WidgetPanelsStatusBar, null),
-                React.createElement(appui_layout_react_1.FloatingWidgets, null)))));
+                React.createElement(FloatingWidgets_1.FloatingWidgets, null)))));
 }
 const widgetContent = React.createElement(Content_1.WidgetContent, null);
 const toolSettingsContent = React.createElement(ToolSettings_1.ToolSettingsContent, null);
 const widgetPanelsFrontstage = React.createElement(WidgetPanelsFrontstageComponent, null);
 /** @internal */
 function useLayoutStore(frontstageDef) {
-    const layoutStore = React.useMemo(() => (0, appui_layout_react_1.createLayoutStore)(frontstageDef === null || frontstageDef === void 0 ? void 0 : frontstageDef.nineZoneState), [frontstageDef]);
+    const layoutStore = React.useMemo(() => (0, LayoutStore_1.createLayoutStore)(frontstageDef === null || frontstageDef === void 0 ? void 0 : frontstageDef.nineZoneState), [frontstageDef]);
     React.useEffect(() => {
         return InternalFrontstageManager_1.InternalFrontstageManager.onFrontstageNineZoneStateChangedEvent.addListener((args) => {
             if (args.frontstageDef !== frontstageDef)
@@ -87,8 +97,7 @@ exports.useLayoutStore = useLayoutStore;
 function useUpdateNineZoneSize(frontstageDef) {
     React.useEffect(() => {
         const size = InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize;
-        const state = frontstageDef.nineZoneState;
-        if (!size || !state)
+        if (!size)
             return;
         frontstageDef.dispatch({
             type: "RESIZE",
@@ -100,15 +109,37 @@ function useUpdateNineZoneSize(frontstageDef) {
     }, [frontstageDef]);
 }
 exports.useUpdateNineZoneSize = useUpdateNineZoneSize;
+const log = (reducer) => (state, action) => {
+    core_bentley_1.Logger.logTrace("appui-react:reducer", `action ${action.type}`, () => ({
+        action,
+        state,
+    }));
+    return reducer(state, action);
+};
 /** @internal */
 function useNineZoneDispatch(frontstageDef) {
-    return React.useMemo(() => frontstageDef.dispatch, [frontstageDef]);
+    const features = (0, PreviewFeatures_1.usePreviewFeatures)();
+    const reducer = React.useMemo(() => {
+        let nineZoneStateReducer = log(NineZoneStateReducer_1.NineZoneStateReducer);
+        nineZoneStateReducer = features.activateDroppedTab
+            ? (0, activateDroppedTab_1.activateDroppedTab)(nineZoneStateReducer)
+            : nineZoneStateReducer;
+        return nineZoneStateReducer;
+    }, [features.activateDroppedTab]);
+    return React.useCallback((action) => {
+        if (action.type === "RESIZE") {
+            InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize = core_react_1.Size.create(action.size);
+        }
+        const state = frontstageDef.nineZoneState;
+        if (!state)
+            return;
+        frontstageDef.nineZoneState = reducer(state, action);
+    }, [frontstageDef, reducer]);
 }
 exports.useNineZoneDispatch = useNineZoneDispatch;
 /** @internal */
 function WidgetPanelsFrontstage() {
     const frontstageDef = (0, FrontstageDef_1.useActiveFrontstageDef)();
-    const layout = useLayoutStore(frontstageDef);
     React.useEffect(() => {
         const triggerWidowCloseProcessing = () => {
             frontstageDef && frontstageDef.setIsApplicationClosing(true);
@@ -120,15 +151,17 @@ function WidgetPanelsFrontstage() {
     }, [frontstageDef]);
     if (!frontstageDef)
         return null;
-    return (React.createElement(ActiveFrontstageDefProvider, { frontstageDef: frontstageDef, layout: layout }));
+    return React.createElement(ActiveFrontstageDefProvider, { frontstageDef: frontstageDef });
 }
 exports.WidgetPanelsFrontstage = WidgetPanelsFrontstage;
-const defaultNineZone = (0, appui_layout_react_1.createNineZoneState)();
+const defaultNineZone = (0, NineZoneState_1.createNineZoneState)();
 const tabElement = React.createElement(Tab_1.WidgetPanelsTab, null);
 const floatingWidgetElement = React.createElement(FloatingWidget_1.FloatingWidget, null);
 /** @internal */
-function ActiveFrontstageDefProvider({ frontstageDef, layout, }) {
+function ActiveFrontstageDefProvider({ frontstageDef, }) {
     const dispatch = useNineZoneDispatch(frontstageDef);
+    frontstageDef.dispatch = dispatch;
+    const layout = useLayoutStore(frontstageDef);
     useUpdateNineZoneSize(frontstageDef);
     useSavedFrontstageState(frontstageDef);
     useSaveFrontstageSettings(frontstageDef, layout);
@@ -154,7 +187,7 @@ function ActiveFrontstageDefProvider({ frontstageDef, layout, }) {
     useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel);
     const handleKeyDown = (0, useEscapeSetFocusToHome_1.useEscapeSetFocusToHome)();
     return (React.createElement("div", { className: "uifw-widgetPanels-frontstage", onKeyDown: handleKeyDown, role: "presentation" },
-        React.createElement(appui_layout_react_1.NineZone, { dispatch: dispatch, labels: labels, layout: layout, tab: tabElement, floatingWidget: floatingWidgetElement, showWidgetIcon: showWidgetIcon, autoCollapseUnpinnedPanels: autoCollapseUnpinnedPanels, toolSettingsContent: toolSettingsContent, widgetContent: widgetContent, animateDockedToolSettings: animateToolSettings, uiIsVisible: uiIsVisible }, widgetPanelsFrontstage)));
+        React.createElement(NineZone_1.NineZone, { dispatch: dispatch, labels: labels, layout: layout, tab: tabElement, floatingWidget: floatingWidgetElement, showWidgetIcon: showWidgetIcon, autoCollapseUnpinnedPanels: autoCollapseUnpinnedPanels, toolSettingsContent: toolSettingsContent, widgetContent: widgetContent, animateDockedToolSettings: animateToolSettings, uiIsVisible: uiIsVisible }, widgetPanelsFrontstage)));
 }
 exports.ActiveFrontstageDefProvider = ActiveFrontstageDefProvider;
 /** @internal */
@@ -187,186 +220,118 @@ function toTabArgs(widget) {
     };
     return args;
 }
-/** @internal */
-function addWidgets(state, widgets, side, widgetId) {
-    const visibleWidgets = widgets.filter((w) => w.isVisible && w.defaultState !== WidgetState_1.WidgetState.Floating);
-    if (visibleWidgets.length === 0)
-        return state;
-    const tabs = new Array();
-    for (const widget of visibleWidgets) {
-        state = (0, appui_layout_react_1.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_1.WidgetState.Floating) {
-        state = (0, appui_layout_react_1.addPanelWidget)(state, side, widgetId, tabs, {
-            activeTabId: activeWidget ? activeWidget.id : tabs[0],
-            minimized,
-        });
-    }
-    return state;
-}
-exports.addWidgets = addWidgets;
-/** @internal */
-// istanbul ignore next
-function appendWidgets(state, widgetDefs, location, section) {
+function addWidgetDef(frontstageDef, widgetDef, location, section) {
     const side = (0, StagePanelDef_1.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 = (0, appui_layout_react_1.addTab)(state, widgetDef.id, {
+    const isFloatingWidget = widgetDef.isFloatingStateSupported &&
+        widgetDef.defaultState === WidgetState_1.WidgetState.Floating;
+    const floatingWidgetId = widgetDef.floatingContainerId
+        ? widgetDef.floatingContainerId
+        : (0, NineZone_1.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 = (0, appui_layout_react_1.addRemovedTab)(state, widgetDef.id);
-        }
-        else if (widgetDef.isFloatingStateSupported &&
-            widgetDef.defaultState === WidgetState_1.WidgetState.Floating) {
-            const floatingContainerId = widgetDef.floatingContainerId
-                ? widgetDef.floatingContainerId
-                : (0, appui_layout_react_1.getUniqueId)();
-            const widgetContainerId = getWidgetId(location, section);
-            const preferredPosition = widgetDef.defaultFloatingPosition;
-            if (floatingContainerId in state.widgets) {
-                state = (0, appui_layout_react_1.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 = core_react_1.Rectangle.createFromSize(state.size);
-                const bounds = core_react_1.Rectangle.createFromSize(size).offset(preferredPoint);
-                const containedBounds = bounds.containIn(nzBounds);
-                state = (0, appui_layout_react_1.addFloatingWidget)(state, floatingContainerId, [widgetDef.id], {
-                    bounds: containedBounds.toProps(),
-                    home: {
-                        widgetId: widgetContainerId,
-                        side,
-                        widgetIndex: 0,
-                    },
-                    userSized,
-                });
-            }
-        }
-        else {
-            const preferredWidgetIndex = section;
-            const widgetPanelSectionId = (0, appui_layout_react_1.getWidgetPanelSectionId)(side, preferredWidgetIndex);
-            if (widgetPanelSectionId in state.widgets) {
-                state = (0, appui_layout_react_1.addTabToWidget)(state, widgetDef.id, widgetPanelSectionId);
-            }
-            else {
-                const panel = state.panels[side];
-                if (panel.widgets.length < panel.maxWidgetCount) {
-                    state = (0, appui_layout_react_1.addPanelWidget)(state, side, widgetPanelSectionId, [
-                        widgetDef.id,
-                    ]);
-                }
-                else {
-                    const widgetIndex = Math.min(preferredWidgetIndex, panel.widgets.length - 1);
-                    const widgetId = panel.widgets[widgetIndex];
-                    state = (0, appui_layout_react_1.addTabToWidget)(state, widgetDef.id, widgetId);
-                }
-            }
-        }
-        if (widgetDef.defaultState === WidgetState_1.WidgetState.Hidden) {
-            state = (0, appui_layout_react_1.NineZoneStateReducer)(state, {
-                type: "WIDGET_TAB_HIDE",
-                id: widgetDef.id,
-            });
-        }
+        },
+        location: isFloatingWidget ? "floating" : "panel",
+        floatingWidget: {
+            id: floatingWidgetId,
+            preferredPosition: widgetDef.defaultFloatingPosition,
+        },
+        panelSection: {
+            id: (0, PanelState_1.getWidgetPanelSectionId)(side, section),
+            side,
+            index: section,
+        },
+    });
+    // Hide widget if `defaultState` is `Hidden` or `Unloaded`.
+    hideWidgetDef(frontstageDef, widgetDef);
+}
+/** Adds missing widgets to the layout.
+ * @internal
+ */
+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;
 }
-exports.appendWidgets = appendWidgets;
-function processPopoutWidgets(state) {
+exports.addPanelSectionWidgetDefs = addPanelSectionWidgetDefs;
+function processPopoutWidgets(frontstageDef) {
     // Electron reopens popout windows w/o user interaction.
     if (core_bentley_1.ProcessDetector.isElectronAppFrontend) {
-        return state;
+        return;
     }
-    // Restore popout widgets to main window.
+    (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
+    const state = frontstageDef.nineZoneState;
     for (const id of state.popoutWidgets.allIds) {
-        state = (0, appui_layout_react_1.NineZoneStateReducer)(state, {
+        frontstageDef.dispatch({
             type: "POPOUT_WIDGET_SEND_BACK",
             id,
         });
     }
-    return state;
 }
 /** Adds frontstageDef widgets that are missing in NineZoneState.
  * @internal
  */
-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_1.StagePanelSection.Start).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Left, StagePanelSection_1.StagePanelSection.Start);
-    state = appendWidgets(state, determineNewWidgets((_b = frontstageDef.leftPanel) === null || _b === void 0 ? void 0 : _b.getPanelSectionDef(StagePanelSection_1.StagePanelSection.End).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Left, StagePanelSection_1.StagePanelSection.End);
-    state = appendWidgets(state, determineNewWidgets((_c = frontstageDef.rightPanel) === null || _c === void 0 ? void 0 : _c.getPanelSectionDef(StagePanelSection_1.StagePanelSection.Start).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Right, StagePanelSection_1.StagePanelSection.Start);
-    state = appendWidgets(state, determineNewWidgets((_d = frontstageDef.rightPanel) === null || _d === void 0 ? void 0 : _d.getPanelSectionDef(StagePanelSection_1.StagePanelSection.End).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Right, StagePanelSection_1.StagePanelSection.End);
-    state = appendWidgets(state, determineNewWidgets((_e = frontstageDef.topPanel) === null || _e === void 0 ? void 0 : _e.getPanelSectionDef(StagePanelSection_1.StagePanelSection.Start).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Top, StagePanelSection_1.StagePanelSection.Start);
-    state = appendWidgets(state, determineNewWidgets((_f = frontstageDef.topPanel) === null || _f === void 0 ? void 0 : _f.getPanelSectionDef(StagePanelSection_1.StagePanelSection.End).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Top, StagePanelSection_1.StagePanelSection.End);
-    state = appendWidgets(state, determineNewWidgets((_g = frontstageDef.bottomPanel) === null || _g === void 0 ? void 0 : _g.getPanelSectionDef(StagePanelSection_1.StagePanelSection.Start).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Bottom, StagePanelSection_1.StagePanelSection.Start);
-    state = appendWidgets(state, determineNewWidgets((_h = frontstageDef.bottomPanel) === null || _h === void 0 ? void 0 : _h.getPanelSectionDef(StagePanelSection_1.StagePanelSection.End).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Bottom, StagePanelSection_1.StagePanelSection.End);
-    if (frontstageDef.toolSettings) {
-        const newToolSettingsWidgets = determineNewWidgets([frontstageDef.toolSettings], state);
-        for (const newToolSettingsWidget of newToolSettingsWidgets) {
-            state = (0, appui_layout_react_1.addTab)(state, newToolSettingsWidget.id, toTabArgs(newToolSettingsWidget));
-        }
+function addFrontstageWidgetDefs(frontstageDef) {
+    [
+        StagePanelLocation_1.StagePanelLocation.Left,
+        StagePanelLocation_1.StagePanelLocation.Right,
+        StagePanelLocation_1.StagePanelLocation.Top,
+        StagePanelLocation_1.StagePanelLocation.Bottom,
+    ].forEach((location) => [StagePanelSection_1.StagePanelSection.Start, StagePanelSection_1.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;
 }
-exports.addMissingWidgets = addMissingWidgets;
-/** Hide widgets with Hidden defaultState. */
-function hideWidgets(state, frontstageDef) {
+exports.addFrontstageWidgetDefs = addFrontstageWidgetDefs;
+/** Hide widgets with `Hidden` or `Unloaded` defaultState. */
+function hideWidgetDefs(frontstageDef) {
+    (0, core_bentley_1.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_1.WidgetState.Hidden) {
-            state = (0, appui_layout_react_1.NineZoneStateReducer)(state, {
-                type: "WIDGET_TAB_HIDE",
-                id: widgetDef.id,
-            });
-        }
-        if (widgetDef.defaultState === WidgetState_1.WidgetState.Unloaded) {
-            state = (0, appui_layout_react_1.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_1.WidgetState.Hidden) {
+        frontstageDef.dispatch({
+            type: "WIDGET_TAB_HIDE",
+            id: widgetDef.id,
+        });
+    }
+    if (widgetDef.defaultState === WidgetState_1.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)
@@ -374,43 +339,20 @@ function removeMissingWidgets(frontstageDef, state) {
         const widgetDef = frontstageDef.findWidgetDef(tab.id);
         if (widgetDef)
             continue;
-        state = (0, appui_layout_react_1.NineZoneStateReducer)(state, {
-            type: "WIDGET_TAB_HIDE",
+        frontstageDef.dispatch({
+            type: "WIDGET_TAB_REMOVE",
             id: tab.id,
         });
-        state = (0, appui_layout_react_1.removeTab)(state, tab.id);
     }
-    return state;
 }
 function getWidgetLabel(label) {
     return label === "" ? "Widget" : label;
 }
 /** @internal */
-function getWidgetId(location, section) {
-    switch (location) {
-        case StagePanelLocation_1.StagePanelLocation.Left: {
-            if (section === StagePanelSection_1.StagePanelSection.Start)
-                return "leftStart";
-            return "leftEnd";
-        }
-        case StagePanelLocation_1.StagePanelLocation.Right: {
-            if (section === StagePanelSection_1.StagePanelSection.Start)
-                return "rightStart";
-            return "rightEnd";
-        }
-        case StagePanelLocation_1.StagePanelLocation.Top: {
-            if (section === StagePanelSection_1.StagePanelSection.Start)
-                return "topStart";
-            return "topEnd";
-        }
-        case StagePanelLocation_1.StagePanelLocation.Bottom: {
-            if (section === StagePanelSection_1.StagePanelSection.Start)
-                return "bottomStart";
-            return "bottomEnd";
-        }
-    }
+function getPanelSectionId(location, section) {
+    return `${StagePanelLocation_1.StagePanelLocation[location].toLowerCase()}${StagePanelSection_1.StagePanelSection[section]}`;
 }
-exports.getWidgetId = getWidgetId;
+exports.getPanelSectionId = getPanelSectionId;
 /** @internal */
 function getPanelSectionWidgets(frontstageDef, location, section) {
     const stagePanel = frontstageDef.getStagePanelDef(location);
@@ -419,18 +361,6 @@ function getPanelSectionWidgets(frontstageDef, location, section) {
 }
 exports.getPanelSectionWidgets = getPanelSectionWidgets;
 /** @internal */
-function addPanelWidgets(state, frontstageDef, location) {
-    const side = (0, StagePanelDef_1.toPanelSide)(location);
-    const start = getWidgetId(location, StagePanelSection_1.StagePanelSection.Start);
-    const startWidgets = getPanelSectionWidgets(frontstageDef, location, StagePanelSection_1.StagePanelSection.Start);
-    state = addWidgets(state, determineNewWidgets(startWidgets, state), side, start);
-    const end = getWidgetId(location, StagePanelSection_1.StagePanelSection.End);
-    const endWidgets = getPanelSectionWidgets(frontstageDef, location, StagePanelSection_1.StagePanelSection.End);
-    state = addWidgets(state, determineNewWidgets(endWidgets, state), side, end);
-    return state;
-}
-exports.addPanelWidgets = addPanelWidgets;
-/** @internal */
 function isFrontstageStateSettingResult(settingsResult) {
     if (settingsResult.status === core_react_1.UiStateStorageStatus.Success)
         return true;
@@ -438,70 +368,69 @@ function isFrontstageStateSettingResult(settingsResult) {
 }
 exports.isFrontstageStateSettingResult = isFrontstageStateSettingResult;
 /** @internal */
-function initializePanel(state, frontstageDef, location) {
+function initializePanel(frontstageDef, location) {
+    var _a, _b;
     const side = (0, StagePanelDef_1.toPanelSide)(location);
-    state = addPanelWidgets(state, frontstageDef, location);
     const panelDef = frontstageDef.getStagePanelDef(location);
-    state = (0, immer_1.default)(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 = (0, appui_layout_react_1.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_1.StagePanelState.Open;
+    frontstageDef.dispatch({
+        type: "PANEL_SET_COLLAPSED",
+        side,
+        collapsed,
+    });
 }
 exports.initializePanel = initializePanel;
 /** @internal */
 exports.stateVersion = 17; // this needs to be bumped when NineZoneState is changed (to recreate the layout).
 /** @internal */
 function initializeNineZoneState(frontstageDef) {
-    let nineZone = defaultNineZone;
-    nineZone = (0, immer_1.default)(nineZone, (stateDraft) => {
-        // istanbul ignore next
-        if (!InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize)
-            return;
-        stateDraft.size = {
-            height: InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.height,
-            width: InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.width,
-        };
-    });
-    nineZone = initializePanel(nineZone, frontstageDef, StagePanelLocation_1.StagePanelLocation.Left);
-    nineZone = initializePanel(nineZone, frontstageDef, StagePanelLocation_1.StagePanelLocation.Right);
-    nineZone = initializePanel(nineZone, frontstageDef, StagePanelLocation_1.StagePanelLocation.Top);
-    nineZone = initializePanel(nineZone, frontstageDef, StagePanelLocation_1.StagePanelLocation.Bottom);
-    nineZone = (0, immer_1.default)(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_1.InternalFrontstageManager.nineZoneSize;
+        size &&
+            frontstageDef.dispatch({
+                type: "RESIZE",
+                size,
+            });
+        addFrontstageWidgetDefs(frontstageDef);
+        initializePanel(frontstageDef, StagePanelLocation_1.StagePanelLocation.Left);
+        initializePanel(frontstageDef, StagePanelLocation_1.StagePanelLocation.Right);
+        initializePanel(frontstageDef, StagePanelLocation_1.StagePanelLocation.Top);
+        initializePanel(frontstageDef, StagePanelLocation_1.StagePanelLocation.Bottom);
     });
-    nineZone = addMissingWidgets(frontstageDef, nineZone);
-    const toolSettingsWidgetDef = frontstageDef.toolSettings;
-    if (toolSettingsWidgetDef) {
-        const toolSettingsTabId = toolSettingsWidgetDef.id;
-        nineZone = (0, appui_layout_react_1.addDockedToolSettings)(nineZone, toolSettingsTabId);
-    }
-    nineZone = hideWidgets(nineZone, frontstageDef);
-    nineZone = processPopoutWidgets(nineZone);
-    return nineZone;
 }
 exports.initializeNineZoneState = initializeNineZoneState;
 /** Converts from saved NineZoneState to NineZoneState.
@@ -509,75 +438,68 @@ exports.initializeNineZoneState = initializeNineZoneState;
  * @note Restores tab labels.
  * @internal
  */
-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 = (0, appui_layout_react_1.addTab)(state, tab.id);
-        const widgetDef = frontstageDef.findWidgetDef(tab.id);
-        if (!widgetDef) {
-            core_bentley_1.Logger.logInfo(UiFramework_1.UiFramework.loggerCategory(restoreNineZoneState), "WidgetDef is not found for saved tab.", () => ({
-                frontstageId: frontstageDef.id,
-                tabId: tab.id,
-            }));
-            state = (0, appui_layout_react_1.removeTab)(state, tab.id);
-            continue;
-        }
-        state = (0, immer_1.default)(state, (draft) => {
-            draft.tabs[tab.id] = {
-                ...tab,
-                ...toTabArgs(widgetDef),
-                preferredFloatingWidgetSize: tab.preferredFloatingWidgetSize,
-                preferredPanelWidgetSize: tab.preferredPanelWidgetSize,
-            };
-        });
-    }
-    state = (0, immer_1.default)(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;
+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) {
+                core_bentley_1.Logger.logInfo(UiFramework_1.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 = (0, immer_1.default)(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_1.InternalFrontstageManager.nineZoneSize &&
+            (0 !== InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.height ||
+                0 !== InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.width)) {
+            frontstageDef.dispatch({
+                type: "RESIZE",
+                size: {
+                    height: InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.height,
+                    width: InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.width,
+                },
+            });
         }
-        return;
+        addFrontstageWidgetDefs(frontstageDef);
+        hideWidgetDefs(frontstageDef);
+        processPopoutWidgets(frontstageDef);
     });
-    if (InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize &&
-        (0 !== InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.height ||
-            0 !== InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.width)) {
-        state = (0, appui_layout_react_1.NineZoneStateReducer)(state, {
-            type: "RESIZE",
-            size: {
-                height: InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.height,
-                width: InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.width,
-            },
-        });
-    }
-    state = addMissingWidgets(frontstageDef, state);
-    state = hideWidgets(state, frontstageDef);
-    state = processPopoutWidgets(state);
-    return state;
 }
 exports.restoreNineZoneState = restoreNineZoneState;
 /** Prepares NineZoneState to be saved.
@@ -586,66 +508,17 @@ exports.restoreNineZoneState = restoreNineZoneState;
  * @internal
  */
 function packNineZoneState(state) {
-    let packed = {
-        ...state,
-        tabs: {},
-    };
+    let packed = state;
     packed = (0, immer_1.default)(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;
 }
 exports.packNineZoneState = packNineZoneState;
 /** @internal */
-function isPanelCollapsed(panelState) {
-    return panelState !== StagePanelDef_1.StagePanelState.Open;
-}
-exports.isPanelCollapsed = isPanelCollapsed;
-/** @internal */
-function showWidget(state, id) {
-    const location = (0, appui_layout_react_1.getTabLocation)(state, id);
-    if (!location)
-        return state;
-    state = (0, immer_1.default)(state, (draft) => {
-        const widget = draft.widgets[location.widgetId];
-        widget.activeTabId = id;
-        widget.minimized = false;
-        if ((0, appui_layout_react_1.isPanelTabLocation)(location)) {
-            const panel = draft.panels[location.side];
-            panel.collapsed = false;
-        }
-    });
-    if ((0, appui_layout_react_1.isFloatingTabLocation)(location)) {
-        state = (0, appui_layout_react_1.floatingWidgetBringToFront)(state, location.floatingWidgetId);
-    }
-    return state;
-}
-exports.showWidget = showWidget;
-/** @internal */
-function expandWidget(state, id) {
-    const location = (0, appui_layout_react_1.getTabLocation)(state, id);
-    if (!location)
-        return state;
-    return (0, immer_1.default)(state, (draft) => {
-        const widget = draft.widgets[location.widgetId];
-        if ((0, appui_layout_react_1.isPanelTabLocation)(location)) {
-            const panel = draft.panels[location.side];
-            panel.splitterPercent =
-                panel.widgets.findIndex((wId) => wId === location.widgetId) === 0
-                    ? 100
-                    : 0;
-        }
-        widget.minimized = false;
-    });
-}
-exports.expandWidget = expandWidget;
-/** @internal */
 function useSavedFrontstageState(frontstageDef) {
     const uiStateStorage = (0, useUiStateStorage_1.useUiStateStorageHandler)();
     const uiStateStorageRef = React.useRef(uiStateStorage);
@@ -663,7 +536,7 @@ 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;
@@ -675,11 +548,11 @@ function useSavedFrontstageState(frontstageDef) {
                 const setting = settingResult.setting;
                 if (setting.version === version &&
                     setting.stateVersion === exports.stateVersion) {
-                    frontstageDef.nineZoneState = restoreNineZoneState(frontstageDef, setting.nineZone);
+                    restoreNineZoneState(frontstageDef, setting.nineZone);
                     return;
                 }
             }
-            frontstageDef.nineZoneState = initializeNineZoneState(frontstageDef);
+            initializeNineZoneState(frontstageDef);
         }
         void fetchFrontstageState();
     }, [frontstageDef]);
@@ -774,12 +647,10 @@ 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(exports.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_1.UiFramework.translate("widget.labels.toolSettings"), []);
@@ -815,20 +686,20 @@ function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel) {
     }, [frontstageDef, useToolAsToolSettingsLabel, defaultLabel]);
 }
 exports.useFrontstageManager = useFrontstageManager;
+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
 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);
@@ -840,8 +711,9 @@ function useItemsManager(frontstageDef) {
     }, [frontstageDef]);
 }
 exports.useItemsManager = useItemsManager;
-// istanbul ignore next
-function determineNewWidgets(defs, state) {
+function determineNewWidgets(frontstageDef, defs) {
+    const state = frontstageDef.nineZoneState;
+    (0, core_bentley_1.assert)(!!state);
     defs = defs || [];
     const uniqueDefs = defs.filter((def, index, array) => {
         return index === array.findIndex((def1) => def.id === def1.id);