dockview 1.5.2 → 1.6.0

package/dist/dockview.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.5.2
+ * @version 1.6.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -10,8 +10,7 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.dockview = {}, global.React, global.ReactDOM));
 })(this, (function (exports, React, ReactDOM) { 'use strict';
 
-  function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
+  function _interopNamespaceDefault(e) {
     var n = Object.create(null);
     if (e) {
       Object.keys(e).forEach(function (k) {
@@ -24,12 +23,12 @@
         }
       });
     }
-    n["default"] = e;
+    n.default = e;
     return Object.freeze(n);
   }
 
-  var React__namespace = /*#__PURE__*/_interopNamespace(React);
-  var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
+  var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+  var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
 
   function styleInject(css, ref) {
     if ( ref === void 0 ) ref = {};
@@ -58,7 +57,7 @@
     }
   }
 
-  var css_248z = ".dockview-svg {\n  display: inline-block;\n  fill: currentcolor;\n  line-height: 1;\n  stroke: currentcolor;\n  stroke-width: 0;\n}\n.dockview-theme-dark {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-group-view-background-color: #1e1e1e;\n  --dv-tabs-and-actions-container-background-color: #252526;\n  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-tab-divider-color: #1e1e1e;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: #969696;\n  --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n  --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n  --dv-separator-border: rgb(68, 68, 68);\n  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n}\n\n.dockview-theme-light {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-group-view-background-color: white;\n  --dv-tabs-and-actions-container-background-color: #f3f3f3;\n  --dv-activegroup-visiblepanel-tab-background-color: white;\n  --dv-activegroup-hiddenpanel-tab-background-color: #ececec;\n  --dv-inactivegroup-visiblepanel-tab-background-color: white;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #ececec;\n  --dv-tab-divider-color: white;\n  --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-activegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.7);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(51, 51, 51, 0.7);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.35);\n  --dv-separator-border: rgba(128, 128, 128, 0.35);\n  --dv-paneview-header-border-color: rgb(51, 51, 51);\n}\n\n.dockview-theme-vs {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-group-view-background-color: #1e1e1e;\n  --dv-tabs-and-actions-container-background-color: #252526;\n  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-tab-divider-color: #1e1e1e;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: #969696;\n  --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n  --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n  --dv-separator-border: rgb(68, 68, 68);\n  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n  --dv-tabs-and-actions-container-background-color: #2d2d30;\n  --dv-tabs-and-actions-container-height: 20px;\n  --dv-tabs-and-actions-container-font-size: 11px;\n  --dv-activegroup-visiblepanel-tab-background-color: #007acc;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #3f3f46;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: white;\n  --dv-inactivegroup-visiblepanel-tab-color: white;\n  --dv-inactivegroup-hiddenpanel-tab-color: white;\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container {\n  box-sizing: content-box;\n  border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.active-tab {\n  border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.inactive-tab {\n  border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container {\n  box-sizing: content-box;\n  border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.active-tab {\n  border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.inactive-tab {\n  border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n}\n\n.dockview-theme-abyss {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-group-view-background-color: #000c18;\n  --dv-tabs-and-actions-container-background-color: #1c1c2a;\n  --dv-activegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-activegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-tab-divider-color: #2b2b4a;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);\n  --dv-separator-border: #2b2b4a;\n  --dv-paneview-header-border-color: #2b2b4a;\n  --dv-paneview-active-outline-color: #596f99;\n}\n\n.dockview-theme-dracula {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-group-view-background-color: #282a36;\n  --dv-tabs-and-actions-container-background-color: #191a21;\n  --dv-activegroup-visiblepanel-tab-background-color: #282a36;\n  --dv-activegroup-hiddenpanel-tab-background-color: #21222c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #282a36;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #21222c;\n  --dv-tab-divider-color: #191a21;\n  --dv-activegroup-visiblepanel-tab-color: rgb(248, 248, 242);\n  --dv-activegroup-hiddenpanel-tab-color: rgb(98, 114, 164);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(98, 114, 164, 0.5);\n  --dv-separator-border: #bd93f9;\n  --dv-paneview-header-border-color: #bd93f9;\n  --dv-paneview-active-outline-color: #6272a4;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  background-color: #94527e;\n  z-index: 999;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n  position: absolute;\n  left: 0px;\n  bottom: 0px;\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  background-color: #5e3d5a;\n  z-index: 999;\n}\n.actions-bar {\n  text-align: right;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n.actions-bar .actions-container {\n  display: flex;\n  padding: 0px;\n  margin: 0px;\n  justify-content: flex-end;\n}\n.actions-bar .actions-container .close-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  cursor: pointer;\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.actions-bar .actions-container .close-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}\n.drop-target {\n  position: relative;\n}\n.drop-target > .drop-target-dropzone {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  height: 100%;\n  width: 100%;\n  z-index: 10000;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection {\n  position: relative;\n  box-sizing: border-box;\n  height: 100%;\n  width: 100%;\n  background-color: var(--dv-drag-over-background-color);\n  transition: top 70ms ease-out, left 70ms ease-out, width 70ms ease-out, height 70ms ease-out, opacity 0.15s ease-out;\n  will-change: transform;\n  pointer-events: none;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.left {\n  transform: translateX(-25%) scaleX(0.5);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.right {\n  transform: translateX(25%) scaleX(0.5);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.top {\n  transform: translateY(-25%) scaleY(0.5);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.bottom {\n  transform: translateY(25%) scaleY(0.5);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-top {\n  border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-bottom {\n  border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-left {\n  border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-right {\n  border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.custom-dragging {\n  height: 24px;\n  line-height: 24px;\n  font-size: 11px;\n  width: 100px;\n  background-color: dodgerblue;\n  color: ghostwhite;\n  border-radius: 11px;\n  position: absolute;\n  padding-left: 10px;\n}\n\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n  background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);\n  color: var(--dv-inactivegroup-visiblepanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n  background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-inactivegroup-hiddenpanel-tab-color);\n}\n\n/**\n * when a tab is dragged we lose the above stylings because they are conditional on parent elements\n * therefore we also set some stylings for the dragging event\n **/\n.tab.dragging {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.grid-view,\n.branch-node {\n  height: 100%;\n  width: 100%;\n}\n.groupview {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background-color: var(--dv-group-view-background-color);\n  overflow: hidden;\n}\n.groupview:focus {\n  outline: none;\n}\n.groupview.empty > .tabs-and-actions-container {\n  display: none;\n}\n.groupview > .content-container {\n  flex-grow: 1;\n  overflow: hidden;\n  outline: none;\n}\n.pane-container {\n  height: 100%;\n  width: 100%;\n}\n.pane-container.animated .view {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.pane-container .view {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  padding: 0px !important;\n}\n.pane-container .view:not(:first-child)::before {\n  background-color: transparent !important;\n}\n.pane-container .view:not(:first-child) .pane > .pane-header {\n  border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.pane-container .view .default-header {\n  background-color: var(--dv-group-view-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n  display: flex;\n  padding: 0px 8px;\n  cursor: pointer;\n}\n.pane-container .view .default-header .dockview-pane-header-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.pane-container .view .default-header > span {\n  padding-left: 8px;\n  flex-grow: 1;\n}\n.pane-container:first-of-type > .pane > .pane-header {\n  border-top: none !important;\n}\n.pane-container .pane {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  height: 100%;\n}\n.pane-container .pane .pane-header {\n  box-sizing: border-box;\n  user-select: none;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-header.pane-draggable {\n  cursor: pointer;\n}\n.pane-container .pane .pane-header:focus:before, .pane-container .pane .pane-header:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.pane-container .pane .pane-body {\n  overflow-y: auto;\n  overflow-x: hidden;\n  flex-grow: 1;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-body:focus:before, .pane-container .pane .pane-body:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.tabs-and-actions-container {\n  display: flex;\n  background-color: var(--dv-tabs-and-actions-container-background-color);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  height: var(--dv-tabs-and-actions-container-height);\n  font-size: var(--dv-tabs-and-actions-container-font-size);\n}\n.tabs-and-actions-container.hidden {\n  display: none;\n}\n.tabs-and-actions-container .void-container {\n  display: flex;\n  flex-grow: 1;\n}\n.tabs-and-actions-container .tabs-container {\n  display: flex;\n  overflow-x: overlay;\n  overflow-y: hidden;\n  scrollbar-width: thin;\n  /* Track */\n  /* Handle */\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar {\n  height: 3px;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-track {\n  background: transparent;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-thumb {\n  background: var(--dv-tabs-container-scrollbar-color);\n}\n.tabs-and-actions-container .tabs-container .tab {\n  -webkit-user-drag: element;\n  outline: none;\n  min-width: 75px;\n  cursor: pointer;\n  position: relative;\n  box-sizing: border-box;\n}\n.tabs-and-actions-container .tabs-container .tab:not(:first-child)::before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  pointer-events: none;\n  background-color: var(--dv-tab-divider-color);\n  width: 1px;\n  height: 100%;\n}\n.tab .dockview-react-tab {\n  display: flex;\n  padding: 0px 8px;\n  align-items: center;\n  height: 100%;\n}\n.tab .dockview-react-tab .dockview-react-tab-title {\n  padding: 0px 8px;\n  flex-grow: 1;\n}\n.tab .dockview-react-tab .dockview-react-tab-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.tab .dockview-react-tab .dockview-react-tab-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}\n.tab.inactive-tab:not(:hover) .dockview-react-tab-action {\n  visibility: hidden;\n}\n.dockview-react-part {\n  height: 100%;\n  width: 100%;\n}\n.split-view-container {\n  position: relative;\n  overflow: hidden;\n  height: 100%;\n  width: 100%;\n}\n.split-view-container.animation .view,\n.split-view-container.animation .sash {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.split-view-container.horizontal {\n  height: 100%;\n}\n.split-view-container.horizontal > .sash-container > .sash {\n  height: 100%;\n  width: 4px;\n}\n.split-view-container.horizontal > .sash-container > .sash.enabled {\n  cursor: ew-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.disabled {\n  cursor: default;\n}\n.split-view-container.horizontal > .sash-container > .sash.maximum {\n  cursor: w-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.minimum {\n  cursor: e-resize;\n}\n.split-view-container.horizontal > .view-container > .view:not(:first-child)::before {\n  height: 100%;\n  width: 1px;\n}\n.split-view-container.vertical {\n  width: 100%;\n}\n.split-view-container.vertical > .sash-container > .sash {\n  width: 100%;\n  height: 4px;\n}\n.split-view-container.vertical > .sash-container > .sash.enabled {\n  cursor: ns-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.disabled {\n  cursor: default;\n}\n.split-view-container.vertical > .sash-container > .sash.maximum {\n  cursor: n-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.minimum {\n  cursor: s-resize;\n}\n.split-view-container.vertical > .view-container > .view {\n  width: 100%;\n}\n.split-view-container.vertical > .view-container > .view:not(:first-child)::before {\n  height: 1px;\n  width: 100%;\n}\n.split-view-container .sash-container {\n  height: 100%;\n  width: 100%;\n  position: absolute;\n}\n.split-view-container .sash-container .sash {\n  position: absolute;\n  z-index: 99;\n  outline: none;\n}\n.split-view-container .sash-container .sash:active {\n  transition: background-color 0.1s ease-in-out;\n  background-color: var(--dv-active-sash-color, transparent);\n}\n.split-view-container .sash-container .sash:hover {\n  background-color: var(--dv-active-sash-color, transparent);\n  transition: background-color 0.1s ease-in-out;\n  transition-delay: 0.5s;\n}\n.split-view-container .view-container {\n  position: relative;\n  height: 100%;\n  width: 100%;\n}\n.split-view-container .view-container .view {\n  height: 100%;\n  box-sizing: border-box;\n  overflow: auto;\n  position: absolute;\n}\n.split-view-container.separator-border .view:not(:first-child)::before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  pointer-events: none;\n  background-color: var(--dv-separator-border);\n}\n.dragged {\n  transform: translate3d(0px, 0px, 0px);\n  /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */\n}\n\n.tab {\n  flex-shrink: 0;\n}\n.tab.dragging .tab-action {\n  background-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.tab.active-tab > .default-tab .tab-action {\n  visibility: visible;\n}\n.tab.inactive-tab > .default-tab .tab-action {\n  visibility: hidden;\n}\n.tab.inactive-tab > .default-tab:hover .tab-action {\n  visibility: visible;\n}\n.tab .default-tab {\n  position: relative;\n  height: 100%;\n  display: flex;\n  min-width: 80px;\n  align-items: center;\n  padding: 0px 8px;\n  white-space: nowrap;\n  text-overflow: elipsis;\n}\n.tab .default-tab .tab-content {\n  padding: 0px 8px;\n  flex-grow: 1;\n}\n.tab .default-tab .action-container {\n  text-align: right;\n  display: flex;\n}\n.tab .default-tab .action-container .tab-list {\n  display: flex;\n  padding: 0px;\n  margin: 0px;\n  justify-content: flex-end;\n}\n.tab .default-tab .action-container .tab-list .tab-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.tab .default-tab .action-container .tab-list .tab-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}\n.watermark {\n  display: flex;\n  width: 100%;\n}\n.watermark.has-actions .watermark-title .actions-bar {\n  display: none;\n}\n.watermark .watermark-title {\n  height: 35px;\n  width: 100%;\n  display: flex;\n}\n.watermark .watermark-content {\n  flex-grow: 1;\n}";
+  var css_248z = ".dockview-svg {\n  display: inline-block;\n  fill: currentcolor;\n  line-height: 1;\n  stroke: currentcolor;\n  stroke-width: 0;\n}\n.dockview-theme-dark {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-group-view-background-color: #1e1e1e;\n  --dv-tabs-and-actions-container-background-color: #252526;\n  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-tab-divider-color: #1e1e1e;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: #969696;\n  --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n  --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n  --dv-separator-border: rgb(68, 68, 68);\n  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n}\n\n.dockview-theme-light {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-group-view-background-color: white;\n  --dv-tabs-and-actions-container-background-color: #f3f3f3;\n  --dv-activegroup-visiblepanel-tab-background-color: white;\n  --dv-activegroup-hiddenpanel-tab-background-color: #ececec;\n  --dv-inactivegroup-visiblepanel-tab-background-color: white;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #ececec;\n  --dv-tab-divider-color: white;\n  --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-activegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.7);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(51, 51, 51, 0.7);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.35);\n  --dv-separator-border: rgba(128, 128, 128, 0.35);\n  --dv-paneview-header-border-color: rgb(51, 51, 51);\n}\n\n.dockview-theme-vs {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-group-view-background-color: #1e1e1e;\n  --dv-tabs-and-actions-container-background-color: #252526;\n  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-tab-divider-color: #1e1e1e;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: #969696;\n  --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n  --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n  --dv-separator-border: rgb(68, 68, 68);\n  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n  --dv-tabs-and-actions-container-background-color: #2d2d30;\n  --dv-tabs-and-actions-container-height: 20px;\n  --dv-tabs-and-actions-container-font-size: 11px;\n  --dv-activegroup-visiblepanel-tab-background-color: #007acc;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #3f3f46;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: white;\n  --dv-inactivegroup-visiblepanel-tab-color: white;\n  --dv-inactivegroup-hiddenpanel-tab-color: white;\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container {\n  box-sizing: content-box;\n  border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.active-tab {\n  border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.inactive-tab {\n  border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container {\n  box-sizing: content-box;\n  border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.active-tab {\n  border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.inactive-tab {\n  border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n}\n\n.dockview-theme-abyss {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-group-view-background-color: #000c18;\n  --dv-tabs-and-actions-container-background-color: #1c1c2a;\n  --dv-activegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-activegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-tab-divider-color: #2b2b4a;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);\n  --dv-separator-border: #2b2b4a;\n  --dv-paneview-header-border-color: #2b2b4a;\n  --dv-paneview-active-outline-color: #596f99;\n}\n\n.dockview-theme-dracula {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-group-view-background-color: #282a36;\n  --dv-tabs-and-actions-container-background-color: #191a21;\n  --dv-activegroup-visiblepanel-tab-background-color: #282a36;\n  --dv-activegroup-hiddenpanel-tab-background-color: #21222c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #282a36;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #21222c;\n  --dv-tab-divider-color: #191a21;\n  --dv-activegroup-visiblepanel-tab-color: rgb(248, 248, 242);\n  --dv-activegroup-hiddenpanel-tab-color: rgb(98, 114, 164);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(98, 114, 164, 0.5);\n  --dv-separator-border: #bd93f9;\n  --dv-paneview-header-border-color: #bd93f9;\n  --dv-paneview-active-outline-color: #6272a4;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  background-color: #94527e;\n  z-index: 999;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n  position: absolute;\n  left: 0px;\n  bottom: 0px;\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  background-color: #5e3d5a;\n  z-index: 999;\n}\n.actions-bar {\n  text-align: right;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n.actions-bar .actions-container {\n  display: flex;\n  padding: 0px;\n  margin: 0px;\n  justify-content: flex-end;\n}\n.actions-bar .actions-container .close-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  cursor: pointer;\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.actions-bar .actions-container .close-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}\n.drop-target {\n  position: relative;\n}\n.drop-target > .drop-target-dropzone {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  height: 100%;\n  width: 100%;\n  z-index: 10000;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection {\n  position: relative;\n  box-sizing: border-box;\n  height: 100%;\n  width: 100%;\n  background-color: var(--dv-drag-over-background-color);\n  transition: top 70ms ease-out, left 70ms ease-out, width 70ms ease-out, height 70ms ease-out, opacity 0.15s ease-out;\n  will-change: transform;\n  pointer-events: none;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-top {\n  border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-bottom {\n  border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-left {\n  border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-right {\n  border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-dockview {\n  position: relative;\n  background-color: var(--dv-group-view-background-color);\n}\n.dv-dockview .dv-watermark-container {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  height: 100%;\n  width: 100%;\n}\n\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n  background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);\n  color: var(--dv-inactivegroup-visiblepanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n  background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-inactivegroup-hiddenpanel-tab-color);\n}\n\n/**\n * when a tab is dragged we lose the above stylings because they are conditional on parent elements\n * therefore we also set some stylings for the dragging event\n **/\n.tab.dv-tab-dragging {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.grid-view,\n.branch-node {\n  height: 100%;\n  width: 100%;\n}\n.groupview {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background-color: var(--dv-group-view-background-color);\n  overflow: hidden;\n}\n.groupview:focus {\n  outline: none;\n}\n.groupview.empty > .tabs-and-actions-container {\n  display: none;\n}\n.groupview > .content-container {\n  flex-grow: 1;\n  overflow: hidden;\n  outline: none;\n}\n.pane-container {\n  height: 100%;\n  width: 100%;\n}\n.pane-container.animated .view {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.pane-container .view {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  padding: 0px !important;\n}\n.pane-container .view:not(:first-child)::before {\n  background-color: transparent !important;\n}\n.pane-container .view:not(:first-child) .pane > .pane-header {\n  border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.pane-container .view .default-header {\n  background-color: var(--dv-group-view-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n  display: flex;\n  padding: 0px 8px;\n  cursor: pointer;\n}\n.pane-container .view .default-header .dockview-pane-header-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.pane-container .view .default-header > span {\n  padding-left: 8px;\n  flex-grow: 1;\n}\n.pane-container:first-of-type > .pane > .pane-header {\n  border-top: none !important;\n}\n.pane-container .pane {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  height: 100%;\n}\n.pane-container .pane .pane-header {\n  box-sizing: border-box;\n  user-select: none;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-header.pane-draggable {\n  cursor: pointer;\n}\n.pane-container .pane .pane-header:focus:before, .pane-container .pane .pane-header:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.pane-container .pane .pane-body {\n  overflow-y: auto;\n  overflow-x: hidden;\n  flex-grow: 1;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-body:focus:before, .pane-container .pane .pane-body:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.tabs-and-actions-container {\n  display: flex;\n  background-color: var(--dv-tabs-and-actions-container-background-color);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  height: var(--dv-tabs-and-actions-container-height);\n  font-size: var(--dv-tabs-and-actions-container-font-size);\n}\n.tabs-and-actions-container.hidden {\n  display: none;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .tabs-container {\n  flex-grow: 1;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .tabs-container .tab {\n  flex-grow: 1;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .void-container {\n  flex-grow: 0;\n}\n.tabs-and-actions-container .void-container {\n  display: flex;\n  flex-grow: 1;\n  cursor: grab;\n}\n.tabs-and-actions-container .tabs-container {\n  display: flex;\n  overflow-x: overlay;\n  overflow-y: hidden;\n  scrollbar-width: thin;\n  /* Track */\n  /* Handle */\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar {\n  height: 3px;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-track {\n  background: transparent;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-thumb {\n  background: var(--dv-tabs-container-scrollbar-color);\n}\n.tabs-and-actions-container .tabs-container .tab {\n  -webkit-user-drag: element;\n  outline: none;\n  min-width: 75px;\n  cursor: pointer;\n  position: relative;\n  box-sizing: border-box;\n}\n.tabs-and-actions-container .tabs-container .tab:not(:first-child)::before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  pointer-events: none;\n  background-color: var(--dv-tab-divider-color);\n  width: 1px;\n  height: 100%;\n}\n.tab .dockview-react-tab {\n  display: flex;\n  padding: 0px 8px;\n  align-items: center;\n  height: 100%;\n}\n.tab .dockview-react-tab .dockview-react-tab-title {\n  padding: 0px 8px;\n  flex-grow: 1;\n}\n.tab .dockview-react-tab .dockview-react-tab-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.tab .dockview-react-tab .dockview-react-tab-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}\n.tab.inactive-tab:not(:hover) .dockview-react-tab-action {\n  visibility: hidden;\n}\n.dockview-react-part {\n  height: 100%;\n  width: 100%;\n}\n.split-view-container {\n  position: relative;\n  overflow: hidden;\n  height: 100%;\n  width: 100%;\n}\n.split-view-container.animation .view,\n.split-view-container.animation .sash {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.split-view-container.horizontal {\n  height: 100%;\n}\n.split-view-container.horizontal > .sash-container > .sash {\n  height: 100%;\n  width: 4px;\n}\n.split-view-container.horizontal > .sash-container > .sash.enabled {\n  cursor: ew-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.disabled {\n  cursor: default;\n}\n.split-view-container.horizontal > .sash-container > .sash.maximum {\n  cursor: w-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.minimum {\n  cursor: e-resize;\n}\n.split-view-container.horizontal > .view-container > .view:not(:first-child)::before {\n  height: 100%;\n  width: 1px;\n}\n.split-view-container.vertical {\n  width: 100%;\n}\n.split-view-container.vertical > .sash-container > .sash {\n  width: 100%;\n  height: 4px;\n}\n.split-view-container.vertical > .sash-container > .sash.enabled {\n  cursor: ns-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.disabled {\n  cursor: default;\n}\n.split-view-container.vertical > .sash-container > .sash.maximum {\n  cursor: n-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.minimum {\n  cursor: s-resize;\n}\n.split-view-container.vertical > .view-container > .view {\n  width: 100%;\n}\n.split-view-container.vertical > .view-container > .view:not(:first-child)::before {\n  height: 1px;\n  width: 100%;\n}\n.split-view-container .sash-container {\n  height: 100%;\n  width: 100%;\n  position: absolute;\n}\n.split-view-container .sash-container .sash {\n  position: absolute;\n  z-index: 99;\n  outline: none;\n}\n.split-view-container .sash-container .sash:active {\n  transition: background-color 0.1s ease-in-out;\n  background-color: var(--dv-active-sash-color, transparent);\n}\n.split-view-container .sash-container .sash:hover {\n  background-color: var(--dv-active-sash-color, transparent);\n  transition: background-color 0.1s ease-in-out;\n  transition-delay: 0.5s;\n}\n.split-view-container .view-container {\n  position: relative;\n  height: 100%;\n  width: 100%;\n}\n.split-view-container .view-container .view {\n  height: 100%;\n  box-sizing: border-box;\n  overflow: auto;\n  position: absolute;\n}\n.split-view-container.separator-border .view:not(:first-child)::before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  pointer-events: none;\n  background-color: var(--dv-separator-border);\n}\n.dv-dragged {\n  transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */\n}\n\n.tab {\n  flex-shrink: 0;\n}\n.tab.dv-tab-dragging .tab-action {\n  background-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.tab.active-tab > .default-tab .tab-action {\n  visibility: visible;\n}\n.tab.inactive-tab > .default-tab .tab-action {\n  visibility: hidden;\n}\n.tab.inactive-tab > .default-tab:hover .tab-action {\n  visibility: visible;\n}\n.tab .default-tab {\n  position: relative;\n  height: 100%;\n  display: flex;\n  min-width: 80px;\n  align-items: center;\n  padding: 0px 8px;\n  white-space: nowrap;\n  text-overflow: elipsis;\n}\n.tab .default-tab .tab-content {\n  padding: 0px 8px;\n  flex-grow: 1;\n}\n.tab .default-tab .action-container {\n  text-align: right;\n  display: flex;\n}\n.tab .default-tab .action-container .tab-list {\n  display: flex;\n  padding: 0px;\n  margin: 0px;\n  justify-content: flex-end;\n}\n.tab .default-tab .action-container .tab-list .tab-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.tab .default-tab .action-container .tab-list .tab-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}\n.watermark {\n  display: flex;\n  width: 100%;\n}\n.watermark.has-actions .watermark-title .actions-bar {\n  display: none;\n}\n.watermark .watermark-title {\n  height: 35px;\n  width: 100%;\n  display: flex;\n}\n.watermark .watermark-content {\n  flex-grow: 1;\n}";
   styleInject(css_248z);
 
   class TransferObject {
@@ -229,12 +228,12 @@
       };
   })(Disposable || (Disposable = {}));
   class CompositeDisposable {
-      constructor(...args) {
-          this.disposables = args;
-      }
       static from(...args) {
           return new CompositeDisposable(...args);
       }
+      constructor(...args) {
+          this.disposables = args;
+      }
       addDisposables(...args) {
           args.forEach((arg) => this.disposables.push(arg));
       }
@@ -452,21 +451,6 @@
   }
 
   class ViewItem {
-      constructor(container, view, size, disposable) {
-          this.container = container;
-          this.view = view;
-          this.disposable = disposable;
-          this._cachedVisibleSize = undefined;
-          if (typeof size === 'number') {
-              this._size = size;
-              this._cachedVisibleSize = undefined;
-              container.classList.add('visible');
-          }
-          else {
-              this._size = 0;
-              this._cachedVisibleSize = size.cachedVisibleSize;
-          }
-      }
       set size(size) {
           this._size = size;
       }
@@ -519,6 +503,21 @@
       set enabled(enabled) {
           this.container.style.pointerEvents = enabled ? '' : 'none';
       }
+      constructor(container, view, size, disposable) {
+          this.container = container;
+          this.view = view;
+          this.disposable = disposable;
+          this._cachedVisibleSize = undefined;
+          if (typeof size === 'number') {
+              this._size = size;
+              this._cachedVisibleSize = undefined;
+              container.classList.add('visible');
+          }
+          else {
+              this._size = 0;
+              this._cachedVisibleSize = size.cachedVisibleSize;
+          }
+      }
       // layout(offset: number, layoutContext: TLayoutContext | undefined): void {
       //     this.layoutContainer(offset);
       //     this.view.layout(this.size, offset, layoutContext);
@@ -565,6 +564,65 @@
       Sizing.Invisible = Invisible;
   })(exports.Sizing || (exports.Sizing = {}));
   class Splitview {
+      get size() {
+          return this._size;
+      }
+      set size(value) {
+          this._size = value;
+      }
+      get orthogonalSize() {
+          return this._orthogonalSize;
+      }
+      set orthogonalSize(value) {
+          this._orthogonalSize = value;
+      }
+      get length() {
+          return this.views.length;
+      }
+      get proportions() {
+          return this._proportions ? [...this._proportions] : undefined;
+      }
+      get orientation() {
+          return this._orientation;
+      }
+      set orientation(value) {
+          this._orientation = value;
+          const tmp = this.size;
+          this.size = this.orthogonalSize;
+          this.orthogonalSize = tmp;
+          removeClasses(this.element, 'horizontal', 'vertical');
+          this.element.classList.add(this.orientation == exports.Orientation.HORIZONTAL
+              ? 'horizontal'
+              : 'vertical');
+      }
+      get minimumSize() {
+          return this.views.reduce((r, item) => r + item.minimumSize, 0);
+      }
+      get maximumSize() {
+          return this.length === 0
+              ? Number.POSITIVE_INFINITY
+              : this.views.reduce((r, item) => r + item.maximumSize, 0);
+      }
+      get startSnappingEnabled() {
+          return this._startSnappingEnabled;
+      }
+      set startSnappingEnabled(startSnappingEnabled) {
+          if (this._startSnappingEnabled === startSnappingEnabled) {
+              return;
+          }
+          this._startSnappingEnabled = startSnappingEnabled;
+          this.updateSashEnablement();
+      }
+      get endSnappingEnabled() {
+          return this._endSnappingEnabled;
+      }
+      set endSnappingEnabled(endSnappingEnabled) {
+          if (this._endSnappingEnabled === endSnappingEnabled) {
+              return;
+          }
+          this._endSnappingEnabled = endSnappingEnabled;
+          this.updateSashEnablement();
+      }
       constructor(container, options) {
           this.container = container;
           this.views = [];
@@ -694,65 +752,6 @@
               this.saveProportions();
           }
       }
