dockview-core 3.2.0 → 4.0.0

package/dist/dockview-core.esm.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 3.2.0
+ * @version 4.0.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -31,7 +31,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".dv-svg {\n  display: inline-block;\n  fill: currentcolor;\n  line-height: 1;\n  stroke: currentcolor;\n  stroke-width: 0;\n}\n.dockview-theme-dark {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-overlay-z-index: 999;\n  --dv-active-sash-transition-duration: 0.1s;\n  --dv-active-sash-transition-delay: 0.5s;\n  --dv-group-view-background-color: #1e1e1e;\n  --dv-tabs-and-actions-container-background-color: #252526;\n  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-tab-divider-color: #1e1e1e;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: #969696;\n  --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n  --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n  --dv-separator-border: rgb(68, 68, 68);\n  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n}\n\n.dockview-theme-light {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-overlay-z-index: 999;\n  --dv-active-sash-transition-duration: 0.1s;\n  --dv-active-sash-transition-delay: 0.5s;\n  --dv-group-view-background-color: white;\n  --dv-tabs-and-actions-container-background-color: #f3f3f3;\n  --dv-activegroup-visiblepanel-tab-background-color: white;\n  --dv-activegroup-hiddenpanel-tab-background-color: #ececec;\n  --dv-inactivegroup-visiblepanel-tab-background-color: white;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #ececec;\n  --dv-tab-divider-color: white;\n  --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-activegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.7);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(51, 51, 51, 0.7);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.35);\n  --dv-separator-border: rgba(128, 128, 128, 0.35);\n  --dv-paneview-header-border-color: rgb(51, 51, 51);\n}\n\n.dockview-theme-vs {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-overlay-z-index: 999;\n  --dv-active-sash-transition-duration: 0.1s;\n  --dv-active-sash-transition-delay: 0.5s;\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 .dv-groupview.dv-active-group > .dv-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 .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tab.dv-active-tab {\n  border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tab.dv-inactive-tab {\n  border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-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 .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tab.dv-active-tab {\n  border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tab.dv-inactive-tab {\n  border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n}\n\n.dockview-theme-abyss {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-overlay-z-index: 999;\n  --dv-active-sash-transition-duration: 0.1s;\n  --dv-active-sash-transition-delay: 0.5s;\n  --dv-group-view-background-color: #000c18;\n  --dv-tabs-and-actions-container-background-color: #1c1c2a;\n  --dv-activegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-activegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-tab-divider-color: #2b2b4a;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);\n  --dv-separator-border: #2b2b4a;\n  --dv-paneview-header-border-color: #2b2b4a;\n  --dv-paneview-active-outline-color: #596f99;\n}\n\n.dockview-theme-dracula {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-overlay-z-index: 999;\n  --dv-active-sash-transition-duration: 0.1s;\n  --dv-active-sash-transition-delay: 0.5s;\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 .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-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 .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-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-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-overlay-z-index: 999;\n  --dv-active-sash-transition-duration: 0.1s;\n  --dv-active-sash-transition-delay: 0.5s;\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-separator-handle-background-color: #cfd1d3;\n  --dv-separator-handle-hover-background-color: #babbbb;\n}\n.dockview-theme-replit .dv-resize-container:has(> .dv-groupview) {\n  border-radius: 8px;\n}\n.dockview-theme-replit .dv-groupview {\n  overflow: hidden;\n  border-radius: 10px;\n}\n.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container {\n  border-bottom: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container .dv-tab {\n  margin: 4px;\n  border-radius: 8px;\n}\n.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container .dv-tab .dv-svg {\n  height: 8px;\n  width: 8px;\n}\n.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container .dv-tab:hover {\n  background-color: #e4e5e6 !important;\n}\n.dockview-theme-replit .dv-groupview .dv-content-container {\n  background-color: #fcfcfc;\n}\n.dockview-theme-replit .dv-groupview.dv-active-group {\n  border: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .dv-groupview.dv-inactive-group {\n  border: 1px solid transparent;\n}\n.dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled)::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 .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):hover::after {\n  background-color: var(--dv-separator-handle-hover-background-color);\n}\n.dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled)::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 .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):hover::after {\n  background-color: var(--dv-separator-handle-hover-background-color);\n}\n.dv-drop-target {\n  position: relative;\n}\n.dv-drop-target > .dv-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.dv-drop-target > .dv-drop-target-dropzone > .dv-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.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-top.dv-drop-target-small-vertical {\n  border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical {\n  border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal {\n  border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {\n  border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-dockview {\n  position: relative;\n  background-color: var(--dv-group-view-background-color);\n}\n.dv-dockview .dv-watermark-container {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  height: 100%;\n  width: 100%;\n  z-index: 1;\n}\n.dv-dockview .dv-overlay-render-container {\n  position: relative;\n}\n\n.dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-inactive-tab {\n  background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {\n  background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);\n  color: var(--dv-inactivegroup-visiblepanel-tab-color);\n}\n.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-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.dv-tab.dv-tab-dragging {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-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.dv-groupview:focus {\n  outline: none;\n}\n.dv-groupview > .dv-content-container {\n  flex-grow: 1;\n  min-height: 0;\n  outline: none;\n}\n.dv-root-wrapper {\n  height: 100%;\n  width: 100%;\n}\n.dv-grid-view,\n.dv-branch-node {\n  height: 100%;\n  width: 100%;\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  --dv-overlay-z-index: var(--dv-overlay-z-index, 999);\n  position: absolute;\n  z-index: calc(var(--dv-overlay-z-index) - 2);\n  border: 1px solid var(--dv-tab-divider-color);\n  box-shadow: var(--dv-floating-box-shadow);\n}\n.dv-resize-container.dv-hidden {\n  display: none;\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: var(--dv-overlay-z-index);\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: var(--dv-overlay-z-index);\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: var(--dv-overlay-z-index);\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: var(--dv-overlay-z-index);\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: var(--dv-overlay-z-index);\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: var(--dv-overlay-z-index);\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: var(--dv-overlay-z-index);\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: var(--dv-overlay-z-index);\n  position: absolute;\n  cursor: se-resize;\n}\n.dv-render-overlay {\n  --dv-overlay-z-index: var(--dv-overlay-z-index, 999);\n  position: absolute;\n  z-index: 1;\n  height: 100%;\n}\n.dv-render-overlay.dv-render-overlay-float {\n  z-index: calc(var(--dv-overlay-z-index) - 1);\n}\n\n.dv-debug .dv-render-overlay {\n  outline: 1px solid red;\n  outline-offset: -1;\n}\n.dv-pane-container {\n  height: 100%;\n  width: 100%;\n}\n.dv-pane-container.dv-animated .dv-view {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.dv-pane-container .dv-view {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  padding: 0px !important;\n}\n.dv-pane-container .dv-view:not(:first-child)::before {\n  background-color: transparent !important;\n}\n.dv-pane-container .dv-view:not(:first-child) .dv-pane > .dv-pane-header {\n  border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.dv-pane-container .dv-view .dv-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.dv-pane-container .dv-view .dv-default-header .dv-pane-header-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.dv-pane-container .dv-view .dv-default-header > span {\n  padding-left: 8px;\n  flex-grow: 1;\n}\n.dv-pane-container:first-of-type > .dv-pane > .dv-pane-header {\n  border-top: none !important;\n}\n.dv-pane-container .dv-pane {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  height: 100%;\n}\n.dv-pane-container .dv-pane .dv-pane-header {\n  box-sizing: border-box;\n  user-select: none;\n  position: relative;\n  outline: none;\n}\n.dv-pane-container .dv-pane .dv-pane-header.dv-pane-draggable {\n  cursor: pointer;\n}\n.dv-pane-container .dv-pane .dv-pane-header:focus:before, .dv-pane-container .dv-pane .dv-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.dv-pane-container .dv-pane .dv-pane-body {\n  overflow-y: auto;\n  overflow-x: hidden;\n  flex-grow: 1;\n  position: relative;\n  outline: none;\n}\n.dv-pane-container .dv-pane .dv-pane-body:focus:before, .dv-pane-container .dv-pane .dv-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 .dv-split-view-container .dv-sash-container .dv-sash.dv-enabled {\n  background-color: black;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-disabled {\n  background-color: orange;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-maximum {\n  background-color: green;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-minimum {\n  background-color: red;\n}\n\n.dv-split-view-container {\n  position: relative;\n  overflow: hidden;\n  height: 100%;\n  width: 100%;\n}\n.dv-split-view-container.dv-splitview-disabled > .dv-sash-container > .dv-sash {\n  pointer-events: none;\n}\n.dv-split-view-container.dv-animation .dv-view,\n.dv-split-view-container.dv-animation .dv-sash {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.dv-split-view-container.dv-horizontal {\n  height: 100%;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash {\n  height: 100%;\n  width: 4px;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-enabled {\n  cursor: ew-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-disabled {\n  cursor: default;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-maximum {\n  cursor: w-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-minimum {\n  cursor: e-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-view-container > .dv-view:not(:first-child)::before {\n  height: 100%;\n  width: 1px;\n}\n.dv-split-view-container.dv-vertical {\n  width: 100%;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash {\n  width: 100%;\n  height: 4px;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-enabled {\n  cursor: ns-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-disabled {\n  cursor: default;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-maximum {\n  cursor: n-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-minimum {\n  cursor: s-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-view-container > .dv-view {\n  width: 100%;\n}\n.dv-split-view-container.dv-vertical > .dv-view-container > .dv-view:not(:first-child)::before {\n  height: 1px;\n  width: 100%;\n}\n.dv-split-view-container .dv-sash-container {\n  height: 100%;\n  width: 100%;\n  position: absolute;\n}\n.dv-split-view-container .dv-sash-container .dv-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.dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):active, .dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):hover {\n  background-color: var(--dv-active-sash-color, transparent);\n  transition-property: background-color;\n  transition-timing-function: ease-in-out;\n  transition-duration: var(--dv-active-sash-transition-duration, 0.1s);\n  transition-delay: var(--dv-active-sash-transition-delay, 0.5s);\n}\n.dv-split-view-container .dv-view-container {\n  position: relative;\n  height: 100%;\n  width: 100%;\n}\n.dv-split-view-container .dv-view-container .dv-view {\n  height: 100%;\n  box-sizing: border-box;\n  overflow: auto;\n  position: absolute;\n}\n.dv-split-view-container.dv-separator-border .dv-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.dv-tab {\n  flex-shrink: 0;\n}\n.dv-tab:focus-within, .dv-tab:focus {\n  position: relative;\n}\n.dv-tab:focus-within::after, .dv-tab:focus::after {\n  position: absolute;\n  content: \"\";\n  height: 100%;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  pointer-events: none;\n  outline: 1px solid var(--dv-tab-divider-color) !important;\n  outline-offset: -1px;\n  z-index: 5;\n}\n.dv-tab.dv-tab-dragging .dv-default-tab-action {\n  background-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-tab.dv-active-tab .dv-default-tab .dv-default-tab-action {\n  visibility: visible;\n}\n.dv-tab.dv-inactive-tab .dv-default-tab .dv-default-tab-action {\n  visibility: hidden;\n}\n.dv-tab.dv-inactive-tab .dv-default-tab:hover .dv-default-tab-action {\n  visibility: visible;\n}\n.dv-tab .dv-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: ellipsis;\n}\n.dv-tab .dv-default-tab .dv-default-tab-content {\n  padding: 0px 8px;\n  flex-grow: 1;\n}\n.dv-tab .dv-default-tab .dv-default-tab-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.dv-tab .dv-default-tab .dv-default-tab-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}\n.dv-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.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container {\n  flex-grow: 1;\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container .dv-tab {\n  flex-grow: 1;\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-void-container {\n  flex-grow: 0;\n}\n.dv-tabs-and-actions-container .dv-void-container {\n  display: flex;\n  flex-grow: 1;\n  cursor: grab;\n}\n.dv-tabs-and-actions-container .dv-tabs-container {\n  display: flex;\n  overflow-x: overlay;\n  overflow-y: hidden;\n  scrollbar-width: thin;\n  /* Track */\n  /* Handle */\n}\n.dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar {\n  height: 3px;\n}\n.dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar-track {\n  background: transparent;\n}\n.dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar-thumb {\n  background: var(--dv-tabs-container-scrollbar-color);\n}\n.dv-tabs-and-actions-container .dv-tabs-container .dv-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.dv-tabs-and-actions-container .dv-tabs-container .dv-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.dv-watermark {\n  display: flex;\n  height: 100%;\n}";
+var css_248z = ".dv-scrollable {\n  position: relative;\n  overflow: hidden;\n}\n.dv-scrollable .dv-scrollbar-horizontal {\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  height: 4px;\n  border-radius: 2px;\n  background-color: transparent;\n  transition-property: background-color;\n  transition-timing-function: ease-in-out;\n  transition-duration: 1s;\n  transition-delay: 0s;\n}\n.dv-scrollable:hover .dv-scrollbar-horizontal, .dv-scrollable.dv-scrollable-resizing .dv-scrollbar-horizontal, .dv-scrollable.dv-scrollable-scrolling .dv-scrollbar-horizontal {\n  background-color: var(--dv-scrollbar-background-color, rgba(255, 255, 255, 0.25));\n}\n.dv-svg {\n  display: inline-block;\n  fill: currentcolor;\n  line-height: 1;\n  stroke: currentcolor;\n  stroke-width: 0;\n}\n.dockview-theme-dark {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: transparent;\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-overlay-z-index: 999;\n  --dv-tab-font-size: inherit;\n  --dv-border-radius: 0px;\n  --dv-tab-margin: 0;\n  --dv-sash-color: transparent;\n  --dv-active-sash-color: transparent;\n  --dv-active-sash-transition-duration: 0.1s;\n  --dv-active-sash-transition-delay: 0.5s;\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.dockview-theme-dark .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n  opacity: 0;\n  transition: none;\n}\n\n.dockview-theme-light {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: transparent;\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-overlay-z-index: 999;\n  --dv-tab-font-size: inherit;\n  --dv-border-radius: 0px;\n  --dv-tab-margin: 0;\n  --dv-sash-color: transparent;\n  --dv-active-sash-color: transparent;\n  --dv-active-sash-transition-duration: 0.1s;\n  --dv-active-sash-transition-delay: 0.5s;\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  --dv-scrollbar-background-color: rgba(0, 0, 0, 0.25);\n}\n.dockview-theme-light .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n  opacity: 0;\n  transition: none;\n}\n\n.dockview-theme-vs {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: transparent;\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-overlay-z-index: 999;\n  --dv-tab-font-size: inherit;\n  --dv-border-radius: 0px;\n  --dv-tab-margin: 0;\n  --dv-sash-color: transparent;\n  --dv-active-sash-color: transparent;\n  --dv-active-sash-transition-duration: 0.1s;\n  --dv-active-sash-transition-delay: 0.5s;\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 .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n  opacity: 0;\n  transition: none;\n}\n.dockview-theme-vs .dv-groupview.dv-active-group > .dv-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 .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tab.dv-active-tab {\n  border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tab.dv-inactive-tab {\n  border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-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 .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tab.dv-active-tab {\n  border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tab.dv-inactive-tab {\n  border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n}\n\n.dockview-theme-abyss {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: transparent;\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-overlay-z-index: 999;\n  --dv-tab-font-size: inherit;\n  --dv-border-radius: 0px;\n  --dv-tab-margin: 0;\n  --dv-sash-color: transparent;\n  --dv-active-sash-color: transparent;\n  --dv-active-sash-transition-duration: 0.1s;\n  --dv-active-sash-transition-delay: 0.5s;\n  --dv-color-abyss-dark: #000c18;\n  --dv-color-abyss: #10192c;\n  --dv-color-abyss-light: #1c1c2a;\n  --dv-color-abyss-lighter: #2b2b4a;\n  --dv-color-abyss-accent: rgb(91, 30, 207);\n  --dv-color-abyss-primary-text: white;\n  --dv-color-abyss-secondary-text: rgb(148, 151, 169);\n  --dv-group-view-background-color: var(--dv-color-abyss-dark);\n  --dv-tabs-and-actions-container-background-color: var(\n      --dv-color-abyss-light\n  );\n  --dv-activegroup-visiblepanel-tab-background-color: var(\n      --dv-color-abyss-dark\n  );\n  --dv-activegroup-hiddenpanel-tab-background-color: var(--dv-color-abyss);\n  --dv-inactivegroup-visiblepanel-tab-background-color: var(\n      --dv-color-abyss-dark\n  );\n  --dv-inactivegroup-hiddenpanel-tab-background-color: var(--dv-color-abyss);\n  --dv-tab-divider-color: var(--dv-color-abyss-lighter);\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: var(--dv-color-abyss-lighter);\n  --dv-paneview-header-border-color: var(--dv-color-abyss-lighter);\n  --dv-paneview-active-outline-color: #596f99;\n}\n.dockview-theme-abyss .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n  opacity: 0;\n  transition: none;\n}\n\n.dockview-theme-dracula {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: transparent;\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-overlay-z-index: 999;\n  --dv-tab-font-size: inherit;\n  --dv-border-radius: 0px;\n  --dv-tab-margin: 0;\n  --dv-sash-color: transparent;\n  --dv-active-sash-color: transparent;\n  --dv-active-sash-transition-duration: 0.1s;\n  --dv-active-sash-transition-delay: 0.5s;\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 .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n  opacity: 0;\n  transition: none;\n}\n.dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-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 .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-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-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: transparent;\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-overlay-z-index: 999;\n  --dv-tab-font-size: inherit;\n  --dv-border-radius: 0px;\n  --dv-tab-margin: 0;\n  --dv-sash-color: transparent;\n  --dv-active-sash-color: transparent;\n  --dv-active-sash-transition-duration: 0.1s;\n  --dv-active-sash-transition-delay: 0.5s;\n  padding: 10px;\n  background-color: #ebeced;\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-sash-color: #cfd1d3;\n  --dv-active-sash-color: #babbbb;\n}\n.dockview-theme-replit .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n  opacity: 0;\n  transition: none;\n}\n.dockview-theme-replit .dv-resize-container:has(> .dv-groupview) {\n  border-radius: 8px;\n}\n.dockview-theme-replit .dv-resize-container {\n  border-radius: 10px !important;\n  border: none;\n}\n.dockview-theme-replit .dv-groupview {\n  overflow: hidden;\n  border-radius: 10px;\n}\n.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container {\n  border-bottom: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container .dv-tab {\n  margin: 4px;\n  border-radius: 8px;\n}\n.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container .dv-tab .dv-svg {\n  height: 8px;\n  width: 8px;\n}\n.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container .dv-tab:hover {\n  background-color: #e4e5e6 !important;\n}\n.dockview-theme-replit .dv-groupview .dv-content-container {\n  background-color: #fcfcfc;\n}\n.dockview-theme-replit .dv-groupview.dv-active-group {\n  border: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .dv-groupview.dv-inactive-group {\n  border: 1px solid transparent;\n}\n.dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash {\n  background-color: transparent;\n}\n.dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled)::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-sash-color);\n  position: absolute;\n}\n.dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):hover, .dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):active {\n  background-color: transparent;\n}\n.dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):hover::after, .dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):active::after {\n  background-color: var(--dv-active-sash-color);\n}\n.dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash {\n  background-color: transparent;\n}\n.dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled)::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-sash-color);\n  position: absolute;\n}\n.dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):hover, .dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):active {\n  background-color: transparent;\n}\n.dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):hover::after, .dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):active::after {\n  background-color: var(--dv-active-sash-color);\n}\n\n.dockview-theme-abyss-spaced {\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: transparent;\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-overlay-z-index: 999;\n  --dv-tab-font-size: inherit;\n  --dv-border-radius: 0px;\n  --dv-tab-margin: 0;\n  --dv-sash-color: transparent;\n  --dv-active-sash-color: transparent;\n  --dv-active-sash-transition-duration: 0.1s;\n  --dv-active-sash-transition-delay: 0.5s;\n  --dv-tab-font-size: 12px;\n  --dv-border-radius: 20px;\n  --dv-tab-margin: 0.5rem 0.25rem;\n  --dv-tabs-and-actions-container-height: 44px;\n  --dv-border-radius: 20px;\n  --dv-color-abyss-dark: rgb(11, 6, 17);\n  --dv-color-abyss: #16121f;\n  --dv-color-abyss-light: #201d2b;\n  --dv-color-abyss-lighter: #2a2837;\n  --dv-color-abyss-accent: rgb(91, 30, 207);\n  --dv-color-abyss-primary-text: white;\n  --dv-color-abyss-secondary-text: rgb(148, 151, 169);\n  --dv-drag-over-border: 2px solid var(--dv-color-abyss-accent);\n  --dv-drag-over-background-color: \"\";\n  --dv-group-view-background-color: var(--dv-color-abyss-dark);\n  --dv-tabs-and-actions-container-background-color: var(--dv-color-abyss);\n  --dv-activegroup-visiblepanel-tab-background-color: var(\n      --dv-color-abyss-lighter\n  );\n  --dv-activegroup-hiddenpanel-tab-background-color: var(\n      --dv-color-abyss-light\n  );\n  --dv-inactivegroup-visiblepanel-tab-background-color: var(\n      --dv-color-abyss-lighter\n  );\n  --dv-inactivegroup-hiddenpanel-tab-background-color: var(\n      --dv-color-abyss-light\n  );\n  --dv-tab-divider-color: transparent;\n  --dv-activegroup-visiblepanel-tab-color: var(--dv-color-abyss-primary-text);\n  --dv-activegroup-hiddenpanel-tab-color: var(\n      --dv-color-abyss-secondary-text\n  );\n  --dv-inactivegroup-visiblepanel-tab-color: var(\n      --dv-color-abyss-primary-text\n  );\n  --dv-inactivegroup-hiddenpanel-tab-color: var(\n      --dv-color-abyss-secondary-text\n  );\n  --dv-separator-border: transparent;\n  --dv-paneview-header-border-color: rgb(51, 51, 51);\n  --dv-active-sash-color: var(--dv-color-abyss-accent);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.5);\n  padding: 10px;\n  background-color: var(--dv-color-abyss-dark);\n}\n.dockview-theme-abyss-spaced .dv-resize-container:has(> .dv-groupview) {\n  border-radius: 8px;\n}\n.dockview-theme-abyss-spaced .dv-sash {\n  border-radius: 4px;\n}\n.dockview-theme-abyss-spaced .dv-drop-target-anchor {\n  border-radius: calc(var(--dv-border-radius) / 4);\n}\n.dockview-theme-abyss-spaced .dv-drop-target-anchor.dv-drop-target-content {\n  border-radius: var(--dv-border-radius);\n}\n.dockview-theme-abyss-spaced .dv-resize-container {\n  border-radius: var(--dv-border-radius) !important;\n  border: none;\n}\n.dockview-theme-abyss-spaced .dv-tabs-overflow-container,\n.dockview-theme-abyss-spaced .dv-tabs-overflow-dropdown-default {\n  border-radius: 8px;\n  height: unset !important;\n}\n.dockview-theme-abyss-spaced .dv-tab {\n  border-radius: 8px;\n}\n.dockview-theme-abyss-spaced .dv-tab .dv-svg {\n  height: 8px;\n  width: 8px;\n}\n.dockview-theme-abyss-spaced .dv-groupview {\n  border-radius: var(--dv-border-radius);\n}\n.dockview-theme-abyss-spaced .dv-groupview .dv-tabs-and-actions-container {\n  padding: 0px calc(var(--dv-border-radius) / 2);\n}\n.dockview-theme-abyss-spaced .dv-groupview .dv-content-container {\n  background-color: var(--dv-tabs-and-actions-container-background-color);\n}\n.dockview-theme-abyss-spaced .dv-resize-container .dv-groupview {\n  border: 2px solid var(--dv-color-abyss-dark);\n}\n\n.dockview-theme-light-spaced {\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: transparent;\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-overlay-z-index: 999;\n  --dv-tab-font-size: inherit;\n  --dv-border-radius: 0px;\n  --dv-tab-margin: 0;\n  --dv-sash-color: transparent;\n  --dv-active-sash-color: transparent;\n  --dv-active-sash-transition-duration: 0.1s;\n  --dv-active-sash-transition-delay: 0.5s;\n  --dv-tab-font-size: 12px;\n  --dv-border-radius: 20px;\n  --dv-tab-margin: 0.5rem 0.25rem;\n  --dv-tabs-and-actions-container-height: 44px;\n  --dv-border-radius: 20px;\n  --dv-drag-over-border: 2px solid rgb(91, 30, 207);\n  --dv-drag-over-background-color: \"\";\n  --dv-group-view-background-color: #f6f5f9;\n  --dv-tabs-and-actions-container-background-color: white;\n  --dv-activegroup-visiblepanel-tab-background-color: #ededf0;\n  --dv-activegroup-hiddenpanel-tab-background-color: #f9f9fa;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #ededf0;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #f9f9fa;\n  --dv-tab-divider-color: transparent;\n  --dv-activegroup-visiblepanel-tab-color: rgb(104, 107, 130);\n  --dv-activegroup-hiddenpanel-tab-color: rgb(148, 151, 169);\n  --dv-inactivegroup-visiblepanel-tab-color: rgb(104, 107, 130);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgb(148, 151, 169);\n  --dv-separator-border: transparent;\n  --dv-paneview-header-border-color: rgb(51, 51, 51);\n  --dv-active-sash-color: rgb(91, 30, 207);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.1);\n  padding: 10px;\n  background-color: #f6f5f9;\n  --dv-scrollbar-background-color: rgba(0, 0, 0, 0.25);\n}\n.dockview-theme-light-spaced .dv-resize-container:has(> .dv-groupview) {\n  border-radius: 8px;\n}\n.dockview-theme-light-spaced .dv-sash {\n  border-radius: 4px;\n}\n.dockview-theme-light-spaced .dv-drop-target-anchor {\n  border-radius: calc(var(--dv-border-radius) / 4);\n}\n.dockview-theme-light-spaced .dv-drop-target-anchor.dv-drop-target-content {\n  border-radius: var(--dv-border-radius);\n}\n.dockview-theme-light-spaced .dv-resize-container {\n  border-radius: var(--dv-border-radius) !important;\n  border: none;\n}\n.dockview-theme-light-spaced .dv-tabs-overflow-container,\n.dockview-theme-light-spaced .dv-tabs-overflow-dropdown-default {\n  border-radius: 8px;\n  height: unset !important;\n}\n.dockview-theme-light-spaced .dv-tab {\n  border-radius: 8px;\n}\n.dockview-theme-light-spaced .dv-tab .dv-svg {\n  height: 8px;\n  width: 8px;\n}\n.dockview-theme-light-spaced .dv-groupview {\n  border-radius: var(--dv-border-radius);\n}\n.dockview-theme-light-spaced .dv-groupview .dv-tabs-and-actions-container {\n  padding: 0px calc(var(--dv-border-radius) / 2);\n}\n.dockview-theme-light-spaced .dv-groupview .dv-content-container {\n  background-color: var(--dv-tabs-and-actions-container-background-color);\n}\n.dockview-theme-light-spaced .dv-resize-container .dv-groupview {\n  border: 2px solid rgba(255, 255, 255, 0.1);\n}\n.dv-drop-target-container {\n  position: absolute;\n  z-index: 9999;\n  top: 0px;\n  left: 0px;\n  height: 100%;\n  width: 100%;\n  pointer-events: none;\n  overflow: hidden;\n  --dv-transition-duration: 300ms;\n}\n.dv-drop-target-container .dv-drop-target-anchor {\n  position: relative;\n  border: var(--dv-drag-over-border);\n  transition: opacity var(--dv-transition-duration) ease-in, top var(--dv-transition-duration) ease-out, left var(--dv-transition-duration) ease-out, width var(--dv-transition-duration) ease-out, height var(--dv-transition-duration) ease-out;\n  background-color: var(--dv-drag-over-background-color);\n  opacity: 1;\n}\n.dv-drop-target {\n  position: relative;\n  --dv-transition-duration: 70ms;\n}\n.dv-drop-target > .dv-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.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection {\n  position: relative;\n  box-sizing: border-box;\n  height: 100%;\n  width: 100%;\n  border: var(--dv-drag-over-border);\n  background-color: var(--dv-drag-over-background-color);\n  transition: top var(--dv-transition-duration) ease-out, left var(--dv-transition-duration) ease-out, width var(--dv-transition-duration) ease-out, height var(--dv-transition-duration) ease-out, opacity var(--dv-transition-duration) ease-out;\n  will-change: transform;\n  pointer-events: none;\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-top.dv-drop-target-small-vertical {\n  border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical {\n  border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal {\n  border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {\n  border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-dockview {\n  position: relative;\n  background-color: var(--dv-group-view-background-color);\n}\n.dv-dockview .dv-watermark-container {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  height: 100%;\n  width: 100%;\n  z-index: 1;\n}\n.dv-dockview .dv-overlay-render-container {\n  position: relative;\n}\n\n.dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-inactive-tab {\n  background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab {\n  background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);\n  color: var(--dv-inactivegroup-visiblepanel-tab-color);\n}\n.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-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.dv-tab.dv-tab-dragging {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-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.dv-groupview:focus {\n  outline: none;\n}\n.dv-groupview > .dv-content-container {\n  flex-grow: 1;\n  min-height: 0;\n  outline: none;\n}\n.dv-root-wrapper {\n  height: 100%;\n  width: 100%;\n}\n.dv-grid-view,\n.dv-branch-node {\n  height: 100%;\n  width: 100%;\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  --dv-overlay-z-index: var(--dv-overlay-z-index, 999);\n  position: absolute;\n  z-index: calc(var(--dv-overlay-z-index) - 2);\n  border: 1px solid var(--dv-tab-divider-color);\n  box-shadow: var(--dv-floating-box-shadow);\n}\n.dv-resize-container.dv-hidden {\n  display: none;\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: var(--dv-overlay-z-index);\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: var(--dv-overlay-z-index);\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: var(--dv-overlay-z-index);\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: var(--dv-overlay-z-index);\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: var(--dv-overlay-z-index);\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: var(--dv-overlay-z-index);\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: var(--dv-overlay-z-index);\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: var(--dv-overlay-z-index);\n  position: absolute;\n  cursor: se-resize;\n}\n.dv-render-overlay {\n  --dv-overlay-z-index: var(--dv-overlay-z-index, 999);\n  position: absolute;\n  z-index: 1;\n  height: 100%;\n}\n.dv-render-overlay.dv-render-overlay-float {\n  z-index: calc(var(--dv-overlay-z-index) - 1);\n}\n\n.dv-debug .dv-render-overlay {\n  outline: 1px solid red;\n  outline-offset: -1;\n}\n.dv-pane-container {\n  height: 100%;\n  width: 100%;\n}\n.dv-pane-container.dv-animated .dv-view {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.dv-pane-container .dv-view {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  padding: 0px !important;\n}\n.dv-pane-container .dv-view:not(:first-child)::before {\n  background-color: transparent !important;\n}\n.dv-pane-container .dv-view:not(:first-child) .dv-pane > .dv-pane-header {\n  border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.dv-pane-container .dv-view .dv-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.dv-pane-container .dv-view .dv-default-header .dv-pane-header-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.dv-pane-container .dv-view .dv-default-header > span {\n  padding-left: 8px;\n  flex-grow: 1;\n}\n.dv-pane-container:first-of-type > .dv-pane > .dv-pane-header {\n  border-top: none !important;\n}\n.dv-pane-container .dv-pane {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  height: 100%;\n}\n.dv-pane-container .dv-pane .dv-pane-header {\n  box-sizing: border-box;\n  user-select: none;\n  position: relative;\n  outline: none;\n}\n.dv-pane-container .dv-pane .dv-pane-header.dv-pane-draggable {\n  cursor: pointer;\n}\n.dv-pane-container .dv-pane .dv-pane-header:focus:before, .dv-pane-container .dv-pane .dv-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.dv-pane-container .dv-pane .dv-pane-body {\n  overflow-y: auto;\n  overflow-x: hidden;\n  flex-grow: 1;\n  position: relative;\n  outline: none;\n}\n.dv-pane-container .dv-pane .dv-pane-body:focus:before, .dv-pane-container .dv-pane .dv-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 .dv-split-view-container .dv-sash-container .dv-sash.dv-enabled {\n  background-color: black;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-disabled {\n  background-color: orange;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-maximum {\n  background-color: green;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-minimum {\n  background-color: red;\n}\n\n.dv-split-view-container {\n  position: relative;\n  overflow: hidden;\n  height: 100%;\n  width: 100%;\n}\n.dv-split-view-container.dv-splitview-disabled > .dv-sash-container > .dv-sash {\n  pointer-events: none;\n}\n.dv-split-view-container.dv-animation .dv-view,\n.dv-split-view-container.dv-animation .dv-sash {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.dv-split-view-container.dv-horizontal {\n  height: 100%;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash {\n  height: 100%;\n  width: 4px;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-enabled {\n  cursor: ew-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-disabled {\n  cursor: default;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-maximum {\n  cursor: w-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-minimum {\n  cursor: e-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-view-container > .dv-view:not(:first-child)::before {\n  height: 100%;\n  width: 1px;\n}\n.dv-split-view-container.dv-vertical {\n  width: 100%;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash {\n  width: 100%;\n  height: 4px;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-enabled {\n  cursor: ns-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-disabled {\n  cursor: default;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-maximum {\n  cursor: n-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-minimum {\n  cursor: s-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-view-container > .dv-view {\n  width: 100%;\n}\n.dv-split-view-container.dv-vertical > .dv-view-container > .dv-view:not(:first-child)::before {\n  height: 1px;\n  width: 100%;\n}\n.dv-split-view-container .dv-sash-container {\n  height: 100%;\n  width: 100%;\n  position: absolute;\n}\n.dv-split-view-container .dv-sash-container .dv-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  background-color: var(--dv-sash-color, transparent);\n}\n.dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):active, .dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):hover {\n  background-color: var(--dv-active-sash-color, transparent);\n  transition-property: background-color;\n  transition-timing-function: ease-in-out;\n  transition-duration: var(--dv-active-sash-transition-duration, 0.1s);\n  transition-delay: var(--dv-active-sash-transition-delay, 0.5s);\n}\n.dv-split-view-container .dv-view-container {\n  position: relative;\n  height: 100%;\n  width: 100%;\n}\n.dv-split-view-container .dv-view-container .dv-view {\n  height: 100%;\n  box-sizing: border-box;\n  overflow: auto;\n  position: absolute;\n}\n.dv-split-view-container.dv-separator-border .dv-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.dv-tab {\n  flex-shrink: 0;\n}\n.dv-tab:focus-within, .dv-tab:focus {\n  position: relative;\n}\n.dv-tab:focus-within::after, .dv-tab:focus::after {\n  position: absolute;\n  content: \"\";\n  height: 100%;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  pointer-events: none;\n  outline: 1px solid var(--dv-tab-divider-color) !important;\n  outline-offset: -1px;\n  z-index: 5;\n}\n.dv-tab.dv-tab-dragging .dv-default-tab-action {\n  background-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-tab.dv-active-tab .dv-default-tab .dv-default-tab-action {\n  visibility: visible;\n}\n.dv-tab.dv-inactive-tab .dv-default-tab .dv-default-tab-action {\n  visibility: hidden;\n}\n.dv-tab.dv-inactive-tab .dv-default-tab:hover .dv-default-tab-action {\n  visibility: visible;\n}\n.dv-tab .dv-default-tab {\n  position: relative;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.dv-tab .dv-default-tab .dv-default-tab-content {\n  flex-grow: 1;\n  margin-right: 4px;\n}\n.dv-tab .dv-default-tab .dv-default-tab-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.dv-tab .dv-default-tab .dv-default-tab-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}\n.dv-tabs-overflow-dropdown-default {\n  height: 100%;\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n  margin: var(--dv-tab-margin);\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  padding: 0.25rem 0.5rem;\n  cursor: pointer;\n}\n.dv-tabs-overflow-dropdown-default > span {\n  padding-left: 0.25rem;\n}\n.dv-tabs-overflow-dropdown-default > svg {\n  transform: rotate(90deg);\n}\n.dv-tabs-container {\n  display: flex;\n  height: 100%;\n  overflow: hidden;\n  scrollbar-width: thin;\n  /* Track */\n  /* Handle */\n}\n.dv-tabs-container.dv-horizontal .dv-tabs-container .dv-tab:last-child {\n  margin-right: 0;\n}\n.dv-tabs-container.dv-horizontal .dv-tabs-container .dv-tab:not(:nth-last-child(1)) {\n  margin-left: 0;\n}\n.dv-tabs-container.dv-horizontal .dv-tabs-container .dv-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.dv-tabs-container::-webkit-scrollbar {\n  height: 3px;\n}\n.dv-tabs-container::-webkit-scrollbar-track {\n  background: transparent;\n}\n.dv-tabs-container::-webkit-scrollbar-thumb {\n  background: var(--dv-tabs-container-scrollbar-color);\n}\n\n.dv-tab {\n  -webkit-user-drag: element;\n  outline: none;\n  padding: 0.25rem 0.5rem;\n  cursor: pointer;\n  position: relative;\n  box-sizing: border-box;\n  font-size: var(--dv-tab-font-size);\n  margin: var(--dv-tab-margin);\n}\n\n.dv-tabs-overflow-container {\n  flex-direction: column;\n  height: unset;\n  border: 1px solid var(--dv-tab-divider-color);\n  background-color: var(--dv-group-view-background-color);\n}\n.dv-tabs-overflow-container .dv-tab:not(:last-child) {\n  border-bottom: 1px solid var(--dv-tab-divider-color);\n}\n.dv-tabs-overflow-container .dv-active-tab {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-tabs-overflow-container .dv-inactive-tab {\n  background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.dv-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.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container {\n  flex-grow: 1;\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container .dv-tab {\n  flex-grow: 1;\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-void-container {\n  flex-grow: 0;\n}\n.dv-tabs-and-actions-container .dv-void-container {\n  display: flex;\n  flex-grow: 1;\n  cursor: grab;\n}\n.dv-tabs-and-actions-container .dv-right-actions-container {\n  display: flex;\n}\n.dv-watermark {\n  display: flex;\n  height: 100%;\n}";
 styleInject(css_248z);
 
 class TransferObject {
@@ -363,6 +363,20 @@ class MutableDisposable {
     }
 }
 
