dockview-core 1.7.6 → 1.8.1

package/dist/dockview-core.cjs.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 1.7.6
+ * @version 1.8.1
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -33,7 +33,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".dockview-svg {\n  display: inline-block;\n  fill: currentcolor;\n  line-height: 1;\n  stroke: currentcolor;\n  stroke-width: 0;\n}\n.dockview-theme-dark {\n  --dv-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-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-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-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-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-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.drop-target {\n  position: relative;\n}\n.drop-target > .drop-target-dropzone {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  height: 100%;\n  width: 100%;\n  z-index: 10000;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection {\n  position: relative;\n  box-sizing: border-box;\n  height: 100%;\n  width: 100%;\n  background-color: var(--dv-drag-over-background-color);\n  transition: top 70ms ease-out, left 70ms ease-out, width 70ms ease-out, height 70ms ease-out, opacity 0.15s ease-out;\n  will-change: transform;\n  pointer-events: none;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-top {\n  border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-bottom {\n  border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-left {\n  border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-right {\n  border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-dockview {\n  position: relative;\n  background-color: var(--dv-group-view-background-color);\n}\n.dv-dockview .dv-watermark-container {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  height: 100%;\n  width: 100%;\n}\n\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n  background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);\n  color: var(--dv-inactivegroup-visiblepanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n  background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-inactivegroup-hiddenpanel-tab-color);\n}\n\n/**\n * when a tab is dragged we lose the above stylings because they are conditional on parent elements\n * therefore we also set some stylings for the dragging event\n **/\n.tab.dv-tab-dragging {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.groupview {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background-color: var(--dv-group-view-background-color);\n  overflow: hidden;\n}\n.groupview:focus {\n  outline: none;\n}\n.groupview.empty > .tabs-and-actions-container {\n  display: none;\n}\n.groupview > .content-container {\n  flex-grow: 1;\n  overflow: hidden;\n  outline: none;\n}\n.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.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:active {\n  transition: background-color 0.1s ease-in-out;\n  background-color: var(--dv-active-sash-color, transparent);\n}\n.split-view-container .sash-container .sash:hover {\n  background-color: var(--dv-active-sash-color, transparent);\n  transition: background-color 0.1s ease-in-out;\n  transition-delay: 0.5s;\n}\n.split-view-container .view-container {\n  position: relative;\n  height: 100%;\n  width: 100%;\n  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.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 = ".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.small-top {\n  border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-bottom {\n  border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-left {\n  border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-right {\n  border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-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\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  overflow: hidden;\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:active {\n  transition: background-color 0.1s ease-in-out;\n  background-color: var(--dv-active-sash-color, transparent);\n}\n.split-view-container .sash-container .sash:hover {\n  background-color: var(--dv-active-sash-color, transparent);\n  transition: background-color 0.1s ease-in-out;\n  transition-delay: 0.5s;\n}\n.split-view-container .view-container {\n  position: relative;\n  height: 100%;\n  width: 100%;\n  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.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 {
@@ -303,6 +303,31 @@ class MutableDisposable {
     }
 }
 
+function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {
+    const Component = typeof componentName === 'string'
+        ? components[componentName]
+        : undefined;
+    const FrameworkComponent = typeof componentName === 'string'
+        ? frameworkComponents[componentName]
+        : undefined;
+    if (Component && FrameworkComponent) {
+        throw new Error(`Cannot create '${id}'. component '${componentName}' registered as both a component and frameworkComponent`);
+    }
+    if (FrameworkComponent) {
+        if (!createFrameworkComponent) {
+            throw new Error(`Cannot create '${id}' for framework component '${componentName}'. you must register a frameworkPanelWrapper to use framework components`);
+        }
+        return createFrameworkComponent.createComponent(id, componentName, FrameworkComponent);
+    }
+    if (!Component) {
+        if (fallback) {
+            return fallback();
+        }
+        throw new Error(`Cannot create '${id}', no component '${componentName}' provided`);
+    }
+    return new Component(id, componentName);
+}
+
 function watchElementResize(element, cb) {
     const observer = new ResizeObserver((entires) => {
         /**
@@ -416,31 +441,16 @@ class FocusTracker extends CompositeDisposable {
     refreshState() {
         this._refreshStateHandler();
     }
-}
-
-function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {
-    const Component = typeof componentName === 'string'
-        ? components[componentName]
-        : undefined;
-    const FrameworkComponent = typeof componentName === 'string'
-        ? frameworkComponents[componentName]
-        : undefined;
-    if (Component && FrameworkComponent) {
-        throw new Error(`Cannot create '${id}'. component '${componentName}' registered as both a component and frameworkComponent`);
-    }
-    if (FrameworkComponent) {
-        if (!createFrameworkComponent) {
-            throw new Error(`Cannot create '${id}' for framework component '${componentName}'. you must register a frameworkPanelWrapper to use framework components`);
-        }
-        return createFrameworkComponent.createComponent(id, componentName, FrameworkComponent);
-    }
-    if (!Component) {
-        if (fallback) {
-            return fallback();
-        }
-        throw new Error(`Cannot create '${id}', no component '${componentName}' provided`);
-    }
-    return new Component(id, componentName);
+}
+// quasi: apparently, but not really; seemingly
+const QUASI_PREVENT_DEFAULT_KEY = 'dv-quasiPreventDefault';
+// mark an event directly for other listeners to check
+function quasiPreventDefault(event) {
+    event[QUASI_PREVENT_DEFAULT_KEY] = true;
+}
+// check if this event has been marked
+function quasiDefaultPrevented(event) {
+    return event[QUASI_PREVENT_DEFAULT_KEY];
 }
 
 function tail(arr) {
@@ -491,6 +501,14 @@ function firstIndex(array, fn) {
         }
     }
     return -1;
+}
+function remove(array, value) {
+    const index = array.findIndex((t) => t === value);
+    if (index > -1) {
+        array.splice(index, 1);
+        return true;
+    }
+    return false;
 }
 
 const clamp = (value, min, max) => {
@@ -1633,7 +1651,7 @@ class BranchNode extends CompositeDisposable {
                             : true,
                     };
                 }),
-                size: this.size,
+                size: this.orthogonalSize,
             };
             this.children = childDescriptors.map((c) => c.node);
             this.splitview = new Splitview(this.element, {
@@ -1696,7 +1714,7 @@ class BranchNode extends CompositeDisposable {
     layout(size, orthogonalSize) {
         this._size = orthogonalSize;
         this._orthogonalSize = size;
-        this.splitview.layout(this.size, this.orthogonalSize);
+        this.splitview.layout(orthogonalSize, size);
     }
     addChild(node, size, index, skipLayout) {
         if (index < 0 || index > this.children.length) {
@@ -1921,9 +1939,9 @@ class Gridview {
         this._deserialize(json.root, orientation, deserializer, height);
     }
     _deserialize(root, orientation, deserializer, orthogonalSize) {
-        this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize, true);
+        this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize);
     }
-    _deserializeNode(node, orientation, deserializer, orthogonalSize, isRoot = false) {
+    _deserializeNode(node, orientation, deserializer, orthogonalSize) {
         let result;
         if (node.type === 'branch') {
             const serializedChildren = node.data;
@@ -1933,9 +1951,9 @@ class Gridview {
                     visible: serializedChild.visible,
                 };
             });
-            // HORIZONTAL => height=orthogonalsize width=size
-            // VERTICAL => height=size width=orthogonalsize
-            result = new BranchNode(orientation, this.proportionalLayout, this.styles, isRoot ? orthogonalSize : node.size, isRoot ? node.size : orthogonalSize, children);
+            result = new BranchNode(orientation, this.proportionalLayout, this.styles, node.size, // <- orthogonal size - flips at each depth
+            orthogonalSize, // <- size - flips at each depth
+            children);
         }
         else {
             result = new LeafNode(deserializer.fromJSON(node), orientation, orthogonalSize, node.size);
@@ -1968,7 +1986,8 @@ class Gridview {
         const oldRoot = this.root;
         oldRoot.element.remove();
         this._root = new BranchNode(orthogonal(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size);
-        if (oldRoot.children.length === 1) {
+        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
             const childReference = oldRoot.children[0];
             const child = oldRoot.removeChild(0); // remove to prevent disposal when disposing of unwanted root
@@ -2484,6 +2503,9 @@ class DockviewApi {
     addPanel(options) {
         return this.component.addPanel(options);
     }
+    removePanel(panel) {
+        this.component.removePanel(panel);
+    }
     addGroup(options) {
         return this.component.addGroup(options);
     }
@@ -2502,6 +2524,9 @@ class DockviewApi {
     getGroup(id) {
         return this.component.getPanel(id);
     }
+    addFloatingGroup(item, coord) {
+        return this.component.addFloatingGroup(item, coord);
+    }
     fromJSON(data) {
         this.component.fromJSON(data);
     }
@@ -2594,10 +2619,14 @@ class Droptarget extends CompositeDisposable {
         this._onDrop = new Emitter();
         this.onDrop = this._onDrop.event;
         // use a set to take advantage of #<set>.has
-        const acceptedTargetZonesSet = new Set(this.options.acceptedTargetZones);
+        this._acceptedTargetZonesSet = new Set(this.options.acceptedTargetZones);
         this.addDisposables(this._onDrop, new DragAndDropObserver(this.element, {
             onDragEnter: () => undefined,
             onDragOver: (e) => {
+                if (this._acceptedTargetZonesSet.size === 0) {
+                    this.removeDropTarget();
+                    return;
+                }
                 const width = this.element.clientWidth;
                 const height = this.element.clientHeight;
                 if (width === 0 || height === 0) {
@@ -2606,20 +2635,28 @@ class Droptarget extends CompositeDisposable {
                 const rect = e.currentTarget.getBoundingClientRect();
                 const x = e.clientX - rect.left;
                 const y = e.clientY - rect.top;
-                const quadrant = this.calculateQuadrant(acceptedTargetZonesSet, x, y, width, height);
-                if (quadrant === null) {
+                const quadrant = this.calculateQuadrant(this._acceptedTargetZonesSet, x, y, width, height);
+                /**
+                 * If the event has already been used by another DropTarget instance
+                 * then don't show a second drop target, only one target should be
+                 * active at any one time
+                 */
+                if (this.isAlreadyUsed(e) || quadrant === null) {
                     // no drop target should be displayed
                     this.removeDropTarget();
                     return;
                 }
                 if (typeof this.options.canDisplayOverlay === 'boolean') {
                     if (!this.options.canDisplayOverlay) {
+                        this.removeDropTarget();
                         return;
                     }
                 }
                 else if (!this.options.canDisplayOverlay(e, quadrant)) {
+                    this.removeDropTarget();
                     return;
                 }
+                this.markAsUsed(e);
                 if (!this.targetElement) {
                     this.targetElement = document.createElement('div');
                     this.targetElement.className = 'drop-target-dropzone';
@@ -2630,12 +2667,6 @@ class Droptarget extends CompositeDisposable {
                     this.element.classList.add('drop-target');
                     this.element.append(this.targetElement);
                 }
-                if (this.options.acceptedTargetZones.length === 0) {
-                    return;
-                }
-                if (!this.targetElement || !this.overlayElement) {
-                    return;
-                }
                 this.toggleClasses(quadrant, width, height);
                 this.setState(quadrant);
             },
@@ -2658,10 +2689,26 @@ class Droptarget extends CompositeDisposable {
             },
         }));
     }
+    setTargetZones(acceptedTargetZones) {
+        this._acceptedTargetZonesSet = new Set(acceptedTargetZones);
+    }
     dispose() {
         this.removeDropTarget();
         super.dispose();
     }
+    /**
+     * Add a property to the event object for other potential listeners to check
+     */
+    markAsUsed(event) {
+        event[Droptarget.USED_EVENT_ID] = true;
+    }
+    /**
+     * Check is the event has already been used by another instance od DropTarget
+     */
+    isAlreadyUsed(event) {
+        const value = event[Droptarget.USED_EVENT_ID];
+        return typeof value === 'boolean' && value;
+    }
     toggleClasses(quadrant, width, height) {
         var _a, _b, _c, _d;
         if (!this.overlayElement) {
@@ -2756,6 +2803,7 @@ class Droptarget extends CompositeDisposable {
         }
     }
 }
+Droptarget.USED_EVENT_ID = '__dockview_droptarget_event_is_used__';
 function calculateQuadrantAsPercentage(overlayType, x, y, width, height, threshold) {
     const xp = (100 * x) / width;
     const yp = (100 * y) / height;
@@ -2885,8 +2933,15 @@ class DragHandler extends CompositeDisposable {
         this.addDisposables(this._onDragStart, this.dataDisposable, this.pointerEventsDisposable);
         this.configure();
     }
+    isCancelled(_event) {
+        return false;
+    }
     configure() {
         this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
+            if (this.isCancelled(event)) {
+                event.preventDefault();
+                return;
+            }
             const iframes = [
                 ...getElementsByTagName('iframe'),
                 ...getElementsByTagName('webview'),
@@ -2960,13 +3015,6 @@ class Tab extends CompositeDisposable {
             if (event.defaultPrevented) {
                 return;
             }
-            /**
-             * TODO: alternative to stopPropagation
-             *
-             * I need to stop the event propagation here since otherwise it'll be intercepted by event handlers
-             * on the tabs-container. I cannot use event.preventDefault() since I need the on DragStart event to occur
-             */
-            event.stopPropagation();
             this._onChanged.fire(event);
         }));
         this.droptarget = new Droptarget(this._element, {
@@ -3024,6 +3072,22 @@ class GroupDragHandler extends DragHandler {
         this.accessorId = accessorId;
         this.group = group;
         this.panelTransfer = LocalSelectionTransfer.getInstance();
+        this.addDisposables(addDisposableListener(element, 'mousedown', (e) => {
+            if (e.shiftKey) {
+                /**
+                 * You cannot call e.preventDefault() because that will prevent drag events from firing
+                 * but we also need to stop any group overlay drag events from occuring
+                 * Use a custom event marker that can be checked by the overlay drag events
+                 */
+                quasiPreventDefault(e);
+            }
+        }, true));
+    }
+    isCancelled(_event) {
+        if (this.group.api.isFloating && !_event.shiftKey) {
+            return true;
+        }
+        return false;
     }
     getData(dataTransfer) {
         this.panelTransfer.setData([new PanelTransfer(this.accessorId, this.group.id, null)], PanelTransfer.prototype);
@@ -3114,17 +3178,30 @@ class TabsContainer extends CompositeDisposable {
     hide() {
         this._element.style.display = 'none';
     }
-    setActionElement(element) {
-        if (this.actions === element) {
+    setRightActionsElement(element) {
+        if (this.rightActions === element) {
             return;
         }
-        if (this.actions) {
-            this.actions.remove();
-            this.actions = undefined;
+        if (this.rightActions) {
+            this.rightActions.remove();
+            this.rightActions = undefined;
         }
         if (element) {
-            this.actionContainer.appendChild(element);
-            this.actions = element;
+            this.rightActionsContainer.appendChild(element);
+            this.rightActions = element;
+        }
+    }
+    setLeftActionsElement(element) {
+        if (this.leftActions === element) {
+            return;
+        }
+        if (this.leftActions) {
+            this.leftActions.remove();
+            this.leftActions = undefined;
+        }
+        if (element) {
+            this.leftActionsContainer.appendChild(element);
+            this.leftActions = element;
         }
     }
     get element() {
@@ -3159,19 +3236,35 @@ class TabsContainer extends CompositeDisposable {
                 toggleClass(this._element, 'dv-single-tab', this.size === 1);
             }
         }));
-        this.actionContainer = document.createElement('div');
-        this.actionContainer.className = 'action-container';
+        this.rightActionsContainer = document.createElement('div');
+        this.rightActionsContainer.className = 'right-actions-container';
+        this.leftActionsContainer = document.createElement('div');
+        this.leftActionsContainer.className = 'left-actions-container';
         this.tabContainer = document.createElement('div');
         this.tabContainer.className = 'tabs-container';
         this.voidContainer = new VoidContainer(this.accessor, this.group);
         this._element.appendChild(this.tabContainer);
+        this._element.appendChild(this.leftActionsContainer);
         this._element.appendChild(this.voidContainer.element);
-        this._element.appendChild(this.actionContainer);
+        this._element.appendChild(this.rightActionsContainer);
         this.addDisposables(this.voidContainer, this.voidContainer.onDrop((event) => {
             this._onDrop.fire({
                 event: event.nativeEvent,
                 index: this.tabs.length,
             });
+        }), addDisposableListener(this.voidContainer.element, 'mousedown', (event) => {
+            const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
+            if (isFloatingGroupsEnabled &&
+                event.shiftKey &&
+                !this.group.api.isFloating) {
+                event.preventDefault();
+                const { top, left } = this.element.getBoundingClientRect();
+                const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
+                this.accessor.addFloatingGroup(this.group, {
+                    x: left - rootLeft + 20,
+                    y: top - rootTop + 20,
+                }, { inDragMode: true });
+            }
         }), addDisposableListener(this.tabContainer, 'mousedown', (event) => {
             if (event.defaultPrevented) {
                 return;
@@ -3225,6 +3318,21 @@ class TabsContainer extends CompositeDisposable {
         tabToAdd.setContent(panel.view.tab);
         const disposable = CompositeDisposable.from(tabToAdd.onChanged((event) => {
             var _a;
+            const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
+            const isFloatingWithOnePanel = this.group.api.isFloating && this.size === 1;
+            if (isFloatingGroupsEnabled &&
+                !isFloatingWithOnePanel &&
+                event.shiftKey) {
+                event.preventDefault();
+                const panel = this.accessor.getGroupPanel(tabToAdd.panelId);
+                const { top, left } = tabToAdd.element.getBoundingClientRect();
+                const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
+                this.accessor.addFloatingGroup(panel, {
+                    x: left - rootLeft,
+                    y: top - rootTop,
+                }, { 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;
@@ -3294,6 +3402,17 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         }
         return isAncestor(document.activeElement, this.contentContainer.element);
     }
+    get isFloating() {
+        return this._isFloating;
+    }
+    set isFloating(value) {
+        this._isFloating = value;
+        this.dropTarget.setTargetZones(value ? ['center'] : ['top', 'bottom', 'left', 'right', 'center']);
+        toggleClass(this.container, 'dv-groupview-floating', value);
+        this.groupPanel.api._onDidFloatingStateChange.fire({
+            isFloating: this.isFloating,
+        });
+    }
     constructor(container, accessor, id, options, groupPanel) {
         super();
         this.container = container;
@@ -3303,6 +3422,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         this.groupPanel = groupPanel;
         this._isGroupActive = false;
         this._locked = false;
+        this._isFloating = false;
         this.mostRecentlyUsed = [];
         this._onDidChange = new Emitter();
         this.onDidChange = this._onDidChange.event;
@@ -3319,7 +3439,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         this.onDidRemovePanel = this._onDidRemovePanel.event;
         this._onDidActivePanelChange = new Emitter();
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-        this.container.classList.add('groupview');
+        toggleClass(this.container, 'groupview', true);
         this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
         this.contentContainer = new ContentContainer();
         this.dropTarget = new Droptarget(this.contentContainer.element, {
@@ -3329,6 +3449,9 @@ class DockviewGroupPanelModel extends CompositeDisposable {
                     return false;
                 }
                 const data = getPanelData();
+                if (!data && event.shiftKey && !this.isFloating) {
+                    return false;
+                }
                 if (data && data.viewId === this.accessor.id) {
                     if (data.groupId === this.id) {
                         if (position === 'center') {
@@ -3373,14 +3496,25 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         // correctly initialized
         this.setActive(this.isActive, true, true);
         this.updateContainer();
-        if (this.accessor.options.createGroupControlElement) {
-            this._control = this.accessor.options.createGroupControlElement(this.groupPanel);
-            this.addDisposables(this._control);
-            this._control.init({
+        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),
+                api: this.groupPanel.api,
+            });
+            this.tabsContainer.setRightActionsElement(this._rightHeaderActions.element);
+        }
+        if (this.accessor.options.createLeftHeaderActionsElement) {
+            this._leftHeaderActions =
+                this.accessor.options.createLeftHeaderActionsElement(this.groupPanel);
+            this.addDisposables(this._leftHeaderActions);
+            this._leftHeaderActions.init({
                 containerApi: new DockviewApi(this.accessor),
                 api: this.groupPanel.api,
             });
-            this.tabsContainer.setActionElement(this._control.element);
+            this.tabsContainer.setLeftActionsElement(this._leftHeaderActions.element);
         }
     }
     indexOf(panel) {
@@ -3513,7 +3647,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         return this._activePanel === panel;
     }
     updateActions(element) {
-        this.tabsContainer.setActionElement(element);
+        this.tabsContainer.setRightActionsElement(element);
     }
     setActive(isGroupActive, skipFocus = false, force = false) {
         var _a, _b, _c, _d;
@@ -3685,9 +3819,10 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         }
     }
     dispose() {
-        var _a, _b;
+        var _a, _b, _c;
         super.dispose();
-        (_b = (_a = this.watermark) === null || _a === void 0 ? void 0 : _a.dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
+        (_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);
         for (const panel of this.panels) {
             panel.dispose();
         }
@@ -4481,8 +4616,8 @@ class GridviewPanel extends BasePanelView {
     get isActive() {
         return this.api.isActive;
     }
-    constructor(id, component, options) {
-        super(id, component, new GridviewPanelApiImpl(id));
+    constructor(id, component, options, api) {
+        super(id, component, api !== null && api !== void 0 ? api : new GridviewPanelApiImpl(id));
         this._evaluatedMinimumWidth = 0;
         this._evaluatedMaximumWidth = Number.MAX_SAFE_INTEGER;
         this._evaluatedMinimumHeight = 0;
@@ -4580,6 +4715,32 @@ class GridviewPanel extends BasePanelView {
     }
 }
 
+class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
+    get isFloating() {
+        if (!this._group) {
+            throw new Error(`DockviewGroupPanelApiImpl not initialized`);
+        }
+        return this._group.model.isFloating;
+    }
+    constructor(id, accessor) {
+        super(id);
+        this.accessor = accessor;
+        this._onDidFloatingStateChange = new Emitter();
+        this.onDidFloatingStateChange = this._onDidFloatingStateChange.event;
+        this.addDisposables(this._onDidFloatingStateChange);
+    }
+    moveTo(options) {
+        var _a;
+        if (!this._group) {
+            throw new Error(`DockviewGroupPanelApiImpl not initialized`);
+        }
+        this.accessor.moveGroupOrPanel(options.group, this._group.id, undefined, (_a = options.position) !== null && _a !== void 0 ? _a : 'center');
+    }
+    initialize(group) {
+        this._group = group;
+    }
+}
+
 class DockviewGroupPanel extends GridviewPanel {
     get panels() {
         return this._model.panels;
@@ -4606,7 +4767,8 @@ class DockviewGroupPanel extends GridviewPanel {
         super(id, 'groupview_default', {
             minimumHeight: 100,
             minimumWidth: 100,
-        });
+        }, new DockviewGroupPanelApiImpl(id, accessor));
+        this.api.initialize(this); // cannot use 'this' after after 'super' call
         this._model = new DockviewGroupPanelModel(this.element, accessor, id, options, this);
     }
     initialize() {
@@ -4624,7 +4786,6 @@ class DockviewGroupPanel extends GridviewPanel {
         return this._model;
     }
     toJSON() {
-        // TODO fix typing
         return this.model.toJSON();
     }
 }
@@ -4678,9 +4839,10 @@ class DockviewPanelApiImpl extends GridviewPanelApiImpl {
     get group() {
         return this._group;
     }
-    constructor(panel, group) {
+    constructor(panel, group, accessor) {
         super(panel.id);
         this.panel = panel;
+        this.accessor = accessor;
         this._onDidTitleChange = new Emitter();
         this.onDidTitleChange = this._onDidTitleChange.event;
         this._onDidActiveGroupChange = new Emitter();
@@ -4692,6 +4854,10 @@ class DockviewPanelApiImpl extends GridviewPanelApiImpl {
         this._group = group;
         this.addDisposables(this.disposable, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange);
     }
+    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);
+    }
     setTitle(title) {
         this.panel.setTitle(title);
     }
@@ -4716,7 +4882,7 @@ class DockviewPanel extends CompositeDisposable {
         this.containerApi = containerApi;
         this.view = view;
         this._group = group;
-        this.api = new DockviewPanelApiImpl(this, this._group);
+        this.api = new DockviewPanelApiImpl(this, this._group, accessor);
         this.addDisposables(this.api.onActiveChange(() => {
             accessor.setActivePanel(this);
         }), this.api.onDidSizeChange((event) => {
@@ -5057,6 +5223,296 @@ class Watermark extends CompositeDisposable {
     }
 }
 
+const bringElementToFront = (() => {
+    let previous = null;
+    function pushToTop(element) {
+        if (previous !== element && previous !== null) {
+            toggleClass(previous, 'dv-bring-to-front', false);
+        }
+        toggleClass(element, 'dv-bring-to-front', true);
+        previous = element;
+    }
+    return pushToTop;
+})();
+class Overlay extends CompositeDisposable {
+    constructor(options) {
+        super();
+        this.options = options;
+        this._element = document.createElement('div');
+        this._onDidChange = new Emitter();
+        this.onDidChange = this._onDidChange.event;
+        this._onDidChangeEnd = new Emitter();
+        this.onDidChangeEnd = this._onDidChangeEnd.event;
+        this.addDisposables(this._onDidChange, this._onDidChangeEnd);
+        this._element.className = 'dv-resize-container';
+        this.setupResize('top');
+        this.setupResize('bottom');
+        this.setupResize('left');
+        this.setupResize('right');
+        this.setupResize('topleft');
+        this.setupResize('topright');
+        this.setupResize('bottomleft');
+        this.setupResize('bottomright');
+        this._element.appendChild(this.options.content);
+        this.options.container.appendChild(this._element);
+        // if input bad resize within acceptable boundaries
+        this.setBounds({
+            height: this.options.height,
+            width: this.options.width,
+            top: this.options.top,
+            left: this.options.left,
+        });
+    }
+    setBounds(bounds = {}) {
+        if (typeof bounds.height === 'number') {
+            this._element.style.height = `${bounds.height}px`;
+        }
+        if (typeof bounds.width === 'number') {
+            this._element.style.width = `${bounds.width}px`;
+        }
+        if (typeof bounds.top === 'number') {
+            this._element.style.top = `${bounds.top}px`;
+        }
+        if (typeof bounds.left === 'number') {
+            this._element.style.left = `${bounds.left}px`;
+        }
+        const containerRect = this.options.container.getBoundingClientRect();
+        const overlayRect = this._element.getBoundingClientRect();
+        // region: ensure bounds within allowable limits
+        // a minimum width of minimumViewportWidth must be inside the viewport
+        const xOffset = Math.max(0, overlayRect.width - this.options.minimumInViewportWidth);
+        // a minimum height of minimumViewportHeight must be inside the viewport
+        const yOffset = Math.max(0, overlayRect.height - this.options.minimumInViewportHeight);
+        const left = clamp(overlayRect.left - containerRect.left, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
+        const top = clamp(overlayRect.top - containerRect.top, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
+        this._element.style.left = `${left}px`;
+        this._element.style.top = `${top}px`;
+        this._onDidChange.fire();
+    }
+    toJSON() {
+        const container = this.options.container.getBoundingClientRect();
+        const element = this._element.getBoundingClientRect();
+        return {
+            top: element.top - container.top,
+            left: element.left - container.left,
+            width: element.width,
+            height: element.height,
+        };
+    }
+    setupDrag(dragTarget, options = { inDragMode: false }) {
+        const move = new MutableDisposable();
+        const track = () => {
+            let offset = null;
+            const iframes = [
+                ...getElementsByTagName('iframe'),
+                ...getElementsByTagName('webview'),
+            ];
+            for (const iframe of iframes) {
+                iframe.style.pointerEvents = 'none';
+            }
+            move.value = new CompositeDisposable({
+                dispose: () => {
+                    for (const iframe of iframes) {
+                        iframe.style.pointerEvents = 'auto';
+                    }
+                },
+            }, addDisposableWindowListener(window, 'mousemove', (e) => {
+                const containerRect = this.options.container.getBoundingClientRect();
+                const x = e.clientX - containerRect.left;
+                const y = e.clientY - containerRect.top;
+                toggleClass(this._element, 'dv-resize-container-dragging', true);
+                const overlayRect = this._element.getBoundingClientRect();
+                if (offset === null) {
+                    offset = {
+                        x: e.clientX - overlayRect.left,
+                        y: e.clientY - overlayRect.top,
+                    };
+                }
+                const xOffset = Math.max(0, overlayRect.width - this.options.minimumInViewportWidth);
+                const yOffset = Math.max(0, overlayRect.height -
+                    this.options.minimumInViewportHeight);
+                const left = clamp(x - offset.x, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
+                const top = clamp(y - offset.y, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
+                this.setBounds({ top, left });
+            }), addDisposableWindowListener(window, 'mouseup', () => {
+                toggleClass(this._element, 'dv-resize-container-dragging', false);
+                move.dispose();
+                this._onDidChangeEnd.fire();
+            }));
+        };
+        this.addDisposables(move, addDisposableListener(dragTarget, 'mousedown', (event) => {
+            if (event.defaultPrevented) {
+                event.preventDefault();
+                return;
+            }
+            // if somebody has marked this event then treat as a defaultPrevented
+            // without actually calling event.preventDefault()
+            if (quasiDefaultPrevented(event)) {
+                return;
+            }
+            track();
+        }), addDisposableListener(this.options.content, 'mousedown', (event) => {
+            if (event.defaultPrevented) {
+                return;
+            }
+            // if somebody has marked this event then treat as a defaultPrevented
+            // without actually calling event.preventDefault()
+            if (quasiDefaultPrevented(event)) {
+                return;
+            }
+            if (event.shiftKey) {
+                track();
+            }
+        }), addDisposableListener(this.options.content, 'mousedown', () => {
+            bringElementToFront(this._element);
+        }, true));
+        bringElementToFront(this._element);
+        if (options.inDragMode) {
+            track();
+        }
+    }
+    setupResize(direction) {
+        const resizeHandleElement = document.createElement('div');
+        resizeHandleElement.className = `dv-resize-handle-${direction}`;
+        this._element.appendChild(resizeHandleElement);
+        const move = new MutableDisposable();
+        this.addDisposables(move, addDisposableListener(resizeHandleElement, 'mousedown', (e) => {
+            e.preventDefault();
+            let startPosition = null;
+            const iframes = [
+                ...getElementsByTagName('iframe'),
+                ...getElementsByTagName('webview'),
+            ];
+            for (const iframe of iframes) {
+                iframe.style.pointerEvents = 'none';
+            }
+            move.value = new CompositeDisposable(addDisposableWindowListener(window, 'mousemove', (e) => {
+                const containerRect = this.options.container.getBoundingClientRect();
+                const overlayRect = this._element.getBoundingClientRect();
+                const y = e.clientY - containerRect.top;
+                const x = e.clientX - containerRect.left;
+                if (startPosition === null) {
+                    // record the initial dimensions since as all subsequence moves are relative to this
+                    startPosition = {
+                        originalY: y,
+                        originalHeight: overlayRect.height,
+                        originalX: x,
+                        originalWidth: overlayRect.width,
+                    };
+                }
+                let top = undefined;
+                let height = undefined;
+                let left = undefined;
+                let width = undefined;
+                const minimumInViewportHeight = this.options.minimumInViewportHeight;
+                const minimumInViewportWidth = this.options.minimumInViewportWidth;
+                function moveTop() {
+                    top = clamp(y, -Number.MAX_VALUE, startPosition.originalY +
+                        startPosition.originalHeight >
+                        containerRect.height
+                        ? containerRect.height -
+                            minimumInViewportHeight
+                        : Math.max(0, startPosition.originalY +
+                            startPosition.originalHeight -
+                            Overlay.MINIMUM_HEIGHT));
+                    height =
+                        startPosition.originalY +
+                            startPosition.originalHeight -
+                            top;
+                }
+                function moveBottom() {
+                    top =
+                        startPosition.originalY -
+                            startPosition.originalHeight;
+                    height = clamp(y - top, top < 0
+                        ? -top + minimumInViewportHeight
+                        : Overlay.MINIMUM_HEIGHT, Number.MAX_VALUE);
+                }
+                function moveLeft() {
+                    left = clamp(x, -Number.MAX_VALUE, startPosition.originalX +
+                        startPosition.originalWidth >
+                        containerRect.width
+                        ? containerRect.width -
+                            minimumInViewportWidth
+                        : Math.max(0, startPosition.originalX +
+                            startPosition.originalWidth -
+                            Overlay.MINIMUM_WIDTH));
+                    width =
+                        startPosition.originalX +
+                            startPosition.originalWidth -
+                            left;
+                }
+                function moveRight() {
+                    left =
+                        startPosition.originalX -
+                            startPosition.originalWidth;
+                    width = clamp(x - left, left < 0
+                        ? -left + minimumInViewportWidth
+                        : Overlay.MINIMUM_WIDTH, Number.MAX_VALUE);
+                }
+                switch (direction) {
+                    case 'top':
+                        moveTop();
+                        break;
+                    case 'bottom':
+                        moveBottom();
+                        break;
+                    case 'left':
+                        moveLeft();
+                        break;
+                    case 'right':
+                        moveRight();
+                        break;
+                    case 'topleft':
+                        moveTop();
+                        moveLeft();
+                        break;
+                    case 'topright':
+                        moveTop();
+                        moveRight();
+                        break;
+                    case 'bottomleft':
+                        moveBottom();
+                        moveLeft();
+                        break;
+                    case 'bottomright':
+                        moveBottom();
+                        moveRight();
+                        break;
+                }
+                this.setBounds({ height, width, top, left });
+            }), {
+                dispose: () => {
+                    for (const iframe of iframes) {
+                        iframe.style.pointerEvents = 'auto';
+                    }
+                },
+            }, addDisposableWindowListener(window, 'mouseup', () => {
+                move.dispose();
+                this._onDidChangeEnd.fire();
+            }));
+        }));
+    }
+    dispose() {
+        this._element.remove();
+        super.dispose();
+    }
+}
+Overlay.MINIMUM_HEIGHT = 20;
+Overlay.MINIMUM_WIDTH = 20;
+
+class DockviewFloatingGroupPanel extends CompositeDisposable {
+    constructor(group, overlay) {
+        super();
+        this.group = group;
+        this.overlay = overlay;
+        this.addDisposables(overlay);
+    }
+    position(bounds) {
+        this.overlay.setBounds(bounds);
+    }
+}
+
 class DockviewComponent extends BaseGrid {
     get orientation() {
         return this.gridview.orientation;
@@ -5097,7 +5553,8 @@ class DockviewComponent extends BaseGrid {
         this.onDidLayoutFromJSON = this._onDidLayoutFromJSON.event;
         this._onDidActivePanelChange = new Emitter();
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-        this.element.classList.add('dv-dockview');
+        this.floatingGroups = [];
+        toggleClass(this.gridview.element, 'dv-dockview', true);
         this.addDisposables(this._onDidDrop, exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
             this.updateWatermark();
         }), exports.DockviewEvent.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
@@ -5127,9 +5584,22 @@ class DockviewComponent extends BaseGrid {
                     if (data.viewId !== this.id) {
                         return false;
                     }
+                    if (position === 'center') {
+                        // center drop target is only allowed if there are no panels in the grid
+                        // floating panels are allowed
+                        return this.gridview.length === 0;
+                    }
                     return true;
                 }
                 if (this.options.showDndOverlay) {
+                    if (position === 'center') {
+                        /**
+                         * for external events only show the four-corner drag overlays, disable
+                         * the center position so that external drag events can fall through to the group
+                         * and panel drop target handlers
+                         */
+                        return false;
+                    }
                     return this.options.showDndOverlay({
                         nativeEvent: event,
                         position: position,
@@ -5139,7 +5609,7 @@ class DockviewComponent extends BaseGrid {
                 }
                 return false;
             },
-            acceptedTargetZones: ['top', 'bottom', 'left', 'right'],
+            acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
             overlayModel: {
                 activationSize: { type: 'pixels', value: 10 },
                 size: { type: 'pixels', value: 20 },
@@ -5157,6 +5627,75 @@ class DockviewComponent extends BaseGrid {
         this._api = new DockviewApi(this);
         this.updateWatermark();
     }
+    addFloatingGroup(item, coord, options) {
+        var _a, _b;
+        let group;
+        if (item instanceof DockviewPanel) {
+            group = this.createGroup();
+            this.removePanel(item, {
+                removeEmptyGroup: true,
+                skipDispose: true,
+            });
+            group.model.openPanel(item);
+        }
+        else {
+            group = item;
+            const skip = typeof (options === null || options === void 0 ? void 0 : options.skipRemoveGroup) === 'boolean' &&
+                options.skipRemoveGroup;
+            if (!skip) {
+                this.doRemoveGroup(item, { skipDispose: true });
+            }
+        }
+        group.model.isFloating = true;
+        const overlayLeft = typeof (coord === null || coord === void 0 ? void 0 : coord.x) === 'number' ? Math.max(coord.x, 0) : 100;
+        const overlayTop = typeof (coord === null || coord === void 0 ? void 0 : coord.y) === 'number' ? Math.max(coord.y, 0) : 100;
+        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,
+            left: overlayLeft,
+            top: overlayTop,
+            minimumInViewportWidth: 100,
+            minimumInViewportHeight: 100,
+        });
+        const el = group.element.querySelector('.void-container');
+        if (!el) {
+            throw new Error('failed to find drag handle');
+        }
+        overlay.setupDrag(el, {
+            inDragMode: typeof (options === null || options === void 0 ? void 0 : options.inDragMode) === 'boolean'
+                ? options.inDragMode
+                : false,
+        });
+        const floatingGroupPanel = new DockviewFloatingGroupPanel(group, overlay);
+        const disposable = watchElementResize(group.element, (entry) => {
+            const { width, height } = entry.contentRect;
+            group.layout(width, height); // let the group know it's size is changing so it can fire events to the panel
+        });
+        floatingGroupPanel.addDisposables(overlay.onDidChange(() => {
+            // this is either a resize or a move
+            // to inform the panels .layout(...) the group with it's current size
+            // don't care about resize since the above watcher handles that
+            group.layout(group.height, group.width);
+        }), overlay.onDidChangeEnd(() => {
+            this._bufferOnDidLayoutChange.fire();
+        }), group.onDidChange((event) => {
+            overlay.setBounds({
+                height: event === null || event === void 0 ? void 0 : event.height,
+                width: event === null || event === void 0 ? void 0 : event.width,
+            });
+        }), {
+            dispose: () => {
+                disposable.dispose();
+                group.model.isFloating = false;
+                remove(this.floatingGroups, floatingGroupPanel);
+                this.updateWatermark();
+            },
+        });
+        this.floatingGroups.push(floatingGroupPanel);
+        this.updateWatermark();
+    }
     orthogonalize(position) {
         switch (position) {
             case 'top':
@@ -5179,6 +5718,7 @@ class DockviewComponent extends BaseGrid {
         switch (position) {
             case 'top':
             case 'left':
+            case 'center':
                 return this.createGroupAtLocation([0]); // insert into first position
             case 'bottom':
             case 'right':
@@ -5196,6 +5736,15 @@ class DockviewComponent extends BaseGrid {
         }
         this.layout(this.gridview.width, this.gridview.height, true);
     }
+    layout(width, height, forceResize) {
+        super.layout(width, height, forceResize);
+        if (this.floatingGroups) {
+            for (const floating of this.floatingGroups) {
+                // ensure floting groups stay within visible boundaries
+                floating.overlay.setBounds();
+            }
+        }
+    }
     focus() {
         var _a;
         (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
@@ -5258,51 +5807,81 @@ class DockviewComponent extends BaseGrid {
             collection[panel.id] = panel.toJSON();
             return collection;
         }, {});
-        return {
+        const floats = this.floatingGroups.map((floatingGroup) => {
+            return {
+                data: floatingGroup.group.toJSON(),
+                position: floatingGroup.overlay.toJSON(),
+            };
+        });
+        const result = {
             grid: data,
             panels,
             activeGroup: (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.id,
         };
+        if (floats.length > 0) {
+            result.floatingGroups = floats;
+        }
+        return result;
     }
     fromJSON(data) {
+        var _a;
         this.clear();
         const { grid, panels, activeGroup } = data;
         if (grid.root.type !== 'branch' || !Array.isArray(grid.root.data)) {
             throw new Error('root must be of type branch');
         }
+        // take note of the existing dimensions
+        const width = this.width;
+        const height = this.height;
+        const createGroupFromSerializedState = (data) => {
+            const { id, locked, hideHeader, views, activeView } = data;
+            const group = this.createGroup({
+                id,
+                locked: !!locked,
+                hideHeader: !!hideHeader,
+            });
+            this._onDidAddGroup.fire(group);
+            for (const child of views) {
+                const panel = this._deserializer.fromJSON(panels[child], group);
+                const isActive = typeof activeView === 'string' && activeView === panel.id;
+                group.model.openPanel(panel, {
+                    skipSetPanelActive: !isActive,
+                    skipSetGroupActive: true,
+                });
+            }
+            if (!group.activePanel && group.panels.length > 0) {
+                group.model.openPanel(group.panels[group.panels.length - 1], {
+                    skipSetGroupActive: true,
+                });
+            }
+            return group;
+        };
         this.gridview.deserialize(grid, {
             fromJSON: (node) => {
-                const { id, locked, hideHeader, views, activeView } = node.data;
-                const group = this.createGroup({
-                    id,
-                    locked: !!locked,
-                    hideHeader: !!hideHeader,
-                });
-                this._onDidAddGroup.fire(group);
-                for (const child of views) {
-                    const panel = this._deserializer.fromJSON(panels[child], group);
-                    const isActive = typeof activeView === 'string' &&
-                        activeView === panel.id;
-                    group.model.openPanel(panel, {
-                        skipSetPanelActive: !isActive,
-                        skipSetGroupActive: true,
-                    });
-                }
-                if (!group.activePanel && group.panels.length > 0) {
-                    group.model.openPanel(group.panels[group.panels.length - 1], {
-                        skipSetGroupActive: true,
-                    });
-                }
-                return group;
+                return createGroupFromSerializedState(node.data);
             },
         });
+        this.layout(width, height, true);
+        const serializedFloatingGroups = (_a = data.floatingGroups) !== null && _a !== void 0 ? _a : [];
+        for (const serializedFloatingGroup of serializedFloatingGroups) {
+            const { data, position } = serializedFloatingGroup;
+            const group = createGroupFromSerializedState(data);
+            this.addFloatingGroup(group, {
+                x: position.left,
+                y: position.top,
+                height: position.height,
+                width: position.width,
+            }, { skipRemoveGroup: true, inDragMode: false });
+        }
+        for (const floatingGroup of this.floatingGroups) {
+            floatingGroup.overlay.setBounds();
+        }
         if (typeof activeGroup === 'string') {
             const panel = this.getPanel(activeGroup);
             if (panel) {
                 this.doSetGroupActive(panel);
             }
         }
-        this.gridview.layout(this.width, this.height);
         this._onDidLayoutFromJSON.fire();
     }
     clear() {
@@ -5311,7 +5890,7 @@ class DockviewComponent extends BaseGrid {
         const hasActivePanel = !!this.activePanel;
         for (const group of groups) {
             // remove the group will automatically remove the panels
-            this.removeGroup(group, true);
+            this.removeGroup(group, { skipActive: true });
         }
         if (hasActiveGroup) {
             this.doSetGroupActive(undefined);
@@ -5333,6 +5912,9 @@ class DockviewComponent extends BaseGrid {
             throw new Error(`panel with id ${options.id} already exists`);
         }
         let referenceGroup;
+        if (options.position && options.floating) {
+            throw new Error('you can only provide one of: position, floating as arguments to .addPanel(...)');
+        }
         if (options.position) {
             if (isPanelOptionsWithPanel(options.position)) {
                 const referencePanel = typeof options.position.referencePanel === 'string'
@@ -5365,7 +5947,20 @@ class DockviewComponent extends BaseGrid {
         let panel;
         if (referenceGroup) {
             const target = toTarget(((_b = options.position) === null || _b === void 0 ? void 0 : _b.direction) || 'within');
-            if (target === 'center') {
+            if (options.floating) {
+                const group = this.createGroup();
+                panel = this.createPanel(options, group);
+                group.model.openPanel(panel);
+                const o = typeof options.floating === 'object' &&
+                    options.floating !== null
+                    ? options.floating
+                    : {};
+                this.addFloatingGroup(group, o, {
+                    inDragMode: false,
+                    skipRemoveGroup: true,
+                });
+            }
+            else if (referenceGroup.api.isFloating || target === 'center') {
                 panel = this.createPanel(options, referenceGroup);
                 referenceGroup.model.openPanel(panel);
             }
@@ -5377,6 +5972,19 @@ class DockviewComponent extends BaseGrid {
                 group.model.openPanel(panel);
             }
         }
+        else if (options.floating) {
+            const group = this.createGroup();
+            panel = this.createPanel(options, group);
+            group.model.openPanel(panel);
+            const o = typeof options.floating === 'object' &&
+                options.floating !== null
+                ? options.floating
+                : {};
+            this.addFloatingGroup(group, o, {
+                inDragMode: false,
+                skipRemoveGroup: true,
+            });
+        }
         else {
             const group = this.createGroupAtLocation();
             panel = this.createPanel(options, group);
@@ -5393,7 +6001,9 @@ class DockviewComponent extends BaseGrid {
             throw new Error(`cannot remove panel ${panel.id}. it's missing a group.`);
         }
         group.model.removePanel(panel);
-        panel.dispose();
+        if (!options.skipDispose) {
+            panel.dispose();
+        }
         if (group.size === 0 && options.removeEmptyGroup) {
             this.removeGroup(group);
         }
@@ -5408,7 +6018,7 @@ class DockviewComponent extends BaseGrid {
     }
     updateWatermark() {
         var _a, _b;
-        if (this.groups.length === 0) {
+        if (this.groups.filter((x) => !x.api.isFloating).length === 0) {
             if (!this.watermark) {
                 this.watermark = this.createWatermarkComponent();
                 this.watermark.init({
@@ -5417,7 +6027,7 @@ class DockviewComponent extends BaseGrid {
                 const watermarkContainer = document.createElement('div');
                 watermarkContainer.className = 'dv-watermark-container';
                 watermarkContainer.appendChild(this.watermark.element);
-                this.element.appendChild(watermarkContainer);
+                this.gridview.element.appendChild(watermarkContainer);
             }
         }
         else if (this.watermark) {
@@ -5467,15 +6077,28 @@ class DockviewComponent extends BaseGrid {
             return group;
         }
     }
-    removeGroup(group, skipActive = false) {
+    removeGroup(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: false,
+                skipDispose: (_a = options === null || options === void 0 ? void 0 : options.skipDispose) !== null && _a !== void 0 ? _a : false,
             });
         }
-        super.doRemoveGroup(group, { skipActive });
+        this.doRemoveGroup(group, options);
+    }
+    doRemoveGroup(group, options) {
+        const floatingGroup = this.floatingGroups.find((_) => _.group === group);
+        if (floatingGroup) {
+            if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
+                floatingGroup.group.dispose();
+                this._groups.delete(group.id);
+            }
+            floatingGroup.dispose();
+            return floatingGroup.group;
+        }
+        return super.doRemoveGroup(group, options);
     }
     moveGroupOrPanel(destinationGroup, sourceGroupId, sourceItemId, destinationTarget, destinationIndex) {
         var _a;
@@ -5506,25 +6129,26 @@ class DockviewComponent extends BaseGrid {
             const targetLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
             if (sourceGroup && sourceGroup.size < 2) {
                 const [targetParentLocation, to] = tail(targetLocation);
-                const sourceLocation = getGridLocation(sourceGroup.element);
-                const [sourceParentLocation, from] = tail(sourceLocation);
-                if (sequenceEquals(sourceParentLocation, targetParentLocation)) {
-                    // special case when 'swapping' two views within same grid location
-                    // if a group has one tab - we are essentially moving the 'group'
-                    // which is equivalent to swapping two views in this case
-                    this.gridview.moveView(sourceParentLocation, from, to);
-                }
-                else {
-                    // source group will become empty so delete the group
-                    const targetGroup = this.doRemoveGroup(sourceGroup, {
-                        skipActive: true,
-                        skipDispose: true,
-                    });
-                    // after deleting the group we need to re-evaulate the ref location
-                    const updatedReferenceLocation = getGridLocation(destinationGroup.element);
-                    const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, destinationTarget);
-                    this.doAddGroup(targetGroup, location);
+                const isFloating = this.floatingGroups.find((x) => x.group === sourceGroup);
+                if (!isFloating) {
+                    const sourceLocation = getGridLocation(sourceGroup.element);
+                    const [sourceParentLocation, from] = tail(sourceLocation);
+                    if (sequenceEquals(sourceParentLocation, targetParentLocation)) {
+                        // special case when 'swapping' two views within same grid location
+                        // if a group has one tab - we are essentially moving the 'group'
+                        // which is equivalent to swapping two views in this case
+                        this.gridview.moveView(sourceParentLocation, from, to);
+                    }
                 }
+                // source group will become empty so delete the group
+                const targetGroup = this.doRemoveGroup(sourceGroup, {
+                    skipActive: true,
+                    skipDispose: true,
+                });
+                // after deleting the group we need to re-evaulate the ref location
+                const updatedReferenceLocation = getGridLocation(destinationGroup.element);
+                const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, destinationTarget);
+                this.doAddGroup(targetGroup, location);
             }
             else {
                 const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(sourceItemId)) ||
@@ -5553,7 +6177,13 @@ class DockviewComponent extends BaseGrid {
                 }
             }
             else {
-                this.gridview.removeView(getGridLocation(sourceGroup.element));
+                const floatingGroup = this.floatingGroups.find((x) => x.group === sourceGroup);
+                if (floatingGroup) {
+                    floatingGroup.dispose();
+                }
+                else {
+                    this.gridview.removeView(getGridLocation(sourceGroup.element));
+                }
                 const referenceLocation = getGridLocation(referenceGroup.element);
                 const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
                 this.gridview.addView(sourceGroup, exports.Sizing.Distribute, dropLocation);
@@ -5708,6 +6338,9 @@ class GridviewComponent extends BaseGrid {
         this.clear();
         const { grid, activePanel } = serializedGridview;
         const queue = [];
+        // take note of the existing dimensions
+        const width = this.width;
+        const height = this.height;
         this.gridview.deserialize(grid, {
             fromJSON: (node) => {
                 const { data } = node;
@@ -5733,7 +6366,7 @@ class GridviewComponent extends BaseGrid {
                 return view;
             },
         });
-        this.layout(this.width, this.height, true);
+        this.layout(width, height, true);
         queue.forEach((f) => f());
         if (typeof activePanel === 'string') {
             const panel = this.getPanel(activePanel);
@@ -6047,6 +6680,9 @@ class SplitviewComponent extends Resizable {
         this.clear();
         const { views, orientation, size, activeView } = serializedSplitview;
         const queue = [];
+        // take note of the existing dimensions
+        const width = this.width;
+        const height = this.height;
         this.splitview = new Splitview(this.element, {
             orientation,
             proportionalLayout: this.options.proportionalLayout,
@@ -6083,7 +6719,7 @@ class SplitviewComponent extends Resizable {
                 }),
             },
         });
-        this.layout(this.width, this.height);
+        this.layout(width, height);
         queue.forEach((f) => f());
         if (typeof activeView === 'string') {
             const panel = this.getPanel(activeView);
@@ -6350,6 +6986,9 @@ class PaneviewComponent extends Resizable {
         this.clear();
         const { views, size } = serializedPaneview;
         const queue = [];
+        // take note of the existing dimensions
+        const width = this.width;
+        const height = this.height;
         this.paneview = new Paneview(this.element, {
             orientation: exports.Orientation.VERTICAL,
             descriptor: {
@@ -6405,7 +7044,7 @@ class PaneviewComponent extends Resizable {
                 }),
             },
         });
-        this.layout(this.width, this.height);
+        this.layout(width, height);
         queue.forEach((f) => f());
         this._onDidLayoutfromJSON.fire();
     }
@@ -6591,4 +7230,4 @@ exports.isPanelOptionsWithPanel = isPanelOptionsWithPanel;
 exports.orthogonal = orthogonal;
 exports.positionToDirection = positionToDirection;
 exports.toTarget = toTarget;
-exports.watchElementResize = watchElementResize;
+//# sourceMappingURL=dockview-core.cjs.js.map