dockview 1.6.0 → 1.7.0

package/dist/dockview.esm.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.6.0
+ * @version 1.7.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -34,7 +34,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".dockview-svg {\n  display: inline-block;\n  fill: currentcolor;\n  line-height: 1;\n  stroke: currentcolor;\n  stroke-width: 0;\n}\n.dockview-theme-dark {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-group-view-background-color: #1e1e1e;\n  --dv-tabs-and-actions-container-background-color: #252526;\n  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-tab-divider-color: #1e1e1e;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: #969696;\n  --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n  --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n  --dv-separator-border: rgb(68, 68, 68);\n  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n}\n\n.dockview-theme-light {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-group-view-background-color: white;\n  --dv-tabs-and-actions-container-background-color: #f3f3f3;\n  --dv-activegroup-visiblepanel-tab-background-color: white;\n  --dv-activegroup-hiddenpanel-tab-background-color: #ececec;\n  --dv-inactivegroup-visiblepanel-tab-background-color: white;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #ececec;\n  --dv-tab-divider-color: white;\n  --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-activegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.7);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(51, 51, 51, 0.7);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.35);\n  --dv-separator-border: rgba(128, 128, 128, 0.35);\n  --dv-paneview-header-border-color: rgb(51, 51, 51);\n}\n\n.dockview-theme-vs {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-group-view-background-color: #1e1e1e;\n  --dv-tabs-and-actions-container-background-color: #252526;\n  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-tab-divider-color: #1e1e1e;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: #969696;\n  --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n  --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n  --dv-separator-border: rgb(68, 68, 68);\n  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n  --dv-tabs-and-actions-container-background-color: #2d2d30;\n  --dv-tabs-and-actions-container-height: 20px;\n  --dv-tabs-and-actions-container-font-size: 11px;\n  --dv-activegroup-visiblepanel-tab-background-color: #007acc;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #3f3f46;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: white;\n  --dv-inactivegroup-visiblepanel-tab-color: white;\n  --dv-inactivegroup-hiddenpanel-tab-color: white;\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container {\n  box-sizing: content-box;\n  border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.active-tab {\n  border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.inactive-tab {\n  border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container {\n  box-sizing: content-box;\n  border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.active-tab {\n  border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.inactive-tab {\n  border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n}\n\n.dockview-theme-abyss {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-group-view-background-color: #000c18;\n  --dv-tabs-and-actions-container-background-color: #1c1c2a;\n  --dv-activegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-activegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-tab-divider-color: #2b2b4a;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);\n  --dv-separator-border: #2b2b4a;\n  --dv-paneview-header-border-color: #2b2b4a;\n  --dv-paneview-active-outline-color: #596f99;\n}\n\n.dockview-theme-dracula {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-group-view-background-color: #282a36;\n  --dv-tabs-and-actions-container-background-color: #191a21;\n  --dv-activegroup-visiblepanel-tab-background-color: #282a36;\n  --dv-activegroup-hiddenpanel-tab-background-color: #21222c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #282a36;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #21222c;\n  --dv-tab-divider-color: #191a21;\n  --dv-activegroup-visiblepanel-tab-color: rgb(248, 248, 242);\n  --dv-activegroup-hiddenpanel-tab-color: rgb(98, 114, 164);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(98, 114, 164, 0.5);\n  --dv-separator-border: #bd93f9;\n  --dv-paneview-header-border-color: #bd93f9;\n  --dv-paneview-active-outline-color: #6272a4;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  background-color: #94527e;\n  z-index: 999;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n  position: absolute;\n  left: 0px;\n  bottom: 0px;\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  background-color: #5e3d5a;\n  z-index: 999;\n}\n.actions-bar {\n  text-align: right;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n.actions-bar .actions-container {\n  display: flex;\n  padding: 0px;\n  margin: 0px;\n  justify-content: flex-end;\n}\n.actions-bar .actions-container .close-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  cursor: pointer;\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.actions-bar .actions-container .close-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}\n.drop-target {\n  position: relative;\n}\n.drop-target > .drop-target-dropzone {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  height: 100%;\n  width: 100%;\n  z-index: 10000;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection {\n  position: relative;\n  box-sizing: border-box;\n  height: 100%;\n  width: 100%;\n  background-color: var(--dv-drag-over-background-color);\n  transition: top 70ms ease-out, left 70ms ease-out, width 70ms ease-out, height 70ms ease-out, opacity 0.15s ease-out;\n  will-change: transform;\n  pointer-events: none;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.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 {
@@ -348,16 +348,30 @@ class FocusTracker extends CompositeDisposable {
     }
 }
 
