dockview 1.0.3 → 1.3.0

package/dist/dockview.cjs.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.0.3
+ * @version 1.3.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -59,9 +59,79 @@ function styleInject(css, ref) {
   }
 }
 
-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-tab-dirty-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=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z\"/></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-tab-dirty-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=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z\"/></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-tab-dirty-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=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z\"/></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  pointer-events: none;\n  box-sizing: border-box;\n  height: 100%;\n  width: 100%;\n  background-color: var(--dv-drag-over-background-color);\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.left, .drop-target > .drop-target-dropzone > .drop-target-selection.right {\n  width: 50%;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.right {\n  transform: translate(100%, 0%);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.bottom {\n  transform: translate(0%, 100%);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.top, .drop-target > .drop-target-dropzone > .drop-target-selection.bottom {\n  height: 50%;\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}\n.pane-container .view .default-header > span {\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.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:not(.dirty) {\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.tab .default-tab .action-container .tab-list .tab-action.dirty:not(:hover) {\n  display: block;\n  -webkit-mask: var(--dv-tab-dirty-icon) 50% 50%/60% 60% no-repeat;\n  mask: var(--dv-tab-dirty-icon) 50% 50%/60% 60% no-repeat;\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-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-duration: 0.15s;\n  transition-timing-function: 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(50%);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.right {\n  transform: translateX(25%) scaleX(50%);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.top {\n  transform: translateY(-25%) scaleY(50%);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.bottom {\n  transform: translateY(25%) scaleY(50%);\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}\n.pane-container .view .default-header > span {\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}";
 styleInject(css_248z);
 
