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.esm.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
  */
@@ -34,7 +34,7 @@ function styleInject(css, ref) {
34
34
  }
35
35
  }
36
36
 
37
- 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}";
37
+ 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}";
38
38
  styleInject(css_248z);
39
39
 
40
40
  class TransferObject {
@@ -366,6 +366,20 @@ class MutableDisposable {
366
366
  }
367
367
  }
368
368
 
369
+ class OverflowObserver extends CompositeDisposable {
370
+ constructor(el) {
371
+ super();
372
+ this._onDidChange = new Emitter();
373
+ this.onDidChange = this._onDidChange.event;
374
+ this._value = null;
375
+ this.addDisposables(this._onDidChange, watchElementResize(el, (entry) => {
376
+ const hasScrollX = entry.target.scrollWidth > entry.target.clientWidth;
377
+ const hasScrollY = entry.target.scrollHeight > entry.target.clientHeight;
378
+ this._value = { hasScrollX, hasScrollY };
379
+ this._onDidChange.fire(this._value);
380
+ }));
381
+ }
382
+ }
369
383
  function watchElementResize(element, cb) {
370
384
  const observer = new ResizeObserver((entires) => {
371
385
  /**
@@ -604,6 +618,19 @@ class Classnames {
604
618
  }
605
619
  }
606
620
  }
621
+ function isChildEntirelyVisibleWithinParent(child, parent) {
622
+ //
623
+ const childPosition = getDomNodePagePosition(child);
624
+ const parentPosition = getDomNodePagePosition(parent);
625
+ if (childPosition.left < parentPosition.left) {
626
+ return false;
627
+ }
628
+ if (childPosition.left + childPosition.width >
629
+ parentPosition.left + parentPosition.width) {
630
+ return false;
631
+ }
632
+ return true;
633
+ }
607
634
 
608
635
  function tail(arr) {
609
636
  if (arr.length === 0) {
@@ -611,9 +638,6 @@ function tail(arr) {
611
638
  }
612
639
  return [arr.slice(0, arr.length - 1), arr[arr.length - 1]];
613
640
  }
614
- function last(arr) {
615
- return arr.length > 0 ? arr[arr.length - 1] : undefined;
616
- }
617
641
  function sequenceEquals(arr1, arr2) {
618
642
  if (arr1.length !== arr2.length) {
619
643
  return false;
@@ -879,6 +903,7 @@ class Splitview {
879
903
  }
880
904
  set margin(value) {
881
905
  this._margin = value;
906
+ toggleClass(this.element, 'dv-splitview-has-margin', value !== 0);
882
907
  }
883
908
  constructor(container, options) {
884
909
  var _a, _b;
@@ -3450,9 +3475,6 @@ class DockviewApi {
3450
3475
  get totalPanels() {
3451
3476
  return this.component.totalPanels;
3452
3477
  }
3453
- get gap() {
3454
- return this.component.gap;
3455
- }
3456
3478
  /**
3457
3479
  * Invoked when the active group changes. May be undefined if no group is active.
3458
3480
  */
@@ -3683,9 +3705,6 @@ class DockviewApi {
3683
3705
  addPopoutGroup(item, options) {
3684
3706
  return this.component.addPopoutGroup(item, options);
3685
3707
  }
3686
- setGap(gap) {
3687
- this.component.updateOptions({ gap });
3688
- }
3689
3708
  updateOptions(options) {
3690
3709
  this.component.updateOptions(options);
3691
3710
  }
@@ -3738,14 +3757,16 @@ class DragHandler extends CompositeDisposable {
3738
3757
  * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
3739
3758
  * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
3740
3759
  * dnd logic. You can see the code at
3741
- * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
3760
+ P * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
3742
3761
  */
3743
3762
  event.dataTransfer.setData('text/plain', '');
3744
3763
  }
3745
3764
  }
3746
3765
  }), addDisposableListener(this.el, 'dragend', () => {
3747
3766
  this.pointerEventsDisposable.dispose();
3748
- this.dataDisposable.dispose();
3767
+ setTimeout(() => {
3768
+ this.dataDisposable.dispose(); // allow the data to be read by other handlers before disposing
3769
+ }, 0);
3749
3770
  }));
3750
3771
  }
3751
3772
  }
