dockview 1.14.2 → 1.15.1

package/dist/dockview.amd.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.14.2
+ * @version 1.15.1
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -33,7 +33,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     }
   }
 
-  var css_248z = ".dv-render-overlay {\n  position: absolute;\n  z-index: 1;\n  height: 100%;\n}\n.dv-render-overlay.dv-render-overlay-float {\n  z-index: 999;\n}\n\n.dv-debug .dv-render-overlay {\n  outline: 1px solid red;\n  outline-offset: -1;\n}\n.dockview-svg {\n  display: inline-block;\n  fill: currentcolor;\n  line-height: 1;\n  stroke: currentcolor;\n  stroke-width: 0;\n}\n.dockview-theme-dark {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #1e1e1e;\n  --dv-tabs-and-actions-container-background-color: #252526;\n  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-tab-divider-color: #1e1e1e;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: #969696;\n  --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n  --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n  --dv-separator-border: rgb(68, 68, 68);\n  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n}\n\n.dockview-theme-light {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: white;\n  --dv-tabs-and-actions-container-background-color: #f3f3f3;\n  --dv-activegroup-visiblepanel-tab-background-color: white;\n  --dv-activegroup-hiddenpanel-tab-background-color: #ececec;\n  --dv-inactivegroup-visiblepanel-tab-background-color: white;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #ececec;\n  --dv-tab-divider-color: white;\n  --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-activegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.7);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(51, 51, 51, 0.7);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.35);\n  --dv-separator-border: rgba(128, 128, 128, 0.35);\n  --dv-paneview-header-border-color: rgb(51, 51, 51);\n}\n\n.dockview-theme-vs {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #1e1e1e;\n  --dv-tabs-and-actions-container-background-color: #252526;\n  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-tab-divider-color: #1e1e1e;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: #969696;\n  --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n  --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n  --dv-separator-border: rgb(68, 68, 68);\n  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n  --dv-tabs-and-actions-container-background-color: #2d2d30;\n  --dv-tabs-and-actions-container-height: 20px;\n  --dv-tabs-and-actions-container-font-size: 11px;\n  --dv-activegroup-visiblepanel-tab-background-color: #007acc;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #3f3f46;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: white;\n  --dv-inactivegroup-visiblepanel-tab-color: white;\n  --dv-inactivegroup-hiddenpanel-tab-color: white;\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container {\n  box-sizing: content-box;\n  border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.active-tab {\n  border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.inactive-tab {\n  border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container {\n  box-sizing: content-box;\n  border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.active-tab {\n  border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.inactive-tab {\n  border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n}\n\n.dockview-theme-abyss {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #000c18;\n  --dv-tabs-and-actions-container-background-color: #1c1c2a;\n  --dv-activegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-activegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-tab-divider-color: #2b2b4a;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);\n  --dv-separator-border: #2b2b4a;\n  --dv-paneview-header-border-color: #2b2b4a;\n  --dv-paneview-active-outline-color: #596f99;\n}\n\n.dockview-theme-dracula {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #282a36;\n  --dv-tabs-and-actions-container-background-color: #191a21;\n  --dv-activegroup-visiblepanel-tab-background-color: #282a36;\n  --dv-activegroup-hiddenpanel-tab-background-color: #21222c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #282a36;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #21222c;\n  --dv-tab-divider-color: #191a21;\n  --dv-activegroup-visiblepanel-tab-color: rgb(248, 248, 242);\n  --dv-activegroup-hiddenpanel-tab-color: rgb(98, 114, 164);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(98, 114, 164, 0.5);\n  --dv-separator-border: #bd93f9;\n  --dv-paneview-header-border-color: #bd93f9;\n  --dv-paneview-active-outline-color: #6272a4;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  background-color: #94527e;\n  z-index: 999;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n  position: absolute;\n  left: 0px;\n  bottom: 0px;\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  background-color: #5e3d5a;\n  z-index: 999;\n}\n\n.dockview-theme-replit {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-gap-size: 3px;\n  --dv-group-view-background-color: #ebeced;\n  --dv-tabs-and-actions-container-background-color: #fcfcfc;\n  --dv-activegroup-visiblepanel-tab-background-color: #f0f1f2;\n  --dv-activegroup-hiddenpanel-tab-background-color: ##fcfcfc;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #f0f1f2;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #fcfcfc;\n  --dv-tab-divider-color: transparent;\n  --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-activegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n  --dv-inactivegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n  --dv-separator-border: transparent;\n  --dv-paneview-header-border-color: rgb(51, 51, 51);\n  --dv-background-color: #ebeced;\n  --dv-separator-handle-background-color: #cfd1d3;\n  --dv-separator-handle-hover-background-color: #babbbb;\n}\n.dockview-theme-replit .dv-resize-container:has(> .groupview) {\n  border-radius: 8px;\n}\n.dockview-theme-replit .groupview {\n  overflow: hidden;\n  border-radius: 10px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container {\n  border-bottom: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab {\n  margin: 4px;\n  border-radius: 8px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab .dockview-svg {\n  height: 8px;\n  width: 8px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab:hover {\n  background-color: #e4e5e6 !important;\n}\n.dockview-theme-replit .groupview .content-container {\n  background-color: #fcfcfc;\n}\n.dockview-theme-replit .groupview.active-group {\n  border: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .groupview.inactive-group {\n  border: 1px solid transparent;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash::after {\n  content: \"\";\n  height: 4px;\n  width: 40px;\n  border-radius: 2px;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: var(--dv-separator-handle-background-color);\n  position: absolute;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash:hover::after {\n  background-color: var(--dv-separator-handle-hover-background-color);\n}\n.dockview-theme-replit .horizontal > .sash-container > .sash::after {\n  content: \"\";\n  height: 40px;\n  width: 4px;\n  border-radius: 2px;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: var(--dv-separator-handle-background-color);\n  position: absolute;\n}\n.dockview-theme-replit .horizontal > .sash-container > .sash:hover::after {\n  background-color: var(--dv-separator-handle-hover-background-color);\n}\n.drop-target {\n  position: relative;\n}\n.drop-target > .drop-target-dropzone {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  height: 100%;\n  width: 100%;\n  z-index: 1000;\n  pointer-events: none;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection {\n  position: relative;\n  box-sizing: border-box;\n  height: 100%;\n  width: 100%;\n  background-color: var(--dv-drag-over-background-color);\n  transition: top 70ms ease-out, left 70ms ease-out, width 70ms ease-out, height 70ms ease-out, opacity 0.15s ease-out;\n  will-change: transform;\n  pointer-events: none;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-top.dv-drop-target-small-vertical {\n  border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical {\n  border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal {\n  border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {\n  border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-debug .dv-resize-container .dv-resize-handle-top {\n  background-color: red;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-bottom {\n  background-color: green;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-left {\n  background-color: yellow;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-right {\n  background-color: blue;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-topleft,\n.dv-debug .dv-resize-container .dv-resize-handle-topright,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomleft,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomright {\n  background-color: cyan;\n}\n\n.dv-resize-container {\n  position: absolute;\n  z-index: 997;\n  border: 1px solid var(--dv-tab-divider-color);\n  box-shadow: var(--dv-floating-box-shadow);\n}\n.dv-resize-container.dv-bring-to-front {\n  z-index: 998;\n}\n.dv-resize-container.dv-resize-container-dragging {\n  opacity: 0.5;\n}\n.dv-resize-container .dv-resize-handle-top {\n  height: 4px;\n  width: calc(100% - 8px);\n  left: 4px;\n  top: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-bottom {\n  height: 4px;\n  width: calc(100% - 8px);\n  left: 4px;\n  bottom: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-left {\n  height: calc(100% - 8px);\n  width: 4px;\n  left: -2px;\n  top: 4px;\n  z-index: 999;\n  position: absolute;\n  cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-right {\n  height: calc(100% - 8px);\n  width: 4px;\n  right: -2px;\n  top: 4px;\n  z-index: 999;\n  position: absolute;\n  cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-topleft {\n  height: 4px;\n  width: 4px;\n  top: -2px;\n  left: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: nw-resize;\n}\n.dv-resize-container .dv-resize-handle-topright {\n  height: 4px;\n  width: 4px;\n  right: -2px;\n  top: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: ne-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomleft {\n  height: 4px;\n  width: 4px;\n  left: -2px;\n  bottom: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: sw-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomright {\n  height: 4px;\n  width: 4px;\n  right: -2px;\n  bottom: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: se-resize;\n}\n.dv-dockview {\n  position: relative;\n  background-color: var(--dv-group-view-background-color);\n}\n.dv-dockview .dv-watermark-container {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  height: 100%;\n  width: 100%;\n  z-index: 1;\n}\n.dv-dockview .dv-overlay-render-container {\n  position: relative;\n}\n.dv-dockview .split-view-container.horizontal > .view-container > .view:not(:last-child) .groupview {\n  border-right: var(--dv-group-gap-size) solid transparent;\n}\n.dv-dockview .split-view-container.horizontal > .view-container > .view:not(:first-child) .groupview {\n  border-left: var(--dv-group-gap-size) solid transparent;\n}\n.dv-dockview .split-view-container.vertical > .view-container > .view:not(:last-child) .groupview {\n  border-bottom: var(--dv-group-gap-size) solid transparent;\n}\n.dv-dockview .split-view-container.vertical > .view-container > .view:not(:first-child) .groupview {\n  border-top: var(--dv-group-gap-size) solid transparent;\n}\n\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n  background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);\n  color: var(--dv-inactivegroup-visiblepanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n  background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-inactivegroup-hiddenpanel-tab-color);\n}\n\n/**\n * when a tab is dragged we lose the above stylings because they are conditional on parent elements\n * therefore we also set some stylings for the dragging event\n **/\n.tab.dv-tab-dragging {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.groupview {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background-color: var(--dv-group-view-background-color);\n  overflow: hidden;\n}\n.groupview:focus {\n  outline: none;\n}\n.groupview.empty > .tabs-and-actions-container {\n  display: none;\n}\n.groupview > .content-container {\n  flex-grow: 1;\n  min-height: 0;\n  outline: none;\n}\n.dv-root-wrapper {\n  height: 100%;\n  width: 100%;\n}\n.grid-view,\n.branch-node {\n  height: 100%;\n  width: 100%;\n}\n.pane-container {\n  height: 100%;\n  width: 100%;\n}\n.pane-container.animated .view {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.pane-container .view {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  padding: 0px !important;\n}\n.pane-container .view:not(:first-child)::before {\n  background-color: transparent !important;\n}\n.pane-container .view:not(:first-child) .pane > .pane-header {\n  border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.pane-container .view .default-header {\n  background-color: var(--dv-group-view-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n  display: flex;\n  padding: 0px 8px;\n  cursor: pointer;\n}\n.pane-container .view .default-header .dockview-pane-header-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.pane-container .view .default-header > span {\n  padding-left: 8px;\n  flex-grow: 1;\n}\n.pane-container:first-of-type > .pane > .pane-header {\n  border-top: none !important;\n}\n.pane-container .pane {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  height: 100%;\n}\n.pane-container .pane .pane-header {\n  box-sizing: border-box;\n  user-select: none;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-header.pane-draggable {\n  cursor: pointer;\n}\n.pane-container .pane .pane-header:focus:before, .pane-container .pane .pane-header:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.pane-container .pane .pane-body {\n  overflow-y: auto;\n  overflow-x: hidden;\n  flex-grow: 1;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-body:focus:before, .pane-container .pane .pane-body:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.dv-debug .split-view-container .sash-container .sash.enabled {\n  background-color: black;\n}\n.dv-debug .split-view-container .sash-container .sash.disabled {\n  background-color: orange;\n}\n.dv-debug .split-view-container .sash-container .sash.maximum {\n  background-color: green;\n}\n.dv-debug .split-view-container .sash-container .sash.minimum {\n  background-color: red;\n}\n\n.split-view-container {\n  position: relative;\n  overflow: hidden;\n  height: 100%;\n  width: 100%;\n}\n.split-view-container.dv-splitview-disabled > .sash-container > .sash {\n  pointer-events: none;\n}\n.split-view-container.animation .view,\n.split-view-container.animation .sash {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.split-view-container.horizontal {\n  height: 100%;\n}\n.split-view-container.horizontal > .sash-container > .sash {\n  height: 100%;\n  width: 4px;\n}\n.split-view-container.horizontal > .sash-container > .sash.enabled {\n  cursor: ew-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.disabled {\n  cursor: default;\n}\n.split-view-container.horizontal > .sash-container > .sash.maximum {\n  cursor: w-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.minimum {\n  cursor: e-resize;\n}\n.split-view-container.horizontal > .view-container > .view:not(:first-child)::before {\n  height: 100%;\n  width: 1px;\n}\n.split-view-container.vertical {\n  width: 100%;\n}\n.split-view-container.vertical > .sash-container > .sash {\n  width: 100%;\n  height: 4px;\n}\n.split-view-container.vertical > .sash-container > .sash.enabled {\n  cursor: ns-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.disabled {\n  cursor: default;\n}\n.split-view-container.vertical > .sash-container > .sash.maximum {\n  cursor: n-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.minimum {\n  cursor: s-resize;\n}\n.split-view-container.vertical > .view-container > .view {\n  width: 100%;\n}\n.split-view-container.vertical > .view-container > .view:not(:first-child)::before {\n  height: 1px;\n  width: 100%;\n}\n.split-view-container .sash-container {\n  height: 100%;\n  width: 100%;\n  position: absolute;\n}\n.split-view-container .sash-container .sash {\n  position: absolute;\n  z-index: 99;\n  outline: none;\n  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  touch-action: none;\n}\n.split-view-container .sash-container .sash:not(.disabled):active {\n  transition: background-color 0.1s ease-in-out;\n  background-color: var(--dv-active-sash-color, transparent);\n}\n.split-view-container .sash-container .sash:not(.disabled):hover {\n  background-color: var(--dv-active-sash-color, transparent);\n  transition: background-color 0.1s ease-in-out;\n  transition-delay: 0.5s;\n}\n.split-view-container .view-container {\n  position: relative;\n  height: 100%;\n  width: 100%;\n  background-color: var(--dv-background-color);\n}\n.split-view-container .view-container .view {\n  height: 100%;\n  box-sizing: border-box;\n  overflow: auto;\n  position: absolute;\n}\n.split-view-container.separator-border .view:not(:first-child)::before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  pointer-events: none;\n  background-color: var(--dv-separator-border);\n}\n.dv-dragged {\n  transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */\n}\n\n.tab {\n  flex-shrink: 0;\n}\n.tab:focus-within, .tab:focus {\n  position: relative;\n}\n.tab:focus-within::after, .tab:focus::after {\n  position: absolute;\n  content: \"\";\n  height: 100%;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  pointer-events: none;\n  outline: 1px solid var(--dv-tab-divider-color) !important;\n  outline-offset: -1px;\n  z-index: 5;\n}\n.tab.dv-tab-dragging .dv-default-tab-action {\n  background-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.tab.active-tab .dv-default-tab .dv-default-tab-action {\n  visibility: visible;\n}\n.tab.inactive-tab .dv-default-tab .dv-default-tab-action {\n  visibility: hidden;\n}\n.tab.inactive-tab .dv-default-tab:hover .dv-default-tab-action {\n  visibility: visible;\n}\n.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: elipsis;\n}\n.tab .dv-default-tab .dv-default-tab-content {\n  padding: 0px 8px;\n  flex-grow: 1;\n}\n.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.tab .dv-default-tab .dv-default-tab-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}\n.tabs-and-actions-container {\n  display: flex;\n  background-color: var(--dv-tabs-and-actions-container-background-color);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  height: var(--dv-tabs-and-actions-container-height);\n  font-size: var(--dv-tabs-and-actions-container-font-size);\n}\n.tabs-and-actions-container.hidden {\n  display: none;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .tabs-container {\n  flex-grow: 1;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .tabs-container .tab {\n  flex-grow: 1;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .void-container {\n  flex-grow: 0;\n}\n.tabs-and-actions-container .void-container {\n  display: flex;\n  flex-grow: 1;\n  cursor: grab;\n}\n.tabs-and-actions-container .tabs-container {\n  display: flex;\n  overflow-x: overlay;\n  overflow-y: hidden;\n  scrollbar-width: thin;\n  /* Track */\n  /* Handle */\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar {\n  height: 3px;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-track {\n  background: transparent;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-thumb {\n  background: var(--dv-tabs-container-scrollbar-color);\n}\n.tabs-and-actions-container .tabs-container .tab {\n  -webkit-user-drag: element;\n  outline: none;\n  min-width: 75px;\n  cursor: pointer;\n  position: relative;\n  box-sizing: border-box;\n}\n.tabs-and-actions-container .tabs-container .tab:not(:first-child)::before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  pointer-events: none;\n  background-color: var(--dv-tab-divider-color);\n  width: 1px;\n  height: 100%;\n}\n.watermark {\n  display: flex;\n  width: 100%;\n}\n.watermark.has-actions .watermark-title .actions-container {\n  display: none;\n}\n.watermark .watermark-title {\n  height: 35px;\n  width: 100%;\n  display: flex;\n}\n.watermark .watermark-content {\n  flex-grow: 1;\n}\n.watermark .actions-container {\n  display: flex;\n  align-items: center;\n  padding: 0px 8px;\n}\n.watermark .actions-container .close-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  cursor: pointer;\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.watermark .actions-container .close-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}";
+  var css_248z = ".dv-render-overlay {\n  position: absolute;\n  z-index: 1;\n  height: 100%;\n}\n.dv-render-overlay.dv-render-overlay-float {\n  z-index: 999;\n}\n\n.dv-debug .dv-render-overlay {\n  outline: 1px solid red;\n  outline-offset: -1;\n}\n.dockview-svg {\n  display: inline-block;\n  fill: currentcolor;\n  line-height: 1;\n  stroke: currentcolor;\n  stroke-width: 0;\n}\n.dockview-theme-dark {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #1e1e1e;\n  --dv-tabs-and-actions-container-background-color: #252526;\n  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-tab-divider-color: #1e1e1e;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: #969696;\n  --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n  --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n  --dv-separator-border: rgb(68, 68, 68);\n  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n}\n\n.dockview-theme-light {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: white;\n  --dv-tabs-and-actions-container-background-color: #f3f3f3;\n  --dv-activegroup-visiblepanel-tab-background-color: white;\n  --dv-activegroup-hiddenpanel-tab-background-color: #ececec;\n  --dv-inactivegroup-visiblepanel-tab-background-color: white;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #ececec;\n  --dv-tab-divider-color: white;\n  --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-activegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.7);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(51, 51, 51, 0.7);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.35);\n  --dv-separator-border: rgba(128, 128, 128, 0.35);\n  --dv-paneview-header-border-color: rgb(51, 51, 51);\n}\n\n.dockview-theme-vs {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #1e1e1e;\n  --dv-tabs-and-actions-container-background-color: #252526;\n  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-tab-divider-color: #1e1e1e;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: #969696;\n  --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n  --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n  --dv-separator-border: rgb(68, 68, 68);\n  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n  --dv-tabs-and-actions-container-background-color: #2d2d30;\n  --dv-tabs-and-actions-container-height: 20px;\n  --dv-tabs-and-actions-container-font-size: 11px;\n  --dv-activegroup-visiblepanel-tab-background-color: #007acc;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #3f3f46;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: white;\n  --dv-inactivegroup-visiblepanel-tab-color: white;\n  --dv-inactivegroup-hiddenpanel-tab-color: white;\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container {\n  box-sizing: content-box;\n  border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.active-tab {\n  border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.inactive-tab {\n  border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container {\n  box-sizing: content-box;\n  border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.active-tab {\n  border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.inactive-tab {\n  border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n}\n\n.dockview-theme-abyss {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #000c18;\n  --dv-tabs-and-actions-container-background-color: #1c1c2a;\n  --dv-activegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-activegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-tab-divider-color: #2b2b4a;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);\n  --dv-separator-border: #2b2b4a;\n  --dv-paneview-header-border-color: #2b2b4a;\n  --dv-paneview-active-outline-color: #596f99;\n}\n\n.dockview-theme-dracula {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #282a36;\n  --dv-tabs-and-actions-container-background-color: #191a21;\n  --dv-activegroup-visiblepanel-tab-background-color: #282a36;\n  --dv-activegroup-hiddenpanel-tab-background-color: #21222c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #282a36;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #21222c;\n  --dv-tab-divider-color: #191a21;\n  --dv-activegroup-visiblepanel-tab-color: rgb(248, 248, 242);\n  --dv-activegroup-hiddenpanel-tab-color: rgb(98, 114, 164);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(98, 114, 164, 0.5);\n  --dv-separator-border: #bd93f9;\n  --dv-paneview-header-border-color: #bd93f9;\n  --dv-paneview-active-outline-color: #6272a4;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  background-color: #94527e;\n  z-index: 999;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n  position: absolute;\n  left: 0px;\n  bottom: 0px;\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  background-color: #5e3d5a;\n  z-index: 999;\n}\n\n.dockview-theme-replit {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #ebeced;\n  --dv-tabs-and-actions-container-background-color: #fcfcfc;\n  --dv-activegroup-visiblepanel-tab-background-color: #f0f1f2;\n  --dv-activegroup-hiddenpanel-tab-background-color: ##fcfcfc;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #f0f1f2;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #fcfcfc;\n  --dv-tab-divider-color: transparent;\n  --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-activegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n  --dv-inactivegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n  --dv-separator-border: transparent;\n  --dv-paneview-header-border-color: rgb(51, 51, 51);\n  --dv-background-color: #ebeced;\n  --dv-separator-handle-background-color: #cfd1d3;\n  --dv-separator-handle-hover-background-color: #babbbb;\n}\n.dockview-theme-replit .dv-resize-container:has(> .groupview) {\n  border-radius: 8px;\n}\n.dockview-theme-replit .groupview {\n  overflow: hidden;\n  border-radius: 10px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container {\n  border-bottom: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab {\n  margin: 4px;\n  border-radius: 8px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab .dockview-svg {\n  height: 8px;\n  width: 8px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab:hover {\n  background-color: #e4e5e6 !important;\n}\n.dockview-theme-replit .groupview .content-container {\n  background-color: #fcfcfc;\n}\n.dockview-theme-replit .groupview.active-group {\n  border: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .groupview.inactive-group {\n  border: 1px solid transparent;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash::after {\n  content: \"\";\n  height: 4px;\n  width: 40px;\n  border-radius: 2px;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: var(--dv-separator-handle-background-color);\n  position: absolute;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash:hover::after {\n  background-color: var(--dv-separator-handle-hover-background-color);\n}\n.dockview-theme-replit .horizontal > .sash-container > .sash::after {\n  content: \"\";\n  height: 40px;\n  width: 4px;\n  border-radius: 2px;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: var(--dv-separator-handle-background-color);\n  position: absolute;\n}\n.dockview-theme-replit .horizontal > .sash-container > .sash:hover::after {\n  background-color: var(--dv-separator-handle-hover-background-color);\n}\n.drop-target {\n  position: relative;\n}\n.drop-target > .drop-target-dropzone {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  height: 100%;\n  width: 100%;\n  z-index: 1000;\n  pointer-events: none;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection {\n  position: relative;\n  box-sizing: border-box;\n  height: 100%;\n  width: 100%;\n  background-color: var(--dv-drag-over-background-color);\n  transition: top 70ms ease-out, left 70ms ease-out, width 70ms ease-out, height 70ms ease-out, opacity 0.15s ease-out;\n  will-change: transform;\n  pointer-events: none;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-top.dv-drop-target-small-vertical {\n  border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical {\n  border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal {\n  border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {\n  border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-debug .dv-resize-container .dv-resize-handle-top {\n  background-color: red;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-bottom {\n  background-color: green;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-left {\n  background-color: yellow;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-right {\n  background-color: blue;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-topleft,\n.dv-debug .dv-resize-container .dv-resize-handle-topright,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomleft,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomright {\n  background-color: cyan;\n}\n\n.dv-resize-container {\n  position: absolute;\n  z-index: 997;\n  border: 1px solid var(--dv-tab-divider-color);\n  box-shadow: var(--dv-floating-box-shadow);\n}\n.dv-resize-container.dv-bring-to-front {\n  z-index: 998;\n}\n.dv-resize-container.dv-resize-container-dragging {\n  opacity: 0.5;\n}\n.dv-resize-container .dv-resize-handle-top {\n  height: 4px;\n  width: calc(100% - 8px);\n  left: 4px;\n  top: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-bottom {\n  height: 4px;\n  width: calc(100% - 8px);\n  left: 4px;\n  bottom: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-left {\n  height: calc(100% - 8px);\n  width: 4px;\n  left: -2px;\n  top: 4px;\n  z-index: 999;\n  position: absolute;\n  cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-right {\n  height: calc(100% - 8px);\n  width: 4px;\n  right: -2px;\n  top: 4px;\n  z-index: 999;\n  position: absolute;\n  cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-topleft {\n  height: 4px;\n  width: 4px;\n  top: -2px;\n  left: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: nw-resize;\n}\n.dv-resize-container .dv-resize-handle-topright {\n  height: 4px;\n  width: 4px;\n  right: -2px;\n  top: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: ne-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomleft {\n  height: 4px;\n  width: 4px;\n  left: -2px;\n  bottom: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: sw-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomright {\n  height: 4px;\n  width: 4px;\n  right: -2px;\n  bottom: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: se-resize;\n}\n.dv-dockview {\n  position: relative;\n  background-color: var(--dv-group-view-background-color);\n}\n.dv-dockview .dv-watermark-container {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  height: 100%;\n  width: 100%;\n  z-index: 1;\n}\n.dv-dockview .dv-overlay-render-container {\n  position: relative;\n}\n\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n  background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);\n  color: var(--dv-inactivegroup-visiblepanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n  background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-inactivegroup-hiddenpanel-tab-color);\n}\n\n/**\n * when a tab is dragged we lose the above stylings because they are conditional on parent elements\n * therefore we also set some stylings for the dragging event\n **/\n.tab.dv-tab-dragging {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.groupview {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background-color: var(--dv-group-view-background-color);\n  overflow: hidden;\n}\n.groupview:focus {\n  outline: none;\n}\n.groupview.empty > .tabs-and-actions-container {\n  display: none;\n}\n.groupview > .content-container {\n  flex-grow: 1;\n  min-height: 0;\n  outline: none;\n}\n.dv-root-wrapper {\n  height: 100%;\n  width: 100%;\n}\n.grid-view,\n.branch-node {\n  height: 100%;\n  width: 100%;\n}\n.pane-container {\n  height: 100%;\n  width: 100%;\n}\n.pane-container.animated .view {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.pane-container .view {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  padding: 0px !important;\n}\n.pane-container .view:not(:first-child)::before {\n  background-color: transparent !important;\n}\n.pane-container .view:not(:first-child) .pane > .pane-header {\n  border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.pane-container .view .default-header {\n  background-color: var(--dv-group-view-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n  display: flex;\n  padding: 0px 8px;\n  cursor: pointer;\n}\n.pane-container .view .default-header .dockview-pane-header-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.pane-container .view .default-header > span {\n  padding-left: 8px;\n  flex-grow: 1;\n}\n.pane-container:first-of-type > .pane > .pane-header {\n  border-top: none !important;\n}\n.pane-container .pane {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  height: 100%;\n}\n.pane-container .pane .pane-header {\n  box-sizing: border-box;\n  user-select: none;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-header.pane-draggable {\n  cursor: pointer;\n}\n.pane-container .pane .pane-header:focus:before, .pane-container .pane .pane-header:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.pane-container .pane .pane-body {\n  overflow-y: auto;\n  overflow-x: hidden;\n  flex-grow: 1;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-body:focus:before, .pane-container .pane .pane-body:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.dv-debug .split-view-container .sash-container .sash.enabled {\n  background-color: black;\n}\n.dv-debug .split-view-container .sash-container .sash.disabled {\n  background-color: orange;\n}\n.dv-debug .split-view-container .sash-container .sash.maximum {\n  background-color: green;\n}\n.dv-debug .split-view-container .sash-container .sash.minimum {\n  background-color: red;\n}\n\n.split-view-container {\n  position: relative;\n  overflow: hidden;\n  height: 100%;\n  width: 100%;\n}\n.split-view-container.dv-splitview-disabled > .sash-container > .sash {\n  pointer-events: none;\n}\n.split-view-container.animation .view,\n.split-view-container.animation .sash {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.split-view-container.horizontal {\n  height: 100%;\n}\n.split-view-container.horizontal > .sash-container > .sash {\n  height: 100%;\n  width: 4px;\n}\n.split-view-container.horizontal > .sash-container > .sash.enabled {\n  cursor: ew-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.disabled {\n  cursor: default;\n}\n.split-view-container.horizontal > .sash-container > .sash.maximum {\n  cursor: w-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.minimum {\n  cursor: e-resize;\n}\n.split-view-container.horizontal > .view-container > .view:not(:first-child)::before {\n  height: 100%;\n  width: 1px;\n}\n.split-view-container.vertical {\n  width: 100%;\n}\n.split-view-container.vertical > .sash-container > .sash {\n  width: 100%;\n  height: 4px;\n}\n.split-view-container.vertical > .sash-container > .sash.enabled {\n  cursor: ns-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.disabled {\n  cursor: default;\n}\n.split-view-container.vertical > .sash-container > .sash.maximum {\n  cursor: n-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.minimum {\n  cursor: s-resize;\n}\n.split-view-container.vertical > .view-container > .view {\n  width: 100%;\n}\n.split-view-container.vertical > .view-container > .view:not(:first-child)::before {\n  height: 1px;\n  width: 100%;\n}\n.split-view-container .sash-container {\n  height: 100%;\n  width: 100%;\n  position: absolute;\n}\n.split-view-container .sash-container .sash {\n  position: absolute;\n  z-index: 99;\n  outline: none;\n  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  touch-action: none;\n}\n.split-view-container .sash-container .sash:not(.disabled):active {\n  transition: background-color 0.1s ease-in-out;\n  background-color: var(--dv-active-sash-color, transparent);\n}\n.split-view-container .sash-container .sash:not(.disabled):hover {\n  background-color: var(--dv-active-sash-color, transparent);\n  transition: background-color 0.1s ease-in-out;\n  transition-delay: 0.5s;\n}\n.split-view-container .view-container {\n  position: relative;\n  height: 100%;\n  width: 100%;\n  background-color: var(--dv-background-color);\n}\n.split-view-container .view-container .view {\n  height: 100%;\n  box-sizing: border-box;\n  overflow: auto;\n  position: absolute;\n}\n.split-view-container.separator-border .view:not(:first-child)::before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  pointer-events: none;\n  background-color: var(--dv-separator-border);\n}\n.dv-dragged {\n  transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */\n}\n\n.tab {\n  flex-shrink: 0;\n}\n.tab:focus-within, .tab:focus {\n  position: relative;\n}\n.tab:focus-within::after, .tab:focus::after {\n  position: absolute;\n  content: \"\";\n  height: 100%;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  pointer-events: none;\n  outline: 1px solid var(--dv-tab-divider-color) !important;\n  outline-offset: -1px;\n  z-index: 5;\n}\n.tab.dv-tab-dragging .dv-default-tab-action {\n  background-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.tab.active-tab .dv-default-tab .dv-default-tab-action {\n  visibility: visible;\n}\n.tab.inactive-tab .dv-default-tab .dv-default-tab-action {\n  visibility: hidden;\n}\n.tab.inactive-tab .dv-default-tab:hover .dv-default-tab-action {\n  visibility: visible;\n}\n.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: elipsis;\n}\n.tab .dv-default-tab .dv-default-tab-content {\n  padding: 0px 8px;\n  flex-grow: 1;\n}\n.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.tab .dv-default-tab .dv-default-tab-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}\n.tabs-and-actions-container {\n  display: flex;\n  background-color: var(--dv-tabs-and-actions-container-background-color);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  height: var(--dv-tabs-and-actions-container-height);\n  font-size: var(--dv-tabs-and-actions-container-font-size);\n}\n.tabs-and-actions-container.hidden {\n  display: none;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .tabs-container {\n  flex-grow: 1;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .tabs-container .tab {\n  flex-grow: 1;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .void-container {\n  flex-grow: 0;\n}\n.tabs-and-actions-container .void-container {\n  display: flex;\n  flex-grow: 1;\n  cursor: grab;\n}\n.tabs-and-actions-container .tabs-container {\n  display: flex;\n  overflow-x: overlay;\n  overflow-y: hidden;\n  scrollbar-width: thin;\n  /* Track */\n  /* Handle */\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar {\n  height: 3px;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-track {\n  background: transparent;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-thumb {\n  background: var(--dv-tabs-container-scrollbar-color);\n}\n.tabs-and-actions-container .tabs-container .tab {\n  -webkit-user-drag: element;\n  outline: none;\n  min-width: 75px;\n  cursor: pointer;\n  position: relative;\n  box-sizing: border-box;\n}\n.tabs-and-actions-container .tabs-container .tab:not(:first-child)::before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  pointer-events: none;\n  background-color: var(--dv-tab-divider-color);\n  width: 1px;\n  height: 100%;\n}\n.watermark {\n  display: flex;\n  width: 100%;\n}\n.watermark.has-actions .watermark-title .actions-container {\n  display: none;\n}\n.watermark .watermark-title {\n  height: 35px;\n  width: 100%;\n  display: flex;\n}\n.watermark .watermark-content {\n  flex-grow: 1;\n}\n.watermark .actions-container {\n  display: flex;\n  align-items: center;\n  padding: 0px 8px;\n}\n.watermark .actions-container .close-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  cursor: pointer;\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.watermark .actions-container .close-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}";
   styleInject(css_248z);
 
   class TransferObject {
@@ -558,6 +558,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
       return false;
   }
