dockview-react 3.1.1 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/dockview-react.amd.js +934 -296
  2. package/dist/dockview-react.amd.js.map +1 -1
  3. package/dist/dockview-react.amd.min.js +2 -2
  4. package/dist/dockview-react.amd.min.js.map +1 -1
  5. package/dist/dockview-react.amd.min.noStyle.js +2 -2
  6. package/dist/dockview-react.amd.min.noStyle.js.map +1 -1
  7. package/dist/dockview-react.amd.noStyle.js +933 -295
  8. package/dist/dockview-react.amd.noStyle.js.map +1 -1
  9. package/dist/dockview-react.cjs.js +934 -296
  10. package/dist/dockview-react.cjs.js.map +1 -1
  11. package/dist/dockview-react.esm.js +927 -297
  12. package/dist/dockview-react.esm.js.map +1 -1
  13. package/dist/dockview-react.esm.min.js +2 -2
  14. package/dist/dockview-react.esm.min.js.map +1 -1
  15. package/dist/dockview-react.js +934 -296
  16. package/dist/dockview-react.js.map +1 -1
  17. package/dist/dockview-react.min.js +2 -2
  18. package/dist/dockview-react.min.js.map +1 -1
  19. package/dist/dockview-react.min.noStyle.js +2 -2
  20. package/dist/dockview-react.min.noStyle.js.map +1 -1
  21. package/dist/dockview-react.noStyle.js +933 -295
  22. package/dist/dockview-react.noStyle.js.map +1 -1
  23. package/dist/styles/dockview.css +444 -76
  24. package/package.json +2 -2
package/dist/dockview-react.cjs.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * dockview-react
3
- * @version 3.1.1
3
+ * @version 4.0.0
4
4
  * @link https://github.com/mathuo/dockview
5
5
  * @license MIT
6
6
  */
@@ -36,7 +36,7 @@ function styleInject(css, ref) {
36
36
  }
37
37
  }
38
38
 
