dockview 1.0.3 → 1.3.0

package/dist/dockview.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.0.3
+ * @version 1.3.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -58,9 +58,79 @@
     }
   }
 
-  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) => {
@@ -91,7 +161,6 @@
                   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: () => {
@@ -107,9 +176,9 @@
       }
       fire(e) {
           this._last = e;
-          this._listeners.forEach((listener) => {
+          for (const listener of this._listeners) {
               listener(e);
-          });
+          }
       }
       dispose() {
           this._listeners = [];
@@ -151,164 +220,6 @@
       }
   }
 
-  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;
@@ -328,6 +239,9 @@
       get length() {
           return this.component.length;
       }
+      get orientation() {
+          return this.component.orientation;
+      }
       get onDidLayoutChange() {
           return this.component.onDidLayoutChange;
       }
@@ -337,9 +251,6 @@
       get onDidRemoveView() {
           return this.component.onDidRemoveView;
       }
-      get orientation() {
-          return this.component.orientation;
-      }
       updateOptions(options) {
           this.component.updateOptions(options);
       }
@@ -384,18 +295,18 @@
       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;
       }
@@ -435,7 +346,7 @@
           this.component.layout(width, height);
       }
       addPanel(options) {
-          return this.component.addPanel(options);
+          this.component.addPanel(options);
       }
       resizeToFit() {
           this.component.resizeToFit();
@@ -451,12 +362,6 @@
       constructor(component) {
           this.component = component;
       }
-      get width() {
-          return this.component.width;
-      }
-      get height() {
-          return this.component.height;
-      }
       get minimumHeight() {
           return this.component.minimumHeight;
       }
@@ -469,12 +374,27 @@
       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;
       }
@@ -549,8 +469,26 @@
       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;
@@ -579,18 +517,12 @@
       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);
       }
@@ -620,6 +552,46 @@
       }
   }
 
+  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];
@@ -1565,13 +1537,13 @@
           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();
       }
   }
 
@@ -1594,7 +1566,7 @@
           });
           // 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);
@@ -1610,7 +1582,7 @@
               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();
@@ -1662,17 +1634,20 @@
       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);
@@ -1700,15 +1675,16 @@
       }
       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();
       }
   }
@@ -1771,8 +1747,8 @@
           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) {
@@ -1807,56 +1783,16 @@
                   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) => {
@@ -1880,9 +1816,73 @@
           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;
@@ -1985,6 +1985,7 @@
           this.view.layout(this.width, this.height);
       }
       dispose() {
+          this._onDidChange.dispose();
           this._disposable.dispose();
       }
   }
@@ -2002,7 +2003,7 @@
           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');
@@ -2027,7 +2028,7 @@
                               : true,
                       };
                   }),
-                  size: this.orthogonalSize,
+                  size: this.size,
               };
               this.children = childDescriptors.map((c) => c.node);
               this.splitview = new Splitview(this.element, {
@@ -2036,7 +2037,7 @@
                   proportionalLayout,
               });
           }
-          this.addDisposables(this.splitview.onDidSashEnd(() => {
+          this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => {
               this._onDidChange.fire(undefined);
           }));
           this.setupChildrenEvents();
@@ -2188,7 +2189,7 @@
       }
       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
@@ -2208,6 +2209,15 @@
    * 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);
@@ -2339,6 +2349,7 @@
           this.disposable.dispose();
           this._onDidChange.dispose();
           this.root.dispose();
+          this.element.remove();
       }
       clear() {
           const orientation = this.root.orientation;
@@ -2346,13 +2357,13 @@
       }
       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;
@@ -2362,7 +2373,9 @@
                       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);
@@ -2423,15 +2436,6 @@
           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;
@@ -2533,9 +2537,9 @@
           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;
               }
@@ -2546,10 +2550,9 @@
           }
           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));
@@ -2593,31 +2596,6 @@
       }
   }
 