-      get size() {
-          return this._size;
-      }
-      set size(value) {
-          this._size = value;
-      }
-      get orthogonalSize() {
-          return this._orthogonalSize;
-      }
-      set orthogonalSize(value) {
-          this._orthogonalSize = value;
-      }
-      get length() {
-          return this.views.length;
-      }
-      get proportions() {
-          return this._proportions ? [...this._proportions] : undefined;
-      }
-      get orientation() {
-          return this._orientation;
-      }
-      set orientation(value) {
-          this._orientation = value;
-          const tmp = this.size;
-          this.size = this.orthogonalSize;
-          this.orthogonalSize = tmp;
-          removeClasses(this.element, 'horizontal', 'vertical');
-          this.element.classList.add(this.orientation == exports.Orientation.HORIZONTAL
-              ? 'horizontal'
-              : 'vertical');
-      }
-      get minimumSize() {
-          return this.views.reduce((r, item) => r + item.minimumSize, 0);
-      }
-      get maximumSize() {
-          return this.length === 0
-              ? Number.POSITIVE_INFINITY
-              : this.views.reduce((r, item) => r + item.maximumSize, 0);
-      }
-      get startSnappingEnabled() {
-          return this._startSnappingEnabled;
-      }
-      set startSnappingEnabled(startSnappingEnabled) {
-          if (this._startSnappingEnabled === startSnappingEnabled) {
-              return;
-          }
-          this._startSnappingEnabled = startSnappingEnabled;
-          this.updateSashEnablement();
-      }
-      get endSnappingEnabled() {
-          return this._endSnappingEnabled;
-      }
-      set endSnappingEnabled(endSnappingEnabled) {
-          if (this._endSnappingEnabled === endSnappingEnabled) {
-              return;
-          }
-          this._endSnappingEnabled = endSnappingEnabled;
-          this.updateSashEnablement();
-      }
       style(styles) {
           if ((styles === null || styles === void 0 ? void 0 : styles.separatorBorder) === 'transparent') {
               removeClasses(this.element, 'separator-border');
@@ -1216,6 +1215,27 @@
   }
 
   class Paneview extends CompositeDisposable {
+      get onDidAddView() {
+          return this.splitview.onDidAddView;
+      }
+      get onDidRemoveView() {
+          return this.splitview.onDidRemoveView;
+      }
+      get minimumSize() {
+          return this.splitview.minimumSize;
+      }
+      get maximumSize() {
+          return this.splitview.maximumSize;
+      }
+      get orientation() {
+          return this.splitview.orientation;
+      }
+      get size() {
+          return this.splitview.size;
+      }
+      get orthogonalSize() {
+          return this.splitview.orthogonalSize;
+      }
       constructor(container, options) {
           var _a;
           super();
@@ -1258,27 +1278,6 @@
               this._onDidChange.fire();
           }));
       }
