dockview-react 1.14.1 → 1.15.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 +347 -139
  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 +346 -138
  8. package/dist/dockview-react.amd.noStyle.js.map +1 -1
  9. package/dist/dockview-react.cjs.js +347 -139
  10. package/dist/dockview-react.cjs.js.map +1 -1
  11. package/dist/dockview-react.esm.js +347 -139
  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 +347 -139
  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 +346 -138
  22. package/dist/dockview-react.noStyle.js.map +1 -1
  23. package/dist/styles/dockview.css +0 -13
  24. package/package.json +2 -2
package/dist/dockview-react.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * dockview-react
3
- * @version 1.14.1
3
+ * @version 1.15.0
4
4
  * @link https://github.com/mathuo/dockview
5
5
  * @license MIT
6
6
  */
@@ -37,7 +37,7 @@
37
37
  }
38
38
  }
39
39
 
40
- var css_248z = ".dv-render-overlay {\n position: absolute;\n z-index: 1;\n height: 100%;\n}\n.dv-render-overlay.dv-render-overlay-float {\n z-index: 999;\n}\n\n.dv-debug .dv-render-overlay {\n outline: 1px solid red;\n outline-offset: -1;\n}\n.dockview-svg {\n display: inline-block;\n fill: currentcolor;\n line-height: 1;\n stroke: currentcolor;\n stroke-width: 0;\n}\n.dockview-theme-dark {\n --dv-background-color: black;\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-group-view-background-color: #1e1e1e;\n --dv-tabs-and-actions-container-background-color: #252526;\n --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-tab-divider-color: #1e1e1e;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: #969696;\n --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n --dv-separator-border: rgb(68, 68, 68);\n --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n}\n\n.dockview-theme-light {\n --dv-background-color: black;\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-group-view-background-color: white;\n --dv-tabs-and-actions-container-background-color: #f3f3f3;\n --dv-activegroup-visiblepanel-tab-background-color: white;\n --dv-activegroup-hiddenpanel-tab-background-color: #ececec;\n --dv-inactivegroup-visiblepanel-tab-background-color: white;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #ececec;\n --dv-tab-divider-color: white;\n --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n --dv-activegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.7);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(51, 51, 51, 0.7);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.35);\n --dv-separator-border: rgba(128, 128, 128, 0.35);\n --dv-paneview-header-border-color: rgb(51, 51, 51);\n}\n\n.dockview-theme-vs {\n --dv-background-color: black;\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-group-view-background-color: #1e1e1e;\n --dv-tabs-and-actions-container-background-color: #252526;\n --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-tab-divider-color: #1e1e1e;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: #969696;\n --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n --dv-separator-border: rgb(68, 68, 68);\n --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n --dv-tabs-and-actions-container-background-color: #2d2d30;\n --dv-tabs-and-actions-container-height: 20px;\n --dv-tabs-and-actions-container-font-size: 11px;\n --dv-activegroup-visiblepanel-tab-background-color: #007acc;\n --dv-inactivegroup-visiblepanel-tab-background-color: #3f3f46;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: white;\n --dv-inactivegroup-visiblepanel-tab-color: white;\n --dv-inactivegroup-hiddenpanel-tab-color: white;\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container {\n box-sizing: content-box;\n border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.active-tab {\n border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.inactive-tab {\n border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container {\n box-sizing: content-box;\n border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.active-tab {\n border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.inactive-tab {\n border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n}\n\n.dockview-theme-abyss {\n --dv-background-color: black;\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-group-view-background-color: #000c18;\n --dv-tabs-and-actions-container-background-color: #1c1c2a;\n --dv-activegroup-visiblepanel-tab-background-color: #000c18;\n --dv-activegroup-hiddenpanel-tab-background-color: #10192c;\n --dv-inactivegroup-visiblepanel-tab-background-color: #000c18;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #10192c;\n --dv-tab-divider-color: #2b2b4a;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);\n --dv-separator-border: #2b2b4a;\n --dv-paneview-header-border-color: #2b2b4a;\n --dv-paneview-active-outline-color: #596f99;\n}\n\n.dockview-theme-dracula {\n --dv-background-color: black;\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-group-view-background-color: #282a36;\n --dv-tabs-and-actions-container-background-color: #191a21;\n --dv-activegroup-visiblepanel-tab-background-color: #282a36;\n --dv-activegroup-hiddenpanel-tab-background-color: #21222c;\n --dv-inactivegroup-visiblepanel-tab-background-color: #282a36;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #21222c;\n --dv-tab-divider-color: #191a21;\n --dv-activegroup-visiblepanel-tab-color: rgb(248, 248, 242);\n --dv-activegroup-hiddenpanel-tab-color: rgb(98, 114, 164);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(98, 114, 164, 0.5);\n --dv-separator-border: #bd93f9;\n --dv-paneview-header-border-color: #bd93f9;\n --dv-paneview-active-outline-color: #6272a4;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n position: relative;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n position: absolute;\n left: 0px;\n top: 0px;\n content: \"\";\n width: 100%;\n height: 1px;\n background-color: #94527e;\n z-index: 999;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n position: relative;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n position: absolute;\n left: 0px;\n bottom: 0px;\n content: \"\";\n width: 100%;\n height: 1px;\n background-color: #5e3d5a;\n z-index: 999;\n}\n\n.dockview-theme-replit {\n --dv-background-color: black;\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-group-gap-size: 3px;\n --dv-group-view-background-color: #ebeced;\n --dv-tabs-and-actions-container-background-color: #fcfcfc;\n --dv-activegroup-visiblepanel-tab-background-color: #f0f1f2;\n --dv-activegroup-hiddenpanel-tab-background-color: ##fcfcfc;\n --dv-inactivegroup-visiblepanel-tab-background-color: #f0f1f2;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #fcfcfc;\n --dv-tab-divider-color: transparent;\n --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n --dv-activegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n --dv-inactivegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n --dv-inactivegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n --dv-separator-border: transparent;\n --dv-paneview-header-border-color: rgb(51, 51, 51);\n --dv-background-color: #ebeced;\n --dv-separator-handle-background-color: #cfd1d3;\n --dv-separator-handle-hover-background-color: #babbbb;\n}\n.dockview-theme-replit .dv-resize-container:has(> .groupview) {\n border-radius: 8px;\n}\n.dockview-theme-replit .groupview {\n overflow: hidden;\n border-radius: 10px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container {\n border-bottom: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab {\n margin: 4px;\n border-radius: 8px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab .dockview-svg {\n height: 8px;\n width: 8px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab:hover {\n background-color: #e4e5e6 !important;\n}\n.dockview-theme-replit .groupview .content-container {\n background-color: #fcfcfc;\n}\n.dockview-theme-replit .groupview.active-group {\n border: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .groupview.inactive-group {\n border: 1px solid transparent;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash::after {\n content: \"\";\n height: 4px;\n width: 40px;\n border-radius: 2px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--dv-separator-handle-background-color);\n position: absolute;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash:hover::after {\n background-color: var(--dv-separator-handle-hover-background-color);\n}\n.dockview-theme-replit .horizontal > .sash-container > .sash::after {\n content: \"\";\n height: 40px;\n width: 4px;\n border-radius: 2px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--dv-separator-handle-background-color);\n position: absolute;\n}\n.dockview-theme-replit .horizontal > .sash-container > .sash:hover::after {\n background-color: var(--dv-separator-handle-hover-background-color);\n}\n.drop-target {\n position: relative;\n}\n.drop-target > .drop-target-dropzone {\n position: absolute;\n left: 0px;\n top: 0px;\n height: 100%;\n width: 100%;\n z-index: 1000;\n pointer-events: none;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection {\n position: relative;\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n background-color: var(--dv-drag-over-background-color);\n transition: top 70ms ease-out, left 70ms ease-out, width 70ms ease-out, height 70ms ease-out, opacity 0.15s ease-out;\n will-change: transform;\n pointer-events: none;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-top.dv-drop-target-small-vertical {\n border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical {\n border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal {\n border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {\n border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-debug .dv-resize-container .dv-resize-handle-top {\n background-color: red;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-bottom {\n background-color: green;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-left {\n background-color: yellow;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-right {\n background-color: blue;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-topleft,\n.dv-debug .dv-resize-container .dv-resize-handle-topright,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomleft,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomright {\n background-color: cyan;\n}\n\n.dv-resize-container {\n position: absolute;\n z-index: 997;\n border: 1px solid var(--dv-tab-divider-color);\n box-shadow: var(--dv-floating-box-shadow);\n}\n.dv-resize-container.dv-bring-to-front {\n z-index: 998;\n}\n.dv-resize-container.dv-resize-container-dragging {\n opacity: 0.5;\n}\n.dv-resize-container .dv-resize-handle-top {\n height: 4px;\n width: calc(100% - 8px);\n left: 4px;\n top: -2px;\n z-index: 999;\n position: absolute;\n cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-bottom {\n height: 4px;\n width: calc(100% - 8px);\n left: 4px;\n bottom: -2px;\n z-index: 999;\n position: absolute;\n cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-left {\n height: calc(100% - 8px);\n width: 4px;\n left: -2px;\n top: 4px;\n z-index: 999;\n position: absolute;\n cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-right {\n height: calc(100% - 8px);\n width: 4px;\n right: -2px;\n top: 4px;\n z-index: 999;\n position: absolute;\n cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-topleft {\n height: 4px;\n width: 4px;\n top: -2px;\n left: -2px;\n z-index: 999;\n position: absolute;\n cursor: nw-resize;\n}\n.dv-resize-container .dv-resize-handle-topright {\n height: 4px;\n width: 4px;\n right: -2px;\n top: -2px;\n z-index: 999;\n position: absolute;\n cursor: ne-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomleft {\n height: 4px;\n width: 4px;\n left: -2px;\n bottom: -2px;\n z-index: 999;\n position: absolute;\n cursor: sw-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomright {\n height: 4px;\n width: 4px;\n right: -2px;\n bottom: -2px;\n z-index: 999;\n position: absolute;\n cursor: se-resize;\n}\n.dv-dockview {\n position: relative;\n background-color: var(--dv-group-view-background-color);\n}\n.dv-dockview .dv-watermark-container {\n position: absolute;\n top: 0px;\n left: 0px;\n height: 100%;\n width: 100%;\n z-index: 1;\n}\n.dv-dockview .dv-overlay-render-container {\n position: relative;\n}\n.dv-dockview .split-view-container.horizontal > .view-container > .view:not(:last-child) .groupview {\n border-right: var(--dv-group-gap-size) solid transparent;\n}\n.dv-dockview .split-view-container.horizontal > .view-container > .view:not(:first-child) .groupview {\n border-left: var(--dv-group-gap-size) solid transparent;\n}\n.dv-dockview .split-view-container.vertical > .view-container > .view:not(:last-child) .groupview {\n border-bottom: var(--dv-group-gap-size) solid transparent;\n}\n.dv-dockview .split-view-container.vertical > .view-container > .view:not(:first-child) .groupview {\n border-top: var(--dv-group-gap-size) solid transparent;\n}\n\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);\n color: var(--dv-inactivegroup-visiblepanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n color: var(--dv-inactivegroup-hiddenpanel-tab-color);\n}\n\n/**\n * when a tab is dragged we lose the above stylings because they are conditional on parent elements\n * therefore we also set some stylings for the dragging event\n **/\n.tab.dv-tab-dragging {\n background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.groupview {\n display: flex;\n flex-direction: column;\n height: 100%;\n background-color: var(--dv-group-view-background-color);\n overflow: hidden;\n}\n.groupview:focus {\n outline: none;\n}\n.groupview.empty > .tabs-and-actions-container {\n display: none;\n}\n.groupview > .content-container {\n flex-grow: 1;\n min-height: 0;\n outline: none;\n}\n.dv-root-wrapper {\n height: 100%;\n width: 100%;\n}\n.grid-view,\n.branch-node {\n height: 100%;\n width: 100%;\n}\n.pane-container {\n height: 100%;\n width: 100%;\n}\n.pane-container.animated .view {\n transition-duration: 0.15s;\n transition-timing-function: ease-out;\n}\n.pane-container .view {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n padding: 0px !important;\n}\n.pane-container .view:not(:first-child)::before {\n background-color: transparent !important;\n}\n.pane-container .view:not(:first-child) .pane > .pane-header {\n border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.pane-container .view .default-header {\n background-color: var(--dv-group-view-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n display: flex;\n padding: 0px 8px;\n cursor: pointer;\n}\n.pane-container .view .default-header .dockview-pane-header-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.pane-container .view .default-header > span {\n padding-left: 8px;\n flex-grow: 1;\n}\n.pane-container:first-of-type > .pane > .pane-header {\n border-top: none !important;\n}\n.pane-container .pane {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n height: 100%;\n}\n.pane-container .pane .pane-header {\n box-sizing: border-box;\n user-select: none;\n position: relative;\n outline: none;\n}\n.pane-container .pane .pane-header.pane-draggable {\n cursor: pointer;\n}\n.pane-container .pane .pane-header:focus:before, .pane-container .pane .pane-header:focus-within:before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n content: \"\";\n pointer-events: none;\n outline: 1px solid;\n outline-width: -1px;\n outline-style: solid;\n outline-offset: -1px;\n outline-color: var(--dv-paneview-active-outline-color);\n}\n.pane-container .pane .pane-body {\n overflow-y: auto;\n overflow-x: hidden;\n flex-grow: 1;\n position: relative;\n outline: none;\n}\n.pane-container .pane .pane-body:focus:before, .pane-container .pane .pane-body:focus-within:before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n content: \"\";\n pointer-events: none;\n outline: 1px solid;\n outline-width: -1px;\n outline-style: solid;\n outline-offset: -1px;\n outline-color: var(--dv-paneview-active-outline-color);\n}\n.dv-debug .split-view-container .sash-container .sash.enabled {\n background-color: black;\n}\n.dv-debug .split-view-container .sash-container .sash.disabled {\n background-color: orange;\n}\n.dv-debug .split-view-container .sash-container .sash.maximum {\n background-color: green;\n}\n.dv-debug .split-view-container .sash-container .sash.minimum {\n background-color: red;\n}\n\n.split-view-container {\n position: relative;\n overflow: hidden;\n height: 100%;\n width: 100%;\n}\n.split-view-container.dv-splitview-disabled > .sash-container > .sash {\n pointer-events: none;\n}\n.split-view-container.animation .view,\n.split-view-container.animation .sash {\n transition-duration: 0.15s;\n transition-timing-function: ease-out;\n}\n.split-view-container.horizontal {\n height: 100%;\n}\n.split-view-container.horizontal > .sash-container > .sash {\n height: 100%;\n width: 4px;\n}\n.split-view-container.horizontal > .sash-container > .sash.enabled {\n cursor: ew-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.disabled {\n cursor: default;\n}\n.split-view-container.horizontal > .sash-container > .sash.maximum {\n cursor: w-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.minimum {\n cursor: e-resize;\n}\n.split-view-container.horizontal > .view-container > .view:not(:first-child)::before {\n height: 100%;\n width: 1px;\n}\n.split-view-container.vertical {\n width: 100%;\n}\n.split-view-container.vertical > .sash-container > .sash {\n width: 100%;\n height: 4px;\n}\n.split-view-container.vertical > .sash-container > .sash.enabled {\n cursor: ns-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.disabled {\n cursor: default;\n}\n.split-view-container.vertical > .sash-container > .sash.maximum {\n cursor: n-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.minimum {\n cursor: s-resize;\n}\n.split-view-container.vertical > .view-container > .view {\n width: 100%;\n}\n.split-view-container.vertical > .view-container > .view:not(:first-child)::before {\n height: 1px;\n width: 100%;\n}\n.split-view-container .sash-container {\n height: 100%;\n width: 100%;\n position: absolute;\n}\n.split-view-container .sash-container .sash {\n position: absolute;\n z-index: 99;\n outline: none;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n touch-action: none;\n}\n.split-view-container .sash-container .sash:not(.disabled):active {\n transition: background-color 0.1s ease-in-out;\n background-color: var(--dv-active-sash-color, transparent);\n}\n.split-view-container .sash-container .sash:not(.disabled):hover {\n background-color: var(--dv-active-sash-color, transparent);\n transition: background-color 0.1s ease-in-out;\n transition-delay: 0.5s;\n}\n.split-view-container .view-container {\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--dv-background-color);\n}\n.split-view-container .view-container .view {\n height: 100%;\n box-sizing: border-box;\n overflow: auto;\n position: absolute;\n}\n.split-view-container.separator-border .view:not(:first-child)::before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n z-index: 5;\n pointer-events: none;\n background-color: var(--dv-separator-border);\n}\n.dv-dragged {\n transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */\n}\n\n.tab {\n flex-shrink: 0;\n}\n.tab:focus-within, .tab:focus {\n position: relative;\n}\n.tab:focus-within::after, .tab:focus::after {\n position: absolute;\n content: \"\";\n height: 100%;\n width: 100%;\n top: 0px;\n left: 0px;\n pointer-events: none;\n outline: 1px solid var(--dv-tab-divider-color) !important;\n outline-offset: -1px;\n z-index: 5;\n}\n.tab.dv-tab-dragging .dv-default-tab-action {\n background-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.tab.active-tab .dv-default-tab .dv-default-tab-action {\n visibility: visible;\n}\n.tab.inactive-tab .dv-default-tab .dv-default-tab-action {\n visibility: hidden;\n}\n.tab.inactive-tab .dv-default-tab:hover .dv-default-tab-action {\n visibility: visible;\n}\n.tab .dv-default-tab {\n position: relative;\n height: 100%;\n display: flex;\n min-width: 80px;\n align-items: center;\n padding: 0px 8px;\n white-space: nowrap;\n text-overflow: elipsis;\n}\n.tab .dv-default-tab .dv-default-tab-content {\n padding: 0px 8px;\n flex-grow: 1;\n}\n.tab .dv-default-tab .dv-default-tab-action {\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n}\n.tab .dv-default-tab .dv-default-tab-action:hover {\n border-radius: 2px;\n background-color: var(--dv-icon-hover-background-color);\n}\n.tabs-and-actions-container {\n display: flex;\n background-color: var(--dv-tabs-and-actions-container-background-color);\n flex-shrink: 0;\n box-sizing: border-box;\n height: var(--dv-tabs-and-actions-container-height);\n font-size: var(--dv-tabs-and-actions-container-font-size);\n}\n.tabs-and-actions-container.hidden {\n display: none;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .tabs-container {\n flex-grow: 1;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .tabs-container .tab {\n flex-grow: 1;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .void-container {\n flex-grow: 0;\n}\n.tabs-and-actions-container .void-container {\n display: flex;\n flex-grow: 1;\n cursor: grab;\n}\n.tabs-and-actions-container .tabs-container {\n display: flex;\n overflow-x: overlay;\n overflow-y: hidden;\n scrollbar-width: thin;\n /* Track */\n /* Handle */\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar {\n height: 3px;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-track {\n background: transparent;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-thumb {\n background: var(--dv-tabs-container-scrollbar-color);\n}\n.tabs-and-actions-container .tabs-container .tab {\n -webkit-user-drag: element;\n outline: none;\n min-width: 75px;\n cursor: pointer;\n position: relative;\n box-sizing: border-box;\n}\n.tabs-and-actions-container .tabs-container .tab:not(:first-child)::before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n z-index: 5;\n pointer-events: none;\n background-color: var(--dv-tab-divider-color);\n width: 1px;\n height: 100%;\n}\n.watermark {\n display: flex;\n width: 100%;\n}\n.watermark.has-actions .watermark-title .actions-container {\n display: none;\n}\n.watermark .watermark-title {\n height: 35px;\n width: 100%;\n display: flex;\n}\n.watermark .watermark-content {\n flex-grow: 1;\n}\n.watermark .actions-container {\n display: flex;\n align-items: center;\n padding: 0px 8px;\n}\n.watermark .actions-container .close-action {\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n cursor: pointer;\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.watermark .actions-container .close-action:hover {\n border-radius: 2px;\n background-color: var(--dv-icon-hover-background-color);\n}";
40
+ var css_248z = ".dv-render-overlay {\n position: absolute;\n z-index: 1;\n height: 100%;\n}\n.dv-render-overlay.dv-render-overlay-float {\n z-index: 999;\n}\n\n.dv-debug .dv-render-overlay {\n outline: 1px solid red;\n outline-offset: -1;\n}\n.dockview-svg {\n display: inline-block;\n fill: currentcolor;\n line-height: 1;\n stroke: currentcolor;\n stroke-width: 0;\n}\n.dockview-theme-dark {\n --dv-background-color: black;\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-group-view-background-color: #1e1e1e;\n --dv-tabs-and-actions-container-background-color: #252526;\n --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-tab-divider-color: #1e1e1e;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: #969696;\n --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n --dv-separator-border: rgb(68, 68, 68);\n --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n}\n\n.dockview-theme-light {\n --dv-background-color: black;\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-group-view-background-color: white;\n --dv-tabs-and-actions-container-background-color: #f3f3f3;\n --dv-activegroup-visiblepanel-tab-background-color: white;\n --dv-activegroup-hiddenpanel-tab-background-color: #ececec;\n --dv-inactivegroup-visiblepanel-tab-background-color: white;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #ececec;\n --dv-tab-divider-color: white;\n --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n --dv-activegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.7);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(51, 51, 51, 0.7);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.35);\n --dv-separator-border: rgba(128, 128, 128, 0.35);\n --dv-paneview-header-border-color: rgb(51, 51, 51);\n}\n\n.dockview-theme-vs {\n --dv-background-color: black;\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-group-view-background-color: #1e1e1e;\n --dv-tabs-and-actions-container-background-color: #252526;\n --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-tab-divider-color: #1e1e1e;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: #969696;\n --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n --dv-separator-border: rgb(68, 68, 68);\n --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n --dv-tabs-and-actions-container-background-color: #2d2d30;\n --dv-tabs-and-actions-container-height: 20px;\n --dv-tabs-and-actions-container-font-size: 11px;\n --dv-activegroup-visiblepanel-tab-background-color: #007acc;\n --dv-inactivegroup-visiblepanel-tab-background-color: #3f3f46;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: white;\n --dv-inactivegroup-visiblepanel-tab-color: white;\n --dv-inactivegroup-hiddenpanel-tab-color: white;\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container {\n box-sizing: content-box;\n border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.active-tab {\n border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.inactive-tab {\n border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container {\n box-sizing: content-box;\n border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.active-tab {\n border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.inactive-tab {\n border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n}\n\n.dockview-theme-abyss {\n --dv-background-color: black;\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-group-view-background-color: #000c18;\n --dv-tabs-and-actions-container-background-color: #1c1c2a;\n --dv-activegroup-visiblepanel-tab-background-color: #000c18;\n --dv-activegroup-hiddenpanel-tab-background-color: #10192c;\n --dv-inactivegroup-visiblepanel-tab-background-color: #000c18;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #10192c;\n --dv-tab-divider-color: #2b2b4a;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);\n --dv-separator-border: #2b2b4a;\n --dv-paneview-header-border-color: #2b2b4a;\n --dv-paneview-active-outline-color: #596f99;\n}\n\n.dockview-theme-dracula {\n --dv-background-color: black;\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-group-view-background-color: #282a36;\n --dv-tabs-and-actions-container-background-color: #191a21;\n --dv-activegroup-visiblepanel-tab-background-color: #282a36;\n --dv-activegroup-hiddenpanel-tab-background-color: #21222c;\n --dv-inactivegroup-visiblepanel-tab-background-color: #282a36;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #21222c;\n --dv-tab-divider-color: #191a21;\n --dv-activegroup-visiblepanel-tab-color: rgb(248, 248, 242);\n --dv-activegroup-hiddenpanel-tab-color: rgb(98, 114, 164);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(98, 114, 164, 0.5);\n --dv-separator-border: #bd93f9;\n --dv-paneview-header-border-color: #bd93f9;\n --dv-paneview-active-outline-color: #6272a4;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n position: relative;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n position: absolute;\n left: 0px;\n top: 0px;\n content: \"\";\n width: 100%;\n height: 1px;\n background-color: #94527e;\n z-index: 999;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n position: relative;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n position: absolute;\n left: 0px;\n bottom: 0px;\n content: \"\";\n width: 100%;\n height: 1px;\n background-color: #5e3d5a;\n z-index: 999;\n}\n\n.dockview-theme-replit {\n --dv-background-color: black;\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-group-view-background-color: #ebeced;\n --dv-tabs-and-actions-container-background-color: #fcfcfc;\n --dv-activegroup-visiblepanel-tab-background-color: #f0f1f2;\n --dv-activegroup-hiddenpanel-tab-background-color: ##fcfcfc;\n --dv-inactivegroup-visiblepanel-tab-background-color: #f0f1f2;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #fcfcfc;\n --dv-tab-divider-color: transparent;\n --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n --dv-activegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n --dv-inactivegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n --dv-inactivegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n --dv-separator-border: transparent;\n --dv-paneview-header-border-color: rgb(51, 51, 51);\n --dv-background-color: #ebeced;\n --dv-separator-handle-background-color: #cfd1d3;\n --dv-separator-handle-hover-background-color: #babbbb;\n}\n.dockview-theme-replit .dv-resize-container:has(> .groupview) {\n border-radius: 8px;\n}\n.dockview-theme-replit .groupview {\n overflow: hidden;\n border-radius: 10px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container {\n border-bottom: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab {\n margin: 4px;\n border-radius: 8px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab .dockview-svg {\n height: 8px;\n width: 8px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab:hover {\n background-color: #e4e5e6 !important;\n}\n.dockview-theme-replit .groupview .content-container {\n background-color: #fcfcfc;\n}\n.dockview-theme-replit .groupview.active-group {\n border: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .groupview.inactive-group {\n border: 1px solid transparent;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash::after {\n content: \"\";\n height: 4px;\n width: 40px;\n border-radius: 2px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--dv-separator-handle-background-color);\n position: absolute;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash:hover::after {\n background-color: var(--dv-separator-handle-hover-background-color);\n}\n.dockview-theme-replit .horizontal > .sash-container > .sash::after {\n content: \"\";\n height: 40px;\n width: 4px;\n border-radius: 2px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--dv-separator-handle-background-color);\n position: absolute;\n}\n.dockview-theme-replit .horizontal > .sash-container > .sash:hover::after {\n background-color: var(--dv-separator-handle-hover-background-color);\n}\n.drop-target {\n position: relative;\n}\n.drop-target > .drop-target-dropzone {\n position: absolute;\n left: 0px;\n top: 0px;\n height: 100%;\n width: 100%;\n z-index: 1000;\n pointer-events: none;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection {\n position: relative;\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n background-color: var(--dv-drag-over-background-color);\n transition: top 70ms ease-out, left 70ms ease-out, width 70ms ease-out, height 70ms ease-out, opacity 0.15s ease-out;\n will-change: transform;\n pointer-events: none;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-top.dv-drop-target-small-vertical {\n border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical {\n border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal {\n border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {\n border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-debug .dv-resize-container .dv-resize-handle-top {\n background-color: red;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-bottom {\n background-color: green;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-left {\n background-color: yellow;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-right {\n background-color: blue;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-topleft,\n.dv-debug .dv-resize-container .dv-resize-handle-topright,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomleft,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomright {\n background-color: cyan;\n}\n\n.dv-resize-container {\n position: absolute;\n z-index: 997;\n border: 1px solid var(--dv-tab-divider-color);\n box-shadow: var(--dv-floating-box-shadow);\n}\n.dv-resize-container.dv-bring-to-front {\n z-index: 998;\n}\n.dv-resize-container.dv-resize-container-dragging {\n opacity: 0.5;\n}\n.dv-resize-container .dv-resize-handle-top {\n height: 4px;\n width: calc(100% - 8px);\n left: 4px;\n top: -2px;\n z-index: 999;\n position: absolute;\n cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-bottom {\n height: 4px;\n width: calc(100% - 8px);\n left: 4px;\n bottom: -2px;\n z-index: 999;\n position: absolute;\n cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-left {\n height: calc(100% - 8px);\n width: 4px;\n left: -2px;\n top: 4px;\n z-index: 999;\n position: absolute;\n cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-right {\n height: calc(100% - 8px);\n width: 4px;\n right: -2px;\n top: 4px;\n z-index: 999;\n position: absolute;\n cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-topleft {\n height: 4px;\n width: 4px;\n top: -2px;\n left: -2px;\n z-index: 999;\n position: absolute;\n cursor: nw-resize;\n}\n.dv-resize-container .dv-resize-handle-topright {\n height: 4px;\n width: 4px;\n right: -2px;\n top: -2px;\n z-index: 999;\n position: absolute;\n cursor: ne-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomleft {\n height: 4px;\n width: 4px;\n left: -2px;\n bottom: -2px;\n z-index: 999;\n position: absolute;\n cursor: sw-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomright {\n height: 4px;\n width: 4px;\n right: -2px;\n bottom: -2px;\n z-index: 999;\n position: absolute;\n cursor: se-resize;\n}\n.dv-dockview {\n position: relative;\n background-color: var(--dv-group-view-background-color);\n}\n.dv-dockview .dv-watermark-container {\n position: absolute;\n top: 0px;\n left: 0px;\n height: 100%;\n width: 100%;\n z-index: 1;\n}\n.dv-dockview .dv-overlay-render-container {\n position: relative;\n}\n\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);\n color: var(--dv-inactivegroup-visiblepanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n color: var(--dv-inactivegroup-hiddenpanel-tab-color);\n}\n\n/**\n * when a tab is dragged we lose the above stylings because they are conditional on parent elements\n * therefore we also set some stylings for the dragging event\n **/\n.tab.dv-tab-dragging {\n background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.groupview {\n display: flex;\n flex-direction: column;\n height: 100%;\n background-color: var(--dv-group-view-background-color);\n overflow: hidden;\n}\n.groupview:focus {\n outline: none;\n}\n.groupview.empty > .tabs-and-actions-container {\n display: none;\n}\n.groupview > .content-container {\n flex-grow: 1;\n min-height: 0;\n outline: none;\n}\n.dv-root-wrapper {\n height: 100%;\n width: 100%;\n}\n.grid-view,\n.branch-node {\n height: 100%;\n width: 100%;\n}\n.pane-container {\n height: 100%;\n width: 100%;\n}\n.pane-container.animated .view {\n transition-duration: 0.15s;\n transition-timing-function: ease-out;\n}\n.pane-container .view {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n padding: 0px !important;\n}\n.pane-container .view:not(:first-child)::before {\n background-color: transparent !important;\n}\n.pane-container .view:not(:first-child) .pane > .pane-header {\n border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.pane-container .view .default-header {\n background-color: var(--dv-group-view-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n display: flex;\n padding: 0px 8px;\n cursor: pointer;\n}\n.pane-container .view .default-header .dockview-pane-header-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.pane-container .view .default-header > span {\n padding-left: 8px;\n flex-grow: 1;\n}\n.pane-container:first-of-type > .pane > .pane-header {\n border-top: none !important;\n}\n.pane-container .pane {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n height: 100%;\n}\n.pane-container .pane .pane-header {\n box-sizing: border-box;\n user-select: none;\n position: relative;\n outline: none;\n}\n.pane-container .pane .pane-header.pane-draggable {\n cursor: pointer;\n}\n.pane-container .pane .pane-header:focus:before, .pane-container .pane .pane-header:focus-within:before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n content: \"\";\n pointer-events: none;\n outline: 1px solid;\n outline-width: -1px;\n outline-style: solid;\n outline-offset: -1px;\n outline-color: var(--dv-paneview-active-outline-color);\n}\n.pane-container .pane .pane-body {\n overflow-y: auto;\n overflow-x: hidden;\n flex-grow: 1;\n position: relative;\n outline: none;\n}\n.pane-container .pane .pane-body:focus:before, .pane-container .pane .pane-body:focus-within:before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n content: \"\";\n pointer-events: none;\n outline: 1px solid;\n outline-width: -1px;\n outline-style: solid;\n outline-offset: -1px;\n outline-color: var(--dv-paneview-active-outline-color);\n}\n.dv-debug .split-view-container .sash-container .sash.enabled {\n background-color: black;\n}\n.dv-debug .split-view-container .sash-container .sash.disabled {\n background-color: orange;\n}\n.dv-debug .split-view-container .sash-container .sash.maximum {\n background-color: green;\n}\n.dv-debug .split-view-container .sash-container .sash.minimum {\n background-color: red;\n}\n\n.split-view-container {\n position: relative;\n overflow: hidden;\n height: 100%;\n width: 100%;\n}\n.split-view-container.dv-splitview-disabled > .sash-container > .sash {\n pointer-events: none;\n}\n.split-view-container.animation .view,\n.split-view-container.animation .sash {\n transition-duration: 0.15s;\n transition-timing-function: ease-out;\n}\n.split-view-container.horizontal {\n height: 100%;\n}\n.split-view-container.horizontal > .sash-container > .sash {\n height: 100%;\n width: 4px;\n}\n.split-view-container.horizontal > .sash-container > .sash.enabled {\n cursor: ew-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.disabled {\n cursor: default;\n}\n.split-view-container.horizontal > .sash-container > .sash.maximum {\n cursor: w-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.minimum {\n cursor: e-resize;\n}\n.split-view-container.horizontal > .view-container > .view:not(:first-child)::before {\n height: 100%;\n width: 1px;\n}\n.split-view-container.vertical {\n width: 100%;\n}\n.split-view-container.vertical > .sash-container > .sash {\n width: 100%;\n height: 4px;\n}\n.split-view-container.vertical > .sash-container > .sash.enabled {\n cursor: ns-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.disabled {\n cursor: default;\n}\n.split-view-container.vertical > .sash-container > .sash.maximum {\n cursor: n-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.minimum {\n cursor: s-resize;\n}\n.split-view-container.vertical > .view-container > .view {\n width: 100%;\n}\n.split-view-container.vertical > .view-container > .view:not(:first-child)::before {\n height: 1px;\n width: 100%;\n}\n.split-view-container .sash-container {\n height: 100%;\n width: 100%;\n position: absolute;\n}\n.split-view-container .sash-container .sash {\n position: absolute;\n z-index: 99;\n outline: none;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n touch-action: none;\n}\n.split-view-container .sash-container .sash:not(.disabled):active {\n transition: background-color 0.1s ease-in-out;\n background-color: var(--dv-active-sash-color, transparent);\n}\n.split-view-container .sash-container .sash:not(.disabled):hover {\n background-color: var(--dv-active-sash-color, transparent);\n transition: background-color 0.1s ease-in-out;\n transition-delay: 0.5s;\n}\n.split-view-container .view-container {\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--dv-background-color);\n}\n.split-view-container .view-container .view {\n height: 100%;\n box-sizing: border-box;\n overflow: auto;\n position: absolute;\n}\n.split-view-container.separator-border .view:not(:first-child)::before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n z-index: 5;\n pointer-events: none;\n background-color: var(--dv-separator-border);\n}\n.dv-dragged {\n transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */\n}\n\n.tab {\n flex-shrink: 0;\n}\n.tab:focus-within, .tab:focus {\n position: relative;\n}\n.tab:focus-within::after, .tab:focus::after {\n position: absolute;\n content: \"\";\n height: 100%;\n width: 100%;\n top: 0px;\n left: 0px;\n pointer-events: none;\n outline: 1px solid var(--dv-tab-divider-color) !important;\n outline-offset: -1px;\n z-index: 5;\n}\n.tab.dv-tab-dragging .dv-default-tab-action {\n background-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.tab.active-tab .dv-default-tab .dv-default-tab-action {\n visibility: visible;\n}\n.tab.inactive-tab .dv-default-tab .dv-default-tab-action {\n visibility: hidden;\n}\n.tab.inactive-tab .dv-default-tab:hover .dv-default-tab-action {\n visibility: visible;\n}\n.tab .dv-default-tab {\n position: relative;\n height: 100%;\n display: flex;\n min-width: 80px;\n align-items: center;\n padding: 0px 8px;\n white-space: nowrap;\n text-overflow: elipsis;\n}\n.tab .dv-default-tab .dv-default-tab-content {\n padding: 0px 8px;\n flex-grow: 1;\n}\n.tab .dv-default-tab .dv-default-tab-action {\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n}\n.tab .dv-default-tab .dv-default-tab-action:hover {\n border-radius: 2px;\n background-color: var(--dv-icon-hover-background-color);\n}\n.tabs-and-actions-container {\n display: flex;\n background-color: var(--dv-tabs-and-actions-container-background-color);\n flex-shrink: 0;\n box-sizing: border-box;\n height: var(--dv-tabs-and-actions-container-height);\n font-size: var(--dv-tabs-and-actions-container-font-size);\n}\n.tabs-and-actions-container.hidden {\n display: none;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .tabs-container {\n flex-grow: 1;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .tabs-container .tab {\n flex-grow: 1;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .void-container {\n flex-grow: 0;\n}\n.tabs-and-actions-container .void-container {\n display: flex;\n flex-grow: 1;\n cursor: grab;\n}\n.tabs-and-actions-container .tabs-container {\n display: flex;\n overflow-x: overlay;\n overflow-y: hidden;\n scrollbar-width: thin;\n /* Track */\n /* Handle */\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar {\n height: 3px;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-track {\n background: transparent;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-thumb {\n background: var(--dv-tabs-container-scrollbar-color);\n}\n.tabs-and-actions-container .tabs-container .tab {\n -webkit-user-drag: element;\n outline: none;\n min-width: 75px;\n cursor: pointer;\n position: relative;\n box-sizing: border-box;\n}\n.tabs-and-actions-container .tabs-container .tab:not(:first-child)::before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n z-index: 5;\n pointer-events: none;\n background-color: var(--dv-tab-divider-color);\n width: 1px;\n height: 100%;\n}\n.watermark {\n display: flex;\n width: 100%;\n}\n.watermark.has-actions .watermark-title .actions-container {\n display: none;\n}\n.watermark .watermark-title {\n height: 35px;\n width: 100%;\n display: flex;\n}\n.watermark .watermark-content {\n flex-grow: 1;\n}\n.watermark .actions-container {\n display: flex;\n align-items: center;\n padding: 0px 8px;\n}\n.watermark .actions-container .close-action {\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n cursor: pointer;\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.watermark .actions-container .close-action:hover {\n border-radius: 2px;\n background-color: var(--dv-icon-hover-background-color);\n}";
41
41
  styleInject(css_248z);