+  function addTestId(element, id) {
+      element.setAttribute('data-testid', id);
+  }
 
   function tail(arr) {
       if (arr.length === 0) {
@@ -619,7 +622,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
 
   const clamp = (value, min, max) => {
       if (min > max) {
-          throw new Error(`${min} > ${max} is an invalid condition`);
+          /**
+           * caveat: an error should be thrown here if this was a proper `clamp` function but we need to handle
+           * cases where `min` > `max` and in those cases return `min`.
+           */
+          return min;
       }
       return Math.min(max, Math.max(value, min));
   };
@@ -824,7 +831,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this._disabled = value;
           toggleClass(this.element, 'dv-splitview-disabled', value);
       }
+      get margin() {
+          return this._margin;
+      }
+      set margin(value) {
+          this._margin = value;
+      }
       constructor(container, options) {
+          var _a;
           this.container = container;
           this.viewItems = [];
           this.sashes = [];
@@ -835,6 +849,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this._startSnappingEnabled = true;
           this._endSnappingEnabled = true;
           this._disabled = false;
+          this._margin = 0;
           this._onDidSashEnd = new Emitter();
           this.onDidSashEnd = this._onDidSashEnd.event;
           this._onDidAddView = new Emitter();
@@ -923,6 +938,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           };
           this._orientation = options.orientation;
           this.element = this.createContainer();
+          this.margin = (_a = options.margin) !== null && _a !== void 0 ? _a : 0;
           this.proportionalLayout =
               options.proportionalLayout === undefined
                   ? true
@@ -977,9 +993,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           if (index < 0 || index >= this.viewItems.length) {
               throw new Error('Index out of bounds');
           }
-          toggleClass(this.container, 'visible', visible);
           const viewItem = this.viewItems[index];
-          toggleClass(this.container, 'visible', visible);
           viewItem.setVisible(visible, viewItem.size);
           this.distributeEmptySpace(index);
           this.layoutViews();
@@ -1291,15 +1305,29 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               this._proportions = this.viewItems.map((i) => i.visible ? i.size / this._contentSize : undefined);
           }
       }