-      get onDidAddView() {
-          return this.splitview.onDidAddView;
-      }
-      get onDidRemoveView() {
-          return this.splitview.onDidRemoveView;
-      }
-      get minimumSize() {
-          return this.splitview.minimumSize;
-      }
-      get maximumSize() {
-          return this.splitview.maximumSize;
-      }
-      get orientation() {
-          return this.splitview.orientation;
-      }
-      get size() {
-          return this.splitview.size;
-      }
-      get orthogonalSize() {
-          return this.splitview.orthogonalSize;
-      }
       addPane(pane, size, index = this.splitview.length, skipLayout = false) {
           const disposable = pane.onDidChangeExpansionState(() => {
               this.setupAnimation();
@@ -1357,243 +1356,16 @@
       }
   }
 
-  class DragAndDropObserver extends CompositeDisposable {
-      constructor(element, callbacks) {
-          super();
-          this.element = element;
-          this.callbacks = callbacks;
-          // A helper to fix issues with repeated DRAG_ENTER / DRAG_LEAVE
-          // calls see https://github.com/microsoft/vscode/issues/14470
-          // when the element has child elements where the events are fired
-          // repeadedly.
-          this.counter = 0;
-          this.registerListeners();
+  /*---------------------------------------------------------------------------------------------
+   * Accreditation: This file is largly based upon the MIT licenced VSCode sourcecode found at:
+   * https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/grid
+   *--------------------------------------------------------------------------------------------*/
+  class LeafNode {
+      get minimumWidth() {
+          return this.view.minimumWidth;
       }
-      registerListeners() {
-          this.addDisposables(addDisposableListener(this.element, 'dragenter', (e) => {
-              this.counter++;
-              this.callbacks.onDragEnter(e);
-          }));
-          this.addDisposables(addDisposableListener(this.element, 'dragover', (e) => {
-              e.preventDefault(); // needed so that the drop event fires (https://stackoverflow.com/questions/21339924/drop-event-not-firing-in-chrome)
-              if (this.callbacks.onDragOver) {
-                  this.callbacks.onDragOver(e);
-              }
-          }));
-          this.addDisposables(addDisposableListener(this.element, 'dragleave', (e) => {
-              this.counter--;
-              if (this.counter === 0) {
-                  this.callbacks.onDragLeave(e);
-              }
-          }));
-          this.addDisposables(addDisposableListener(this.element, 'dragend', (e) => {
-              this.counter = 0;
-              this.callbacks.onDragEnd(e);
-          }));
-          this.addDisposables(addDisposableListener(this.element, 'drop', (e) => {
-              this.counter = 0;
-              this.callbacks.onDrop(e);
-          }));
-      }
-  }
-
-  exports.Position = void 0;
-  (function (Position) {
-      Position["Top"] = "Top";
-      Position["Left"] = "Left";
-      Position["Bottom"] = "Bottom";
-      Position["Right"] = "Right";
-      Position["Center"] = "Center";
-  })(exports.Position || (exports.Position = {}));
-  function isBooleanValue(canDisplayOverlay) {
-      return typeof canDisplayOverlay === 'boolean';
-  }
-  class Droptarget extends CompositeDisposable {
-      constructor(element, options) {
-          super();
-          this.element = element;
-          this.options = options;
-          this._onDrop = new Emitter();
-          this.onDrop = this._onDrop.event;
-          this.addDisposables(this._onDrop, new DragAndDropObserver(this.element, {
-              onDragEnter: () => undefined,
-              onDragOver: (e) => {
-                  const width = this.element.clientWidth;
-                  const height = this.element.clientHeight;
-                  if (width === 0 || height === 0) {
-                      return; // avoid div!0
-                  }
-                  const x = e.offsetX;
-                  const y = e.offsetY;
-                  const xp = (100 * x) / width;
-                  const yp = (100 * y) / height;
-                  const quadrant = this.calculateQuadrant(this.options.validOverlays, xp, yp);
-                  if (isBooleanValue(this.options.canDisplayOverlay)) {
-                      if (!this.options.canDisplayOverlay) {
-                          return;
-                      }
-                  }
-                  else if (!this.options.canDisplayOverlay(e, quadrant)) {
-                      return;
-                  }
-                  if (!this.target) {
-                      this.target = document.createElement('div');
-                      this.target.className = 'drop-target-dropzone';
-                      this.overlay = document.createElement('div');
-                      this.overlay.className = 'drop-target-selection';
-                      this._state = exports.Position.Center;
-                      this.target.appendChild(this.overlay);
-                      this.element.classList.add('drop-target');
-                      this.element.append(this.target);
-                  }
-                  if (this.options.validOverlays === 'none') {
-                      return;
-                  }
-                  if (!this.target || !this.overlay) {
-                      return;
-                  }
-                  const isSmallX = width < 100;
-                  const isSmallY = height < 100;
-                  this.toggleClasses(quadrant, isSmallX, isSmallY);
-                  this.setState(quadrant);
-              },
-              onDragLeave: () => {
-                  this.removeDropTarget();
-              },
-              onDragEnd: () => {
-                  this.removeDropTarget();
-              },
-              onDrop: (e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  const state = this._state;
-                  this.removeDropTarget();
-                  if (state) {
-                      this._onDrop.fire({ position: state, nativeEvent: e });
-                  }
-              },
-          }));
-      }
-      get state() {
-          return this._state;
-      }
-      set validOverlays(value) {
-          this.options.validOverlays = value;
-      }
-      set canDisplayOverlay(value) {
-          this.options.canDisplayOverlay = value;
-      }
-      dispose() {
-          this.removeDropTarget();
-      }
-      toggleClasses(quadrant, isSmallX, isSmallY) {
-          if (!this.overlay) {
-              return;
-          }
-          const isLeft = quadrant === 'left';
-          const isRight = quadrant === 'right';
-          const isTop = quadrant === 'top';
-          const isBottom = quadrant === 'bottom';
-          toggleClass(this.overlay, 'right', !isSmallX && isRight);
-          toggleClass(this.overlay, 'left', !isSmallX && isLeft);
-          toggleClass(this.overlay, 'top', !isSmallY && isTop);
-          toggleClass(this.overlay, 'bottom', !isSmallY && isBottom);
-          toggleClass(this.overlay, 'small-right', isSmallX && isRight);
-          toggleClass(this.overlay, 'small-left', isSmallX && isLeft);
-          toggleClass(this.overlay, 'small-top', isSmallY && isTop);
-          toggleClass(this.overlay, 'small-bottom', isSmallY && isBottom);
-      }
-      setState(quadrant) {
-          switch (quadrant) {
-              case 'top':
-                  this._state = exports.Position.Top;
-                  break;
-              case 'left':
-                  this._state = exports.Position.Left;
-                  break;
-              case 'bottom':
-                  this._state = exports.Position.Bottom;
-                  break;
-              case 'right':
-                  this._state = exports.Position.Right;
-                  break;
-              default:
-                  this._state = exports.Position.Center;
-                  break;
-          }
-      }
-      calculateQuadrant(overlayType, xp, yp) {
-          switch (overlayType) {
-              case 'all':
-                  if (xp < 20) {
-                      return 'left';
-                  }
-                  if (xp > 80) {
-                      return 'right';
-                  }
-                  if (yp < 20) {
-                      return 'top';
-                  }
-                  if (yp > 80) {
-                      return 'bottom';
-                  }
-                  break;
-              case 'vertical':
-                  if (yp < 50) {
-                      return 'top';
-                  }
-                  return 'bottom';
-              case 'horizontal':
-                  if (xp < 50) {
-                      return 'left';
-                  }
-                  return 'right';
-          }
-          return null;
-      }
-      removeDropTarget() {
-          if (this.target) {
-              this._state = undefined;
-              this.element.removeChild(this.target);
-              this.target = undefined;
-              this.element.classList.remove('drop-target');
-          }
-      }
-  }
-
-  /*---------------------------------------------------------------------------------------------
-   * Accreditation: This file is largly based upon the MIT licenced VSCode sourcecode found at:
-   * https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/grid
-   *--------------------------------------------------------------------------------------------*/
-  class LeafNode {
-      constructor(view, orientation, orthogonalSize, size = 0) {
-          this.view = view;
-          this.orientation = orientation;
-          this._onDidChange = new Emitter();
-          this.onDidChange = this._onDidChange.event;
-          this._orthogonalSize = orthogonalSize;
-          this._size = size;
-          this._disposable = this.view.onDidChange((event) => {
-              if (event) {
-                  this._onDidChange.fire({
-                      size: this.orientation === exports.Orientation.VERTICAL
-                          ? event.width
-                          : event.height,
-                      orthogonalSize: this.orientation === exports.Orientation.VERTICAL
-                          ? event.height
-                          : event.width,
-                  });
-              }
-              else {
-                  this._onDidChange.fire({});
-              }
-          });
-      }
-      get minimumWidth() {
-          return this.view.minimumWidth;
-      }
-      get maximumWidth() {
-          return this.view.maximumWidth;
+      get maximumWidth() {
+          return this.view.maximumWidth;
       }
       get minimumHeight() {
           return this.view.minimumHeight;
@@ -1646,6 +1418,29 @@
               ? this.size
               : this.orthogonalSize;
       }
+      constructor(view, orientation, orthogonalSize, size = 0) {
+          this.view = view;
+          this.orientation = orientation;
+          this._onDidChange = new Emitter();
+          this.onDidChange = this._onDidChange.event;
+          this._orthogonalSize = orthogonalSize;
+          this._size = size;
+          this._disposable = this.view.onDidChange((event) => {
+              if (event) {
+                  this._onDidChange.fire({
+                      size: this.orientation === exports.Orientation.VERTICAL
+                          ? event.width
+                          : event.height,
+                      orthogonalSize: this.orientation === exports.Orientation.VERTICAL
+                          ? event.height
+                          : event.width,
+                  });
+              }
+              else {
+                  this._onDidChange.fire({});
+              }
+          });
+      }
       setVisible(visible) {
           if (this.view.setVisible) {
               this.view.setVisible(visible);
@@ -1668,53 +1463,6 @@
    * https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/grid
    *--------------------------------------------------------------------------------------------*/
   class BranchNode extends CompositeDisposable {
-      constructor(orientation, proportionalLayout, styles, size, orthogonalSize, childDescriptors) {
-          super();
-          this.orientation = orientation;
-          this.proportionalLayout = proportionalLayout;
-          this.styles = styles;
-          this.children = [];
-          this._onDidChange = new Emitter();
-          this.onDidChange = this._onDidChange.event;
-          this._childrenDisposable = Disposable.NONE;
-          this._orthogonalSize = orthogonalSize;
-          this._size = size;
-          this.element = document.createElement('div');
-          this.element.className = 'branch-node';
-          if (!childDescriptors) {
-              this.splitview = new Splitview(this.element, {
-                  orientation: this.orientation,
-                  proportionalLayout,
-                  styles,
-              });
-              this.splitview.layout(this.size, this.orthogonalSize);
-          }
-          else {
-              const descriptor = {
-                  views: childDescriptors.map((childDescriptor) => {
-                      return {
-                          view: childDescriptor.node,
-                          size: childDescriptor.node.size,
-                          visible: childDescriptor.node instanceof LeafNode &&
-                              childDescriptor.visible !== undefined
-                              ? childDescriptor.visible
-                              : true,
-                      };
-                  }),
-                  size: this.size,
-              };
-              this.children = childDescriptors.map((c) => c.node);
-              this.splitview = new Splitview(this.element, {
-                  orientation: this.orientation,
-                  descriptor,
-                  proportionalLayout,
-              });
-          }
-          this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => {
-              this._onDidChange.fire({});
-          }));
-          this.setupChildrenEvents();
-      }
       get width() {
           return this.orientation === exports.Orientation.HORIZONTAL
               ? this.size
@@ -1780,6 +1528,53 @@
           }
           return exports.LayoutPriority.Normal;
       }
+      constructor(orientation, proportionalLayout, styles, size, orthogonalSize, childDescriptors) {
+          super();
+          this.orientation = orientation;
+          this.proportionalLayout = proportionalLayout;
+          this.styles = styles;
+          this.children = [];
+          this._onDidChange = new Emitter();
+          this.onDidChange = this._onDidChange.event;
+          this._childrenDisposable = Disposable.NONE;
+          this._orthogonalSize = orthogonalSize;
+          this._size = size;
+          this.element = document.createElement('div');
+          this.element.className = 'branch-node';
+          if (!childDescriptors) {
+              this.splitview = new Splitview(this.element, {
+                  orientation: this.orientation,
+                  proportionalLayout,
+                  styles,
+              });
+              this.splitview.layout(this.size, this.orthogonalSize);
+          }
+          else {
+              const descriptor = {
+                  views: childDescriptors.map((childDescriptor) => {
+                      return {
+                          view: childDescriptor.node,
+                          size: childDescriptor.node.size,
+                          visible: childDescriptor.node instanceof LeafNode &&
+                              childDescriptor.visible !== undefined
+                              ? childDescriptor.visible
+                              : true,
+                      };
+                  }),
+                  size: this.size,
+              };
+              this.children = childDescriptors.map((c) => c.node);
+              this.splitview = new Splitview(this.element, {
+                  orientation: this.orientation,
+                  descriptor,
+                  proportionalLayout,
+              });
+          }
+          this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => {
+              this._onDidChange.fire({});
+          }));
+          this.setupChildrenEvents();
+      }
       setVisible(visible) {
           for (const child of this.children) {
               child.setVisible(visible);
@@ -1951,20 +1746,18 @@
       if (orientation === directionOrientation) {
           const [rest, _index] = tail(location);
           let index = _index;
-          if (direction === exports.Position.Right || direction === exports.Position.Bottom) {
+          if (direction === 'right' || direction === 'bottom') {
               index += 1;
           }
           return [...rest, index];
       }
       else {
-          const index = direction === exports.Position.Right || direction === exports.Position.Bottom
-              ? 1
-              : 0;
+          const index = direction === 'right' || direction === 'bottom' ? 1 : 0;
           return [...location, index];
       }
   }
   function getDirectionOrientation(direction) {
-      return direction === exports.Position.Top || direction === exports.Position.Bottom
+      return direction === 'top' || direction === 'bottom'
           ? exports.Orientation.VERTICAL
           : exports.Orientation.HORIZONTAL;
   }
@@ -1999,15 +1792,8 @@
       };
   };
   class Gridview {
-      constructor(proportionalLayout, styles, orientation) {
-          this.proportionalLayout = proportionalLayout;
-          this.styles = styles;
-          this.disposable = new MutableDisposable();
-          this._onDidChange = new Emitter();
-          this.onDidChange = this._onDidChange.event;
-          this.element = document.createElement('div');
-          this.element.className = 'grid-view';
-          this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0);
+      get length() {
+          return this._root ? this._root.children.length : 0;
       }
       serialize() {
           const root = serializeBranchNode(this.getView(), this.orientation);
@@ -2081,6 +1867,32 @@
               this._onDidChange.fire(e);
           });
       }
+      /**
+       * If the root is orientated as a VERTICAL node then nest the existing root within a new HORIZIONTAL root node
+       * If the root is orientated as a HORIZONTAL node then nest the existing root within a new VERITCAL root node
+       */
+      insertOrthogonalSplitviewAtRoot() {
+          if (!this._root) {
+              return;
+          }
+          const oldRoot = this.root;
+          oldRoot.element.remove();
+          this._root = new BranchNode(orthogonal(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size);
+          if (oldRoot.children.length === 1) {
+              // can remove one level of redundant branching if there is only a single child
+              const childReference = oldRoot.children[0];
+              oldRoot.removeChild(0); // remove to prevent disposal when disposing of unwanted root
+              oldRoot.dispose();
+              this._root.addChild(childReference, exports.Sizing.Distribute, 0);
+          }
+          else {
+              this._root.addChild(oldRoot, exports.Sizing.Distribute, 0);
+          }
+          this.element.appendChild(this._root.element);
+          this.disposable.value = this._root.onDidChange((e) => {
+              this._onDidChange.fire(e);
+          });
+      }
       next(location) {
           return this.progmaticSelect(location);
       }
@@ -2139,6 +1951,16 @@
       get maximumHeight() {
           return this.root.maximumHeight;
       }
+      constructor(proportionalLayout, styles, orientation) {
+          this.proportionalLayout = proportionalLayout;
+          this.styles = styles;
+          this.disposable = new MutableDisposable();
+          this._onDidChange = new Emitter();
+          this.onDidChange = this._onDidChange.event;
+          this.element = document.createElement('div');
+          this.element.className = 'grid-view';
+          this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0);
+      }
       isViewVisible(location) {
           const [rest, index] = tail(location);
           const [, parent] = this.getNode(rest);
@@ -2270,9 +2092,6 @@
   }
 
   class SplitviewApi {
-      constructor(component) {
-          this.component = component;
-      }
       get minimumSize() {
           return this.component.minimumSize;
       }
@@ -2306,6 +2125,9 @@
       get onDidRemoveView() {
           return this.component.onDidRemoveView;
       }
+      constructor(component) {
+          this.component = component;
+      }
       updateOptions(options) {
           this.component.updateOptions(options);
       }
@@ -2338,9 +2160,6 @@
       }
   }
   class PaneviewApi {
-      constructor(component) {
-          this.component = component;
-      }
       get minimumSize() {
           return this.component.minimumSize;
       }
@@ -2379,6 +2198,9 @@
           };
           return emitter.event;
       }
