dockview 1.8.5 → 1.9.0

package/dist/dockview.esm.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.8.5
+ * @version 1.9.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -263,6 +263,14 @@ var Disposable;
             // noop
         },
     };
+    function from(func) {
+        return {
+            dispose: () => {
+                func();
+            },
+        };
+    }
+    Disposable.from = from;
 })(Disposable || (Disposable = {}));
 class CompositeDisposable {
     get isDisposed() {
@@ -447,6 +455,61 @@ function quasiPreventDefault(event) {
 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) {
@@ -644,6 +707,9 @@ var Sizing;
     Sizing.Invisible = Invisible;
 })(Sizing || (Sizing = {}));
 class Splitview {
+    get contentSize() {
+        return this._contentSize;
+    }
     get size() {
         return this._size;
     }
@@ -709,7 +775,7 @@ class Splitview {
         this.sashes = [];
         this._size = 0;
         this._orthogonalSize = 0;
-        this.contentSize = 0;
+        this._contentSize = 0;
         this._proportions = undefined;
         this._startSnappingEnabled = true;
         this._endSnappingEnabled = true;
@@ -828,7 +894,7 @@ class Splitview {
                 );
             });
             // 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();
         }
     }
@@ -1102,7 +1168,7 @@ class Splitview {
         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) {
@@ -1112,9 +1178,23 @@ class Splitview {
             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];
+                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];
-                item.size = clamp(Math.round(this.proportions[i] * size), item.minimumSize, item.maximumSize);
+                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();
@@ -1151,12 +1231,12 @@ class Splitview {
         }
     }
     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();
@@ -1250,7 +1330,7 @@ class Splitview {
                 }
                 else if (snappedAfter &&
                     collapsesDown[index] &&
-                    (position < this.contentSize || this.endSnappingEnabled)) {
+                    (position < this._contentSize || this.endSnappingEnabled)) {
                     this.updateSash(sash, SashState.MAXIMUM);
                 }
                 else {
@@ -1539,7 +1619,6 @@ class LeafNode {
     setVisible(visible) {
         if (this.view.setVisible) {
             this.view.setVisible(visible);
-            this._onDidChange.fire({});
         }
     }
     layout(size, orthogonalSize) {
@@ -1571,10 +1650,14 @@ class BranchNode extends CompositeDisposable {
     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;
@@ -1632,6 +1715,8 @@ class BranchNode extends CompositeDisposable {
         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');
@@ -1666,7 +1751,7 @@ class BranchNode extends CompositeDisposable {
                 styles,
             });
         }
-        this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => {
+        this.addDisposables(this._onDidChange, this._onDidVisibilityChange, this.splitview.onDidSashEnd(() => {
             this._onDidChange.fire({});
         }));
         this.setupChildrenEvents();
@@ -1689,7 +1774,15 @@ class BranchNode extends CompositeDisposable {
         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) {
@@ -1753,13 +1846,20 @@ class BranchNode extends CompositeDisposable {
     }
     setupChildrenEvents() {
         this._childrenDisposable.dispose();
-        this._childrenDisposable = Event.any(...this.children.map((c) => c.onDidChange))((e) => {
+        this._childrenDisposable = new CompositeDisposable(Event.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();
@@ -1920,7 +2020,69 @@ class Gridview {
     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,
@@ -1932,7 +2094,9 @@ class Gridview {
     dispose() {
         this.disposable.dispose();
         this._onDidChange.dispose();
+        this._onDidMaxmizedNodeChange.dispose();
         this.root.dispose();
+        this._maximizedNode = undefined;
         this.element.remove();
     }
     clear() {
@@ -1973,6 +2137,7 @@ class Gridview {
         const oldRoot = this._root;
         if (oldRoot) {
             oldRoot.dispose();
+            this._maximizedNode = undefined;
             this.element.removeChild(oldRoot.element);
         }
         this._root = root;
@@ -2059,9 +2224,12 @@ class Gridview {
     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);
@@ -2075,6 +2243,9 @@ class Gridview {
         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)) {
@@ -2083,6 +2254,9 @@ class Gridview {
         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');
@@ -2090,6 +2264,9 @@ class Gridview {
         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) {
@@ -2122,6 +2299,9 @@ class Gridview {
         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)) {
@@ -2859,6 +3039,24 @@ class DockviewApi {
     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 {
@@ -2869,29 +3067,44 @@ class DragAndDropObserver extends CompositeDisposable {
         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);
         }));
     }
 }
@@ -2943,7 +3156,7 @@ class Droptarget extends CompositeDisposable {
         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) {
@@ -3010,7 +3223,8 @@ class Droptarget extends CompositeDisposable {
                     this._onDrop.fire({ position: state, nativeEvent: e });
                 }
             },
-        }));
+        });
+        this.addDisposables(this._onDrop, this.dnd);
     }
     setTargetZones(acceptedTargetZones) {
         this._acceptedTargetZonesSet = new Set(acceptedTargetZones);
@@ -3166,12 +3380,22 @@ function calculateQuadrantAsPixels(overlayType, x, y, width, height, threshold)
     return 'center';
 }
 
+var DockviewDropTargets;
+(function (DockviewDropTargets) {
+    DockviewDropTargets[DockviewDropTargets["Tab"] = 0] = "Tab";
+    DockviewDropTargets[DockviewDropTargets["Panel"] = 1] = "Panel";
+    DockviewDropTargets[DockviewDropTargets["TabContainer"] = 2] = "TabContainer";
+    DockviewDropTargets[DockviewDropTargets["Edge"] = 3] = "Edge";
+})(DockviewDropTargets || (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;
@@ -3181,11 +3405,38 @@ class ContentContainer extends CompositeDisposable {
         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, DockviewDropTargets.Panel);
+            },
+        });
+        this.addDisposables(this.dropTarget);
     }
     show() {
         this.element.style.display = '';
@@ -3193,23 +3444,43 @@ class ContentContainer extends CompositeDisposable {
     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()));
@@ -3217,17 +3488,23 @@ class ContentContainer extends CompositeDisposable {
             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;
         }
     }
@@ -3237,14 +3514,6 @@ class ContentContainer extends CompositeDisposable {
     }
 }
 
-var DockviewDropTargets;
-(function (DockviewDropTargets) {
-    DockviewDropTargets[DockviewDropTargets["Tab"] = 0] = "Tab";
-    DockviewDropTargets[DockviewDropTargets["Panel"] = 1] = "Panel";
-    DockviewDropTargets[DockviewDropTargets["TabContainer"] = 2] = "TabContainer";
-    DockviewDropTargets[DockviewDropTargets["Edge"] = 3] = "Edge";
-})(DockviewDropTargets || (DockviewDropTargets = {}));
-
 class DragHandler extends CompositeDisposable {
     constructor(el) {
         super();
@@ -3419,7 +3688,7 @@ class GroupDragHandler extends DragHandler {
         }, true));
     }
     isCancelled(_event) {
-        if (this.group.api.isFloating && !_event.shiftKey) {
+        if (this.group.api.location === 'floating' && !_event.shiftKey) {
             return true;
         }
         return false;
@@ -3621,7 +3890,7 @@ class TabsContainer extends CompositeDisposable {
             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();
@@ -3686,7 +3955,7 @@ class TabsContainer extends CompositeDisposable {
         }), 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) {
@@ -3769,15 +4038,37 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         }
         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) {
@@ -3790,7 +4081,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         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;
@@ -3813,35 +4104,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         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, 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;
@@ -3855,7 +4118,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
             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);
     }
