dockview 1.6.0 → 1.7.0

package/dist/dockview.amd.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.6.0
+ * @version 1.7.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -53,7 +53,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     }
   }
 
-  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}";
+  var css_248z = "@import \"dockview-core/dist/styles/dockview.css\";\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}";
   styleInject(css_248z);
 
   class TransferObject {
@@ -126,7 +126,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       return paneTransfer.getData(PaneTransfer.prototype)[0];
   }
 
-  exports.Event = void 0;
+  exports.DockviewEvent = void 0;
   (function (Event) {
       Event.any = (...children) => {
           return (listener) => {
@@ -140,7 +140,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               };
           };
       };
-  })(exports.Event || (exports.Event = {}));
+  })(exports.DockviewEvent || (exports.DockviewEvent = {}));
   // dumb event emitter with better typings than nodes event emitter
   // https://github.com/microsoft/vscode/blob/master/src/vs/base/common/event.ts
   class Emitter {
@@ -367,16 +367,30 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
   }
 
-  const clamp = (value, min, max) => {
-      if (min > max) {
-          throw new Error(`${min} > ${max} is an invalid condition`);
+  function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {
+      const Component = typeof componentName === 'string'
+          ? components[componentName]
+          : undefined;
+      const FrameworkComponent = typeof componentName === 'string'
+          ? frameworkComponents[componentName]
+          : undefined;
+      if (Component && FrameworkComponent) {
+          throw new Error(`Cannot create '${id}'. component '${componentName}' registered as both a component and frameworkComponent`);
       }
-      return Math.min(max, Math.max(value, min));
-  };
-  const sequentialNumberGenerator = () => {
-      let value = 1;
-      return { next: () => (value++).toString() };
-  };
+      if (FrameworkComponent) {
+          if (!createFrameworkComponent) {
+              throw new Error(`Cannot create '${id}' for framework component '${componentName}'. you must register a frameworkPanelWrapper to use framework components`);
+          }
+          return createFrameworkComponent.createComponent(id, componentName, FrameworkComponent);
+      }
+      if (!Component) {
+          if (fallback) {
+              return fallback();
+          }
+          throw new Error(`Cannot create '${id}', no component '${componentName}' provided`);
+      }
+      return new Component(id, componentName);
+  }
 
   function tail(arr) {
       if (arr.length === 0) {
@@ -418,6 +432,26 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           arr.push(value);
       }
   }
+  function firstIndex(array, fn) {
+      for (let i = 0; i < array.length; i++) {
+          const element = array[i];
+          if (fn(element)) {
+              return i;
+          }
+      }
+      return -1;
+  }
+
+  const clamp = (value, min, max) => {
+      if (min > max) {
+          throw new Error(`${min} > ${max} is an invalid condition`);
+      }
+      return Math.min(max, Math.max(value, min));
+  };
+  const sequentialNumberGenerator = () => {
+      let value = 1;
+      return { next: () => (value++).toString() };
+  };
   const range = (from, to) => {
       const result = [];
       if (typeof to !== 'number') {
@@ -436,15 +470,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
       return result;
   };
-  function firstIndex(array, fn) {
-      for (let i = 0; i < array.length; i++) {
-          const element = array[i];
-          if (fn(element)) {
-              return i;
-          }
-      }
-      return -1;
-  }
 
   class ViewItem {
       set size(size) {
@@ -459,25 +484,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       get visible() {
           return typeof this._cachedVisibleSize === 'undefined';
       }
-      setVisible(visible, size) {
-          var _a;
-          if (visible === this.visible) {
-              return;
-          }
-          if (visible) {
-              this.size = clamp((_a = this._cachedVisibleSize) !== null && _a !== void 0 ? _a : 0, this.viewMinimumSize, this.viewMaximumSize);
-              this._cachedVisibleSize = undefined;
-          }
-          else {
-              this._cachedVisibleSize =
-                  typeof size === 'number' ? size : this.size;
-              this.size = 0;
-          }
-          this.container.classList.toggle('visible', visible);
-          if (this.view.setVisible) {
-              this.view.setVisible(visible);
-          }
-      }
       get minimumSize() {
           return this.visible ? this.view.minimumSize : 0;
       }
@@ -514,11 +520,25 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               this._cachedVisibleSize = size.cachedVisibleSize;
           }
       }
-      // layout(offset: number, layoutContext: TLayoutContext | undefined): void {
-      //     this.layoutContainer(offset);
-      //     this.view.layout(this.size, offset, layoutContext);
-      // }
-      // abstract layoutContainer(offset: number): void;
+      setVisible(visible, size) {
+          var _a;
+          if (visible === this.visible) {
+              return;
+          }
+          if (visible) {
+              this.size = clamp((_a = this._cachedVisibleSize) !== null && _a !== void 0 ? _a : 0, this.viewMinimumSize, this.viewMaximumSize);
+              this._cachedVisibleSize = undefined;
+          }
+          else {
+              this._cachedVisibleSize =
+                  typeof size === 'number' ? size : this.size;
+              this.size = 0;
+          }
+          this.container.classList.toggle('visible', visible);
+          if (this.view.setVisible) {
+              this.view.setVisible(visible);
+          }
+      }
       dispose() {
           this.disposable.dispose();
           return this.view;
@@ -627,14 +647,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this._orthogonalSize = 0;
           this.contentSize = 0;
           this._proportions = undefined;
+          this._startSnappingEnabled = true;
+          this._endSnappingEnabled = true;
           this._onDidSashEnd = new Emitter();
           this.onDidSashEnd = this._onDidSashEnd.event;
           this._onDidAddView = new Emitter();
           this.onDidAddView = this._onDidAddView.event;
           this._onDidRemoveView = new Emitter();
           this.onDidRemoveView = this._onDidRemoveView.event;
-          this._startSnappingEnabled = true;
-          this._endSnappingEnabled = true;
           this.resize = (index, delta, sizes = this.views.map((x) => x.size), lowPriorityIndexes, highPriorityIndexes, overloadMinDelta = Number.NEGATIVE_INFINITY, overloadMaxDelta = Number.POSITIVE_INFINITY, snapBefore, snapAfter) => {
               if (index < 0 || index > this.views.length) {
                   return 0;
@@ -1529,10 +1549,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.orientation = orientation;
           this.proportionalLayout = proportionalLayout;
           this.styles = styles;
+          this._childrenDisposable = Disposable.NONE;
           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');
@@ -1653,7 +1673,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
       setupChildrenEvents() {
           this._childrenDisposable.dispose();
-          this._childrenDisposable = exports.Event.any(...this.children.map((c) => c.onDidChange))((e) => {
+          this._childrenDisposable = exports.DockviewEvent.any(...this.children.map((c) => c.onDidChange))((e) => {
               /**
                * indicate a change has occured to allows any re-rendering but don't bubble
                * event because that was specific to this branch
@@ -1791,6 +1811,35 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       get length() {
           return this._root ? this._root.children.length : 0;
       }
+      get orientation() {
+          return this.root.orientation;
+      }
+      set orientation(orientation) {
+          if (this.root.orientation === orientation) {
+              return;
+          }
+          const { size, orthogonalSize } = this.root;
+          this.root = flipNode(this.root, orthogonalSize, size);
+          this.root.layout(size, orthogonalSize);
+      }
+      get width() {
+          return this.root.width;
+      }
+      get height() {
+          return this.root.height;
+      }
+      get minimumWidth() {
+          return this.root.minimumWidth;
+      }
+      get minimumHeight() {
+          return this.root.minimumHeight;
+      }
+      get maximumWidth() {
+          return this.root.maximumHeight;
+      }
+      get maximumHeight() {
+          return this.root.maximumHeight;
+      }
       serialize() {
           const root = serializeBranchNode(this.getView(), this.orientation);
           return {
@@ -1837,17 +1886,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
           return result;
       }
-      get orientation() {
-          return this.root.orientation;
-      }
-      set orientation(orientation) {
-          if (this.root.orientation === orientation) {
-              return;
-          }
-          const { size, orthogonalSize } = this.root;
-          this.root = flipNode(this.root, orthogonalSize, size);
-          this.root.layout(size, orthogonalSize);
-      }
       get root() {
           return this._root;
       }
@@ -1929,24 +1967,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
           return findLeaf(this.root, reverse);
       }
-      get width() {
-          return this.root.width;
-      }
-      get height() {
-          return this.root.height;
-      }
-      get minimumWidth() {
-          return this.root.minimumWidth;
-      }
-      get minimumHeight() {
-          return this.root.minimumHeight;
-      }
-      get maximumWidth() {
-          return this.root.maximumHeight;
-      }
-      get maximumHeight() {
-          return this.root.maximumHeight;
-      }
       constructor(proportionalLayout, styles, orientation) {
           this.proportionalLayout = proportionalLayout;
           this.styles = styles;
@@ -2451,10 +2471,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
   }
 
-  function isBooleanValue(value) {
-      return typeof value === 'boolean';
-  }
-
   function numberOrFallback(maybeNumber, fallback) {
       return typeof maybeNumber === 'number' ? maybeNumber : fallback;
   }
@@ -2519,7 +2535,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                       this.removeDropTarget();
                       return;
                   }
-                  if (isBooleanValue(this.options.canDisplayOverlay)) {
+                  if (typeof this.options.canDisplayOverlay === 'boolean') {
                       if (!this.options.canDisplayOverlay) {
                           return;
                       }
@@ -2527,20 +2543,20 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   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';
+                  if (!this.targetElement) {
+                      this.targetElement = document.createElement('div');
+                      this.targetElement.className = 'drop-target-dropzone';
+                      this.overlayElement = document.createElement('div');
+                      this.overlayElement.className = 'drop-target-selection';
                       this._state = 'center';
-                      this.target.appendChild(this.overlay);
+                      this.targetElement.appendChild(this.overlayElement);
                       this.element.classList.add('drop-target');
-                      this.element.append(this.target);
+                      this.element.append(this.targetElement);
                   }
                   if (this.options.acceptedTargetZones.length === 0) {
                       return;
                   }
-                  if (!this.target || !this.overlay) {
+                  if (!this.targetElement || !this.overlayElement) {
                       return;
                   }
                   this.toggleClasses(quadrant, width, height);
@@ -2554,10 +2570,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               },
               onDrop: (e) => {
                   e.preventDefault();
-                  e.stopPropagation();
                   const state = this._state;
                   this.removeDropTarget();
                   if (state) {
+                      // only stop the propagation of the event if we are dealing with it
+                      // which is only when the target has state
+                      e.stopPropagation();
                       this._onDrop.fire({ position: state, nativeEvent: e });
                   }
               },
@@ -2568,7 +2586,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
       toggleClasses(quadrant, width, height) {
           var _a, _b, _c, _d;
-          if (!this.overlay) {
+          if (!this.overlayElement) {
               return;
           }
           const isSmallX = width < 100;
@@ -2615,11 +2633,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           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);
+          this.overlayElement.style.transform = transform;
+          toggleClass(this.overlayElement, 'small-right', isSmallX && isRight);
+          toggleClass(this.overlayElement, 'small-left', isSmallX && isLeft);
+          toggleClass(this.overlayElement, 'small-top', isSmallY && isTop);
+          toggleClass(this.overlayElement, 'small-bottom', isSmallY && isBottom);
       }
       setState(quadrant) {
           switch (quadrant) {
@@ -2651,11 +2669,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           return calculateQuadrantAsPixels(overlayType, x, y, width, height, value);
       }
       removeDropTarget() {
-          if (this.target) {
+          if (this.targetElement) {
               this._state = undefined;
-              this.element.removeChild(this.target);
-              this.target = undefined;
-              this.overlay = undefined;
+              this.element.removeChild(this.targetElement);
+              this.targetElement = undefined;
+              this.overlayElement = undefined;
               this.element.classList.remove('drop-target');
           }
       }
@@ -2802,6 +2820,16 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               this.disposable.value = this.getData(event.dataTransfer);
               if (event.dataTransfer) {
                   event.dataTransfer.effectAllowed = 'move';
+                  /**
+                   * Although this is not used by dockview many third party dnd libraries will check
+                   * dataTransfer.types to determine valid drag events.
+                   *
+                   * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
+                   * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
+                   * dnd logic. You can see the code at
+                   * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
+                   */
+                  event.dataTransfer.setData('text/plain', '__dockview_internal_drag_event__');
               }
           }), addDisposableListener(this.el, 'dragend', () => {
               for (const iframe of this.iframes) {
@@ -2907,6 +2935,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       document.body.appendChild(ghostElement);
       dataTransfer.setDragImage(ghostElement, 0, 0);
       setTimeout(() => {
+          removeClasses(ghostElement, 'dv-dragged');
           ghostElement.remove();
       }, 0);
   }
@@ -3042,10 +3071,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           return (this.selectedIndex > -1 &&
               this.tabs[this.selectedIndex].value === tab);
       }
-      at(index) {
-          var _a;
-          return (_a = this.tabs[index]) === null || _a === void 0 ? void 0 : _a.value;
-      }
       indexOf(id) {
           return this.tabs.findIndex((tab) => tab.value.panelId === id);
       }
@@ -3167,7 +3192,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
   }
 
-  class Groupview extends CompositeDisposable {
+  class DockviewGroupPanelModel extends CompositeDisposable {
       get element() {
           throw new Error('not supported');
       }
@@ -3193,18 +3218,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       get isEmpty() {
           return this._panels.length === 0;
       }
-      get minimumHeight() {
-          return 100;
-      }
-      get maximumHeight() {
-          return Number.MAX_SAFE_INTEGER;
-      }
-      get minimumWidth() {
-          return 100;
-      }
-      get maximumWidth() {
-          return Number.MAX_SAFE_INTEGER;
-      }
       get hasWatermark() {
           return !!(this.watermark && this.container.contains(this.watermark.element));
       }
@@ -3377,8 +3390,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           //noop
       }
       focus() {
-          var _a;
-          (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus();
+          var _a, _b;
+          (_b = (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
       }
       openPanel(panel, options = {}) {
           if (typeof options.index !== 'number' ||
@@ -3439,10 +3452,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.tabsContainer.setActionElement(element);
       }
       setActive(isGroupActive, skipFocus = false, force = false) {
-          var _a, _b;
+          var _a, _b, _c, _d;
           if (!force && this.isActive === isGroupActive) {
               if (!skipFocus) {
-                  (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus();
+                  (_b = (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
               }
               return;
           }
@@ -3456,7 +3469,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.updateContainer();
           if (isGroupActive) {
               if (!skipFocus) {
-                  (_b = this._activePanel) === null || _b === void 0 ? void 0 : _b.focus();
+                  (_d = (_c = this._activePanel) === null || _c === void 0 ? void 0 : _c.focus) === null || _d === void 0 ? void 0 : _d.call(_c);
               }
           }
       }
@@ -3527,15 +3540,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.mostRecentlyUsed = [panel, ...this.mostRecentlyUsed];
       }
       updateContainer() {
+          var _a, _b;
           toggleClass(this.container, 'empty', this.isEmpty);
           this.panels.forEach((panel) => panel.updateParentGroup(this.groupPanel, this.isActive));
           if (this.isEmpty && !this.watermark) {
               const watermark = this.accessor.createWatermarkComponent();
               watermark.init({
                   containerApi: new DockviewApi(this.accessor),
-                  params: {},
-                  title: '',
-                  api: null,
+                  group: this.groupPanel,
               });
               this.watermark = watermark;
               addDisposableListener(this.watermark.element, 'click', () => {
@@ -3549,7 +3561,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
           if (!this.isEmpty && this.watermark) {
               this.watermark.element.remove();
-              this.watermark.dispose();
+              (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
               this.watermark = undefined;
               this.tabsContainer.show();
           }
@@ -3609,9 +3621,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
       }
       dispose() {
-          var _a;
+          var _a, _b;
           super.dispose();
-          (_a = this.watermark) === null || _a === void 0 ? void 0 : _a.dispose();
+          (_b = (_a = this.watermark) === null || _a === void 0 ? void 0 : _a.dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
           for (const panel of this.panels) {
               panel.dispose();
           }
@@ -3691,7 +3703,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.addDisposables(this.gridview.onDidChange(() => {
               this._bufferOnDidLayoutChange.fire();
           }));
-          this.addDisposables(exports.Event.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
+          this.addDisposables(exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
               this._bufferOnDidLayoutChange.fire();
           }), this._bufferOnDidLayoutChange.onEvent(() => {
               this._onDidLayoutChange.fire();
@@ -3732,19 +3744,20 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           return (_a = this._groups.get(id)) === null || _a === void 0 ? void 0 : _a.value;
       }
       doSetGroupActive(group, skipFocus) {
+          var _a, _b, _c;
           if (this._activeGroup === group) {
               return;
           }
           if (this._activeGroup) {
               this._activeGroup.setActive(false);
               if (!skipFocus) {
-                  this._activeGroup.focus();
+                  (_b = (_a = this._activeGroup).focus) === null || _b === void 0 ? void 0 : _b.call(_a);
               }
           }
           if (group) {
               group.setActive(true);
               if (!skipFocus) {
-                  group.focus();
+                  (_c = group.focus) === null || _c === void 0 ? void 0 : _c.call(group);
               }
           }
           this._activeGroup = group;
@@ -3805,31 +3818,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
   }
 
-  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
    */
@@ -3924,21 +3912,21 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
   }
 
-  class GridviewPanelApiImpl extends PanelApiImpl {
-      constructor(id, panel) {
+  class SplitviewPanelApiImpl extends PanelApiImpl {
+      //
+      constructor(id) {
           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);
@@ -3948,450 +3936,401 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
   }
 
-  class DockviewPanelApiImpl extends GridviewPanelApiImpl {
-      get title() {
-          return this.panel.title;
+  class PaneviewPanelApiImpl extends SplitviewPanelApiImpl {
+      set pane(pane) {
+          this._pane = pane;
       }
-      get isGroupActive() {
+      constructor(id) {
+          super(id);
+          this._onDidExpansionChange = new Emitter({
+              replay: true,
+          });
+          this.onDidExpansionChange = this._onDidExpansionChange.event;
+          this._onMouseEnter = new Emitter({});
+          this.onMouseEnter = this._onMouseEnter.event;
+          this._onMouseLeave = new Emitter({});
+          this.onMouseLeave = this._onMouseLeave.event;
+          this.addDisposables(this._onDidExpansionChange, this._onMouseEnter, this._onMouseLeave);
+      }
+      setExpanded(isExpanded) {
           var _a;
-          return !!((_a = this.group) === null || _a === void 0 ? void 0 : _a.isActive);
+          (_a = this._pane) === null || _a === void 0 ? void 0 : _a.setExpanded(isExpanded);
       }
-      set group(value) {
-          const isOldGroupActive = this.isGroupActive;
-          this._group = value;
-          this._onDidGroupChange.fire();
-          if (this._group) {
-              this.disposable.value = this._group.api.onDidActiveChange(() => {
-                  this._onDidActiveGroupChange.fire();
-              });
-              if (this.isGroupActive !== isOldGroupActive) {
-                  this._onDidActiveGroupChange.fire();
-              }
-          }
-      }
-      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.panel.update({ params: { title } });
-      }
-      close() {
-          this.group.model.closePanel(this.panel);
+      get isExpanded() {
+          var _a;
+          return !!((_a = this._pane) === null || _a === void 0 ? void 0 : _a.isExpanded());
       }
   }
 
-  class DockviewPanel extends CompositeDisposable {
-      get params() {
-          return this._params;
+  class BasePanelView extends CompositeDisposable {
+      get element() {
+          return this._element;
       }
-      get title() {
-          return this._title;
+      get width() {
+          return this._width;
       }
-      get group() {
-          return this._group;
+      get height() {
+          return this._height;
       }
-      get view() {
-          return this._view;
+      get params() {
+          var _a;
+          return (_a = this._params) === null || _a === void 0 ? void 0 : _a.params;
       }
-      constructor(id, accessor, containerApi, group) {
+      constructor(id, component, api) {
           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);
+          this.component = component;
+          this.api = api;
+          this._height = 0;
+          this._width = 0;
+          this._element = document.createElement('div');
+          this._element.tabIndex = -1;
+          this._element.style.outline = 'none';
+          this._element.style.height = '100%';
+          this._element.style.width = '100%';
+          this._element.style.overflow = 'hidden';
+          const { onDidFocus, onDidBlur } = trackFocus(this._element);
+          this.addDisposables(this.api, onDidFocus(() => {
+              this.api._onDidChangeFocus.fire({ isFocused: true });
+          }), onDidBlur(() => {
+              this.api._onDidChangeFocus.fire({ isFocused: false });
           }));
       }
-      init(params) {
-          var _a;
-          this._params = params.params;
-          this._view = params.view;
-          this.setTitle(params.title);
-          (_a = this.view) === null || _a === void 0 ? void 0 : _a.init(Object.assign(Object.assign({}, params), { api: this.api, containerApi: this.containerApi }));
-      }
       focus() {
           this.api._onFocusEvent.fire();
       }
-      toJSON() {
-          return {
-              id: this.id,
-              view: this.view.toJSON(),
-              params: Object.keys(this._params || {}).length > 0
-                  ? this._params
-                  : undefined,
-              title: this.title,
-          };
-      }
-      setTitle(title) {
-          var _a, _b;
-          const didTitleChange = title !== ((_a = this._params) === null || _a === void 0 ? void 0 : _a.title);
-          if (didTitleChange) {
-              this._title = title;
-              (_b = this.view) === null || _b === void 0 ? void 0 : _b.update({
-                  params: {
-                      params: this._params,
-                      title: this.title,
-                  },
-              });
-              this.api._onDidTitleChange.fire({ title });
-          }
-      }
-      update(event) {
-          var _a;
-          const params = event.params;
-          this._params = Object.assign(Object.assign({}, (this._params || {})), event.params.params);
-          if (typeof params.title === 'string') {
-              if (params.title !== this.title) {
-                  this._title = params.title;
-                  this.api._onDidTitleChange.fire({ title: this.title });
+      layout(width, height) {
+          this._width = width;
+          this._height = height;
+          this.api._onDidDimensionChange.fire({ width, height });
+          if (this.part) {
+              if (this._params) {
+                  this.part.update(this._params.params);
               }
           }
-          (_a = this.view) === null || _a === void 0 ? void 0 : _a.update({
-              params: {
-                  params: this._params,
-                  title: this.title,
-              },
-          });
       }
-      updateParentGroup(group, isGroupActive) {
-          var _a;
-          this._group = group;
-          this.api.group = group;
-          const isPanelVisible = this._group.model.isPanelActive(this);
-          this.api._onDidActiveChange.fire({
-              isActive: isGroupActive && isPanelVisible,
-          });
-          this.api._onDidVisibilityChange.fire({
-              isVisible: isPanelVisible,
-          });
-          (_a = this.view) === null || _a === void 0 ? void 0 : _a.updateParentGroup(this._group, this._group.model.isPanelActive(this));
+      init(parameters) {
+          this._params = parameters;
+          this.part = this.getComponent();
       }
-      layout(width, height) {
-          var _a;
-          // the obtain the correct dimensions of the content panel we must deduct the tab height
-          this.api._onDidDimensionChange.fire({
-              width,
-              height: height - (this.group.model.header.height || 0),
-          });
-          (_a = this.view) === null || _a === void 0 ? void 0 : _a.layout(width, height);
+      update(event) {
+          var _a, _b;
+          this._params = Object.assign(Object.assign({}, this._params), { params: Object.assign(Object.assign({}, (_a = this._params) === null || _a === void 0 ? void 0 : _a.params), event.params) });
+          (_b = this.part) === null || _b === void 0 ? void 0 : _b.update({ params: this._params.params });
+      }
+      toJSON() {
+          var _a, _b;
+          const params = (_b = (_a = this._params) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {};
+          return {
+              id: this.id,
+              component: this.component,
+              params: Object.keys(params).length > 0 ? params : undefined,
+          };
       }
       dispose() {
           var _a;
+          super.dispose();
           this.api.dispose();
-          this.mutableDisposable.dispose();
-          (_a = this.view) === null || _a === void 0 ? void 0 : _a.dispose();
+          (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
       }
   }
 
-  class ActionContainer {
-      get element() {
-          return this._element;
+  class PaneviewPanel extends BasePanelView {
+      set orientation(value) {
+          this._orientation = value;
       }
-      constructor() {
-          this._element = document.createElement('div');
-          this._element.className = 'actions-bar';
-          this._list = document.createElement('ul');
-          this._list.className = 'actions-container';
-          this._element.appendChild(this._list);
+      get orientation() {
+          return this._orientation;
       }
-      add(element) {
-          const listItem = document.createElement('li');
-          listItem.className = 'action-item';
-          this._list.appendChild(element);
+      get minimumSize() {
+          const headerSize = this.headerSize;
+          const expanded = this.isExpanded();
+          const minimumBodySize = expanded ? this._minimumBodySize : 0;
+          return headerSize + minimumBodySize;
       }
-  }
-
-  const createSvgElementFromPath = (params) => {
-      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-      svg.setAttributeNS(null, 'height', params.height);
-      svg.setAttributeNS(null, 'width', params.width);
-      svg.setAttributeNS(null, 'viewBox', params.viewbox);
-      svg.setAttributeNS(null, 'aria-hidden', 'false');
-      svg.setAttributeNS(null, 'focusable', 'false');
-      svg.classList.add('dockview-svg');
-      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-      path.setAttributeNS(null, 'd', params.path);
-      svg.appendChild(path);
-      return svg;
-  };
-  const createCloseButton = () => createSvgElementFromPath({
-      width: '11',
-      height: '11',
-      viewbox: '0 0 28 28',
-      path: 'M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z',
-  });
-  const createExpandMoreButton = () => createSvgElementFromPath({
-      width: '11',
-      height: '11',
-      viewbox: '0 0 24 15',
-      path: 'M12 14.15L0 2.15L2.15 0L12 9.9L21.85 0.0499992L24 2.2L12 14.15Z',
-  });
-  const createChevronRightButton = () => createSvgElementFromPath({
-      width: '11',
-      height: '11',
-      viewbox: '0 0 15 25',
-      path: 'M2.15 24.1L0 21.95L9.9 12.05L0 2.15L2.15 0L14.2 12.05L2.15 24.1Z',
-  });
-
-  class Watermark extends CompositeDisposable {
-      get id() {
-          return 'watermark';
+      get maximumSize() {
+          const headerSize = this.headerSize;
+          const expanded = this.isExpanded();
+          const maximumBodySize = expanded ? this._maximumBodySize : 0;
+          return headerSize + maximumBodySize;
       }
-      constructor() {
-          super();
-          this._element = document.createElement('div');
-          this._element.className = 'watermark';
-          const title = document.createElement('div');
-          title.className = 'watermark-title';
-          const emptySpace = document.createElement('span');
-          emptySpace.style.flexGrow = '1';
-          const content = document.createElement('div');
-          content.className = 'watermark-content';
-          this._element.appendChild(title);
-          this._element.appendChild(content);
-          const actions = new ActionContainer();
-          title.appendChild(emptySpace);
-          title.appendChild(actions.element);
-          const closeAnchor = document.createElement('div');
-          closeAnchor.className = 'close-action';
-          closeAnchor.appendChild(createCloseButton());
-          actions.add(closeAnchor);
-          this.addDisposables(addDisposableListener(closeAnchor, 'click', (ev) => {
-              var _a;
-              ev.preventDefault();
-              if (this.group) {
-                  (_a = this.params) === null || _a === void 0 ? void 0 : _a.containerApi.removeGroup(this.group);
-              }
-          }));
+      get size() {
+          return this._size;
       }
-      update(_event) {
-          // noop
+      get orthogonalSize() {
+          return this._orthogonalSize;
       }
-      focus() {
-          // noop
+      set orthogonalSize(size) {
+          this._orthogonalSize = size;
       }
-      toJSON() {
-          return {};
+      get minimumBodySize() {
+          return this._minimumBodySize;
       }
-      layout(_width, _height) {
-          // noop
+      set minimumBodySize(value) {
+          this._minimumBodySize = typeof value === 'number' ? value : 0;
       }
-      init(params) {
-          this.params = params;
-          this.addDisposables(this.params.containerApi.onDidLayoutChange(() => {
-              this.render();
-          }));
-          this.render();
+      get maximumBodySize() {
+          return this._maximumBodySize;
       }
-      updateParentGroup(group, _visible) {
-          this.group = group;
-          this.render();
-      }
-      get element() {
-          return this._element;
-      }
-      render() {
-          const isOneGroup = !!(this.params && this.params.containerApi.size <= 1);
-          toggleClass(this.element, 'has-actions', isOneGroup);
-      }
-      dispose() {
-          super.dispose();
-      }
-  }
-
-  function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {
-      const Component = typeof componentName === 'string'
-          ? components[componentName]
-          : undefined;
-      const FrameworkComponent = typeof componentName === 'string'
-          ? frameworkComponents[componentName]
-          : undefined;
-      if (Component && FrameworkComponent) {
-          throw new Error(`Cannot create '${id}'. component '${componentName}' registered as both a component and frameworkComponent`);
-      }
-      if (FrameworkComponent) {
-          if (!createFrameworkComponent) {
-              throw new Error(`Cannot create '${id}' for framework component '${componentName}'. you must register a frameworkPanelWrapper to use framework components`);
-          }
-          return createFrameworkComponent.createComponent(id, componentName, FrameworkComponent);
-      }
-      if (!Component) {
-          if (fallback) {
-              return fallback();
-          }
-          throw new Error(`Cannot create '${id}', no component '${componentName}' provided`);
+      set maximumBodySize(value) {
+          this._maximumBodySize =
+              typeof value === 'number' ? value : Number.POSITIVE_INFINITY;
       }
-      return new Component(id, componentName);
-  }
-
-  const DEFAULT_TAB_IDENTIFIER = '__default__tab__';
-  class DefaultTab extends CompositeDisposable {
-      get element() {
-          return this._element;
+      get headerVisible() {
+          return this._headerVisible;
       }
-      get id() {
-          return DEFAULT_TAB_IDENTIFIER;
+      set headerVisible(value) {
+          this._headerVisible = value;
+          this.header.style.display = value ? '' : 'none';
       }
-      constructor() {
-          super();
-          this._isPanelVisible = false;
-          this._isGroupActive = false;
-          //
-          this.params = {};
-          this._element = document.createElement('div');
-          this._element.className = 'default-tab';
-          //
-          this._content = document.createElement('div');
-          this._content.className = 'tab-content';
-          //
-          this._actionContainer = document.createElement('div');
-          this._actionContainer.className = 'action-container';
-          //
-          this._list = document.createElement('ul');
-          this._list.className = 'tab-list';
-          //
-          this.action = document.createElement('div');
-          this.action.className = 'tab-action';
-          this.action.appendChild(createCloseButton());
-          //
-          this._element.appendChild(this._content);
-          this._element.appendChild(this._actionContainer);
-          this._actionContainer.appendChild(this._list);
-          this._list.appendChild(this.action);
-          //
-          this.addDisposables(addDisposableListener(this._actionContainer, 'mousedown', (ev) => {
-              ev.preventDefault();
+      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.render();
-      }
-      update(event) {
-          this.params = Object.assign(Object.assign({}, this.params), event.params);
-          this.render();
+          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();
       }
-      toJSON() {
-          return { id: this.id };
+      setVisible(isVisible) {
+          this.api._onDidVisibilityChange.fire({ isVisible });
       }
-      focus() {
-          //noop
+      setActive(isActive) {
+          this.api._onDidActiveChange.fire({ isActive });
       }
-      init(params) {
-          this.params = params;
-          this._content.textContent = params.title;
-          addDisposableListener(this.action, 'click', (ev) => {
-              ev.preventDefault(); //
-              this.params.api.close();
-          });
+      isExpanded() {
+          return this._isExpanded;
       }
-      updateParentGroup(group, isPanelVisible) {
-          const changed = this._isPanelVisible !== isPanelVisible ||
-              this._isGroupActive !== group.isActive;
-          this._isPanelVisible = isPanelVisible;
-          this._isGroupActive = group.isActive;
-          if (changed) {
-              this.render();
+      setExpanded(expanded) {
+          if (this._isExpanded === expanded) {
+              return;
+          }
+          this._isExpanded = expanded;
+          if (expanded) {
+              if (this.animationTimer) {
+                  clearTimeout(this.animationTimer);
+              }
+              if (this.body) {
+                  this.element.appendChild(this.body);
+              }
           }
+          else {
+              this.animationTimer = setTimeout(() => {
+                  var _a;
+                  (_a = this.body) === null || _a === void 0 ? void 0 : _a.remove();
+              }, 200);
+          }
+          this._onDidChange.fire(expanded ? { size: this.width } : {});
+          this._onDidChangeExpansionState.fire(expanded);
       }
-      layout(_width, _height) {
-          // noop
+      layout(size, orthogonalSize) {
+          this._size = size;
+          this._orthogonalSize = orthogonalSize;
+          const [width, height] = this.orientation === exports.Orientation.HORIZONTAL
+              ? [size, orthogonalSize]
+              : [orthogonalSize, size];
+          if (this.isExpanded()) {
+              this.expandedSize = width;
+          }
+          super.layout(width, height);
       }
-      render() {
-          if (this._content.textContent !== this.params.title) {
-              this._content.textContent = this.params.title;
+      init(parameters) {
+          var _a, _b;
+          super.init(parameters);
+          if (typeof parameters.minimumBodySize === 'number') {
+              this.minimumBodySize = parameters.minimumBodySize;
+          }
+          if (typeof parameters.maximumBodySize === 'number') {
+              this.maximumBodySize = parameters.maximumBodySize;
+          }
+          this.bodyPart = this.getBodyComponent();
+          this.headerPart = this.getHeaderComponent();
+          this.bodyPart.init(Object.assign(Object.assign({}, parameters), { api: this.api }));
+          this.headerPart.init(Object.assign(Object.assign({}, parameters), { api: this.api }));
+          (_a = this.body) === null || _a === void 0 ? void 0 : _a.append(this.bodyPart.element);
+          (_b = this.header) === null || _b === void 0 ? void 0 : _b.append(this.headerPart.element);
+          if (typeof parameters.isExpanded === 'boolean') {
+              this.setExpanded(parameters.isExpanded);
           }
       }
-  }
-
-  class BasePanelView extends CompositeDisposable {
-      get element() {
-          return this._element;
+      toJSON() {
+          const params = this._params;
+          return Object.assign(Object.assign({}, super.toJSON()), { headerComponent: this.headerComponent, title: params.title });
       }
-      get width() {
-          return this._width;
+      renderOnce() {
+          this.header = document.createElement('div');
+          this.header.tabIndex = 0;
+          this.header.className = 'pane-header';
+          this.header.style.height = `${this.headerSize}px`;
+          this.header.style.lineHeight = `${this.headerSize}px`;
+          this.header.style.minHeight = `${this.headerSize}px`;
+          this.header.style.maxHeight = `${this.headerSize}px`;
+          this.element.appendChild(this.header);
+          this.body = document.createElement('div');
+          this.body.className = 'pane-body';
+          this.element.appendChild(this.body);
       }
-      get height() {
-          return this._height;
+      // TODO slightly hacky by-pass of the component to create a body and header component
+      getComponent() {
+          return {
+              update: (params) => {
+                  var _a, _b;
+                  (_a = this.bodyPart) === null || _a === void 0 ? void 0 : _a.update({ params });
+                  (_b = this.headerPart) === null || _b === void 0 ? void 0 : _b.update({ params });
+              },
+              dispose: () => {
+                  var _a, _b;
+                  (_a = this.bodyPart) === null || _a === void 0 ? void 0 : _a.dispose();
+                  (_b = this.headerPart) === null || _b === void 0 ? void 0 : _b.dispose();
+              },
+          };
       }
-      get params() {
-          var _a;
-          return (_a = this._params) === null || _a === void 0 ? void 0 : _a.params;
+  }
+
+  class DraggablePaneviewPanel extends PaneviewPanel {
+      constructor(accessor, id, component, headerComponent, orientation, isExpanded, disableDnd) {
+          super(id, component, headerComponent, orientation, isExpanded, true);
+          this.accessor = accessor;
+          this._onDidDrop = new Emitter();
+          this.onDidDrop = this._onDidDrop.event;
+          if (!disableDnd) {
+              this.initDragFeatures();
+          }
       }
-      constructor(id, component, api) {
-          super();
-          this.id = id;
-          this.component = component;
-          this.api = api;
-          this._height = 0;
-          this._width = 0;
-          this._element = document.createElement('div');
-          this._element.tabIndex = -1;
-          this._element.style.outline = 'none';
-          this._element.style.height = '100%';
-          this._element.style.width = '100%';
-          this._element.style.overflow = 'hidden';
-          const { onDidFocus, onDidBlur } = trackFocus(this._element);
-          this.addDisposables(this.api, onDidFocus(() => {
-              this.api._onDidChangeFocus.fire({ isFocused: true });
-          }), onDidBlur(() => {
-              this.api._onDidChangeFocus.fire({ isFocused: false });
+      initDragFeatures() {
+          if (!this.header) {
+              return;
+          }
+          const id = this.id;
+          const accessorId = this.accessor.id;
+          this.header.draggable = true;
+          this.handler = new (class PaneDragHandler extends DragHandler {
+              getData() {
+                  LocalSelectionTransfer.getInstance().setData([new PaneTransfer(accessorId, id)], PaneTransfer.prototype);
+                  return {
+                      dispose: () => {
+                          LocalSelectionTransfer.getInstance().clearData(PaneTransfer.prototype);
+                      },
+                  };
+              }
+          })(this.header);
+          this.target = new Droptarget(this.element, {
+              acceptedTargetZones: ['top', 'bottom'],
+              overlayModel: {
+                  activationSize: { type: 'percentage', value: 50 },
+              },
+              canDisplayOverlay: (event) => {
+                  const data = getPaneData();
+                  if (data) {
+                      if (data.paneId !== this.id &&
+                          data.viewId === this.accessor.id) {
+                          return true;
+                      }
+                  }
+                  if (this.accessor.options.showDndOverlay) {
+                      return this.accessor.options.showDndOverlay({
+                          nativeEvent: event,
+                          getData: getPaneData,
+                          panel: this,
+                      });
+                  }
+                  return false;
+              },
+          });
+          this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop((event) => {
+              this.onDrop(event);
           }));
       }
-      focus() {
-          this.api._onFocusEvent.fire();
-      }
-      layout(width, height) {
-          this._width = width;
-          this._height = height;
-          this.api._onDidDimensionChange.fire({ width, height });
-          if (this.part) {
-              if (this._params) {
-                  this.part.update(this._params.params);
+      onDrop(event) {
+          const data = getPaneData();
+          if (!data || data.viewId !== this.accessor.id) {
+              // if there is no local drag event for this panel
+              // or if the drag event was creating by another Paneview instance
+              this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, api: new PaneviewApi(this.accessor), getData: getPaneData }));
+              return;
+          }
+          const containerApi = this._params
+              .containerApi;
+          const panelId = data.paneId;
+          const existingPanel = containerApi.getPanel(panelId);
+          if (!existingPanel) {
+              // if the panel doesn't exist
+              this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: getPaneData, api: new PaneviewApi(this.accessor) }));
+              return;
+          }
+          const allPanels = containerApi.panels;
+          const fromIndex = allPanels.indexOf(existingPanel);
+          let toIndex = containerApi.panels.indexOf(this);
+          if (event.position === 'left' || event.position === 'top') {
+              toIndex = Math.max(0, toIndex - 1);
+          }
+          if (event.position === 'right' || event.position === 'bottom') {
+              if (fromIndex > toIndex) {
+                  toIndex++;
               }
+              toIndex = Math.min(allPanels.length - 1, toIndex);
           }
+          containerApi.movePanel(fromIndex, toIndex);
       }
-      init(parameters) {
-          this._params = parameters;
-          this.part = this.getComponent();
-      }
-      update(event) {
-          var _a, _b;
-          this._params = Object.assign(Object.assign({}, this._params), { params: Object.assign(Object.assign({}, (_a = this._params) === null || _a === void 0 ? void 0 : _a.params), event.params) });
-          (_b = this.part) === null || _b === void 0 ? void 0 : _b.update({ params: this._params.params });
+  }
+
+  class GridviewPanelApiImpl extends PanelApiImpl {
+      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);
+          }
       }
-      toJSON() {
-          var _a, _b;
-          const params = (_b = (_a = this._params) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {};
-          return {
-              id: this.id,
-              component: this.component,
-              params: Object.keys(params).length > 0 ? params : undefined,
-          };
+      setConstraints(value) {
+          this._onDidConstraintsChangeInternal.fire(value);
       }
-      dispose() {
-          var _a;
-          super.dispose();
-          this.api.dispose();
-          (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
+      setSize(event) {
+          this._onDidSizeChange.fire(event);
       }
   }
 
@@ -4445,8 +4384,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       get isActive() {
           return this.api.isActive;
       }
-      constructor(id, component, api) {
-          super(id, component, api);
+      constructor(id, component, options) {
+          super(id, component, new GridviewPanelApiImpl(id));
           this._evaluatedMinimumWidth = 0;
           this._evaluatedMaximumWidth = Number.MAX_SAFE_INTEGER;
           this._evaluatedMinimumHeight = 0;
@@ -4458,6 +4397,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this._snap = false;
           this._onDidChange = new Emitter();
           this.onDidChange = this._onDidChange.event;
+          if (typeof (options === null || options === void 0 ? void 0 : options.minimumWidth) === 'number') {
+              this._minimumWidth = options.minimumWidth;
+          }
+          if (typeof (options === null || options === void 0 ? void 0 : options.maximumWidth) === 'number') {
+              this._maximumWidth = options.maximumWidth;
+          }
+          if (typeof (options === null || options === void 0 ? void 0 : options.minimumHeight) === 'number') {
+              this._minimumHeight = options.minimumHeight;
+          }
+          if (typeof (options === null || options === void 0 ? void 0 : options.maximumHeight) === 'number') {
+              this._maximumHeight = options.maximumHeight;
+          }
           this.api.initialize(this); // TODO: required to by-pass 'super before this' requirement
           this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
               const { isVisible } = event;
@@ -4496,142 +4447,518 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       setActive(isActive) {
           this.api._onDidActiveChange.fire({ isActive });
       }
-      init(parameters) {
-          if (parameters.maximumHeight) {
-              this._maximumHeight = parameters.maximumHeight;
-          }
-          if (parameters.minimumHeight) {
-              this._minimumHeight = parameters.minimumHeight;
-          }
-          if (parameters.maximumWidth) {
-              this._maximumWidth = parameters.maximumWidth;
-          }
-          if (parameters.minimumWidth) {
-              this._minimumWidth = parameters.minimumWidth;
+      init(parameters) {
+          if (parameters.maximumHeight) {
+              this._maximumHeight = parameters.maximumHeight;
+          }
+          if (parameters.minimumHeight) {
+              this._minimumHeight = parameters.minimumHeight;
+          }
+          if (parameters.maximumWidth) {
+              this._maximumWidth = parameters.maximumWidth;
+          }
+          if (parameters.minimumWidth) {
+              this._minimumWidth = parameters.minimumWidth;
+          }
+          this._priority = parameters.priority;
+          this._snap = !!parameters.snap;
+          super.init(parameters);
+          if (typeof parameters.isVisible === 'boolean') {
+              this.setVisible(parameters.isVisible);
+          }
+      }
+      updateConstraints() {
+          this.api._onDidConstraintsChange.fire({
+              minimumWidth: this._evaluatedMinimumWidth,
+              maximumWidth: this._evaluatedMaximumWidth,
+              minimumHeight: this._evaluatedMinimumHeight,
+              maximumHeight: this._evaluatedMaximumHeight,
+          });
+      }
+      toJSON() {
+          const state = super.toJSON();
+          const maximum = (value) => value === Number.MAX_SAFE_INTEGER ? undefined : value;
+          const minimum = (value) => (value <= 0 ? undefined : value);
+          return Object.assign(Object.assign({}, state), { minimumHeight: minimum(this.minimumHeight), maximumHeight: maximum(this.maximumHeight), minimumWidth: minimum(this.minimumWidth), maximumWidth: maximum(this.maximumWidth), snap: this.snap, priority: this.priority });
+      }
+  }
+
+  class DockviewGroupPanel extends GridviewPanel {
+      get panels() {
+          return this._model.panels;
+      }
+      get activePanel() {
+          return this._model.activePanel;
+      }
+      get size() {
+          return this._model.size;
+      }
+      get model() {
+          return this._model;
+      }
+      get locked() {
+          return this._model.locked;
+      }
+      set locked(value) {
+          this._model.locked = value;
+      }
+      get header() {
+          return this._model.header;
+      }
+      constructor(accessor, id, options) {
+          super(id, 'groupview_default', {
+              minimumHeight: 100,
+              minimumWidth: 100,
+          });
+          this._model = new DockviewGroupPanelModel(this.element, accessor, id, options, this);
+      }
+      initialize() {
+          this._model.initialize();
+      }
+      setActive(isActive) {
+          super.setActive(isActive);
+          this.model.setActive(isActive);
+      }
+      layout(width, height) {
+          super.layout(width, height);
+          this.model.layout(width, height);
+      }
+      getComponent() {
+          return this._model;
+      }
+      toJSON() {
+          // TODO fix typing
+          return this.model.toJSON();
+      }
+  }
+
+  function isPanelOptionsWithPanel(data) {
+      if (data.referencePanel) {
+          return true;
+      }
+      return false;
+  }
+  function isPanelOptionsWithGroup(data) {
+      if (data.referenceGroup) {
+          return true;
+      }
+      return false;
+  }
+  function isGroupOptionsWithPanel(data) {
+      if (data.referencePanel) {
+          return true;
+      }
+      return false;
+  }
+  function isGroupOptionsWithGroup(data) {
+      if (data.referenceGroup) {
+          return true;
+      }
+      return false;
+  }
+
+  class DockviewPanelApiImpl extends GridviewPanelApiImpl {
+      get title() {
+          return this.panel.title;
+      }
+      get isGroupActive() {
+          var _a;
+          return !!((_a = this.group) === null || _a === void 0 ? void 0 : _a.isActive);
+      }
+      set group(value) {
+          const isOldGroupActive = this.isGroupActive;
+          this._group = value;
+          this._onDidGroupChange.fire();
+          if (this._group) {
+              this.disposable.value = this._group.api.onDidActiveChange(() => {
+                  this._onDidActiveGroupChange.fire();
+              });
+              if (this.isGroupActive !== isOldGroupActive) {
+                  this._onDidActiveGroupChange.fire();
+              }
+          }
+      }
+      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.panel.update({ params: { title } });
+      }
+      close() {
+          this.group.model.closePanel(this.panel);
+      }
+  }
+
+  class DockviewPanel extends CompositeDisposable {
+      get params() {
+          return this._params;
+      }
+      get title() {
+          return this._title;
+      }
+      get group() {
+          return this._group;
+      }
+      constructor(id, accessor, containerApi, group, view) {
+          super();
+          this.id = id;
+          this.containerApi = containerApi;
+          this.view = view;
+          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;
+          this.setTitle(params.title);
+          (_a = this.view) === null || _a === void 0 ? void 0 : _a.init(Object.assign(Object.assign({}, params), { api: this.api, containerApi: this.containerApi }));
+      }
+      focus() {
+          this.api._onFocusEvent.fire();
+      }
+      toJSON() {
+          return {
+              id: this.id,
+              contentComponent: this.view.contentComponent,
+              tabComponent: this.view.tabComponent,
+              params: Object.keys(this._params || {}).length > 0
+                  ? this._params
+                  : undefined,
+              title: this.title,
+          };
+      }
+      setTitle(title) {
+          var _a, _b;
+          const didTitleChange = title !== ((_a = this._params) === null || _a === void 0 ? void 0 : _a.title);
+          if (didTitleChange) {
+              this._title = title;
+              (_b = this.view) === null || _b === void 0 ? void 0 : _b.update({
+                  params: {
+                      params: this._params,
+                      title: this.title,
+                  },
+              });
+              this.api._onDidTitleChange.fire({ title });
           }
-          this._priority = parameters.priority;
-          this._snap = !!parameters.snap;
-          super.init(parameters);
-          if (typeof parameters.isVisible === 'boolean') {
-              this.setVisible(parameters.isVisible);
+      }
+      update(event) {
+          var _a;
+          const params = event.params;
+          this._params = Object.assign(Object.assign({}, (this._params || {})), event.params.params);
+          if (params.title !== this.title) {
+              this._title = params.title;
+              this.api._onDidTitleChange.fire({ title: this.title });
           }
+          (_a = this.view) === null || _a === void 0 ? void 0 : _a.update({
+              params: {
+                  params: this._params,
+                  title: this.title,
+              },
+          });
       }
-      updateConstraints() {
-          this.api._onDidConstraintsChange.fire({
-              minimumWidth: this._evaluatedMinimumWidth,
-              maximumWidth: this._evaluatedMaximumWidth,
-              minimumHeight: this._evaluatedMinimumHeight,
-              maximumHeight: this._evaluatedMaximumHeight,
+      updateParentGroup(group, isGroupActive) {
+          this._group = group;
+          this.api.group = group;
+          const isPanelVisible = this._group.model.isPanelActive(this);
+          this.api._onDidActiveChange.fire({
+              isActive: isGroupActive && isPanelVisible,
+          });
+          this.api._onDidVisibilityChange.fire({
+              isVisible: isPanelVisible,
           });
+          this.view.updateParentGroup(this._group, this._group.model.isPanelActive(this));
       }
-      toJSON() {
-          const state = super.toJSON();
-          const maximum = (value) => value === Number.MAX_SAFE_INTEGER ? undefined : value;
-          const minimum = (value) => (value <= 0 ? undefined : value);
-          return Object.assign(Object.assign({}, state), { minimumHeight: minimum(this.minimumHeight), maximumHeight: maximum(this.maximumHeight), minimumWidth: minimum(this.minimumWidth), maximumWidth: maximum(this.maximumWidth), snap: this.snap, priority: this.priority });
+      layout(width, height) {
+          var _a;
+          // the obtain the correct dimensions of the content panel we must deduct the tab height
+          this.api._onDidDimensionChange.fire({
+              width,
+              height: height - (this.group.model.header.height || 0),
+          });
+          (_a = this.view) === null || _a === void 0 ? void 0 : _a.layout(width, height);
+      }
+      dispose() {
+          var _a;
+          this.api.dispose();
+          (_a = this.view) === null || _a === void 0 ? void 0 : _a.dispose();
       }
   }
 
-  class GroupviewApi extends GridviewPanelApiImpl {
-  }
-  class GroupPanel extends GridviewPanel {
-      get panels() {
-          return this._model.panels;
+  const createSvgElementFromPath = (params) => {
+      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      svg.setAttributeNS(null, 'height', params.height);
+      svg.setAttributeNS(null, 'width', params.width);
+      svg.setAttributeNS(null, 'viewBox', params.viewbox);
+      svg.setAttributeNS(null, 'aria-hidden', 'false');
+      svg.setAttributeNS(null, 'focusable', 'false');
+      svg.classList.add('dockview-svg');
+      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+      path.setAttributeNS(null, 'd', params.path);
+      svg.appendChild(path);
+      return svg;
+  };
+  const createCloseButton = () => createSvgElementFromPath({
+      width: '11',
+      height: '11',
+      viewbox: '0 0 28 28',
+      path: 'M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z',
+  });
+  const createExpandMoreButton = () => createSvgElementFromPath({
+      width: '11',
+      height: '11',
+      viewbox: '0 0 24 15',
+      path: 'M12 14.15L0 2.15L2.15 0L12 9.9L21.85 0.0499992L24 2.2L12 14.15Z',
+  });
+  const createChevronRightButton = () => createSvgElementFromPath({
+      width: '11',
+      height: '11',
+      viewbox: '0 0 15 25',
+      path: 'M2.15 24.1L0 21.95L9.9 12.05L0 2.15L2.15 0L14.2 12.05L2.15 24.1Z',
+  });
+
+  class DefaultTab extends CompositeDisposable {
+      get element() {
+          return this._element;
       }
-      get activePanel() {
-          return this._model.activePanel;
+      constructor() {
+          super();
+          //
+          this.params = {};
+          this._element = document.createElement('div');
+          this._element.className = 'default-tab';
+          //
+          this._content = document.createElement('div');
+          this._content.className = 'tab-content';
+          //
+          this._actionContainer = document.createElement('div');
+          this._actionContainer.className = 'action-container';
+          //
+          this._list = document.createElement('ul');
+          this._list.className = 'tab-list';
+          //
+          this.action = document.createElement('div');
+          this.action.className = 'tab-action';
+          this.action.appendChild(createCloseButton());
+          //
+          this._element.appendChild(this._content);
+          this._element.appendChild(this._actionContainer);
+          this._actionContainer.appendChild(this._list);
+          this._list.appendChild(this.action);
+          //
+          this.addDisposables(addDisposableListener(this._actionContainer, 'mousedown', (ev) => {
+              ev.preventDefault();
+          }));
+          this.render();
       }
-      get size() {
-          return this._model.size;
+      update(event) {
+          this.params = Object.assign(Object.assign({}, this.params), event.params);
+          this.render();
       }
-      get model() {
-          return this._model;
+      focus() {
+          //noop
       }
-      get minimumHeight() {
-          return this._model.minimumHeight;
+      init(params) {
+          this.params = params;
+          this._content.textContent = params.title;
+          addDisposableListener(this.action, 'click', (ev) => {
+              ev.preventDefault(); //
+              this.params.api.close();
+          });
       }
-      get maximumHeight() {
-          return this._model.maximumHeight;
+      onGroupChange(_group) {
+          this.render();
       }
-      get minimumWidth() {
-          return this._model.minimumWidth;
+      onPanelVisibleChange(_isPanelVisible) {
+          this.render();
       }
-      get maximumWidth() {
-          return this._model.maximumWidth;
+      layout(_width, _height) {
+          // noop
       }
-      get locked() {
-          return this._model.locked;
+      render() {
+          if (this._content.textContent !== this.params.title) {
+              this._content.textContent = this.params.title;
+          }
       }
-      set locked(value) {
-          this._model.locked = value;
+  }
+
+  class DockviewPanelModel {
+      get content() {
+          return this._content;
       }
-      get header() {
-          return this._model.header;
+      get tab() {
+          return this._tab;
       }
-      constructor(accessor, id, options) {
-          super(id, 'groupview_default', new GroupviewApi(id));
-          this._model = new Groupview(this.element, accessor, id, options, this);
+      constructor(accessor, id, contentComponent, tabComponent) {
+          var _a;
+          this.accessor = accessor;
+          this.id = id;
+          this.contentComponent = contentComponent;
+          this.tabComponent = tabComponent;
+          this._group = null;
+          this._isPanelVisible = null;
+          this._content = this.createContentComponent(this.id, contentComponent);
+          this._tab =
+              (_a = this.createTabComponent(this.id, tabComponent)) !== null && _a !== void 0 ? _a : new DefaultTab();
       }
-      initialize() {
-          this._model.initialize();
+      init(params) {
+          this.content.init(Object.assign(Object.assign({}, params), { tab: this.tab }));
+          this.tab.init(params);
       }
-      setActive(isActive) {
-          super.setActive(isActive);
-          this.model.setActive(isActive);
+      updateParentGroup(group, isPanelVisible) {
+          if (group !== this._group) {
+              this._group = group;
+              if (this._content.onGroupChange) {
+                  this._content.onGroupChange(group);
+              }
+              if (this._tab.onGroupChange) {
+                  this._tab.onGroupChange(group);
+              }
+          }
+          if (isPanelVisible !== this._isPanelVisible) {
+              this._isPanelVisible = isPanelVisible;
+              if (this._content.onPanelVisibleChange) {
+                  this._content.onPanelVisibleChange(isPanelVisible);
+              }
+              if (this._tab.onPanelVisibleChange) {
+                  this._tab.onPanelVisibleChange(isPanelVisible);
+              }
+          }
       }
       layout(width, height) {
-          super.layout(width, height);
-          this.model.layout(width, height);
+          var _a, _b;
+          (_b = (_a = this.content).layout) === null || _b === void 0 ? void 0 : _b.call(_a, width, height);
       }
-      getComponent() {
-          return this._model;
+      update(event) {
+          var _a, _b, _c, _d;
+          (_b = (_a = this.content).update) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+          (_d = (_c = this.tab).update) === null || _d === void 0 ? void 0 : _d.call(_c, event);
       }
-      toJSON() {
-          return this.model.toJSON();
+      dispose() {
+          var _a, _b, _c, _d;
+          (_b = (_a = this.content).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
+          (_d = (_c = this.tab).dispose) === null || _d === void 0 ? void 0 : _d.call(_c);
+      }
+      createContentComponent(id, componentName) {
+          var _a;
+          return createComponent(id, componentName, this.accessor.options.components || {}, this.accessor.options.frameworkComponents, (_a = this.accessor.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.content);
+      }
+      createTabComponent(id, componentName) {
+          var _a;
+          return createComponent(id, componentName, this.accessor.options.tabComponents || {}, this.accessor.options.frameworkTabComponents, (_a = this.accessor.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.tab, () => new DefaultTab());
       }
   }
 
-  class DefaultGroupPanelView {
-      get content() {
-          return this._content;
+  class DefaultDockviewDeserialzier {
+      constructor(layout) {
+          this.layout = layout;
       }
-      get tab() {
-          return this._tab;
+      fromJSON(panelData, group) {
+          var _a, _b, _c;
+          const panelId = panelData.id;
+          const params = panelData.params;
+          const title = panelData.title;
+          const viewData = panelData.view;
+          const contentComponent = viewData
+              ? viewData.content.id
+              : panelData.contentComponent || 'unknown';
+          const tabComponent = viewData
+              ? (_a = viewData.tab) === null || _a === void 0 ? void 0 : _a.id
+              : panelData.tabComponent;
+          if (tabComponent) {
+              createComponent(panelId, tabComponent, this.layout.options.tabComponents, this.layout.options.frameworkTabComponents, (_b = this.layout.options.frameworkComponentFactory) === null || _b === void 0 ? void 0 : _b.tab, () => new DefaultTab());
+          }
+          else if (this.layout.options.defaultTabComponent) {
+              createComponent(panelId, this.layout.options.defaultTabComponent, this.layout.options.tabComponents, this.layout.options.frameworkTabComponents, (_c = this.layout.options.frameworkComponentFactory) === null || _c === void 0 ? void 0 : _c.tab, () => new DefaultTab());
+          }
+          else {
+              new DefaultTab();
+          }
+          const view = new DockviewPanelModel(this.layout, panelId, contentComponent, tabComponent);
+          const panel = new DockviewPanel(panelId, this.layout, new DockviewApi(this.layout), group, view);
+          panel.init({
+              title: title || panelId,
+              params: params || {},
+          });
+          return panel;
       }
-      constructor(renderers) {
-          var _a;
-          this._content = renderers.content;
-          this._tab = (_a = renderers.tab) !== null && _a !== void 0 ? _a : new DefaultTab();
+  }
+
+  class Watermark extends CompositeDisposable {
+      get element() {
+          return this._element;
+      }
+      constructor() {
+          super();
+          this._element = document.createElement('div');
+          this._element.className = 'watermark';
+          const title = document.createElement('div');
+          title.className = 'watermark-title';
+          const emptySpace = document.createElement('span');
+          emptySpace.style.flexGrow = '1';
+          const content = document.createElement('div');
+          content.className = 'watermark-content';
+          this._element.appendChild(title);
+          this._element.appendChild(content);
+          const actionsContainer = document.createElement('div');
+          actionsContainer.className = 'actions-container';
+          const closeAnchor = document.createElement('div');
+          closeAnchor.className = 'close-action';
+          closeAnchor.appendChild(createCloseButton());
+          actionsContainer.appendChild(closeAnchor);
+          title.appendChild(emptySpace);
+          title.appendChild(actionsContainer);
+          this.addDisposables(addDisposableListener(closeAnchor, 'click', (ev) => {
+              var _a;
+              ev.preventDefault();
+              if (this.group) {
+                  (_a = this.params) === null || _a === void 0 ? void 0 : _a.containerApi.removeGroup(this.group);
+              }
+          }));
       }
-      init(params) {
-          this.content.init(Object.assign(Object.assign({}, params), { tab: this.tab }));
-          this.tab.init(params);
+      update(_event) {
+          // noop
       }
-      updateParentGroup(group, isPanelVisible) {
-          var _a;
-          this._content.updateParentGroup(group, isPanelVisible);
-          (_a = this._tab) === null || _a === void 0 ? void 0 : _a.updateParentGroup(group, isPanelVisible);
+      focus() {
+          // noop
       }
-      layout(width, height) {
-          this.content.layout(width, height);
+      layout(_width, _height) {
+          // noop
       }
-      update(event) {
-          this.content.update(event);
-          this.tab.update(event);
+      init(_params) {
+          this.render();
       }
-      toJSON() {
-          let tab = this.tab instanceof DefaultTab ? undefined : this.tab.toJSON();
-          if (tab && Object.keys(tab).length === 0) {
-              tab = undefined;
-          }
-          return {
-              content: this.content.toJSON(),
-              tab,
-          };
+      updateParentGroup(group, _visible) {
+          this.group = group;
+          this.render();
       }
       dispose() {
-          this.content.dispose();
-          this.tab.dispose();
+          super.dispose();
+      }
+      render() {
+          const isOneGroup = !!(this.params && this.params.containerApi.size <= 1);
+          toggleClass(this.element, 'has-actions', isOneGroup);
       }
   }
 
@@ -4645,12 +4972,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       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;
       }
@@ -4677,6 +4998,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               styles: options.styles,
           });
           this.nextGroupId = sequentialNumberGenerator();
+          this._deserializer = new DefaultDockviewDeserialzier(this);
           this.watermark = null;
           this._onDidDrop = new Emitter();
           this.onDidDrop = this._onDidDrop.event;
@@ -4689,9 +5011,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this._onDidActivePanelChange = new Emitter();
           this.onDidActivePanelChange = this._onDidActivePanelChange.event;
           this.element.classList.add('dv-dockview');
-          this.addDisposables(this._onDidDrop, exports.Event.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
+          this.addDisposables(this._onDidDrop, exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
               this.updateWatermark();
-          }), exports.Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
+          }), exports.DockviewEvent.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
               this._bufferOnDidLayoutChange.fire();
           }));
           this._options = options;
@@ -4858,9 +5180,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
       fromJSON(data) {
           this.clear();
-          if (!this.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;
@@ -4878,7 +5197,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   });
                   this._onDidAddGroup.fire(group);
                   for (const child of views) {
-                      const panel = this.deserializer.fromJSON(panels[child], group);
+                      const panel = this._deserializer.fromJSON(panels[child], group);
                       const isActive = typeof activeView === 'string' &&
                           activeView === panel.id;
                       group.model.openPanel(panel, {
@@ -5005,14 +5324,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               : {}, (_a = this.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.watermark);
       }
       updateWatermark() {
+          var _a, _b;
           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';
@@ -5022,7 +5339,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
           else if (this.watermark) {
               this.watermark.element.parentElement.remove();
-              this.watermark.dispose();
+              (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
               this.watermark = null;
           }
       }
@@ -5184,7 +5501,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   id = this.nextGroupId.next();
               }
           }
-          const view = new GroupPanel(this, id, options);
+          const view = new DockviewGroupPanel(this, id, options);
           view.init({ params: {}, accessor: null }); // required to initialized .part and allow for correct disposal of group
           if (!this._groups.has(view.id)) {
               const disposable = new CompositeDisposable(view.model.onMove((event) => {
@@ -5197,857 +5514,522 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               }), view.model.onDidRemovePanel((event) => {
                   this._onDidRemovePanel.fire(event.panel);
               }), view.model.onDidActivePanelChange((event) => {
-                  this._onDidActivePanelChange.fire(event.panel);
-              }));
-              this._groups.set(view.id, { value: view, disposable });
-          }
-          // TODO: must be called after the above listeners have been setup,
-          // not an ideal pattern
-          view.initialize();
-          if (typeof this.options.tabHeight === 'number') {
-              view.model.header.height = this.options.tabHeight;
-          }
-          return view;
-      }
-      createPanel(options, group) {
-          const view = new DefaultGroupPanelView({
-              content: this.createContentComponent(options.id, options.component),
-              tab: this.createTabComponent(options.id, options.tabComponent || this.options.defaultTabComponent),
-          });
-          const panel = new DockviewPanel(options.id, this, this._api, group);
-          panel.init({
-              view,
-              title: options.title || options.id,
-              params: (options === null || options === void 0 ? void 0 : options.params) || {},
-          });
-          return panel;
-      }
-      createContentComponent(id, componentName) {
-          var _a;
-          return createComponent(id, componentName, this.options.components || {}, this.options.frameworkComponents, (_a = this.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.content);
-      }
-      createTabComponent(id, componentName) {
-          var _a;
-          return createComponent(id, componentName, this.options.tabComponents || {}, this.options.frameworkTabComponents, (_a = this.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.tab, () => new DefaultTab());
-      }
-      createGroupAtLocation(location = [0]) {
-          const group = this.createGroup();
-          this.doAddGroup(group, location);
-          return group;
-      }
-      findGroup(panel) {
-          var _a;
-          return (_a = Array.from(this._groups.values()).find((group) => group.value.model.containsPanel(panel))) === null || _a === void 0 ? void 0 : _a.value;
-      }
-      dispose() {
-          super.dispose();
-          this._onDidActivePanelChange.dispose();
-          this._onDidAddPanel.dispose();
-          this._onDidRemovePanel.dispose();
-          this._onDidLayoutFromJSON.dispose();
-      }
-  }
-
-  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,
-              orientation: options.orientation,
-              styles: options.styles,
-          });
-          this._onDidLayoutfromJSON = new Emitter();
-          this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
-          this._options = options;
-          if (!this.options.components) {
-              this.options.components = {};
-          }
-          if (!this.options.frameworkComponents) {
-              this.options.frameworkComponents = {};
-          }
-      }
-      updateOptions(options) {
-          const hasOrientationChanged = typeof options.orientation === 'string' &&
-              this.gridview.orientation !== options.orientation;
-          this._options = Object.assign(Object.assign({}, this.options), options);
-          if (hasOrientationChanged) {
-              this.gridview.orientation = options.orientation;
-          }
-          this.layout(this.gridview.width, this.gridview.height, true);
-      }
-      removePanel(panel) {
-          this.removeGroup(panel);
-      }
-      /**
-       * Serialize the current state of the layout
-       *
-       * @returns A JSON respresentation of the layout
-       */
-      toJSON() {
-          var _a;
-          const data = this.gridview.serialize();
-          return {
-              grid: data,
-              activePanel: (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.id,
-          };
-      }
-      setVisible(panel, visible) {
-          this.gridview.setViewVisible(getGridLocation(panel.element), visible);
-      }
-      setActive(panel) {
-          this._groups.forEach((value, _key) => {
-              value.value.setActive(panel === value.value);
-          });
-      }
-      focus() {
-          var _a;
-          (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
-      }
-      fromJSON(serializedGridview) {
-          this.clear();
-          const { grid, activePanel } = serializedGridview;
-          const queue = [];
-          this.gridview.deserialize(grid, {
-              fromJSON: (node) => {
-                  const { data } = node;
-                  const view = createComponent(data.id, data.component, this.options.components || {}, this.options.frameworkComponents || {}, this.options.frameworkComponentFactory
-                      ? {
-                          createComponent: this.options.frameworkComponentFactory
-                              .createComponent,
-                      }
-                      : undefined);
-                  queue.push(() => view.init({
-                      params: data.params,
-                      minimumWidth: data.minimumWidth,
-                      maximumWidth: data.maximumWidth,
-                      minimumHeight: data.minimumHeight,
-                      maximumHeight: data.maximumHeight,
-                      priority: data.priority,
-                      snap: !!data.snap,
-                      accessor: this,
-                      isVisible: node.visible,
-                  }));
-                  this._onDidAddGroup.fire(view);
-                  this.registerPanel(view);
-                  return view;
-              },
-          });
-          this.layout(this.width, this.height, true);
-          queue.forEach((f) => f());
-          if (typeof activePanel === 'string') {
-              const panel = this.getPanel(activePanel);
-              if (panel) {
-                  this.doSetGroupActive(panel);
-              }
-          }
-          this._onDidLayoutfromJSON.fire();
-      }
-      clear() {
-          const hasActiveGroup = this.activeGroup;
-          const groups = Array.from(this._groups.values()); // reassign since group panels will mutate
-          for (const group of groups) {
-              group.disposable.dispose();
-              this.doRemoveGroup(group.value, { skipActive: true });
-          }
-          if (hasActiveGroup) {
-              this.doSetGroupActive(undefined);
-          }
-          this.gridview.clear();
-      }
-      movePanel(panel, options) {
-          var _a;
-          let relativeLocation;
-          const removedPanel = this.gridview.remove(panel);
-          const referenceGroup = (_a = this._groups.get(options.reference)) === null || _a === void 0 ? void 0 : _a.value;
-          if (!referenceGroup) {
-              throw new Error(`reference group ${options.reference} does not exist`);
-          }
-          const target = toTarget(options.direction);
-          if (target === 'center') {
-              throw new Error(`${target} not supported as an option`);
-          }
-          else {
-              const location = getGridLocation(referenceGroup.element);
-              relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
-          }
-          this.doAddGroup(removedPanel, relativeLocation, options.size);
-      }
-      addPanel(options) {
-          var _a, _b;
-          let relativeLocation = options.location || [0];
-          if ((_a = options.position) === null || _a === void 0 ? void 0 : _a.referencePanel) {
-              const referenceGroup = (_b = this._groups.get(options.position.referencePanel)) === null || _b === void 0 ? void 0 : _b.value;
-              if (!referenceGroup) {
-                  throw new Error(`reference group ${options.position.referencePanel} does not exist`);
-              }
-              const target = toTarget(options.position.direction);
-              if (target === 'center') {
-                  throw new Error(`${target} not supported as an option`);
-              }
-              else {
-                  const location = getGridLocation(referenceGroup.element);
-                  relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
-              }
+                  this._onDidActivePanelChange.fire(event.panel);
+              }));
+              this._groups.set(view.id, { value: view, disposable });
+          }
+          // TODO: must be called after the above listeners have been setup,
+          // not an ideal pattern
+          view.initialize();
+          if (typeof this.options.tabHeight === 'number') {
+              view.model.header.height = this.options.tabHeight;
           }
-          const view = createComponent(options.id, options.component, this.options.components || {}, this.options.frameworkComponents || {}, this.options.frameworkComponentFactory
-              ? {
-                  createComponent: this.options.frameworkComponentFactory
-                      .createComponent,
-              }
-              : undefined);
-          view.init({
-              params: options.params || {},
-              minimumWidth: options.minimumWidth,
-              maximumWidth: options.maximumWidth,
-              minimumHeight: options.minimumHeight,
-              maximumHeight: options.maximumHeight,
-              priority: options.priority,
-              snap: !!options.snap,
-              accessor: this,
-              isVisible: true,
-          });
-          this.registerPanel(view);
-          this.doAddGroup(view, relativeLocation, options.size);
           return view;
       }
-      registerPanel(panel) {
-          const disposable = new CompositeDisposable(panel.api.onDidFocusChange((event) => {
-              if (!event.isFocused) {
-                  return;
-              }
-              this._groups.forEach((groupItem) => {
-                  const group = groupItem.value;
-                  if (group !== panel) {
-                      group.setActive(false);
-                  }
-                  else {
-                      group.setActive(true);
-                  }
-              });
-          }));
-          this._groups.set(panel.id, {
-              value: panel,
-              disposable,
+      createPanel(options, group) {
+          const contentComponent = options.component;
+          const tabComponent = options.tabComponent || this.options.defaultTabComponent;
+          const view = new DockviewPanelModel(this, options.id, contentComponent, tabComponent);
+          const panel = new DockviewPanel(options.id, this, this._api, group, view);
+          panel.init({
+              title: options.title || options.id,
+              params: (options === null || options === void 0 ? void 0 : options.params) || {},
           });
+          return panel;
       }
-      moveGroup(referenceGroup, groupId, target) {
-          const sourceGroup = this.getPanel(groupId);
-          if (!sourceGroup) {
-              throw new Error('invalid operation');
-          }
-          const referenceLocation = getGridLocation(referenceGroup.element);
-          const targetLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
-          const [targetParentLocation, to] = tail(targetLocation);
-          const sourceLocation = getGridLocation(sourceGroup.element);
-          const [sourceParentLocation, from] = tail(sourceLocation);
-          if (sequenceEquals(sourceParentLocation, targetParentLocation)) {
-              // special case when 'swapping' two views within same grid location
-              // if a group has one tab - we are essentially moving the 'group'
-              // which is equivalent to swapping two views in this case
-              this.gridview.moveView(sourceParentLocation, from, to);
-              return;
-          }
-          // source group will become empty so delete the group
-          const targetGroup = this.doRemoveGroup(sourceGroup, {
-              skipActive: true,
-              skipDispose: true,
-          });
-          // after deleting the group we need to re-evaulate the ref location
-          const updatedReferenceLocation = getGridLocation(referenceGroup.element);
-          const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, target);
-          this.doAddGroup(targetGroup, location);
+      createGroupAtLocation(location = [0]) {
+          const group = this.createGroup();
+          this.doAddGroup(group, location);
+          return group;
       }
-      removeGroup(group) {
-          super.removeGroup(group);
+      findGroup(panel) {
+          var _a;
+          return (_a = Array.from(this._groups.values()).find((group) => group.value.model.containsPanel(panel))) === null || _a === void 0 ? void 0 : _a.value;
       }
       dispose() {
           super.dispose();
-          this._onDidLayoutfromJSON.dispose();
+          this._onDidActivePanelChange.dispose();
+          this._onDidAddPanel.dispose();
+          this._onDidRemovePanel.dispose();
+          this._onDidLayoutFromJSON.dispose();
       }
   }
 
-  /**
-   * A high-level implementation of splitview that works using 'panels'
-   */
-  class SplitviewComponent extends CompositeDisposable {
-      get panels() {
-          return this.splitview.getViews();
-      }
-      get options() {
-          return this._options;
-      }
-      get length() {
-          return this._panels.size;
-      }
+  class GridviewComponent extends BaseGrid {
       get orientation() {
-          return this.splitview.orientation;
-      }
-      get splitview() {
-          return this._splitview;
-      }
-      set splitview(value) {
-          this._splitview = value;
-          this._disposable.value = new CompositeDisposable(this._splitview.onDidSashEnd(() => {
-              this._onDidLayoutChange.fire(undefined);
-          }), this._splitview.onDidAddView((e) => this._onDidAddView.fire(e)), this._splitview.onDidRemoveView((e) => this._onDidRemoveView.fire(e)));
+          return this.gridview.orientation;
       }
-      get minimumSize() {
-          return this.splitview.minimumSize;
+      set orientation(value) {
+          this.gridview.orientation = value;
       }
-      get maximumSize() {
-          return this.splitview.maximumSize;
+      get options() {
+          return this._options;
       }
-      get height() {
-          return this.splitview.orientation === exports.Orientation.HORIZONTAL
-              ? this.splitview.orthogonalSize
-              : this.splitview.size;
+      get deserializer() {
+          return this._deserializer;
       }
-      get width() {
-          return this.splitview.orientation === exports.Orientation.HORIZONTAL
-              ? this.splitview.size
-              : this.splitview.orthogonalSize;
+      set deserializer(value) {
+          this._deserializer = value;
       }
       constructor(element, options) {
-          super();
-          this.element = element;
-          this._disposable = new MutableDisposable();
-          this._panels = new Map();
+          super(element, {
+              proportionalLayout: options.proportionalLayout,
+              orientation: options.orientation,
+              styles: options.styles,
+          });
           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 (!this.options.components) {
+              this.options.components = {};
           }
-          if (!options.frameworkComponents) {
-              options.frameworkComponents = {};
+          if (!this.options.frameworkComponents) {
+              this.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;
+              this.gridview.orientation !== options.orientation;
           this._options = Object.assign(Object.assign({}, this.options), options);
           if (hasOrientationChanged) {
-              this.splitview.orientation = options.orientation;
-          }
-          this.splitview.layout(this.splitview.size, this.splitview.orthogonalSize);
-      }
-      focus() {
-          var _a;
-          (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus();
-      }
-      movePanel(from, to) {
-          this.splitview.moveView(from, to);
-      }
-      setVisible(panel, visible) {
-          const index = this.panels.indexOf(panel);
-          this.splitview.setViewVisible(index, visible);
-      }
-      setActive(view, skipFocus) {
-          this._activePanel = view;
-          this.panels
-              .filter((v) => v !== view)
-              .forEach((v) => {
-              v.api._onDidActiveChange.fire({ isActive: false });
-              if (!skipFocus) {
-                  v.focus();
-              }
-          });
-          view.api._onDidActiveChange.fire({ isActive: true });
-          if (!skipFocus) {
-              view.focus();
-          }
-      }
-      removePanel(panel, sizing) {
-          const disposable = this._panels.get(panel.id);
-          if (!disposable) {
-              throw new Error(`unknown splitview panel ${panel.id}`);
-          }
-          disposable.disposable.dispose();
-          disposable.value.dispose();
-          this._panels.delete(panel.id);
-          const index = this.panels.findIndex((_) => _ === panel);
-          this.splitview.removeView(index, sizing);
-          const panels = this.panels;
-          if (panels.length > 0) {
-              this.setActive(panels[panels.length - 1]);
-          }
-      }
-      getPanel(id) {
-          return this.panels.find((view) => view.id === id);
-      }
-      addPanel(options) {
-          if (this._panels.has(options.id)) {
-              throw new Error(`panel ${options.id} already exists`);
+              this.gridview.orientation = options.orientation;
           }
-          const view = createComponent(options.id, options.component, this.options.components || {}, this.options.frameworkComponents || {}, this.options.frameworkWrapper
-              ? {
-                  createComponent: this.options.frameworkWrapper.createComponent,
-              }
-              : undefined);
-          view.orientation = this.splitview.orientation;
-          view.init({
-              params: options.params || {},
-              minimumSize: options.minimumSize,
-              maximumSize: options.maximumSize,
-              snap: options.snap,
-              priority: options.priority,
-              accessor: this,
-          });
-          const size = typeof options.size === 'number' ? options.size : exports.Sizing.Distribute;
-          const index = typeof options.index === 'number' ? options.index : undefined;
-          this.splitview.addView(view, size, index);
-          this.doAddView(view);
-          this.setActive(view);
-          return view;
-      }
-      layout(width, height) {
-          const [size, orthogonalSize] = this.splitview.orientation === exports.Orientation.HORIZONTAL
-              ? [width, height]
-              : [height, width];
-          this.splitview.layout(size, orthogonalSize);
+          this.layout(this.gridview.width, this.gridview.height, true);
       }
-      doAddView(view) {
-          const disposable = view.api.onDidFocusChange((event) => {
-              if (!event.isFocused) {
-                  return;
-              }
-              this.setActive(view, true);
-          });
-          this._panels.set(view.id, { disposable, value: view });
+      removePanel(panel) {
+          this.removeGroup(panel);
       }
+      /**
+       * Serialize the current state of the layout
+       *
+       * @returns A JSON respresentation of the layout
+       */
       toJSON() {
           var _a;
-          const views = this.splitview
-              .getViews()
-              .map((view, i) => {
-              const size = this.splitview.getViewSize(i);
-              return {
-                  size,
-                  data: view.toJSON(),
-                  snap: !!view.snap,
-                  priority: view.priority,
-              };
-          });
+          const data = this.gridview.serialize();
           return {
-              views,
-              activeView: (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.id,
-              size: this.splitview.size,
-              orientation: this.splitview.orientation,
+              grid: data,
+              activePanel: (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.id,
           };
       }
-      fromJSON(serializedSplitview) {
+      setVisible(panel, visible) {
+          this.gridview.setViewVisible(getGridLocation(panel.element), visible);
+      }
+      setActive(panel) {
+          this._groups.forEach((value, _key) => {
+              value.value.setActive(panel === value.value);
+          });
+      }
+      focus() {
+          var _a;
+          (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
+      }
+      fromJSON(serializedGridview) {
           this.clear();
-          const { views, orientation, size, activeView } = serializedSplitview;
+          const { grid, activePanel } = serializedGridview;
           const queue = [];
-          this.splitview = new Splitview(this.element, {
-              orientation,
-              proportionalLayout: this.options.proportionalLayout,
-              descriptor: {
-                  size,
-                  views: views.map((view) => {
-                      const data = view.data;
-                      if (this._panels.has(data.id)) {
-                          throw new Error(`panel ${data.id} already exists`);
+          this.gridview.deserialize(grid, {
+              fromJSON: (node) => {
+                  const { data } = node;
+                  const view = createComponent(data.id, data.component, this.options.components || {}, this.options.frameworkComponents || {}, this.options.frameworkComponentFactory
+                      ? {
+                          createComponent: this.options.frameworkComponentFactory
+                              .createComponent,
                       }
-                      const panel = createComponent(data.id, data.component, this.options.components || {}, this.options.frameworkComponents || {}, this.options.frameworkWrapper
-                          ? {
-                              createComponent: this.options.frameworkWrapper
-                                  .createComponent,
-                          }
-                          : undefined);
-                      queue.push(() => {
-                          panel.init({
-                              params: data.params || {},
-                              minimumSize: data.minimumSize,
-                              maximumSize: data.maximumSize,
-                              snap: view.snap,
-                              priority: view.priority,
-                              accessor: this,
-                          });
-                      });
-                      panel.orientation = orientation;
-                      this.doAddView(panel);
-                      setTimeout(() => {
-                          // the original onDidAddView events are missed since they are fired before we can subcribe to them
-                          this._onDidAddView.fire(panel);
-                      }, 0);
-                      return { size: view.size, view: panel };
-                  }),
+                      : undefined);
+                  queue.push(() => view.init({
+                      params: data.params,
+                      minimumWidth: data.minimumWidth,
+                      maximumWidth: data.maximumWidth,
+                      minimumHeight: data.minimumHeight,
+                      maximumHeight: data.maximumHeight,
+                      priority: data.priority,
+                      snap: !!data.snap,
+                      accessor: this,
+                      isVisible: node.visible,
+                  }));
+                  this._onDidAddGroup.fire(view);
+                  this.registerPanel(view);
+                  return view;
               },
           });
-          this.layout(this.width, this.height);
+          this.layout(this.width, this.height, true);
           queue.forEach((f) => f());
-          if (typeof activeView === 'string') {
-              const panel = this.getPanel(activeView);
+          if (typeof activePanel === 'string') {
+              const panel = this.getPanel(activePanel);
               if (panel) {
-                  this.setActive(panel);
+                  this.doSetGroupActive(panel);
               }
           }
           this._onDidLayoutfromJSON.fire();
       }
       clear() {
-          for (const [_, value] of this._panels.entries()) {
-              value.disposable.dispose();
-              value.value.dispose();
+          const hasActiveGroup = this.activeGroup;
+          const groups = Array.from(this._groups.values()); // reassign since group panels will mutate
+          for (const group of groups) {
+              group.disposable.dispose();
+              this.doRemoveGroup(group.value, { skipActive: true });
           }
-          this._panels.clear();
-          this.splitview.dispose();
+          if (hasActiveGroup) {
+              this.doSetGroupActive(undefined);
+          }
+          this.gridview.clear();
       }
-      dispose() {
-          for (const [_, value] of this._panels.entries()) {
-              value.disposable.dispose();
-              value.value.dispose();
+      movePanel(panel, options) {
+          var _a;
+          let relativeLocation;
+          const removedPanel = this.gridview.remove(panel);
+          const referenceGroup = (_a = this._groups.get(options.reference)) === null || _a === void 0 ? void 0 : _a.value;
+          if (!referenceGroup) {
+              throw new Error(`reference group ${options.reference} does not exist`);
           }
-          this._panels.clear();
-          this.splitview.dispose();
-          super.dispose();
+          const target = toTarget(options.direction);
+          if (target === 'center') {
+              throw new Error(`${target} not supported as an option`);
+          }
+          else {
+              const location = getGridLocation(referenceGroup.element);
+              relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
+          }
+          this.doAddGroup(removedPanel, relativeLocation, options.size);
       }
-  }
-
-  class SplitviewPanelApiImpl extends PanelApiImpl {
-      //
-      constructor(id) {
-          super(id);
-          this._onDidConstraintsChangeInternal = new Emitter();
-          this.onDidConstraintsChangeInternal = this._onDidConstraintsChangeInternal.event;
-          //
-          this._onDidConstraintsChange = new Emitter({
-              replay: true,
+      addPanel(options) {
+          var _a, _b;
+          let relativeLocation = options.location || [0];
+          if ((_a = options.position) === null || _a === void 0 ? void 0 : _a.referencePanel) {
+              const referenceGroup = (_b = this._groups.get(options.position.referencePanel)) === null || _b === void 0 ? void 0 : _b.value;
+              if (!referenceGroup) {
+                  throw new Error(`reference group ${options.position.referencePanel} does not exist`);
+              }
+              const target = toTarget(options.position.direction);
+              if (target === 'center') {
+                  throw new Error(`${target} not supported as an option`);
+              }
+              else {
+                  const location = getGridLocation(referenceGroup.element);
+                  relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
+              }
+          }
+          const view = createComponent(options.id, options.component, this.options.components || {}, this.options.frameworkComponents || {}, this.options.frameworkComponentFactory
+              ? {
+                  createComponent: this.options.frameworkComponentFactory
+                      .createComponent,
+              }
+              : undefined);
+          view.init({
+              params: options.params || {},
+              minimumWidth: options.minimumWidth,
+              maximumWidth: options.maximumWidth,
+              minimumHeight: options.minimumHeight,
+              maximumHeight: options.maximumHeight,
+              priority: options.priority,
+              snap: !!options.snap,
+              accessor: this,
+              isVisible: true,
           });
-          this.onDidConstraintsChange = this._onDidConstraintsChange.event;
-          //
-          this._onDidSizeChange = new Emitter();
-          this.onDidSizeChange = this._onDidSizeChange.event;
-          this.addDisposables(this._onDidConstraintsChangeInternal, this._onDidConstraintsChange, this._onDidSizeChange);
-      }
-      setConstraints(value) {
-          this._onDidConstraintsChangeInternal.fire(value);
-      }
-      setSize(event) {
-          this._onDidSizeChange.fire(event);
+          this.registerPanel(view);
+          this.doAddGroup(view, relativeLocation, options.size);
+          return view;
       }
-  }
-
-  class PaneviewPanelApiImpl extends SplitviewPanelApiImpl {
-      set pane(pane) {
-          this._pane = pane;
+      registerPanel(panel) {
+          const disposable = new CompositeDisposable(panel.api.onDidFocusChange((event) => {
+              if (!event.isFocused) {
+                  return;
+              }
+              this._groups.forEach((groupItem) => {
+                  const group = groupItem.value;
+                  if (group !== panel) {
+                      group.setActive(false);
+                  }
+                  else {
+                      group.setActive(true);
+                  }
+              });
+          }));
+          this._groups.set(panel.id, {
+              value: panel,
+              disposable,
+          });
       }
-      constructor(id) {
-          super(id);
-          this._onDidExpansionChange = new Emitter({
-              replay: true,
+      moveGroup(referenceGroup, groupId, target) {
+          const sourceGroup = this.getPanel(groupId);
+          if (!sourceGroup) {
+              throw new Error('invalid operation');
+          }
+          const referenceLocation = getGridLocation(referenceGroup.element);
+          const targetLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
+          const [targetParentLocation, to] = tail(targetLocation);
+          const sourceLocation = getGridLocation(sourceGroup.element);
+          const [sourceParentLocation, from] = tail(sourceLocation);
+          if (sequenceEquals(sourceParentLocation, targetParentLocation)) {
+              // special case when 'swapping' two views within same grid location
+              // if a group has one tab - we are essentially moving the 'group'
+              // which is equivalent to swapping two views in this case
+              this.gridview.moveView(sourceParentLocation, from, to);
+              return;
+          }
+          // source group will become empty so delete the group
+          const targetGroup = this.doRemoveGroup(sourceGroup, {
+              skipActive: true,
+              skipDispose: true,
           });
-          this.onDidExpansionChange = this._onDidExpansionChange.event;
-          this._onMouseEnter = new Emitter({});
-          this.onMouseEnter = this._onMouseEnter.event;
-          this._onMouseLeave = new Emitter({});
-          this.onMouseLeave = this._onMouseLeave.event;
-          this.addDisposables(this._onDidExpansionChange, this._onMouseEnter, this._onMouseLeave);
+          // after deleting the group we need to re-evaulate the ref location
+          const updatedReferenceLocation = getGridLocation(referenceGroup.element);
+          const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, target);
+          this.doAddGroup(targetGroup, location);
       }
-      setExpanded(isExpanded) {
-          var _a;
-          (_a = this._pane) === null || _a === void 0 ? void 0 : _a.setExpanded(isExpanded);
+      removeGroup(group) {
+          super.removeGroup(group);
       }
-      get isExpanded() {
-          var _a;
-          return !!((_a = this._pane) === null || _a === void 0 ? void 0 : _a.isExpanded());
+      dispose() {
+          super.dispose();
+          this._onDidLayoutfromJSON.dispose();
       }
   }
 
-  class PaneviewPanel extends BasePanelView {
-      set orientation(value) {
-          this._orientation = value;
-      }
-      get orientation() {
-          return this._orientation;
-      }
-      get minimumSize() {
-          const headerSize = this.headerSize;
-          const expanded = this.isExpanded();
-          const minimumBodySize = expanded ? this._minimumBodySize : 0;
-          return headerSize + minimumBodySize;
+  /**
+   * A high-level implementation of splitview that works using 'panels'
+   */
+  class SplitviewComponent extends CompositeDisposable {
+      get panels() {
+          return this.splitview.getViews();
       }
-      get maximumSize() {
-          const headerSize = this.headerSize;
-          const expanded = this.isExpanded();
-          const maximumBodySize = expanded ? this._maximumBodySize : 0;
-          return headerSize + maximumBodySize;
+      get options() {
+          return this._options;
       }
-      get size() {
-          return this._size;
+      get length() {
+          return this._panels.size;
       }
-      get orthogonalSize() {
-          return this._orthogonalSize;
+      get orientation() {
+          return this.splitview.orientation;
       }
-      set orthogonalSize(size) {
-          this._orthogonalSize = size;
+      get splitview() {
+          return this._splitview;
       }
-      get minimumBodySize() {
-          return this._minimumBodySize;
+      set splitview(value) {
+          this._splitview = value;
+          this._disposable.value = new CompositeDisposable(this._splitview.onDidSashEnd(() => {
+              this._onDidLayoutChange.fire(undefined);
+          }), this._splitview.onDidAddView((e) => this._onDidAddView.fire(e)), this._splitview.onDidRemoveView((e) => this._onDidRemoveView.fire(e)));
       }
-      set minimumBodySize(value) {
-          this._minimumBodySize = typeof value === 'number' ? value : 0;
+      get minimumSize() {
+          return this.splitview.minimumSize;
       }
-      get maximumBodySize() {
-          return this._maximumBodySize;
+      get maximumSize() {
+          return this.splitview.maximumSize;
       }
-      set maximumBodySize(value) {
-          this._maximumBodySize =
-              typeof value === 'number' ? value : Number.POSITIVE_INFINITY;
+      get height() {
+          return this.splitview.orientation === exports.Orientation.HORIZONTAL
+              ? this.splitview.orthogonalSize
+              : this.splitview.size;
       }
-      get headerVisible() {
-          return this._headerVisible;
+      get width() {
+          return this.splitview.orientation === exports.Orientation.HORIZONTAL
+              ? this.splitview.size
+              : this.splitview.orthogonalSize;
       }
-      set headerVisible(value) {
-          this._headerVisible = value;
-          this.header.style.display = value ? '' : 'none';
+      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);
       }
-      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();
+      updateOptions(options) {
+          const hasOrientationChanged = typeof options.orientation === 'string' &&
+              this.options.orientation !== options.orientation;
+          this._options = Object.assign(Object.assign({}, this.options), options);
+          if (hasOrientationChanged) {
+              this.splitview.orientation = options.orientation;
+          }
+          this.splitview.layout(this.splitview.size, this.splitview.orthogonalSize);
       }
-      setVisible(isVisible) {
-          this.api._onDidVisibilityChange.fire({ isVisible });
+      focus() {
+          var _a;
+          (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus();
       }
-      setActive(isActive) {
-          this.api._onDidActiveChange.fire({ isActive });
+      movePanel(from, to) {
+          this.splitview.moveView(from, to);
       }
-      isExpanded() {
-          return this._isExpanded;
+      setVisible(panel, visible) {
+          const index = this.panels.indexOf(panel);
+          this.splitview.setViewVisible(index, visible);
       }
-      setExpanded(expanded) {
-          if (this._isExpanded === expanded) {
-              return;
-          }
-          this._isExpanded = expanded;
-          if (expanded) {
-              if (this.animationTimer) {
-                  clearTimeout(this.animationTimer);
-              }
-              if (this.body) {
-                  this.element.appendChild(this.body);
+      setActive(view, skipFocus) {
+          this._activePanel = view;
+          this.panels
+              .filter((v) => v !== view)
+              .forEach((v) => {
+              v.api._onDidActiveChange.fire({ isActive: false });
+              if (!skipFocus) {
+                  v.focus();
               }
+          });
+          view.api._onDidActiveChange.fire({ isActive: true });
+          if (!skipFocus) {
+              view.focus();
           }
-          else {
-              this.animationTimer = setTimeout(() => {
-                  var _a;
-                  (_a = this.body) === null || _a === void 0 ? void 0 : _a.remove();
-              }, 200);
-          }
-          this._onDidChange.fire(expanded ? { size: this.width } : {});
-          this._onDidChangeExpansionState.fire(expanded);
-      }
-      layout(size, orthogonalSize) {
-          this._size = size;
-          this._orthogonalSize = orthogonalSize;
-          const [width, height] = this.orientation === exports.Orientation.HORIZONTAL
-              ? [size, orthogonalSize]
-              : [orthogonalSize, size];
-          if (this.isExpanded()) {
-              this.expandedSize = width;
-          }
-          super.layout(width, height);
       }
-      init(parameters) {
-          var _a, _b;
-          super.init(parameters);
-          if (typeof parameters.minimumBodySize === 'number') {
-              this.minimumBodySize = parameters.minimumBodySize;
+      removePanel(panel, sizing) {
+          const disposable = this._panels.get(panel.id);
+          if (!disposable) {
+              throw new Error(`unknown splitview panel ${panel.id}`);
           }
-          if (typeof parameters.maximumBodySize === 'number') {
-              this.maximumBodySize = parameters.maximumBodySize;
+          disposable.disposable.dispose();
+          disposable.value.dispose();
+          this._panels.delete(panel.id);
+          const index = this.panels.findIndex((_) => _ === panel);
+          this.splitview.removeView(index, sizing);
+          const panels = this.panels;
+          if (panels.length > 0) {
+              this.setActive(panels[panels.length - 1]);
           }
-          this.bodyPart = this.getBodyComponent();
-          this.headerPart = this.getHeaderComponent();
-          this.bodyPart.init(Object.assign(Object.assign({}, parameters), { api: this.api }));
-          this.headerPart.init(Object.assign(Object.assign({}, parameters), { api: this.api }));
-          (_a = this.body) === null || _a === void 0 ? void 0 : _a.append(this.bodyPart.element);
-          (_b = this.header) === null || _b === void 0 ? void 0 : _b.append(this.headerPart.element);
-          if (typeof parameters.isExpanded === 'boolean') {
-              this.setExpanded(parameters.isExpanded);
+      }
+      getPanel(id) {
+          return this.panels.find((view) => view.id === id);
+      }
+      addPanel(options) {
+          if (this._panels.has(options.id)) {
+              throw new Error(`panel ${options.id} already exists`);
           }
+          const view = createComponent(options.id, options.component, this.options.components || {}, this.options.frameworkComponents || {}, this.options.frameworkWrapper
+              ? {
+                  createComponent: this.options.frameworkWrapper.createComponent,
+              }
+              : undefined);
+          view.orientation = this.splitview.orientation;
+          view.init({
+              params: options.params || {},
+              minimumSize: options.minimumSize,
+              maximumSize: options.maximumSize,
+              snap: options.snap,
+              priority: options.priority,
+              accessor: this,
+          });
+          const size = typeof options.size === 'number' ? options.size : exports.Sizing.Distribute;
+          const index = typeof options.index === 'number' ? options.index : undefined;
+          this.splitview.addView(view, size, index);
+          this.doAddView(view);
+          this.setActive(view);
+          return view;
       }
-      toJSON() {
-          const params = this._params;
-          return Object.assign(Object.assign({}, super.toJSON()), { headerComponent: this.headerComponent, title: params.title });
+      layout(width, height) {
+          const [size, orthogonalSize] = this.splitview.orientation === exports.Orientation.HORIZONTAL
+              ? [width, height]
+              : [height, width];
+          this.splitview.layout(size, orthogonalSize);
       }
-      renderOnce() {
-          this.header = document.createElement('div');
-          this.header.tabIndex = 0;
-          this.header.className = 'pane-header';
-          this.header.style.height = `${this.headerSize}px`;
-          this.header.style.lineHeight = `${this.headerSize}px`;
-          this.header.style.minHeight = `${this.headerSize}px`;
-          this.header.style.maxHeight = `${this.headerSize}px`;
-          this.element.appendChild(this.header);
-          this.body = document.createElement('div');
-          this.body.className = 'pane-body';
-          this.element.appendChild(this.body);
+      doAddView(view) {
+          const disposable = view.api.onDidFocusChange((event) => {
+              if (!event.isFocused) {
+                  return;
+              }
+              this.setActive(view, true);
+          });
+          this._panels.set(view.id, { disposable, value: view });
       }
-      // TODO slightly hacky by-pass of the component to create a body and header component
-      getComponent() {
+      toJSON() {
+          var _a;
+          const views = this.splitview
+              .getViews()
+              .map((view, i) => {
+              const size = this.splitview.getViewSize(i);
+              return {
+                  size,
+                  data: view.toJSON(),
+                  snap: !!view.snap,
+                  priority: view.priority,
+              };
+          });
           return {
-              update: (params) => {
-                  var _a, _b;
-                  (_a = this.bodyPart) === null || _a === void 0 ? void 0 : _a.update({ params });
-                  (_b = this.headerPart) === null || _b === void 0 ? void 0 : _b.update({ params });
-              },
-              dispose: () => {
-                  var _a, _b;
-                  (_a = this.bodyPart) === null || _a === void 0 ? void 0 : _a.dispose();
-                  (_b = this.headerPart) === null || _b === void 0 ? void 0 : _b.dispose();
-              },
+              views,
+              activeView: (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.id,
+              size: this.splitview.size,
+              orientation: this.splitview.orientation,
           };
       }
-  }
-
-  class DraggablePaneviewPanel extends PaneviewPanel {
-      constructor(accessor, id, component, headerComponent, orientation, isExpanded, disableDnd) {
-          super(id, component, headerComponent, orientation, isExpanded, true);
-          this.accessor = accessor;
-          this._onDidDrop = new Emitter();
-          this.onDidDrop = this._onDidDrop.event;
-          if (!disableDnd) {
-              this.initDragFeatures();
-          }
-      }
-      initDragFeatures() {
-          if (!this.header) {
-              return;
-          }
-          const id = this.id;
-          const accessorId = this.accessor.id;
-          this.header.draggable = true;
-          this.handler = new (class PaneDragHandler extends DragHandler {
-              getData() {
-                  LocalSelectionTransfer.getInstance().setData([new PaneTransfer(accessorId, id)], PaneTransfer.prototype);
-                  return {
-                      dispose: () => {
-                          LocalSelectionTransfer.getInstance().clearData(PaneTransfer.prototype);
-                      },
-                  };
-              }
-          })(this.header);
-          this.target = new Droptarget(this.element, {
-              acceptedTargetZones: ['top', 'bottom'],
-              overlayModel: {
-                  activationSize: { type: 'percentage', value: 50 },
-              },
-              canDisplayOverlay: (event) => {
-                  const data = getPaneData();
-                  if (data) {
-                      if (data.paneId !== this.id &&
-                          data.viewId === this.accessor.id) {
-                          return true;
+      fromJSON(serializedSplitview) {
+          this.clear();
+          const { views, orientation, size, activeView } = serializedSplitview;
+          const queue = [];
+          this.splitview = new Splitview(this.element, {
+              orientation,
+              proportionalLayout: this.options.proportionalLayout,
+              descriptor: {
+                  size,
+                  views: views.map((view) => {
+                      const data = view.data;
+                      if (this._panels.has(data.id)) {
+                          throw new Error(`panel ${data.id} already exists`);
                       }
-                  }
-                  if (this.accessor.options.showDndOverlay) {
-                      return this.accessor.options.showDndOverlay({
-                          nativeEvent: event,
-                          getData: getPaneData,
-                          panel: this,
+                      const panel = createComponent(data.id, data.component, this.options.components || {}, this.options.frameworkComponents || {}, this.options.frameworkWrapper
+                          ? {
+                              createComponent: this.options.frameworkWrapper
+                                  .createComponent,
+                          }
+                          : undefined);
+                      queue.push(() => {
+                          panel.init({
+                              params: data.params || {},
+                              minimumSize: data.minimumSize,
+                              maximumSize: data.maximumSize,
+                              snap: view.snap,
+                              priority: view.priority,
+                              accessor: this,
+                          });
                       });
-                  }
-                  return false;
+                      panel.orientation = orientation;
+                      this.doAddView(panel);
+                      setTimeout(() => {
+                          // the original onDidAddView events are missed since they are fired before we can subcribe to them
+                          this._onDidAddView.fire(panel);
+                      }, 0);
+                      return { size: view.size, view: panel };
+                  }),
               },
           });
-          this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop((event) => {
-              this.onDrop(event);
-          }));
-      }
-      onDrop(event) {
-          const data = getPaneData();
-          if (!data || data.viewId !== this.accessor.id) {
-              // if there is no local drag event for this panel
-              // or if the drag event was creating by another Paneview instance
-              this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: getPaneData }));
-              return;
-          }
-          const containerApi = this._params
-              .containerApi;
-          const panelId = data.paneId;
-          const existingPanel = containerApi.getPanel(panelId);
-          if (!existingPanel) {
-              // if the panel doesn't exist
-              this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: getPaneData }));
-              return;
+          this.layout(this.width, this.height);
+          queue.forEach((f) => f());
+          if (typeof activeView === 'string') {
+              const panel = this.getPanel(activeView);
+              if (panel) {
+                  this.setActive(panel);
+              }
           }
-          const allPanels = containerApi.panels;
-          const fromIndex = allPanels.indexOf(existingPanel);
-          let toIndex = containerApi.panels.indexOf(this);
-          if (event.position === 'left' || event.position === 'top') {
-              toIndex = Math.max(0, toIndex - 1);
+          this._onDidLayoutfromJSON.fire();
+      }
+      clear() {
+          for (const [_, value] of this._panels.entries()) {
+              value.disposable.dispose();
+              value.value.dispose();
           }
-          if (event.position === 'right' || event.position === 'bottom') {
-              if (fromIndex > toIndex) {
-                  toIndex++;
-              }
-              toIndex = Math.min(allPanels.length - 1, toIndex);
+          this._panels.clear();
+          this.splitview.dispose();
+      }
+      dispose() {
+          for (const [_, value] of this._panels.entries()) {
+              value.disposable.dispose();
+              value.value.dispose();
           }
-          containerApi.movePanel(fromIndex, toIndex);
+          this._panels.clear();
+          this.splitview.dispose();
+          super.dispose();
       }
   }
 
@@ -6190,7 +6172,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.addDisposables(this._disposable);
       }
       focus() {
-          //
+          //noop
       }
       updateOptions(options) {
           this._options = Object.assign(Object.assign({}, this.options), options);
@@ -6509,7 +6491,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
    * require a key property like any other React element rendered in an array
    * to prevent excessive re-rendering
    */
-  const uniquePortalKeyGenerator = sequentialNumberGenerator();
+  const uniquePortalKeyGenerator = (() => {
+      let value = 1;
+      return { next: () => `dockview_react_portal_key_${(value++).toString()}` };
+  })();
   const ReactPartContext = React__namespace.createContext({});
   class ReactPart {
       constructor(parent, portalStore, component, parameters, context) {
@@ -6626,18 +6611,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               containerApi: parameters.containerApi,
           });
       }
-      toJSON() {
-          return {
-              id: this.id,
-          };
-      }
       update(event) {
           var _a;
           (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(event.params);
       }
-      updateParentGroup(group, _isPanelVisible) {
-          this._group = group;
-      }
       layout(_width, _height) {
           // noop
       }
@@ -6674,60 +6651,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           var _a;
           (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(event.params);
       }
-      toJSON() {
-          if (this.id === DEFAULT_TAB_IDENTIFIER) {
-              return {};
-          }
-          return {
-              id: this.id,
-          };
-      }
       layout(_width, _height) {
           // noop - retrieval from api
       }
-      updateParentGroup(_group, _isPanelVisible) {
-          // noop - retrieval from api
-      }
       dispose() {
           var _a;
           (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
       }
   }
 
-  class ReactPanelDeserialzier {
-      constructor(layout) {
-          this.layout = layout;
-      }
-      fromJSON(panelData, group) {
-          var _a, _b, _c, _d;
-          const panelId = panelData.id;
-          const params = panelData.params;
-          const title = panelData.title;
-          const viewData = panelData.view;
-          let tab;
-          if ((_a = viewData.tab) === null || _a === void 0 ? void 0 : _a.id) {
-              tab = createComponent(viewData.tab.id, viewData.tab.id, this.layout.options.tabComponents, this.layout.options.frameworkTabComponents, (_b = this.layout.options.frameworkComponentFactory) === null || _b === void 0 ? void 0 : _b.tab, () => new DefaultTab());
-          }
-          else if (this.layout.options.defaultTabComponent) {
-              tab = createComponent(this.layout.options.defaultTabComponent, this.layout.options.defaultTabComponent, this.layout.options.tabComponents, this.layout.options.frameworkTabComponents, (_c = this.layout.options.frameworkComponentFactory) === null || _c === void 0 ? void 0 : _c.tab, () => new DefaultTab());
-          }
-          else {
-              tab = new DefaultTab();
-          }
-          const view = new DefaultGroupPanelView({
-              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 DockviewPanel(panelId, this.layout, new DockviewApi(this.layout), group);
-          panel.init({
-              view,
-              title,
-              params: params || {},
-          });
-          return panel;
-      }
-  }
-
   class ReactWatermarkPart {
       get element() {
           return this._element;
@@ -6736,21 +6668,16 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.id = id;
           this.component = component;
           this.reactPortalStore = reactPortalStore;
-          this._groupRef = {
-              value: undefined,
-          };
           this._element = document.createElement('div');
           this._element.className = 'dockview-react-part';
       }
       init(parameters) {
-          this.parameters = parameters;
           this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
-              params: parameters.params,
-              api: parameters.api,
+              group: parameters.group,
               containerApi: parameters.containerApi,
               close: () => {
-                  if (this._groupRef.value) {
-                      parameters.containerApi.removeGroup(this._groupRef.value);
+                  if (parameters.group) {
+                      parameters.containerApi.removeGroup(parameters.group);
                   }
               },
           });
@@ -6765,17 +6692,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
           (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ params: ((_b = this.parameters) === null || _b === void 0 ? void 0 : _b.params) || {} });
       }
-      toJSON() {
-          return {
-              id: this.id,
-          };
-      }
       layout(_width, _height) {
           // noop - retrieval from api
       }
-      updateParentGroup(group, _isPanelVisible) {
-          // noop - retrieval from api
-          this._groupRef.value = group;
+      updateParentGroup(_group, _isPanelVisible) {
+          // noop
       }
       dispose() {
           var _a;
@@ -6857,6 +6778,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
           : undefined;
   }
+  const DEFAULT_REACT_TAB = 'props.defaultTabComponent';
   const DockviewReact = React__namespace.forwardRef((props, ref) => {
       const domRef = React__namespace.useRef(null);
       const dockviewRef = React__namespace.useRef();
@@ -6903,13 +6825,20 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               },
           };
           const element = document.createElement('div');
+          const frameworkTabComponents = props.tabComponents || {};
+          if (props.defaultTabComponent) {
+              frameworkTabComponents[DEFAULT_REACT_TAB] =
+                  props.defaultTabComponent;
+          }
           const dockview = new DockviewComponent(element, {
               frameworkComponentFactory: factory,
               frameworkComponents: props.components,
-              frameworkTabComponents: Object.assign(Object.assign({}, (props.tabComponents || {})), { [DEFAULT_TAB_IDENTIFIER]: props.defaultTabComponent }),
+              frameworkTabComponents,
               tabHeight: props.tabHeight,
               watermarkFrameworkComponent: props.watermarkComponent,
-              defaultTabComponent: DEFAULT_TAB_IDENTIFIER,
+              defaultTabComponent: props.defaultTabComponent
+                  ? DEFAULT_REACT_TAB
+                  : undefined,
               styles: props.hideBorders
                   ? { separatorBorder: 'transparent' }
                   : undefined,
@@ -6918,7 +6847,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               singleTabMode: props.singleTabMode,
           });
           (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(dockview.element);
-          dockview.deserializer = new ReactPanelDeserialzier(dockview);
           const { clientWidth, clientHeight } = domRef.current;
           dockview.layout(clientWidth, clientHeight);
           if (props.onReady) {
@@ -6981,9 +6909,16 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           if (!dockviewRef.current) {
               return;
           }
+          const frameworkTabComponents = props.tabComponents || {};
+          if (props.defaultTabComponent) {
+              frameworkTabComponents[DEFAULT_REACT_TAB] =
+                  props.defaultTabComponent;
+          }
           dockviewRef.current.updateOptions({
-              defaultTabComponent: DEFAULT_TAB_IDENTIFIER,
-              frameworkTabComponents: Object.assign(Object.assign({}, (props.tabComponents || {})), { [DEFAULT_TAB_IDENTIFIER]: props.defaultTabComponent }),
+              defaultTabComponent: props.defaultTabComponent
+                  ? DEFAULT_REACT_TAB
+                  : undefined,
+              frameworkTabComponents,
           });
       }, [props.defaultTabComponent]);
       React__namespace.useEffect(() => {
@@ -7128,7 +7063,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
 
   class ReactGridPanelView extends GridviewPanel {
       constructor(id, component, reactComponent, reactPortalStore) {
-          super(id, component, new GridviewPanelApiImpl(id));
+          super(id, component);
           this.reactComponent = reactComponent;
           this.reactPortalStore = reactPortalStore;
       }
@@ -7338,16 +7273,24 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
 
   exports.BaseGrid = BaseGrid;
   exports.ContentContainer = ContentContainer;
+  exports.DefaultDockviewDeserialzier = DefaultDockviewDeserialzier;
+  exports.DefaultTab = DefaultTab;
   exports.DockviewApi = DockviewApi;
   exports.DockviewComponent = DockviewComponent;
+  exports.DockviewCompositeDisposable = CompositeDisposable;
   exports.DockviewDefaultTab = DockviewDefaultTab;
+  exports.DockviewEmitter = Emitter;
+  exports.DockviewGroupPanel = DockviewGroupPanel;
+  exports.DockviewGroupPanelModel = DockviewGroupPanelModel;
+  exports.DockviewMutableDisposable = MutableDisposable;
+  exports.DockviewPanel = DockviewPanel;
   exports.DockviewReact = DockviewReact;
+  exports.DraggablePaneviewPanel = DraggablePaneviewPanel;
   exports.Gridview = Gridview;
   exports.GridviewApi = GridviewApi;
   exports.GridviewComponent = GridviewComponent;
   exports.GridviewPanel = GridviewPanel;
   exports.GridviewReact = GridviewReact;
-  exports.Groupview = Groupview;
   exports.LocalSelectionTransfer = LocalSelectionTransfer;
   exports.PaneFramework = PaneFramework;
   exports.PaneTransfer = PaneTransfer;
@@ -7365,6 +7308,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
   exports.SplitviewPanel = SplitviewPanel;
   exports.SplitviewReact = SplitviewReact;
   exports.Tab = Tab;
+  exports.createComponent = createComponent;
   exports.directionToPosition = directionToPosition;
   exports.getDirectionOrientation = getDirectionOrientation;
   exports.getGridLocation = getGridLocation;
@@ -7383,5 +7327,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
   exports.positionToDirection = positionToDirection;
   exports.toTarget = toTarget;
   exports.usePortalsLifecycle = usePortalsLifecycle;
+  exports.watchElementResize = watchElementResize;
 
 }));