42
42
 
43
43
  class TransferObject {
@@ -562,6 +562,9 @@
562
562
  }
563
563
  return false;
564
564
  }
565
+ function addTestId(element, id) {
566
+ element.setAttribute('data-testid', id);
567
+ }
565
568
 
566
569
  function tail(arr) {
567
570
  if (arr.length === 0) {
@@ -623,7 +626,11 @@
623
626
 
624
627
  const clamp = (value, min, max) => {
625
628
  if (min > max) {
626
- throw new Error(`${min} > ${max} is an invalid condition`);
629
+ /**
630
+ * caveat: an error should be thrown here if this was a proper `clamp` function but we need to handle
631
+ * cases where `min` > `max` and in those cases return `min`.
632
+ */
633
+ return min;
627
634
  }
628
635
  return Math.min(max, Math.max(value, min));
629
636
  };
@@ -828,7 +835,14 @@
828
835
  this._disabled = value;
829
836
  toggleClass(this.element, 'dv-splitview-disabled', value);
830
837
  }
838
+ get margin() {
839
+ return this._margin;
840
+ }
841
+ set margin(value) {
842
+ this._margin = value;
843
+ }
831
844
  constructor(container, options) {
845
+ var _a;
832
846
  this.container = container;
833
847
  this.viewItems = [];
834
848
  this.sashes = [];
@@ -839,6 +853,7 @@
839
853
  this._startSnappingEnabled = true;
840
854
  this._endSnappingEnabled = true;
841
855
  this._disabled = false;
856
+ this._margin = 0;
842
857
  this._onDidSashEnd = new Emitter();
843
858
  this.onDidSashEnd = this._onDidSashEnd.event;
844
859
  this._onDidAddView = new Emitter();
@@ -927,6 +942,7 @@
927
942
  };
928
943
  this._orientation = options.orientation;
929
944
  this.element = this.createContainer();
945
+ this.margin = (_a = options.margin) !== null && _a !== void 0 ? _a : 0;
930
946
  this.proportionalLayout =
931
947
  options.proportionalLayout === undefined
932
948
  ? true
@@ -981,9 +997,7 @@
981
997
  if (index < 0 || index >= this.viewItems.length) {
982
998
  throw new Error('Index out of bounds');
983
999
  }
984
- toggleClass(this.container, 'visible', visible);
985
1000
  const viewItem = this.viewItems[index];
986
- toggleClass(this.container, 'visible', visible);
987
1001
  viewItem.setVisible(visible, viewItem.size);
988
1002
  this.distributeEmptySpace(index);
989
1003
  this.layoutViews();
@@ -1295,15 +1309,29 @@
1295
1309
  this._proportions = this.viewItems.map((i) => i.visible ? i.size / this._contentSize : undefined);
1296
1310
  }
