dockview 1.8.5 → 1.9.0

package/dist/dockview.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.8.5
+ * @version 1.9.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -286,6 +286,14 @@
               // noop
           },
       };
+      function from(func) {
+          return {
+              dispose: () => {
+                  func();
+              },
+          };
+      }
+      Disposable.from = from;
   })(Disposable || (Disposable = {}));
   class CompositeDisposable {
       get isDisposed() {
@@ -470,6 +478,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) {
@@ -667,6 +730,9 @@
       Sizing.Invisible = Invisible;
   })(exports.Sizing || (exports.Sizing = {}));
   class Splitview {
+      get contentSize() {
+          return this._contentSize;
+      }
       get size() {
           return this._size;
       }
@@ -732,7 +798,7 @@
           this.sashes = [];
           this._size = 0;
           this._orthogonalSize = 0;
-          this.contentSize = 0;
+          this._contentSize = 0;
           this._proportions = undefined;
           this._startSnappingEnabled = true;
           this._endSnappingEnabled = true;
@@ -851,7 +917,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();
           }
       }
@@ -1125,7 +1191,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) {
@@ -1135,9 +1201,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];
+                  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();
@@ -1174,12 +1254,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();
@@ -1273,7 +1353,7 @@
                   }
                   else if (snappedAfter &&
                       collapsesDown[index] &&
-                      (position < this.contentSize || this.endSnappingEnabled)) {
+                      (position < this._contentSize || this.endSnappingEnabled)) {
                       this.updateSash(sash, exports.SashState.MAXIMUM);
                   }
                   else {
@@ -1562,7 +1642,6 @@
       setVisible(visible) {
           if (this.view.setVisible) {
               this.view.setVisible(visible);
-              this._onDidChange.fire({});
           }
       }
       layout(size, orthogonalSize) {
@@ -1594,10 +1673,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;
@@ -1655,6 +1738,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');
@@ -1689,7 +1774,7 @@
                   styles,
               });
           }
-          this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => {
+          this.addDisposables(this._onDidChange, this._onDidVisibilityChange, this.splitview.onDidSashEnd(() => {
               this._onDidChange.fire({});
           }));
           this.setupChildrenEvents();
@@ -1712,7 +1797,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) {
@@ -1776,13 +1869,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();
@@ -1943,7 +2043,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,
@@ -1955,7 +2117,9 @@
       dispose() {
           this.disposable.dispose();
           this._onDidChange.dispose();
+          this._onDidMaxmizedNodeChange.dispose();
           this.root.dispose();
+          this._maximizedNode = undefined;
           this.element.remove();
       }
       clear() {
@@ -1996,6 +2160,7 @@
           const oldRoot = this._root;
           if (oldRoot) {
               oldRoot.dispose();
+              this._maximizedNode = undefined;
               this.element.removeChild(oldRoot.element);
           }
           this._root = root;
@@ -2082,9 +2247,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);
@@ -2098,6 +2266,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)) {
@@ -2106,6 +2277,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');
@@ -2113,6 +2287,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) {
@@ -2145,6 +2322,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)) {
@@ -2882,6 +3062,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 {
@@ -2892,29 +3090,44 @@
           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);
           }));
       }
   }
@@ -2966,7 +3179,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) {
@@ -3033,7 +3246,8 @@
                       this._onDrop.fire({ position: state, nativeEvent: e });
                   }
               },
-          }));
+          });
+          this.addDisposables(this._onDrop, this.dnd);
       }
       setTargetZones(acceptedTargetZones) {
           this._acceptedTargetZonesSet = new Set(acceptedTargetZones);
@@ -3189,12 +3403,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;
@@ -3204,11 +3428,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 = '';
@@ -3216,23 +3467,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()));
@@ -3240,17 +3511,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;
           }
       }
