dockview-core 1.9.2 → 1.10.1

package/dist/dockview-core.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 1.9.2
+ * @version 1.10.1
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -37,7 +37,7 @@
     }
   }
 
-  var css_248z = ".dv-render-overlay {\n  position: absolute;\n  z-index: 1;\n  height: 100%;\n}\n.dv-render-overlay.dv-render-overlay-float {\n  z-index: 999;\n}\n\n.dv-debug .dv-render-overlay {\n  outline: 1px solid red;\n  outline-offset: -1;\n}\n.dockview-svg {\n  display: inline-block;\n  fill: currentcolor;\n  line-height: 1;\n  stroke: currentcolor;\n  stroke-width: 0;\n}\n.dockview-theme-dark {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\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-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\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-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #1e1e1e;\n  --dv-tabs-and-actions-container-background-color: #252526;\n  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-tab-divider-color: #1e1e1e;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: #969696;\n  --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n  --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n  --dv-separator-border: rgb(68, 68, 68);\n  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n  --dv-tabs-and-actions-container-background-color: #2d2d30;\n  --dv-tabs-and-actions-container-height: 20px;\n  --dv-tabs-and-actions-container-font-size: 11px;\n  --dv-activegroup-visiblepanel-tab-background-color: #007acc;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #3f3f46;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: white;\n  --dv-inactivegroup-visiblepanel-tab-color: white;\n  --dv-inactivegroup-hiddenpanel-tab-color: white;\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container {\n  box-sizing: content-box;\n  border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.active-tab {\n  border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.inactive-tab {\n  border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container {\n  box-sizing: content-box;\n  border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.active-tab {\n  border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.inactive-tab {\n  border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n}\n\n.dockview-theme-abyss {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #000c18;\n  --dv-tabs-and-actions-container-background-color: #1c1c2a;\n  --dv-activegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-activegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-tab-divider-color: #2b2b4a;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);\n  --dv-separator-border: #2b2b4a;\n  --dv-paneview-header-border-color: #2b2b4a;\n  --dv-paneview-active-outline-color: #596f99;\n}\n\n.dockview-theme-dracula {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #282a36;\n  --dv-tabs-and-actions-container-background-color: #191a21;\n  --dv-activegroup-visiblepanel-tab-background-color: #282a36;\n  --dv-activegroup-hiddenpanel-tab-background-color: #21222c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #282a36;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #21222c;\n  --dv-tab-divider-color: #191a21;\n  --dv-activegroup-visiblepanel-tab-color: rgb(248, 248, 242);\n  --dv-activegroup-hiddenpanel-tab-color: rgb(98, 114, 164);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(98, 114, 164, 0.5);\n  --dv-separator-border: #bd93f9;\n  --dv-paneview-header-border-color: #bd93f9;\n  --dv-paneview-active-outline-color: #6272a4;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  background-color: #94527e;\n  z-index: 999;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n  position: absolute;\n  left: 0px;\n  bottom: 0px;\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  background-color: #5e3d5a;\n  z-index: 999;\n}\n\n.dockview-theme-replit {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #ebeced;\n  --dv-tabs-and-actions-container-background-color: #fcfcfc;\n  --dv-activegroup-visiblepanel-tab-background-color: #f0f1f2;\n  --dv-activegroup-hiddenpanel-tab-background-color: ##fcfcfc;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #f0f1f2;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #fcfcfc;\n  --dv-tab-divider-color: transparent;\n  --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-activegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n  --dv-inactivegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n  --dv-separator-border: transparent;\n  --dv-paneview-header-border-color: rgb(51, 51, 51);\n  --dv-background-color: #ebeced;\n  --dv-separator-handle-background-color: #cfd1d3;\n  --dv-separator-handle-hover-background-color: #babbbb;\n}\n.dockview-theme-replit.dv-dockview {\n  padding: 3px;\n}\n.dockview-theme-replit .view:has(> .groupview) {\n  padding: 3px;\n}\n.dockview-theme-replit .dv-resize-container:has(> .groupview) {\n  border-radius: 8px;\n}\n.dockview-theme-replit .groupview {\n  overflow: hidden;\n  border-radius: 10px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container {\n  border-bottom: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab {\n  margin: 4px;\n  border-radius: 8px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab .dockview-svg {\n  height: 8px;\n  width: 8px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab:hover {\n  background-color: #e4e5e6 !important;\n}\n.dockview-theme-replit .groupview .content-container {\n  background-color: #fcfcfc;\n}\n.dockview-theme-replit .groupview.active-group {\n  border: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .groupview.inactive-group {\n  border: 1px solid transparent;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash::after {\n  content: \"\";\n  height: 4px;\n  width: 40px;\n  border-radius: 2px;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: var(--dv-separator-handle-background-color);\n  position: absolute;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash:hover::after {\n  background-color: var(--dv-separator-handle-hover-background-color);\n}\n.dockview-theme-replit .horizontal > .sash-container > .sash::after {\n  content: \"\";\n  height: 40px;\n  width: 4px;\n  border-radius: 2px;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: var(--dv-separator-handle-background-color);\n  position: absolute;\n}\n.dockview-theme-replit .horizontal > .sash-container > .sash:hover::after {\n  background-color: var(--dv-separator-handle-hover-background-color);\n}\n.drop-target {\n  position: relative;\n}\n.drop-target > .drop-target-dropzone {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  height: 100%;\n  width: 100%;\n  z-index: 1000;\n  pointer-events: none;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection {\n  position: relative;\n  box-sizing: border-box;\n  height: 100%;\n  width: 100%;\n  background-color: var(--dv-drag-over-background-color);\n  transition: top 70ms ease-out, left 70ms ease-out, width 70ms ease-out, height 70ms ease-out, opacity 0.15s ease-out;\n  will-change: transform;\n  pointer-events: none;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-top.dv-drop-target-small-vertical {\n  border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical {\n  border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal {\n  border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {\n  border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-debug .dv-resize-container .dv-resize-handle-top {\n  background-color: red;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-bottom {\n  background-color: green;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-left {\n  background-color: yellow;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-right {\n  background-color: blue;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-topleft,\n.dv-debug .dv-resize-container .dv-resize-handle-topright,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomleft,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomright {\n  background-color: cyan;\n}\n\n.dv-resize-container {\n  position: absolute;\n  z-index: 997;\n  border: 1px solid var(--dv-tab-divider-color);\n  box-shadow: var(--dv-floating-box-shadow);\n}\n.dv-resize-container.dv-bring-to-front {\n  z-index: 998;\n}\n.dv-resize-container.dv-resize-container-dragging {\n  opacity: 0.5;\n}\n.dv-resize-container .dv-resize-handle-top {\n  height: 4px;\n  width: calc(100% - 8px);\n  left: 4px;\n  top: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-bottom {\n  height: 4px;\n  width: calc(100% - 8px);\n  left: 4px;\n  bottom: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-left {\n  height: calc(100% - 8px);\n  width: 4px;\n  left: -2px;\n  top: 4px;\n  z-index: 999;\n  position: absolute;\n  cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-right {\n  height: calc(100% - 8px);\n  width: 4px;\n  right: -2px;\n  top: 4px;\n  z-index: 999;\n  position: absolute;\n  cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-topleft {\n  height: 4px;\n  width: 4px;\n  top: -2px;\n  left: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: nw-resize;\n}\n.dv-resize-container .dv-resize-handle-topright {\n  height: 4px;\n  width: 4px;\n  right: -2px;\n  top: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: ne-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomleft {\n  height: 4px;\n  width: 4px;\n  left: -2px;\n  bottom: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: sw-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomright {\n  height: 4px;\n  width: 4px;\n  right: -2px;\n  bottom: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: se-resize;\n}\n.dv-dockview {\n  position: relative;\n  background-color: var(--dv-group-view-background-color);\n}\n.dv-dockview .dv-watermark-container {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  height: 100%;\n  width: 100%;\n  z-index: 1;\n}\n.dv-dockview .dv-overlay-render-container {\n  position: relative;\n}\n\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n  background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);\n  color: var(--dv-inactivegroup-visiblepanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n  background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-inactivegroup-hiddenpanel-tab-color);\n}\n\n/**\n * when a tab is dragged we lose the above stylings because they are conditional on parent elements\n * therefore we also set some stylings for the dragging event\n **/\n.tab.dv-tab-dragging {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.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  min-height: 0;\n  outline: none;\n}\n.grid-view,\n.branch-node {\n  height: 100%;\n  width: 100%;\n}\n.pane-container {\n  height: 100%;\n  width: 100%;\n}\n.pane-container.animated .view {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.pane-container .view {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  padding: 0px !important;\n}\n.pane-container .view:not(:first-child)::before {\n  background-color: transparent !important;\n}\n.pane-container .view:not(:first-child) .pane > .pane-header {\n  border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.pane-container .view .default-header {\n  background-color: var(--dv-group-view-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n  display: flex;\n  padding: 0px 8px;\n  cursor: pointer;\n}\n.pane-container .view .default-header .dockview-pane-header-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.pane-container .view .default-header > span {\n  padding-left: 8px;\n  flex-grow: 1;\n}\n.pane-container:first-of-type > .pane > .pane-header {\n  border-top: none !important;\n}\n.pane-container .pane {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  height: 100%;\n}\n.pane-container .pane .pane-header {\n  box-sizing: border-box;\n  user-select: none;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-header.pane-draggable {\n  cursor: pointer;\n}\n.pane-container .pane .pane-header:focus:before, .pane-container .pane .pane-header:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.pane-container .pane .pane-body {\n  overflow-y: auto;\n  overflow-x: hidden;\n  flex-grow: 1;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-body:focus:before, .pane-container .pane .pane-body:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.dv-debug .split-view-container .sash-container .sash.enabled {\n  background-color: black;\n}\n.dv-debug .split-view-container .sash-container .sash.disabled {\n  background-color: orange;\n}\n.dv-debug .split-view-container .sash-container .sash.maximum {\n  background-color: green;\n}\n.dv-debug .split-view-container .sash-container .sash.minimum {\n  background-color: red;\n}\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  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  touch-action: none;\n}\n.split-view-container .sash-container .sash:not(.disabled):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:not(.disabled):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  background-color: var(--dv-background-color);\n}\n.split-view-container .view-container .view {\n  height: 100%;\n  box-sizing: border-box;\n  overflow: auto;\n  position: absolute;\n}\n.split-view-container.separator-border .view:not(:first-child)::before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  pointer-events: none;\n  background-color: var(--dv-separator-border);\n}\n.dv-dragged {\n  transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */\n}\n\n.tab {\n  flex-shrink: 0;\n}\n.tab:focus-within, .tab:focus {\n  position: relative;\n}\n.tab:focus-within::after, .tab:focus::after {\n  position: absolute;\n  content: \"\";\n  height: 100%;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  pointer-events: none;\n  outline: 1px solid var(--dv-tab-divider-color) !important;\n  outline-offset: -1px;\n  z-index: 5;\n}\n.tab.dv-tab-dragging .tab-action {\n  background-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.tab.active-tab > .default-tab .tab-action {\n  visibility: visible;\n}\n.tab.inactive-tab > .default-tab .tab-action {\n  visibility: hidden;\n}\n.tab.inactive-tab > .default-tab:hover .tab-action {\n  visibility: visible;\n}\n.tab .default-tab {\n  position: relative;\n  height: 100%;\n  display: flex;\n  min-width: 80px;\n  align-items: center;\n  padding: 0px 8px;\n  white-space: nowrap;\n  text-overflow: elipsis;\n}\n.tab .default-tab .tab-content {\n  padding: 0px 8px;\n  flex-grow: 1;\n}\n.tab .default-tab .action-container {\n  text-align: right;\n  display: flex;\n}\n.tab .default-tab .action-container .tab-list {\n  display: flex;\n  padding: 0px;\n  margin: 0px;\n  justify-content: flex-end;\n}\n.tab .default-tab .action-container .tab-list .tab-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.tab .default-tab .action-container .tab-list .tab-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}\n.tabs-and-actions-container {\n  display: flex;\n  background-color: var(--dv-tabs-and-actions-container-background-color);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  height: var(--dv-tabs-and-actions-container-height);\n  font-size: var(--dv-tabs-and-actions-container-font-size);\n}\n.tabs-and-actions-container.hidden {\n  display: none;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .tabs-container {\n  flex-grow: 1;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .tabs-container .tab {\n  flex-grow: 1;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .void-container {\n  flex-grow: 0;\n}\n.tabs-and-actions-container .void-container {\n  display: flex;\n  flex-grow: 1;\n  cursor: grab;\n}\n.tabs-and-actions-container .tabs-container {\n  display: flex;\n  overflow-x: overlay;\n  overflow-y: hidden;\n  scrollbar-width: thin;\n  /* Track */\n  /* Handle */\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar {\n  height: 3px;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-track {\n  background: transparent;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-thumb {\n  background: var(--dv-tabs-container-scrollbar-color);\n}\n.tabs-and-actions-container .tabs-container .tab {\n  -webkit-user-drag: element;\n  outline: none;\n  min-width: 75px;\n  cursor: pointer;\n  position: relative;\n  box-sizing: border-box;\n}\n.tabs-and-actions-container .tabs-container .tab:not(:first-child)::before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  pointer-events: none;\n  background-color: var(--dv-tab-divider-color);\n  width: 1px;\n  height: 100%;\n}\n.watermark {\n  display: flex;\n  width: 100%;\n}\n.watermark.has-actions .watermark-title .actions-container {\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}\n.watermark .actions-container {\n  display: flex;\n  align-items: center;\n  padding: 0px 8px;\n}\n.watermark .actions-container .close-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  cursor: pointer;\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.watermark .actions-container .close-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}";
+  var css_248z = ".dv-render-overlay {\n  position: absolute;\n  z-index: 1;\n  height: 100%;\n}\n.dv-render-overlay.dv-render-overlay-float {\n  z-index: 999;\n}\n\n.dv-debug .dv-render-overlay {\n  outline: 1px solid red;\n  outline-offset: -1;\n}\n.dockview-svg {\n  display: inline-block;\n  fill: currentcolor;\n  line-height: 1;\n  stroke: currentcolor;\n  stroke-width: 0;\n}\n.dockview-theme-dark {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\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-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\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-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #1e1e1e;\n  --dv-tabs-and-actions-container-background-color: #252526;\n  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-tab-divider-color: #1e1e1e;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: #969696;\n  --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n  --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n  --dv-separator-border: rgb(68, 68, 68);\n  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n  --dv-tabs-and-actions-container-background-color: #2d2d30;\n  --dv-tabs-and-actions-container-height: 20px;\n  --dv-tabs-and-actions-container-font-size: 11px;\n  --dv-activegroup-visiblepanel-tab-background-color: #007acc;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #3f3f46;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: white;\n  --dv-inactivegroup-visiblepanel-tab-color: white;\n  --dv-inactivegroup-hiddenpanel-tab-color: white;\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container {\n  box-sizing: content-box;\n  border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.active-tab {\n  border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.inactive-tab {\n  border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container {\n  box-sizing: content-box;\n  border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.active-tab {\n  border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.inactive-tab {\n  border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n}\n\n.dockview-theme-abyss {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #000c18;\n  --dv-tabs-and-actions-container-background-color: #1c1c2a;\n  --dv-activegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-activegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-tab-divider-color: #2b2b4a;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);\n  --dv-separator-border: #2b2b4a;\n  --dv-paneview-header-border-color: #2b2b4a;\n  --dv-paneview-active-outline-color: #596f99;\n}\n\n.dockview-theme-dracula {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #282a36;\n  --dv-tabs-and-actions-container-background-color: #191a21;\n  --dv-activegroup-visiblepanel-tab-background-color: #282a36;\n  --dv-activegroup-hiddenpanel-tab-background-color: #21222c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #282a36;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #21222c;\n  --dv-tab-divider-color: #191a21;\n  --dv-activegroup-visiblepanel-tab-color: rgb(248, 248, 242);\n  --dv-activegroup-hiddenpanel-tab-color: rgb(98, 114, 164);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(98, 114, 164, 0.5);\n  --dv-separator-border: #bd93f9;\n  --dv-paneview-header-border-color: #bd93f9;\n  --dv-paneview-active-outline-color: #6272a4;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  background-color: #94527e;\n  z-index: 999;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n  position: absolute;\n  left: 0px;\n  bottom: 0px;\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  background-color: #5e3d5a;\n  z-index: 999;\n}\n\n.dockview-theme-replit {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-gap-size: 3px;\n  --dv-group-view-background-color: #ebeced;\n  --dv-tabs-and-actions-container-background-color: #fcfcfc;\n  --dv-activegroup-visiblepanel-tab-background-color: #f0f1f2;\n  --dv-activegroup-hiddenpanel-tab-background-color: ##fcfcfc;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #f0f1f2;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #fcfcfc;\n  --dv-tab-divider-color: transparent;\n  --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-activegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n  --dv-inactivegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n  --dv-separator-border: transparent;\n  --dv-paneview-header-border-color: rgb(51, 51, 51);\n  --dv-background-color: #ebeced;\n  --dv-separator-handle-background-color: #cfd1d3;\n  --dv-separator-handle-hover-background-color: #babbbb;\n}\n.dockview-theme-replit .dv-resize-container:has(> .groupview) {\n  border-radius: 8px;\n}\n.dockview-theme-replit .groupview {\n  overflow: hidden;\n  border-radius: 10px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container {\n  border-bottom: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab {\n  margin: 4px;\n  border-radius: 8px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab .dockview-svg {\n  height: 8px;\n  width: 8px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab:hover {\n  background-color: #e4e5e6 !important;\n}\n.dockview-theme-replit .groupview .content-container {\n  background-color: #fcfcfc;\n}\n.dockview-theme-replit .groupview.active-group {\n  border: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .groupview.inactive-group {\n  border: 1px solid transparent;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash::after {\n  content: \"\";\n  height: 4px;\n  width: 40px;\n  border-radius: 2px;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: var(--dv-separator-handle-background-color);\n  position: absolute;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash:hover::after {\n  background-color: var(--dv-separator-handle-hover-background-color);\n}\n.dockview-theme-replit .horizontal > .sash-container > .sash::after {\n  content: \"\";\n  height: 40px;\n  width: 4px;\n  border-radius: 2px;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: var(--dv-separator-handle-background-color);\n  position: absolute;\n}\n.dockview-theme-replit .horizontal > .sash-container > .sash:hover::after {\n  background-color: var(--dv-separator-handle-hover-background-color);\n}\n.drop-target {\n  position: relative;\n}\n.drop-target > .drop-target-dropzone {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  height: 100%;\n  width: 100%;\n  z-index: 1000;\n  pointer-events: none;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection {\n  position: relative;\n  box-sizing: border-box;\n  height: 100%;\n  width: 100%;\n  background-color: var(--dv-drag-over-background-color);\n  transition: top 70ms ease-out, left 70ms ease-out, width 70ms ease-out, height 70ms ease-out, opacity 0.15s ease-out;\n  will-change: transform;\n  pointer-events: none;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-top.dv-drop-target-small-vertical {\n  border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical {\n  border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal {\n  border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {\n  border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-debug .dv-resize-container .dv-resize-handle-top {\n  background-color: red;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-bottom {\n  background-color: green;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-left {\n  background-color: yellow;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-right {\n  background-color: blue;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-topleft,\n.dv-debug .dv-resize-container .dv-resize-handle-topright,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomleft,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomright {\n  background-color: cyan;\n}\n\n.dv-resize-container {\n  position: absolute;\n  z-index: 997;\n  border: 1px solid var(--dv-tab-divider-color);\n  box-shadow: var(--dv-floating-box-shadow);\n}\n.dv-resize-container.dv-bring-to-front {\n  z-index: 998;\n}\n.dv-resize-container.dv-resize-container-dragging {\n  opacity: 0.5;\n}\n.dv-resize-container .dv-resize-handle-top {\n  height: 4px;\n  width: calc(100% - 8px);\n  left: 4px;\n  top: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-bottom {\n  height: 4px;\n  width: calc(100% - 8px);\n  left: 4px;\n  bottom: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-left {\n  height: calc(100% - 8px);\n  width: 4px;\n  left: -2px;\n  top: 4px;\n  z-index: 999;\n  position: absolute;\n  cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-right {\n  height: calc(100% - 8px);\n  width: 4px;\n  right: -2px;\n  top: 4px;\n  z-index: 999;\n  position: absolute;\n  cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-topleft {\n  height: 4px;\n  width: 4px;\n  top: -2px;\n  left: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: nw-resize;\n}\n.dv-resize-container .dv-resize-handle-topright {\n  height: 4px;\n  width: 4px;\n  right: -2px;\n  top: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: ne-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomleft {\n  height: 4px;\n  width: 4px;\n  left: -2px;\n  bottom: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: sw-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomright {\n  height: 4px;\n  width: 4px;\n  right: -2px;\n  bottom: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: se-resize;\n}\n.dv-dockview {\n  position: relative;\n  background-color: var(--dv-group-view-background-color);\n}\n.dv-dockview .dv-watermark-container {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  height: 100%;\n  width: 100%;\n  z-index: 1;\n}\n.dv-dockview .dv-overlay-render-container {\n  position: relative;\n}\n.dv-dockview .split-view-container.horizontal > .view-container > .view:not(:last-child) {\n  border-right: var(--dv-group-gap-size) solid transparent;\n}\n.dv-dockview .split-view-container.horizontal > .view-container > .view:not(:first-child) {\n  border-left: var(--dv-group-gap-size) solid transparent;\n}\n.dv-dockview .split-view-container.vertical > .view-container > .view:not(:last-child) {\n  border-bottom: var(--dv-group-gap-size) solid transparent;\n}\n.dv-dockview .split-view-container.vertical > .view-container > .view:not(:first-child) {\n  border-top: var(--dv-group-gap-size) solid transparent;\n}\n\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n  background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);\n  color: var(--dv-inactivegroup-visiblepanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n  background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-inactivegroup-hiddenpanel-tab-color);\n}\n\n/**\n * when a tab is dragged we lose the above stylings because they are conditional on parent elements\n * therefore we also set some stylings for the dragging event\n **/\n.tab.dv-tab-dragging {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.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  min-height: 0;\n  outline: none;\n}\n.dv-root-wrapper {\n  height: 100%;\n  width: 100%;\n}\n.grid-view,\n.branch-node {\n  height: 100%;\n  width: 100%;\n}\n.pane-container {\n  height: 100%;\n  width: 100%;\n}\n.pane-container.animated .view {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.pane-container .view {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  padding: 0px !important;\n}\n.pane-container .view:not(:first-child)::before {\n  background-color: transparent !important;\n}\n.pane-container .view:not(:first-child) .pane > .pane-header {\n  border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.pane-container .view .default-header {\n  background-color: var(--dv-group-view-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n  display: flex;\n  padding: 0px 8px;\n  cursor: pointer;\n}\n.pane-container .view .default-header .dockview-pane-header-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.pane-container .view .default-header > span {\n  padding-left: 8px;\n  flex-grow: 1;\n}\n.pane-container:first-of-type > .pane > .pane-header {\n  border-top: none !important;\n}\n.pane-container .pane {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  height: 100%;\n}\n.pane-container .pane .pane-header {\n  box-sizing: border-box;\n  user-select: none;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-header.pane-draggable {\n  cursor: pointer;\n}\n.pane-container .pane .pane-header:focus:before, .pane-container .pane .pane-header:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.pane-container .pane .pane-body {\n  overflow-y: auto;\n  overflow-x: hidden;\n  flex-grow: 1;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-body:focus:before, .pane-container .pane .pane-body:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.dv-debug .split-view-container .sash-container .sash.enabled {\n  background-color: black;\n}\n.dv-debug .split-view-container .sash-container .sash.disabled {\n  background-color: orange;\n}\n.dv-debug .split-view-container .sash-container .sash.maximum {\n  background-color: green;\n}\n.dv-debug .split-view-container .sash-container .sash.minimum {\n  background-color: red;\n}\n\n.split-view-container {\n  position: relative;\n  overflow: hidden;\n  height: 100%;\n  width: 100%;\n}\n.split-view-container.dv-splitview-disabled > .sash-container > .sash {\n  pointer-events: none;\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  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  touch-action: none;\n}\n.split-view-container .sash-container .sash:not(.disabled):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:not(.disabled):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  background-color: var(--dv-background-color);\n}\n.split-view-container .view-container .view {\n  height: 100%;\n  box-sizing: border-box;\n  overflow: auto;\n  position: absolute;\n}\n.split-view-container.separator-border .view:not(:first-child)::before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  pointer-events: none;\n  background-color: var(--dv-separator-border);\n}\n.dv-dragged {\n  transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */\n}\n\n.tab {\n  flex-shrink: 0;\n}\n.tab:focus-within, .tab:focus {\n  position: relative;\n}\n.tab:focus-within::after, .tab:focus::after {\n  position: absolute;\n  content: \"\";\n  height: 100%;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  pointer-events: none;\n  outline: 1px solid var(--dv-tab-divider-color) !important;\n  outline-offset: -1px;\n  z-index: 5;\n}\n.tab.dv-tab-dragging .tab-action {\n  background-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.tab.active-tab > .default-tab .tab-action {\n  visibility: visible;\n}\n.tab.inactive-tab > .default-tab .tab-action {\n  visibility: hidden;\n}\n.tab.inactive-tab > .default-tab:hover .tab-action {\n  visibility: visible;\n}\n.tab .default-tab {\n  position: relative;\n  height: 100%;\n  display: flex;\n  min-width: 80px;\n  align-items: center;\n  padding: 0px 8px;\n  white-space: nowrap;\n  text-overflow: elipsis;\n}\n.tab .default-tab .tab-content {\n  padding: 0px 8px;\n  flex-grow: 1;\n}\n.tab .default-tab .action-container {\n  text-align: right;\n  display: flex;\n}\n.tab .default-tab .action-container .tab-list {\n  display: flex;\n  padding: 0px;\n  margin: 0px;\n  justify-content: flex-end;\n}\n.tab .default-tab .action-container .tab-list .tab-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.tab .default-tab .action-container .tab-list .tab-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}\n.tabs-and-actions-container {\n  display: flex;\n  background-color: var(--dv-tabs-and-actions-container-background-color);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  height: var(--dv-tabs-and-actions-container-height);\n  font-size: var(--dv-tabs-and-actions-container-font-size);\n}\n.tabs-and-actions-container.hidden {\n  display: none;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .tabs-container {\n  flex-grow: 1;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .tabs-container .tab {\n  flex-grow: 1;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .void-container {\n  flex-grow: 0;\n}\n.tabs-and-actions-container .void-container {\n  display: flex;\n  flex-grow: 1;\n  cursor: grab;\n}\n.tabs-and-actions-container .tabs-container {\n  display: flex;\n  overflow-x: overlay;\n  overflow-y: hidden;\n  scrollbar-width: thin;\n  /* Track */\n  /* Handle */\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar {\n  height: 3px;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-track {\n  background: transparent;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-thumb {\n  background: var(--dv-tabs-container-scrollbar-color);\n}\n.tabs-and-actions-container .tabs-container .tab {\n  -webkit-user-drag: element;\n  outline: none;\n  min-width: 75px;\n  cursor: pointer;\n  position: relative;\n  box-sizing: border-box;\n}\n.tabs-and-actions-container .tabs-container .tab:not(:first-child)::before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  pointer-events: none;\n  background-color: var(--dv-tab-divider-color);\n  width: 1px;\n  height: 100%;\n}\n.watermark {\n  display: flex;\n  width: 100%;\n}\n.watermark.has-actions .watermark-title .actions-container {\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}\n.watermark .actions-container {\n  display: flex;\n  align-items: center;\n  padding: 0px 8px;\n}\n.watermark .actions-container .close-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  cursor: pointer;\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.watermark .actions-container .close-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}";
   styleInject(css_248z);
 
   class TransferObject {
@@ -122,6 +122,17 @@
           };
       };
   })(exports.DockviewEvent || (exports.DockviewEvent = {}));