1297
1311
  }
1312
+ /**
1313
+ * Margin explain:
1314
+ *
1315
+ * For `n` views in a splitview there will be `n-1` margins `m`.
1316
+ *
1317
+ * To fit the margins each view must reduce in size by `(m * (n - 1)) / n`.
1318
+ *
1319
+ * For each view `i` the offet must be adjusted by `m * i/(n - 1)`.
1320
+ */
1298
1321
  layoutViews() {
1299
1322
  this._contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
1300
- let sum = 0;
1301
- const x = [];
1302
1323
  this.updateSashEnablement();
1324
+ if (this.viewItems.length === 0) {
1325
+ return;
1326
+ }
1327
+ const sashCount = this.viewItems.length - 1;
1328
+ const marginReducedSize = (this.margin * sashCount) / this.viewItems.length;
1329
+ let totalLeftOffset = 0;
1330
+ const viewLeftOffsets = [];
1303
1331
  for (let i = 0; i < this.viewItems.length - 1; i++) {
1304
- sum += this.viewItems[i].size;
1305
- x.push(sum);
1306
- const offset = Math.min(Math.max(0, sum - 2), this.size - 4);
1332
+ totalLeftOffset += this.viewItems[i].size;
1333
+ viewLeftOffsets.push(totalLeftOffset);
1334
+ const offset = Math.min(Math.max(0, totalLeftOffset - 2), this.size - this.margin);
1307
1335
  if (this._orientation === exports.Orientation.HORIZONTAL) {
1308
1336
  this.sashes[i].container.style.left = `${offset}px`;
1309
1337
  this.sashes[i].container.style.top = `0px`;
@@ -1314,19 +1342,24 @@
1314
1342
  }
1315
1343
  }
1316
1344
  this.viewItems.forEach((view, i) => {
1345
+ const size = view.size - marginReducedSize;
1346
+ const offset = i === 0
1347
+ ? 0
1348
+ : viewLeftOffsets[i - 1] +
1349
+ (i / sashCount) * marginReducedSize;
1317
1350
  if (this._orientation === exports.Orientation.HORIZONTAL) {
1318
- view.container.style.width = `${view.size}px`;
1319
- view.container.style.left = i == 0 ? '0px' : `${x[i - 1]}px`;
1351
+ view.container.style.width = `${size}px`;
1352
+ view.container.style.left = `${offset}px`;
1320
1353
  view.container.style.top = '';
1321
1354
  view.container.style.height = '';
1322
1355
  }
1323
1356
  if (this._orientation === exports.Orientation.VERTICAL) {
1324
- view.container.style.height = `${view.size}px`;
1325
- view.container.style.top = i == 0 ? '0px' : `${x[i - 1]}px`;
1357
+ view.container.style.height = `${size}px`;
1358
+ view.container.style.top = `${offset}px`;
1326
1359
  view.container.style.width = '';
1327
1360
  view.container.style.left = '';
1328
1361
  }
1329
- view.view.layout(view.size, this._orthogonalSize);
1362
+ view.view.layout(view.size - marginReducedSize, this._orthogonalSize);
1330
1363
  });
1331
1364
  }