+      /**
+       * Margin explain:
+       *
+       * For `n` views in a splitview there will be `n-1` margins `m`.
+       *
+       * To fit the margins each view must reduce in size by `(m * (n - 1)) / n`.
+       *
+       * For each view `i` the offet must be adjusted by `m * i/(n - 1)`.
+       */
       layoutViews() {
           this._contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
-          let sum = 0;
-          const x = [];
           this.updateSashEnablement();
+          if (this.viewItems.length === 0) {
+              return;
+          }
+          const sashCount = this.viewItems.length - 1;
+          const marginReducedSize = (this.margin * sashCount) / this.viewItems.length;
+          let totalLeftOffset = 0;
+          const viewLeftOffsets = [];
           for (let i = 0; i < this.viewItems.length - 1; i++) {
-              sum += this.viewItems[i].size;
-              x.push(sum);
-              const offset = Math.min(Math.max(0, sum - 2), this.size - 4);
+              totalLeftOffset += this.viewItems[i].size;
+              viewLeftOffsets.push(totalLeftOffset);
+              const offset = Math.min(Math.max(0, totalLeftOffset - 2), this.size - this.margin);
               if (this._orientation === exports.Orientation.HORIZONTAL) {
                   this.sashes[i].container.style.left = `${offset}px`;
                   this.sashes[i].container.style.top = `0px`;
@@ -1310,19 +1338,24 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               }
           }
           this.viewItems.forEach((view, i) => {
+              const size = view.size - marginReducedSize;
+              const offset = i === 0
+                  ? 0
+                  : viewLeftOffsets[i - 1] +
+                      (i / sashCount) * marginReducedSize;
               if (this._orientation === exports.Orientation.HORIZONTAL) {
-                  view.container.style.width = `${view.size}px`;
-                  view.container.style.left = i == 0 ? '0px' : `${x[i - 1]}px`;
+                  view.container.style.width = `${size}px`;
+                  view.container.style.left = `${offset}px`;
                   view.container.style.top = '';
                   view.container.style.height = '';
               }
               if (this._orientation === exports.Orientation.VERTICAL) {
-                  view.container.style.height = `${view.size}px`;
-                  view.container.style.top = i == 0 ? '0px' : `${x[i - 1]}px`;
+                  view.container.style.height = `${size}px`;
+                  view.container.style.top = `${offset}px`;
                   view.container.style.width = '';
                   view.container.style.left = '';
               }
-              view.view.layout(view.size, this._orthogonalSize);
+              view.view.layout(view.size - marginReducedSize, this._orthogonalSize);
           });
       }
       findFirstSnapIndex(indexes) {
@@ -1771,7 +1804,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       set disabled(value) {
           this.splitview.disabled = value;
       }
-      constructor(orientation, proportionalLayout, styles, size, orthogonalSize, disabled, childDescriptors) {
+      get margin() {
+          return this.splitview.margin;
+      }
+      set margin(value) {
+          this.splitview.margin = value;
+          this.children.forEach((child) => {
+              if (child instanceof BranchNode) {
+                  child.margin = value;
+              }
+          });
+      }
+      constructor(orientation, proportionalLayout, styles, size, orthogonalSize, disabled, margin, childDescriptors) {
           super();
           this.orientation = orientation;
           this.proportionalLayout = proportionalLayout;
@@ -1791,6 +1835,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   orientation: this.orientation,
                   proportionalLayout,
                   styles,
+                  margin,
               });
               this.splitview.layout(this.size, this.orthogonalSize);
           }