@@ -3260,14 +3537,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();
@@ -3442,7 +3711,7 @@
           }, true));
       }
       isCancelled(_event) {
-          if (this.group.api.isFloating && !_event.shiftKey) {
+          if (this.group.api.location === 'floating' && !_event.shiftKey) {
               return true;
           }
           return false;
@@ -3644,7 +3913,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();
@@ -3709,7 +3978,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) {
@@ -3792,15 +4061,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) {
@@ -3813,7 +4104,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;
@@ -3836,35 +4127,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;
@@ -3878,7 +4141,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);
       }
@@ -3927,6 +4190,9 @@
               this.tabsContainer.setPrefixActionsElement(this._prefixHeaderActions.element);
           }
       }
+      rerender(panel) {
+          this.contentContainer.renderPanel(panel, { asActive: false });
+      }
       indexOf(panel) {
           return this.tabsContainer.indexOf(panel.id);
       }
@@ -4118,12 +4384,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;
@@ -4239,7 +4505,6 @@
           for (const panel of this.panels) {
               panel.dispose();
           }
-          this.dropTarget.dispose();
           this.tabsContainer.dispose();
           this.contentContainer.dispose();
       }
@@ -4278,7 +4543,7 @@
               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
@@ -4370,6 +4635,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);
@@ -5146,32 +5426,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;
@@ -5196,8 +5507,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);
@@ -5251,8 +5562,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;
@@ -5280,10 +5593,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;
@@ -5292,9 +5607,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 {
@@ -5307,11 +5634,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(() => {
@@ -5320,6 +5653,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) {
@@ -5339,6 +5674,7 @@
                   ? this._params
                   : undefined,
               title: this.title,
+              renderer: this._renderer,
           };
       }
       setTitle(title) {
@@ -5354,6 +5690,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
@@ -5572,8 +5917,8 @@
   }
 
   class DefaultDockviewDeserialzier {
-      constructor(layout) {
-          this.layout = layout;
+      constructor(accessor) {
+          this.accessor = accessor;
       }
       fromJSON(panelData, group) {
           var _a, _b;
@@ -5587,8 +5932,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 : {},
@@ -5968,7 +6315,261 @@
       }
   }
 
+  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;
@@ -5989,6 +6590,10 @@
           }
           return activeGroup.activePanel;
       }
+      get renderer() {
+          var _a;
+          return (_a = this.options.defaultRenderer) !== null && _a !== void 0 ? _a : 'onlyWhenVisibile';
+      }
       constructor(options) {
           var _a;
           super({
@@ -6015,12 +6620,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) {
@@ -6090,6 +6710,55 @@
           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;
@@ -6109,9 +6778,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,
@@ -6155,12 +6828,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) {
@@ -6205,7 +6878,7 @@
               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;
@@ -6230,8 +6903,8 @@
       }
       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();
               }
@@ -6299,10 +6972,16 @@
               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 = {
@@ -6313,10 +6992,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');
@@ -6383,7 +7065,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') {
@@ -6415,7 +7106,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.
@@ -6507,7 +7198,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);
               }
@@ -6551,6 +7243,7 @@
           }
           group.model.removePanel(panel);
           if (!options.skipDispose) {
+              this.overlayRenderContainer.detatch(panel);
               panel.dispose();
           }
           if (group.size === 0 && options.removeEmptyGroup) {
@@ -6567,7 +7260,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({
@@ -6642,19 +7335,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);
       }
@@ -6686,8 +7400,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)) {
@@ -6733,12 +7446,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);
@@ -6800,7 +7526,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 : {},
@@ -8146,6 +8872,8 @@
               singleTabMode: props.singleTabMode,
               disableFloatingGroups: props.disableFloatingGroups,
               floatingGroupBounds: props.floatingGroupBounds,
+              defaultRenderer: props.defaultRenderer,
+              debug: props.debug,
           });
           const { clientWidth, clientHeight } = domRef.current;
           dockview.layout(clientWidth, clientHeight);