1332
1365
  findFirstSnapIndex(indexes) {
@@ -1775,7 +1808,18 @@
1775
1808
  set disabled(value) {
1776
1809
  this.splitview.disabled = value;
1777
1810
  }
1778
- constructor(orientation, proportionalLayout, styles, size, orthogonalSize, disabled, childDescriptors) {
1811
+ get margin() {
1812
+ return this.splitview.margin;
1813
+ }
1814
+ set margin(value) {
1815
+ this.splitview.margin = value;
1816
+ this.children.forEach((child) => {
1817
+ if (child instanceof BranchNode) {
1818
+ child.margin = value;
1819
+ }
1820
+ });
1821
+ }
1822
+ constructor(orientation, proportionalLayout, styles, size, orthogonalSize, disabled, margin, childDescriptors) {
1779
1823
  super();
1780
1824
  this.orientation = orientation;
1781
1825
  this.proportionalLayout = proportionalLayout;
@@ -1795,6 +1839,7 @@
1795
1839
  orientation: this.orientation,
1796
1840
  proportionalLayout,
1797
1841
  styles,
1842
+ margin,
1798
1843
  });
1799
1844
  this.splitview.layout(this.size, this.orthogonalSize);
1800
1845
  }
@@ -1818,6 +1863,7 @@
1818
1863
  descriptor,