@@ -1814,6 +1859,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   descriptor,
                   proportionalLayout,
                   styles,
+                  margin,
               });
           }
           this.disabled = disabled;
@@ -1822,10 +1868,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }));
           this.setupChildrenEvents();
       }
-      setVisible(visible) {
-          for (const child of this.children) {
-              child.setVisible(visible);
-          }
+      setVisible(_visible) {
+          // noop
       }
       isChildVisible(index) {
           if (index < 0 || index >= this.children.length) {
@@ -1842,12 +1886,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
           const wereAllChildrenHidden = this.splitview.contentSize === 0;
           this.splitview.setViewVisible(index, visible);
+          // }
           const areAllChildrenHidden = this.splitview.contentSize === 0;
           // If all children are hidden then the parent should hide the entire splitview
           // If the entire splitview is hidden then the parent should show the splitview when a child is shown
           if ((visible && wereAllChildrenHidden) ||
               (!visible && areAllChildrenHidden)) {
-              this._onDidVisibilityChange.fire(visible);
+              this._onDidVisibilityChange.fire({ visible });
           }
       }
       moveChild(from, to) {
@@ -1920,7 +1965,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               this._onDidChange.fire({ size: e.orthogonalSize });
           }), ...this.children.map((c, i) => {
               if (c instanceof BranchNode) {
-                  return c.onDidVisibilityChange((visible) => {
+                  return c.onDidVisibilityChange(({ visible }) => {
                       this.setChildVisible(i, visible);
                   });
               }
@@ -1950,7 +1995,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
   }
   function flipNode(node, size, orthogonalSize) {
       if (node instanceof BranchNode) {
-          const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize, node.disabled);
+          const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize, node.disabled, node.margin);
           let totalSize = 0;
           for (let i = node.children.length - 1; i >= 0; i--) {
               const child = node.children[i];
@@ -2105,6 +2150,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               }
           }
       }
+      get margin() {
+          return this._margin;
+      }
+      set margin(value) {
+          this._margin = value;
+          this.root.margin = value;
+      }
       maximizedView() {
           var _a;
           return (_a = this._maximizedNode) === null || _a === void 0 ? void 0 : _a.leaf.view;
@@ -2190,13 +2242,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.disposable.dispose();
           this._onDidChange.dispose();
           this._onDidMaximizedNodeChange.dispose();
+          this._onDidViewVisibilityChange.dispose();
           this.root.dispose();
           this._maximizedNode = undefined;
           this.element.remove();
       }
       clear() {
           const orientation = this.root.orientation;
-          this.root = new BranchNode(orientation, this.proportionalLayout, this.styles, this.root.size, this.root.orthogonalSize, this._locked);
+          this.root = new BranchNode(orientation, this.proportionalLayout, this.styles, this.root.size, this.root.orthogonalSize, this.locked, this.margin);
       }
       deserialize(json, deserializer) {
           const orientation = json.orientation;
@@ -2207,6 +2260,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize);
       }
       _deserializeNode(node, orientation, deserializer, orthogonalSize) {
+          var _a;
           let result;
           if (node.type === 'branch') {
               const serializedChildren = node.data;
@@ -2218,10 +2272,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               });
               result = new BranchNode(orientation, this.proportionalLayout, this.styles, node.size, // <- orthogonal size - flips at each depth
               orthogonalSize, // <- size - flips at each depth,
-              this._locked, children);
+              this.locked, this.margin, children);
           }
           else {
-              result = new LeafNode(deserializer.fromJSON(node), orientation, orthogonalSize, node.size);
+              const view = deserializer.fromJSON(node);
+              if (typeof node.visible === 'boolean') {
+                  (_a = view.setVisible) === null || _a === void 0 ? void 0 : _a.call(view, node.visible);
+              }
+              result = new LeafNode(view, orientation, orthogonalSize, node.size);
           }
           return result;
       }