39
- var css_248z = ".dv-svg {\n display: inline-block;\n fill: currentcolor;\n line-height: 1;\n stroke: currentcolor;\n stroke-width: 0;\n}\n.dockview-theme-dark {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-group-view-background-color: #1e1e1e;\n --dv-tabs-and-actions-container-background-color: #252526;\n --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-tab-divider-color: #1e1e1e;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: #969696;\n --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n --dv-separator-border: rgb(68, 68, 68);\n --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n}\n\n.dockview-theme-light {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-group-view-background-color: white;\n --dv-tabs-and-actions-container-background-color: #f3f3f3;\n --dv-activegroup-visiblepanel-tab-background-color: white;\n --dv-activegroup-hiddenpanel-tab-background-color: #ececec;\n --dv-inactivegroup-visiblepanel-tab-background-color: white;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #ececec;\n --dv-tab-divider-color: white;\n --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n --dv-activegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.7);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(51, 51, 51, 0.7);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.35);\n --dv-separator-border: rgba(128, 128, 128, 0.35);\n --dv-paneview-header-border-color: rgb(51, 51, 51);\n}\n\n.dockview-theme-vs {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-group-view-background-color: #1e1e1e;\n --dv-tabs-and-actions-container-background-color: #252526;\n --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-tab-divider-color: #1e1e1e;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: #969696;\n --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n --dv-separator-border: rgb(68, 68, 68);\n --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n --dv-tabs-and-actions-container-background-color: #2d2d30;\n --dv-tabs-and-actions-container-height: 20px;\n --dv-tabs-and-actions-container-font-size: 11px;\n --dv-activegroup-visiblepanel-tab-background-color: #007acc;\n --dv-inactivegroup-visiblepanel-tab-background-color: #3f3f46;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: white;\n --dv-inactivegroup-visiblepanel-tab-color: white;\n --dv-inactivegroup-hiddenpanel-tab-color: white;\n}\n.dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container {\n box-sizing: content-box;\n border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tab.dv-active-tab {\n border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tab.dv-inactive-tab {\n border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container {\n box-sizing: content-box;\n border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tab.dv-active-tab {\n border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tab.dv-inactive-tab {\n border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n}\n\n.dockview-theme-abyss {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-group-view-background-color: #000c18;\n --dv-tabs-and-actions-container-background-color: #1c1c2a;\n --dv-activegroup-visiblepanel-tab-background-color: #000c18;\n --dv-activegroup-hiddenpanel-tab-background-color: #10192c;\n --dv-inactivegroup-visiblepanel-tab-background-color: #000c18;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #10192c;\n --dv-tab-divider-color: #2b2b4a;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);\n --dv-separator-border: #2b2b4a;\n --dv-paneview-header-border-color: #2b2b4a;\n --dv-paneview-active-outline-color: #596f99;\n}\n\n.dockview-theme-dracula {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-group-view-background-color: #282a36;\n --dv-tabs-and-actions-container-background-color: #191a21;\n --dv-activegroup-visiblepanel-tab-background-color: #282a36;\n --dv-activegroup-hiddenpanel-tab-background-color: #21222c;\n --dv-inactivegroup-visiblepanel-tab-background-color: #282a36;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #21222c;\n --dv-tab-divider-color: #191a21;\n --dv-activegroup-visiblepanel-tab-color: rgb(248, 248, 242);\n --dv-activegroup-hiddenpanel-tab-color: rgb(98, 114, 164);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(98, 114, 164, 0.5);\n --dv-separator-border: #bd93f9;\n --dv-paneview-header-border-color: #bd93f9;\n --dv-paneview-active-outline-color: #6272a4;\n}\n.dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {\n position: relative;\n}\n.dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab::after {\n position: absolute;\n left: 0px;\n top: 0px;\n content: \"\";\n width: 100%;\n height: 1px;\n background-color: #94527e;\n z-index: 999;\n}\n.dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {\n position: relative;\n}\n.dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab::after {\n position: absolute;\n left: 0px;\n bottom: 0px;\n content: \"\";\n width: 100%;\n height: 1px;\n background-color: #5e3d5a;\n z-index: 999;\n}\n\n.dockview-theme-replit {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-group-view-background-color: #ebeced;\n --dv-tabs-and-actions-container-background-color: #fcfcfc;\n --dv-activegroup-visiblepanel-tab-background-color: #f0f1f2;\n --dv-activegroup-hiddenpanel-tab-background-color: #fcfcfc;\n --dv-inactivegroup-visiblepanel-tab-background-color: #f0f1f2;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #fcfcfc;\n --dv-tab-divider-color: transparent;\n --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n --dv-activegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n --dv-inactivegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n --dv-inactivegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n --dv-separator-border: transparent;\n --dv-paneview-header-border-color: rgb(51, 51, 51);\n --dv-separator-handle-background-color: #cfd1d3;\n --dv-separator-handle-hover-background-color: #babbbb;\n}\n.dockview-theme-replit .dv-resize-container:has(> .dv-groupview) {\n border-radius: 8px;\n}\n.dockview-theme-replit .dv-groupview {\n overflow: hidden;\n border-radius: 10px;\n}\n.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container {\n border-bottom: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container .dv-tab {\n margin: 4px;\n border-radius: 8px;\n}\n.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container .dv-tab .dv-svg {\n height: 8px;\n width: 8px;\n}\n.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container .dv-tab:hover {\n background-color: #e4e5e6 !important;\n}\n.dockview-theme-replit .dv-groupview .dv-content-container {\n background-color: #fcfcfc;\n}\n.dockview-theme-replit .dv-groupview.dv-active-group {\n border: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .dv-groupview.dv-inactive-group {\n border: 1px solid transparent;\n}\n.dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled)::after {\n content: \"\";\n height: 4px;\n width: 40px;\n border-radius: 2px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--dv-separator-handle-background-color);\n position: absolute;\n}\n.dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):hover::after {\n background-color: var(--dv-separator-handle-hover-background-color);\n}\n.dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled)::after {\n content: \"\";\n height: 40px;\n width: 4px;\n border-radius: 2px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--dv-separator-handle-background-color);\n position: absolute;\n}\n.dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):hover::after {\n background-color: var(--dv-separator-handle-hover-background-color);\n}\n.dv-drop-target {\n position: relative;\n}\n.dv-drop-target > .dv-drop-target-dropzone {\n position: absolute;\n left: 0px;\n top: 0px;\n height: 100%;\n width: 100%;\n z-index: 1000;\n pointer-events: none;\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection {\n position: relative;\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n background-color: var(--dv-drag-over-background-color);\n transition: top 70ms ease-out, left 70ms ease-out, width 70ms ease-out, height 70ms ease-out, opacity 0.15s ease-out;\n will-change: transform;\n pointer-events: none;\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-top.dv-drop-target-small-vertical {\n border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical {\n border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal {\n border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {\n border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-dockview {\n position: relative;\n background-color: var(--dv-group-view-background-color);\n}\n.dv-dockview .dv-watermark-container {\n position: absolute;\n top: 0px;\n left: 0px;\n height: 100%;\n width: 100%;\n z-index: 1;\n}\n.dv-dockview .dv-overlay-render-container {\n position: relative;\n}\n\n.dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {\n background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-inactive-tab {\n background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {\n background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);\n color: var(--dv-inactivegroup-visiblepanel-tab-color);\n}\n.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-inactive-tab {\n background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n color: var(--dv-inactivegroup-hiddenpanel-tab-color);\n}\n\n/**\n * when a tab is dragged we lose the above stylings because they are conditional on parent elements\n * therefore we also set some stylings for the dragging event\n **/\n.dv-tab.dv-tab-dragging {\n background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-groupview {\n display: flex;\n flex-direction: column;\n height: 100%;\n background-color: var(--dv-group-view-background-color);\n overflow: hidden;\n}\n.dv-groupview:focus {\n outline: none;\n}\n.dv-groupview > .dv-content-container {\n flex-grow: 1;\n min-height: 0;\n outline: none;\n}\n.dv-root-wrapper {\n height: 100%;\n width: 100%;\n}\n.dv-grid-view,\n.dv-branch-node {\n height: 100%;\n width: 100%;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-top {\n background-color: red;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-bottom {\n background-color: green;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-left {\n background-color: yellow;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-right {\n background-color: blue;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-topleft,\n.dv-debug .dv-resize-container .dv-resize-handle-topright,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomleft,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomright {\n background-color: cyan;\n}\n\n.dv-resize-container {\n --dv-overlay-z-index: var(--dv-overlay-z-index, 999);\n position: absolute;\n z-index: calc(var(--dv-overlay-z-index) - 2);\n border: 1px solid var(--dv-tab-divider-color);\n box-shadow: var(--dv-floating-box-shadow);\n}\n.dv-resize-container.dv-hidden {\n display: none;\n}\n.dv-resize-container.dv-resize-container-dragging {\n opacity: 0.5;\n}\n.dv-resize-container .dv-resize-handle-top {\n height: 4px;\n width: calc(100% - 8px);\n left: 4px;\n top: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-bottom {\n height: 4px;\n width: calc(100% - 8px);\n left: 4px;\n bottom: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-left {\n height: calc(100% - 8px);\n width: 4px;\n left: -2px;\n top: 4px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-right {\n height: calc(100% - 8px);\n width: 4px;\n right: -2px;\n top: 4px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-topleft {\n height: 4px;\n width: 4px;\n top: -2px;\n left: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: nw-resize;\n}\n.dv-resize-container .dv-resize-handle-topright {\n height: 4px;\n width: 4px;\n right: -2px;\n top: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ne-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomleft {\n height: 4px;\n width: 4px;\n left: -2px;\n bottom: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: sw-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomright {\n height: 4px;\n width: 4px;\n right: -2px;\n bottom: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: se-resize;\n}\n.dv-render-overlay {\n --dv-overlay-z-index: var(--dv-overlay-z-index, 999);\n position: absolute;\n z-index: 1;\n height: 100%;\n}\n.dv-render-overlay.dv-render-overlay-float {\n z-index: calc(var(--dv-overlay-z-index) - 1);\n}\n\n.dv-debug .dv-render-overlay {\n outline: 1px solid red;\n outline-offset: -1;\n}\n.dv-pane-container {\n height: 100%;\n width: 100%;\n}\n.dv-pane-container.dv-animated .dv-view {\n transition-duration: 0.15s;\n transition-timing-function: ease-out;\n}\n.dv-pane-container .dv-view {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n padding: 0px !important;\n}\n.dv-pane-container .dv-view:not(:first-child)::before {\n background-color: transparent !important;\n}\n.dv-pane-container .dv-view:not(:first-child) .dv-pane > .dv-pane-header {\n border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.dv-pane-container .dv-view .dv-default-header {\n background-color: var(--dv-group-view-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n display: flex;\n padding: 0px 8px;\n cursor: pointer;\n}\n.dv-pane-container .dv-view .dv-default-header .dv-pane-header-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.dv-pane-container .dv-view .dv-default-header > span {\n padding-left: 8px;\n flex-grow: 1;\n}\n.dv-pane-container:first-of-type > .dv-pane > .dv-pane-header {\n border-top: none !important;\n}\n.dv-pane-container .dv-pane {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n height: 100%;\n}\n.dv-pane-container .dv-pane .dv-pane-header {\n box-sizing: border-box;\n user-select: none;\n position: relative;\n outline: none;\n}\n.dv-pane-container .dv-pane .dv-pane-header.dv-pane-draggable {\n cursor: pointer;\n}\n.dv-pane-container .dv-pane .dv-pane-header:focus:before, .dv-pane-container .dv-pane .dv-pane-header:focus-within:before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n content: \"\";\n pointer-events: none;\n outline: 1px solid;\n outline-width: -1px;\n outline-style: solid;\n outline-offset: -1px;\n outline-color: var(--dv-paneview-active-outline-color);\n}\n.dv-pane-container .dv-pane .dv-pane-body {\n overflow-y: auto;\n overflow-x: hidden;\n flex-grow: 1;\n position: relative;\n outline: none;\n}\n.dv-pane-container .dv-pane .dv-pane-body:focus:before, .dv-pane-container .dv-pane .dv-pane-body:focus-within:before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n content: \"\";\n pointer-events: none;\n outline: 1px solid;\n outline-width: -1px;\n outline-style: solid;\n outline-offset: -1px;\n outline-color: var(--dv-paneview-active-outline-color);\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-enabled {\n background-color: black;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-disabled {\n background-color: orange;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-maximum {\n background-color: green;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-minimum {\n background-color: red;\n}\n\n.dv-split-view-container {\n position: relative;\n overflow: hidden;\n height: 100%;\n width: 100%;\n}\n.dv-split-view-container.dv-splitview-disabled > .dv-sash-container > .dv-sash {\n pointer-events: none;\n}\n.dv-split-view-container.dv-animation .dv-view,\n.dv-split-view-container.dv-animation .dv-sash {\n transition-duration: 0.15s;\n transition-timing-function: ease-out;\n}\n.dv-split-view-container.dv-horizontal {\n height: 100%;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash {\n height: 100%;\n width: 4px;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-enabled {\n cursor: ew-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-disabled {\n cursor: default;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-maximum {\n cursor: w-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-minimum {\n cursor: e-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-view-container > .dv-view:not(:first-child)::before {\n height: 100%;\n width: 1px;\n}\n.dv-split-view-container.dv-vertical {\n width: 100%;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash {\n width: 100%;\n height: 4px;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-enabled {\n cursor: ns-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-disabled {\n cursor: default;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-maximum {\n cursor: n-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-minimum {\n cursor: s-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-view-container > .dv-view {\n width: 100%;\n}\n.dv-split-view-container.dv-vertical > .dv-view-container > .dv-view:not(:first-child)::before {\n height: 1px;\n width: 100%;\n}\n.dv-split-view-container .dv-sash-container {\n height: 100%;\n width: 100%;\n position: absolute;\n}\n.dv-split-view-container .dv-sash-container .dv-sash {\n position: absolute;\n z-index: 99;\n outline: none;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n touch-action: none;\n}\n.dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):active {\n transition: background-color 0.1s ease-in-out;\n background-color: var(--dv-active-sash-color, transparent);\n}\n.dv-split-view-container .dv-sash-container .dv-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.dv-split-view-container .dv-view-container {\n position: relative;\n height: 100%;\n width: 100%;\n}\n.dv-split-view-container .dv-view-container .dv-view {\n height: 100%;\n box-sizing: border-box;\n overflow: auto;\n position: absolute;\n}\n.dv-split-view-container.dv-separator-border .dv-view:not(:first-child)::before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n z-index: 5;\n pointer-events: none;\n background-color: var(--dv-separator-border);\n}\n.dv-dragged {\n transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */\n}\n\n.dv-tab {\n flex-shrink: 0;\n}\n.dv-tab:focus-within, .dv-tab:focus {\n position: relative;\n}\n.dv-tab:focus-within::after, .dv-tab:focus::after {\n position: absolute;\n content: \"\";\n height: 100%;\n width: 100%;\n top: 0px;\n left: 0px;\n pointer-events: none;\n outline: 1px solid var(--dv-tab-divider-color) !important;\n outline-offset: -1px;\n z-index: 5;\n}\n.dv-tab.dv-tab-dragging .dv-default-tab-action {\n background-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-tab.dv-active-tab .dv-default-tab .dv-default-tab-action {\n visibility: visible;\n}\n.dv-tab.dv-inactive-tab .dv-default-tab .dv-default-tab-action {\n visibility: hidden;\n}\n.dv-tab.dv-inactive-tab .dv-default-tab:hover .dv-default-tab-action {\n visibility: visible;\n}\n.dv-tab .dv-default-tab {\n position: relative;\n height: 100%;\n display: flex;\n min-width: 80px;\n align-items: center;\n padding: 0px 8px;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.dv-tab .dv-default-tab .dv-default-tab-content {\n padding: 0px 8px;\n flex-grow: 1;\n}\n.dv-tab .dv-default-tab .dv-default-tab-action {\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n}\n.dv-tab .dv-default-tab .dv-default-tab-action:hover {\n border-radius: 2px;\n background-color: var(--dv-icon-hover-background-color);\n}\n.dv-tabs-and-actions-container {\n display: flex;\n background-color: var(--dv-tabs-and-actions-container-background-color);\n flex-shrink: 0;\n box-sizing: border-box;\n height: var(--dv-tabs-and-actions-container-height);\n font-size: var(--dv-tabs-and-actions-container-font-size);\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container {\n flex-grow: 1;\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container .dv-tab {\n flex-grow: 1;\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-void-container {\n flex-grow: 0;\n}\n.dv-tabs-and-actions-container .dv-void-container {\n display: flex;\n flex-grow: 1;\n cursor: grab;\n}\n.dv-tabs-and-actions-container .dv-tabs-container {\n display: flex;\n overflow-x: overlay;\n overflow-y: hidden;\n scrollbar-width: thin;\n /* Track */\n /* Handle */\n}\n.dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar {\n height: 3px;\n}\n.dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar-track {\n background: transparent;\n}\n.dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar-thumb {\n background: var(--dv-tabs-container-scrollbar-color);\n}\n.dv-tabs-and-actions-container .dv-tabs-container .dv-tab {\n -webkit-user-drag: element;\n outline: none;\n min-width: 75px;\n cursor: pointer;\n position: relative;\n box-sizing: border-box;\n}\n.dv-tabs-and-actions-container .dv-tabs-container .dv-tab:not(:first-child)::before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n z-index: 5;\n pointer-events: none;\n background-color: var(--dv-tab-divider-color);\n width: 1px;\n height: 100%;\n}\n.dv-watermark {\n display: flex;\n height: 100%;\n}";
39
+ var css_248z = ".dv-scrollable {\n position: relative;\n overflow: hidden;\n}\n.dv-scrollable .dv-scrollbar-horizontal {\n position: absolute;\n bottom: 0px;\n left: 0px;\n height: 4px;\n border-radius: 2px;\n background-color: transparent;\n transition-property: background-color;\n transition-timing-function: ease-in-out;\n transition-duration: 1s;\n transition-delay: 0s;\n}\n.dv-scrollable:hover .dv-scrollbar-horizontal, .dv-scrollable.dv-scrollable-resizing .dv-scrollbar-horizontal, .dv-scrollable.dv-scrollable-scrolling .dv-scrollbar-horizontal {\n background-color: var(--dv-scrollbar-background-color, rgba(255, 255, 255, 0.25));\n}\n.dv-svg {\n display: inline-block;\n fill: currentcolor;\n line-height: 1;\n stroke: currentcolor;\n stroke-width: 0;\n}\n.dockview-theme-dark {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-group-view-background-color: #1e1e1e;\n --dv-tabs-and-actions-container-background-color: #252526;\n --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-tab-divider-color: #1e1e1e;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: #969696;\n --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n --dv-separator-border: rgb(68, 68, 68);\n --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n}\n.dockview-theme-dark .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n\n.dockview-theme-light {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-group-view-background-color: white;\n --dv-tabs-and-actions-container-background-color: #f3f3f3;\n --dv-activegroup-visiblepanel-tab-background-color: white;\n --dv-activegroup-hiddenpanel-tab-background-color: #ececec;\n --dv-inactivegroup-visiblepanel-tab-background-color: white;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #ececec;\n --dv-tab-divider-color: white;\n --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n --dv-activegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.7);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(51, 51, 51, 0.7);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.35);\n --dv-separator-border: rgba(128, 128, 128, 0.35);\n --dv-paneview-header-border-color: rgb(51, 51, 51);\n --dv-scrollbar-background-color: rgba(0, 0, 0, 0.25);\n}\n.dockview-theme-light .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n\n.dockview-theme-vs {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-group-view-background-color: #1e1e1e;\n --dv-tabs-and-actions-container-background-color: #252526;\n --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-tab-divider-color: #1e1e1e;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: #969696;\n --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n --dv-separator-border: rgb(68, 68, 68);\n --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n --dv-tabs-and-actions-container-background-color: #2d2d30;\n --dv-tabs-and-actions-container-height: 20px;\n --dv-tabs-and-actions-container-font-size: 11px;\n --dv-activegroup-visiblepanel-tab-background-color: #007acc;\n --dv-inactivegroup-visiblepanel-tab-background-color: #3f3f46;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: white;\n --dv-inactivegroup-visiblepanel-tab-color: white;\n --dv-inactivegroup-hiddenpanel-tab-color: white;\n}\n.dockview-theme-vs .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n.dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container {\n box-sizing: content-box;\n border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tab.dv-active-tab {\n border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tab.dv-inactive-tab {\n border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container {\n box-sizing: content-box;\n border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tab.dv-active-tab {\n border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tab.dv-inactive-tab {\n border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n}\n\n.dockview-theme-abyss {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-color-abyss-dark: #000c18;\n --dv-color-abyss: #10192c;\n --dv-color-abyss-light: #1c1c2a;\n --dv-color-abyss-lighter: #2b2b4a;\n --dv-color-abyss-accent: rgb(91, 30, 207);\n --dv-color-abyss-primary-text: white;\n --dv-color-abyss-secondary-text: rgb(148, 151, 169);\n --dv-group-view-background-color: var(--dv-color-abyss-dark);\n --dv-tabs-and-actions-container-background-color: var(\n --dv-color-abyss-light\n );\n --dv-activegroup-visiblepanel-tab-background-color: var(\n --dv-color-abyss-dark\n );\n --dv-activegroup-hiddenpanel-tab-background-color: var(--dv-color-abyss);\n --dv-inactivegroup-visiblepanel-tab-background-color: var(\n --dv-color-abyss-dark\n );\n --dv-inactivegroup-hiddenpanel-tab-background-color: var(--dv-color-abyss);\n --dv-tab-divider-color: var(--dv-color-abyss-lighter);\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);\n --dv-separator-border: var(--dv-color-abyss-lighter);\n --dv-paneview-header-border-color: var(--dv-color-abyss-lighter);\n --dv-paneview-active-outline-color: #596f99;\n}\n.dockview-theme-abyss .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n\n.dockview-theme-dracula {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-group-view-background-color: #282a36;\n --dv-tabs-and-actions-container-background-color: #191a21;\n --dv-activegroup-visiblepanel-tab-background-color: #282a36;\n --dv-activegroup-hiddenpanel-tab-background-color: #21222c;\n --dv-inactivegroup-visiblepanel-tab-background-color: #282a36;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #21222c;\n --dv-tab-divider-color: #191a21;\n --dv-activegroup-visiblepanel-tab-color: rgb(248, 248, 242);\n --dv-activegroup-hiddenpanel-tab-color: rgb(98, 114, 164);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(98, 114, 164, 0.5);\n --dv-separator-border: #bd93f9;\n --dv-paneview-header-border-color: #bd93f9;\n --dv-paneview-active-outline-color: #6272a4;\n}\n.dockview-theme-dracula .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n.dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab {\n position: relative;\n}\n.dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab::after {\n position: absolute;\n left: 0px;\n top: 0px;\n content: \"\";\n width: 100%;\n height: 1px;\n background-color: #94527e;\n z-index: 999;\n}\n.dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab {\n position: relative;\n}\n.dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab::after {\n position: absolute;\n left: 0px;\n bottom: 0px;\n content: \"\";\n width: 100%;\n height: 1px;\n background-color: #5e3d5a;\n z-index: 999;\n}\n\n.dockview-theme-replit {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n padding: 10px;\n background-color: #ebeced;\n --dv-group-view-background-color: #ebeced;\n --dv-tabs-and-actions-container-background-color: #fcfcfc;\n --dv-activegroup-visiblepanel-tab-background-color: #f0f1f2;\n --dv-activegroup-hiddenpanel-tab-background-color: #fcfcfc;\n --dv-inactivegroup-visiblepanel-tab-background-color: #f0f1f2;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #fcfcfc;\n --dv-tab-divider-color: transparent;\n --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n --dv-activegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n --dv-inactivegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n --dv-inactivegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n --dv-separator-border: transparent;\n --dv-paneview-header-border-color: rgb(51, 51, 51);\n --dv-sash-color: #cfd1d3;\n --dv-active-sash-color: #babbbb;\n}\n.dockview-theme-replit .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n.dockview-theme-replit .dv-resize-container:has(> .dv-groupview) {\n border-radius: 8px;\n}\n.dockview-theme-replit .dv-resize-container {\n border-radius: 10px !important;\n border: none;\n}\n.dockview-theme-replit .dv-groupview {\n overflow: hidden;\n border-radius: 10px;\n}\n.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container {\n border-bottom: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container .dv-tab {\n margin: 4px;\n border-radius: 8px;\n}\n.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container .dv-tab .dv-svg {\n height: 8px;\n width: 8px;\n}\n.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container .dv-tab:hover {\n background-color: #e4e5e6 !important;\n}\n.dockview-theme-replit .dv-groupview .dv-content-container {\n background-color: #fcfcfc;\n}\n.dockview-theme-replit .dv-groupview.dv-active-group {\n border: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .dv-groupview.dv-inactive-group {\n border: 1px solid transparent;\n}\n.dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash {\n background-color: transparent;\n}\n.dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled)::after {\n content: \"\";\n height: 4px;\n width: 40px;\n border-radius: 2px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--dv-sash-color);\n position: absolute;\n}\n.dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):hover, .dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):active {\n background-color: transparent;\n}\n.dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):hover::after, .dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):active::after {\n background-color: var(--dv-active-sash-color);\n}\n.dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash {\n background-color: transparent;\n}\n.dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled)::after {\n content: \"\";\n height: 40px;\n width: 4px;\n border-radius: 2px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--dv-sash-color);\n position: absolute;\n}\n.dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):hover, .dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):active {\n background-color: transparent;\n}\n.dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):hover::after, .dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):active::after {\n background-color: var(--dv-active-sash-color);\n}\n\n.dockview-theme-abyss-spaced {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-tab-font-size: 12px;\n --dv-border-radius: 20px;\n --dv-tab-margin: 0.5rem 0.25rem;\n --dv-tabs-and-actions-container-height: 44px;\n --dv-border-radius: 20px;\n --dv-color-abyss-dark: rgb(11, 6, 17);\n --dv-color-abyss: #16121f;\n --dv-color-abyss-light: #201d2b;\n --dv-color-abyss-lighter: #2a2837;\n --dv-color-abyss-accent: rgb(91, 30, 207);\n --dv-color-abyss-primary-text: white;\n --dv-color-abyss-secondary-text: rgb(148, 151, 169);\n --dv-drag-over-border: 2px solid var(--dv-color-abyss-accent);\n --dv-drag-over-background-color: \"\";\n --dv-group-view-background-color: var(--dv-color-abyss-dark);\n --dv-tabs-and-actions-container-background-color: var(--dv-color-abyss);\n --dv-activegroup-visiblepanel-tab-background-color: var(\n --dv-color-abyss-lighter\n );\n --dv-activegroup-hiddenpanel-tab-background-color: var(\n --dv-color-abyss-light\n );\n --dv-inactivegroup-visiblepanel-tab-background-color: var(\n --dv-color-abyss-lighter\n );\n --dv-inactivegroup-hiddenpanel-tab-background-color: var(\n --dv-color-abyss-light\n );\n --dv-tab-divider-color: transparent;\n --dv-activegroup-visiblepanel-tab-color: var(--dv-color-abyss-primary-text);\n --dv-activegroup-hiddenpanel-tab-color: var(\n --dv-color-abyss-secondary-text\n );\n --dv-inactivegroup-visiblepanel-tab-color: var(\n --dv-color-abyss-primary-text\n );\n --dv-inactivegroup-hiddenpanel-tab-color: var(\n --dv-color-abyss-secondary-text\n );\n --dv-separator-border: transparent;\n --dv-paneview-header-border-color: rgb(51, 51, 51);\n --dv-active-sash-color: var(--dv-color-abyss-accent);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.5);\n padding: 10px;\n background-color: var(--dv-color-abyss-dark);\n}\n.dockview-theme-abyss-spaced .dv-resize-container:has(> .dv-groupview) {\n border-radius: 8px;\n}\n.dockview-theme-abyss-spaced .dv-sash {\n border-radius: 4px;\n}\n.dockview-theme-abyss-spaced .dv-drop-target-anchor {\n border-radius: calc(var(--dv-border-radius) / 4);\n}\n.dockview-theme-abyss-spaced .dv-drop-target-anchor.dv-drop-target-content {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-abyss-spaced .dv-resize-container {\n border-radius: var(--dv-border-radius) !important;\n border: none;\n}\n.dockview-theme-abyss-spaced .dv-tabs-overflow-container,\n.dockview-theme-abyss-spaced .dv-tabs-overflow-dropdown-default {\n border-radius: 8px;\n height: unset !important;\n}\n.dockview-theme-abyss-spaced .dv-tab {\n border-radius: 8px;\n}\n.dockview-theme-abyss-spaced .dv-tab .dv-svg {\n height: 8px;\n width: 8px;\n}\n.dockview-theme-abyss-spaced .dv-groupview {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-abyss-spaced .dv-groupview .dv-tabs-and-actions-container {\n padding: 0px calc(var(--dv-border-radius) / 2);\n}\n.dockview-theme-abyss-spaced .dv-groupview .dv-content-container {\n background-color: var(--dv-tabs-and-actions-container-background-color);\n}\n.dockview-theme-abyss-spaced .dv-resize-container .dv-groupview {\n border: 2px solid var(--dv-color-abyss-dark);\n}\n\n.dockview-theme-light-spaced {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-tab-font-size: 12px;\n --dv-border-radius: 20px;\n --dv-tab-margin: 0.5rem 0.25rem;\n --dv-tabs-and-actions-container-height: 44px;\n --dv-border-radius: 20px;\n --dv-drag-over-border: 2px solid rgb(91, 30, 207);\n --dv-drag-over-background-color: \"\";\n --dv-group-view-background-color: #f6f5f9;\n --dv-tabs-and-actions-container-background-color: white;\n --dv-activegroup-visiblepanel-tab-background-color: #ededf0;\n --dv-activegroup-hiddenpanel-tab-background-color: #f9f9fa;\n --dv-inactivegroup-visiblepanel-tab-background-color: #ededf0;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #f9f9fa;\n --dv-tab-divider-color: transparent;\n --dv-activegroup-visiblepanel-tab-color: rgb(104, 107, 130);\n --dv-activegroup-hiddenpanel-tab-color: rgb(148, 151, 169);\n --dv-inactivegroup-visiblepanel-tab-color: rgb(104, 107, 130);\n --dv-inactivegroup-hiddenpanel-tab-color: rgb(148, 151, 169);\n --dv-separator-border: transparent;\n --dv-paneview-header-border-color: rgb(51, 51, 51);\n --dv-active-sash-color: rgb(91, 30, 207);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.1);\n padding: 10px;\n background-color: #f6f5f9;\n --dv-scrollbar-background-color: rgba(0, 0, 0, 0.25);\n}\n.dockview-theme-light-spaced .dv-resize-container:has(> .dv-groupview) {\n border-radius: 8px;\n}\n.dockview-theme-light-spaced .dv-sash {\n border-radius: 4px;\n}\n.dockview-theme-light-spaced .dv-drop-target-anchor {\n border-radius: calc(var(--dv-border-radius) / 4);\n}\n.dockview-theme-light-spaced .dv-drop-target-anchor.dv-drop-target-content {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-light-spaced .dv-resize-container {\n border-radius: var(--dv-border-radius) !important;\n border: none;\n}\n.dockview-theme-light-spaced .dv-tabs-overflow-container,\n.dockview-theme-light-spaced .dv-tabs-overflow-dropdown-default {\n border-radius: 8px;\n height: unset !important;\n}\n.dockview-theme-light-spaced .dv-tab {\n border-radius: 8px;\n}\n.dockview-theme-light-spaced .dv-tab .dv-svg {\n height: 8px;\n width: 8px;\n}\n.dockview-theme-light-spaced .dv-groupview {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-light-spaced .dv-groupview .dv-tabs-and-actions-container {\n padding: 0px calc(var(--dv-border-radius) / 2);\n}\n.dockview-theme-light-spaced .dv-groupview .dv-content-container {\n background-color: var(--dv-tabs-and-actions-container-background-color);\n}\n.dockview-theme-light-spaced .dv-resize-container .dv-groupview {\n border: 2px solid rgba(255, 255, 255, 0.1);\n}\n.dv-drop-target-container {\n position: absolute;\n z-index: 9999;\n top: 0px;\n left: 0px;\n height: 100%;\n width: 100%;\n pointer-events: none;\n overflow: hidden;\n --dv-transition-duration: 300ms;\n}\n.dv-drop-target-container .dv-drop-target-anchor {\n position: relative;\n border: var(--dv-drag-over-border);\n transition: opacity var(--dv-transition-duration) ease-in, top var(--dv-transition-duration) ease-out, left var(--dv-transition-duration) ease-out, width var(--dv-transition-duration) ease-out, height var(--dv-transition-duration) ease-out;\n background-color: var(--dv-drag-over-background-color);\n opacity: 1;\n}\n.dv-drop-target {\n position: relative;\n --dv-transition-duration: 70ms;\n}\n.dv-drop-target > .dv-drop-target-dropzone {\n position: absolute;\n left: 0px;\n top: 0px;\n height: 100%;\n width: 100%;\n z-index: 1000;\n pointer-events: none;\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection {\n position: relative;\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n border: var(--dv-drag-over-border);\n background-color: var(--dv-drag-over-background-color);\n transition: top var(--dv-transition-duration) ease-out, left var(--dv-transition-duration) ease-out, width var(--dv-transition-duration) ease-out, height var(--dv-transition-duration) ease-out, opacity var(--dv-transition-duration) ease-out;\n will-change: transform;\n pointer-events: none;\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-top.dv-drop-target-small-vertical {\n border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical {\n border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal {\n border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {\n border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-dockview {\n position: relative;\n background-color: var(--dv-group-view-background-color);\n}\n.dv-dockview .dv-watermark-container {\n position: absolute;\n top: 0px;\n left: 0px;\n height: 100%;\n width: 100%;\n z-index: 1;\n}\n.dv-dockview .dv-overlay-render-container {\n position: relative;\n}\n\n.dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab {\n background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-inactive-tab {\n background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab {\n background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);\n color: var(--dv-inactivegroup-visiblepanel-tab-color);\n}\n.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-inactive-tab {\n background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n color: var(--dv-inactivegroup-hiddenpanel-tab-color);\n}\n\n/**\n * when a tab is dragged we lose the above stylings because they are conditional on parent elements\n * therefore we also set some stylings for the dragging event\n **/\n.dv-tab.dv-tab-dragging {\n background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-groupview {\n display: flex;\n flex-direction: column;\n height: 100%;\n background-color: var(--dv-group-view-background-color);\n overflow: hidden;\n}\n.dv-groupview:focus {\n outline: none;\n}\n.dv-groupview > .dv-content-container {\n flex-grow: 1;\n min-height: 0;\n outline: none;\n}\n.dv-root-wrapper {\n height: 100%;\n width: 100%;\n}\n.dv-grid-view,\n.dv-branch-node {\n height: 100%;\n width: 100%;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-top {\n background-color: red;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-bottom {\n background-color: green;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-left {\n background-color: yellow;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-right {\n background-color: blue;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-topleft,\n.dv-debug .dv-resize-container .dv-resize-handle-topright,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomleft,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomright {\n background-color: cyan;\n}\n\n.dv-resize-container {\n --dv-overlay-z-index: var(--dv-overlay-z-index, 999);\n position: absolute;\n z-index: calc(var(--dv-overlay-z-index) - 2);\n border: 1px solid var(--dv-tab-divider-color);\n box-shadow: var(--dv-floating-box-shadow);\n}\n.dv-resize-container.dv-hidden {\n display: none;\n}\n.dv-resize-container.dv-resize-container-dragging {\n opacity: 0.5;\n}\n.dv-resize-container .dv-resize-handle-top {\n height: 4px;\n width: calc(100% - 8px);\n left: 4px;\n top: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-bottom {\n height: 4px;\n width: calc(100% - 8px);\n left: 4px;\n bottom: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-left {\n height: calc(100% - 8px);\n width: 4px;\n left: -2px;\n top: 4px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-right {\n height: calc(100% - 8px);\n width: 4px;\n right: -2px;\n top: 4px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-topleft {\n height: 4px;\n width: 4px;\n top: -2px;\n left: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: nw-resize;\n}\n.dv-resize-container .dv-resize-handle-topright {\n height: 4px;\n width: 4px;\n right: -2px;\n top: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ne-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomleft {\n height: 4px;\n width: 4px;\n left: -2px;\n bottom: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: sw-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomright {\n height: 4px;\n width: 4px;\n right: -2px;\n bottom: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: se-resize;\n}\n.dv-render-overlay {\n --dv-overlay-z-index: var(--dv-overlay-z-index, 999);\n position: absolute;\n z-index: 1;\n height: 100%;\n}\n.dv-render-overlay.dv-render-overlay-float {\n z-index: calc(var(--dv-overlay-z-index) - 1);\n}\n\n.dv-debug .dv-render-overlay {\n outline: 1px solid red;\n outline-offset: -1;\n}\n.dv-pane-container {\n height: 100%;\n width: 100%;\n}\n.dv-pane-container.dv-animated .dv-view {\n transition-duration: 0.15s;\n transition-timing-function: ease-out;\n}\n.dv-pane-container .dv-view {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n padding: 0px !important;\n}\n.dv-pane-container .dv-view:not(:first-child)::before {\n background-color: transparent !important;\n}\n.dv-pane-container .dv-view:not(:first-child) .dv-pane > .dv-pane-header {\n border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.dv-pane-container .dv-view .dv-default-header {\n background-color: var(--dv-group-view-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n display: flex;\n padding: 0px 8px;\n cursor: pointer;\n}\n.dv-pane-container .dv-view .dv-default-header .dv-pane-header-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.dv-pane-container .dv-view .dv-default-header > span {\n padding-left: 8px;\n flex-grow: 1;\n}\n.dv-pane-container:first-of-type > .dv-pane > .dv-pane-header {\n border-top: none !important;\n}\n.dv-pane-container .dv-pane {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n height: 100%;\n}\n.dv-pane-container .dv-pane .dv-pane-header {\n box-sizing: border-box;\n user-select: none;\n position: relative;\n outline: none;\n}\n.dv-pane-container .dv-pane .dv-pane-header.dv-pane-draggable {\n cursor: pointer;\n}\n.dv-pane-container .dv-pane .dv-pane-header:focus:before, .dv-pane-container .dv-pane .dv-pane-header:focus-within:before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n content: \"\";\n pointer-events: none;\n outline: 1px solid;\n outline-width: -1px;\n outline-style: solid;\n outline-offset: -1px;\n outline-color: var(--dv-paneview-active-outline-color);\n}\n.dv-pane-container .dv-pane .dv-pane-body {\n overflow-y: auto;\n overflow-x: hidden;\n flex-grow: 1;\n position: relative;\n outline: none;\n}\n.dv-pane-container .dv-pane .dv-pane-body:focus:before, .dv-pane-container .dv-pane .dv-pane-body:focus-within:before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n content: \"\";\n pointer-events: none;\n outline: 1px solid;\n outline-width: -1px;\n outline-style: solid;\n outline-offset: -1px;\n outline-color: var(--dv-paneview-active-outline-color);\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-enabled {\n background-color: black;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-disabled {\n background-color: orange;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-maximum {\n background-color: green;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-minimum {\n background-color: red;\n}\n\n.dv-split-view-container {\n position: relative;\n overflow: hidden;\n height: 100%;\n width: 100%;\n}\n.dv-split-view-container.dv-splitview-disabled > .dv-sash-container > .dv-sash {\n pointer-events: none;\n}\n.dv-split-view-container.dv-animation .dv-view,\n.dv-split-view-container.dv-animation .dv-sash {\n transition-duration: 0.15s;\n transition-timing-function: ease-out;\n}\n.dv-split-view-container.dv-horizontal {\n height: 100%;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash {\n height: 100%;\n width: 4px;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-enabled {\n cursor: ew-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-disabled {\n cursor: default;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-maximum {\n cursor: w-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-minimum {\n cursor: e-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-view-container > .dv-view:not(:first-child)::before {\n height: 100%;\n width: 1px;\n}\n.dv-split-view-container.dv-vertical {\n width: 100%;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash {\n width: 100%;\n height: 4px;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-enabled {\n cursor: ns-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-disabled {\n cursor: default;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-maximum {\n cursor: n-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-minimum {\n cursor: s-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-view-container > .dv-view {\n width: 100%;\n}\n.dv-split-view-container.dv-vertical > .dv-view-container > .dv-view:not(:first-child)::before {\n height: 1px;\n width: 100%;\n}\n.dv-split-view-container .dv-sash-container {\n height: 100%;\n width: 100%;\n position: absolute;\n}\n.dv-split-view-container .dv-sash-container .dv-sash {\n position: absolute;\n z-index: 99;\n outline: none;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n touch-action: none;\n background-color: var(--dv-sash-color, transparent);\n}\n.dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):active, .dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):hover {\n background-color: var(--dv-active-sash-color, transparent);\n transition-property: background-color;\n transition-timing-function: ease-in-out;\n transition-duration: var(--dv-active-sash-transition-duration, 0.1s);\n transition-delay: var(--dv-active-sash-transition-delay, 0.5s);\n}\n.dv-split-view-container .dv-view-container {\n position: relative;\n height: 100%;\n width: 100%;\n}\n.dv-split-view-container .dv-view-container .dv-view {\n height: 100%;\n box-sizing: border-box;\n overflow: auto;\n position: absolute;\n}\n.dv-split-view-container.dv-separator-border .dv-view:not(:first-child)::before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n z-index: 5;\n pointer-events: none;\n background-color: var(--dv-separator-border);\n}\n.dv-dragged {\n transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */\n}\n\n.dv-tab {\n flex-shrink: 0;\n}\n.dv-tab:focus-within, .dv-tab:focus {\n position: relative;\n}\n.dv-tab:focus-within::after, .dv-tab:focus::after {\n position: absolute;\n content: \"\";\n height: 100%;\n width: 100%;\n top: 0px;\n left: 0px;\n pointer-events: none;\n outline: 1px solid var(--dv-tab-divider-color) !important;\n outline-offset: -1px;\n z-index: 5;\n}\n.dv-tab.dv-tab-dragging .dv-default-tab-action {\n background-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-tab.dv-active-tab .dv-default-tab .dv-default-tab-action {\n visibility: visible;\n}\n.dv-tab.dv-inactive-tab .dv-default-tab .dv-default-tab-action {\n visibility: hidden;\n}\n.dv-tab.dv-inactive-tab .dv-default-tab:hover .dv-default-tab-action {\n visibility: visible;\n}\n.dv-tab .dv-default-tab {\n position: relative;\n height: 100%;\n display: flex;\n align-items: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.dv-tab .dv-default-tab .dv-default-tab-content {\n flex-grow: 1;\n margin-right: 4px;\n}\n.dv-tab .dv-default-tab .dv-default-tab-action {\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n}\n.dv-tab .dv-default-tab .dv-default-tab-action:hover {\n border-radius: 2px;\n background-color: var(--dv-icon-hover-background-color);\n}\n.dv-tabs-overflow-dropdown-default {\n height: 100%;\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n margin: var(--dv-tab-margin);\n display: flex;\n align-items: center;\n flex-shrink: 0;\n padding: 0.25rem 0.5rem;\n cursor: pointer;\n}\n.dv-tabs-overflow-dropdown-default > span {\n padding-left: 0.25rem;\n}\n.dv-tabs-overflow-dropdown-default > svg {\n transform: rotate(90deg);\n}\n.dv-tabs-container {\n display: flex;\n height: 100%;\n overflow: hidden;\n scrollbar-width: thin;\n /* Track */\n /* Handle */\n}\n.dv-tabs-container.dv-horizontal .dv-tabs-container .dv-tab:last-child {\n margin-right: 0;\n}\n.dv-tabs-container.dv-horizontal .dv-tabs-container .dv-tab:not(:nth-last-child(1)) {\n margin-left: 0;\n}\n.dv-tabs-container.dv-horizontal .dv-tabs-container .dv-tab:not(:first-child)::before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n z-index: 5;\n pointer-events: none;\n background-color: var(--dv-tab-divider-color);\n width: 1px;\n height: 100%;\n}\n.dv-tabs-container::-webkit-scrollbar {\n height: 3px;\n}\n.dv-tabs-container::-webkit-scrollbar-track {\n background: transparent;\n}\n.dv-tabs-container::-webkit-scrollbar-thumb {\n background: var(--dv-tabs-container-scrollbar-color);\n}\n\n.dv-tab {\n -webkit-user-drag: element;\n outline: none;\n padding: 0.25rem 0.5rem;\n cursor: pointer;\n position: relative;\n box-sizing: border-box;\n font-size: var(--dv-tab-font-size);\n margin: var(--dv-tab-margin);\n}\n\n.dv-tabs-overflow-container {\n flex-direction: column;\n height: unset;\n border: 1px solid var(--dv-tab-divider-color);\n background-color: var(--dv-group-view-background-color);\n}\n.dv-tabs-overflow-container .dv-tab:not(:last-child) {\n border-bottom: 1px solid var(--dv-tab-divider-color);\n}\n.dv-tabs-overflow-container .dv-active-tab {\n background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-tabs-overflow-container .dv-inactive-tab {\n background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.dv-tabs-and-actions-container {\n display: flex;\n background-color: var(--dv-tabs-and-actions-container-background-color);\n flex-shrink: 0;\n box-sizing: border-box;\n height: var(--dv-tabs-and-actions-container-height);\n font-size: var(--dv-tabs-and-actions-container-font-size);\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container {\n flex-grow: 1;\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container .dv-tab {\n flex-grow: 1;\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-void-container {\n flex-grow: 0;\n}\n.dv-tabs-and-actions-container .dv-void-container {\n display: flex;\n flex-grow: 1;\n cursor: grab;\n}\n.dv-tabs-and-actions-container .dv-right-actions-container {\n display: flex;\n}\n.dv-watermark {\n display: flex;\n height: 100%;\n}";
40
40
  styleInject(css_248z);