1819
1864
  proportionalLayout,
1820
1865
  styles,
1866
+ margin,
1821
1867
  });
1822
1868
  }
1823
1869
  this.disabled = disabled;
@@ -1826,10 +1872,8 @@
1826
1872
  }));
1827
1873
  this.setupChildrenEvents();
1828
1874
  }
1829
- setVisible(visible) {
1830
- for (const child of this.children) {
1831
- child.setVisible(visible);
1832
- }
1875
+ setVisible(_visible) {
1876
+ // noop
1833
1877
  }
1834
1878
  isChildVisible(index) {
1835
1879
  if (index < 0 || index >= this.children.length) {
@@ -1846,12 +1890,13 @@
1846
1890
  }
1847
1891
  const wereAllChildrenHidden = this.splitview.contentSize === 0;
1848
1892
  this.splitview.setViewVisible(index, visible);
1893
+ // }
1849
1894
  const areAllChildrenHidden = this.splitview.contentSize === 0;
1850
1895
  // If all children are hidden then the parent should hide the entire splitview
1851
1896
  // If the entire splitview is hidden then the parent should show the splitview when a child is shown
1852
1897
  if ((visible && wereAllChildrenHidden) ||
1853
1898
  (!visible && areAllChildrenHidden)) {
1854
- this._onDidVisibilityChange.fire(visible);
1899
+ this._onDidVisibilityChange.fire({ visible });
1855
1900
  }
1856
1901
  }
1857
1902
  moveChild(from, to) {
@@ -1924,7 +1969,7 @@
1924
1969
  this._onDidChange.fire({ size: e.orthogonalSize });
1925
1970
  }), ...this.children.map((c, i) => {
1926
1971
  if (c instanceof BranchNode) {
1927
- return c.onDidVisibilityChange((visible) => {
1972
+ return c.onDidVisibilityChange(({ visible }) => {
1928
1973
  this.setChildVisible(i, visible);
1929
1974
  });
1930
1975
  }
@@ -1954,7 +1999,7 @@
1954
1999
  }
1955
2000
  function flipNode(node, size, orthogonalSize) {
1956
2001
  if (node instanceof BranchNode) {
1957
- const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize, node.disabled);
2002
+ const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize, node.disabled, node.margin);
1958
2003
  let totalSize = 0;
1959
2004
  for (let i = node.children.length - 1; i >= 0; i--) {
1960
2005
  const child = node.children[i];
@@ -2109,6 +2154,13 @@
2109
2154
  }
2110
2155
  }
2111
2156
  }
2157
+ get margin() {
2158
+ return this._margin;
2159
+ }
2160
+ set margin(value) {
2161
+ this._margin = value;
2162
+ this.root.margin = value;
2163
+ }
2112
2164
  maximizedView() {
2113
2165
  var _a;
2114
2166
  return (_a = this._maximizedNode) === null || _a === void 0 ? void 0 : _a.leaf.view;
@@ -2194,13 +2246,14 @@
2194
2246
  this.disposable.dispose();
2195
2247
  this._onDidChange.dispose();
2196
2248
  this._onDidMaximizedNodeChange.dispose();
2249
+ this._onDidViewVisibilityChange.dispose();
2197
2250
  this.root.dispose();
2198
2251
  this._maximizedNode = undefined;
2199
2252
  this.element.remove();
2200
2253
  }
2201
2254
  clear() {
2202
2255
  const orientation = this.root.orientation;
2203
- this.root = new BranchNode(orientation, this.proportionalLayout, this.styles, this.root.size, this.root.orthogonalSize, this._locked);
2256
+ this.root = new BranchNode(orientation, this.proportionalLayout, this.styles, this.root.size, this.root.orthogonalSize, this.locked, this.margin);
2204
2257
  }
2205
2258
  deserialize(json, deserializer) {
2206
2259
  const orientation = json.orientation;
@@ -2211,6 +2264,7 @@
2211
2264
  this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize);
2212
2265
  }
2213
2266
  _deserializeNode(node, orientation, deserializer, orthogonalSize) {
2267
+ var _a;
2214
2268
  let result;
2215
2269
  if (node.type === 'branch') {
2216
2270
  const serializedChildren = node.data;
@@ -2222,10 +2276,14 @@
2222
2276
  });
2223
2277
  result = new BranchNode(orientation, this.proportionalLayout, this.styles, node.size, // <- orthogonal size - flips at each depth
2224
2278
  orthogonalSize, // <- size - flips at each depth,
2225
- this._locked, children);
2279
+ this.locked, this.margin, children);
2226
2280
  }
2227
2281
  else {
2228
- result = new LeafNode(deserializer.fromJSON(node), orientation, orthogonalSize, node.size);
2282
+ const view = deserializer.fromJSON(node);
2283
+ if (typeof node.visible === 'boolean') {
2284
+ (_a = view.setVisible) === null || _a === void 0 ? void 0 : _a.call(view, node.visible);
2285
+ }
2286
+ result = new LeafNode(view, orientation, orthogonalSize, node.size);
2229
2287
  }
2230
2288
  return result;
2231
2289
  }
@@ -2255,7 +2313,7 @@
2255
2313
  }
2256
2314
  const oldRoot = this.root;
2257
2315
  oldRoot.element.remove();
2258
- this._root = new BranchNode(orthogonal(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size, this._locked);
2316
+ this._root = new BranchNode(orthogonal(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size, this.locked, this.margin);
2259
2317
  if (oldRoot.children.length === 0) ;
2260
2318
  else if (oldRoot.children.length === 1) {
2261
2319
  // can remove one level of redundant branching if there is only a single child
@@ -2320,19 +2378,24 @@
2320
2378
  }
2321
2379
  return findLeaf(this.root, reverse);
2322
2380
  }
2323
- constructor(proportionalLayout, styles, orientation) {
2381
+ constructor(proportionalLayout, styles, orientation, locked, margin) {
2324
2382
  this.proportionalLayout = proportionalLayout;
2325
2383
  this.styles = styles;
2326
2384
  this._locked = false;
2385
+ this._margin = 0;
2327
2386
  this._maximizedNode = undefined;
2328
2387
  this.disposable = new MutableDisposable();
2329
2388
  this._onDidChange = new Emitter();
2330
2389
  this.onDidChange = this._onDidChange.event;
2390
+ this._onDidViewVisibilityChange = new Emitter();
2391
+ this.onDidViewVisibilityChange = this._onDidViewVisibilityChange.event;
2331
2392
  this._onDidMaximizedNodeChange = new Emitter();
2332
2393
  this.onDidMaximizedNodeChange = this._onDidMaximizedNodeChange.event;
2333
2394
  this.element = document.createElement('div');
2334
2395
  this.element.className = 'grid-view';
2335
- this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0, this._locked);
2396
+ this._locked = locked !== null && locked !== void 0 ? locked : false;
2397
+ this._margin = margin !== null && margin !== void 0 ? margin : 0;
2398
+ this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0, this.locked, this.margin);
2336
2399
  }
2337
2400
  isViewVisible(location) {
2338
2401
  const [rest, index] = tail(location);
@@ -2351,6 +2414,7 @@
2351
2414
  if (!(parent instanceof BranchNode)) {
2352
2415
  throw new Error('Invalid from location');
2353
2416
  }
2417
+ this._onDidViewVisibilityChange.fire();
2354
2418
  parent.setChildVisible(index, visible);
2355
2419
  }
2356
2420
  moveView(parentLocation, from, to) {
@@ -2383,7 +2447,7 @@
2383
2447
  }
2384
2448
  const child = grandParent.removeChild(parentIndex);
2385
2449
  child.dispose();
2386
- const newParent = new BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize, this._locked);
2450
+ const newParent = new BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize, this.locked, this.margin);
2387
2451
  grandParent.addChild(newParent, parent.size, parentIndex);
2388
2452
  const newSibling = new LeafNode(parent.view, grandParent.orientation, parent.size);
2389
2453
  newParent.addChild(newSibling, newSiblingSize, 0);
@@ -2622,14 +2686,18 @@
2622
2686
  this.onDidActiveChange = this._onDidActiveChange.event;