+class TransferObject {
+    constructor() {
+        //
+    }
+}
+class PanelTransfer extends TransferObject {
+    constructor(viewId, groupId, panelId) {
+        super();
+        this.viewId = viewId;
+        this.groupId = groupId;
+        this.panelId = panelId;
+    }
+}
+class PaneTransfer extends TransferObject {
+    constructor(viewId, paneId) {
+        super();
+        this.viewId = viewId;
+        this.paneId = paneId;
+    }
+}
+/**
+ * A singleton to store transfer data during drag & drop operations that are only valid within the application.
+ */
+class LocalSelectionTransfer {
+    constructor() {
+        // protect against external instantiation
+    }
+    static getInstance() {
+        return LocalSelectionTransfer.INSTANCE;
+    }
+    hasData(proto) {
+        return proto && proto === this.proto;
+    }
+    clearData(proto) {
+        if (this.hasData(proto)) {
+            this.proto = undefined;
+            this.data = undefined;
+        }
+    }
+    getData(proto) {
+        if (this.hasData(proto)) {
+            return this.data;
+        }
+        return undefined;
+    }
+    setData(data, proto) {
+        if (proto) {
+            this.data = data;
+            this.proto = proto;
+        }
+    }
+}
+LocalSelectionTransfer.INSTANCE = new LocalSelectionTransfer();
+function getPanelData() {
+    const panelTransfer = LocalSelectionTransfer.getInstance();
+    const isPanelEvent = panelTransfer.hasData(PanelTransfer.prototype);
+    if (!isPanelEvent) {
+        return undefined;
+    }
+    return panelTransfer.getData(PanelTransfer.prototype)[0];
+}
+function getPaneData() {
+    const paneTransfer = LocalSelectionTransfer.getInstance();
+    const isPanelEvent = paneTransfer.hasData(PaneTransfer.prototype);
+    if (!isPanelEvent) {
+        return undefined;
+    }
+    return paneTransfer.getData(PaneTransfer.prototype)[0];
+}
+
 exports.Event = void 0;
 (function (Event) {
     Event.any = (...children) => {
@@ -92,7 +162,6 @@ class Emitter {
                 if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.replay) && this._last !== undefined) {
                     listener(this._last);
                 }
-                this._listeners.length === 0;
                 this._listeners.push(listener);
                 return {
                     dispose: () => {
@@ -108,9 +177,9 @@ class Emitter {
     }
     fire(e) {
         this._last = e;
-        this._listeners.forEach((listener) => {
+        for (const listener of this._listeners) {
             listener(e);
-        });
+        }
     }
     dispose() {
         this._listeners = [];
@@ -152,164 +221,6 @@ class TickDelayedEvent {
     }
 }
 
-exports.Disposable = void 0;
-(function (Disposable) {
-    Disposable.NONE = {
-        dispose: () => {
-            // noop
-        },
-    };
-})(exports.Disposable || (exports.Disposable = {}));
-class CompositeDisposable {
-    constructor(...args) {
-        this.disposables = args;
-    }
-    static from(...args) {
-        return new CompositeDisposable(...args);
-    }
-    addDisposables(...args) {
-        args === null || args === void 0 ? void 0 : args.forEach((arg) => this.disposables.push(arg));
-    }
-    dispose() {
-        this.disposables.forEach((arg) => arg.dispose());
-    }
-}
-class MutableDisposable {
-    constructor() {
-        this._disposable = exports.Disposable.NONE;
-    }
-    set value(disposable) {
-        if (this._disposable) {
-            this._disposable.dispose();
-        }
-        this._disposable = disposable;
-    }
-    dispose() {
-        if (this._disposable) {
-            this._disposable.dispose();
-        }
-    }
-}
-
-function tryParseJSON(text, reviver) {
-    try {
-        return JSON.parse(text, reviver);
-    }
-    catch (err) {
-        console.warn('failed to parse JSON');
-        return undefined;
-    }
-}
-
-class TransferObject {
-    constructor() {
-        //
-    }
-}
-class PanelTransfer extends TransferObject {
-    constructor(viewId, groupId, panelId) {
-        super();
-        this.viewId = viewId;
-        this.groupId = groupId;
-        this.panelId = panelId;
-    }
-}
-class PaneTransfer extends TransferObject {
-    constructor(viewId, paneId) {
-        super();
-        this.viewId = viewId;
-        this.paneId = paneId;
-    }
-}
-const DATA_KEY = 'splitview/transfer';
-const isPanelTransferEvent = (event) => {
-    if (!event.dataTransfer) {
-        return false;
-    }
-    return event.dataTransfer.types.includes(DATA_KEY);
-};
-exports.DragType = void 0;
-(function (DragType) {
-    DragType["DOCKVIEW_TAB"] = "dockview_tab";
-    DragType["EXTERNAL"] = "external_group_drag";
-})(exports.DragType || (exports.DragType = {}));
-/**
- * Determine whether this data belong to that of an event that was started by
- * dragging a tab component
- */
-const isTabDragEvent = (data) => {
-    return data.type === exports.DragType.DOCKVIEW_TAB;
-};
-/**
- * Determine whether this data belong to that of an event that was started by
- * a custom drag-enable component
- */
-const isCustomDragEvent = (data) => {
-    return data.type === exports.DragType.EXTERNAL;
-};
-const extractData = (event) => {
-    if (!event.dataTransfer) {
-        return null;
-    }
-    const data = tryParseJSON(event.dataTransfer.getData(DATA_KEY));
-    if (!data) {
-        console.warn(`[dragEvent] ${DATA_KEY} data is missing`);
-    }
-    if (typeof data.type !== 'string') {
-        console.warn(`[dragEvent] invalid type ${data.type}`);
-    }
-    return data;
-};
-/**
- * A singleton to store transfer data during drag & drop operations that are only valid within the application.
- */
-class LocalSelectionTransfer {
-    constructor() {
-        // protect against external instantiation
-    }
-    static getInstance() {
-        return LocalSelectionTransfer.INSTANCE;
-    }
-    hasData(proto) {
-        return proto && proto === this.proto;
-    }
-    clearData(proto) {
-        if (this.hasData(proto)) {
-            this.proto = undefined;
-            this.data = undefined;
-        }
-    }
-    getData(proto) {
-        if (this.hasData(proto)) {
-            return this.data;
-        }
-        return undefined;
-    }
-    setData(data, proto) {
-        if (proto) {
-            this.data = data;
-            this.proto = proto;
-        }
-    }
-}
-LocalSelectionTransfer.INSTANCE = new LocalSelectionTransfer();
-function getPanelData() {
-    const panelTransfer = LocalSelectionTransfer.getInstance();
-    const isPanelEvent = panelTransfer.hasData(PanelTransfer.prototype);
-    if (!isPanelEvent) {
-        return undefined;
-    }
-    return panelTransfer.getData(PanelTransfer.prototype)[0];
-}
-function getPaneData() {
-    const paneTransfer = LocalSelectionTransfer.getInstance();
-    const isPanelEvent = paneTransfer.hasData(PaneTransfer.prototype);
-    if (!isPanelEvent) {
-        return undefined;
-    }
-    return paneTransfer.getData(PaneTransfer.prototype)[0];
-}
-
 class SplitviewApi {
     constructor(component) {
         this.component = component;
@@ -329,6 +240,9 @@ class SplitviewApi {
     get length() {
         return this.component.length;
     }
+    get orientation() {
+        return this.component.orientation;
+    }
     get onDidLayoutChange() {
         return this.component.onDidLayoutChange;
     }
@@ -338,9 +252,6 @@ class SplitviewApi {
     get onDidRemoveView() {
         return this.component.onDidRemoveView;
     }
-    get orientation() {
-        return this.component.orientation;
-    }
     updateOptions(options) {
         this.component.updateOptions(options);
     }
@@ -385,18 +296,18 @@ class PaneviewApi {
     constructor(component) {
         this.component = component;
     }
-    get width() {
-        return this.component.width;
-    }
-    get height() {
-        return this.component.height;
-    }
     get minimumSize() {
         return this.component.minimumSize;
     }
     get maximumSize() {
         return this.component.maximumSize;
     }
+    get height() {
+        return this.component.height;
+    }
+    get width() {
+        return this.component.width;
+    }
     get onDidLayoutChange() {
         return this.component.onDidLayoutChange;
     }
@@ -436,7 +347,7 @@ class PaneviewApi {
         this.component.layout(width, height);
     }
     addPanel(options) {
-        return this.component.addPanel(options);
+        this.component.addPanel(options);
     }
     resizeToFit() {
         this.component.resizeToFit();
@@ -452,12 +363,6 @@ class GridviewApi {
     constructor(component) {
         this.component = component;
     }
-    get width() {
-        return this.component.width;
-    }
-    get height() {
-        return this.component.height;
-    }
     get minimumHeight() {
         return this.component.minimumHeight;
     }
@@ -470,12 +375,27 @@ class GridviewApi {
     get maximumWidth() {
         return this.component.maximumWidth;
     }
-    get onGridEvent() {
-        return this.component.onGridEvent;
+    get width() {
+        return this.component.width;
+    }
+    get height() {
+        return this.component.height;
     }
     get onDidLayoutChange() {
         return this.component.onDidLayoutChange;
     }
+    get onDidAddGroup() {
+        return this.component.onDidAddGroup;
+    }
+    get onDidRemoveGroup() {
+        return this.component.onDidRemoveGroup;
+    }
+    get onDidActiveGroupChange() {
+        return this.component.onDidActiveGroupChange;
+    }
+    get onDidLayoutFromJSON() {
+        return this.component.onDidLayoutFromJSON;
+    }
     get panels() {
         return this.component.groups;
     }
@@ -550,8 +470,26 @@ class DockviewApi {
     get totalPanels() {
         return this.component.totalPanels;
     }
-    get onGridEvent() {
-        return this.component.onGridEvent;
+    get onDidActiveGroupChange() {
+        return this.component.onDidActiveGroupChange;
+    }
+    get onDidAddGroup() {
+        return this.component.onDidAddGroup;
+    }
+    get onDidRemoveGroup() {
+        return this.component.onDidRemoveGroup;
+    }
+    get onDidActivePanelChange() {
+        return this.component.onDidActivePanelChange;
+    }
+    get onDidAddPanel() {
+        return this.component.onDidAddPanel;
+    }
+    get onDidRemovePanel() {
+        return this.component.onDidRemovePanel;
+    }
+    get onDidLayoutfromJSON() {
+        return this.component.onDidLayoutfromJSON;
     }
     get onDidLayoutChange() {
         return this.component.onDidLayoutChange;
@@ -580,18 +518,12 @@ class DockviewApi {
     getPanel(id) {
         return this.component.getGroupPanel(id);
     }
-    setActivePanel(panel) {
-        this.component.setActivePanel(panel);
-    }
     layout(width, height, force = false) {
         this.component.layout(width, height, force);
     }
     addPanel(options) {
         return this.component.addPanel(options);
     }
-    removePanel(panel) {
-        this.component.removePanel(panel);
-    }
     addEmptyGroup(options) {
         this.component.addEmptyGroup(options);
     }
@@ -621,6 +553,46 @@ class DockviewApi {
     }
 }
 
+var Disposable;
+(function (Disposable) {
+    Disposable.NONE = {
+        dispose: () => {
+            // noop
+        },
+    };
+})(Disposable || (Disposable = {}));
+class CompositeDisposable {
+    constructor(...args) {
+        this.disposables = args;
+    }
+    static from(...args) {
+        return new CompositeDisposable(...args);
+    }
+    addDisposables(...args) {
+        args.forEach((arg) => this.disposables.push(arg));
+    }
+    dispose() {
+        this.disposables.forEach((arg) => arg.dispose());
+    }
+}
+class MutableDisposable {
+    constructor() {
+        this._disposable = Disposable.NONE;
+    }
+    set value(disposable) {
+        if (this._disposable) {
+            this._disposable.dispose();
+        }
+        this._disposable = disposable;
+    }
+    dispose() {
+        if (this._disposable) {
+            this._disposable.dispose();
+            this._disposable = Disposable.NONE;
+        }
+    }
+}
+
 function watchElementResize(element, cb) {
     const observer = new ResizeObserver((entires) => {
         const firstEntry = entires[0];
@@ -1566,13 +1538,13 @@ class Splitview {
         this._onDidSashEnd.dispose();
         this._onDidAddView.dispose();
         this._onDidRemoveView.dispose();
-        this.element.remove();
         for (let i = 0; i < this.element.children.length; i++) {
             if (this.element.children.item(i) === this.element) {
                 this.element.removeChild(this.element);
                 break;
             }
         }
+        this.element.remove();
     }
 }
 
@@ -1595,7 +1567,7 @@ class Paneview extends CompositeDisposable {
         });
         // if we've added views from the descriptor we need to
         // add the panes to our Pane array and setup animation
-        this.getPanes().forEach((pane, index) => {
+        this.getPanes().forEach((pane) => {
             const disposable = new CompositeDisposable(pane.onDidChangeExpansionState(() => {
                 this.setupAnimation();
                 this._onDidChange.fire(undefined);
@@ -1611,7 +1583,7 @@ class Paneview extends CompositeDisposable {
             this.paneItems.push(paneItem);
             pane.orthogonalSize = this.splitview.orthogonalSize;
         });
-        this.addDisposables(this.splitview.onDidSashEnd(() => {
+        this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => {
             this._onDidChange.fire(undefined);
         }), this.splitview.onDidAddView(() => {
             this._onDidChange.fire();
@@ -1663,17 +1635,20 @@ class Paneview extends CompositeDisposable {
     getPanes() {
         return this.splitview.getViews();
     }
-    removePane(index) {
+    removePane(index, options = { skipDispose: false }) {
         const paneItem = this.paneItems.splice(index, 1)[0];
         this.splitview.removeView(index);
-        paneItem.disposable.dispose();
+        if (!options.skipDispose) {
+            paneItem.disposable.dispose();
+            paneItem.pane.dispose();
+        }
         return paneItem;
     }
     moveView(from, to) {
         if (from === to) {
             return;
         }
-        const view = this.removePane(from);
+        const view = this.removePane(from, { skipDispose: true });
         this.skipAnimation = true;
         try {
             this.addPane(view.pane, view.pane.size, to, false);
@@ -1701,15 +1676,16 @@ class Paneview extends CompositeDisposable {
     }
     dispose() {
         super.dispose();
-        this.splitview.dispose();
         if (this.animationTimer) {
             clearTimeout(this.animationTimer);
             this.animationTimer = undefined;
         }
         this.paneItems.forEach((paneItem) => {
             paneItem.disposable.dispose();
+            paneItem.pane.dispose();
         });
         this.paneItems = [];
+        this.splitview.dispose();
         this.element.remove();
     }
 }
@@ -1772,8 +1748,8 @@ class Droptarget extends CompositeDisposable {
         this.options = options;
         this._onDrop = new Emitter();
         this.onDrop = this._onDrop.event;
-        this.addDisposables(new DragAndDropObserver(this.element, {
-            onDragEnter: (e) => undefined,
+        this.addDisposables(this._onDrop, new DragAndDropObserver(this.element, {
+            onDragEnter: () => undefined,
             onDragOver: (e) => {
                 if (isBooleanValue(this.options.canDisplayOverlay)) {
                     if (!this.options.canDisplayOverlay) {
@@ -1808,56 +1784,16 @@ class Droptarget extends CompositeDisposable {
                 const y = e.offsetY;
                 const xp = (100 * x) / width;
                 const yp = (100 * y) / height;
-                let isRight = false;
-                let isLeft = false;
-                let isTop = false;
-                let isBottom = false;
-                switch (this.options.validOverlays) {
-                    case 'all':
-                        isRight = xp > 80;
-                        isLeft = xp < 20;
-                        isTop = !isRight && !isLeft && yp < 20;
-                        isBottom = !isRight && !isLeft && yp > 80;
-                        break;
-                    case 'vertical':
-                        isTop = yp < 50;
-                        isBottom = yp >= 50;
-                        break;
-                    case 'horizontal':
-                        isLeft = xp < 50;
-                        isRight = xp >= 50;
-                        break;
-                }
+                const quadrant = this.calculateQuadrant(this.options.validOverlays, xp, yp);
                 const isSmallX = width < 100;
                 const isSmallY = height < 100;
-                toggleClass(this.overlay, 'right', !isSmallX && isRight);
-                toggleClass(this.overlay, 'left', !isSmallX && isLeft);
-                toggleClass(this.overlay, 'top', !isSmallY && isTop);
-                toggleClass(this.overlay, 'bottom', !isSmallY && isBottom);
-                toggleClass(this.overlay, 'small-right', isSmallX && isRight);
-                toggleClass(this.overlay, 'small-left', isSmallX && isLeft);
-                toggleClass(this.overlay, 'small-top', isSmallY && isTop);
-                toggleClass(this.overlay, 'small-bottom', isSmallY && isBottom);
-                if (isRight) {
-                    this._state = exports.Position.Right;
-                }
-                else if (isLeft) {
-                    this._state = exports.Position.Left;
-                }
-                else if (isTop) {
-                    this._state = exports.Position.Top;
-                }
-                else if (isBottom) {
-                    this._state = exports.Position.Bottom;
-                }
-                else {
-                    this._state = exports.Position.Center;
-                }
+                this.toggleClasses(quadrant, isSmallX, isSmallY);
+                this.setState(quadrant);
             },
-            onDragLeave: (e) => {
+            onDragLeave: () => {
                 this.removeDropTarget();
             },
-            onDragEnd: (e) => {
+            onDragEnd: () => {
                 this.removeDropTarget();
             },
             onDrop: (e) => {
@@ -1881,9 +1817,73 @@ class Droptarget extends CompositeDisposable {
         this.options.canDisplayOverlay = value;
     }
     dispose() {
-        this._onDrop.dispose();
         this.removeDropTarget();
     }
+    toggleClasses(quadrant, isSmallX, isSmallY) {
+        if (!this.overlay) {
+            return;
+        }
+        const isLeft = quadrant === 'left';
+        const isRight = quadrant === 'right';
+        const isTop = quadrant === 'top';
+        const isBottom = quadrant === 'bottom';
+        toggleClass(this.overlay, 'right', !isSmallX && isRight);
+        toggleClass(this.overlay, 'left', !isSmallX && isLeft);
+        toggleClass(this.overlay, 'top', !isSmallY && isTop);
+        toggleClass(this.overlay, 'bottom', !isSmallY && isBottom);
+        toggleClass(this.overlay, 'small-right', isSmallX && isRight);
+        toggleClass(this.overlay, 'small-left', isSmallX && isLeft);
+        toggleClass(this.overlay, 'small-top', isSmallY && isTop);
+        toggleClass(this.overlay, 'small-bottom', isSmallY && isBottom);
+    }
+    setState(quadrant) {
+        switch (quadrant) {
+            case 'top':
+                this._state = exports.Position.Top;
+                break;
+            case 'left':
+                this._state = exports.Position.Left;
+                break;
+            case 'bottom':
+                this._state = exports.Position.Bottom;
+                break;
+            case 'right':
+                this._state = exports.Position.Right;
+                break;
+            default:
+                this._state = exports.Position.Center;
+                break;
+        }
+    }
+    calculateQuadrant(overlayType, xp, yp) {
+        switch (overlayType) {
+            case 'all':
+                if (xp < 20) {
+                    return 'left';
+                }
+                if (xp > 80) {
+                    return 'right';
+                }
+                if (yp < 20) {
+                    return 'top';
+                }
+                if (yp > 80) {
+                    return 'bottom';
+                }
+                break;
+            case 'vertical':
+                if (yp < 50) {
+                    return 'top';
+                }
+                return 'bottom';
+            case 'horizontal':
+                if (xp < 50) {
+                    return 'left';
+                }
+                return 'right';
+        }
+        return null;
+    }
     removeDropTarget() {
         if (this.target) {
             this._state = undefined;
@@ -1986,6 +1986,7 @@ class LeafNode {
         this.view.layout(this.width, this.height);
     }
     dispose() {
+        this._onDidChange.dispose();
         this._disposable.dispose();
     }
 }
@@ -2003,7 +2004,7 @@ class BranchNode extends CompositeDisposable {
         this.children = [];
         this._onDidChange = new Emitter();
         this.onDidChange = this._onDidChange.event;
-        this._childrenDisposable = exports.Disposable.NONE;
+        this._childrenDisposable = Disposable.NONE;
         this._orthogonalSize = orthogonalSize;
         this._size = size;
         this.element = document.createElement('div');
@@ -2028,7 +2029,7 @@ class BranchNode extends CompositeDisposable {
                             : true,
                     };
                 }),
-                size: this.orthogonalSize,
+                size: this.size,
             };
             this.children = childDescriptors.map((c) => c.node);
             this.splitview = new Splitview(this.element, {
@@ -2037,7 +2038,7 @@ class BranchNode extends CompositeDisposable {
                 proportionalLayout,
             });
         }
-        this.addDisposables(this.splitview.onDidSashEnd(() => {
+        this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => {
             this._onDidChange.fire(undefined);
         }));
         this.setupChildrenEvents();
@@ -2189,7 +2190,7 @@ class BranchNode extends CompositeDisposable {
     }
     setupChildrenEvents() {
         this._childrenDisposable.dispose();
-        this._childrenDisposable = exports.Event.any(...this.children.map((c) => c.onDidChange))((e) => {
+        this._childrenDisposable = exports.Event.any(...this.children.map((c) => c.onDidChange))(() => {
             /**
              * indicate a change has occured to allows any re-rendering but don't bubble
              * event because that was specific to this branch
@@ -2209,6 +2210,15 @@ class BranchNode extends CompositeDisposable {
  * Accreditation: This file is largly based upon the MIT licenced VSCode sourcecode found at:
  * https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/grid
  *--------------------------------------------------------------------------------------------*/
+function findLeaf(candiateNode, last) {
+    if (candiateNode instanceof LeafNode) {
+        return candiateNode;
+    }
+    if (candiateNode instanceof BranchNode) {
+        return findLeaf(candiateNode.children[last ? candiateNode.children.length - 1 : 0], last);
+    }
+    throw new Error('invalid node');
+}
 function flipNode(node, size, orthogonalSize) {
     if (node instanceof BranchNode) {
         const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize);
@@ -2340,6 +2350,7 @@ class Gridview {
         this.disposable.dispose();
         this._onDidChange.dispose();
         this.root.dispose();
+        this.element.remove();
     }
     clear() {
         const orientation = this.root.orientation;
@@ -2347,13 +2358,13 @@ class Gridview {
     }
     deserialize(json, deserializer) {
         const orientation = json.orientation;
-        const height = json.height;
+        const height = orientation === exports.Orientation.VERTICAL ? json.height : json.width;
         this._deserialize(json.root, orientation, deserializer, height);
     }
     _deserialize(root, orientation, deserializer, orthogonalSize) {
-        this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize);
+        this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize, true);
     }
-    _deserializeNode(node, orientation, deserializer, orthogonalSize) {
+    _deserializeNode(node, orientation, deserializer, orthogonalSize, isRoot = false) {
         let result;
         if (node.type === 'branch') {
             const serializedChildren = node.data;
@@ -2363,7 +2374,9 @@ class Gridview {
                     visible: serializedChild.visible,
                 };
             });
-            result = new BranchNode(orientation, this.proportionalLayout, this.styles, node.size, orthogonalSize, children);
+            // HORIZONTAL => height=orthogonalsize width=size
+            // VERTICAL => height=size width=orthogonalsize
+            result = new BranchNode(orientation, this.proportionalLayout, this.styles, isRoot ? orthogonalSize : node.size, isRoot ? node.size : orthogonalSize, children);
         }
         else {
             result = new LeafNode(deserializer.fromJSON(node), orientation, orthogonalSize, node.size);
@@ -2424,15 +2437,6 @@ class Gridview {
         if (!(node instanceof LeafNode)) {
             throw new Error('invalid location');
         }
-        const findLeaf = (candiateNode, last) => {
-            if (candiateNode instanceof LeafNode) {
-                return candiateNode;
-            }
-            if (candiateNode instanceof BranchNode) {
-                return findLeaf(candiateNode.children[last ? candiateNode.children.length - 1 : 0], last);
-            }
-            throw new Error('invalid node');
-        };
         for (let i = path.length - 1; i > -1; i--) {
             const n = path[i];
             const l = location[i] || 0;
@@ -2534,9 +2538,9 @@ class Gridview {
         if (parent.children.length > 1) {
             return node.view;
         }
+        const sibling = parent.children[0];
         if (pathToParent.length === 0) {
             // parent is root
-            const sibling = parent.children[0];
             if (sibling instanceof LeafNode) {
                 return node.view;
             }
@@ -2547,10 +2551,9 @@ class Gridview {
         }
         const [grandParent, ..._] = [...pathToParent].reverse();
         const [parentIndex, ...__] = [...rest].reverse();
-        const sibling = parent.children[0];
         const isSiblingVisible = parent.isChildVisible(0);
         parent.removeChild(0, sizing);
-        const sizes = grandParent.children.map((size, i) => grandParent.getChildSize(i));
+        const sizes = grandParent.children.map((_size, i) => grandParent.getChildSize(i));
         grandParent.removeChild(parentIndex, sizing);
         if (sibling instanceof BranchNode) {
             sizes.splice(parentIndex, 1, ...sibling.children.map((c) => c.size));
@@ -2594,31 +2597,6 @@ class Gridview {
     }
 }
 
-/*! *****************************************************************************
-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 __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
 class ContentContainer extends CompositeDisposable {
     constructor() {
         super();
@@ -2630,6 +2608,7 @@ class ContentContainer extends CompositeDisposable {
         this._element = document.createElement('div');
         this._element.className = 'content-container';
         this._element.tabIndex = -1;
+        this.addDisposables(this._onDidFocus, this._onDidBlur);
         // for hosted containers
         // 1) register a drop target on the host
         // 2) register window dragStart events to disable pointer events
@@ -2673,7 +2652,7 @@ class ContentContainer extends CompositeDisposable {
         }
         this.disposable.value = disposable;
     }
-    layout(width, height) {
+    layout(_width, _height) {
         // noop
     }
     closePanel() {
@@ -2696,6 +2675,41 @@ var DockviewDropTargets;
     DockviewDropTargets[DockviewDropTargets["TabContainer"] = 2] = "TabContainer";
 })(DockviewDropTargets || (DockviewDropTargets = {}));
 
+class DragHandler extends CompositeDisposable {
+    constructor(el) {
+        super();
+        this.el = el;
+        this.disposable = new MutableDisposable();
+        this._onDragStart = new Emitter();
+        this.onDragStart = this._onDragStart.event;
+        this.iframes = [];
+        this.configure();
+    }
+    configure() {
+        this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
+            this.iframes = [
+                ...getElementsByTagName('iframe'),
+                ...getElementsByTagName('webview'),
+            ];
+            for (const iframe of this.iframes) {
+                iframe.style.pointerEvents = 'none';
+            }
+            this.el.classList.add('dragged');
+            setTimeout(() => this.el.classList.remove('dragged'), 0);
+            this.disposable.value = this.getData();
+            if (event.dataTransfer) {
+                event.dataTransfer.effectAllowed = 'move';
+            }
+        }), addDisposableListener(this.el, 'dragend', () => {
+            for (const iframe of this.iframes) {
+                iframe.style.pointerEvents = 'auto';
+            }
+            this.iframes = [];
+            this.disposable.dispose();
+        }));
+    }
+}
+
 exports.MouseEventKind = void 0;
 (function (MouseEventKind) {
     MouseEventKind["CLICK"] = "CLICK";
@@ -2705,42 +2719,34 @@ class Tab$1 extends CompositeDisposable {
     constructor(panelId, accessor, group) {
         super();
         this.panelId = panelId;
-        this.accessor = accessor;
         this.group = group;
         this._onChanged = new Emitter();
         this.onChanged = this._onChanged.event;
         this._onDropped = new Emitter();
         this.onDrop = this._onDropped.event;
-        this.panelTransfer = LocalSelectionTransfer.getInstance();
-        this.iframes = [];
         this.addDisposables(this._onChanged, this._onDropped);
         this._element = document.createElement('div');
         this._element.className = 'tab';
         this._element.tabIndex = 0;
         this._element.draggable = true;
-        this.addDisposables(addDisposableListener(this._element, 'dragstart', (event) => {
-            this.iframes = [
-                ...getElementsByTagName('iframe'),
-                ...getElementsByTagName('webview'),
-            ];
-            for (const iframe of this.iframes) {
-                iframe.style.pointerEvents = 'none';
+        this.addDisposables(new (class Handler extends DragHandler {
+            constructor() {
+                super(...arguments);
+                this.panelTransfer = LocalSelectionTransfer.getInstance();
             }
-            this.element.classList.add('dragged');
-            setTimeout(() => this.element.classList.remove('dragged'), 0);
-            this.panelTransfer.setData([
-                new PanelTransfer(this.accessor.id, this.group.id, this.panelId),
-            ], PanelTransfer.prototype);
-            if (event.dataTransfer) {
-                event.dataTransfer.effectAllowed = 'move';
+            getData() {
+                this.panelTransfer.setData([new PanelTransfer(accessor.id, group.id, panelId)], PanelTransfer.prototype);
+                return {
+                    dispose: () => {
+                        this.panelTransfer.clearData(PanelTransfer.prototype);
+                    },
+                };
             }
-        }), addDisposableListener(this._element, 'dragend', (ev) => {
-            for (const iframe of this.iframes) {
-                iframe.style.pointerEvents = 'auto';
+            dispose() {
+                //
             }
-            this.iframes = [];
-            this.panelTransfer.clearData(PanelTransfer.prototype);
-        }), addDisposableListener(this._element, 'mousedown', (event) => {
+        })(this._element));
+        this.addDisposables(addDisposableListener(this._element, 'mousedown', (event) => {
             if (event.defaultPrevented) {
                 return;
             }
@@ -2942,12 +2948,10 @@ class TabsContainer extends CompositeDisposable {
             if (!isLeftClick || event.event.defaultPrevented) {
                 return;
             }
-            switch (event.kind) {
-                case exports.MouseEventKind.CLICK:
-                    this.group.model.openPanel(panel, {
-                        skipFocus: alreadyFocused,
-                    });
-                    break;
+            if (event.kind === exports.MouseEventKind.CLICK) {
+                this.group.model.openPanel(panel, {
+                    skipFocus: alreadyFocused,
+                });
             }
         }), tabToAdd.onDrop((event) => {
             this._onDrop.fire({
@@ -2976,7 +2980,6 @@ exports.GroupChangeKind2 = void 0;
     GroupChangeKind2["ADD_PANEL"] = "ADD_PANEL";
     GroupChangeKind2["REMOVE_PANEL"] = "REMOVE_PANEL";
     GroupChangeKind2["PANEL_ACTIVE"] = "PANEL_ACTIVE";
-    GroupChangeKind2["GROUP_ACTIVE"] = "GROUP_ACTIVE";
 })(exports.GroupChangeKind2 || (exports.GroupChangeKind2 = {}));
 class Groupview extends CompositeDisposable {
     constructor(container, accessor, id, options, parent) {
@@ -2997,15 +3000,10 @@ class Groupview extends CompositeDisposable {
         this.onMove = this._onMove.event;
         this._onDidGroupChange = new Emitter();
         this.onDidGroupChange = this._onDidGroupChange.event;
-        this.closePanel = (panel) => __awaiter(this, void 0, void 0, function* () {
-            if (panel.close && !(yield panel.close())) {
-                return false;
-            }
-            this.doClose(panel);
-            return true;
-        });
+        this._onDidDrop = new Emitter();
+        this.onDidDrop = this._onDidDrop.event;
         this.container.classList.add('groupview');
-        this.addDisposables(this._onMove, this._onDidGroupChange);
+        this.addDisposables(this._onMove, this._onDidGroupChange, this._onDidChange, this._onDidDrop);
         this.tabsContainer = new TabsContainer(this.accessor, this.parent, {
             tabHeight: options.tabHeight,
         });
@@ -3069,6 +3067,9 @@ class Groupview extends CompositeDisposable {
     get maximumWidth() {
         return Number.MAX_SAFE_INTEGER;
     }
+    get hasWatermark() {
+        return !!(this.watermark && this.container.contains(this.watermark.element));
+    }
     initialize() {
         var _a, _b;
         if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.panels) {
@@ -3147,10 +3148,10 @@ class Groupview extends CompositeDisposable {
     containsPanel(panel) {
         return this.panels.includes(panel);
     }
-    init(params) {
+    init(_params) {
         //noop
     }
-    update(params) {
+    update(_params) {
         //noop
     }
     focus() {
@@ -3162,6 +3163,8 @@ class Groupview extends CompositeDisposable {
             options.index > this.panels.length) {
             options.index = this.panels.length;
         }
+        // ensure the group is updated before we fire any events
+        panel.updateParentGroup(this.parent, true);
         if (this._activePanel === panel) {
             this.accessor.doSetGroupActive(this.parent);
             return;
@@ -3182,43 +3185,19 @@ class Groupview extends CompositeDisposable {
         return this._removePanel(panelToRemove);
     }
     closeAllPanels() {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            const index = this._activePanel
-                ? this.panels.indexOf(this._activePanel)
-                : -1;
-            if (this._activePanel && index > -1) {
-                if (this.panels.indexOf(this._activePanel) < 0) {
-                    console.warn('active panel not tracked');
-                }
-                const canClose = !((_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.close) || (yield this._activePanel.close());
-                if (!canClose) {
-                    return false;
-                }
-            }
-            for (let i = 0; i < this.panels.length; i++) {
-                if (i === index) {
-                    continue;
-                }
-                const panel = this.panels[i];
-                this.openPanel(panel);
-                if (panel.close) {
-                    const canClose = yield panel.close();
-                    if (!canClose) {
-                        return false;
-                    }
-                }
-            }
-            if (this.panels.length > 0) {
-                // take a copy since we will be edting the array as we iterate through
-                const arrPanelCpy = [...this.panels];
-                yield Promise.all(arrPanelCpy.map((p) => this.doClose(p)));
+        if (this.panels.length > 0) {
+            // take a copy since we will be edting the array as we iterate through
+            const arrPanelCpy = [...this.panels];
+            for (const panel of arrPanelCpy) {
+                this.doClose(panel);
             }
-            else {
-                this.accessor.removeGroup(this.parent);
-            }
-            return true;
-        });
+        }
+        else {
+            this.accessor.removeGroup(this.parent);
+        }
+    }
+    closePanel(panel) {
+        this.doClose(panel);
     }
     doClose(panel) {
         this.accessor.removePanel(panel);
@@ -3361,8 +3340,11 @@ class Groupview extends CompositeDisposable {
             this.tabsContainer.show();
         }
     }
-    canDisplayOverlay(dragOverEvent, target) {
+    canDisplayOverlay(event, target) {
         // custom overlay handler
+        if (this.accessor.options.showDndOverlay) {
+            return this.accessor.options.showDndOverlay(event, target);
+        }
         return false;
     }
     handleDropEvent(event, position, index) {
@@ -3387,31 +3369,23 @@ class Groupview extends CompositeDisposable {
                 index,
             });
         }
+        else {
+            this._onDidDrop.fire({ nativeEvent: event, position, index });
+        }
     }
     dispose() {
+        var _a;
+        super.dispose();
+        (_a = this.watermark) === null || _a === void 0 ? void 0 : _a.dispose();
         for (const panel of this.panels) {
             panel.dispose();
         }
-        super.dispose();
         this.dropTarget.dispose();
         this.tabsContainer.dispose();
         this.contentContainer.dispose();
     }
 }
 
-exports.GroupChangeKind = void 0;
-(function (GroupChangeKind) {
-    GroupChangeKind["ADD_PANEL"] = "ADD_PANEL";
-    GroupChangeKind["REMOVE_PANEL"] = "REMOVE_PANEL";
-    GroupChangeKind["PANEL_ACTIVE"] = "PANEL_ACTIVE";
-    //
-    GroupChangeKind["GROUP_ACTIVE"] = "GROUP_ACTIVE";
-    GroupChangeKind["ADD_GROUP"] = "ADD_GROUP";
-    GroupChangeKind["REMOVE_GROUP"] = "REMOVE_GROUP";
-    //
-    GroupChangeKind["LAYOUT_FROM_JSON"] = "LAYOUT_FROM_JSON";
-    GroupChangeKind["LAYOUT"] = "LAYOUT";
-})(exports.GroupChangeKind || (exports.GroupChangeKind = {}));
 const nextLayoutId = sequentialNumberGenerator();
 function toTarget(direction) {
     switch (direction) {
@@ -3434,36 +3408,26 @@ class BaseGrid extends CompositeDisposable {
         this._element = _element;
         this._id = nextLayoutId.next();
         this._groups = new Map();
-        //
-        this._onGridEvent = new Emitter();
-        this.onGridEvent = this._onGridEvent.event;
         this._onDidLayoutChange = new Emitter();
         this.onDidLayoutChange = this._onDidLayoutChange.event;
+        this._onDidRemoveGroup = new Emitter();
+        this.onDidRemoveGroup = this._onDidRemoveGroup.event;
+        this._onDidAddGroup = new Emitter();
+        this.onDidAddGroup = this._onDidAddGroup.event;
+        this._onDidActiveGroupChange = new Emitter();
+        this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
+        this._bufferOnDidLayoutChange = new TickDelayedEvent();
         this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation);
         this.element.appendChild(this.gridview.element);
-        // TODO for some reason this is required before anything will layout correctly
-        this.layout(0, 0, true);
+        this.layout(0, 0, true); // set some elements height/widths
         this.addDisposables(this.gridview.onDidChange(() => {
-            this._onGridEvent.fire({ kind: exports.GroupChangeKind.LAYOUT });
+            this._onDidLayoutChange.fire();
         }));
-        this.addDisposables((() => {
-            const tickDelayedEvent = new TickDelayedEvent();
-            return new CompositeDisposable(this.onGridEvent((event) => {
-                if ([
-                    exports.GroupChangeKind.ADD_GROUP,
-                    exports.GroupChangeKind.REMOVE_GROUP,
-                    exports.GroupChangeKind.ADD_PANEL,
-                    exports.GroupChangeKind.REMOVE_PANEL,
-                    exports.GroupChangeKind.GROUP_ACTIVE,
-                    exports.GroupChangeKind.PANEL_ACTIVE,
-                    exports.GroupChangeKind.LAYOUT,
-                ].includes(event.kind)) {
-                    tickDelayedEvent.fire();
-                }
-            }), tickDelayedEvent.onEvent(() => {
-                this._onDidLayoutChange.fire();
-            }), tickDelayedEvent);
-        })());
+        this.addDisposables(exports.Event.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
+            this._bufferOnDidLayoutChange.fire();
+        }), this._bufferOnDidLayoutChange.onEvent(() => {
+            this._onDidLayoutChange.fire();
+        }), this._bufferOnDidLayoutChange);
     }
     get id() {
         return this._id;
@@ -3500,14 +3464,14 @@ class BaseGrid extends CompositeDisposable {
     }
     setVisible(panel, visible) {
         this.gridview.setViewVisible(getGridLocation(panel.element), visible);
-        this._onGridEvent.fire({ kind: exports.GroupChangeKind.LAYOUT });
+        this._onDidLayoutChange.fire();
     }
     isVisible(panel) {
         return this.gridview.isViewVisible(getGridLocation(panel.element));
     }
     doAddGroup(group, location = [0], size) {
         this.gridview.addView(group, size !== null && size !== void 0 ? size : exports.Sizing.Distribute, location);
-        this._onGridEvent.fire({ kind: exports.GroupChangeKind.ADD_GROUP });
+        this._onDidAddGroup.fire(group);
         this.doSetGroupActive(group);
     }
     doRemoveGroup(group, options) {
@@ -3518,9 +3482,10 @@ class BaseGrid extends CompositeDisposable {
         const view = this.gridview.remove(group, exports.Sizing.Distribute);
         if (item && !(options === null || options === void 0 ? void 0 : options.skipDispose)) {
             item.disposable.dispose();
+            item.value.dispose();
             this._groups.delete(group.id);
         }
-        this._onGridEvent.fire({ kind: exports.GroupChangeKind.REMOVE_GROUP });
+        this._onDidRemoveGroup.fire(group);
         if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
             const groups = Array.from(this._groups.values());
             this.doSetGroupActive(groups.length > 0 ? groups[0].value : undefined);
@@ -3548,9 +3513,7 @@ class BaseGrid extends CompositeDisposable {
             }
         }
         this._activeGroup = group;
-        this._onGridEvent.fire({
-            kind: exports.GroupChangeKind.GROUP_ACTIVE,
-        });
+        this._onDidActiveGroupChange.fire(group);
     }
     removeGroup(group) {
         this.doRemoveGroup(group);
@@ -3606,7 +3569,13 @@ class BaseGrid extends CompositeDisposable {
     }
     dispose() {
         super.dispose();
-        this._onGridEvent.dispose();
+        this._onDidActiveGroupChange.dispose();
+        this._onDidAddGroup.dispose();
+        this._onDidRemoveGroup.dispose();
+        this._onDidLayoutChange.dispose();
+        for (const group of this.groups) {
+            group.dispose();
+        }
         this.gridview.dispose();
     }
 }
@@ -3618,15 +3587,11 @@ class PanelApiImpl extends CompositeDisposable {
     constructor(id) {
         super();
         this.id = id;
-        this._state = {};
         this._isFocused = false;
         this._isActive = false;
         this._isVisible = true;
         this._width = 0;
         this._height = 0;
-        this._onDidStateChange = new Emitter();
-        this.onDidStateChange = this._onDidStateChange.event;
-        //
         this._onDidPanelDimensionChange = new Emitter({
             replay: true,
         });
@@ -3655,7 +3620,7 @@ class PanelApiImpl extends CompositeDisposable {
         //
         this._onActiveChange = new Emitter();
         this.onActiveChange = this._onActiveChange.event;
-        this.addDisposables(this._onDidStateChange, this._onDidPanelDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this.onDidFocusChange((event) => {
+        this.addDisposables(this._onDidPanelDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this.onDidFocusChange((event) => {
             this._isFocused = event.isFocused;
         }), this.onDidActiveChange((event) => {
             this._isActive = event.isActive;
@@ -3688,21 +3653,6 @@ class PanelApiImpl extends CompositeDisposable {
     setActive() {
         this._onActiveChange.fire();
     }
-    setState(key, value) {
-        if (typeof key === 'object') {
-            this._state = key;
-        }
-        else if (typeof value !== undefined) {
-            this._state[key] = value;
-        }
-        this._onDidStateChange.fire(undefined);
-    }
-    getState() {
-        return this._state;
-    }
-    getStateKey(key) {
-        return this._state[key];
-    }
     dispose() {
         super.dispose();
     }
@@ -3722,6 +3672,7 @@ class GridviewPanelApiImpl extends PanelApiImpl {
         //
         this._onDidSizeChange = new Emitter();
         this.onDidSizeChange = this._onDidSizeChange.event;
+        this.addDisposables(this._onDidConstraintsChangeInternal, this._onDidConstraintsChange, this._onDidSizeChange);
     }
     setConstraints(value) {
         this._onDidConstraintsChangeInternal.fire(value);
@@ -3735,19 +3686,19 @@ class DockviewPanelApiImpl extends GridviewPanelApiImpl {
     constructor(panel, group) {
         super(panel.id);
         this.panel = panel;
-        this._onDidDirtyChange = new Emitter();
-        this.onDidDirtyChange = this._onDidDirtyChange.event;
         this._onDidTitleChange = new Emitter();
         this.onDidTitleChange = this._onDidTitleChange.event;
         this._titleChanged = new Emitter();
         this.titleChanged = this._titleChanged.event;
         this._suppressClosableChanged = new Emitter();
         this.suppressClosableChanged = this._suppressClosableChanged.event;
-        this._group = group;
-        this.addDisposables(this._onDidDirtyChange);
-    }
-    get tryClose() {
-        return this._interceptor;
+        this._onDidActiveGroupChange = new Emitter();
+        this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
+        this._onDidGroupChange = new Emitter();
+        this.onDidGroupChange = this._onDidGroupChange.event;
+        this.disposable = new MutableDisposable();
+        this.group = group;
+        this.addDisposables(this.disposable, this._onDidTitleChange, this._titleChanged, this._suppressClosableChanged, this._onDidGroupChange, this._onDidActiveGroupChange);
     }
     get title() {
         return this.panel.title;
@@ -3760,7 +3711,17 @@ class DockviewPanelApiImpl extends GridviewPanelApiImpl {
         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;
@@ -3774,16 +3735,10 @@ class DockviewPanelApiImpl extends GridviewPanelApiImpl {
         }
         return this.group.model.closePanel(this.panel);
     }
-    interceptOnCloseAction(interceptor) {
-        this._interceptor = interceptor;
-    }
-    dispose() {
-        super.dispose();
-    }
 }
 
 class DockviewGroupPanel extends CompositeDisposable {
-    constructor(id, containerApi) {
+    constructor(id, accessor, containerApi) {
         super();
         this.id = id;
         this.containerApi = containerApi;
@@ -3791,14 +3746,17 @@ class DockviewGroupPanel extends CompositeDisposable {
         this._suppressClosable = false;
         this._title = '';
         this.api = new DockviewPanelApiImpl(this, this._group);
-        this.onDidStateChange = this.api.onDidStateChange;
         this.addDisposables(this.api.onActiveChange(() => {
-            this.containerApi.setActivePanel(this);
+            accessor.setActivePanel(this);
         }), this.api.onDidTitleChange((event) => {
             const title = event.title;
             this.update({ params: { title } });
         }));
     }
+    get params() {
+        var _a;
+        return (_a = this._params) === null || _a === void 0 ? void 0 : _a.params;
+    }
     get title() {
         return this._title;
     }
@@ -3817,32 +3775,18 @@ class DockviewGroupPanel extends CompositeDisposable {
         this._view = params.view;
         this.setTitle(params.title);
         this.setSuppressClosable(params.suppressClosable || false);
-        if (params.state) {
-            this.api.setState(params.state);
-        }
         (_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();
     }
-    setDirty(isDirty) {
-        this.api._onDidDirtyChange.fire(isDirty);
-    }
-    close() {
-        if (this.api.tryClose) {
-            return this.api.tryClose();
-        }
-        return Promise.resolve(true);
-    }
     toJSON() {
-        const state = this.api.getState();
         return {
             id: this.id,
             view: this.view.toJSON(),
             params: Object.keys(this._params || {}).length > 0
                 ? this._params
                 : undefined,
-            state: state && Object.keys(state).length > 0 ? state : undefined,
             suppressClosable: this.suppressClosable || undefined,
             title: this.title,
         };
@@ -3887,18 +3831,6 @@ class DockviewGroupPanel extends CompositeDisposable {
         var _a;
         this._group = group;
         this.api.group = group;
-        this.mutableDisposable.value = this._group.model.onDidGroupChange((ev) => {
-            var _a;
-            if (ev.kind === exports.GroupChangeKind2.GROUP_ACTIVE) {
-                const isVisible = !!((_a = this._group) === null || _a === void 0 ? void 0 : _a.model.isPanelActive(this));
-                this.api._onDidActiveChange.fire({
-                    isActive: isGroupActive && isVisible,
-                });
-                this.api._onDidVisibilityChange.fire({
-                    isVisible,
-                });
-            }
-        });
         const isPanelVisible = this._group.model.isPanelActive(this);
         this.api._onDidActiveChange.fire({
             isActive: isGroupActive && isPanelVisible,
@@ -3973,7 +3905,7 @@ class Watermark extends CompositeDisposable {
     get id() {
         return 'watermark';
     }
-    update(event) {
+    update(_event) {
         // noop
     }
     focus() {
@@ -3982,17 +3914,17 @@ class Watermark extends CompositeDisposable {
     toJSON() {
         return {};
     }
-    layout(width, height) {
+    layout(_width, _height) {
         // noop
     }
     init(params) {
         this.params = params;
-        this.addDisposables(this.params.containerApi.onDidLayoutChange((event) => {
+        this.addDisposables(this.params.containerApi.onDidLayoutChange(() => {
             this.render();
         }));
         this.render();
     }
-    updateParentGroup(group, visible) {
+    updateParentGroup(group, _visible) {
         this.group = group;
         this.render();
     }
@@ -4008,15 +3940,6 @@ class Watermark extends CompositeDisposable {
     }
 }
 
-function debounce(cb, wait) {
-    let timeout;
-    const callable = (...args) => {
-        clearTimeout(timeout);
-        timeout = setTimeout(() => cb(...args), wait);
-    };
-    return callable;
-}
-
 class DefaultDeserializer {
     constructor(layout, panelDeserializer) {
         this.layout = layout;
@@ -4117,9 +4040,6 @@ class DefaultTab extends CompositeDisposable {
         this._isGroupActive = false;
         //
         this.params = {};
-        //
-        this.isDirtyDisposable = new MutableDisposable();
-        this.addDisposables(this.isDirtyDisposable);
         this._element = document.createElement('div');
         this._element.className = 'default-tab';
         //
@@ -4164,10 +4084,6 @@ class DefaultTab extends CompositeDisposable {
     init(params) {
         this.params = params;
         this._content.textContent = params.title;
-        this.isDirtyDisposable.value = this.params.api.onDidDirtyChange((event) => {
-            const isDirty = event;
-            toggleClass(this.action, 'dirty', isDirty);
-        });
         if (!this.params.suppressClosable) {
             addDisposableListener(this.action, 'click', (ev) => {
                 ev.preventDefault(); //
@@ -4183,7 +4099,7 @@ class DefaultTab extends CompositeDisposable {
         this._isGroupActive = group.isActive;
         this.render();
     }
-    layout(width, height) {
+    layout(_width, _height) {
         // noop
     }
     render() {
@@ -4221,6 +4137,10 @@ class BasePanelView extends CompositeDisposable {
     get height() {
         return this._height;
     }
+    get params() {
+        var _a;
+        return (_a = this._params) === null || _a === void 0 ? void 0 : _a.params;
+    }
     focus() {
         this.api._onFocusEvent.fire();
     }
@@ -4229,34 +4149,34 @@ class BasePanelView extends CompositeDisposable {
         this._height = height;
         this.api._onDidPanelDimensionChange.fire({ width, height });
         if (this.part) {
-            if (this.params) {
-                this.part.update(this.params.params);
+            if (this._params) {
+                this.part.update(this._params.params);
             }
         }
     }
     init(parameters) {
-        this.params = 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 });
+        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 state = this.api.getState();
-        const params = (_b = (_a = this.params) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _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,
-            state: Object.keys(state).length === 0 ? undefined : state,
         };
     }
     dispose() {
+        var _a;
         super.dispose();
         this.api.dispose();
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
     }
 }
 
@@ -4274,12 +4194,12 @@ class GridviewPanel extends BasePanelView {
         this._snap = false;
         this._onDidChange = new Emitter();
         this.onDidChange = this._onDidChange.event;
-        this.addDisposables(this.api.onVisibilityChange((event) => {
+        this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
             const { isVisible } = event;
-            const { containerApi } = this.params;
+            const { containerApi } = this._params;
             containerApi.setVisible(this, isVisible);
         }), this.api.onActiveChange(() => {
-            const { containerApi } = this.params;
+            const { containerApi } = this._params;
             containerApi.setActive(this);
         }), this.api.onDidConstraintsChangeInternal((event) => {
             if (typeof event.minimumWidth === 'number' ||
@@ -4394,9 +4314,6 @@ class GridviewPanel extends BasePanelView {
         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 });
     }
-    dispose() {
-        super.dispose();
-    }
 }
 
 class GroupviewPanel extends GridviewPanel {
@@ -4503,15 +4420,24 @@ class DockviewComponent extends BaseGrid {
             orientation: options.orientation || exports.Orientation.HORIZONTAL,
             styles: options.styles,
         });
-        this._panels = new Map();
-        this.dirtyPanels = new Set();
-        this.debouncedDeque = debounce(this.syncConfigs.bind(this), 5000);
         // events
         this._onTabInteractionEvent = new Emitter();
         this.onTabInteractionEvent = this._onTabInteractionEvent.event;
         this._onTabContextMenu = new Emitter();
         this.onTabContextMenu = this._onTabContextMenu.event;
-        this.panelState = {};
+        this._onDidDrop = new Emitter();
+        this.onDidDrop = this._onDidDrop.event;
+        this._onDidRemovePanel = new Emitter();
+        this.onDidRemovePanel = this._onDidRemovePanel.event;
+        this._onDidAddPanel = new Emitter();
+        this.onDidAddPanel = this._onDidAddPanel.event;
+        this._onDidLayoutfromJSON = new Emitter();
+        this.onDidLayoutfromJSON = this._onDidLayoutfromJSON.event;
+        this._onDidActivePanelChange = new Emitter();
+        this.onDidActivePanelChange = this._onDidActivePanelChange.event;
+        this.addDisposables(this._onTabInteractionEvent, this._onTabContextMenu, this._onDidDrop, exports.Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
+            this._bufferOnDidLayoutChange.fire();
+        }));
         this._options = options;
         if (!this.options.components) {
             this.options.components = {};
@@ -4532,10 +4458,10 @@ class DockviewComponent extends BaseGrid {
         this._api = new DockviewApi(this);
     }
     get totalPanels() {
-        return this._panels.size;
+        return this.panels.length;
     }
     get panels() {
-        return Array.from(this._panels.values()).map((_) => _.value);
+        return this.groups.flatMap((group) => group.model.panels);
     }
     get deserializer() {
         return this._deserializer;
@@ -4565,10 +4491,6 @@ class DockviewComponent extends BaseGrid {
     updateOptions(options) {
         const hasOrientationChanged = typeof options.orientation === 'string' &&
             this.options.orientation !== options.orientation;
-        // TODO support style update
-        // const hasStylesChanged =
-        //     typeof options.styles === 'object' &&
-        //     this.options.styles !== options.styles;
         this._options = Object.assign(Object.assign({}, this.options), options);
         if (hasOrientationChanged) {
             this.gridview.orientation = options.orientation;
@@ -4580,8 +4502,7 @@ class DockviewComponent extends BaseGrid {
         (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
     }
     getGroupPanel(id) {
-        var _a;
-        return (_a = this._panels.get(id)) === null || _a === void 0 ? void 0 : _a.value;
+        return this.panels.find((panel) => panel.id === id);
     }
     setActivePanel(panel) {
         if (!panel.group) {
@@ -4630,24 +4551,6 @@ class DockviewComponent extends BaseGrid {
             this.doSetGroupActive(next);
         }
     }
-    registerPanel(panel) {
-        if (this._panels.has(panel.id)) {
-            throw new Error(`panel ${panel.id} already exists`);
-        }
-        const disposable = new CompositeDisposable(panel.onDidStateChange(() => this.addDirtyPanel(panel)));
-        this._panels.set(panel.id, { value: panel, disposable });
-    }
-    unregisterPanel(panel) {
-        if (!this._panels.has(panel.id)) {
-            throw new Error(`panel ${panel.id} doesn't exist`);
-        }
-        const item = this._panels.get(panel.id);
-        if (item) {
-            item.disposable.dispose();
-            item.value.dispose();
-        }
-        this._panels.delete(panel.id);
-    }
     /**
      * Serialize the current state of the layout
      *
@@ -4655,12 +4558,9 @@ class DockviewComponent extends BaseGrid {
      */
     toJSON() {
         var _a;
-        this.syncConfigs();
         const data = this.gridview.serialize();
-        const panels = Array.from(this._panels.values()).reduce((collection, panel) => {
-            if (!this.panelState[panel.value.id]) {
-                collection[panel.value.id] = panel.value.toJSON();
-            }
+        const panels = this.panels.reduce((collection, panel) => {
+            collection[panel.id] = panel.toJSON();
             return collection;
         }, {});
         return {
@@ -4671,13 +4571,12 @@ class DockviewComponent extends BaseGrid {
         };
     }
     fromJSON(data) {
+        const groups = Array.from(this._groups.values()).map((_) => _.value);
+        for (const group of groups) {
+            // remove the group will automatically remove the panels
+            this.removeGroup(group, true);
+        }
         this.gridview.clear();
-        this._panels.forEach((panel) => {
-            panel.disposable.dispose();
-            panel.value.dispose();
-        });
-        this._panels.clear();
-        this._groups.clear();
         if (!this.deserializer) {
             throw new Error('invalid deserializer');
         }
@@ -4691,9 +4590,7 @@ class DockviewComponent extends BaseGrid {
         this.gridview.deserialize(grid, new DefaultDeserializer(this, {
             createPanel: (id) => {
                 const panelData = panels[id];
-                const panel = this.deserializer.fromJSON(panelData);
-                this.registerPanel(panel);
-                return panel;
+                return this.deserializer.fromJSON(panelData);
             },
         }));
         if (typeof activeGroup === 'string') {
@@ -4703,36 +4600,31 @@ class DockviewComponent extends BaseGrid {
             }
         }
         this.gridview.layout(this.width, this.height);
-        this._onGridEvent.fire({ kind: exports.GroupChangeKind.LAYOUT_FROM_JSON });
+        this._onDidLayoutfromJSON.fire();
     }
     closeAllGroups() {
-        return __awaiter(this, void 0, void 0, function* () {
-            for (const entry of this._groups.entries()) {
-                const [_, group] = entry;
-                const didCloseAll = yield group.value.model.closeAllPanels();
-                if (!didCloseAll) {
-                    return false;
-                }
-            }
-            return true;
-        });
+        for (const entry of this._groups.entries()) {
+            const [_, group] = entry;
+            group.value.model.closeAllPanels();
+        }
     }
     fireMouseEvent(event) {
-        switch (event.kind) {
-            case exports.MouseEventKind.CONTEXT_MENU:
-                if (event.tab && event.panel) {
-                    this._onTabContextMenu.fire({
-                        event: event.event,
-                        api: this._api,
-                        panel: event.panel,
-                    });
-                }
-                break;
+        if (event.kind === exports.MouseEventKind.CONTEXT_MENU) {
+            if (event.tab && event.panel) {
+                this._onTabContextMenu.fire({
+                    event: event.event,
+                    api: this._api,
+                    panel: event.panel,
+                });
+            }
         }
     }
     addPanel(options) {
         var _a, _b;
-        const panel = this._addPanel(options);
+        if (this.panels.find((_) => _.id === options.id)) {
+            throw new Error(`panel with id ${options.id} already exists`);
+        }
+        const panel = this.createPanel(options);
         let referenceGroup;
         if ((_a = options.position) === null || _a === void 0 ? void 0 : _a.referencePanel) {
             const referencePanel = this.getGroupPanel(options.position.referencePanel);
@@ -4760,14 +4652,20 @@ class DockviewComponent extends BaseGrid {
         }
         return panel;
     }
-    removePanel(panel) {
-        this.unregisterPanel(panel);
+    removePanel(panel, options = {
+        removeEmptyGroup: true,
+        skipDispose: false,
+    }) {
         const group = panel.group;
         if (!group) {
             throw new Error(`cannot remove panel ${panel.id}. it's missing a group.`);
         }
         group.model.removePanel(panel);
-        if (group.model.size === 0) {
+        panel.dispose();
+        const retainGroupForWatermark = this.size === 1;
+        if (!retainGroupForWatermark &&
+            group.model.size === 0 &&
+            options.removeEmptyGroup) {
             this.removeGroup(group);
         }
     }
@@ -4780,10 +4678,9 @@ class DockviewComponent extends BaseGrid {
             : {}, (_a = this.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.watermark);
     }
     addEmptyGroup(options) {
-        var _a;
         const group = this.createGroup();
         if (options) {
-            const referencePanel = (_a = this._panels.get(options.referencePanel)) === null || _a === void 0 ? void 0 : _a.value;
+            const referencePanel = this.panels.find((panel) => panel.id === options.referencePanel);
             if (!referencePanel) {
                 throw new Error(`reference panel ${options.referencePanel} does not exist`);
             }
@@ -4800,25 +4697,24 @@ class DockviewComponent extends BaseGrid {
             this.doAddGroup(group);
         }
     }
-    removeGroup(group) {
+    removeGroup(group, skipActive = false) {
         const panels = [...group.model.panels]; // reassign since group panels will mutate
-        panels.forEach((panel) => {
-            this.removePanel(panel);
-        });
-        if (this._groups.size === 1) {
-            this._activeGroup = group;
-            return;
+        for (const panel of panels) {
+            this.removePanel(panel, {
+                removeEmptyGroup: false,
+                skipDispose: false,
+            });
         }
-        super.removeGroup(group);
+        super.doRemoveGroup(group, { skipActive });
     }
     moveGroupOrPanel(referenceGroup, groupId, itemId, target, index) {
-        var _a, _b, _c;
+        var _a;
         const sourceGroup = groupId
             ? (_a = this._groups.get(groupId)) === null || _a === void 0 ? void 0 : _a.value
             : undefined;
         if (!target || target === exports.Position.Center) {
             const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(itemId)) ||
-                ((_b = this._panels.get(itemId)) === null || _b === void 0 ? void 0 : _b.value);
+                this.panels.find((panel) => panel.id === itemId);
             if (!groupItem) {
                 throw new Error(`No panel with id ${itemId}`);
             }
@@ -4854,7 +4750,7 @@ class DockviewComponent extends BaseGrid {
             }
             else {
                 const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(itemId)) ||
-                    ((_c = this._panels.get(itemId)) === null || _c === void 0 ? void 0 : _c.value);
+                    this.panels.find((panel) => panel.id === itemId);
                 if (!groupItem) {
                     throw new Error(`No panel with id ${itemId}`);
                 }
@@ -4868,10 +4764,7 @@ class DockviewComponent extends BaseGrid {
         const isGroupAlreadyFocused = this._activeGroup === group;
         super.doSetGroupActive(group, skipFocus);
         if (!isGroupAlreadyFocused && ((_a = this._activeGroup) === null || _a === void 0 ? void 0 : _a.model.activePanel)) {
-            this._onGridEvent.fire({
-                kind: exports.GroupChangeKind.PANEL_ACTIVE,
-                panel: (_b = this._activeGroup) === null || _b === void 0 ? void 0 : _b.model.activePanel,
-            });
+            this._onDidActivePanelChange.fire((_b = this._activeGroup) === null || _b === void 0 ? void 0 : _b.model.activePanel);
         }
     }
     createGroup(options) {
@@ -4893,35 +4786,27 @@ class DockviewComponent extends BaseGrid {
             }
         }
         const view = new GroupviewPanel(this, id, options);
+        view.init({ params: {}, containerApi: 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) => {
                 const { groupId, itemId, target, index } = event;
                 this.moveGroupOrPanel(view, groupId, itemId, target, index);
+            }), view.model.onDidDrop((event) => {
+                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api }));
             }), view.model.onDidGroupChange((event) => {
                 switch (event.kind) {
                     case exports.GroupChangeKind2.ADD_PANEL:
-                        this._onGridEvent.fire({
-                            kind: exports.GroupChangeKind.ADD_PANEL,
-                            panel: event.panel,
-                        });
-                        break;
-                    case exports.GroupChangeKind2.GROUP_ACTIVE:
-                        this._onGridEvent.fire({
-                            kind: exports.GroupChangeKind.GROUP_ACTIVE,
-                            panel: event.panel,
-                        });
+                        if (event.panel) {
+                            this._onDidAddPanel.fire(event.panel);
+                        }
                         break;
                     case exports.GroupChangeKind2.REMOVE_PANEL:
-                        this._onGridEvent.fire({
-                            kind: exports.GroupChangeKind.REMOVE_PANEL,
-                            panel: event.panel,
-                        });
+                        if (event.panel) {
+                            this._onDidRemovePanel.fire(event.panel);
+                        }
                         break;
                     case exports.GroupChangeKind2.PANEL_ACTIVE:
-                        this._onGridEvent.fire({
-                            kind: exports.GroupChangeKind.PANEL_ACTIVE,
-                            panel: event.panel,
-                        });
+                        this._onDidActivePanelChange.fire(event.panel);
                         break;
                 }
             }));
@@ -4935,44 +4820,18 @@ class DockviewComponent extends BaseGrid {
         }
         return view;
     }
-    dispose() {
-        super.dispose();
-        this._onGridEvent.dispose();
-    }
-    /**
-     * Ensure the local copy of the layout state is up-to-date
-     */
-    syncConfigs() {
-        const dirtyPanels = Array.from(this.dirtyPanels);
-        if (dirtyPanels.length === 0) ;
-        this.dirtyPanels.clear();
-        const partialPanelState = dirtyPanels
-            .map((panel) => this._panels.get(panel.id))
-            .filter((_) => !!_)
-            .reduce((collection, panel) => {
-            collection[panel.value.id] = panel.value.toJSON();
-            return collection;
-        }, {});
-        this.panelState = Object.assign(Object.assign({}, this.panelState), partialPanelState);
-        dirtyPanels
-            .filter((p) => this._panels.has(p.id))
-            .forEach((panel) => {
-            panel.setDirty(false);
-        });
-    }
-    _addPanel(options) {
+    createPanel(options) {
         const view = new DefaultGroupPanelView({
             content: this.createContentComponent(options.id, options.component),
             tab: this.createTabComponent(options.id, options.tabComponent),
         });
-        const panel = new DockviewGroupPanel(options.id, this._api);
+        const panel = new DockviewGroupPanel(options.id, this, this._api);
         panel.init({
             view,
             title: options.title || options.id,
             suppressClosable: options === null || options === void 0 ? void 0 : options.suppressClosable,
             params: (options === null || options === void 0 ? void 0 : options.params) || {},
         });
-        this.registerPanel(panel);
         return panel;
     }
     createContentComponent(id, componentName) {
@@ -4992,10 +4851,12 @@ class DockviewComponent extends BaseGrid {
         var _a;
         return (_a = Array.from(this._groups.values()).find((group) => group.value.model.containsPanel(panel))) === null || _a === void 0 ? void 0 : _a.value;
     }
-    addDirtyPanel(panel) {
-        this.dirtyPanels.add(panel);
-        panel.setDirty(true);
-        this.debouncedDeque();
+    dispose() {
+        super.dispose();
+        this._onDidActivePanelChange.dispose();
+        this._onDidAddPanel.dispose();
+        this._onDidRemovePanel.dispose();
+        this._onDidLayoutfromJSON.dispose();
     }
 }
 
@@ -5006,6 +4867,8 @@ class GridviewComponent extends BaseGrid {
             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 = {};
@@ -5058,7 +4921,7 @@ class GridviewComponent extends BaseGrid {
         this.gridview.setViewVisible(getGridLocation(panel.element), visible);
     }
     setActive(panel) {
-        this._groups.forEach((value, key) => {
+        this._groups.forEach((value, _key) => {
             value.value.setActive(panel === value.value);
         });
     }
@@ -5071,8 +4934,12 @@ class GridviewComponent extends BaseGrid {
     }
     fromJSON(serializedGridview, deferComponentLayout) {
         const { grid, activePanel } = serializedGridview;
+        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.gridview.clear();
-        this._groups.clear();
         const queue = [];
         this.gridview.deserialize(grid, {
             fromJSON: (node) => {
@@ -5113,7 +4980,7 @@ class GridviewComponent extends BaseGrid {
                 this.doSetGroupActive(panel);
             }
         }
-        this._onGridEvent.fire({ kind: exports.GroupChangeKind.LAYOUT_FROM_JSON });
+        this._onDidLayoutfromJSON.fire();
     }
     movePanel(panel, options) {
         var _a;
@@ -5169,7 +5036,6 @@ class GridviewComponent extends BaseGrid {
         });
         this.registerPanel(view);
         this.doAddGroup(view, relativeLocation, options.size);
-        return { api: view.api };
     }
     registerPanel(panel) {
         const disposable = new CompositeDisposable(panel.api.onDidFocusChange((event) => {
@@ -5220,14 +5086,10 @@ class GridviewComponent extends BaseGrid {
     }
     removeGroup(group) {
         super.removeGroup(group);
-        const panel = this._groups.get(group.id);
-        if (panel) {
-            panel.disposable.dispose();
-            this._groups.delete(group.id);
-        }
     }
     dispose() {
         super.dispose();
+        this._onDidLayoutfromJSON.dispose();
     }
 }
 
@@ -5254,7 +5116,7 @@ class SplitviewComponent extends CompositeDisposable {
             options.frameworkComponents = {};
         }
         this.splitview = new Splitview(this.element, options);
-        this.addDisposables(this._disposable);
+        this.addDisposables(this._disposable, this._onDidAddView, this._onDidRemoveView, this._onDidLayoutChange);
     }
     get options() {
         return this._options;
@@ -5330,7 +5192,11 @@ class SplitviewComponent extends CompositeDisposable {
     }
     removePanel(panel, sizing) {
         const disposable = this.panels.get(panel.id);
-        disposable === null || disposable === void 0 ? void 0 : disposable.dispose();
+        if (!disposable) {
+            throw new Error(`unknown splitview panel ${panel.id}`);
+        }
+        disposable.disposable.dispose();
+        disposable.value.dispose();
         this.panels.delete(panel.id);
         const index = this.getPanels().findIndex((_) => _ === panel);
         this.splitview.removeView(index, sizing);
@@ -5389,7 +5255,7 @@ class SplitviewComponent extends CompositeDisposable {
             }
             this.setActive(view, true);
         });
-        this.panels.set(view.id, disposable);
+        this.panels.set(view.id, { disposable, value: view });
     }
     toJSON() {
         var _a;
@@ -5413,6 +5279,11 @@ class SplitviewComponent extends CompositeDisposable {
     }
     fromJSON(serializedSplitview, deferComponentLayout = false) {
         const { views, orientation, size, activeView } = serializedSplitview;
+        for (const [_, value] of this.panels.entries()) {
+            value.disposable.dispose();
+            value.value.dispose();
+        }
+        this.panels.clear();
         this.splitview.dispose();
         const queue = [];
         this.splitview = new Splitview(this.element, {
@@ -5468,49 +5339,16 @@ class SplitviewComponent extends CompositeDisposable {
         }
     }
     dispose() {
-        Array.from(this.panels.values()).forEach((value) => {
-            value.dispose();
-        });
+        for (const [_, value] of this.panels.entries()) {
+            value.disposable.dispose();
+            value.value.dispose();
+        }
         this.panels.clear();
+        this.splitview.dispose();
         super.dispose();
     }
 }
 
-class DragHandler extends CompositeDisposable {
-    constructor(el) {
-        super();
-        this.el = el;
-        this.iframes = [];
-        this._onDragStart = new Emitter();
-        this.onDragStart = this._onDragStart.event;
-        this.configure();
-    }
-    configure() {
-        this.addDisposables(addDisposableListener(this.el, 'dragstart', (event) => {
-            var _a;
-            this.iframes = [
-                ...getElementsByTagName('iframe'),
-                ...getElementsByTagName('webview'),
-            ];
-            for (const iframe of this.iframes) {
-                iframe.style.pointerEvents = 'none';
-            }
-            this.el.classList.add('dragged');
-            setTimeout(() => this.el.classList.remove('dragged'), 0);
-            (_a = this.disposable) === null || _a === void 0 ? void 0 : _a.dispose();
-            this.disposable = this.getData();
-        }), addDisposableListener(this.el, 'dragend', (ev) => {
-            var _a;
-            for (const iframe of this.iframes) {
-                iframe.style.pointerEvents = 'auto';
-            }
-            this.iframes = [];
-            (_a = this.disposable) === null || _a === void 0 ? void 0 : _a.dispose();
-            this.disposable = undefined;
-        }));
-    }
-}
-
 class SplitviewPanelApiImpl extends PanelApiImpl {
     //
     constructor(id) {
@@ -5525,6 +5363,7 @@ class SplitviewPanelApiImpl extends PanelApiImpl {
         //
         this._onDidSizeChange = new Emitter();
         this.onDidSizeChange = this._onDidSizeChange.event;
+        this.addDisposables(this._onDidConstraintsChangeInternal, this._onDidConstraintsChange, this._onDidSizeChange);
     }
     setConstraints(value) {
         this._onDidConstraintsChangeInternal.fire(value);
@@ -5532,11 +5371,6 @@ class SplitviewPanelApiImpl extends PanelApiImpl {
     setSize(event) {
         this._onDidSizeChange.fire(event);
     }
-    dispose() {
-        super.dispose();
-        this._onDidConstraintsChange.dispose();
-        this._onDidSizeChange.dispose();
-    }
 }
 
 class PaneviewPanelApiImpl extends SplitviewPanelApiImpl {
@@ -5550,6 +5384,7 @@ class PaneviewPanelApiImpl extends SplitviewPanelApiImpl {
         this.onMouseEnter = this._onMouseEnter.event;
         this._onMouseLeave = new Emitter({});
         this.onMouseLeave = this._onMouseLeave.event;
+        this.addDisposables(this._onDidExpansionChange, this._onMouseEnter, this._onMouseLeave);
     }
     set pane(pane) {
         this._pane = pane;
@@ -5718,7 +5553,7 @@ class PaneviewPanel extends BasePanelView {
         }
     }
     toJSON() {
-        const params = this.params;
+        const params = this._params;
         return Object.assign(Object.assign({}, super.toJSON()), { headerComponent: this.headerComponent, title: params.title });
     }
     renderOnce() {
@@ -5778,7 +5613,7 @@ class DraggablePaneviewPanel extends PaneviewPanel {
         })(this.header);
         this.target = new Droptarget(this.element, {
             validOverlays: 'vertical',
-            canDisplayOverlay: (event) => {
+            canDisplayOverlay: () => {
                 const data = getPaneData();
                 if (!data) {
                     return true;
@@ -5787,36 +5622,39 @@ class DraggablePaneviewPanel extends PaneviewPanel {
             },
         });
         this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop((event) => {
-            const data = getPaneData();
-            if (!data) {
-                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) {
-                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => getPaneData() }));
-                return;
-            }
-            const allPanels = containerApi.getPanels();
-            const fromIndex = allPanels.indexOf(existingPanel);
-            let toIndex = containerApi.getPanels().indexOf(this);
-            if (event.position === exports.Position.Left ||
-                event.position === exports.Position.Top) {
-                toIndex = Math.max(0, toIndex - 1);
-            }
-            if (event.position === exports.Position.Right ||
-                event.position === exports.Position.Bottom) {
-                if (fromIndex > toIndex) {
-                    toIndex++;
-                }
-                toIndex = Math.min(allPanels.length - 1, toIndex);
-            }
-            containerApi.movePanel(fromIndex, toIndex);
+            this.onDrop(event);
         }));
     }
+    onDrop(event) {
+        const data = getPaneData();
+        if (!data) {
+            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) {
+            this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => getPaneData() }));
+            return;
+        }
+        const allPanels = containerApi.getPanels();
+        const fromIndex = allPanels.indexOf(existingPanel);
+        let toIndex = containerApi.getPanels().indexOf(this);
+        if (event.position === exports.Position.Left ||
+            event.position === exports.Position.Top) {
+            toIndex = Math.max(0, toIndex - 1);
+        }
+        if (event.position === exports.Position.Right ||
+            event.position === exports.Position.Bottom) {
+            if (fromIndex > toIndex) {
+                toIndex++;
+            }
+            toIndex = Math.min(allPanels.length - 1, toIndex);
+        }
+        containerApi.movePanel(fromIndex, toIndex);
+    }
 }
 
 class DefaultHeader extends CompositeDisposable {
@@ -5846,7 +5684,7 @@ class DefaultHeader extends CompositeDisposable {
             this._expander.textContent = e.isExpanded ? '<' : '>';
         });
     }
-    update(params) {
+    update(_params) {
         //
     }
     dispose() {
@@ -5872,6 +5710,7 @@ class PaneviewComponent extends CompositeDisposable {
         super();
         this.element = element;
         this._disposable = new MutableDisposable();
+        this._viewDisposables = new Map();
         this._onDidLayoutChange = new Emitter();
         this.onDidLayoutChange = this._onDidLayoutChange.event;
         this._onDidDrop = new Emitter();
@@ -5880,6 +5719,7 @@ class PaneviewComponent extends CompositeDisposable {
         this.onDidAddView = this._onDidAddView.event;
         this._onDidRemoveView = new Emitter();
         this.onDidRemoveView = this._onDidRemoveView.event;
+        this.addDisposables(this._onDidLayoutChange, this._onDidDrop, this._onDidAddView, this._onDidRemoveView);
         this._options = options;
         if (!options.components) {
             options.components = {};
@@ -5955,9 +5795,7 @@ class PaneviewComponent extends CompositeDisposable {
             isExpanded: !!options.isExpanded,
             disableDnd: !!this.options.disableDnd,
         });
-        const disposable = new CompositeDisposable(view.onDidDrop((event) => {
-            this._onDidDrop.fire(event);
-        }));
+        this.doAddPanel(view);
         const size = typeof options.size === 'number' ? options.size : exports.Sizing.Distribute;
         const index = typeof options.index === 'number' ? options.index : undefined;
         view.init({
@@ -5970,7 +5808,7 @@ class PaneviewComponent extends CompositeDisposable {
         });
         this.paneview.addPane(view, size, index);
         view.orientation = this.paneview.orientation;
-        return disposable;
+        return view;
     }
     getPanels() {
         return this.paneview.getPanes();
@@ -5979,6 +5817,7 @@ class PaneviewComponent extends CompositeDisposable {
         const views = this.getPanels();
         const index = views.findIndex((_) => _ === panel);
         this.paneview.removePane(index);
+        this.doRemovePanel(panel);
     }
     movePanel(from, to) {
         this.paneview.moveView(from, to);
@@ -6028,6 +5867,10 @@ class PaneviewComponent extends CompositeDisposable {
     fromJSON(serializedPaneview, deferComponentLayout) {
         const { views, size } = serializedPaneview;
         const queue = [];
+        for (const [_, value] of this._viewDisposables.entries()) {
+            value.dispose();
+        }
+        this._viewDisposables.clear();
         this.paneview.dispose();
         this.paneview = new Paneview(this.element, {
             orientation: exports.Orientation.VERTICAL,
@@ -6063,9 +5906,7 @@ class PaneviewComponent extends CompositeDisposable {
                         isExpanded: !!view.expanded,
                         disableDnd: !!this.options.disableDnd,
                     });
-                    panel.onDidDrop((event) => {
-                        this._onDidDrop.fire(event);
-                    });
+                    this.doAddPanel(panel);
                     queue.push(() => {
                         panel.init({
                             params: data.params || {},
@@ -6095,6 +5936,27 @@ class PaneviewComponent extends CompositeDisposable {
             queue.forEach((f) => f());
         }
     }
+    doAddPanel(panel) {
+        const disposable = panel.onDidDrop((event) => {
+            this._onDidDrop.fire(event);
+        });
+        this._viewDisposables.set(panel.id, disposable);
+    }
+    doRemovePanel(panel) {
+        const disposable = this._viewDisposables.get(panel.id);
+        if (disposable) {
+            disposable.dispose();
+            this._viewDisposables.delete(panel.id);
+        }
+    }
+    dispose() {
+        super.dispose();
+        for (const [_, value] of this._viewDisposables.entries()) {
+            value.dispose();
+        }
+        this._viewDisposables.clear();
+        this.paneview.dispose();
+    }
 }
 
 class SplitviewPanel extends BasePanelView {
@@ -6107,12 +5969,14 @@ class SplitviewPanel extends BasePanelView {
         this._snap = false;
         this._onDidChange = new Emitter();
         this.onDidChange = this._onDidChange.event;
-        this.addDisposables(this.api.onVisibilityChange((event) => {
+        this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
             const { isVisible } = event;
-            const { containerApi } = this.params;
+            const { containerApi } = this
+                ._params;
             containerApi.setVisible(this, isVisible);
         }), this.api.onActiveChange(() => {
-            const { containerApi } = this.params;
+            const { containerApi } = this
+                ._params;
             containerApi.setActive(this);
         }), this.api.onDidConstraintsChangeInternal((event) => {
             if (typeof event.minimumSize === 'number' ||
@@ -6255,14 +6119,13 @@ class ReactPart {
         if (this.disposed) {
             throw new Error('invalid operation: resource is already disposed');
         }
-        // TODO use a better check for isReactFunctionalComponent
         if (typeof this.component !== 'function') {
             /**
              * we know this isn't a React.FunctionComponent so throw an error here.
              * if we do not intercept this the React library will throw a very obsure error
              * for the same reason, at least at this point we will emit a sensible stacktrace.
              */
-            throw new Error('invalid operation: only functional components are supported');
+            throw new Error('Invalid Operation. dockview only supports React Functional Components.');
         }
         const bridgeComponent = React__namespace.createElement(React__namespace.forwardRef(ReactComponentBridge), {
             component: this
@@ -6320,22 +6183,14 @@ class ReactPanelContentPart {
         this.id = id;
         this.component = component;
         this.reactPortalStore = reactPortalStore;
-        // private hostedContainer: HostedContainer;
         this._onDidFocus = new Emitter();
         this.onDidFocus = this._onDidFocus.event;
         this._onDidBlur = new Emitter();
         this.onDidBlur = this._onDidBlur.event;
         this._element = document.createElement('div');
-        this._element.style.height = '100%';
-        this._element.style.width = '100%';
-        // this.hostedContainer = new HostedContainer({
-        //     id,
-        // });
-        // this.hostedContainer.onDidFocus(() => this._onDidFocus.fire());
-        // this.hostedContainer.onDidBlur(() => this._onDidBlur.fire());
+        this._element.className = 'dockview-react-part';
         this._actionsElement = document.createElement('div');
-        this._actionsElement.style.height = '100%';
-        this._actionsElement.style.width = '100%';
+        this._actionsElement.className = 'dockview-react-part';
     }
     get element() {
         return this._element;
@@ -6368,23 +6223,20 @@ class ReactPanelContentPart {
         var _a;
         (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(event.params);
     }
-    updateParentGroup(group, isPanelVisible) {
+    updateParentGroup(group, _isPanelVisible) {
         this._group = group;
     }
-    layout(width, height) {
+    layout(_width, _height) {
         // noop
-        // this.hostedContainer.layout(
-        //     this.element
-        //     // { width, height }
-        // );
     }
     close() {
         return Promise.resolve(true);
     }
     dispose() {
         var _a, _b;
+        this._onDidFocus.dispose();
+        this._onDidBlur.dispose();
         (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
-        // this.hostedContainer?.dispose();
         (_b = this.actionsPart) === null || _b === void 0 ? void 0 : _b.dispose();
     }
 }
@@ -6395,6 +6247,7 @@ class ReactPanelHeaderPart {
         this.component = component;
         this.reactPortalStore = reactPortalStore;
         this._element = document.createElement('div');
+        this._element.className = 'dockview-react-part';
     }
     get element() {
         return this._element;
@@ -6418,10 +6271,10 @@ class ReactPanelHeaderPart {
             id: this.id,
         };
     }
-    layout(width, height) {
+    layout(_width, _height) {
         // noop - retrieval from api
     }
-    updateParentGroup(group, isPanelVisible) {
+    updateParentGroup(_group, _isPanelVisible) {
         // noop - retrieval from api
     }
     dispose() {
@@ -6439,7 +6292,6 @@ class ReactPanelDeserialzier {
         const panelId = panelData.id;
         const params = panelData.params;
         const title = panelData.title;
-        const state = panelData.state;
         const suppressClosable = panelData.suppressClosable;
         const viewData = panelData.view;
         const view = new DefaultGroupPanelView({
@@ -6448,13 +6300,12 @@ class ReactPanelDeserialzier {
                 ? 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(),
         });
-        const panel = new DockviewGroupPanel(panelId, new DockviewApi(this.layout));
+        const panel = new DockviewGroupPanel(panelId, this.layout, new DockviewApi(this.layout));
         panel.init({
             view,
             title,
             suppressClosable,
             params: params || {},
-            state: state || {},
         });
         return panel;
     }
@@ -6469,8 +6320,7 @@ class ReactWatermarkPart {
             value: undefined,
         };
         this._element = document.createElement('div');
-        this._element.style.height = '100%';
-        this._element.style.width = '100%';
+        this._element.className = 'dockview-react-part';
     }
     get element() {
         return this._element;
@@ -6503,10 +6353,10 @@ class ReactWatermarkPart {
             id: this.id,
         };
     }
-    layout(width, height) {
+    layout(_width, _height) {
         // noop - retrieval from api
     }
-    updateParentGroup(group, isPanelVisible) {
+    updateParentGroup(group, _isPanelVisible) {
         // noop - retrieval from api
         this._groupRef.value = group;
     }
@@ -6540,21 +6390,21 @@ const DockviewReact = React__namespace.forwardRef((props, ref) => {
         var _a;
         const factory = {
             content: {
-                createComponent: (id, componentId, component) => {
+                createComponent: (_id, componentId, component) => {
                     return new ReactPanelContentPart(componentId, component, {
                         addPortal,
                     });
                 },
             },
             tab: {
-                createComponent: (id, componentId, component) => {
+                createComponent: (_id, componentId, component) => {
                     return new ReactPanelHeaderPart(componentId, component, {
                         addPortal,
                     });
                 },
             },
             watermark: {
-                createComponent: (id, componentId, component) => {
+                createComponent: (_id, componentId, component) => {
                     return new ReactWatermarkPart(componentId, component, {
                         addPortal,
                     });
@@ -6568,7 +6418,6 @@ const DockviewReact = React__namespace.forwardRef((props, ref) => {
             frameworkTabComponents: props.tabComponents,
             tabHeight: props.tabHeight,
             debug: props.debug,
-            enableExternalDragEvents: props.enableExternalDragEvents,
             watermarkFrameworkComponent: props.watermarkComponent,
             styles: props.hideBorders
                 ? { separatorBorder: 'transparent' }
@@ -6584,8 +6433,24 @@ const DockviewReact = React__namespace.forwardRef((props, ref) => {
         dockviewRef.current = dockview;
         return () => {
             dockview.dispose();
+            element.remove();
         };
     }, []);
+    React__namespace.useEffect(() => {
+        if (!dockviewRef.current) {
+            return () => {
+                // noop
+            };
+        }
+        const disposable = dockviewRef.current.onDidDrop((event) => {
+            if (props.onDidDrop) {
+                props.onDidDrop(event);
+            }
+        });
+        return () => {
+            disposable.dispose();
+        };
+    }, [props.onDidDrop]);
     React__namespace.useEffect(() => {
         if (!dockviewRef.current) {
             return;
@@ -6594,6 +6459,22 @@ const DockviewReact = React__namespace.forwardRef((props, ref) => {
             frameworkComponents: props.components,
         });
     }, [props.components]);
+    React__namespace.useEffect(() => {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            watermarkFrameworkComponent: props.watermarkComponent,
+        });
+    }, [props.watermarkComponent]);
+    React__namespace.useEffect(() => {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            showDndOverlay: props.showDndOverlay,
+        });
+    }, [props.showDndOverlay]);
     React__namespace.useEffect(() => {
         if (!dockviewRef.current) {
             return;
@@ -6682,9 +6563,9 @@ class ReactPanelView extends SplitviewPanel {
     getComponent() {
         var _a;
         return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
-            params: ((_a = this.params) === null || _a === void 0 ? void 0 : _a.params) || {},
+            params: ((_a = this._params) === null || _a === void 0 ? void 0 : _a.params) || {},
             api: this.api,
-            containerApi: this.params
+            containerApi: this._params
                 .containerApi,
         });
     }
@@ -6721,7 +6602,9 @@ const SplitviewReact = React__namespace.forwardRef((props, ref) => {
                     });
                 },
             },
-            proportionalLayout: props.proportionalLayout,
+            proportionalLayout: typeof props.proportionalLayout === 'boolean'
+                ? props.proportionalLayout
+                : true,
             styles: props.hideBorders
                 ? { separatorBorder: 'transparent' }
                 : undefined,
@@ -6757,9 +6640,9 @@ class ReactGridPanelView extends GridviewPanel {
     getComponent() {
         var _a;
         return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
-            params: ((_a = this.params) === null || _a === void 0 ? void 0 : _a.params) || {},
+            params: ((_a = this._params) === null || _a === void 0 ? void 0 : _a.params) || {},
             api: this.api,
-            containerApi: this.params
+            containerApi: this._params
                 .containerApi,
         });
     }
@@ -6789,7 +6672,9 @@ const GridviewReact = React__namespace.forwardRef((props, ref) => {
         var _a;
         const element = document.createElement('div');
         const gridview = new GridviewComponent(element, {
-            proportionalLayout: !!props.proportionalLayout,
+            proportionalLayout: typeof props.proportionalLayout === 'boolean'
+                ? props.proportionalLayout
+                : true,
             orientation: props.orientation,
             frameworkComponents: props.components,
             frameworkComponentFactory: {
@@ -6812,6 +6697,7 @@ const GridviewReact = React__namespace.forwardRef((props, ref) => {
         gridviewRef.current = gridview;
         return () => {
             gridview.dispose();
+            element.remove();
         };
     }, []);
     React__namespace.useEffect(() => {
@@ -6882,7 +6768,7 @@ const PaneviewReact = React__namespace.forwardRef((props, ref) => {
         };
     }, [props.disableAutoResizing]);
     React__namespace.useEffect(() => {
-        const createComponent = (id, componentId, component) => new PanePanelSection(id, component, {
+        const createComponent = (id, _componentId, component) => new PanePanelSection(id, component, {
             addPortal,
         });
         const paneview = new PaneviewComponent(domRef.current, {
@@ -6948,14 +6834,11 @@ const PaneviewReact = React__namespace.forwardRef((props, ref) => {
 PaneviewReact.displayName = 'PaneviewComponent';
 
 exports.BaseGrid = BaseGrid;
-exports.CompositeDisposable = CompositeDisposable;
 exports.ContentContainer = ContentContainer;
-exports.DATA_KEY = DATA_KEY;
 exports.DockviewApi = DockviewApi;
 exports.DockviewComponent = DockviewComponent;
 exports.DockviewComponents = DockviewComponents;
 exports.DockviewReact = DockviewReact;
-exports.Emitter = Emitter;
 exports.Gridview = Gridview;
 exports.GridviewApi = GridviewApi;
 exports.GridviewComponent = GridviewComponent;
@@ -6963,7 +6846,6 @@ exports.GridviewPanel = GridviewPanel;
 exports.GridviewReact = GridviewReact;
 exports.Groupview = Groupview;
 exports.LocalSelectionTransfer = LocalSelectionTransfer;
-exports.MutableDisposable = MutableDisposable;
 exports.PaneFramework = PaneFramework;
 exports.PaneTransfer = PaneTransfer;
 exports.PanelTransfer = PanelTransfer;
@@ -6982,10 +6864,6 @@ exports.SplitviewComponent = SplitviewComponent;
 exports.SplitviewPanel = SplitviewPanel;
 exports.SplitviewReact = SplitviewReact;
 exports.Tab = Tab$1;
-exports.TickDelayedEvent = TickDelayedEvent;
-exports.addDisposableListener = addDisposableListener;
-exports.addDisposableWindowListener = addDisposableWindowListener;
-exports.extractData = extractData;
 exports.getDirectionOrientation = getDirectionOrientation;
 exports.getGridLocation = getGridLocation;
 exports.getLocationOrientation = getLocationOrientation;
@@ -6993,11 +6871,8 @@ exports.getPaneData = getPaneData;
 exports.getPanelData = getPanelData;
 exports.getRelativeLocation = getRelativeLocation;
 exports.indexInParent = indexInParent;
-exports.isCustomDragEvent = isCustomDragEvent;
 exports.isGridBranchNode = isGridBranchNode;
-exports.isPanelTransferEvent = isPanelTransferEvent;
 exports.isReactElement = isReactElement;
-exports.isTabDragEvent = isTabDragEvent;
 exports.orthogonal = orthogonal;
 exports.toTarget = toTarget;
 exports.usePortalsLifecycle = usePortalsLifecycle;