+  class DockviewEvent {
+      constructor() {
+          this._defaultPrevented = false;
+      }
+      get defaultPrevented() {
+          return this._defaultPrevented;
+      }
+      preventDefault() {
+          this._defaultPrevented = true;
+      }
+  }
   class LeakageMonitor {
       constructor() {
           this.events = new Map();
@@ -165,6 +176,9 @@
           }
           Emitter.ENABLE_TRACKING = isEnabled;
       }
+      get value() {
+          return this._last;
+      }
       constructor(options) {
           this.options = options;
           this._listeners = [];
@@ -287,8 +301,12 @@
           args.forEach((arg) => this._disposables.push(arg));
       }
       dispose() {
-          this._disposables.forEach((arg) => arg.dispose());
+          if (this._isDisposed) {
+              return;
+          }
           this._isDisposed = true;
+          this._disposables.forEach((arg) => arg.dispose());
+          this._disposables = [];
       }
   }
   class MutableDisposable {
@@ -772,6 +790,13 @@
           this._endSnappingEnabled = endSnappingEnabled;
           this.updateSashEnablement();
       }
+      get disabled() {
+          return this._disabled;
+      }
+      set disabled(value) {
+          this._disabled = value;
+          toggleClass(this.element, 'dv-splitview-disabled', value);
+      }
       constructor(container, options) {
           this.container = container;
           this.viewItems = [];
@@ -782,6 +807,7 @@
           this._proportions = undefined;
           this._startSnappingEnabled = true;
           this._endSnappingEnabled = true;
+          this._disabled = false;
           this._onDidSashEnd = new Emitter();
           this.onDidSashEnd = this._onDidSashEnd.event;
           this._onDidAddView = new Emitter();
@@ -1456,6 +1482,9 @@
               this._onDidChange.fire();
           }));
       }
+      setViewVisible(index, visible) {
+          this.splitview.setViewVisible(index, visible);
+      }
       addPane(pane, size, index = this.splitview.length, skipLayout = false) {
           const disposable = pane.onDidChangeExpansionState(() => {
               this.setupAnimation();
@@ -1709,7 +1738,13 @@
           }
           return exports.LayoutPriority.Normal;
       }
-      constructor(orientation, proportionalLayout, styles, size, orthogonalSize, childDescriptors) {
+      get disabled() {
+          return this.splitview.disabled;
+      }
+      set disabled(value) {
+          this.splitview.disabled = value;
+      }
+      constructor(orientation, proportionalLayout, styles, size, orthogonalSize, disabled, childDescriptors) {
           super();
           this.orientation = orientation;
           this.proportionalLayout = proportionalLayout;
@@ -1754,6 +1789,7 @@
                   styles,
               });
           }
+          this.disabled = disabled;
           this.addDisposables(this._onDidChange, this._onDidVisibilityChange, this.splitview.onDidSashEnd(() => {
               this._onDidChange.fire({});
           }));
