dockview 1.5.2 → 1.6.0

package/dist/dockview.esm.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.5.2
+ * @version 1.6.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -34,7 +34,7 @@ function styleInject(css, ref) {
   }
 }
 
-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 {
@@ -205,12 +205,12 @@ var Disposable;
     };
 })(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));
     }
@@ -428,21 +428,6 @@ function firstIndex(array, fn) {
 }
 
 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;
     }
@@ -495,6 +480,21 @@ class ViewItem {
     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);
@@ -541,6 +541,65 @@ var Sizing;
     Sizing.Invisible = Invisible;
 })(Sizing || (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 == 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 = [];
@@ -670,65 +729,6 @@ class Splitview {
             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 == 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');
@@ -1192,6 +1192,27 @@ class Splitview {
 }
 
 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();
@@ -1234,27 +1255,6 @@ class Paneview extends CompositeDisposable {
             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();
@@ -1333,243 +1333,16 @@ class Paneview extends CompositeDisposable {
     }
 }
 
-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);
-        }));
-    }
-}
-
-var Position;
-(function (Position) {
-    Position["Top"] = "Top";
-    Position["Left"] = "Left";
-    Position["Bottom"] = "Bottom";
-    Position["Right"] = "Right";
-    Position["Center"] = "Center";
-})(Position || (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 = 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 = Position.Top;
-                break;
-            case 'left':
-                this._state = Position.Left;
-                break;
-            case 'bottom':
-                this._state = Position.Bottom;
-                break;
-            case 'right':
-                this._state = Position.Right;
-                break;
-            default:
-                this._state = 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 === Orientation.VERTICAL
-                        ? event.width
-                        : event.height,
-                    orthogonalSize: this.orientation === 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;
@@ -1622,6 +1395,29 @@ class LeafNode {
             ? 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 === Orientation.VERTICAL
+                        ? event.width
+                        : event.height,
+                    orthogonalSize: this.orientation === Orientation.VERTICAL
+                        ? event.height
+                        : event.width,
+                });
+            }
+            else {
+                this._onDidChange.fire({});
+            }
+        });
+    }
     setVisible(visible) {
         if (this.view.setVisible) {
             this.view.setVisible(visible);
@@ -1644,53 +1440,6 @@ class LeafNode {
  * 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 === Orientation.HORIZONTAL
             ? this.size
@@ -1756,6 +1505,53 @@ class BranchNode extends CompositeDisposable {
         }
         return 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);
@@ -1927,20 +1723,18 @@ function getRelativeLocation(rootOrientation, location, direction) {
     if (orientation === directionOrientation) {
         const [rest, _index] = tail(location);
         let index = _index;
-        if (direction === Position.Right || direction === Position.Bottom) {
+        if (direction === 'right' || direction === 'bottom') {
             index += 1;
         }
         return [...rest, index];
     }
     else {
-        const index = direction === Position.Right || direction === Position.Bottom
-            ? 1
-            : 0;
+        const index = direction === 'right' || direction === 'bottom' ? 1 : 0;
         return [...location, index];
     }
 }
 function getDirectionOrientation(direction) {
-    return direction === Position.Top || direction === Position.Bottom
+    return direction === 'top' || direction === 'bottom'
         ? Orientation.VERTICAL
         : Orientation.HORIZONTAL;
 }
@@ -1975,15 +1769,8 @@ const serializeBranchNode = (node, orientation) => {
     };
 };
 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);
@@ -2057,6 +1844,32 @@ class Gridview {
             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, Sizing.Distribute, 0);
+        }
+        else {
+            this._root.addChild(oldRoot, 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);
     }
@@ -2115,6 +1928,16 @@ class Gridview {
     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);