-  /*! *****************************************************************************
-  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();
@@ -2629,6 +2607,7 @@
           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
@@ -2672,7 +2651,7 @@
           }
           this.disposable.value = disposable;
       }
-      layout(width, height) {
+      layout(_width, _height) {
           // noop
       }
       closePanel() {
@@ -2695,6 +2674,41 @@
       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";
@@ -2704,42 +2718,34 @@
       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;
               }
@@ -2941,12 +2947,10 @@
               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({
@@ -2975,7 +2979,6 @@
       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) {
@@ -2996,15 +2999,10 @@
           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,
           });
@@ -3068,6 +3066,9 @@
       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) {
@@ -3146,10 +3147,10 @@
       containsPanel(panel) {
           return this.panels.includes(panel);
       }
-      init(params) {
+      init(_params) {
           //noop
       }
-      update(params) {
+      update(_params) {
           //noop
       }
       focus() {
@@ -3161,6 +3162,8 @@
               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;
@@ -3181,43 +3184,19 @@
           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);
@@ -3360,8 +3339,11 @@
               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) {
@@ -3386,31 +3368,23 @@
                   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) {
@@ -3433,36 +3407,26 @@
           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;
@@ -3499,14 +3463,14 @@
       }
       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) {
@@ -3517,9 +3481,10 @@
           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);
@@ -3547,9 +3512,7 @@
               }
           }
           this._activeGroup = group;
-          this._onGridEvent.fire({
-              kind: exports.GroupChangeKind.GROUP_ACTIVE,
-          });
+          this._onDidActiveGroupChange.fire(group);
       }
       removeGroup(group) {
           this.doRemoveGroup(group);
@@ -3605,7 +3568,13 @@
       }
       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();
       }
   }
@@ -3617,15 +3586,11 @@
       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,
           });
@@ -3654,7 +3619,7 @@
           //
           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;
@@ -3687,21 +3652,6 @@
       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();
       }
@@ -3721,6 +3671,7 @@
           //
           this._onDidSizeChange = new Emitter();
           this.onDidSizeChange = this._onDidSizeChange.event;
+          this.addDisposables(this._onDidConstraintsChangeInternal, this._onDidConstraintsChange, this._onDidSizeChange);
       }
       setConstraints(value) {
           this._onDidConstraintsChangeInternal.fire(value);
@@ -3734,19 +3685,19 @@
       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;
@@ -3759,7 +3710,17 @@
           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;
@@ -3773,16 +3734,10 @@
           }
           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;
@@ -3790,14 +3745,17 @@
           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;
       }
@@ -3816,32 +3774,18 @@
           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,
           };
@@ -3886,18 +3830,6 @@
           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,
@@ -3972,7 +3904,7 @@
       get id() {
           return 'watermark';
       }
-      update(event) {
+      update(_event) {
           // noop
       }
       focus() {
@@ -3981,17 +3913,17 @@
       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();
       }
@@ -4007,15 +3939,6 @@
       }
   }
 
-  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;
@@ -4116,9 +4039,6 @@
           this._isGroupActive = false;
           //
           this.params = {};
-          //
-          this.isDirtyDisposable = new MutableDisposable();
-          this.addDisposables(this.isDirtyDisposable);
           this._element = document.createElement('div');
           this._element.className = 'default-tab';
           //
@@ -4163,10 +4083,6 @@
       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(); //
@@ -4182,7 +4098,7 @@
           this._isGroupActive = group.isActive;
           this.render();
       }
-      layout(width, height) {
+      layout(_width, _height) {
           // noop
       }
       render() {
@@ -4220,6 +4136,10 @@
       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();
       }
@@ -4228,34 +4148,34 @@
           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();
       }
   }
 
@@ -4273,12 +4193,12 @@
           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' ||
@@ -4393,9 +4313,6 @@
           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 {
@@ -4502,15 +4419,24 @@
               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 = {};
@@ -4531,10 +4457,10 @@
           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;
@@ -4564,10 +4490,6 @@
       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;
@@ -4579,8 +4501,7 @@
           (_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) {
@@ -4629,24 +4550,6 @@
               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
        *
@@ -4654,12 +4557,9 @@
        */
       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 {
@@ -4670,13 +4570,12 @@
           };
       }
       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');
           }