41
41
 
42
42
  class TransferObject {
@@ -368,6 +368,20 @@ class MutableDisposable {
368
368
  }
369
369
  }
370
370
 
371
+ class OverflowObserver extends CompositeDisposable {
372
+ constructor(el) {
373
+ super();
374
+ this._onDidChange = new Emitter();
375
+ this.onDidChange = this._onDidChange.event;
376
+ this._value = null;
377
+ this.addDisposables(this._onDidChange, watchElementResize(el, (entry) => {
378
+ const hasScrollX = entry.target.scrollWidth > entry.target.clientWidth;
379
+ const hasScrollY = entry.target.scrollHeight > entry.target.clientHeight;
380
+ this._value = { hasScrollX, hasScrollY };
381
+ this._onDidChange.fire(this._value);
382
+ }));
383
+ }
384
+ }
371
385
  function watchElementResize(element, cb) {
372
386
  const observer = new ResizeObserver((entires) => {
373
387
  /**
@@ -606,6 +620,19 @@ class Classnames {
606
620
  }
607
621
  }
608
622
  }
623
+ function isChildEntirelyVisibleWithinParent(child, parent) {
624
+ //
625
+ const childPosition = getDomNodePagePosition(child);
626
+ const parentPosition = getDomNodePagePosition(parent);
627
+ if (childPosition.left < parentPosition.left) {
628
+ return false;
629
+ }
630
+ if (childPosition.left + childPosition.width >
631
+ parentPosition.left + parentPosition.width) {
632
+ return false;
633
+ }
634
+ return true;
635
+ }
609
636
 
610
637
  function tail(arr) {
611
638
  if (arr.length === 0) {
@@ -613,9 +640,6 @@ function tail(arr) {
613
640
  }
614
641
  return [arr.slice(0, arr.length - 1), arr[arr.length - 1]];
615
642
  }
616
- function last(arr) {
617
- return arr.length > 0 ? arr[arr.length - 1] : undefined;
618
- }
619
643
  function sequenceEquals(arr1, arr2) {
620
644
  if (arr1.length !== arr2.length) {
621
645
  return false;
@@ -881,6 +905,7 @@ class Splitview {
881
905
  }
882
906
  set margin(value) {
883
907
  this._margin = value;
908
+ toggleClass(this.element, 'dv-splitview-has-margin', value !== 0);
884
909
  }
885
910
  constructor(container, options) {
886
911
  var _a, _b;
@@ -3452,9 +3477,6 @@ class DockviewApi {
3452
3477
  get totalPanels() {
3453
3478
  return this.component.totalPanels;
3454
3479
  }
3455
- get gap() {
3456
- return this.component.gap;
3457
- }
3458
3480
  /**
3459
3481
  * Invoked when the active group changes. May be undefined if no group is active.
3460
3482
  */
@@ -3685,9 +3707,6 @@ class DockviewApi {
3685
3707
  addPopoutGroup(item, options) {
3686
3708
  return this.component.addPopoutGroup(item, options);
3687
3709
  }
3688
- setGap(gap) {
3689
- this.component.updateOptions({ gap });
3690
- }
3691
3710
  updateOptions(options) {
3692
3711
  this.component.updateOptions(options);
3693
3712
  }
@@ -3740,14 +3759,16 @@ class DragHandler extends CompositeDisposable {
3740
3759
  * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
3741
3760
  * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
3742
3761
  * dnd logic. You can see the code at
3743
- * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
3762
+ P * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
3744
3763
  */
3745
3764
  event.dataTransfer.setData('text/plain', '');
3746
3765
  }
3747
3766
  }
3748
3767
  }), addDisposableListener(this.el, 'dragend', () => {
3749
3768
  this.pointerEventsDisposable.dispose();
3750
- this.dataDisposable.dispose();
3769
+ setTimeout(() => {
3770
+ this.dataDisposable.dispose(); // allow the data to be read by other handlers before disposing
3771
+ }, 0);
3751
3772
  }));