+      constructor(component) {
+          this.component = component;
+      }
       removePanel(panel) {
           this.component.removePanel(panel);
       }
@@ -2408,9 +2230,6 @@
       }
   }
   class GridviewApi {
-      constructor(component) {
-          this.component = component;
-      }
       get minimumHeight() {
           return this.component.minimumHeight;
       }
@@ -2453,6 +2272,9 @@
       set orientation(value) {
           this.component.updateOptions({ orientation: value });
       }
+      constructor(component) {
+          this.component = component;
+      }
       focus() {
           this.component.focus();
       }
@@ -2482,8 +2304,8 @@
       }
   }
   class DockviewApi {
-      constructor(component) {
-          this.component = component;
+      get id() {
+          return this.component.id;
       }
       get width() {
           return this.component.width;
@@ -2548,6 +2370,9 @@
       get activeGroup() {
           return this.component.activeGroup;
       }
+      constructor(component) {
+          this.component = component;
+      }
       getTabHeight() {
           return this.component.tabHeight;
       }
@@ -2566,8 +2391,8 @@
       addPanel(options) {
           return this.component.addPanel(options);
       }
-      addEmptyGroup(options) {
-          this.component.addEmptyGroup(options);
+      addGroup(options) {
+          return this.component.addGroup(options);
       }
       moveToNext(options) {
           this.component.moveToNext(options);
@@ -2595,7 +2420,293 @@
       }
   }
 
+  class DragAndDropObserver extends CompositeDisposable {
+      constructor(element, callbacks) {
+          super();
+          this.element = element;
+          this.callbacks = callbacks;
+          this.target = null;
+          this.registerListeners();
+      }
+      registerListeners() {
+          this.addDisposables(addDisposableListener(this.element, 'dragenter', (e) => {
+              this.target = e.target;
+              this.callbacks.onDragEnter(e);
+          }, true));
+          this.addDisposables(addDisposableListener(this.element, 'dragover', (e) => {
+              e.preventDefault(); // needed so that the drop event fires (https://stackoverflow.com/questions/21339924/drop-event-not-firing-in-chrome)
+              if (this.callbacks.onDragOver) {
+                  this.callbacks.onDragOver(e);
+              }
+          }, true));
+          this.addDisposables(addDisposableListener(this.element, 'dragleave', (e) => {
+              if (this.target === e.target) {
+                  this.target = null;
+                  this.callbacks.onDragLeave(e);
+              }
+          }));
+          this.addDisposables(addDisposableListener(this.element, 'dragend', (e) => {
+              this.target = null;
+              this.callbacks.onDragEnd(e);
+          }));
+          this.addDisposables(addDisposableListener(this.element, 'drop', (e) => {
+              this.callbacks.onDrop(e);
+          }));
+      }
+  }
+
+  function isBooleanValue(value) {
+      return typeof value === 'boolean';
+  }
+
+  function numberOrFallback(maybeNumber, fallback) {
+      return typeof maybeNumber === 'number' ? maybeNumber : fallback;
+  }
+  function directionToPosition(direction) {
+      switch (direction) {
+          case 'above':
+              return 'top';
+          case 'below':
+              return 'bottom';
+          case 'left':
+              return 'left';
+          case 'right':
+              return 'right';
+          case 'within':
+              return 'center';
+          default:
+              throw new Error(`invalid direction '${direction}'`);
+      }
+  }
+  function positionToDirection(position) {
+      switch (position) {
+          case 'top':
+              return 'above';
+          case 'bottom':
+              return 'below';
+          case 'left':
+              return 'left';
+          case 'right':
+              return 'right';
+          case 'center':
+              return 'within';
+          default:
+              throw new Error(`invalid position '${position}'`);
+      }
+  }
+  class Droptarget extends CompositeDisposable {
+      get state() {
+          return this._state;
+      }
+      constructor(element, options) {
+          super();
+          this.element = element;
+          this.options = options;
+          this._onDrop = new Emitter();
+          this.onDrop = this._onDrop.event;
+          // use a set to take advantage of #<set>.has
+          const acceptedTargetZonesSet = new Set(this.options.acceptedTargetZones);
+          this.addDisposables(this._onDrop, new DragAndDropObserver(this.element, {
+              onDragEnter: () => undefined,
+              onDragOver: (e) => {
+                  const width = this.element.clientWidth;
+                  const height = this.element.clientHeight;
+                  if (width === 0 || height === 0) {
+                      return; // avoid div!0
+                  }
+                  const rect = e.currentTarget.getBoundingClientRect();
+                  const x = e.clientX - rect.left;
+                  const y = e.clientY - rect.top;
+                  const quadrant = this.calculateQuadrant(acceptedTargetZonesSet, x, y, width, height);
+                  if (quadrant === null) {
+                      // no drop target should be displayed
+                      this.removeDropTarget();
+                      return;
+                  }
+                  if (isBooleanValue(this.options.canDisplayOverlay)) {
+                      if (!this.options.canDisplayOverlay) {
+                          return;
+                      }
+                  }
+                  else if (!this.options.canDisplayOverlay(e, quadrant)) {
+                      return;
+                  }
+                  if (!this.target) {
+                      this.target = document.createElement('div');
+                      this.target.className = 'drop-target-dropzone';
+                      this.overlay = document.createElement('div');
+                      this.overlay.className = 'drop-target-selection';
+                      this._state = 'center';
+                      this.target.appendChild(this.overlay);
+                      this.element.classList.add('drop-target');
+                      this.element.append(this.target);
+                  }
+                  if (this.options.acceptedTargetZones.length === 0) {
+                      return;
+                  }
+                  if (!this.target || !this.overlay) {
+                      return;
+                  }
+                  this.toggleClasses(quadrant, width, height);
+                  this.setState(quadrant);
+              },
+              onDragLeave: () => {
+                  this.removeDropTarget();
+              },
+              onDragEnd: () => {
+                  this.removeDropTarget();
+              },
+              onDrop: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  const state = this._state;
+                  this.removeDropTarget();
+                  if (state) {
+                      this._onDrop.fire({ position: state, nativeEvent: e });
+                  }
+              },
+          }));
+      }
+      dispose() {
+          this.removeDropTarget();
+      }
+      toggleClasses(quadrant, width, height) {
+          var _a, _b, _c, _d;
+          if (!this.overlay) {
+              return;
+          }
+          const isSmallX = width < 100;
+          const isSmallY = height < 100;
+          const isLeft = quadrant === 'left';
+          const isRight = quadrant === 'right';
+          const isTop = quadrant === 'top';
+          const isBottom = quadrant === 'bottom';
+          const rightClass = !isSmallX && isRight;
+          const leftClass = !isSmallX && isLeft;
+          const topClass = !isSmallY && isTop;
+          const bottomClass = !isSmallY && isBottom;
+          let size = 0.5;
+          if (((_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.type) === 'percentage') {
+              size = clamp(this.options.overlayModel.size.value, 0, 100) / 100;
+          }
+          if (((_d = (_c = this.options.overlayModel) === null || _c === void 0 ? void 0 : _c.size) === null || _d === void 0 ? void 0 : _d.type) === 'pixels') {
+              if (rightClass || leftClass) {
+                  size =
+                      clamp(0, this.options.overlayModel.size.value, width) /
+                          width;
+              }
+              if (topClass || bottomClass) {
+                  size =
+                      clamp(0, this.options.overlayModel.size.value, height) /
+                          height;
+              }
+          }
+          const translate = (1 - size) / 2;
+          const scale = size;
+          let transform;
+          if (rightClass) {
+              transform = `translateX(${100 * translate}%) scaleX(${scale})`;
+          }
+          else if (leftClass) {
+              transform = `translateX(-${100 * translate}%) scaleX(${scale})`;
+          }
+          else if (topClass) {
+              transform = `translateY(-${100 * translate}%) scaleY(${scale})`;
+          }
+          else if (bottomClass) {
+              transform = `translateY(${100 * translate}%) scaleY(${scale})`;
+          }
+          else {
+              transform = '';
+          }
+          this.overlay.style.transform = transform;
+          toggleClass(this.overlay, 'small-right', isSmallX && isRight);
+          toggleClass(this.overlay, 'small-left', isSmallX && isLeft);
+          toggleClass(this.overlay, 'small-top', isSmallY && isTop);
+          toggleClass(this.overlay, 'small-bottom', isSmallY && isBottom);
+      }
+      setState(quadrant) {
+          switch (quadrant) {
+              case 'top':
+                  this._state = 'top';
+                  break;
+              case 'left':
+                  this._state = 'left';
+                  break;
+              case 'bottom':
+                  this._state = 'bottom';
+                  break;
+              case 'right':
+                  this._state = 'right';
+                  break;
+              case 'center':
+                  this._state = 'center';
+                  break;
+          }
+      }
+      calculateQuadrant(overlayType, x, y, width, height) {
+          var _a, _b, _c, _d, _e, _f;
+          const isPercentage = ((_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.activationSize) === undefined ||
+              ((_c = (_b = this.options.overlayModel) === null || _b === void 0 ? void 0 : _b.activationSize) === null || _c === void 0 ? void 0 : _c.type) === 'percentage';
+          const value = numberOrFallback((_f = (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.overlayModel) === null || _e === void 0 ? void 0 : _e.activationSize) === null || _f === void 0 ? void 0 : _f.value, 20);
+          if (isPercentage) {
+              return calculateQuadrantAsPercentage(overlayType, x, y, width, height, value);
+          }
+          return calculateQuadrantAsPixels(overlayType, x, y, width, height, value);
+      }
+      removeDropTarget() {
+          if (this.target) {
+              this._state = undefined;
+              this.element.removeChild(this.target);
+              this.target = undefined;
+              this.overlay = undefined;
+              this.element.classList.remove('drop-target');
+          }
+      }
+  }
+  function calculateQuadrantAsPercentage(overlayType, x, y, width, height, threshold) {
+      const xp = (100 * x) / width;
+      const yp = (100 * y) / height;
+      if (overlayType.has('left') && xp < threshold) {
+          return 'left';
+      }
+      if (overlayType.has('right') && xp > 100 - threshold) {
+          return 'right';
+      }
+      if (overlayType.has('top') && yp < threshold) {
+          return 'top';
+      }
+      if (overlayType.has('bottom') && yp > 100 - threshold) {
+          return 'bottom';
+      }
+      if (!overlayType.has('center')) {
+          return null;
+      }
+      return 'center';
+  }
+  function calculateQuadrantAsPixels(overlayType, x, y, width, height, threshold) {
+      if (overlayType.has('left') && x < threshold) {
+          return 'left';
+      }
+      if (overlayType.has('right') && x > width - threshold) {
+          return 'right';
+      }
+      if (overlayType.has('top') && y < threshold) {
+          return 'top';
+      }
+      if (overlayType.has('bottom') && y > height - threshold) {
+          return 'bottom';
+      }
+      if (!overlayType.has('center')) {
+          return null;
+      }
+      return 'center';
+  }
+
   class ContentContainer extends CompositeDisposable {
+      get element() {
+          return this._element;
+      }
       constructor() {
           super();
           this.disposable = new MutableDisposable();
@@ -2613,9 +2724,6 @@
           // 3) register dragEnd events
           // 4) register mouseMove events (if no buttons are present we take this as a dragEnd event)
       }
-      get element() {
-          return this._element;
-      }
       show() {
           this.element.style.display = '';
       }
@@ -2671,6 +2779,7 @@
       DockviewDropTargets[DockviewDropTargets["Tab"] = 0] = "Tab";
       DockviewDropTargets[DockviewDropTargets["Panel"] = 1] = "Panel";
       DockviewDropTargets[DockviewDropTargets["TabContainer"] = 2] = "TabContainer";
+      DockviewDropTargets[DockviewDropTargets["Edge"] = 3] = "Edge";
   })(exports.DockviewDropTargets || (exports.DockviewDropTargets = {}));
 
   class DragHandler extends CompositeDisposable {
@@ -2692,9 +2801,9 @@
               for (const iframe of this.iframes) {
                   iframe.style.pointerEvents = 'none';
               }
-              this.el.classList.add('dragged');
-              setTimeout(() => this.el.classList.remove('dragged'), 0);
-              this.disposable.value = this.getData();
+              this.el.classList.add('dv-dragged');
+              setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
+              this.disposable.value = this.getData(event.dataTransfer);
               if (event.dataTransfer) {
                   event.dataTransfer.effectAllowed = 'move';
               }
@@ -2708,11 +2817,10 @@
       }
   }
 
-  exports.MouseEventKind = void 0;
-  (function (MouseEventKind) {
-      MouseEventKind["CLICK"] = "CLICK";
-  })(exports.MouseEventKind || (exports.MouseEventKind = {}));
   class Tab extends CompositeDisposable {
+      get element() {
+          return this._element;
+      }
       constructor(panelId, accessor, group) {
           super();
           this.panelId = panelId;
@@ -2756,25 +2864,30 @@
                * on the tabs-container. I cannot use event.preventDefault() since I need the on DragStart event to occur
                */
               event.stopPropagation();
-              this._onChanged.fire({ kind: exports.MouseEventKind.CLICK, event });
+              this._onChanged.fire(event);
           }));
           this.droptarget = new Droptarget(this._element, {
-              validOverlays: 'none',
-              canDisplayOverlay: (event) => {
+              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.panelId !== data.panelId;
                   }
-                  return this.group.model.canDisplayOverlay(event, exports.DockviewDropTargets.Tab);
+                  return this.group.model.canDisplayOverlay(event, position, exports.DockviewDropTargets.Tab);
               },
           });
           this.addDisposables(this.droptarget.onDrop((event) => {
               this._onDropped.fire(event);
           }));
       }
-      get element() {
-          return this._element;
-      }
       setActive(isActive) {
           toggleClass(this.element, 'active-tab', isActive);
           toggleClass(this.element, 'inactive-tab', !isActive);
@@ -2792,56 +2905,94 @@
       }
   }
 