2623
2687
  this._bufferOnDidLayoutChange = new AsapEvent();
2624
2688
  this.onDidLayoutChange = this._bufferOnDidLayoutChange.onEvent;
2689
+ this._onDidViewVisibilityChangeMicroTaskQueue = new AsapEvent();
2690
+ this.onDidViewVisibilityChangeMicroTaskQueue = this._onDidViewVisibilityChangeMicroTaskQueue.onEvent;
2625
2691
  this.element.style.height = '100%';
2626
2692
  this.element.style.width = '100%';
2627
2693
  options.parentElement.appendChild(this.element);
2628
- this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation);
2694
+ this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation, options.locked, options.margin);
2629
2695
  this.gridview.locked = !!options.locked;
2630
2696
  this.element.appendChild(this.gridview.element);
2631
2697
  this.layout(0, 0, true); // set some elements height/widths
2632
- this.addDisposables(exports.DockviewDisposable.from(() => {
2698
+ this.addDisposables(this.gridview.onDidViewVisibilityChange(() => this._onDidViewVisibilityChangeMicroTaskQueue.fire()), this.onDidViewVisibilityChangeMicroTaskQueue(() => {
2699
+ this.layout(this.width, this.height, true);
2700
+ }), exports.DockviewDisposable.from(() => {
2633
2701
  var _a;
2634
2702
  (_a = this.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.element);
2635
2703
  }), this.gridview.onDidChange(() => {
@@ -3243,6 +3311,9 @@
3243
3311
  get onDidRemovePanel() {
3244
3312
  return this.component.onDidRemovePanel;
3245
3313
  }
3314
+ get onDidMovePanel() {
3315
+ return this.component.onDidMovePanel;
3316
+ }
3246
3317
  /**
3247
3318
  * Invoked after a layout is deserialzied using the `fromJSON` method.
3248
3319
  */
@@ -3383,8 +3454,8 @@
3383
3454
  /**
3384
3455
  * Add a floating group
3385
3456
  */
3386
- addFloatingGroup(item, coord) {
3387
- return this.component.addFloatingGroup(item, coord);
3457
+ addFloatingGroup(item, options) {
3458
+ return this.component.addFloatingGroup(item, options);
3388
3459
  }
3389
3460
  /**
3390
3461
  * Create a component from a serialized object.
@@ -3434,6 +3505,9 @@
3434
3505
  addPopoutGroup(item, options) {
3435
3506
  return this.component.addPopoutGroup(item, options);
3436
3507
  }
3508
+ setGap(gap) {
3509
+ this.component.updateOptions({ gap });
3510
+ }
3437
3511
  }
3438
3512
 
3439
3513
  class DragHandler extends CompositeDisposable {
@@ -4803,7 +4877,8 @@
4803
4877
  this.accessor.addFloatingGroup(this.group, {
4804
4878
  x: left - rootLeft + 20,
4805
4879
  y: top - rootTop + 20,
4806
- }, { inDragMode: true });
4880
+ inDragMode: true,
4881
+ });
4807
4882
  }
4808
4883
  }), addDisposableListener(this.tabContainer, 'mousedown', (event) => {
4809
4884
  if (event.defaultPrevented) {
@@ -4872,7 +4947,8 @@
4872
4947
  this.accessor.addFloatingGroup(panel, {
4873
4948
  x: left - rootLeft,
4874
4949
  y: top - rootTop,
4875
- }, { inDragMode: true });
4950
+ inDragMode: true,
4951
+ });
4876
4952
  return;
4877
4953
  }
4878
4954
  const isLeftClick = event.button === 0;
@@ -4945,6 +5021,7 @@
4945
5021
  rootOverlayModel: undefined,
4946
5022
  locked: undefined,
4947
5023
  disableDnd: undefined,
5024
+ gap: undefined,
4948
5025
  };
4949
5026
  return Object.keys(properties);
4950
5027
  })();
@@ -5675,6 +5752,9 @@
5675
5752
  get isActive() {
5676
5753
  return this.api.isActive;
5677
5754
  }
5755
+ get isVisible() {
5756
+ return this.api.isVisible;
5757
+ }
5678
5758
  constructor(id, component, options, api) {
5679
5759
  super(id, component, api !== null && api !== void 0 ? api : new GridviewPanelApiImpl(id, component));
5680
5760
  this._evaluatedMinimumWidth = 0;
@@ -6211,52 +6291,40 @@
6211
6291
  }
6212
6292
  constructor() {
6213
6293
  super();
6214
- //
6215
- this.params = {};
6216
6294
  this._element = document.createElement('div');
6217
6295
  this._element.className = 'dv-default-tab';
6218
- //
6219
6296
  this._content = document.createElement('div');
6220
6297
  this._content.className = 'dv-default-tab-content';
6221
6298
  this.action = document.createElement('div');
6222
6299
  this.action.className = 'dv-default-tab-action';
6223
6300
  this.action.appendChild(createCloseButton());
6224
- //
6225
6301
  this._element.appendChild(this._content);
6226
6302
  this._element.appendChild(this.action);
6227
- //
6228
6303
  this.addDisposables(addDisposableListener(this.action, 'mousedown', (ev) => {
6229
6304
  ev.preventDefault();
6230
6305
  }));
6231
6306
  this.render();
6232
6307
  }
6233
- update(event) {
6234
- this.params = Object.assign(Object.assign({}, this.params), event.params);
6235
- this.render();
6236
- }
6237
- focus() {
6238
- //noop
6239
- }
6240
6308
  init(params) {
6241
- this.params = params;
6242
- this._content.textContent = params.title;
6243
- addDisposableListener(this.action, 'click', (ev) => {
6244
- ev.preventDefault(); //
6245
- this.params.api.close();
6246
- });
6247
- }
6248
- onGroupChange(_group) {
6249
- this.render();
6250
- }
6251
- onPanelVisibleChange(_isPanelVisible) {
6309
+ this._title = params.title;
6310
+ this.addDisposables(params.api.onDidTitleChange((event) => {
6311
+ this._title = event.title;
6312
+ this.render();
6313
+ }), addDisposableListener(this.action, 'mousedown', (ev) => {
6314
+ ev.preventDefault();
6315
+ }), addDisposableListener(this.action, 'click', (ev) => {
6316
+ if (ev.defaultPrevented) {
6317
+ return;
6318
+ }
6319
+ ev.preventDefault();
6320
+ params.api.close();
6321
+ }));
6252
6322
  this.render();
6253
6323
  }
6254
- layout(_width, _height) {
6255
- // noop
6256
- }
6257
6324
  render() {
6258
- if (this._content.textContent !== this.params.title) {
6259
- this._content.textContent = this.params.title;
6325
+ var _a;
6326
+ if (this._content.textContent !== this._title) {
6327
+ this._content.textContent = (_a = this._title) !== null && _a !== void 0 ? _a : '';
6260
6328
  }
6261
6329
  }
6262
6330
  }
@@ -6449,12 +6517,7 @@
6449
6517
  this._element.appendChild(this.options.content);
6450
6518
  this.options.container.appendChild(this._element);
6451
6519
  // if input bad resize within acceptable boundaries
6452
- this.setBounds({
6453
- height: this.options.height,
6454
- width: this.options.width,
6455
- top: this.options.top,
6456
- left: this.options.left,
6457
- });
6520
+ this.setBounds(Object.assign(Object.assign(Object.assign(Object.assign({ height: this.options.height, width: this.options.width }, ('top' in this.options && { top: this.options.top })), ('bottom' in this.options && { bottom: this.options.bottom })), ('left' in this.options && { left: this.options.left })), ('right' in this.options && { right: this.options.right })));
6458
6521
  }
6459
6522
  setBounds(bounds = {}) {
6460
6523
  if (typeof bounds.height === 'number') {
@@ -6463,11 +6526,25 @@
6463
6526
  if (typeof bounds.width === 'number') {
6464
6527
  this._element.style.width = `${bounds.width}px`;
6465
6528
  }
6466
- if (typeof bounds.top === 'number') {
6529
+ if ('top' in bounds && typeof bounds.top === 'number') {
6467
6530
  this._element.style.top = `${bounds.top}px`;
6531
+ this._element.style.bottom = 'auto';
6532
+ this.verticalAlignment = 'top';
6533
+ }
6534
+ if ('bottom' in bounds && typeof bounds.bottom === 'number') {
6535
+ this._element.style.bottom = `${bounds.bottom}px`;
6536
+ this._element.style.top = 'auto';
6537
+ this.verticalAlignment = 'bottom';
6468
6538
  }
6469
- if (typeof bounds.left === 'number') {
6539
+ if ('left' in bounds && typeof bounds.left === 'number') {
6470
6540
  this._element.style.left = `${bounds.left}px`;
6541
+ this._element.style.right = 'auto';
6542
+ this.horiziontalAlignment = 'left';
6543
+ }
6544
+ if ('right' in bounds && typeof bounds.right === 'number') {
6545
+ this._element.style.right = `${bounds.right}px`;
6546
+ this._element.style.left = 'auto';
6547
+ this.horiziontalAlignment = 'right';
6471
6548
  }
6472
6549
  const containerRect = this.options.container.getBoundingClientRect();
6473
6550
  const overlayRect = this._element.getBoundingClientRect();
@@ -6475,24 +6552,54 @@
6475
6552
  // a minimum width of minimumViewportWidth must be inside the viewport
6476
6553
  const xOffset = Math.max(0, this.getMinimumWidth(overlayRect.width));
6477
6554
  // a minimum height of minimumViewportHeight must be inside the viewport
6478
- const yOffset = typeof this.options.minimumInViewportHeight === 'number'
6479
- ? Math.max(0, this.getMinimumHeight(overlayRect.height))
6480
- : 0;
6481
- const left = clamp(overlayRect.left - containerRect.left, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
6482
- const top = clamp(overlayRect.top - containerRect.top, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
6483
- this._element.style.left = `${left}px`;
6484
- this._element.style.top = `${top}px`;
6555
+ const yOffset = Math.max(0, this.getMinimumHeight(overlayRect.height));
6556
+ if (this.verticalAlignment === 'top') {
6557
+ const top = clamp(overlayRect.top - containerRect.top, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
6558
+ this._element.style.top = `${top}px`;
6559
+ this._element.style.bottom = 'auto';
6560
+ }
6561
+ if (this.verticalAlignment === 'bottom') {
6562
+ const bottom = clamp(containerRect.bottom - overlayRect.bottom, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
6563
+ this._element.style.bottom = `${bottom}px`;
6564
+ this._element.style.top = 'auto';
6565
+ }
6566
+ if (this.horiziontalAlignment === 'left') {
6567
+ const left = clamp(overlayRect.left - containerRect.left, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
6568
+ this._element.style.left = `${left}px`;
6569
+ this._element.style.right = 'auto';
6570
+ }
6571
+ if (this.horiziontalAlignment === 'right') {
6572
+ const right = clamp(containerRect.right - overlayRect.right, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
6573
+ this._element.style.right = `${right}px`;
6574
+ this._element.style.left = 'auto';
6575
+ }
6485
6576
  this._onDidChange.fire();
6486
6577
  }
6487
6578
  toJSON() {
6488
6579
  const container = this.options.container.getBoundingClientRect();
6489
6580
  const element = this._element.getBoundingClientRect();
6490
- return {
6491
- top: element.top - container.top,
6492
- left: element.left - container.left,
6493
- width: element.width,
6494
- height: element.height,
6495
- };
6581
+ const result = {};
6582
+ if (this.verticalAlignment === 'top') {
6583
+ result.top = parseFloat(this._element.style.top);
6584
+ }
6585
+ else if (this.verticalAlignment === 'bottom') {
6586
+ result.bottom = parseFloat(this._element.style.bottom);
6587
+ }
6588
+ else {
6589
+ result.top = element.top - container.top;
6590
+ }
6591
+ if (this.horiziontalAlignment === 'left') {
6592
+ result.left = parseFloat(this._element.style.left);
6593
+ }
6594
+ else if (this.horiziontalAlignment === 'right') {
6595
+ result.right = parseFloat(this._element.style.right);
6596
+ }
6597
+ else {
6598
+ result.left = element.left - container.left;
6599
+ }
6600
+ result.width = element.width;
6601
+ result.height = element.height;
6602
+ return result;
6496
6603
  }
6497
6604
  setupDrag(dragTarget, options = { inDragMode: false }) {
6498
6605
  const move = new MutableDisposable();
@@ -6524,12 +6631,30 @@
6524
6631
  };
6525
6632
  }
6526
6633
  const xOffset = Math.max(0, this.getMinimumWidth(overlayRect.width));
6527
- const yOffset = Math.max(0, this.options.minimumInViewportHeight
6528
- ? this.getMinimumHeight(overlayRect.height)
6529
- : 0);
6530
- const left = clamp(x - offset.x, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
6634
+ const yOffset = Math.max(0, this.getMinimumHeight(overlayRect.height));
6531
6635
  const top = clamp(y - offset.y, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
6532
- this.setBounds({ top, left });
6636
+ const bottom = clamp(offset.y -
6637
+ y +
6638
+ containerRect.height -
6639
+ overlayRect.height, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
6640
+ const left = clamp(x - offset.x, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
6641
+ const right = clamp(offset.x - x + containerRect.width - overlayRect.width, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
6642
+ const bounds = {};
6643
+ // Anchor to top or to bottom depending on which one is closer
6644
+ if (top <= bottom) {
6645
+ bounds.top = top;
6646
+ }
6647
+ else {
6648
+ bounds.bottom = bottom;
6649
+ }
6650
+ // Anchor to left or to right depending on which one is closer
6651
+ if (left <= right) {
6652
+ bounds.left = left;
6653
+ }
6654
+ else {
6655
+ bounds.right = right;
6656
+ }
6657
+ this.setBounds(bounds);
6533
6658
  }), addDisposableWindowListener(window, 'mouseup', () => {
6534
6659
  toggleClass(this._element, 'dv-resize-container-dragging', false);
6535
6660
  move.dispose();
@@ -6597,8 +6722,10 @@
6597
6722
  };
6598
6723
  }
6599
6724
  let top = undefined;
6725
+ let bottom = undefined;
6600
6726
  let height = undefined;
6601
6727
  let left = undefined;
6728
+ let right = undefined;
6602
6729
  let width = undefined;
6603
6730
  const moveTop = () => {
6604
6731
  top = clamp(y, -Number.MAX_VALUE, startPosition.originalY +
@@ -6612,6 +6739,7 @@
6612
6739
  startPosition.originalY +
6613
6740
  startPosition.originalHeight -
6614
6741
  top;
6742
+ bottom = containerRect.height - top - height;
6615
6743
  };
6616
6744
  const moveBottom = () => {
6617
6745
  top =
@@ -6623,6 +6751,7 @@
6623
6751
  ? -top +
6624
6752
  this.options.minimumInViewportHeight
6625
6753
  : Overlay.MINIMUM_HEIGHT, Number.MAX_VALUE);
6754
+ bottom = containerRect.height - top - height;
6626
6755
  };
6627
6756
  const moveLeft = () => {
6628
6757
  left = clamp(x, -Number.MAX_VALUE, startPosition.originalX +
@@ -6636,6 +6765,7 @@
6636
6765
  startPosition.originalX +
6637
6766
  startPosition.originalWidth -
6638
6767
  left;
6768
+ right = containerRect.width - left - width;
6639
6769
  };
6640
6770
  const moveRight = () => {
6641
6771
  left =
@@ -6647,6 +6777,7 @@
6647
6777
  ? -left +
6648
6778
  this.options.minimumInViewportWidth
6649
6779
  : Overlay.MINIMUM_WIDTH, Number.MAX_VALUE);
6780
+ right = containerRect.width - left - width;
6650
6781
  };
6651
6782
  switch (direction) {
6652
6783
  case 'top':
@@ -6678,7 +6809,24 @@
6678
6809
  moveRight();
6679
6810
  break;
6680
6811
  }
6681
- this.setBounds({ height, width, top, left });
6812
+ const bounds = {};
6813
+ // Anchor to top or to bottom depending on which one is closer
6814
+ if (top <= bottom) {
6815
+ bounds.top = top;
6816
+ }
6817
+ else {
6818
+ bounds.bottom = bottom;
6819
+ }
6820
+ // Anchor to left or to right depending on which one is closer
6821
+ if (left <= right) {
6822
+ bounds.left = left;
6823
+ }
6824
+ else {
6825
+ bounds.right = right;
6826
+ }
6827
+ bounds.height = height;
6828
+ bounds.width = width;
6829
+ this.setBounds(bounds);
6682
6830
  }), {
6683
6831
  dispose: () => {
6684
6832
  for (const iframe of iframes) {
@@ -6701,7 +6849,7 @@
6701
6849
  if (typeof this.options.minimumInViewportHeight === 'number') {
6702
6850
  return height - this.options.minimumInViewportHeight;
6703
6851
  }
6704
- return height;
6852
+ return 0;
6705
6853
  }
6706
6854
  dispose() {
6707
6855
  this._element.remove();
@@ -6724,7 +6872,7 @@
6724
6872
  }
6725
6873
 
6726
6874
  const DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
6727
- const DEFAULT_FLOATING_GROUP_POSITION = { left: 100, top: 100 };
6875
+ const DEFAULT_FLOATING_GROUP_POSITION = { left: 100, top: 100, width: 300, height: 300 };
6728
6876
 
6729
6877
  function createFocusableElement() {
6730
6878
  const element = document.createElement('div');
@@ -7067,6 +7215,7 @@
7067
7215
  parentElement: options.parentElement,
7068
7216
  disableAutoResizing: options.disableAutoResizing,
7069
7217
  locked: options.locked,
7218
+ margin: options.gap,
7070
7219
  });
7071
7220
  this.nextGroupId = sequentialNumberGenerator();
7072
7221
  this._deserializer = new DefaultDockviewDeserialzier(this);
@@ -7092,9 +7241,9 @@
7092
7241
  this._onDidActivePanelChange = new Emitter();
7093
7242
  this.onDidActivePanelChange = this._onDidActivePanelChange.event;
7094
7243
  this._onDidMovePanel = new Emitter();
7244
+ this.onDidMovePanel = this._onDidMovePanel.event;
7095
7245
  this._floatingGroups = [];
7096
7246
  this._popoutGroups = [];
7097
- this._ignoreEvents = 0;
7098
7247
  this._onDidRemoveGroup = new Emitter();
7099
7248
  this.onDidRemoveGroup = this._onDidRemoveGroup.event;
7100
7249
  this._onDidAddGroup = new Emitter();
@@ -7108,7 +7257,9 @@
7108
7257
  this.overlayRenderContainer = new OverlayRenderContainer(gready);
7109
7258
  toggleClass(this.gridview.element, 'dv-dockview', true);
7110
7259
  toggleClass(this.element, 'dv-debug', !!options.debug);
7111
- this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this.onDidAdd((event) => {
7260
+ this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this.onDidViewVisibilityChangeMicroTaskQueue(() => {
7261
+ this.updateWatermark();
7262
+ }), this.onDidAdd((event) => {
7112
7263
  if (!this._moving) {
7113
7264
  this._onDidAddGroup.fire(event);
7114
7265
  }
@@ -7122,7 +7273,7 @@
7122
7273
  }
7123
7274
  }), exports.DockviewEvent.any(this.onDidAdd, this.onDidRemove)(() => {
7124
7275
  this.updateWatermark();
7125
- }), exports.DockviewEvent.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
7276
+ }), exports.DockviewEvent.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidAddGroup, this.onDidRemove, this.onDidMovePanel, this.onDidActivePanelChange)(() => {
7126
7277
  this._bufferOnDidLayoutChange.fire();
7127
7278
  }), exports.DockviewDisposable.from(() => {
7128
7279
  // iterate over a copy of the array since .dispose() mutates the original array
@@ -7373,8 +7524,8 @@
7373
7524
  console.error('dockview: failed to create popout window', err);
7374
7525
  });
7375
7526
  }
7376
- addFloatingGroup(item, coord, options) {
7377
- var _a, _b, _c, _d, _e, _f, _g;
7527
+ addFloatingGroup(item, options) {
7528
+ var _a, _b, _c, _d, _e;
7378
7529
  let group;
7379
7530
  if (item instanceof DockviewPanel) {
7380
7531
  group = this.createGroup();
@@ -7419,26 +7570,62 @@
7419
7570
  }
7420
7571
  }
7421
7572
  group.model.location = { type: 'floating' };
7422
- const overlayLeft = typeof (coord === null || coord === void 0 ? void 0 : coord.x) === 'number'
7423
- ? Math.max(coord.x, 0)
7424
- : DEFAULT_FLOATING_GROUP_POSITION.left;
7425
- const overlayTop = typeof (coord === null || coord === void 0 ? void 0 : coord.y) === 'number'
7426
- ? Math.max(coord.y, 0)
7427
- : DEFAULT_FLOATING_GROUP_POSITION.top;
7428
- const overlay = new Overlay({
7429
- container: this.gridview.element,
7430
- content: group.element,
7431
- height: (_b = coord === null || coord === void 0 ? void 0 : coord.height) !== null && _b !== void 0 ? _b : 300,
7432
- width: (_c = coord === null || coord === void 0 ? void 0 : coord.width) !== null && _c !== void 0 ? _c : 300,
7433
- left: overlayLeft,
7434
- top: overlayTop,
7435
- minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
7573
+ function getAnchoredBox() {
7574
+ if (options === null || options === void 0 ? void 0 : options.position) {
7575
+ const result = {};
7576
+ if ('left' in options.position) {
7577
+ result.left = Math.max(options.position.left, 0);
7578
+ }
7579
+ else if ('right' in options.position) {
7580
+ result.right = Math.max(options.position.right, 0);
7581
+ }
7582
+ else {
7583
+ result.left = DEFAULT_FLOATING_GROUP_POSITION.left;
7584
+ }
7585
+ if ('top' in options.position) {
7586
+ result.top = Math.max(options.position.top, 0);
7587
+ }
7588
+ else if ('bottom' in options.position) {
7589
+ result.bottom = Math.max(options.position.bottom, 0);
7590
+ }
7591
+ else {
7592
+ result.top = DEFAULT_FLOATING_GROUP_POSITION.top;
7593
+ }
7594
+ if ('width' in options.position) {
7595
+ result.width = Math.max(options.position.width, 0);
7596
+ }
7597
+ else {
7598
+ result.width = DEFAULT_FLOATING_GROUP_POSITION.width;
7599
+ }
7600
+ if ('height' in options.position) {
7601
+ result.height = Math.max(options.position.height, 0);
7602
+ }
7603
+ else {
7604
+ result.height = DEFAULT_FLOATING_GROUP_POSITION.height;
7605
+ }
7606
+ return result;
7607
+ }
7608
+ return {
7609
+ left: typeof (options === null || options === void 0 ? void 0 : options.x) === 'number'
7610
+ ? Math.max(options.x, 0)
7611
+ : DEFAULT_FLOATING_GROUP_POSITION.left,
7612
+ top: typeof (options === null || options === void 0 ? void 0 : options.y) === 'number'
7613
+ ? Math.max(options.y, 0)
7614
+ : DEFAULT_FLOATING_GROUP_POSITION.top,
7615
+ width: typeof (options === null || options === void 0 ? void 0 : options.width) === 'number'
7616
+ ? Math.max(options.width, 0)
7617
+ : DEFAULT_FLOATING_GROUP_POSITION.width,
7618
+ height: typeof (options === null || options === void 0 ? void 0 : options.height) === 'number'
7619
+ ? Math.max(options.height, 0)
7620
+ : DEFAULT_FLOATING_GROUP_POSITION.height,
7621
+ };
7622
+ }
7623
+ const anchoredBox = getAnchoredBox();
7624
+ const overlay = new Overlay(Object.assign(Object.assign({ container: this.gridview.element, content: group.element }, anchoredBox), { minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
7436
7625
  ? undefined
7437
- : (_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumWidthWithinViewport) !== null && _e !== void 0 ? _e : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
7438
- minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
7626
+ : (_c = (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport) !== null && _c !== void 0 ? _c : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE, minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
7439
7627
  ? undefined
7440
- : (_g = (_f = this.options.floatingGroupBounds) === null || _f === void 0 ? void 0 : _f.minimumHeightWithinViewport) !== null && _g !== void 0 ? _g : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
7441
- });
7628
+ : (_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumHeightWithinViewport) !== null && _e !== void 0 ? _e : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE }));
7442
7629
  const el = group.element.querySelector('.void-container');
7443
7630
  if (!el) {
7444
7631
  throw new Error('failed to find drag handle');
@@ -7536,12 +7723,18 @@
7536
7723
  group.overlay.minimumInViewportWidth =
7537
7724
  (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport;
7538
7725
  }
7539
- group.overlay.setBounds({});
7726
+ group.overlay.setBounds();
7540
7727
  }
7541
7728
  }
7542
7729
  if (changed_rootOverlayOptions) {
7543
7730
  this._rootDropTarget.setOverlayModel(options.rootOverlayModel);
7544
7731
  }
7732
+ if (this.gridview.margin !== 0 && options.gap === undefined) {
7733
+ this.gridview.margin = 0;
7734
+ }
7735
+ if (typeof options.gap === 'number') {
7736
+ this.gridview.margin = options.gap;
7737
+ }
7545
7738
  this.layout(this.gridview.width, this.gridview.height, true);
7546
7739
  }
7547
7740
  layout(width, height, forceResize) {
@@ -7703,11 +7896,10 @@
7703
7896
  const { data, position } = serializedFloatingGroup;
7704
7897
  const group = createGroupFromSerializedState(data);
7705
7898
  this.addFloatingGroup(group, {
7706
- x: position.left,
7707
- y: position.top,
7708
- height: position.height,
7709
- width: position.width,
7710
- }, { skipRemoveGroup: true, inDragMode: false });
7899
+ position: position,
7900
+ skipRemoveGroup: true,
7901
+ inDragMode: false,
7902
+ });
7711
7903
  }
7712
7904
  const serializedPopoutGroups = (_b = data.popoutGroups) !== null && _b !== void 0 ? _b : [];
7713
7905
  for (const serializedPopoutGroup of serializedPopoutGroups) {
@@ -7842,11 +8034,7 @@
7842
8034
  options.floating !== null
7843
8035
  ? options.floating
7844
8036
  : {};
7845
- this.addFloatingGroup(group, o, {
7846
- inDragMode: false,
7847
- skipRemoveGroup: true,
7848
- skipActiveGroup: true,
7849
- });
8037
+ this.addFloatingGroup(group, Object.assign(Object.assign({}, o), { inDragMode: false, skipRemoveGroup: true, skipActiveGroup: true }));
7850
8038
  panel = this.createPanel(options, group);
7851
8039
  group.model.openPanel(panel, {
7852
8040
  skipSetActive: options.inactive,
@@ -7885,11 +8073,7 @@
7885
8073
  options.floating !== null
7886
8074
  ? options.floating
7887
8075
  : {};
7888
- this.addFloatingGroup(group, coordinates, {
7889
- inDragMode: false,
7890
- skipRemoveGroup: true,
7891
- skipActiveGroup: true,
7892
- });
8076
+ this.addFloatingGroup(group, Object.assign(Object.assign({}, coordinates), { inDragMode: false, skipRemoveGroup: true, skipActiveGroup: true }));
7893
8077
  panel = this.createPanel(options, group);
7894
8078
  group.model.openPanel(panel, {
7895
8079
  skipSetActive: options.inactive,
@@ -7944,6 +8128,7 @@
7944
8128
  });
7945
8129
  const watermarkContainer = document.createElement('div');
7946
8130
  watermarkContainer.className = 'dv-watermark-container';
8131
+ addTestId(watermarkContainer, 'watermark-component');
7947
8132
  watermarkContainer.appendChild(this.watermark.element);
7948
8133
  this.gridview.element.appendChild(watermarkContainer);
7949
8134
  }
@@ -8132,6 +8317,7 @@
8132
8317
  this.doSetGroupAndPanelActive(destinationGroup);
8133
8318
  this._onDidMovePanel.fire({
8134
8319
  panel: removedPanel,
8320
+ from: sourceGroup,
8135
8321
  });
8136
8322
  }
8137
8323
  else {
@@ -8155,6 +8341,10 @@
8155
8341
  // if a group has one tab - we are essentially moving the 'group'
8156
8342
  // which is equivalent to swapping two views in this case
8157
8343
  this.gridview.moveView(sourceParentLocation, from, to);
8344
+ this._onDidMovePanel.fire({
8345
+ panel: this.getGroupPanel(sourceItemId),
8346
+ from: sourceGroup,
8347
+ });
8158
8348
  return;
8159
8349
  }
8160
8350
  }
@@ -8168,6 +8358,10 @@
8168
8358
  const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, destinationTarget);
8169
8359
  this.movingLock(() => this.doAddGroup(targetGroup, location));
8170
8360
  this.doSetGroupAndPanelActive(targetGroup);
8361
+ this._onDidMovePanel.fire({
8362
+ panel: this.getGroupPanel(sourceItemId),
8363
+ from: sourceGroup,
8364
+ });
8171
8365
  }
8172
8366
  else {
8173
8367
  /**
@@ -8187,6 +8381,10 @@
8187
8381
  skipSetGroupActive: true,
8188
8382
  }));
8189
8383
  this.doSetGroupAndPanelActive(group);
8384
+ this._onDidMovePanel.fire({
8385
+ panel: removedPanel,
8386
+ from: sourceGroup,
8387
+ });
8190
8388
  }
8191
8389
  }
8192
8390
  }
@@ -8211,9 +8409,6 @@
8211
8409
  }
8212
8410
  });
8213
8411
  this.doSetGroupAndPanelActive(to);
8214
- panels.forEach((panel) => {
8215
- this._onDidMovePanel.fire({ panel });
8216
- });
8217
8412
  }
8218
8413
  else {
8219
8414
  switch (from.api.location.type) {
@@ -8239,10 +8434,10 @@
8239
8434
  const referenceLocation = getGridLocation(to.element);
8240
8435
  const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
8241
8436
  this.gridview.addView(from, exports.Sizing.Distribute, dropLocation);
8242
- from.panels.forEach((panel) => {
8243
- this._onDidMovePanel.fire({ panel });
8244
- });
8245
8437
  }
8438
+ from.panels.forEach((panel) => {
8439
+ this._onDidMovePanel.fire({ panel, from });
8440
+ });
8246
8441
  }
8247
8442
  doSetGroupActive(group) {
8248
8443
  super.doSetGroupActive(group);
@@ -9866,8 +10061,21 @@
9866
10061
  }
9867
10062
  return t;
9868
10063
  };
10064
+ function useTitle(api) {
10065
+ const [title, setTitle] = React.useState(api.title);
10066
+ React.useEffect(() => {
10067
+ const disposable = api.onDidTitleChange((event) => {
10068
+ setTitle(event.title);
10069
+ });
10070
+ return () => {
10071
+ disposable.dispose();
10072
+ };
10073
+ }, [api]);
10074
+ return title;
10075
+ }
9869
10076
  const DockviewDefaultTab = (_a) => {
9870
10077
  var { api, containerApi: _containerApi, params: _params, hideClose, closeActionOverride } = _a, rest = __rest(_a, ["api", "containerApi", "params", "hideClose", "closeActionOverride"]);
10078
+ const title = useTitle(api);
9871
10079
  const onClose = React.useCallback((event) => {
9872
10080
  event.preventDefault();
9873
10081
  if (closeActionOverride) {
@@ -9890,7 +10098,7 @@
9890
10098
  }
9891
10099
  }, [api, rest.onClick]);
9892
10100
  return (React.createElement("div", Object.assign({ "data-testid": "dockview-dv-default-tab" }, rest, { onClick: onClick, className: "dv-default-tab" }),
9893
- React.createElement("span", { className: "dv-default-tab-content" }, api.title),
10101
+ React.createElement("span", { className: "dv-default-tab-content" }, title),
9894
10102
  !hideClose && (React.createElement("div", { className: "dv-default-tab-action", onMouseDown: onMouseDown, onClick: onClose },
9895
10103
  React.createElement(CloseButton, null)))));
9896
10104
  };