+class OverflowObserver extends CompositeDisposable {
+    constructor(el) {
+        super();
+        this._onDidChange = new Emitter();
+        this.onDidChange = this._onDidChange.event;
+        this._value = null;
+        this.addDisposables(this._onDidChange, watchElementResize(el, (entry) => {
+            const hasScrollX = entry.target.scrollWidth > entry.target.clientWidth;
+            const hasScrollY = entry.target.scrollHeight > entry.target.clientHeight;
+            this._value = { hasScrollX, hasScrollY };
+            this._onDidChange.fire(this._value);
+        }));
+    }
+}
 function watchElementResize(element, cb) {
     const observer = new ResizeObserver((entires) => {
         /**
@@ -601,6 +615,19 @@ class Classnames {
         }
     }
 }
+function isChildEntirelyVisibleWithinParent(child, parent) {
+    //
+    const childPosition = getDomNodePagePosition(child);
+    const parentPosition = getDomNodePagePosition(parent);
+    if (childPosition.left < parentPosition.left) {
+        return false;
+    }
+    if (childPosition.left + childPosition.width >
+        parentPosition.left + parentPosition.width) {
+        return false;
+    }
+    return true;
+}
 
 function tail(arr) {
     if (arr.length === 0) {
@@ -608,9 +635,6 @@ function tail(arr) {
     }
     return [arr.slice(0, arr.length - 1), arr[arr.length - 1]];
 }
-function last(arr) {
-    return arr.length > 0 ? arr[arr.length - 1] : undefined;
-}
 function sequenceEquals(arr1, arr2) {
     if (arr1.length !== arr2.length) {
         return false;
@@ -876,6 +900,7 @@ class Splitview {
     }
     set margin(value) {
         this._margin = value;
+        toggleClass(this.element, 'dv-splitview-has-margin', value !== 0);
     }
     constructor(container, options) {
         var _a, _b;
@@ -3447,9 +3472,6 @@ class DockviewApi {
     get totalPanels() {
         return this.component.totalPanels;
     }
-    get gap() {
-        return this.component.gap;
-    }
     /**
      * Invoked when the active group changes. May be undefined if no group is active.
      */
@@ -3680,9 +3702,6 @@ class DockviewApi {
     addPopoutGroup(item, options) {
         return this.component.addPopoutGroup(item, options);
     }
-    setGap(gap) {
-        this.component.updateOptions({ gap });
-    }
     updateOptions(options) {
         this.component.updateOptions(options);
     }
@@ -3735,14 +3754,16 @@ class DragHandler extends CompositeDisposable {
                      * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
                      * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
                      * dnd logic. You can see the code at
-                     * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
+                 P    * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
                      */
                     event.dataTransfer.setData('text/plain', '');
                 }
             }
         }), addDisposableListener(this.el, 'dragend', () => {
             this.pointerEventsDisposable.dispose();
-            this.dataDisposable.dispose();
+            setTimeout(() => {
+                this.dataDisposable.dispose(); // allow the data to be read by other handlers before disposing
+            }, 0);
         }));
     }
 }