-  class TabsContainer extends CompositeDisposable {
-      constructor(accessor, group, options) {
+  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(() => {
+          ghostElement.remove();
+      }, 0);
+  }
+
+  class GroupDragHandler extends DragHandler {
+      constructor(element, accessorId, group) {
+          super(element);
+          this.accessorId = accessorId;
+          this.group = group;
+          this.panelTransfer = LocalSelectionTransfer.getInstance();
+      }
+      getData(dataTransfer) {
+          this.panelTransfer.setData([new PanelTransfer(this.accessorId, 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);
+              },
+          };
+      }
+      dispose() {
+          //
+      }
+  }
+
+  class VoidContainer extends CompositeDisposable {
+      get element() {
+          return this._element;
+      }
+      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.addDisposables(this._onDrop);
           this._element = document.createElement('div');
-          this._element.className = 'tabs-and-actions-container';
-          this.height = options.tabHeight;
-          this.actionContainer = document.createElement('div');
-          this.actionContainer.className = 'action-container';
-          this.tabContainer = document.createElement('div');
-          this.tabContainer.className = 'tabs-container';
-          this.voidContainer = document.createElement('div');
-          this.voidContainer.className = 'void-container';
-          this._element.appendChild(this.tabContainer);
-          this._element.appendChild(this.voidContainer);
-          this._element.appendChild(this.actionContainer);
-          this.voidDropTarget = new Droptarget(this.voidContainer, {
-              validOverlays: 'none',
-              canDisplayOverlay: (event) => {
+          this._element.className = 'void-container';
+          this._element.tabIndex = 0;
+          this._element.draggable = true;
+          this.addDisposables(this._onDrop, addDisposableListener(this._element, 'click', () => {
+              this.accessor.doSetGroupActive(this.group);
+          }));
+          const handler = new GroupDragHandler(this._element, accessor.id, group);
+          this.voidDropTarget = 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.tabs)) === null || _a === void 0 ? void 0 : _a.value.panelId) !== data.panelId;
+                      return ((_a = last(this.group.panels)) === null || _a === void 0 ? void 0 : _a.id) !== data.panelId;
                   }
-                  return group.model.canDisplayOverlay(event, exports.DockviewDropTargets.Panel);
+                  return group.model.canDisplayOverlay(event, position, exports.DockviewDropTargets.Panel);
               },
           });
-          this.addDisposables(this.voidDropTarget.onDrop((event) => {
-              this._onDrop.fire({
-                  event: event.nativeEvent,
-                  index: this.tabs.length,
-              });
-          }), this.voidDropTarget, addDisposableListener(this.tabContainer, 'mousedown', (event) => {
-              if (event.defaultPrevented) {
-                  return;
-              }
-              const isLeftClick = event.button === 0;
-              if (isLeftClick) {
-                  this.accessor.doSetGroupActive(this.group);
-              }
-          }));
+          this.addDisposables(handler, this.voidDropTarget.onDrop((event) => {
+              this._onDrop.fire(event);
+          }), this.voidDropTarget);
       }
+  }
+
+  class TabsContainer extends CompositeDisposable {
       get panels() {
           return this.tabs.map((_) => _.value.panelId);
       }
@@ -2902,6 +3053,52 @@
       indexOf(id) {
           return this.tabs.findIndex((tab) => tab.value.panelId === 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.addDisposables(this._onDrop);
+          this._element = document.createElement('div');
+          this._element.className = 'tabs-and-actions-container';
+          this.height = accessor.options.tabHeight;
+          toggleClass(this._element, 'dv-full-width-single-tab', this.accessor.options.singleTabMode === 'fullwidth');
+          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.actionContainer = document.createElement('div');
+          this.actionContainer.className = 'action-container';
+          this.tabContainer = document.createElement('div');
+          this.tabContainer.className = 'tabs-container';
+          this.voidContainer = new VoidContainer(this.accessor, this.group);
+          this._element.appendChild(this.tabContainer);
+          this._element.appendChild(this.voidContainer.element);
+          this._element.appendChild(this.actionContainer);
+          this.addDisposables(this.voidContainer, this.voidContainer.onDrop((event) => {
+              this._onDrop.fire({
+                  event: event.nativeEvent,
+                  index: this.tabs.length,
+              });
+          }), addDisposableListener(this.tabContainer, 'mousedown', (event) => {
+              if (event.defaultPrevented) {
+                  return;
+              }
+              const isLeftClick = event.button === 0;
+              if (isLeftClick) {
+                  this.accessor.doSetGroupActive(this.group);
+              }
+          }));
+      }
       setActive(_isGroupActive) {
           // noop
       }
@@ -2946,15 +3143,13 @@
               var _a;
               const alreadyFocused = panel.id === ((_a = this.group.model.activePanel) === null || _a === void 0 ? void 0 : _a.id) &&
                   this.group.model.isContentFocused;
-              const isLeftClick = event.event.button === 0;
-              if (!isLeftClick || event.event.defaultPrevented) {
+              const isLeftClick = event.button === 0;
+              if (!isLeftClick || event.defaultPrevented) {
                   return;
               }
-              if (event.kind === exports.MouseEventKind.CLICK) {
-                  this.group.model.openPanel(panel, {
-                      skipFocus: alreadyFocused,
-                  });
-              }
+              this.group.model.openPanel(panel, {
+                  skipFocus: alreadyFocused,
+              });
           }), tabToAdd.onDrop((event) => {
               this._onDrop.fire({
                   event: event.nativeEvent,
@@ -2977,63 +3172,6 @@
   }
 
   class Groupview extends CompositeDisposable {
-      constructor(container, accessor, id, options, parent) {
-          super();
-          this.container = container;
-          this.accessor = accessor;
-          this.id = id;
-          this.options = options;
-          this.parent = parent;
-          this._isGroupActive = false;
-          this._locked = false;
-          this.mostRecentlyUsed = [];
-          this._onDidChange = new Emitter();
-          this.onDidChange = this._onDidChange.event;
-          this._width = 0;
-          this._height = 0;
-          this._panels = [];
-          this._onMove = new Emitter();
-          this.onMove = this._onMove.event;
-          this._onDidDrop = new Emitter();
-          this.onDidDrop = this._onDidDrop.event;
-          this._onDidAddPanel = new Emitter();
-          this.onDidAddPanel = this._onDidAddPanel.event;
-          this._onDidRemovePanel = new Emitter();
-          this.onDidRemovePanel = this._onDidRemovePanel.event;
-          this._onDidActivePanelChange = new Emitter();
-          this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-          this.container.classList.add('groupview');
-          this.tabsContainer = new TabsContainer(this.accessor, this.parent, {
-              tabHeight: options.tabHeight,
-          });
-          this.contentContainer = new ContentContainer();
-          this.dropTarget = new Droptarget(this.contentContainer.element, {
-              validOverlays: 'all',
-              canDisplayOverlay: (event, quadrant) => {
-                  if (this.locked && !quadrant) {
-                      return false;
-                  }
-                  const data = getPanelData();
-                  if (data && data.viewId === this.accessor.id) {
-                      const groupHasOnePanelAndIsActiveDragElement = this._panels.length === 1 && data.groupId === this.id;
-                      return !groupHasOnePanelAndIsActiveDragElement;
-                  }
-                  return this.canDisplayOverlay(event, exports.DockviewDropTargets.Panel);
-              },
-          });
-          container.append(this.tabsContainer.element, this.contentContainer.element);
-          this.header.hidden = !!options.hideHeader;
-          this.locked = !!options.locked;
-          this.addDisposables(this._onMove, this._onDidChange, this._onDidDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange, this.tabsContainer.onDrop((event) => {
-              this.handleDropEvent(event.event, exports.Position.Center, event.index);
-          }), this.contentContainer.onDidFocus(() => {
-              this.accessor.doSetGroupActive(this.parent, true);
-          }), this.contentContainer.onDidBlur(() => {
-              // noop
-          }), this.dropTarget.onDrop((event) => {
-              this.handleDropEvent(event.nativeEvent, event.position);
-          }));
-      }
       get element() {
           throw new Error('not supported');
       }
@@ -3045,6 +3183,7 @@
       }
       set locked(value) {
           this._locked = value;
+          toggleClass(this.container, 'locked-groupview', value);
       }
       get isActive() {
           return this._isGroupActive;
@@ -3082,6 +3221,71 @@
           }
           return isAncestor(document.activeElement, this.contentContainer.element);
       }
+      constructor(container, accessor, id, options, groupPanel) {
+          super();
+          this.container = container;
+          this.accessor = accessor;
+          this.id = id;
+          this.options = options;
+          this.groupPanel = groupPanel;
+          this._isGroupActive = false;
+          this._locked = false;
+          this.mostRecentlyUsed = [];
+          this._onDidChange = new Emitter();
+          this.onDidChange = this._onDidChange.event;
+          this._width = 0;
+          this._height = 0;
+          this._panels = [];
+          this._onMove = new Emitter();
+          this.onMove = this._onMove.event;
+          this._onDidDrop = new Emitter();
+          this.onDidDrop = this._onDidDrop.event;
+          this._onDidAddPanel = new Emitter();
+          this.onDidAddPanel = this._onDidAddPanel.event;
+          this._onDidRemovePanel = new Emitter();
+          this.onDidRemovePanel = this._onDidRemovePanel.event;
+          this._onDidActivePanelChange = new Emitter();
+          this.onDidActivePanelChange = this._onDidActivePanelChange.event;
+          this.container.classList.add('groupview');
+          this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
+          this.contentContainer = new ContentContainer();
+          this.dropTarget = new Droptarget(this.contentContainer.element, {
+              acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
+              canDisplayOverlay: (event, position) => {
+                  if (this.locked && position === 'center') {
+                      return false;
+                  }
+                  const data = getPanelData();
+                  if (data && data.viewId === this.accessor.id) {
+                      if (data.groupId === this.id) {
+                          if (position === 'center') {
+                              // don't allow to drop on self for center position
+                              return false;
+                          }
+                          if (data.panelId === null) {
+                              // don't allow group move to drop anywhere on self
+                              return false;
+                          }
+                      }
+                      const groupHasOnePanelAndIsActiveDragElement = this._panels.length === 1 && data.groupId === this.id;
+                      return !groupHasOnePanelAndIsActiveDragElement;
+                  }
+                  return this.canDisplayOverlay(event, position, exports.DockviewDropTargets.Panel);
+              },
+          });
+          container.append(this.tabsContainer.element, this.contentContainer.element);
+          this.header.hidden = !!options.hideHeader;
+          this.locked = !!options.locked;
+          this.addDisposables(this._onMove, this._onDidChange, this._onDidDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange, this.tabsContainer.onDrop((event) => {
+              this.handleDropEvent(event.event, 'center', event.index);
+          }), this.contentContainer.onDidFocus(() => {
+              this.accessor.doSetGroupActive(this.groupPanel, true);
+          }), this.contentContainer.onDidBlur(() => {
+              // noop
+          }), this.dropTarget.onDrop((event) => {
+              this.handleDropEvent(event.nativeEvent, event.position);
+          }));
+      }
       initialize() {
           var _a, _b;
           if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.panels) {
@@ -3097,11 +3301,11 @@
           this.setActive(this.isActive, true, true);
           this.updateContainer();
           if (this.accessor.options.createGroupControlElement) {
-              this._control = this.accessor.options.createGroupControlElement(this.parent);
+              this._control = this.accessor.options.createGroupControlElement(this.groupPanel);
               this.addDisposables(this._control);
               this._control.init({
                   containerApi: new DockviewApi(this.accessor),
-                  api: this.parent.api,
+                  api: this.groupPanel.api,
               });
               this.tabsContainer.setActionElement(this._control.element);
           }
@@ -3188,10 +3392,10 @@
           const skipSetPanelActive = !!options.skipSetPanelActive;
           const skipSetGroupActive = !!options.skipSetGroupActive;
           // ensure the group is updated before we fire any events
-          panel.updateParentGroup(this.parent, true);
+          panel.updateParentGroup(this.groupPanel, true);
           if (this._activePanel === panel) {
               if (!skipSetGroupActive) {
-                  this.accessor.doSetGroupActive(this.parent);
+                  this.accessor.doSetGroupActive(this.groupPanel);
               }
               return;
           }
@@ -3200,7 +3404,7 @@
               this.doSetActivePanel(panel);
           }
           if (!skipSetGroupActive) {
-              this.accessor.doSetGroupActive(this.parent, !!options.skipFocus);
+              this.accessor.doSetGroupActive(this.groupPanel, !!options.skipFocus);
           }
           this.updateContainer();
       }
@@ -3223,7 +3427,7 @@
               }
           }
           else {
-              this.accessor.removeGroup(this.parent);
+              this.accessor.removeGroup(this.groupPanel);
           }
       }
       closePanel(panel) {
@@ -3328,7 +3532,7 @@
       }
       updateContainer() {
           toggleClass(this.container, 'empty', this.isEmpty);
-          this.panels.forEach((panel) => panel.updateParentGroup(this.parent, this.isActive));
+          this.panels.forEach((panel) => panel.updateParentGroup(this.groupPanel, this.isActive));
           if (this.isEmpty && !this.watermark) {
               const watermark = this.accessor.createWatermarkComponent();
               watermark.init({
@@ -3340,29 +3544,28 @@
               this.watermark = watermark;
               addDisposableListener(this.watermark.element, 'click', () => {
                   if (!this.isActive) {
-                      this.accessor.doSetGroupActive(this.parent);
+                      this.accessor.doSetGroupActive(this.groupPanel);
                   }
               });
-              this.contentContainer.hide();
               this.tabsContainer.hide();
-              this.container.appendChild(this.watermark.element);
-              this.watermark.updateParentGroup(this.parent, true);
+              this.contentContainer.element.appendChild(this.watermark.element);
+              this.watermark.updateParentGroup(this.groupPanel, true);
           }
           if (!this.isEmpty && this.watermark) {
               this.watermark.element.remove();
               this.watermark.dispose();
               this.watermark = undefined;
-              this.contentContainer.show();
               this.tabsContainer.show();
           }
       }
-      canDisplayOverlay(event, target) {
+      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,
               });
           }
@@ -3370,7 +3573,17 @@
       }
       handleDropEvent(event, position, index) {
           const data = getPanelData();
-          if (data) {
+          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;
@@ -3416,45 +3629,19 @@
   function toTarget(direction) {
       switch (direction) {
           case 'left':
-              return exports.Position.Left;
+              return 'left';
           case 'right':
-              return exports.Position.Right;
+              return 'right';
           case 'above':
-              return exports.Position.Top;
+              return 'top';
           case 'below':
-              return exports.Position.Bottom;
+              return 'bottom';
           case 'within':
           default:
-              return exports.Position.Center;
+              return 'center';
       }
   }
   class BaseGrid extends CompositeDisposable {
-      constructor(_element, options) {
-          super();
-          this._element = _element;
-          this._id = nextLayoutId$1.next();
-          this._groups = new Map();
-          this._onDidLayoutChange = new Emitter();
-          this.onDidLayoutChange = this._onDidLayoutChange.event;
-          this._onDidRemoveGroup = new Emitter();
-          this.onDidRemoveGroup = this._onDidRemoveGroup.event;
-          this._onDidAddGroup = new Emitter();
-          this.onDidAddGroup = this._onDidAddGroup.event;
-          this._onDidActiveGroupChange = new Emitter();
-          this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
-          this._bufferOnDidLayoutChange = new TickDelayedEvent();
-          this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation);
-          this.element.appendChild(this.gridview.element);
-          this.layout(0, 0, true); // set some elements height/widths
-          this.addDisposables(this.gridview.onDidChange(() => {
-              this._bufferOnDidLayoutChange.fire();
-          }));
-          this.addDisposables(exports.Event.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
-              this._bufferOnDidLayoutChange.fire();
-          }), this._bufferOnDidLayoutChange.onEvent(() => {
-              this._onDidLayoutChange.fire();
-          }), this._bufferOnDidLayoutChange);
-      }
       get id() {
           return this._id;
       }
@@ -3488,6 +3675,32 @@
       get activeGroup() {
           return this._activeGroup;
       }
+      constructor(_element, options) {
+          super();
+          this._element = _element;
+          this._id = nextLayoutId$1.next();
+          this._groups = new Map();
+          this._onDidLayoutChange = new Emitter();
+          this.onDidLayoutChange = this._onDidLayoutChange.event;
+          this._onDidRemoveGroup = new Emitter();
+          this.onDidRemoveGroup = this._onDidRemoveGroup.event;
+          this._onDidAddGroup = new Emitter();
+          this.onDidAddGroup = this._onDidAddGroup.event;
+          this._onDidActiveGroupChange = new Emitter();
+          this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
+          this._bufferOnDidLayoutChange = new TickDelayedEvent();
+          this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation);
+          this.element.appendChild(this.gridview.element);
+          this.layout(0, 0, true); // set some elements height/widths
+          this.addDisposables(this.gridview.onDidChange(() => {
+              this._bufferOnDidLayoutChange.fire();
+          }));
+          this.addDisposables(exports.Event.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
+              this._bufferOnDidLayoutChange.fire();
+          }), this._bufferOnDidLayoutChange.onEvent(() => {
+              this._onDidLayoutChange.fire();
+          }), this._bufferOnDidLayoutChange);
+      }
       setVisible(panel, visible) {
           this.gridview.setViewVisible(getGridLocation(panel.element), visible);
           this._onDidLayoutChange.fire();
@@ -3596,10 +3809,51 @@
       }
   }
 
