@jupyterlab/application 4.6.0-alpha.5 → 4.6.0-beta.1

package/lib/shell.js

@@ -1,14 +1,16 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { DocumentWidget } from '@jupyterlab/docregistry';
 import { nullTranslator } from '@jupyterlab/translation';
-import { classes, DockPanelSvg, LabIcon, TabBarSvg, tabIcon, TabPanelSvg } from '@jupyterlab/ui-components';
+import { classes, LabIcon, TabBarSvg, tabIcon, TabPanelSvg } from '@jupyterlab/ui-components';
 import { ArrayExt, find, map } from '@lumino/algorithm';
 import { JSONExt, PromiseDelegate, Token } from '@lumino/coreutils';
 import { MessageLoop } from '@lumino/messaging';
 import { Debouncer } from '@lumino/polling';
 import { Signal } from '@lumino/signaling';
 import { AccordionPanel, BoxLayout, BoxPanel, FocusTracker, Panel, SplitPanel, StackedPanel, TabBar, Widget } from '@lumino/widgets';
+import { OptimizedDockPanelSvg } from './dockpanel';
 /**
  * The class name added to AppShell instances.
  */
@@ -30,6 +32,10 @@ const ACTIVE_CLASS = 'jp-mod-active';
  */
 const DEFAULT_RANK = 900;
 const ACTIVITY_CLASS = 'jp-Activity';
+/**
+ * The default relative size of the down area when it is expanded.
+ */
+const DEFAULT_DOWN_AREA_SIZE = 0.25;
 /**
  * The JupyterLab application shell token.
  */
