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