@@ -2251,7 +2309,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
           const oldRoot = this.root;
           oldRoot.element.remove();
-          this._root = new BranchNode(orthogonal(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size, this._locked);
+          this._root = new BranchNode(orthogonal(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size, this.locked, this.margin);
           if (oldRoot.children.length === 0) ;
           else if (oldRoot.children.length === 1) {
               // can remove one level of redundant branching if there is only a single child
@@ -2316,19 +2374,24 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
           return findLeaf(this.root, reverse);
       }
-      constructor(proportionalLayout, styles, orientation) {
+      constructor(proportionalLayout, styles, orientation, locked, margin) {
           this.proportionalLayout = proportionalLayout;
           this.styles = styles;
           this._locked = false;
+          this._margin = 0;
           this._maximizedNode = undefined;
           this.disposable = new MutableDisposable();
           this._onDidChange = new Emitter();
           this.onDidChange = this._onDidChange.event;
+          this._onDidViewVisibilityChange = new Emitter();
+          this.onDidViewVisibilityChange = this._onDidViewVisibilityChange.event;
           this._onDidMaximizedNodeChange = new Emitter();
           this.onDidMaximizedNodeChange = this._onDidMaximizedNodeChange.event;
           this.element = document.createElement('div');
           this.element.className = 'grid-view';
-          this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0, this._locked);
+          this._locked = locked !== null && locked !== void 0 ? locked : false;
+          this._margin = margin !== null && margin !== void 0 ? margin : 0;
+          this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0, this.locked, this.margin);
       }
       isViewVisible(location) {
           const [rest, index] = tail(location);
@@ -2347,6 +2410,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           if (!(parent instanceof BranchNode)) {
               throw new Error('Invalid from location');
           }
+          this._onDidViewVisibilityChange.fire();
           parent.setChildVisible(index, visible);
       }
       moveView(parentLocation, from, to) {
@@ -2379,7 +2443,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               }
               const child = grandParent.removeChild(parentIndex);
               child.dispose();
-              const newParent = new BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize, this._locked);
+              const newParent = new BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize, this.locked, this.margin);
               grandParent.addChild(newParent, parent.size, parentIndex);
               const newSibling = new LeafNode(parent.view, grandParent.orientation, parent.size);
               newParent.addChild(newSibling, newSiblingSize, 0);