+  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;
+  }
+
   /**
    * A core api implementation that should be used across all panel-like objects
    */
   class PanelApiImpl extends CompositeDisposable {
+      //
+      get isFocused() {
+          return this._isFocused;
+      }
+      get isActive() {
+          return this._isActive;
+      }
+      get isVisible() {
+          return this._isVisible;
+      }
+      get width() {
+          return this._width;
+      }
+      get height() {
+          return this._height;
+      }
       constructor(id) {
           super();
           this.id = id;
@@ -3608,6 +3862,7 @@
           this._isVisible = true;
           this._width = 0;
           this._height = 0;
+          this.panelUpdatesDisposable = new MutableDisposable();
           this._onDidDimensionChange = new Emitter({
               replay: true,
           });
@@ -3636,32 +3891,28 @@
           //
           this._onActiveChange = new Emitter();
           this.onActiveChange = this._onActiveChange.event;
-          this.addDisposables(this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this.onDidFocusChange((event) => {
+          //
+          this._onUpdateParameters = new Emitter();
+          this.onUpdateParameters = this._onUpdateParameters.event;
+          this.addDisposables(this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this._onUpdateParameters, 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;
-          }));
-      }
-      //
-      get isFocused() {
-          return this._isFocused;
-      }
-      get isActive() {
-          return this._isActive;
-      }
-      get isVisible() {
-          return this._isVisible;
-      }
-      get width() {
-          return this._width;
+          }), this.onDidDimensionsChange((event) => {
+              this._width = event.width;
+              this._height = event.height;
+          }));
       }
-      get height() {
-          return this._height;
+      initialize(panel) {
+          this.panelUpdatesDisposable.value = this._onUpdateParameters.event((parameters) => {
+              panel.update({
+                  params: {
+                      params: parameters,
+                  },
+              });
+          });
       }
       setVisible(isVisible) {
           this._onVisibilityChange.fire({ isVisible });
@@ -3669,26 +3920,29 @@
       setActive() {
           this._onActiveChange.fire();
       }
+      updateParameters(parameters) {
+          this._onUpdateParameters.fire(parameters);
+      }
       dispose() {
           super.dispose();
       }
   }
 
   class GridviewPanelApiImpl extends PanelApiImpl {
-      //
-      constructor(id) {
+      constructor(id, panel) {
           super(id);
           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);
+          if (panel) {
+              this.initialize(panel);
+          }
       }
       setConstraints(value) {
           this._onDidConstraintsChangeInternal.fire(value);
@@ -3699,19 +3953,6 @@
   }
 
   class DockviewPanelApiImpl extends GridviewPanelApiImpl {
-      constructor(panel, group) {
-          super(panel.id);
-          this.panel = panel;
-          this._onDidTitleChange = new Emitter();
-          this.onDidTitleChange = this._onDidTitleChange.event;
-          this._onDidActiveGroupChange = new Emitter();
-          this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
-          this._onDidGroupChange = new Emitter();
-          this.onDidGroupChange = this._onDidGroupChange.event;
-          this.disposable = new MutableDisposable();
-          this._group = group;
-          this.addDisposables(this.disposable, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange);
-      }
       get title() {
           return this.panel.title;
       }
@@ -3735,30 +3976,29 @@
       get group() {
           return this._group;
       }
+      constructor(panel, group) {
+          super(panel.id);
+          this.panel = panel;
+          this._onDidTitleChange = new Emitter();
+          this.onDidTitleChange = this._onDidTitleChange.event;
+          this._onDidActiveGroupChange = new Emitter();
+          this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
+          this._onDidGroupChange = new Emitter();
+          this.onDidGroupChange = this._onDidGroupChange.event;
+          this.disposable = new MutableDisposable();
+          this.initialize(panel);
+          this._group = group;
+          this.addDisposables(this.disposable, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange);
+      }
       setTitle(title) {
-          this._onDidTitleChange.fire({ title });
+          this.panel.update({ params: { title } });
       }
       close() {
-          if (!this.group) {
-              throw new Error(`panel ${this.id} has no group`);
-          }
-          return this.group.model.closePanel(this.panel);
+          this.group.model.closePanel(this.panel);
       }
   }
 
-  class DockviewGroupPanel extends CompositeDisposable {
-      constructor(id, accessor, containerApi, group) {
-          super();
-          this.id = id;
-          this.containerApi = containerApi;
-          this.mutableDisposable = new MutableDisposable();
-          this._title = '';
-          this._group = group;
-          this.api = new DockviewPanelApiImpl(this, this._group);
-          this.addDisposables(this.api.onActiveChange(() => {
-              accessor.setActivePanel(this);
-          }));
-      }
+  class DockviewPanel extends CompositeDisposable {
       get params() {
           return this._params;
       }
@@ -3771,6 +4011,22 @@
       get view() {
           return this._view;
       }
+      constructor(id, accessor, containerApi, group) {
+          super();
+          this.id = id;
+          this.containerApi = containerApi;
+          this.mutableDisposable = new MutableDisposable();
+          this._title = '';
+          this._group = group;
+          this.api = new DockviewPanelApiImpl(this, this._group);
+          this.addDisposables(this.api.onActiveChange(() => {
+              accessor.setActivePanel(this);
+          }), this.api.onDidSizeChange((event) => {
+              // forward the resize event to the group since if you want to resize a panel
+              // you are actually just resizing the panels parent which is the group
+              this.group.api.setSize(event);
+          }));
+      }
       init(params) {
           var _a;
           this._params = params.params;
@@ -3853,6 +4109,9 @@
   }
 
   class ActionContainer {
+      get element() {
+          return this._element;
+      }
       constructor() {
           this._element = document.createElement('div');
           this._element.className = 'actions-bar';
@@ -3860,9 +4119,6 @@
           this._list.className = 'actions-container';
           this._element.appendChild(this._list);
       }
-      get element() {
-          return this._element;
-      }
       add(element) {
           const listItem = document.createElement('li');
           listItem.className = 'action-item';
@@ -3903,6 +4159,9 @@
   });
 
   class Watermark extends CompositeDisposable {
+      get id() {
+          return 'watermark';
+      }
       constructor() {
           super();
           this._element = document.createElement('div');
@@ -3930,9 +4189,6 @@
               }
           }));
       }
-      get id() {
-          return 'watermark';
-      }
       update(_event) {
           // noop
       }
@@ -3995,6 +4251,12 @@
 
   const DEFAULT_TAB_IDENTIFIER = '__default__tab__';
   class DefaultTab extends CompositeDisposable {
+      get element() {
+          return this._element;
+      }
+      get id() {
+          return DEFAULT_TAB_IDENTIFIER;
+      }
       constructor() {
           super();
           this._isPanelVisible = false;
@@ -4027,12 +4289,6 @@
           }));
           this.render();
       }
-      get element() {
-          return this._element;
-      }
-      get id() {
-          return DEFAULT_TAB_IDENTIFIER;
-      }
       update(event) {
           this.params = Object.assign(Object.assign({}, this.params), event.params);
           this.render();
@@ -4071,6 +4327,19 @@
   }
 
   class BasePanelView extends CompositeDisposable {
+      get element() {
+          return this._element;
+      }
+      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.id = id;
@@ -4091,19 +4360,6 @@
               this.api._onDidChangeFocus.fire({ isFocused: false });
           }));
       }
-      get element() {
-          return this._element;
-      }
-      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;
-      }
       focus() {
           this.api._onFocusEvent.fire();
       }
@@ -4144,50 +4400,6 @@
   }
 
   class GridviewPanel extends BasePanelView {
-      constructor(id, component, api = new GridviewPanelApiImpl(id)) {
-          super(id, component, api);
-          this._evaluatedMinimumWidth = 0;
-          this._evaluatedMaximumWidth = Number.MAX_SAFE_INTEGER;
-          this._evaluatedMinimumHeight = 0;
-          this._evaluatedMaximumHeight = Number.MAX_SAFE_INTEGER;
-          this._minimumWidth = 0;
-          this._minimumHeight = 0;
-          this._maximumWidth = Number.MAX_SAFE_INTEGER;
-          this._maximumHeight = Number.MAX_SAFE_INTEGER;
-          this._snap = false;
-          this._onDidChange = new Emitter();
-          this.onDidChange = this._onDidChange.event;
-          this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
-              const { isVisible } = event;
-              const { accessor } = this._params;
-              accessor.setVisible(this, isVisible);
-          }), this.api.onActiveChange(() => {
-              const { accessor } = this._params;
-              accessor.setActive(this);
-          }), this.api.onDidConstraintsChangeInternal((event) => {
-              if (typeof event.minimumWidth === 'number' ||
-                  typeof event.minimumWidth === 'function') {
-                  this._minimumWidth = event.minimumWidth;
-              }
-              if (typeof event.minimumHeight === 'number' ||
-                  typeof event.minimumHeight === 'function') {
-                  this._minimumHeight = event.minimumHeight;
-              }
-              if (typeof event.maximumWidth === 'number' ||
-                  typeof event.maximumWidth === 'function') {
-                  this._maximumWidth = event.maximumWidth;
-              }
-              if (typeof event.maximumHeight === 'number' ||
-                  typeof event.maximumHeight === 'function') {
-                  this._maximumHeight = event.maximumHeight;
-              }
-          }), this.api.onDidSizeChange((event) => {
-              this._onDidChange.fire({
-                  height: event.height,
-                  width: event.width,
-              });
-          }));
-      }
       get priority() {
           return this._priority;
       }
@@ -4237,6 +4449,51 @@
       get isActive() {
           return this.api.isActive;
       }
+      constructor(id, component, api) {
+          super(id, component, api);
+          this._evaluatedMinimumWidth = 0;
+          this._evaluatedMaximumWidth = Number.MAX_SAFE_INTEGER;
+          this._evaluatedMinimumHeight = 0;
+          this._evaluatedMaximumHeight = Number.MAX_SAFE_INTEGER;
+          this._minimumWidth = 0;
+          this._minimumHeight = 0;
+          this._maximumWidth = Number.MAX_SAFE_INTEGER;
+          this._maximumHeight = Number.MAX_SAFE_INTEGER;
+          this._snap = false;
+          this._onDidChange = new Emitter();
+          this.onDidChange = this._onDidChange.event;
+          this.api.initialize(this); // TODO: required to by-pass 'super before this' requirement
+          this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
+              const { isVisible } = event;
+              const { accessor } = this._params;
+              accessor.setVisible(this, isVisible);
+          }), this.api.onActiveChange(() => {
+              const { accessor } = this._params;
+              accessor.setActive(this);
+          }), this.api.onDidConstraintsChangeInternal((event) => {
+              if (typeof event.minimumWidth === 'number' ||
+                  typeof event.minimumWidth === 'function') {
+                  this._minimumWidth = event.minimumWidth;
+              }
+              if (typeof event.minimumHeight === 'number' ||
+                  typeof event.minimumHeight === 'function') {
+                  this._minimumHeight = event.minimumHeight;
+              }
+              if (typeof event.maximumWidth === 'number' ||
+                  typeof event.maximumWidth === 'function') {
+                  this._maximumWidth = event.maximumWidth;
+              }
+              if (typeof event.maximumHeight === 'number' ||
+                  typeof event.maximumHeight === 'function') {
+                  this._maximumHeight = event.maximumHeight;
+              }
+          }), this.api.onDidSizeChange((event) => {
+              this._onDidChange.fire({
+                  height: event.height,
+                  width: event.width,
+              });
+          }));
+      }
       setVisible(isVisible) {
           this.api._onDidVisibilityChange.fire({ isVisible });
       }
@@ -4282,10 +4539,6 @@
   class GroupviewApi extends GridviewPanelApiImpl {
   }
   class GroupPanel extends GridviewPanel {
-      constructor(accessor, id, options) {
-          super(id, 'groupview_default', new GroupviewApi(id));
-          this._model = new Groupview(this.element, accessor, id, options, this);
-      }
       get panels() {
           return this._model.panels;
       }
@@ -4319,6 +4572,10 @@
       get header() {
           return this._model.header;
       }
+      constructor(accessor, id, options) {
+          super(id, 'groupview_default', new GroupviewApi(id));
+          this._model = new Groupview(this.element, accessor, id, options, this);
+      }
       initialize() {
           this._model.initialize();
       }
@@ -4339,17 +4596,17 @@
   }
 
   class DefaultGroupPanelView {
-      constructor(renderers) {
-          var _a;
-          this._content = renderers.content;
-          this._tab = (_a = renderers.tab) !== null && _a !== void 0 ? _a : new DefaultTab();
-      }
       get content() {
           return this._content;
       }
       get tab() {
           return this._tab;
       }
+      constructor(renderers) {
+          var _a;
+          this._content = renderers.content;
+          this._tab = (_a = renderers.tab) !== null && _a !== void 0 ? _a : new DefaultTab();
+      }
       init(params) {
           this.content.init(Object.assign(Object.assign({}, params), { tab: this.tab }));
           this.tab.init(params);
@@ -4371,25 +4628,60 @@
           if (tab && Object.keys(tab).length === 0) {
               tab = undefined;
           }
-          return {
-              content: this.content.toJSON(),
-              tab,
-          };
+          return {
+              content: this.content.toJSON(),
+              tab,
+          };
+      }
+      dispose() {
+          this.content.dispose();
+          this.tab.dispose();
+      }
+  }
+
+  class DockviewComponent extends BaseGrid {
+      get orientation() {
+          return this.gridview.orientation;
+      }
+      get totalPanels() {
+          return this.panels.length;
+      }
+      get panels() {
+          return this.groups.flatMap((group) => group.panels);
+      }
+      get deserializer() {
+          return this._deserializer;
+      }
+      set deserializer(value) {
+          this._deserializer = value;
+      }
+      get options() {
+          return this._options;
+      }
+      get activePanel() {
+          const activeGroup = this.activeGroup;
+          if (!activeGroup) {
+              return undefined;
+          }
+          return activeGroup.activePanel;
       }
-      dispose() {
-          this.content.dispose();
-          this.tab.dispose();
+      set tabHeight(height) {
+          this.options.tabHeight = height;
+          this._groups.forEach((value) => {
+              value.value.model.header.height = height;
+          });
+      }
+      get tabHeight() {
+          return this.options.tabHeight;
       }
-  }
-
-  const nextGroupId = sequentialNumberGenerator();
-  class DockviewComponent extends BaseGrid {
       constructor(element, options) {
           super(element, {
               proportionalLayout: true,
               orientation: options.orientation || exports.Orientation.HORIZONTAL,
               styles: options.styles,
           });
+          this.nextGroupId = sequentialNumberGenerator();
+          this.watermark = null;
           this._onDidDrop = new Emitter();
           this.onDidDrop = this._onDidDrop.event;
           this._onDidRemovePanel = new Emitter();
@@ -4400,7 +4692,10 @@
           this.onDidLayoutFromJSON = this._onDidLayoutFromJSON.event;
           this._onDidActivePanelChange = new Emitter();
           this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-          this.addDisposables(this._onDidDrop, exports.Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
+          this.element.classList.add('dv-dockview');
+          this.addDisposables(this._onDidDrop, exports.Event.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
+              this.updateWatermark();
+          }), exports.Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
               this._bufferOnDidLayoutChange.fire();
           }));
           this._options = options;
@@ -4420,38 +4715,72 @@
               !this.options.watermarkFrameworkComponent) {
               this.options.watermarkComponent = Watermark;
           }
+          const dropTarget = new Droptarget(this.element, {
+              canDisplayOverlay: (event, position) => {
+                  const data = getPanelData();
+                  if (data) {
+                      if (data.viewId !== this.id) {
+                          return false;
+                      }
+                      return true;
+                  }
+                  if (this.options.showDndOverlay) {
+                      return this.options.showDndOverlay({
+                          nativeEvent: event,
+                          position: position,
+                          target: exports.DockviewDropTargets.Edge,
+                          getData: getPanelData,
+                      });
+                  }
+                  return false;
+              },
+              acceptedTargetZones: ['top', 'bottom', 'left', 'right'],
+              overlayModel: {
+                  activationSize: { type: 'pixels', value: 10 },
+                  size: { type: 'pixels', value: 20 },
+              },
+          });
+          this.addDisposables(dropTarget, dropTarget.onDrop((event) => {
+              const data = getPanelData();
+              if (data) {
+                  this.moveGroupOrPanel(this.orthogonalize(event.position), data.groupId, data.panelId || undefined, 'center');
+              }
+              else {
+                  this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api, group: null, getData: getPanelData }));
+              }
+          }));
           this._api = new DockviewApi(this);