@@ -3855,6 +3876,12 @@ const DEFAULT_SIZE = {
3855
3876
  const SMALL_WIDTH_BOUNDARY = 100;
3856
3877
  const SMALL_HEIGHT_BOUNDARY = 100;
3857
3878
  class Droptarget extends CompositeDisposable {
3879
+ get disabled() {
3880
+ return this._disabled;
3881
+ }
3882
+ set disabled(value) {
3883
+ this._disabled = value;
3884
+ }
3858
3885
  get state() {
3859
3886
  return this._state;
3860
3887
  }
@@ -3866,23 +3893,34 @@ class Droptarget extends CompositeDisposable {
3866
3893
  this.onDrop = this._onDrop.event;
3867
3894
  this._onWillShowOverlay = new Emitter();
3868
3895
  this.onWillShowOverlay = this._onWillShowOverlay.event;
3896
+ this._disabled = false;
3869
3897
  // use a set to take advantage of #<set>.has
3870
3898
  this._acceptedTargetZonesSet = new Set(this.options.acceptedTargetZones);
3871
3899
  this.dnd = new DragAndDropObserver(this.element, {
3872
- onDragEnter: () => undefined,
3900
+ onDragEnter: () => {
3901
+ var _a, _b, _c;
3902
+ (_c = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.getElements();
3903
+ },
3873
3904
  onDragOver: (e) => {
3905
+ var _a, _b, _c, _d, _e, _f, _g;
3906
+ Droptarget.ACTUAL_TARGET = this;
3907
+ const overrideTraget = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
3874
3908
  if (this._acceptedTargetZonesSet.size === 0) {
3909
+ if (overrideTraget) {
3910
+ return;
3911
+ }
3875
3912
  this.removeDropTarget();
3876
3913
  return;
3877
3914
  }
3878
- const width = this.element.clientWidth;
3879
- const height = this.element.clientHeight;
3915
+ const target = (_e = (_d = (_c = this.options).getOverlayOutline) === null || _d === void 0 ? void 0 : _d.call(_c)) !== null && _e !== void 0 ? _e : this.element;
3916
+ const width = target.offsetWidth;
3917
+ const height = target.offsetHeight;
3880
3918
  if (width === 0 || height === 0) {
3881
3919
  return; // avoid div!0
3882
3920
  }
3883
3921
  const rect = e.currentTarget.getBoundingClientRect();
3884
- const x = e.clientX - rect.left;
3885
- const y = e.clientY - rect.top;
3922
+ const x = ((_f = e.clientX) !== null && _f !== void 0 ? _f : 0) - rect.left;
3923
+ const y = ((_g = e.clientY) !== null && _g !== void 0 ? _g : 0) - rect.top;
3886
3924
  const quadrant = this.calculateQuadrant(this._acceptedTargetZonesSet, x, y, width, height);
3887
3925
  /**
3888
3926
  * If the event has already been used by another DropTarget instance
@@ -3895,6 +3933,9 @@ class Droptarget extends CompositeDisposable {
3895
3933
  return;
3896
3934
  }
3897
3935
  if (!this.options.canDisplayOverlay(e, quadrant)) {
3936
+ if (overrideTraget) {
3937
+ return;
3938
+ }
3898
3939
  this.removeDropTarget();
3899
3940
  return;
3900
3941
  }
@@ -3912,29 +3953,57 @@ class Droptarget extends CompositeDisposable {
3912
3953
  return;
3913
3954
  }
3914
3955
  this.markAsUsed(e);
3915
- if (!this.targetElement) {
3956
+ if (overrideTraget) ;
3957
+ else if (!this.targetElement) {
3916
3958
  this.targetElement = document.createElement('div');
3917
3959
  this.targetElement.className = 'dv-drop-target-dropzone';
3918
3960
  this.overlayElement = document.createElement('div');
3919
3961
  this.overlayElement.className = 'dv-drop-target-selection';
3920
3962
  this._state = 'center';
3921
3963
  this.targetElement.appendChild(this.overlayElement);
3922
- this.element.classList.add('dv-drop-target');
3923
- this.element.append(this.targetElement);
3964
+ target.classList.add('dv-drop-target');
3965
+ target.append(this.targetElement);
3966
+ // this.overlayElement.style.opacity = '0';
3967
+ // requestAnimationFrame(() => {
3968
+ // if (this.overlayElement) {
3969
+ // this.overlayElement.style.opacity = '';
3970
+ // }
3971
+ // });
3924
3972
  }
3925
3973
  this.toggleClasses(quadrant, width, height);
3926
3974
  this._state = quadrant;
3927
3975
  },
3928
3976
  onDragLeave: () => {
3977
+ var _a, _b;
3978
+ const target = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
3979
+ if (target) {
3980
+ return;
3981
+ }
3929
3982
  this.removeDropTarget();
3930
3983
  },
3931
- onDragEnd: () => {
3984
+ onDragEnd: (e) => {
3985
+ var _a, _b;
3986
+ const target = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
3987
+ if (target && Droptarget.ACTUAL_TARGET === this) {
3988
+ if (this._state) {
3989
+ // only stop the propagation of the event if we are dealing with it
3990
+ // which is only when the target has state
3991
+ e.stopPropagation();
3992
+ this._onDrop.fire({
3993
+ position: this._state,
3994
+ nativeEvent: e,
3995
+ });
3996
+ }
3997
+ }
3932
3998
  this.removeDropTarget();
3999
+ target === null || target === void 0 ? void 0 : target.clear();
3933
4000
  },
3934
4001
  onDrop: (e) => {
4002
+ var _a, _b, _c;
3935
4003
  e.preventDefault();
3936
4004
  const state = this._state;
3937
4005
  this.removeDropTarget();
4006
+ (_c = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.clear();
3938
4007
  if (state) {
3939
4008
  // only stop the propagation of the event if we are dealing with it
3940
4009
  // which is only when the target has state
@@ -3969,8 +4038,9 @@ class Droptarget extends CompositeDisposable {
3969
4038
  return typeof value === 'boolean' && value;
3970
4039
  }
3971
4040
  toggleClasses(quadrant, width, height) {
3972
- var _a, _b;
3973
- if (!this.overlayElement) {
4041
+ var _a, _b, _c, _d, _e, _f, _g;
4042
+ const target = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
4043
+ if (!target && !this.overlayElement) {
3974
4044
  return;
3975
4045
  }
3976
4046
  const isSmallX = width < SMALL_WIDTH_BOUNDARY;
@@ -3984,7 +4054,7 @@ class Droptarget extends CompositeDisposable {
3984
4054
  const topClass = !isSmallY && isTop;
3985
4055
  const bottomClass = !isSmallY && isBottom;
3986
4056
  let size = 1;
3987
- const sizeOptions = (_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : DEFAULT_SIZE;
4057
+ const sizeOptions = (_d = (_c = this.options.overlayModel) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : DEFAULT_SIZE;
3988
4058
  if (sizeOptions.type === 'percentage') {
3989
4059
  size = clamp(sizeOptions.value, 0, 100) / 100;
3990
4060
  }
@@ -3996,6 +4066,74 @@ class Droptarget extends CompositeDisposable {
3996
4066
  size = clamp(0, sizeOptions.value, height) / height;
3997
4067
  }
3998
4068
  }
4069
+ if (target) {
4070
+ const outlineEl = (_g = (_f = (_e = this.options).getOverlayOutline) === null || _f === void 0 ? void 0 : _f.call(_e)) !== null && _g !== void 0 ? _g : this.element;
4071
+ const elBox = outlineEl.getBoundingClientRect();
4072
+ const ta = target.getElements(undefined, outlineEl);
4073
+ const el = ta.root;
4074
+ const overlay = ta.overlay;
4075
+ const bigbox = el.getBoundingClientRect();
4076
+ const rootTop = elBox.top - bigbox.top;
4077
+ const rootLeft = elBox.left - bigbox.left;
4078
+ const box = {
4079
+ top: rootTop,
4080
+ left: rootLeft,
4081
+ width: width,
4082
+ height: height,
4083
+ };
4084
+ if (rightClass) {
4085
+ box.left = rootLeft + width * (1 - size);
4086
+ box.width = width * size;
4087
+ }
4088
+ else if (leftClass) {
4089
+ box.width = width * size;
4090
+ }
4091
+ else if (topClass) {
4092
+ box.height = height * size;
4093
+ }
4094
+ else if (bottomClass) {
4095
+ box.top = rootTop + height * (1 - size);
4096
+ box.height = height * size;
4097
+ }
4098
+ if (isSmallX && isLeft) {
4099
+ box.width = 4;
4100
+ }
4101
+ if (isSmallX && isRight) {
4102
+ box.left = rootLeft + width - 4;
4103
+ box.width = 4;
4104
+ }
4105
+ const topPx = `${Math.round(box.top)}px`;
4106
+ const leftPx = `${Math.round(box.left)}px`;
4107
+ const widthPx = `${Math.round(box.width)}px`;
4108
+ const heightPx = `${Math.round(box.height)}px`;
4109
+ if (overlay.style.top === topPx &&
4110
+ overlay.style.left === leftPx &&
4111
+ overlay.style.width === widthPx &&
4112
+ overlay.style.height === heightPx) {
4113
+ return;
4114
+ }
4115
+ overlay.style.top = topPx;
4116
+ overlay.style.left = leftPx;
4117
+ overlay.style.width = widthPx;
4118
+ overlay.style.height = heightPx;
4119
+ overlay.style.visibility = 'visible';
4120
+ overlay.className = `dv-drop-target-anchor${this.options.className ? ` ${this.options.className}` : ''}`;
4121
+ toggleClass(overlay, 'dv-drop-target-left', isLeft);
4122
+ toggleClass(overlay, 'dv-drop-target-right', isRight);
4123
+ toggleClass(overlay, 'dv-drop-target-top', isTop);
4124
+ toggleClass(overlay, 'dv-drop-target-bottom', isBottom);
4125
+ toggleClass(overlay, 'dv-drop-target-center', quadrant === 'center');
4126
+ if (ta.changed) {
4127
+ toggleClass(overlay, 'dv-drop-target-anchor-container-changed', true);
4128
+ setTimeout(() => {
4129
+ toggleClass(overlay, 'dv-drop-target-anchor-container-changed', false);
4130
+ }, 10);
4131
+ }
4132
+ return;
4133
+ }
4134
+ if (!this.overlayElement) {
4135
+ return;
4136
+ }
3999
4137
  const box = { top: '0px', left: '0px', width: '100%', height: '100%' };
4000
4138
  /**
4001
4139
  * You can also achieve the overlay placement using the transform CSS property
@@ -4052,12 +4190,13 @@ class Droptarget extends CompositeDisposable {
4052
4190
  return calculateQuadrantAsPixels(overlayType, x, y, width, height, activationSizeOptions.value);
4053
4191
  }
4054
4192
  removeDropTarget() {
4193
+ var _a;
4055
4194
  if (this.targetElement) {
4056
4195
  this._state = undefined;
4057
- this.element.removeChild(this.targetElement);
4196
+ (_a = this.targetElement.parentElement) === null || _a === void 0 ? void 0 : _a.classList.remove('dv-drop-target');
4197
+ this.targetElement.remove();
4058
4198
  this.targetElement = undefined;
4059
4199
  this.overlayElement = undefined;
4060
- this.element.classList.remove('dv-drop-target');
4061
4200
  }
4062
4201
  }
4063
4202
  }
@@ -4642,7 +4781,15 @@ class ContentContainer extends CompositeDisposable {
4642
4781
  this._element.className = 'dv-content-container';
4643
4782
  this._element.tabIndex = -1;
4644
4783
  this.addDisposables(this._onDidFocus, this._onDidBlur);
4784
+ const target = group.dropTargetContainer;
4645
4785
  this.dropTarget = new Droptarget(this.element, {
4786
+ getOverlayOutline: () => {
4787
+ var _a;
4788
+ return ((_a = accessor.options.theme) === null || _a === void 0 ? void 0 : _a.dndPanelOverlay) === 'group'
4789
+ ? this.element.parentElement
4790
+ : null;
4791
+ },
4792
+ className: 'dv-drop-target-content',
4646
4793
  acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
4647
4794
  canDisplayOverlay: (event, position) => {
4648
4795
  if (this.group.locked === 'no-drop-target' ||
@@ -4656,22 +4803,11 @@ class ContentContainer extends CompositeDisposable {
4656
4803
  return false;
4657
4804
  }
4658
4805
  if (data && data.viewId === this.accessor.id) {
4659
- if (data.groupId === this.group.id) {
4660
- if (position === 'center') {
4661
- // don't allow to drop on self for center position
4662
- return false;
4663
- }
4664
- if (data.panelId === null) {
4665
- // don't allow group move to drop anywhere on self
4666
- return false;
4667
- }
4668
- }
4669
- const groupHasOnePanelAndIsActiveDragElement = this.group.panels.length === 1 &&
4670
- data.groupId === this.group.id;
4671
- return !groupHasOnePanelAndIsActiveDragElement;
4806
+ return true;
4672
4807
  }
4673
4808
  return this.group.canDisplayOverlay(event, position, 'content');
4674
4809
  },
4810
+ getOverrideTarget: target ? () => target.model : undefined,
4675
4811
  });
4676
4812
  this.addDisposables(this.dropTarget);
4677
4813
  }
@@ -4746,6 +4882,18 @@ class ContentContainer extends CompositeDisposable {
4746
4882
  }
4747
4883
  }
4748
4884
 
4885
+ function addGhostImage(dataTransfer, ghostElement, options) {
4886
+ var _a, _b;
4887
+ // class dockview provides to force ghost image to be drawn on a different layer and prevent weird rendering issues
4888
+ addClasses(ghostElement, 'dv-dragged');
4889
+ document.body.appendChild(ghostElement);
4890
+ 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);
4891
+ setTimeout(() => {
4892
+ removeClasses(ghostElement, 'dv-dragged');
4893
+ ghostElement.remove();
4894
+ }, 0);
4895
+ }
4896
+
4749
4897
  class TabDragHandler extends DragHandler {
4750
4898
  constructor(element, accessor, group, panel) {
4751
4899
  super(element);
@@ -4786,25 +4934,32 @@ class Tab extends CompositeDisposable {
4786
4934
  toggleClass(this.element, 'dv-inactive-tab', true);
4787
4935
  const dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel);
4788
4936
  this.dropTarget = new Droptarget(this._element, {
4789
- acceptedTargetZones: ['center'],
4937
+ acceptedTargetZones: ['left', 'right'],
4938
+ overlayModel: { activationSize: { value: 50, type: 'percentage' } },
4790
4939
  canDisplayOverlay: (event, position) => {
4791
4940
  if (this.group.locked) {
4792
4941
  return false;
4793
4942
  }
4794
4943
  const data = getPanelData();
4795
4944
  if (data && this.accessor.id === data.viewId) {
4796
- if (data.panelId === null &&
4797
- data.groupId === this.group.id) {
4798
- // don't allow group move to drop on self
4799
- return false;
4800
- }
4801
- return this.panel.id !== data.panelId;
4945
+ return true;
4802
4946
  }
4803
4947
  return this.group.model.canDisplayOverlay(event, position, 'tab');
4804
4948
  },
4949
+ getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
4805
4950
  });
4806
4951
  this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
4807
4952
  this.addDisposables(this._onPointDown, this._onDropped, this._onDragStart, dragHandler.onDragStart((event) => {
4953
+ if (event.dataTransfer) {
4954
+ const style = getComputedStyle(this.element);
4955
+ const newNode = this.element.cloneNode(true);
4956
+ Array.from(style).forEach((key) => newNode.style.setProperty(key, style.getPropertyValue(key), style.getPropertyPriority(key)));
4957
+ newNode.style.position = 'absolute';
4958
+ addGhostImage(event.dataTransfer, newNode, {
4959
+ y: -10,
4960
+ x: 30,
4961
+ });
4962
+ }
4808
4963
  this._onDragStart.fire(event);
4809
4964
  }), dragHandler, addDisposableListener(this._element, 'pointerdown', (event) => {
4810
4965
  this._onPointDown.fire(event);
@@ -4828,17 +4983,6 @@ class Tab extends CompositeDisposable {
4828
4983
  }
4829
4984
  }
4830
4985
 
4831
- function addGhostImage(dataTransfer, ghostElement) {
4832
- // class dockview provides to force ghost image to be drawn on a different layer and prevent weird rendering issues
4833
- addClasses(ghostElement, 'dv-dragged');
4834
- document.body.appendChild(ghostElement);
4835
- dataTransfer.setDragImage(ghostElement, 0, 0);
4836
- setTimeout(() => {
4837
- removeClasses(ghostElement, 'dv-dragged');
4838
- ghostElement.remove();
4839
- }, 0);
4840
- }
4841
-
4842
4986
  class GroupDragHandler extends DragHandler {
4843
4987
  constructor(element, accessor, group) {
4844
4988
  super(element);
@@ -4878,8 +5022,10 @@ class GroupDragHandler extends DragHandler {
4878
5022
  ghostElement.style.lineHeight = '20px';
4879
5023
  ghostElement.style.borderRadius = '12px';
4880
5024
  ghostElement.style.position = 'absolute';
5025
+ ghostElement.style.pointerEvents = 'none';
5026
+ ghostElement.style.top = '-9999px';
4881
5027
  ghostElement.textContent = `Multiple Panels (${this.group.size})`;
4882
- addGhostImage(dataTransfer, ghostElement);
5028
+ addGhostImage(dataTransfer, ghostElement, { y: -10, x: 30 });
4883
5029
  }
4884
5030
  return {
4885
5031
  dispose: () => {
@@ -4911,19 +5057,13 @@ class VoidContainer extends CompositeDisposable {
4911
5057
  this.dropTraget = new Droptarget(this._element, {
4912
5058
  acceptedTargetZones: ['center'],
4913
5059
  canDisplayOverlay: (event, position) => {
4914
- var _a;
4915
5060
  const data = getPanelData();
4916
5061
  if (data && this.accessor.id === data.viewId) {
4917
- if (data.panelId === null &&
4918
- data.groupId === this.group.id) {
4919
- // don't allow group move to drop on self
4920
- return false;
4921
- }
4922
- // don't show the overlay if the tab being dragged is the last panel of this group
4923
- return ((_a = last(this.group.panels)) === null || _a === void 0 ? void 0 : _a.id) !== data.panelId;
5062
+ return true;
4924
5063
  }
4925
5064
  return group.model.canDisplayOverlay(event, position, 'header_space');
4926
5065
  },
5066
+ getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
4927
5067
  });
4928
5068
  this.onWillShowOverlay = this.dropTraget.onWillShowOverlay;
4929
5069
  this.addDisposables(handler, handler.onDragStart((event) => {
@@ -4934,88 +5074,338 @@ class VoidContainer extends CompositeDisposable {
4934
5074
  }
4935
5075
  }
4936
5076
 
4937
- class TabsContainer extends CompositeDisposable {
4938
- get panels() {
4939
- return this.tabs.map((_) => _.value.panel.id);
4940
- }
4941
- get size() {
4942
- return this.tabs.length;
4943
- }
4944
- get hidden() {
4945
- return this._hidden;
5077
+ class Scrollbar extends CompositeDisposable {
5078
+ get element() {
5079
+ return this._element;
4946
5080
  }
4947
- set hidden(value) {
4948
- this._hidden = value;
4949
- this.element.style.display = value ? 'none' : '';
5081
+ constructor(scrollableElement) {
5082
+ super();
5083
+ this.scrollableElement = scrollableElement;
5084
+ this._scrollLeft = 0;
5085
+ this._element = document.createElement('div');
5086
+ this._element.className = 'dv-scrollable';
5087
+ this._horizontalScrollbar = document.createElement('div');
5088
+ this._horizontalScrollbar.className = 'dv-scrollbar-horizontal';
5089
+ this.element.appendChild(scrollableElement);
5090
+ this.element.appendChild(this._horizontalScrollbar);
5091
+ this.addDisposables(addDisposableListener(this.element, 'wheel', (event) => {
5092
+ this._scrollLeft += event.deltaY * Scrollbar.MouseWheelSpeed;
5093
+ this.calculateScrollbarStyles();
5094
+ }), addDisposableListener(this._horizontalScrollbar, 'pointerdown', (event) => {
5095
+ event.preventDefault();
5096
+ toggleClass(this.element, 'dv-scrollable-scrolling', true);
5097
+ const originalClientX = event.clientX;
5098
+ const originalScrollLeft = this._scrollLeft;
5099
+ const onPointerMove = (event) => {
5100
+ const deltaX = event.clientX - originalClientX;
5101
+ const { clientWidth } = this.element;
5102
+ const { scrollWidth } = this.scrollableElement;
5103
+ const p = clientWidth / scrollWidth;
5104
+ this._scrollLeft = originalScrollLeft + deltaX / p;
5105
+ this.calculateScrollbarStyles();
5106
+ };
5107
+ const onEnd = () => {
5108
+ toggleClass(this.element, 'dv-scrollable-scrolling', false);
5109
+ document.removeEventListener('pointermove', onPointerMove);
5110
+ document.removeEventListener('pointerup', onEnd);
5111
+ document.removeEventListener('pointercancel', onEnd);
5112
+ };
5113
+ document.addEventListener('pointermove', onPointerMove);
5114
+ document.addEventListener('pointerup', onEnd);
5115
+ document.addEventListener('pointercancel', onEnd);
5116
+ }), addDisposableListener(this.element, 'scroll', () => {
5117
+ this.calculateScrollbarStyles();
5118
+ }), addDisposableListener(this.scrollableElement, 'scroll', () => {
5119
+ this._scrollLeft = this.scrollableElement.scrollLeft;
5120
+ this.calculateScrollbarStyles();
5121
+ }), watchElementResize(this.element, () => {
5122
+ toggleClass(this.element, 'dv-scrollable-resizing', true);
5123
+ if (this._animationTimer) {
5124
+ clearTimeout(this._animationTimer);
5125
+ }
5126
+ this._animationTimer = setTimeout(() => {
5127
+ clearTimeout(this._animationTimer);
5128
+ toggleClass(this.element, 'dv-scrollable-resizing', false);
5129
+ }, 500);
5130
+ this.calculateScrollbarStyles();
5131
+ }));
4950
5132
  }
4951
- show() {
4952
- if (!this.hidden) {
4953
- this.element.style.display = '';
5133
+ calculateScrollbarStyles() {
5134
+ const { clientWidth } = this.element;
5135
+ const { scrollWidth } = this.scrollableElement;
5136
+ const hasScrollbar = scrollWidth > clientWidth;
5137
+ if (hasScrollbar) {
5138
+ const px = clientWidth * (clientWidth / scrollWidth);
5139
+ this._horizontalScrollbar.style.width = `${px}px`;
5140
+ this._scrollLeft = clamp(this._scrollLeft, 0, this.scrollableElement.scrollWidth - clientWidth);
5141
+ this.scrollableElement.scrollLeft = this._scrollLeft;
5142
+ const percentageComplete = this._scrollLeft / (scrollWidth - clientWidth);
5143
+ this._horizontalScrollbar.style.left = `${(clientWidth - px) * percentageComplete}px`;
5144
+ }
5145
+ else {
5146
+ this._horizontalScrollbar.style.width = `0px`;
5147
+ this._horizontalScrollbar.style.left = `0px`;
5148
+ this._scrollLeft = 0;
4954
5149
  }
4955
5150
  }
4956
- hide() {
4957
- this._element.style.display = 'none';
5151
+ }
5152
+ Scrollbar.MouseWheelSpeed = 1;
5153
+
5154
+ class Tabs extends CompositeDisposable {
5155
+ get showTabsOverflowControl() {
5156
+ return this._showTabsOverflowControl;
4958
5157
  }
4959
- setRightActionsElement(element) {
4960
- if (this.rightActions === element) {
5158
+ set showTabsOverflowControl(value) {
5159
+ if (this._showTabsOverflowControl == value) {
4961
5160
  return;
4962
5161
  }
4963
- if (this.rightActions) {
4964
- this.rightActions.remove();
4965
- this.rightActions = undefined;
4966
- }
4967
- if (element) {
4968
- this.rightActionsContainer.appendChild(element);
4969
- this.rightActions = element;
5162
+ this._showTabsOverflowControl = value;
5163
+ if (value) {
5164
+ const observer = new OverflowObserver(this._tabsList);
5165
+ this._observerDisposable.value = new CompositeDisposable(observer, observer.onDidChange((event) => {
5166
+ const hasOverflow = event.hasScrollX || event.hasScrollY;
5167
+ this.toggleDropdown({ reset: !hasOverflow });
5168
+ }), addDisposableListener(this._tabsList, 'scroll', () => {
5169
+ this.toggleDropdown({ reset: false });
5170
+ }));
4970
5171
  }
4971
5172
  }
4972
- setLeftActionsElement(element) {
4973
- if (this.leftActions === element) {
4974
- return;
4975
- }
4976
- if (this.leftActions) {
4977
- this.leftActions.remove();
4978
- this.leftActions = undefined;
4979
- }
4980
- if (element) {
4981
- this.leftActionsContainer.appendChild(element);
4982
- this.leftActions = element;
5173
+ get element() {
5174
+ return this._element;
5175
+ }
5176
+ get panels() {
5177
+ return this._tabs.map((_) => _.value.panel.id);
5178
+ }
5179
+ get size() {
5180
+ return this._tabs.length;
5181
+ }
5182
+ get tabs() {
5183
+ return this._tabs.map((_) => _.value);
5184
+ }
5185
+ constructor(group, accessor, options) {
5186
+ super();
5187
+ this.group = group;
5188
+ this.accessor = accessor;
5189
+ this._observerDisposable = new MutableDisposable();
5190
+ this._tabs = [];
5191
+ this.selectedIndex = -1;
5192
+ this._showTabsOverflowControl = false;
5193
+ this._onTabDragStart = new Emitter();
5194
+ this.onTabDragStart = this._onTabDragStart.event;
5195
+ this._onDrop = new Emitter();
5196
+ this.onDrop = this._onDrop.event;
5197
+ this._onWillShowOverlay = new Emitter();
5198
+ this.onWillShowOverlay = this._onWillShowOverlay.event;
5199
+ this._onOverflowTabsChange = new Emitter();
5200
+ this.onOverflowTabsChange = this._onOverflowTabsChange.event;
5201
+ this._tabsList = document.createElement('div');
5202
+ this._tabsList.className = 'dv-tabs-container dv-horizontal';
5203
+ this.showTabsOverflowControl = options.showTabsOverflowControl;
5204
+ const scrollbar = new Scrollbar(this._tabsList);
5205
+ this._element = scrollbar.element;
5206
+ this.addDisposables(this._onOverflowTabsChange, this._observerDisposable, scrollbar, this._onWillShowOverlay, this._onDrop, this._onTabDragStart, addDisposableListener(this.element, 'pointerdown', (event) => {
5207
+ if (event.defaultPrevented) {
5208
+ return;
5209
+ }
5210
+ const isLeftClick = event.button === 0;
5211
+ if (isLeftClick) {
5212
+ this.accessor.doSetGroupActive(this.group);
5213
+ }
5214
+ }), Disposable.from(() => {
5215
+ for (const { value, disposable } of this._tabs) {
5216
+ disposable.dispose();
5217
+ value.dispose();
5218
+ }
5219
+ this._tabs = [];
5220
+ }));
5221
+ }
5222
+ indexOf(id) {
5223
+ return this._tabs.findIndex((tab) => tab.value.panel.id === id);
5224
+ }
5225
+ isActive(tab) {
5226
+ return (this.selectedIndex > -1 &&
5227
+ this._tabs[this.selectedIndex].value === tab);
5228
+ }
5229
+ setActivePanel(panel) {
5230
+ let runningWidth = 0;
5231
+ for (const tab of this._tabs) {
5232
+ const isActivePanel = panel.id === tab.value.panel.id;
5233
+ tab.value.setActive(isActivePanel);
5234
+ if (isActivePanel) {
5235
+ const element = tab.value.element;
5236
+ const parentElement = element.parentElement;
5237
+ if (runningWidth < parentElement.scrollLeft ||
5238
+ runningWidth + element.clientWidth >
5239
+ parentElement.scrollLeft + parentElement.clientWidth) {
5240
+ parentElement.scrollLeft = runningWidth;
5241
+ }
5242
+ }
5243
+ runningWidth += tab.value.element.clientWidth;
4983
5244
  }
4984
5245
  }
4985
- setPrefixActionsElement(element) {
4986
- if (this.preActions === element) {
5246
+ openPanel(panel, index = this._tabs.length) {
5247
+ if (this._tabs.find((tab) => tab.value.panel.id === panel.id)) {
4987
5248
  return;
4988
5249
  }
4989
- if (this.preActions) {
4990
- this.preActions.remove();
4991
- this.preActions = undefined;
5250
+ const tab = new Tab(panel, this.accessor, this.group);
5251
+ tab.setContent(panel.view.tab);
5252
+ const disposable = new CompositeDisposable(tab.onDragStart((event) => {
5253
+ this._onTabDragStart.fire({ nativeEvent: event, panel });
5254
+ }), tab.onPointerDown((event) => {
5255
+ if (event.defaultPrevented) {
5256
+ return;
5257
+ }
5258
+ const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
5259
+ const isFloatingWithOnePanel = this.group.api.location.type === 'floating' &&
5260
+ this.size === 1;
5261
+ if (isFloatingGroupsEnabled &&
5262
+ !isFloatingWithOnePanel &&
5263
+ event.shiftKey) {
5264
+ event.preventDefault();
5265
+ const panel = this.accessor.getGroupPanel(tab.panel.id);
5266
+ const { top, left } = tab.element.getBoundingClientRect();
5267
+ const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
5268
+ this.accessor.addFloatingGroup(panel, {
5269
+ x: left - rootLeft,
5270
+ y: top - rootTop,
5271
+ inDragMode: true,
5272
+ });
5273
+ return;
5274
+ }
5275
+ switch (event.button) {
5276
+ case 0: // left click or touch
5277
+ if (this.group.activePanel !== panel) {
5278
+ this.group.model.openPanel(panel);
5279
+ }
5280
+ break;
5281
+ }
5282
+ }), tab.onDrop((event) => {
5283
+ this._onDrop.fire({
5284
+ event: event.nativeEvent,
5285
+ index: this._tabs.findIndex((x) => x.value === tab),
5286
+ });
5287
+ }), tab.onWillShowOverlay((event) => {
5288
+ this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
5289
+ kind: 'tab',
5290
+ panel: this.group.activePanel,
5291
+ api: this.accessor.api,
5292
+ group: this.group,
5293
+ getData: getPanelData,
5294
+ }));
5295
+ }));
5296
+ const value = { value: tab, disposable };
5297
+ this.addTab(value, index);
5298
+ }
5299
+ delete(id) {
5300
+ const index = this.indexOf(id);
5301
+ const tabToRemove = this._tabs.splice(index, 1)[0];
5302
+ const { value, disposable } = tabToRemove;
5303
+ disposable.dispose();
5304
+ value.dispose();
5305
+ value.element.remove();
5306
+ }
5307
+ addTab(tab, index = this._tabs.length) {
5308
+ if (index < 0 || index > this._tabs.length) {
5309
+ throw new Error('invalid location');
4992
5310
  }
4993
- if (element) {
4994
- this.preActionsContainer.appendChild(element);
4995
- this.preActions = element;
5311
+ this._tabsList.insertBefore(tab.value.element, this._tabsList.children[index]);
5312
+ this._tabs = [
5313
+ ...this._tabs.slice(0, index),
5314
+ tab,
5315
+ ...this._tabs.slice(index),
5316
+ ];
5317
+ if (this.selectedIndex < 0) {
5318
+ this.selectedIndex = index;
4996
5319
  }
4997
5320
  }
4998
- get element() {
4999
- return this._element;
5321
+ toggleDropdown(options) {
5322
+ const tabs = options.reset
5323
+ ? []
5324
+ : this._tabs
5325
+ .filter((tab) => !isChildEntirelyVisibleWithinParent(tab.value.element, this._tabsList))
5326
+ .map((x) => x.value.panel.id);
5327
+ this._onOverflowTabsChange.fire({ tabs, reset: options.reset });
5000
5328
  }
5001
- isActive(tab) {
5002
- return (this.selectedIndex > -1 &&
5003
- this.tabs[this.selectedIndex].value === tab);
5329
+ }
5330
+
5331
+ const createSvgElementFromPath = (params) => {
5332
+ const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
5333
+ svg.setAttributeNS(null, 'height', params.height);
5334
+ svg.setAttributeNS(null, 'width', params.width);
5335
+ svg.setAttributeNS(null, 'viewBox', params.viewbox);
5336
+ svg.setAttributeNS(null, 'aria-hidden', 'false');
5337
+ svg.setAttributeNS(null, 'focusable', 'false');
5338
+ svg.classList.add('dv-svg');
5339
+ const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
5340
+ path.setAttributeNS(null, 'd', params.path);
5341
+ svg.appendChild(path);
5342
+ return svg;
5343
+ };
5344
+ const createCloseButton = () => createSvgElementFromPath({
5345
+ width: '11',
5346
+ height: '11',
5347
+ viewbox: '0 0 28 28',
5348
+ 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',
5349
+ });
5350
+ const createExpandMoreButton = () => createSvgElementFromPath({
5351
+ width: '11',
5352
+ height: '11',
5353
+ viewbox: '0 0 24 15',
5354
+ path: 'M12 14.15L0 2.15L2.15 0L12 9.9L21.85 0.0499992L24 2.2L12 14.15Z',
5355
+ });
5356
+ const createChevronRightButton = () => createSvgElementFromPath({
5357
+ width: '11',
5358
+ height: '11',
5359
+ viewbox: '0 0 15 25',
5360
+ path: 'M2.15 24.1L0 21.95L9.9 12.05L0 2.15L2.15 0L14.2 12.05L2.15 24.1Z',
5361
+ });
5362
+
5363
+ function createDropdownElementHandle() {
5364
+ const el = document.createElement('div');
5365
+ el.className = 'dv-tabs-overflow-dropdown-default';
5366
+ const text = document.createElement('span');
5367
+ text.textContent = ``;
5368
+ const icon = createChevronRightButton();
5369
+ el.appendChild(icon);
5370
+ el.appendChild(text);
5371
+ return {
5372
+ element: el,
5373
+ update: (params) => {
5374
+ text.textContent = `${params.tabs}`;
5375
+ },
5376
+ };
5377
+ }
5378
+
5379
+ class TabsContainer extends CompositeDisposable {
5380
+ get onTabDragStart() {
5381
+ return this.tabs.onTabDragStart;
5004
5382
  }
5005
- indexOf(id) {
5006
- return this.tabs.findIndex((tab) => tab.value.panel.id === id);
5383
+ get panels() {
5384
+ return this.tabs.panels;
5385
+ }
5386
+ get size() {
5387
+ return this.tabs.size;
5388
+ }
5389
+ get hidden() {
5390
+ return this._hidden;
5391
+ }
5392
+ set hidden(value) {
5393
+ this._hidden = value;
5394
+ this.element.style.display = value ? 'none' : '';
5395
+ }
5396
+ get element() {
5397
+ return this._element;
5007
5398
  }
5008
5399
  constructor(accessor, group) {
5009
5400
  super();
5010
5401
  this.accessor = accessor;
5011
5402
  this.group = group;
5012
- this.tabs = [];
5013
- this.selectedIndex = -1;
5014
5403
  this._hidden = false;
5404
+ this.dropdownPart = null;
5405
+ this._overflowTabs = [];
5406
+ this._dropdownDisposable = new MutableDisposable();
5015
5407
  this._onDrop = new Emitter();
5016
5408
  this.onDrop = this._onDrop.event;
5017
- this._onTabDragStart = new Emitter();
5018
- this.onTabDragStart = this._onTabDragStart.event;
5019
5409
  this._onGroupDragStart = new Emitter();
5020
5410
  this.onGroupDragStart = this._onGroupDragStart.event;
5021
5411
  this._onWillShowOverlay = new Emitter();
@@ -5029,15 +5419,21 @@ class TabsContainer extends CompositeDisposable {
5029
5419
  this.leftActionsContainer.className = 'dv-left-actions-container';
5030
5420
  this.preActionsContainer = document.createElement('div');
5031
5421
  this.preActionsContainer.className = 'dv-pre-actions-container';
5032
- this.tabContainer = document.createElement('div');
5033
- this.tabContainer.className = 'dv-tabs-container';
5422
+ this.tabs = new Tabs(group, accessor, {
5423
+ showTabsOverflowControl: !accessor.options.disableTabsOverflowList,
5424
+ });
5034
5425
  this.voidContainer = new VoidContainer(this.accessor, this.group);
5035
5426
  this._element.appendChild(this.preActionsContainer);
5036
- this._element.appendChild(this.tabContainer);
5427
+ this._element.appendChild(this.tabs.element);
5037
5428
  this._element.appendChild(this.leftActionsContainer);
5038
5429
  this._element.appendChild(this.voidContainer.element);
5039
5430
  this._element.appendChild(this.rightActionsContainer);
5040
- this.addDisposables(this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._onGroupDragStart, this.voidContainer, this.voidContainer.onDragStart((event) => {
5431
+ this.addDisposables(accessor.onDidOptionsChange(() => {
5432
+ this.tabs.showTabsOverflowControl =
5433
+ !accessor.options.disableTabsOverflowList;
5434
+ }), this.tabs.onOverflowTabsChange((event) => {
5435
+ this.toggleDropdown(event);
5436
+ }), this.tabs, this._onWillShowOverlay, this._onDrop, this._onGroupDragStart, this.voidContainer, this.voidContainer.onDragStart((event) => {
5041
5437
  this._onGroupDragStart.fire({
5042
5438
  nativeEvent: event,
5043
5439
  group: this.group,
@@ -5045,7 +5441,7 @@ class TabsContainer extends CompositeDisposable {
5045
5441
  }), this.voidContainer.onDrop((event) => {
5046
5442
  this._onDrop.fire({
5047
5443
  event: event.nativeEvent,
5048
- index: this.tabs.length,
5444
+ index: this.tabs.size,
5049
5445
  });
5050
5446
  }), this.voidContainer.onWillShowOverlay((event) => {
5051
5447
  this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
@@ -5055,133 +5451,149 @@ class TabsContainer extends CompositeDisposable {
5055
5451
  group: this.group,
5056
5452
  getData: getPanelData,
5057
5453
  }));
5058
- }), addDisposableListener(this.voidContainer.element, 'pointerdown', (event) => {
5059
- const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
5060
- if (isFloatingGroupsEnabled &&
5061
- event.shiftKey &&
5062
- this.group.api.location.type !== 'floating') {
5063
- event.preventDefault();
5064
- const { top, left } = this.element.getBoundingClientRect();
5065
- const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
5066
- this.accessor.addFloatingGroup(this.group, {
5067
- x: left - rootLeft + 20,
5068
- y: top - rootTop + 20,
5069
- inDragMode: true,
5070
- });
5071
- }
5072
- }), addDisposableListener(this.tabContainer, 'pointerdown', (event) => {
5073
- if (event.defaultPrevented) {
5074
- return;
5075
- }
5076
- const isLeftClick = event.button === 0;
5077
- if (isLeftClick) {
5078
- this.accessor.doSetGroupActive(this.group);
5079
- }
5080
- }));
5081
- }
5082
- setActive(_isGroupActive) {
5083
- // noop
5084
- }
5085
- delete(id) {
5086
- const index = this.tabs.findIndex((tab) => tab.value.panel.id === id);
5087
- const tabToRemove = this.tabs.splice(index, 1)[0];
5088
- if (!tabToRemove) {
5089
- throw new Error(`dockview: Tab not found`);
5090
- }
5091
- const { value, disposable } = tabToRemove;
5092
- disposable.dispose();
5093
- value.dispose();
5094
- value.element.remove();
5095
- this.updateClassnames();
5096
- }
5097
- setActivePanel(panel) {
5098
- this.tabs.forEach((tab) => {
5099
- const isActivePanel = panel.id === tab.value.panel.id;
5100
- tab.value.setActive(isActivePanel);
5101
- });
5102
- }
5103
- openPanel(panel, index = this.tabs.length) {
5104
- if (this.tabs.find((tab) => tab.value.panel.id === panel.id)) {
5105
- return;
5106
- }
5107
- const tab = new Tab(panel, this.accessor, this.group);
5108
- tab.setContent(panel.view.tab);
5109
- const disposable = new CompositeDisposable(tab.onDragStart((event) => {
5110
- this._onTabDragStart.fire({ nativeEvent: event, panel });
5111
- }), tab.onPointerDown((event) => {
5454
+ }), addDisposableListener(this.voidContainer.element, 'pointerdown', (event) => {
5112
5455
  if (event.defaultPrevented) {
5113
5456
  return;
5114
5457
  }
5115
5458
  const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
5116
- const isFloatingWithOnePanel = this.group.api.location.type === 'floating' &&
5117
- this.size === 1;
5118
5459
  if (isFloatingGroupsEnabled &&
5119
- !isFloatingWithOnePanel &&
5120
- event.shiftKey) {
5460
+ event.shiftKey &&
5461
+ this.group.api.location.type !== 'floating') {
5121
5462
  event.preventDefault();
5122
- const panel = this.accessor.getGroupPanel(tab.panel.id);
5123
- const { top, left } = tab.element.getBoundingClientRect();
5463
+ const { top, left } = this.element.getBoundingClientRect();
5124
5464
  const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
5125
- this.accessor.addFloatingGroup(panel, {
5126
- x: left - rootLeft,
5127
- y: top - rootTop,
5465
+ this.accessor.addFloatingGroup(this.group, {
5466
+ x: left - rootLeft + 20,
5467
+ y: top - rootTop + 20,
5128
5468
  inDragMode: true,
5129
5469
  });
5130
- return;
5131
- }
5132
- switch (event.button) {
5133
- case 0: // left click or touch
5134
- if (this.group.activePanel !== panel) {
5135
- this.group.model.openPanel(panel);
5136
- }
5137
- break;
5138
5470
  }
5139
- }), tab.onDrop((event) => {
5140
- this._onDrop.fire({
5141
- event: event.nativeEvent,
5142
- index: this.tabs.findIndex((x) => x.value === tab),
5143
- });
5144
- }), tab.onWillShowOverlay((event) => {
5145
- this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
5146
- kind: 'tab',
5147
- panel: this.group.activePanel,
5148
- api: this.accessor.api,
5149
- group: this.group,
5150
- getData: getPanelData,
5151
- }));
5152
5471
  }));
5153
- const value = { value: tab, disposable };
5154
- this.addTab(value, index);
5155
5472
  }
5156
- closePanel(panel) {
5157
- this.delete(panel.id);
5473
+ show() {
5474
+ if (!this.hidden) {
5475
+ this.element.style.display = '';
5476
+ }
5158
5477
  }
5159
- dispose() {
5160
- super.dispose();
5161
- for (const { value, disposable } of this.tabs) {
5162
- disposable.dispose();
5163
- value.dispose();
5478
+ hide() {
5479
+ this._element.style.display = 'none';
5480
+ }
5481
+ setRightActionsElement(element) {
5482
+ if (this.rightActions === element) {
5483
+ return;
5484
+ }
5485
+ if (this.rightActions) {
5486
+ this.rightActions.remove();
5487
+ this.rightActions = undefined;
5488
+ }
5489
+ if (element) {
5490
+ this.rightActionsContainer.appendChild(element);
5491
+ this.rightActions = element;
5164
5492
  }
5165
- this.tabs = [];
5166
5493
  }
5167
- addTab(tab, index = this.tabs.length) {
5168
- if (index < 0 || index > this.tabs.length) {
5169
- throw new Error('invalid location');
5494
+ setLeftActionsElement(element) {
5495
+ if (this.leftActions === element) {
5496
+ return;
5170
5497
  }
5171
- this.tabContainer.insertBefore(tab.value.element, this.tabContainer.children[index]);
5172
- this.tabs = [
5173
- ...this.tabs.slice(0, index),
5174
- tab,
5175
- ...this.tabs.slice(index),
5176
- ];
5177
- if (this.selectedIndex < 0) {
5178
- this.selectedIndex = index;
5498
+ if (this.leftActions) {
5499
+ this.leftActions.remove();
5500
+ this.leftActions = undefined;
5501
+ }
5502
+ if (element) {
5503
+ this.leftActionsContainer.appendChild(element);
5504
+ this.leftActions = element;
5505
+ }
5506
+ }
5507
+ setPrefixActionsElement(element) {
5508
+ if (this.preActions === element) {
5509
+ return;
5510
+ }
5511
+ if (this.preActions) {
5512
+ this.preActions.remove();
5513
+ this.preActions = undefined;
5514
+ }
5515
+ if (element) {
5516
+ this.preActionsContainer.appendChild(element);
5517
+ this.preActions = element;
5179
5518
  }
5519
+ }
5520
+ isActive(tab) {
5521
+ return this.tabs.isActive(tab);
5522
+ }
5523
+ indexOf(id) {
5524
+ return this.tabs.indexOf(id);
5525
+ }
5526
+ setActive(_isGroupActive) {
5527
+ // noop
5528
+ }
5529
+ delete(id) {
5530
+ this.tabs.delete(id);
5531
+ this.updateClassnames();
5532
+ }
5533
+ setActivePanel(panel) {
5534
+ this.tabs.setActivePanel(panel);
5535
+ }
5536
+ openPanel(panel, index = this.tabs.size) {
5537
+ this.tabs.openPanel(panel, index);
5180
5538
  this.updateClassnames();
5181
5539
  }
5540
+ closePanel(panel) {
5541
+ this.delete(panel.id);
5542
+ }
5182
5543
  updateClassnames() {
5183
5544
  toggleClass(this._element, 'dv-single-tab', this.size === 1);
5184
5545
  }
5546
+ toggleDropdown(options) {
5547
+ const tabs = options.reset ? [] : options.tabs;
5548
+ this._overflowTabs = tabs;
5549
+ if (this._overflowTabs.length > 0 && this.dropdownPart) {
5550
+ this.dropdownPart.update({ tabs: tabs.length });
5551
+ return;
5552
+ }
5553
+ if (this._overflowTabs.length === 0) {
5554
+ this._dropdownDisposable.dispose();
5555
+ return;
5556
+ }
5557
+ const root = document.createElement('div');
5558
+ root.className = 'dv-tabs-overflow-dropdown-root';
5559
+ const part = createDropdownElementHandle();
5560
+ part.update({ tabs: tabs.length });
5561
+ this.dropdownPart = part;
5562
+ root.appendChild(part.element);
5563
+ this.rightActionsContainer.prepend(root);
5564
+ this._dropdownDisposable.value = new CompositeDisposable(Disposable.from(() => {
5565
+ var _a, _b;
5566
+ root.remove();
5567
+ (_b = (_a = this.dropdownPart) === null || _a === void 0 ? void 0 : _a.dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
5568
+ this.dropdownPart = null;
5569
+ }), addDisposableListener(root, 'pointerdown', (event) => {
5570
+ event.preventDefault();
5571
+ }, { capture: true }), addDisposableListener(root, 'click', (event) => {
5572
+ const el = document.createElement('div');
5573
+ el.style.overflow = 'auto';
5574
+ el.className = 'dv-tabs-overflow-container';
5575
+ for (const tab of this.tabs.tabs.filter((tab) => this._overflowTabs.includes(tab.panel.id))) {
5576
+ const panelObject = this.group.panels.find((panel) => panel === tab.panel);
5577
+ const tabComponent = panelObject.view.createTabRenderer('headerOverflow');
5578
+ const child = tabComponent.element;
5579
+ const wrapper = document.createElement('div');
5580
+ toggleClass(wrapper, 'dv-tab', true);
5581
+ toggleClass(wrapper, 'dv-active-tab', panelObject.api.isActive);
5582
+ toggleClass(wrapper, 'dv-inactive-tab', !panelObject.api.isActive);
5583
+ wrapper.addEventListener('mousedown', () => {
5584
+ this.accessor.popupService.close();
5585
+ tab.element.scrollIntoView();
5586
+ tab.panel.api.setActive();
5587
+ });
5588
+ wrapper.appendChild(child);
5589
+ el.appendChild(wrapper);
5590
+ }
5591
+ this.accessor.popupService.openPopover(el, {
5592
+ x: event.clientX,
5593
+ y: event.clientY,
5594
+ });
5595
+ }));
5596
+ }
5185
5597
  }
5186
5598
 
5187
5599
  class DockviewUnhandledDragOverEvent extends AcceptableEvent {
@@ -5211,9 +5623,11 @@ const PROPERTY_KEYS_DOCKVIEW = (() => {
5211
5623
  rootOverlayModel: undefined,
5212
5624
  locked: undefined,
5213
5625
  disableDnd: undefined,
5214
- gap: undefined,
5215
5626
  className: undefined,
5216
5627
  noPanelsOverlay: undefined,
5628
+ dndEdges: undefined,
5629
+ theme: undefined,
5630
+ disableTabsOverflowList: undefined,
5217
5631
  };
5218
5632
  return Object.keys(properties);
5219
5633
  })();
@@ -5392,6 +5806,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
5392
5806
  this._location = { type: 'grid' };
5393
5807
  this.mostRecentlyUsed = [];
5394
5808
  this._overwriteRenderContainer = null;
5809
+ this._overwriteDropTargetContainer = null;
5395
5810
  this._onDidChange = new Emitter();
5396
5811
  this.onDidChange = this._onDidChange.event;
5397
5812
  this._width = 0;
@@ -5469,6 +5884,13 @@ class DockviewGroupPanelModel extends CompositeDisposable {
5469
5884
  var _a;
5470
5885
  return ((_a = this._overwriteRenderContainer) !== null && _a !== void 0 ? _a : this.accessor.overlayRenderContainer);
5471
5886
  }
5887
+ set dropTargetContainer(value) {
5888
+ this._overwriteDropTargetContainer = value;
5889
+ }
5890
+ get dropTargetContainer() {
5891
+ var _a;
5892
+ return ((_a = this._overwriteDropTargetContainer) !== null && _a !== void 0 ? _a : this.accessor.rootDropTargetContainer);
5893
+ }
5472
5894
  initialize() {
5473
5895
  if (this.options.panels) {
5474
5896
  this.options.panels.forEach((panel) => {
@@ -5817,6 +6239,25 @@ class DockviewGroupPanelModel extends CompositeDisposable {
5817
6239
  }
5818
6240
  const data = getPanelData();
5819
6241
  if (data && data.viewId === this.accessor.id) {
6242
+ if (type === 'content') {
6243
+ if (data.groupId === this.id) {
6244
+ // don't allow to drop on self for center position
6245
+ if (position === 'center') {
6246
+ return;
6247
+ }
6248
+ if (data.panelId === null) {
6249
+ // don't allow group move to drop anywhere on self
6250
+ return;
6251
+ }
6252
+ }
6253
+ }
6254
+ if (type === 'header') {
6255
+ if (data.groupId === this.id) {
6256
+ if (data.panelId === null) {
6257
+ return;
6258
+ }
6259
+ }
6260
+ }
5820
6261
  if (data.panelId === null) {
5821
6262
  // this is a group move dnd event
5822
6263
  const { groupId } = data;
@@ -6245,6 +6686,46 @@ class DockviewGroupPanel extends GridviewPanel {
6245
6686
  }
6246
6687
  }
6247
6688
 
6689
+ const themeDark = {
6690
+ name: 'dark',
6691
+ className: 'dockview-theme-dark',
6692
+ };
6693
+ const themeLight = {
6694
+ name: 'light',
6695
+ className: 'dockview-theme-light',
6696
+ };
6697
+ const themeVisualStudio = {
6698
+ name: 'visualStudio',
6699
+ className: 'dockview-theme-vs',
6700
+ };
6701
+ const themeAbyss = {
6702
+ name: 'abyss',
6703
+ className: 'dockview-theme-abyss',
6704
+ };
6705
+ const themeDracula = {
6706
+ name: 'dracula',
6707
+ className: 'dockview-theme-dracula',
6708
+ };
6709
+ const themeReplit = {
6710
+ name: 'replit',
6711
+ className: 'dockview-theme-replit',
6712
+ gap: 10,
6713
+ };
6714
+ const themeAbyssSpaced = {
6715
+ name: 'abyssSpaced',
6716
+ className: 'dockview-theme-abyss-spaced',
6717
+ gap: 10,
6718
+ dndOverlayMounting: 'absolute',
6719
+ dndPanelOverlay: 'group',
6720
+ };
6721
+ const themeLightSpaced = {
6722
+ name: 'lightSpaced',
6723
+ className: 'dockview-theme-light-spaced',
6724
+ gap: 10,
6725
+ dndOverlayMounting: 'absolute',
6726
+ dndPanelOverlay: 'group',
6727
+ };
6728
+
6248
6729
  class DockviewPanelApiImpl extends GridviewPanelApiImpl {
6249
6730
  get location() {
6250
6731
  return this.group.api.location;
@@ -6519,38 +7000,6 @@ class DockviewPanel extends CompositeDisposable {
6519
7000
  }
6520
7001
  }
6521
7002
 
6522
- const createSvgElementFromPath = (params) => {
6523
- const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
6524
- svg.setAttributeNS(null, 'height', params.height);
6525
- svg.setAttributeNS(null, 'width', params.width);
6526
- svg.setAttributeNS(null, 'viewBox', params.viewbox);
6527
- svg.setAttributeNS(null, 'aria-hidden', 'false');
6528
- svg.setAttributeNS(null, 'focusable', 'false');
6529
- svg.classList.add('dv-svg');
6530
- const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
6531
- path.setAttributeNS(null, 'd', params.path);
6532
- svg.appendChild(path);
6533
- return svg;
6534
- };
6535
- const createCloseButton = () => createSvgElementFromPath({
6536
- width: '11',
6537
- height: '11',
6538
- viewbox: '0 0 28 28',
6539
- 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',
6540
- });
6541
- const createExpandMoreButton = () => createSvgElementFromPath({
6542
- width: '11',
6543
- height: '11',
6544
- viewbox: '0 0 24 15',
6545
- path: 'M12 14.15L0 2.15L2.15 0L12 9.9L21.85 0.0499992L24 2.2L12 14.15Z',
6546
- });
6547
- const createChevronRightButton = () => createSvgElementFromPath({
6548
- width: '11',
6549
- height: '11',
6550
- viewbox: '0 0 15 25',
6551
- path: 'M2.15 24.1L0 21.95L9.9 12.05L0 2.15L2.15 0L14.2 12.05L2.15 24.1Z',
6552
- });
6553
-
6554
7003
  class DefaultTab extends CompositeDisposable {
6555
7004
  get element() {
6556
7005
  return this._element;
@@ -6607,12 +7056,21 @@ class DockviewPanelModel {
6607
7056
  this._content = this.createContentComponent(this.id, contentComponent);
6608
7057
  this._tab = this.createTabComponent(this.id, tabComponent);
6609
7058
  }
7059
+ createTabRenderer(tabLocation) {
7060
+ var _a;
7061
+ const cmp = this.createTabComponent(this.id, this.tabComponent);
7062
+ if (this._params) {
7063
+ cmp.init(Object.assign(Object.assign({}, this._params), { tabLocation }));
7064
+ }
7065
+ if (this._updateEvent) {
7066
+ (_a = cmp.update) === null || _a === void 0 ? void 0 : _a.call(cmp, this._updateEvent);
7067
+ }
7068
+ return cmp;
7069
+ }
6610
7070
  init(params) {
7071
+ this._params = params;
6611
7072
  this.content.init(params);
6612
- this.tab.init(params);
6613
- }
6614
- updateParentGroup(_group, _isPanelVisible) {
6615
- // noop
7073
+ this.tab.init(Object.assign(Object.assign({}, params), { tabLocation: 'header' }));
6616
7074
  }
6617
7075
  layout(width, height) {
6618
7076
  var _a, _b;
@@ -6620,6 +7078,7 @@ class DockviewPanelModel {
6620
7078
  }
6621
7079
  update(event) {
6622
7080
  var _a, _b, _c, _d;
7081
+ this._updateEvent = event;
6623
7082
  (_b = (_a = this.content).update) === null || _b === void 0 ? void 0 : _b.call(_a, event);
6624
7083
  (_d = (_c = this.tab).update) === null || _d === void 0 ? void 0 : _d.call(_c, event);
6625
7084
  }
@@ -7457,6 +7916,132 @@ class StrictEventsSequencing extends CompositeDisposable {
7457
7916
  }
7458
7917
  }
7459
7918
 
7919
+ class PopupService extends CompositeDisposable {
7920
+ constructor(root) {
7921
+ super();
7922
+ this.root = root;
7923
+ this._active = null;
7924
+ this._activeDisposable = new MutableDisposable();
7925
+ this._element = document.createElement('div');
7926
+ this._element.className = 'dv-popover-anchor';
7927
+ this._element.style.position = 'relative';
7928
+ this.root.prepend(this._element);
7929
+ this.addDisposables(Disposable.from(() => {
7930
+ this.close();
7931
+ }), this._activeDisposable);
7932
+ }
7933
+ openPopover(element, position) {
7934
+ this.close();
7935
+ const wrapper = document.createElement('div');
7936
+ wrapper.style.position = 'absolute';
7937
+ wrapper.style.zIndex = '99';
7938
+ wrapper.appendChild(element);
7939
+ const anchorBox = this._element.getBoundingClientRect();
7940
+ const offsetX = anchorBox.left;
7941
+ const offsetY = anchorBox.top;
7942
+ wrapper.style.top = `${position.y - offsetY}px`;
7943
+ wrapper.style.left = `${position.x - offsetX}px`;
7944
+ this._element.appendChild(wrapper);
7945
+ this._active = wrapper;
7946
+ this._activeDisposable.value = new CompositeDisposable(addDisposableWindowListener(window, 'pointerdown', (event) => {
7947
+ var _a;
7948
+ const target = event.target;
7949
+ if (!(target instanceof HTMLElement)) {
7950
+ return;
7951
+ }
7952
+ let el = target;
7953
+ while (el && el !== wrapper) {
7954
+ el = (_a = el === null || el === void 0 ? void 0 : el.parentElement) !== null && _a !== void 0 ? _a : null;
7955
+ }
7956
+ if (el) {
7957
+ return; // clicked within popover
7958
+ }
7959
+ this.close();
7960
+ }));
7961
+ }
7962
+ close() {
7963
+ if (this._active) {
7964
+ this._active.remove();
7965
+ this._activeDisposable.dispose();
7966
+ this._active = null;
7967
+ }
7968
+ }
7969
+ }
7970
+
7971
+ class DropTargetAnchorContainer extends CompositeDisposable {
7972
+ get disabled() {
7973
+ return this._disabled;
7974
+ }
7975
+ set disabled(value) {
7976
+ var _a;
7977
+ if (this.disabled === value) {
7978
+ return;
7979
+ }
7980
+ this._disabled = value;
7981
+ if (value) {
7982
+ (_a = this.model) === null || _a === void 0 ? void 0 : _a.clear();
7983
+ }
7984
+ }
7985
+ get model() {
7986
+ if (this.disabled) {
7987
+ return undefined;
7988
+ }
7989
+ return {
7990
+ clear: () => {
7991
+ var _a;
7992
+ if (this._model) {
7993
+ (_a = this._model.root.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this._model.root);
7994
+ }
7995
+ this._model = undefined;
7996
+ },
7997
+ exists: () => {
7998
+ return !!this._model;
7999
+ },
8000
+ getElements: (event, outline) => {
8001
+ const changed = this._outline !== outline;
8002
+ this._outline = outline;
8003
+ if (this._model) {
8004
+ this._model.changed = changed;
8005
+ return this._model;
8006
+ }
8007
+ const container = this.createContainer();
8008
+ const anchor = this.createAnchor();
8009
+ this._model = { root: container, overlay: anchor, changed };
8010
+ container.appendChild(anchor);
8011
+ this.element.appendChild(container);
8012
+ if ((event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement) {
8013
+ const targetBox = event.target.getBoundingClientRect();
8014
+ const box = this.element.getBoundingClientRect();
8015
+ anchor.style.left = `${targetBox.left - box.left}px`;
8016
+ anchor.style.top = `${targetBox.top - box.top}px`;
8017
+ }
8018
+ return this._model;
8019
+ },
8020
+ };
8021
+ }
8022
+ constructor(element, options) {
8023
+ super();
8024
+ this.element = element;
8025
+ this._disabled = false;
8026
+ this._disabled = options.disabled;
8027
+ this.addDisposables(Disposable.from(() => {
8028
+ var _a;
8029
+ (_a = this.model) === null || _a === void 0 ? void 0 : _a.clear();
8030
+ }));
8031
+ }
8032
+ createContainer() {
8033
+ const el = document.createElement('div');
8034
+ el.className = 'dv-drop-target-container';
8035
+ return el;
8036
+ }
8037
+ createAnchor() {
8038
+ const el = document.createElement('div');
8039
+ el.className = 'dv-drop-target-anchor';
8040
+ el.style.visibility = 'hidden';
8041
+ return el;
8042
+ }
8043
+ }
8044
+
7460
8045
  const DEFAULT_ROOT_OVERLAY_MODEL = {
7461
8046
  activationSize: { type: 'pixels', value: 10 },
7462
8047
  size: { type: 'pixels', value: 20 },
@@ -7502,14 +8087,11 @@ class DockviewComponent extends BaseGrid {
7502
8087
  get api() {
7503
8088
  return this._api;
7504
8089
  }
7505
- get gap() {
7506
- return this.gridview.margin;
7507
- }
7508
8090
  get floatingGroups() {
7509
8091
  return this._floatingGroups;
7510
8092
  }
7511
8093
  constructor(container, options) {
7512
- var _a;
8094
+ var _a, _b, _c;
7513
8095
  super(container, {
7514
8096
  proportionalLayout: true,
7515
8097
  orientation: Orientation.HORIZONTAL,
@@ -7518,12 +8100,12 @@ class DockviewComponent extends BaseGrid {
7518
8100
  : undefined,
7519
8101
  disableAutoResizing: options.disableAutoResizing,
7520
8102
  locked: options.locked,
7521
- margin: options.gap,
8103
+ margin: (_b = (_a = options.theme) === null || _a === void 0 ? void 0 : _a.gap) !== null && _b !== void 0 ? _b : 0,
7522
8104
  className: options.className,
7523
8105
  });
7524
8106
  this.nextGroupId = sequentialNumberGenerator();
7525
8107
  this._deserializer = new DefaultDockviewDeserialzier(this);
7526
- this.watermark = null;
8108
+ this._watermark = null;
7527
8109
  this._onWillDragPanel = new Emitter();
7528
8110
  this.onWillDragPanel = this._onWillDragPanel.event;
7529
8111
  this._onWillDragGroup = new Emitter();
@@ -7554,16 +8136,22 @@ class DockviewComponent extends BaseGrid {
7554
8136
  this.onDidRemoveGroup = this._onDidRemoveGroup.event;
7555
8137
  this._onDidAddGroup = new Emitter();
7556
8138
  this.onDidAddGroup = this._onDidAddGroup.event;
8139
+ this._onDidOptionsChange = new Emitter();
8140
+ this.onDidOptionsChange = this._onDidOptionsChange.event;
7557
8141
  this._onDidActiveGroupChange = new Emitter();
7558
8142
  this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
7559
8143
  this._moving = false;
8144
+ this.popupService = new PopupService(this.element);
8145
+ this.updateDropTargetModel(options);
8146
+ this._themeClassnames = new Classnames(this.element);
8147
+ this.rootDropTargetContainer = new DropTargetAnchorContainer(this.element, { disabled: true });
7560
8148
  this.overlayRenderContainer = new OverlayRenderContainer(this.gridview.element, this);
7561
8149
  toggleClass(this.gridview.element, 'dv-dockview', true);
7562
8150
  toggleClass(this.element, 'dv-debug', !!options.debug);
7563
8151
  if (options.debug) {
7564
8152
  this.addDisposables(new StrictEventsSequencing(this));
7565
8153
  }
7566
- 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(() => {
8154
+ 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(() => {
7567
8155
  this.updateWatermark();
7568
8156
  }), this.onDidAdd((event) => {
7569
8157
  if (!this._moving) {
@@ -7597,7 +8185,9 @@ class DockviewComponent extends BaseGrid {
7597
8185
  }
7598
8186
  }));
7599
8187
  this._options = options;
8188
+ this.updateTheme();
7600
8189
  this._rootDropTarget = new Droptarget(this.element, {
8190
+ className: 'dv-drop-target-edge',
7601
8191
  canDisplayOverlay: (event, position) => {
7602
8192
  const data = getPanelData();
7603
8193
  if (data) {
@@ -7624,7 +8214,8 @@ class DockviewComponent extends BaseGrid {
7624
8214
  return firedEvent.isAccepted;
7625
8215
  },
7626
8216
  acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
7627
- overlayModel: (_a = this.options.rootOverlayModel) !== null && _a !== void 0 ? _a : DEFAULT_ROOT_OVERLAY_MODEL,
8217
+ overlayModel: (_c = this.options.rootOverlayModel) !== null && _c !== void 0 ? _c : DEFAULT_ROOT_OVERLAY_MODEL,
8218
+ getOverrideTarget: () => { var _a; return (_a = this.rootDropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
7628
8219
  });
7629
8220
  this.addDisposables(this._rootDropTarget, this._rootDropTarget.onWillShowOverlay((event) => {
7630
8221
  if (this.gridview.length > 0 && event.position === 'center') {
@@ -7802,6 +8393,10 @@ class DockviewComponent extends BaseGrid {
7802
8393
  popoutContainer.style.overflow = 'hidden';
7803
8394
  popoutContainer.appendChild(gready);
7804
8395
  popoutContainer.appendChild(group.element);
8396
+ const anchor = document.createElement('div');
8397
+ const dropTargetContainer = new DropTargetAnchorContainer(anchor, { disabled: this.rootDropTargetContainer.disabled });
8398
+ popoutContainer.appendChild(anchor);
8399
+ group.model.dropTargetContainer = dropTargetContainer;
7805
8400
  group.model.location = {
7806
8401
  type: 'popout',
7807
8402
  getWindow: () => _window.window,
@@ -7868,6 +8463,8 @@ class DockviewComponent extends BaseGrid {
7868
8463
  else if (this.getPanel(group.id)) {
7869
8464
  group.model.renderContainer =
7870
8465
  this.overlayRenderContainer;
8466
+ group.model.dropTargetContainer =
8467
+ this.rootDropTargetContainer;
7871
8468
  returnedGroup = group;
7872
8469
  const alreadyRemoved = !this._popoutGroups.find((p) => p.popoutGroup === group);
7873
8470
  if (alreadyRemoved) {
@@ -8088,7 +8685,7 @@ class DockviewComponent extends BaseGrid {
8088
8685
  }
8089
8686
  }
8090
8687
  updateOptions(options) {
8091
- var _a, _b, _c, _d;
8688
+ var _a, _b;
8092
8689
  super.updateOptions(options);
8093
8690
  if ('floatingGroupBounds' in options) {
8094
8691
  for (const group of this._floatingGroups) {
@@ -8112,13 +8709,11 @@ class DockviewComponent extends BaseGrid {
8112
8709
  group.overlay.setBounds();
8113
8710
  }
8114
8711
  }
8115
- if ('rootOverlayModel' in options) {
8116
- this._rootDropTarget.setOverlayModel((_c = options.rootOverlayModel) !== null && _c !== void 0 ? _c : DEFAULT_ROOT_OVERLAY_MODEL);
8117
- }
8118
- if ('gap' in options) {
8119
- this.gridview.margin = (_d = options.gap) !== null && _d !== void 0 ? _d : 0;
8120
- }
8712
+ this.updateDropTargetModel(options);
8121
8713
  this._options = Object.assign(Object.assign({}, this.options), options);
8714
+ if ('theme' in options) {
8715
+ this.updateTheme();
8716
+ }
8122
8717
  this.layout(this.gridview.width, this.gridview.height, true);
8123
8718
  }
8124
8719
  layout(width, height, forceResize) {
@@ -8536,22 +9131,22 @@ class DockviewComponent extends BaseGrid {
8536
9131
  updateWatermark() {
8537
9132
  var _a, _b;
8538
9133
  if (this.groups.filter((x) => x.api.location.type === 'grid' && x.api.isVisible).length === 0) {
8539
- if (!this.watermark) {
8540
- this.watermark = this.createWatermarkComponent();
8541
- this.watermark.init({
9134
+ if (!this._watermark) {
9135
+ this._watermark = this.createWatermarkComponent();
9136
+ this._watermark.init({
8542
9137
  containerApi: new DockviewApi(this),
8543
9138
  });
8544
9139
  const watermarkContainer = document.createElement('div');
8545
9140
  watermarkContainer.className = 'dv-watermark-container';
8546
9141
  addTestId(watermarkContainer, 'watermark-component');
8547
- watermarkContainer.appendChild(this.watermark.element);
9142
+ watermarkContainer.appendChild(this._watermark.element);
8548
9143
  this.gridview.element.appendChild(watermarkContainer);
8549
9144
  }
8550
9145
  }
8551
- else if (this.watermark) {
8552
- this.watermark.element.parentElement.remove();
8553
- (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
8554
- this.watermark = null;
9146
+ else if (this._watermark) {
9147
+ this._watermark.element.parentElement.remove();
9148
+ (_b = (_a = this._watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
9149
+ this._watermark = null;
8555
9150
  }
8556
9151
  }
8557
9152
  addGroup(options) {
@@ -9037,6 +9632,38 @@ class DockviewComponent extends BaseGrid {
9037
9632
  ? rootOrientation
9038
9633
  : orthogonal(rootOrientation);
9039
9634
  }
9635
+ updateDropTargetModel(options) {
9636
+ if ('dndEdges' in options) {
9637
+ this._rootDropTarget.disabled =
9638
+ typeof options.dndEdges === 'boolean' &&
9639
+ options.dndEdges === false;
9640
+ if (typeof options.dndEdges === 'object' &&
9641
+ options.dndEdges !== null) {
9642
+ this._rootDropTarget.setOverlayModel(options.dndEdges);
9643
+ }
9644
+ else {
9645
+ this._rootDropTarget.setOverlayModel(DEFAULT_ROOT_OVERLAY_MODEL);
9646
+ }
9647
+ }
9648
+ if ('rootOverlayModel' in options) {
9649
+ this.updateDropTargetModel({ dndEdges: options.dndEdges });
9650
+ }
9651
+ }
9652
+ updateTheme() {
9653
+ var _a, _b;
9654
+ const theme = (_a = this._options.theme) !== null && _a !== void 0 ? _a : themeAbyss;
9655
+ this._themeClassnames.setClassNames(theme.className);
9656
+ this.gridview.margin = (_b = theme.gap) !== null && _b !== void 0 ? _b : 0;
9657
+ switch (theme.dndOverlayMounting) {
9658
+ case 'absolute':
9659
+ this.rootDropTargetContainer.disabled = false;
9660
+ break;
9661
+ case 'relative':
9662
+ default:
9663
+ this.rootDropTargetContainer.disabled = true;
9664
+ break;
9665
+ }
9666
+ }
9040
9667
  }
9041
9668
 
9042
9669
  class GridviewComponent extends BaseGrid {
@@ -9560,6 +10187,7 @@ class SplitviewComponent extends Resizable {
9560
10187
  for (const view of views) {
9561
10188
  view.dispose();
9562
10189
  }
10190
+ this.element.remove();
9563
10191
  super.dispose();
9564
10192
  }
9565
10193
  }
@@ -9900,6 +10528,7 @@ class PaneviewComponent extends Resizable {
9900
10528
  value.dispose();
9901
10529
  }
9902
10530
  this._viewDisposables.clear();
10531
+ this.element.remove();
9903
10532
  this.paneview.dispose();
9904
10533
  }
9905
10534
  }
@@ -10217,6 +10846,7 @@ class ReactPanelHeaderPart {
10217
10846
  params: parameters.params,
10218
10847
  api: parameters.api,
10219
10848
  containerApi: parameters.containerApi,
10849
+ tabLocation: parameters.tabLocation,
10220
10850
  });
10221
10851
  }
10222
10852
  update(event) {
@@ -10522,7 +11152,7 @@ const DockviewReact = React.forwardRef((props, ref) => {
10522
11152
  });
10523
11153
  DockviewReact.displayName = 'DockviewComponent';
10524
11154
 
10525
- const CloseButton = () => (React.createElement("svg", { height: "11", width: "11", viewBox: "0 0 28 28", "aria-hidden": 'false', focusable: false, className: "dockview-svg" },
11155
+ const CloseButton = () => (React.createElement("svg", { height: "11", width: "11", viewBox: "0 0 28 28", "aria-hidden": 'false', focusable: false, className: "dv-svg" },
10526
11156
  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" })));
10527
11157
 
10528
11158
  var __rest = (undefined && undefined.__rest) || function (s, e) {
@@ -10549,7 +11179,7 @@ function useTitle(api) {
10549
11179
  return title;
10550
11180
  }
10551
11181
  const DockviewDefaultTab = (_a) => {
10552
- var { api, containerApi: _containerApi, params: _params, hideClose, closeActionOverride, onPointerDown, onPointerUp, onPointerLeave } = _a, rest = __rest(_a, ["api", "containerApi", "params", "hideClose", "closeActionOverride", "onPointerDown", "onPointerUp", "onPointerLeave"]);
11182
+ 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"]);
10553
11183
  const title = useTitle(api);
10554
11184
  const isMiddleMouseButton = React.useRef(false);
10555
11185
  const onClose = React.useCallback((event) => {
@@ -10581,7 +11211,7 @@ const DockviewDefaultTab = (_a) => {
10581
11211
  }, [onPointerLeave]);
10582
11212
  return (React.createElement("div", Object.assign({ "data-testid": "dockview-dv-default-tab" }, rest, { onPointerDown: _onPointerDown, onPointerUp: _onPointerUp, onPointerLeave: _onPointerLeave, className: "dv-default-tab" }),
10583
11213
  React.createElement("span", { className: "dv-default-tab-content" }, title),
10584
- !hideClose && (React.createElement("div", { className: "dv-default-tab-action", onPointerDown: onBtnPointerDown, onClick: onClose },
11214
+ !hideClose && tabLocation !== 'headerOverflow' && (React.createElement("div", { className: "dv-default-tab-action", onPointerDown: onBtnPointerDown, onClick: onClose },
10585
11215
  React.createElement(CloseButton, null)))));
10586
11216
  };
10587
11217
 
@@ -10881,5 +11511,5 @@ const PaneviewReact = React.forwardRef((props, ref) => {
10881
11511
  });
10882
11512
  PaneviewReact.displayName = 'PaneviewComponent';
10883
11513
 
10884
- export { BaseGrid, ContentContainer, DefaultDockviewDeserialzier, DefaultTab, DockviewApi, DockviewComponent, CompositeDisposable as DockviewCompositeDisposable, DockviewDefaultTab, DockviewDidDropEvent, Disposable as DockviewDisposable, Emitter as DockviewEmitter, Event as DockviewEvent, DockviewGroupPanel, DockviewGroupPanelModel, MutableDisposable as DockviewMutableDisposable, DockviewPanel, DockviewReact, DockviewUnhandledDragOverEvent, DockviewWillDropEvent, DraggablePaneviewPanel, Gridview, GridviewApi, GridviewComponent, GridviewPanel, GridviewReact, LayoutPriority, Orientation, PROPERTY_KEYS_DOCKVIEW, PROPERTY_KEYS_GRIDVIEW, PROPERTY_KEYS_PANEVIEW, PROPERTY_KEYS_SPLITVIEW, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, PaneviewReact, PaneviewUnhandledDragOverEvent, ReactPart, ReactPartContext, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, SplitviewReact, Tab, WillShowOverlayLocationEvent, createDockview, createGridview, createPaneview, createSplitview, directionToPosition, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRelativeLocation, indexInParent, isGridBranchNode, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, isReactComponent, orthogonal, positionToDirection, toTarget, usePortalsLifecycle };
11514
+ export { BaseGrid, ContentContainer, DefaultDockviewDeserialzier, DefaultTab, DockviewApi, DockviewComponent, CompositeDisposable as DockviewCompositeDisposable, DockviewDefaultTab, DockviewDidDropEvent, Disposable as DockviewDisposable, Emitter as DockviewEmitter, Event as DockviewEvent, DockviewGroupPanel, DockviewGroupPanelModel, MutableDisposable as DockviewMutableDisposable, DockviewPanel, DockviewReact, DockviewUnhandledDragOverEvent, DockviewWillDropEvent, DraggablePaneviewPanel, Gridview, GridviewApi, GridviewComponent, GridviewPanel, GridviewReact, LayoutPriority, Orientation, PROPERTY_KEYS_DOCKVIEW, PROPERTY_KEYS_GRIDVIEW, PROPERTY_KEYS_PANEVIEW, PROPERTY_KEYS_SPLITVIEW, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, PaneviewReact, PaneviewUnhandledDragOverEvent, ReactPart, ReactPartContext, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, SplitviewReact, Tab, WillShowOverlayLocationEvent, createDockview, createGridview, createPaneview, createSplitview, directionToPosition, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRelativeLocation, indexInParent, isGridBranchNode, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, isReactComponent, orthogonal, positionToDirection, themeAbyss, themeAbyssSpaced, themeDark, themeDracula, themeLight, themeLightSpaced, themeReplit, themeVisualStudio, toTarget, usePortalsLifecycle };
10885
11515
  //# sourceMappingURL=dockview-react.esm.js.map