@@ -3904,6 +4167,9 @@ class DockviewGroupPanelModel extends CompositeDisposable {
             this.tabsContainer.setPrefixActionsElement(this._prefixHeaderActions.element);
         }
     }
+    rerender(panel) {
+        this.contentContainer.renderPanel(panel, { asActive: false });
+    }
     indexOf(panel) {
         return this.tabsContainer.indexOf(panel.id);
     }
@@ -4095,12 +4361,12 @@ class DockviewGroupPanelModel extends CompositeDisposable {
     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;
@@ -4216,7 +4482,6 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         for (const panel of this.panels) {
             panel.dispose();
         }
-        this.dropTarget.dispose();
         this.tabsContainer.dispose();
         this.contentContainer.dispose();
     }
@@ -4255,7 +4520,7 @@ class Resizable extends CompositeDisposable {
             if (this.disableResizing) {
                 return;
             }
-            if (!document.body.contains(this._element)) {
+            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
@@ -4347,6 +4612,21 @@ class BaseGrid extends Resizable {
     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 : Sizing.Distribute, location);
         this._onDidAddGroup.fire(group);
@@ -5123,32 +5403,63 @@ class GridviewPanel extends BasePanelView {
     }
 }
 
+// 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;
@@ -5173,8 +5484,8 @@ class DockviewGroupPanel extends GridviewPanel {
     }
     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);