3752
3773
  }
3753
3774
  }
@@ -3857,6 +3878,12 @@ const DEFAULT_SIZE = {
3857
3878
  const SMALL_WIDTH_BOUNDARY = 100;
3858
3879
  const SMALL_HEIGHT_BOUNDARY = 100;
3859
3880
  class Droptarget extends CompositeDisposable {
3881
+ get disabled() {
3882
+ return this._disabled;
3883
+ }
3884
+ set disabled(value) {
3885
+ this._disabled = value;
3886
+ }
3860
3887
  get state() {
3861
3888
  return this._state;
3862
3889
  }
@@ -3868,23 +3895,34 @@ class Droptarget extends CompositeDisposable {
3868
3895
  this.onDrop = this._onDrop.event;
3869
3896
  this._onWillShowOverlay = new Emitter();
3870
3897
  this.onWillShowOverlay = this._onWillShowOverlay.event;
3898
+ this._disabled = false;
3871
3899
  // use a set to take advantage of #<set>.has
3872
3900
  this._acceptedTargetZonesSet = new Set(this.options.acceptedTargetZones);
3873
3901
  this.dnd = new DragAndDropObserver(this.element, {
3874
- onDragEnter: () => undefined,
3902
+ onDragEnter: () => {
3903
+ var _a, _b, _c;
3904
+ (_c = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.getElements();
3905
+ },
3875
3906
  onDragOver: (e) => {
3907
+ var _a, _b, _c, _d, _e, _f, _g;
3908
+ Droptarget.ACTUAL_TARGET = this;
3909
+ const overrideTraget = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
3876
3910
  if (this._acceptedTargetZonesSet.size === 0) {
3911
+ if (overrideTraget) {
3912
+ return;
3913
+ }
3877
3914
  this.removeDropTarget();
3878
3915
  return;
3879
3916
  }
3880
- const width = this.element.clientWidth;
3881
- const height = this.element.clientHeight;
3917
+ const target = (_e = (_d = (_c = this.options).getOverlayOutline) === null || _d === void 0 ? void 0 : _d.call(_c)) !== null && _e !== void 0 ? _e : this.element;
3918
+ const width = target.offsetWidth;
3919
+ const height = target.offsetHeight;
3882
3920
  if (width === 0 || height === 0) {
3883
3921
  return; // avoid div!0
3884
3922
  }
3885
3923
  const rect = e.currentTarget.getBoundingClientRect();
3886
- const x = e.clientX - rect.left;
3887
- const y = e.clientY - rect.top;
3924
+ const x = ((_f = e.clientX) !== null && _f !== void 0 ? _f : 0) - rect.left;
3925
+ const y = ((_g = e.clientY) !== null && _g !== void 0 ? _g : 0) - rect.top;
3888
3926
  const quadrant = this.calculateQuadrant(this._acceptedTargetZonesSet, x, y, width, height);
3889
3927
  /**
3890
3928
  * If the event has already been used by another DropTarget instance
@@ -3897,6 +3935,9 @@ class Droptarget extends CompositeDisposable {
3897
3935
  return;
3898
3936
  }
3899
3937
  if (!this.options.canDisplayOverlay(e, quadrant)) {
3938
+ if (overrideTraget) {
3939
+ return;
3940
+ }
3900
3941
  this.removeDropTarget();
3901
3942
  return;
3902
3943
  }
@@ -3914,29 +3955,57 @@ class Droptarget extends CompositeDisposable {
3914
3955
  return;
3915
3956
  }
3916
3957
  this.markAsUsed(e);
3917
- if (!this.targetElement) {
3958
+ if (overrideTraget) ;
3959
+ else if (!this.targetElement) {
3918
3960
  this.targetElement = document.createElement('div');
3919
3961
  this.targetElement.className = 'dv-drop-target-dropzone';
3920
3962
  this.overlayElement = document.createElement('div');
3921
3963
  this.overlayElement.className = 'dv-drop-target-selection';
3922
3964
  this._state = 'center';
3923
3965
  this.targetElement.appendChild(this.overlayElement);
3924
- this.element.classList.add('dv-drop-target');
3925
- this.element.append(this.targetElement);
3966
+ target.classList.add('dv-drop-target');
3967
+ target.append(this.targetElement);
3968
+ // this.overlayElement.style.opacity = '0';
3969
+ // requestAnimationFrame(() => {
3970
+ // if (this.overlayElement) {
3971
+ // this.overlayElement.style.opacity = '';
3972
+ // }
3973
+ // });
3926
3974
  }
3927
3975
  this.toggleClasses(quadrant, width, height);
3928
3976
  this._state = quadrant;
3929
3977
  },
3930
3978
  onDragLeave: () => {
3979
+ var _a, _b;
3980
+ const target = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
3981
+ if (target) {
3982
+ return;
3983
+ }
3931
3984
  this.removeDropTarget();
3932
3985
  },
3933
- onDragEnd: () => {
3986
+ onDragEnd: (e) => {
3987
+ var _a, _b;
3988
+ const target = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
3989
+ if (target && Droptarget.ACTUAL_TARGET === this) {
3990
+ if (this._state) {
3991
+ // only stop the propagation of the event if we are dealing with it
3992
+ // which is only when the target has state
3993
+ e.stopPropagation();
3994
+ this._onDrop.fire({
3995
+ position: this._state,
3996
+ nativeEvent: e,
3997
+ });
3998
+ }
3999
+ }
3934
4000
  this.removeDropTarget();
4001
+ target === null || target === void 0 ? void 0 : target.clear();
3935
4002
  },
3936
4003
  onDrop: (e) => {
4004
+ var _a, _b, _c;
3937
4005
  e.preventDefault();
3938
4006
  const state = this._state;
3939
4007
  this.removeDropTarget();
4008
+ (_c = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.clear();
3940
4009
  if (state) {
3941
4010
  // only stop the propagation of the event if we are dealing with it
3942
4011
  // which is only when the target has state
@@ -3971,8 +4040,9 @@ class Droptarget extends CompositeDisposable {
3971
4040
  return typeof value === 'boolean' && value;
3972
4041
  }
3973
4042
  toggleClasses(quadrant, width, height) {
3974
- var _a, _b;
3975
- if (!this.overlayElement) {
4043
+ var _a, _b, _c, _d, _e, _f, _g;
4044
+ const target = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
4045
+ if (!target && !this.overlayElement) {
3976
4046
  return;
3977
4047
  }
3978
4048
  const isSmallX = width < SMALL_WIDTH_BOUNDARY;
@@ -3986,7 +4056,7 @@ class Droptarget extends CompositeDisposable {
3986
4056
  const topClass = !isSmallY && isTop;
3987
4057
  const bottomClass = !isSmallY && isBottom;
3988
4058
  let size = 1;
3989
- const sizeOptions = (_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : DEFAULT_SIZE;
4059
+ const sizeOptions = (_d = (_c = this.options.overlayModel) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : DEFAULT_SIZE;
3990
4060
  if (sizeOptions.type === 'percentage') {
3991
4061
  size = clamp(sizeOptions.value, 0, 100) / 100;
3992
4062
  }
@@ -3998,6 +4068,74 @@ class Droptarget extends CompositeDisposable {
3998
4068
  size = clamp(0, sizeOptions.value, height) / height;
3999
4069
  }
4000
4070
  }
4071
+ if (target) {
4072
+ const outlineEl = (_g = (_f = (_e = this.options).getOverlayOutline) === null || _f === void 0 ? void 0 : _f.call(_e)) !== null && _g !== void 0 ? _g : this.element;
4073
+ const elBox = outlineEl.getBoundingClientRect();
4074
+ const ta = target.getElements(undefined, outlineEl);
4075
+ const el = ta.root;
4076
+ const overlay = ta.overlay;
4077
+ const bigbox = el.getBoundingClientRect();
4078
+ const rootTop = elBox.top - bigbox.top;
4079
+ const rootLeft = elBox.left - bigbox.left;
4080
+ const box = {
4081
+ top: rootTop,
4082
+ left: rootLeft,
4083
+ width: width,
4084
+ height: height,
4085
+ };
4086
+ if (rightClass) {
4087
+ box.left = rootLeft + width * (1 - size);
4088
+ box.width = width * size;
4089
+ }
4090
+ else if (leftClass) {
4091
+ box.width = width * size;
4092
+ }
4093
+ else if (topClass) {
4094
+ box.height = height * size;
4095
+ }
4096
+ else if (bottomClass) {
4097
+ box.top = rootTop + height * (1 - size);
4098
+ box.height = height * size;
4099
+ }
4100
+ if (isSmallX && isLeft) {
4101
+ box.width = 4;
4102
+ }
4103
+ if (isSmallX && isRight) {
4104
+ box.left = rootLeft + width - 4;
4105
+ box.width = 4;
4106
+ }
4107
+ const topPx = `${Math.round(box.top)}px`;
4108
+ const leftPx = `${Math.round(box.left)}px`;
4109
+ const widthPx = `${Math.round(box.width)}px`;
4110
+ const heightPx = `${Math.round(box.height)}px`;
4111
+ if (overlay.style.top === topPx &&
4112
+ overlay.style.left === leftPx &&
4113
+ overlay.style.width === widthPx &&
4114
+ overlay.style.height === heightPx) {
4115
+ return;
4116
+ }
4117
+ overlay.style.top = topPx;
4118
+ overlay.style.left = leftPx;
4119
+ overlay.style.width = widthPx;
4120
+ overlay.style.height = heightPx;
4121
+ overlay.style.visibility = 'visible';
4122
+ overlay.className = `dv-drop-target-anchor${this.options.className ? ` ${this.options.className}` : ''}`;
4123
+ toggleClass(overlay, 'dv-drop-target-left', isLeft);
4124
+ toggleClass(overlay, 'dv-drop-target-right', isRight);
4125
+ toggleClass(overlay, 'dv-drop-target-top', isTop);
4126
+ toggleClass(overlay, 'dv-drop-target-bottom', isBottom);
4127
+ toggleClass(overlay, 'dv-drop-target-center', quadrant === 'center');
4128
+ if (ta.changed) {
4129
+ toggleClass(overlay, 'dv-drop-target-anchor-container-changed', true);
4130
+ setTimeout(() => {
4131
+ toggleClass(overlay, 'dv-drop-target-anchor-container-changed', false);
4132
+ }, 10);
4133
+ }
4134
+ return;
4135
+ }
4136
+ if (!this.overlayElement) {
4137
+ return;
4138
+ }
4001
4139
  const box = { top: '0px', left: '0px', width: '100%', height: '100%' };
4002
4140
  /**
4003
4141
  * You can also achieve the overlay placement using the transform CSS property
@@ -4054,12 +4192,13 @@ class Droptarget extends CompositeDisposable {
4054
4192
  return calculateQuadrantAsPixels(overlayType, x, y, width, height, activationSizeOptions.value);
4055
4193
  }
4056
4194
  removeDropTarget() {
4195
+ var _a;
4057
4196
  if (this.targetElement) {
4058
4197
  this._state = undefined;
4059
- this.element.removeChild(this.targetElement);
4198
+ (_a = this.targetElement.parentElement) === null || _a === void 0 ? void 0 : _a.classList.remove('dv-drop-target');
4199
+ this.targetElement.remove();
4060
4200
  this.targetElement = undefined;
4061
4201
  this.overlayElement = undefined;
4062
- this.element.classList.remove('dv-drop-target');
4063
4202
  }
4064
4203
  }
4065
4204
  }
@@ -4644,7 +4783,15 @@ class ContentContainer extends CompositeDisposable {
4644
4783
  this._element.className = 'dv-content-container';
4645
4784
  this._element.tabIndex = -1;
4646
4785
  this.addDisposables(this._onDidFocus, this._onDidBlur);
4786
+ const target = group.dropTargetContainer;
4647
4787
  this.dropTarget = new Droptarget(this.element, {
4788
+ getOverlayOutline: () => {
4789
+ var _a;
4790
+ return ((_a = accessor.options.theme) === null || _a === void 0 ? void 0 : _a.dndPanelOverlay) === 'group'
4791
+ ? this.element.parentElement
4792
+ : null;
4793
+ },
4794
+ className: 'dv-drop-target-content',
4648
4795
  acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
4649
4796
  canDisplayOverlay: (event, position) => {
4650
4797
  if (this.group.locked === 'no-drop-target' ||
@@ -4658,22 +4805,11 @@ class ContentContainer extends CompositeDisposable {
4658
4805
  return false;
4659
4806
  }
4660
4807
  if (data && data.viewId === this.accessor.id) {
4661
- if (data.groupId === this.group.id) {
4662
- if (position === 'center') {
4663
- // don't allow to drop on self for center position
4664
- return false;
4665
- }
4666
- if (data.panelId === null) {
4667
- // don't allow group move to drop anywhere on self
4668
- return false;
4669
- }
4670
- }
4671
- const groupHasOnePanelAndIsActiveDragElement = this.group.panels.length === 1 &&
4672
- data.groupId === this.group.id;
4673
- return !groupHasOnePanelAndIsActiveDragElement;
4808
+ return true;
4674
4809
  }
4675
4810
  return this.group.canDisplayOverlay(event, position, 'content');
4676
4811
  },
4812
+ getOverrideTarget: target ? () => target.model : undefined,
4677
4813
  });
4678
4814
  this.addDisposables(this.dropTarget);
4679
4815
  }
@@ -4748,6 +4884,18 @@ class ContentContainer extends CompositeDisposable {
4748
4884
  }
4749
4885
  }
4750
4886
 
4887
+ function addGhostImage(dataTransfer, ghostElement, options) {
4888
+ var _a, _b;
4889
+ // class dockview provides to force ghost image to be drawn on a different layer and prevent weird rendering issues
4890
+ addClasses(ghostElement, 'dv-dragged');
4891
+ document.body.appendChild(ghostElement);
4892
+ dataTransfer.setDragImage(ghostElement, (_a = options === null || options === void 0 ? void 0 : options.x) !== null && _a !== void 0 ? _a : 0, (_b = options === null || options === void 0 ? void 0 : options.y) !== null && _b !== void 0 ? _b : 0);
4893
+ setTimeout(() => {
4894
+ removeClasses(ghostElement, 'dv-dragged');
4895
+ ghostElement.remove();
4896
+ }, 0);
4897
+ }
4898
+
4751
4899
  class TabDragHandler extends DragHandler {
4752
4900
  constructor(element, accessor, group, panel) {
4753
4901
  super(element);
@@ -4788,25 +4936,32 @@ class Tab extends CompositeDisposable {
4788
4936
  toggleClass(this.element, 'dv-inactive-tab', true);
4789
4937
  const dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel);
4790
4938
  this.dropTarget = new Droptarget(this._element, {
4791
- acceptedTargetZones: ['center'],
4939
+ acceptedTargetZones: ['left', 'right'],
4940
+ overlayModel: { activationSize: { value: 50, type: 'percentage' } },
4792
4941
  canDisplayOverlay: (event, position) => {
4793
4942
  if (this.group.locked) {
4794
4943
  return false;
4795
4944
  }
4796
4945
  const data = getPanelData();
4797
4946
  if (data && this.accessor.id === data.viewId) {
4798
- if (data.panelId === null &&
4799
- data.groupId === this.group.id) {
4800
- // don't allow group move to drop on self
4801
- return false;
4802
- }
4803
- return this.panel.id !== data.panelId;
4947
+ return true;
4804
4948
  }
4805
4949
  return this.group.model.canDisplayOverlay(event, position, 'tab');
4806
4950
  },
4951
+ getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
4807
4952
  });
4808
4953
  this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
4809
4954
  this.addDisposables(this._onPointDown, this._onDropped, this._onDragStart, dragHandler.onDragStart((event) => {
4955
+ if (event.dataTransfer) {
4956
+ const style = getComputedStyle(this.element);
4957
+ const newNode = this.element.cloneNode(true);
4958
+ Array.from(style).forEach((key) => newNode.style.setProperty(key, style.getPropertyValue(key), style.getPropertyPriority(key)));
4959
+ newNode.style.position = 'absolute';
4960
+ addGhostImage(event.dataTransfer, newNode, {
4961
+ y: -10,
4962
+ x: 30,
4963
+ });
4964
+ }
4810
4965
  this._onDragStart.fire(event);
4811
4966
  }), dragHandler, addDisposableListener(this._element, 'pointerdown', (event) => {
4812
4967
  this._onPointDown.fire(event);
@@ -4830,17 +4985,6 @@ class Tab extends CompositeDisposable {
4830
4985
  }
4831
4986
  }
4832
4987
 
4833
- function addGhostImage(dataTransfer, ghostElement) {
4834
- // class dockview provides to force ghost image to be drawn on a different layer and prevent weird rendering issues
4835
- addClasses(ghostElement, 'dv-dragged');
4836
- document.body.appendChild(ghostElement);
4837
- dataTransfer.setDragImage(ghostElement, 0, 0);
4838
- setTimeout(() => {
4839
- removeClasses(ghostElement, 'dv-dragged');
4840
- ghostElement.remove();
4841
- }, 0);
4842
- }
4843
-
4844
4988
  class GroupDragHandler extends DragHandler {
4845
4989
  constructor(element, accessor, group) {
4846
4990
  super(element);
@@ -4880,8 +5024,10 @@ class GroupDragHandler extends DragHandler {
4880
5024
  ghostElement.style.lineHeight = '20px';
4881
5025
  ghostElement.style.borderRadius = '12px';
4882
5026
  ghostElement.style.position = 'absolute';
5027
+ ghostElement.style.pointerEvents = 'none';
5028
+ ghostElement.style.top = '-9999px';
4883
5029
  ghostElement.textContent = `Multiple Panels (${this.group.size})`;
4884
- addGhostImage(dataTransfer, ghostElement);
5030
+ addGhostImage(dataTransfer, ghostElement, { y: -10, x: 30 });
4885
5031
  }
4886
5032
  return {
4887
5033
  dispose: () => {
@@ -4913,19 +5059,13 @@ class VoidContainer extends CompositeDisposable {
4913
5059
  this.dropTraget = new Droptarget(this._element, {
4914
5060
  acceptedTargetZones: ['center'],
4915
5061
  canDisplayOverlay: (event, position) => {
4916
- var _a;
4917
5062
  const data = getPanelData();
4918
5063
  if (data && this.accessor.id === data.viewId) {
4919
- if (data.panelId === null &&
4920
- data.groupId === this.group.id) {
4921
- // don't allow group move to drop on self
4922
- return false;
4923
- }
4924
- // don't show the overlay if the tab being dragged is the last panel of this group
4925
- return ((_a = last(this.group.panels)) === null || _a === void 0 ? void 0 : _a.id) !== data.panelId;
5064
+ return true;
4926
5065
  }
4927
5066
  return group.model.canDisplayOverlay(event, position, 'header_space');
4928
5067
  },
5068
+ getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
4929
5069
  });
4930
5070
  this.onWillShowOverlay = this.dropTraget.onWillShowOverlay;
4931
5071
  this.addDisposables(handler, handler.onDragStart((event) => {
@@ -4936,88 +5076,338 @@ class VoidContainer extends CompositeDisposable {
4936
5076
  }
4937
5077
  }
4938
5078
 
4939
- class TabsContainer extends CompositeDisposable {
4940
- get panels() {
4941
- return this.tabs.map((_) => _.value.panel.id);
4942
- }
4943
- get size() {
4944
- return this.tabs.length;
4945
- }
4946
- get hidden() {
4947
- return this._hidden;
5079
+ class Scrollbar extends CompositeDisposable {
5080
+ get element() {
5081
+ return this._element;
4948
5082
  }
4949
- set hidden(value) {
4950
- this._hidden = value;
4951
- this.element.style.display = value ? 'none' : '';
5083
+ constructor(scrollableElement) {
5084
+ super();
5085
+ this.scrollableElement = scrollableElement;
5086
+ this._scrollLeft = 0;
5087
+ this._element = document.createElement('div');
5088
+ this._element.className = 'dv-scrollable';
5089
+ this._horizontalScrollbar = document.createElement('div');
5090
+ this._horizontalScrollbar.className = 'dv-scrollbar-horizontal';
5091
+ this.element.appendChild(scrollableElement);
5092
+ this.element.appendChild(this._horizontalScrollbar);
5093
+ this.addDisposables(addDisposableListener(this.element, 'wheel', (event) => {
5094
+ this._scrollLeft += event.deltaY * Scrollbar.MouseWheelSpeed;
5095
+ this.calculateScrollbarStyles();
5096
+ }), addDisposableListener(this._horizontalScrollbar, 'pointerdown', (event) => {
5097
+ event.preventDefault();
5098
+ toggleClass(this.element, 'dv-scrollable-scrolling', true);
5099
+ const originalClientX = event.clientX;
5100
+ const originalScrollLeft = this._scrollLeft;
5101
+ const onPointerMove = (event) => {
5102
+ const deltaX = event.clientX - originalClientX;
5103
+ const { clientWidth } = this.element;
5104
+ const { scrollWidth } = this.scrollableElement;
5105
+ const p = clientWidth / scrollWidth;
5106
+ this._scrollLeft = originalScrollLeft + deltaX / p;
5107
+ this.calculateScrollbarStyles();
5108
+ };
5109
+ const onEnd = () => {
5110
+ toggleClass(this.element, 'dv-scrollable-scrolling', false);
5111
+ document.removeEventListener('pointermove', onPointerMove);
5112
+ document.removeEventListener('pointerup', onEnd);
5113
+ document.removeEventListener('pointercancel', onEnd);
5114
+ };
5115
+ document.addEventListener('pointermove', onPointerMove);
5116
+ document.addEventListener('pointerup', onEnd);
5117
+ document.addEventListener('pointercancel', onEnd);
5118
+ }), addDisposableListener(this.element, 'scroll', () => {
5119
+ this.calculateScrollbarStyles();
5120
+ }), addDisposableListener(this.scrollableElement, 'scroll', () => {
5121
+ this._scrollLeft = this.scrollableElement.scrollLeft;
5122
+ this.calculateScrollbarStyles();
5123
+ }), watchElementResize(this.element, () => {
5124
+ toggleClass(this.element, 'dv-scrollable-resizing', true);
5125
+ if (this._animationTimer) {
5126
+ clearTimeout(this._animationTimer);
5127
+ }
5128
+ this._animationTimer = setTimeout(() => {
5129
+ clearTimeout(this._animationTimer);
5130
+ toggleClass(this.element, 'dv-scrollable-resizing', false);
5131
+ }, 500);
5132
+ this.calculateScrollbarStyles();
5133
+ }));
4952
5134
  }
4953
- show() {
4954
- if (!this.hidden) {
4955
- this.element.style.display = '';
5135
+ calculateScrollbarStyles() {
5136
+ const { clientWidth } = this.element;
5137
+ const { scrollWidth } = this.scrollableElement;
5138
+ const hasScrollbar = scrollWidth > clientWidth;
5139
+ if (hasScrollbar) {
5140
+ const px = clientWidth * (clientWidth / scrollWidth);
5141
+ this._horizontalScrollbar.style.width = `${px}px`;
5142
+ this._scrollLeft = clamp(this._scrollLeft, 0, this.scrollableElement.scrollWidth - clientWidth);
5143
+ this.scrollableElement.scrollLeft = this._scrollLeft;
5144
+ const percentageComplete = this._scrollLeft / (scrollWidth - clientWidth);
5145
+ this._horizontalScrollbar.style.left = `${(clientWidth - px) * percentageComplete}px`;
5146
+ }
5147
+ else {
5148
+ this._horizontalScrollbar.style.width = `0px`;
5149
+ this._horizontalScrollbar.style.left = `0px`;
5150
+ this._scrollLeft = 0;
4956
5151
  }
4957
5152
  }
4958
- hide() {
4959
- this._element.style.display = 'none';
5153
+ }
5154
+ Scrollbar.MouseWheelSpeed = 1;
5155
+
5156
+ class Tabs extends CompositeDisposable {
5157
+ get showTabsOverflowControl() {
5158
+ return this._showTabsOverflowControl;
4960
5159
  }
4961
- setRightActionsElement(element) {
4962
- if (this.rightActions === element) {
5160
+ set showTabsOverflowControl(value) {
5161
+ if (this._showTabsOverflowControl == value) {
4963
5162
  return;
4964
5163
  }
4965
- if (this.rightActions) {
4966
- this.rightActions.remove();
4967
- this.rightActions = undefined;
4968
- }
4969
- if (element) {
4970
- this.rightActionsContainer.appendChild(element);
4971
- this.rightActions = element;
5164
+ this._showTabsOverflowControl = value;
5165
+ if (value) {
5166
+ const observer = new OverflowObserver(this._tabsList);
5167
+ this._observerDisposable.value = new CompositeDisposable(observer, observer.onDidChange((event) => {
5168
+ const hasOverflow = event.hasScrollX || event.hasScrollY;
5169
+ this.toggleDropdown({ reset: !hasOverflow });
5170
+ }), addDisposableListener(this._tabsList, 'scroll', () => {
5171
+ this.toggleDropdown({ reset: false });
5172
+ }));
4972
5173
  }
4973
5174
  }
4974
- setLeftActionsElement(element) {
4975
- if (this.leftActions === element) {
4976
- return;
4977
- }
4978
- if (this.leftActions) {
4979
- this.leftActions.remove();
4980
- this.leftActions = undefined;
4981
- }
4982
- if (element) {
4983
- this.leftActionsContainer.appendChild(element);
4984
- this.leftActions = element;
5175
+ get element() {
5176
+ return this._element;
5177
+ }
5178
+ get panels() {
5179
+ return this._tabs.map((_) => _.value.panel.id);
5180
+ }
5181
+ get size() {
5182
+ return this._tabs.length;
5183
+ }
5184
+ get tabs() {
5185
+ return this._tabs.map((_) => _.value);
5186
+ }
5187
+ constructor(group, accessor, options) {
5188
+ super();
5189
+ this.group = group;
5190
+ this.accessor = accessor;
5191
+ this._observerDisposable = new MutableDisposable();
5192
+ this._tabs = [];
5193
+ this.selectedIndex = -1;
5194
+ this._showTabsOverflowControl = false;
5195
+ this._onTabDragStart = new Emitter();
5196
+ this.onTabDragStart = this._onTabDragStart.event;
5197
+ this._onDrop = new Emitter();
5198
+ this.onDrop = this._onDrop.event;
5199
+ this._onWillShowOverlay = new Emitter();
5200
+ this.onWillShowOverlay = this._onWillShowOverlay.event;
5201
+ this._onOverflowTabsChange = new Emitter();
5202
+ this.onOverflowTabsChange = this._onOverflowTabsChange.event;
5203
+ this._tabsList = document.createElement('div');
5204
+ this._tabsList.className = 'dv-tabs-container dv-horizontal';
5205
+ this.showTabsOverflowControl = options.showTabsOverflowControl;
5206
+ const scrollbar = new Scrollbar(this._tabsList);
5207
+ this._element = scrollbar.element;
5208
+ this.addDisposables(this._onOverflowTabsChange, this._observerDisposable, scrollbar, this._onWillShowOverlay, this._onDrop, this._onTabDragStart, addDisposableListener(this.element, 'pointerdown', (event) => {
5209
+ if (event.defaultPrevented) {
5210
+ return;
5211
+ }
5212
+ const isLeftClick = event.button === 0;
5213
+ if (isLeftClick) {
5214
+ this.accessor.doSetGroupActive(this.group);
5215
+ }
5216
+ }), exports.DockviewDisposable.from(() => {
5217
+ for (const { value, disposable } of this._tabs) {
5218
+ disposable.dispose();
5219
+ value.dispose();
5220
+ }
5221
+ this._tabs = [];
5222
+ }));
5223
+ }
5224
+ indexOf(id) {
5225
+ return this._tabs.findIndex((tab) => tab.value.panel.id === id);
5226
+ }
5227
+ isActive(tab) {
5228
+ return (this.selectedIndex > -1 &&
5229
+ this._tabs[this.selectedIndex].value === tab);
5230
+ }
5231
+ setActivePanel(panel) {
5232
+ let runningWidth = 0;
5233
+ for (const tab of this._tabs) {
5234
+ const isActivePanel = panel.id === tab.value.panel.id;
5235
+ tab.value.setActive(isActivePanel);
5236
+ if (isActivePanel) {
5237
+ const element = tab.value.element;
5238
+ const parentElement = element.parentElement;
5239
+ if (runningWidth < parentElement.scrollLeft ||
5240
+ runningWidth + element.clientWidth >
5241
+ parentElement.scrollLeft + parentElement.clientWidth) {
5242
+ parentElement.scrollLeft = runningWidth;
5243
+ }
5244
+ }
5245
+ runningWidth += tab.value.element.clientWidth;
4985
5246
  }
4986
5247
  }
4987
- setPrefixActionsElement(element) {
4988
- if (this.preActions === element) {
5248
+ openPanel(panel, index = this._tabs.length) {
5249
+ if (this._tabs.find((tab) => tab.value.panel.id === panel.id)) {
4989
5250
  return;
4990
5251
  }
4991
- if (this.preActions) {
4992
- this.preActions.remove();
4993
- this.preActions = undefined;
5252
+ const tab = new Tab(panel, this.accessor, this.group);
5253
+ tab.setContent(panel.view.tab);
5254
+ const disposable = new CompositeDisposable(tab.onDragStart((event) => {
5255
+ this._onTabDragStart.fire({ nativeEvent: event, panel });
5256
+ }), tab.onPointerDown((event) => {
5257
+ if (event.defaultPrevented) {
5258
+ return;
5259
+ }
5260
+ const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
5261
+ const isFloatingWithOnePanel = this.group.api.location.type === 'floating' &&
5262
+ this.size === 1;
5263
+ if (isFloatingGroupsEnabled &&
5264
+ !isFloatingWithOnePanel &&
5265
+ event.shiftKey) {
5266
+ event.preventDefault();
5267
+ const panel = this.accessor.getGroupPanel(tab.panel.id);
5268
+ const { top, left } = tab.element.getBoundingClientRect();
5269
+ const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
5270
+ this.accessor.addFloatingGroup(panel, {
5271
+ x: left - rootLeft,
5272
+ y: top - rootTop,
5273
+ inDragMode: true,
5274
+ });
5275
+ return;
5276
+ }
5277
+ switch (event.button) {
5278
+ case 0: // left click or touch
5279
+ if (this.group.activePanel !== panel) {
5280
+ this.group.model.openPanel(panel);
5281
+ }
5282
+ break;
5283
+ }
5284
+ }), tab.onDrop((event) => {
5285
+ this._onDrop.fire({
5286
+ event: event.nativeEvent,
5287
+ index: this._tabs.findIndex((x) => x.value === tab),
5288
+ });
5289
+ }), tab.onWillShowOverlay((event) => {
5290
+ this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
5291
+ kind: 'tab',
5292
+ panel: this.group.activePanel,
5293
+ api: this.accessor.api,
5294
+ group: this.group,
5295
+ getData: getPanelData,
5296
+ }));
5297
+ }));
5298
+ const value = { value: tab, disposable };
5299
+ this.addTab(value, index);
5300
+ }
5301
+ delete(id) {
5302
+ const index = this.indexOf(id);
5303
+ const tabToRemove = this._tabs.splice(index, 1)[0];
5304
+ const { value, disposable } = tabToRemove;
5305
+ disposable.dispose();
5306
+ value.dispose();
5307
+ value.element.remove();
5308
+ }
5309
+ addTab(tab, index = this._tabs.length) {
5310
+ if (index < 0 || index > this._tabs.length) {
5311
+ throw new Error('invalid location');
4994
5312
  }
4995
- if (element) {
4996
- this.preActionsContainer.appendChild(element);
4997
- this.preActions = element;
5313
+ this._tabsList.insertBefore(tab.value.element, this._tabsList.children[index]);
5314
+ this._tabs = [
5315
+ ...this._tabs.slice(0, index),
5316
+ tab,
5317
+ ...this._tabs.slice(index),
5318
+ ];
5319
+ if (this.selectedIndex < 0) {
5320
+ this.selectedIndex = index;
4998
5321
  }
4999
5322
  }
5000
- get element() {
5001
- return this._element;
5323
+ toggleDropdown(options) {
5324
+ const tabs = options.reset
5325
+ ? []
5326
+ : this._tabs
5327
+ .filter((tab) => !isChildEntirelyVisibleWithinParent(tab.value.element, this._tabsList))
5328
+ .map((x) => x.value.panel.id);
5329
+ this._onOverflowTabsChange.fire({ tabs, reset: options.reset });
5002
5330
  }
5003
- isActive(tab) {
5004
- return (this.selectedIndex > -1 &&
5005
- this.tabs[this.selectedIndex].value === tab);
5331
+ }
5332
+
5333
+ const createSvgElementFromPath = (params) => {
5334
+ const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
5335
+ svg.setAttributeNS(null, 'height', params.height);
5336
+ svg.setAttributeNS(null, 'width', params.width);
5337
+ svg.setAttributeNS(null, 'viewBox', params.viewbox);
5338
+ svg.setAttributeNS(null, 'aria-hidden', 'false');
5339
+ svg.setAttributeNS(null, 'focusable', 'false');
5340
+ svg.classList.add('dv-svg');
5341
+ const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
5342
+ path.setAttributeNS(null, 'd', params.path);
5343
+ svg.appendChild(path);
5344
+ return svg;
5345
+ };
5346
+ const createCloseButton = () => createSvgElementFromPath({
5347
+ width: '11',
5348
+ height: '11',
5349
+ viewbox: '0 0 28 28',
5350
+ path: 'M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z',
5351
+ });
5352
+ const createExpandMoreButton = () => createSvgElementFromPath({
5353
+ width: '11',
5354
+ height: '11',
5355
+ viewbox: '0 0 24 15',
5356
+ path: 'M12 14.15L0 2.15L2.15 0L12 9.9L21.85 0.0499992L24 2.2L12 14.15Z',
5357
+ });
5358
+ const createChevronRightButton = () => createSvgElementFromPath({
5359
+ width: '11',
5360
+ height: '11',
5361
+ viewbox: '0 0 15 25',
5362
+ path: 'M2.15 24.1L0 21.95L9.9 12.05L0 2.15L2.15 0L14.2 12.05L2.15 24.1Z',
5363
+ });
5364
+
5365
+ function createDropdownElementHandle() {
5366
+ const el = document.createElement('div');
5367
+ el.className = 'dv-tabs-overflow-dropdown-default';
5368
+ const text = document.createElement('span');
5369
+ text.textContent = ``;
5370
+ const icon = createChevronRightButton();
5371
+ el.appendChild(icon);
5372
+ el.appendChild(text);
5373
+ return {
5374
+ element: el,
5375
+ update: (params) => {
5376
+ text.textContent = `${params.tabs}`;
5377
+ },
5378
+ };
5379
+ }
5380
+
5381
+ class TabsContainer extends CompositeDisposable {
5382
+ get onTabDragStart() {
5383
+ return this.tabs.onTabDragStart;
5006
5384
  }
5007
- indexOf(id) {
5008
- return this.tabs.findIndex((tab) => tab.value.panel.id === id);
5385
+ get panels() {
5386
+ return this.tabs.panels;
5387
+ }
5388
+ get size() {
5389
+ return this.tabs.size;
5390
+ }
5391
+ get hidden() {
5392
+ return this._hidden;
5393
+ }
5394
+ set hidden(value) {
5395
+ this._hidden = value;
5396
+ this.element.style.display = value ? 'none' : '';
5397
+ }
5398
+ get element() {
5399
+ return this._element;
5009
5400
  }
5010
5401
  constructor(accessor, group) {
5011
5402
  super();
5012
5403
  this.accessor = accessor;
5013
5404
  this.group = group;
5014
- this.tabs = [];
5015
- this.selectedIndex = -1;
5016
5405
  this._hidden = false;
5406
+ this.dropdownPart = null;
5407
+ this._overflowTabs = [];
5408
+ this._dropdownDisposable = new MutableDisposable();
5017
5409
  this._onDrop = new Emitter();
5018
5410
  this.onDrop = this._onDrop.event;
5019
- this._onTabDragStart = new Emitter();
5020
- this.onTabDragStart = this._onTabDragStart.event;
5021
5411
  this._onGroupDragStart = new Emitter();
5022
5412
  this.onGroupDragStart = this._onGroupDragStart.event;
5023
5413
  this._onWillShowOverlay = new Emitter();
@@ -5031,15 +5421,21 @@ class TabsContainer extends CompositeDisposable {
5031
5421
  this.leftActionsContainer.className = 'dv-left-actions-container';
5032
5422
  this.preActionsContainer = document.createElement('div');
5033
5423
  this.preActionsContainer.className = 'dv-pre-actions-container';
5034
- this.tabContainer = document.createElement('div');
5035
- this.tabContainer.className = 'dv-tabs-container';
5424
+ this.tabs = new Tabs(group, accessor, {
5425
+ showTabsOverflowControl: !accessor.options.disableTabsOverflowList,
5426
+ });
5036
5427
  this.voidContainer = new VoidContainer(this.accessor, this.group);
5037
5428
  this._element.appendChild(this.preActionsContainer);
5038
- this._element.appendChild(this.tabContainer);
5429
+ this._element.appendChild(this.tabs.element);
5039
5430
  this._element.appendChild(this.leftActionsContainer);
5040
5431
  this._element.appendChild(this.voidContainer.element);
5041
5432
  this._element.appendChild(this.rightActionsContainer);
5042
- this.addDisposables(this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._onGroupDragStart, this.voidContainer, this.voidContainer.onDragStart((event) => {
5433
+ this.addDisposables(accessor.onDidOptionsChange(() => {
5434
+ this.tabs.showTabsOverflowControl =
5435
+ !accessor.options.disableTabsOverflowList;
5436
+ }), this.tabs.onOverflowTabsChange((event) => {
5437
+ this.toggleDropdown(event);
5438
+ }), this.tabs, this._onWillShowOverlay, this._onDrop, this._onGroupDragStart, this.voidContainer, this.voidContainer.onDragStart((event) => {
5043
5439
  this._onGroupDragStart.fire({
5044
5440
  nativeEvent: event,
5045
5441
  group: this.group,
@@ -5047,7 +5443,7 @@ class TabsContainer extends CompositeDisposable {
5047
5443
  }), this.voidContainer.onDrop((event) => {
5048
5444
  this._onDrop.fire({
5049
5445
  event: event.nativeEvent,
5050
- index: this.tabs.length,
5446
+ index: this.tabs.size,
5051
5447
  });
5052
5448
  }), this.voidContainer.onWillShowOverlay((event) => {
5053
5449
  this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
@@ -5057,133 +5453,149 @@ class TabsContainer extends CompositeDisposable {
5057
5453
  group: this.group,
5058
5454
  getData: getPanelData,
5059
5455
  }));
5060
- }), addDisposableListener(this.voidContainer.element, 'pointerdown', (event) => {
5061
- const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
5062
- if (isFloatingGroupsEnabled &&
5063
- event.shiftKey &&
5064
- this.group.api.location.type !== 'floating') {
5065
- event.preventDefault();
5066
- const { top, left } = this.element.getBoundingClientRect();
5067
- const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
5068
- this.accessor.addFloatingGroup(this.group, {
5069
- x: left - rootLeft + 20,
5070
- y: top - rootTop + 20,
5071
- inDragMode: true,
5072
- });
5073
- }
5074
- }), addDisposableListener(this.tabContainer, 'pointerdown', (event) => {
5075
- if (event.defaultPrevented) {
5076
- return;
5077
- }
5078
- const isLeftClick = event.button === 0;
5079
- if (isLeftClick) {
5080
- this.accessor.doSetGroupActive(this.group);
5081
- }
5082
- }));
5083
- }
5084
- setActive(_isGroupActive) {
5085
- // noop
5086
- }
5087
- delete(id) {
5088
- const index = this.tabs.findIndex((tab) => tab.value.panel.id === id);
5089
- const tabToRemove = this.tabs.splice(index, 1)[0];
5090
- if (!tabToRemove) {
5091
- throw new Error(`dockview: Tab not found`);
5092
- }
5093
- const { value, disposable } = tabToRemove;
5094
- disposable.dispose();
5095
- value.dispose();
5096
- value.element.remove();
5097
- this.updateClassnames();
5098
- }
5099
- setActivePanel(panel) {
5100
- this.tabs.forEach((tab) => {
5101
- const isActivePanel = panel.id === tab.value.panel.id;
5102
- tab.value.setActive(isActivePanel);
5103
- });
5104
- }
5105
- openPanel(panel, index = this.tabs.length) {
5106
- if (this.tabs.find((tab) => tab.value.panel.id === panel.id)) {
5107
- return;
5108
- }
5109
- const tab = new Tab(panel, this.accessor, this.group);
5110
- tab.setContent(panel.view.tab);
5111
- const disposable = new CompositeDisposable(tab.onDragStart((event) => {
5112
- this._onTabDragStart.fire({ nativeEvent: event, panel });
5113
- }), tab.onPointerDown((event) => {
5456
+ }), addDisposableListener(this.voidContainer.element, 'pointerdown', (event) => {
5114
5457
  if (event.defaultPrevented) {
5115
5458
  return;
5116
5459
  }
5117
5460
  const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
5118
- const isFloatingWithOnePanel = this.group.api.location.type === 'floating' &&
5119
- this.size === 1;
5120
5461
  if (isFloatingGroupsEnabled &&
5121
- !isFloatingWithOnePanel &&
5122
- event.shiftKey) {
5462
+ event.shiftKey &&
5463
+ this.group.api.location.type !== 'floating') {
5123
5464
  event.preventDefault();
5124
- const panel = this.accessor.getGroupPanel(tab.panel.id);
5125
- const { top, left } = tab.element.getBoundingClientRect();
5465
+ const { top, left } = this.element.getBoundingClientRect();
5126
5466
  const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
5127
- this.accessor.addFloatingGroup(panel, {
5128
- x: left - rootLeft,
5129
- y: top - rootTop,
5467
+ this.accessor.addFloatingGroup(this.group, {
5468
+ x: left - rootLeft + 20,
5469
+ y: top - rootTop + 20,
5130
5470
  inDragMode: true,
5131
5471
  });
5132
- return;
5133
- }
5134
- switch (event.button) {
5135
- case 0: // left click or touch
5136
- if (this.group.activePanel !== panel) {
5137
- this.group.model.openPanel(panel);
5138
- }
5139
- break;
5140
5472
  }
5141
- }), tab.onDrop((event) => {
5142
- this._onDrop.fire({
5143
- event: event.nativeEvent,
5144
- index: this.tabs.findIndex((x) => x.value === tab),
5145
- });
5146
- }), tab.onWillShowOverlay((event) => {
5147
- this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
5148
- kind: 'tab',
5149
- panel: this.group.activePanel,
5150
- api: this.accessor.api,
5151
- group: this.group,
5152
- getData: getPanelData,
5153
- }));
5154
5473
  }));
5155
- const value = { value: tab, disposable };
5156
- this.addTab(value, index);
5157
5474
  }
5158
- closePanel(panel) {
5159
- this.delete(panel.id);
5475
+ show() {
5476
+ if (!this.hidden) {
5477
+ this.element.style.display = '';
5478
+ }
5160
5479
  }
5161
- dispose() {
5162
- super.dispose();
5163
- for (const { value, disposable } of this.tabs) {
5164
- disposable.dispose();
5165
- value.dispose();
5480
+ hide() {
5481
+ this._element.style.display = 'none';
5482
+ }
5483
+ setRightActionsElement(element) {
5484
+ if (this.rightActions === element) {
5485
+ return;
5486
+ }
5487
+ if (this.rightActions) {
5488
+ this.rightActions.remove();
5489
+ this.rightActions = undefined;
5490
+ }
5491
+ if (element) {
5492
+ this.rightActionsContainer.appendChild(element);
5493
+ this.rightActions = element;
5166
5494
  }
5167
- this.tabs = [];
5168
5495
  }
5169
- addTab(tab, index = this.tabs.length) {
5170
- if (index < 0 || index > this.tabs.length) {
5171
- throw new Error('invalid location');
5496
+ setLeftActionsElement(element) {
5497
+ if (this.leftActions === element) {
5498
+ return;
5172
5499
  }
5173
- this.tabContainer.insertBefore(tab.value.element, this.tabContainer.children[index]);
5174
- this.tabs = [
5175
- ...this.tabs.slice(0, index),
5176
- tab,
5177
- ...this.tabs.slice(index),
5178
- ];
5179
- if (this.selectedIndex < 0) {
5180
- this.selectedIndex = index;
5500
+ if (this.leftActions) {
5501
+ this.leftActions.remove();
5502
+ this.leftActions = undefined;
5503
+ }
5504
+ if (element) {
5505
+ this.leftActionsContainer.appendChild(element);
5506
+ this.leftActions = element;
5507
+ }
5508
+ }
5509
+ setPrefixActionsElement(element) {
5510
+ if (this.preActions === element) {
5511
+ return;
5512
+ }
5513
+ if (this.preActions) {
5514
+ this.preActions.remove();
5515
+ this.preActions = undefined;
5516
+ }
5517
+ if (element) {
5518
+ this.preActionsContainer.appendChild(element);
5519
+ this.preActions = element;
5181
5520
  }
5521
+ }
5522
+ isActive(tab) {
5523
+ return this.tabs.isActive(tab);
5524
+ }
5525
+ indexOf(id) {
5526
+ return this.tabs.indexOf(id);
5527
+ }
5528
+ setActive(_isGroupActive) {
5529
+ // noop
5530
+ }
5531
+ delete(id) {
5532
+ this.tabs.delete(id);
5533
+ this.updateClassnames();
5534
+ }
5535
+ setActivePanel(panel) {
5536
+ this.tabs.setActivePanel(panel);
5537
+ }
5538
+ openPanel(panel, index = this.tabs.size) {
5539
+ this.tabs.openPanel(panel, index);
5182
5540
  this.updateClassnames();
5183
5541
  }
5542
+ closePanel(panel) {
5543
+ this.delete(panel.id);
5544
+ }
5184
5545
  updateClassnames() {
5185
5546
  toggleClass(this._element, 'dv-single-tab', this.size === 1);
5186
5547
  }
5548
+ toggleDropdown(options) {
5549
+ const tabs = options.reset ? [] : options.tabs;
5550
+ this._overflowTabs = tabs;
5551
+ if (this._overflowTabs.length > 0 && this.dropdownPart) {
5552
+ this.dropdownPart.update({ tabs: tabs.length });
5553
+ return;
5554
+ }
5555
+ if (this._overflowTabs.length === 0) {
5556
+ this._dropdownDisposable.dispose();
5557
+ return;
5558
+ }
5559
+ const root = document.createElement('div');
5560
+ root.className = 'dv-tabs-overflow-dropdown-root';
5561
+ const part = createDropdownElementHandle();
5562
+ part.update({ tabs: tabs.length });
5563
+ this.dropdownPart = part;
5564
+ root.appendChild(part.element);
5565
+ this.rightActionsContainer.prepend(root);
5566
+ this._dropdownDisposable.value = new CompositeDisposable(exports.DockviewDisposable.from(() => {
5567
+ var _a, _b;
5568
+ root.remove();
5569
+ (_b = (_a = this.dropdownPart) === null || _a === void 0 ? void 0 : _a.dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
5570
+ this.dropdownPart = null;
5571
+ }), addDisposableListener(root, 'pointerdown', (event) => {
5572
+ event.preventDefault();
5573
+ }, { capture: true }), addDisposableListener(root, 'click', (event) => {
5574
+ const el = document.createElement('div');
5575
+ el.style.overflow = 'auto';
5576
+ el.className = 'dv-tabs-overflow-container';
5577
+ for (const tab of this.tabs.tabs.filter((tab) => this._overflowTabs.includes(tab.panel.id))) {
5578
+ const panelObject = this.group.panels.find((panel) => panel === tab.panel);
5579
+ const tabComponent = panelObject.view.createTabRenderer('headerOverflow');
5580
+ const child = tabComponent.element;
5581
+ const wrapper = document.createElement('div');
5582
+ toggleClass(wrapper, 'dv-tab', true);
5583
+ toggleClass(wrapper, 'dv-active-tab', panelObject.api.isActive);
5584
+ toggleClass(wrapper, 'dv-inactive-tab', !panelObject.api.isActive);
5585
+ wrapper.addEventListener('mousedown', () => {
5586
+ this.accessor.popupService.close();
5587
+ tab.element.scrollIntoView();
5588
+ tab.panel.api.setActive();
5589
+ });
5590
+ wrapper.appendChild(child);
5591
+ el.appendChild(wrapper);
5592
+ }
5593
+ this.accessor.popupService.openPopover(el, {
5594
+ x: event.clientX,
5595
+ y: event.clientY,
5596
+ });
5597
+ }));
5598
+ }
5187
5599
  }
5188
5600
 
5189
5601
  class DockviewUnhandledDragOverEvent extends AcceptableEvent {
@@ -5213,9 +5625,11 @@ const PROPERTY_KEYS_DOCKVIEW = (() => {
5213
5625
  rootOverlayModel: undefined,
5214
5626
  locked: undefined,
5215
5627
  disableDnd: undefined,
5216
- gap: undefined,
5217
5628
  className: undefined,
5218
5629
  noPanelsOverlay: undefined,
5630
+ dndEdges: undefined,
5631
+ theme: undefined,
5632
+ disableTabsOverflowList: undefined,
5219
5633
  };
5220
5634
  return Object.keys(properties);
5221
5635
  })();
@@ -5394,6 +5808,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
5394
5808
  this._location = { type: 'grid' };
5395
5809
  this.mostRecentlyUsed = [];
5396
5810
  this._overwriteRenderContainer = null;
5811
+ this._overwriteDropTargetContainer = null;
5397
5812
  this._onDidChange = new Emitter();
5398
5813
  this.onDidChange = this._onDidChange.event;
5399
5814
  this._width = 0;
@@ -5471,6 +5886,13 @@ class DockviewGroupPanelModel extends CompositeDisposable {
5471
5886
  var _a;
5472
5887
  return ((_a = this._overwriteRenderContainer) !== null && _a !== void 0 ? _a : this.accessor.overlayRenderContainer);
5473
5888
  }
5889
+ set dropTargetContainer(value) {
5890
+ this._overwriteDropTargetContainer = value;
5891
+ }
5892
+ get dropTargetContainer() {
5893
+ var _a;
5894
+ return ((_a = this._overwriteDropTargetContainer) !== null && _a !== void 0 ? _a : this.accessor.rootDropTargetContainer);
5895
+ }
5474
5896
  initialize() {
5475
5897
  if (this.options.panels) {
5476
5898
  this.options.panels.forEach((panel) => {
@@ -5819,6 +6241,25 @@ class DockviewGroupPanelModel extends CompositeDisposable {
5819
6241
  }
5820
6242
  const data = getPanelData();
5821
6243
  if (data && data.viewId === this.accessor.id) {
6244
+ if (type === 'content') {
6245
+ if (data.groupId === this.id) {
6246
+ // don't allow to drop on self for center position
6247
+ if (position === 'center') {
6248
+ return;
6249
+ }
6250
+ if (data.panelId === null) {
6251
+ // don't allow group move to drop anywhere on self
6252
+ return;
6253
+ }
6254
+ }
6255
+ }
6256
+ if (type === 'header') {
6257
+ if (data.groupId === this.id) {
6258
+ if (data.panelId === null) {
6259
+ return;
6260
+ }
6261
+ }
6262
+ }
5822
6263
  if (data.panelId === null) {
5823
6264
  // this is a group move dnd event
5824
6265
  const { groupId } = data;
@@ -6247,6 +6688,46 @@ class DockviewGroupPanel extends GridviewPanel {
6247
6688
  }
6248
6689
  }
6249
6690
 
6691
+ const themeDark = {
6692
+ name: 'dark',
6693
+ className: 'dockview-theme-dark',
6694
+ };
6695
+ const themeLight = {
6696
+ name: 'light',
6697
+ className: 'dockview-theme-light',
6698
+ };
6699
+ const themeVisualStudio = {
6700
+ name: 'visualStudio',
6701
+ className: 'dockview-theme-vs',
6702
+ };
6703
+ const themeAbyss = {
6704
+ name: 'abyss',
6705
+ className: 'dockview-theme-abyss',
6706
+ };
6707
+ const themeDracula = {
6708
+ name: 'dracula',
6709
+ className: 'dockview-theme-dracula',
6710
+ };
6711
+ const themeReplit = {
6712
+ name: 'replit',
6713
+ className: 'dockview-theme-replit',
6714
+ gap: 10,
6715
+ };
6716
+ const themeAbyssSpaced = {
6717
+ name: 'abyssSpaced',
6718
+ className: 'dockview-theme-abyss-spaced',
6719
+ gap: 10,
6720
+ dndOverlayMounting: 'absolute',
6721
+ dndPanelOverlay: 'group',
6722
+ };
6723
+ const themeLightSpaced = {
6724
+ name: 'lightSpaced',
6725
+ className: 'dockview-theme-light-spaced',
6726
+ gap: 10,
6727
+ dndOverlayMounting: 'absolute',
6728
+ dndPanelOverlay: 'group',
6729
+ };
6730
+
6250
6731
  class DockviewPanelApiImpl extends GridviewPanelApiImpl {
6251
6732
  get location() {
6252
6733
  return this.group.api.location;
@@ -6521,38 +7002,6 @@ class DockviewPanel extends CompositeDisposable {
6521
7002
  }
6522
7003
  }
6523
7004
 
6524
- const createSvgElementFromPath = (params) => {
6525
- const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
6526
- svg.setAttributeNS(null, 'height', params.height);
6527
- svg.setAttributeNS(null, 'width', params.width);
6528
- svg.setAttributeNS(null, 'viewBox', params.viewbox);
6529
- svg.setAttributeNS(null, 'aria-hidden', 'false');
6530
- svg.setAttributeNS(null, 'focusable', 'false');
6531
- svg.classList.add('dv-svg');
6532
- const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
6533
- path.setAttributeNS(null, 'd', params.path);
6534
- svg.appendChild(path);
6535
- return svg;
6536
- };
6537
- const createCloseButton = () => createSvgElementFromPath({
6538
- width: '11',
6539
- height: '11',
6540
- viewbox: '0 0 28 28',
6541
- path: 'M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z',
6542
- });
6543
- const createExpandMoreButton = () => createSvgElementFromPath({
6544
- width: '11',
6545
- height: '11',
6546
- viewbox: '0 0 24 15',
6547
- path: 'M12 14.15L0 2.15L2.15 0L12 9.9L21.85 0.0499992L24 2.2L12 14.15Z',
6548
- });
6549
- const createChevronRightButton = () => createSvgElementFromPath({
6550
- width: '11',
6551
- height: '11',
6552
- viewbox: '0 0 15 25',
6553
- path: 'M2.15 24.1L0 21.95L9.9 12.05L0 2.15L2.15 0L14.2 12.05L2.15 24.1Z',
6554
- });
6555
-
6556
7005
  class DefaultTab extends CompositeDisposable {
6557
7006
  get element() {
6558
7007
  return this._element;
@@ -6609,12 +7058,21 @@ class DockviewPanelModel {
6609
7058
  this._content = this.createContentComponent(this.id, contentComponent);
6610
7059
  this._tab = this.createTabComponent(this.id, tabComponent);
6611
7060
  }
7061
+ createTabRenderer(tabLocation) {
7062
+ var _a;
7063
+ const cmp = this.createTabComponent(this.id, this.tabComponent);
7064
+ if (this._params) {
7065
+ cmp.init(Object.assign(Object.assign({}, this._params), { tabLocation }));
7066
+ }
7067
+ if (this._updateEvent) {
7068
+ (_a = cmp.update) === null || _a === void 0 ? void 0 : _a.call(cmp, this._updateEvent);
7069
+ }
7070
+ return cmp;
7071
+ }
6612
7072
  init(params) {
7073
+ this._params = params;
6613
7074
  this.content.init(params);
6614
- this.tab.init(params);
6615
- }
6616
- updateParentGroup(_group, _isPanelVisible) {
6617
- // noop
7075
+ this.tab.init(Object.assign(Object.assign({}, params), { tabLocation: 'header' }));
6618
7076
  }
6619
7077
  layout(width, height) {
6620
7078
  var _a, _b;
@@ -6622,6 +7080,7 @@ class DockviewPanelModel {
6622
7080
  }
6623
7081
  update(event) {
6624
7082
  var _a, _b, _c, _d;
7083
+ this._updateEvent = event;
6625
7084
  (_b = (_a = this.content).update) === null || _b === void 0 ? void 0 : _b.call(_a, event);
6626
7085
  (_d = (_c = this.tab).update) === null || _d === void 0 ? void 0 : _d.call(_c, event);
6627
7086
  }
@@ -7459,6 +7918,132 @@ class StrictEventsSequencing extends CompositeDisposable {
7459
7918
  }
7460
7919
  }
7461
7920
 
7921
+ class PopupService extends CompositeDisposable {
7922
+ constructor(root) {
7923
+ super();
7924
+ this.root = root;
7925
+ this._active = null;
7926
+ this._activeDisposable = new MutableDisposable();
7927
+ this._element = document.createElement('div');
7928
+ this._element.className = 'dv-popover-anchor';
7929
+ this._element.style.position = 'relative';
7930
+ this.root.prepend(this._element);
7931
+ this.addDisposables(exports.DockviewDisposable.from(() => {
7932
+ this.close();
7933
+ }), this._activeDisposable);
7934
+ }
7935
+ openPopover(element, position) {
7936
+ this.close();
7937
+ const wrapper = document.createElement('div');
7938
+ wrapper.style.position = 'absolute';
7939
+ wrapper.style.zIndex = '99';
7940
+ wrapper.appendChild(element);
7941
+ const anchorBox = this._element.getBoundingClientRect();
7942
+ const offsetX = anchorBox.left;
7943
+ const offsetY = anchorBox.top;
7944
+ wrapper.style.top = `${position.y - offsetY}px`;
7945
+ wrapper.style.left = `${position.x - offsetX}px`;
7946
+ this._element.appendChild(wrapper);
7947
+ this._active = wrapper;
7948
+ this._activeDisposable.value = new CompositeDisposable(addDisposableWindowListener(window, 'pointerdown', (event) => {
7949
+ var _a;
7950
+ const target = event.target;
7951
+ if (!(target instanceof HTMLElement)) {
7952
+ return;
7953
+ }
7954
+ let el = target;
7955
+ while (el && el !== wrapper) {
7956
+ el = (_a = el === null || el === void 0 ? void 0 : el.parentElement) !== null && _a !== void 0 ? _a : null;
7957
+ }
7958
+ if (el) {
7959
+ return; // clicked within popover
7960
+ }
7961
+ this.close();
7962
+ }));
7963
+ }
7964
+ close() {
7965
+ if (this._active) {
7966
+ this._active.remove();
7967
+ this._activeDisposable.dispose();
7968
+ this._active = null;
7969
+ }
7970
+ }
7971
+ }
7972
+
7973
+ class DropTargetAnchorContainer extends CompositeDisposable {
7974
+ get disabled() {
7975
+ return this._disabled;
7976
+ }
7977
+ set disabled(value) {
7978
+ var _a;
7979
+ if (this.disabled === value) {
7980
+ return;
7981
+ }
7982
+ this._disabled = value;
7983
+ if (value) {
7984
+ (_a = this.model) === null || _a === void 0 ? void 0 : _a.clear();
7985
+ }
7986
+ }
7987
+ get model() {
7988
+ if (this.disabled) {
7989
+ return undefined;
7990
+ }
7991
+ return {
7992
+ clear: () => {
7993
+ var _a;
7994
+ if (this._model) {
7995
+ (_a = this._model.root.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this._model.root);
7996
+ }
7997
+ this._model = undefined;
7998
+ },
7999
+ exists: () => {
8000
+ return !!this._model;
8001
+ },
8002
+ getElements: (event, outline) => {
8003
+ const changed = this._outline !== outline;
8004
+ this._outline = outline;
8005
+ if (this._model) {
8006
+ this._model.changed = changed;
8007
+ return this._model;
8008
+ }
8009
+ const container = this.createContainer();
8010
+ const anchor = this.createAnchor();
8011
+ this._model = { root: container, overlay: anchor, changed };
8012
+ container.appendChild(anchor);
8013
+ this.element.appendChild(container);
8014
+ if ((event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement) {
8015
+ const targetBox = event.target.getBoundingClientRect();
8016
+ const box = this.element.getBoundingClientRect();
8017
+ anchor.style.left = `${targetBox.left - box.left}px`;
8018
+ anchor.style.top = `${targetBox.top - box.top}px`;
8019
+ }
8020
+ return this._model;
8021
+ },
8022
+ };
8023
+ }
8024
+ constructor(element, options) {
8025
+ super();
8026
+ this.element = element;
8027
+ this._disabled = false;
8028
+ this._disabled = options.disabled;
8029
+ this.addDisposables(exports.DockviewDisposable.from(() => {
8030
+ var _a;
8031
+ (_a = this.model) === null || _a === void 0 ? void 0 : _a.clear();
8032
+ }));
8033
+ }
8034
+ createContainer() {
8035
+ const el = document.createElement('div');
8036
+ el.className = 'dv-drop-target-container';
8037
+ return el;
8038
+ }
8039
+ createAnchor() {
8040
+ const el = document.createElement('div');
8041
+ el.className = 'dv-drop-target-anchor';
8042
+ el.style.visibility = 'hidden';
8043
+ return el;
8044
+ }
8045
+ }
8046
+
7462
8047
  const DEFAULT_ROOT_OVERLAY_MODEL = {
7463
8048
  activationSize: { type: 'pixels', value: 10 },
7464
8049
  size: { type: 'pixels', value: 20 },
@@ -7504,14 +8089,11 @@ class DockviewComponent extends BaseGrid {
7504
8089
  get api() {
7505
8090
  return this._api;
7506
8091
  }
7507
- get gap() {
7508
- return this.gridview.margin;
7509
- }
7510
8092
  get floatingGroups() {
7511
8093
  return this._floatingGroups;
7512
8094
  }
7513
8095
  constructor(container, options) {
7514
- var _a;
8096
+ var _a, _b, _c;
7515
8097
  super(container, {
7516
8098
  proportionalLayout: true,
7517
8099
  orientation: exports.Orientation.HORIZONTAL,
@@ -7520,12 +8102,12 @@ class DockviewComponent extends BaseGrid {
7520
8102
  : undefined,
7521
8103
  disableAutoResizing: options.disableAutoResizing,
7522
8104
  locked: options.locked,
7523
- margin: options.gap,
8105
+ margin: (_b = (_a = options.theme) === null || _a === void 0 ? void 0 : _a.gap) !== null && _b !== void 0 ? _b : 0,
7524
8106
  className: options.className,
7525
8107
  });
7526
8108
  this.nextGroupId = sequentialNumberGenerator();
7527
8109
  this._deserializer = new DefaultDockviewDeserialzier(this);
7528
- this.watermark = null;
8110
+ this._watermark = null;
7529
8111
  this._onWillDragPanel = new Emitter();
7530
8112
  this.onWillDragPanel = this._onWillDragPanel.event;
7531
8113
  this._onWillDragGroup = new Emitter();
@@ -7556,16 +8138,22 @@ class DockviewComponent extends BaseGrid {
7556
8138
  this.onDidRemoveGroup = this._onDidRemoveGroup.event;
7557
8139
  this._onDidAddGroup = new Emitter();
7558
8140
  this.onDidAddGroup = this._onDidAddGroup.event;
8141
+ this._onDidOptionsChange = new Emitter();
8142
+ this.onDidOptionsChange = this._onDidOptionsChange.event;
7559
8143
  this._onDidActiveGroupChange = new Emitter();
7560
8144
  this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
7561
8145
  this._moving = false;
8146
+ this.popupService = new PopupService(this.element);
8147
+ this.updateDropTargetModel(options);
8148
+ this._themeClassnames = new Classnames(this.element);
8149
+ this.rootDropTargetContainer = new DropTargetAnchorContainer(this.element, { disabled: true });
7562
8150
  this.overlayRenderContainer = new OverlayRenderContainer(this.gridview.element, this);
7563
8151
  toggleClass(this.gridview.element, 'dv-dockview', true);
7564
8152
  toggleClass(this.element, 'dv-debug', !!options.debug);
7565
8153
  if (options.debug) {
7566
8154
  this.addDisposables(new StrictEventsSequencing(this));
7567
8155
  }
7568
- this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this._onDidMaximizedGroupChange, this.onDidViewVisibilityChangeMicroTaskQueue(() => {
8156
+ this.addDisposables(this.rootDropTargetContainer, this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this._onDidMaximizedGroupChange, this._onDidOptionsChange, this.onDidViewVisibilityChangeMicroTaskQueue(() => {
7569
8157
  this.updateWatermark();
7570
8158
  }), this.onDidAdd((event) => {
7571
8159
  if (!this._moving) {
@@ -7599,7 +8187,9 @@ class DockviewComponent extends BaseGrid {
7599
8187
  }
7600
8188
  }));
7601
8189
  this._options = options;
8190
+ this.updateTheme();
7602
8191
  this._rootDropTarget = new Droptarget(this.element, {
8192
+ className: 'dv-drop-target-edge',
7603
8193
  canDisplayOverlay: (event, position) => {
7604
8194
  const data = getPanelData();
7605
8195
  if (data) {
@@ -7626,7 +8216,8 @@ class DockviewComponent extends BaseGrid {
7626
8216
  return firedEvent.isAccepted;
7627
8217
  },
7628
8218
  acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
7629
- overlayModel: (_a = this.options.rootOverlayModel) !== null && _a !== void 0 ? _a : DEFAULT_ROOT_OVERLAY_MODEL,
8219
+ overlayModel: (_c = this.options.rootOverlayModel) !== null && _c !== void 0 ? _c : DEFAULT_ROOT_OVERLAY_MODEL,
8220
+ getOverrideTarget: () => { var _a; return (_a = this.rootDropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
7630
8221
  });
7631
8222
  this.addDisposables(this._rootDropTarget, this._rootDropTarget.onWillShowOverlay((event) => {
7632
8223
  if (this.gridview.length > 0 && event.position === 'center') {
@@ -7804,6 +8395,10 @@ class DockviewComponent extends BaseGrid {
7804
8395
  popoutContainer.style.overflow = 'hidden';
7805
8396
  popoutContainer.appendChild(gready);
7806
8397
  popoutContainer.appendChild(group.element);
8398
+ const anchor = document.createElement('div');
8399
+ const dropTargetContainer = new DropTargetAnchorContainer(anchor, { disabled: this.rootDropTargetContainer.disabled });
8400
+ popoutContainer.appendChild(anchor);
8401
+ group.model.dropTargetContainer = dropTargetContainer;
7807
8402
  group.model.location = {
7808
8403
  type: 'popout',
7809
8404
  getWindow: () => _window.window,
@@ -7870,6 +8465,8 @@ class DockviewComponent extends BaseGrid {
7870
8465
  else if (this.getPanel(group.id)) {
7871
8466
  group.model.renderContainer =
7872
8467
  this.overlayRenderContainer;
8468
+ group.model.dropTargetContainer =
8469
+ this.rootDropTargetContainer;
7873
8470
  returnedGroup = group;
7874
8471
  const alreadyRemoved = !this._popoutGroups.find((p) => p.popoutGroup === group);
7875
8472
  if (alreadyRemoved) {
@@ -8090,7 +8687,7 @@ class DockviewComponent extends BaseGrid {
8090
8687
  }
8091
8688
  }
8092
8689
  updateOptions(options) {
8093
- var _a, _b, _c, _d;
8690
+ var _a, _b;
8094
8691
  super.updateOptions(options);
8095
8692
  if ('floatingGroupBounds' in options) {
8096
8693
  for (const group of this._floatingGroups) {
@@ -8114,13 +8711,11 @@ class DockviewComponent extends BaseGrid {
8114
8711
  group.overlay.setBounds();
8115
8712
  }
8116
8713
  }
8117
- if ('rootOverlayModel' in options) {
8118
- this._rootDropTarget.setOverlayModel((_c = options.rootOverlayModel) !== null && _c !== void 0 ? _c : DEFAULT_ROOT_OVERLAY_MODEL);
8119
- }
8120
- if ('gap' in options) {
8121
- this.gridview.margin = (_d = options.gap) !== null && _d !== void 0 ? _d : 0;
8122
- }
8714
+ this.updateDropTargetModel(options);
8123
8715
  this._options = Object.assign(Object.assign({}, this.options), options);
8716
+ if ('theme' in options) {
8717
+ this.updateTheme();
8718
+ }
8124
8719
  this.layout(this.gridview.width, this.gridview.height, true);
8125
8720
  }
8126
8721
  layout(width, height, forceResize) {
@@ -8538,22 +9133,22 @@ class DockviewComponent extends BaseGrid {
8538
9133
  updateWatermark() {
8539
9134
  var _a, _b;
8540
9135
  if (this.groups.filter((x) => x.api.location.type === 'grid' && x.api.isVisible).length === 0) {
8541
- if (!this.watermark) {
8542
- this.watermark = this.createWatermarkComponent();
8543
- this.watermark.init({
9136
+ if (!this._watermark) {
9137
+ this._watermark = this.createWatermarkComponent();
9138
+ this._watermark.init({
8544
9139
  containerApi: new DockviewApi(this),
8545
9140
  });
8546
9141
  const watermarkContainer = document.createElement('div');
8547
9142
  watermarkContainer.className = 'dv-watermark-container';
8548
9143
  addTestId(watermarkContainer, 'watermark-component');
8549
- watermarkContainer.appendChild(this.watermark.element);
9144
+ watermarkContainer.appendChild(this._watermark.element);
8550
9145
  this.gridview.element.appendChild(watermarkContainer);
8551
9146
  }
8552
9147
  }
8553
- else if (this.watermark) {
8554
- this.watermark.element.parentElement.remove();
8555
- (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
8556
- this.watermark = null;
9148
+ else if (this._watermark) {
9149
+ this._watermark.element.parentElement.remove();
9150
+ (_b = (_a = this._watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
9151
+ this._watermark = null;
8557
9152
  }
8558
9153
  }
8559
9154
  addGroup(options) {
@@ -9039,6 +9634,38 @@ class DockviewComponent extends BaseGrid {
9039
9634
  ? rootOrientation
9040
9635
  : orthogonal(rootOrientation);
9041
9636
  }
9637
+ updateDropTargetModel(options) {
9638
+ if ('dndEdges' in options) {
9639
+ this._rootDropTarget.disabled =
9640
+ typeof options.dndEdges === 'boolean' &&
9641
+ options.dndEdges === false;
9642
+ if (typeof options.dndEdges === 'object' &&
9643
+ options.dndEdges !== null) {
9644
+ this._rootDropTarget.setOverlayModel(options.dndEdges);
9645
+ }
9646
+ else {
9647
+ this._rootDropTarget.setOverlayModel(DEFAULT_ROOT_OVERLAY_MODEL);
9648
+ }
9649
+ }
9650
+ if ('rootOverlayModel' in options) {
9651
+ this.updateDropTargetModel({ dndEdges: options.dndEdges });
9652
+ }
9653
+ }
9654
+ updateTheme() {
9655
+ var _a, _b;
9656
+ const theme = (_a = this._options.theme) !== null && _a !== void 0 ? _a : themeAbyss;
9657
+ this._themeClassnames.setClassNames(theme.className);
9658
+ this.gridview.margin = (_b = theme.gap) !== null && _b !== void 0 ? _b : 0;
9659
+ switch (theme.dndOverlayMounting) {
9660
+ case 'absolute':
9661
+ this.rootDropTargetContainer.disabled = false;
9662
+ break;
9663
+ case 'relative':
9664
+ default:
9665
+ this.rootDropTargetContainer.disabled = true;
9666
+ break;
9667
+ }
9668
+ }
9042
9669
  }
9043
9670
 
9044
9671
  class GridviewComponent extends BaseGrid {
@@ -9562,6 +10189,7 @@ class SplitviewComponent extends Resizable {
9562
10189
  for (const view of views) {
9563
10190
  view.dispose();
9564
10191
  }
10192
+ this.element.remove();
9565
10193
  super.dispose();
9566
10194
  }
9567
10195
  }
@@ -9902,6 +10530,7 @@ class PaneviewComponent extends Resizable {
9902
10530
  value.dispose();
9903
10531
  }
9904
10532
  this._viewDisposables.clear();
10533
+ this.element.remove();
9905
10534
  this.paneview.dispose();
9906
10535
  }
9907
10536
  }
@@ -10219,6 +10848,7 @@ class ReactPanelHeaderPart {
10219
10848
  params: parameters.params,
10220
10849
  api: parameters.api,
10221
10850
  containerApi: parameters.containerApi,
10851
+ tabLocation: parameters.tabLocation,
10222
10852
  });
10223
10853
  }
10224
10854
  update(event) {
@@ -10524,7 +11154,7 @@ const DockviewReact = React.forwardRef((props, ref) => {
10524
11154
  });
10525
11155
  DockviewReact.displayName = 'DockviewComponent';
10526
11156
 
10527
- const CloseButton = () => (React.createElement("svg", { height: "11", width: "11", viewBox: "0 0 28 28", "aria-hidden": 'false', focusable: false, className: "dockview-svg" },
11157
+ const CloseButton = () => (React.createElement("svg", { height: "11", width: "11", viewBox: "0 0 28 28", "aria-hidden": 'false', focusable: false, className: "dv-svg" },
10528
11158
  React.createElement("path", { d: "M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z" })));
10529
11159
 
10530
11160
  var __rest = (undefined && undefined.__rest) || function (s, e) {
@@ -10551,7 +11181,7 @@ function useTitle(api) {
10551
11181
  return title;
10552
11182
  }
10553
11183
  const DockviewDefaultTab = (_a) => {
10554
- var { api, containerApi: _containerApi, params: _params, hideClose, closeActionOverride, onPointerDown, onPointerUp, onPointerLeave } = _a, rest = __rest(_a, ["api", "containerApi", "params", "hideClose", "closeActionOverride", "onPointerDown", "onPointerUp", "onPointerLeave"]);
11184
+ var { api, containerApi: _containerApi, params: _params, hideClose, closeActionOverride, onPointerDown, onPointerUp, onPointerLeave, tabLocation } = _a, rest = __rest(_a, ["api", "containerApi", "params", "hideClose", "closeActionOverride", "onPointerDown", "onPointerUp", "onPointerLeave", "tabLocation"]);
10555
11185
  const title = useTitle(api);
10556
11186
  const isMiddleMouseButton = React.useRef(false);
10557
11187
  const onClose = React.useCallback((event) => {
@@ -10583,7 +11213,7 @@ const DockviewDefaultTab = (_a) => {
10583
11213
  }, [onPointerLeave]);
10584
11214
  return (React.createElement("div", Object.assign({ "data-testid": "dockview-dv-default-tab" }, rest, { onPointerDown: _onPointerDown, onPointerUp: _onPointerUp, onPointerLeave: _onPointerLeave, className: "dv-default-tab" }),
10585
11215
  React.createElement("span", { className: "dv-default-tab-content" }, title),
10586
- !hideClose && (React.createElement("div", { className: "dv-default-tab-action", onPointerDown: onBtnPointerDown, onClick: onClose },
11216
+ !hideClose && tabLocation !== 'headerOverflow' && (React.createElement("div", { className: "dv-default-tab-action", onPointerDown: onBtnPointerDown, onClick: onClose },
10587
11217
  React.createElement(CloseButton, null)))));
10588
11218
  };
10589
11219
 
@@ -10948,6 +11578,14 @@ exports.isPanelOptionsWithPanel = isPanelOptionsWithPanel;
10948
11578
  exports.isReactComponent = isReactComponent;
10949
11579
  exports.orthogonal = orthogonal;
10950
11580
  exports.positionToDirection = positionToDirection;
11581
+ exports.themeAbyss = themeAbyss;
11582
+ exports.themeAbyssSpaced = themeAbyssSpaced;
11583
+ exports.themeDark = themeDark;
11584
+ exports.themeDracula = themeDracula;
11585
+ exports.themeLight = themeLight;
11586
+ exports.themeLightSpaced = themeLightSpaced;
11587
+ exports.themeReplit = themeReplit;
11588
+ exports.themeVisualStudio = themeVisualStudio;
10951
11589
  exports.toTarget = toTarget;
10952
11590
  exports.usePortalsLifecycle = usePortalsLifecycle;
10953
11591
  //# sourceMappingURL=dockview-react.cjs.js.map