-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) {
@@ -399,6 +413,26 @@ function pushToEnd(arr, value) {
         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') {
@@ -417,15 +451,6 @@ const range = (from, to) => {
     }
     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) {
@@ -440,25 +465,6 @@ class ViewItem {
     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;
     }
@@ -495,11 +501,25 @@ class ViewItem {
             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;
@@ -608,14 +628,14 @@ class Splitview {
         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;
@@ -1510,10 +1530,10 @@ class BranchNode extends CompositeDisposable {
         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');
@@ -1772,6 +1792,35 @@ class Gridview {
     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 {
@@ -1818,17 +1867,6 @@ class Gridview {
         }
         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;
     }
@@ -1910,24 +1948,6 @@ class Gridview {
         }
         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;
@@ -2432,10 +2452,6 @@ class DragAndDropObserver extends CompositeDisposable {
     }
 }
 
-function isBooleanValue(value) {
-    return typeof value === 'boolean';
-}
-
 function numberOrFallback(maybeNumber, fallback) {
     return typeof maybeNumber === 'number' ? maybeNumber : fallback;
 }
@@ -2500,7 +2516,7 @@ class Droptarget extends CompositeDisposable {
                     this.removeDropTarget();
                     return;
                 }
-                if (isBooleanValue(this.options.canDisplayOverlay)) {
+                if (typeof this.options.canDisplayOverlay === 'boolean') {
                     if (!this.options.canDisplayOverlay) {
                         return;
                     }
@@ -2508,20 +2524,20 @@ class Droptarget extends CompositeDisposable {
                 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);
@@ -2535,10 +2551,12 @@ class Droptarget extends CompositeDisposable {
             },
             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 });
                 }
             },
@@ -2549,7 +2567,7 @@ class Droptarget extends CompositeDisposable {
     }
     toggleClasses(quadrant, width, height) {
         var _a, _b, _c, _d;
-        if (!this.overlay) {
+        if (!this.overlayElement) {
             return;
         }
         const isSmallX = width < 100;
@@ -2596,11 +2614,11 @@ class Droptarget extends CompositeDisposable {
         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) {
@@ -2632,11 +2650,11 @@ class Droptarget extends CompositeDisposable {
         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');
         }
     }
@@ -2783,6 +2801,16 @@ class DragHandler extends CompositeDisposable {
             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) {
@@ -2888,6 +2916,7 @@ function addGhostImage(dataTransfer, ghostElement) {
     document.body.appendChild(ghostElement);
     dataTransfer.setDragImage(ghostElement, 0, 0);
     setTimeout(() => {
+        removeClasses(ghostElement, 'dv-dragged');
         ghostElement.remove();
     }, 0);
 }
@@ -3023,10 +3052,6 @@ class TabsContainer extends CompositeDisposable {
         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);
     }
@@ -3148,7 +3173,7 @@ class TabsContainer extends CompositeDisposable {
     }
 }
 
-class Groupview extends CompositeDisposable {
+class DockviewGroupPanelModel extends CompositeDisposable {
     get element() {
         throw new Error('not supported');
     }
@@ -3174,18 +3199,6 @@ class Groupview extends CompositeDisposable {
     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));
     }
@@ -3358,8 +3371,8 @@ class Groupview extends CompositeDisposable {
         //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' ||
@@ -3420,10 +3433,10 @@ class Groupview extends CompositeDisposable {
         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;
         }
@@ -3437,7 +3450,7 @@ class Groupview extends CompositeDisposable {
         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);
             }
         }
     }
@@ -3508,15 +3521,14 @@ class Groupview extends CompositeDisposable {
         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', () => {
@@ -3530,7 +3542,7 @@ class Groupview extends CompositeDisposable {
         }
         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();
         }
@@ -3590,9 +3602,9 @@ class Groupview extends CompositeDisposable {
         }
     }
     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();
         }
@@ -3713,19 +3725,20 @@ class BaseGrid extends CompositeDisposable {
         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;
@@ -3786,31 +3799,6 @@ class BaseGrid extends CompositeDisposable {
     }
 }
 
-function isPanelOptionsWithPanel(data) {
-    if (data.referencePanel) {
-        return true;
-    }
-    return false;
-}
-function isPanelOptionsWithGroup(data) {
-    if (data.referenceGroup) {
-        return true;
-    }
-    return false;
-}
-function isGroupOptionsWithPanel(data) {
-    if (data.referencePanel) {
-        return true;
-    }
-    return false;
-}
-function isGroupOptionsWithGroup(data) {
-    if (data.referenceGroup) {
-        return true;
-    }
-    return false;
-}
-
 /**
  * A core api implementation that should be used across all panel-like objects
  */
@@ -3905,21 +3893,21 @@ class PanelApiImpl extends CompositeDisposable {
     }
 }
 
-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);
@@ -3929,450 +3917,401 @@ class GridviewPanelApiImpl extends PanelApiImpl {
     }
 }
 
-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 === 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);
     }
 }
 
@@ -4426,8 +4365,8 @@ class GridviewPanel extends BasePanelView {
     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;
@@ -4439,6 +4378,18 @@ class GridviewPanel extends BasePanelView {
         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;
@@ -4477,142 +4428,518 @@ class GridviewPanel extends BasePanelView {
     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);
     }
 }
 
@@ -4626,12 +4953,6 @@ class DockviewComponent extends BaseGrid {
     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;
     }
@@ -4658,6 +4979,7 @@ class DockviewComponent extends BaseGrid {
             styles: options.styles,
         });
         this.nextGroupId = sequentialNumberGenerator();