@@ -4690,9 +4589,7 @@
           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') {
@@ -4702,36 +4599,31 @@
               }
           }
           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);
@@ -4759,14 +4651,20 @@
           }
           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);
           }
       }
@@ -4779,10 +4677,9 @@
               : {}, (_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`);
               }
@@ -4799,25 +4696,24 @@
               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}`);
               }
@@ -4853,7 +4749,7 @@
               }
               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}`);
                   }
@@ -4867,10 +4763,7 @@
           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) {
@@ -4892,35 +4785,27 @@
               }
           }
           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;
                   }
               }));
@@ -4934,44 +4819,18 @@
           }
           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) {
@@ -4991,10 +4850,12 @@
           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();
       }
   }
 
@@ -5005,6 +4866,8 @@
               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 = {};
@@ -5057,7 +4920,7 @@
           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);
           });
       }
@@ -5070,8 +4933,12 @@
       }
       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) => {
@@ -5112,7 +4979,7 @@
                   this.doSetGroupActive(panel);
               }
           }
-          this._onGridEvent.fire({ kind: exports.GroupChangeKind.LAYOUT_FROM_JSON });
+          this._onDidLayoutfromJSON.fire();
       }
       movePanel(panel, options) {
           var _a;
@@ -5168,7 +5035,6 @@
           });
           this.registerPanel(view);
           this.doAddGroup(view, relativeLocation, options.size);
-          return { api: view.api };
       }
       registerPanel(panel) {
           const disposable = new CompositeDisposable(panel.api.onDidFocusChange((event) => {
@@ -5219,14 +5085,10 @@
       }
       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();
       }
   }
 
@@ -5253,7 +5115,7 @@
               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;
@@ -5329,7 +5191,11 @@
       }
       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);
@@ -5388,7 +5254,7 @@
               }
               this.setActive(view, true);
           });
-          this.panels.set(view.id, disposable);
+          this.panels.set(view.id, { disposable, value: view });
       }
       toJSON() {
           var _a;
@@ -5412,6 +5278,11 @@
       }
       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, {
@@ -5467,49 +5338,16 @@
           }
       }
       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) {
@@ -5524,6 +5362,7 @@
           //
           this._onDidSizeChange = new Emitter();
           this.onDidSizeChange = this._onDidSizeChange.event;
+          this.addDisposables(this._onDidConstraintsChangeInternal, this._onDidConstraintsChange, this._onDidSizeChange);
       }
       setConstraints(value) {
           this._onDidConstraintsChangeInternal.fire(value);
@@ -5531,11 +5370,6 @@
       setSize(event) {
           this._onDidSizeChange.fire(event);
       }
-      dispose() {
-          super.dispose();
-          this._onDidConstraintsChange.dispose();
-          this._onDidSizeChange.dispose();
-      }
   }
 
   class PaneviewPanelApiImpl extends SplitviewPanelApiImpl {
@@ -5549,6 +5383,7 @@
           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;
@@ -5717,7 +5552,7 @@
           }
       }
       toJSON() {
-          const params = this.params;
+          const params = this._params;
           return Object.assign(Object.assign({}, super.toJSON()), { headerComponent: this.headerComponent, title: params.title });
       }
       renderOnce() {
@@ -5777,7 +5612,7 @@
           })(this.header);
           this.target = new Droptarget(this.element, {
               validOverlays: 'vertical',
-              canDisplayOverlay: (event) => {
+              canDisplayOverlay: () => {
                   const data = getPaneData();
                   if (!data) {
                       return true;
@@ -5786,36 +5621,39 @@
               },
           });
           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 {
@@ -5845,7 +5683,7 @@
               this._expander.textContent = e.isExpanded ? '<' : '>';
           });
       }
-      update(params) {
+      update(_params) {
           //
       }
       dispose() {
@@ -5871,6 +5709,7 @@
           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();
@@ -5879,6 +5718,7 @@
           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 = {};
@@ -5954,9 +5794,7 @@
               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({
@@ -5969,7 +5807,7 @@
           });
           this.paneview.addPane(view, size, index);
           view.orientation = this.paneview.orientation;
-          return disposable;
+          return view;
       }
       getPanels() {
           return this.paneview.getPanes();
@@ -5978,6 +5816,7 @@
           const views = this.getPanels();
           const index = views.findIndex((_) => _ === panel);
           this.paneview.removePane(index);
+          this.doRemovePanel(panel);
       }
       movePanel(from, to) {
           this.paneview.moveView(from, to);
@@ -6027,6 +5866,10 @@
       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,
@@ -6062,9 +5905,7 @@
                           isExpanded: !!view.expanded,
                           disableDnd: !!this.options.disableDnd,
                       });
-                      panel.onDidDrop((event) => {
-                          this._onDidDrop.fire(event);
-                      });
+                      this.doAddPanel(panel);
                       queue.push(() => {
                           panel.init({
                               params: data.params || {},
@@ -6094,6 +5935,27 @@
               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 {
@@ -6106,12 +5968,14 @@
           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' ||
@@ -6254,14 +6118,13 @@
           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
@@ -6319,22 +6182,14 @@
           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;
@@ -6367,23 +6222,20 @@
           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();
       }
   }
@@ -6394,6 +6246,7 @@
           this.component = component;
           this.reactPortalStore = reactPortalStore;
           this._element = document.createElement('div');
+          this._element.className = 'dockview-react-part';
       }
       get element() {
           return this._element;
@@ -6417,10 +6270,10 @@
               id: this.id,
           };
       }
-      layout(width, height) {
+      layout(_width, _height) {
           // noop - retrieval from api
       }
-      updateParentGroup(group, isPanelVisible) {
+      updateParentGroup(_group, _isPanelVisible) {
           // noop - retrieval from api
       }
       dispose() {
@@ -6438,7 +6291,6 @@
           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({
@@ -6447,13 +6299,12 @@
                   ? 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;
       }
@@ -6468,8 +6319,7 @@
               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;
@@ -6502,10 +6352,10 @@
               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;
       }
@@ -6539,21 +6389,21 @@
           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,
                       });
@@ -6567,7 +6417,6 @@
               frameworkTabComponents: props.tabComponents,
               tabHeight: props.tabHeight,
               debug: props.debug,
-              enableExternalDragEvents: props.enableExternalDragEvents,
               watermarkFrameworkComponent: props.watermarkComponent,
               styles: props.hideBorders
                   ? { separatorBorder: 'transparent' }
@@ -6583,8 +6432,24 @@
           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;
@@ -6593,6 +6458,22 @@
               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;
@@ -6681,9 +6562,9 @@
       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,
           });
       }
@@ -6720,7 +6601,9 @@
                       });
                   },
               },
-              proportionalLayout: props.proportionalLayout,
+              proportionalLayout: typeof props.proportionalLayout === 'boolean'
+                  ? props.proportionalLayout
+                  : true,
               styles: props.hideBorders
                   ? { separatorBorder: 'transparent' }
                   : undefined,
@@ -6756,9 +6639,9 @@
       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,
           });
       }
@@ -6788,7 +6671,9 @@
           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: {
@@ -6811,6 +6696,7 @@
           gridviewRef.current = gridview;
           return () => {
               gridview.dispose();
+              element.remove();
           };
       }, []);
       React__namespace.useEffect(() => {
@@ -6881,7 +6767,7 @@
           };
       }, [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, {
@@ -6947,14 +6833,11 @@
   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;
@@ -6962,7 +6845,6 @@
   exports.GridviewReact = GridviewReact;
   exports.Groupview = Groupview;
   exports.LocalSelectionTransfer = LocalSelectionTransfer;
-  exports.MutableDisposable = MutableDisposable;
   exports.PaneFramework = PaneFramework;
   exports.PaneTransfer = PaneTransfer;
   exports.PanelTransfer = PanelTransfer;
@@ -6981,10 +6863,6 @@
   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;
@@ -6992,11 +6870,8 @@
   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;