dockview 1.11.0 → 1.13.0

package/dist/dockview.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.11.0
+ * @version 1.13.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -2472,6 +2472,261 @@
       }
   }
 
+  class Resizable extends CompositeDisposable {
+      get element() {
+          return this._element;
+      }
+      get disableResizing() {
+          return this._disableResizing;
+      }
+      set disableResizing(value) {
+          this._disableResizing = value;
+      }
+      constructor(parentElement, disableResizing = false) {
+          super();
+          this._disableResizing = disableResizing;
+          this._element = parentElement;
+          this.addDisposables(watchElementResize(this._element, (entry) => {
+              if (this.isDisposed) {
+                  /**
+                   * resize is delayed through requestAnimationFrame so there is a small chance
+                   * the component has already been disposed of
+                   */
+                  return;
+              }
+              if (this.disableResizing) {
+                  return;
+              }
+              if (!this._element.offsetParent) {
+                  /**
+                   * offsetParent === null is equivalent to display: none being set on the element or one
+                   * of it's parents. In the display: none case the size will become (0, 0) which we do
+                   * not want to propagate.
+                   *
+                   * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent
+                   *
+                   * You could use checkVisibility() but at the time of writing it's not supported across
+                   * all Browsers
+                   *
+                   * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility
+                   */
+                  return;
+              }
+              if (!isInDocument(this._element)) {
+                  /**
+                   * since the event is dispatched through requestAnimationFrame there is a small chance
+                   * the component is no longer attached to the DOM, if that is the case the dimensions
+                   * are mostly likely all zero and meaningless. we should skip this case.
+                   */
+                  return;
+              }
+              const { width, height } = entry.contentRect;
+              this.layout(width, height);
+          }));
+      }
+  }
+
+  const nextLayoutId$1 = sequentialNumberGenerator();
+  function toTarget(direction) {
+      switch (direction) {
+          case 'left':
+              return 'left';
+          case 'right':
+              return 'right';
+          case 'above':
+              return 'top';
+          case 'below':
+              return 'bottom';
+          case 'within':
+          default:
+              return 'center';
+      }
+  }
+  class BaseGrid extends Resizable {
+      get id() {
+          return this._id;
+      }
+      get size() {
+          return this._groups.size;
+      }
+      get groups() {
+          return Array.from(this._groups.values()).map((_) => _.value);
+      }
+      get width() {
+          return this.gridview.width;
+      }
+      get height() {
+          return this.gridview.height;
+      }
+      get minimumHeight() {
+          return this.gridview.minimumHeight;
+      }
+      get maximumHeight() {
+          return this.gridview.maximumHeight;
+      }
+      get minimumWidth() {
+          return this.gridview.minimumWidth;
+      }
+      get maximumWidth() {
+          return this.gridview.maximumWidth;
+      }
+      get activeGroup() {
+          return this._activeGroup;
+      }
+      get locked() {
+          return this.gridview.locked;
+      }
+      set locked(value) {
+          this.gridview.locked = value;
+      }
+      constructor(options) {
+          super(document.createElement('div'), options.disableAutoResizing);
+          this._id = nextLayoutId$1.next();
+          this._groups = new Map();
+          this._onDidLayoutChange = new Emitter();
+          this.onDidLayoutChange = this._onDidLayoutChange.event;
+          this._onDidRemove = new Emitter();
+          this.onDidRemove = this._onDidRemove.event;
+          this._onDidAdd = new Emitter();
+          this.onDidAdd = this._onDidAdd.event;
+          this._onDidActiveChange = new Emitter();
+          this.onDidActiveChange = this._onDidActiveChange.event;
+          this._bufferOnDidLayoutChange = new TickDelayedEvent();
+          this.element.style.height = '100%';
+          this.element.style.width = '100%';
+          options.parentElement.appendChild(this.element);
+          this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation);
+          this.gridview.locked = !!options.locked;
+          this.element.appendChild(this.gridview.element);
+          this.layout(0, 0, true); // set some elements height/widths
+          this.addDisposables(Disposable.from(() => {
+              var _a;
+              (_a = this.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.element);
+          }), this.gridview.onDidChange(() => {
+              this._bufferOnDidLayoutChange.fire();
+          }), exports.DockviewEvent.any(this.onDidAdd, this.onDidRemove, this.onDidActiveChange)(() => {
+              this._bufferOnDidLayoutChange.fire();
+          }), this._bufferOnDidLayoutChange.onEvent(() => {
+              this._onDidLayoutChange.fire();
+          }), this._bufferOnDidLayoutChange);
+      }
+      setVisible(panel, visible) {
+          this.gridview.setViewVisible(getGridLocation(panel.element), visible);
+          this._onDidLayoutChange.fire();
+      }
+      isVisible(panel) {
+          return this.gridview.isViewVisible(getGridLocation(panel.element));
+      }
+      maximizeGroup(panel) {
+          this.gridview.maximizeView(panel);
+          this.doSetGroupActive(panel);
+      }
+      isMaximizedGroup(panel) {
+          return this.gridview.maximizedView() === panel;
+      }
+      exitMaximizedGroup() {
+          this.gridview.exitMaximizedView();
+      }
+      hasMaximizedGroup() {
+          return this.gridview.hasMaximizedView();
+      }
+      get onDidMaximizedGroupChange() {
+          return this.gridview.onDidMaximizedNodeChange;
+      }
+      doAddGroup(group, location = [0], size) {
+          this.gridview.addView(group, size !== null && size !== void 0 ? size : exports.Sizing.Distribute, location);
+          this._onDidAdd.fire(group);
+      }
+      doRemoveGroup(group, options) {
+          if (!this._groups.has(group.id)) {
+              throw new Error('invalid operation');
+          }
+          const item = this._groups.get(group.id);
+          const view = this.gridview.remove(group, exports.Sizing.Distribute);
+          if (item && !(options === null || options === void 0 ? void 0 : options.skipDispose)) {
+              item.disposable.dispose();
+              item.value.dispose();
+              this._groups.delete(group.id);
+              this._onDidRemove.fire(group);
+          }
+          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 view;
+      }
+      getPanel(id) {
+          var _a;
+          return (_a = this._groups.get(id)) === null || _a === void 0 ? void 0 : _a.value;
+      }
+      doSetGroupActive(group) {
+          if (this._activeGroup === group) {
+              return;
+          }
+          if (this._activeGroup) {
+              this._activeGroup.setActive(false);
+          }
+          if (group) {
+              group.setActive(true);
+          }
+          this._activeGroup = group;
+          this._onDidActiveChange.fire(group);
+      }
+      removeGroup(group) {
+          this.doRemoveGroup(group);
+      }
+      moveToNext(options) {
+          var _a;
+          if (!options) {
+              options = {};
+          }
+          if (!options.group) {
+              if (!this.activeGroup) {
+                  return;
+              }
+              options.group = this.activeGroup;
+          }
+          const location = getGridLocation(options.group.element);
+          const next = (_a = this.gridview.next(location)) === null || _a === void 0 ? void 0 : _a.view;
+          this.doSetGroupActive(next);
+      }
+      moveToPrevious(options) {
+          var _a;
+          if (!options) {
+              options = {};
+          }
+          if (!options.group) {
+              if (!this.activeGroup) {
+                  return;
+              }
+              options.group = this.activeGroup;
+          }
+          const location = getGridLocation(options.group.element);
+          const next = (_a = this.gridview.previous(location)) === null || _a === void 0 ? void 0 : _a.view;
+          this.doSetGroupActive(next);
+      }
+      layout(width, height, forceResize) {
+          const different = forceResize !== null && forceResize !== void 0 ? forceResize : (width !== this.width || height !== this.height);
+          if (!different) {
+              return;
+          }
+          this.gridview.element.style.height = `${height}px`;
+          this.gridview.element.style.width = `${width}px`;
+          this.gridview.layout(width, height);
+      }
+      dispose() {
+          this._onDidActiveChange.dispose();
+          this._onDidAdd.dispose();
+          this._onDidRemove.dispose();
+          this._onDidLayoutChange.dispose();
+          for (const group of this.groups) {
+              group.dispose();
+          }
+          this.gridview.dispose();
+          super.dispose();
+      }
+  }
+
   class SplitviewApi {
       /**
        * The minimum size  the component can reach where size is measured in the direction of orientation provided.
@@ -3014,6 +3269,9 @@
       get onWillDragPanel() {
           return this.component.onWillDragPanel;
       }
+      get onUnhandledDragOverEvent() {
+          return this.component.onUnhandledDragOverEvent;
+      }
       /**
        * All panel objects.
        */
@@ -3151,6 +3409,67 @@
       }
   }
 