@@ -5228,8 +5539,10 @@ class DockviewPanelApiImpl extends GridviewPanelApiImpl {
         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;
@@ -5257,10 +5570,12 @@ class DockviewPanelApiImpl extends GridviewPanelApiImpl {
         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;
@@ -5269,9 +5584,21 @@ class DockviewPanelApiImpl extends GridviewPanelApiImpl {
     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 {
@@ -5284,11 +5611,17 @@ class DockviewPanel extends CompositeDisposable {
     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(() => {
@@ -5297,6 +5630,8 @@ class DockviewPanel extends CompositeDisposable {
             // 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) {
@@ -5316,6 +5651,7 @@ class DockviewPanel extends CompositeDisposable {
                 ? this._params
                 : undefined,
             title: this.title,
+            renderer: this._renderer,
         };
     }
     setTitle(title) {
@@ -5331,6 +5667,15 @@ class DockviewPanel extends CompositeDisposable {
             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
@@ -5549,8 +5894,8 @@ class DockviewPanelModel {
 }
 
 class DefaultDockviewDeserialzier {
-    constructor(layout) {
-        this.layout = layout;
+    constructor(accessor) {
+        this.accessor = accessor;
     }
     fromJSON(panelData, group) {
         var _a, _b;
@@ -5564,8 +5909,10 @@ class DefaultDockviewDeserialzier {
         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 : {},
@@ -5945,7 +6292,261 @@ class DockviewFloatingGroupPanel extends CompositeDisposable {
     }
 }
 
+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;
+    }
+}
+
+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;
@@ -5966,6 +6567,10 @@ class DockviewComponent extends BaseGrid {
         }
         return activeGroup.activePanel;
     }
+    get renderer() {
+        var _a;
+        return (_a = this.options.defaultRenderer) !== null && _a !== void 0 ? _a : 'onlyWhenVisibile';
+    }
     constructor(options) {
         var _a;
         super({
@@ -5992,12 +6597,27 @@ class DockviewComponent extends BaseGrid {
         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, Event.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, Event.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
             this.updateWatermark();
         }), Event.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) {
@@ -6067,6 +6687,55 @@ class DockviewComponent extends BaseGrid {
         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;
@@ -6086,9 +6755,13 @@ class DockviewComponent extends BaseGrid {
                 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,
@@ -6132,12 +6805,12 @@ class DockviewComponent extends BaseGrid {
         }), {
             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) {
@@ -6182,7 +6855,7 @@ class DockviewComponent extends BaseGrid {
             this.gridview.orientation = options.orientation;
         }
         if (hasFloatingGroupOptionsChanged) {
-            for (const group of this.floatingGroups) {
+            for (const group of this._floatingGroups) {
                 switch (this.options.floatingGroupBounds) {
                     case 'boundedWithinViewport':
                         group.overlay.minimumInViewportHeight = undefined;
@@ -6207,8 +6880,8 @@ class DockviewComponent extends BaseGrid {
     }
     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();
             }
@@ -6276,10 +6949,16 @@ class DockviewComponent extends BaseGrid {
             collection[panel.id] = panel.toJSON();
             return collection;
         }, {});
-        const floats = this.floatingGroups.map((floatingGroup) => {
+        const floats = this._floatingGroups.map((group) => {
+            return {
+                data: group.group.toJSON(),
+                position: group.overlay.toJSON(),
+            };
+        });
+        const popoutGroups = this._popoutGroups.map((group) => {
             return {
-                data: floatingGroup.group.toJSON(),
-                position: floatingGroup.overlay.toJSON(),
+                data: group.group.toJSON(),
+                position: group.window.dimensions(),
             };
         });
         const result = {
@@ -6290,10 +6969,13 @@ class DockviewComponent extends BaseGrid {
         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');
@@ -6360,7 +7042,16 @@ class DockviewComponent extends BaseGrid {
                     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') {
@@ -6392,7 +7083,7 @@ class DockviewComponent extends BaseGrid {
                 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.
@@ -6484,7 +7175,8 @@ class DockviewComponent extends BaseGrid {
                 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);
             }
@@ -6528,6 +7220,7 @@ class DockviewComponent extends BaseGrid {
         }
         group.model.removePanel(panel);
         if (!options.skipDispose) {
+            this.overlayRenderContainer.detatch(panel);
             panel.dispose();
         }
         if (group.size === 0 && options.removeEmptyGroup) {
@@ -6544,7 +7237,7 @@ class DockviewComponent extends BaseGrid {
     }
     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({
@@ -6619,19 +7312,40 @@ class DockviewComponent extends BaseGrid {
         }
     }
     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);
     }
@@ -6663,8 +7377,7 @@ class DockviewComponent extends BaseGrid {
             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)) {
@@ -6710,12 +7423,25 @@ class DockviewComponent extends BaseGrid {
                 }
             }
             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);
@@ -6777,7 +7503,7 @@ class DockviewComponent extends BaseGrid {
         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 : {},
@@ -8123,6 +8849,8 @@ const DockviewReact = React.forwardRef((props, ref) => {
             singleTabMode: props.singleTabMode,
             disableFloatingGroups: props.disableFloatingGroups,
             floatingGroupBounds: props.floatingGroupBounds,
+            defaultRenderer: props.defaultRenderer,
+            debug: props.debug,
         });
         const { clientWidth, clientHeight } = domRef.current;
         dockview.layout(clientWidth, clientHeight);