@@ -2246,9 +2069,6 @@ class Gridview {
 }
 
 class SplitviewApi {
-    constructor(component) {
-        this.component = component;
-    }
     get minimumSize() {
         return this.component.minimumSize;
     }
@@ -2282,6 +2102,9 @@ class SplitviewApi {
     get onDidRemoveView() {
         return this.component.onDidRemoveView;
     }
+    constructor(component) {
+        this.component = component;
+    }
     updateOptions(options) {
         this.component.updateOptions(options);
     }
@@ -2314,9 +2137,6 @@ class SplitviewApi {
     }
 }
 class PaneviewApi {
-    constructor(component) {
-        this.component = component;
-    }
     get minimumSize() {
         return this.component.minimumSize;
     }
@@ -2355,6 +2175,9 @@ class PaneviewApi {
         };
         return emitter.event;
     }
+    constructor(component) {
+        this.component = component;
+    }
     removePanel(panel) {
         this.component.removePanel(panel);
     }
@@ -2384,9 +2207,6 @@ class PaneviewApi {
     }
 }
 class GridviewApi {
-    constructor(component) {
-        this.component = component;
-    }
     get minimumHeight() {
         return this.component.minimumHeight;
     }
@@ -2429,6 +2249,9 @@ class GridviewApi {
     set orientation(value) {
         this.component.updateOptions({ orientation: value });
     }
+    constructor(component) {
+        this.component = component;
+    }
     focus() {
         this.component.focus();
     }
@@ -2458,8 +2281,8 @@ class GridviewApi {
     }
 }
 class DockviewApi {
-    constructor(component) {
-        this.component = component;
+    get id() {
+        return this.component.id;
     }
     get width() {
         return this.component.width;
@@ -2524,6 +2347,9 @@ class DockviewApi {
     get activeGroup() {
         return this.component.activeGroup;
     }
+    constructor(component) {
+        this.component = component;
+    }
     getTabHeight() {
         return this.component.tabHeight;
     }
@@ -2542,36 +2368,322 @@ class DockviewApi {
     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);
     }
-    moveToPrevious(options) {
-        this.component.moveToPrevious(options);
+    moveToPrevious(options) {
+        this.component.moveToPrevious(options);
+    }
+    closeAllGroups() {
+        return this.component.closeAllGroups();
+    }
+    removeGroup(group) {
+        this.component.removeGroup(group);
+    }
+    getGroup(id) {
+        return this.component.getPanel(id);
+    }
+    fromJSON(data) {
+        this.component.fromJSON(data);
+    }
+    toJSON() {
+        return this.component.toJSON();
+    }
+    clear() {
+        this.component.clear();
+    }
+}
+
+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';
     }
-    closeAllGroups() {
-        return this.component.closeAllGroups();
+    if (!overlayType.has('center')) {
+        return null;
     }
-    removeGroup(group) {
-        this.component.removeGroup(group);
+    return 'center';
+}
+function calculateQuadrantAsPixels(overlayType, x, y, width, height, threshold) {
+    if (overlayType.has('left') && x < threshold) {
+        return 'left';
     }
-    getGroup(id) {
-        return this.component.getPanel(id);
+    if (overlayType.has('right') && x > width - threshold) {
+        return 'right';
     }
-    fromJSON(data) {
-        this.component.fromJSON(data);
+    if (overlayType.has('top') && y < threshold) {
+        return 'top';
     }
-    toJSON() {
-        return this.component.toJSON();
+    if (overlayType.has('bottom') && y > height - threshold) {
+        return 'bottom';
     }
-    clear() {
-        this.component.clear();
+    if (!overlayType.has('center')) {
+        return null;
     }
+    return 'center';
 }
 
 class ContentContainer extends CompositeDisposable {
+    get element() {
+        return this._element;
+    }
     constructor() {
         super();
         this.disposable = new MutableDisposable();
@@ -2589,9 +2701,6 @@ class ContentContainer extends CompositeDisposable {
         // 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 = '';
     }
@@ -2647,6 +2756,7 @@ var DockviewDropTargets;
     DockviewDropTargets[DockviewDropTargets["Tab"] = 0] = "Tab";
     DockviewDropTargets[DockviewDropTargets["Panel"] = 1] = "Panel";
     DockviewDropTargets[DockviewDropTargets["TabContainer"] = 2] = "TabContainer";
+    DockviewDropTargets[DockviewDropTargets["Edge"] = 3] = "Edge";
 })(DockviewDropTargets || (DockviewDropTargets = {}));
 
 class DragHandler extends CompositeDisposable {
@@ -2668,9 +2778,9 @@ class DragHandler extends CompositeDisposable {
             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';
             }
@@ -2684,11 +2794,10 @@ class DragHandler extends CompositeDisposable {
     }
 }
 
-var MouseEventKind;
-(function (MouseEventKind) {
-    MouseEventKind["CLICK"] = "CLICK";
-})(MouseEventKind || (MouseEventKind = {}));
 class Tab extends CompositeDisposable {
+    get element() {
+        return this._element;
+    }
     constructor(panelId, accessor, group) {
         super();
         this.panelId = panelId;
@@ -2732,25 +2841,30 @@ class Tab extends CompositeDisposable {
              * on the tabs-container. I cannot use event.preventDefault() since I need the on DragStart event to occur
              */
             event.stopPropagation();
-            this._onChanged.fire({ kind: 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, DockviewDropTargets.Tab);
+                return this.group.model.canDisplayOverlay(event, position, 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);
@@ -2768,56 +2882,94 @@ class Tab extends CompositeDisposable {
     }
 }
 
-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, DockviewDropTargets.Panel);
+                return group.model.canDisplayOverlay(event, position, 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);
     }
@@ -2878,6 +3030,52 @@ class TabsContainer extends CompositeDisposable {
     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
     }
@@ -2922,15 +3120,13 @@ class TabsContainer extends CompositeDisposable {
             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 === 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,
@@ -2953,63 +3149,6 @@ class TabsContainer extends CompositeDisposable {
 }
 
 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, 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, 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');
     }
@@ -3021,6 +3160,7 @@ class Groupview extends CompositeDisposable {
     }
     set locked(value) {
         this._locked = value;
+        toggleClass(this.container, 'locked-groupview', value);
     }
     get isActive() {
         return this._isGroupActive;
@@ -3058,6 +3198,71 @@ class Groupview extends CompositeDisposable {
         }
         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, 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) {
@@ -3073,11 +3278,11 @@ class Groupview extends CompositeDisposable {
         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);
         }
@@ -3164,10 +3369,10 @@ class Groupview extends CompositeDisposable {
         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;
         }
@@ -3176,7 +3381,7 @@ class Groupview extends CompositeDisposable {
             this.doSetActivePanel(panel);
         }
         if (!skipSetGroupActive) {
-            this.accessor.doSetGroupActive(this.parent, !!options.skipFocus);
+            this.accessor.doSetGroupActive(this.groupPanel, !!options.skipFocus);
         }
         this.updateContainer();
     }
@@ -3199,7 +3404,7 @@ class Groupview extends CompositeDisposable {
             }
         }
         else {
-            this.accessor.removeGroup(this.parent);
+            this.accessor.removeGroup(this.groupPanel);
         }
     }
     closePanel(panel) {
@@ -3304,7 +3509,7 @@ class Groupview extends CompositeDisposable {
     }
     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({
@@ -3316,29 +3521,28 @@ class Groupview extends CompositeDisposable {
             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,
             });
         }
@@ -3346,7 +3550,17 @@ class Groupview extends CompositeDisposable {
     }
     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;
@@ -3389,48 +3603,22 @@ class Groupview extends CompositeDisposable {
 }
 
 const nextLayoutId$1 = sequentialNumberGenerator();
-function toTarget(direction) {
-    switch (direction) {
-        case 'left':
-            return Position.Left;
-        case 'right':
-            return Position.Right;
-        case 'above':
-            return Position.Top;
-        case 'below':
-            return Position.Bottom;
-        case 'within':
-        default:
-            return Position.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(Event.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
-            this._bufferOnDidLayoutChange.fire();
-        }), this._bufferOnDidLayoutChange.onEvent(() => {
-            this._onDidLayoutChange.fire();
-        }), this._bufferOnDidLayoutChange);
+function toTarget(direction) {
+    switch (direction) {
+        case 'left':
+            return 'left';
+        case 'right':
+            return 'right';
+        case 'above':
+            return 'top';
+        case 'below':
+            return 'bottom';
+        case 'within':
+        default:
+            return 'center';
     }
+}
+class BaseGrid extends CompositeDisposable {
     get id() {
         return this._id;
     }
@@ -3464,6 +3652,32 @@ class BaseGrid extends CompositeDisposable {
     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(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();
@@ -3572,10 +3786,51 @@ class BaseGrid extends CompositeDisposable {
     }
 }
 
+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;
@@ -3584,6 +3839,7 @@ class PanelApiImpl extends CompositeDisposable {
         this._isVisible = true;
         this._width = 0;
         this._height = 0;
+        this.panelUpdatesDisposable = new MutableDisposable();
         this._onDidDimensionChange = new Emitter({
             replay: true,
         });
@@ -3612,7 +3868,10 @@ class PanelApiImpl extends CompositeDisposable {
         //
         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;
@@ -3623,21 +3882,14 @@ class PanelApiImpl extends CompositeDisposable {
             this._height = event.height;
         }));
     }
-    //
-    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;
+    initialize(panel) {
+        this.panelUpdatesDisposable.value = this._onUpdateParameters.event((parameters) => {
+            panel.update({
+                params: {
+                    params: parameters,
+                },
+            });
+        });
     }
     setVisible(isVisible) {
         this._onVisibilityChange.fire({ isVisible });
@@ -3645,26 +3897,29 @@ class PanelApiImpl extends CompositeDisposable {
     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);
@@ -3675,19 +3930,6 @@ class GridviewPanelApiImpl extends PanelApiImpl {
 }
 
 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;
     }
@@ -3711,30 +3953,29 @@ class DockviewPanelApiImpl extends GridviewPanelApiImpl {
     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;
     }
@@ -3747,6 +3988,22 @@ class DockviewGroupPanel extends CompositeDisposable {
     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;
@@ -3829,6 +4086,9 @@ class DockviewGroupPanel extends CompositeDisposable {
 }
 
 class ActionContainer {
+    get element() {
+        return this._element;
+    }
     constructor() {
         this._element = document.createElement('div');
         this._element.className = 'actions-bar';
@@ -3836,9 +4096,6 @@ class ActionContainer {
         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';
@@ -3879,6 +4136,9 @@ const createChevronRightButton = () => createSvgElementFromPath({
 });
 
 class Watermark extends CompositeDisposable {
+    get id() {
+        return 'watermark';
+    }
     constructor() {
         super();
         this._element = document.createElement('div');
@@ -3906,9 +4166,6 @@ class Watermark extends CompositeDisposable {
             }
         }));
     }
-    get id() {
-        return 'watermark';
-    }
     update(_event) {
         // noop
     }
@@ -3971,6 +4228,12 @@ function createComponent(id, componentName, components = {}, frameworkComponents
 
 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;
@@ -4003,12 +4266,6 @@ class DefaultTab extends CompositeDisposable {
         }));
         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();
@@ -4047,6 +4304,19 @@ class DefaultTab extends CompositeDisposable {
 }
 
 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;
@@ -4067,19 +4337,6 @@ class BasePanelView extends CompositeDisposable {
             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();
     }
@@ -4120,50 +4377,6 @@ class BasePanelView extends CompositeDisposable {
 }
 
 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;
     }
@@ -4213,6 +4426,51 @@ class GridviewPanel extends BasePanelView {
     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 });
     }
@@ -4258,10 +4516,6 @@ class GridviewPanel extends BasePanelView {
 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;
     }
@@ -4295,6 +4549,10 @@ class GroupPanel extends GridviewPanel {
     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();
     }
@@ -4315,17 +4573,17 @@ class GroupPanel extends GridviewPanel {
 }
 
 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);
@@ -4358,14 +4616,49 @@ class DefaultGroupPanelView {
     }
 }
 
-const nextGroupId = sequentialNumberGenerator();
 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;
+    }
+    set tabHeight(height) {
+        this.options.tabHeight = height;
+        this._groups.forEach((value) => {
+            value.value.model.header.height = height;
+        });
+    }
+    get tabHeight() {
+        return this.options.tabHeight;
+    }
     constructor(element, options) {
         super(element, {
             proportionalLayout: true,
             orientation: options.orientation || Orientation.HORIZONTAL,
             styles: options.styles,
         });
+        this.nextGroupId = sequentialNumberGenerator();
+        this.watermark = null;
         this._onDidDrop = new Emitter();
         this.onDidDrop = this._onDidDrop.event;
         this._onDidRemovePanel = new Emitter();
@@ -4376,7 +4669,10 @@ class DockviewComponent extends BaseGrid {
         this.onDidLayoutFromJSON = this._onDidLayoutFromJSON.event;
         this._onDidActivePanelChange = new Emitter();
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-        this.addDisposables(this._onDidDrop, Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
+        this.element.classList.add('dv-dockview');
+        this.addDisposables(this._onDidDrop, Event.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
+            this.updateWatermark();
+        }), Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
             this._bufferOnDidLayoutChange.fire();
         }));
         this._options = options;
@@ -4396,38 +4692,72 @@ class DockviewComponent extends BaseGrid {
             !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: 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 === 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 === 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' &&
@@ -4477,8 +4807,7 @@ class DockviewComponent extends BaseGrid {
             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;
             }
@@ -4511,14 +4840,14 @@ class DockviewComponent extends BaseGrid {
     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) => {
@@ -4531,19 +4860,20 @@ class DockviewComponent extends BaseGrid {
                 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);
@@ -4582,12 +4912,31 @@ class DockviewComponent extends BaseGrid {
             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;
@@ -4595,7 +4944,7 @@ class DockviewComponent extends BaseGrid {
         let panel;
         if (referenceGroup) {
             const target = toTarget(((_b = options.position) === null || _b === void 0 ? void 0 : _b.direction) || 'within');
-            if (target === Position.Center) {
+            if (target === 'center') {
                 panel = this.createPanel(options, referenceGroup);
                 referenceGroup.model.openPanel(panel);
             }
@@ -4624,10 +4973,7 @@ class DockviewComponent extends BaseGrid {
         }
         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);
         }
     }
@@ -4639,24 +4985,67 @@ class DockviewComponent extends BaseGrid {
             ? { '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) {
@@ -4674,7 +5063,13 @@ class DockviewComponent extends BaseGrid {
         const sourceGroup = groupId
             ? (_a = this._groups.get(groupId)) === null || _a === void 0 ? void 0 : _a.value
             : undefined;
-        if (!target || target === 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) {
@@ -4722,6 +5117,28 @@ class DockviewComponent extends BaseGrid {
             }
         }
     }
+    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, Sizing.Distribute, dropLocation);
+            }
+        }
+    }
     doSetGroupActive(group, skipFocus) {
         var _a, _b;
         const isGroupAlreadyFocused = this._activeGroup === group;
@@ -4743,9 +5160,9 @@ class DockviewComponent extends BaseGrid {
             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);
@@ -4778,7 +5195,7 @@ class DockviewComponent extends BaseGrid {
             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,
@@ -4813,6 +5230,21 @@ class DockviewComponent extends BaseGrid {
 }
 
 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,
@@ -4829,21 +5261,6 @@ class GridviewComponent extends BaseGrid {
             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;
@@ -4941,7 +5358,7 @@ class GridviewComponent extends BaseGrid {
             throw new Error(`reference group ${options.reference} does not exist`);
         }
         const target = toTarget(options.direction);
-        if (target === Position.Center) {
+        if (target === 'center') {
             throw new Error(`${target} not supported as an option`);
         }
         else {
@@ -4959,7 +5376,7 @@ class GridviewComponent extends BaseGrid {
                 throw new Error(`reference group ${options.position.referencePanel} does not exist`);
             }
             const target = toTarget(options.position.direction);
-            if (target === Position.Center) {
+            if (target === 'center') {
                 throw new Error(`${target} not supported as an option`);
             }
             else {
@@ -5048,29 +5465,6 @@ class GridviewComponent extends BaseGrid {
  * 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();
     }
@@ -5108,6 +5502,29 @@ class SplitviewComponent extends CompositeDisposable {
             ? 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;
@@ -5315,6 +5732,9 @@ class SplitviewPanelApiImpl extends PanelApiImpl {
 }
 
 class PaneviewPanelApiImpl extends SplitviewPanelApiImpl {
+    set pane(pane) {
+        this._pane = pane;
+    }
     constructor(id) {
         super(id);
         this._onDidExpansionChange = new Emitter({
@@ -5327,9 +5747,6 @@ class PaneviewPanelApiImpl extends SplitviewPanelApiImpl {
         this.onMouseLeave = this._onMouseLeave.event;
         this.addDisposables(this._onDidExpansionChange, this._onMouseEnter, this._onMouseLeave);
     }
-    set pane(pane) {
-        this._pane = pane;
-    }
     setExpanded(isExpanded) {
         var _a;
         (_a = this._pane) === null || _a === void 0 ? void 0 : _a.setExpanded(isExpanded);
@@ -5341,50 +5758,6 @@ class PaneviewPanelApiImpl extends SplitviewPanelApiImpl {
 }
 
 class PaneviewPanel extends BasePanelView {
-    constructor(id, component, headerComponent, orientation, isExpanded, isHeaderVisible) {
-        super(id, component, new PaneviewPanelApiImpl(id));
-        this.headerComponent = headerComponent;
-        this._onDidChangeExpansionState = new Emitter({ replay: true });
-        this.onDidChangeExpansionState = this._onDidChangeExpansionState.event;
-        this._onDidChange = new Emitter();
-        this.onDidChange = this._onDidChange.event;
-        this.headerSize = 22;
-        this._orthogonalSize = 0;
-        this._size = 0;
-        this._minimumBodySize = 100;
-        this._maximumBodySize = Number.POSITIVE_INFINITY;
-        this._isExpanded = false;
-        this.expandedSize = 0;
-        this.api.pane = this; // TODO cannot use 'this' before 'super'
-        this._isExpanded = isExpanded;
-        this._headerVisible = isHeaderVisible;
-        this._onDidChangeExpansionState.fire(this.isExpanded()); // initialize value
-        this._orientation = orientation;
-        this.element.classList.add('pane');
-        this.addDisposables(this.api.onDidSizeChange((event) => {
-            this._onDidChange.fire({ size: event.size });
-        }), addDisposableListener(this.element, 'mouseenter', (ev) => {
-            this.api._onMouseEnter.fire(ev);
-        }), addDisposableListener(this.element, 'mouseleave', (ev) => {
-            this.api._onMouseLeave.fire(ev);
-        }));
-        this.addDisposables(this._onDidChangeExpansionState, this.onDidChangeExpansionState((isPanelExpanded) => {
-            this.api._onDidExpansionChange.fire({
-                isExpanded: isPanelExpanded,
-            });
-        }), this.api.onDidFocusChange((e) => {
-            if (!this.header) {
-                return;
-            }
-            if (e.isFocused) {
-                addClasses(this.header, 'focused');
-            }
-            else {
-                removeClasses(this.header, 'focused');
-            }
-        }));
-        this.renderOnce();
-    }
     set orientation(value) {
         this._orientation = value;
     }
@@ -5432,6 +5805,51 @@ class PaneviewPanel extends BasePanelView {
         this._headerVisible = value;
         this.header.style.display = value ? '' : 'none';
     }
+    constructor(id, component, headerComponent, orientation, isExpanded, isHeaderVisible) {
+        super(id, component, new PaneviewPanelApiImpl(id));
+        this.headerComponent = headerComponent;
+        this._onDidChangeExpansionState = new Emitter({ replay: true });
+        this.onDidChangeExpansionState = this._onDidChangeExpansionState.event;
+        this._onDidChange = new Emitter();
+        this.onDidChange = this._onDidChange.event;
+        this.headerSize = 22;
+        this._orthogonalSize = 0;
+        this._size = 0;
+        this._minimumBodySize = 100;
+        this._maximumBodySize = Number.POSITIVE_INFINITY;
+        this._isExpanded = false;
+        this.expandedSize = 0;
+        this.api.pane = this; // TODO cannot use 'this' before 'super'
+        this.api.initialize(this);
+        this._isExpanded = isExpanded;
+        this._headerVisible = isHeaderVisible;
+        this._onDidChangeExpansionState.fire(this.isExpanded()); // initialize value
+        this._orientation = orientation;
+        this.element.classList.add('pane');
+        this.addDisposables(this.api.onDidSizeChange((event) => {
+            this._onDidChange.fire({ size: event.size });
+        }), addDisposableListener(this.element, 'mouseenter', (ev) => {
+            this.api._onMouseEnter.fire(ev);
+        }), addDisposableListener(this.element, 'mouseleave', (ev) => {
+            this.api._onMouseLeave.fire(ev);
+        }));
+        this.addDisposables(this._onDidChangeExpansionState, this.onDidChangeExpansionState((isPanelExpanded) => {
+            this.api._onDidExpansionChange.fire({
+                isExpanded: isPanelExpanded,
+            });
+        }), this.api.onDidFocusChange((e) => {
+            if (!this.header) {
+                return;
+            }
+            if (e.isFocused) {
+                addClasses(this.header, 'focused');
+            }
+            else {
+                removeClasses(this.header, 'focused');
+            }
+        }));
+        this.renderOnce();
+    }
     setVisible(isVisible) {
         this.api._onDidVisibilityChange.fire({ isVisible });
     }
@@ -5555,7 +5973,10 @@ class DraggablePaneviewPanel extends PaneviewPanel {
             }
         })(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) {
@@ -5598,12 +6019,10 @@ class DraggablePaneviewPanel extends PaneviewPanel {
         const allPanels = containerApi.panels;
         const fromIndex = allPanels.indexOf(existingPanel);
         let toIndex = containerApi.panels.indexOf(this);
-        if (event.position === Position.Left ||
-            event.position === Position.Top) {
+        if (event.position === 'left' || event.position === 'top') {
             toIndex = Math.max(0, toIndex - 1);
         }
-        if (event.position === Position.Right ||
-            event.position === Position.Bottom) {
+        if (event.position === 'right' || event.position === 'bottom') {
             if (fromIndex > toIndex) {
                 toIndex++;
             }
@@ -5614,6 +6033,9 @@ class DraggablePaneviewPanel extends PaneviewPanel {
 }
 
 class DefaultHeader extends CompositeDisposable {
+    get element() {
+        return this._element;
+    }
     constructor() {
         super();
         this._expandedIcon = createExpandMoreButton();
@@ -5632,9 +6054,6 @@ class DefaultHeader extends CompositeDisposable {
             (_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;
@@ -5687,36 +6106,6 @@ class PaneFramework extends DraggablePaneviewPanel {
     }
 }
 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: Orientation.VERTICAL,
-        });
-        this.addDisposables(this._disposable);
-    }
     get id() {
         return this._id;
     }
@@ -5751,6 +6140,36 @@ class PaneviewComponent extends CompositeDisposable {
     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: Orientation.VERTICAL,
+        });
+        this.addDisposables(this._disposable);
+    }
     focus() {
         //
     }
@@ -5936,36 +6355,6 @@ class PaneviewComponent extends CompositeDisposable {
 }
 
 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;
     }
@@ -5998,6 +6387,37 @@ class SplitviewPanel extends BasePanelView {
     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 });
     }
@@ -6163,6 +6583,9 @@ function isReactElement(element) {
 }
 
 class ReactPanelContentPart {
+    get element() {
+        return this._element;
+    }
     constructor(id, component, reactPortalStore) {
         this.id = id;
         this.component = component;
@@ -6174,9 +6597,6 @@ class ReactPanelContentPart {
         this._element = document.createElement('div');
         this._element.className = 'dockview-react-part';
     }
-    get element() {
-        return this._element;
-    }
     focus() {
         // TODO
     }
@@ -6211,6 +6631,9 @@ class ReactPanelContentPart {
 }
 
 class ReactPanelHeaderPart {
+    get element() {
+        return this._element;
+    }
     constructor(id, component, reactPortalStore) {
         this.id = id;
         this.component = component;
@@ -6218,9 +6641,6 @@ class ReactPanelHeaderPart {
         this._element = document.createElement('div');
         this._element.className = 'dockview-react-part';
     }
-    get element() {
-        return this._element;
-    }
     focus() {
         //noop
     }
@@ -6279,7 +6699,7 @@ class ReactPanelDeserialzier {
             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,
@@ -6290,6 +6710,9 @@ class ReactPanelDeserialzier {
 }
 
 class ReactWatermarkPart {
+    get element() {
+        return this._element;
+    }
     constructor(id, component, reactPortalStore) {
         this.id = id;
         this.component = component;
@@ -6300,9 +6723,6 @@ class ReactWatermarkPart {
         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, {
@@ -6345,14 +6765,6 @@ class ReactWatermarkPart {
 }
 
 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;
     }
@@ -6362,6 +6774,14 @@ class ReactGroupControlsRendererPart {
     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
     }
@@ -6476,6 +6896,7 @@ const DockviewReact = React.forwardRef((props, ref) => {
                 : 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);
@@ -6688,7 +7109,7 @@ SplitviewReact.displayName = 'SplitviewComponent';
 
 class ReactGridPanelView extends GridviewPanel {
     constructor(id, component, reactComponent, reactPortalStore) {
-        super(id, component);
+        super(id, component, new GridviewPanelApiImpl(id));
         this.reactComponent = reactComponent;
         this.reactPortalStore = reactPortalStore;
     }
@@ -6767,6 +7188,9 @@ const GridviewReact = React.forwardRef((props, ref) => {
 GridviewReact.displayName = 'GridviewComponent';
 
 class PanePanelSection {
+    get element() {
+        return this._element;
+    }
     constructor(id, component, reactPortalStore) {
         this.id = id;
         this.component = component;
@@ -6775,9 +7199,6 @@ class PanePanelSection {
         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,
@@ -6896,4 +7317,4 @@ const PaneviewReact = React.forwardRef((props, ref) => {
 });
 PaneviewReact.displayName = 'PaneviewComponent';
 
-export { BaseGrid, ContentContainer, DockviewApi, DockviewComponent, DockviewDefaultTab, DockviewDropTargets, DockviewReact, Event, Gridview, GridviewApi, GridviewComponent, GridviewPanel, GridviewReact, Groupview, LayoutPriority, LocalSelectionTransfer, MouseEventKind, Orientation, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, PaneviewReact, Position, ReactPart, ReactPartContext, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, SplitviewReact, Tab, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRelativeLocation, indexInParent, isGridBranchNode, isReactElement, orthogonal, toTarget, usePortalsLifecycle };
+export { BaseGrid, ContentContainer, DockviewApi, DockviewComponent, DockviewDefaultTab, DockviewDropTargets, DockviewReact, Event, Gridview, GridviewApi, GridviewComponent, GridviewPanel, GridviewReact, Groupview, LayoutPriority, LocalSelectionTransfer, Orientation, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, PaneviewReact, ReactPart, ReactPartContext, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, SplitviewReact, Tab, directionToPosition, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRelativeLocation, indexInParent, isGridBranchNode, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, isReactElement, orthogonal, positionToDirection, toTarget, usePortalsLifecycle };