@@ -1887,7 +1923,7 @@
   }
   function flipNode(node, size, orthogonalSize) {
       if (node instanceof BranchNode) {
-          const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize);
+          const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize, node.disabled);
           let totalSize = 0;
           for (let i = node.children.length - 1; i >= 0; i--) {
               const child = node.children[i];
@@ -2023,31 +2059,57 @@
       get maximumHeight() {
           return this.root.maximumHeight;
       }
+      get locked() {
+          return this._locked;
+      }
+      set locked(value) {
+          this._locked = value;
+          const branch = [this.root];
+          /**
+           * simple depth-first-search to cover all nodes
+           *
+           * @see https://en.wikipedia.org/wiki/Depth-first_search
+           */
+          while (branch.length > 0) {
+              const node = branch.pop();
+              if (node instanceof BranchNode) {
+                  node.disabled = value;
+                  branch.push(...node.children);
+              }
+          }
+      }
       maximizedView() {
           var _a;
-          return (_a = this._maximizedNode) === null || _a === void 0 ? void 0 : _a.view;
+          return (_a = this._maximizedNode) === null || _a === void 0 ? void 0 : _a.leaf.view;
       }
       hasMaximizedView() {
           return this._maximizedNode !== undefined;
       }
       maximizeView(view) {
+          var _a;
           const location = getGridLocation(view.element);
           const [_, node] = this.getNode(location);
           if (!(node instanceof LeafNode)) {
               return;
           }
-          if (this._maximizedNode === node) {
+          if (((_a = this._maximizedNode) === null || _a === void 0 ? void 0 : _a.leaf) === node) {
               return;
           }
           if (this.hasMaximizedView()) {
               this.exitMaximizedView();
           }
+          const hiddenOnMaximize = [];
           function hideAllViewsBut(parent, exclude) {
               for (let i = 0; i < parent.children.length; i++) {
                   const child = parent.children[i];
                   if (child instanceof LeafNode) {
                       if (child !== exclude) {
-                          parent.setChildVisible(i, false);
+                          if (parent.isChildVisible(i)) {
+                              parent.setChildVisible(i, false);
+                          }
+                          else {
+                              hiddenOnMaximize.push(child);
+                          }
                       }
                   }
                   else {
@@ -2056,18 +2118,21 @@
               }
           }
           hideAllViewsBut(this.root, node);
-          this._maximizedNode = node;
-          this._onDidMaxmizedNodeChange.fire();
+          this._maximizedNode = { leaf: node, hiddenOnMaximize };
+          this._onDidMaximizedNodeChange.fire();
       }
       exitMaximizedView() {
           if (!this._maximizedNode) {
               return;
           }
+          const hiddenOnMaximize = this._maximizedNode.hiddenOnMaximize;
           function showViewsInReverseOrder(parent) {
               for (let index = parent.children.length - 1; index >= 0; index--) {
                   const child = parent.children[index];
                   if (child instanceof LeafNode) {
-                      parent.setChildVisible(index, true);
+                      if (!hiddenOnMaximize.includes(child)) {
+                          parent.setChildVisible(index, true);
+                      }
                   }
                   else {
                       showViewsInReverseOrder(child);
@@ -2076,13 +2141,13 @@
           }
           showViewsInReverseOrder(this.root);
           this._maximizedNode = undefined;
-          this._onDidMaxmizedNodeChange.fire();
+          this._onDidMaximizedNodeChange.fire();
       }
       serialize() {
           if (this.hasMaximizedView()) {
               /**
-               * do not persist maximized view state but we must first exit any maximized views
-               * before serialization to ensure the correct dimensions are persisted
+               * do not persist maximized view state
+               * firstly exit any maximized views to ensure the correct dimensions are persisted
                */
               this.exitMaximizedView();
           }
@@ -2097,14 +2162,14 @@
       dispose() {
           this.disposable.dispose();
           this._onDidChange.dispose();
-          this._onDidMaxmizedNodeChange.dispose();
+          this._onDidMaximizedNodeChange.dispose();
           this.root.dispose();
           this._maximizedNode = undefined;
           this.element.remove();
       }
       clear() {
           const orientation = this.root.orientation;
-          this.root = new BranchNode(orientation, this.proportionalLayout, this.styles, this.root.size, this.root.orthogonalSize);
+          this.root = new BranchNode(orientation, this.proportionalLayout, this.styles, this.root.size, this.root.orthogonalSize, this._locked);
       }
       deserialize(json, deserializer) {
           const orientation = json.orientation;
@@ -2125,8 +2190,8 @@
                   };
               });
               result = new BranchNode(orientation, this.proportionalLayout, this.styles, node.size, // <- orthogonal size - flips at each depth
-              orthogonalSize, // <- size - flips at each depth
-              children);
+              orthogonalSize, // <- size - flips at each depth,
+              this._locked, children);
           }
           else {
               result = new LeafNode(deserializer.fromJSON(node), orientation, orthogonalSize, node.size);
@@ -2159,7 +2224,7 @@
           }
           const oldRoot = this.root;
           oldRoot.element.remove();
-          this._root = new BranchNode(orthogonal(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size);
+          this._root = new BranchNode(orthogonal(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size, this._locked);
           if (oldRoot.children.length === 0) ;
           else if (oldRoot.children.length === 1) {
               // can remove one level of redundant branching if there is only a single child
@@ -2227,15 +2292,16 @@
       constructor(proportionalLayout, styles, orientation) {
           this.proportionalLayout = proportionalLayout;
           this.styles = styles;
+          this._locked = false;
           this._maximizedNode = undefined;
           this.disposable = new MutableDisposable();
           this._onDidChange = new Emitter();
           this.onDidChange = this._onDidChange.event;
-          this._onDidMaxmizedNodeChange = new Emitter();
-          this.onDidMaxmizedNodeChange = this._onDidMaxmizedNodeChange.event;
+          this._onDidMaximizedNodeChange = new Emitter();
+          this.onDidMaximizedNodeChange = this._onDidMaximizedNodeChange.event;
           this.element = document.createElement('div');
           this.element.className = 'grid-view';
-          this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0);
+          this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0, this._locked);
       }
       isViewVisible(location) {
           const [rest, index] = tail(location);
@@ -2286,7 +2352,7 @@
               }
               const child = grandParent.removeChild(parentIndex);
               child.dispose();
-              const newParent = new BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize);
+              const newParent = new BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize, this._locked);
               grandParent.addChild(newParent, parent.size, parentIndex);
               const newSibling = new LeafNode(parent.view, grandParent.orientation, parent.size);
               newParent.addChild(newSibling, newSiblingSize, 0);
@@ -2914,13 +2980,36 @@
           return this.component.onDidDrop;
       }
       /**
-       * Invoked before a group is dragged. Exposed for custom Drag'n'Drop functionality.
+       * Invoked when a Drag'n'Drop event occurs but before dockview handles it giving the user an opportunity to intecept and
+       * prevent the event from occuring using the standard `preventDefault()` syntax.
+       *
+       * Preventing certain events may causes unexpected behaviours, use carefully.
+       */
+      get onWillDrop() {
+          return this.component.onWillDrop;
+      }
+      /**
+       * Invoked before an overlay is shown indicating a drop target.
+       *
+       * Calling `event.preventDefault()` will prevent the overlay being shown and prevent
+       * the any subsequent drop event.
+       */
+      get onWillShowOverlay() {
+          return this.component.onWillShowOverlay;
+      }
+      /**
+       * Invoked before a group is dragged.
+       *
+       * Calling `event.nativeEvent.preventDefault()` will prevent the group drag starting.
+       *
        */
       get onWillDragGroup() {
           return this.component.onWillDragGroup;
       }
       /**
-       * Invoked before a panel is dragged. Exposed for custom Drag'n'Drop functionality.
+       * Invoked before a panel is dragged.
+       *
+       * Calling `event.nativeEvent.preventDefault()` will prevent the panel drag starting.
        */
       get onWillDragPanel() {
           return this.component.onWillDragPanel;
@@ -3048,17 +3137,17 @@
       hasMaximizedGroup() {
           return this.component.hasMaximizedGroup();
       }
-      exitMaxmizedGroup() {
+      exitMaximizedGroup() {
           this.component.exitMaximizedGroup();
       }
-      get onDidMaxmizedGroupChange() {
-          return this.component.onDidMaxmizedGroupChange;
+      get onDidMaximizedGroupChange() {
+          return this.component.onDidMaximizedGroupChange;
       }
       /**
        * Add a popout group in a new Window
        */
       addPopoutGroup(item, options) {
-          this.component.addPopoutGroup(item, options);
+          return this.component.addPopoutGroup(item, options);
       }
   }
 
@@ -3112,6 +3201,18 @@
       }
   }
 
+  class WillShowOverlayEvent extends DockviewEvent {
+      get nativeEvent() {
+          return this.options.nativeEvent;
+      }
+      get position() {
+          return this.options.position;
+      }
+      constructor(options) {
+          super();
+          this.options = options;
+      }
+  }
   function directionToPosition(direction) {
       switch (direction) {
           case 'above':
@@ -3164,6 +3265,8 @@
           this.options = options;
           this._onDrop = new Emitter();
           this.onDrop = this._onDrop.event;
+          this._onWillShowOverlay = new Emitter();
+          this.onWillShowOverlay = this._onWillShowOverlay.event;
           // use a set to take advantage of #<set>.has
           this._acceptedTargetZonesSet = new Set(this.options.acceptedTargetZones);
           this.dnd = new DragAndDropObserver(this.element, {
@@ -3192,6 +3295,19 @@
                       this.removeDropTarget();
                       return;
                   }
+                  const willShowOverlayEvent = new WillShowOverlayEvent({
+                      nativeEvent: e,
+                      position: quadrant,
+                  });
+                  /**
+                   * Provide an opportunity to prevent the overlay appearing and in turn
+                   * any dnd behaviours
+                   */
+                  this._onWillShowOverlay.fire(willShowOverlayEvent);
+                  if (willShowOverlayEvent.defaultPrevented) {
+                      this.removeDropTarget();
+                      return;
+                  }
                   if (typeof this.options.canDisplayOverlay === 'boolean') {
                       if (!this.options.canDisplayOverlay) {
                           this.removeDropTarget();
@@ -3234,7 +3350,7 @@
                   }
               },
           });
-          this.addDisposables(this._onDrop, this.dnd);
+          this.addDisposables(this._onDrop, this._onWillShowOverlay, this.dnd);
       }
       setTargetZones(acceptedTargetZones) {
           this._acceptedTargetZonesSet = new Set(acceptedTargetZones);
@@ -3287,25 +3403,44 @@
                   size = clamp(0, sizeOptions.value, height) / height;
               }
           }
-          const translate = (1 - size) / 2;
-          const scale = size;
-          let transform;
+          const box = { top: '0px', left: '0px', width: '100%', height: '100%' };
+          /**
+           * You can also achieve the overlay placement using the transform CSS property
+           * to translate and scale the element however this has the undesired effect of
+           * 'skewing' the element. Comment left here for anybody that ever revisits this.
+           *
+           * @see https://developer.mozilla.org/en-US/docs/Web/CSS/transform
+           *
+           * right
+           * translateX(${100 * (1 - size) / 2}%) scaleX(${scale})
+           *
+           * left
+           * translateX(-${100 * (1 - size) / 2}%) scaleX(${scale})
+           *
+           * top
+           * translateY(-${100 * (1 - size) / 2}%) scaleY(${scale})
+           *
+           * bottom
+           * translateY(${100 * (1 - size) / 2}%) scaleY(${scale})
+           */
           if (rightClass) {
-              transform = `translateX(${100 * translate}%) scaleX(${scale})`;
+              box.left = `${100 * (1 - size)}%`;
+              box.width = `${100 * size}%`;
           }
           else if (leftClass) {
-              transform = `translateX(-${100 * translate}%) scaleX(${scale})`;
+              box.width = `${100 * size}%`;
           }
           else if (topClass) {
-              transform = `translateY(-${100 * translate}%) scaleY(${scale})`;
+              box.height = `${100 * size}%`;
           }
           else if (bottomClass) {
-              transform = `translateY(${100 * translate}%) scaleY(${scale})`;
-          }
-          else {
-              transform = '';
+              box.top = `${100 * (1 - size)}%`;
+              box.height = `${100 * size}%`;
           }
-          this.overlayElement.style.transform = transform;
+          this.overlayElement.style.top = box.top;
+          this.overlayElement.style.left = box.left;
+          this.overlayElement.style.width = box.width;
+          this.overlayElement.style.height = box.height;
           toggleClass(this.overlayElement, 'dv-drop-target-small-vertical', isSmallY);
           toggleClass(this.overlayElement, 'dv-drop-target-small-horizontal', isSmallX);
           toggleClass(this.overlayElement, 'dv-drop-target-left', isLeft);
@@ -3373,14 +3508,6 @@
       return 'center';
   }
 
-  exports.DockviewDropTargets = void 0;
-  (function (DockviewDropTargets) {
-      DockviewDropTargets[DockviewDropTargets["Tab"] = 0] = "Tab";
-      DockviewDropTargets[DockviewDropTargets["Panel"] = 1] = "Panel";
-      DockviewDropTargets[DockviewDropTargets["TabContainer"] = 2] = "TabContainer";
-      DockviewDropTargets[DockviewDropTargets["Edge"] = 3] = "Edge";
-  })(exports.DockviewDropTargets || (exports.DockviewDropTargets = {}));
-
   class ContentContainer extends CompositeDisposable {
       get element() {
           return this._element;
@@ -3408,7 +3535,7 @@
                   const data = getPanelData();
                   if (!data &&
                       event.shiftKey &&
-                      this.group.location !== 'floating') {
+                      this.group.location.type !== 'floating') {
                       return false;
                   }
                   if (data && data.viewId === this.accessor.id) {
@@ -3426,7 +3553,7 @@
                           data.groupId === this.group.id;
                       return !groupHasOnePanelAndIsActiveDragElement;
                   }
-                  return this.group.canDisplayOverlay(event, position, exports.DockviewDropTargets.Panel);
+                  return this.group.canDisplayOverlay(event, position, 'content');
               },
           });
           this.addDisposables(this.dropTarget);
@@ -3451,7 +3578,7 @@
           let container;
           switch (panel.api.renderer) {
               case 'onlyWhenVisibile':
-                  this.accessor.overlayRenderContainer.detatch(panel);
+                  this.group.renderContainer.detatch(panel);
                   if (this.panel) {
                       if (doRender) {
                           this._element.appendChild(this.panel.view.content.element);
@@ -3463,7 +3590,7 @@
                   if (panel.view.content.element.parentElement === this._element) {
                       this._element.removeChild(panel.view.content.element);
                   }
-                  container = this.accessor.overlayRenderContainer.attach({
+                  container = this.group.renderContainer.attach({
                       panel,
                       referenceContainer: this,
                   });
@@ -3494,9 +3621,10 @@
           // noop
       }
       closePanel() {
+          var _a;
           if (this.panel) {
               if (this.panel.api.renderer === 'onlyWhenVisibile') {
-                  this._element.removeChild(this.panel.view.content.element);
+                  (_a = this.panel.view.content.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.panel.view.content.element);
               }
           }
           this.panel = undefined;
@@ -3607,7 +3735,7 @@
           this._element.draggable = true;
           toggleClass(this.element, 'inactive-tab', true);
           const dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel);
-          this.droptarget = new Droptarget(this._element, {
+          this.dropTarget = new Droptarget(this._element, {
               acceptedTargetZones: ['center'],
               canDisplayOverlay: (event, position) => {
                   if (this.group.locked) {
@@ -3622,9 +3750,10 @@
                       }
                       return this.panel.id !== data.panelId;
                   }
-                  return this.group.model.canDisplayOverlay(event, position, exports.DockviewDropTargets.Tab);
+                  return this.group.model.canDisplayOverlay(event, position, 'tab');
               },
           });
+          this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
           this.addDisposables(this._onChanged, this._onDropped, this._onDragStart, dragHandler.onDragStart((event) => {
               this._onDragStart.fire(event);
           }), dragHandler, addDisposableListener(this._element, 'mousedown', (event) => {
@@ -3632,9 +3761,9 @@
                   return;
               }
               this._onChanged.fire(event);
-          }), this.droptarget.onDrop((event) => {
+          }), this.dropTarget.onDrop((event) => {
               this._onDropped.fire(event);
-          }), this.droptarget);
+          }), this.dropTarget);
       }
       setActive(isActive) {
           toggleClass(this.element, 'active-tab', isActive);
@@ -3681,7 +3810,7 @@
           }, true));
       }
       isCancelled(_event) {
-          if (this.group.api.location === 'floating' && !_event.shiftKey) {
+          if (this.group.api.location.type === 'floating' && !_event.shiftKey) {
               return true;
           }
           return false;
@@ -3733,7 +3862,7 @@
               this.accessor.doSetGroupActive(this.group);
           }));
           const handler = new GroupDragHandler(this._element, accessor, group);
-          this.voidDropTarget = new Droptarget(this._element, {
+          this.dropTraget = new Droptarget(this._element, {
               acceptedTargetZones: ['center'],
               canDisplayOverlay: (event, position) => {
                   var _a;
@@ -3747,14 +3876,15 @@
                       // don't show the overlay if the tab being dragged is the last panel of this group
                       return ((_a = last(this.group.panels)) === null || _a === void 0 ? void 0 : _a.id) !== data.panelId;
                   }
-                  return group.model.canDisplayOverlay(event, position, exports.DockviewDropTargets.Panel);
+                  return group.model.canDisplayOverlay(event, position, 'header_space');
               },
           });
+          this.onWillShowOverlay = this.dropTraget.onWillShowOverlay;
           this.addDisposables(handler, handler.onDragStart((event) => {
               this._onDragStart.fire(event);
-          }), this.voidDropTarget.onDrop((event) => {
+          }), this.dropTraget.onDrop((event) => {
               this._onDrop.fire(event);
-          }), this.voidDropTarget);
+          }), this.dropTraget);
       }
   }
 
@@ -3842,19 +3972,11 @@
           this.onTabDragStart = this._onTabDragStart.event;
           this._onGroupDragStart = new Emitter();
           this.onGroupDragStart = this._onGroupDragStart.event;
-          this.addDisposables(this._onDrop, this._onTabDragStart, this._onGroupDragStart);
+          this._onWillShowOverlay = new Emitter();
+          this.onWillShowOverlay = this._onWillShowOverlay.event;
           this._element = document.createElement('div');
           this._element.className = 'tabs-and-actions-container';
           toggleClass(this._element, 'dv-full-width-single-tab', this.accessor.options.singleTabMode === 'fullwidth');
-          this.addDisposables(this.accessor.onDidAddPanel((e) => {
-              if (e.api.group === this.group) {
-                  toggleClass(this._element, 'dv-single-tab', this.size === 1);
-              }
-          }), this.accessor.onDidRemovePanel((e) => {
-              if (e.api.group === this.group) {
-                  toggleClass(this._element, 'dv-single-tab', this.size === 1);
-              }
-          }));
           this.rightActionsContainer = document.createElement('div');
           this.rightActionsContainer.className = 'right-actions-container';
           this.leftActionsContainer = document.createElement('div');
@@ -3869,7 +3991,15 @@
           this._element.appendChild(this.leftActionsContainer);
           this._element.appendChild(this.voidContainer.element);
           this._element.appendChild(this.rightActionsContainer);
-          this.addDisposables(this.voidContainer, this.voidContainer.onDragStart((event) => {
+          this.addDisposables(this.accessor.onDidAddPanel((e) => {
+              if (e.api.group === this.group) {
+                  toggleClass(this._element, 'dv-single-tab', this.size === 1);
+              }
+          }), this.accessor.onDidRemovePanel((e) => {
+              if (e.api.group === this.group) {
+                  toggleClass(this._element, 'dv-single-tab', this.size === 1);
+              }
+          }), this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._onGroupDragStart, this.voidContainer, this.voidContainer.onDragStart((event) => {
               this._onGroupDragStart.fire({
                   nativeEvent: event,
                   group: this.group,
@@ -3879,11 +4009,15 @@
                   event: event.nativeEvent,
                   index: this.tabs.length,
               });
+          }), this.voidContainer.onWillShowOverlay((event) => {
+              this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+                  kind: 'header_space',
+              }));
           }), addDisposableListener(this.voidContainer.element, 'mousedown', (event) => {
               const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
               if (isFloatingGroupsEnabled &&
                   event.shiftKey &&
-                  this.group.api.location !== 'floating') {
+                  this.group.api.location.type !== 'floating') {
                   event.preventDefault();
                   const { top, left } = this.element.getBoundingClientRect();
                   const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
@@ -3946,9 +4080,9 @@
           const disposable = new CompositeDisposable(tab.onDragStart((event) => {
               this._onTabDragStart.fire({ nativeEvent: event, panel });
           }), tab.onChanged((event) => {
-              var _a;
               const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
-              const isFloatingWithOnePanel = this.group.api.location === 'floating' && this.size === 1;
+              const isFloatingWithOnePanel = this.group.api.location.type === 'floating' &&
+                  this.size === 1;
               if (isFloatingGroupsEnabled &&
                   !isFloatingWithOnePanel &&
                   event.shiftKey) {
@@ -3962,20 +4096,20 @@
                   }, { inDragMode: true });
                   return;
               }
-              const alreadyFocused = panel.id === ((_a = this.group.model.activePanel) === null || _a === void 0 ? void 0 : _a.id) &&
-                  this.group.model.isContentFocused;
               const isLeftClick = event.button === 0;
               if (!isLeftClick || event.defaultPrevented) {
                   return;
               }
-              this.group.model.openPanel(panel, {
-                  skipFocus: alreadyFocused,
-              });
+              if (this.group.activePanel !== panel) {
+                  this.group.model.openPanel(panel);
+              }
           }), tab.onDrop((event) => {
               this._onDrop.fire({
                   event: event.nativeEvent,
                   index: this.tabs.findIndex((x) => x.value === tab),
               });
+          }), tab.onWillShowOverlay((event) => {
+              this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, { kind: 'tab' }));
           }));
           const value = { value: tab, disposable };
           this.addTab(value, index);
