dockview 1.4.3 → 1.5.0

package/dist/dockview.amd.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.4.3
+ * @version 1.5.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -54,7 +54,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     }
   }
 
-  var css_248z = ".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-tab-close-icon: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/></svg>');\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-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-tab-close-icon: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/></svg>');\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-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-tab-close-icon: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/></svg>');\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-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-activegroup-visiblepanel-tab-background-color: dodgerblue;\n  --dv-tabs-and-actions-container-height: 18px;\n  --dv-tabs-and-actions-container-font-size: 11px;\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container {\n  border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container {\n  border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\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 a:active {\n  -webkit-mask-size: 100% 100% !important;\n  mask-size: 100% 100% !important;\n}\n.actions-bar .actions-container .close-action {\n  background-color: white;\n  height: 16px;\n  width: 16px;\n  display: block;\n  -webkit-mask: var(--dv-tab-close-icon) 50% 50%/90% 90% no-repeat;\n  mask: var(--dv-tab-close-icon) 50% 50%/90% 90% no-repeat;\n  margin-right: \"0.5em\";\n  cursor: pointer;\n}\n.drop-target {\n  position: relative;\n}\n.drop-target > .drop-target-dropzone {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  height: 100%;\n  width: 100%;\n  z-index: 10000;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection {\n  position: relative;\n  box-sizing: border-box;\n  height: 100%;\n  width: 100%;\n  background-color: var(--dv-drag-over-background-color);\n  transition: top 70ms ease-out, left 70ms ease-out, width 70ms ease-out, height 70ms ease-out, opacity 0.15s ease-out;\n  will-change: transform;\n  pointer-events: none;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.left {\n  transform: translateX(-25%) scaleX(0.5);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.right {\n  transform: translateX(25%) scaleX(0.5);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.top {\n  transform: translateY(-25%) scaleY(0.5);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.bottom {\n  transform: translateY(25%) scaleY(0.5);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-top {\n  border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-bottom {\n  border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-left {\n  border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-right {\n  border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.custom-dragging {\n  height: 24px;\n  line-height: 24px;\n  font-size: 11px;\n  width: 100px;\n  background-color: dodgerblue;\n  color: ghostwhite;\n  border-radius: 11px;\n  position: absolute;\n  padding-left: 10px;\n}\n\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab .tab-action {\n  background-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.active-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab .tab-action {\n  background-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.active-tab .tab-action {\n  background-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.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab .tab-action {\n  background-color: var(--dv-inactivegroup-hiddenpanel-tab-color);\n}\n\n/**\n * when a tab is dragged we lose the above stylings because they are conditional on parent elements\n * therefore we also set some stylings for the dragging event\n **/\n.tab.dragging {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.grid-view,\n.branch-node {\n  height: 100%;\n  width: 100%;\n}\n.groupview {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background-color: var(--dv-group-view-background-color);\n  overflow: hidden;\n}\n.groupview:focus {\n  outline: none;\n}\n.groupview.empty > .tabs-and-actions-container {\n  display: none;\n}\n.groupview > .content-container {\n  flex-grow: 1;\n  overflow: hidden;\n  outline: none;\n}\n.pane-container {\n  height: 100%;\n  width: 100%;\n}\n.pane-container.animated .view {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.pane-container .view {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  padding: 0px !important;\n}\n.pane-container .view:not(:first-child)::before {\n  background-color: transparent !important;\n}\n.pane-container .view:not(:first-child) .pane > .pane-header {\n  border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.pane-container .view .default-header {\n  background-color: var(--dv-group-view-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n  display: flex;\n  padding: 0px 8px;\n  cursor: pointer;\n}\n.pane-container .view .default-header .collapsed {\n  transform: rotate(-90deg);\n}\n.pane-container .view .default-header > span {\n  padding-left: 8px;\n  flex-grow: 1;\n}\n.pane-container:first-of-type > .pane > .pane-header {\n  border-top: none !important;\n}\n.pane-container .pane {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  height: 100%;\n}\n.pane-container .pane .pane-header {\n  box-sizing: border-box;\n  user-select: none;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-header.pane-draggable {\n  cursor: pointer;\n}\n.pane-container .pane .pane-header:focus:before, .pane-container .pane .pane-header:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.pane-container .pane .pane-body {\n  overflow-y: auto;\n  overflow-x: hidden;\n  flex-grow: 1;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-body:focus:before, .pane-container .pane .pane-body:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.tabs-and-actions-container {\n  display: flex;\n  background-color: var(--dv-tabs-and-actions-container-background-color);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  height: var(--dv-tabs-and-actions-container-height);\n  font-size: var(--dv-tabs-and-actions-container-font-size);\n}\n.tabs-and-actions-container.hidden {\n  display: none;\n}\n.tabs-and-actions-container .void-container {\n  display: flex;\n  flex-grow: 1;\n}\n.tabs-and-actions-container .tabs-container {\n  display: flex;\n  overflow-x: overlay;\n  overflow-y: hidden;\n  scrollbar-width: thin;\n  /* Track */\n  /* Handle */\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar {\n  height: 3px;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-track {\n  background: transparent;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-thumb {\n  background: var(--dv-tabs-container-scrollbar-color);\n}\n.tabs-and-actions-container .tabs-container .tab {\n  -webkit-user-drag: element;\n  outline: none;\n  min-width: 75px;\n  cursor: pointer;\n  position: relative;\n  box-sizing: border-box;\n}\n.tabs-and-actions-container .tabs-container .tab:not(:first-child)::before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  pointer-events: none;\n  background-color: var(--dv-tab-divider-color);\n  width: 1px;\n  height: 100%;\n}\n.dockview-react-part {\n  height: 100%;\n  width: 100%;\n}\n.split-view-container {\n  position: relative;\n  overflow: hidden;\n  height: 100%;\n  width: 100%;\n}\n.split-view-container.animation .view,\n.split-view-container.animation .sash {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.split-view-container.horizontal {\n  height: 100%;\n}\n.split-view-container.horizontal > .sash-container > .sash {\n  height: 100%;\n  width: 4px;\n}\n.split-view-container.horizontal > .sash-container > .sash.enabled {\n  cursor: ew-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.disabled {\n  cursor: default;\n}\n.split-view-container.horizontal > .sash-container > .sash.maximum {\n  cursor: w-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.minimum {\n  cursor: e-resize;\n}\n.split-view-container.horizontal > .view-container > .view:not(:first-child)::before {\n  height: 100%;\n  width: 1px;\n}\n.split-view-container.vertical {\n  width: 100%;\n}\n.split-view-container.vertical > .sash-container > .sash {\n  width: 100%;\n  height: 4px;\n}\n.split-view-container.vertical > .sash-container > .sash.enabled {\n  cursor: ns-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.disabled {\n  cursor: default;\n}\n.split-view-container.vertical > .sash-container > .sash.maximum {\n  cursor: n-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.minimum {\n  cursor: s-resize;\n}\n.split-view-container.vertical > .view-container > .view {\n  width: 100%;\n}\n.split-view-container.vertical > .view-container > .view:not(:first-child)::before {\n  height: 1px;\n  width: 100%;\n}\n.split-view-container .sash-container {\n  height: 100%;\n  width: 100%;\n  position: absolute;\n}\n.split-view-container .sash-container .sash {\n  position: absolute;\n  z-index: 99;\n  outline: none;\n}\n.split-view-container .sash-container .sash:active {\n  transition: background-color 0.1s ease-in-out;\n  background-color: var(--dv-active-sash-color, transparent);\n}\n.split-view-container .sash-container .sash:hover {\n  background-color: var(--dv-active-sash-color, transparent);\n  transition: background-color 0.1s ease-in-out;\n  transition-delay: 0.5s;\n}\n.split-view-container .view-container {\n  position: relative;\n  height: 100%;\n  width: 100%;\n}\n.split-view-container .view-container .view {\n  height: 100%;\n  box-sizing: border-box;\n  overflow: auto;\n  position: absolute;\n}\n.split-view-container.separator-border .view:not(:first-child)::before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  pointer-events: none;\n  background-color: var(--dv-separator-border);\n}\n.dragged {\n  transform: translate3d(0px, 0px, 0px);\n  /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */\n}\n\n.tab {\n  flex-shrink: 0;\n}\n.tab.dragging .tab-action {\n  background-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.tab.active-tab > .default-tab .tab-action {\n  visibility: visible;\n}\n.tab.inactive-tab > .default-tab .tab-action {\n  visibility: hidden;\n}\n.tab.inactive-tab > .default-tab:hover .tab-action {\n  visibility: visible;\n}\n.tab .default-tab {\n  position: relative;\n  height: 100%;\n  display: flex;\n  min-width: 80px;\n  align-items: center;\n  padding-left: 10px;\n  white-space: nowrap;\n  text-overflow: elipsis;\n}\n.tab .default-tab .tab-content {\n  flex-grow: 1;\n}\n.tab .default-tab .action-container {\n  text-align: right;\n  width: 28px;\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 a:active:hover {\n  -webkit-mask-size: 100% 100% !important;\n  mask-size: 100% 100% !important;\n}\n.tab .default-tab .action-container .tab-list .tab-action {\n  height: 16px;\n  width: 16px;\n  display: block;\n  -webkit-mask: var(--dv-tab-close-icon) 50% 50%/90% 90% no-repeat;\n  mask: var(--dv-tab-close-icon) 50% 50%/90% 90% no-repeat;\n  margin-right: \"0.5em\";\n}\n.tab .default-tab .action-container .tab-list .tab-action.disable-close {\n  display: none;\n}\n.watermark {\n  display: flex;\n  width: 100%;\n}\n.watermark.has-actions .watermark-title .actions-bar {\n  display: none;\n}\n.watermark .watermark-title {\n  height: 35px;\n  width: 100%;\n  display: flex;\n}\n.watermark .watermark-content {\n  flex-grow: 1;\n}";
+  var css_248z = ".dockview-svg {\n  display: inline-block;\n  fill: currentcolor;\n  line-height: 1;\n  stroke: currentcolor;\n  stroke-width: 0;\n}\n.dockview-theme-dark {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-group-view-background-color: #1e1e1e;\n  --dv-tabs-and-actions-container-background-color: #252526;\n  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-tab-divider-color: #1e1e1e;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: #969696;\n  --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n  --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n  --dv-separator-border: rgb(68, 68, 68);\n  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n}\n\n.dockview-theme-light {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-group-view-background-color: white;\n  --dv-tabs-and-actions-container-background-color: #f3f3f3;\n  --dv-activegroup-visiblepanel-tab-background-color: white;\n  --dv-activegroup-hiddenpanel-tab-background-color: #ececec;\n  --dv-inactivegroup-visiblepanel-tab-background-color: white;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #ececec;\n  --dv-tab-divider-color: white;\n  --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-activegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.7);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(51, 51, 51, 0.7);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.35);\n  --dv-separator-border: rgba(128, 128, 128, 0.35);\n  --dv-paneview-header-border-color: rgb(51, 51, 51);\n}\n\n.dockview-theme-vs {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-group-view-background-color: #1e1e1e;\n  --dv-tabs-and-actions-container-background-color: #252526;\n  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-tab-divider-color: #1e1e1e;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: #969696;\n  --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n  --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n  --dv-separator-border: rgb(68, 68, 68);\n  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n  --dv-tabs-and-actions-container-background-color: #2d2d30;\n  --dv-tabs-and-actions-container-height: 20px;\n  --dv-tabs-and-actions-container-font-size: 11px;\n  --dv-activegroup-visiblepanel-tab-background-color: #007acc;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #3f3f46;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: white;\n  --dv-inactivegroup-visiblepanel-tab-color: white;\n  --dv-inactivegroup-hiddenpanel-tab-color: white;\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container {\n  box-sizing: content-box;\n  border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.active-tab {\n  border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.inactive-tab {\n  border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container {\n  box-sizing: content-box;\n  border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.active-tab {\n  border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.inactive-tab {\n  border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n}\n\n.dockview-theme-abyss {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-group-view-background-color: #000c18;\n  --dv-tabs-and-actions-container-background-color: #1c1c2a;\n  --dv-activegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-activegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-tab-divider-color: #2b2b4a;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);\n  --dv-separator-border: #2b2b4a;\n  --dv-paneview-header-border-color: #2b2b4a;\n  --dv-paneview-active-outline-color: #596f99;\n}\n\n.dockview-theme-dracula {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-group-view-background-color: #282a36;\n  --dv-tabs-and-actions-container-background-color: #191a21;\n  --dv-activegroup-visiblepanel-tab-background-color: #282a36;\n  --dv-activegroup-hiddenpanel-tab-background-color: #21222c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #282a36;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #21222c;\n  --dv-tab-divider-color: #191a21;\n  --dv-activegroup-visiblepanel-tab-color: rgb(248, 248, 242);\n  --dv-activegroup-hiddenpanel-tab-color: rgb(98, 114, 164);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(98, 114, 164, 0.5);\n  --dv-separator-border: #bd93f9;\n  --dv-paneview-header-border-color: #bd93f9;\n  --dv-paneview-active-outline-color: #6272a4;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  background-color: #94527e;\n  z-index: 999;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n  position: absolute;\n  left: 0px;\n  bottom: 0px;\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  background-color: #5e3d5a;\n  z-index: 999;\n}\n.actions-bar {\n  text-align: right;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n.actions-bar .actions-container {\n  display: flex;\n  padding: 0px;\n  margin: 0px;\n  justify-content: flex-end;\n}\n.actions-bar .actions-container .close-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  cursor: pointer;\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.actions-bar .actions-container .close-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}\n.drop-target {\n  position: relative;\n}\n.drop-target > .drop-target-dropzone {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  height: 100%;\n  width: 100%;\n  z-index: 10000;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection {\n  position: relative;\n  box-sizing: border-box;\n  height: 100%;\n  width: 100%;\n  background-color: var(--dv-drag-over-background-color);\n  transition: top 70ms ease-out, left 70ms ease-out, width 70ms ease-out, height 70ms ease-out, opacity 0.15s ease-out;\n  will-change: transform;\n  pointer-events: none;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.left {\n  transform: translateX(-25%) scaleX(0.5);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.right {\n  transform: translateX(25%) scaleX(0.5);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.top {\n  transform: translateY(-25%) scaleY(0.5);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.bottom {\n  transform: translateY(25%) scaleY(0.5);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-top {\n  border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-bottom {\n  border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-left {\n  border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-right {\n  border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.custom-dragging {\n  height: 24px;\n  line-height: 24px;\n  font-size: 11px;\n  width: 100px;\n  background-color: dodgerblue;\n  color: ghostwhite;\n  border-radius: 11px;\n  position: absolute;\n  padding-left: 10px;\n}\n\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n  background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);\n  color: var(--dv-inactivegroup-visiblepanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n  background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-inactivegroup-hiddenpanel-tab-color);\n}\n\n/**\n * when a tab is dragged we lose the above stylings because they are conditional on parent elements\n * therefore we also set some stylings for the dragging event\n **/\n.tab.dragging {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.grid-view,\n.branch-node {\n  height: 100%;\n  width: 100%;\n}\n.groupview {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background-color: var(--dv-group-view-background-color);\n  overflow: hidden;\n}\n.groupview:focus {\n  outline: none;\n}\n.groupview.empty > .tabs-and-actions-container {\n  display: none;\n}\n.groupview > .content-container {\n  flex-grow: 1;\n  overflow: hidden;\n  outline: none;\n}\n.pane-container {\n  height: 100%;\n  width: 100%;\n}\n.pane-container.animated .view {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.pane-container .view {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  padding: 0px !important;\n}\n.pane-container .view:not(:first-child)::before {\n  background-color: transparent !important;\n}\n.pane-container .view:not(:first-child) .pane > .pane-header {\n  border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.pane-container .view .default-header {\n  background-color: var(--dv-group-view-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n  display: flex;\n  padding: 0px 8px;\n  cursor: pointer;\n}\n.pane-container .view .default-header .dockview-pane-header-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.pane-container .view .default-header > span {\n  padding-left: 8px;\n  flex-grow: 1;\n}\n.pane-container:first-of-type > .pane > .pane-header {\n  border-top: none !important;\n}\n.pane-container .pane {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  height: 100%;\n}\n.pane-container .pane .pane-header {\n  box-sizing: border-box;\n  user-select: none;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-header.pane-draggable {\n  cursor: pointer;\n}\n.pane-container .pane .pane-header:focus:before, .pane-container .pane .pane-header:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.pane-container .pane .pane-body {\n  overflow-y: auto;\n  overflow-x: hidden;\n  flex-grow: 1;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-body:focus:before, .pane-container .pane .pane-body:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.tabs-and-actions-container {\n  display: flex;\n  background-color: var(--dv-tabs-and-actions-container-background-color);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  height: var(--dv-tabs-and-actions-container-height);\n  font-size: var(--dv-tabs-and-actions-container-font-size);\n}\n.tabs-and-actions-container.hidden {\n  display: none;\n}\n.tabs-and-actions-container .void-container {\n  display: flex;\n  flex-grow: 1;\n}\n.tabs-and-actions-container .tabs-container {\n  display: flex;\n  overflow-x: overlay;\n  overflow-y: hidden;\n  scrollbar-width: thin;\n  /* Track */\n  /* Handle */\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar {\n  height: 3px;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-track {\n  background: transparent;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-thumb {\n  background: var(--dv-tabs-container-scrollbar-color);\n}\n.tabs-and-actions-container .tabs-container .tab {\n  -webkit-user-drag: element;\n  outline: none;\n  min-width: 75px;\n  cursor: pointer;\n  position: relative;\n  box-sizing: border-box;\n}\n.tabs-and-actions-container .tabs-container .tab:not(:first-child)::before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  pointer-events: none;\n  background-color: var(--dv-tab-divider-color);\n  width: 1px;\n  height: 100%;\n}\n.tab .dockview-react-tab {\n  display: flex;\n  padding: 0px 8px;\n  align-items: center;\n  height: 100%;\n}\n.tab .dockview-react-tab .dockview-react-tab-title {\n  padding: 0px 8px;\n  flex-grow: 1;\n}\n.tab .dockview-react-tab .dockview-react-tab-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.tab .dockview-react-tab .dockview-react-tab-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}\n.tab.inactive-tab:not(:hover) .dockview-react-tab-action {\n  visibility: hidden;\n}\n.dockview-react-part {\n  height: 100%;\n  width: 100%;\n}\n.split-view-container {\n  position: relative;\n  overflow: hidden;\n  height: 100%;\n  width: 100%;\n}\n.split-view-container.animation .view,\n.split-view-container.animation .sash {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.split-view-container.horizontal {\n  height: 100%;\n}\n.split-view-container.horizontal > .sash-container > .sash {\n  height: 100%;\n  width: 4px;\n}\n.split-view-container.horizontal > .sash-container > .sash.enabled {\n  cursor: ew-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.disabled {\n  cursor: default;\n}\n.split-view-container.horizontal > .sash-container > .sash.maximum {\n  cursor: w-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.minimum {\n  cursor: e-resize;\n}\n.split-view-container.horizontal > .view-container > .view:not(:first-child)::before {\n  height: 100%;\n  width: 1px;\n}\n.split-view-container.vertical {\n  width: 100%;\n}\n.split-view-container.vertical > .sash-container > .sash {\n  width: 100%;\n  height: 4px;\n}\n.split-view-container.vertical > .sash-container > .sash.enabled {\n  cursor: ns-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.disabled {\n  cursor: default;\n}\n.split-view-container.vertical > .sash-container > .sash.maximum {\n  cursor: n-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.minimum {\n  cursor: s-resize;\n}\n.split-view-container.vertical > .view-container > .view {\n  width: 100%;\n}\n.split-view-container.vertical > .view-container > .view:not(:first-child)::before {\n  height: 1px;\n  width: 100%;\n}\n.split-view-container .sash-container {\n  height: 100%;\n  width: 100%;\n  position: absolute;\n}\n.split-view-container .sash-container .sash {\n  position: absolute;\n  z-index: 99;\n  outline: none;\n}\n.split-view-container .sash-container .sash:active {\n  transition: background-color 0.1s ease-in-out;\n  background-color: var(--dv-active-sash-color, transparent);\n}\n.split-view-container .sash-container .sash:hover {\n  background-color: var(--dv-active-sash-color, transparent);\n  transition: background-color 0.1s ease-in-out;\n  transition-delay: 0.5s;\n}\n.split-view-container .view-container {\n  position: relative;\n  height: 100%;\n  width: 100%;\n}\n.split-view-container .view-container .view {\n  height: 100%;\n  box-sizing: border-box;\n  overflow: auto;\n  position: absolute;\n}\n.split-view-container.separator-border .view:not(:first-child)::before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  pointer-events: none;\n  background-color: var(--dv-separator-border);\n}\n.dragged {\n  transform: translate3d(0px, 0px, 0px);\n  /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */\n}\n\n.tab {\n  flex-shrink: 0;\n}\n.tab.dragging .tab-action {\n  background-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.tab.active-tab > .default-tab .tab-action {\n  visibility: visible;\n}\n.tab.inactive-tab > .default-tab .tab-action {\n  visibility: hidden;\n}\n.tab.inactive-tab > .default-tab:hover .tab-action {\n  visibility: visible;\n}\n.tab .default-tab {\n  position: relative;\n  height: 100%;\n  display: flex;\n  min-width: 80px;\n  align-items: center;\n  padding: 0px 8px;\n  white-space: nowrap;\n  text-overflow: elipsis;\n}\n.tab .default-tab .tab-content {\n  padding: 0px 8px;\n  flex-grow: 1;\n}\n.tab .default-tab .action-container {\n  text-align: right;\n  display: flex;\n}\n.tab .default-tab .action-container .tab-list {\n  display: flex;\n  padding: 0px;\n  margin: 0px;\n  justify-content: flex-end;\n}\n.tab .default-tab .action-container .tab-list .tab-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.tab .default-tab .action-container .tab-list .tab-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}\n.tab .default-tab .action-container .tab-list .tab-action.disable-close {\n  display: none;\n}\n.watermark {\n  display: flex;\n  width: 100%;\n}\n.watermark.has-actions .watermark-title .actions-bar {\n  display: none;\n}\n.watermark .watermark-title {\n  height: 35px;\n  width: 100%;\n  display: flex;\n}\n.watermark .watermark-content {\n  flex-grow: 1;\n}";
   styleInject(css_248z);
 
   class TransferObject {
@@ -2708,6 +2708,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       constructor(panelId, accessor, group) {
           super();
           this.panelId = panelId;
+          this.accessor = accessor;
           this.group = group;
           this._onChanged = new Emitter();
           this.onChanged = this._onChanged.event;
@@ -2758,7 +2759,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               validOverlays: 'none',
               canDisplayOverlay: (event) => {
                   const data = getPanelData();
-                  if (data) {
+                  if (data && this.accessor.id === data.viewId) {
                       return this.panelId !== data.panelId;
                   }
                   return this.group.model.canDisplayOverlay(event, exports.DockviewDropTargets.Tab);
@@ -2816,7 +2817,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               canDisplayOverlay: (event) => {
                   var _a;
                   const data = getPanelData();
-                  if (data) {
+                  if (data && this.accessor.id === data.viewId) {
                       // don't show the overlay if the tab being dragged is the last panel of this group
                       return ((_a = last(this.tabs)) === null || _a === void 0 ? void 0 : _a.value.panelId) !== data.panelId;
                   }
@@ -2973,12 +2974,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
   }
 
-  exports.GroupChangeKind2 = void 0;
-  (function (GroupChangeKind2) {
-      GroupChangeKind2["ADD_PANEL"] = "ADD_PANEL";
-      GroupChangeKind2["REMOVE_PANEL"] = "REMOVE_PANEL";
-      GroupChangeKind2["PANEL_ACTIVE"] = "PANEL_ACTIVE";
-  })(exports.GroupChangeKind2 || (exports.GroupChangeKind2 = {}));
   class Groupview extends CompositeDisposable {
       constructor(container, accessor, id, options, parent) {
           super();
@@ -2997,12 +2992,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this._panels = [];
           this._onMove = new Emitter();
           this.onMove = this._onMove.event;
-          this._onDidGroupChange = new Emitter();
-          this.onDidGroupChange = this._onDidGroupChange.event;
           this._onDidDrop = new Emitter();
           this.onDidDrop = this._onDidDrop.event;
+          this._onDidAddPanel = new Emitter();
+          this.onDidAddPanel = this._onDidAddPanel.event;
+          this._onDidRemovePanel = new Emitter();
+          this.onDidRemovePanel = this._onDidRemovePanel.event;
+          this._onDidActivePanelChange = new Emitter();
+          this.onDidActivePanelChange = this._onDidActivePanelChange.event;
           this.container.classList.add('groupview');
-          this.addDisposables(this._onMove, this._onDidGroupChange, this._onDidChange, this._onDidDrop);
           this.tabsContainer = new TabsContainer(this.accessor, this.parent, {
               tabHeight: options.tabHeight,
           });
@@ -3014,7 +3012,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                       return false;
                   }
                   const data = getPanelData();
-                  if (data) {
+                  if (data && data.viewId === this.accessor.id) {
                       const groupHasOnePanelAndIsActiveDragElement = this._panels.length === 1 && data.groupId === this.id;
                       return !groupHasOnePanelAndIsActiveDragElement;
                   }
@@ -3024,7 +3022,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           container.append(this.tabsContainer.element, this.contentContainer.element);
           this.header.hidden = !!options.hideHeader;
           this.locked = !!options.locked;
-          this.addDisposables(this._onMove, this._onDidGroupChange, this.tabsContainer.onDrop((event) => {
+          this.addDisposables(this._onMove, this._onDidChange, this._onDidDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange, this.tabsContainer.onDrop((event) => {
               this.handleDropEvent(event.event, exports.Position.Center, event.index);
           }), this.contentContainer.onDidFocus(() => {
               this.accessor.doSetGroupActive(this.parent, true);
@@ -3096,6 +3094,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           // correctly initialized
           this.setActive(this.isActive, true, true);
           this.updateContainer();
+          if (this.accessor.options.createGroupControlElement) {
+              this._control = this.accessor.options.createGroupControlElement(this.parent);
+              this.addDisposables(this._control);
+              this._control.init({
+                  containerApi: new DockviewApi(this.accessor),
+                  api: this.parent.api,
+              });
+              this.tabsContainer.setActionElement(this._control.element);
+          }
       }
       indexOf(panel) {
           return this.tabsContainer.indexOf(panel.id);
@@ -3226,14 +3233,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       isPanelActive(panel) {
           return this._activePanel === panel;
       }
-      updateActions() {
-          var _a, _b;
-          if (this.isActive && ((_b = (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.actions)) {
-              this.tabsContainer.setActionElement(this._activePanel.view.actions.element);
-          }
-          else {
-              this.tabsContainer.setActionElement(undefined);
-          }
+      updateActions(element) {
+          this.tabsContainer.setActionElement(element);
       }
       setActive(isGroupActive, skipFocus = false, force = false) {
           var _a, _b;
@@ -3289,10 +3290,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           if (this.mostRecentlyUsed.includes(panel)) {
               this.mostRecentlyUsed.splice(this.mostRecentlyUsed.indexOf(panel), 1);
           }
-          this._onDidGroupChange.fire({
-              kind: exports.GroupChangeKind2.REMOVE_PANEL,
-              panel,
-          });
+          this._onDidRemovePanel.fire({ panel });
       }
       doAddPanel(panel, index = this.panels.length, skipSetActive = false) {
           const existingPanel = this._panels.indexOf(panel);
@@ -3309,10 +3307,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
           this.updateMru(panel);
           this.panels.splice(index, 0, panel);
-          this._onDidGroupChange.fire({
-              kind: exports.GroupChangeKind2.ADD_PANEL,
-              panel,
-          });
+          this._onDidAddPanel.fire({ panel });
       }
       doSetActivePanel(panel) {
           this._activePanel = panel;
@@ -3320,10 +3315,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               this.tabsContainer.setActivePanel(panel);
               panel.layout(this._width, this._height);
               this.updateMru(panel);
-              this._onDidGroupChange.fire({
-                  kind: exports.GroupChangeKind2.PANEL_ACTIVE,
-                  panel,
-              });
+              this._onDidActivePanelChange.fire({ panel });
           }
       }
       updateMru(panel) {
@@ -3333,7 +3325,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.mostRecentlyUsed = [panel, ...this.mostRecentlyUsed];
       }
       updateContainer() {
-          this.updateActions();
           toggleClass(this.container, 'empty', this.isEmpty);
           this.panels.forEach((panel) => panel.updateParentGroup(this.parent, this.isActive));
           if (this.isEmpty && !this.watermark) {
@@ -3370,6 +3361,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   nativeEvent: event,
                   target,
                   group: this.accessor.getPanel(this.id),
+                  getData: getPanelData,
               });
           }
           return false;
@@ -3418,7 +3410,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
   }
 
-  const nextLayoutId = sequentialNumberGenerator();
+  const nextLayoutId$1 = sequentialNumberGenerator();
   function toTarget(direction) {
       switch (direction) {
           case 'left':
@@ -3438,7 +3430,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       constructor(_element, options) {
           super();
           this._element = _element;
-          this._id = nextLayoutId.next();
+          this._id = nextLayoutId$1.next();
           this._groups = new Map();
           this._onDidLayoutChange = new Emitter();
           this.onDidLayoutChange = this._onDidLayoutChange.event;
@@ -3898,6 +3890,38 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
   }
 
+  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 {
       constructor() {
           super();
@@ -3914,8 +3938,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           const actions = new ActionContainer();
           title.appendChild(emptySpace);
           title.appendChild(actions.element);
-          const closeAnchor = document.createElement('a');
+          const closeAnchor = document.createElement('div');
           closeAnchor.className = 'close-action';
+          closeAnchor.appendChild(createCloseButton());
           actions.add(closeAnchor);
           this.addDisposables(addDisposableListener(closeAnchor, 'click', (ev) => {
               var _a;
@@ -3988,6 +4013,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       return new Component(id, componentName);
   }
 
+  const DEFAULT_TAB_IDENTIFIER = '__default__tab__';
   class DefaultTab extends CompositeDisposable {
       constructor() {
           super();
@@ -4007,8 +4033,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this._list = document.createElement('ul');
           this._list.className = 'tab-list';
           //
-          this.action = document.createElement('a');
+          this.action = document.createElement('div');
           this.action.className = 'tab-action';
+          this.action.appendChild(createCloseButton());
           //
           this._element.appendChild(this._content);
           this._element.appendChild(this._actionContainer);
@@ -4024,7 +4051,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           return this._element;
       }
       get id() {
-          return '__DEFAULT_TAB__';
+          return DEFAULT_TAB_IDENTIFIER;
       }
       update(event) {
           this.params = Object.assign(Object.assign({}, this.params), event.params);
@@ -4341,16 +4368,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           var _a;
           this._content = renderers.content;
           this._tab = (_a = renderers.tab) !== null && _a !== void 0 ? _a : new DefaultTab();
-          this._actions =
-              renderers.actions ||
-                  (this.content.actions
-                      ? {
-                          element: this.content.actions,
-                          dispose: () => {
-                              //
-                          },
-                      }
-                      : undefined);
       }
       get content() {
           return this._content;
@@ -4358,9 +4375,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       get tab() {
           return this._tab;
       }
-      get actions() {
-          return this._actions;
-      }
       init(params) {
           this.content.init(Object.assign(Object.assign({}, params), { tab: this.tab }));
           this.tab.init(params);
@@ -4378,16 +4392,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.tab.update(event);
       }
       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: this.tab instanceof DefaultTab ? undefined : this.tab.toJSON(),
+              tab,
           };
       }
       dispose() {
-          var _a;
           this.content.dispose();
           this.tab.dispose();
-          (_a = this.actions) === null || _a === void 0 ? void 0 : _a.dispose();
       }
   }
 
@@ -4802,22 +4818,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   this.moveGroupOrPanel(view, groupId, itemId, target, index);
               }), view.model.onDidDrop((event) => {
                   this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api, group: view }));
-              }), view.model.onDidGroupChange((event) => {
-                  switch (event.kind) {
-                      case exports.GroupChangeKind2.ADD_PANEL:
-                          if (event.panel) {
-                              this._onDidAddPanel.fire(event.panel);
-                          }
-                          break;
-                      case exports.GroupChangeKind2.REMOVE_PANEL:
-                          if (event.panel) {
-                              this._onDidRemovePanel.fire(event.panel);
-                          }
-                          break;
-                      case exports.GroupChangeKind2.PANEL_ACTIVE:
-                          this._onDidActivePanelChange.fire(event.panel);
-                          break;
-                  }
+              }), view.model.onDidAddPanel((event) => {
+                  this._onDidAddPanel.fire(event.panel);
+              }), 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 });
           }
@@ -4832,7 +4838,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       createPanel(options, group) {
           const view = new DefaultGroupPanelView({
               content: this.createContentComponent(options.id, options.component),
-              tab: this.createTabComponent(options.id, options.tabComponent),
+              tab: this.createTabComponent(options.id, options.tabComponent || this.options.defaultTabComponent),
           });
           const panel = new DockviewGroupPanel(options.id, this, this._api, group);
           panel.init({
@@ -5585,8 +5591,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
   }
 
   class DraggablePaneviewPanel extends PaneviewPanel {
-      constructor(id, component, headerComponent, orientation, isExpanded, disableDnd) {
+      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) {
@@ -5598,10 +5605,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               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('paneview', id)], PaneTransfer.prototype);
+                  LocalSelectionTransfer.getInstance().setData([new PaneTransfer(accessorId, id)], PaneTransfer.prototype);
                   return {
                       dispose: () => {
                           LocalSelectionTransfer.getInstance().clearData(PaneTransfer.prototype);
@@ -5611,12 +5619,22 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           })(this.header);
           this.target = new Droptarget(this.element, {
               validOverlays: 'vertical',
-              canDisplayOverlay: () => {
+              canDisplayOverlay: (event) => {
                   const data = getPaneData();
-                  if (!data) {
-                      return true;
+                  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 data.paneId !== this.id;
+                  return false;
               },
           });
           this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop((event) => {
@@ -5625,8 +5643,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
       onDrop(event) {
           const data = getPaneData();
-          if (!data) {
-              this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => 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
@@ -5634,7 +5654,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           const panelId = data.paneId;
           const existingPanel = containerApi.getPanel(panelId);
           if (!existingPanel) {
-              this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => getPaneData() }));
+              // if the panel doesn't exist
+              this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: getPaneData }));
               return;
           }
           const allPanels = containerApi.panels;
@@ -5658,12 +5679,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
   class DefaultHeader extends CompositeDisposable {
       constructor() {
           super();
+          this._expandedIcon = createExpandMoreButton();
+          this._collapsedIcon = createChevronRightButton();
           this.disposable = new MutableDisposable();
           this.apiRef = { api: null };
           this._element = document.createElement('div');
           this.element.className = 'default-header';
           this._content = document.createElement('span');
-          this._expander = document.createElement('a');
+          this._expander = document.createElement('div');
+          this._expander.className = 'dockview-pane-header-icon';
           this.element.appendChild(this._expander);
           this.element.appendChild(this._content);
           this.addDisposables(addDisposableListener(this._element, 'click', () => {
@@ -5677,12 +5701,32 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       init(params) {
           this.apiRef.api = params.api;
           this._content.textContent = params.title;
-          this._expander.textContent = '▼';
-          toggleClass(this._expander, 'collapsed', !params.api.isExpanded);
-          this.disposable.value = params.api.onDidExpansionChange((e) => {
-              toggleClass(this._expander, 'collapsed', !e.isExpanded);
+          this.updateIcon();
+          this.disposable.value = params.api.onDidExpansionChange(() => {
+              this.updateIcon();
           });
       }
+      updateIcon() {
+          var _a;
+          const isExpanded = !!((_a = this.apiRef.api) === null || _a === void 0 ? void 0 : _a.isExpanded);
+          toggleClass(this._expander, 'collapsed', !isExpanded);
+          if (isExpanded) {
+              if (this._expander.contains(this._collapsedIcon)) {
+                  this._collapsedIcon.remove();
+              }
+              if (!this._expander.contains(this._expandedIcon)) {
+                  this._expander.appendChild(this._expandedIcon);
+              }
+          }
+          else {
+              if (this._expander.contains(this._expandedIcon)) {
+                  this._expandedIcon.remove();
+              }
+              if (!this._expander.contains(this._collapsedIcon)) {
+                  this._expander.appendChild(this._collapsedIcon);
+              }
+          }
+      }
       update(_params) {
           //
       }
@@ -5692,9 +5736,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
   }
 
+  const nextLayoutId = sequentialNumberGenerator();
   class PaneFramework extends DraggablePaneviewPanel {
       constructor(options) {
-          super(options.id, options.component, options.headerComponent, options.orientation, options.isExpanded, options.disableDnd);
+          super(options.accessor, options.id, options.component, options.headerComponent, options.orientation, options.isExpanded, options.disableDnd);
           this.options = options;
       }
       getBodyComponent() {
@@ -5708,6 +5753,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       constructor(element, options) {
           super();
           this.element = element;
+          this._id = nextLayoutId.next();
           this._disposable = new MutableDisposable();
           this._viewDisposables = new Map();
           this._onDidLayoutfromJSON = new Emitter();
@@ -5734,6 +5780,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           });
           this.addDisposables(this._disposable);
       }
+      get id() {
+          return this._id;
+      }
       get panels() {
           return this.paneview.getPanes();
       }
@@ -5798,6 +5847,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               orientation: exports.Orientation.VERTICAL,
               isExpanded: !!options.isExpanded,
               disableDnd: !!this.options.disableDnd,
+              accessor: this,
           });
           this.doAddPanel(view);
           const size = typeof options.size === 'number' ? options.size : exports.Sizing.Distribute;
@@ -5892,6 +5942,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                           orientation: exports.Orientation.VERTICAL,
                           isExpanded: !!view.expanded,
                           disableDnd: !!this.options.disableDnd,
+                          accessor: this,
                       });
                       this.doAddPanel(panel);
                       queue.push(() => {
@@ -6091,15 +6142,21 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.component = component;
           this.parameters = parameters;
           this.context = context;
+          this._initialProps = {};
           this.disposed = false;
           this.createPortal();
       }
       update(props) {
-          var _a;
           if (this.disposed) {
               throw new Error('invalid operation: resource is already disposed');
           }
-          (_a = this.componentInstance) === null || _a === void 0 ? void 0 : _a.update(props);
+          if (!this.componentInstance) {
+              // if the component is yet to be mounted store the props
+              this._initialProps = Object.assign(Object.assign({}, this._initialProps), props);
+          }
+          else {
+              this.componentInstance.update(props);
+          }
       }
       createPortal() {
           if (this.disposed) {
@@ -6119,6 +6176,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               componentProps: this.parameters,
               ref: (element) => {
                   this.componentInstance = element;
+                  if (Object.keys(this._initialProps).length > 0) {
+                      this.componentInstance.update(this._initialProps);
+                      this._initialProps = {}; // don't keep a reference to the users object once no longer required
+                  }
               },
           });
           const node = this.context
@@ -6175,30 +6236,19 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.onDidBlur = this._onDidBlur.event;
           this._element = document.createElement('div');
           this._element.className = 'dockview-react-part';
-          this._actionsElement = document.createElement('div');
-          this._actionsElement.className = 'dockview-react-part';
       }
       get element() {
           return this._element;
       }
-      get actions() {
-          return this._actionsElement;
-      }
       focus() {
           // TODO
       }
       init(parameters) {
-          const context = {
-              api: parameters.api,
-              containerApi: parameters.containerApi,
-              actionsPortalElement: this._actionsElement,
-              tabPortalElement: parameters.tab,
-          };
           this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
               params: parameters.params,
               api: parameters.api,
               containerApi: parameters.containerApi,
-          }, context);
+          });
       }
       toJSON() {
           return {
@@ -6216,11 +6266,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           // noop
       }
       dispose() {
-          var _a, _b;
+          var _a;
           this._onDidFocus.dispose();
           this._onDidBlur.dispose();
           (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
-          (_b = this.actionsPart) === null || _b === void 0 ? void 0 : _b.dispose();
       }
   }
 
@@ -6250,6 +6299,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           (_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,
           };
@@ -6271,17 +6323,25 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.layout = layout;
       }
       fromJSON(panelData, group) {
-          var _a, _b, _c;
+          var _a, _b, _c, _d;
           const panelId = panelData.id;
           const params = panelData.params;
           const title = panelData.title;
           const suppressClosable = panelData.suppressClosable;
           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, (_a = this.layout.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.content),
-              tab: ((_b = viewData.tab) === null || _b === void 0 ? void 0 : _b.id)
-                  ? createComponent(viewData.tab.id, viewData.tab.id, this.layout.options.tabComponents, this.layout.options.frameworkTabComponents, (_c = this.layout.options.frameworkComponentFactory) === null || _c === void 0 ? void 0 : _c.tab)
-                  : new DefaultTab(),
+              content: createComponent(viewData.content.id, viewData.content.id, this.layout.options.components, this.layout.options.frameworkComponents, (_d = this.layout.options.frameworkComponentFactory) === null || _d === void 0 ? void 0 : _d.content),
+              tab,
           });
           const panel = new DockviewGroupPanel(panelId, this.layout, new DockviewApi(this.layout), group);
           panel.init({
@@ -6349,6 +6409,80 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
   }
 
+  class ReactGroupControlsRendererPart {
+      constructor(component, reactPortalStore, _group) {
+          this.component = component;
+          this.reactPortalStore = reactPortalStore;
+          this._group = _group;
+          this.mutableDisposable = new MutableDisposable();
+          this._element = document.createElement('div');
+          this._element.className = 'dockview-react-part';
+      }
+      get element() {
+          return this._element;
+      }
+      get part() {
+          return this._part;
+      }
+      get group() {
+          return this._group;
+      }
+      focus() {
+          // TODO
+      }
+      init(parameters) {
+          this.mutableDisposable.value = new CompositeDisposable(this._group.model.onDidAddPanel(() => {
+              this.updatePanels();
+          }), this._group.model.onDidRemovePanel(() => {
+              this.updatePanels();
+          }), this._group.model.onDidActivePanelChange(() => {
+              this.updateActivePanel();
+          }), parameters.api.onDidActiveChange(() => {
+              this.updateGroupActive();
+          }));
+          this._part = new ReactPart(this.element, this.reactPortalStore, this.component, {
+              api: parameters.api,
+              containerApi: parameters.containerApi,
+              panels: this._group.model.panels,
+              activePanel: this._group.model.activePanel,
+              isGroupActive: this._group.api.isActive,
+          });
+      }
+      update(event) {
+          var _a;
+          (_a = this._part) === null || _a === void 0 ? void 0 : _a.update(event.params);
+      }
+      dispose() {
+          var _a;
+          this.mutableDisposable.dispose();
+          (_a = this._part) === null || _a === void 0 ? void 0 : _a.dispose();
+      }
+      updatePanels() {
+          this.update({ params: { panels: this._group.model.panels } });
+      }
+      updateActivePanel() {
+          this.update({
+              params: {
+                  activePanel: this._group.model.activePanel,
+              },
+          });
+      }
+      updateGroupActive() {
+          this.update({
+              params: {
+                  isGroupActive: this._group.api.isActive,
+              },
+          });
+      }
+  }
+
+  function createGroupControlElement(component, store) {
+      return component
+          ? (groupPanel) => {
+              return new ReactGroupControlsRendererPart(component, store, groupPanel);
+          }
+          : undefined;
+  }
   const DockviewReact = React__namespace.forwardRef((props, ref) => {
       const domRef = React__namespace.useRef(null);
       const dockviewRef = React__namespace.useRef();
@@ -6398,12 +6532,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           const dockview = new DockviewComponent(element, {
               frameworkComponentFactory: factory,
               frameworkComponents: props.components,
-              frameworkTabComponents: props.tabComponents,
+              frameworkTabComponents: Object.assign(Object.assign({}, (props.tabComponents || {})), { [DEFAULT_TAB_IDENTIFIER]: props.defaultTabComponent }),
               tabHeight: props.tabHeight,
               watermarkFrameworkComponent: props.watermarkComponent,
+              defaultTabComponent: DEFAULT_TAB_IDENTIFIER,
               styles: props.hideBorders
                   ? { separatorBorder: 'transparent' }
                   : undefined,
+              showDndOverlay: props.showDndOverlay,
+              createGroupControlElement: createGroupControlElement(props.groupControlComponent, { addPortal }),
           });
           (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(dockview.element);
           dockview.deserializer = new ReactPanelDeserialzier(dockview);
@@ -6480,10 +6617,79 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               disposable.dispose();
           };
       }, [props.onTabContextMenu]);
+      React__namespace.useEffect(() => {
+          if (!dockviewRef.current) {
+              return;
+          }
+          dockviewRef.current.updateOptions({
+              defaultTabComponent: DEFAULT_TAB_IDENTIFIER,
+              frameworkTabComponents: Object.assign(Object.assign({}, (props.tabComponents || {})), { [DEFAULT_TAB_IDENTIFIER]: props.defaultTabComponent }),
+          });
+      }, [props.defaultTabComponent]);
+      React__namespace.useEffect(() => {
+          if (!dockviewRef.current) {
+              return;
+          }
+          dockviewRef.current.updateOptions({
+              createGroupControlElement: createGroupControlElement(props.groupControlComponent, { addPortal }),
+          });
+      }, [props.groupControlComponent]);
       return (React__namespace.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
   });
   DockviewReact.displayName = 'DockviewComponent';
 
+  /******************************************************************************
+  Copyright (c) Microsoft Corporation.
+
+  Permission to use, copy, modify, and/or distribute this software for any
+  purpose with or without fee is hereby granted.
+
+  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+  PERFORMANCE OF THIS SOFTWARE.
+  ***************************************************************************** */
+
+  function __rest(s, e) {
+      var t = {};
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+          t[p] = s[p];
+      if (s != null && typeof Object.getOwnPropertySymbols === "function")
+          for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+              if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                  t[p[i]] = s[p[i]];
+          }
+      return t;
+  }
+
+  const CloseButton = () => (React__namespace.createElement("svg", { height: "11", width: "11", viewBox: "0 0 28 28", "aria-hidden": 'false', focusable: false, className: "dockview-svg" },
+      React__namespace.createElement("path", { d: "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 DockviewDefaultTab = (_a) => {
+      var { api, containerApi: _containerApi, params: _params } = _a, rest = __rest(_a, ["api", "containerApi", "params"]);
+      const onClose = React__namespace.useCallback((event) => {
+          event.stopPropagation();
+          api.close();
+      }, [api]);
+      const onClick = React__namespace.useCallback((event) => {
+          api.setActive();
+          if (rest.onClick) {
+              rest.onClick(event);
+          }
+      }, [api, rest.onClick]);
+      const iconClassname = React__namespace.useMemo(() => {
+          const cn = ['dockview-react-tab-action'];
+          return cn.join(',');
+      }, [api.suppressClosable]);
+      return (React__namespace.createElement("div", Object.assign({}, rest, { onClick: onClick, className: "dockview-react-tab" }),
+          React__namespace.createElement("span", { className: "dockview-react-tab-title" }, api.title),
+          React__namespace.createElement("div", { className: iconClassname, onClick: onClose },
+              React__namespace.createElement(CloseButton, null))));
+  };
+
   class ReactPanelView extends SplitviewPanel {
       constructor(id, component, reactComponent, reactPortalStore) {
           super(id, component);
@@ -6713,6 +6919,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                       createComponent,
                   },
               },
+              showDndOverlay: props.showDndOverlay,
           });
           const api = new PaneviewApi(paneview);
           const { clientWidth, clientHeight } = domRef.current;
@@ -6757,6 +6964,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               disposable.dispose();
           };
       }, [props.onDidDrop]);
+      React__namespace.useEffect(() => {
+          if (!paneviewRef.current) {
+              return;
+          }
+          paneviewRef.current.updateOptions({
+              showDndOverlay: props.showDndOverlay,
+          });
+      }, [props.showDndOverlay]);
       return (React__namespace.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
   });
   PaneviewReact.displayName = 'PaneviewComponent';
@@ -6765,6 +6980,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
   exports.ContentContainer = ContentContainer;
   exports.DockviewApi = DockviewApi;
   exports.DockviewComponent = DockviewComponent;
+  exports.DockviewDefaultTab = DockviewDefaultTab;
   exports.DockviewReact = DockviewReact;
   exports.Gridview = Gridview;
   exports.GridviewApi = GridviewApi;
@@ -6781,8 +6997,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
   exports.PaneviewComponent = PaneviewComponent;
   exports.PaneviewPanel = PaneviewPanel;
   exports.PaneviewReact = PaneviewReact;
-  exports.ReactPanelContentPart = ReactPanelContentPart;
-  exports.ReactPanelHeaderPart = ReactPanelHeaderPart;
   exports.ReactPart = ReactPart;
   exports.ReactPartContext = ReactPartContext;
   exports.Splitview = Splitview;