+  class DragHandler extends CompositeDisposable {
+      constructor(el) {
+          super();
+          this.el = el;
+          this.dataDisposable = new MutableDisposable();
+          this.pointerEventsDisposable = new MutableDisposable();
+          this._onDragStart = new Emitter();
+          this.onDragStart = this._onDragStart.event;
+          this.addDisposables(this._onDragStart, this.dataDisposable, this.pointerEventsDisposable);
+          this.configure();
+      }
+      isCancelled(_event) {
+          return false;
+      }
+      configure() {
+          this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
+              if (event.defaultPrevented || this.isCancelled(event)) {
+                  event.preventDefault();
+                  return;
+              }
+              const iframes = [
+                  ...getElementsByTagName('iframe'),
+                  ...getElementsByTagName('webview'),
+              ];
+              this.pointerEventsDisposable.value = {
+                  dispose: () => {
+                      for (const iframe of iframes) {
+                          iframe.style.pointerEvents = 'auto';
+                      }
+                  },
+              };
+              for (const iframe of iframes) {
+                  iframe.style.pointerEvents = 'none';
+              }
+              this.el.classList.add('dv-dragged');
+              setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
+              this.dataDisposable.value = this.getData(event);
+              this._onDragStart.fire(event);
+              if (event.dataTransfer) {
+                  event.dataTransfer.effectAllowed = 'move';
+                  const hasData = event.dataTransfer.items.length > 0;
+                  if (!hasData) {
+                      /**
+                       * Although this is not used by dockview many third party dnd libraries will check
+                       * dataTransfer.types to determine valid drag events.
+                       *
+                       * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
+                       * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
+                       * dnd logic. You can see the code at
+                       * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
+                       */
+                      event.dataTransfer.setData('text/plain', '__dockview_internal_drag_event__');
+                  }
+              }
+          }), addDisposableListener(this.el, 'dragend', () => {
+              this.pointerEventsDisposable.dispose();
+              this.dataDisposable.dispose();
+          }));
+      }
+  }
+
   class DragAndDropObserver extends CompositeDisposable {
       constructor(element, callbacks) {
           super();
@@ -3295,6 +3614,10 @@
                       this.removeDropTarget();
                       return;
                   }
+                  if (!this.options.canDisplayOverlay(e, quadrant)) {
+                      this.removeDropTarget();
+                      return;
+                  }
                   const willShowOverlayEvent = new WillShowOverlayEvent({
                       nativeEvent: e,
                       position: quadrant,
@@ -3308,16 +3631,6 @@
                       this.removeDropTarget();
                       return;
                   }
-                  if (typeof this.options.canDisplayOverlay === 'boolean') {
-                      if (!this.options.canDisplayOverlay) {
-                          this.removeDropTarget();
-                          return;
-                      }
-                  }
-                  else if (!this.options.canDisplayOverlay(e, quadrant)) {
-                      this.removeDropTarget();
-                      return;
-                  }
                   this.markAsUsed(e);
                   if (!this.targetElement) {
                       this.targetElement = document.createElement('div');
@@ -3508,1997 +3821,1758 @@
       return 'center';
   }
 
-  class ContentContainer extends CompositeDisposable {
-      get element() {
-          return this._element;
-      }
-      constructor(accessor, group) {
+  class WillFocusEvent extends DockviewEvent {
+      constructor() {
           super();
-          this.accessor = accessor;
-          this.group = group;
-          this.disposable = new MutableDisposable();
-          this._onDidFocus = new Emitter();
-          this.onDidFocus = this._onDidFocus.event;
-          this._onDidBlur = new Emitter();
-          this.onDidBlur = this._onDidBlur.event;
-          this._element = document.createElement('div');
-          this._element.className = 'content-container';
-          this._element.tabIndex = -1;
-          this.addDisposables(this._onDidFocus, this._onDidBlur);
-          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.type !== '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, 'content');
-              },
-          });
-          this.addDisposables(this.dropTarget);
       }
-      show() {
-          this.element.style.display = '';
+  }
+  /**
+   * A core api implementation that should be used across all panel-like objects
+   */
+  class PanelApiImpl extends CompositeDisposable {
+      get isFocused() {
+          return this._isFocused;
       }
-      hide() {
-          this.element.style.display = 'none';
+      get isActive() {
+          return this._isActive;
       }
-      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;
-          let container;
-          switch (panel.api.renderer) {
-              case 'onlyWhenVisibile':
-                  this.group.renderContainer.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.group.renderContainer.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()));
-              }
-              if (_onDidBlur) {
-                  disposable.addDisposables(_onDidBlur(() => this._onDidBlur.fire()));
-              }
-              this.disposable.value = disposable;
-          }
+      get isVisible() {
+          return this._isVisible;
       }
-      openPanel(panel) {
-          if (this.panel === panel) {
-              return;
-          }
-          this.renderPanel(panel);
+      get width() {
+          return this._width;
       }
-      layout(_width, _height) {
-          // noop
+      get height() {
+          return this._height;
       }
-      closePanel() {
-          var _a;
-          if (this.panel) {
-              if (this.panel.api.renderer === 'onlyWhenVisibile') {
-                  (_a = this.panel.view.content.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.panel.view.content.element);
-              }
-          }
-          this.panel = undefined;
+      constructor(id, component) {
+          super();
+          this.id = id;
+          this.component = component;
+          this._isFocused = false;
+          this._isActive = false;
+          this._isVisible = true;
+          this._width = 0;
+          this._height = 0;
+          this._parameters = {};
+          this.panelUpdatesDisposable = new MutableDisposable();
+          this._onDidDimensionChange = new Emitter();
+          this.onDidDimensionsChange = this._onDidDimensionChange.event;
+          this._onDidChangeFocus = new Emitter();
+          this.onDidFocusChange = this._onDidChangeFocus.event;
+          //
+          this._onWillFocus = new Emitter();
+          this.onWillFocus = this._onWillFocus.event;
+          //
+          this._onDidVisibilityChange = new Emitter();
+          this.onDidVisibilityChange = this._onDidVisibilityChange.event;
+          this._onWillVisibilityChange = new Emitter();
+          this.onWillVisibilityChange = this._onWillVisibilityChange.event;
+          this._onDidActiveChange = new Emitter();
+          this.onDidActiveChange = this._onDidActiveChange.event;
+          this._onActiveChange = new Emitter();
+          this.onActiveChange = this._onActiveChange.event;
+          this._onDidParametersChange = new Emitter();
+          this.onDidParametersChange = this._onDidParametersChange.event;
+          this.addDisposables(this.onDidFocusChange((event) => {
+              this._isFocused = event.isFocused;
+          }), this.onDidActiveChange((event) => {
+              this._isActive = event.isActive;
+          }), this.onDidVisibilityChange((event) => {
+              this._isVisible = event.isVisible;
+          }), this.onDidDimensionsChange((event) => {
+              this._width = event.width;
+              this._height = event.height;
+          }), this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onWillFocus, this._onActiveChange, this._onWillFocus, this._onWillVisibilityChange, this._onDidParametersChange);
       }
-      dispose() {
-          this.disposable.dispose();
-          super.dispose();
+      getParameters() {
+          return this._parameters;
+      }
+      initialize(panel) {
+          this.panelUpdatesDisposable.value = this._onDidParametersChange.event((parameters) => {
+              this._parameters = parameters;
+              panel.update({
+                  params: parameters,
+              });
+          });
+      }
+      setVisible(isVisible) {
+          this._onWillVisibilityChange.fire({ isVisible });
+      }
+      setActive() {
+          this._onActiveChange.fire();
+      }
+      updateParameters(parameters) {
+          this._onDidParametersChange.fire(parameters);
       }
   }
 
-  class DragHandler extends CompositeDisposable {
-      constructor(el) {
-          super();
-          this.el = el;
-          this.dataDisposable = new MutableDisposable();
-          this.pointerEventsDisposable = new MutableDisposable();
-          this._onDragStart = new Emitter();
-          this.onDragStart = this._onDragStart.event;
-          this.addDisposables(this._onDragStart, this.dataDisposable, this.pointerEventsDisposable);
-          this.configure();
+  class SplitviewPanelApiImpl extends PanelApiImpl {
+      //
+      constructor(id, component) {
+          super(id, component);
+          this._onDidConstraintsChangeInternal = new Emitter();
+          this.onDidConstraintsChangeInternal = this._onDidConstraintsChangeInternal.event;
+          //
+          this._onDidConstraintsChange = new Emitter({
+              replay: true,
+          });
+          this.onDidConstraintsChange = this._onDidConstraintsChange.event;
+          //
+          this._onDidSizeChange = new Emitter();
+          this.onDidSizeChange = this._onDidSizeChange.event;
+          this.addDisposables(this._onDidConstraintsChangeInternal, this._onDidConstraintsChange, this._onDidSizeChange);
       }
-      isCancelled(_event) {
-          return false;
+      setConstraints(value) {
+          this._onDidConstraintsChangeInternal.fire(value);
       }
-      configure() {
-          this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
-              if (event.defaultPrevented || this.isCancelled(event)) {
-                  event.preventDefault();
-                  return;
-              }
-              const iframes = [
-                  ...getElementsByTagName('iframe'),
-                  ...getElementsByTagName('webview'),
-              ];
-              this.pointerEventsDisposable.value = {
-                  dispose: () => {
-                      for (const iframe of iframes) {
-                          iframe.style.pointerEvents = 'auto';
-                      }
-                  },
-              };
-              for (const iframe of iframes) {
-                  iframe.style.pointerEvents = 'none';
-              }
-              this.el.classList.add('dv-dragged');
-              setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
-              this.dataDisposable.value = this.getData(event);
-              this._onDragStart.fire(event);
-              if (event.dataTransfer) {
-                  event.dataTransfer.effectAllowed = 'move';
-                  const hasData = event.dataTransfer.items.length > 0;
-                  if (!hasData) {
-                      /**
-                       * Although this is not used by dockview many third party dnd libraries will check
-                       * dataTransfer.types to determine valid drag events.
-                       *
-                       * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
-                       * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
-                       * dnd logic. You can see the code at
-                       * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
-                       */
-                      event.dataTransfer.setData('text/plain', '__dockview_internal_drag_event__');
-                  }
-              }
-          }), addDisposableListener(this.el, 'dragend', () => {
-              this.pointerEventsDisposable.dispose();
-              this.dataDisposable.dispose();
-          }));
+      setSize(event) {
+          this._onDidSizeChange.fire(event);
       }
   }
 
-  class TabDragHandler extends DragHandler {
-      constructor(element, accessor, group, panel) {
-          super(element);
-          this.accessor = accessor;
-          this.group = group;
-          this.panel = panel;
-          this.panelTransfer = LocalSelectionTransfer.getInstance();
+  class PaneviewPanelApiImpl extends SplitviewPanelApiImpl {
+      set pane(pane) {
+          this._pane = pane;
       }
-      getData(event) {
-          this.panelTransfer.setData([new PanelTransfer(this.accessor.id, this.group.id, this.panel.id)], PanelTransfer.prototype);
-          return {
-              dispose: () => {
-                  this.panelTransfer.clearData(PanelTransfer.prototype);
-              },
-          };
+      constructor(id, component) {
+          super(id, component);
+          this._onDidExpansionChange = new Emitter({
+              replay: true,
+          });
+          this.onDidExpansionChange = this._onDidExpansionChange.event;
+          this._onMouseEnter = new Emitter({});
+          this.onMouseEnter = this._onMouseEnter.event;
+          this._onMouseLeave = new Emitter({});
+          this.onMouseLeave = this._onMouseLeave.event;
+          this.addDisposables(this._onDidExpansionChange, this._onMouseEnter, this._onMouseLeave);
+      }
+      setExpanded(isExpanded) {
+          var _a;
+          (_a = this._pane) === null || _a === void 0 ? void 0 : _a.setExpanded(isExpanded);
+      }
+      get isExpanded() {
+          var _a;
+          return !!((_a = this._pane) === null || _a === void 0 ? void 0 : _a.isExpanded());
       }
   }
-  class Tab extends CompositeDisposable {
+
+  class BasePanelView extends CompositeDisposable {
       get element() {
           return this._element;
       }
-      constructor(panel, accessor, group) {
+      get width() {
+          return this._width;
+      }
+      get height() {
+          return this._height;
+      }
+      get params() {
+          var _a;
+          return (_a = this._params) === null || _a === void 0 ? void 0 : _a.params;
+      }
+      constructor(id, component, api) {
           super();
-          this.panel = panel;
-          this.accessor = accessor;
-          this.group = group;
-          this.content = undefined;
-          this._onChanged = new Emitter();
-          this.onChanged = this._onChanged.event;
-          this._onDropped = new Emitter();
-          this.onDrop = this._onDropped.event;
-          this._onDragStart = new Emitter();
-          this.onDragStart = this._onDragStart.event;
+          this.id = id;
+          this.component = component;
+          this.api = api;
+          this._height = 0;
+          this._width = 0;
           this._element = document.createElement('div');
-          this._element.className = 'tab';
-          this._element.tabIndex = 0;
-          this._element.draggable = true;
-          toggleClass(this.element, 'inactive-tab', true);
-          const dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel);
-          this.dropTarget = new Droptarget(this._element, {
-              acceptedTargetZones: ['center'],
-              canDisplayOverlay: (event, position) => {
-                  if (this.group.locked) {
-                      return false;
-                  }
-                  const data = getPanelData();
-                  if (data && this.accessor.id === data.viewId) {
-                      if (data.panelId === null &&
-                          data.groupId === this.group.id) {
-                          // don't allow group move to drop on self
-                          return false;
-                      }
-                      return this.panel.id !== data.panelId;
-                  }
-                  return this.group.model.canDisplayOverlay(event, position, 'tab');
-              },
-          });
-          this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
-          this.addDisposables(this._onChanged, this._onDropped, this._onDragStart, dragHandler.onDragStart((event) => {
-              this._onDragStart.fire(event);
-          }), dragHandler, addDisposableListener(this._element, 'mousedown', (event) => {
-              if (event.defaultPrevented) {
-                  return;
+          this._element.tabIndex = -1;
+          this._element.style.outline = 'none';
+          this._element.style.height = '100%';
+          this._element.style.width = '100%';
+          this._element.style.overflow = 'hidden';
+          const focusTracker = trackFocus(this._element);
+          this.addDisposables(this.api, focusTracker.onDidFocus(() => {
+              this.api._onDidChangeFocus.fire({ isFocused: true });
+          }), focusTracker.onDidBlur(() => {
+              this.api._onDidChangeFocus.fire({ isFocused: false });
+          }), focusTracker);
+      }
+      focus() {
+          const event = new WillFocusEvent();
+          this.api._onWillFocus.fire(event);
+          if (event.defaultPrevented) {
+              return;
+          }
+          this._element.focus();
+      }
+      layout(width, height) {
+          this._width = width;
+          this._height = height;
+          this.api._onDidDimensionChange.fire({ width, height });
+          if (this.part) {
+              if (this._params) {
+                  this.part.update(this._params.params);
               }
-              this._onChanged.fire(event);
-          }), this.dropTarget.onDrop((event) => {
-              this._onDropped.fire(event);
-          }), this.dropTarget);
+          }
       }
-      setActive(isActive) {
-          toggleClass(this.element, 'active-tab', isActive);
-          toggleClass(this.element, 'inactive-tab', !isActive);
+      init(parameters) {
+          this._params = parameters;
+          this.part = this.getComponent();
       }
-      setContent(part) {
-          if (this.content) {
-              this._element.removeChild(this.content.element);
+      update(event) {
+          var _a, _b;
+          // merge the new parameters with the existing parameters
+          this._params = Object.assign(Object.assign({}, this._params), { params: Object.assign(Object.assign({}, (_a = this._params) === null || _a === void 0 ? void 0 : _a.params), event.params) });
+          /**
+           * delete new keys that have a value of undefined,
+           * allow values of null
+           */
+          for (const key of Object.keys(event.params)) {
+              if (event.params[key] === undefined) {
+                  delete this._params.params[key];
+              }
           }
-          this.content = part;
-          this._element.appendChild(this.content.element);
+          // update the view with the updated props
+          (_b = this.part) === null || _b === void 0 ? void 0 : _b.update({ params: this._params.params });
+      }
+      toJSON() {
+          var _a, _b;
+          const params = (_b = (_a = this._params) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {};
+          return {
+              id: this.id,
+              component: this.component,
+              params: Object.keys(params).length > 0 ? params : undefined,
+          };
       }
       dispose() {
+          var _a;
+          this.api.dispose();
+          (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
           super.dispose();
       }
   }
 
-  function addGhostImage(dataTransfer, ghostElement) {
-      // class dockview provides to force ghost image to be drawn on a different layer and prevent weird rendering issues
-      addClasses(ghostElement, 'dv-dragged');
-      document.body.appendChild(ghostElement);
-      dataTransfer.setDragImage(ghostElement, 0, 0);
-      setTimeout(() => {
-          removeClasses(ghostElement, 'dv-dragged');
-          ghostElement.remove();
-      }, 0);
-  }
-
-  class GroupDragHandler extends DragHandler {
-      constructor(element, accessor, group) {
-          super(element);
-          this.accessor = accessor;
-          this.group = group;
-          this.panelTransfer = LocalSelectionTransfer.getInstance();
-          this.addDisposables(addDisposableListener(element, 'mousedown', (e) => {
-              if (e.shiftKey) {
-                  /**
-                   * You cannot call e.preventDefault() because that will prevent drag events from firing
-                   * but we also need to stop any group overlay drag events from occuring
-                   * Use a custom event marker that can be checked by the overlay drag events
-                   */
-                  quasiPreventDefault(e);
-              }
-          }, true));
+  class PaneviewPanel extends BasePanelView {
+      set orientation(value) {
+          this._orientation = value;
       }
-      isCancelled(_event) {
-          if (this.group.api.location.type === 'floating' && !_event.shiftKey) {
-              return true;
-          }
-          return false;
+      get orientation() {
+          return this._orientation;
       }
-      getData(dragEvent) {
-          const dataTransfer = dragEvent.dataTransfer;
-          this.panelTransfer.setData([new PanelTransfer(this.accessor.id, this.group.id, null)], PanelTransfer.prototype);
-          const style = window.getComputedStyle(this.el);
-          const bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');
-          const color = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-color');
-          if (dataTransfer) {
-              const ghostElement = document.createElement('div');
-              ghostElement.style.backgroundColor = bgColor;
-              ghostElement.style.color = color;
-              ghostElement.style.padding = '2px 8px';
-              ghostElement.style.height = '24px';
-              ghostElement.style.fontSize = '11px';
-              ghostElement.style.lineHeight = '20px';
-              ghostElement.style.borderRadius = '12px';
-              ghostElement.style.position = 'absolute';
-              ghostElement.textContent = `Multiple Panels (${this.group.size})`;
-              addGhostImage(dataTransfer, ghostElement);
-          }
-          return {
-              dispose: () => {
-                  this.panelTransfer.clearData(PanelTransfer.prototype);
-              },
-          };
+      get minimumSize() {
+          const headerSize = this.headerSize;
+          const expanded = this.isExpanded();
+          const minimumBodySize = expanded ? this._minimumBodySize : 0;
+          return headerSize + minimumBodySize;
       }
-  }
-
-  class VoidContainer extends CompositeDisposable {
-      get element() {
-          return this._element;
+      get maximumSize() {
+          const headerSize = this.headerSize;
+          const expanded = this.isExpanded();
+          const maximumBodySize = expanded ? this._maximumBodySize : 0;
+          return headerSize + maximumBodySize;
       }
-      constructor(accessor, group) {
-          super();
-          this.accessor = accessor;
-          this.group = group;
-          this._onDrop = new Emitter();
-          this.onDrop = this._onDrop.event;
-          this._onDragStart = new Emitter();
-          this.onDragStart = this._onDragStart.event;
-          this._element = document.createElement('div');
-          this._element.className = 'void-container';
-          this._element.tabIndex = 0;
-          this._element.draggable = true;
-          this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'click', () => {
-              this.accessor.doSetGroupActive(this.group);
-          }));
-          const handler = new GroupDragHandler(this._element, accessor, group);
-          this.dropTraget = new Droptarget(this._element, {
-              acceptedTargetZones: ['center'],
-              canDisplayOverlay: (event, position) => {
-                  var _a;
-                  const data = getPanelData();
-                  if (data && this.accessor.id === data.viewId) {
-                      if (data.panelId === null &&
-                          data.groupId === this.group.id) {
-                          // don't allow group move to drop on self
-                          return false;
-                      }
-                      // don't show the overlay if the tab being dragged is the last panel of this group
-                      return ((_a = last(this.group.panels)) === null || _a === void 0 ? void 0 : _a.id) !== data.panelId;
-                  }
-                  return group.model.canDisplayOverlay(event, position, 'header_space');
-              },
-          });
-          this.onWillShowOverlay = this.dropTraget.onWillShowOverlay;
-          this.addDisposables(handler, handler.onDragStart((event) => {
-              this._onDragStart.fire(event);
-          }), this.dropTraget.onDrop((event) => {
-              this._onDrop.fire(event);
-          }), this.dropTraget);
+      get size() {
+          return this._size;
       }
-  }
-
-  class TabsContainer extends CompositeDisposable {
-      get panels() {
-          return this.tabs.map((_) => _.value.panel.id);
+      get orthogonalSize() {
+          return this._orthogonalSize;
       }
-      get size() {
-          return this.tabs.length;
+      set orthogonalSize(size) {
+          this._orthogonalSize = size;
       }
-      get hidden() {
-          return this._hidden;
+      get minimumBodySize() {
+          return this._minimumBodySize;
       }
-      set hidden(value) {
-          this._hidden = value;
-          this.element.style.display = value ? 'none' : '';
+      set minimumBodySize(value) {
+          this._minimumBodySize = typeof value === 'number' ? value : 0;
       }
-      show() {
-          if (!this.hidden) {
-              this.element.style.display = '';
-          }
+      get maximumBodySize() {
+          return this._maximumBodySize;
       }
-      hide() {
-          this._element.style.display = 'none';
+      set maximumBodySize(value) {
+          this._maximumBodySize =
+              typeof value === 'number' ? value : Number.POSITIVE_INFINITY;
       }
-      setRightActionsElement(element) {
-          if (this.rightActions === element) {
-              return;
-          }
-          if (this.rightActions) {
-              this.rightActions.remove();
-              this.rightActions = undefined;
-          }
-          if (element) {
-              this.rightActionsContainer.appendChild(element);
-              this.rightActions = element;
-          }
+      get headerVisible() {
+          return this._headerVisible;
       }
-      setLeftActionsElement(element) {
-          if (this.leftActions === element) {
+      set headerVisible(value) {
+          this._headerVisible = value;
+          this.header.style.display = value ? '' : 'none';
+      }
+      constructor(id, component, headerComponent, orientation, isExpanded, isHeaderVisible) {
+          super(id, component, new PaneviewPanelApiImpl(id, component));
+          this.headerComponent = headerComponent;
+          this._onDidChangeExpansionState = new Emitter({ replay: true });
+          this.onDidChangeExpansionState = this._onDidChangeExpansionState.event;
+          this._onDidChange = new Emitter();
+          this.onDidChange = this._onDidChange.event;
+          this.headerSize = 22;
+          this._orthogonalSize = 0;
+          this._size = 0;
+          this._minimumBodySize = 100;
+          this._maximumBodySize = Number.POSITIVE_INFINITY;
+          this._isExpanded = false;
+          this.expandedSize = 0;
+          this.api.pane = this; // TODO cannot use 'this' before 'super'
+          this.api.initialize(this);
+          this._isExpanded = isExpanded;
+          this._headerVisible = isHeaderVisible;
+          this._onDidChangeExpansionState.fire(this.isExpanded()); // initialize value
+          this._orientation = orientation;
+          this.element.classList.add('pane');
+          this.addDisposables(this.api.onWillVisibilityChange((event) => {
+              const { isVisible } = event;
+              const { accessor } = this._params;
+              accessor.setVisible(this, isVisible);
+          }), this.api.onDidSizeChange((event) => {
+              this._onDidChange.fire({ size: event.size });
+          }), addDisposableListener(this.element, 'mouseenter', (ev) => {
+              this.api._onMouseEnter.fire(ev);
+          }), addDisposableListener(this.element, 'mouseleave', (ev) => {
+              this.api._onMouseLeave.fire(ev);
+          }));
+          this.addDisposables(this._onDidChangeExpansionState, this.onDidChangeExpansionState((isPanelExpanded) => {
+              this.api._onDidExpansionChange.fire({
+                  isExpanded: isPanelExpanded,
+              });
+          }), this.api.onDidFocusChange((e) => {
+              if (!this.header) {
+                  return;
+              }
+              if (e.isFocused) {
+                  addClasses(this.header, 'focused');
+              }
+              else {
+                  removeClasses(this.header, 'focused');
+              }
+          }));
+          this.renderOnce();
+      }
+      setVisible(isVisible) {
+          this.api._onDidVisibilityChange.fire({ isVisible });
+      }
+      setActive(isActive) {
+          this.api._onDidActiveChange.fire({ isActive });
+      }
+      isExpanded() {
+          return this._isExpanded;
+      }
+      setExpanded(expanded) {
+          if (this._isExpanded === expanded) {
               return;
           }
-          if (this.leftActions) {
-              this.leftActions.remove();
-              this.leftActions = undefined;
+          this._isExpanded = expanded;
+          if (expanded) {
+              if (this.animationTimer) {
+                  clearTimeout(this.animationTimer);
+              }
+              if (this.body) {
+                  this.element.appendChild(this.body);
+              }
           }
-          if (element) {
-              this.leftActionsContainer.appendChild(element);
-              this.leftActions = element;
+          else {
+              this.animationTimer = setTimeout(() => {
+                  var _a;
+                  (_a = this.body) === null || _a === void 0 ? void 0 : _a.remove();
+              }, 200);
           }
+          this._onDidChange.fire(expanded ? { size: this.width } : {});
+          this._onDidChangeExpansionState.fire(expanded);
       }
-      setPrefixActionsElement(element) {
-          if (this.preActions === element) {
-              return;
+      layout(size, orthogonalSize) {
+          this._size = size;
+          this._orthogonalSize = orthogonalSize;
+          const [width, height] = this.orientation === exports.Orientation.HORIZONTAL
+              ? [size, orthogonalSize]
+              : [orthogonalSize, size];
+          if (this.isExpanded()) {
+              this.expandedSize = width;
           }
-          if (this.preActions) {
-              this.preActions.remove();
-              this.preActions = undefined;
+          super.layout(width, height);
+      }
+      init(parameters) {
+          var _a, _b;
+          super.init(parameters);
+          if (typeof parameters.minimumBodySize === 'number') {
+              this.minimumBodySize = parameters.minimumBodySize;
           }
-          if (element) {
-              this.preActionsContainer.appendChild(element);
-              this.preActions = element;
+          if (typeof parameters.maximumBodySize === 'number') {
+              this.maximumBodySize = parameters.maximumBodySize;
           }
-      }
-      get element() {
-          return this._element;
-      }
-      isActive(tab) {
-          return (this.selectedIndex > -1 &&
-              this.tabs[this.selectedIndex].value === tab);
-      }
-      indexOf(id) {
-          return this.tabs.findIndex((tab) => tab.value.panel.id === id);
-      }
-      constructor(accessor, group) {
-          super();
-          this.accessor = accessor;
-          this.group = group;
-          this.tabs = [];
-          this.selectedIndex = -1;
-          this._hidden = false;
-          this._onDrop = new Emitter();
-          this.onDrop = this._onDrop.event;
-          this._onTabDragStart = new Emitter();
-          this.onTabDragStart = this._onTabDragStart.event;
-          this._onGroupDragStart = new Emitter();
-          this.onGroupDragStart = this._onGroupDragStart.event;
-          this._onWillShowOverlay = new Emitter();
-          this.onWillShowOverlay = this._onWillShowOverlay.event;
-          this._element = document.createElement('div');
-          this._element.className = 'tabs-and-actions-container';
-          toggleClass(this._element, 'dv-full-width-single-tab', this.accessor.options.singleTabMode === 'fullwidth');
-          this.rightActionsContainer = document.createElement('div');
-          this.rightActionsContainer.className = 'right-actions-container';
-          this.leftActionsContainer = document.createElement('div');
-          this.leftActionsContainer.className = 'left-actions-container';
-          this.preActionsContainer = document.createElement('div');
-          this.preActionsContainer.className = 'pre-actions-container';
-          this.tabContainer = document.createElement('div');
-          this.tabContainer.className = 'tabs-container';
-          this.voidContainer = new VoidContainer(this.accessor, this.group);
-          this._element.appendChild(this.preActionsContainer);
-          this._element.appendChild(this.tabContainer);
-          this._element.appendChild(this.leftActionsContainer);
-          this._element.appendChild(this.voidContainer.element);
-          this._element.appendChild(this.rightActionsContainer);
-          this.addDisposables(this.accessor.onDidAddPanel((e) => {
-              if (e.api.group === this.group) {
-                  toggleClass(this._element, 'dv-single-tab', this.size === 1);
-              }
-          }), this.accessor.onDidRemovePanel((e) => {
-              if (e.api.group === this.group) {
-                  toggleClass(this._element, 'dv-single-tab', this.size === 1);
-              }
-          }), this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._onGroupDragStart, this.voidContainer, this.voidContainer.onDragStart((event) => {
-              this._onGroupDragStart.fire({
-                  nativeEvent: event,
-                  group: this.group,
-              });
-          }), this.voidContainer.onDrop((event) => {
-              this._onDrop.fire({
-                  event: event.nativeEvent,
-                  index: this.tabs.length,
-              });
-          }), this.voidContainer.onWillShowOverlay((event) => {
-              this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
-                  kind: 'header_space',
-              }));
-          }), addDisposableListener(this.voidContainer.element, 'mousedown', (event) => {
-              const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
-              if (isFloatingGroupsEnabled &&
-                  event.shiftKey &&
-                  this.group.api.location.type !== 'floating') {
-                  event.preventDefault();
-                  const { top, left } = this.element.getBoundingClientRect();
-                  const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
-                  this.accessor.addFloatingGroup(this.group, {
-                      x: left - rootLeft + 20,
-                      y: top - rootTop + 20,
-                  }, { inDragMode: true });
-              }
-          }), addDisposableListener(this.tabContainer, 'mousedown', (event) => {
-              if (event.defaultPrevented) {
-                  return;
-              }
-              const isLeftClick = event.button === 0;
-              if (isLeftClick) {
-                  this.accessor.doSetGroupActive(this.group);
-              }
-          }));
-      }
-      setActive(_isGroupActive) {
-          // noop
-      }
-      addTab(tab, index = this.tabs.length) {
-          if (index < 0 || index > this.tabs.length) {
-              throw new Error('invalid location');
-          }
-          this.tabContainer.insertBefore(tab.value.element, this.tabContainer.children[index]);
-          this.tabs = [
-              ...this.tabs.slice(0, index),
-              tab,
-              ...this.tabs.slice(index),
-          ];
-          if (this.selectedIndex < 0) {
-              this.selectedIndex = index;
+          this.bodyPart = this.getBodyComponent();
+          this.headerPart = this.getHeaderComponent();
+          this.bodyPart.init(Object.assign(Object.assign({}, parameters), { api: this.api }));
+          this.headerPart.init(Object.assign(Object.assign({}, parameters), { api: this.api }));
+          (_a = this.body) === null || _a === void 0 ? void 0 : _a.append(this.bodyPart.element);
+          (_b = this.header) === null || _b === void 0 ? void 0 : _b.append(this.headerPart.element);
+          if (typeof parameters.isExpanded === 'boolean') {
+              this.setExpanded(parameters.isExpanded);
           }
       }
-      delete(id) {
-          const index = this.tabs.findIndex((tab) => tab.value.panel.id === id);
-          const tabToRemove = this.tabs.splice(index, 1)[0];
-          const { value, disposable } = tabToRemove;
-          disposable.dispose();
-          value.dispose();
-          value.element.remove();
-      }
-      setActivePanel(panel) {
-          this.tabs.forEach((tab) => {
-              const isActivePanel = panel.id === tab.value.panel.id;
-              tab.value.setActive(isActivePanel);
-          });
-      }
-      openPanel(panel, index = this.tabs.length) {
-          var _a;
-          if (this.tabs.find((tab) => tab.value.panel.id === panel.id)) {
-              return;
-          }
-          const tab = new Tab(panel, this.accessor, this.group);
-          if (!((_a = panel.view) === null || _a === void 0 ? void 0 : _a.tab)) {
-              throw new Error('invalid header component');
-          }
-          tab.setContent(panel.view.tab);
-          const disposable = new CompositeDisposable(tab.onDragStart((event) => {
-              this._onTabDragStart.fire({ nativeEvent: event, panel });
-          }), tab.onChanged((event) => {
-              const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
-              const isFloatingWithOnePanel = this.group.api.location.type === 'floating' &&
-                  this.size === 1;
-              if (isFloatingGroupsEnabled &&
-                  !isFloatingWithOnePanel &&
-                  event.shiftKey) {
-                  event.preventDefault();
-                  const panel = this.accessor.getGroupPanel(tab.panel.id);
-                  const { top, left } = tab.element.getBoundingClientRect();
-                  const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
-                  this.accessor.addFloatingGroup(panel, {
-                      x: left - rootLeft,
-                      y: top - rootTop,
-                  }, { inDragMode: true });
-                  return;
-              }
-              const isLeftClick = event.button === 0;
-              if (!isLeftClick || event.defaultPrevented) {
-                  return;
-              }
-              if (this.group.activePanel !== panel) {
-                  this.group.model.openPanel(panel);
-              }
-          }), tab.onDrop((event) => {
-              this._onDrop.fire({
-                  event: event.nativeEvent,
-                  index: this.tabs.findIndex((x) => x.value === tab),
-              });
-          }), tab.onWillShowOverlay((event) => {
-              this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, { kind: 'tab' }));
-          }));
-          const value = { value: tab, disposable };
-          this.addTab(value, index);
+      toJSON() {
+          const params = this._params;
+          return Object.assign(Object.assign({}, super.toJSON()), { headerComponent: this.headerComponent, title: params.title });
       }
-      closePanel(panel) {
-          this.delete(panel.id);
+      renderOnce() {
+          this.header = document.createElement('div');
+          this.header.tabIndex = 0;
+          this.header.className = 'pane-header';
+          this.header.style.height = `${this.headerSize}px`;
+          this.header.style.lineHeight = `${this.headerSize}px`;
+          this.header.style.minHeight = `${this.headerSize}px`;
+          this.header.style.maxHeight = `${this.headerSize}px`;
+          this.element.appendChild(this.header);
+          this.body = document.createElement('div');
+          this.body.className = 'pane-body';
+          this.element.appendChild(this.body);
       }
-      dispose() {
-          super.dispose();
-          for (const { value, disposable } of this.tabs) {
-              disposable.dispose();
-              value.dispose();
-          }
-          this.tabs = [];
+      // TODO slightly hacky by-pass of the component to create a body and header component
+      getComponent() {
+          return {
+              update: (params) => {
+                  var _a, _b;
+                  (_a = this.bodyPart) === null || _a === void 0 ? void 0 : _a.update({ params });
+                  (_b = this.headerPart) === null || _b === void 0 ? void 0 : _b.update({ params });
+              },
+              dispose: () => {
+                  var _a, _b;
+                  (_a = this.bodyPart) === null || _a === void 0 ? void 0 : _a.dispose();
+                  (_b = this.headerPart) === null || _b === void 0 ? void 0 : _b.dispose();
+              },
+          };
       }
   }
 
-  class DockviewDidDropEvent extends DockviewEvent {
-      get nativeEvent() {
-          return this.options.nativeEvent;
-      }
-      get position() {
-          return this.options.position;
-      }
-      get panel() {
-          return this.options.panel;
-      }
-      get group() {
-          return this.options.group;
-      }
-      get api() {
-          return this.options.api;
-      }
-      constructor(options) {
-          super();
-          this.options = options;
-      }
-      getData() {
-          return this.options.getData();
-      }
-  }
-  class DockviewWillDropEvent extends DockviewDidDropEvent {
-      get kind() {
-          return this._kind;
-      }
-      constructor(options) {
-          super(options);
-          this._kind = options.kind;
-      }
-  }
-  class WillShowOverlayLocationEvent {
-      get kind() {
-          return this._kind;
-      }
-      get nativeEvent() {
-          return this.event.nativeEvent;
+  class DraggablePaneviewPanel extends PaneviewPanel {
+      constructor(accessor, id, component, headerComponent, orientation, isExpanded, disableDnd) {
+          super(id, component, headerComponent, orientation, isExpanded, true);
+          this.accessor = accessor;
+          this._onDidDrop = new Emitter();
+          this.onDidDrop = this._onDidDrop.event;
+          if (!disableDnd) {
+              this.initDragFeatures();
+          }
       }
-      get position() {
-          return this.event.position;
-      }
-      get defaultPrevented() {
-          return this.event.defaultPrevented;
-      }
-      preventDefault() {
-          this.event.preventDefault();
-      }
-      constructor(event, options) {
-          this.event = event;
-          this._kind = options.kind;
-      }
-  }
-  class DockviewGroupPanelModel extends CompositeDisposable {
-      get element() {
-          throw new Error('not supported');
-      }
-      get activePanel() {
-          return this._activePanel;
-      }
-      get locked() {
-          return this._locked;
-      }
-      set locked(value) {
-          this._locked = value;
-          toggleClass(this.container, 'locked-groupview', value === 'no-drop-target' || value);
-      }
-      get isActive() {
-          return this._isGroupActive;
-      }
-      get panels() {
-          return this._panels;
-      }
-      get size() {
-          return this._panels.length;
-      }
-      get isEmpty() {
-          return this._panels.length === 0;
-      }
-      get hasWatermark() {
-          return !!(this.watermark && this.container.contains(this.watermark.element));
-      }
-      get header() {
-          return this.tabsContainer;
-      }
-      get isContentFocused() {
-          if (!document.activeElement) {
-              return false;
-          }
-          return isAncestor(document.activeElement, this.contentContainer.element);
-      }
-      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.type) {
-              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) {
-          var _a;
-          super();
-          this.container = container;
-          this.accessor = accessor;
-          this.id = id;
-          this.options = options;
-          this.groupPanel = groupPanel;
-          this._isGroupActive = false;
-          this._locked = false;
-          this._location = { type: 'grid' };
-          this.mostRecentlyUsed = [];
-          this._onDidChange = new Emitter();
-          this.onDidChange = this._onDidChange.event;
-          this._width = 0;
-          this._height = 0;
-          this._panels = [];
-          this._panelDisposables = new Map();
-          this._onMove = new Emitter();
-          this.onMove = this._onMove.event;
-          this._onDidDrop = new Emitter();
-          this.onDidDrop = this._onDidDrop.event;
-          this._onWillDrop = new Emitter();
-          this.onWillDrop = this._onWillDrop.event;
-          this._onWillShowOverlay = new Emitter();
-          this.onWillShowOverlay = this._onWillShowOverlay.event;
-          this._onTabDragStart = new Emitter();
-          this.onTabDragStart = this._onTabDragStart.event;
-          this._onGroupDragStart = new Emitter();
-          this.onGroupDragStart = this._onGroupDragStart.event;
-          this._onDidAddPanel = new Emitter();
-          this.onDidAddPanel = this._onDidAddPanel.event;
-          this._onDidPanelTitleChange = new Emitter();
-          this.onDidPanelTitleChange = this._onDidPanelTitleChange.event;
-          this._onDidPanelParametersChange = new Emitter();
-          this.onDidPanelParametersChange = this._onDidPanelParametersChange.event;
-          this._onDidRemovePanel = new Emitter();
-          this.onDidRemovePanel = this._onDidRemovePanel.event;
-          this._onDidActivePanelChange = new Emitter();
-          this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-          this._overwriteRenderContainer = null;
-          toggleClass(this.container, 'groupview', true);
-          this._api = new DockviewApi(this.accessor);
-          this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
-          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;
-          this.addDisposables(this._onTabDragStart, this._onGroupDragStart, this._onWillShowOverlay, this.tabsContainer.onTabDragStart((event) => {
-              this._onTabDragStart.fire(event);
-          }), this.tabsContainer.onGroupDragStart((event) => {
-              this._onGroupDragStart.fire(event);
-          }), this.tabsContainer.onDrop((event) => {
-              this.handleDropEvent('header', event.event, 'center', event.index);
-          }), this.contentContainer.onDidFocus(() => {
-              this.accessor.doSetGroupActive(this.groupPanel);
-          }), this.contentContainer.onDidBlur(() => {
-              // noop
-          }), this.contentContainer.dropTarget.onDrop((event) => {
-              this.handleDropEvent('content', event.nativeEvent, event.position);
-          }), this.tabsContainer.onWillShowOverlay((event) => {
-              this._onWillShowOverlay.fire(event);
-          }), this.contentContainer.dropTarget.onWillShowOverlay((event) => {
-              this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
-                  kind: 'content',
-              }));
-          }), this._onMove, this._onDidChange, this._onDidDrop, this._onWillDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange);
-      }
-      focusContent() {
-          this.contentContainer.element.focus();
-      }
-      set renderContainer(value) {
-          this.panels.forEach((panel) => {
-              this.renderContainer.detatch(panel);
-          });
-          this._overwriteRenderContainer = value;
-          this.panels.forEach((panel) => {
-              this.rerender(panel);
-          });
-      }
-      get renderContainer() {
-          var _a;
-          return ((_a = this._overwriteRenderContainer) !== null && _a !== void 0 ? _a : this.accessor.overlayRenderContainer);
-      }
-      initialize() {
-          if (this.options.panels) {
-              this.options.panels.forEach((panel) => {
-                  this.doAddPanel(panel);
-              });
-          }
-          if (this.options.activePanel) {
-              this.openPanel(this.options.activePanel);
-          }
-          // must be run after the constructor otherwise this.parent may not be
-          // correctly initialized
-          this.setActive(this.isActive, true);
-          this.updateContainer();
-          if (this.accessor.options.createRightHeaderActionsElement) {
-              this._rightHeaderActions =
-                  this.accessor.options.createRightHeaderActionsElement(this.groupPanel);
-              this.addDisposables(this._rightHeaderActions);
-              this._rightHeaderActions.init({
-                  containerApi: this._api,
-                  api: this.groupPanel.api,
-              });
-              this.tabsContainer.setRightActionsElement(this._rightHeaderActions.element);
-          }
-          if (this.accessor.options.createLeftHeaderActionsElement) {
-              this._leftHeaderActions =
-                  this.accessor.options.createLeftHeaderActionsElement(this.groupPanel);
-              this.addDisposables(this._leftHeaderActions);
-              this._leftHeaderActions.init({
-                  containerApi: this._api,
-                  api: this.groupPanel.api,
-              });
-              this.tabsContainer.setLeftActionsElement(this._leftHeaderActions.element);
-          }
-          if (this.accessor.options.createPrefixHeaderActionsElement) {
-              this._prefixHeaderActions =
-                  this.accessor.options.createPrefixHeaderActionsElement(this.groupPanel);
-              this.addDisposables(this._prefixHeaderActions);
-              this._prefixHeaderActions.init({
-                  containerApi: this._api,
-                  api: this.groupPanel.api,
-              });
-              this.tabsContainer.setPrefixActionsElement(this._prefixHeaderActions.element);
-          }
-      }
-      rerender(panel) {
-          this.contentContainer.renderPanel(panel, { asActive: false });
-      }
-      indexOf(panel) {
-          return this.tabsContainer.indexOf(panel.id);
-      }
-      toJSON() {
-          var _a;
-          const result = {
-              views: this.tabsContainer.panels,
-              activeView: (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.id,
-              id: this.id,
-          };
-          if (this.locked !== false) {
-              result.locked = this.locked;
-          }
-          if (this.header.hidden) {
-              result.hideHeader = true;
-          }
-          return result;
-      }
-      moveToNext(options) {
-          if (!options) {
-              options = {};
-          }
-          if (!options.panel) {
-              options.panel = this.activePanel;
-          }
-          const index = options.panel ? this.panels.indexOf(options.panel) : -1;
-          let normalizedIndex;
-          if (index < this.panels.length - 1) {
-              normalizedIndex = index + 1;
-          }
-          else if (!options.suppressRoll) {
-              normalizedIndex = 0;
-          }
-          else {
-              return;
-          }
-          this.openPanel(this.panels[normalizedIndex]);
-      }
-      moveToPrevious(options) {
-          if (!options) {
-              options = {};
-          }
-          if (!options.panel) {
-              options.panel = this.activePanel;
-          }
-          if (!options.panel) {
-              return;
-          }
-          const index = this.panels.indexOf(options.panel);
-          let normalizedIndex;
-          if (index > 0) {
-              normalizedIndex = index - 1;
-          }
-          else if (!options.suppressRoll) {
-              normalizedIndex = this.panels.length - 1;
-          }
-          else {
-              return;
-          }
-          this.openPanel(this.panels[normalizedIndex]);
-      }
-      containsPanel(panel) {
-          return this.panels.includes(panel);
-      }
-      init(_params) {
-          //noop
-      }
-      update(_params) {
-          //noop
-      }
-      focus() {
-          var _a;
-          (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus();
-      }
-      openPanel(panel, options = {}) {
-          /**
-           * set the panel group
-           * add the panel
-           * check if group active
-           * check if panel active
-           */
-          if (typeof options.index !== 'number' ||
-              options.index > this.panels.length) {
-              options.index = this.panels.length;
-          }
-          const skipSetActive = !!options.skipSetActive;
-          // ensure the group is updated before we fire any events
-          panel.updateParentGroup(this.groupPanel, {
-              skipSetActive: options.skipSetActive,
-          });
-          this.doAddPanel(panel, options.index, {
-              skipSetActive: skipSetActive,
-          });
-          if (this._activePanel === panel) {
-              this.contentContainer.renderPanel(panel, { asActive: true });
-              return;
-          }
-          if (!skipSetActive) {
-              this.doSetActivePanel(panel);
-          }
-          if (!options.skipSetGroupActive) {
-              this.accessor.doSetGroupActive(this.groupPanel);
-          }
-          if (!options.skipSetActive) {
-              this.updateContainer();
-          }
-      }
-      removePanel(groupItemOrId, options = {
-          skipSetActive: false,
-      }) {
-          const id = typeof groupItemOrId === 'string'
-              ? groupItemOrId
-              : groupItemOrId.id;
-          const panelToRemove = this._panels.find((panel) => panel.id === id);
-          if (!panelToRemove) {
-              throw new Error('invalid operation');
-          }
-          return this._removePanel(panelToRemove, options);
-      }
-      closeAllPanels() {
-          if (this.panels.length > 0) {
-              // take a copy since we will be edting the array as we iterate through
-              const arrPanelCpy = [...this.panels];
-              for (const panel of arrPanelCpy) {
-                  this.doClose(panel);
-              }
-          }
-          else {
-              this.accessor.removeGroup(this.groupPanel);
-          }
-      }
-      closePanel(panel) {
-          this.doClose(panel);
-      }
-      doClose(panel) {
-          this.accessor.removePanel(panel);
-      }
-      isPanelActive(panel) {
-          return this._activePanel === panel;
-      }
-      updateActions(element) {
-          this.tabsContainer.setRightActionsElement(element);
-      }
-      setActive(isGroupActive, force = false) {
-          if (!force && this.isActive === isGroupActive) {
-              return;
-          }
-          this._isGroupActive = isGroupActive;
-          toggleClass(this.container, 'active-group', isGroupActive);
-          toggleClass(this.container, 'inactive-group', !isGroupActive);
-          this.tabsContainer.setActive(this.isActive);
-          if (!this._activePanel && this.panels.length > 0) {
-              this.doSetActivePanel(this.panels[0]);
-          }
-          this.updateContainer();
-      }
-      layout(width, height) {
-          var _a;
-          this._width = width;
-          this._height = height;
-          this.contentContainer.layout(this._width, this._height);
-          if ((_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.layout) {
-              this._activePanel.layout(this._width, this._height);
-          }
-      }
-      _removePanel(panel, options) {
-          const isActivePanel = this._activePanel === panel;
-          this.doRemovePanel(panel);
-          if (isActivePanel && this.panels.length > 0) {
-              const nextPanel = this.mostRecentlyUsed[0];
-              this.openPanel(nextPanel, {
-                  skipSetActive: options.skipSetActive,
-                  skipSetGroupActive: options.skipSetActiveGroup,
-              });
-          }
-          if (this._activePanel && this.panels.length === 0) {
-              this.doSetActivePanel(undefined);
-          }
-          if (!options.skipSetActive) {
-              this.updateContainer();
-          }
-          return panel;
-      }
-      doRemovePanel(panel) {
-          const index = this.panels.indexOf(panel);
-          if (this._activePanel === panel) {
-              this.contentContainer.closePanel();
-          }
-          this.tabsContainer.delete(panel.id);
-          this._panels.splice(index, 1);
-          if (this.mostRecentlyUsed.includes(panel)) {
-              this.mostRecentlyUsed.splice(this.mostRecentlyUsed.indexOf(panel), 1);
-          }
-          const disposable = this._panelDisposables.get(panel.id);
-          if (disposable) {
-              disposable.dispose();
-              this._panelDisposables.delete(panel.id);
-          }
-          this._onDidRemovePanel.fire({ panel });
-      }
-      doAddPanel(panel, index = this.panels.length, options = { skipSetActive: false }) {
-          const existingPanel = this._panels.indexOf(panel);
-          const hasExistingPanel = existingPanel > -1;
-          this.tabsContainer.show();
-          this.contentContainer.show();
-          this.tabsContainer.openPanel(panel, index);
-          if (!options.skipSetActive) {
-              this.contentContainer.openPanel(panel);
-          }
-          if (hasExistingPanel) {
-              // TODO - need to ensure ordering hasn't changed and if it has need to re-order this.panels
-              return;
-          }
-          this.updateMru(panel);
-          this.panels.splice(index, 0, panel);
-          this._panelDisposables.set(panel.id, new CompositeDisposable(panel.api.onDidTitleChange((event) => this._onDidPanelTitleChange.fire(event)), panel.api.onDidParametersChange((event) => this._onDidPanelParametersChange.fire(event))));
-          this._onDidAddPanel.fire({ panel });
-      }
-      doSetActivePanel(panel) {
-          if (this._activePanel === panel) {
-              return;
-          }
-          this._activePanel = panel;
-          if (panel) {
-              this.tabsContainer.setActivePanel(panel);
-              panel.layout(this._width, this._height);
-              this.updateMru(panel);
-              this._onDidActivePanelChange.fire({
-                  panel,
-              });
-          }
-      }
-      updateMru(panel) {
-          if (this.mostRecentlyUsed.includes(panel)) {
-              this.mostRecentlyUsed.splice(this.mostRecentlyUsed.indexOf(panel), 1);
-          }
-          this.mostRecentlyUsed = [panel, ...this.mostRecentlyUsed];
-      }
-      updateContainer() {
-          var _a, _b;
-          toggleClass(this.container, 'empty', this.isEmpty);
-          this.panels.forEach((panel) => panel.runEvents());
-          if (this.isEmpty && !this.watermark) {
-              const watermark = this.accessor.createWatermarkComponent();
-              watermark.init({
-                  containerApi: this._api,
-                  group: this.groupPanel,
-              });
-              this.watermark = watermark;
-              addDisposableListener(this.watermark.element, 'click', () => {
-                  if (!this.isActive) {
-                      this.accessor.doSetGroupActive(this.groupPanel);
-                  }
-              });
-              this.tabsContainer.hide();
-              this.contentContainer.element.appendChild(this.watermark.element);
-              this.watermark.updateParentGroup(this.groupPanel, true);
-          }
-          if (!this.isEmpty && this.watermark) {
-              this.watermark.element.remove();
-              (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
-              this.watermark = undefined;
-              this.tabsContainer.show();
-          }
-      }
-      canDisplayOverlay(event, position, target) {
-          // custom overlay handler
-          if (this.accessor.options.showDndOverlay) {
-              return this.accessor.options.showDndOverlay({
-                  nativeEvent: event,
-                  target,
-                  group: this.accessor.getPanel(this.id),
-                  position,
-                  getData: getPanelData,
-              });
-          }
-          return false;
-      }
-      handleDropEvent(type, event, position, index) {
-          if (this.locked === 'no-drop-target') {
+      initDragFeatures() {
+          if (!this.header) {
               return;
           }
-          function getKind() {
-              switch (type) {
-                  case 'header':
-                      return typeof index === 'number' ? 'tab' : 'header_space';
-                  case 'content':
-                      return 'content';
+          const id = this.id;
+          const accessorId = this.accessor.id;
+          this.header.draggable = true;
+          this.handler = new (class PaneDragHandler extends DragHandler {
+              getData() {
+                  LocalSelectionTransfer.getInstance().setData([new PaneTransfer(accessorId, id)], PaneTransfer.prototype);
+                  return {
+                      dispose: () => {
+                          LocalSelectionTransfer.getInstance().clearData(PaneTransfer.prototype);
+                      },
+                  };
               }
-          }
-          const panel = typeof index === 'number' ? this.panels[index] : undefined;
-          const willDropEvent = new DockviewWillDropEvent({
-              nativeEvent: event,
-              position,
-              panel,
-              getData: () => getPanelData(),
-              kind: getKind(),
-              group: this.groupPanel,
-              api: this._api,
+          })(this.header);
+          this.target = new Droptarget(this.element, {
+              acceptedTargetZones: ['top', 'bottom'],
+              overlayModel: {
+                  activationSize: { type: 'percentage', value: 50 },
+              },
+              canDisplayOverlay: (event) => {
+                  const data = getPaneData();
+                  if (data) {
+                      if (data.paneId !== this.id &&
+                          data.viewId === this.accessor.id) {
+                          return true;
+                      }
+                  }
+                  if (this.accessor.options.showDndOverlay) {
+                      return this.accessor.options.showDndOverlay({
+                          nativeEvent: event,
+                          getData: getPaneData,
+                          panel: this,
+                      });
+                  }
+                  return false;
+              },
           });
-          this._onWillDrop.fire(willDropEvent);
-          if (willDropEvent.defaultPrevented) {
+          this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop((event) => {
+              this.onDrop(event);
+          }));
+      }
+      onDrop(event) {
+          const data = getPaneData();
+          if (!data || data.viewId !== this.accessor.id) {
+              // if there is no local drag event for this panel
+              // or if the drag event was creating by another Paneview instance
+              this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, api: new PaneviewApi(this.accessor), getData: getPaneData }));
               return;
           }
-          const data = getPanelData();
-          if (data && data.viewId === this.accessor.id) {
-              if (data.panelId === null) {
-                  // this is a group move dnd event
-                  const { groupId } = data;
-                  this._onMove.fire({
-                      target: position,
-                      groupId: groupId,
-                      index,
-                  });
-                  return;
-              }
-              const fromSameGroup = this.tabsContainer.indexOf(data.panelId) !== -1;
-              if (fromSameGroup && this.tabsContainer.size === 1) {
-                  return;
-              }
-              const { groupId, panelId } = data;
-              const isSameGroup = this.id === groupId;
-              if (isSameGroup && !position) {
-                  const oldIndex = this.tabsContainer.indexOf(panelId);
-                  if (oldIndex === index) {
-                      return;
-                  }
-              }
-              this._onMove.fire({
-                  target: position,
-                  groupId: data.groupId,
-                  itemId: data.panelId,
-                  index,
-              });
+          const containerApi = this._params
+              .containerApi;
+          const panelId = data.paneId;
+          const existingPanel = containerApi.getPanel(panelId);
+          if (!existingPanel) {
+              // if the panel doesn't exist
+              this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: getPaneData, api: new PaneviewApi(this.accessor) }));
+              return;
           }
-          else {
-              this._onDidDrop.fire(new DockviewDidDropEvent({
-                  nativeEvent: event,
-                  position,
-                  panel,
-                  getData: () => getPanelData(),
-                  group: this.groupPanel,
-                  api: this._api,
-              }));
+          const allPanels = containerApi.panels;
+          const fromIndex = allPanels.indexOf(existingPanel);
+          let toIndex = containerApi.panels.indexOf(this);
+          if (event.position === 'left' || event.position === 'top') {
+              toIndex = Math.max(0, toIndex - 1);
           }
-      }
-      dispose() {
-          var _a, _b, _c;
-          super.dispose();
-          (_a = this.watermark) === null || _a === void 0 ? void 0 : _a.element.remove();
-          (_c = (_b = this.watermark) === null || _b === void 0 ? void 0 : _b.dispose) === null || _c === void 0 ? void 0 : _c.call(_b);
-          this.watermark = undefined;
-          for (const panel of this.panels) {
-              panel.dispose();
+          if (event.position === 'right' || event.position === 'bottom') {
+              if (fromIndex > toIndex) {
+                  toIndex++;
+              }
+              toIndex = Math.min(allPanels.length - 1, toIndex);
           }
-          this.tabsContainer.dispose();
-          this.contentContainer.dispose();
+          containerApi.movePanel(fromIndex, toIndex);
       }
   }
 
-  class Resizable extends CompositeDisposable {
+  class ContentContainer extends CompositeDisposable {
       get element() {
           return this._element;
       }
-      get disableResizing() {
-          return this._disableResizing;
+      constructor(accessor, group) {
+          super();
+          this.accessor = accessor;
+          this.group = group;
+          this.disposable = new MutableDisposable();
+          this._onDidFocus = new Emitter();
+          this.onDidFocus = this._onDidFocus.event;
+          this._onDidBlur = new Emitter();
+          this.onDidBlur = this._onDidBlur.event;
+          this._element = document.createElement('div');
+          this._element.className = 'content-container';
+          this._element.tabIndex = -1;
+          this.addDisposables(this._onDidFocus, this._onDidBlur);
+          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.type !== '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, 'content');
+              },
+          });
+          this.addDisposables(this.dropTarget);
       }
-      set disableResizing(value) {
-          this._disableResizing = value;
+      show() {
+          this.element.style.display = '';
       }
-      constructor(parentElement, disableResizing = false) {
-          super();
-          this._disableResizing = disableResizing;
-          this._element = parentElement;
-          this.addDisposables(watchElementResize(this._element, (entry) => {
-              if (this.isDisposed) {
-                  /**
-                   * resize is delayed through requestAnimationFrame so there is a small chance
-                   * the component has already been disposed of
-                   */
-                  return;
-              }
-              if (this.disableResizing) {
-                  return;
-              }
-              if (!this._element.offsetParent) {
-                  /**
-                   * offsetParent === null is equivalent to display: none being set on the element or one
-                   * of it's parents. In the display: none case the size will become (0, 0) which we do
-                   * not want to propagate.
-                   *
-                   * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent
-                   *
-                   * You could use checkVisibility() but at the time of writing it's not supported across
-                   * all Browsers
-                   *
-                   * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility
-                   */
-                  return;
-              }
-              if (!isInDocument(this._element)) {
-                  /**
-                   * since the event is dispatched through requestAnimationFrame there is a small chance
-                   * the component is no longer attached to the DOM, if that is the case the dimensions
-                   * are mostly likely all zero and meaningless. we should skip this case.
-                   */
-                  return;
-              }
-              const { width, height } = entry.contentRect;
-              this.layout(width, height);
-          }));
+      hide() {
+          this.element.style.display = 'none';
+      }
+      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;
+          let container;
+          switch (panel.api.renderer) {
+              case 'onlyWhenVisible':
+                  this.group.renderContainer.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.group.renderContainer.attach({
+                      panel,
+                      referenceContainer: this,
+                  });
+                  break;
+          }
+          if (doRender) {
+              const focusTracker = trackFocus(container);
+              const disposable = new CompositeDisposable();
+              disposable.addDisposables(focusTracker, focusTracker.onDidFocus(() => this._onDidFocus.fire()), focusTracker.onDidBlur(() => this._onDidBlur.fire()));
+              this.disposable.value = disposable;
+          }
       }
-  }
-
-  const nextLayoutId$1 = sequentialNumberGenerator();
-  function toTarget(direction) {
-      switch (direction) {
-          case 'left':
-              return 'left';
-          case 'right':
-              return 'right';
-          case 'above':
-              return 'top';
-          case 'below':
-              return 'bottom';
-          case 'within':
-          default:
-              return 'center';
+      openPanel(panel) {
+          if (this.panel === panel) {
+              return;
+          }
+          this.renderPanel(panel);
       }
-  }
-  class BaseGrid extends Resizable {
-      get id() {
-          return this._id;
+      layout(_width, _height) {
+          // noop
       }
-      get size() {
-          return this._groups.size;
+      closePanel() {
+          var _a;
+          if (this.panel) {
+              if (this.panel.api.renderer === 'onlyWhenVisible') {
+                  (_a = this.panel.view.content.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.panel.view.content.element);
+              }
+          }
+          this.panel = undefined;
       }
-      get groups() {
-          return Array.from(this._groups.values()).map((_) => _.value);
+      dispose() {
+          this.disposable.dispose();
+          super.dispose();
       }
-      get width() {
-          return this.gridview.width;
+  }
+
+  class TabDragHandler extends DragHandler {
+      constructor(element, accessor, group, panel) {
+          super(element);
+          this.accessor = accessor;
+          this.group = group;
+          this.panel = panel;
+          this.panelTransfer = LocalSelectionTransfer.getInstance();
       }
-      get height() {
-          return this.gridview.height;
+      getData(event) {
+          this.panelTransfer.setData([new PanelTransfer(this.accessor.id, this.group.id, this.panel.id)], PanelTransfer.prototype);
+          return {
+              dispose: () => {
+                  this.panelTransfer.clearData(PanelTransfer.prototype);
+              },
+          };
       }
-      get minimumHeight() {
-          return this.gridview.minimumHeight;
+  }
+  class Tab extends CompositeDisposable {
+      get element() {
+          return this._element;
       }
-      get maximumHeight() {
-          return this.gridview.maximumHeight;
+      constructor(panel, accessor, group) {
+          super();
+          this.panel = panel;
+          this.accessor = accessor;
+          this.group = group;
+          this.content = undefined;
+          this._onChanged = new Emitter();
+          this.onChanged = this._onChanged.event;
+          this._onDropped = new Emitter();
+          this.onDrop = this._onDropped.event;
+          this._onDragStart = new Emitter();
+          this.onDragStart = this._onDragStart.event;
+          this._element = document.createElement('div');
+          this._element.className = 'tab';
+          this._element.tabIndex = 0;
+          this._element.draggable = true;
+          toggleClass(this.element, 'inactive-tab', true);
+          const dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel);
+          this.dropTarget = new Droptarget(this._element, {
+              acceptedTargetZones: ['center'],
+              canDisplayOverlay: (event, position) => {
+                  if (this.group.locked) {
+                      return false;
+                  }
+                  const data = getPanelData();
+                  if (data && this.accessor.id === data.viewId) {
+                      if (data.panelId === null &&
+                          data.groupId === this.group.id) {
+                          // don't allow group move to drop on self
+                          return false;
+                      }
+                      return this.panel.id !== data.panelId;
+                  }
+                  return this.group.model.canDisplayOverlay(event, position, 'tab');
+              },
+          });
+          this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
+          this.addDisposables(this._onChanged, this._onDropped, this._onDragStart, dragHandler.onDragStart((event) => {
+              this._onDragStart.fire(event);
+          }), dragHandler, addDisposableListener(this._element, 'mousedown', (event) => {
+              if (event.defaultPrevented) {
+                  return;
+              }
+              this._onChanged.fire(event);
+          }), this.dropTarget.onDrop((event) => {
+              this._onDropped.fire(event);
+          }), this.dropTarget);
       }
-      get minimumWidth() {
-          return this.gridview.minimumWidth;
+      setActive(isActive) {
+          toggleClass(this.element, 'active-tab', isActive);
+          toggleClass(this.element, 'inactive-tab', !isActive);
       }
-      get maximumWidth() {
-          return this.gridview.maximumWidth;
+      setContent(part) {
+          if (this.content) {
+              this._element.removeChild(this.content.element);
+          }
+          this.content = part;
+          this._element.appendChild(this.content.element);
       }
-      get activeGroup() {
-          return this._activeGroup;
+      dispose() {
+          super.dispose();
       }
-      get locked() {
-          return this.gridview.locked;
+  }
+
+  function addGhostImage(dataTransfer, ghostElement) {
+      // class dockview provides to force ghost image to be drawn on a different layer and prevent weird rendering issues
+      addClasses(ghostElement, 'dv-dragged');
+      document.body.appendChild(ghostElement);
+      dataTransfer.setDragImage(ghostElement, 0, 0);
+      setTimeout(() => {
+          removeClasses(ghostElement, 'dv-dragged');
+          ghostElement.remove();
+      }, 0);
+  }
+
+  class GroupDragHandler extends DragHandler {
+      constructor(element, accessor, group) {
+          super(element);
+          this.accessor = accessor;
+          this.group = group;
+          this.panelTransfer = LocalSelectionTransfer.getInstance();
+          this.addDisposables(addDisposableListener(element, 'mousedown', (e) => {
+              if (e.shiftKey) {
+                  /**
+                   * You cannot call e.preventDefault() because that will prevent drag events from firing
+                   * but we also need to stop any group overlay drag events from occuring
+                   * Use a custom event marker that can be checked by the overlay drag events
+                   */
+                  quasiPreventDefault(e);
+              }
+          }, true));
       }
-      set locked(value) {
-          this.gridview.locked = value;
+      isCancelled(_event) {
+          if (this.group.api.location.type === 'floating' && !_event.shiftKey) {
+              return true;
+          }
+          return false;
       }
-      constructor(options) {
-          super(document.createElement('div'), options.disableAutoResizing);
-          this._id = nextLayoutId$1.next();
-          this._groups = new Map();
-          this._onDidLayoutChange = new Emitter();
-          this.onDidLayoutChange = this._onDidLayoutChange.event;
-          this._onDidRemove = new Emitter();
-          this.onDidRemove = this._onDidRemove.event;
-          this._onDidAdd = new Emitter();
-          this.onDidAdd = this._onDidAdd.event;
-          this._onDidActiveChange = new Emitter();
-          this.onDidActiveChange = this._onDidActiveChange.event;
-          this._bufferOnDidLayoutChange = new TickDelayedEvent();
-          this.element.style.height = '100%';
-          this.element.style.width = '100%';
-          options.parentElement.appendChild(this.element);
-          this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation);
-          this.gridview.locked = !!options.locked;
-          this.element.appendChild(this.gridview.element);
-          this.layout(0, 0, true); // set some elements height/widths
-          this.addDisposables(Disposable.from(() => {
-              var _a;
-              (_a = this.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.element);
-          }), this.gridview.onDidChange(() => {
-              this._bufferOnDidLayoutChange.fire();
-          }), exports.DockviewEvent.any(this.onDidAdd, this.onDidRemove, this.onDidActiveChange)(() => {
-              this._bufferOnDidLayoutChange.fire();
-          }), this._bufferOnDidLayoutChange.onEvent(() => {
-              this._onDidLayoutChange.fire();
-          }), this._bufferOnDidLayoutChange);
+      getData(dragEvent) {
+          const dataTransfer = dragEvent.dataTransfer;
+          this.panelTransfer.setData([new PanelTransfer(this.accessor.id, this.group.id, null)], PanelTransfer.prototype);
+          const style = window.getComputedStyle(this.el);
+          const bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');
+          const color = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-color');
+          if (dataTransfer) {
+              const ghostElement = document.createElement('div');
+              ghostElement.style.backgroundColor = bgColor;
+              ghostElement.style.color = color;
+              ghostElement.style.padding = '2px 8px';
+              ghostElement.style.height = '24px';
+              ghostElement.style.fontSize = '11px';
+              ghostElement.style.lineHeight = '20px';
+              ghostElement.style.borderRadius = '12px';
+              ghostElement.style.position = 'absolute';
+              ghostElement.textContent = `Multiple Panels (${this.group.size})`;
+              addGhostImage(dataTransfer, ghostElement);
+          }
+          return {
+              dispose: () => {
+                  this.panelTransfer.clearData(PanelTransfer.prototype);
+              },
+          };
       }
-      setVisible(panel, visible) {
-          this.gridview.setViewVisible(getGridLocation(panel.element), visible);
-          this._onDidLayoutChange.fire();
+  }
+
+  class VoidContainer extends CompositeDisposable {
+      get element() {
+          return this._element;
       }
-      isVisible(panel) {
-          return this.gridview.isViewVisible(getGridLocation(panel.element));
+      constructor(accessor, group) {
+          super();
+          this.accessor = accessor;
+          this.group = group;
+          this._onDrop = new Emitter();
+          this.onDrop = this._onDrop.event;
+          this._onDragStart = new Emitter();
+          this.onDragStart = this._onDragStart.event;
+          this._element = document.createElement('div');
+          this._element.className = 'void-container';
+          this._element.tabIndex = 0;
+          this._element.draggable = true;
+          this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'click', () => {
+              this.accessor.doSetGroupActive(this.group);
+          }));
+          const handler = new GroupDragHandler(this._element, accessor, group);
+          this.dropTraget = new Droptarget(this._element, {
+              acceptedTargetZones: ['center'],
+              canDisplayOverlay: (event, position) => {
+                  var _a;
+                  const data = getPanelData();
+                  if (data && this.accessor.id === data.viewId) {
+                      if (data.panelId === null &&
+                          data.groupId === this.group.id) {
+                          // don't allow group move to drop on self
+                          return false;
+                      }
+                      // don't show the overlay if the tab being dragged is the last panel of this group
+                      return ((_a = last(this.group.panels)) === null || _a === void 0 ? void 0 : _a.id) !== data.panelId;
+                  }
+                  return group.model.canDisplayOverlay(event, position, 'header_space');
+              },
+          });
+          this.onWillShowOverlay = this.dropTraget.onWillShowOverlay;
+          this.addDisposables(handler, handler.onDragStart((event) => {
+              this._onDragStart.fire(event);
+          }), this.dropTraget.onDrop((event) => {
+              this._onDrop.fire(event);
+          }), this.dropTraget);
       }
-      maximizeGroup(panel) {
-          this.gridview.maximizeView(panel);
-          this.doSetGroupActive(panel);
+  }
+
+  class TabsContainer extends CompositeDisposable {
+      get panels() {
+          return this.tabs.map((_) => _.value.panel.id);
       }
-      isMaximizedGroup(panel) {
-          return this.gridview.maximizedView() === panel;
+      get size() {
+          return this.tabs.length;
       }
-      exitMaximizedGroup() {
-          this.gridview.exitMaximizedView();
+      get hidden() {
+          return this._hidden;
       }
-      hasMaximizedGroup() {
-          return this.gridview.hasMaximizedView();
+      set hidden(value) {
+          this._hidden = value;
+          this.element.style.display = value ? 'none' : '';
       }
-      get onDidMaximizedGroupChange() {
-          return this.gridview.onDidMaximizedNodeChange;
+      show() {
+          if (!this.hidden) {
+              this.element.style.display = '';
+          }
       }
-      doAddGroup(group, location = [0], size) {
-          this.gridview.addView(group, size !== null && size !== void 0 ? size : exports.Sizing.Distribute, location);
-          this._onDidAdd.fire(group);
+      hide() {
+          this._element.style.display = 'none';
       }
-      doRemoveGroup(group, options) {
-          if (!this._groups.has(group.id)) {
-              throw new Error('invalid operation');
+      setRightActionsElement(element) {
+          if (this.rightActions === element) {
+              return;
           }
-          const item = this._groups.get(group.id);
-          const view = this.gridview.remove(group, exports.Sizing.Distribute);
-          if (item && !(options === null || options === void 0 ? void 0 : options.skipDispose)) {
-              item.disposable.dispose();
-              item.value.dispose();
-              this._groups.delete(group.id);
-              this._onDidRemove.fire(group);
+          if (this.rightActions) {
+              this.rightActions.remove();
+              this.rightActions = undefined;
           }
-          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);
+          if (element) {
+              this.rightActionsContainer.appendChild(element);
+              this.rightActions = element;
           }
-          return view;
       }
-      getPanel(id) {
-          var _a;
-          return (_a = this._groups.get(id)) === null || _a === void 0 ? void 0 : _a.value;
+      setLeftActionsElement(element) {
+          if (this.leftActions === element) {
+              return;
+          }
+          if (this.leftActions) {
+              this.leftActions.remove();
+              this.leftActions = undefined;
+          }
+          if (element) {
+              this.leftActionsContainer.appendChild(element);
+              this.leftActions = element;
+          }
       }
-      doSetGroupActive(group) {
-          if (this._activeGroup === group) {
+      setPrefixActionsElement(element) {
+          if (this.preActions === element) {
               return;
           }
-          if (this._activeGroup) {
-              this._activeGroup.setActive(false);
+          if (this.preActions) {
+              this.preActions.remove();
+              this.preActions = undefined;
           }
-          if (group) {
-              group.setActive(true);
+          if (element) {
+              this.preActionsContainer.appendChild(element);
+              this.preActions = element;
           }
-          this._activeGroup = group;
-          this._onDidActiveChange.fire(group);
       }
-      removeGroup(group) {
-          this.doRemoveGroup(group);
+      get element() {
+          return this._element;
       }
-      moveToNext(options) {
+      isActive(tab) {
+          return (this.selectedIndex > -1 &&
+              this.tabs[this.selectedIndex].value === tab);
+      }
+      indexOf(id) {
+          return this.tabs.findIndex((tab) => tab.value.panel.id === id);
+      }
+      constructor(accessor, group) {
+          super();
+          this.accessor = accessor;
+          this.group = group;
+          this.tabs = [];
+          this.selectedIndex = -1;
+          this._hidden = false;
+          this._onDrop = new Emitter();
+          this.onDrop = this._onDrop.event;
+          this._onTabDragStart = new Emitter();
+          this.onTabDragStart = this._onTabDragStart.event;
+          this._onGroupDragStart = new Emitter();
+          this.onGroupDragStart = this._onGroupDragStart.event;
+          this._onWillShowOverlay = new Emitter();
+          this.onWillShowOverlay = this._onWillShowOverlay.event;
+          this._element = document.createElement('div');
+          this._element.className = 'tabs-and-actions-container';
+          toggleClass(this._element, 'dv-full-width-single-tab', this.accessor.options.singleTabMode === 'fullwidth');
+          this.rightActionsContainer = document.createElement('div');
+          this.rightActionsContainer.className = 'right-actions-container';
+          this.leftActionsContainer = document.createElement('div');
+          this.leftActionsContainer.className = 'left-actions-container';
+          this.preActionsContainer = document.createElement('div');
+          this.preActionsContainer.className = 'pre-actions-container';
+          this.tabContainer = document.createElement('div');
+          this.tabContainer.className = 'tabs-container';
+          this.voidContainer = new VoidContainer(this.accessor, this.group);
+          this._element.appendChild(this.preActionsContainer);
+          this._element.appendChild(this.tabContainer);
+          this._element.appendChild(this.leftActionsContainer);
+          this._element.appendChild(this.voidContainer.element);
+          this._element.appendChild(this.rightActionsContainer);
+          this.addDisposables(this.accessor.onDidAddPanel((e) => {
+              if (e.api.group === this.group) {
+                  toggleClass(this._element, 'dv-single-tab', this.size === 1);
+              }
+          }), this.accessor.onDidRemovePanel((e) => {
+              if (e.api.group === this.group) {
+                  toggleClass(this._element, 'dv-single-tab', this.size === 1);
+              }
+          }), this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._onGroupDragStart, this.voidContainer, this.voidContainer.onDragStart((event) => {
+              this._onGroupDragStart.fire({
+                  nativeEvent: event,
+                  group: this.group,
+              });
+          }), this.voidContainer.onDrop((event) => {
+              this._onDrop.fire({
+                  event: event.nativeEvent,
+                  index: this.tabs.length,
+              });
+          }), this.voidContainer.onWillShowOverlay((event) => {
+              this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+                  kind: 'header_space',
+                  panel: this.group.activePanel,
+                  api: this.accessor.api,
+                  group: this.group,
+                  getData: getPanelData,
+              }));
+          }), addDisposableListener(this.voidContainer.element, 'mousedown', (event) => {
+              const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
+              if (isFloatingGroupsEnabled &&
+                  event.shiftKey &&
+                  this.group.api.location.type !== 'floating') {
+                  event.preventDefault();
+                  const { top, left } = this.element.getBoundingClientRect();
+                  const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
+                  this.accessor.addFloatingGroup(this.group, {
+                      x: left - rootLeft + 20,
+                      y: top - rootTop + 20,
+                  }, { inDragMode: true });
+              }
+          }), addDisposableListener(this.tabContainer, 'mousedown', (event) => {
+              if (event.defaultPrevented) {
+                  return;
+              }
+              const isLeftClick = event.button === 0;
+              if (isLeftClick) {
+                  this.accessor.doSetGroupActive(this.group);
+              }
+          }));
+      }
+      setActive(_isGroupActive) {
+          // noop
+      }
+      addTab(tab, index = this.tabs.length) {
+          if (index < 0 || index > this.tabs.length) {
+              throw new Error('invalid location');
+          }
+          this.tabContainer.insertBefore(tab.value.element, this.tabContainer.children[index]);
+          this.tabs = [
+              ...this.tabs.slice(0, index),
+              tab,
+              ...this.tabs.slice(index),
+          ];
+          if (this.selectedIndex < 0) {
+              this.selectedIndex = index;
+          }
+      }
+      delete(id) {
+          const index = this.tabs.findIndex((tab) => tab.value.panel.id === id);
+          const tabToRemove = this.tabs.splice(index, 1)[0];
+          const { value, disposable } = tabToRemove;
+          disposable.dispose();
+          value.dispose();
+          value.element.remove();
+      }
+      setActivePanel(panel) {
+          this.tabs.forEach((tab) => {
+              const isActivePanel = panel.id === tab.value.panel.id;
+              tab.value.setActive(isActivePanel);
+          });
+      }
+      openPanel(panel, index = this.tabs.length) {
           var _a;
-          if (!options) {
-              options = {};
+          if (this.tabs.find((tab) => tab.value.panel.id === panel.id)) {
+              return;
           }
-          if (!options.group) {
-              if (!this.activeGroup) {
+          const tab = new Tab(panel, this.accessor, this.group);
+          if (!((_a = panel.view) === null || _a === void 0 ? void 0 : _a.tab)) {
+              throw new Error('invalid header component');
+          }
+          tab.setContent(panel.view.tab);
+          const disposable = new CompositeDisposable(tab.onDragStart((event) => {
+              this._onTabDragStart.fire({ nativeEvent: event, panel });
+          }), tab.onChanged((event) => {
+              const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
+              const isFloatingWithOnePanel = this.group.api.location.type === 'floating' &&
+                  this.size === 1;
+              if (isFloatingGroupsEnabled &&
+                  !isFloatingWithOnePanel &&
+                  event.shiftKey) {
+                  event.preventDefault();
+                  const panel = this.accessor.getGroupPanel(tab.panel.id);
+                  const { top, left } = tab.element.getBoundingClientRect();
+                  const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
+                  this.accessor.addFloatingGroup(panel, {
+                      x: left - rootLeft,
+                      y: top - rootTop,
+                  }, { inDragMode: true });
                   return;
               }
-              options.group = this.activeGroup;
-          }
-          const location = getGridLocation(options.group.element);
-          const next = (_a = this.gridview.next(location)) === null || _a === void 0 ? void 0 : _a.view;
-          this.doSetGroupActive(next);
-      }
-      moveToPrevious(options) {
-          var _a;
-          if (!options) {
-              options = {};
-          }
-          if (!options.group) {
-              if (!this.activeGroup) {
+              const isLeftClick = event.button === 0;
+              if (!isLeftClick || event.defaultPrevented) {
                   return;
               }
-              options.group = this.activeGroup;
-          }
-          const location = getGridLocation(options.group.element);
-          const next = (_a = this.gridview.previous(location)) === null || _a === void 0 ? void 0 : _a.view;
-          this.doSetGroupActive(next);
+              if (this.group.activePanel !== panel) {
+                  this.group.model.openPanel(panel);
+              }
+          }), tab.onDrop((event) => {
+              this._onDrop.fire({
+                  event: event.nativeEvent,
+                  index: this.tabs.findIndex((x) => x.value === tab),
+              });
+          }), tab.onWillShowOverlay((event) => {
+              this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+                  kind: 'tab',
+                  panel: this.group.activePanel,
+                  api: this.accessor.api,
+                  group: this.group,
+                  getData: getPanelData,
+              }));
+          }));
+          const value = { value: tab, disposable };
+          this.addTab(value, index);
       }
-      layout(width, height, forceResize) {
-          const different = forceResize !== null && forceResize !== void 0 ? forceResize : (width !== this.width || height !== this.height);
-          if (!different) {
-              return;
-          }
-          this.gridview.element.style.height = `${height}px`;
-          this.gridview.element.style.width = `${width}px`;
-          this.gridview.layout(width, height);
+      closePanel(panel) {
+          this.delete(panel.id);
       }
       dispose() {
-          this._onDidActiveChange.dispose();
-          this._onDidAdd.dispose();
-          this._onDidRemove.dispose();
-          this._onDidLayoutChange.dispose();
-          for (const group of this.groups) {
-              group.dispose();
-          }
-          this.gridview.dispose();
           super.dispose();
+          for (const { value, disposable } of this.tabs) {
+              disposable.dispose();
+              value.dispose();
+          }
+          this.tabs = [];
       }
   }
 
-  class WillFocusEvent extends DockviewEvent {
-      constructor() {
-          super();
+  class DockviewUnhandledDragOverEvent {
+      get isAccepted() {
+          return this._isAccepted;
+      }
+      constructor(nativeEvent, target, position, getData, group) {
+          this.nativeEvent = nativeEvent;
+          this.target = target;
+          this.position = position;
+          this.getData = getData;
+          this.group = group;
+          this._isAccepted = false;
+      }
+      accept() {
+          this._isAccepted = true;
       }
   }
-  /**
-   * A core api implementation that should be used across all panel-like objects
-   */
-  class PanelApiImpl extends CompositeDisposable {
-      get isFocused() {
-          return this._isFocused;
+  const PROPERTY_KEYS = (() => {
+      /**
+       * by readong the keys from an empty value object TypeScript will error
+       * when we add or remove new properties to `DockviewOptions`
+       */
+      const properties = {
+          disableAutoResizing: undefined,
+          hideBorders: undefined,
+          singleTabMode: undefined,
+          disableFloatingGroups: undefined,
+          floatingGroupBounds: undefined,
+          popoutUrl: undefined,
+          defaultRenderer: undefined,
+          debug: undefined,
+          rootOverlayModel: undefined,
+          locked: undefined,
+          disableDnd: undefined,
+      };
+      return Object.keys(properties);
+  })();
+  function isPanelOptionsWithPanel(data) {
+      if (data.referencePanel) {
+          return true;
       }
-      get isActive() {
-          return this._isActive;
+      return false;
+  }
+  function isPanelOptionsWithGroup(data) {
+      if (data.referenceGroup) {
+          return true;
       }
-      get isVisible() {
-          return this._isVisible;
+      return false;
+  }
+  function isGroupOptionsWithPanel(data) {
+      if (data.referencePanel) {
+          return true;
       }
-      get width() {
-          return this._width;
+      return false;
+  }
+  function isGroupOptionsWithGroup(data) {
+      if (data.referenceGroup) {
+          return true;
       }
-      get height() {
-          return this._height;
+      return false;
+  }
+
+  class DockviewDidDropEvent extends DockviewEvent {
+      get nativeEvent() {
+          return this.options.nativeEvent;
       }
-      constructor(id, component) {
-          super();
-          this.id = id;
-          this.component = component;
-          this._isFocused = false;
-          this._isActive = false;
-          this._isVisible = true;
-          this._width = 0;
-          this._height = 0;
-          this._parameters = {};
-          this.panelUpdatesDisposable = new MutableDisposable();
-          this._onDidDimensionChange = new Emitter();
-          this.onDidDimensionsChange = this._onDidDimensionChange.event;
-          this._onDidChangeFocus = new Emitter();
-          this.onDidFocusChange = this._onDidChangeFocus.event;
-          //
-          this._onWillFocus = new Emitter();
-          this.onWillFocus = this._onWillFocus.event;
-          //
-          this._onDidVisibilityChange = new Emitter();
-          this.onDidVisibilityChange = this._onDidVisibilityChange.event;
-          this._onWillVisibilityChange = new Emitter();
-          this.onWillVisibilityChange = this._onWillVisibilityChange.event;
-          this._onDidActiveChange = new Emitter();
-          this.onDidActiveChange = this._onDidActiveChange.event;
-          this._onActiveChange = new Emitter();
-          this.onActiveChange = this._onActiveChange.event;
-          this._onDidParametersChange = new Emitter();
-          this.onDidParametersChange = this._onDidParametersChange.event;
-          this.addDisposables(this.onDidFocusChange((event) => {
-              this._isFocused = event.isFocused;
-          }), this.onDidActiveChange((event) => {
-              this._isActive = event.isActive;
-          }), this.onDidVisibilityChange((event) => {
-              this._isVisible = event.isVisible;
-          }), this.onDidDimensionsChange((event) => {
-              this._width = event.width;
-              this._height = event.height;
-          }), this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onWillFocus, this._onActiveChange, this._onWillFocus, this._onWillVisibilityChange, this._onDidParametersChange);
+      get position() {
+          return this.options.position;
       }
-      getParameters() {
-          return this._parameters;
+      get panel() {
+          return this.options.panel;
       }
-      initialize(panel) {
-          this.panelUpdatesDisposable.value = this._onDidParametersChange.event((parameters) => {
-              this._parameters = parameters;
-              panel.update({
-                  params: parameters,
-              });
-          });
+      get group() {
+          return this.options.group;
       }
-      setVisible(isVisible) {
-          this._onWillVisibilityChange.fire({ isVisible });
+      get api() {
+          return this.options.api;
       }
-      setActive() {
-          this._onActiveChange.fire();
+      constructor(options) {
+          super();
+          this.options = options;
       }
-      updateParameters(parameters) {
-          this._onDidParametersChange.fire(parameters);
+      getData() {
+          return this.options.getData();
       }
   }
-
-  class SplitviewPanelApiImpl extends PanelApiImpl {
-      //
-      constructor(id, component) {
-          super(id, component);
-          this._onDidConstraintsChangeInternal = new Emitter();
-          this.onDidConstraintsChangeInternal = this._onDidConstraintsChangeInternal.event;
-          //
-          this._onDidConstraintsChange = new Emitter({
-              replay: true,
-          });
-          this.onDidConstraintsChange = this._onDidConstraintsChange.event;
-          //
-          this._onDidSizeChange = new Emitter();
-          this.onDidSizeChange = this._onDidSizeChange.event;
-          this.addDisposables(this._onDidConstraintsChangeInternal, this._onDidConstraintsChange, this._onDidSizeChange);
-      }
-      setConstraints(value) {
-          this._onDidConstraintsChangeInternal.fire(value);
+  class DockviewWillDropEvent extends DockviewDidDropEvent {
+      get kind() {
+          return this._kind;
       }
-      setSize(event) {
-          this._onDidSizeChange.fire(event);
+      constructor(options) {
+          super(options);
+          this._kind = options.kind;
       }
   }
-
-  class PaneviewPanelApiImpl extends SplitviewPanelApiImpl {
-      set pane(pane) {
-          this._pane = pane;
+  class WillShowOverlayLocationEvent {
+      get kind() {
+          return this.options.kind;
       }
-      constructor(id, component) {
-          super(id, component);
-          this._onDidExpansionChange = new Emitter({
-              replay: true,
-          });
-          this.onDidExpansionChange = this._onDidExpansionChange.event;
-          this._onMouseEnter = new Emitter({});
-          this.onMouseEnter = this._onMouseEnter.event;
-          this._onMouseLeave = new Emitter({});
-          this.onMouseLeave = this._onMouseLeave.event;
-          this.addDisposables(this._onDidExpansionChange, this._onMouseEnter, this._onMouseLeave);
+      get nativeEvent() {
+          return this.event.nativeEvent;
       }
-      setExpanded(isExpanded) {
-          var _a;
-          (_a = this._pane) === null || _a === void 0 ? void 0 : _a.setExpanded(isExpanded);
+      get position() {
+          return this.event.position;
       }
-      get isExpanded() {
-          var _a;
-          return !!((_a = this._pane) === null || _a === void 0 ? void 0 : _a.isExpanded());
+      get defaultPrevented() {
+          return this.event.defaultPrevented;
+      }
+      get panel() {
+          return this.options.panel;
+      }
+      get api() {
+          return this.options.api;
+      }
+      get group() {
+          return this.options.group;
+      }
+      preventDefault() {
+          this.event.preventDefault();
+      }
+      getData() {
+          return this.options.getData();
+      }
+      constructor(event, options) {
+          this.event = event;
+          this.options = options;
       }
   }
-
-  class BasePanelView extends CompositeDisposable {
+  class DockviewGroupPanelModel extends CompositeDisposable {
       get element() {
-          return this._element;
+          throw new Error('not supported');
       }
-      get width() {
-          return this._width;
+      get activePanel() {
+          return this._activePanel;
       }
-      get height() {
-          return this._height;
+      get locked() {
+          return this._locked;
       }
-      get params() {
-          var _a;
-          return (_a = this._params) === null || _a === void 0 ? void 0 : _a.params;
+      set locked(value) {
+          this._locked = value;
+          toggleClass(this.container, 'locked-groupview', value === 'no-drop-target' || value);
       }
-      constructor(id, component, api) {
-          super();
-          this.id = id;
-          this.component = component;
-          this.api = api;
-          this._height = 0;
-          this._width = 0;
-          this._element = document.createElement('div');
-          this._element.tabIndex = -1;
-          this._element.style.outline = 'none';
-          this._element.style.height = '100%';
-          this._element.style.width = '100%';
-          this._element.style.overflow = 'hidden';
-          const focusTracker = trackFocus(this._element);
-          this.addDisposables(this.api, focusTracker.onDidFocus(() => {
-              this.api._onDidChangeFocus.fire({ isFocused: true });
-          }), focusTracker.onDidBlur(() => {
-              this.api._onDidChangeFocus.fire({ isFocused: false });
-          }), focusTracker);
+      get isActive() {
+          return this._isGroupActive;
       }
-      focus() {
-          const event = new WillFocusEvent();
-          this.api._onWillFocus.fire(event);
-          if (event.defaultPrevented) {
-              return;
-          }
-          this._element.focus();
+      get panels() {
+          return this._panels;
       }
-      layout(width, height) {
-          this._width = width;
-          this._height = height;
-          this.api._onDidDimensionChange.fire({ width, height });
-          if (this.part) {
-              if (this._params) {
-                  this.part.update(this._params.params);
-              }
-          }
+      get size() {
+          return this._panels.length;
       }
-      init(parameters) {
-          this._params = parameters;
-          this.part = this.getComponent();
+      get isEmpty() {
+          return this._panels.length === 0;
       }
-      update(event) {
-          var _a, _b;
-          // merge the new parameters with the existing parameters
-          this._params = Object.assign(Object.assign({}, this._params), { params: Object.assign(Object.assign({}, (_a = this._params) === null || _a === void 0 ? void 0 : _a.params), event.params) });
-          /**
-           * delete new keys that have a value of undefined,
-           * allow values of null
-           */
-          for (const key of Object.keys(event.params)) {
-              if (event.params[key] === undefined) {
-                  delete this._params.params[key];
-              }
+      get hasWatermark() {
+          return !!(this.watermark && this.container.contains(this.watermark.element));
+      }
+      get header() {
+          return this.tabsContainer;
+      }
+      get isContentFocused() {
+          if (!document.activeElement) {
+              return false;
           }
-          // update the view with the updated props
-          (_b = this.part) === null || _b === void 0 ? void 0 : _b.update({ params: this._params.params });
+          return isAncestor(document.activeElement, this.contentContainer.element);
       }
-      toJSON() {
-          var _a, _b;
-          const params = (_b = (_a = this._params) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {};
-          return {
-              id: this.id,
-              component: this.component,
-              params: Object.keys(params).length > 0 ? params : undefined,
-          };
+      get location() {
+          return this._location;
       }
-      dispose() {
+      set location(value) {
+          this._location = value;
+          toggleClass(this.container, 'dv-groupview-floating', false);
+          toggleClass(this.container, 'dv-groupview-popout', false);
+          switch (value.type) {
+              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) {
           var _a;
-          this.api.dispose();
-          (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
-          super.dispose();
+          super();
+          this.container = container;
+          this.accessor = accessor;
+          this.id = id;
+          this.options = options;
+          this.groupPanel = groupPanel;
+          this._isGroupActive = false;
+          this._locked = false;
+          this._location = { type: 'grid' };
+          this.mostRecentlyUsed = [];
+          this._onDidChange = new Emitter();
+          this.onDidChange = this._onDidChange.event;
+          this._width = 0;
+          this._height = 0;
+          this._panels = [];
+          this._panelDisposables = new Map();
+          this._onMove = new Emitter();
+          this.onMove = this._onMove.event;
+          this._onDidDrop = new Emitter();
+          this.onDidDrop = this._onDidDrop.event;
+          this._onWillDrop = new Emitter();
+          this.onWillDrop = this._onWillDrop.event;
+          this._onWillShowOverlay = new Emitter();
+          this.onWillShowOverlay = this._onWillShowOverlay.event;
+          this._onTabDragStart = new Emitter();
+          this.onTabDragStart = this._onTabDragStart.event;
+          this._onGroupDragStart = new Emitter();
+          this.onGroupDragStart = this._onGroupDragStart.event;
+          this._onDidAddPanel = new Emitter();
+          this.onDidAddPanel = this._onDidAddPanel.event;
+          this._onDidPanelTitleChange = new Emitter();
+          this.onDidPanelTitleChange = this._onDidPanelTitleChange.event;
+          this._onDidPanelParametersChange = new Emitter();
+          this.onDidPanelParametersChange = this._onDidPanelParametersChange.event;
+          this._onDidRemovePanel = new Emitter();
+          this.onDidRemovePanel = this._onDidRemovePanel.event;
+          this._onDidActivePanelChange = new Emitter();
+          this.onDidActivePanelChange = this._onDidActivePanelChange.event;
+          this._onUnhandledDragOverEvent = new Emitter();
+          this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
+          this._overwriteRenderContainer = null;
+          toggleClass(this.container, 'groupview', true);
+          this._api = new DockviewApi(this.accessor);
+          this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
+          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;
+          this.addDisposables(this._onTabDragStart, this._onGroupDragStart, this._onWillShowOverlay, this.tabsContainer.onTabDragStart((event) => {
+              this._onTabDragStart.fire(event);
+          }), this.tabsContainer.onGroupDragStart((event) => {
+              this._onGroupDragStart.fire(event);
+          }), this.tabsContainer.onDrop((event) => {
+              this.handleDropEvent('header', event.event, 'center', event.index);
+          }), this.contentContainer.onDidFocus(() => {
+              this.accessor.doSetGroupActive(this.groupPanel);
+          }), this.contentContainer.onDidBlur(() => {
+              // noop
+          }), this.contentContainer.dropTarget.onDrop((event) => {
+              this.handleDropEvent('content', event.nativeEvent, event.position);
+          }), this.tabsContainer.onWillShowOverlay((event) => {
+              this._onWillShowOverlay.fire(event);
+          }), this.contentContainer.dropTarget.onWillShowOverlay((event) => {
+              this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+                  kind: 'content',
+                  panel: this.activePanel,
+                  api: this._api,
+                  group: this.groupPanel,
+                  getData: getPanelData,
+              }));
+          }), this._onMove, this._onDidChange, this._onDidDrop, this._onWillDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange, this._onUnhandledDragOverEvent);
       }
-  }
-
-  class PaneviewPanel extends BasePanelView {
-      set orientation(value) {
-          this._orientation = value;
+      focusContent() {
+          this.contentContainer.element.focus();
       }
-      get orientation() {
-          return this._orientation;
+      set renderContainer(value) {
+          this.panels.forEach((panel) => {
+              this.renderContainer.detatch(panel);
+          });
+          this._overwriteRenderContainer = value;
+          this.panels.forEach((panel) => {
+              this.rerender(panel);
+          });
+      }
+      get renderContainer() {
+          var _a;
+          return ((_a = this._overwriteRenderContainer) !== null && _a !== void 0 ? _a : this.accessor.overlayRenderContainer);
+      }
+      initialize() {
+          if (this.options.panels) {
+              this.options.panels.forEach((panel) => {
+                  this.doAddPanel(panel);
+              });
+          }
+          if (this.options.activePanel) {
+              this.openPanel(this.options.activePanel);
+          }
+          // must be run after the constructor otherwise this.parent may not be
+          // correctly initialized
+          this.setActive(this.isActive, true);
+          this.updateContainer();
+          if (this.accessor.options.createRightHeaderActionComponent) {
+              this._rightHeaderActions =
+                  this.accessor.options.createRightHeaderActionComponent(this.groupPanel);
+              this.addDisposables(this._rightHeaderActions);
+              this._rightHeaderActions.init({
+                  containerApi: this._api,
+                  api: this.groupPanel.api,
+                  group: this.groupPanel,
+              });
+              this.tabsContainer.setRightActionsElement(this._rightHeaderActions.element);
+          }
+          if (this.accessor.options.createLeftHeaderActionComponent) {
+              this._leftHeaderActions =
+                  this.accessor.options.createLeftHeaderActionComponent(this.groupPanel);
+              this.addDisposables(this._leftHeaderActions);
+              this._leftHeaderActions.init({
+                  containerApi: this._api,
+                  api: this.groupPanel.api,
+                  group: this.groupPanel,
+              });
+              this.tabsContainer.setLeftActionsElement(this._leftHeaderActions.element);
+          }
+          if (this.accessor.options.createPrefixHeaderActionComponent) {
+              this._prefixHeaderActions =
+                  this.accessor.options.createPrefixHeaderActionComponent(this.groupPanel);
+              this.addDisposables(this._prefixHeaderActions);
+              this._prefixHeaderActions.init({
+                  containerApi: this._api,
+                  api: this.groupPanel.api,
+                  group: this.groupPanel,
+              });
+              this.tabsContainer.setPrefixActionsElement(this._prefixHeaderActions.element);
+          }
       }
-      get minimumSize() {
-          const headerSize = this.headerSize;
-          const expanded = this.isExpanded();
-          const minimumBodySize = expanded ? this._minimumBodySize : 0;
-          return headerSize + minimumBodySize;
+      rerender(panel) {
+          this.contentContainer.renderPanel(panel, { asActive: false });
       }
-      get maximumSize() {
-          const headerSize = this.headerSize;
-          const expanded = this.isExpanded();
-          const maximumBodySize = expanded ? this._maximumBodySize : 0;
-          return headerSize + maximumBodySize;
+      indexOf(panel) {
+          return this.tabsContainer.indexOf(panel.id);
       }
-      get size() {
-          return this._size;
+      toJSON() {
+          var _a;
+          const result = {
+              views: this.tabsContainer.panels,
+              activeView: (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.id,
+              id: this.id,
+          };
+          if (this.locked !== false) {
+              result.locked = this.locked;
+          }
+          if (this.header.hidden) {
+              result.hideHeader = true;
+          }
+          return result;
       }
-      get orthogonalSize() {
-          return this._orthogonalSize;
+      moveToNext(options) {
+          if (!options) {
+              options = {};
+          }
+          if (!options.panel) {
+              options.panel = this.activePanel;
+          }
+          const index = options.panel ? this.panels.indexOf(options.panel) : -1;
+          let normalizedIndex;
+          if (index < this.panels.length - 1) {
+              normalizedIndex = index + 1;
+          }
+          else if (!options.suppressRoll) {
+              normalizedIndex = 0;
+          }
+          else {
+              return;
+          }
+          this.openPanel(this.panels[normalizedIndex]);
       }
-      set orthogonalSize(size) {
-          this._orthogonalSize = size;
+      moveToPrevious(options) {
+          if (!options) {
+              options = {};
+          }
+          if (!options.panel) {
+              options.panel = this.activePanel;
+          }
+          if (!options.panel) {
+              return;
+          }
+          const index = this.panels.indexOf(options.panel);
+          let normalizedIndex;
+          if (index > 0) {
+              normalizedIndex = index - 1;
+          }
+          else if (!options.suppressRoll) {
+              normalizedIndex = this.panels.length - 1;
+          }
+          else {
+              return;
+          }
+          this.openPanel(this.panels[normalizedIndex]);
       }
-      get minimumBodySize() {
-          return this._minimumBodySize;
+      containsPanel(panel) {
+          return this.panels.includes(panel);
       }
-      set minimumBodySize(value) {
-          this._minimumBodySize = typeof value === 'number' ? value : 0;
+      init(_params) {
+          //noop
       }
-      get maximumBodySize() {
-          return this._maximumBodySize;
+      update(_params) {
+          //noop
       }
-      set maximumBodySize(value) {
-          this._maximumBodySize =
-              typeof value === 'number' ? value : Number.POSITIVE_INFINITY;
+      focus() {
+          var _a;
+          (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus();
       }
-      get headerVisible() {
-          return this._headerVisible;
+      openPanel(panel, options = {}) {
+          /**
+           * set the panel group
+           * add the panel
+           * check if group active
+           * check if panel active
+           */
+          if (typeof options.index !== 'number' ||
+              options.index > this.panels.length) {
+              options.index = this.panels.length;
+          }
+          const skipSetActive = !!options.skipSetActive;
+          // ensure the group is updated before we fire any events
+          panel.updateParentGroup(this.groupPanel, {
+              skipSetActive: options.skipSetActive,
+          });
+          this.doAddPanel(panel, options.index, {
+              skipSetActive: skipSetActive,
+          });
+          if (this._activePanel === panel) {
+              this.contentContainer.renderPanel(panel, { asActive: true });
+              return;
+          }
+          if (!skipSetActive) {
+              this.doSetActivePanel(panel);
+          }
+          if (!options.skipSetGroupActive) {
+              this.accessor.doSetGroupActive(this.groupPanel);
+          }
+          if (!options.skipSetActive) {
+              this.updateContainer();
+          }
       }
-      set headerVisible(value) {
-          this._headerVisible = value;
-          this.header.style.display = value ? '' : 'none';
+      removePanel(groupItemOrId, options = {
+          skipSetActive: false,
+      }) {
+          const id = typeof groupItemOrId === 'string'
+              ? groupItemOrId
+              : groupItemOrId.id;
+          const panelToRemove = this._panels.find((panel) => panel.id === id);
+          if (!panelToRemove) {
+              throw new Error('invalid operation');
+          }
+          return this._removePanel(panelToRemove, options);
       }
-      constructor(id, component, headerComponent, orientation, isExpanded, isHeaderVisible) {
-          super(id, component, new PaneviewPanelApiImpl(id, component));
-          this.headerComponent = headerComponent;
-          this._onDidChangeExpansionState = new Emitter({ replay: true });
-          this.onDidChangeExpansionState = this._onDidChangeExpansionState.event;
-          this._onDidChange = new Emitter();
-          this.onDidChange = this._onDidChange.event;
-          this.headerSize = 22;
-          this._orthogonalSize = 0;
-          this._size = 0;
-          this._minimumBodySize = 100;
-          this._maximumBodySize = Number.POSITIVE_INFINITY;
-          this._isExpanded = false;
-          this.expandedSize = 0;
-          this.api.pane = this; // TODO cannot use 'this' before 'super'
-          this.api.initialize(this);
-          this._isExpanded = isExpanded;
-          this._headerVisible = isHeaderVisible;
-          this._onDidChangeExpansionState.fire(this.isExpanded()); // initialize value
-          this._orientation = orientation;
-          this.element.classList.add('pane');
-          this.addDisposables(this.api.onWillVisibilityChange((event) => {
-              const { isVisible } = event;
-              const { accessor } = this._params;
-              accessor.setVisible(this, isVisible);
-          }), this.api.onDidSizeChange((event) => {
-              this._onDidChange.fire({ size: event.size });
-          }), addDisposableListener(this.element, 'mouseenter', (ev) => {
-              this.api._onMouseEnter.fire(ev);
-          }), addDisposableListener(this.element, 'mouseleave', (ev) => {
-              this.api._onMouseLeave.fire(ev);
-          }));
-          this.addDisposables(this._onDidChangeExpansionState, this.onDidChangeExpansionState((isPanelExpanded) => {
-              this.api._onDidExpansionChange.fire({
-                  isExpanded: isPanelExpanded,
-              });
-          }), this.api.onDidFocusChange((e) => {
-              if (!this.header) {
-                  return;
-              }
-              if (e.isFocused) {
-                  addClasses(this.header, 'focused');
-              }
-              else {
-                  removeClasses(this.header, 'focused');
+      closeAllPanels() {
+          if (this.panels.length > 0) {
+              // take a copy since we will be edting the array as we iterate through
+              const arrPanelCpy = [...this.panels];
+              for (const panel of arrPanelCpy) {
+                  this.doClose(panel);
               }
-          }));
-          this.renderOnce();
+          }
+          else {
+              this.accessor.removeGroup(this.groupPanel);
+          }
       }
-      setVisible(isVisible) {
-          this.api._onDidVisibilityChange.fire({ isVisible });
+      closePanel(panel) {
+          this.doClose(panel);
       }
-      setActive(isActive) {
-          this.api._onDidActiveChange.fire({ isActive });
+      doClose(panel) {
+          this.accessor.removePanel(panel);
       }
-      isExpanded() {
-          return this._isExpanded;
+      isPanelActive(panel) {
+          return this._activePanel === panel;
       }
-      setExpanded(expanded) {
-          if (this._isExpanded === expanded) {
+      updateActions(element) {
+          this.tabsContainer.setRightActionsElement(element);
+      }
+      setActive(isGroupActive, force = false) {
+          if (!force && this.isActive === isGroupActive) {
               return;
           }
-          this._isExpanded = expanded;
-          if (expanded) {
-              if (this.animationTimer) {
-                  clearTimeout(this.animationTimer);
-              }
-              if (this.body) {
-                  this.element.appendChild(this.body);
-              }
+          this._isGroupActive = isGroupActive;
+          toggleClass(this.container, 'active-group', isGroupActive);
+          toggleClass(this.container, 'inactive-group', !isGroupActive);
+          this.tabsContainer.setActive(this.isActive);
+          if (!this._activePanel && this.panels.length > 0) {
+              this.doSetActivePanel(this.panels[0]);
           }
-          else {
-              this.animationTimer = setTimeout(() => {
-                  var _a;
-                  (_a = this.body) === null || _a === void 0 ? void 0 : _a.remove();
-              }, 200);
+          this.updateContainer();
+      }
+      layout(width, height) {
+          var _a;
+          this._width = width;
+          this._height = height;
+          this.contentContainer.layout(this._width, this._height);
+          if ((_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.layout) {
+              this._activePanel.layout(this._width, this._height);
           }
-          this._onDidChange.fire(expanded ? { size: this.width } : {});
-          this._onDidChangeExpansionState.fire(expanded);
       }
-      layout(size, orthogonalSize) {
-          this._size = size;
-          this._orthogonalSize = orthogonalSize;
-          const [width, height] = this.orientation === exports.Orientation.HORIZONTAL
-              ? [size, orthogonalSize]
-              : [orthogonalSize, size];
-          if (this.isExpanded()) {
-              this.expandedSize = width;
+      _removePanel(panel, options) {
+          const isActivePanel = this._activePanel === panel;
+          this.doRemovePanel(panel);
+          if (isActivePanel && this.panels.length > 0) {
+              const nextPanel = this.mostRecentlyUsed[0];
+              this.openPanel(nextPanel, {
+                  skipSetActive: options.skipSetActive,
+                  skipSetGroupActive: options.skipSetActiveGroup,
+              });
           }
-          super.layout(width, height);
+          if (this._activePanel && this.panels.length === 0) {
+              this.doSetActivePanel(undefined);
+          }
+          if (!options.skipSetActive) {
+              this.updateContainer();
+          }
+          return panel;
       }
-      init(parameters) {
-          var _a, _b;
-          super.init(parameters);
-          if (typeof parameters.minimumBodySize === 'number') {
-              this.minimumBodySize = parameters.minimumBodySize;
+      doRemovePanel(panel) {
+          const index = this.panels.indexOf(panel);
+          if (this._activePanel === panel) {
+              this.contentContainer.closePanel();
           }
-          if (typeof parameters.maximumBodySize === 'number') {
-              this.maximumBodySize = parameters.maximumBodySize;
+          this.tabsContainer.delete(panel.id);
+          this._panels.splice(index, 1);
+          if (this.mostRecentlyUsed.includes(panel)) {
+              const index = this.mostRecentlyUsed.indexOf(panel);
+              this.mostRecentlyUsed.splice(index, 1);
           }
-          this.bodyPart = this.getBodyComponent();
-          this.headerPart = this.getHeaderComponent();
-          this.bodyPart.init(Object.assign(Object.assign({}, parameters), { api: this.api }));
-          this.headerPart.init(Object.assign(Object.assign({}, parameters), { api: this.api }));
-          (_a = this.body) === null || _a === void 0 ? void 0 : _a.append(this.bodyPart.element);
-          (_b = this.header) === null || _b === void 0 ? void 0 : _b.append(this.headerPart.element);
-          if (typeof parameters.isExpanded === 'boolean') {
-              this.setExpanded(parameters.isExpanded);
+          const disposable = this._panelDisposables.get(panel.id);
+          if (disposable) {
+              disposable.dispose();
+              this._panelDisposables.delete(panel.id);
           }
+          this._onDidRemovePanel.fire({ panel });
       }
-      toJSON() {
-          const params = this._params;
-          return Object.assign(Object.assign({}, super.toJSON()), { headerComponent: this.headerComponent, title: params.title });
+      doAddPanel(panel, index = this.panels.length, options = { skipSetActive: false }) {
+          const existingPanel = this._panels.indexOf(panel);
+          const hasExistingPanel = existingPanel > -1;
+          this.tabsContainer.show();
+          this.contentContainer.show();
+          this.tabsContainer.openPanel(panel, index);
+          if (!options.skipSetActive) {
+              this.contentContainer.openPanel(panel);
+          }
+          if (hasExistingPanel) {
+              // TODO - need to ensure ordering hasn't changed and if it has need to re-order this.panels
+              return;
+          }
+          this.updateMru(panel);
+          this.panels.splice(index, 0, panel);
+          this._panelDisposables.set(panel.id, new CompositeDisposable(panel.api.onDidTitleChange((event) => this._onDidPanelTitleChange.fire(event)), panel.api.onDidParametersChange((event) => this._onDidPanelParametersChange.fire(event))));
+          this._onDidAddPanel.fire({ panel });
       }
-      renderOnce() {
-          this.header = document.createElement('div');
-          this.header.tabIndex = 0;
-          this.header.className = 'pane-header';
-          this.header.style.height = `${this.headerSize}px`;
-          this.header.style.lineHeight = `${this.headerSize}px`;
-          this.header.style.minHeight = `${this.headerSize}px`;
-          this.header.style.maxHeight = `${this.headerSize}px`;
-          this.element.appendChild(this.header);
-          this.body = document.createElement('div');
-          this.body.className = 'pane-body';
-          this.element.appendChild(this.body);
+      doSetActivePanel(panel) {
+          if (this._activePanel === panel) {
+              return;
+          }
+          this._activePanel = panel;
+          if (panel) {
+              this.tabsContainer.setActivePanel(panel);
+              panel.layout(this._width, this._height);
+              this.updateMru(panel);
+              this._onDidActivePanelChange.fire({
+                  panel,
+              });
+          }
       }
-      // TODO slightly hacky by-pass of the component to create a body and header component
-      getComponent() {
-          return {
-              update: (params) => {
-                  var _a, _b;
-                  (_a = this.bodyPart) === null || _a === void 0 ? void 0 : _a.update({ params });
-                  (_b = this.headerPart) === null || _b === void 0 ? void 0 : _b.update({ params });
-              },
-              dispose: () => {
-                  var _a, _b;
-                  (_a = this.bodyPart) === null || _a === void 0 ? void 0 : _a.dispose();
-                  (_b = this.headerPart) === null || _b === void 0 ? void 0 : _b.dispose();
-              },
-          };
+      updateMru(panel) {
+          if (this.mostRecentlyUsed.includes(panel)) {
+              this.mostRecentlyUsed.splice(this.mostRecentlyUsed.indexOf(panel), 1);
+          }
+          this.mostRecentlyUsed = [panel, ...this.mostRecentlyUsed];
       }
-  }
-
-  class DraggablePaneviewPanel extends PaneviewPanel {
-      constructor(accessor, id, component, headerComponent, orientation, isExpanded, disableDnd) {
-          super(id, component, headerComponent, orientation, isExpanded, true);
-          this.accessor = accessor;
-          this._onDidDrop = new Emitter();
-          this.onDidDrop = this._onDidDrop.event;
-          if (!disableDnd) {
-              this.initDragFeatures();
+      updateContainer() {
+          var _a, _b;
+          toggleClass(this.container, 'empty', this.isEmpty);
+          this.panels.forEach((panel) => panel.runEvents());
+          if (this.isEmpty && !this.watermark) {
+              const watermark = this.accessor.createWatermarkComponent();
+              watermark.init({
+                  containerApi: this._api,
+                  group: this.groupPanel,
+              });
+              this.watermark = watermark;
+              addDisposableListener(this.watermark.element, 'click', () => {
+                  if (!this.isActive) {
+                      this.accessor.doSetGroupActive(this.groupPanel);
+                  }
+              });
+              this.tabsContainer.hide();
+              this.contentContainer.element.appendChild(this.watermark.element);
+              this.watermark.updateParentGroup(this.groupPanel, true);
+          }
+          if (!this.isEmpty && this.watermark) {
+              this.watermark.element.remove();
+              (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
+              this.watermark = undefined;
+              this.tabsContainer.show();
           }
       }
-      initDragFeatures() {
-          if (!this.header) {
+      canDisplayOverlay(event, position, target) {
+          const firedEvent = new DockviewUnhandledDragOverEvent(event, target, position, getPanelData, this.accessor.getPanel(this.id));
+          this._onUnhandledDragOverEvent.fire(firedEvent);
+          return firedEvent.isAccepted;
+      }
+      handleDropEvent(type, event, position, index) {
+          if (this.locked === 'no-drop-target') {
               return;
           }
-          const id = this.id;
-          const accessorId = this.accessor.id;
-          this.header.draggable = true;
-          this.handler = new (class PaneDragHandler extends DragHandler {
-              getData() {
-                  LocalSelectionTransfer.getInstance().setData([new PaneTransfer(accessorId, id)], PaneTransfer.prototype);
-                  return {
-                      dispose: () => {
-                          LocalSelectionTransfer.getInstance().clearData(PaneTransfer.prototype);
-                      },
-                  };
+          function getKind() {
+              switch (type) {
+                  case 'header':
+                      return typeof index === 'number' ? 'tab' : 'header_space';
+                  case 'content':
+                      return 'content';
               }
-          })(this.header);
-          this.target = new Droptarget(this.element, {
-              acceptedTargetZones: ['top', 'bottom'],
-              overlayModel: {
-                  activationSize: { type: 'percentage', value: 50 },
-              },
-              canDisplayOverlay: (event) => {
-                  const data = getPaneData();
-                  if (data) {
-                      if (data.paneId !== this.id &&
-                          data.viewId === this.accessor.id) {
-                          return true;
-                      }
-                  }
-                  if (this.accessor.options.showDndOverlay) {
-                      return this.accessor.options.showDndOverlay({
-                          nativeEvent: event,
-                          getData: getPaneData,
-                          panel: this,
-                      });
-                  }
-                  return false;
-              },
+          }
+          const panel = typeof index === 'number' ? this.panels[index] : undefined;
+          const willDropEvent = new DockviewWillDropEvent({
+              nativeEvent: event,
+              position,
+              panel,
+              getData: () => getPanelData(),
+              kind: getKind(),
+              group: this.groupPanel,
+              api: this._api,
           });
-          this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop((event) => {
-              this.onDrop(event);
-          }));
-      }
-      onDrop(event) {
-          const data = getPaneData();
-          if (!data || data.viewId !== this.accessor.id) {
-              // if there is no local drag event for this panel
-              // or if the drag event was creating by another Paneview instance
-              this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, api: new PaneviewApi(this.accessor), getData: getPaneData }));
+          this._onWillDrop.fire(willDropEvent);
+          if (willDropEvent.defaultPrevented) {
               return;
           }
-          const containerApi = this._params
-              .containerApi;
-          const panelId = data.paneId;
-          const existingPanel = containerApi.getPanel(panelId);
-          if (!existingPanel) {
-              // if the panel doesn't exist
-              this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: getPaneData, api: new PaneviewApi(this.accessor) }));
-              return;
+          const data = getPanelData();
+          if (data && data.viewId === this.accessor.id) {
+              if (data.panelId === null) {
+                  // this is a group move dnd event
+                  const { groupId } = data;
+                  this._onMove.fire({
+                      target: position,
+                      groupId: groupId,
+                      index,
+                  });
+                  return;
+              }
+              const fromSameGroup = this.tabsContainer.indexOf(data.panelId) !== -1;
+              if (fromSameGroup && this.tabsContainer.size === 1) {
+                  return;
+              }
+              const { groupId, panelId } = data;
+              const isSameGroup = this.id === groupId;
+              if (isSameGroup && !position) {
+                  const oldIndex = this.tabsContainer.indexOf(panelId);
+                  if (oldIndex === index) {
+                      return;
+                  }
+              }
+              this._onMove.fire({
+                  target: position,
+                  groupId: data.groupId,
+                  itemId: data.panelId,
+                  index,
+              });
           }
-          const allPanels = containerApi.panels;
-          const fromIndex = allPanels.indexOf(existingPanel);
-          let toIndex = containerApi.panels.indexOf(this);
-          if (event.position === 'left' || event.position === 'top') {
-              toIndex = Math.max(0, toIndex - 1);
+          else {
+              this._onDidDrop.fire(new DockviewDidDropEvent({
+                  nativeEvent: event,
+                  position,
+                  panel,
+                  getData: () => getPanelData(),
+                  group: this.groupPanel,
+                  api: this._api,
+              }));
           }
-          if (event.position === 'right' || event.position === 'bottom') {
-              if (fromIndex > toIndex) {
-                  toIndex++;
-              }
-              toIndex = Math.min(allPanels.length - 1, toIndex);
+      }
+      dispose() {
+          var _a, _b, _c;
+          super.dispose();
+          (_a = this.watermark) === null || _a === void 0 ? void 0 : _a.element.remove();
+          (_c = (_b = this.watermark) === null || _b === void 0 ? void 0 : _b.dispose) === null || _c === void 0 ? void 0 : _c.call(_b);
+          this.watermark = undefined;
+          for (const panel of this.panels) {
+              panel.dispose();
           }
-          containerApi.movePanel(fromIndex, toIndex);
+          this.tabsContainer.dispose();
+          this.contentContainer.dispose();
       }
   }
 
@@ -5685,9 +5759,12 @@
       constructor(id, accessor) {
           super(id, '__dockviewgroup__');
           this.accessor = accessor;
+          this._mutableDisposable = new MutableDisposable();
           this._onDidLocationChange = new Emitter();
           this.onDidLocationChange = this._onDidLocationChange.event;
-          this.addDisposables(this._onDidLocationChange);
+          this._onDidActivePanelChange = new Emitter();
+          this.onDidActivePanelChange = this._onDidActivePanelChange.event;
+          this.addDisposables(this._onDidLocationChange, this._onDidActivePanelChange, this._mutableDisposable);
       }
       close() {
           if (!this._group) {
@@ -5745,6 +5822,19 @@
       }
       initialize(group) {
           this._group = group;
+          /**
+           * TODO: Annoying initialization order caveat
+           *
+           * Due to the order on initialization we know that the model isn't defined until later in the same stack-frame of setup.
+           * By queuing a microtask we can ensure the setup is completed within the same stack-frame, but after everything else has
+           * finished ensuring the `model` is defined.
+           */
+          queueMicrotask(() => {
+              this._mutableDisposable.value =
+                  this._group.model.onDidActivePanelChange((event) => {
+                      this._onDidActivePanelChange.fire(event);
+                  });
+          });
       }
   }
 
@@ -5805,31 +5895,6 @@
       }
   }
 
-  function isPanelOptionsWithPanel(data) {
-      if (data.referencePanel) {
-          return true;
-      }
-      return false;
-  }
-  function isPanelOptionsWithGroup(data) {
-      if (data.referenceGroup) {
-          return true;
-      }
-      return false;
-  }
-  function isGroupOptionsWithPanel(data) {
-      if (data.referencePanel) {
-          return true;
-      }
-      return false;
-  }
-  function isGroupOptionsWithGroup(data) {
-      if (data.referenceGroup) {
-          return true;
-      }
-      return false;
-  }
-
   class DockviewPanelApiImpl extends GridviewPanelApiImpl {
       get location() {
           return this.group.api.location;
@@ -6197,7 +6262,7 @@
           this._tab = this.createTabComponent(this.id, tabComponent);
       }
       init(params) {
-          this.content.init(Object.assign(Object.assign({}, params), { tab: this.tab }));
+          this.content.init(params);
           this.tab.init(params);
       }
       updateParentGroup(_group, _isPanelVisible) {
@@ -6218,20 +6283,29 @@
           (_d = (_c = this.tab).dispose) === null || _d === void 0 ? void 0 : _d.call(_c);
       }
       createContentComponent(id, componentName) {
-          var _a, _b;
-          return createComponent(id, componentName, (_a = this.accessor.options.components) !== null && _a !== void 0 ? _a : {}, this.accessor.options.frameworkComponents, (_b = this.accessor.options.frameworkComponentFactory) === null || _b === void 0 ? void 0 : _b.content);
+          return this.accessor.options.createComponent({
+              id,
+              name: componentName,
+          });
       }
       createTabComponent(id, componentName) {
-          var _a, _b;
-          if (componentName) {
-              return createComponent(id, componentName, this.accessor.options.tabComponents, this.accessor.options.frameworkTabComponents, (_a = this.accessor.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.tab, () => new DefaultTab());
-          }
-          else if (this.accessor.options.defaultTabComponent) {
-              return createComponent(id, this.accessor.options.defaultTabComponent, this.accessor.options.tabComponents, this.accessor.options.frameworkTabComponents, (_b = this.accessor.options.frameworkComponentFactory) === null || _b === void 0 ? void 0 : _b.tab, () => new DefaultTab());
-          }
-          else {
-              return new DefaultTab();
+          const name = componentName !== null && componentName !== void 0 ? componentName : this.accessor.options.defaultTabComponent;
+          if (name) {
+              if (this.accessor.options.createTabComponent) {
+                  const component = this.accessor.options.createTabComponent({
+                      id,
+                      name,
+                  });
+                  if (component) {
+                      return component;
+                  }
+                  else {
+                      return new DefaultTab();
+                  }
+              }
+              console.warn(`dockview: tabComponent '${componentName}' was not found. falling back to the default tab.`);
           }
+          return new DefaultTab();
       }
   }
 
@@ -6962,14 +7036,19 @@
       }
       get renderer() {
           var _a;
-          return (_a = this.options.defaultRenderer) !== null && _a !== void 0 ? _a : 'onlyWhenVisibile';
+          return (_a = this.options.defaultRenderer) !== null && _a !== void 0 ? _a : 'onlyWhenVisible';
+      }
+      get api() {
+          return this._api;
       }
       constructor(options) {
-          var _a, _b;
+          var _a;
           super({
               proportionalLayout: true,
-              orientation: (_a = options.orientation) !== null && _a !== void 0 ? _a : exports.Orientation.HORIZONTAL,
-              styles: options.styles,
+              orientation: exports.Orientation.HORIZONTAL,
+              styles: options.hideBorders
+                  ? { separatorBorder: 'transparent' }
+                  : undefined,
               parentElement: options.parentElement,
               disableAutoResizing: options.disableAutoResizing,
               locked: options.locked,
@@ -6987,6 +7066,8 @@
           this.onWillDrop = this._onWillDrop.event;
           this._onWillShowOverlay = new Emitter();
           this.onWillShowOverlay = this._onWillShowOverlay.event;
+          this._onUnhandledDragOverEvent = new Emitter();
+          this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
           this._onDidRemovePanel = new Emitter();
           this.onDidRemovePanel = this._onDidRemovePanel.event;
           this._onDidAddPanel = new Emitter();
@@ -7012,7 +7093,7 @@
           this.overlayRenderContainer = new OverlayRenderContainer(gready);
           toggleClass(this.gridview.element, 'dv-dockview', true);
           toggleClass(this.element, 'dv-debug', !!options.debug);
-          this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this.onDidAdd((event) => {
+          this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this.onDidAdd((event) => {
               if (!this._moving) {
                   this._onDidAddGroup.fire(event);
               }
@@ -7039,22 +7120,6 @@
               }
           }));
           this._options = options;
-          if (!this.options.components) {
-              this.options.components = {};
-          }
-          if (!this.options.frameworkComponents) {
-              this.options.frameworkComponents = {};
-          }
-          if (!this.options.frameworkTabComponents) {
-              this.options.frameworkTabComponents = {};
-          }
-          if (!this.options.tabComponents) {
-              this.options.tabComponents = {};
-          }
-          if (!this.options.watermarkComponent &&
-              !this.options.watermarkFrameworkComponent) {
-              this.options.watermarkComponent = Watermark;
-          }
           this._rootDropTarget = new Droptarget(this.element, {
               canDisplayOverlay: (event, position) => {
                   const data = getPanelData();
@@ -7069,26 +7134,20 @@
                       }
                       return true;
                   }
-                  if (this.options.showDndOverlay) {
-                      if (position === 'center' && this.gridview.length !== 0) {
-                          /**
-                           * for external events only show the four-corner drag overlays, disable
-                           * the center position so that external drag events can fall through to the group
-                           * and panel drop target handlers
-                           */
-                          return false;
-                      }
-                      return this.options.showDndOverlay({
-                          nativeEvent: event,
-                          position: position,
-                          target: 'edge',
-                          getData: getPanelData,
-                      });
+                  if (position === 'center' && this.gridview.length !== 0) {
+                      /**
+                       * for external events only show the four-corner drag overlays, disable
+                       * the center position so that external drag events can fall through to the group
+                       * and panel drop target handlers
+                       */
+                      return false;
                   }
-                  return false;
+                  const firedEvent = new DockviewUnhandledDragOverEvent(event, 'edge', position, getPanelData);
+                  this._onUnhandledDragOverEvent.fire(firedEvent);
+                  return firedEvent.isAccepted;
               },
               acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
-              overlayModel: (_b = this.options.rootOverlayModel) !== null && _b !== void 0 ? _b : DEFAULT_ROOT_OVERLAY_MODEL,
+              overlayModel: (_a = this.options.rootOverlayModel) !== null && _a !== void 0 ? _a : DEFAULT_ROOT_OVERLAY_MODEL,
           });
           this.addDisposables(this._rootDropTarget, this._rootDropTarget.onWillShowOverlay((event) => {
               if (this.gridview.length > 0 && event.position === 'center') {
@@ -7097,6 +7156,10 @@
               }
               this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
                   kind: 'edge',
+                  panel: undefined,
+                  api: this._api,
+                  group: undefined,
+                  getData: getPanelData,
               }));
           }), this._rootDropTarget.onDrop((event) => {
               var _a;
@@ -7308,7 +7371,7 @@
                   skipDispose: true,
                   skipSetActiveGroup: true,
               }));
-              group.model.openPanel(item, { skipSetGroupActive: true });
+              this.movingLock(() => group.model.openPanel(item, { skipSetGroupActive: true }));
           }
           else {
               group = item;
@@ -7381,7 +7444,7 @@
               // this is either a resize or a move
               // to inform the panels .layout(...) the group with it's current size
               // don't care about resize since the above watcher handles that
-              group.layout(group.height, group.width);
+              group.layout(group.width, group.height);
           }), overlay.onDidChangeEnd(() => {
               this._bufferOnDidLayoutChange.fire();
           }), group.onDidChange((event) => {
@@ -7436,16 +7499,11 @@
       }
       updateOptions(options) {
           var _a, _b;
-          const changed_orientation = typeof options.orientation === 'string' &&
-              this.gridview.orientation !== options.orientation;
-          const changed_floatingGroupBounds = options.floatingGroupBounds !== undefined &&
+          const changed_floatingGroupBounds = 'floatingGroupBounds' in options &&
               options.floatingGroupBounds !== this.options.floatingGroupBounds;
-          const changed_rootOverlayOptions = options.rootOverlayModel !== undefined &&
+          const changed_rootOverlayOptions = 'rootOverlayModel' in options &&
               options.rootOverlayModel !== this.options.rootOverlayModel;
           this._options = Object.assign(Object.assign({}, this.options), options);
-          if (changed_orientation) {
-              this.gridview.orientation = options.orientation;
-          }
           if (changed_floatingGroupBounds) {
               for (const group of this._floatingGroups) {
                   switch (this.options.floatingGroupBounds) {
@@ -7733,7 +7791,7 @@
                       ? this.getGroupPanel(options.position.referencePanel)
                       : options.position.referencePanel;
                   if (!referencePanel) {
-                      throw new Error(`referencePanel ${options.position.referencePanel} does not exist`);
+                      throw new Error(`referencePanel '${options.position.referencePanel}' does not exist`);
                   }
                   referenceGroup = this.findGroup(referencePanel);
               }
@@ -7743,14 +7801,19 @@
                           ? (_a = this._groups.get(options.position.referenceGroup)) === null || _a === void 0 ? void 0 : _a.value
                           : options.position.referenceGroup;
                   if (!referenceGroup) {
-                      throw new Error(`referencePanel ${options.position.referenceGroup} does not exist`);
+                      throw new Error(`referenceGroup '${options.position.referenceGroup}' does not exist`);
                   }
               }
               else {
                   const group = this.orthogonalize(directionToPosition(options.position.direction));
                   const panel = this.createPanel(options, group);
-                  group.model.openPanel(panel);
-                  this.doSetGroupAndPanelActive(group);
+                  group.model.openPanel(panel, {
+                      skipSetActive: options.inactive,
+                      skipSetGroupActive: options.inactive,
+                  });
+                  if (!options.inactive) {
+                      this.doSetGroupAndPanelActive(group);
+                  }
                   return panel;
               }
           }
@@ -7773,43 +7836,64 @@
                       skipActiveGroup: true,
                   });
                   panel = this.createPanel(options, group);
-                  group.model.openPanel(panel);
+                  group.model.openPanel(panel, {
+                      skipSetActive: options.inactive,
+                      skipSetGroupActive: options.inactive,
+                  });
               }
               else if (referenceGroup.api.location.type === 'floating' ||
                   target === 'center') {
                   panel = this.createPanel(options, referenceGroup);
-                  referenceGroup.model.openPanel(panel);
-                  this.doSetGroupAndPanelActive(referenceGroup);
+                  referenceGroup.model.openPanel(panel, {
+                      skipSetActive: options.inactive,
+                      skipSetGroupActive: options.inactive,
+                  });
+                  if (!options.inactive) {
+                      this.doSetGroupAndPanelActive(referenceGroup);
+                  }
               }
               else {
                   const location = getGridLocation(referenceGroup.element);
                   const relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
                   const group = this.createGroupAtLocation(relativeLocation);
                   panel = this.createPanel(options, group);
-                  group.model.openPanel(panel);
-                  this.doSetGroupAndPanelActive(group);
+                  group.model.openPanel(panel, {
+                      skipSetActive: options.inactive,
+                      skipSetGroupActive: options.inactive,
+                  });
+                  if (!options.inactive) {
+                      this.doSetGroupAndPanelActive(group);
+                  }
               }
           }
           else if (options.floating) {
               const group = this.createGroup();
               this._onDidAddGroup.fire(group);
-              const o = typeof options.floating === 'object' &&
+              const coordinates = typeof options.floating === 'object' &&
                   options.floating !== null
                   ? options.floating
                   : {};
-              this.addFloatingGroup(group, o, {
+              this.addFloatingGroup(group, coordinates, {
                   inDragMode: false,
                   skipRemoveGroup: true,
                   skipActiveGroup: true,
               });
               panel = this.createPanel(options, group);
-              group.model.openPanel(panel);
+              group.model.openPanel(panel, {
+                  skipSetActive: options.inactive,
+                  skipSetGroupActive: options.inactive,
+              });
           }
           else {
               const group = this.createGroupAtLocation();
               panel = this.createPanel(options, group);
-              group.model.openPanel(panel);
-              this.doSetGroupAndPanelActive(group);
+              group.model.openPanel(panel, {
+                  skipSetActive: options.inactive,
+                  skipSetGroupActive: options.inactive,
+              });
+              if (!options.inactive) {
+                  this.doSetGroupAndPanelActive(group);
+              }
           }
           return panel;
       }
@@ -7833,12 +7917,10 @@
           }
       }
       createWatermarkComponent() {
-          var _a;
-          return createComponent('watermark-id', 'watermark-name', this.options.watermarkComponent
-              ? { 'watermark-name': this.options.watermarkComponent }
-              : {}, this.options.watermarkFrameworkComponent
-              ? { 'watermark-name': this.options.watermarkFrameworkComponent }
-              : {}, (_a = this.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.watermark);
+          if (this.options.createWatermarkComponent) {
+              return this.options.createWatermarkComponent();
+          }
+          return new Watermark();
       }
       updateWatermark() {
           var _a, _b;
@@ -8219,6 +8301,8 @@
                       return;
                   }
                   this._onWillShowOverlay.fire(event);
+              }), view.model.onUnhandledDragOverEvent((event) => {
+                  this._onUnhandledDragOverEvent.fire(event);
               }), view.model.onDidAddPanel((event) => {
                   if (this._moving) {
                       return;
@@ -9464,11 +9548,6 @@
           this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
               group: parameters.group,
               containerApi: parameters.containerApi,
-              close: () => {
-                  if (parameters.group) {
-                      parameters.containerApi.removeGroup(parameters.group);
-                  }
-              },
           });
       }
       focus() {
@@ -9500,9 +9579,6 @@
       get part() {
           return this._part;
       }
-      get group() {
-          return this._group;
-      }
       constructor(component, reactPortalStore, _group) {
           this.component = component;
           this.reactPortalStore = reactPortalStore;
@@ -9513,9 +9589,6 @@
           this._element.style.height = '100%';
           this._element.style.width = '100%';
       }
-      focus() {
-          // TODO
-      }
       init(parameters) {
           this.mutableDisposable.value = new CompositeDisposable(this._group.model.onDidAddPanel(() => {
               this.updatePanels();
@@ -9535,15 +9608,15 @@
               group: this._group,
           });
       }
-      update(event) {
-          var _a;
-          (_a = this._part) === null || _a === void 0 ? void 0 : _a.update(event.params);
-      }
       dispose() {
           var _a;
           this.mutableDisposable.dispose();
           (_a = this._part) === null || _a === void 0 ? void 0 : _a.dispose();
       }
+      update(event) {
+          var _a;
+          (_a = this._part) === null || _a === void 0 ? void 0 : _a.update(event.params);
+      }
       updatePanels() {
           this.update({ params: { panels: this._group.model.panels } });
       }
@@ -9571,72 +9644,72 @@
           : undefined;
   }
   const DEFAULT_REACT_TAB = 'props.defaultTabComponent';
+  function extractCoreOptions(props) {
+      const coreOptions = PROPERTY_KEYS.reduce((obj, key) => {
+          if (key in props) {
+              obj[key] = props[key];
+          }
+          return obj;
+      }, {});
+      return coreOptions;
+  }
   const DockviewReact = React.forwardRef((props, ref) => {
       const domRef = React.useRef(null);
       const dockviewRef = React.useRef();
       const [portals, addPortal] = usePortalsLifecycle();
       React.useImperativeHandle(ref, () => domRef.current, []);
+      const prevProps = React.useRef({});
+      React.useEffect(() => {
+          const changes = {};
+          PROPERTY_KEYS.forEach((propKey) => {
+              const key = propKey;
+              const propValue = props[key];
+              if (key in props && propValue !== prevProps.current[key]) {
+                  changes[key] = propValue;
+              }
+          });
+          if (dockviewRef.current) {
+              dockviewRef.current.updateOptions(changes);
+          }
+          prevProps.current = props;
+      }, PROPERTY_KEYS.map((key) => props[key]));
       React.useEffect(() => {
           var _a;
           if (!domRef.current) {
-              return () => {
-                  // noop
-              };
+              return;
           }
-          const factory = {
-              content: {
-                  createComponent: (_id, componentId, component) => {
-                      return new ReactPanelContentPart(componentId, component, {
-                          addPortal,
-                      });
-                  },
-              },
-              tab: {
-                  createComponent: (_id, componentId, component) => {
-                      return new ReactPanelHeaderPart(componentId, component, {
-                          addPortal,
-                      });
-                  },
-              },
-              watermark: {
-                  createComponent: (_id, componentId, component) => {
-                      return new ReactWatermarkPart(componentId, component, {
-                          addPortal,
-                      });
-                  },
-              },
-          };
           const frameworkTabComponents = (_a = props.tabComponents) !== null && _a !== void 0 ? _a : {};
           if (props.defaultTabComponent) {
               frameworkTabComponents[DEFAULT_REACT_TAB] =
                   props.defaultTabComponent;
           }
-          const dockview = new DockviewComponent({
+          const frameworkOptions = {
+              createLeftHeaderActionComponent: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
+              createRightHeaderActionComponent: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
+              createPrefixHeaderActionComponent: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }),
+              createComponent: (options) => {
+                  return new ReactPanelContentPart(options.id, props.components[options.name], {
+                      addPortal,
+                  });
+              },
+              createTabComponent(options) {
+                  return new ReactPanelHeaderPart(options.id, frameworkTabComponents[options.name], {
+                      addPortal,
+                  });
+              },
+              createWatermarkComponent: props.watermarkComponent
+                  ? () => {
+                      return new ReactWatermarkPart('watermark', props.watermarkComponent, {
+                          addPortal,
+                      });
+                  }
+                  : undefined,
               parentElement: domRef.current,
-              frameworkComponentFactory: factory,
-              frameworkComponents: props.components,
-              disableAutoResizing: props.disableAutoResizing,
-              frameworkTabComponents,
-              watermarkFrameworkComponent: props.watermarkComponent,
               defaultTabComponent: props.defaultTabComponent
                   ? DEFAULT_REACT_TAB
                   : undefined,
-              styles: props.hideBorders
-                  ? { separatorBorder: 'transparent' }
-                  : undefined,
-              showDndOverlay: props.showDndOverlay,
-              createLeftHeaderActionsElement: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
-              createRightHeaderActionsElement: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
-              createPrefixHeaderActionsElement: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }),
-              singleTabMode: props.singleTabMode,
-              disableFloatingGroups: props.disableFloatingGroups,
-              floatingGroupBounds: props.floatingGroupBounds,
-              defaultRenderer: props.defaultRenderer,
-              debug: props.debug,
-              rootOverlayModel: props.rootOverlayModel,
-              locked: props.locked,
-              disableDnd: props.disableDnd,
-          });
+          };
+          const dockview = new DockviewComponent(Object.assign(Object.assign({}, extractCoreOptions(props)), frameworkOptions));
           const { clientWidth, clientHeight } = domRef.current;
           dockview.layout(clientWidth, clientHeight);
           if (props.onReady) {
@@ -9647,20 +9720,6 @@
               dockview.dispose();
           };
       }, []);
-      React.useEffect(() => {
-          if (!dockviewRef.current) {
-              return;
-          }
-          dockviewRef.current.locked = !!props.locked;
-      }, [props.locked]);
-      React.useEffect(() => {
-          if (!dockviewRef.current) {
-              return;
-          }
-          dockviewRef.current.updateOptions({
-              disableDnd: props.disableDnd,
-          });
-      }, [props.disableDnd]);
       React.useEffect(() => {
           if (!dockviewRef.current) {
               return () => {
@@ -9682,63 +9741,43 @@
                   // noop
               };
           }
-          const disposable = dockviewRef.current.onWillDrop((event) => {
-              if (props.onWillDrop) {
-                  props.onWillDrop(event);
+          const disposable = dockviewRef.current.onUnhandledDragOverEvent((event) => {
+              var _a;
+              if ((_a = props.showDndOverlay) === null || _a === void 0 ? void 0 : _a.call(props, event)) {
+                  event.accept();
               }
           });
           return () => {
               disposable.dispose();
           };
-      }, [props.onWillDrop]);
-      React.useEffect(() => {
-          if (!dockviewRef.current) {
-              return;
-          }
-          dockviewRef.current.updateOptions({
-              frameworkComponents: props.components,
-          });
-      }, [props.components]);
-      React.useEffect(() => {
-          if (!dockviewRef.current) {
-              return;
-          }
-          dockviewRef.current.updateOptions({
-              floatingGroupBounds: props.floatingGroupBounds,
-          });
-      }, [props.floatingGroupBounds]);
-      React.useEffect(() => {
-          if (!dockviewRef.current) {
-              return;
-          }
-          dockviewRef.current.updateOptions({
-              watermarkFrameworkComponent: props.watermarkComponent,
-          });
-      }, [props.watermarkComponent]);
-      React.useEffect(() => {
-          if (!dockviewRef.current) {
-              return;
-          }
-          dockviewRef.current.updateOptions({
-              showDndOverlay: props.showDndOverlay,
-          });
       }, [props.showDndOverlay]);
       React.useEffect(() => {
           if (!dockviewRef.current) {
-              return;
+              return () => {
+                  // noop
+              };
           }
-          dockviewRef.current.updateOptions({
-              frameworkTabComponents: props.tabComponents,
+          const disposable = dockviewRef.current.onWillDrop((event) => {
+              if (props.onWillDrop) {
+                  props.onWillDrop(event);
+              }
           });
-      }, [props.tabComponents]);
+          return () => {
+              disposable.dispose();
+          };
+      }, [props.onWillDrop]);
       React.useEffect(() => {
           if (!dockviewRef.current) {
               return;
           }
           dockviewRef.current.updateOptions({
-              disableFloatingGroups: props.disableFloatingGroups,
+              createComponent: (options) => {
+                  return new ReactPanelContentPart(options.id, props.components[options.name], {
+                      addPortal,
+                  });
+              },
           });
-      }, [props.disableFloatingGroups]);
+      }, [props.components]);
       React.useEffect(() => {
           var _a;
           if (!dockviewRef.current) {
@@ -9753,39 +9792,49 @@
               defaultTabComponent: props.defaultTabComponent
                   ? DEFAULT_REACT_TAB
                   : undefined,
-              frameworkTabComponents,
+              createTabComponent(options) {
+                  return new ReactPanelHeaderPart(options.id, frameworkTabComponents[options.name], {
+                      addPortal,
+                  });
+              },
           });
-      }, [props.defaultTabComponent]);
+      }, [props.tabComponents, props.defaultTabComponent]);
       React.useEffect(() => {
           if (!dockviewRef.current) {
               return;
           }
           dockviewRef.current.updateOptions({
-              createRightHeaderActionsElement: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
+              createWatermarkComponent: props.watermarkComponent
+                  ? () => {
+                      return new ReactWatermarkPart('watermark', props.watermarkComponent, {
+                          addPortal,
+                      });
+                  }
+                  : undefined,
           });
-      }, [props.rightHeaderActionsComponent]);
+      }, [props.watermarkComponent]);
       React.useEffect(() => {
           if (!dockviewRef.current) {
               return;
           }
           dockviewRef.current.updateOptions({
-              createLeftHeaderActionsElement: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
+              createRightHeaderActionComponent: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
           });
-      }, [props.leftHeaderActionsComponent]);
+      }, [props.rightHeaderActionsComponent]);
       React.useEffect(() => {
           if (!dockviewRef.current) {
               return;
           }
           dockviewRef.current.updateOptions({
-              rootOverlayModel: props.rootOverlayModel,
+              createLeftHeaderActionComponent: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
           });
-      }, [props.rootOverlayModel]);
+      }, [props.leftHeaderActionsComponent]);
       React.useEffect(() => {
           if (!dockviewRef.current) {
               return;
           }
           dockviewRef.current.updateOptions({
-              createPrefixHeaderActionsElement: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }),
+              createPrefixHeaderActionComponent: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }),
           });
       }, [props.prefixHeaderActionsComponent]);
       return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
@@ -10125,6 +10174,7 @@
   exports.DockviewMutableDisposable = MutableDisposable;
   exports.DockviewPanel = DockviewPanel;
   exports.DockviewReact = DockviewReact;
+  exports.DockviewUnhandledDragOverEvent = DockviewUnhandledDragOverEvent;
   exports.DockviewWillDropEvent = DockviewWillDropEvent;
   exports.DraggablePaneviewPanel = DraggablePaneviewPanel;
   exports.Gridview = Gridview;
@@ -10133,6 +10183,7 @@
   exports.GridviewPanel = GridviewPanel;
   exports.GridviewReact = GridviewReact;
   exports.LocalSelectionTransfer = LocalSelectionTransfer;
+  exports.PROPERTY_KEYS = PROPERTY_KEYS;
   exports.PaneFramework = PaneFramework;
   exports.PaneTransfer = PaneTransfer;
   exports.PanelTransfer = PanelTransfer;