+        this._deserializer = new DefaultDockviewDeserialzier(this);
         this.watermark = null;
         this._onDidDrop = new Emitter();
         this.onDidDrop = this._onDidDrop.event;
@@ -4839,9 +5161,6 @@ class DockviewComponent extends BaseGrid {
     }
     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;
@@ -4859,7 +5178,7 @@ class DockviewComponent extends BaseGrid {
                 });
                 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, {
@@ -4986,14 +5305,12 @@ class DockviewComponent extends BaseGrid {
             : {}, (_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';
@@ -5003,7 +5320,7 @@ class DockviewComponent extends BaseGrid {
         }
         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;
         }
     }
@@ -5165,7 +5482,7 @@ class DockviewComponent extends BaseGrid {
                 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) => {
@@ -5178,857 +5495,522 @@ class DockviewComponent extends BaseGrid {
             }), 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 === Orientation.HORIZONTAL
-            ? this.splitview.orthogonalSize
-            : this.splitview.size;
+    get deserializer() {
+        return this._deserializer;
     }
-    get width() {
-        return this.splitview.orientation === 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 : 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 === 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 === Orientation.HORIZONTAL
+            ? this.splitview.orthogonalSize
+            : this.splitview.size;
     }
-    get headerVisible() {
-        return this._headerVisible;
+    get width() {
+        return this.splitview.orientation === 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 === 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 : 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 === 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();
     }
 }
 
@@ -6171,7 +6153,7 @@ class PaneviewComponent extends CompositeDisposable {
         this.addDisposables(this._disposable);
     }
     focus() {
-        //
+        //noop
     }
     updateOptions(options) {
         this._options = Object.assign(Object.assign({}, this.options), options);
@@ -6490,7 +6472,10 @@ ReactComponentBridge.displayName = 'DockviewReactJsBridge';
  * 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.createContext({});
 class ReactPart {
     constructor(parent, portalStore, component, parameters, context) {
@@ -6607,18 +6592,10 @@ class ReactPanelContentPart {
             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
     }
@@ -6655,60 +6632,15 @@ class ReactPanelHeaderPart {
         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;
@@ -6717,21 +6649,16 @@ class ReactWatermarkPart {
         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);
                 }
             },
         });
@@ -6746,17 +6673,11 @@ class ReactWatermarkPart {
         }
         (_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;
@@ -6838,6 +6759,7 @@ function createGroupControlElement(component, store) {
         }
         : undefined;
 }
+const DEFAULT_REACT_TAB = 'props.defaultTabComponent';
 const DockviewReact = React.forwardRef((props, ref) => {
     const domRef = React.useRef(null);
     const dockviewRef = React.useRef();
@@ -6884,13 +6806,20 @@ const DockviewReact = React.forwardRef((props, ref) => {
             },
         };
         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,
@@ -6899,7 +6828,6 @@ const DockviewReact = React.forwardRef((props, ref) => {
             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) {
@@ -6962,9 +6890,16 @@ const DockviewReact = React.forwardRef((props, ref) => {
         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.useEffect(() => {
@@ -7109,7 +7044,7 @@ SplitviewReact.displayName = 'SplitviewComponent';
 
 class ReactGridPanelView extends GridviewPanel {
     constructor(id, component, reactComponent, reactPortalStore) {
-        super(id, component, new GridviewPanelApiImpl(id));
+        super(id, component);
         this.reactComponent = reactComponent;
         this.reactPortalStore = reactPortalStore;
     }
@@ -7317,4 +7252,4 @@ const PaneviewReact = React.forwardRef((props, ref) => {
 });
 PaneviewReact.displayName = 'PaneviewComponent';
 
-export { BaseGrid, ContentContainer, DockviewApi, DockviewComponent, DockviewDefaultTab, DockviewDropTargets, DockviewReact, Event, Gridview, GridviewApi, GridviewComponent, GridviewPanel, GridviewReact, Groupview, LayoutPriority, LocalSelectionTransfer, Orientation, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, PaneviewReact, ReactPart, ReactPartContext, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, SplitviewReact, Tab, directionToPosition, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRelativeLocation, indexInParent, isGridBranchNode, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, isReactElement, orthogonal, positionToDirection, toTarget, usePortalsLifecycle };
+export { BaseGrid, ContentContainer, DefaultDockviewDeserialzier, DefaultTab, DockviewApi, DockviewComponent, CompositeDisposable as DockviewCompositeDisposable, DockviewDefaultTab, DockviewDropTargets, Emitter as DockviewEmitter, Event as DockviewEvent, DockviewGroupPanel, DockviewGroupPanelModel, MutableDisposable as DockviewMutableDisposable, DockviewPanel, DockviewReact, DraggablePaneviewPanel, Gridview, GridviewApi, GridviewComponent, GridviewPanel, GridviewReact, LayoutPriority, LocalSelectionTransfer, Orientation, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, PaneviewReact, ReactPart, ReactPartContext, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, SplitviewReact, Tab, createComponent, directionToPosition, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRelativeLocation, indexInParent, isGridBranchNode, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, isReactElement, orthogonal, positionToDirection, toTarget, usePortalsLifecycle, watchElementResize };