@@ -3852,6 +3873,12 @@ const DEFAULT_SIZE = {
 const SMALL_WIDTH_BOUNDARY = 100;
 const SMALL_HEIGHT_BOUNDARY = 100;
 class Droptarget extends CompositeDisposable {
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = value;
+    }
     get state() {
         return this._state;
     }
@@ -3863,23 +3890,34 @@ class Droptarget extends CompositeDisposable {
         this.onDrop = this._onDrop.event;
         this._onWillShowOverlay = new Emitter();
         this.onWillShowOverlay = this._onWillShowOverlay.event;
+        this._disabled = false;
         // use a set to take advantage of #<set>.has
         this._acceptedTargetZonesSet = new Set(this.options.acceptedTargetZones);
         this.dnd = new DragAndDropObserver(this.element, {
-            onDragEnter: () => undefined,
+            onDragEnter: () => {
+                var _a, _b, _c;
+                (_c = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.getElements();
+            },
             onDragOver: (e) => {
+                var _a, _b, _c, _d, _e, _f, _g;
+                Droptarget.ACTUAL_TARGET = this;
+                const overrideTraget = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
                 if (this._acceptedTargetZonesSet.size === 0) {
+                    if (overrideTraget) {
+                        return;
+                    }
                     this.removeDropTarget();
                     return;
                 }
-                const width = this.element.clientWidth;
-                const height = this.element.clientHeight;
+                const target = (_e = (_d = (_c = this.options).getOverlayOutline) === null || _d === void 0 ? void 0 : _d.call(_c)) !== null && _e !== void 0 ? _e : this.element;
+                const width = target.offsetWidth;
+                const height = target.offsetHeight;
                 if (width === 0 || height === 0) {
                     return; // avoid div!0
                 }
                 const rect = e.currentTarget.getBoundingClientRect();
-                const x = e.clientX - rect.left;
-                const y = e.clientY - rect.top;
+                const x = ((_f = e.clientX) !== null && _f !== void 0 ? _f : 0) - rect.left;
+                const y = ((_g = e.clientY) !== null && _g !== void 0 ? _g : 0) - rect.top;
                 const quadrant = this.calculateQuadrant(this._acceptedTargetZonesSet, x, y, width, height);
                 /**
                  * If the event has already been used by another DropTarget instance
@@ -3892,6 +3930,9 @@ class Droptarget extends CompositeDisposable {
                     return;
                 }
                 if (!this.options.canDisplayOverlay(e, quadrant)) {
+                    if (overrideTraget) {
+                        return;
+                    }
                     this.removeDropTarget();
                     return;
                 }
@@ -3909,29 +3950,57 @@ class Droptarget extends CompositeDisposable {
                     return;
                 }
                 this.markAsUsed(e);
-                if (!this.targetElement) {
+                if (overrideTraget) ;
+                else if (!this.targetElement) {
                     this.targetElement = document.createElement('div');
                     this.targetElement.className = 'dv-drop-target-dropzone';
                     this.overlayElement = document.createElement('div');
                     this.overlayElement.className = 'dv-drop-target-selection';
                     this._state = 'center';
                     this.targetElement.appendChild(this.overlayElement);
-                    this.element.classList.add('dv-drop-target');
-                    this.element.append(this.targetElement);
+                    target.classList.add('dv-drop-target');
+                    target.append(this.targetElement);
+                    // this.overlayElement.style.opacity = '0';
+                    // requestAnimationFrame(() => {
+                    //     if (this.overlayElement) {
+                    //         this.overlayElement.style.opacity = '';
+                    //     }
+                    // });
                 }
                 this.toggleClasses(quadrant, width, height);
                 this._state = quadrant;
             },
             onDragLeave: () => {
+                var _a, _b;
+                const target = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
+                if (target) {
+                    return;
+                }
                 this.removeDropTarget();
             },
-            onDragEnd: () => {
+            onDragEnd: (e) => {
+                var _a, _b;
+                const target = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
+                if (target && Droptarget.ACTUAL_TARGET === this) {
+                    if (this._state) {
+                        // only stop the propagation of the event if we are dealing with it
+                        // which is only when the target has state
+                        e.stopPropagation();
+                        this._onDrop.fire({
+                            position: this._state,
+                            nativeEvent: e,
+                        });
+                    }
+                }
                 this.removeDropTarget();
+                target === null || target === void 0 ? void 0 : target.clear();
             },
             onDrop: (e) => {
+                var _a, _b, _c;
                 e.preventDefault();
                 const state = this._state;
                 this.removeDropTarget();
+                (_c = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.clear();
                 if (state) {
                     // only stop the propagation of the event if we are dealing with it
                     // which is only when the target has state
@@ -3966,8 +4035,9 @@ class Droptarget extends CompositeDisposable {
         return typeof value === 'boolean' && value;
     }
     toggleClasses(quadrant, width, height) {
-        var _a, _b;
-        if (!this.overlayElement) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const target = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
+        if (!target && !this.overlayElement) {
             return;
         }
         const isSmallX = width < SMALL_WIDTH_BOUNDARY;
@@ -3981,7 +4051,7 @@ class Droptarget extends CompositeDisposable {
         const topClass = !isSmallY && isTop;
         const bottomClass = !isSmallY && isBottom;
         let size = 1;
-        const sizeOptions = (_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : DEFAULT_SIZE;
+        const sizeOptions = (_d = (_c = this.options.overlayModel) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : DEFAULT_SIZE;
         if (sizeOptions.type === 'percentage') {
             size = clamp(sizeOptions.value, 0, 100) / 100;
         }
@@ -3993,6 +4063,74 @@ class Droptarget extends CompositeDisposable {
                 size = clamp(0, sizeOptions.value, height) / height;
             }
         }
+        if (target) {
+            const outlineEl = (_g = (_f = (_e = this.options).getOverlayOutline) === null || _f === void 0 ? void 0 : _f.call(_e)) !== null && _g !== void 0 ? _g : this.element;
+            const elBox = outlineEl.getBoundingClientRect();
+            const ta = target.getElements(undefined, outlineEl);
+            const el = ta.root;
+            const overlay = ta.overlay;
+            const bigbox = el.getBoundingClientRect();
+            const rootTop = elBox.top - bigbox.top;
+            const rootLeft = elBox.left - bigbox.left;
+            const box = {
+                top: rootTop,
+                left: rootLeft,
+                width: width,
+                height: height,
+            };
+            if (rightClass) {
+                box.left = rootLeft + width * (1 - size);
+                box.width = width * size;
+            }
+            else if (leftClass) {
+                box.width = width * size;
+            }
+            else if (topClass) {
+                box.height = height * size;
+            }
+            else if (bottomClass) {
+                box.top = rootTop + height * (1 - size);
+                box.height = height * size;
+            }
+            if (isSmallX && isLeft) {
+                box.width = 4;
+            }
+            if (isSmallX && isRight) {
+                box.left = rootLeft + width - 4;
+                box.width = 4;
+            }
+            const topPx = `${Math.round(box.top)}px`;
+            const leftPx = `${Math.round(box.left)}px`;
+            const widthPx = `${Math.round(box.width)}px`;
+            const heightPx = `${Math.round(box.height)}px`;
+            if (overlay.style.top === topPx &&
+                overlay.style.left === leftPx &&
+                overlay.style.width === widthPx &&
+                overlay.style.height === heightPx) {
+                return;
+            }
+            overlay.style.top = topPx;
+            overlay.style.left = leftPx;
+            overlay.style.width = widthPx;
+            overlay.style.height = heightPx;
+            overlay.style.visibility = 'visible';
+            overlay.className = `dv-drop-target-anchor${this.options.className ? ` ${this.options.className}` : ''}`;
+            toggleClass(overlay, 'dv-drop-target-left', isLeft);
+            toggleClass(overlay, 'dv-drop-target-right', isRight);
+            toggleClass(overlay, 'dv-drop-target-top', isTop);
+            toggleClass(overlay, 'dv-drop-target-bottom', isBottom);
+            toggleClass(overlay, 'dv-drop-target-center', quadrant === 'center');
+            if (ta.changed) {
+                toggleClass(overlay, 'dv-drop-target-anchor-container-changed', true);
+                setTimeout(() => {
+                    toggleClass(overlay, 'dv-drop-target-anchor-container-changed', false);
+                }, 10);
+            }
+            return;
+        }
+        if (!this.overlayElement) {
+            return;
+        }
         const box = { top: '0px', left: '0px', width: '100%', height: '100%' };
         /**
          * You can also achieve the overlay placement using the transform CSS property
@@ -4049,12 +4187,13 @@ class Droptarget extends CompositeDisposable {
         return calculateQuadrantAsPixels(overlayType, x, y, width, height, activationSizeOptions.value);
     }
     removeDropTarget() {
+        var _a;
         if (this.targetElement) {
             this._state = undefined;
-            this.element.removeChild(this.targetElement);
+            (_a = this.targetElement.parentElement) === null || _a === void 0 ? void 0 : _a.classList.remove('dv-drop-target');
+            this.targetElement.remove();
             this.targetElement = undefined;
             this.overlayElement = undefined;
-            this.element.classList.remove('dv-drop-target');
         }
     }
 }
@@ -4639,7 +4778,15 @@ class ContentContainer extends CompositeDisposable {
         this._element.className = 'dv-content-container';
         this._element.tabIndex = -1;
         this.addDisposables(this._onDidFocus, this._onDidBlur);
+        const target = group.dropTargetContainer;
         this.dropTarget = new Droptarget(this.element, {
+            getOverlayOutline: () => {
+                var _a;
+                return ((_a = accessor.options.theme) === null || _a === void 0 ? void 0 : _a.dndPanelOverlay) === 'group'
+                    ? this.element.parentElement
+                    : null;
+            },
+            className: 'dv-drop-target-content',
             acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
             canDisplayOverlay: (event, position) => {
                 if (this.group.locked === 'no-drop-target' ||
@@ -4653,22 +4800,11 @@ class ContentContainer extends CompositeDisposable {
                     return false;
                 }
                 if (data && data.viewId === this.accessor.id) {
-                    if (data.groupId === this.group.id) {
-                        if (position === 'center') {
-                            // don't allow to drop on self for center position
-                            return false;
-                        }
-                        if (data.panelId === null) {
-                            // don't allow group move to drop anywhere on self
-                            return false;
-                        }
-                    }
-                    const groupHasOnePanelAndIsActiveDragElement = this.group.panels.length === 1 &&
-                        data.groupId === this.group.id;
-                    return !groupHasOnePanelAndIsActiveDragElement;
+                    return true;
                 }
                 return this.group.canDisplayOverlay(event, position, 'content');
             },
+            getOverrideTarget: target ? () => target.model : undefined,
         });
         this.addDisposables(this.dropTarget);
     }
@@ -4743,6 +4879,18 @@ class ContentContainer extends CompositeDisposable {
     }
 }
 
+function addGhostImage(dataTransfer, ghostElement, options) {
+    var _a, _b;
+    // class dockview provides to force ghost image to be drawn on a different layer and prevent weird rendering issues
+    addClasses(ghostElement, 'dv-dragged');
+    document.body.appendChild(ghostElement);
+    dataTransfer.setDragImage(ghostElement, (_a = options === null || options === void 0 ? void 0 : options.x) !== null && _a !== void 0 ? _a : 0, (_b = options === null || options === void 0 ? void 0 : options.y) !== null && _b !== void 0 ? _b : 0);
+    setTimeout(() => {
+        removeClasses(ghostElement, 'dv-dragged');
+        ghostElement.remove();
+    }, 0);
+}
+
 class TabDragHandler extends DragHandler {
     constructor(element, accessor, group, panel) {
         super(element);
@@ -4783,25 +4931,32 @@ class Tab extends CompositeDisposable {
         toggleClass(this.element, 'dv-inactive-tab', true);
         const dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel);
         this.dropTarget = new Droptarget(this._element, {
-            acceptedTargetZones: ['center'],
+            acceptedTargetZones: ['left', 'right'],
+            overlayModel: { activationSize: { value: 50, type: 'percentage' } },
             canDisplayOverlay: (event, position) => {
                 if (this.group.locked) {
                     return false;
                 }
                 const data = getPanelData();
                 if (data && this.accessor.id === data.viewId) {
-                    if (data.panelId === null &&
-                        data.groupId === this.group.id) {
-                        // don't allow group move to drop on self
-                        return false;
-                    }
-                    return this.panel.id !== data.panelId;
+                    return true;
                 }
                 return this.group.model.canDisplayOverlay(event, position, 'tab');
             },
+            getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
         });
         this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
         this.addDisposables(this._onPointDown, this._onDropped, this._onDragStart, dragHandler.onDragStart((event) => {
+            if (event.dataTransfer) {
+                const style = getComputedStyle(this.element);
+                const newNode = this.element.cloneNode(true);
+                Array.from(style).forEach((key) => newNode.style.setProperty(key, style.getPropertyValue(key), style.getPropertyPriority(key)));
+                newNode.style.position = 'absolute';
+                addGhostImage(event.dataTransfer, newNode, {
+                    y: -10,
+                    x: 30,
+                });
+            }
             this._onDragStart.fire(event);
         }), dragHandler, addDisposableListener(this._element, 'pointerdown', (event) => {
             this._onPointDown.fire(event);
@@ -4825,17 +4980,6 @@ class Tab extends CompositeDisposable {
     }
 }
 
-function addGhostImage(dataTransfer, ghostElement) {
-    // class dockview provides to force ghost image to be drawn on a different layer and prevent weird rendering issues
-    addClasses(ghostElement, 'dv-dragged');
-    document.body.appendChild(ghostElement);
-    dataTransfer.setDragImage(ghostElement, 0, 0);
-    setTimeout(() => {
-        removeClasses(ghostElement, 'dv-dragged');
-        ghostElement.remove();
-    }, 0);
-}
-
 class GroupDragHandler extends DragHandler {
     constructor(element, accessor, group) {
         super(element);
@@ -4875,8 +5019,10 @@ class GroupDragHandler extends DragHandler {
             ghostElement.style.lineHeight = '20px';
             ghostElement.style.borderRadius = '12px';
             ghostElement.style.position = 'absolute';
+            ghostElement.style.pointerEvents = 'none';
+            ghostElement.style.top = '-9999px';
             ghostElement.textContent = `Multiple Panels (${this.group.size})`;
-            addGhostImage(dataTransfer, ghostElement);
+            addGhostImage(dataTransfer, ghostElement, { y: -10, x: 30 });
         }
         return {
             dispose: () => {
@@ -4908,19 +5054,13 @@ class VoidContainer extends CompositeDisposable {
         this.dropTraget = new Droptarget(this._element, {
             acceptedTargetZones: ['center'],
             canDisplayOverlay: (event, position) => {
-                var _a;
                 const data = getPanelData();
                 if (data && this.accessor.id === data.viewId) {
-                    if (data.panelId === null &&
-                        data.groupId === this.group.id) {
-                        // don't allow group move to drop on self
-                        return false;
-                    }
-                    // don't show the overlay if the tab being dragged is the last panel of this group
-                    return ((_a = last(this.group.panels)) === null || _a === void 0 ? void 0 : _a.id) !== data.panelId;
+                    return true;
                 }
                 return group.model.canDisplayOverlay(event, position, 'header_space');
             },
+            getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
         });
         this.onWillShowOverlay = this.dropTraget.onWillShowOverlay;
         this.addDisposables(handler, handler.onDragStart((event) => {
@@ -4931,88 +5071,338 @@ class VoidContainer extends CompositeDisposable {
     }
 }
 
-class TabsContainer extends CompositeDisposable {
-    get panels() {
-        return this.tabs.map((_) => _.value.panel.id);
-    }
-    get size() {
-        return this.tabs.length;
-    }
-    get hidden() {
-        return this._hidden;
+class Scrollbar extends CompositeDisposable {
+    get element() {
+        return this._element;
     }
-    set hidden(value) {
-        this._hidden = value;
-        this.element.style.display = value ? 'none' : '';
+    constructor(scrollableElement) {
+        super();
+        this.scrollableElement = scrollableElement;
+        this._scrollLeft = 0;
+        this._element = document.createElement('div');
+        this._element.className = 'dv-scrollable';
+        this._horizontalScrollbar = document.createElement('div');
+        this._horizontalScrollbar.className = 'dv-scrollbar-horizontal';
+        this.element.appendChild(scrollableElement);
+        this.element.appendChild(this._horizontalScrollbar);
+        this.addDisposables(addDisposableListener(this.element, 'wheel', (event) => {
+            this._scrollLeft += event.deltaY * Scrollbar.MouseWheelSpeed;
+            this.calculateScrollbarStyles();
+        }), addDisposableListener(this._horizontalScrollbar, 'pointerdown', (event) => {
+            event.preventDefault();
+            toggleClass(this.element, 'dv-scrollable-scrolling', true);
+            const originalClientX = event.clientX;
+            const originalScrollLeft = this._scrollLeft;
+            const onPointerMove = (event) => {
+                const deltaX = event.clientX - originalClientX;
+                const { clientWidth } = this.element;
+                const { scrollWidth } = this.scrollableElement;
+                const p = clientWidth / scrollWidth;
+                this._scrollLeft = originalScrollLeft + deltaX / p;
+                this.calculateScrollbarStyles();
+            };
+            const onEnd = () => {
+                toggleClass(this.element, 'dv-scrollable-scrolling', false);
+                document.removeEventListener('pointermove', onPointerMove);
+                document.removeEventListener('pointerup', onEnd);
+                document.removeEventListener('pointercancel', onEnd);
+            };
+            document.addEventListener('pointermove', onPointerMove);
+            document.addEventListener('pointerup', onEnd);
+            document.addEventListener('pointercancel', onEnd);
+        }), addDisposableListener(this.element, 'scroll', () => {
+            this.calculateScrollbarStyles();
+        }), addDisposableListener(this.scrollableElement, 'scroll', () => {
+            this._scrollLeft = this.scrollableElement.scrollLeft;
+            this.calculateScrollbarStyles();
+        }), watchElementResize(this.element, () => {
+            toggleClass(this.element, 'dv-scrollable-resizing', true);
+            if (this._animationTimer) {
+                clearTimeout(this._animationTimer);
+            }
+            this._animationTimer = setTimeout(() => {
+                clearTimeout(this._animationTimer);
+                toggleClass(this.element, 'dv-scrollable-resizing', false);
+            }, 500);
+            this.calculateScrollbarStyles();
+        }));
     }
-    show() {
-        if (!this.hidden) {
-            this.element.style.display = '';
+    calculateScrollbarStyles() {
+        const { clientWidth } = this.element;
+        const { scrollWidth } = this.scrollableElement;
+        const hasScrollbar = scrollWidth > clientWidth;
+        if (hasScrollbar) {
+            const px = clientWidth * (clientWidth / scrollWidth);
+            this._horizontalScrollbar.style.width = `${px}px`;
+            this._scrollLeft = clamp(this._scrollLeft, 0, this.scrollableElement.scrollWidth - clientWidth);
+            this.scrollableElement.scrollLeft = this._scrollLeft;
+            const percentageComplete = this._scrollLeft / (scrollWidth - clientWidth);
+            this._horizontalScrollbar.style.left = `${(clientWidth - px) * percentageComplete}px`;
+        }
+        else {
+            this._horizontalScrollbar.style.width = `0px`;
+            this._horizontalScrollbar.style.left = `0px`;
+            this._scrollLeft = 0;
         }
     }
-    hide() {
-        this._element.style.display = 'none';
+}
+Scrollbar.MouseWheelSpeed = 1;
+
+class Tabs extends CompositeDisposable {
+    get showTabsOverflowControl() {
+        return this._showTabsOverflowControl;
     }
-    setRightActionsElement(element) {
-        if (this.rightActions === element) {
+    set showTabsOverflowControl(value) {
+        if (this._showTabsOverflowControl == value) {
             return;
         }
-        if (this.rightActions) {
-            this.rightActions.remove();
-            this.rightActions = undefined;
-        }
-        if (element) {
-            this.rightActionsContainer.appendChild(element);
-            this.rightActions = element;
+        this._showTabsOverflowControl = value;
+        if (value) {
+            const observer = new OverflowObserver(this._tabsList);
+            this._observerDisposable.value = new CompositeDisposable(observer, observer.onDidChange((event) => {
+                const hasOverflow = event.hasScrollX || event.hasScrollY;
+                this.toggleDropdown({ reset: !hasOverflow });
+            }), addDisposableListener(this._tabsList, 'scroll', () => {
+                this.toggleDropdown({ reset: false });
+            }));
         }
     }
-    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() {
+        return this._element;
+    }
+    get panels() {
+        return this._tabs.map((_) => _.value.panel.id);
+    }
+    get size() {
+        return this._tabs.length;
+    }
+    get tabs() {
+        return this._tabs.map((_) => _.value);
+    }
+    constructor(group, accessor, options) {
+        super();
+        this.group = group;
+        this.accessor = accessor;
+        this._observerDisposable = new MutableDisposable();
+        this._tabs = [];
+        this.selectedIndex = -1;
+        this._showTabsOverflowControl = false;
+        this._onTabDragStart = new Emitter();
+        this.onTabDragStart = this._onTabDragStart.event;
+        this._onDrop = new Emitter();
+        this.onDrop = this._onDrop.event;
+        this._onWillShowOverlay = new Emitter();
+        this.onWillShowOverlay = this._onWillShowOverlay.event;
+        this._onOverflowTabsChange = new Emitter();
+        this.onOverflowTabsChange = this._onOverflowTabsChange.event;
+        this._tabsList = document.createElement('div');
+        this._tabsList.className = 'dv-tabs-container dv-horizontal';
+        this.showTabsOverflowControl = options.showTabsOverflowControl;
+        const scrollbar = new Scrollbar(this._tabsList);
+        this._element = scrollbar.element;
+        this.addDisposables(this._onOverflowTabsChange, this._observerDisposable, scrollbar, this._onWillShowOverlay, this._onDrop, this._onTabDragStart, addDisposableListener(this.element, 'pointerdown', (event) => {
+            if (event.defaultPrevented) {
+                return;
+            }
+            const isLeftClick = event.button === 0;
+            if (isLeftClick) {
+                this.accessor.doSetGroupActive(this.group);
+            }
+        }), Disposable.from(() => {
+            for (const { value, disposable } of this._tabs) {
+                disposable.dispose();
+                value.dispose();
+            }
+            this._tabs = [];
+        }));
+    }
+    indexOf(id) {
+        return this._tabs.findIndex((tab) => tab.value.panel.id === id);
+    }
+    isActive(tab) {
+        return (this.selectedIndex > -1 &&
+            this._tabs[this.selectedIndex].value === tab);
+    }
+    setActivePanel(panel) {
+        let runningWidth = 0;
+        for (const tab of this._tabs) {
+            const isActivePanel = panel.id === tab.value.panel.id;
+            tab.value.setActive(isActivePanel);
+            if (isActivePanel) {
+                const element = tab.value.element;
+                const parentElement = element.parentElement;
+                if (runningWidth < parentElement.scrollLeft ||
+                    runningWidth + element.clientWidth >
+                        parentElement.scrollLeft + parentElement.clientWidth) {
+                    parentElement.scrollLeft = runningWidth;
+                }
+            }
+            runningWidth += tab.value.element.clientWidth;
         }
     }
-    setPrefixActionsElement(element) {
-        if (this.preActions === element) {
+    openPanel(panel, index = this._tabs.length) {
+        if (this._tabs.find((tab) => tab.value.panel.id === panel.id)) {
             return;
         }
-        if (this.preActions) {
-            this.preActions.remove();
-            this.preActions = undefined;
+        const tab = new Tab(panel, this.accessor, this.group);
+        tab.setContent(panel.view.tab);
+        const disposable = new CompositeDisposable(tab.onDragStart((event) => {
+            this._onTabDragStart.fire({ nativeEvent: event, panel });
+        }), tab.onPointerDown((event) => {
+            if (event.defaultPrevented) {
+                return;
+            }
+            const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
+            const isFloatingWithOnePanel = this.group.api.location.type === 'floating' &&
+                this.size === 1;
+            if (isFloatingGroupsEnabled &&
+                !isFloatingWithOnePanel &&
+                event.shiftKey) {
+                event.preventDefault();
+                const panel = this.accessor.getGroupPanel(tab.panel.id);
+                const { top, left } = tab.element.getBoundingClientRect();
+                const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
+                this.accessor.addFloatingGroup(panel, {
+                    x: left - rootLeft,
+                    y: top - rootTop,
+                    inDragMode: true,
+                });
+                return;
+            }
+            switch (event.button) {
+                case 0: // left click or touch
+                    if (this.group.activePanel !== panel) {
+                        this.group.model.openPanel(panel);
+                    }
+                    break;
+            }
+        }), tab.onDrop((event) => {
+            this._onDrop.fire({
+                event: event.nativeEvent,
+                index: this._tabs.findIndex((x) => x.value === tab),
+            });
+        }), tab.onWillShowOverlay((event) => {
+            this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+                kind: 'tab',
+                panel: this.group.activePanel,
+                api: this.accessor.api,
+                group: this.group,
+                getData: getPanelData,
+            }));
+        }));
+        const value = { value: tab, disposable };
+        this.addTab(value, index);
+    }
+    delete(id) {
+        const index = this.indexOf(id);
+        const tabToRemove = this._tabs.splice(index, 1)[0];
+        const { value, disposable } = tabToRemove;
+        disposable.dispose();
+        value.dispose();
+        value.element.remove();
+    }
+    addTab(tab, index = this._tabs.length) {
+        if (index < 0 || index > this._tabs.length) {
+            throw new Error('invalid location');
         }
-        if (element) {
-            this.preActionsContainer.appendChild(element);
-            this.preActions = element;
+        this._tabsList.insertBefore(tab.value.element, this._tabsList.children[index]);
+        this._tabs = [
+            ...this._tabs.slice(0, index),
+            tab,
+            ...this._tabs.slice(index),
+        ];
+        if (this.selectedIndex < 0) {
+            this.selectedIndex = index;
         }
     }
-    get element() {
-        return this._element;
+    toggleDropdown(options) {
+        const tabs = options.reset
+            ? []
+            : this._tabs
+                .filter((tab) => !isChildEntirelyVisibleWithinParent(tab.value.element, this._tabsList))
+                .map((x) => x.value.panel.id);
+        this._onOverflowTabsChange.fire({ tabs, reset: options.reset });
     }
-    isActive(tab) {
-        return (this.selectedIndex > -1 &&
-            this.tabs[this.selectedIndex].value === tab);
+}
+
+const createSvgElementFromPath = (params) => {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttributeNS(null, 'height', params.height);
+    svg.setAttributeNS(null, 'width', params.width);
+    svg.setAttributeNS(null, 'viewBox', params.viewbox);
+    svg.setAttributeNS(null, 'aria-hidden', 'false');
+    svg.setAttributeNS(null, 'focusable', 'false');
+    svg.classList.add('dv-svg');
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttributeNS(null, 'd', params.path);
+    svg.appendChild(path);
+    return svg;
+};
+const createCloseButton = () => createSvgElementFromPath({
+    width: '11',
+    height: '11',
+    viewbox: '0 0 28 28',
+    path: 'M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z',
+});
+const createExpandMoreButton = () => createSvgElementFromPath({
+    width: '11',
+    height: '11',
+    viewbox: '0 0 24 15',
+    path: 'M12 14.15L0 2.15L2.15 0L12 9.9L21.85 0.0499992L24 2.2L12 14.15Z',
+});
+const createChevronRightButton = () => createSvgElementFromPath({
+    width: '11',
+    height: '11',
+    viewbox: '0 0 15 25',
+    path: 'M2.15 24.1L0 21.95L9.9 12.05L0 2.15L2.15 0L14.2 12.05L2.15 24.1Z',
+});
+
+function createDropdownElementHandle() {
+    const el = document.createElement('div');
+    el.className = 'dv-tabs-overflow-dropdown-default';
+    const text = document.createElement('span');
+    text.textContent = ``;
+    const icon = createChevronRightButton();
+    el.appendChild(icon);
+    el.appendChild(text);
+    return {
+        element: el,
+        update: (params) => {
+            text.textContent = `${params.tabs}`;
+        },
+    };
+}
+
+class TabsContainer extends CompositeDisposable {
+    get onTabDragStart() {
+        return this.tabs.onTabDragStart;
     }
-    indexOf(id) {
-        return this.tabs.findIndex((tab) => tab.value.panel.id === id);
+    get panels() {
+        return this.tabs.panels;
+    }
+    get size() {
+        return this.tabs.size;
+    }
+    get hidden() {
+        return this._hidden;
+    }
+    set hidden(value) {
+        this._hidden = value;
+        this.element.style.display = value ? 'none' : '';
+    }
+    get element() {
+        return this._element;
     }
     constructor(accessor, group) {
         super();
         this.accessor = accessor;
         this.group = group;
-        this.tabs = [];
-        this.selectedIndex = -1;
         this._hidden = false;
+        this.dropdownPart = null;
+        this._overflowTabs = [];
+        this._dropdownDisposable = new MutableDisposable();
         this._onDrop = new Emitter();
         this.onDrop = this._onDrop.event;
-        this._onTabDragStart = new Emitter();
-        this.onTabDragStart = this._onTabDragStart.event;
         this._onGroupDragStart = new Emitter();
         this.onGroupDragStart = this._onGroupDragStart.event;
         this._onWillShowOverlay = new Emitter();
@@ -5026,15 +5416,21 @@ class TabsContainer extends CompositeDisposable {
         this.leftActionsContainer.className = 'dv-left-actions-container';
         this.preActionsContainer = document.createElement('div');
         this.preActionsContainer.className = 'dv-pre-actions-container';
-        this.tabContainer = document.createElement('div');
-        this.tabContainer.className = 'dv-tabs-container';
+        this.tabs = new Tabs(group, accessor, {
+            showTabsOverflowControl: !accessor.options.disableTabsOverflowList,
+        });
         this.voidContainer = new VoidContainer(this.accessor, this.group);
         this._element.appendChild(this.preActionsContainer);
-        this._element.appendChild(this.tabContainer);
+        this._element.appendChild(this.tabs.element);
         this._element.appendChild(this.leftActionsContainer);
         this._element.appendChild(this.voidContainer.element);
         this._element.appendChild(this.rightActionsContainer);
-        this.addDisposables(this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._onGroupDragStart, this.voidContainer, this.voidContainer.onDragStart((event) => {
+        this.addDisposables(accessor.onDidOptionsChange(() => {
+            this.tabs.showTabsOverflowControl =
+                !accessor.options.disableTabsOverflowList;
+        }), this.tabs.onOverflowTabsChange((event) => {
+            this.toggleDropdown(event);
+        }), this.tabs, this._onWillShowOverlay, this._onDrop, this._onGroupDragStart, this.voidContainer, this.voidContainer.onDragStart((event) => {
             this._onGroupDragStart.fire({
                 nativeEvent: event,
                 group: this.group,
@@ -5042,7 +5438,7 @@ class TabsContainer extends CompositeDisposable {
         }), this.voidContainer.onDrop((event) => {
             this._onDrop.fire({
                 event: event.nativeEvent,
-                index: this.tabs.length,
+                index: this.tabs.size,
             });
         }), this.voidContainer.onWillShowOverlay((event) => {
             this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
@@ -5052,133 +5448,149 @@ class TabsContainer extends CompositeDisposable {
                 group: this.group,
                 getData: getPanelData,
             }));
-        }), addDisposableListener(this.voidContainer.element, 'pointerdown', (event) => {
-            const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
-            if (isFloatingGroupsEnabled &&
-                event.shiftKey &&
-                this.group.api.location.type !== 'floating') {
-                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, 'pointerdown', (event) => {
-            if (event.defaultPrevented) {
-                return;
-            }
-            const isLeftClick = event.button === 0;
-            if (isLeftClick) {
-                this.accessor.doSetGroupActive(this.group);
-            }
-        }));
-    }
-    setActive(_isGroupActive) {
-        // noop
-    }
-    delete(id) {
-        const index = this.tabs.findIndex((tab) => tab.value.panel.id === id);
-        const tabToRemove = this.tabs.splice(index, 1)[0];
-        if (!tabToRemove) {
-            throw new Error(`dockview: Tab not found`);
-        }
-        const { value, disposable } = tabToRemove;
-        disposable.dispose();
-        value.dispose();
-        value.element.remove();
-        this.updateClassnames();
-    }
-    setActivePanel(panel) {
-        this.tabs.forEach((tab) => {
-            const isActivePanel = panel.id === tab.value.panel.id;
-            tab.value.setActive(isActivePanel);
-        });
-    }
-    openPanel(panel, index = this.tabs.length) {
-        if (this.tabs.find((tab) => tab.value.panel.id === panel.id)) {
-            return;
-        }
-        const tab = new Tab(panel, this.accessor, this.group);
-        tab.setContent(panel.view.tab);
-        const disposable = new CompositeDisposable(tab.onDragStart((event) => {
-            this._onTabDragStart.fire({ nativeEvent: event, panel });
-        }), tab.onPointerDown((event) => {
+        }), addDisposableListener(this.voidContainer.element, 'pointerdown', (event) => {
             if (event.defaultPrevented) {
                 return;
             }
             const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
-            const isFloatingWithOnePanel = this.group.api.location.type === 'floating' &&
-                this.size === 1;
             if (isFloatingGroupsEnabled &&
-                !isFloatingWithOnePanel &&
-                event.shiftKey) {
+                event.shiftKey &&
+                this.group.api.location.type !== 'floating') {
                 event.preventDefault();
-                const panel = this.accessor.getGroupPanel(tab.panel.id);
-                const { top, left } = tab.element.getBoundingClientRect();
+                const { top, left } = this.element.getBoundingClientRect();
                 const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
-                this.accessor.addFloatingGroup(panel, {
-                    x: left - rootLeft,
-                    y: top - rootTop,
+                this.accessor.addFloatingGroup(this.group, {
+                    x: left - rootLeft + 20,
+                    y: top - rootTop + 20,
                     inDragMode: true,
                 });
-                return;
-            }
-            switch (event.button) {
-                case 0: // left click or touch
-                    if (this.group.activePanel !== panel) {
-                        this.group.model.openPanel(panel);
-                    }
-                    break;
             }
-        }), tab.onDrop((event) => {
-            this._onDrop.fire({
-                event: event.nativeEvent,
-                index: this.tabs.findIndex((x) => x.value === tab),
-            });
-        }), tab.onWillShowOverlay((event) => {
-            this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
-                kind: 'tab',
-                panel: this.group.activePanel,
-                api: this.accessor.api,
-                group: this.group,
-                getData: getPanelData,
-            }));
         }));
-        const value = { value: tab, disposable };
-        this.addTab(value, index);
     }
-    closePanel(panel) {
-        this.delete(panel.id);
+    show() {
+        if (!this.hidden) {
+            this.element.style.display = '';
+        }
     }
-    dispose() {
-        super.dispose();
-        for (const { value, disposable } of this.tabs) {
-            disposable.dispose();
-            value.dispose();
+    hide() {
+        this._element.style.display = 'none';
+    }
+    setRightActionsElement(element) {
+        if (this.rightActions === element) {
+            return;
+        }
+        if (this.rightActions) {
+            this.rightActions.remove();
+            this.rightActions = undefined;
+        }
+        if (element) {
+            this.rightActionsContainer.appendChild(element);
+            this.rightActions = element;
         }
-        this.tabs = [];
     }
-    addTab(tab, index = this.tabs.length) {
-        if (index < 0 || index > this.tabs.length) {
-            throw new Error('invalid location');
+    setLeftActionsElement(element) {
+        if (this.leftActions === element) {
+            return;
         }
-        this.tabContainer.insertBefore(tab.value.element, this.tabContainer.children[index]);
-        this.tabs = [
-            ...this.tabs.slice(0, index),
-            tab,
-            ...this.tabs.slice(index),
-        ];
-        if (this.selectedIndex < 0) {
-            this.selectedIndex = index;
+        if (this.leftActions) {
+            this.leftActions.remove();
+            this.leftActions = undefined;
+        }
+        if (element) {
+            this.leftActionsContainer.appendChild(element);
+            this.leftActions = element;
+        }
+    }
+    setPrefixActionsElement(element) {
+        if (this.preActions === element) {
+            return;
+        }
+        if (this.preActions) {
+            this.preActions.remove();
+            this.preActions = undefined;
+        }
+        if (element) {
+            this.preActionsContainer.appendChild(element);
+            this.preActions = element;
         }
+    }
+    isActive(tab) {
+        return this.tabs.isActive(tab);
+    }
+    indexOf(id) {
+        return this.tabs.indexOf(id);
+    }
+    setActive(_isGroupActive) {
+        // noop
+    }
+    delete(id) {
+        this.tabs.delete(id);
+        this.updateClassnames();
+    }
+    setActivePanel(panel) {
+        this.tabs.setActivePanel(panel);
+    }
+    openPanel(panel, index = this.tabs.size) {
+        this.tabs.openPanel(panel, index);
         this.updateClassnames();
     }
+    closePanel(panel) {
+        this.delete(panel.id);
+    }
     updateClassnames() {
         toggleClass(this._element, 'dv-single-tab', this.size === 1);
     }
+    toggleDropdown(options) {
+        const tabs = options.reset ? [] : options.tabs;
+        this._overflowTabs = tabs;
+        if (this._overflowTabs.length > 0 && this.dropdownPart) {
+            this.dropdownPart.update({ tabs: tabs.length });
+            return;
+        }
+        if (this._overflowTabs.length === 0) {
+            this._dropdownDisposable.dispose();
+            return;
+        }
+        const root = document.createElement('div');
+        root.className = 'dv-tabs-overflow-dropdown-root';
+        const part = createDropdownElementHandle();
+        part.update({ tabs: tabs.length });
+        this.dropdownPart = part;
+        root.appendChild(part.element);
+        this.rightActionsContainer.prepend(root);
+        this._dropdownDisposable.value = new CompositeDisposable(Disposable.from(() => {
+            var _a, _b;
+            root.remove();
+            (_b = (_a = this.dropdownPart) === null || _a === void 0 ? void 0 : _a.dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
+            this.dropdownPart = null;
+        }), addDisposableListener(root, 'pointerdown', (event) => {
+            event.preventDefault();
+        }, { capture: true }), addDisposableListener(root, 'click', (event) => {
+            const el = document.createElement('div');
+            el.style.overflow = 'auto';
+            el.className = 'dv-tabs-overflow-container';
+            for (const tab of this.tabs.tabs.filter((tab) => this._overflowTabs.includes(tab.panel.id))) {
+                const panelObject = this.group.panels.find((panel) => panel === tab.panel);
+                const tabComponent = panelObject.view.createTabRenderer('headerOverflow');
+                const child = tabComponent.element;
+                const wrapper = document.createElement('div');
+                toggleClass(wrapper, 'dv-tab', true);
+                toggleClass(wrapper, 'dv-active-tab', panelObject.api.isActive);
+                toggleClass(wrapper, 'dv-inactive-tab', !panelObject.api.isActive);
+                wrapper.addEventListener('mousedown', () => {
+                    this.accessor.popupService.close();
+                    tab.element.scrollIntoView();
+                    tab.panel.api.setActive();
+                });
+                wrapper.appendChild(child);
+                el.appendChild(wrapper);
+            }
+            this.accessor.popupService.openPopover(el, {
+                x: event.clientX,
+                y: event.clientY,
+            });
+        }));
+    }
 }
 
 class DockviewUnhandledDragOverEvent extends AcceptableEvent {
@@ -5208,9 +5620,11 @@ const PROPERTY_KEYS_DOCKVIEW = (() => {
         rootOverlayModel: undefined,
         locked: undefined,
         disableDnd: undefined,
-        gap: undefined,
         className: undefined,
         noPanelsOverlay: undefined,
+        dndEdges: undefined,
+        theme: undefined,
+        disableTabsOverflowList: undefined,
     };
     return Object.keys(properties);
 })();
@@ -5389,6 +5803,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         this._location = { type: 'grid' };
         this.mostRecentlyUsed = [];
         this._overwriteRenderContainer = null;
+        this._overwriteDropTargetContainer = null;
         this._onDidChange = new Emitter();
         this.onDidChange = this._onDidChange.event;
         this._width = 0;
@@ -5466,6 +5881,13 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         var _a;
         return ((_a = this._overwriteRenderContainer) !== null && _a !== void 0 ? _a : this.accessor.overlayRenderContainer);
     }
+    set dropTargetContainer(value) {
+        this._overwriteDropTargetContainer = value;
+    }
+    get dropTargetContainer() {
+        var _a;
+        return ((_a = this._overwriteDropTargetContainer) !== null && _a !== void 0 ? _a : this.accessor.rootDropTargetContainer);
+    }
     initialize() {
         if (this.options.panels) {
             this.options.panels.forEach((panel) => {
@@ -5814,6 +6236,25 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         }
         const data = getPanelData();
         if (data && data.viewId === this.accessor.id) {
+            if (type === 'content') {
+                if (data.groupId === this.id) {
+                    // don't allow to drop on self for center position
+                    if (position === 'center') {
+                        return;
+                    }
+                    if (data.panelId === null) {
+                        // don't allow group move to drop anywhere on self
+                        return;
+                    }
+                }
+            }
+            if (type === 'header') {
+                if (data.groupId === this.id) {
+                    if (data.panelId === null) {
+                        return;
+                    }
+                }
+            }
             if (data.panelId === null) {
                 // this is a group move dnd event
                 const { groupId } = data;
@@ -6242,6 +6683,46 @@ class DockviewGroupPanel extends GridviewPanel {
     }
 }
 
+const themeDark = {
+    name: 'dark',
+    className: 'dockview-theme-dark',
+};
+const themeLight = {
+    name: 'light',
+    className: 'dockview-theme-light',
+};
+const themeVisualStudio = {
+    name: 'visualStudio',
+    className: 'dockview-theme-vs',
+};
+const themeAbyss = {
+    name: 'abyss',
+    className: 'dockview-theme-abyss',
+};
+const themeDracula = {
+    name: 'dracula',
+    className: 'dockview-theme-dracula',
+};
+const themeReplit = {
+    name: 'replit',
+    className: 'dockview-theme-replit',
+    gap: 10,
+};
+const themeAbyssSpaced = {
+    name: 'abyssSpaced',
+    className: 'dockview-theme-abyss-spaced',
+    gap: 10,
+    dndOverlayMounting: 'absolute',
+    dndPanelOverlay: 'group',
+};
+const themeLightSpaced = {
+    name: 'lightSpaced',
+    className: 'dockview-theme-light-spaced',
+    gap: 10,
+    dndOverlayMounting: 'absolute',
+    dndPanelOverlay: 'group',
+};
+
 class DockviewPanelApiImpl extends GridviewPanelApiImpl {
     get location() {
         return this.group.api.location;
@@ -6516,38 +6997,6 @@ class DockviewPanel extends CompositeDisposable {
     }
 }
 
-const createSvgElementFromPath = (params) => {
-    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    svg.setAttributeNS(null, 'height', params.height);
-    svg.setAttributeNS(null, 'width', params.width);
-    svg.setAttributeNS(null, 'viewBox', params.viewbox);
-    svg.setAttributeNS(null, 'aria-hidden', 'false');
-    svg.setAttributeNS(null, 'focusable', 'false');
-    svg.classList.add('dv-svg');
-    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-    path.setAttributeNS(null, 'd', params.path);
-    svg.appendChild(path);
-    return svg;
-};
-const createCloseButton = () => createSvgElementFromPath({
-    width: '11',
-    height: '11',
-    viewbox: '0 0 28 28',
-    path: 'M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z',
-});
-const createExpandMoreButton = () => createSvgElementFromPath({
-    width: '11',
-    height: '11',
-    viewbox: '0 0 24 15',
-    path: 'M12 14.15L0 2.15L2.15 0L12 9.9L21.85 0.0499992L24 2.2L12 14.15Z',
-});
-const createChevronRightButton = () => createSvgElementFromPath({
-    width: '11',
-    height: '11',
-    viewbox: '0 0 15 25',
-    path: 'M2.15 24.1L0 21.95L9.9 12.05L0 2.15L2.15 0L14.2 12.05L2.15 24.1Z',
-});
-
 class DefaultTab extends CompositeDisposable {
     get element() {
         return this._element;
@@ -6604,12 +7053,21 @@ class DockviewPanelModel {
         this._content = this.createContentComponent(this.id, contentComponent);
         this._tab = this.createTabComponent(this.id, tabComponent);
     }
+    createTabRenderer(tabLocation) {
+        var _a;
+        const cmp = this.createTabComponent(this.id, this.tabComponent);
+        if (this._params) {
+            cmp.init(Object.assign(Object.assign({}, this._params), { tabLocation }));
+        }
+        if (this._updateEvent) {
+            (_a = cmp.update) === null || _a === void 0 ? void 0 : _a.call(cmp, this._updateEvent);
+        }
+        return cmp;
+    }
     init(params) {
+        this._params = params;
         this.content.init(params);
-        this.tab.init(params);
-    }
-    updateParentGroup(_group, _isPanelVisible) {
-        // noop
+        this.tab.init(Object.assign(Object.assign({}, params), { tabLocation: 'header' }));
     }
     layout(width, height) {
         var _a, _b;
@@ -6617,6 +7075,7 @@ class DockviewPanelModel {
     }
     update(event) {
         var _a, _b, _c, _d;
+        this._updateEvent = event;
         (_b = (_a = this.content).update) === null || _b === void 0 ? void 0 : _b.call(_a, event);
         (_d = (_c = this.tab).update) === null || _d === void 0 ? void 0 : _d.call(_c, event);
     }
@@ -7477,6 +7936,132 @@ class StrictEventsSequencing extends CompositeDisposable {
     }
 }
 
+class PopupService extends CompositeDisposable {
+    constructor(root) {
+        super();
+        this.root = root;
+        this._active = null;
+        this._activeDisposable = new MutableDisposable();
+        this._element = document.createElement('div');
+        this._element.className = 'dv-popover-anchor';
+        this._element.style.position = 'relative';
+        this.root.prepend(this._element);
+        this.addDisposables(Disposable.from(() => {
+            this.close();
+        }), this._activeDisposable);
+    }
+    openPopover(element, position) {
+        this.close();
+        const wrapper = document.createElement('div');
+        wrapper.style.position = 'absolute';
+        wrapper.style.zIndex = '99';
+        wrapper.appendChild(element);
+        const anchorBox = this._element.getBoundingClientRect();
+        const offsetX = anchorBox.left;
+        const offsetY = anchorBox.top;
+        wrapper.style.top = `${position.y - offsetY}px`;
+        wrapper.style.left = `${position.x - offsetX}px`;
+        this._element.appendChild(wrapper);
+        this._active = wrapper;
+        this._activeDisposable.value = new CompositeDisposable(addDisposableWindowListener(window, 'pointerdown', (event) => {
+            var _a;
+            const target = event.target;
+            if (!(target instanceof HTMLElement)) {
+                return;
+            }
+            let el = target;
+            while (el && el !== wrapper) {
+                el = (_a = el === null || el === void 0 ? void 0 : el.parentElement) !== null && _a !== void 0 ? _a : null;
+            }
+            if (el) {
+                return; // clicked within popover
+            }
+            this.close();
+        }));
+    }
+    close() {
+        if (this._active) {
+            this._active.remove();
+            this._activeDisposable.dispose();
+            this._active = null;
+        }
+    }
+}
+
+class DropTargetAnchorContainer extends CompositeDisposable {
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        var _a;
+        if (this.disabled === value) {
+            return;
+        }
+        this._disabled = value;
+        if (value) {
+            (_a = this.model) === null || _a === void 0 ? void 0 : _a.clear();
+        }
+    }
+    get model() {
+        if (this.disabled) {
+            return undefined;
+        }
+        return {
+            clear: () => {
+                var _a;
+                if (this._model) {
+                    (_a = this._model.root.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this._model.root);
+                }
+                this._model = undefined;
+            },
+            exists: () => {
+                return !!this._model;
+            },
+            getElements: (event, outline) => {
+                const changed = this._outline !== outline;
+                this._outline = outline;
+                if (this._model) {
+                    this._model.changed = changed;
+                    return this._model;
+                }
+                const container = this.createContainer();
+                const anchor = this.createAnchor();
+                this._model = { root: container, overlay: anchor, changed };
+                container.appendChild(anchor);
+                this.element.appendChild(container);
+                if ((event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement) {
+                    const targetBox = event.target.getBoundingClientRect();
+                    const box = this.element.getBoundingClientRect();
+                    anchor.style.left = `${targetBox.left - box.left}px`;
+                    anchor.style.top = `${targetBox.top - box.top}px`;
+                }
+                return this._model;
+            },
+        };
+    }
+    constructor(element, options) {
+        super();
+        this.element = element;
+        this._disabled = false;
+        this._disabled = options.disabled;
+        this.addDisposables(Disposable.from(() => {
+            var _a;
+            (_a = this.model) === null || _a === void 0 ? void 0 : _a.clear();
+        }));
+    }
+    createContainer() {
+        const el = document.createElement('div');
+        el.className = 'dv-drop-target-container';
+        return el;
+    }
+    createAnchor() {
+        const el = document.createElement('div');
+        el.className = 'dv-drop-target-anchor';
+        el.style.visibility = 'hidden';
+        return el;
+    }
+}
+
 const DEFAULT_ROOT_OVERLAY_MODEL = {
     activationSize: { type: 'pixels', value: 10 },
     size: { type: 'pixels', value: 20 },
@@ -7522,14 +8107,11 @@ class DockviewComponent extends BaseGrid {
     get api() {
         return this._api;
     }
-    get gap() {
-        return this.gridview.margin;
-    }
     get floatingGroups() {
         return this._floatingGroups;
     }
     constructor(container, options) {
-        var _a;
+        var _a, _b, _c;
         super(container, {
             proportionalLayout: true,
             orientation: Orientation.HORIZONTAL,
@@ -7538,12 +8120,12 @@ class DockviewComponent extends BaseGrid {
                 : undefined,
             disableAutoResizing: options.disableAutoResizing,
             locked: options.locked,
-            margin: options.gap,
+            margin: (_b = (_a = options.theme) === null || _a === void 0 ? void 0 : _a.gap) !== null && _b !== void 0 ? _b : 0,
             className: options.className,
         });
         this.nextGroupId = sequentialNumberGenerator();
         this._deserializer = new DefaultDockviewDeserialzier(this);
-        this.watermark = null;
+        this._watermark = null;
         this._onWillDragPanel = new Emitter();
         this.onWillDragPanel = this._onWillDragPanel.event;
         this._onWillDragGroup = new Emitter();
@@ -7574,16 +8156,22 @@ class DockviewComponent extends BaseGrid {
         this.onDidRemoveGroup = this._onDidRemoveGroup.event;
         this._onDidAddGroup = new Emitter();
         this.onDidAddGroup = this._onDidAddGroup.event;
+        this._onDidOptionsChange = new Emitter();
+        this.onDidOptionsChange = this._onDidOptionsChange.event;
         this._onDidActiveGroupChange = new Emitter();
         this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
         this._moving = false;
+        this.popupService = new PopupService(this.element);
+        this.updateDropTargetModel(options);
+        this._themeClassnames = new Classnames(this.element);
+        this.rootDropTargetContainer = new DropTargetAnchorContainer(this.element, { disabled: true });
         this.overlayRenderContainer = new OverlayRenderContainer(this.gridview.element, this);
         toggleClass(this.gridview.element, 'dv-dockview', true);
         toggleClass(this.element, 'dv-debug', !!options.debug);
         if (options.debug) {
             this.addDisposables(new StrictEventsSequencing(this));
         }
-        this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this._onDidMaximizedGroupChange, this.onDidViewVisibilityChangeMicroTaskQueue(() => {
+        this.addDisposables(this.rootDropTargetContainer, this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this._onDidMaximizedGroupChange, this._onDidOptionsChange, this.onDidViewVisibilityChangeMicroTaskQueue(() => {
             this.updateWatermark();
         }), this.onDidAdd((event) => {
             if (!this._moving) {
@@ -7617,7 +8205,9 @@ class DockviewComponent extends BaseGrid {
             }
         }));
         this._options = options;
+        this.updateTheme();
         this._rootDropTarget = new Droptarget(this.element, {
+            className: 'dv-drop-target-edge',
             canDisplayOverlay: (event, position) => {
                 const data = getPanelData();
                 if (data) {
@@ -7644,7 +8234,8 @@ class DockviewComponent extends BaseGrid {
                 return firedEvent.isAccepted;
             },
             acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
-            overlayModel: (_a = this.options.rootOverlayModel) !== null && _a !== void 0 ? _a : DEFAULT_ROOT_OVERLAY_MODEL,
+            overlayModel: (_c = this.options.rootOverlayModel) !== null && _c !== void 0 ? _c : DEFAULT_ROOT_OVERLAY_MODEL,
+            getOverrideTarget: () => { var _a; return (_a = this.rootDropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
         });
         this.addDisposables(this._rootDropTarget, this._rootDropTarget.onWillShowOverlay((event) => {
             if (this.gridview.length > 0 && event.position === 'center') {
@@ -7822,6 +8413,10 @@ class DockviewComponent extends BaseGrid {
             popoutContainer.style.overflow = 'hidden';
             popoutContainer.appendChild(gready);
             popoutContainer.appendChild(group.element);
+            const anchor = document.createElement('div');
+            const dropTargetContainer = new DropTargetAnchorContainer(anchor, { disabled: this.rootDropTargetContainer.disabled });
+            popoutContainer.appendChild(anchor);
+            group.model.dropTargetContainer = dropTargetContainer;
             group.model.location = {
                 type: 'popout',
                 getWindow: () => _window.window,
@@ -7888,6 +8483,8 @@ class DockviewComponent extends BaseGrid {
                 else if (this.getPanel(group.id)) {
                     group.model.renderContainer =
                         this.overlayRenderContainer;
+                    group.model.dropTargetContainer =
+                        this.rootDropTargetContainer;
                     returnedGroup = group;
                     const alreadyRemoved = !this._popoutGroups.find((p) => p.popoutGroup === group);
                     if (alreadyRemoved) {
@@ -8108,7 +8705,7 @@ class DockviewComponent extends BaseGrid {
         }
     }
     updateOptions(options) {
-        var _a, _b, _c, _d;
+        var _a, _b;
         super.updateOptions(options);
         if ('floatingGroupBounds' in options) {
             for (const group of this._floatingGroups) {
@@ -8132,13 +8729,11 @@ class DockviewComponent extends BaseGrid {
                 group.overlay.setBounds();
             }
         }
-        if ('rootOverlayModel' in options) {
-            this._rootDropTarget.setOverlayModel((_c = options.rootOverlayModel) !== null && _c !== void 0 ? _c : DEFAULT_ROOT_OVERLAY_MODEL);
-        }
-        if ('gap' in options) {
-            this.gridview.margin = (_d = options.gap) !== null && _d !== void 0 ? _d : 0;
-        }
+        this.updateDropTargetModel(options);
         this._options = Object.assign(Object.assign({}, this.options), options);
+        if ('theme' in options) {
+            this.updateTheme();
+        }
         this.layout(this.gridview.width, this.gridview.height, true);
     }
     layout(width, height, forceResize) {
@@ -8556,22 +9151,22 @@ class DockviewComponent extends BaseGrid {
     updateWatermark() {
         var _a, _b;
         if (this.groups.filter((x) => x.api.location.type === 'grid' && x.api.isVisible).length === 0) {
-            if (!this.watermark) {
-                this.watermark = this.createWatermarkComponent();
-                this.watermark.init({
+            if (!this._watermark) {
+                this._watermark = this.createWatermarkComponent();
+                this._watermark.init({
                     containerApi: new DockviewApi(this),
                 });
                 const watermarkContainer = document.createElement('div');
                 watermarkContainer.className = 'dv-watermark-container';
                 addTestId(watermarkContainer, 'watermark-component');
-                watermarkContainer.appendChild(this.watermark.element);
+                watermarkContainer.appendChild(this._watermark.element);
                 this.gridview.element.appendChild(watermarkContainer);
             }
         }
-        else if (this.watermark) {
-            this.watermark.element.parentElement.remove();
-            (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
-            this.watermark = null;
+        else if (this._watermark) {
+            this._watermark.element.parentElement.remove();
+            (_b = (_a = this._watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
+            this._watermark = null;
         }
     }
     addGroup(options) {
@@ -9057,6 +9652,38 @@ class DockviewComponent extends BaseGrid {
             ? rootOrientation
             : orthogonal(rootOrientation);
     }
+    updateDropTargetModel(options) {
+        if ('dndEdges' in options) {
+            this._rootDropTarget.disabled =
+                typeof options.dndEdges === 'boolean' &&
+                    options.dndEdges === false;
+            if (typeof options.dndEdges === 'object' &&
+                options.dndEdges !== null) {
+                this._rootDropTarget.setOverlayModel(options.dndEdges);
+            }
+            else {
+                this._rootDropTarget.setOverlayModel(DEFAULT_ROOT_OVERLAY_MODEL);
+            }
+        }
+        if ('rootOverlayModel' in options) {
+            this.updateDropTargetModel({ dndEdges: options.dndEdges });
+        }
+    }
+    updateTheme() {
+        var _a, _b;
+        const theme = (_a = this._options.theme) !== null && _a !== void 0 ? _a : themeAbyss;
+        this._themeClassnames.setClassNames(theme.className);
+        this.gridview.margin = (_b = theme.gap) !== null && _b !== void 0 ? _b : 0;
+        switch (theme.dndOverlayMounting) {
+            case 'absolute':
+                this.rootDropTargetContainer.disabled = false;
+                break;
+            case 'relative':
+            default:
+                this.rootDropTargetContainer.disabled = true;
+                break;
+        }
+    }
 }
 
 class GridviewComponent extends BaseGrid {
@@ -9580,6 +10207,7 @@ class SplitviewComponent extends Resizable {
         for (const view of views) {
             view.dispose();
         }
+        this.element.remove();
         super.dispose();
     }
 }
@@ -9920,6 +10548,7 @@ class PaneviewComponent extends Resizable {
             value.dispose();
         }
         this._viewDisposables.clear();
+        this.element.remove();
         this.paneview.dispose();
     }
 }
@@ -10046,5 +10675,5 @@ function createPaneview(element, options) {
     return new PaneviewApi(component);
 }
 
-export { BaseGrid, ContentContainer, DefaultDockviewDeserialzier, DefaultTab, DockviewApi, DockviewComponent, CompositeDisposable as DockviewCompositeDisposable, DockviewDidDropEvent, Disposable as DockviewDisposable, Emitter as DockviewEmitter, Event as DockviewEvent, DockviewGroupPanel, DockviewGroupPanelModel, MutableDisposable as DockviewMutableDisposable, DockviewPanel, DockviewUnhandledDragOverEvent, DockviewWillDropEvent, DraggablePaneviewPanel, Gridview, GridviewApi, GridviewComponent, GridviewPanel, LayoutPriority, Orientation, PROPERTY_KEYS_DOCKVIEW, PROPERTY_KEYS_GRIDVIEW, PROPERTY_KEYS_PANEVIEW, PROPERTY_KEYS_SPLITVIEW, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, PaneviewUnhandledDragOverEvent, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, Tab, WillShowOverlayLocationEvent, createDockview, createGridview, createPaneview, createSplitview, directionToPosition, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRelativeLocation, indexInParent, isGridBranchNode, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, orthogonal, positionToDirection, toTarget };
+export { BaseGrid, ContentContainer, DefaultDockviewDeserialzier, DefaultTab, DockviewApi, DockviewComponent, CompositeDisposable as DockviewCompositeDisposable, DockviewDidDropEvent, Disposable as DockviewDisposable, Emitter as DockviewEmitter, Event as DockviewEvent, DockviewGroupPanel, DockviewGroupPanelModel, MutableDisposable as DockviewMutableDisposable, DockviewPanel, DockviewUnhandledDragOverEvent, DockviewWillDropEvent, DraggablePaneviewPanel, Gridview, GridviewApi, GridviewComponent, GridviewPanel, LayoutPriority, Orientation, PROPERTY_KEYS_DOCKVIEW, PROPERTY_KEYS_GRIDVIEW, PROPERTY_KEYS_PANEVIEW, PROPERTY_KEYS_SPLITVIEW, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, PaneviewUnhandledDragOverEvent, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, Tab, WillShowOverlayLocationEvent, createDockview, createGridview, createPaneview, createSplitview, directionToPosition, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRelativeLocation, indexInParent, isGridBranchNode, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, orthogonal, positionToDirection, themeAbyss, themeAbyssSpaced, themeDark, themeDracula, themeLight, themeLightSpaced, themeReplit, themeVisualStudio, toTarget };
 //# sourceMappingURL=dockview-core.esm.js.map