@@ -68,6 +74,7 @@ export class LabShell extends Widget {
         this._currentPathChanged = new Signal(this);
         this._modeChanged = new Signal(this);
         this._isRestored = false;
+        this._lastDownAreaSize = DEFAULT_DOWN_AREA_SIZE;
         this._layoutModified = new Signal(this);
         this._layoutDebouncer = new Debouncer(() => {
             this._layoutModified.emit(undefined);
@@ -101,7 +108,7 @@ export class LabShell extends Widget {
         const hboxPanel = new BoxPanel();
         const vsplitPanel = (this._vsplitPanel =
             new Private.RestorableSplitPanel());
-        const dockPanel = (this._dockPanel = new DockPanelSvg({
+        const dockPanel = (this._dockPanel = new OptimizedDockPanelSvg({
             hiddenMode: Widget.HiddenMode.Display
         }));
         MessageLoop.installMessageHook(dockPanel, this._dockChildHook);
@@ -110,8 +117,14 @@ export class LabShell extends Widget {
         const downPanel = (this._downPanel = new TabPanelSvg({
             tabsMovable: true
         }));
-        const leftHandler = (this._leftHandler = new Private.SideBarHandler());
-        const rightHandler = (this._rightHandler = new Private.SideBarHandler());
+        const leftHandler = (this._leftHandler = new Private.SideBarHandler({
+            side: 'left',
+            host: hboxPanel
+        }));
+        const rightHandler = (this._rightHandler = new Private.SideBarHandler({
+            side: 'right',
+            host: hboxPanel
+        }));
         const rootLayout = new BoxLayout();
         headerPanel.id = 'jp-header-panel';
         menuHandler.panel.id = 'jp-menu-panel';
@@ -126,10 +139,14 @@ export class LabShell extends Widget {
         leftHandler.sideBar.addClass('jp-mod-left');
         leftHandler.sideBar.node.setAttribute('role', 'complementary');
         leftHandler.stackedPanel.id = 'jp-left-stack';
+        leftHandler.area.addClass('jp-SideArea');
+        leftHandler.area.node.setAttribute('data-side', 'left');
         rightHandler.sideBar.addClass(SIDEBAR_CLASS);
         rightHandler.sideBar.addClass('jp-mod-right');
         rightHandler.sideBar.node.setAttribute('role', 'complementary');
         rightHandler.stackedPanel.id = 'jp-right-stack';
+        rightHandler.area.addClass('jp-SideArea');
+        rightHandler.area.node.setAttribute('data-side', 'right');
         dockPanel.node.setAttribute('role', 'main');
         hboxPanel.spacing = 0;
         vsplitPanel.spacing = 1;
@@ -140,17 +157,17 @@ export class LabShell extends Widget {
         hboxPanel.direction = 'left-to-right';
         hsplitPanel.orientation = 'horizontal';
         bottomPanel.direction = 'bottom-to-top';
-        SplitPanel.setStretch(leftHandler.stackedPanel, 0);
+        SplitPanel.setStretch(leftHandler.area, 0);
         SplitPanel.setStretch(downPanel, 0);
         SplitPanel.setStretch(dockPanel, 1);
-        SplitPanel.setStretch(rightHandler.stackedPanel, 0);
+        SplitPanel.setStretch(rightHandler.area, 0);
         BoxPanel.setStretch(leftHandler.sideBar, 0);
         BoxPanel.setStretch(hsplitPanel, 1);
         BoxPanel.setStretch(rightHandler.sideBar, 0);
         SplitPanel.setStretch(vsplitPanel, 1);
-        hsplitPanel.addWidget(leftHandler.stackedPanel);
+        hsplitPanel.addWidget(leftHandler.area);
         hsplitPanel.addWidget(dockPanel);
-        hsplitPanel.addWidget(rightHandler.stackedPanel);
+        hsplitPanel.addWidget(rightHandler.area);
         vsplitPanel.addWidget(hsplitPanel);
         vsplitPanel.addWidget(downPanel);
         hboxPanel.addWidget(leftHandler.sideBar);
@@ -282,6 +299,12 @@ export class LabShell extends Widget {
     get currentWidget() {
         return this._tracker.currentWidget;
     }
+    /**
+     * Whether the down area is collapsed.
+     */
+    get downCollapsed() {
+        return this._downPanel.isHidden;
+    }
     /**
      * A signal emitted when the main area's layout is modified.
      */
@@ -443,6 +466,7 @@ export class LabShell extends Widget {
      * Activate a widget in its area.
      */
     activateById(id) {
+        var _a;
         if (this._leftHandler.has(id)) {
             this._leftHandler.activate(id);
             return;
@@ -453,7 +477,13 @@ export class LabShell extends Widget {
         }
         const tabIndex = this._downPanel.tabBar.titles.findIndex(title => title.owner.id === id);
         if (tabIndex >= 0) {
+            const wasHidden = this._downPanel.isHidden;
             this._downPanel.currentIndex = tabIndex;
+            if (wasHidden) {
+                this._showDownPanel();
+                this._onLayoutModified();
+            }
+            (_a = this._downPanel.currentWidget) === null || _a === void 0 ? void 0 : _a.activate();
             return;
         }
         const dock = this._dockPanel;
@@ -613,6 +643,12 @@ export class LabShell extends Widget {
                     ...userPosition === null || userPosition === void 0 ? void 0 : userPosition.options
                 }
                 : undefined;
+        if ((options === null || options === void 0 ? void 0 : options.rank) !== undefined) {
+            this._sideOptionsCache.set(widget, {
+                ...this._sideOptionsCache.get(widget),
+                rank: options.rank
+            });
+        }
         switch (area || 'main') {
             case 'bottom':
                 return this._addToBottomArea(widget, options);
@@ -635,13 +671,19 @@ export class LabShell extends Widget {
         }
     }
     /**
-     * Move a widget type to a new area.
+     * Move a widget to a new area and update the shell user layout.
      *
-     * The type is determined from the `widget.id` and fallback to `widget.id`.
+     * The widget is reparented to `area` immediately. The type used as the
+     * user-layout key is determined from `widget.id`, falling back to
+     * `widget.id` itself.
      *
      * #### Notes
-     * If `mode` is undefined, both mode are updated.
-     * The new layout is now persisted.
+     * If `mode` is undefined, both modes are updated in the user layout.
+     * When `mode` is set, only that mode's user layout is updated, but the
+     * live widget is still reparented regardless of mode.
+     *
+     * The new layout is stored in the shell user layout. Callers are
+     * responsible for persisting it when needed.
      *
      * @param widget Widget to move
      * @param area New area
@@ -649,12 +691,22 @@ export class LabShell extends Widget {
      * @returns The new user layout
      */
     move(widget, area, mode) {
-        var _a;
+        var _a, _b;
         const type = (_a = this._idTypeMap.get(widget.id)) !== null && _a !== void 0 ? _a : widget.id;
+        const rank = (_b = this._sideOptionsCache.get(widget)) === null || _b === void 0 ? void 0 : _b.rank;
         for (const m of ['single-document', 'multiple-document'].filter(c => !mode || c === mode)) {
+            const position = this._userLayout[m][type];
             this._userLayout[m][type] = {
-                ...this._userLayout[m][type],
-                area
+                ...position,
+                area,
+                ...(rank !== undefined
+                    ? {
+                        options: {
+                            ...position === null || position === void 0 ? void 0 : position.options,
+                            rank
+                        }
+                    }
+                    : {})
             };
         }
         this.add(widget, area);
@@ -674,6 +726,15 @@ export class LabShell extends Widget {
         this._rightHandler.collapse();
         this._onLayoutModified();
     }
+    /**
+     * Collapse the down area.
+     */
+    collapseDown() {
+        if (!this._downPanel.isHidden) {
+            this._hideDownPanel();
+            this._onLayoutModified();
+        }
+    }
     /**
      * Dispose the shell.
      */
@@ -706,6 +767,18 @@ export class LabShell extends Widget {
         this._rightHandler.expand();
         this._onLayoutModified();
     }
+    /**
+     * Expand the down area.
+     */
+    expandDown() {
+        var _a;
+        if (this._downPanel.stackedPanel.widgets.length === 0) {
+            return;
+        }
+        this._showDownPanel();
+        (_a = this._downPanel.currentWidget) === null || _a === void 0 ? void 0 : _a.activate();
+        this._onLayoutModified();
+    }
     /**
      * Close all widgets in the main and down area.
      */
@@ -770,7 +843,7 @@ export class LabShell extends Widget {
      * This should only be called once.
      */
     async restoreLayout(mode, layoutRestorer, configuration = {}) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         // Set the configuration and add widgets added before the shell was ready.
         this._userLayout = {
             'single-document': (_a = configuration['single-document']) !== null && _a !== void 0 ? _a : {},
@@ -813,11 +886,39 @@ export class LabShell extends Widget {
         // Rehydrate the down area
         if (downArea) {
             const { currentWidget, widgets, size } = downArea;
-            const widgetIds = (_c = widgets === null || widgets === void 0 ? void 0 : widgets.map(widget => widget.id)) !== null && _c !== void 0 ? _c : [];
+            const collapsed = (_c = downArea.collapsed) !== null && _c !== void 0 ? _c : !size;
+            const widgetIds = (_d = widgets === null || widgets === void 0 ? void 0 : widgets.map(widget => widget.id)) !== null && _d !== void 0 ? _d : [];
+            const otherAreaWidgetIds = new Set();
+            const collectMainWidgetIds = (area) => {
+                if (!area) {
+                    return;
+                }
+                if (area.type === 'tab-area') {
+                    area.widgets.forEach(widget => {
+                        otherAreaWidgetIds.add(widget.id);
+                    });
+                    return;
+                }
+                area.children.forEach(collectMainWidgetIds);
+            };
+            collectMainWidgetIds((_e = mainArea === null || mainArea === void 0 ? void 0 : mainArea.dock) === null || _e === void 0 ? void 0 : _e.main);
+            (_f = leftArea === null || leftArea === void 0 ? void 0 : leftArea.widgets) === null || _f === void 0 ? void 0 : _f.forEach(widget => {
+                otherAreaWidgetIds.add(widget.id);
+            });
+            (_g = rightArea === null || rightArea === void 0 ? void 0 : rightArea.widgets) === null || _g === void 0 ? void 0 : _g.forEach(widget => {
+                otherAreaWidgetIds.add(widget.id);
+            });
             // Remove absent widgets
             this._downPanel.tabBar.titles
                 .filter(title => !widgetIds.includes(title.owner.id))
-                .map(title => title.owner.close());
+                .forEach(title => {
+                if (otherAreaWidgetIds.has(title.owner.id)) {
+                    title.owner.parent = null;
+                }
+                else {
+                    title.owner.close();
+                }
+            });
             // Add new widgets
             const titleIds = this._downPanel.tabBar.titles.map(title => title.owner.id);
             widgets === null || widgets === void 0 ? void 0 : widgets.filter(widget => !titleIds.includes(widget.id)).map(widget => this._downPanel.addWidget(widget));
@@ -832,18 +933,23 @@ export class LabShell extends Widget {
             }
             if (currentWidget) {
                 const index = this._downPanel.stackedPanel.widgets.findIndex(widget => widget.id === currentWidget.id);
-                if (index) {
+                if (index >= 0) {
                     this._downPanel.currentIndex = index;
-                    (_d = this._downPanel.currentWidget) === null || _d === void 0 ? void 0 : _d.activate();
                 }
             }
-            if (size && size > 0.0) {
-                this._vsplitPanel.setRelativeSizes([1.0 - size, size]);
+            if (!collapsed && (widgets === null || widgets === void 0 ? void 0 : widgets.length) && size && size > 0.0) {
+                this._showDownPanel(size);
+                (_h = this._downPanel.currentWidget) === null || _h === void 0 ? void 0 : _h.activate();
             }
             else {
-                // Close all tabs and hide the panel
-                this._downPanel.stackedPanel.widgets.forEach(widget => widget.close());
-                this._downPanel.hide();
+                this._hideDownPanel();
+                if (size && size > 0.0) {
+                    // Remember the saved size so a later expand restores the user's
+                    // previous height. `_hideDownPanel` seeds `_lastDownAreaSize`
+                    // from the current splitter, which at cold startup reflects the
+                    // default layout rather than the persisted value.
+                    this._lastDownAreaSize = size;
+                }
             }
         }
         // Rehydrate the left area.
@@ -890,9 +996,14 @@ export class LabShell extends Widget {
                     : this._dockPanel.saveLayout()
             },
             downArea: {
+                collapsed: this.downCollapsed,
                 currentWidget: this._downPanel.currentWidget,
                 widgets: Array.from(this._downPanel.stackedPanel.widgets),
-                size: this._vsplitPanel.relativeSizes()[1]
+                size: this._downPanel.stackedPanel.widgets.length === 0
+                    ? 0
+                    : this.downCollapsed
+                        ? this._lastDownAreaSize
+                        : this._vsplitPanel.relativeSizes()[1]
             },
             leftArea: this._leftHandler.dehydrate(),
             rightArea: this._rightHandler.dehydrate(),
@@ -971,12 +1082,32 @@ export class LabShell extends Widget {
             }
             this._dockPanel.fit();
         }
+        if (config.optimizeResize !== undefined) {
+            this._dockPanel.optimizeResize = config.optimizeResize;
+        }
+        if (config.activityBarPosition !== undefined) {
+            this._setActivityBarPosition('left', config.activityBarPosition);
+            this._setActivityBarPosition('right', config.activityBarPosition);
+        }
+    }
+    /**
+     * Move the activity bar of a side area to a new position.
+     *
+     * @param side The side area to update.
+     * @param position The new position of the activity bar.
+     */
+    _setActivityBarPosition(side, position) {
+        const handler = side === 'left' ? this._leftHandler : this._rightHandler;
+        if (handler.position === position) {
+            return;
+        }
+        handler.position = position;
+        this._onLayoutModified();
     }
     /**
      * Returns the widgets for an application area.
      */
     widgets(area) {
-        // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
         switch (area !== null && area !== void 0 ? area : 'main') {
             case 'main':
                 return this._dockPanel.widgets();
@@ -992,6 +1123,8 @@ export class LabShell extends Widget {
                 return this._menuHandler.panel.children();
             case 'bottom':
                 return this._bottomPanel.children();
+            case 'down':
+                return this._downPanel.stackedPanel.children();
             default:
                 throw new Error(`Invalid area: ${area}`);
         }
@@ -1008,7 +1141,7 @@ export class LabShell extends Widget {
     _updateTitlePanelTitle() {
         let current = this.currentWidget;
         const inputElement = this._titleHandler.inputElement;
-        inputElement.value = current ? current.title.label : '';
+        inputElement.value = current ? TabBarSvg.titleLabel(current.title) : '';
         inputElement.title = current ? current.title.caption : '';
     }
     /**
@@ -1205,10 +1338,26 @@ export class LabShell extends Widget {
             title.iconClass = classes(title.iconClass, 'jp-Icon');
         }
         this._downPanel.addWidget(widget);
-        this._onLayoutModified();
         if (this._downPanel.isHidden) {
-            this._downPanel.show();
+            this._showDownPanel();
         }
+        this._onLayoutModified();
+    }
+    _showDownPanel(size = this._lastDownAreaSize) {
+        const downSize = size > 0.0 ? size : DEFAULT_DOWN_AREA_SIZE;
+        this._lastDownAreaSize = downSize;
+        this._vsplitPanel.setRelativeSizes([
+            Math.max(1.0 - downSize, 0.0),
+            downSize
+        ]);
+        this._downPanel.show();
+    }
+    _hideDownPanel() {
+        const size = this._vsplitPanel.relativeSizes()[1];
+        if (size > 0.0) {
+            this._lastDownAreaSize = size;
+        }
+        this._downPanel.hide();
     }
     /*
      * Return the tab bar adjacent to the current TabBar or `null`.
@@ -1273,7 +1422,7 @@ export class LabShell extends Widget {
      */
     _onTabPanelChanged() {
         if (this._downPanel.stackedPanel.widgets.length === 0) {
-            this._downPanel.hide();
+            this._hideDownPanel();
         }
         this._onLayoutModified();
     }
@@ -1401,21 +1550,36 @@ var Private;
         /**
          * Construct a new side bar handler.
          */
-        constructor() {
+        constructor(options) {
             this._isHiddenByUser = false;
+            this._isCollapsedByUser = false;
             this._items = new Array();
+            this._position = 'side';
             this._updated = new Signal(this);
+            this._side = options.side;
+            this._host = options.host;
             this._sideBar = new TabBar({
                 insertBehavior: 'none',
                 removeBehavior: 'none',
                 allowDeselect: true,
                 orientation: 'vertical'
             });
+            // Mirror the initial position on the bar via `data-side`. The setter
+            // keeps it in sync on subsequent transitions.
+            this._sideBar.node.setAttribute('data-side', this._side);
             this._stackedPanel = new StackedPanel();
+            this._area = new BoxPanel({ direction: 'top-to-bottom', spacing: 0 });
+            // The stacked panel always lives inside the area wrapper. It is the
+            // only stretchable child so the activity bar (when inside the wrapper)
+            // takes only its natural size at the top or bottom.
+            BoxPanel.setStretch(this._stackedPanel, 1);
+            BoxPanel.setStretch(this._sideBar, 0);
+            this._area.addWidget(this._stackedPanel);
             this._sideBar.hide();
             this._stackedPanel.hide();
             this._lastCurrent = null;
             this._sideBar.currentChanged.connect(this._onCurrentChanged, this);
+            this._sideBar.tabCloseRequested.connect(this._onTabCloseRequested, this);
             this._sideBar.tabActivateRequested.connect(this._onTabActivateRequested, this);
             this._stackedPanel.widgetRemoved.connect(this._onWidgetRemoved, this);
         }
@@ -1437,6 +1601,70 @@ var Private;
         get stackedPanel() {
             return this._stackedPanel;
         }
+        /**
+         * Get the wrapper panel for this side area.
+         *
+         * The wrapper always contains the stacked panel. When the activity bar is
+         * positioned inside the area (top or bottom), it is also a child of this
+         * wrapper. The wrapper is what gets added to the main horizontal split.
+         */
+        get area() {
+            return this._area;
+        }
+        /**
+         * Get the current position of the activity bar.
+         */
+        get position() {
+            return this._position;
+        }
+        /**
+         * Set the position of the activity bar relative to the area.
+         *
+         * In `'side'` mode the activity bar is reattached to the host panel
+         * (e.g. the shell's hboxPanel) on its natural side. In `'top'` or
+         * `'bottom'` mode the activity bar is reparented inside the area wrapper
+         * above or below the stacked panel and laid out horizontally.
+         */
+        set position(value) {
+            if (this._position === value) {
+                return;
+            }
+            this._position = value;
+            // The user-collapse flag only has meaning in horizontal mode and should
+            // not carry over from a prior interaction in a different mode.
+            this._isCollapsedByUser = false;
+            // Detach the activity bar from its current parent before reattaching
+            // it to the new one (host or area wrapper).
+            this._sideBar.parent = null;
+            // Update the orientation and the position-related attributes on the
+            // activity bar. The icon/label rotation depends on these.
+            const isLeft = this._side === 'left';
+            this._sideBar.orientation = value === 'side' ? 'vertical' : 'horizontal';
+            // Keep `jp-mod-left`/`jp-mod-right` for backward compatibility with
+            // existing themes that target those classes.
+            this._sideBar.toggleClass('jp-mod-left', isLeft && value === 'side');
+            this._sideBar.toggleClass('jp-mod-right', !isLeft && value === 'side');
+            // `data-side` mirrors the `data-orientation` attribute set by Lumino
+            // and is the canonical hook for new CSS rules.
+            const dataSide = value === 'side' ? (isLeft ? 'left' : 'right') : value;
+            this._sideBar.node.setAttribute('data-side', dataSide);
+            // In 'side' mode, clicking the active tab collapses the area (the
+            // activity bar stays as a thin strip). That collapse UX makes no sense
+            // when the activity bar is at the top or bottom — clicking would just
+            // leave an empty horizontal strip — so disable deselection there.
+            this._sideBar.allowDeselect = value === 'side';
+            if (value === 'side') {
+                const index = isLeft ? 0 : this._host.widgets.length;
+                this._host.insertWidget(index, this._sideBar);
+            }
+            else if (value === 'top') {
+                this._area.insertWidget(0, this._sideBar);
+            }
+            else {
+                this._area.addWidget(this._sideBar);
+            }
+            this._refreshVisibility();
+        }
         /**
          * Signal fires when the stack panel or the sidebar changes
          */
@@ -1460,13 +1688,20 @@ var Private;
          *
          * #### Notes
          * This will open the most recently used tab, or the first tab
-         * if there is no most recently used.
+         * if there is no most recently used. In `'top'` or `'bottom'` mode it
+         * also re-shows the wrapper area if a previous `collapse()` call hid it.
          */
         expand() {
+            this._isCollapsedByUser = false;
             const previous = this._lastCurrent || (this._items.length > 0 && this._items[0].widget);
             if (previous) {
                 this.activate(previous.id);
             }
+            else {
+                // No tab to activate, but we still need to reflect the cleared
+                // collapse flag (relevant in 'top'/'bottom' mode).
+                this._refreshVisibility();
+            }
         }
         /**
          * Activate a widget residing in the side bar by ID.
@@ -1476,6 +1711,7 @@ var Private;
         activate(id) {
             const widget = this._findWidgetByID(id);
             if (widget) {
+                this._isCollapsedByUser = false;
                 this._sideBar.currentTitle = widget.title;
                 widget.activate();
             }
@@ -1488,9 +1724,16 @@ var Private;
         }
         /**
          * Collapse the sidebar so no items are expanded.
+         *
+         * #### Notes
+         * In `'side'` mode this only deselects the active tab, leaving the
+         * activity bar visible. In `'top'` or `'bottom'` mode it also hides the
+         * wrapper area entirely so the column can reclaim its space.
          */
         collapse() {
+            this._isCollapsedByUser = true;
             this._sideBar.currentTitle = null;
+            this._refreshVisibility();
         }
         /**
          * Add a widget and its title to the stacked panel and side bar.
@@ -1508,7 +1751,7 @@ var Private;
             const title = this._sideBar.insertTab(index, widget.title);
             // Store the parent id in the title dataset
             // in order to dispatch click events to the right widget.
-            title.dataset = { id: widget.id };
+            title.dataset = { ...title.dataset, id: widget.id };
             if (title.icon instanceof LabIcon) {
                 // bind an appropriate style to the icon
                 title.icon = title.icon.bindprops({
@@ -1559,15 +1802,43 @@ var Private;
          * Rehydrate the side bar.
          */
         rehydrate(data) {
+            if (Array.isArray(data.widgets)) {
+                const widgetIds = data.widgets.map(widget => widget.id);
+                const widgetIdSet = new Set(widgetIds);
+                // Add widgets that are in the saved layout but not currently
+                // in the sidebar.
+                const currentIds = this._stackedPanel.widgets.map(widget => widget.id);
+                data.widgets
+                    .filter(widget => !currentIds.includes(widget.id))
+                    .forEach(widget => {
+                    this.addWidget(widget, DEFAULT_RANK);
+                });
+                // Merge the saved order into the current sidebar slots so widgets
+                // absent from the saved layout keep their rank-relative positions.
+                let savedIndex = 0;
+                const targetIds = this._stackedPanel.widgets.map(widget => widgetIdSet.has(widget.id) ? widgetIds[savedIndex++] : widget.id);
+                targetIds.forEach((id, targetIndex) => {
+                    const currentIndex = this._stackedPanel.widgets.findIndex(widget => widget.id === id);
+                    if (currentIndex >= 0 && currentIndex !== targetIndex) {
+                        const widget = this._stackedPanel.widgets[currentIndex];
+                        ArrayExt.move(this._items, currentIndex, targetIndex);
+                        this._stackedPanel.insertWidget(targetIndex, widget);
+                        this._sideBar.insertTab(targetIndex, widget.title);
+                    }
+                });
+            }
+            if (data.visible) {
+                this.show();
+            }
+            else {
+                this.hide();
+            }
             if (data.currentWidget) {
                 this.activate(data.currentWidget.id);
             }
-            if (data.collapsed) {
+            else if (data.collapsed) {
                 this.collapse();
             }
-            if (!data.visible) {
-                this.hide();
-            }
             if (data.widgetStates) {
                 this._stackedPanel.widgets.forEach((w) => {
                     var _a;
@@ -1578,7 +1849,12 @@ var Private;
                             const expansion = ((_a = state.expansionStates) !== null && _a !== void 0 ? _a : [])[widx];
                             if (typeof expansion === 'boolean' &&
                                 w.content instanceof AccordionPanel) {
-                                expansion ? w.content.expand(widx) : w.content.collapse(widx);
+                                if (expansion) {
+                                    w.content.expand(widx);
+                                }
+                                else {
+                                    w.content.collapse(widx);
+                                }
                             }
                         });
                         if (state.sizes) {
@@ -1600,6 +1876,7 @@ var Private;
          */
         show() {
             this._isHiddenByUser = false;
+            this._isCollapsedByUser = false;
             this._refreshVisibility();
         }
         /**
@@ -1632,8 +1909,34 @@ var Private;
          * Refresh the visibility of the side bar and stacked panel.
          */
         _refreshVisibility() {
-            this._stackedPanel.setHidden(this._sideBar.currentTitle === null);
+            if (this._position === 'side') {
+                // In 'side' mode the activity bar lives outside the wrapper and the
+                // wrapper holds only the stack panel. Hiding the stack panel when no
+                // widget is current collapses the area down to the activity bar.
+                this._stackedPanel.setHidden(this._sideBar.currentTitle === null);
+            }
+            else {
+                // In 'top'/'bottom' mode the activity bar lives inside the wrapper
+                // alongside the stack panel. The stack panel stays visible (and
+                // stretches as an empty area when no widget is current) so the
+                // activity bar stays anchored at the top or bottom of the wrapper.
+                this._stackedPanel.setHidden(this._items.length === 0);
+            }
             this._sideBar.setHidden(this._isHiddenByUser || this._sideBar.titles.length === 0);
+            // Hide the wrapper area so the parent split panel can reclaim its
+            // allocated width when no contents would be visible.
+            if (this._position === 'side') {
+                // In 'side' mode wrapper visibility tracks the stack panel.
+                this._area.setHidden(this._stackedPanel.isHidden);
+            }
+            else {
+                // In 'top'/'bottom' mode the wrapper hides only when the user has
+                // explicitly collapsed the side area or there are no widgets at all.
+                // Toggling the activity bar visibility ('Show Left/Right Activity Bar')
+                // hides only the bar — the stack panel and selected widget stay
+                // visible inside the wrapper, matching the 'side' mode semantic.
+                this._area.setHidden(this._isCollapsedByUser || this._sideBar.titles.length === 0);
+            }
             this._updated.emit();
         }
         /**
@@ -1661,6 +1964,12 @@ var Private;
         _onTabActivateRequested(sender, args) {
             args.title.owner.activate();
         }
+        /**
+         * Handle a `tabCloseRequested` signal from the sidebar.
+         */
+        _onTabCloseRequested(sender, args) {
+            args.title.owner.close();
+        }
         /*
          * Handle the `widgetRemoved` signal from the stacked panel.
          */
@@ -1774,7 +2083,7 @@ var Private;
                 if (widget == null) {
                     return;
                 }
-                const oldName = widget.title.label;
+                const oldName = TabBarSvg.titleLabel(widget.title);
                 const inputElement = this.inputElement;
                 const newName = inputElement.value;
                 inputElement.blur();