dockview 1.8.5 → 1.9.1

package/dist/dockview.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.8.5
+ * @version 1.9.1
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -256,6 +256,14 @@
                 // noop
             },
         };
+        function from(func) {
+            return {
+                dispose: () => {
+                    func();
+                },
+            };
+        }
+        Disposable.from = from;
     })(Disposable || (Disposable = {}));
     class CompositeDisposable {
         get isDisposed() {
@@ -440,6 +448,61 @@
     function quasiDefaultPrevented(event) {
         return event[QUASI_PREVENT_DEFAULT_KEY];
     }
+    function addStyles(document, styleSheetList) {
+        const styleSheets = Array.from(styleSheetList);
+        for (const styleSheet of styleSheets) {
+            if (styleSheet.href) {
+                const link = document.createElement('link');
+                link.href = styleSheet.href;
+                link.type = styleSheet.type;
+                link.rel = 'stylesheet';
+                document.head.appendChild(link);
+            }
+            let cssTexts = [];
+            try {
+                if (styleSheet.cssRules) {
+                    cssTexts = Array.from(styleSheet.cssRules).map((rule) => rule.cssText);
+                }
+            }
+            catch (err) {
+                // security errors (lack of permissions), ignore
+            }
+            for (const rule of cssTexts) {
+                const style = document.createElement('style');
+                style.appendChild(document.createTextNode(rule));
+                document.head.appendChild(style);
+            }
+        }
+    }
+    function getDomNodePagePosition(domNode) {
+        const { left, top, width, height } = domNode.getBoundingClientRect();
+        return {
+            left: left + window.scrollX,
+            top: top + window.scrollY,
+            width: width,
+            height: height,
+        };
+    }
+    /**
+     * Check whether an element is in the DOM (including the Shadow DOM)
+     * @see https://terodox.tech/how-to-tell-if-an-element-is-in-the-dom-including-the-shadow-dom/
+     */
+    function isInDocument(element) {
+        let currentElement = element;
+        while (currentElement === null || currentElement === void 0 ? void 0 : currentElement.parentNode) {
+            if (currentElement.parentNode === document) {
+                return true;
+            }
+            else if (currentElement.parentNode instanceof DocumentFragment) {
+                // handle shadow DOMs
+                currentElement = currentElement.parentNode.host;
+            }
+            else {
+                currentElement = currentElement.parentNode;
+            }
+        }
+        return false;
+    }
 
     function tail(arr) {
         if (arr.length === 0) {
@@ -637,6 +700,9 @@
         Sizing.Invisible = Invisible;
     })(exports.Sizing || (exports.Sizing = {}));
     class Splitview {
+        get contentSize() {
+            return this._contentSize;
+        }
         get size() {
             return this._size;
         }
@@ -702,7 +768,7 @@
             this.sashes = [];
             this._size = 0;
             this._orthogonalSize = 0;
-            this.contentSize = 0;
+            this._contentSize = 0;
             this._proportions = undefined;
             this._startSnappingEnabled = true;
             this._endSnappingEnabled = true;
@@ -821,7 +887,7 @@
                     );
                 });
                 // Initialize content size and proportions for first layout
-                this.contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
+                this._contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
                 this.saveProportions();
             }
         }