@@ -2618,14 +2682,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.onDidActiveChange = this._onDidActiveChange.event;
           this._bufferOnDidLayoutChange = new AsapEvent();
           this.onDidLayoutChange = this._bufferOnDidLayoutChange.onEvent;
+          this._onDidViewVisibilityChangeMicroTaskQueue = new AsapEvent();
+          this.onDidViewVisibilityChangeMicroTaskQueue = this._onDidViewVisibilityChangeMicroTaskQueue.onEvent;
           this.element.style.height = '100%';
           this.element.style.width = '100%';
           options.parentElement.appendChild(this.element);
-          this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation);
+          this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation, options.locked, options.margin);
           this.gridview.locked = !!options.locked;
           this.element.appendChild(this.gridview.element);
           this.layout(0, 0, true); // set some elements height/widths
-          this.addDisposables(exports.DockviewDisposable.from(() => {
+          this.addDisposables(this.gridview.onDidViewVisibilityChange(() => this._onDidViewVisibilityChangeMicroTaskQueue.fire()), this.onDidViewVisibilityChangeMicroTaskQueue(() => {
+              this.layout(this.width, this.height, true);
+          }), exports.DockviewDisposable.from(() => {
               var _a;
               (_a = this.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.element);
           }), this.gridview.onDidChange(() => {
@@ -3203,6 +3271,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       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.
        */
@@ -3239,6 +3310,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       get onDidRemovePanel() {
           return this.component.onDidRemovePanel;
       }
+      get onDidMovePanel() {
+          return this.component.onDidMovePanel;
+      }
       /**
        * Invoked after a layout is deserialzied using the `fromJSON` method.
        */
@@ -3379,8 +3453,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       /**
        * Add a floating group
        */
-      addFloatingGroup(item, coord) {
-          return this.component.addFloatingGroup(item, coord);
+      addFloatingGroup(item, options) {
+          return this.component.addFloatingGroup(item, options);
       }
       /**
        * Create a component from a serialized object.
@@ -3430,6 +3504,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       addPopoutGroup(item, options) {
           return this.component.addPopoutGroup(item, options);
       }
+      setGap(gap) {
+          this.component.updateOptions({ gap });
+      }
   }
 
   class DragHandler extends CompositeDisposable {
@@ -4799,7 +4876,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   this.accessor.addFloatingGroup(this.group, {
                       x: left - rootLeft + 20,
                       y: top - rootTop + 20,
-                  }, { inDragMode: true });
+                      inDragMode: true,
+                  });
               }
           }), addDisposableListener(this.tabContainer, 'mousedown', (event) => {
               if (event.defaultPrevented) {
@@ -4868,7 +4946,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   this.accessor.addFloatingGroup(panel, {
                       x: left - rootLeft,
                       y: top - rootTop,
-                  }, { inDragMode: true });
+                      inDragMode: true,
+                  });
                   return;
               }
               const isLeftClick = event.button === 0;
@@ -4941,6 +5020,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           rootOverlayModel: undefined,
           locked: undefined,
           disableDnd: undefined,
+          gap: undefined,
       };
       return Object.keys(properties);
   })();
@@ -5671,6 +5751,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       get isActive() {
           return this.api.isActive;
       }
+      get isVisible() {
+          return this.api.isVisible;
+      }
       constructor(id, component, options, api) {
           super(id, component, api !== null && api !== void 0 ? api : new GridviewPanelApiImpl(id, component));
           this._evaluatedMinimumWidth = 0;
@@ -6433,12 +6516,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this._element.appendChild(this.options.content);
           this.options.container.appendChild(this._element);
           // if input bad resize within acceptable boundaries
-          this.setBounds({
-              height: this.options.height,
-              width: this.options.width,
-              top: this.options.top,
-              left: this.options.left,
-          });
+          this.setBounds(Object.assign(Object.assign(Object.assign(Object.assign({ height: this.options.height, width: this.options.width }, ('top' in this.options && { top: this.options.top })), ('bottom' in this.options && { bottom: this.options.bottom })), ('left' in this.options && { left: this.options.left })), ('right' in this.options && { right: this.options.right })));
       }
       setBounds(bounds = {}) {
           if (typeof bounds.height === 'number') {
@@ -6447,11 +6525,25 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           if (typeof bounds.width === 'number') {
               this._element.style.width = `${bounds.width}px`;
           }
-          if (typeof bounds.top === 'number') {
+          if ('top' in bounds && typeof bounds.top === 'number') {
               this._element.style.top = `${bounds.top}px`;
+              this._element.style.bottom = 'auto';
+              this.verticalAlignment = 'top';
+          }
+          if ('bottom' in bounds && typeof bounds.bottom === 'number') {
+              this._element.style.bottom = `${bounds.bottom}px`;
+              this._element.style.top = 'auto';
+              this.verticalAlignment = 'bottom';
           }
-          if (typeof bounds.left === 'number') {
+          if ('left' in bounds && typeof bounds.left === 'number') {
               this._element.style.left = `${bounds.left}px`;
+              this._element.style.right = 'auto';
+              this.horiziontalAlignment = 'left';
+          }
+          if ('right' in bounds && typeof bounds.right === 'number') {
+              this._element.style.right = `${bounds.right}px`;
+              this._element.style.left = 'auto';
+              this.horiziontalAlignment = 'right';
           }
           const containerRect = this.options.container.getBoundingClientRect();
           const overlayRect = this._element.getBoundingClientRect();
@@ -6459,24 +6551,54 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           // a minimum width of minimumViewportWidth must be inside the viewport
           const xOffset = Math.max(0, this.getMinimumWidth(overlayRect.width));
           // a minimum height of minimumViewportHeight must be inside the viewport
-          const yOffset = typeof this.options.minimumInViewportHeight === 'number'
-              ? Math.max(0, this.getMinimumHeight(overlayRect.height))
-              : 0;
-          const left = clamp(overlayRect.left - containerRect.left, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
-          const top = clamp(overlayRect.top - containerRect.top, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
-          this._element.style.left = `${left}px`;
-          this._element.style.top = `${top}px`;
+          const yOffset = Math.max(0, this.getMinimumHeight(overlayRect.height));
+          if (this.verticalAlignment === 'top') {
+              const top = clamp(overlayRect.top - containerRect.top, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
+              this._element.style.top = `${top}px`;
+              this._element.style.bottom = 'auto';
+          }
+          if (this.verticalAlignment === 'bottom') {
+              const bottom = clamp(containerRect.bottom - overlayRect.bottom, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
+              this._element.style.bottom = `${bottom}px`;
+              this._element.style.top = 'auto';
+          }
+          if (this.horiziontalAlignment === 'left') {
+              const left = clamp(overlayRect.left - containerRect.left, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
+              this._element.style.left = `${left}px`;
+              this._element.style.right = 'auto';
+          }
+          if (this.horiziontalAlignment === 'right') {
+              const right = clamp(containerRect.right - overlayRect.right, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
+              this._element.style.right = `${right}px`;
+              this._element.style.left = 'auto';
+          }
           this._onDidChange.fire();
       }
       toJSON() {
           const container = this.options.container.getBoundingClientRect();
           const element = this._element.getBoundingClientRect();
-          return {
-              top: element.top - container.top,
-              left: element.left - container.left,
-              width: element.width,
-              height: element.height,
-          };
+          const result = {};
+          if (this.verticalAlignment === 'top') {
+              result.top = parseFloat(this._element.style.top);
+          }
+          else if (this.verticalAlignment === 'bottom') {
+              result.bottom = parseFloat(this._element.style.bottom);
+          }
+          else {
+              result.top = element.top - container.top;
+          }
+          if (this.horiziontalAlignment === 'left') {
+              result.left = parseFloat(this._element.style.left);
+          }
+          else if (this.horiziontalAlignment === 'right') {
+              result.right = parseFloat(this._element.style.right);
+          }
+          else {
+              result.left = element.left - container.left;
+          }
+          result.width = element.width;
+          result.height = element.height;
+          return result;
       }
       setupDrag(dragTarget, options = { inDragMode: false }) {
           const move = new MutableDisposable();
@@ -6508,12 +6630,30 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                       };
                   }
                   const xOffset = Math.max(0, this.getMinimumWidth(overlayRect.width));
-                  const yOffset = Math.max(0, this.options.minimumInViewportHeight
-                      ? this.getMinimumHeight(overlayRect.height)
-                      : 0);
-                  const left = clamp(x - offset.x, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
+                  const yOffset = Math.max(0, this.getMinimumHeight(overlayRect.height));
                   const top = clamp(y - offset.y, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
-                  this.setBounds({ top, left });
+                  const bottom = clamp(offset.y -
+                      y +
+                      containerRect.height -
+                      overlayRect.height, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
+                  const left = clamp(x - offset.x, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
+                  const right = clamp(offset.x - x + containerRect.width - overlayRect.width, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
+                  const bounds = {};
+                  // Anchor to top or to bottom depending on which one is closer
+                  if (top <= bottom) {
+                      bounds.top = top;
+                  }
+                  else {
+                      bounds.bottom = bottom;
+                  }
+                  // Anchor to left or to right depending on which one is closer
+                  if (left <= right) {
+                      bounds.left = left;
+                  }
+                  else {
+                      bounds.right = right;
+                  }
+                  this.setBounds(bounds);
               }), addDisposableWindowListener(window, 'mouseup', () => {
                   toggleClass(this._element, 'dv-resize-container-dragging', false);
                   move.dispose();
@@ -6581,8 +6721,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                       };
                   }
                   let top = undefined;
+                  let bottom = undefined;
                   let height = undefined;
                   let left = undefined;
+                  let right = undefined;
                   let width = undefined;
                   const moveTop = () => {
                       top = clamp(y, -Number.MAX_VALUE, startPosition.originalY +
@@ -6596,6 +6738,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                           startPosition.originalY +
                               startPosition.originalHeight -
                               top;
+                      bottom = containerRect.height - top - height;
                   };
                   const moveBottom = () => {
                       top =
@@ -6607,6 +6750,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                           ? -top +
                               this.options.minimumInViewportHeight
                           : Overlay.MINIMUM_HEIGHT, Number.MAX_VALUE);
+                      bottom = containerRect.height - top - height;
                   };
                   const moveLeft = () => {
                       left = clamp(x, -Number.MAX_VALUE, startPosition.originalX +
@@ -6620,6 +6764,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                           startPosition.originalX +
                               startPosition.originalWidth -
                               left;
+                      right = containerRect.width - left - width;
                   };
                   const moveRight = () => {
                       left =
@@ -6631,6 +6776,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                           ? -left +
                               this.options.minimumInViewportWidth
                           : Overlay.MINIMUM_WIDTH, Number.MAX_VALUE);
+                      right = containerRect.width - left - width;
                   };
                   switch (direction) {
                       case 'top':
@@ -6662,7 +6808,24 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                           moveRight();
                           break;
                   }
-                  this.setBounds({ height, width, top, left });
+                  const bounds = {};
+                  // Anchor to top or to bottom depending on which one is closer
+                  if (top <= bottom) {
+                      bounds.top = top;
+                  }
+                  else {
+                      bounds.bottom = bottom;
+                  }
+                  // Anchor to left or to right depending on which one is closer
+                  if (left <= right) {
+                      bounds.left = left;
+                  }
+                  else {
+                      bounds.right = right;
+                  }
+                  bounds.height = height;
+                  bounds.width = width;
+                  this.setBounds(bounds);
               }), {
                   dispose: () => {
                       for (const iframe of iframes) {
@@ -6685,7 +6848,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           if (typeof this.options.minimumInViewportHeight === 'number') {
               return height - this.options.minimumInViewportHeight;
           }
-          return height;
+          return 0;
       }
       dispose() {
           this._element.remove();
@@ -6708,7 +6871,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
   }
 
   const DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
-  const DEFAULT_FLOATING_GROUP_POSITION = { left: 100, top: 100 };
+  const DEFAULT_FLOATING_GROUP_POSITION = { left: 100, top: 100, width: 300, height: 300 };
 
   function createFocusableElement() {
       const element = document.createElement('div');
@@ -7040,6 +7203,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       get api() {
           return this._api;
       }
+      get gap() {
+          return this.gridview.margin;
+      }
       constructor(options) {
           var _a;
           super({
@@ -7051,6 +7217,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               parentElement: options.parentElement,
               disableAutoResizing: options.disableAutoResizing,
               locked: options.locked,
+              margin: options.gap,
           });
           this.nextGroupId = sequentialNumberGenerator();
           this._deserializer = new DefaultDockviewDeserialzier(this);
@@ -7076,9 +7243,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this._onDidActivePanelChange = new Emitter();
           this.onDidActivePanelChange = this._onDidActivePanelChange.event;
           this._onDidMovePanel = new Emitter();
+          this.onDidMovePanel = this._onDidMovePanel.event;
           this._floatingGroups = [];
           this._popoutGroups = [];
-          this._ignoreEvents = 0;
           this._onDidRemoveGroup = new Emitter();
           this.onDidRemoveGroup = this._onDidRemoveGroup.event;
           this._onDidAddGroup = new Emitter();
@@ -7092,7 +7259,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.overlayRenderContainer = new OverlayRenderContainer(gready);
           toggleClass(this.gridview.element, 'dv-dockview', true);
           toggleClass(this.element, 'dv-debug', !!options.debug);
-          this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this.onDidAdd((event) => {
+          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.onDidViewVisibilityChangeMicroTaskQueue(() => {
+              this.updateWatermark();
+          }), this.onDidAdd((event) => {
               if (!this._moving) {
                   this._onDidAddGroup.fire(event);
               }
@@ -7106,7 +7275,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               }
           }), exports.DockviewEvent.any(this.onDidAdd, this.onDidRemove)(() => {
               this.updateWatermark();
-          }), exports.DockviewEvent.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
+          }), exports.DockviewEvent.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidAddGroup, this.onDidRemove, this.onDidMovePanel, this.onDidActivePanelChange)(() => {
               this._bufferOnDidLayoutChange.fire();
           }), exports.DockviewDisposable.from(() => {
               // iterate over a copy of the array since .dispose() mutates the original array
@@ -7206,7 +7375,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           var _a, _b, _c;
           if (itemToPopout instanceof DockviewPanel &&
               itemToPopout.group.size === 1) {
-              return this.addPopoutGroup(itemToPopout.group);
+              return this.addPopoutGroup(itemToPopout.group, options);
           }
           const theme = getDockviewTheme(this.gridview.element);
           const element = this.element;
@@ -7357,8 +7526,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               console.error('dockview: failed to create popout window', err);
           });
       }
-      addFloatingGroup(item, coord, options) {
-          var _a, _b, _c, _d, _e, _f, _g;
+      addFloatingGroup(item, options) {
+          var _a, _b, _c, _d, _e;
           let group;
           if (item instanceof DockviewPanel) {
               group = this.createGroup();
@@ -7403,26 +7572,62 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               }
           }
           group.model.location = { type: 'floating' };
-          const overlayLeft = typeof (coord === null || coord === void 0 ? void 0 : coord.x) === 'number'
-              ? Math.max(coord.x, 0)
-              : DEFAULT_FLOATING_GROUP_POSITION.left;
-          const overlayTop = typeof (coord === null || coord === void 0 ? void 0 : coord.y) === 'number'
-              ? Math.max(coord.y, 0)
-              : DEFAULT_FLOATING_GROUP_POSITION.top;
-          const overlay = new Overlay({
-              container: this.gridview.element,
-              content: group.element,
-              height: (_b = coord === null || coord === void 0 ? void 0 : coord.height) !== null && _b !== void 0 ? _b : 300,
-              width: (_c = coord === null || coord === void 0 ? void 0 : coord.width) !== null && _c !== void 0 ? _c : 300,
-              left: overlayLeft,
-              top: overlayTop,
-              minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
+          function getAnchoredBox() {
+              if (options === null || options === void 0 ? void 0 : options.position) {
+                  const result = {};
+                  if ('left' in options.position) {
+                      result.left = Math.max(options.position.left, 0);
+                  }
+                  else if ('right' in options.position) {
+                      result.right = Math.max(options.position.right, 0);
+                  }
+                  else {
+                      result.left = DEFAULT_FLOATING_GROUP_POSITION.left;
+                  }
+                  if ('top' in options.position) {
+                      result.top = Math.max(options.position.top, 0);
+                  }
+                  else if ('bottom' in options.position) {
+                      result.bottom = Math.max(options.position.bottom, 0);
+                  }
+                  else {
+                      result.top = DEFAULT_FLOATING_GROUP_POSITION.top;
+                  }
+                  if (typeof options.width === 'number') {
+                      result.width = Math.max(options.width, 0);
+                  }
+                  else {
+                      result.width = DEFAULT_FLOATING_GROUP_POSITION.width;
+                  }
+                  if (typeof options.height === 'number') {
+                      result.height = Math.max(options.height, 0);
+                  }
+                  else {
+                      result.height = DEFAULT_FLOATING_GROUP_POSITION.height;
+                  }
+                  return result;
+              }
+              return {
+                  left: typeof (options === null || options === void 0 ? void 0 : options.x) === 'number'
+                      ? Math.max(options.x, 0)
+                      : DEFAULT_FLOATING_GROUP_POSITION.left,
+                  top: typeof (options === null || options === void 0 ? void 0 : options.y) === 'number'
+                      ? Math.max(options.y, 0)
+                      : DEFAULT_FLOATING_GROUP_POSITION.top,
+                  width: typeof (options === null || options === void 0 ? void 0 : options.width) === 'number'
+                      ? Math.max(options.width, 0)
+                      : DEFAULT_FLOATING_GROUP_POSITION.width,
+                  height: typeof (options === null || options === void 0 ? void 0 : options.height) === 'number'
+                      ? Math.max(options.height, 0)
+                      : DEFAULT_FLOATING_GROUP_POSITION.height,
+              };
+          }
+          const anchoredBox = getAnchoredBox();
+          const overlay = new Overlay(Object.assign(Object.assign({ container: this.gridview.element, content: group.element }, anchoredBox), { minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
                   ? undefined
-                  : (_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumWidthWithinViewport) !== null && _e !== void 0 ? _e : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
-              minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
+                  : (_c = (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport) !== null && _c !== void 0 ? _c : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE, minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
                   ? undefined
-                  : (_g = (_f = this.options.floatingGroupBounds) === null || _f === void 0 ? void 0 : _f.minimumHeightWithinViewport) !== null && _g !== void 0 ? _g : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
-          });
+                  : (_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumHeightWithinViewport) !== null && _e !== void 0 ? _e : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE }));
           const el = group.element.querySelector('.void-container');
           if (!el) {
               throw new Error('failed to find drag handle');
@@ -7520,12 +7725,21 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                           group.overlay.minimumInViewportWidth =
                               (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport;
                   }
-                  group.overlay.setBounds({});
+                  group.overlay.setBounds();
               }
           }
           if (changed_rootOverlayOptions) {
               this._rootDropTarget.setOverlayModel(options.rootOverlayModel);
           }
+          if (
+          //  if explicitly set as `undefined`
+          'gap' in options &&
+              options.gap === undefined) {
+              this.gridview.margin = 0;
+          }
+          if (typeof options.gap === 'number') {
+              this.gridview.margin = options.gap;
+          }
           this.layout(this.gridview.width, this.gridview.height, true);
       }
       layout(width, height, forceResize) {
@@ -7687,11 +7901,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   const { data, position } = serializedFloatingGroup;
                   const group = createGroupFromSerializedState(data);
                   this.addFloatingGroup(group, {
-                      x: position.left,
-                      y: position.top,
-                      height: position.height,
-                      width: position.width,
-                  }, { skipRemoveGroup: true, inDragMode: false });
+                      position: position,
+                      skipRemoveGroup: true,
+                      inDragMode: false,
+                  });
               }
               const serializedPopoutGroups = (_b = data.popoutGroups) !== null && _b !== void 0 ? _b : [];
               for (const serializedPopoutGroup of serializedPopoutGroups) {
@@ -7822,15 +8035,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               if (options.floating) {
                   const group = this.createGroup();
                   this._onDidAddGroup.fire(group);
-                  const o = typeof options.floating === 'object' &&
+                  const floatingGroupOptions = typeof options.floating === 'object' &&
                       options.floating !== null
                       ? options.floating
                       : {};
-                  this.addFloatingGroup(group, o, {
-                      inDragMode: false,
-                      skipRemoveGroup: true,
-                      skipActiveGroup: true,
-                  });
+                  this.addFloatingGroup(group, Object.assign(Object.assign({}, floatingGroupOptions), { inDragMode: false, skipRemoveGroup: true, skipActiveGroup: true }));
                   panel = this.createPanel(options, group);
                   group.model.openPanel(panel, {
                       skipSetActive: options.inactive,
@@ -7869,11 +8078,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   options.floating !== null
                   ? options.floating
                   : {};
-              this.addFloatingGroup(group, coordinates, {
-                  inDragMode: false,
-                  skipRemoveGroup: true,
-                  skipActiveGroup: true,
-              });
+              this.addFloatingGroup(group, Object.assign(Object.assign({}, coordinates), { inDragMode: false, skipRemoveGroup: true, skipActiveGroup: true }));
               panel = this.createPanel(options, group);
               group.model.openPanel(panel, {
                   skipSetActive: options.inactive,
@@ -7928,6 +8133,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   });
                   const watermarkContainer = document.createElement('div');
                   watermarkContainer.className = 'dv-watermark-container';
+                  addTestId(watermarkContainer, 'watermark-component');
                   watermarkContainer.appendChild(this.watermark.element);
                   this.gridview.element.appendChild(watermarkContainer);
               }
@@ -8116,6 +8322,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               this.doSetGroupAndPanelActive(destinationGroup);
               this._onDidMovePanel.fire({
                   panel: removedPanel,
+                  from: sourceGroup,
               });
           }
           else {
@@ -8139,6 +8346,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                           // if a group has one tab - we are essentially moving the 'group'
                           // which is equivalent to swapping two views in this case
                           this.gridview.moveView(sourceParentLocation, from, to);
+                          this._onDidMovePanel.fire({
+                              panel: this.getGroupPanel(sourceItemId),
+                              from: sourceGroup,
+                          });
                           return;
                       }
                   }
@@ -8152,6 +8363,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, destinationTarget);
                   this.movingLock(() => this.doAddGroup(targetGroup, location));
                   this.doSetGroupAndPanelActive(targetGroup);
+                  this._onDidMovePanel.fire({
+                      panel: this.getGroupPanel(sourceItemId),
+                      from: sourceGroup,
+                  });
               }
               else {
                   /**
@@ -8171,6 +8386,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                       skipSetGroupActive: true,
                   }));
                   this.doSetGroupAndPanelActive(group);
+                  this._onDidMovePanel.fire({
+                      panel: removedPanel,
+                      from: sourceGroup,
+                  });
               }
           }
       }
@@ -8195,9 +8414,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   }
               });
               this.doSetGroupAndPanelActive(to);
-              panels.forEach((panel) => {
-                  this._onDidMovePanel.fire({ panel });
-              });
           }
           else {
               switch (from.api.location.type) {
@@ -8223,10 +8439,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               const referenceLocation = getGridLocation(to.element);
               const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
               this.gridview.addView(from, exports.Sizing.Distribute, dropLocation);
-              from.panels.forEach((panel) => {
-                  this._onDidMovePanel.fire({ panel });
-              });
           }
+          from.panels.forEach((panel) => {
+              this._onDidMovePanel.fire({ panel, from });
+          });
       }
       doSetGroupActive(group) {
           super.doSetGroupActive(group);