+          this.updateWatermark();
       }
-      get totalPanels() {
-          return this.panels.length;
-      }
-      get panels() {
-          return this.groups.flatMap((group) => group.panels);
-      }
-      get deserializer() {
-          return this._deserializer;
-      }
-      set deserializer(value) {
-          this._deserializer = value;
-      }
-      get options() {
-          return this._options;
-      }
-      get activePanel() {
-          const activeGroup = this.activeGroup;
-          if (!activeGroup) {
-              return undefined;
+      orthogonalize(position) {
+          switch (position) {
+              case 'top':
+              case 'bottom':
+                  if (this.gridview.orientation === exports.Orientation.HORIZONTAL) {
+                      // we need to add to a vertical splitview but the current root is a horizontal splitview.
+                      // insert a vertical splitview at the root level and add the existing view as a child
+                      this.gridview.insertOrthogonalSplitviewAtRoot();
+                  }
+                  break;
+              case 'left':
+              case 'right':
+                  if (this.gridview.orientation === exports.Orientation.VERTICAL) {
+                      // we need to add to a horizontal splitview but the current root is a vertical splitview.
+                      // insert a horiziontal splitview at the root level and add the existing view as a child
+                      this.gridview.insertOrthogonalSplitviewAtRoot();
+                  }
+                  break;
+          }
+          switch (position) {
+              case 'top':
+              case 'left':
+                  return this.createGroupAtLocation([0]); // insert into first position
+              case 'bottom':
+              case 'right':
+                  return this.createGroupAtLocation([this.gridview.length]); // insert into last position
+              default:
+                  throw new Error(`unsupported position ${position}`);
           }
-          return activeGroup.activePanel;
-      }
-      set tabHeight(height) {
-          this.options.tabHeight = height;
-          this._groups.forEach((value) => {
-              value.value.model.header.height = height;
-          });
-      }
-      get tabHeight() {
-          return this.options.tabHeight;
       }
       updateOptions(options) {
           const hasOrientationChanged = typeof options.orientation === 'string' &&
@@ -4501,8 +4830,7 @@
               options.group = this.activeGroup;
           }
           if (options.includePanel && options.group) {
-              if (options.group.activePanel !==
-                  options.group.panels[0]) {
+              if (options.group.activePanel !== options.group.panels[0]) {
                   options.group.model.moveToPrevious({ suppressRoll: true });
                   return;
               }
@@ -4535,14 +4863,14 @@
       fromJSON(data) {
           this.clear();
           if (!this.deserializer) {
-              throw new Error('invalid deserializer');
+              throw new Error('no deserializer provided');
           }
           const { grid, panels, options, activeGroup } = data;
           if (typeof (options === null || options === void 0 ? void 0 : options.tabHeight) === 'number') {
               this.tabHeight = options.tabHeight;
           }
-          if (!this.deserializer) {
-              throw new Error('no deserializer provided');
+          if (grid.root.type !== 'branch' || !Array.isArray(grid.root.data)) {
+              throw new Error('root must be of type branch');
           }
           this.gridview.deserialize(grid, {
               fromJSON: (node) => {
@@ -4555,19 +4883,20 @@
                   this._onDidAddGroup.fire(group);
                   for (const child of views) {
                       const panel = this.deserializer.fromJSON(panels[child], group);
-                      const isActive = typeof activeView === 'string' && activeView === panel.id;
+                      const isActive = typeof activeView === 'string' &&
+                          activeView === panel.id;
                       group.model.openPanel(panel, {
                           skipSetPanelActive: !isActive,
-                          skipSetGroupActive: true
+                          skipSetGroupActive: true,
                       });
                   }
                   if (!group.activePanel && group.panels.length > 0) {
                       group.model.openPanel(group.panels[group.panels.length - 1], {
-                          skipSetGroupActive: true
+                          skipSetGroupActive: true,
                       });
                   }
                   return group;
-              }
+              },
           });
           if (typeof activeGroup === 'string') {
               const panel = this.getPanel(activeGroup);
@@ -4606,12 +4935,31 @@
               throw new Error(`panel with id ${options.id} already exists`);
           }
           let referenceGroup;
-          if ((_a = options.position) === null || _a === void 0 ? void 0 : _a.referencePanel) {
-              const referencePanel = this.getGroupPanel(options.position.referencePanel);
-              if (!referencePanel) {
-                  throw new Error(`referencePanel ${options.position.referencePanel} does not exist`);
+          if (options.position) {
+              if (isPanelOptionsWithPanel(options.position)) {
+                  const referencePanel = typeof options.position.referencePanel === 'string'
+                      ? this.getGroupPanel(options.position.referencePanel)
+                      : options.position.referencePanel;
+                  if (!referencePanel) {
+                      throw new Error(`referencePanel ${options.position.referencePanel} does not exist`);
+                  }
+                  referenceGroup = this.findGroup(referencePanel);
+              }
+              else if (isPanelOptionsWithGroup(options.position)) {
+                  referenceGroup =
+                      typeof options.position.referenceGroup === 'string'
+                          ? (_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`);
+                  }
+              }
+              else {
+                  const group = this.orthogonalize(directionToPosition(options.position.direction));
+                  const panel = this.createPanel(options, group);
+                  group.model.openPanel(panel);
+                  return panel;
               }
-              referenceGroup = this.findGroup(referencePanel);
           }
           else {
               referenceGroup = this.activeGroup;
@@ -4619,7 +4967,7 @@
           let panel;
           if (referenceGroup) {
               const target = toTarget(((_b = options.position) === null || _b === void 0 ? void 0 : _b.direction) || 'within');
-              if (target === exports.Position.Center) {
+              if (target === 'center') {
                   panel = this.createPanel(options, referenceGroup);
                   referenceGroup.model.openPanel(panel);
               }
@@ -4648,10 +4996,7 @@
           }
           group.model.removePanel(panel);
           panel.dispose();
-          const retainGroupForWatermark = this.size === 1;
-          if (!retainGroupForWatermark &&
-              group.size === 0 &&
-              options.removeEmptyGroup) {
+          if (group.size === 0 && options.removeEmptyGroup) {
               this.removeGroup(group);
           }
       }
@@ -4663,24 +5008,67 @@
               ? { 'watermark-name': this.options.watermarkFrameworkComponent }
               : {}, (_a = this.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.watermark);
       }
-      addEmptyGroup(options) {
+      updateWatermark() {
+          if (this.groups.length === 0) {
+              if (!this.watermark) {
+                  this.watermark = this.createWatermarkComponent();
+                  this.watermark.init({
+                      containerApi: new DockviewApi(this),
+                      params: {},
+                      title: '',
+                      api: null,
+                  });
+                  const watermarkContainer = document.createElement('div');
+                  watermarkContainer.className = 'dv-watermark-container';
+                  watermarkContainer.appendChild(this.watermark.element);
+                  this.element.appendChild(watermarkContainer);
+              }
+          }
+          else if (this.watermark) {
+              this.watermark.element.parentElement.remove();
+              this.watermark.dispose();
+              this.watermark = null;
+          }
+      }
+      addGroup(options) {
+          var _a;
           const group = this.createGroup();
           if (options) {
-              const referencePanel = this.panels.find((panel) => panel.id === options.referencePanel);
-              if (!referencePanel) {
-                  throw new Error(`reference panel ${options.referencePanel} does not exist`);
+              let referenceGroup;
+              if (isGroupOptionsWithPanel(options)) {
+                  const referencePanel = typeof options.referencePanel === 'string'
+                      ? this.panels.find((panel) => panel.id === options.referencePanel)
+                      : options.referencePanel;
+                  if (!referencePanel) {
+                      throw new Error(`reference panel ${options.referencePanel} does not exist`);
+                  }
+                  referenceGroup = this.findGroup(referencePanel);
+                  if (!referenceGroup) {
+                      throw new Error(`reference group for reference panel ${options.referencePanel} does not exist`);
+                  }
               }
-              const referenceGroup = this.findGroup(referencePanel);
-              if (!referenceGroup) {
-                  throw new Error(`reference group for reference panel ${options.referencePanel} does not exist`);
+              else if (isGroupOptionsWithGroup(options)) {
+                  referenceGroup =
+                      typeof options.referenceGroup === 'string'
+                          ? (_a = this._groups.get(options.referenceGroup)) === null || _a === void 0 ? void 0 : _a.value
+                          : options.referenceGroup;
+                  if (!referenceGroup) {
+                      throw new Error(`reference group ${options.referenceGroup} does not exist`);
+                  }
+              }
+              else {
+                  const group = this.orthogonalize(directionToPosition(options.direction));
+                  return group;
               }
               const target = toTarget(options.direction || 'within');
               const location = getGridLocation(referenceGroup.element);
               const relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
               this.doAddGroup(group, relativeLocation);
+              return group;
           }
           else {
               this.doAddGroup(group);
+              return group;
           }
       }
       removeGroup(group, skipActive = false) {
@@ -4698,7 +5086,13 @@
           const sourceGroup = groupId
               ? (_a = this._groups.get(groupId)) === null || _a === void 0 ? void 0 : _a.value
               : undefined;
-          if (!target || target === exports.Position.Center) {
+          if (itemId === undefined) {
+              if (sourceGroup) {
+                  this.moveGroup(sourceGroup, referenceGroup, target);
+              }
+              return;
+          }
+          if (!target || target === 'center') {
               const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(itemId)) ||
                   this.panels.find((panel) => panel.id === itemId);
               if (!groupItem) {
@@ -4746,6 +5140,28 @@
               }
           }
       }
+      moveGroup(sourceGroup, referenceGroup, target) {
+          if (sourceGroup) {
+              if (!target || target === 'center') {
+                  const activePanel = sourceGroup.activePanel;
+                  const panels = [...sourceGroup.panels].map((p) => sourceGroup.model.removePanel(p.id));
+                  if ((sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.size) === 0) {
+                      this.doRemoveGroup(sourceGroup);
+                  }
+                  for (const panel of panels) {
+                      referenceGroup.model.openPanel(panel, {
+                          skipSetPanelActive: panel !== activePanel,
+                      });
+                  }
+              }
+              else {
+                  this.gridview.removeView(getGridLocation(sourceGroup.element));
+                  const referenceLocation = getGridLocation(referenceGroup.element);
+                  const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
+                  this.gridview.addView(sourceGroup, exports.Sizing.Distribute, dropLocation);
+              }
+          }
+      }
       doSetGroupActive(group, skipFocus) {
           var _a, _b;
           const isGroupAlreadyFocused = this._activeGroup === group;
@@ -4767,9 +5183,9 @@
               id = undefined;
           }
           if (!id) {
-              id = nextGroupId.next();
+              id = this.nextGroupId.next();
               while (this._groups.has(id)) {
-                  id = nextGroupId.next();
+                  id = this.nextGroupId.next();
               }
           }
           const view = new GroupPanel(this, id, options);
@@ -4802,7 +5218,7 @@
               content: this.createContentComponent(options.id, options.component),
               tab: this.createTabComponent(options.id, options.tabComponent || this.options.defaultTabComponent),
           });
-          const panel = new DockviewGroupPanel(options.id, this, this._api, group);
+          const panel = new DockviewPanel(options.id, this, this._api, group);
           panel.init({
               view,
               title: options.title || options.id,
@@ -4837,6 +5253,21 @@
   }
 
   class GridviewComponent extends BaseGrid {
+      get orientation() {
+          return this.gridview.orientation;
+      }
+      set orientation(value) {
+          this.gridview.orientation = value;
+      }
+      get options() {
+          return this._options;
+      }
+      get deserializer() {
+          return this._deserializer;
+      }
+      set deserializer(value) {
+          this._deserializer = value;
+      }
       constructor(element, options) {
           super(element, {
               proportionalLayout: options.proportionalLayout,
@@ -4853,21 +5284,6 @@
               this.options.frameworkComponents = {};
           }
       }
-      get orientation() {
-          return this.gridview.orientation;
-      }
-      set orientation(value) {
-          this.gridview.orientation = value;
-      }
-      get options() {
-          return this._options;
-      }
-      get deserializer() {
-          return this._deserializer;
-      }
-      set deserializer(value) {
-          this._deserializer = value;
-      }
       updateOptions(options) {
           const hasOrientationChanged = typeof options.orientation === 'string' &&
               this.gridview.orientation !== options.orientation;
@@ -4965,7 +5381,7 @@
               throw new Error(`reference group ${options.reference} does not exist`);
           }
           const target = toTarget(options.direction);
-          if (target === exports.Position.Center) {
+          if (target === 'center') {
               throw new Error(`${target} not supported as an option`);
           }
           else {
@@ -4983,7 +5399,7 @@
                   throw new Error(`reference group ${options.position.referencePanel} does not exist`);
               }
               const target = toTarget(options.position.direction);
-              if (target === exports.Position.Center) {
+              if (target === 'center') {
                   throw new Error(`${target} not supported as an option`);
               }
               else {
@@ -5072,29 +5488,6 @@
    * A high-level implementation of splitview that works using 'panels'
    */
   class SplitviewComponent extends CompositeDisposable {
-      constructor(element, options) {
-          super();
-          this.element = element;
-          this._disposable = new MutableDisposable();
-          this._panels = new Map();
-          this._onDidLayoutfromJSON = new Emitter();
-          this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
-          this._onDidAddView = new Emitter();
-          this.onDidAddView = this._onDidAddView.event;
-          this._onDidRemoveView = new Emitter();
-          this.onDidRemoveView = this._onDidRemoveView.event;
-          this._onDidLayoutChange = new Emitter();
-          this.onDidLayoutChange = this._onDidLayoutChange.event;
-          this._options = options;
-          if (!options.components) {
-              options.components = {};
-          }
-          if (!options.frameworkComponents) {
-              options.frameworkComponents = {};
-          }
-          this.splitview = new Splitview(this.element, options);
-          this.addDisposables(this._disposable, this._onDidAddView, this._onDidLayoutfromJSON, this._onDidRemoveView, this._onDidLayoutChange);
-      }
       get panels() {
           return this.splitview.getViews();
       }
@@ -5132,6 +5525,29 @@
               ? this.splitview.size
               : this.splitview.orthogonalSize;
       }
+      constructor(element, options) {
+          super();
+          this.element = element;
+          this._disposable = new MutableDisposable();
+          this._panels = new Map();
+          this._onDidLayoutfromJSON = new Emitter();
+          this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
+          this._onDidAddView = new Emitter();
+          this.onDidAddView = this._onDidAddView.event;
+          this._onDidRemoveView = new Emitter();
+          this.onDidRemoveView = this._onDidRemoveView.event;
+          this._onDidLayoutChange = new Emitter();
+          this.onDidLayoutChange = this._onDidLayoutChange.event;
+          this._options = options;
+          if (!options.components) {
+              options.components = {};
+          }
+          if (!options.frameworkComponents) {
+              options.frameworkComponents = {};
+          }
+          this.splitview = new Splitview(this.element, options);
+          this.addDisposables(this._disposable, this._onDidAddView, this._onDidLayoutfromJSON, this._onDidRemoveView, this._onDidLayoutChange);
+      }
       updateOptions(options) {
           const hasOrientationChanged = typeof options.orientation === 'string' &&
               this.options.orientation !== options.orientation;
@@ -5333,38 +5749,85 @@
       setConstraints(value) {
           this._onDidConstraintsChangeInternal.fire(value);
       }
-      setSize(event) {
-          this._onDidSizeChange.fire(event);
+      setSize(event) {
+          this._onDidSizeChange.fire(event);
+      }
+  }
+
+  class PaneviewPanelApiImpl extends SplitviewPanelApiImpl {
+      set pane(pane) {
+          this._pane = pane;
+      }
+      constructor(id) {
+          super(id);
+          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 PaneviewPanel extends BasePanelView {
+      set orientation(value) {
+          this._orientation = value;
+      }
+      get orientation() {
+          return this._orientation;
+      }
+      get minimumSize() {
+          const headerSize = this.headerSize;
+          const expanded = this.isExpanded();
+          const minimumBodySize = expanded ? this._minimumBodySize : 0;
+          return headerSize + minimumBodySize;
+      }
+      get maximumSize() {
+          const headerSize = this.headerSize;
+          const expanded = this.isExpanded();
+          const maximumBodySize = expanded ? this._maximumBodySize : 0;
+          return headerSize + maximumBodySize;
+      }
+      get size() {
+          return this._size;
+      }
+      get orthogonalSize() {
+          return this._orthogonalSize;
+      }
+      set orthogonalSize(size) {
+          this._orthogonalSize = size;
+      }
+      get minimumBodySize() {
+          return this._minimumBodySize;
+      }
+      set minimumBodySize(value) {
+          this._minimumBodySize = typeof value === 'number' ? value : 0;
       }
-  }
-
-  class PaneviewPanelApiImpl extends SplitviewPanelApiImpl {
-      constructor(id) {
-          super(id);
-          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 maximumBodySize() {
+          return this._maximumBodySize;
       }
-      set pane(pane) {
-          this._pane = pane;
+      set maximumBodySize(value) {
+          this._maximumBodySize =
+              typeof value === 'number' ? value : Number.POSITIVE_INFINITY;
       }
-      setExpanded(isExpanded) {
-          var _a;
-          (_a = this._pane) === null || _a === void 0 ? void 0 : _a.setExpanded(isExpanded);
+      get headerVisible() {
+          return this._headerVisible;
       }
-      get isExpanded() {
-          var _a;
-          return !!((_a = this._pane) === null || _a === void 0 ? void 0 : _a.isExpanded());
+      set headerVisible(value) {
+          this._headerVisible = value;
+          this.header.style.display = value ? '' : 'none';
       }
-  }
-
-  class PaneviewPanel extends BasePanelView {
       constructor(id, component, headerComponent, orientation, isExpanded, isHeaderVisible) {
           super(id, component, new PaneviewPanelApiImpl(id));
           this.headerComponent = headerComponent;
@@ -5380,6 +5843,7 @@
           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
@@ -5409,53 +5873,6 @@
           }));
           this.renderOnce();
       }
-      set orientation(value) {
-          this._orientation = value;
-      }
-      get orientation() {
-          return this._orientation;
-      }
-      get minimumSize() {
-          const headerSize = this.headerSize;
-          const expanded = this.isExpanded();
-          const minimumBodySize = expanded ? this._minimumBodySize : 0;
-          return headerSize + minimumBodySize;
-      }
-      get maximumSize() {
-          const headerSize = this.headerSize;
-          const expanded = this.isExpanded();
-          const maximumBodySize = expanded ? this._maximumBodySize : 0;
-          return headerSize + maximumBodySize;
-      }
-      get size() {
-          return this._size;
-      }
-      get orthogonalSize() {
-          return this._orthogonalSize;
-      }
-      set orthogonalSize(size) {
-          this._orthogonalSize = size;
-      }
-      get minimumBodySize() {
-          return this._minimumBodySize;
-      }
-      set minimumBodySize(value) {
-          this._minimumBodySize = typeof value === 'number' ? value : 0;
-      }
-      get maximumBodySize() {
-          return this._maximumBodySize;
-      }
-      set maximumBodySize(value) {
-          this._maximumBodySize =
-              typeof value === 'number' ? value : Number.POSITIVE_INFINITY;
-      }
-      get headerVisible() {
-          return this._headerVisible;
-      }
-      set headerVisible(value) {
-          this._headerVisible = value;
-          this.header.style.display = value ? '' : 'none';
-      }
       setVisible(isVisible) {
           this.api._onDidVisibilityChange.fire({ isVisible });
       }
@@ -5579,7 +5996,10 @@
               }
           })(this.header);
           this.target = new Droptarget(this.element, {
-              validOverlays: 'vertical',
+              acceptedTargetZones: ['top', 'bottom'],
+              overlayModel: {
+                  activationSize: { type: 'percentage', value: 50 },
+              },
               canDisplayOverlay: (event) => {
                   const data = getPaneData();
                   if (data) {
@@ -5622,12 +6042,10 @@
           const allPanels = containerApi.panels;
           const fromIndex = allPanels.indexOf(existingPanel);
           let toIndex = containerApi.panels.indexOf(this);
-          if (event.position === exports.Position.Left ||
-              event.position === exports.Position.Top) {
+          if (event.position === 'left' || event.position === 'top') {
               toIndex = Math.max(0, toIndex - 1);
           }
-          if (event.position === exports.Position.Right ||
-              event.position === exports.Position.Bottom) {
+          if (event.position === 'right' || event.position === 'bottom') {
               if (fromIndex > toIndex) {
                   toIndex++;
               }
@@ -5638,6 +6056,9 @@
   }
 
   class DefaultHeader extends CompositeDisposable {
+      get element() {
+          return this._element;
+      }
       constructor() {
           super();
           this._expandedIcon = createExpandMoreButton();
@@ -5656,9 +6077,6 @@
               (_a = this.apiRef.api) === null || _a === void 0 ? void 0 : _a.setExpanded(!this.apiRef.api.isExpanded);
           }));
       }
-      get element() {
-          return this._element;
-      }
       init(params) {
           this.apiRef.api = params.api;
           this._content.textContent = params.title;
@@ -5711,36 +6129,6 @@
       }
   }
   class PaneviewComponent extends CompositeDisposable {
-      constructor(element, options) {
-          super();
-          this.element = element;
-          this._id = nextLayoutId.next();
-          this._disposable = new MutableDisposable();
-          this._viewDisposables = new Map();
-          this._onDidLayoutfromJSON = new Emitter();
-          this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
-          this._onDidLayoutChange = new Emitter();
-          this.onDidLayoutChange = this._onDidLayoutChange.event;
-          this._onDidDrop = new Emitter();
-          this.onDidDrop = this._onDidDrop.event;
-          this._onDidAddView = new Emitter();
-          this.onDidAddView = this._onDidAddView.event;
-          this._onDidRemoveView = new Emitter();
-          this.onDidRemoveView = this._onDidRemoveView.event;
-          this.addDisposables(this._onDidLayoutChange, this._onDidLayoutfromJSON, this._onDidDrop, this._onDidAddView, this._onDidRemoveView);
-          this._options = options;
-          if (!options.components) {
-              options.components = {};
-          }
-          if (!options.frameworkComponents) {
-              options.frameworkComponents = {};
-          }
-          this.paneview = new Paneview(this.element, {
-              // only allow paneview in the vertical orientation for now
-              orientation: exports.Orientation.VERTICAL,
-          });
-          this.addDisposables(this._disposable);
-      }
       get id() {
           return this._id;
       }
@@ -5775,6 +6163,36 @@
       get options() {
           return this._options;
       }
+      constructor(element, options) {
+          super();
+          this.element = element;
+          this._id = nextLayoutId.next();
+          this._disposable = new MutableDisposable();
+          this._viewDisposables = new Map();
+          this._onDidLayoutfromJSON = new Emitter();
+          this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
+          this._onDidLayoutChange = new Emitter();
+          this.onDidLayoutChange = this._onDidLayoutChange.event;
+          this._onDidDrop = new Emitter();
+          this.onDidDrop = this._onDidDrop.event;
+          this._onDidAddView = new Emitter();
+          this.onDidAddView = this._onDidAddView.event;
+          this._onDidRemoveView = new Emitter();
+          this.onDidRemoveView = this._onDidRemoveView.event;
+          this.addDisposables(this._onDidLayoutChange, this._onDidLayoutfromJSON, this._onDidDrop, this._onDidAddView, this._onDidRemoveView);
+          this._options = options;
+          if (!options.components) {
+              options.components = {};
+          }
+          if (!options.frameworkComponents) {
+              options.frameworkComponents = {};
+          }
+          this.paneview = new Paneview(this.element, {
+              // only allow paneview in the vertical orientation for now
+              orientation: exports.Orientation.VERTICAL,
+          });
+          this.addDisposables(this._disposable);
+      }
       focus() {
           //
       }
@@ -5960,36 +6378,6 @@
   }
 
   class SplitviewPanel extends BasePanelView {
-      constructor(id, componentName) {
-          super(id, componentName, new SplitviewPanelApiImpl(id));
-          this._evaluatedMinimumSize = 0;
-          this._evaluatedMaximumSize = Number.POSITIVE_INFINITY;
-          this._minimumSize = 0;
-          this._maximumSize = Number.POSITIVE_INFINITY;
-          this._snap = false;
-          this._onDidChange = new Emitter();
-          this.onDidChange = this._onDidChange.event;
-          this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
-              const { isVisible } = event;
-              const { accessor } = this._params;
-              accessor.setVisible(this, isVisible);
-          }), this.api.onActiveChange(() => {
-              const { accessor } = this._params;
-              accessor.setActive(this);
-          }), this.api.onDidConstraintsChangeInternal((event) => {
-              if (typeof event.minimumSize === 'number' ||
-                  typeof event.minimumSize === 'function') {
-                  this._minimumSize = event.minimumSize;
-              }
-              if (typeof event.maximumSize === 'number' ||
-                  typeof event.maximumSize === 'function') {
-                  this._maximumSize = event.maximumSize;
-              }
-              this.updateConstraints();
-          }), this.api.onDidSizeChange((event) => {
-              this._onDidChange.fire({ size: event.size });
-          }));
-      }
       get priority() {
           return this._priority;
       }
@@ -6022,6 +6410,37 @@
       get snap() {
           return this._snap;
       }
+      constructor(id, componentName) {
+          super(id, componentName, new SplitviewPanelApiImpl(id));
+          this._evaluatedMinimumSize = 0;
+          this._evaluatedMaximumSize = Number.POSITIVE_INFINITY;
+          this._minimumSize = 0;
+          this._maximumSize = Number.POSITIVE_INFINITY;
+          this._snap = false;
+          this._onDidChange = new Emitter();
+          this.onDidChange = this._onDidChange.event;
+          this.api.initialize(this);
+          this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
+              const { isVisible } = event;
+              const { accessor } = this._params;
+              accessor.setVisible(this, isVisible);
+          }), this.api.onActiveChange(() => {
+              const { accessor } = this._params;
+              accessor.setActive(this);
+          }), this.api.onDidConstraintsChangeInternal((event) => {
+              if (typeof event.minimumSize === 'number' ||
+                  typeof event.minimumSize === 'function') {
+                  this._minimumSize = event.minimumSize;
+              }
+              if (typeof event.maximumSize === 'number' ||
+                  typeof event.maximumSize === 'function') {
+                  this._maximumSize = event.maximumSize;
+              }
+              this.updateConstraints();
+          }), this.api.onDidSizeChange((event) => {
+              this._onDidChange.fire({ size: event.size });
+          }));
+      }
       setVisible(isVisible) {
           this.api._onDidVisibilityChange.fire({ isVisible });
       }
@@ -6187,6 +6606,9 @@
   }
 
   class ReactPanelContentPart {
+      get element() {
+          return this._element;
+      }
       constructor(id, component, reactPortalStore) {
           this.id = id;
           this.component = component;
@@ -6198,9 +6620,6 @@
           this._element = document.createElement('div');
           this._element.className = 'dockview-react-part';
       }
-      get element() {
-          return this._element;
-      }
       focus() {
           // TODO
       }
@@ -6235,6 +6654,9 @@
   }
 
   class ReactPanelHeaderPart {
+      get element() {
+          return this._element;
+      }
       constructor(id, component, reactPortalStore) {
           this.id = id;
           this.component = component;
@@ -6242,9 +6664,6 @@
           this._element = document.createElement('div');
           this._element.className = 'dockview-react-part';
       }
-      get element() {
-          return this._element;
-      }
       focus() {
           //noop
       }
@@ -6303,7 +6722,7 @@
               content: createComponent(viewData.content.id, viewData.content.id, this.layout.options.components, this.layout.options.frameworkComponents, (_d = this.layout.options.frameworkComponentFactory) === null || _d === void 0 ? void 0 : _d.content),
               tab,
           });
-          const panel = new DockviewGroupPanel(panelId, this.layout, new DockviewApi(this.layout), group);
+          const panel = new DockviewPanel(panelId, this.layout, new DockviewApi(this.layout), group);
           panel.init({
               view,
               title,
@@ -6314,6 +6733,9 @@
   }
 
   class ReactWatermarkPart {
+      get element() {
+          return this._element;
+      }
       constructor(id, component, reactPortalStore) {
           this.id = id;
           this.component = component;
@@ -6324,9 +6746,6 @@
           this._element = document.createElement('div');
           this._element.className = 'dockview-react-part';
       }
-      get element() {
-          return this._element;
-      }
       init(parameters) {
           this.parameters = parameters;
           this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
@@ -6369,14 +6788,6 @@
   }
 
   class ReactGroupControlsRendererPart {
-      constructor(component, reactPortalStore, _group) {
-          this.component = component;
-          this.reactPortalStore = reactPortalStore;
-          this._group = _group;
-          this.mutableDisposable = new MutableDisposable();
-          this._element = document.createElement('div');
-          this._element.className = 'dockview-react-part';
-      }
       get element() {
           return this._element;
       }
@@ -6386,6 +6797,14 @@
       get group() {
           return this._group;
       }
+      constructor(component, reactPortalStore, _group) {
+          this.component = component;
+          this.reactPortalStore = reactPortalStore;
+          this._group = _group;
+          this.mutableDisposable = new MutableDisposable();
+          this._element = document.createElement('div');
+          this._element.className = 'dockview-react-part';
+      }
       focus() {
           // TODO
       }
@@ -6500,6 +6919,7 @@
                   : undefined,
               showDndOverlay: props.showDndOverlay,
               createGroupControlElement: createGroupControlElement(props.groupControlComponent, { addPortal }),
+              singleTabMode: props.singleTabMode,
           });
           (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(dockview.element);
           dockview.deserializer = new ReactPanelDeserialzier(dockview);
@@ -6712,7 +7132,7 @@
 
   class ReactGridPanelView extends GridviewPanel {
       constructor(id, component, reactComponent, reactPortalStore) {
-          super(id, component);
+          super(id, component, new GridviewPanelApiImpl(id));
           this.reactComponent = reactComponent;
           this.reactPortalStore = reactPortalStore;
       }
@@ -6791,6 +7211,9 @@
   GridviewReact.displayName = 'GridviewComponent';
 
   class PanePanelSection {
+      get element() {
+          return this._element;
+      }
       constructor(id, component, reactPortalStore) {
           this.id = id;
           this.component = component;
@@ -6799,9 +7222,6 @@
           this._element.style.height = '100%';
           this._element.style.width = '100%';
       }
-      get element() {
-          return this._element;
-      }
       init(parameters) {
           this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
               params: parameters.params,
@@ -6949,6 +7369,7 @@
   exports.SplitviewPanel = SplitviewPanel;
   exports.SplitviewReact = SplitviewReact;
   exports.Tab = Tab;
+  exports.directionToPosition = directionToPosition;
   exports.getDirectionOrientation = getDirectionOrientation;
   exports.getGridLocation = getGridLocation;
   exports.getLocationOrientation = getLocationOrientation;
@@ -6957,11 +7378,14 @@
   exports.getRelativeLocation = getRelativeLocation;
   exports.indexInParent = indexInParent;
   exports.isGridBranchNode = isGridBranchNode;
+  exports.isGroupOptionsWithGroup = isGroupOptionsWithGroup;
+  exports.isGroupOptionsWithPanel = isGroupOptionsWithPanel;
+  exports.isPanelOptionsWithGroup = isPanelOptionsWithGroup;
+  exports.isPanelOptionsWithPanel = isPanelOptionsWithPanel;
   exports.isReactElement = isReactElement;
   exports.orthogonal = orthogonal;
+  exports.positionToDirection = positionToDirection;
   exports.toTarget = toTarget;
   exports.usePortalsLifecycle = usePortalsLifecycle;
 
-  Object.defineProperty(exports, '__esModule', { value: true });
-
 }));