@@ -1095,7 +1161,7 @@
             this.addView(view, sizing, to);
         }
         layout(size, orthogonalSize) {
-            const previousSize = Math.max(this.size, this.contentSize);
+            const previousSize = Math.max(this.size, this._contentSize);
             this.size = size;
             this.orthogonalSize = orthogonalSize;
             if (!this.proportions) {
@@ -1105,9 +1171,23 @@
                 this.resize(this.viewItems.length - 1, size - previousSize, undefined, lowPriorityIndexes, highPriorityIndexes);
             }
             else {
+                let total = 0;
                 for (let i = 0; i < this.viewItems.length; i++) {
                     const item = this.viewItems[i];
-                    item.size = clamp(Math.round(this.proportions[i] * size), item.minimumSize, item.maximumSize);
+                    const proportion = this.proportions[i];
+                    if (typeof proportion === 'number') {
+                        total += proportion;
+                    }
+                    else {
+                        size -= item.size;
+                    }
+                }
+                for (let i = 0; i < this.viewItems.length; i++) {
+                    const item = this.viewItems[i];
+                    const proportion = this.proportions[i];
+                    if (typeof proportion === 'number' && total > 0) {
+                        item.size = clamp(Math.round((proportion * size) / total), item.minimumSize, item.maximumSize);
+                    }
                 }
             }
             this.distributeEmptySpace();
@@ -1144,12 +1224,12 @@
             }
         }
         saveProportions() {
-            if (this.proportionalLayout && this.contentSize > 0) {
-                this._proportions = this.viewItems.map((i) => i.size / this.contentSize);
+            if (this.proportionalLayout && this._contentSize > 0) {
+                this._proportions = this.viewItems.map((i) => i.visible ? i.size / this._contentSize : undefined);
             }
         }
         layoutViews() {
-            this.contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
+            this._contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
             let sum = 0;
             const x = [];
             this.updateSashEnablement();
@@ -1243,7 +1323,7 @@
                     }
                     else if (snappedAfter &&
                         collapsesDown[index] &&
-                        (position < this.contentSize || this.endSnappingEnabled)) {
+                        (position < this._contentSize || this.endSnappingEnabled)) {
                         this.updateSash(sash, exports.SashState.MAXIMUM);
                     }
                     else {
@@ -1532,7 +1612,6 @@
         setVisible(visible) {
             if (this.view.setVisible) {
                 this.view.setVisible(visible);
-                this._onDidChange.fire({});
             }
         }
         layout(size, orthogonalSize) {
@@ -1564,10 +1643,14 @@
         get minimumSize() {
             return this.children.length === 0
                 ? 0
-                : Math.max(...this.children.map((c) => c.minimumOrthogonalSize));
+                : Math.max(...this.children.map((c, index) => this.splitview.isViewVisible(index)
+                    ? c.minimumOrthogonalSize
+                    : 0));
         }
         get maximumSize() {
-            return Math.min(...this.children.map((c) => c.maximumOrthogonalSize));
+            return Math.min(...this.children.map((c, index) => this.splitview.isViewVisible(index)
+                ? c.maximumOrthogonalSize
+                : Number.POSITIVE_INFINITY));
         }
         get minimumOrthogonalSize() {
             return this.splitview.minimumSize;
@@ -1625,6 +1708,8 @@
             this.children = [];
             this._onDidChange = new Emitter();
             this.onDidChange = this._onDidChange.event;
+            this._onDidVisibilityChange = new Emitter();
+            this.onDidVisibilityChange = this._onDidVisibilityChange.event;
             this._orthogonalSize = orthogonalSize;
             this._size = size;
             this.element = document.createElement('div');
@@ -1659,7 +1744,7 @@
                     styles,
                 });
             }
-            this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => {
+            this.addDisposables(this._onDidChange, this._onDidVisibilityChange, this.splitview.onDidSashEnd(() => {
                 this._onDidChange.fire({});
             }));
             this.setupChildrenEvents();
@@ -1682,7 +1767,15 @@
             if (this.splitview.isViewVisible(index) === visible) {
                 return;
             }
+            const wereAllChildrenHidden = this.splitview.contentSize === 0;
             this.splitview.setViewVisible(index, visible);
+            const areAllChildrenHidden = this.splitview.contentSize === 0;
+            // If all children are hidden then the parent should hide the entire splitview
+            // If the entire splitview is hidden then the parent should show the splitview when a child is shown
+            if ((visible && wereAllChildrenHidden) ||
+                (!visible && areAllChildrenHidden)) {
+                this._onDidVisibilityChange.fire(visible);
+            }
         }
         moveChild(from, to) {
             if (from === to) {
@@ -1746,13 +1839,20 @@
         }
         setupChildrenEvents() {
             this._childrenDisposable.dispose();
-            this._childrenDisposable = exports.DockviewEvent.any(...this.children.map((c) => c.onDidChange))((e) => {
+            this._childrenDisposable = new CompositeDisposable(exports.DockviewEvent.any(...this.children.map((c) => c.onDidChange))((e) => {
                 /**
                  * indicate a change has occured to allows any re-rendering but don't bubble
                  * event because that was specific to this branch
                  */
                 this._onDidChange.fire({ size: e.orthogonalSize });
-            });
+            }), ...this.children.map((c, i) => {
+                if (c instanceof BranchNode) {
+                    return c.onDidVisibilityChange((visible) => {
+                        this.setChildVisible(i, visible);
+                    });
+                }
+                return Disposable.NONE;
+            }));
         }
         dispose() {
             this._childrenDisposable.dispose();
@@ -1913,7 +2013,69 @@
         get maximumHeight() {
             return this.root.maximumHeight;
         }
+        maximizedView() {
+            var _a;
+            return (_a = this._maximizedNode) === null || _a === void 0 ? void 0 : _a.view;
+        }
+        hasMaximizedView() {
+            return this._maximizedNode !== undefined;
+        }
+        maximizeView(view) {
+            const location = getGridLocation(view.element);
+            const [_, node] = this.getNode(location);
+            if (!(node instanceof LeafNode)) {
+                return;
+            }
+            if (this._maximizedNode === node) {
+                return;
+            }
+            if (this.hasMaximizedView()) {
+                this.exitMaximizedView();
+            }
+            function hideAllViewsBut(parent, exclude) {
+                for (let i = 0; i < parent.children.length; i++) {
+                    const child = parent.children[i];
+                    if (child instanceof LeafNode) {
+                        if (child !== exclude) {
+                            parent.setChildVisible(i, false);
+                        }
+                    }
+                    else {
+                        hideAllViewsBut(child, exclude);
+                    }
+                }
+            }
+            hideAllViewsBut(this.root, node);
+            this._maximizedNode = node;
+            this._onDidMaxmizedNodeChange.fire();
+        }
+        exitMaximizedView() {
+            if (!this._maximizedNode) {
+                return;
+            }
+            function showViewsInReverseOrder(parent) {
+                for (let index = parent.children.length - 1; index >= 0; index--) {
+                    const child = parent.children[index];
+                    if (child instanceof LeafNode) {
+                        parent.setChildVisible(index, true);
+                    }
+                    else {
+                        showViewsInReverseOrder(child);
+                    }
+                }
+            }
+            showViewsInReverseOrder(this.root);
+            this._maximizedNode = undefined;
+            this._onDidMaxmizedNodeChange.fire();
+        }
         serialize() {
+            if (this.hasMaximizedView()) {
+                /**
+                 * do not persist maximized view state but we must first exit any maximized views
+                 * before serialization to ensure the correct dimensions are persisted
+                 */
+                this.exitMaximizedView();
+            }
             const root = serializeBranchNode(this.getView(), this.orientation);
             return {
                 root,
@@ -1925,7 +2087,9 @@
         dispose() {
             this.disposable.dispose();
             this._onDidChange.dispose();
+            this._onDidMaxmizedNodeChange.dispose();
             this.root.dispose();
+            this._maximizedNode = undefined;
             this.element.remove();
         }
         clear() {
@@ -1966,6 +2130,7 @@
             const oldRoot = this._root;
             if (oldRoot) {
                 oldRoot.dispose();
+                this._maximizedNode = undefined;
                 this.element.removeChild(oldRoot.element);
             }
             this._root = root;
@@ -2052,9 +2217,12 @@
         constructor(proportionalLayout, styles, orientation) {
             this.proportionalLayout = proportionalLayout;
             this.styles = styles;
+            this._maximizedNode = undefined;
             this.disposable = new MutableDisposable();
             this._onDidChange = new Emitter();
             this.onDidChange = this._onDidChange.event;
+            this._onDidMaxmizedNodeChange = new Emitter();
+            this.onDidMaxmizedNodeChange = this._onDidMaxmizedNodeChange.event;
             this.element = document.createElement('div');
             this.element.className = 'grid-view';
             this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0);
@@ -2068,6 +2236,9 @@
             return parent.isChildVisible(index);
         }
         setViewVisible(location, visible) {
+            if (this.hasMaximizedView()) {
+                this.exitMaximizedView();
+            }
             const [rest, index] = tail(location);
             const [, parent] = this.getNode(rest);
             if (!(parent instanceof BranchNode)) {
@@ -2076,6 +2247,9 @@
             parent.setChildVisible(index, visible);
         }
         moveView(parentLocation, from, to) {
+            if (this.hasMaximizedView()) {
+                this.exitMaximizedView();
+            }
             const [, parent] = this.getNode(parentLocation);
             if (!(parent instanceof BranchNode)) {
                 throw new Error('Invalid location');
@@ -2083,6 +2257,9 @@
             parent.moveChild(from, to);
         }
         addView(view, size, location) {
+            if (this.hasMaximizedView()) {
+                this.exitMaximizedView();
+            }
             const [rest, index] = tail(location);
             const [pathToParent, parent] = this.getNode(rest);
             if (parent instanceof BranchNode) {
@@ -2115,6 +2292,9 @@
             return this.removeView(location, sizing);
         }
         removeView(location, sizing) {
+            if (this.hasMaximizedView()) {
+                this.exitMaximizedView();
+            }
             const [rest, index] = tail(location);
             const [pathToParent, parent] = this.getNode(rest);
             if (!(parent instanceof BranchNode)) {
@@ -2852,6 +3032,24 @@
         moveToPrevious(options) {
             this.component.moveToPrevious(options);
         }
+        maximizeGroup(panel) {
+            this.component.maximizeGroup(panel.group);
+        }
+        hasMaximizedGroup() {
+            return this.component.hasMaximizedGroup();
+        }
+        exitMaxmizedGroup() {
+            this.component.exitMaximizedGroup();
+        }
+        get onDidMaxmizedGroupChange() {
+            return this.component.onDidMaxmizedGroupChange;
+        }
+        /**
+         * Add a popout group in a new Window
+         */
+        addPopoutGroup(item, options) {
+            this.component.addPopoutGroup(item, options);
+        }
     }
 
     class DragAndDropObserver extends CompositeDisposable {
@@ -2862,36 +3060,48 @@
             this.target = null;
             this.registerListeners();
         }
+        onDragEnter(e) {
+            this.target = e.target;
+            this.callbacks.onDragEnter(e);
+        }
+        onDragOver(e) {
+            e.preventDefault(); // needed so that the drop event fires (https://stackoverflow.com/questions/21339924/drop-event-not-firing-in-chrome)
+            if (this.callbacks.onDragOver) {
+                this.callbacks.onDragOver(e);
+            }
+        }
+        onDragLeave(e) {
+            if (this.target === e.target) {
+                this.target = null;
+                this.callbacks.onDragLeave(e);
+            }
+        }
+        onDragEnd(e) {
+            this.target = null;
+            this.callbacks.onDragEnd(e);
+        }
+        onDrop(e) {
+            this.callbacks.onDrop(e);
+        }
         registerListeners() {
             this.addDisposables(addDisposableListener(this.element, 'dragenter', (e) => {
-                this.target = e.target;
-                this.callbacks.onDragEnter(e);
+                this.onDragEnter(e);
             }, true));
             this.addDisposables(addDisposableListener(this.element, 'dragover', (e) => {
-                e.preventDefault(); // needed so that the drop event fires (https://stackoverflow.com/questions/21339924/drop-event-not-firing-in-chrome)
-                if (this.callbacks.onDragOver) {
-                    this.callbacks.onDragOver(e);
-                }
+                this.onDragOver(e);
             }, true));
             this.addDisposables(addDisposableListener(this.element, 'dragleave', (e) => {
-                if (this.target === e.target) {
-                    this.target = null;
-                    this.callbacks.onDragLeave(e);
-                }
+                this.onDragLeave(e);
             }));
             this.addDisposables(addDisposableListener(this.element, 'dragend', (e) => {
-                this.target = null;
-                this.callbacks.onDragEnd(e);
+                this.onDragEnd(e);
             }));
             this.addDisposables(addDisposableListener(this.element, 'drop', (e) => {
-                this.callbacks.onDrop(e);
+                this.onDrop(e);
             }));
         }
     }
 
-    function numberOrFallback(maybeNumber, fallback) {
-        return typeof maybeNumber === 'number' ? maybeNumber : fallback;
-    }
     function directionToPosition(direction) {
         switch (direction) {
             case 'above':
@@ -2924,6 +3134,16 @@
                 throw new Error(`invalid position '${position}'`);
         }
     }
+    const DEFAULT_ACTIVATION_SIZE = {
+        value: 20,
+        type: 'percentage',
+    };
+    const DEFAULT_SIZE = {
+        value: 50,
+        type: 'percentage',
+    };
+    const SMALL_WIDTH_BOUNDARY = 100;
+    const SMALL_HEIGHT_BOUNDARY = 100;
     class Droptarget extends CompositeDisposable {
         get state() {
             return this._state;
@@ -2936,7 +3156,7 @@
             this.onDrop = this._onDrop.event;
             // use a set to take advantage of #<set>.has
             this._acceptedTargetZonesSet = new Set(this.options.acceptedTargetZones);
-            this.addDisposables(this._onDrop, new DragAndDropObserver(this.element, {
+            this.dnd = new DragAndDropObserver(this.element, {
                 onDragEnter: () => undefined,
                 onDragOver: (e) => {
                     if (this._acceptedTargetZonesSet.size === 0) {
@@ -2984,7 +3204,7 @@
                         this.element.append(this.targetElement);
                     }
                     this.toggleClasses(quadrant, width, height);
-                    this.setState(quadrant);
+                    this._state = quadrant;
                 },
                 onDragLeave: () => {
                     this.removeDropTarget();
@@ -3003,11 +3223,15 @@
                         this._onDrop.fire({ position: state, nativeEvent: e });
                     }
                 },
-            }));
+            });
+            this.addDisposables(this._onDrop, this.dnd);
         }
         setTargetZones(acceptedTargetZones) {
             this._acceptedTargetZonesSet = new Set(acceptedTargetZones);
         }
+        setOverlayModel(model) {
+            this.options.overlayModel = model;
+        }
         dispose() {
             this.removeDropTarget();
             super.dispose();
@@ -3019,19 +3243,19 @@
             event[Droptarget.USED_EVENT_ID] = true;
         }
         /**
-         * Check is the event has already been used by another instance od DropTarget
+         * Check is the event has already been used by another instance of DropTarget
          */
         isAlreadyUsed(event) {
             const value = event[Droptarget.USED_EVENT_ID];
             return typeof value === 'boolean' && value;
         }
         toggleClasses(quadrant, width, height) {
-            var _a, _b, _c, _d;
+            var _a, _b;
             if (!this.overlayElement) {
                 return;
             }
-            const isSmallX = width < 100;
-            const isSmallY = height < 100;
+            const isSmallX = width < SMALL_WIDTH_BOUNDARY;
+            const isSmallY = height < SMALL_HEIGHT_BOUNDARY;
             const isLeft = quadrant === 'left';
             const isRight = quadrant === 'right';
             const isTop = quadrant === 'top';
@@ -3040,20 +3264,17 @@
             const leftClass = !isSmallX && isLeft;
             const topClass = !isSmallY && isTop;
             const bottomClass = !isSmallY && isBottom;
-            let size = 0.5;
-            if (((_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.type) === 'percentage') {
-                size = clamp(this.options.overlayModel.size.value, 0, 100) / 100;
+            let size = 1;
+            const sizeOptions = (_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : DEFAULT_SIZE;
+            if (sizeOptions.type === 'percentage') {
+                size = clamp(sizeOptions.value, 0, 100) / 100;
             }
-            if (((_d = (_c = this.options.overlayModel) === null || _c === void 0 ? void 0 : _c.size) === null || _d === void 0 ? void 0 : _d.type) === 'pixels') {
+            else {
                 if (rightClass || leftClass) {
-                    size =
-                        clamp(0, this.options.overlayModel.size.value, width) /
-                            width;
+                    size = clamp(0, sizeOptions.value, width) / width;
                 }
                 if (topClass || bottomClass) {
-                    size =
-                        clamp(0, this.options.overlayModel.size.value, height) /
-                            height;
+                    size = clamp(0, sizeOptions.value, height) / height;
                 }
             }
             const translate = (1 - size) / 2;
@@ -3075,39 +3296,22 @@
                 transform = '';
             }
             this.overlayElement.style.transform = transform;
-            toggleClass(this.overlayElement, 'small-right', isSmallX && isRight);
-            toggleClass(this.overlayElement, 'small-left', isSmallX && isLeft);
-            toggleClass(this.overlayElement, 'small-top', isSmallY && isTop);
-            toggleClass(this.overlayElement, 'small-bottom', isSmallY && isBottom);
-        }
-        setState(quadrant) {
-            switch (quadrant) {
-                case 'top':
-                    this._state = 'top';
-                    break;
-                case 'left':
-                    this._state = 'left';
-                    break;
-                case 'bottom':
-                    this._state = 'bottom';
-                    break;
-                case 'right':
-                    this._state = 'right';
-                    break;
-                case 'center':
-                    this._state = 'center';
-                    break;
-            }
+            toggleClass(this.overlayElement, 'dv-drop-target-small-vertical', isSmallY);
+            toggleClass(this.overlayElement, 'dv-drop-target-small-horizontal', isSmallX);
+            toggleClass(this.overlayElement, 'dv-drop-target-left', isLeft);
+            toggleClass(this.overlayElement, 'dv-drop-target-right', isRight);
+            toggleClass(this.overlayElement, 'dv-drop-target-top', isTop);
+            toggleClass(this.overlayElement, 'dv-drop-target-bottom', isBottom);
+            toggleClass(this.overlayElement, 'dv-drop-target-center', quadrant === 'center');
         }
         calculateQuadrant(overlayType, x, y, width, height) {
-            var _a, _b, _c, _d, _e, _f;
-            const isPercentage = ((_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.activationSize) === undefined ||
-                ((_c = (_b = this.options.overlayModel) === null || _b === void 0 ? void 0 : _b.activationSize) === null || _c === void 0 ? void 0 : _c.type) === 'percentage';
-            const value = numberOrFallback((_f = (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.overlayModel) === null || _e === void 0 ? void 0 : _e.activationSize) === null || _f === void 0 ? void 0 : _f.value, 20);
+            var _a, _b;
+            const activationSizeOptions = (_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.activationSize) !== null && _b !== void 0 ? _b : DEFAULT_ACTIVATION_SIZE;
+            const isPercentage = activationSizeOptions.type === 'percentage';
             if (isPercentage) {
-                return calculateQuadrantAsPercentage(overlayType, x, y, width, height, value);
+                return calculateQuadrantAsPercentage(overlayType, x, y, width, height, activationSizeOptions.value);
             }
-            return calculateQuadrantAsPixels(overlayType, x, y, width, height, value);
+            return calculateQuadrantAsPixels(overlayType, x, y, width, height, activationSizeOptions.value);
         }
         removeDropTarget() {
             if (this.targetElement) {
@@ -3159,12 +3363,22 @@
         return 'center';
     }
 
+    exports.DockviewDropTargets = void 0;
+    (function (DockviewDropTargets) {
+        DockviewDropTargets[DockviewDropTargets["Tab"] = 0] = "Tab";
+        DockviewDropTargets[DockviewDropTargets["Panel"] = 1] = "Panel";
+        DockviewDropTargets[DockviewDropTargets["TabContainer"] = 2] = "TabContainer";
+        DockviewDropTargets[DockviewDropTargets["Edge"] = 3] = "Edge";
+    })(exports.DockviewDropTargets || (exports.DockviewDropTargets = {}));
+
     class ContentContainer extends CompositeDisposable {
         get element() {
             return this._element;
         }
-        constructor() {
+        constructor(accessor, group) {
             super();
+            this.accessor = accessor;
+            this.group = group;
             this.disposable = new MutableDisposable();
             this._onDidFocus = new Emitter();
             this.onDidFocus = this._onDidFocus.event;
@@ -3174,11 +3388,38 @@
             this._element.className = 'content-container';
             this._element.tabIndex = -1;
             this.addDisposables(this._onDidFocus, this._onDidBlur);
-            // for hosted containers
-            // 1) register a drop target on the host
-            // 2) register window dragStart events to disable pointer events
-            // 3) register dragEnd events
-            // 4) register mouseMove events (if no buttons are present we take this as a dragEnd event)
+            this.dropTarget = new Droptarget(this.element, {
+                acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
+                canDisplayOverlay: (event, position) => {
+                    if (this.group.locked === 'no-drop-target' ||
+                        (this.group.locked && position === 'center')) {
+                        return false;
+                    }
+                    const data = getPanelData();
+                    if (!data &&
+                        event.shiftKey &&
+                        this.group.location !== 'floating') {
+                        return false;
+                    }
+                    if (data && data.viewId === this.accessor.id) {
+                        if (data.groupId === this.group.id) {
+                            if (position === 'center') {
+                                // don't allow to drop on self for center position
+                                return false;
+                            }
+                            if (data.panelId === null) {
+                                // don't allow group move to drop anywhere on self
+                                return false;
+                            }
+                        }
+                        const groupHasOnePanelAndIsActiveDragElement = this.group.panels.length === 1 &&
+                            data.groupId === this.group.id;
+                        return !groupHasOnePanelAndIsActiveDragElement;
+                    }
+                    return this.group.canDisplayOverlay(event, position, exports.DockviewDropTargets.Panel);
+                },
+            });
+            this.addDisposables(this.dropTarget);
         }
         show() {
             this.element.style.display = '';
@@ -3186,23 +3427,43 @@
         hide() {
             this.element.style.display = 'none';
         }
-        openPanel(panel) {
-            var _a;
-            if (this.panel === panel) {
-                return;
-            }
-            if (this.panel) {
-                if ((_a = this.panel.view) === null || _a === void 0 ? void 0 : _a.content) {
-                    this._element.removeChild(this.panel.view.content.element);
-                }
-                this.panel = undefined;
+        renderPanel(panel, options = { asActive: true }) {
+            const doRender = options.asActive ||
+                (this.panel && this.group.isPanelActive(this.panel));
+            if (this.panel &&
+                this.panel.view.content.element.parentElement === this._element) {
+                /**
+                 * If the currently attached panel is mounted directly to the content then remove it
+                 */
+                this._element.removeChild(this.panel.view.content.element);
             }
             this.panel = panel;
-            const disposable = new CompositeDisposable();
-            if (this.panel.view) {
-                const _onDidFocus = this.panel.view.content.onDidFocus;
-                const _onDidBlur = this.panel.view.content.onDidBlur;
-                const focusTracker = trackFocus(this._element);
+            let container;
+            switch (panel.api.renderer) {
+                case 'onlyWhenVisibile':
+                    this.accessor.overlayRenderContainer.detatch(panel);
+                    if (this.panel) {
+                        if (doRender) {
+                            this._element.appendChild(this.panel.view.content.element);
+                        }
+                    }
+                    container = this._element;
+                    break;
+                case 'always':
+                    if (panel.view.content.element.parentElement === this._element) {
+                        this._element.removeChild(panel.view.content.element);
+                    }
+                    container = this.accessor.overlayRenderContainer.attach({
+                        panel,
+                        referenceContainer: this,
+                    });
+                    break;
+            }
+            if (doRender) {
+                const _onDidFocus = panel.view.content.onDidFocus;
+                const _onDidBlur = panel.view.content.onDidBlur;
+                const focusTracker = trackFocus(container);
+                const disposable = new CompositeDisposable();
                 disposable.addDisposables(focusTracker, focusTracker.onDidFocus(() => this._onDidFocus.fire()), focusTracker.onDidBlur(() => this._onDidBlur.fire()));
                 if (_onDidFocus) {
                     disposable.addDisposables(_onDidFocus(() => this._onDidFocus.fire()));
@@ -3210,17 +3471,23 @@
                 if (_onDidBlur) {
                     disposable.addDisposables(_onDidBlur(() => this._onDidBlur.fire()));
                 }
-                this._element.appendChild(this.panel.view.content.element);
+                this.disposable.value = disposable;
             }
-            this.disposable.value = disposable;
+        }
+        openPanel(panel) {
+            if (this.panel === panel) {
+                return;
+            }
+            this.renderPanel(panel);
         }
         layout(_width, _height) {
             // noop
         }
         closePanel() {
-            var _a, _b, _c;
-            if ((_c = (_b = (_a = this.panel) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.content) === null || _c === void 0 ? void 0 : _c.element) {
-                this._element.removeChild(this.panel.view.content.element);
+            if (this.panel) {
+                if (this.accessor.options.defaultRenderer === 'onlyWhenVisibile') {
+                    this._element.removeChild(this.panel.view.content.element);
+                }
                 this.panel = undefined;
             }
         }
@@ -3230,14 +3497,6 @@
         }
     }
 
-    exports.DockviewDropTargets = void 0;
-    (function (DockviewDropTargets) {
-        DockviewDropTargets[DockviewDropTargets["Tab"] = 0] = "Tab";
-        DockviewDropTargets[DockviewDropTargets["Panel"] = 1] = "Panel";
-        DockviewDropTargets[DockviewDropTargets["TabContainer"] = 2] = "TabContainer";
-        DockviewDropTargets[DockviewDropTargets["Edge"] = 3] = "Edge";
-    })(exports.DockviewDropTargets || (exports.DockviewDropTargets = {}));
-
     class DragHandler extends CompositeDisposable {
         constructor(el) {
             super();
@@ -3412,7 +3671,7 @@
             }, true));
         }
         isCancelled(_event) {
-            if (this.group.api.isFloating && !_event.shiftKey) {
+            if (this.group.api.location === 'floating' && !_event.shiftKey) {
                 return true;
             }
             return false;
@@ -3614,7 +3873,7 @@
                 const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
                 if (isFloatingGroupsEnabled &&
                     event.shiftKey &&
-                    !this.group.api.isFloating) {
+                    this.group.api.location !== 'floating') {
                     event.preventDefault();
                     const { top, left } = this.element.getBoundingClientRect();
                     const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
@@ -3679,7 +3938,7 @@
             }), tab.onChanged((event) => {
                 var _a;
                 const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
-                const isFloatingWithOnePanel = this.group.api.isFloating && this.size === 1;
+                const isFloatingWithOnePanel = this.group.api.location === 'floating' && this.size === 1;
                 if (isFloatingGroupsEnabled &&
                     !isFloatingWithOnePanel &&
                     event.shiftKey) {
@@ -3762,15 +4021,37 @@
             }
             return isAncestor(document.activeElement, this.contentContainer.element);
         }
-        get isFloating() {
-            return this._isFloating;
-        }
-        set isFloating(value) {
-            this._isFloating = value;
-            this.dropTarget.setTargetZones(value ? ['center'] : ['top', 'bottom', 'left', 'right', 'center']);
-            toggleClass(this.container, 'dv-groupview-floating', value);
-            this.groupPanel.api._onDidFloatingStateChange.fire({
-                isFloating: this.isFloating,
+        get location() {
+            return this._location;
+        }
+        set location(value) {
+            this._location = value;
+            toggleClass(this.container, 'dv-groupview-floating', false);
+            toggleClass(this.container, 'dv-groupview-popout', false);
+            switch (value) {
+                case 'grid':
+                    this.contentContainer.dropTarget.setTargetZones([
+                        'top',
+                        'bottom',
+                        'left',
+                        'right',
+                        'center',
+                    ]);
+                    break;
+                case 'floating':
+                    this.contentContainer.dropTarget.setTargetZones(['center']);
+                    this.contentContainer.dropTarget.setTargetZones(value
+                        ? ['center']
+                        : ['top', 'bottom', 'left', 'right', 'center']);
+                    toggleClass(this.container, 'dv-groupview-floating', true);
+                    break;
+                case 'popout':
+                    this.contentContainer.dropTarget.setTargetZones(['center']);
+                    toggleClass(this.container, 'dv-groupview-popout', true);
+                    break;
+            }
+            this.groupPanel.api._onDidLocationChange.fire({
+                location: this.location,
             });
         }
         constructor(container, accessor, id, options, groupPanel) {
@@ -3783,7 +4064,7 @@
             this.groupPanel = groupPanel;
             this._isGroupActive = false;
             this._locked = false;
-            this._isFloating = false;
+            this._location = 'grid';
             this.mostRecentlyUsed = [];
             this._onDidChange = new Emitter();
             this.onDidChange = this._onDidChange.event;
@@ -3806,35 +4087,7 @@
             this.onDidActivePanelChange = this._onDidActivePanelChange.event;
             toggleClass(this.container, 'groupview', true);
             this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
-            this.contentContainer = new ContentContainer();
-            this.dropTarget = new Droptarget(this.contentContainer.element, {
-                acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
-                canDisplayOverlay: (event, position) => {
-                    if (this.locked === 'no-drop-target' ||
-                        (this.locked && position === 'center')) {
-                        return false;
-                    }
-                    const data = getPanelData();
-                    if (!data && event.shiftKey && !this.isFloating) {
-                        return false;
-                    }
-                    if (data && data.viewId === this.accessor.id) {
-                        if (data.groupId === this.id) {
-                            if (position === 'center') {
-                                // don't allow to drop on self for center position
-                                return false;
-                            }
-                            if (data.panelId === null) {
-                                // don't allow group move to drop anywhere on self
-                                return false;
-                            }
-                        }
-                        const groupHasOnePanelAndIsActiveDragElement = this._panels.length === 1 && data.groupId === this.id;
-                        return !groupHasOnePanelAndIsActiveDragElement;
-                    }
-                    return this.canDisplayOverlay(event, position, exports.DockviewDropTargets.Panel);
-                },
-            });
+            this.contentContainer = new ContentContainer(this.accessor, this);
             container.append(this.tabsContainer.element, this.contentContainer.element);
             this.header.hidden = !!options.hideHeader;
             this.locked = (_a = options.locked) !== null && _a !== void 0 ? _a : false;
@@ -3848,7 +4101,7 @@
                 this.accessor.doSetGroupActive(this.groupPanel, true);
             }), this.contentContainer.onDidBlur(() => {
                 // noop
-            }), this.dropTarget.onDrop((event) => {
+            }), this.contentContainer.dropTarget.onDrop((event) => {
                 this.handleDropEvent(event.nativeEvent, event.position);
             }), this._onMove, this._onDidChange, this._onDidDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange);
         }
@@ -3897,6 +4150,9 @@
                 this.tabsContainer.setPrefixActionsElement(this._prefixHeaderActions.element);
             }
         }
+        rerender(panel) {
+            this.contentContainer.renderPanel(panel, { asActive: false });
+        }
         indexOf(panel) {
             return this.tabsContainer.indexOf(panel.id);
         }
@@ -4088,12 +4344,12 @@
         doAddPanel(panel, index = this.panels.length, skipSetActive = false) {
             const existingPanel = this._panels.indexOf(panel);
             const hasExistingPanel = existingPanel > -1;
+            this.tabsContainer.show();
+            this.contentContainer.show();
             this.tabsContainer.openPanel(panel, index);
             if (!skipSetActive) {
                 this.contentContainer.openPanel(panel);
             }
-            this.tabsContainer.show();
-            this.contentContainer.show();
             if (hasExistingPanel) {
                 // TODO - need to ensure ordering hasn't changed and if it has need to re-order this.panels
                 return;
@@ -4209,7 +4465,6 @@
             for (const panel of this.panels) {
                 panel.dispose();
             }
-            this.dropTarget.dispose();
             this.tabsContainer.dispose();
             this.contentContainer.dispose();
         }
@@ -4248,7 +4503,22 @@
                 if (this.disableResizing) {
                     return;
                 }
-                if (!document.body.contains(this._element)) {
+                if (!this._element.offsetParent) {
+                    /**
+                     * offsetParent === null is equivalent to display: none being set on the element or one
+                     * of it's parents. In the display: none case the size will become (0, 0) which we do
+                     * not want to propagate.
+                     *
+                     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent
+                     *
+                     * You could use checkVisibility() but at the time of writing it's not supported across
+                     * all Browsers
+                     *
+                     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility
+                     */
+                    return;
+                }
+                if (!isInDocument(this._element)) {
                     /**
                      * since the event is dispatched through requestAnimationFrame there is a small chance
                      * the component is no longer attached to the DOM, if that is the case the dimensions
@@ -4340,6 +4610,21 @@
         isVisible(panel) {
             return this.gridview.isViewVisible(getGridLocation(panel.element));
         }
+        maximizeGroup(panel) {
+            this.gridview.maximizeView(panel);
+        }
+        isMaximizedGroup(panel) {
+            return this.gridview.maximizedView() === panel;
+        }
+        exitMaximizedGroup() {
+            this.gridview.exitMaximizedView();
+        }
+        hasMaximizedGroup() {
+            return this.gridview.hasMaximizedView();
+        }
+        get onDidMaxmizedGroupChange() {
+            return this.gridview.onDidMaxmizedNodeChange;
+        }
         doAddGroup(group, location = [0], size) {
             this.gridview.addView(group, size !== null && size !== void 0 ? size : exports.Sizing.Distribute, location);
             this._onDidAddGroup.fire(group);
@@ -5116,32 +5401,63 @@
         }
     }
 
+    // TODO find a better way to initialize and avoid needing null checks
+    const NOT_INITIALIZED_MESSAGE = 'DockviewGroupPanelApiImpl not initialized';
     class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
-        get isFloating() {
+        get location() {
             if (!this._group) {
-                throw new Error(`DockviewGroupPanelApiImpl not initialized`);
+                throw new Error(NOT_INITIALIZED_MESSAGE);
             }
-            return this._group.model.isFloating;
+            return this._group.model.location;
         }
         constructor(id, accessor) {
             super(id);
             this.accessor = accessor;
-            this._onDidFloatingStateChange = new Emitter();
-            this.onDidFloatingStateChange = this._onDidFloatingStateChange.event;
-            this.addDisposables(this._onDidFloatingStateChange);
+            this._onDidLocationChange = new Emitter();
+            this.onDidLocationChange = this._onDidLocationChange.event;
+            this.addDisposables(this._onDidLocationChange);
         }
         moveTo(options) {
-            var _a;
+            var _a, _b, _c;
+            if (!this._group) {
+                throw new Error(NOT_INITIALIZED_MESSAGE);
+            }
+            const group = (_a = options.group) !== null && _a !== void 0 ? _a : this.accessor.addGroup({
+                direction: positionToDirection((_b = options.position) !== null && _b !== void 0 ? _b : 'right'),
+            });
+            this.accessor.moveGroupOrPanel(group, this._group.id, undefined, options.group ? (_c = options.position) !== null && _c !== void 0 ? _c : 'center' : 'center');
+        }
+        maximize() {
+            if (!this._group) {
+                throw new Error(NOT_INITIALIZED_MESSAGE);
+            }
+            if (this.location !== 'grid') {
+                // only grid groups can be maximized
+                return;
+            }
+            this.accessor.maximizeGroup(this._group);
+        }
+        isMaximized() {
             if (!this._group) {
-                throw new Error(`DockviewGroupPanelApiImpl not initialized`);
+                throw new Error(NOT_INITIALIZED_MESSAGE);
+            }
+            return this.accessor.isMaximizedGroup(this._group);
+        }
+        exitMaximized() {
+            if (!this._group) {
+                throw new Error(NOT_INITIALIZED_MESSAGE);
+            }
+            if (this.isMaximized()) {
+                this.accessor.exitMaximizedGroup();
             }
-            this.accessor.moveGroupOrPanel(options.group, this._group.id, undefined, (_a = options.position) !== null && _a !== void 0 ? _a : 'center');
         }
         initialize(group) {
             this._group = group;
         }
     }
 
+    const MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH = 100;
+    const MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT = 100;
     class DockviewGroupPanel extends GridviewPanel {
         get panels() {
             return this._model.panels;
@@ -5166,8 +5482,8 @@
         }
         constructor(accessor, id, options) {
             super(id, 'groupview_default', {
-                minimumHeight: 100,
-                minimumWidth: 100,
+                minimumHeight: MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT,
+                minimumWidth: MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH,
             }, new DockviewGroupPanelApiImpl(id, accessor));
             this.api.initialize(this); // cannot use 'this' after after 'super' call
             this._model = new DockviewGroupPanelModel(this.element, accessor, id, options, this);
@@ -5221,8 +5537,10 @@
             return this.panel.title;
         }
         get isGroupActive() {
-            var _a;
-            return !!((_a = this.group) === null || _a === void 0 ? void 0 : _a.isActive);
+            return this.group.isActive;
+        }
+        get renderer() {
+            return this.panel.renderer;
         }
         set group(value) {
             const isOldGroupActive = this.isGroupActive;
@@ -5250,10 +5568,12 @@
             this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
             this._onDidGroupChange = new Emitter();
             this.onDidGroupChange = this._onDidGroupChange.event;
+            this._onDidRendererChange = new Emitter();
+            this.onDidRendererChange = this._onDidRendererChange.event;
             this.disposable = new MutableDisposable();
             this.initialize(panel);
             this._group = group;
-            this.addDisposables(this.disposable, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange);
+            this.addDisposables(this.disposable, this._onDidRendererChange, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange);
         }
         moveTo(options) {
             var _a;
@@ -5262,9 +5582,21 @@
         setTitle(title) {
             this.panel.setTitle(title);
         }
+        setRenderer(renderer) {
+            this.panel.setRenderer(renderer);
+        }
         close() {
             this.group.model.closePanel(this.panel);
         }
+        maximize() {
+            this.group.api.maximize();
+        }
+        isMaximized() {
+            return this.group.api.isMaximized();
+        }
+        exitMaximized() {
+            this.group.api.exitMaximized();
+        }
     }
 
     class DockviewPanel extends CompositeDisposable {
@@ -5277,11 +5609,17 @@
         get group() {
             return this._group;
         }
-        constructor(id, accessor, containerApi, group, view) {
+        get renderer() {
+            var _a;
+            return (_a = this._renderer) !== null && _a !== void 0 ? _a : this.accessor.renderer;
+        }
+        constructor(id, accessor, containerApi, group, view, options) {
             super();
             this.id = id;
+            this.accessor = accessor;
             this.containerApi = containerApi;
             this.view = view;
+            this._renderer = options.renderer;
             this._group = group;
             this.api = new DockviewPanelApiImpl(this, this._group, accessor);
             this.addDisposables(this.api.onActiveChange(() => {
@@ -5290,6 +5628,8 @@
                 // forward the resize event to the group since if you want to resize a panel
                 // you are actually just resizing the panels parent which is the group
                 this.group.api.setSize(event);
+            }), this.api.onDidRendererChange((event) => {
+                this.group.model.rerender(this);
             }));
         }
         init(params) {
@@ -5309,6 +5649,7 @@
                     ? this._params
                     : undefined,
                 title: this.title,
+                renderer: this._renderer,
             };
         }
         setTitle(title) {
@@ -5324,6 +5665,15 @@
                 this.api._onDidTitleChange.fire({ title });
             }
         }
+        setRenderer(renderer) {
+            const didChange = renderer !== this.renderer;
+            if (didChange) {
+                this._renderer = renderer;
+                this.api._onDidRendererChange.fire({
+                    renderer: renderer,
+                });
+            }
+        }
         update(event) {
             var _a;
             // merge the new parameters with the existing parameters
@@ -5542,8 +5892,8 @@
     }
 
     class DefaultDockviewDeserialzier {
-        constructor(layout) {
-            this.layout = layout;
+        constructor(accessor) {
+            this.accessor = accessor;
         }
         fromJSON(panelData, group) {
             var _a, _b;
@@ -5557,8 +5907,10 @@
             const tabComponent = viewData
                 ? (_b = viewData.tab) === null || _b === void 0 ? void 0 : _b.id
                 : panelData.tabComponent;
-            const view = new DockviewPanelModel(this.layout, panelId, contentComponent, tabComponent);
-            const panel = new DockviewPanel(panelId, this.layout, new DockviewApi(this.layout), group, view);
+            const view = new DockviewPanelModel(this.accessor, panelId, contentComponent, tabComponent);
+            const panel = new DockviewPanel(panelId, this.accessor, new DockviewApi(this.accessor), group, view, {
+                renderer: panelData.renderer,
+            });
             panel.init({
                 title: title !== null && title !== void 0 ? title : panelId,
                 params: params !== null && params !== void 0 ? params : {},
@@ -5938,7 +6290,265 @@
         }
     }
 
+    class PopoutWindow extends CompositeDisposable {
+        constructor(id, className, options) {
+            super();
+            this.id = id;
+            this.className = className;
+            this.options = options;
+            this._onDidClose = new Emitter();
+            this.onDidClose = this._onDidClose.event;
+            this._window = null;
+            this.addDisposables(this._onDidClose, {
+                dispose: () => {
+                    this.close();
+                },
+            });
+        }
+        dimensions() {
+            if (!this._window) {
+                return null;
+            }
+            const left = this._window.value.screenX;
+            const top = this._window.value.screenY;
+            const width = this._window.value.innerWidth;
+            const height = this._window.value.innerHeight;
+            return { top, left, width, height };
+        }
+        close() {
+            if (this._window) {
+                this._window.disposable.dispose();
+                this._window.value.close();
+                this._window = null;
+            }
+        }
+        open(content) {
+            if (this._window) {
+                throw new Error('instance of popout window is already open');
+            }
+            const url = `${this.options.url}`;
+            const features = Object.entries({
+                top: this.options.top,
+                left: this.options.left,
+                width: this.options.width,
+                height: this.options.height,
+            })
+                .map(([key, value]) => `${key}=${value}`)
+                .join(',');
+            // https://developer.mozilla.org/en-US/docs/Web/API/Window/open
+            const externalWindow = window.open(url, this.id, features);
+            if (!externalWindow) {
+                return;
+            }
+            const disposable = new CompositeDisposable();
+            this._window = { value: externalWindow, disposable };
+            const cleanUp = () => {
+                this._onDidClose.fire();
+                this._window = null;
+            };
+            // prevent any default content from loading
+            // externalWindow.document.body.replaceWith(document.createElement('div'));
+            disposable.addDisposables(addDisposableWindowListener(window, 'beforeunload', () => {
+                cleanUp();
+                this.close();
+            }));
+            externalWindow.addEventListener('load', () => {
+                const externalDocument = externalWindow.document;
+                externalDocument.title = document.title;
+                const div = document.createElement('div');
+                div.classList.add('dv-popout-window');
+                div.style.position = 'absolute';
+                div.style.width = '100%';
+                div.style.height = '100%';
+                div.style.top = '0px';
+                div.style.left = '0px';
+                div.classList.add(this.className);
+                div.appendChild(content);
+                externalDocument.body.replaceChildren(div);
+                externalDocument.body.classList.add(this.className);
+                addStyles(externalDocument, window.document.styleSheets);
+                externalWindow.addEventListener('beforeunload', () => {
+                    // TODO: indicate external window is closing
+                    cleanUp();
+                });
+            });
+        }
+    }
+
+    class DockviewPopoutGroupPanel extends CompositeDisposable {
+        constructor(id, group, options) {
+            var _a;
+            super();
+            this.id = id;
+            this.group = group;
+            this.options = options;
+            this.window = new PopoutWindow(id, (_a = options.className) !== null && _a !== void 0 ? _a : '', {
+                url: this.options.popoutUrl,
+                left: this.options.box.left,
+                top: this.options.box.top,
+                width: this.options.box.width,
+                height: this.options.box.height,
+            });
+            group.model.location = 'popout';
+            this.addDisposables(this.window, {
+                dispose: () => {
+                    group.model.location = 'grid';
+                },
+            }, this.window.onDidClose(() => {
+                this.dispose();
+            }));
+            this.window.open(group.element);
+        }
+    }
+
     const DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
+    const DEFAULT_FLOATING_GROUP_POSITION = { left: 100, top: 100 };
+
+    function createFocusableElement() {
+        const element = document.createElement('div');
+        element.tabIndex = -1;
+        return element;
+    }
+    class OverlayRenderContainer extends CompositeDisposable {
+        constructor(element) {
+            super();
+            this.element = element;
+            this.map = {};
+            this.addDisposables(Disposable.from(() => {
+                for (const value of Object.values(this.map)) {
+                    value.disposable.dispose();
+                    value.destroy.dispose();
+                }
+            }));
+        }
+        detatch(panel) {
+            if (this.map[panel.api.id]) {
+                const { disposable, destroy } = this.map[panel.api.id];
+                disposable.dispose();
+                destroy.dispose();
+                delete this.map[panel.api.id];
+                return true;
+            }
+            return false;
+        }
+        attach(options) {
+            const { panel, referenceContainer } = options;
+            if (!this.map[panel.api.id]) {
+                const element = createFocusableElement();
+                element.className = 'dv-render-overlay';
+                this.map[panel.api.id] = {
+                    panel,
+                    disposable: Disposable.NONE,
+                    destroy: Disposable.NONE,
+                    element,
+                };
+            }
+            const focusContainer = this.map[panel.api.id].element;
+            if (panel.view.content.element.parentElement !== focusContainer) {
+                focusContainer.appendChild(panel.view.content.element);
+            }
+            if (focusContainer.parentElement !== this.element) {
+                this.element.appendChild(focusContainer);
+            }
+            const resize = () => {
+                // TODO propagate position to avoid getDomNodePagePosition calls, possible performance bottleneck?
+                const box = getDomNodePagePosition(referenceContainer.element);
+                const box2 = getDomNodePagePosition(this.element);
+                focusContainer.style.left = `${box.left - box2.left}px`;
+                focusContainer.style.top = `${box.top - box2.top}px`;
+                focusContainer.style.width = `${box.width}px`;
+                focusContainer.style.height = `${box.height}px`;
+                toggleClass(focusContainer, 'dv-render-overlay-float', panel.group.api.location === 'floating');
+            };
+            const visibilityChanged = () => {
+                if (panel.api.isVisible) {
+                    resize();
+                }
+                focusContainer.style.display = panel.api.isVisible ? '' : 'none';
+            };
+            const disposable = new CompositeDisposable(
+            /**
+             * since container is positioned absoutely we must explicitly forward
+             * the dnd events for the expect behaviours to continue to occur in terms of dnd
+             *
+             * the dnd observer does not need to be conditional on whether the panel is visible since
+             * non-visible panels are 'display: none' and in such case the dnd observer will not fire.
+             */
+            new DragAndDropObserver(focusContainer, {
+                onDragEnd: (e) => {
+                    referenceContainer.dropTarget.dnd.onDragEnd(e);
+                },
+                onDragEnter: (e) => {
+                    referenceContainer.dropTarget.dnd.onDragEnter(e);
+                },
+                onDragLeave: (e) => {
+                    referenceContainer.dropTarget.dnd.onDragLeave(e);
+                },
+                onDrop: (e) => {
+                    referenceContainer.dropTarget.dnd.onDrop(e);
+                },
+                onDragOver: (e) => {
+                    referenceContainer.dropTarget.dnd.onDragOver(e);
+                },
+            }), panel.api.onDidVisibilityChange((event) => {
+                /**
+                 * Control the visibility of the content, however even when not visible (display: none)
+                 * the content is still maintained within the DOM hence DOM specific attributes
+                 * such as scroll position are maintained when next made visible.
+                 */
+                visibilityChanged();
+            }), panel.api.onDidDimensionsChange(() => {
+                if (!panel.api.isVisible) {
+                    return;
+                }
+                resize();
+            }));
+            this.map[panel.api.id].destroy = Disposable.from(() => {
+                focusContainer.removeChild(panel.view.content.element);
+                this.element.removeChild(focusContainer);
+            });
+            queueMicrotask(() => {
+                if (this.isDisposed) {
+                    return;
+                }
+                /**
+                 * wait until everything has finished in the current stack-frame call before
+                 * calling the first resize as other size-altering events may still occur before
+                 * the end of the stack-frame.
+                 */
+                visibilityChanged();
+            });
+            // dispose of logic asoccciated with previous reference-container
+            this.map[panel.api.id].disposable.dispose();
+            // and reset the disposable to the active reference-container
+            this.map[panel.api.id].disposable = disposable;
+            return focusContainer;
+        }
+    }
+
+    const DEFAULT_ROOT_OVERLAY_MODEL = {
+        activationSize: { type: 'pixels', value: 10 },
+        size: { type: 'pixels', value: 20 },
+    };
+    function getTheme(element) {
+        function toClassList(element) {
+            const list = [];
+            for (let i = 0; i < element.classList.length; i++) {
+                list.push(element.classList.item(i));
+            }
+            return list;
+        }
+        let theme = undefined;
+        let parent = element;
+        while (parent !== null) {
+            theme = toClassList(parent).find((cls) => cls.startsWith('dockview-theme-'));
+            if (typeof theme === 'string') {
+                break;
+            }
+            parent = parent.parentElement;
+        }
+        return theme;
+    }
     class DockviewComponent extends BaseGrid {
         get orientation() {
             return this.gridview.orientation;
@@ -5959,8 +6569,12 @@
             }
             return activeGroup.activePanel;
         }
-        constructor(options) {
+        get renderer() {
             var _a;
+            return (_a = this.options.defaultRenderer) !== null && _a !== void 0 ? _a : 'onlyWhenVisibile';
+        }
+        constructor(options) {
+            var _a, _b;
             super({
                 proportionalLayout: true,
                 orientation: (_a = options.orientation) !== null && _a !== void 0 ? _a : exports.Orientation.HORIZONTAL,
@@ -5985,12 +6599,27 @@
             this.onDidLayoutFromJSON = this._onDidLayoutFromJSON.event;
             this._onDidActivePanelChange = new Emitter();
             this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-            this.floatingGroups = [];
+            this._floatingGroups = [];
+            this._popoutGroups = [];
+            const gready = document.createElement('div');
+            gready.className = 'dv-overlay-render-container';
+            this.gridview.element.appendChild(gready);
+            this.overlayRenderContainer = new OverlayRenderContainer(gready);
             toggleClass(this.gridview.element, 'dv-dockview', true);
-            this.addDisposables(this._onWillDragPanel, this._onWillDragGroup, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
+            toggleClass(this.element, 'dv-debug', !!options.debug);
+            this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
                 this.updateWatermark();
             }), exports.DockviewEvent.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
                 this._bufferOnDidLayoutChange.fire();
+            }), Disposable.from(() => {
+                // iterate over a copy of the array since .dispose() mutates the original array
+                for (const group of [...this._floatingGroups]) {
+                    group.dispose();
+                }
+                // iterate over a copy of the array since .dispose() mutates the original array
+                for (const group of [...this._popoutGroups]) {
+                    group.dispose();
+                }
             }));
             this._options = options;
             if (!this.options.components) {
@@ -6009,7 +6638,7 @@
                 !this.options.watermarkFrameworkComponent) {
                 this.options.watermarkComponent = Watermark;
             }
-            const dropTarget = new Droptarget(this.element, {
+            this._rootDropTarget = new Droptarget(this.element, {
                 canDisplayOverlay: (event, position) => {
                     const data = getPanelData();
                     if (data) {
@@ -6042,12 +6671,9 @@
                     return false;
                 },
                 acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
-                overlayModel: {
-                    activationSize: { type: 'pixels', value: 10 },
-                    size: { type: 'pixels', value: 20 },
-                },
+                overlayModel: (_b = this.options.rootOverlayModel) !== null && _b !== void 0 ? _b : DEFAULT_ROOT_OVERLAY_MODEL,
             });
-            this.addDisposables(dropTarget.onDrop((event) => {
+            this.addDisposables(this._rootDropTarget.onDrop((event) => {
                 var _a;
                 const data = getPanelData();
                 if (data) {
@@ -6056,10 +6682,59 @@
                 else {
                     this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api, group: null, getData: getPanelData }));
                 }
-            }), dropTarget);
+            }), this._rootDropTarget);
             this._api = new DockviewApi(this);
             this.updateWatermark();
         }
+        addPopoutGroup(item, options) {
+            var _a;
+            let group;
+            let box = options === null || options === void 0 ? void 0 : options.position;
+            if (item instanceof DockviewPanel) {
+                group = this.createGroup();
+                this.removePanel(item, {
+                    removeEmptyGroup: true,
+                    skipDispose: true,
+                });
+                group.model.openPanel(item);
+                if (!box) {
+                    box = this.element.getBoundingClientRect();
+                }
+            }
+            else {
+                group = item;
+                if (!box) {
+                    box = group.element.getBoundingClientRect();
+                }
+                const skip = typeof (options === null || options === void 0 ? void 0 : options.skipRemoveGroup) === 'boolean' &&
+                    options.skipRemoveGroup;
+                if (!skip) {
+                    this.doRemoveGroup(item, { skipDispose: true });
+                }
+            }
+            const theme = getTheme(this.gridview.element);
+            const popoutWindow = new DockviewPopoutGroupPanel(`${this.id}-${group.id}`, // globally unique within dockview
+            group, {
+                className: theme !== null && theme !== void 0 ? theme : '',
+                popoutUrl: (_a = options === null || options === void 0 ? void 0 : options.popoutUrl) !== null && _a !== void 0 ? _a : '/popout.html',
+                box: {
+                    left: window.screenX + box.left,
+                    top: window.screenY + box.top,
+                    width: box.width,
+                    height: box.height,
+                },
+            });
+            popoutWindow.addDisposables({
+                dispose: () => {
+                    remove(this._popoutGroups, popoutWindow);
+                    this.updateWatermark();
+                },
+            }, popoutWindow.window.onDidClose(() => {
+                this.doAddGroup(group, [0]);
+            }));
+            this._popoutGroups.push(popoutWindow);
+            this.updateWatermark();
+        }
         addFloatingGroup(item, coord, options) {
             var _a, _b, _c, _d, _e, _f;
             let group;
@@ -6079,9 +6754,13 @@
                     this.doRemoveGroup(item, { skipDispose: true });
                 }
             }
-            group.model.isFloating = true;
-            const overlayLeft = typeof (coord === null || coord === void 0 ? void 0 : coord.x) === 'number' ? Math.max(coord.x, 0) : 100;
-            const overlayTop = typeof (coord === null || coord === void 0 ? void 0 : coord.y) === 'number' ? Math.max(coord.y, 0) : 100;
+            group.model.location = 'floating';
+            const overlayLeft = typeof (coord === null || coord === void 0 ? void 0 : coord.x) === 'number'
+                ? Math.max(coord.x, 0)
+                : DEFAULT_FLOATING_GROUP_POSITION.left;
+            const overlayTop = typeof (coord === null || coord === void 0 ? void 0 : coord.y) === 'number'
+                ? Math.max(coord.y, 0)
+                : DEFAULT_FLOATING_GROUP_POSITION.top;
             const overlay = new Overlay({
                 container: this.gridview.element,
                 content: group.element,
@@ -6125,12 +6804,12 @@
             }), {
                 dispose: () => {
                     disposable.dispose();
-                    group.model.isFloating = false;
-                    remove(this.floatingGroups, floatingGroupPanel);
+                    group.model.location = 'grid';
+                    remove(this._floatingGroups, floatingGroupPanel);
                     this.updateWatermark();
                 },
             });
-            this.floatingGroups.push(floatingGroupPanel);
+            this._floatingGroups.push(floatingGroupPanel);
             this.updateWatermark();
         }
         orthogonalize(position) {
@@ -6166,16 +6845,18 @@
         }
         updateOptions(options) {
             var _a, _b;
-            const hasOrientationChanged = typeof options.orientation === 'string' &&
+            const changed_orientation = typeof options.orientation === 'string' &&
                 this.gridview.orientation !== options.orientation;
-            const hasFloatingGroupOptionsChanged = options.floatingGroupBounds !== undefined &&
+            const changed_floatingGroupBounds = options.floatingGroupBounds !== undefined &&
                 options.floatingGroupBounds !== this.options.floatingGroupBounds;
+            const changed_rootOverlayOptions = options.rootOverlayModel !== undefined &&
+                options.rootOverlayModel !== this.options.rootOverlayModel;
             this._options = Object.assign(Object.assign({}, this.options), options);
-            if (hasOrientationChanged) {
+            if (changed_orientation) {
                 this.gridview.orientation = options.orientation;
             }
-            if (hasFloatingGroupOptionsChanged) {
-                for (const group of this.floatingGroups) {
+            if (changed_floatingGroupBounds) {
+                for (const group of this._floatingGroups) {
                     switch (this.options.floatingGroupBounds) {
                         case 'boundedWithinViewport':
                             group.overlay.minimumInViewportHeight = undefined;
@@ -6196,12 +6877,15 @@
                     group.overlay.setBounds({});
                 }
             }
+            if (changed_rootOverlayOptions) {
+                this._rootDropTarget.setOverlayModel(options.rootOverlayModel);
+            }
             this.layout(this.gridview.width, this.gridview.height, true);
         }
         layout(width, height, forceResize) {
             super.layout(width, height, forceResize);
-            if (this.floatingGroups) {
-                for (const floating of this.floatingGroups) {
+            if (this._floatingGroups) {
+                for (const floating of this._floatingGroups) {
                     // ensure floting groups stay within visible boundaries
                     floating.overlay.setBounds();
                 }
@@ -6269,10 +6953,16 @@
                 collection[panel.id] = panel.toJSON();
                 return collection;
             }, {});
-            const floats = this.floatingGroups.map((floatingGroup) => {
+            const floats = this._floatingGroups.map((group) => {
                 return {
-                    data: floatingGroup.group.toJSON(),
-                    position: floatingGroup.overlay.toJSON(),
+                    data: group.group.toJSON(),
+                    position: group.overlay.toJSON(),
+                };
+            });
+            const popoutGroups = this._popoutGroups.map((group) => {
+                return {
+                    data: group.group.toJSON(),
+                    position: group.window.dimensions(),
                 };
             });
             const result = {
@@ -6283,10 +6973,13 @@
             if (floats.length > 0) {
                 result.floatingGroups = floats;
             }
+            if (popoutGroups.length > 0) {
+                result.popoutGroups = popoutGroups;
+            }
             return result;
         }
         fromJSON(data) {
-            var _a;
+            var _a, _b;
             this.clear();
             if (typeof data !== 'object' || data === null) {
                 throw new Error('serialized layout must be a non-null object');
@@ -6353,7 +7046,16 @@
                         width: position.width,
                     }, { skipRemoveGroup: true, inDragMode: false });
                 }
-                for (const floatingGroup of this.floatingGroups) {
+                const serializedPopoutGroups = (_b = data.popoutGroups) !== null && _b !== void 0 ? _b : [];
+                for (const serializedPopoutGroup of serializedPopoutGroups) {
+                    const { data, position } = serializedPopoutGroup;
+                    const group = createGroupFromSerializedState(data);
+                    this.addPopoutGroup(group, {
+                        skipRemoveGroup: true,
+                        position: position !== null && position !== void 0 ? position : undefined,
+                    });
+                }
+                for (const floatingGroup of this._floatingGroups) {
                     floatingGroup.overlay.setBounds();
                 }
                 if (typeof activeGroup === 'string') {
@@ -6385,7 +7087,7 @@
                     this._onDidRemoveGroup.fire(group);
                 }
                 // iterate over a reassigned array since original array will be modified
-                for (const floatingGroup of [...this.floatingGroups]) {
+                for (const floatingGroup of [...this._floatingGroups]) {
                     floatingGroup.dispose();
                 }
                 // fires clean-up events and clears the underlying HTML gridview.
@@ -6477,7 +7179,8 @@
                     group.model.openPanel(panel);
                     this.doSetGroupAndPanelActive(group);
                 }
-                else if (referenceGroup.api.isFloating || target === 'center') {
+                else if (referenceGroup.api.location === 'floating' ||
+                    target === 'center') {
                     panel = this.createPanel(options, referenceGroup);
                     referenceGroup.model.openPanel(panel);
                 }
@@ -6521,6 +7224,7 @@
             }
             group.model.removePanel(panel);
             if (!options.skipDispose) {
+                this.overlayRenderContainer.detatch(panel);
                 panel.dispose();
             }
             if (group.size === 0 && options.removeEmptyGroup) {
@@ -6537,7 +7241,7 @@
         }
         updateWatermark() {
             var _a, _b;
-            if (this.groups.filter((x) => !x.api.isFloating).length === 0) {
+            if (this.groups.filter((x) => x.api.location === 'grid').length === 0) {
                 if (!this.watermark) {
                     this.watermark = this.createWatermarkComponent();
                     this.watermark.init({
@@ -6612,19 +7316,40 @@
             }
         }
         doRemoveGroup(group, options) {
-            const floatingGroup = this.floatingGroups.find((_) => _.group === group);
-            if (floatingGroup) {
-                if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
-                    floatingGroup.group.dispose();
-                    this._groups.delete(group.id);
-                    this._onDidRemoveGroup.fire(group);
+            if (group.api.location === 'floating') {
+                const floatingGroup = this._floatingGroups.find((_) => _.group === group);
+                if (floatingGroup) {
+                    if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
+                        floatingGroup.group.dispose();
+                        this._groups.delete(group.id);
+                        this._onDidRemoveGroup.fire(group);
+                    }
+                    remove(this._floatingGroups, floatingGroup);
+                    floatingGroup.dispose();
+                    if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
+                        const groups = Array.from(this._groups.values());
+                        this.doSetGroupActive(groups.length > 0 ? groups[0].value : undefined);
+                    }
+                    return floatingGroup.group;
                 }
-                floatingGroup.dispose();
-                if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
-                    const groups = Array.from(this._groups.values());
-                    this.doSetGroupActive(groups.length > 0 ? groups[0].value : undefined);
+                throw new Error('failed to find floating group');
+            }
+            if (group.api.location === 'popout') {
+                const selectedGroup = this._popoutGroups.find((_) => _.group === group);
+                if (selectedGroup) {
+                    if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
+                        selectedGroup.group.dispose();
+                        this._groups.delete(group.id);
+                        this._onDidRemoveGroup.fire(group);
+                    }
+                    selectedGroup.dispose();
+                    if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
+                        const groups = Array.from(this._groups.values());
+                        this.doSetGroupActive(groups.length > 0 ? groups[0].value : undefined);
+                    }
+                    return selectedGroup.group;
                 }
-                return floatingGroup.group;
+                throw new Error('failed to find popout group');
             }
             return super.doRemoveGroup(group, options);
         }
@@ -6656,8 +7381,7 @@
                 const targetLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
                 if (sourceGroup && sourceGroup.size < 2) {
                     const [targetParentLocation, to] = tail(targetLocation);
-                    const isFloating = this.floatingGroups.find((x) => x.group === sourceGroup);
-                    if (!isFloating) {
+                    if (sourceGroup.api.location === 'grid') {
                         const sourceLocation = getGridLocation(sourceGroup.element);
                         const [sourceParentLocation, from] = tail(sourceLocation);
                         if (sequenceEquals(sourceParentLocation, targetParentLocation)) {
@@ -6703,12 +7427,25 @@
                     }
                 }
                 else {
-                    const floatingGroup = this.floatingGroups.find((x) => x.group === sourceGroup);
-                    if (floatingGroup) {
-                        floatingGroup.dispose();
-                    }
-                    else {
-                        this.gridview.removeView(getGridLocation(sourceGroup.element));
+                    switch (sourceGroup.api.location) {
+                        case 'grid':
+                            this.gridview.removeView(getGridLocation(sourceGroup.element));
+                            break;
+                        case 'floating': {
+                            const selectedFloatingGroup = this._floatingGroups.find((x) => x.group === sourceGroup);
+                            if (!selectedFloatingGroup) {
+                                throw new Error('failed to find floating group');
+                            }
+                            selectedFloatingGroup.dispose();
+                            break;
+                        }
+                        case 'popout': {
+                            const selectedPopoutGroup = this._popoutGroups.find((x) => x.group === sourceGroup);
+                            if (!selectedPopoutGroup) {
+                                throw new Error('failed to find popout group');
+                            }
+                            selectedPopoutGroup.dispose();
+                        }
                     }
                     const referenceLocation = getGridLocation(referenceGroup.element);
                     const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
@@ -6770,7 +7507,7 @@
             const contentComponent = options.component;
             const tabComponent = (_a = options.tabComponent) !== null && _a !== void 0 ? _a : this.options.defaultTabComponent;
             const view = new DockviewPanelModel(this, options.id, contentComponent, tabComponent);
-            const panel = new DockviewPanel(options.id, this, this._api, group, view);
+            const panel = new DockviewPanel(options.id, this, this._api, group, view, { renderer: options.renderer });
             panel.init({
                 title: (_b = options.title) !== null && _b !== void 0 ? _b : options.id,
                 params: (_c = options === null || options === void 0 ? void 0 : options.params) !== null && _c !== void 0 ? _c : {},
@@ -8116,6 +8853,9 @@
                 singleTabMode: props.singleTabMode,
                 disableFloatingGroups: props.disableFloatingGroups,
                 floatingGroupBounds: props.floatingGroupBounds,
+                defaultRenderer: props.defaultRenderer,
+                debug: props.debug,
+                rootOverlayModel: props.rootOverlayModel,
             });
             const { clientWidth, clientHeight } = domRef.current;
             dockview.layout(clientWidth, clientHeight);
@@ -8223,6 +8963,14 @@
                 createLeftHeaderActionsElement: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
             });
         }, [props.leftHeaderActionsComponent]);
+        React__namespace.useEffect(() => {
+            if (!dockviewRef.current) {
+                return;
+            }
+            dockviewRef.current.updateOptions({
+                rootOverlayModel: props.rootOverlayModel,
+            });
+        }, [props.rootOverlayModel]);
         React__namespace.useEffect(() => {
             if (!dockviewRef.current) {
                 return;