@@ -3993,6 +4127,60 @@
       }
   }
 
+  class DockviewDidDropEvent extends DockviewEvent {
+      get nativeEvent() {
+          return this.options.nativeEvent;
+      }
+      get position() {
+          return this.options.position;
+      }
+      get panel() {
+          return this.options.panel;
+      }
+      get group() {
+          return this.options.group;
+      }
+      get api() {
+          return this.options.api;
+      }
+      constructor(options) {
+          super();
+          this.options = options;
+      }
+      getData() {
+          return this.options.getData();
+      }
+  }
+  class DockviewWillDropEvent extends DockviewDidDropEvent {
+      get kind() {
+          return this._kind;
+      }
+      constructor(options) {
+          super(options);
+          this._kind = options.kind;
+      }
+  }
+  class WillShowOverlayLocationEvent {
+      get kind() {
+          return this._kind;
+      }
+      get nativeEvent() {
+          return this.event.nativeEvent;
+      }
+      get position() {
+          return this.event.position;
+      }
+      get defaultPrevented() {
+          return this.event.defaultPrevented;
+      }
+      preventDefault() {
+          this.event.preventDefault();
+      }
+      constructor(event, options) {
+          this.event = event;
+          this._kind = options.kind;
+      }
+  }
   class DockviewGroupPanelModel extends CompositeDisposable {
       get element() {
           throw new Error('not supported');
@@ -4038,7 +4226,7 @@
           this._location = value;
           toggleClass(this.container, 'dv-groupview-floating', false);
           toggleClass(this.container, 'dv-groupview-popout', false);
-          switch (value) {
+          switch (value.type) {
               case 'grid':
                   this.contentContainer.dropTarget.setTargetZones([
                       'top',
@@ -4074,7 +4262,7 @@
           this.groupPanel = groupPanel;
           this._isGroupActive = false;
           this._locked = false;
-          this._location = 'grid';
+          this._location = { type: 'grid' };
           this.mostRecentlyUsed = [];
           this._onDidChange = new Emitter();
           this.onDidChange = this._onDidChange.event;
@@ -4085,6 +4273,10 @@
           this.onMove = this._onMove.event;
           this._onDidDrop = new Emitter();
           this.onDidDrop = this._onDidDrop.event;
+          this._onWillDrop = new Emitter();
+          this.onWillDrop = this._onWillDrop.event;
+          this._onWillShowOverlay = new Emitter();
+          this.onWillShowOverlay = this._onWillShowOverlay.event;
           this._onTabDragStart = new Emitter();
           this.onTabDragStart = this._onTabDragStart.event;
           this._onGroupDragStart = new Emitter();
@@ -4095,46 +4287,69 @@
           this.onDidRemovePanel = this._onDidRemovePanel.event;
           this._onDidActivePanelChange = new Emitter();
           this.onDidActivePanelChange = this._onDidActivePanelChange.event;
+          this._overwriteRenderContainer = null;
           toggleClass(this.container, 'groupview', true);
+          this._api = new DockviewApi(this.accessor);
           this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
           this.contentContainer = new ContentContainer(this.accessor, this);
           container.append(this.tabsContainer.element, this.contentContainer.element);
           this.header.hidden = !!options.hideHeader;
           this.locked = (_a = options.locked) !== null && _a !== void 0 ? _a : false;
-          this.addDisposables(this._onTabDragStart, this._onGroupDragStart, this.tabsContainer.onTabDragStart((event) => {
+          this.addDisposables(this._onTabDragStart, this._onGroupDragStart, this._onWillShowOverlay, this.tabsContainer.onTabDragStart((event) => {
               this._onTabDragStart.fire(event);
           }), this.tabsContainer.onGroupDragStart((event) => {
               this._onGroupDragStart.fire(event);
           }), this.tabsContainer.onDrop((event) => {
-              this.handleDropEvent(event.event, 'center', event.index);
+              this.handleDropEvent('header', event.event, 'center', event.index);
           }), this.contentContainer.onDidFocus(() => {
-              this.accessor.doSetGroupActive(this.groupPanel, true);
+              this.accessor.doSetGroupActive(this.groupPanel);
           }), this.contentContainer.onDidBlur(() => {
               // noop
           }), this.contentContainer.dropTarget.onDrop((event) => {
-              this.handleDropEvent(event.nativeEvent, event.position);
-          }), this._onMove, this._onDidChange, this._onDidDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange);
+              this.handleDropEvent('content', event.nativeEvent, event.position);
+          }), this.tabsContainer.onWillShowOverlay((event) => {
+              this._onWillShowOverlay.fire(event);
+          }), this.contentContainer.dropTarget.onWillShowOverlay((event) => {
+              this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+                  kind: 'content',
+              }));
+          }), this._onMove, this._onDidChange, this._onDidDrop, this._onWillDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange);
+      }
+      focusContent() {
+          this.contentContainer.element.focus();
+      }
+      set renderContainer(value) {
+          this.panels.forEach((panel) => {
+              this.renderContainer.detatch(panel);
+          });
+          this._overwriteRenderContainer = value;
+          this.panels.forEach((panel) => {
+              this.rerender(panel);
+          });
+      }
+      get renderContainer() {
+          var _a;
+          return ((_a = this._overwriteRenderContainer) !== null && _a !== void 0 ? _a : this.accessor.overlayRenderContainer);
       }
       initialize() {
-          var _a, _b;
-          if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.panels) {
+          if (this.options.panels) {
               this.options.panels.forEach((panel) => {
                   this.doAddPanel(panel);
               });
           }
-          if ((_b = this.options) === null || _b === void 0 ? void 0 : _b.activePanel) {
+          if (this.options.activePanel) {
               this.openPanel(this.options.activePanel);
           }
           // must be run after the constructor otherwise this.parent may not be
           // correctly initialized
-          this.setActive(this.isActive, true, true);
+          this.setActive(this.isActive, true);
           this.updateContainer();
           if (this.accessor.options.createRightHeaderActionsElement) {
               this._rightHeaderActions =
                   this.accessor.options.createRightHeaderActionsElement(this.groupPanel);
               this.addDisposables(this._rightHeaderActions);
               this._rightHeaderActions.init({
-                  containerApi: new DockviewApi(this.accessor),
+                  containerApi: this._api,
                   api: this.groupPanel.api,
               });
               this.tabsContainer.setRightActionsElement(this._rightHeaderActions.element);
@@ -4144,7 +4359,7 @@
                   this.accessor.options.createLeftHeaderActionsElement(this.groupPanel);
               this.addDisposables(this._leftHeaderActions);
               this._leftHeaderActions.init({
-                  containerApi: new DockviewApi(this.accessor),
+                  containerApi: this._api,
                   api: this.groupPanel.api,
               });
               this.tabsContainer.setLeftActionsElement(this._leftHeaderActions.element);
@@ -4154,7 +4369,7 @@
                   this.accessor.options.createPrefixHeaderActionsElement(this.groupPanel);
               this.addDisposables(this._prefixHeaderActions);
               this._prefixHeaderActions.init({
-                  containerApi: new DockviewApi(this.accessor),
+                  containerApi: this._api,
                   api: this.groupPanel.api,
               });
               this.tabsContainer.setPrefixActionsElement(this._prefixHeaderActions.element);
@@ -4234,35 +4449,45 @@
           //noop
       }
       focus() {
-          var _a, _b;
-          (_b = (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+          var _a;
+          (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus();
       }
       openPanel(panel, options = {}) {
+          /**
+           * set the panel group
+           * add the panel
+           * check if group active
+           * check if panel active
+           */
           if (typeof options.index !== 'number' ||
               options.index > this.panels.length) {
               options.index = this.panels.length;
           }
-          const skipSetPanelActive = !!options.skipSetPanelActive;
-          const skipSetGroupActive = !!options.skipSetGroupActive;
+          const skipSetActive = !!options.skipSetActive;
           // ensure the group is updated before we fire any events
-          panel.updateParentGroup(this.groupPanel, true);
+          panel.updateParentGroup(this.groupPanel, {
+              skipSetActive: options.skipSetActive,
+          });
+          this.doAddPanel(panel, options.index, {
+              skipSetActive: skipSetActive,
+          });
           if (this._activePanel === panel) {
-              if (!skipSetGroupActive) {
-                  this.accessor.doSetGroupActive(this.groupPanel);
-              }
               this.contentContainer.renderPanel(panel, { asActive: true });
               return;
           }
-          this.doAddPanel(panel, options.index, skipSetPanelActive);
-          if (!skipSetPanelActive) {
+          if (!skipSetActive) {
               this.doSetActivePanel(panel);
           }
-          if (!skipSetGroupActive) {
-              this.accessor.doSetGroupActive(this.groupPanel, !!options.skipFocus);
+          if (!options.skipSetGroupActive) {
+              this.accessor.doSetGroupActive(this.groupPanel);
+          }
+          if (!options.skipSetActive) {
+              this.updateContainer();
           }
-          this.updateContainer();
       }
-      removePanel(groupItemOrId) {
+      removePanel(groupItemOrId, options = {
+          skipSetActive: false,
+      }) {
           const id = typeof groupItemOrId === 'string'
               ? groupItemOrId
               : groupItemOrId.id;
@@ -4270,7 +4495,7 @@
           if (!panelToRemove) {
               throw new Error('invalid operation');
           }
-          return this._removePanel(panelToRemove);
+          return this._removePanel(panelToRemove, options);
       }
       closeAllPanels() {
           if (this.panels.length > 0) {
@@ -4296,12 +4521,8 @@
       updateActions(element) {
           this.tabsContainer.setRightActionsElement(element);
       }
-      setActive(isGroupActive, skipFocus = false, force = false) {
-          var _a, _b, _c, _d;
+      setActive(isGroupActive, force = false) {
           if (!force && this.isActive === isGroupActive) {
-              if (!skipFocus) {
-                  (_b = (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
-              }
               return;
           }
           this._isGroupActive = isGroupActive;
@@ -4312,11 +4533,6 @@
               this.doSetActivePanel(this.panels[0]);
           }
           this.updateContainer();
-          if (isGroupActive) {
-              if (!skipFocus) {
-                  (_d = (_c = this._activePanel) === null || _c === void 0 ? void 0 : _c.focus) === null || _d === void 0 ? void 0 : _d.call(_c);
-              }
-          }
       }
       layout(width, height) {
           var _a;
@@ -4327,17 +4543,22 @@
               this._activePanel.layout(this._width, this._height);
           }
       }
-      _removePanel(panel) {
+      _removePanel(panel, options) {
           const isActivePanel = this._activePanel === panel;
           this.doRemovePanel(panel);
           if (isActivePanel && this.panels.length > 0) {
               const nextPanel = this.mostRecentlyUsed[0];
-              this.openPanel(nextPanel);
+              this.openPanel(nextPanel, {
+                  skipSetActive: options.skipSetActive,
+                  skipSetGroupActive: options.skipSetActiveGroup,
+              });
           }
           if (this._activePanel && this.panels.length === 0) {
               this.doSetActivePanel(undefined);
           }
-          this.updateContainer();
+          if (!options.skipSetActive) {
+              this.updateContainer();
+          }
           return panel;
       }
       doRemovePanel(panel) {
@@ -4352,13 +4573,13 @@
           }
           this._onDidRemovePanel.fire({ panel });
       }
-      doAddPanel(panel, index = this.panels.length, skipSetActive = false) {
+      doAddPanel(panel, index = this.panels.length, options = { skipSetActive: false }) {
           const existingPanel = this._panels.indexOf(panel);
           const hasExistingPanel = existingPanel > -1;
           this.tabsContainer.show();
           this.contentContainer.show();
           this.tabsContainer.openPanel(panel, index);
-          if (!skipSetActive) {
+          if (!options.skipSetActive) {
               this.contentContainer.openPanel(panel);
           }
           if (hasExistingPanel) {
@@ -4370,12 +4591,17 @@
           this._onDidAddPanel.fire({ panel });
       }
       doSetActivePanel(panel) {
+          if (this._activePanel === panel) {
+              return;
+          }
           this._activePanel = panel;
           if (panel) {
               this.tabsContainer.setActivePanel(panel);
               panel.layout(this._width, this._height);
               this.updateMru(panel);
-              this._onDidActivePanelChange.fire({ panel });
+              this._onDidActivePanelChange.fire({
+                  panel,
+              });
           }
       }
       updateMru(panel) {
@@ -4387,11 +4613,11 @@
       updateContainer() {
           var _a, _b;
           toggleClass(this.container, 'empty', this.isEmpty);
-          this.panels.forEach((panel) => panel.updateParentGroup(this.groupPanel, this.isActive));
+          this.panels.forEach((panel) => panel.runEvents());
           if (this.isEmpty && !this.watermark) {
               const watermark = this.accessor.createWatermarkComponent();
               watermark.init({
-                  containerApi: new DockviewApi(this.accessor),
+                  containerApi: this._api,
                   group: this.groupPanel,
               });
               this.watermark = watermark;
@@ -4424,10 +4650,32 @@
           }
           return false;
       }
-      handleDropEvent(event, position, index) {
+      handleDropEvent(type, event, position, index) {
           if (this.locked === 'no-drop-target') {
               return;
           }
+          function getKind() {
+              switch (type) {
+                  case 'header':
+                      return typeof index === 'number' ? 'tab' : 'header_space';
+                  case 'content':
+                      return 'content';
+              }
+          }
+          const panel = typeof index === 'number' ? this.panels[index] : undefined;
+          const willDropEvent = new DockviewWillDropEvent({
+              nativeEvent: event,
+              position,
+              panel,
+              getData: () => getPanelData(),
+              kind: getKind(),
+              group: this.groupPanel,
+              api: this._api,
+          });
+          this._onWillDrop.fire(willDropEvent);
+          if (willDropEvent.defaultPrevented) {
+              return;
+          }
           const data = getPanelData();
           if (data && data.viewId === this.accessor.id) {
               if (data.panelId === null) {
@@ -4460,12 +4708,14 @@
               });
           }
           else {
-              this._onDidDrop.fire({
+              this._onDidDrop.fire(new DockviewDidDropEvent({
                   nativeEvent: event,
                   position,
-                  index,
+                  panel,
                   getData: () => getPanelData(),
-              });
+                  group: this.groupPanel,
+                  api: this._api,
+              }));
           }
       }
       dispose() {
@@ -4473,6 +4723,7 @@
           super.dispose();
           (_a = this.watermark) === null || _a === void 0 ? void 0 : _a.element.remove();
           (_c = (_b = this.watermark) === null || _b === void 0 ? void 0 : _b.dispose) === null || _c === void 0 ? void 0 : _c.call(_b);
+          this.watermark = undefined;
           for (const panel of this.panels) {
               panel.dispose();
           }
@@ -4494,15 +4745,7 @@
       constructor(parentElement, disableResizing = false) {
           super();
           this._disableResizing = disableResizing;
-          if (parentElement) {
-              this._element = parentElement;
-          }
-          else {
-              this._element = document.createElement('div');
-              this._element.style.height = '100%';
-              this._element.style.width = '100%';
-              this._element.className = 'dv-resizable-container';
-          }
+          this._element = parentElement;
           this.addDisposables(watchElementResize(this._element, (entry) => {
               if (this.isDisposed) {
                   /**
@@ -4590,25 +4833,38 @@
       get activeGroup() {
           return this._activeGroup;
       }
+      get locked() {
+          return this.gridview.locked;
+      }
+      set locked(value) {
+          this.gridview.locked = value;
+      }
       constructor(options) {
-          super(options.parentElement, options.disableAutoResizing);
+          super(document.createElement('div'), options.disableAutoResizing);
           this._id = nextLayoutId$1.next();
           this._groups = new Map();
           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._onDidRemove = new Emitter();
+          this.onDidRemove = this._onDidRemove.event;
+          this._onDidAdd = new Emitter();
+          this.onDidAdd = this._onDidAdd.event;
+          this._onDidActiveChange = new Emitter();
+          this.onDidActiveChange = this._onDidActiveChange.event;
           this._bufferOnDidLayoutChange = new TickDelayedEvent();
+          this.element.style.height = '100%';
+          this.element.style.width = '100%';
+          options.parentElement.appendChild(this.element);
           this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation);
+          this.gridview.locked = !!options.locked;
           this.element.appendChild(this.gridview.element);
           this.layout(0, 0, true); // set some elements height/widths
-          this.addDisposables(this.gridview.onDidChange(() => {
+          this.addDisposables(Disposable.from(() => {
+              var _a;
+              (_a = this.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.element);
+          }), this.gridview.onDidChange(() => {
               this._bufferOnDidLayoutChange.fire();
-          }), exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
+          }), exports.DockviewEvent.any(this.onDidAdd, this.onDidRemove, this.onDidActiveChange)(() => {
               this._bufferOnDidLayoutChange.fire();
           }), this._bufferOnDidLayoutChange.onEvent(() => {
               this._onDidLayoutChange.fire();
@@ -4623,6 +4879,7 @@
       }
       maximizeGroup(panel) {
           this.gridview.maximizeView(panel);
+          this.doSetGroupActive(panel);
       }
       isMaximizedGroup(panel) {
           return this.gridview.maximizedView() === panel;
@@ -4633,13 +4890,12 @@
       hasMaximizedGroup() {
           return this.gridview.hasMaximizedView();
       }
-      get onDidMaxmizedGroupChange() {
-          return this.gridview.onDidMaxmizedNodeChange;
+      get onDidMaximizedGroupChange() {
+          return this.gridview.onDidMaximizedNodeChange;
       }
       doAddGroup(group, location = [0], size) {
           this.gridview.addView(group, size !== null && size !== void 0 ? size : exports.Sizing.Distribute, location);
-          this._onDidAddGroup.fire(group);
-          this.doSetGroupActive(group);
+          this._onDidAdd.fire(group);
       }
       doRemoveGroup(group, options) {
           if (!this._groups.has(group.id)) {
@@ -4651,8 +4907,8 @@
               item.disposable.dispose();
               item.value.dispose();
               this._groups.delete(group.id);
+              this._onDidRemove.fire(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);
@@ -4663,25 +4919,18 @@
           var _a;
           return (_a = this._groups.get(id)) === null || _a === void 0 ? void 0 : _a.value;
       }
-      doSetGroupActive(group, skipFocus) {
-          var _a, _b, _c;
+      doSetGroupActive(group) {
           if (this._activeGroup === group) {
               return;
           }
           if (this._activeGroup) {
               this._activeGroup.setActive(false);
-              if (!skipFocus) {
-                  (_b = (_a = this._activeGroup).focus) === null || _b === void 0 ? void 0 : _b.call(_a);
-              }
           }
           if (group) {
               group.setActive(true);
-              if (!skipFocus) {
-                  (_c = group.focus) === null || _c === void 0 ? void 0 : _c.call(group);
-              }
           }
           this._activeGroup = group;
-          this._onDidActiveGroupChange.fire(group);
+          this._onDidActiveChange.fire(group);
       }
       removeGroup(group) {
           this.doRemoveGroup(group);
@@ -4726,9 +4975,9 @@
           this.gridview.layout(width, height);
       }
       dispose() {
-          this._onDidActiveGroupChange.dispose();
-          this._onDidAddGroup.dispose();
-          this._onDidRemoveGroup.dispose();
+          this._onDidActiveChange.dispose();
+          this._onDidAdd.dispose();
+          this._onDidRemove.dispose();
           this._onDidLayoutChange.dispose();
           for (const group of this.groups) {
               group.dispose();
@@ -4738,11 +4987,15 @@
       }
   }
 
+  class WillFocusEvent extends DockviewEvent {
+      constructor() {
+          super();
+      }
+  }
   /**
    * A core api implementation that should be used across all panel-like objects
    */
   class PanelApiImpl extends CompositeDisposable {
-      //
       get isFocused() {
           return this._isFocused;
       }
@@ -4767,35 +5020,22 @@
           this._width = 0;
           this._height = 0;
           this.panelUpdatesDisposable = new MutableDisposable();
-          this._onDidDimensionChange = new Emitter({
-              replay: true,
-          });
+          this._onDidDimensionChange = new Emitter();
           this.onDidDimensionsChange = this._onDidDimensionChange.event;
-          //
-          this._onDidChangeFocus = new Emitter({
-              replay: true,
-          });
+          this._onDidChangeFocus = new Emitter();
           this.onDidFocusChange = this._onDidChangeFocus.event;
           //
-          this._onFocusEvent = new Emitter();
-          this.onFocusEvent = this._onFocusEvent.event;
+          this._onWillFocus = new Emitter();
+          this.onWillFocus = this._onWillFocus.event;
           //
-          this._onDidVisibilityChange = new Emitter({
-              replay: true,
-          });
+          this._onDidVisibilityChange = new Emitter();
           this.onDidVisibilityChange = this._onDidVisibilityChange.event;
-          //
-          this._onVisibilityChange = new Emitter();
-          this.onVisibilityChange = this._onVisibilityChange.event;
-          //
-          this._onDidActiveChange = new Emitter({
-              replay: true,
-          });
+          this._onWillVisibilityChange = new Emitter();
+          this.onWillVisibilityChange = this._onWillVisibilityChange.event;
+          this._onDidActiveChange = new Emitter();
           this.onDidActiveChange = this._onDidActiveChange.event;
-          //
           this._onActiveChange = new Emitter();
           this.onActiveChange = this._onActiveChange.event;
-          //
           this._onUpdateParameters = new Emitter();
           this.onUpdateParameters = this._onUpdateParameters.event;
           this.addDisposables(this.onDidFocusChange((event) => {
@@ -4807,7 +5047,7 @@
           }), this.onDidDimensionsChange((event) => {
               this._width = event.width;
               this._height = event.height;
-          }), this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this._onUpdateParameters);
+          }), this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onWillFocus, this._onActiveChange, this._onUpdateParameters, this._onWillFocus, this._onWillVisibilityChange, this._onUpdateParameters);
       }
       initialize(panel) {
           this.panelUpdatesDisposable.value = this._onUpdateParameters.event((parameters) => {
@@ -4817,7 +5057,7 @@
           });
       }
       setVisible(isVisible) {
-          this._onVisibilityChange.fire({ isVisible });
+          this._onWillVisibilityChange.fire({ isVisible });
       }
       setActive() {
           this._onActiveChange.fire();
@@ -4825,9 +5065,6 @@
       updateParameters(parameters) {
           this._onUpdateParameters.fire(parameters);
       }
-      dispose() {
-          super.dispose();
-      }
   }
 
   class SplitviewPanelApiImpl extends PanelApiImpl {
@@ -4915,7 +5152,12 @@
           }), focusTracker);
       }
       focus() {
-          this.api._onFocusEvent.fire();
+          const event = new WillFocusEvent();
+          this.api._onWillFocus.fire(event);
+          if (event.defaultPrevented) {
+              return;
+          }
+          this._element.focus();
       }
       layout(width, height) {
           this._width = width;
@@ -5033,7 +5275,11 @@
           this._onDidChangeExpansionState.fire(this.isExpanded()); // initialize value
           this._orientation = orientation;
           this.element.classList.add('pane');
-          this.addDisposables(this.api.onDidSizeChange((event) => {
+          this.addDisposables(this.api.onWillVisibilityChange((event) => {
+              const { isVisible } = event;
+              const { accessor } = this._params;
+              accessor.setVisible(this, isVisible);
+          }), this.api.onDidSizeChange((event) => {
               this._onDidChange.fire({ size: event.size });
           }), addDisposableListener(this.element, 'mouseenter', (ev) => {
               this.api._onMouseEnter.fire(ev);
@@ -5244,9 +5490,7 @@
           super(id);
           this._onDidConstraintsChangeInternal = new Emitter();
           this.onDidConstraintsChangeInternal = this._onDidConstraintsChangeInternal.event;
-          this._onDidConstraintsChange = new Emitter({
-              replay: true,
-          });
+          this._onDidConstraintsChange = new Emitter();
           this.onDidConstraintsChange = this._onDidConstraintsChange.event;
           this._onDidSizeChange = new Emitter();
           this.onDidSizeChange = this._onDidSizeChange.event;
@@ -5339,13 +5583,13 @@
               this._maximumHeight = options.maximumHeight;
           }
           this.api.initialize(this); // TODO: required to by-pass 'super before this' requirement
-          this.addDisposables(this.api.onVisibilityChange((event) => {
+          this.addDisposables(this.api.onWillVisibilityChange((event) => {
               const { isVisible } = event;
               const { accessor } = this._params;
               accessor.setVisible(this, isVisible);
           }), this.api.onActiveChange(() => {
               const { accessor } = this._params;
-              accessor.setActive(this);
+              accessor.doSetGroupActive(this);
           }), this.api.onDidConstraintsChangeInternal((event) => {
               if (typeof event.minimumWidth === 'number' ||
                   typeof event.minimumWidth === 'function') {
@@ -5428,6 +5672,17 @@
           this.onDidLocationChange = this._onDidLocationChange.event;
           this.addDisposables(this._onDidLocationChange);
       }
+      close() {
+          if (!this._group) {
+              return;
+          }
+          return this.accessor.removeGroup(this._group);
+      }
+      getWindow() {
+          return this.location.type === 'popout'
+              ? this.location.getWindow()
+              : window;
+      }
       moveTo(options) {
           var _a, _b, _c;
           if (!this._group) {
@@ -5435,14 +5690,23 @@
           }
           const group = (_a = options.group) !== null && _a !== void 0 ? _a : this.accessor.addGroup({
               direction: positionToDirection((_b = options.position) !== null && _b !== void 0 ? _b : 'right'),
+              skipSetActive: true,
+          });
+          this.accessor.moveGroupOrPanel({
+              from: { groupId: this._group.id },
+              to: {
+                  group,
+                  position: options.group
+                      ? (_c = options.position) !== null && _c !== void 0 ? _c : 'center'
+                      : 'center',
+              },
           });
-          this.accessor.moveGroupOrPanel(group, this._group.id, undefined, options.group ? (_c = options.position) !== null && _c !== void 0 ? _c : 'center' : 'center');
       }
       maximize() {
           if (!this._group) {
               throw new Error(NOT_INITIALIZED_MESSAGE);
           }
-          if (this.location !== 'grid') {
+          if (this.location.type !== 'grid') {
               // only grid groups can be maximized
               return;
           }
@@ -5499,6 +5763,12 @@
           this.api.initialize(this); // cannot use 'this' after after 'super' call
           this._model = new DockviewGroupPanelModel(this.element, accessor, id, options, this);
       }
+      focus() {
+          if (!this.api.isActive) {
+              this.api.setActive();
+          }
+          super.focus();
+      }
       initialize() {
           this._model.initialize();
       }
@@ -5544,6 +5814,9 @@
   }
 
   class DockviewPanelApiImpl extends GridviewPanelApiImpl {
+      get location() {
+          return this.group.api.location;
+      }
       get title() {
           return this.panel.title;
       }
@@ -5554,16 +5827,14 @@
           return this.panel.renderer;
       }
       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();
+          const oldGroup = this._group;
+          if (this._group !== value) {
+              this._group = value;
+              this._onDidGroupChange.fire({});
+              this.setupGroupEventListeners(oldGroup);
+              this._onDidLocationChange.fire({
+                  location: this.group.api.location,
               });
-              if (this.isGroupActive !== isOldGroupActive) {
-                  this._onDidActiveGroupChange.fire();
-              }
           }
       }
       get group() {
@@ -5581,14 +5852,27 @@
           this.onDidGroupChange = this._onDidGroupChange.event;
           this._onDidRendererChange = new Emitter();
           this.onDidRendererChange = this._onDidRendererChange.event;
-          this.disposable = new MutableDisposable();
+          this._onDidLocationChange = new Emitter();
+          this.onDidLocationChange = this._onDidLocationChange.event;
+          this.groupEventsDisposable = new MutableDisposable();
           this.initialize(panel);
           this._group = group;
-          this.addDisposables(this.disposable, this._onDidRendererChange, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange);
+          this.setupGroupEventListeners();
+          this.addDisposables(this.groupEventsDisposable, this._onDidRendererChange, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange, this._onDidLocationChange);
+      }
+      getWindow() {
+          return this.group.api.getWindow();
       }
       moveTo(options) {
           var _a;
-          this.accessor.moveGroupOrPanel(options.group, this._group.id, this.panel.id, (_a = options.position) !== null && _a !== void 0 ? _a : 'center', options.index);
+          this.accessor.moveGroupOrPanel({
+              from: { groupId: this._group.id, panelId: this.panel.id },
+              to: {
+                  group: options.group,
+                  position: (_a = options.position) !== null && _a !== void 0 ? _a : 'center',
+                  index: options.index,
+              },
+          });
       }
       setTitle(title) {
           this.panel.setTitle(title);
@@ -5608,6 +5892,35 @@
       exitMaximized() {
           this.group.api.exitMaximized();
       }
+      setupGroupEventListeners(previousGroup) {
+          var _a;
+          let _trackGroupActive = (_a = previousGroup === null || previousGroup === void 0 ? void 0 : previousGroup.isActive) !== null && _a !== void 0 ? _a : false; // prevent duplicate events with same state
+          this.groupEventsDisposable.value = new CompositeDisposable(this.group.api.onDidVisibilityChange((event) => {
+              if (!event.isVisible && this.isVisible) {
+                  this._onDidVisibilityChange.fire(event);
+              }
+              else if (event.isVisible &&
+                  !this.isVisible &&
+                  this.group.model.isPanelActive(this.panel)) {
+                  this._onDidVisibilityChange.fire(event);
+              }
+          }), this.group.api.onDidLocationChange((event) => {
+              if (this.group !== this.panel.group) {
+                  return;
+              }
+              this._onDidLocationChange.fire(event);
+          }), this.group.api.onDidActiveChange(() => {
+              if (this.group !== this.panel.group) {
+                  return;
+              }
+              if (_trackGroupActive !== this.isGroupActive) {
+                  _trackGroupActive = this.isGroupActive;
+                  this._onDidActiveGroupChange.fire({
+                      isActive: this.isGroupActive,
+                  });
+              }
+          }));
+      }
   }
 
   class DockviewPanel extends CompositeDisposable {
@@ -5649,7 +5962,14 @@
           this.setTitle(params.title);
       }
       focus() {
-          this.api._onFocusEvent.fire();
+          const event = new WillFocusEvent();
+          this.api._onWillFocus.fire(event);
+          if (event.defaultPrevented) {
+              return;
+          }
+          if (!this.api.isActive) {
+              this.api.setActive();
+          }
       }
       toJSON() {
           return {
@@ -5706,20 +6026,40 @@
               },
           });
       }
-      updateParentGroup(group, isGroupActive) {
+      updateParentGroup(group, options) {
           this._group = group;
-          this.api.group = group;
+          this.api.group = this._group;
           const isPanelVisible = this._group.model.isPanelActive(this);
-          this.api._onDidActiveChange.fire({
-              isActive: isGroupActive && isPanelVisible,
-          });
-          this.api._onDidVisibilityChange.fire({
-              isVisible: isPanelVisible,
-          });
-          this.view.updateParentGroup(this._group, this._group.model.isPanelActive(this));
+          const isActive = this.group.api.isActive && isPanelVisible;
+          if (!(options === null || options === void 0 ? void 0 : options.skipSetActive)) {
+              if (this.api.isActive !== isActive) {
+                  this.api._onDidActiveChange.fire({
+                      isActive: this.group.api.isActive && isPanelVisible,
+                  });
+              }
+          }
+          if (this.api.isVisible !== isPanelVisible) {
+              this.api._onDidVisibilityChange.fire({
+                  isVisible: isPanelVisible,
+              });
+          }
+      }
+      runEvents() {
+          const isPanelVisible = this._group.model.isPanelActive(this);
+          const isActive = this.group.api.isActive && isPanelVisible;
+          if (this.api.isActive !== isActive) {
+              this.api._onDidActiveChange.fire({
+                  isActive: this.group.api.isActive && isPanelVisible,
+              });
+          }
+          if (this.api.isVisible !== isPanelVisible) {
+              this.api._onDidVisibilityChange.fire({
+                  isVisible: isPanelVisible,
+              });
+          }
       }
       layout(width, height) {
-          // the obtain the correct dimensions of the content panel we must deduct the tab height
+          // TODO: Can we somehow do height without header height or indicate what the header height is?
           this.api._onDidDimensionChange.fire({
               width,
               height: height,
@@ -5841,8 +6181,6 @@
           this.id = id;
           this.contentComponent = contentComponent;
           this.tabComponent = tabComponent;
-          this._group = null;
-          this._isPanelVisible = null;
           this._content = this.createContentComponent(this.id, contentComponent);
           this._tab = this.createTabComponent(this.id, tabComponent);
       }
@@ -5850,25 +6188,8 @@
           this.content.init(Object.assign(Object.assign({}, params), { tab: this.tab }));
           this.tab.init(params);
       }
-      updateParentGroup(group, isPanelVisible) {
-          if (group !== this._group) {
-              this._group = group;
-              if (this._content.onGroupChange) {
-                  this._content.onGroupChange(group);
-              }
-              if (this._tab.onGroupChange) {
-                  this._tab.onGroupChange(group);
-              }
-          }
-          if (isPanelVisible !== this._isPanelVisible) {
-              this._isPanelVisible = isPanelVisible;
-              if (this._content.onPanelVisibleChange) {
-                  this._content.onPanelVisibleChange(isPanelVisible);
-              }
-              if (this._tab.onPanelVisibleChange) {
-                  this._tab.onPanelVisibleChange(isPanelVisible);
-              }
-          }
+      updateParentGroup(_group, _isPanelVisible) {
+          // noop
       }
       layout(width, height) {
           var _a, _b;
@@ -6301,117 +6622,6 @@
       }
   }
 
-  class PopoutWindow extends CompositeDisposable {
-      constructor(id, className, options) {
-          super();
-          this.id = id;
-          this.className = className;
-          this.options = options;
-          this._onDidClose = new Emitter();
-          this.onDidClose = this._onDidClose.event;
-          this._window = null;
-          this.addDisposables(this._onDidClose, {
-              dispose: () => {
-                  this.close();
-              },
-          });
-      }
-      dimensions() {
-          if (!this._window) {
-              return null;
-          }
-          const left = this._window.value.screenX;
-          const top = this._window.value.screenY;
-          const width = this._window.value.innerWidth;
-          const height = this._window.value.innerHeight;
-          return { top, left, width, height };
-      }
-      close() {
-          if (this._window) {
-              this._window.disposable.dispose();
-              this._window.value.close();
-              this._window = null;
-          }
-      }
-      open(content) {
-          if (this._window) {
-              throw new Error('instance of popout window is already open');
-          }
-          const url = `${this.options.url}`;
-          const features = Object.entries({
-              top: this.options.top,
-              left: this.options.left,
-              width: this.options.width,
-              height: this.options.height,
-          })
-              .map(([key, value]) => `${key}=${value}`)
-              .join(',');
-          // https://developer.mozilla.org/en-US/docs/Web/API/Window/open
-          const externalWindow = window.open(url, this.id, features);
-          if (!externalWindow) {
-              return;
-          }
-          const disposable = new CompositeDisposable();
-          this._window = { value: externalWindow, disposable };
-          const cleanUp = () => {
-              this._onDidClose.fire();
-              this._window = null;
-          };
-          // prevent any default content from loading
-          // externalWindow.document.body.replaceWith(document.createElement('div'));
-          disposable.addDisposables(addDisposableWindowListener(window, 'beforeunload', () => {
-              cleanUp();
-              this.close();
-          }));
-          externalWindow.addEventListener('load', () => {
-              const externalDocument = externalWindow.document;
-              externalDocument.title = document.title;
-              const div = document.createElement('div');
-              div.classList.add('dv-popout-window');
-              div.style.position = 'absolute';
-              div.style.width = '100%';
-              div.style.height = '100%';
-              div.style.top = '0px';
-              div.style.left = '0px';
-              div.classList.add(this.className);
-              div.appendChild(content);
-              externalDocument.body.replaceChildren(div);
-              externalDocument.body.classList.add(this.className);
-              addStyles(externalDocument, window.document.styleSheets);
-              externalWindow.addEventListener('beforeunload', () => {
-                  // TODO: indicate external window is closing
-                  cleanUp();
-              });
-          });
-      }
-  }
-
-  class DockviewPopoutGroupPanel extends CompositeDisposable {
-      constructor(id, group, options) {
-          var _a;
-          super();
-          this.id = id;
-          this.group = group;
-          this.options = options;
-          this.window = new PopoutWindow(id, (_a = options.className) !== null && _a !== void 0 ? _a : '', {
-              url: this.options.popoutUrl,
-              left: this.options.box.left,
-              top: this.options.box.top,
-              width: this.options.box.width,
-              height: this.options.box.height,
-          });
-          group.model.location = 'popout';
-          this.addDisposables(this.window, {
-              dispose: () => {
-                  group.model.location = 'grid';
-              },
-          }, this.window.onDidClose(() => {
-              this.dispose();
-          }));
-          this.window.open(group.element);
-      }
-  }
-
   const DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
   const DEFAULT_FLOATING_GROUP_POSITION = { left: 100, top: 100 };
 
@@ -6425,11 +6635,13 @@
           super();
           this.element = element;
           this.map = {};
+          this._disposed = false;
           this.addDisposables(Disposable.from(() => {
               for (const value of Object.values(this.map)) {
                   value.disposable.dispose();
                   value.destroy.dispose();
               }
+              this._disposed = true;
           }));
       }
       detatch(panel) {
@@ -6469,7 +6681,7 @@
               focusContainer.style.top = `${box.top - box2.top}px`;
               focusContainer.style.width = `${box.width}px`;
               focusContainer.style.height = `${box.height}px`;
-              toggleClass(focusContainer, 'dv-render-overlay-float', panel.group.api.location === 'floating');
+              toggleClass(focusContainer, 'dv-render-overlay-float', panel.group.api.location.type === 'floating');
           };
           const visibilityChanged = () => {
               if (panel.api.isVisible) {
@@ -6515,8 +6727,11 @@
               resize();
           }));
           this.map[panel.api.id].destroy = Disposable.from(() => {
-              focusContainer.removeChild(panel.view.content.element);
-              this.element.removeChild(focusContainer);
+              var _a;
+              if (panel.view.content.element.parentElement === focusContainer) {
+                  focusContainer.removeChild(panel.view.content.element);
+              }
+              (_a = focusContainer.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(focusContainer);
           });
           queueMicrotask(() => {
               if (this.isDisposed) {
@@ -6537,11 +6752,187 @@
       }
   }
 
+  /******************************************************************************
+  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.
+  ***************************************************************************** */
+  /* global Reflect, Promise, SuppressedError, Symbol */
+
+
+  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());
+      });
+  }
+
+  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+      var e = new Error(message);
+      return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+  };
+
+  class PopoutWindow extends CompositeDisposable {
+      get window() {
+          var _a, _b;
+          return (_b = (_a = this._window) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : null;
+      }
+      constructor(target, className, options) {
+          super();
+          this.target = target;
+          this.className = className;
+          this.options = options;
+          this._onWillClose = new Emitter();
+          this.onWillClose = this._onWillClose.event;
+          this._onDidClose = new Emitter();
+          this.onDidClose = this._onDidClose.event;
+          this._window = null;
+          this.addDisposables(this._onWillClose, this._onDidClose, {
+              dispose: () => {
+                  this.close();
+              },
+          });
+      }
+      dimensions() {
+          if (!this._window) {
+              return null;
+          }
+          const left = this._window.value.screenX;
+          const top = this._window.value.screenY;
+          const width = this._window.value.innerWidth;
+          const height = this._window.value.innerHeight;
+          return { top, left, width, height };
+      }
+      close() {
+          var _a, _b;
+          if (this._window) {
+              this._onWillClose.fire();
+              (_b = (_a = this.options).onWillClose) === null || _b === void 0 ? void 0 : _b.call(_a, {
+                  id: this.target,
+                  window: this._window.value,
+              });
+              this._window.disposable.dispose();
+              this._window.value.close();
+              this._window = null;
+              this._onDidClose.fire();
+          }
+      }
+      open() {
+          var _a, _b;
+          return __awaiter(this, void 0, void 0, function* () {
+              if (this._window) {
+                  throw new Error('instance of popout window is already open');
+              }
+              const url = `${this.options.url}`;
+              const features = Object.entries({
+                  top: this.options.top,
+                  left: this.options.left,
+                  width: this.options.width,
+                  height: this.options.height,
+              })
+                  .map(([key, value]) => `${key}=${value}`)
+                  .join(',');
+              /**
+               * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/open
+               */
+              const externalWindow = window.open(url, this.target, features);
+              if (!externalWindow) {
+                  /**
+                   * Popup blocked
+                   */
+                  return null;
+              }
+              const disposable = new CompositeDisposable();
+              this._window = { value: externalWindow, disposable };
+              disposable.addDisposables(addDisposableWindowListener(window, 'beforeunload', () => {
+                  /**
+                   * before the main window closes we should close this popup too
+                   * to be good citizens
+                   *
+                   * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
+                   */
+                  this.close();
+              }));
+              const container = this.createPopoutWindowContainer();
+              if (this.className) {
+                  container.classList.add(this.className);
+              }
+              (_b = (_a = this.options).onDidOpen) === null || _b === void 0 ? void 0 : _b.call(_a, {
+                  id: this.target,
+                  window: externalWindow,
+              });
+              return new Promise((resolve) => {
+                  externalWindow.addEventListener('unload', (e) => {
+                      // if page fails to load before unloading
+                      // this.close();
+                  });
+                  externalWindow.addEventListener('load', () => {
+                      /**
+                       * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
+                       */
+                      const externalDocument = externalWindow.document;
+                      externalDocument.title = document.title;
+                      externalDocument.body.appendChild(container);
+                      addStyles(externalDocument, window.document.styleSheets);
+                      /**
+                       * beforeunload must be registered after load for reasons I could not determine
+                       * otherwise the beforeunload event will not fire when the window is closed
+                       */
+                      addDisposableWindowListener(externalWindow, 'beforeunload', () => {
+                          /**
+                           * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
+                           */
+                          this.close();
+                      });
+                      resolve(container);
+                  });
+              });
+          });
+      }
+      createPopoutWindowContainer() {
+          const el = document.createElement('div');
+          el.classList.add('dv-popout-window');
+          el.id = 'dv-popout-window';
+          el.style.position = 'absolute';
+          el.style.width = '100%';
+          el.style.height = '100%';
+          el.style.top = '0px';
+          el.style.left = '0px';
+          return el;
+      }
+  }
+
   const DEFAULT_ROOT_OVERLAY_MODEL = {
       activationSize: { type: 'pixels', value: 10 },
       size: { type: 'pixels', value: 20 },
   };
-  function getTheme(element) {
+  function moveGroupWithoutDestroying(options) {
+      const activePanel = options.from.activePanel;
+      const panels = [...options.from.panels].map((panel) => {
+          const removedPanel = options.from.model.removePanel(panel);
+          options.from.model.renderContainer.detatch(panel);
+          return removedPanel;
+      });
+      panels.forEach((panel) => {
+          options.to.model.openPanel(panel, {
+              skipSetActive: activePanel !== panel,
+              skipSetGroupActive: true,
+          });
+      });
+  }
+  function getDockviewTheme(element) {
       function toClassList(element) {
           const list = [];
           for (let i = 0; i < element.classList.length; i++) {
@@ -6592,6 +6983,7 @@
               styles: options.styles,
               parentElement: options.parentElement,
               disableAutoResizing: options.disableAutoResizing,
+              locked: options.locked,
           });
           this.nextGroupId = sequentialNumberGenerator();
           this._deserializer = new DefaultDockviewDeserialzier(this);
@@ -6602,6 +6994,10 @@
           this.onWillDragGroup = this._onWillDragGroup.event;
           this._onDidDrop = new Emitter();
           this.onDidDrop = this._onDidDrop.event;
+          this._onWillDrop = new Emitter();
+          this.onWillDrop = this._onWillDrop.event;
+          this._onWillShowOverlay = new Emitter();
+          this.onWillShowOverlay = this._onWillShowOverlay.event;
           this._onDidRemovePanel = new Emitter();
           this.onDidRemovePanel = this._onDidRemovePanel.event;
           this._onDidAddPanel = new Emitter();
@@ -6610,15 +7006,36 @@
           this.onDidLayoutFromJSON = this._onDidLayoutFromJSON.event;
           this._onDidActivePanelChange = new Emitter();
           this.onDidActivePanelChange = this._onDidActivePanelChange.event;
+          this._onDidMovePanel = new Emitter();
           this._floatingGroups = [];
           this._popoutGroups = [];
+          this._ignoreEvents = 0;
+          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._moving = false;
           const gready = document.createElement('div');
           gready.className = 'dv-overlay-render-container';
           this.gridview.element.appendChild(gready);
           this.overlayRenderContainer = new OverlayRenderContainer(gready);
           toggleClass(this.gridview.element, 'dv-dockview', true);
           toggleClass(this.element, 'dv-debug', !!options.debug);
-          this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
+          this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this.onDidAdd((event) => {
+              if (!this._moving) {
+                  this._onDidAddGroup.fire(event);
+              }
+          }), this.onDidRemove((event) => {
+              if (!this._moving) {
+                  this._onDidRemoveGroup.fire(event);
+              }
+          }), this.onDidActiveChange((event) => {
+              if (!this._moving) {
+                  this._onDidActiveGroupChange.fire(event);
+              }
+          }), exports.DockviewEvent.any(this.onDidAdd, this.onDidRemove)(() => {
               this.updateWatermark();
           }), exports.DockviewEvent.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
               this._bufferOnDidLayoutChange.fire();
@@ -6629,7 +7046,7 @@
               }
               // iterate over a copy of the array since .dispose() mutates the original array
               for (const group of [...this._popoutGroups]) {
-                  group.dispose();
+                  group.disposable.dispose();
               }
           }));
           this._options = options;
@@ -6675,7 +7092,7 @@
                       return this.options.showDndOverlay({
                           nativeEvent: event,
                           position: position,
-                          target: exports.DockviewDropTargets.Edge,
+                          target: 'edge',
                           getData: getPanelData,
                       });
                   }
@@ -6684,88 +7101,259 @@
               acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
               overlayModel: (_b = this.options.rootOverlayModel) !== null && _b !== void 0 ? _b : DEFAULT_ROOT_OVERLAY_MODEL,
           });
-          this.addDisposables(this._rootDropTarget.onDrop((event) => {
+          this.addDisposables(this._rootDropTarget, this._rootDropTarget.onWillShowOverlay((event) => {
+              if (this.gridview.length > 0 && event.position === 'center') {
+                  // option only available when no panels in primary grid
+                  return;
+              }
+              this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+                  kind: 'edge',
+              }));
+          }), this._rootDropTarget.onDrop((event) => {
               var _a;
+              const willDropEvent = new DockviewWillDropEvent({
+                  nativeEvent: event.nativeEvent,
+                  position: event.position,
+                  panel: undefined,
+                  api: this._api,
+                  group: undefined,
+                  getData: getPanelData,
+                  kind: 'edge',
+              });
+              this._onWillDrop.fire(willDropEvent);
+              if (willDropEvent.defaultPrevented) {
+                  return;
+              }
               const data = getPanelData();
               if (data) {
-                  this.moveGroupOrPanel(this.orthogonalize(event.position), data.groupId, (_a = data.panelId) !== null && _a !== void 0 ? _a : undefined, 'center');
+                  this.moveGroupOrPanel({
+                      from: {
+                          groupId: data.groupId,
+                          panelId: (_a = data.panelId) !== null && _a !== void 0 ? _a : undefined,
+                      },
+                      to: {
+                          group: this.orthogonalize(event.position),
+                          position: 'center',
+                      },
+                  });
               }
               else {
-                  this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api, group: null, getData: getPanelData }));
+                  this._onDidDrop.fire(new DockviewDidDropEvent({
+                      nativeEvent: event.nativeEvent,
+                      position: event.position,
+                      panel: undefined,
+                      api: this._api,
+                      group: undefined,
+                      getData: getPanelData,
+                  }));
               }
           }), this._rootDropTarget);
           this._api = new DockviewApi(this);
           this.updateWatermark();
       }
-      addPopoutGroup(item, options) {
-          var _a;
-          let group;
-          let box = options === null || options === void 0 ? void 0 : options.position;
-          if (item instanceof DockviewPanel) {
-              group = this.createGroup();
-              this.removePanel(item, {
-                  removeEmptyGroup: true,
-                  skipDispose: true,
-              });
-              group.model.openPanel(item);
-              if (!box) {
-                  box = this.element.getBoundingClientRect();
+      addPopoutGroup(itemToPopout, options) {
+          var _a, _b, _c;
+          if (itemToPopout instanceof DockviewPanel &&
+              itemToPopout.group.size === 1) {
+              return this.addPopoutGroup(itemToPopout.group);
+          }
+          const theme = getDockviewTheme(this.gridview.element);
+          const element = this.element;
+          function getBox() {
+              if (options === null || options === void 0 ? void 0 : options.position) {
+                  return options.position;
+              }
+              if (itemToPopout instanceof DockviewGroupPanel) {
+                  return itemToPopout.element.getBoundingClientRect();
+              }
+              if (itemToPopout.group) {
+                  return itemToPopout.group.element.getBoundingClientRect();
+              }
+              return element.getBoundingClientRect();
+          }
+          const box = getBox();
+          const groupId = (_b = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : this.getNextGroupId(); //item.id;
+          if (itemToPopout.api.location.type === 'grid') {
+              itemToPopout.api.setVisible(false);
+          }
+          const _window = new PopoutWindow(`${this.id}-${groupId}`, // unique id
+          theme !== null && theme !== void 0 ? theme : '', {
+              url: (_c = options === null || options === void 0 ? void 0 : options.popoutUrl) !== null && _c !== void 0 ? _c : '/popout.html',
+              left: window.screenX + box.left,
+              top: window.screenY + box.top,
+              width: box.width,
+              height: box.height,
+              onDidOpen: options === null || options === void 0 ? void 0 : options.onDidOpen,
+              onWillClose: options === null || options === void 0 ? void 0 : options.onWillClose,
+          });
+          const popoutWindowDisposable = new CompositeDisposable(_window, _window.onDidClose(() => {
+              popoutWindowDisposable.dispose();
+          }));
+          return _window
+              .open()
+              .then((popoutContainer) => {
+              var _a;
+              if (_window.isDisposed) {
+                  return;
               }
-          }
-          else {
-              group = item;
-              if (!box) {
-                  box = group.element.getBoundingClientRect();
+              if (popoutContainer === null) {
+                  popoutWindowDisposable.dispose();
+                  return;
               }
-              const skip = typeof (options === null || options === void 0 ? void 0 : options.skipRemoveGroup) === 'boolean' &&
-                  options.skipRemoveGroup;
-              if (!skip) {
-                  this.doRemoveGroup(item, { skipDispose: true });
-              }
-          }
-          const theme = getTheme(this.gridview.element);
-          const popoutWindow = new DockviewPopoutGroupPanel(`${this.id}-${group.id}`, // globally unique within dockview
-          group, {
-              className: theme !== null && theme !== void 0 ? theme : '',
-              popoutUrl: (_a = options === null || options === void 0 ? void 0 : options.popoutUrl) !== null && _a !== void 0 ? _a : '/popout.html',
-              box: {
-                  left: window.screenX + box.left,
-                  top: window.screenY + box.top,
-                  width: box.width,
-                  height: box.height,
-              },
+              const gready = document.createElement('div');
+              gready.className = 'dv-overlay-render-container';
+              const overlayRenderContainer = new OverlayRenderContainer(gready);
+              const referenceGroup = itemToPopout instanceof DockviewPanel
+                  ? itemToPopout.group
+                  : itemToPopout;
+              const referenceLocation = itemToPopout.api.location.type;
+              const group = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) !== null && _a !== void 0 ? _a : this.createGroup({ id: groupId });
+              group.model.renderContainer = overlayRenderContainer;
+              if (!(options === null || options === void 0 ? void 0 : options.overridePopoutGroup)) {
+                  this._onDidAddGroup.fire(group);
+              }
+              if (itemToPopout instanceof DockviewPanel) {
+                  this.movingLock(() => {
+                      const panel = referenceGroup.model.removePanel(itemToPopout);
+                      group.model.openPanel(panel);
+                  });
+              }
+              else {
+                  this.movingLock(() => moveGroupWithoutDestroying({
+                      from: referenceGroup,
+                      to: group,
+                  }));
+                  switch (referenceLocation) {
+                      case 'grid':
+                          referenceGroup.api.setVisible(false);
+                          break;
+                      case 'floating':
+                      case 'popout':
+                          this.removeGroup(referenceGroup);
+                          break;
+                  }
+              }
+              popoutContainer.classList.add('dv-dockview');
+              popoutContainer.style.overflow = 'hidden';
+              popoutContainer.appendChild(gready);
+              popoutContainer.appendChild(group.element);
+              group.model.location = {
+                  type: 'popout',
+                  getWindow: () => _window.window,
+              };
+              this.doSetGroupAndPanelActive(group);
+              popoutWindowDisposable.addDisposables(group.api.onDidActiveChange((event) => {
+                  var _a;
+                  if (event.isActive) {
+                      (_a = _window.window) === null || _a === void 0 ? void 0 : _a.focus();
+                  }
+              }), group.api.onWillFocus(() => {
+                  var _a;
+                  (_a = _window.window) === null || _a === void 0 ? void 0 : _a.focus();
+              }));
+              let returnedGroup;
+              const value = {
+                  window: _window,
+                  popoutGroup: group,
+                  referenceGroup: this.getPanel(referenceGroup.id)
+                      ? referenceGroup.id
+                      : undefined,
+                  disposable: {
+                      dispose: () => {
+                          popoutWindowDisposable.dispose();
+                          return returnedGroup;
+                      },
+                  },
+              };
+              popoutWindowDisposable.addDisposables(
+              /**
+               * ResizeObserver seems slow here, I do not know why but we don't need it
+               * since we can reply on the window resize event as we will occupy the full
+               * window dimensions
+               */
+              addDisposableWindowListener(_window.window, 'resize', () => {
+                  group.layout(window.innerWidth, window.innerHeight);
+              }), overlayRenderContainer, Disposable.from(() => {
+                  if (this.getPanel(referenceGroup.id)) {
+                      this.movingLock(() => moveGroupWithoutDestroying({
+                          from: group,
+                          to: referenceGroup,
+                      }));
+                      if (!referenceGroup.api.isVisible) {
+                          referenceGroup.api.setVisible(true);
+                      }
+                      if (this.getPanel(group.id)) {
+                          this.doRemoveGroup(group, {
+                              skipPopoutAssociated: true,
+                          });
+                      }
+                  }
+                  else {
+                      if (this.getPanel(group.id)) {
+                          const removedGroup = this.doRemoveGroup(group, {
+                              skipDispose: true,
+                              skipActive: true,
+                          });
+                          removedGroup.model.renderContainer =
+                              this.overlayRenderContainer;
+                          removedGroup.model.location = { type: 'grid' };
+                          returnedGroup = removedGroup;
+                      }
+                  }
+              }));
+              this._popoutGroups.push(value);
+              this.updateWatermark();
+          })
+              .catch((err) => {
+              console.error(err);
           });
-          popoutWindow.addDisposables({
-              dispose: () => {
-                  remove(this._popoutGroups, popoutWindow);
-                  this.updateWatermark();
-              },
-          }, popoutWindow.window.onDidClose(() => {
-              this.doAddGroup(group, [0]);
-          }));
-          this._popoutGroups.push(popoutWindow);
-          this.updateWatermark();
       }
       addFloatingGroup(item, coord, options) {
-          var _a, _b, _c, _d, _e, _f;
+          var _a, _b, _c, _d, _e, _f, _g;
           let group;
           if (item instanceof DockviewPanel) {
               group = this.createGroup();
-              this.removePanel(item, {
+              this._onDidAddGroup.fire(group);
+              this.movingLock(() => this.removePanel(item, {
                   removeEmptyGroup: true,
                   skipDispose: true,
-              });
-              group.model.openPanel(item);
+                  skipSetActiveGroup: true,
+              }));
+              group.model.openPanel(item, { skipSetGroupActive: true });
           }
           else {
               group = item;
+              const popoutReferenceGroupId = (_a = this._popoutGroups.find((_) => _.popoutGroup === group)) === null || _a === void 0 ? void 0 : _a.referenceGroup;
+              const popoutReferenceGroup = popoutReferenceGroupId
+                  ? this.getPanel(popoutReferenceGroupId)
+                  : undefined;
               const skip = typeof (options === null || options === void 0 ? void 0 : options.skipRemoveGroup) === 'boolean' &&
                   options.skipRemoveGroup;
               if (!skip) {
-                  this.doRemoveGroup(item, { skipDispose: true });
+                  if (popoutReferenceGroup) {
+                      this.movingLock(() => moveGroupWithoutDestroying({
+                          from: item,
+                          to: popoutReferenceGroup,
+                      }));
+                      this.doRemoveGroup(item, {
+                          skipPopoutReturn: true,
+                          skipPopoutAssociated: true,
+                      });
+                      this.doRemoveGroup(popoutReferenceGroup, {
+                          skipDispose: true,
+                      });
+                      group = popoutReferenceGroup;
+                  }
+                  else {
+                      this.doRemoveGroup(item, {
+                          skipDispose: true,
+                          skipPopoutReturn: true,
+                          skipPopoutAssociated: !!popoutReferenceGroup,
+                      });
+                  }
               }
           }
-          group.model.location = 'floating';
+          group.model.location = { type: 'floating' };
           const overlayLeft = typeof (coord === null || coord === void 0 ? void 0 : coord.x) === 'number'
               ? Math.max(coord.x, 0)
               : DEFAULT_FLOATING_GROUP_POSITION.left;
@@ -6775,16 +7363,16 @@
           const overlay = new Overlay({
               container: this.gridview.element,
               content: group.element,
-              height: (_a = coord === null || coord === void 0 ? void 0 : coord.height) !== null && _a !== void 0 ? _a : 300,
-              width: (_b = coord === null || coord === void 0 ? void 0 : coord.width) !== null && _b !== void 0 ? _b : 300,
+              height: (_b = coord === null || coord === void 0 ? void 0 : coord.height) !== null && _b !== void 0 ? _b : 300,
+              width: (_c = coord === null || coord === void 0 ? void 0 : coord.width) !== null && _c !== void 0 ? _c : 300,
               left: overlayLeft,
               top: overlayTop,
               minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
                   ? undefined
-                  : (_d = (_c = this.options.floatingGroupBounds) === null || _c === void 0 ? void 0 : _c.minimumWidthWithinViewport) !== null && _d !== void 0 ? _d : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
+                  : (_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumWidthWithinViewport) !== null && _e !== void 0 ? _e : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
               minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
                   ? undefined
-                  : (_f = (_e = this.options.floatingGroupBounds) === null || _e === void 0 ? void 0 : _e.minimumHeightWithinViewport) !== null && _f !== void 0 ? _f : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
+                  : (_g = (_f = this.options.floatingGroupBounds) === null || _f === void 0 ? void 0 : _f.minimumHeightWithinViewport) !== null && _g !== void 0 ? _g : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
           });
           const el = group.element.querySelector('.void-container');
           if (!el) {
@@ -6815,12 +7403,15 @@
           }), {
               dispose: () => {
                   disposable.dispose();
-                  group.model.location = 'grid';
+                  group.model.location = { type: 'grid' };
                   remove(this._floatingGroups, floatingGroupPanel);
                   this.updateWatermark();
               },
           });
           this._floatingGroups.push(floatingGroupPanel);
+          if (!(options === null || options === void 0 ? void 0 : options.skipActiveGroup)) {
+              this.doSetGroupAndPanelActive(group);
+          }
           this.updateWatermark();
       }
       orthogonalize(position) {
@@ -6910,8 +7501,8 @@
           return this.panels.find((panel) => panel.id === id);
       }
       setActivePanel(panel) {
-          this.doSetGroupActive(panel.group);
           panel.group.model.openPanel(panel);
+          this.doSetGroupAndPanelActive(panel.group);
       }
       moveToNext(options = {}) {
           var _a;
@@ -6972,7 +7563,8 @@
           });
           const popoutGroups = this._popoutGroups.map((group) => {
               return {
-                  data: group.group.toJSON(),
+                  data: group.popoutGroup.toJSON(),
+                  gridReferenceGroup: group.referenceGroup,
                   position: group.window.dimensions(),
               };
           });
@@ -6990,7 +7582,7 @@
           return result;
       }
       fromJSON(data) {
-          var _a, _b;
+          var _a, _b, _c;
           this.clear();
           if (typeof data !== 'object' || data === null) {
               throw new Error('serialized layout must be a non-null object');
@@ -7029,7 +7621,7 @@
                       const isActive = typeof activeView === 'string' &&
                           activeView === panel.id;
                       group.model.openPanel(panel, {
-                          skipSetPanelActive: !isActive,
+                          skipSetActive: !isActive,
                           skipSetGroupActive: true,
                       });
                   }
@@ -7059,11 +7651,16 @@
               }
               const serializedPopoutGroups = (_b = data.popoutGroups) !== null && _b !== void 0 ? _b : [];
               for (const serializedPopoutGroup of serializedPopoutGroups) {
-                  const { data, position } = serializedPopoutGroup;
+                  const { data, position, gridReferenceGroup } = serializedPopoutGroup;
                   const group = createGroupFromSerializedState(data);
-                  this.addPopoutGroup(group, {
+                  this.addPopoutGroup((_c = (gridReferenceGroup
+                      ? this.getPanel(gridReferenceGroup)
+                      : undefined)) !== null && _c !== void 0 ? _c : group, {
                       skipRemoveGroup: true,
                       position: position !== null && position !== void 0 ? position : undefined,
+                      overridePopoutGroup: gridReferenceGroup
+                          ? group
+                          : undefined,
                   });
               }
               for (const floatingGroup of this._floatingGroups) {
@@ -7110,12 +7707,13 @@
                */
               throw err;
           }
+          this.updateWatermark();
           this._onDidLayoutFromJSON.fire();
       }
       clear() {
           const groups = Array.from(this._groups.values()).map((_) => _.value);
           const hasActiveGroup = !!this.activeGroup;
-          const hasActivePanel = !!this.activePanel;
+          !!this.activePanel;
           for (const group of groups) {
               // remove the group will automatically remove the panels
               this.removeGroup(group, { skipActive: true });
@@ -7123,9 +7721,6 @@
           if (hasActiveGroup) {
               this.doSetGroupAndPanelActive(undefined);
           }
-          if (hasActivePanel) {
-              this._onDidActivePanelChange.fire(undefined);
-          }
           this.gridview.clear();
       }
       closeAllGroups() {
@@ -7166,6 +7761,7 @@
                   const group = this.orthogonalize(directionToPosition(options.position.direction));
                   const panel = this.createPanel(options, group);
                   group.model.openPanel(panel);
+                  this.doSetGroupAndPanelActive(group);
                   return panel;
               }
           }
@@ -7177,6 +7773,7 @@
               const target = toTarget(((_b = options.position) === null || _b === void 0 ? void 0 : _b.direction) || 'within');
               if (options.floating) {
                   const group = this.createGroup();
+                  this._onDidAddGroup.fire(group);
                   const o = typeof options.floating === 'object' &&
                       options.floating !== null
                       ? options.floating
@@ -7184,16 +7781,16 @@
                   this.addFloatingGroup(group, o, {
                       inDragMode: false,
                       skipRemoveGroup: true,
+                      skipActiveGroup: true,
                   });
-                  this._onDidAddGroup.fire(group);
                   panel = this.createPanel(options, group);
                   group.model.openPanel(panel);
-                  this.doSetGroupAndPanelActive(group);
               }
-              else if (referenceGroup.api.location === 'floating' ||
+              else if (referenceGroup.api.location.type === 'floating' ||
                   target === 'center') {
                   panel = this.createPanel(options, referenceGroup);
                   referenceGroup.model.openPanel(panel);
+                  this.doSetGroupAndPanelActive(referenceGroup);
               }
               else {
                   const location = getGridLocation(referenceGroup.element);
@@ -7201,10 +7798,12 @@
                   const group = this.createGroupAtLocation(relativeLocation);
                   panel = this.createPanel(options, group);
                   group.model.openPanel(panel);
+                  this.doSetGroupAndPanelActive(group);
               }
           }
           else if (options.floating) {
               const group = this.createGroup();
+              this._onDidAddGroup.fire(group);
               const o = typeof options.floating === 'object' &&
                   options.floating !== null
                   ? options.floating
@@ -7212,16 +7811,16 @@
               this.addFloatingGroup(group, o, {
                   inDragMode: false,
                   skipRemoveGroup: true,
+                  skipActiveGroup: true,
               });
-              this._onDidAddGroup.fire(group);
               panel = this.createPanel(options, group);
               group.model.openPanel(panel);
-              this.doSetGroupAndPanelActive(group);
           }
           else {
               const group = this.createGroupAtLocation();
               panel = this.createPanel(options, group);
               group.model.openPanel(panel);
+              this.doSetGroupAndPanelActive(group);
           }
           return panel;
       }
@@ -7233,13 +7832,15 @@
           if (!group) {
               throw new Error(`cannot remove panel ${panel.id}. it's missing a group.`);
           }
-          group.model.removePanel(panel);
+          group.model.removePanel(panel, {
+              skipSetActiveGroup: options.skipSetActiveGroup,
+          });
           if (!options.skipDispose) {
-              this.overlayRenderContainer.detatch(panel);
+              panel.group.model.renderContainer.detatch(panel);
               panel.dispose();
           }
           if (group.size === 0 && options.removeEmptyGroup) {
-              this.removeGroup(group);
+              this.removeGroup(group, { skipActive: options.skipSetActiveGroup });
           }
       }
       createWatermarkComponent() {
@@ -7252,7 +7853,7 @@
       }
       updateWatermark() {
           var _a, _b;
-          if (this.groups.filter((x) => x.api.location === 'grid').length === 0) {
+          if (this.groups.filter((x) => x.api.location.type === 'grid' && x.api.isVisible).length === 0) {
               if (!this.watermark) {
                   this.watermark = this.createWatermarkComponent();
                   this.watermark.init({
@@ -7298,36 +7899,42 @@
               }
               else {
                   const group = this.orthogonalize(directionToPosition(options.direction));
+                  if (!options.skipSetActive) {
+                      this.doSetGroupAndPanelActive(group);
+                  }
                   return group;
               }
               const target = toTarget(options.direction || 'within');
               const location = getGridLocation(referenceGroup.element);
               const relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
               this.doAddGroup(group, relativeLocation);
+              if (!options.skipSetActive) {
+                  this.doSetGroupAndPanelActive(group);
+              }
               return group;
           }
           else {
               this.doAddGroup(group);
+              this.doSetGroupAndPanelActive(group);
               return group;
           }
       }
       removeGroup(group, options) {
+          this.doRemoveGroup(group, options);
+      }
+      doRemoveGroup(group, options) {
           var _a;
           const panels = [...group.panels]; // reassign since group panels will mutate
-          for (const panel of panels) {
-              this.removePanel(panel, {
-                  removeEmptyGroup: false,
-                  skipDispose: (_a = options === null || options === void 0 ? void 0 : options.skipDispose) !== null && _a !== void 0 ? _a : false,
-              });
+          if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
+              for (const panel of panels) {
+                  this.removePanel(panel, {
+                      removeEmptyGroup: false,
+                      skipDispose: (_a = options === null || options === void 0 ? void 0 : options.skipDispose) !== null && _a !== void 0 ? _a : false,
+                  });
+              }
           }
           const activePanel = this.activePanel;
-          this.doRemoveGroup(group, options);
-          if (this.activePanel !== activePanel) {
-              this._onDidActivePanelChange.fire(this.activePanel);
-          }
-      }
-      doRemoveGroup(group, options) {
-          if (group.api.location === 'floating') {
+          if (group.api.location.type === 'floating') {
               const floatingGroup = this._floatingGroups.find((_) => _.group === group);
               if (floatingGroup) {
                   if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
@@ -7339,60 +7946,124 @@
                   floatingGroup.dispose();
                   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);
+                      this.doSetGroupAndPanelActive(groups.length > 0 ? groups[0].value : undefined);
                   }
                   return floatingGroup.group;
               }
               throw new Error('failed to find floating group');
           }
-          if (group.api.location === 'popout') {
-              const selectedGroup = this._popoutGroups.find((_) => _.group === group);
+          if (group.api.location.type === 'popout') {
+              const selectedGroup = this._popoutGroups.find((_) => _.popoutGroup === group);
               if (selectedGroup) {
                   if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
-                      selectedGroup.group.dispose();
+                      if (!(options === null || options === void 0 ? void 0 : options.skipPopoutAssociated)) {
+                          const refGroup = selectedGroup.referenceGroup
+                              ? this.getPanel(selectedGroup.referenceGroup)
+                              : undefined;
+                          if (refGroup) {
+                              this.removeGroup(refGroup);
+                          }
+                      }
+                      selectedGroup.popoutGroup.dispose();
                       this._groups.delete(group.id);
                       this._onDidRemoveGroup.fire(group);
                   }
-                  selectedGroup.dispose();
+                  const removedGroup = selectedGroup.disposable.dispose();
+                  if (!(options === null || options === void 0 ? void 0 : options.skipPopoutReturn) && removedGroup) {
+                      this.doAddGroup(removedGroup, [0]);
+                      this.doSetGroupAndPanelActive(removedGroup);
+                  }
                   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);
+                      this.doSetGroupAndPanelActive(groups.length > 0 ? groups[0].value : undefined);
                   }
-                  return selectedGroup.group;
+                  this.updateWatermark();
+                  return selectedGroup.popoutGroup;
               }
               throw new Error('failed to find popout group');
           }
-          return super.doRemoveGroup(group, options);
+          const re = super.doRemoveGroup(group, options);
+          if (!(options === null || options === void 0 ? void 0 : options.skipActive)) {
+              if (this.activePanel !== activePanel) {
+                  this._onDidActivePanelChange.fire(this.activePanel);
+              }
+          }
+          return re;
       }
-      moveGroupOrPanel(destinationGroup, sourceGroupId, sourceItemId, destinationTarget, destinationIndex) {
-          var _a, _b, _c;
+      movingLock(func) {
+          const isMoving = this._moving;
+          try {
+              this._moving = true;
+              return func();
+          }
+          finally {
+              this._moving = isMoving;
+          }
+      }
+      moveGroupOrPanel(options) {
+          var _a;
+          const destinationGroup = options.to.group;
+          const sourceGroupId = options.from.groupId;
+          const sourceItemId = options.from.panelId;
+          const destinationTarget = options.to.position;
+          const destinationIndex = options.to.index;
           const sourceGroup = sourceGroupId
               ? (_a = this._groups.get(sourceGroupId)) === null || _a === void 0 ? void 0 : _a.value
               : undefined;
+          if (!sourceGroup) {
+              throw new Error(`Failed to find group id ${sourceGroupId}`);
+          }
           if (sourceItemId === undefined) {
-              if (sourceGroup) {
-                  this.moveGroup(sourceGroup, destinationGroup, destinationTarget);
-              }
+              /**
+               * Moving an entire group into another group
+               */
+              this.moveGroup({
+                  from: { group: sourceGroup },
+                  to: {
+                      group: destinationGroup,
+                      position: destinationTarget,
+                  },
+              });
               return;
           }
           if (!destinationTarget || destinationTarget === 'center') {
-              const groupItem = (_b = sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(sourceItemId)) !== null && _b !== void 0 ? _b : this.panels.find((panel) => panel.id === sourceItemId);
-              if (!groupItem) {
+              /**
+               * Dropping a panel within another group
+               */
+              const removedPanel = this.movingLock(() => sourceGroup.model.removePanel(sourceItemId, {
+                  skipSetActive: false,
+                  skipSetActiveGroup: true,
+              }));
+              if (!removedPanel) {
                   throw new Error(`No panel with id ${sourceItemId}`);
               }
-              if ((sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.size) === 0) {
-                  this.doRemoveGroup(sourceGroup);
+              if (sourceGroup.model.size === 0) {
+                  // remove the group and do not set a new group as active
+                  this.doRemoveGroup(sourceGroup, { skipActive: true });
               }
-              destinationGroup.model.openPanel(groupItem, {
+              this.movingLock(() => destinationGroup.model.openPanel(removedPanel, {
                   index: destinationIndex,
+                  skipSetGroupActive: true,
+              }));
+              this.doSetGroupAndPanelActive(destinationGroup);
+              this._onDidMovePanel.fire({
+                  panel: removedPanel,
               });
           }
           else {
+              /**
+               * Dropping a panel to the extremities of a group which will place that panel
+               * into an adjacent group
+               */
               const referenceLocation = getGridLocation(destinationGroup.element);
               const targetLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
-              if (sourceGroup && sourceGroup.size < 2) {
+              if (sourceGroup.size < 2) {
+                  /**
+                   * If we are moving from a group which only has one panel left we will consider
+                   * moving the group itself rather than moving the panel into a newly created group
+                   */
                   const [targetParentLocation, to] = tail(targetLocation);
-                  if (sourceGroup.api.location === 'grid') {
+                  if (sourceGroup.api.location.type === 'grid') {
                       const sourceLocation = getGridLocation(sourceGroup.element);
                       const [sourceParentLocation, from] = tail(sourceLocation);
                       if (sequenceEquals(sourceParentLocation, targetParentLocation)) {
@@ -7400,77 +8071,122 @@
                           // if a group has one tab - we are essentially moving the 'group'
                           // which is equivalent to swapping two views in this case
                           this.gridview.moveView(sourceParentLocation, from, to);
+                          return;
                       }
                   }
                   // source group will become empty so delete the group
-                  const targetGroup = this.doRemoveGroup(sourceGroup, {
+                  const targetGroup = this.movingLock(() => this.doRemoveGroup(sourceGroup, {
                       skipActive: true,
                       skipDispose: true,
-                  });
+                  }));
                   // after deleting the group we need to re-evaulate the ref location
                   const updatedReferenceLocation = getGridLocation(destinationGroup.element);
                   const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, destinationTarget);
-                  this.doAddGroup(targetGroup, location);
+                  this.movingLock(() => this.doAddGroup(targetGroup, location));
+                  this.doSetGroupAndPanelActive(targetGroup);
               }
               else {
-                  const groupItem = (_c = sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(sourceItemId)) !== null && _c !== void 0 ? _c : this.panels.find((panel) => panel.id === sourceItemId);
-                  if (!groupItem) {
+                  /**
+                   * The group we are removing from has many panels, we need to remove the panels we are moving,
+                   * create a new group, add the panels to that new group and add the new group in an appropiate position
+                   */
+                  const removedPanel = this.movingLock(() => sourceGroup.model.removePanel(sourceItemId, {
+                      skipSetActive: false,
+                      skipSetActiveGroup: true,
+                  }));
+                  if (!removedPanel) {
                       throw new Error(`No panel with id ${sourceItemId}`);
                   }
                   const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
                   const group = this.createGroupAtLocation(dropLocation);
-                  group.model.openPanel(groupItem);
+                  this.movingLock(() => group.model.openPanel(removedPanel, {
+                      skipSetGroupActive: true,
+                  }));
+                  this.doSetGroupAndPanelActive(group);
               }
           }
       }
-      moveGroup(sourceGroup, referenceGroup, target) {
-          if (sourceGroup) {
-              if (!target || target === 'center') {
-                  const activePanel = sourceGroup.activePanel;
-                  const panels = [...sourceGroup.panels].map((p) => sourceGroup.model.removePanel(p.id));
-                  if ((sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.size) === 0) {
-                      this.doRemoveGroup(sourceGroup);
-                  }
+      moveGroup(options) {
+          const from = options.from.group;
+          const to = options.to.group;
+          const target = options.to.position;
+          if (target === 'center') {
+              const activePanel = from.activePanel;
+              const panels = this.movingLock(() => [...from.panels].map((p) => from.model.removePanel(p.id, {
+                  skipSetActive: true,
+              })));
+              if ((from === null || from === void 0 ? void 0 : from.model.size) === 0) {
+                  this.doRemoveGroup(from, { skipActive: true });
+              }
+              this.movingLock(() => {
                   for (const panel of panels) {
-                      referenceGroup.model.openPanel(panel, {
-                          skipSetPanelActive: panel !== activePanel,
+                      to.model.openPanel(panel, {
+                          skipSetActive: panel !== activePanel,
+                          skipSetGroupActive: true,
                       });
                   }
-              }
-              else {
-                  switch (sourceGroup.api.location) {
-                      case 'grid':
-                          this.gridview.removeView(getGridLocation(sourceGroup.element));
-                          break;
-                      case 'floating': {
-                          const selectedFloatingGroup = this._floatingGroups.find((x) => x.group === sourceGroup);
-                          if (!selectedFloatingGroup) {
-                              throw new Error('failed to find floating group');
-                          }
-                          selectedFloatingGroup.dispose();
-                          break;
+              });
+              this.doSetGroupAndPanelActive(to);
+              panels.forEach((panel) => {
+                  this._onDidMovePanel.fire({ panel });
+              });
+          }
+          else {
+              switch (from.api.location.type) {
+                  case 'grid':
+                      this.gridview.removeView(getGridLocation(from.element));
+                      break;
+                  case 'floating': {
+                      const selectedFloatingGroup = this._floatingGroups.find((x) => x.group === from);
+                      if (!selectedFloatingGroup) {
+                          throw new Error('failed to find floating group');
                       }
-                      case 'popout': {
-                          const selectedPopoutGroup = this._popoutGroups.find((x) => x.group === sourceGroup);
-                          if (!selectedPopoutGroup) {
-                              throw new Error('failed to find popout group');
-                          }
-                          selectedPopoutGroup.dispose();
+                      selectedFloatingGroup.dispose();
+                      break;
+                  }
+                  case 'popout': {
+                      const selectedPopoutGroup = this._popoutGroups.find((x) => x.popoutGroup === from);
+                      if (!selectedPopoutGroup) {
+                          throw new Error('failed to find popout group');
                       }
+                      selectedPopoutGroup.disposable.dispose();
                   }
-                  const referenceLocation = getGridLocation(referenceGroup.element);
-                  const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
-                  this.gridview.addView(sourceGroup, exports.Sizing.Distribute, dropLocation);
               }
+              const referenceLocation = getGridLocation(to.element);
+              const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
+              this.gridview.addView(from, exports.Sizing.Distribute, dropLocation);
+              from.panels.forEach((panel) => {
+                  this._onDidMovePanel.fire({ panel });
+              });
           }
       }
-      doSetGroupAndPanelActive(group, skipFocus) {
-          var _a, _b;
+      doSetGroupActive(group) {
+          super.doSetGroupActive(group);
+          const activePanel = this.activePanel;
+          if (!this._moving &&
+              activePanel !== this._onDidActivePanelChange.value) {
+              this._onDidActivePanelChange.fire(activePanel);
+          }
+      }
+      doSetGroupAndPanelActive(group) {
+          super.doSetGroupActive(group);
           const activePanel = this.activePanel;
-          super.doSetGroupActive(group, skipFocus);
-          if (((_a = this._activeGroup) === null || _a === void 0 ? void 0 : _a.activePanel) !== activePanel) {
-              this._onDidActivePanelChange.fire((_b = this._activeGroup) === null || _b === void 0 ? void 0 : _b.activePanel);
+          if (group &&
+              this.hasMaximizedGroup() &&
+              !this.isMaximizedGroup(group)) {
+              this.exitMaximizedGroup();
+          }
+          if (!this._moving &&
+              activePanel !== this._onDidActivePanelChange.value) {
+              this._onDidActivePanelChange.fire(activePanel);
+          }
+      }
+      getNextGroupId() {
+          let id = this.nextGroupId.next();
+          while (this._groups.has(id)) {
+              id = this.nextGroupId.next();
           }
+          return id;
       }
       createGroup(options) {
           if (!options) {
@@ -7488,7 +8204,7 @@
               }
           }
           const view = new DockviewGroupPanel(this, id, options);
-          view.init({ params: {}, accessor: null }); // required to initialized .part and allow for correct disposal of group
+          view.init({ params: {}, accessor: this });
           if (!this._groups.has(view.id)) {
               const disposable = new CompositeDisposable(view.model.onTabDragStart((event) => {
                   this._onWillDragPanel.fire(event);
@@ -7496,20 +8212,48 @@
                   this._onWillDragGroup.fire(event);
               }), view.model.onMove((event) => {
                   const { groupId, itemId, target, index } = event;
-                  this.moveGroupOrPanel(view, groupId, itemId, target, index);
+                  this.moveGroupOrPanel({
+                      from: { groupId: groupId, panelId: itemId },
+                      to: {
+                          group: view,
+                          position: target,
+                          index,
+                      },
+                  });
               }), view.model.onDidDrop((event) => {
-                  this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api, group: view }));
+                  this._onDidDrop.fire(event);
+              }), view.model.onWillDrop((event) => {
+                  this._onWillDrop.fire(event);
+              }), view.model.onWillShowOverlay((event) => {
+                  if (this.options.disableDnd) {
+                      event.preventDefault();
+                      return;
+                  }
+                  this._onWillShowOverlay.fire(event);
               }), view.model.onDidAddPanel((event) => {
+                  if (this._moving) {
+                      return;
+                  }
                   this._onDidAddPanel.fire(event.panel);
               }), view.model.onDidRemovePanel((event) => {
+                  if (this._moving) {
+                      return;
+                  }
                   this._onDidRemovePanel.fire(event.panel);
               }), view.model.onDidActivePanelChange((event) => {
-                  this._onDidActivePanelChange.fire(event.panel);
+                  if (this._moving) {
+                      return;
+                  }
+                  if (event.panel !== this.activePanel) {
+                      return;
+                  }
+                  if (this._onDidActivePanelChange.value !== event.panel) {
+                      this._onDidActivePanelChange.fire(event.panel);
+                  }
               }));
               this._groups.set(view.id, { value: view, disposable });
           }
-          // TODO: must be called after the above listeners have been setup,
-          // not an ideal pattern
+          // TODO: must be called after the above listeners have been setup, not an ideal pattern
           view.initialize();
           return view;
       }
@@ -7562,7 +8306,20 @@
           });
           this._onDidLayoutfromJSON = new Emitter();
           this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.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._options = options;
+          this.addDisposables(this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this.onDidAdd((event) => {
+              this._onDidAddGroup.fire(event);
+          }), this.onDidRemove((event) => {
+              this._onDidRemoveGroup.fire(event);
+          }), this.onDidActiveChange((event) => {
+              this._onDidActiveGroupChange.fire(event);
+          }));
           if (!this.options.components) {
               this.options.components = {};
           }
@@ -7737,6 +8494,7 @@
           });
           this.registerPanel(view);
           this.doAddGroup(view, relativeLocation, options.size);
+          this.doSetGroupActive(view);
           return view;
       }
       registerPanel(panel) {
@@ -7878,19 +8636,19 @@
           const index = this.panels.indexOf(panel);
           this.splitview.setViewVisible(index, visible);
       }
-      setActive(view, skipFocus) {
-          this._activePanel = view;
+      setActive(panel, skipFocus) {
+          this._activePanel = panel;
           this.panels
-              .filter((v) => v !== view)
+              .filter((v) => v !== panel)
               .forEach((v) => {
               v.api._onDidActiveChange.fire({ isActive: false });
               if (!skipFocus) {
                   v.focus();
               }
           });
-          view.api._onDidActiveChange.fire({ isActive: true });
+          panel.api._onDidActiveChange.fire({ isActive: true });
           if (!skipFocus) {
-              view.focus();
+              panel.focus();
           }
       }
       removePanel(panel, sizing) {
@@ -8189,6 +8947,10 @@
           });
           this.addDisposables(this._disposable);
       }
+      setVisible(panel, visible) {
+          const index = this.panels.indexOf(panel);
+          this.paneview.setViewVisible(index, visible);
+      }
       focus() {
           //noop
       }
@@ -8235,6 +8997,7 @@
               isExpanded: options.isExpanded,
               title: options.title,
               containerApi: new PaneviewApi(this),
+              accessor: this,
           });
           this.paneview.addPane(view, size, index);
           view.orientation = this.paneview.orientation;
@@ -8334,6 +9097,7 @@
                               title: data.title,
                               isExpanded: !!view.expanded,
                               containerApi: new PaneviewApi(this),
+                              accessor: this,
                           });
                           panel.orientation = this.paneview.orientation;
                       });
@@ -8422,7 +9186,7 @@
           this._onDidChange = new Emitter();
           this.onDidChange = this._onDidChange.event;
           this.api.initialize(this);
-          this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
+          this.addDisposables(this._onDidChange, this.api.onWillVisibilityChange((event) => {
               const { isVisible } = event;
               const { accessor } = this._params;
               accessor.setVisible(this, isVisible);
@@ -8491,11 +9255,13 @@
   exports.DockviewApi = DockviewApi;
   exports.DockviewComponent = DockviewComponent;
   exports.DockviewCompositeDisposable = CompositeDisposable;
+  exports.DockviewDidDropEvent = DockviewDidDropEvent;
   exports.DockviewEmitter = Emitter;
   exports.DockviewGroupPanel = DockviewGroupPanel;
   exports.DockviewGroupPanelModel = DockviewGroupPanelModel;
   exports.DockviewMutableDisposable = MutableDisposable;
   exports.DockviewPanel = DockviewPanel;
+  exports.DockviewWillDropEvent = DockviewWillDropEvent;
   exports.DraggablePaneviewPanel = DraggablePaneviewPanel;
   exports.Gridview = Gridview;
   exports.GridviewApi = GridviewApi;
@@ -8514,6 +9280,7 @@
   exports.SplitviewComponent = SplitviewComponent;
   exports.SplitviewPanel = SplitviewPanel;
   exports.Tab = Tab;
+  exports.WillShowOverlayLocationEvent = WillShowOverlayLocationEvent;
   exports.createComponent = createComponent;
   exports.directionToPosition = directionToPosition;
   exports.getDirectionOrientation = getDirectionOrientation;