dockview-core 6.2.2 → 6.4.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 (145) hide show
  1. package/README.md +1 -0
  2. package/dist/cjs/api/dockviewGroupPanelApi.d.ts +10 -1
  3. package/dist/cjs/api/dockviewGroupPanelApi.js +16 -0
  4. package/dist/cjs/dnd/backend.d.ts +70 -0
  5. package/dist/cjs/dnd/backend.js +171 -0
  6. package/dist/cjs/dnd/dropOverlay.d.ts +20 -0
  7. package/dist/cjs/dnd/dropOverlay.js +197 -0
  8. package/dist/cjs/dnd/droptarget.d.ts +20 -6
  9. package/dist/cjs/dnd/droptarget.js +14 -208
  10. package/dist/cjs/dnd/pointer/index.d.ts +11 -0
  11. package/dist/cjs/dnd/pointer/index.js +13 -0
  12. package/dist/cjs/dnd/pointer/longPress.d.ts +32 -0
  13. package/dist/cjs/dnd/pointer/longPress.js +151 -0
  14. package/dist/cjs/dnd/pointer/pointerDragController.d.ts +60 -0
  15. package/dist/cjs/dnd/pointer/pointerDragController.js +241 -0
  16. package/dist/cjs/dnd/pointer/pointerDragSource.d.ts +61 -0
  17. package/dist/cjs/dnd/pointer/pointerDragSource.js +195 -0
  18. package/dist/cjs/dnd/pointer/pointerDropTarget.d.ts +39 -0
  19. package/dist/cjs/dnd/pointer/pointerDropTarget.js +198 -0
  20. package/dist/cjs/dnd/pointer/pointerGhost.d.ts +30 -0
  21. package/dist/cjs/dnd/pointer/pointerGhost.js +44 -0
  22. package/dist/cjs/dnd/pointer/types.d.ts +16 -0
  23. package/dist/cjs/dnd/pointer/types.js +2 -0
  24. package/dist/cjs/dockview/components/panel/content.d.ts +3 -1
  25. package/dist/cjs/dockview/components/panel/content.js +33 -16
  26. package/dist/cjs/dockview/components/popupService.js +34 -0
  27. package/dist/cjs/dockview/components/tab/tab.d.ts +11 -3
  28. package/dist/cjs/dockview/components/tab/tab.js +151 -117
  29. package/dist/cjs/dockview/components/titlebar/tabGroupChip.d.ts +9 -2
  30. package/dist/cjs/dockview/components/titlebar/tabGroupChip.js +15 -6
  31. package/dist/cjs/dockview/components/titlebar/tabGroupIndicator.js +2 -2
  32. package/dist/cjs/dockview/components/titlebar/tabGroups.d.ts +33 -5
  33. package/dist/cjs/dockview/components/titlebar/tabGroups.js +231 -40
  34. package/dist/cjs/dockview/components/titlebar/tabs.d.ts +38 -1
  35. package/dist/cjs/dockview/components/titlebar/tabs.js +381 -253
  36. package/dist/cjs/dockview/components/titlebar/tabsContainer.d.ts +5 -3
  37. package/dist/cjs/dockview/components/titlebar/voidContainer.d.ts +6 -2
  38. package/dist/cjs/dockview/components/titlebar/voidContainer.js +190 -22
  39. package/dist/cjs/dockview/contextMenu.js +19 -4
  40. package/dist/cjs/dockview/dndCapabilities.d.ts +19 -0
  41. package/dist/cjs/dockview/dndCapabilities.js +39 -0
  42. package/dist/cjs/dockview/dockviewComponent.d.ts +2 -0
  43. package/dist/cjs/dockview/dockviewComponent.js +241 -158
  44. package/dist/cjs/dockview/dockviewGroupPanelModel.d.ts +10 -5
  45. package/dist/cjs/dockview/dockviewGroupPanelModel.js +34 -11
  46. package/dist/cjs/dockview/dockviewPanel.js +5 -0
  47. package/dist/cjs/dockview/dockviewPanelModel.d.ts +2 -0
  48. package/dist/cjs/dockview/dockviewPanelModel.js +8 -0
  49. package/dist/cjs/dockview/events.d.ts +2 -1
  50. package/dist/cjs/dockview/events.js +1 -0
  51. package/dist/cjs/dockview/framework.d.ts +8 -0
  52. package/dist/cjs/dockview/options.d.ts +31 -5
  53. package/dist/cjs/dockview/options.js +3 -0
  54. package/dist/cjs/dom.d.ts +5 -1
  55. package/dist/cjs/dom.js +21 -5
  56. package/dist/cjs/index.d.ts +1 -1
  57. package/dist/cjs/overlay/overlay.d.ts +12 -0
  58. package/dist/cjs/overlay/overlay.js +84 -16
  59. package/dist/cjs/paneview/draggablePaneviewPanel.d.ts +3 -1
  60. package/dist/cjs/paneview/draggablePaneviewPanel.js +27 -26
  61. package/dist/cjs/paneview/options.d.ts +4 -3
  62. package/dist/cjs/popoutWindow.d.ts +2 -0
  63. package/dist/cjs/popoutWindow.js +3 -1
  64. package/dist/dockview-core.js +2431 -937
  65. package/dist/dockview-core.min.js +2 -2
  66. package/dist/dockview-core.min.js.map +1 -1
  67. package/dist/dockview-core.min.noStyle.js +2 -2
  68. package/dist/dockview-core.min.noStyle.js.map +1 -1
  69. package/dist/dockview-core.noStyle.js +2430 -936
  70. package/dist/esm/api/dockviewGroupPanelApi.d.ts +10 -1
  71. package/dist/esm/api/dockviewGroupPanelApi.js +12 -0
  72. package/dist/esm/dnd/backend.d.ts +70 -0
  73. package/dist/esm/dnd/backend.js +148 -0
  74. package/dist/esm/dnd/dropOverlay.d.ts +20 -0
  75. package/dist/esm/dnd/dropOverlay.js +192 -0
  76. package/dist/esm/dnd/droptarget.d.ts +20 -6
  77. package/dist/esm/dnd/droptarget.js +16 -210
  78. package/dist/esm/dnd/pointer/index.d.ts +11 -0
  79. package/dist/esm/dnd/pointer/index.js +5 -0
  80. package/dist/esm/dnd/pointer/longPress.d.ts +32 -0
  81. package/dist/esm/dnd/pointer/longPress.js +127 -0
  82. package/dist/esm/dnd/pointer/pointerDragController.d.ts +60 -0
  83. package/dist/esm/dnd/pointer/pointerDragController.js +191 -0
  84. package/dist/esm/dnd/pointer/pointerDragSource.d.ts +61 -0
  85. package/dist/esm/dnd/pointer/pointerDragSource.js +171 -0
  86. package/dist/esm/dnd/pointer/pointerDropTarget.d.ts +39 -0
  87. package/dist/esm/dnd/pointer/pointerDropTarget.js +168 -0
  88. package/dist/esm/dnd/pointer/pointerGhost.d.ts +30 -0
  89. package/dist/esm/dnd/pointer/pointerGhost.js +39 -0
  90. package/dist/esm/dnd/pointer/types.d.ts +16 -0
  91. package/dist/esm/dnd/pointer/types.js +1 -0
  92. package/dist/esm/dockview/components/panel/content.d.ts +3 -1
  93. package/dist/esm/dockview/components/panel/content.js +33 -16
  94. package/dist/esm/dockview/components/popupService.js +34 -0
  95. package/dist/esm/dockview/components/tab/tab.d.ts +11 -3
  96. package/dist/esm/dockview/components/tab/tab.js +139 -114
  97. package/dist/esm/dockview/components/titlebar/tabGroupChip.d.ts +9 -2
  98. package/dist/esm/dockview/components/titlebar/tabGroupChip.js +15 -6
  99. package/dist/esm/dockview/components/titlebar/tabGroupIndicator.js +2 -2
  100. package/dist/esm/dockview/components/titlebar/tabGroups.d.ts +33 -5
  101. package/dist/esm/dockview/components/titlebar/tabGroups.js +177 -12
  102. package/dist/esm/dockview/components/titlebar/tabs.d.ts +38 -1
  103. package/dist/esm/dockview/components/titlebar/tabs.js +360 -229
  104. package/dist/esm/dockview/components/titlebar/tabsContainer.d.ts +5 -3
  105. package/dist/esm/dockview/components/titlebar/voidContainer.d.ts +6 -2
  106. package/dist/esm/dockview/components/titlebar/voidContainer.js +180 -26
  107. package/dist/esm/dockview/contextMenu.js +19 -4
  108. package/dist/esm/dockview/dndCapabilities.d.ts +19 -0
  109. package/dist/esm/dockview/dndCapabilities.js +36 -0
  110. package/dist/esm/dockview/dockviewComponent.d.ts +2 -0
  111. package/dist/esm/dockview/dockviewComponent.js +104 -41
  112. package/dist/esm/dockview/dockviewGroupPanelModel.d.ts +10 -5
  113. package/dist/esm/dockview/dockviewGroupPanelModel.js +33 -11
  114. package/dist/esm/dockview/dockviewPanel.js +5 -0
  115. package/dist/esm/dockview/dockviewPanelModel.d.ts +2 -0
  116. package/dist/esm/dockview/dockviewPanelModel.js +8 -0
  117. package/dist/esm/dockview/events.d.ts +2 -1
  118. package/dist/esm/dockview/events.js +1 -0
  119. package/dist/esm/dockview/framework.d.ts +8 -0
  120. package/dist/esm/dockview/options.d.ts +31 -5
  121. package/dist/esm/dockview/options.js +3 -0
  122. package/dist/esm/dom.d.ts +5 -1
  123. package/dist/esm/dom.js +20 -5
  124. package/dist/esm/index.d.ts +1 -1
  125. package/dist/esm/overlay/overlay.d.ts +12 -0
  126. package/dist/esm/overlay/overlay.js +85 -17
  127. package/dist/esm/paneview/draggablePaneviewPanel.d.ts +3 -1
  128. package/dist/esm/paneview/draggablePaneviewPanel.js +26 -20
  129. package/dist/esm/paneview/options.d.ts +4 -3
  130. package/dist/esm/popoutWindow.d.ts +2 -0
  131. package/dist/esm/popoutWindow.js +3 -1
  132. package/dist/package/main.cjs.js +2430 -936
  133. package/dist/package/main.cjs.min.js +2 -2
  134. package/dist/package/main.esm.min.mjs +2 -2
  135. package/dist/package/main.esm.mjs +2430 -936
  136. package/dist/styles/dockview.css +117 -1
  137. package/package.json +3 -1
  138. package/dist/cjs/dnd/abstractDragHandler.d.ts +0 -14
  139. package/dist/cjs/dnd/abstractDragHandler.js +0 -86
  140. package/dist/cjs/dnd/groupDragHandler.d.ts +0 -12
  141. package/dist/cjs/dnd/groupDragHandler.js +0 -82
  142. package/dist/esm/dnd/abstractDragHandler.d.ts +0 -14
  143. package/dist/esm/dnd/abstractDragHandler.js +0 -63
  144. package/dist/esm/dnd/groupDragHandler.d.ts +0 -12
  145. package/dist/esm/dnd/groupDragHandler.js +0 -59
package/dist/dockview-core.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * dockview-core
3
- * @version 6.2.2
3
+ * @version 6.4.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-scrollable {\n position: relative;\n overflow: hidden;\n}\n.dv-scrollable .dv-scrollbar {\n position: absolute;\n border-radius: 2px;\n background-color: transparent;\n /* GPU optimizations */\n will-change: background-color, transform;\n transform: translate3d(0, 0, 0);\n backface-visibility: hidden;\n transition-property: background-color;\n transition-timing-function: ease-in-out;\n transition-duration: 1s;\n transition-delay: 0s;\n}\n.dv-scrollable .dv-scrollbar-horizontal {\n bottom: 0px;\n left: 0px;\n height: 4px;\n}\n.dv-scrollable .dv-scrollbar-vertical {\n right: 0px;\n top: 0px;\n width: 4px;\n}\n.dv-scrollable:hover .dv-scrollbar, .dv-scrollable.dv-scrollable-resizing .dv-scrollbar, .dv-scrollable.dv-scrollable-scrolling .dv-scrollbar {\n background-color: var(--dv-scrollbar-background-color, rgba(255, 255, 255, 0.25));\n}\n.dv-svg {\n display: inline-block;\n fill: currentcolor;\n line-height: 1;\n stroke: currentcolor;\n stroke-width: 0;\n}\n.dockview-theme-dark {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n}\n.dockview-theme-dark .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n.dockview-theme-dark {\n --dv-group-view-background-color: #1e1e1e;\n --dv-tabs-and-actions-container-background-color: #252526;\n --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-tab-divider-color: #1e1e1e;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: #969696;\n --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n --dv-separator-border: rgb(68, 68, 68);\n --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n}\n\n.dockview-theme-light {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n}\n.dockview-theme-light .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n.dockview-theme-light {\n --dv-group-view-background-color: white;\n --dv-tabs-and-actions-container-background-color: #f3f3f3;\n --dv-activegroup-visiblepanel-tab-background-color: white;\n --dv-activegroup-hiddenpanel-tab-background-color: #ececec;\n --dv-inactivegroup-visiblepanel-tab-background-color: white;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #ececec;\n --dv-tab-divider-color: white;\n --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n --dv-activegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.7);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(51, 51, 51, 0.7);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.35);\n --dv-separator-border: rgba(128, 128, 128, 0.35);\n --dv-paneview-header-border-color: rgb(51, 51, 51);\n --dv-scrollbar-background-color: rgba(0, 0, 0, 0.25);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);\n --dv-floating-border: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n.dockview-theme-vs {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n}\n.dockview-theme-vs .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n.dockview-theme-vs {\n --dv-group-view-background-color: #1e1e1e;\n --dv-tabs-and-actions-container-background-color: #252526;\n --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-tab-divider-color: #1e1e1e;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: #969696;\n --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n --dv-separator-border: rgb(68, 68, 68);\n --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n --dv-tabs-and-actions-container-background-color: #2d2d30;\n --dv-tabs-and-actions-container-height: 20px;\n --dv-tabs-and-actions-container-font-size: 11px;\n --dv-activegroup-visiblepanel-tab-background-color: #007acc;\n --dv-inactivegroup-visiblepanel-tab-background-color: #3f3f46;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: white;\n --dv-inactivegroup-visiblepanel-tab-color: white;\n --dv-inactivegroup-hiddenpanel-tab-color: white;\n}\n.dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container {\n box-sizing: content-box;\n border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tab.dv-active-tab {\n border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tab.dv-inactive-tab {\n border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container {\n box-sizing: content-box;\n border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tab.dv-active-tab {\n border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tab.dv-inactive-tab {\n border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n}\n\n.dockview-theme-abyss {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n}\n.dockview-theme-abyss .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n.dockview-theme-abyss {\n --dv-color-abyss-dark: #000c18;\n --dv-color-abyss: #10192c;\n --dv-color-abyss-light: #1c1c2a;\n --dv-color-abyss-lighter: #2b2b4a;\n --dv-color-abyss-accent: rgb(91, 30, 207);\n --dv-color-abyss-primary-text: white;\n --dv-color-abyss-secondary-text: rgb(148, 151, 169);\n --dv-group-view-background-color: var(--dv-color-abyss-dark);\n --dv-tabs-and-actions-container-background-color: var(\n --dv-color-abyss-light\n );\n --dv-activegroup-visiblepanel-tab-background-color: var(\n --dv-color-abyss-dark\n );\n --dv-activegroup-hiddenpanel-tab-background-color: var(--dv-color-abyss);\n --dv-inactivegroup-visiblepanel-tab-background-color: var(\n --dv-color-abyss-dark\n );\n --dv-inactivegroup-hiddenpanel-tab-background-color: var(--dv-color-abyss);\n --dv-tab-divider-color: var(--dv-color-abyss-lighter);\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);\n --dv-separator-border: var(--dv-color-abyss-lighter);\n --dv-paneview-header-border-color: var(--dv-color-abyss-lighter);\n --dv-paneview-active-outline-color: #596f99;\n}\n\n.dockview-theme-dracula {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n}\n.dockview-theme-dracula .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n.dockview-theme-dracula {\n --dv-group-view-background-color: #282a36;\n --dv-tabs-and-actions-container-background-color: #191a21;\n --dv-activegroup-visiblepanel-tab-background-color: #282a36;\n --dv-activegroup-hiddenpanel-tab-background-color: #21222c;\n --dv-inactivegroup-visiblepanel-tab-background-color: #282a36;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #21222c;\n --dv-tab-divider-color: #191a21;\n --dv-activegroup-visiblepanel-tab-color: rgb(248, 248, 242);\n --dv-activegroup-hiddenpanel-tab-color: rgb(98, 114, 164);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(98, 114, 164, 0.5);\n --dv-separator-border: #bd93f9;\n --dv-paneview-header-border-color: #bd93f9;\n --dv-paneview-active-outline-color: #6272a4;\n}\n.dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab {\n position: relative;\n}\n.dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab::after {\n position: absolute;\n left: 0px;\n top: 0px;\n content: \"\";\n width: 100%;\n height: 1px;\n background-color: #94527e;\n z-index: 999;\n}\n.dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab {\n position: relative;\n}\n.dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab::after {\n position: absolute;\n left: 0px;\n bottom: 0px;\n content: \"\";\n width: 100%;\n height: 1px;\n background-color: #5e3d5a;\n z-index: 999;\n}\n\n.dockview-theme-nord {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n}\n.dockview-theme-nord .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n.dockview-theme-nord {\n --dv-color-nord-polar-0: #2e3440;\n --dv-color-nord-polar-1: #3b4252;\n --dv-color-nord-polar-2: #434c5e;\n --dv-color-nord-polar-3: #4c566a;\n --dv-color-nord-frost: #88c0d0;\n --dv-color-nord-frost-2: #81a1c1;\n --dv-color-nord-snow-0: #eceff4;\n --dv-color-nord-snow-1: #d8dee9;\n --dv-group-view-background-color: var(--dv-color-nord-polar-0);\n --dv-tabs-and-actions-container-background-color: var(\n --dv-color-nord-polar-1\n );\n --dv-activegroup-visiblepanel-tab-background-color: var(\n --dv-color-nord-polar-0\n );\n --dv-activegroup-hiddenpanel-tab-background-color: var(\n --dv-color-nord-polar-2\n );\n --dv-inactivegroup-visiblepanel-tab-background-color: var(\n --dv-color-nord-polar-1\n );\n --dv-inactivegroup-hiddenpanel-tab-background-color: var(\n --dv-color-nord-polar-2\n );\n --dv-activegroup-visiblepanel-tab-color: var(--dv-color-nord-snow-0);\n --dv-activegroup-hiddenpanel-tab-color: var(--dv-color-nord-snow-1);\n --dv-inactivegroup-visiblepanel-tab-color: #8a9bbf;\n --dv-inactivegroup-hiddenpanel-tab-color: #5e6f8e;\n --dv-separator-border: var(--dv-color-nord-polar-3);\n --dv-paneview-active-outline-color: var(--dv-color-nord-frost);\n --dv-active-sash-color: var(--dv-color-nord-frost);\n --dv-scrollbar-background-color: rgba(76, 86, 106, 0.5);\n}\n.dockview-theme-nord .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab {\n position: relative;\n}\n.dockview-theme-nord .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab::after {\n position: absolute;\n left: 0px;\n bottom: 0px;\n content: \"\";\n width: 100%;\n height: 2px;\n background-color: var(--dv-color-nord-frost);\n z-index: 999;\n}\n.dockview-theme-nord .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab {\n position: relative;\n}\n.dockview-theme-nord .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab::after {\n position: absolute;\n left: 0px;\n bottom: 0px;\n content: \"\";\n width: 100%;\n height: 2px;\n background-color: var(--dv-color-nord-frost-2);\n z-index: 999;\n}\n\n.dockview-theme-nord-spaced {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n --dv-spacing-padding: 10px;\n --dv-tab-font-size: 12px;\n --dv-border-radius: 20px;\n --dv-tab-margin: 0.5rem 0.25rem;\n --dv-tabs-and-actions-container-height: 44px;\n --dv-tab-border-radius: 8px;\n --dv-sash-border-radius: 4px;\n --dv-dropdown-border-radius: 8px;\n --dv-tab-close-icon-size: 8px;\n --dv-floating-group-border: 2px solid var(--dv-group-view-background-color);\n box-sizing: border-box;\n padding: var(--dv-spacing-padding);\n background-color: var(--dv-group-view-background-color);\n}\n.dv-shell .dockview-theme-nord-spaced {\n padding: 0;\n}\n.dockview-theme-nord-spaced .dv-resize-container:has(> .dv-groupview) {\n border-radius: 8px;\n}\n.dockview-theme-nord-spaced .dv-sash {\n border-radius: var(--dv-sash-border-radius);\n}\n.dockview-theme-nord-spaced .dv-drop-target-anchor {\n border-radius: calc(var(--dv-border-radius) / 4);\n}\n.dockview-theme-nord-spaced .dv-drop-target-anchor.dv-drop-target-content {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-nord-spaced .dv-resize-container {\n border-radius: var(--dv-border-radius) !important;\n border: none;\n}\n.dockview-theme-nord-spaced .dv-resize-container .dv-groupview {\n border: var(--dv-floating-group-border);\n}\n.dockview-theme-nord-spaced .dv-tabs-overflow-container,\n.dockview-theme-nord-spaced .dv-tabs-overflow-dropdown-default {\n border-radius: var(--dv-dropdown-border-radius);\n height: unset !important;\n}\n.dockview-theme-nord-spaced .dv-render-overlay {\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-theme-nord-spaced .dv-tab {\n border-radius: var(--dv-tab-border-radius);\n}\n.dockview-theme-nord-spaced .dv-tab .dv-svg {\n height: var(--dv-tab-close-icon-size);\n width: var(--dv-tab-close-icon-size);\n}\n.dockview-theme-nord-spaced .dv-tabs-container-vertical .dv-tab {\n margin: 0.25rem 0.5rem;\n}\n.dockview-theme-nord-spaced .dv-groupview {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-nord-spaced .dv-groupview .dv-tabs-and-actions-container {\n padding: 0px calc(var(--dv-border-radius) / 2);\n}\n.dockview-theme-nord-spaced .dv-groupview .dv-tabs-and-actions-container.dv-groupview-header-vertical {\n padding: calc(var(--dv-border-radius) / 2) 0;\n}\n.dockview-theme-nord-spaced .dv-groupview .dv-content-container {\n background-color: var(--dv-tabs-and-actions-container-background-color);\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-theme-nord-spaced {\n --dv-color-nord-polar-0: #2e3440;\n --dv-color-nord-polar-1: #3b4252;\n --dv-color-nord-polar-2: #434c5e;\n --dv-color-nord-polar-3: #4c566a;\n --dv-color-nord-frost: #88c0d0;\n --dv-color-nord-frost-2: #81a1c1;\n --dv-color-nord-snow-0: #eceff4;\n --dv-color-nord-snow-1: #d8dee9;\n --dv-group-view-background-color: var(--dv-color-nord-polar-0);\n --dv-tabs-and-actions-container-background-color: var(\n --dv-color-nord-polar-1\n );\n --dv-activegroup-visiblepanel-tab-background-color: var(\n --dv-color-nord-polar-2\n );\n --dv-activegroup-hiddenpanel-tab-background-color: var(\n --dv-color-nord-polar-1\n );\n --dv-inactivegroup-visiblepanel-tab-background-color: var(\n --dv-color-nord-polar-2\n );\n --dv-inactivegroup-hiddenpanel-tab-background-color: var(\n --dv-color-nord-polar-1\n );\n --dv-activegroup-visiblepanel-tab-color: var(--dv-color-nord-snow-0);\n --dv-activegroup-hiddenpanel-tab-color: var(--dv-color-nord-snow-1);\n --dv-inactivegroup-visiblepanel-tab-color: #8a9bbf;\n --dv-inactivegroup-hiddenpanel-tab-color: #5e6f8e;\n --dv-separator-border: transparent;\n --dv-paneview-active-outline-color: var(--dv-color-nord-frost);\n --dv-active-sash-color: var(--dv-color-nord-frost);\n --dv-scrollbar-background-color: rgba(76, 86, 106, 0.5);\n --dv-floating-group-border: 2px solid var(--dv-color-nord-polar-0);\n}\n\n.dockview-theme-catppuccin-mocha {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n}\n.dockview-theme-catppuccin-mocha .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n.dockview-theme-catppuccin-mocha {\n --dv-color-mocha-crust: #11111b;\n --dv-color-mocha-mantle: #181825;\n --dv-color-mocha-base: #1e1e2e;\n --dv-color-mocha-surface0: #313244;\n --dv-color-mocha-surface1: #45475a;\n --dv-color-mocha-text: #cdd6f4;\n --dv-color-mocha-subtext1: #bac2de;\n --dv-color-mocha-subtext0: #a6adc8;\n --dv-color-mocha-mauve: #cba6f7;\n --dv-color-mocha-lavender: #b4befe;\n --dv-group-view-background-color: var(--dv-color-mocha-base);\n --dv-tabs-and-actions-container-background-color: var(\n --dv-color-mocha-mantle\n );\n --dv-activegroup-visiblepanel-tab-background-color: var(\n --dv-color-mocha-base\n );\n --dv-activegroup-hiddenpanel-tab-background-color: var(\n --dv-color-mocha-surface0\n );\n --dv-inactivegroup-visiblepanel-tab-background-color: var(\n --dv-color-mocha-mantle\n );\n --dv-inactivegroup-hiddenpanel-tab-background-color: var(\n --dv-color-mocha-crust\n );\n --dv-activegroup-visiblepanel-tab-color: var(--dv-color-mocha-text);\n --dv-activegroup-hiddenpanel-tab-color: var(--dv-color-mocha-subtext1);\n --dv-inactivegroup-visiblepanel-tab-color: var(--dv-color-mocha-subtext0);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(166, 173, 200, 0.5);\n --dv-separator-border: var(--dv-color-mocha-surface1);\n --dv-paneview-active-outline-color: var(--dv-color-mocha-mauve);\n --dv-active-sash-color: var(--dv-color-mocha-mauve);\n --dv-scrollbar-background-color: rgba(49, 50, 68, 0.8);\n}\n.dockview-theme-catppuccin-mocha .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab {\n position: relative;\n}\n.dockview-theme-catppuccin-mocha .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab::after {\n position: absolute;\n left: 0px;\n top: 0px;\n content: \"\";\n width: 100%;\n height: 2px;\n background-color: var(--dv-color-mocha-mauve);\n z-index: 999;\n}\n.dockview-theme-catppuccin-mocha .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab {\n position: relative;\n}\n.dockview-theme-catppuccin-mocha .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab::after {\n position: absolute;\n left: 0px;\n top: 0px;\n content: \"\";\n width: 100%;\n height: 2px;\n background-color: rgba(180, 190, 254, 0.4);\n z-index: 999;\n}\n\n.dockview-theme-catppuccin-mocha-spaced {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n --dv-spacing-padding: 10px;\n --dv-tab-font-size: 12px;\n --dv-border-radius: 20px;\n --dv-tab-margin: 0.5rem 0.25rem;\n --dv-tabs-and-actions-container-height: 44px;\n --dv-tab-border-radius: 8px;\n --dv-sash-border-radius: 4px;\n --dv-dropdown-border-radius: 8px;\n --dv-tab-close-icon-size: 8px;\n --dv-floating-group-border: 2px solid var(--dv-group-view-background-color);\n box-sizing: border-box;\n padding: var(--dv-spacing-padding);\n background-color: var(--dv-group-view-background-color);\n}\n.dv-shell .dockview-theme-catppuccin-mocha-spaced {\n padding: 0;\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-resize-container:has(> .dv-groupview) {\n border-radius: 8px;\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-sash {\n border-radius: var(--dv-sash-border-radius);\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-drop-target-anchor {\n border-radius: calc(var(--dv-border-radius) / 4);\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-drop-target-anchor.dv-drop-target-content {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-resize-container {\n border-radius: var(--dv-border-radius) !important;\n border: none;\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-resize-container .dv-groupview {\n border: var(--dv-floating-group-border);\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-tabs-overflow-container,\n.dockview-theme-catppuccin-mocha-spaced .dv-tabs-overflow-dropdown-default {\n border-radius: var(--dv-dropdown-border-radius);\n height: unset !important;\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-render-overlay {\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-tab {\n border-radius: var(--dv-tab-border-radius);\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-tab .dv-svg {\n height: var(--dv-tab-close-icon-size);\n width: var(--dv-tab-close-icon-size);\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-tabs-container-vertical .dv-tab {\n margin: 0.25rem 0.5rem;\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-groupview {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-groupview .dv-tabs-and-actions-container {\n padding: 0px calc(var(--dv-border-radius) / 2);\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-groupview .dv-tabs-and-actions-container.dv-groupview-header-vertical {\n padding: calc(var(--dv-border-radius) / 2) 0;\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-groupview .dv-content-container {\n background-color: var(--dv-tabs-and-actions-container-background-color);\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-theme-catppuccin-mocha-spaced {\n --dv-color-mocha-crust: #11111b;\n --dv-color-mocha-mantle: #181825;\n --dv-color-mocha-base: #1e1e2e;\n --dv-color-mocha-surface0: #313244;\n --dv-color-mocha-surface1: #45475a;\n --dv-color-mocha-text: #cdd6f4;\n --dv-color-mocha-subtext1: #bac2de;\n --dv-color-mocha-subtext0: #a6adc8;\n --dv-color-mocha-mauve: #cba6f7;\n --dv-color-mocha-lavender: #b4befe;\n --dv-group-view-background-color: var(--dv-color-mocha-crust);\n --dv-tabs-and-actions-container-background-color: var(\n --dv-color-mocha-mantle\n );\n --dv-activegroup-visiblepanel-tab-background-color: var(\n --dv-color-mocha-surface0\n );\n --dv-activegroup-hiddenpanel-tab-background-color: var(\n --dv-color-mocha-mantle\n );\n --dv-inactivegroup-visiblepanel-tab-background-color: var(\n --dv-color-mocha-surface0\n );\n --dv-inactivegroup-hiddenpanel-tab-background-color: var(\n --dv-color-mocha-mantle\n );\n --dv-activegroup-visiblepanel-tab-color: var(--dv-color-mocha-text);\n --dv-activegroup-hiddenpanel-tab-color: var(--dv-color-mocha-subtext1);\n --dv-inactivegroup-visiblepanel-tab-color: var(--dv-color-mocha-subtext0);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(166, 173, 200, 0.5);\n --dv-separator-border: transparent;\n --dv-paneview-active-outline-color: var(--dv-color-mocha-mauve);\n --dv-active-sash-color: var(--dv-color-mocha-mauve);\n --dv-scrollbar-background-color: rgba(49, 50, 68, 0.8);\n --dv-floating-group-border: 2px solid var(--dv-color-mocha-crust);\n}\n\n.dockview-theme-monokai {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n}\n.dockview-theme-monokai .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n.dockview-theme-monokai {\n --dv-color-monokai-bg: #272822;\n --dv-color-monokai-bg-light: #3e3d32;\n --dv-color-monokai-comment: #75715e;\n --dv-color-monokai-fg: #f8f8f2;\n --dv-color-monokai-green: #a6e22e;\n --dv-group-view-background-color: var(--dv-color-monokai-bg);\n --dv-tabs-and-actions-container-background-color: var(\n --dv-color-monokai-bg-light\n );\n --dv-activegroup-visiblepanel-tab-background-color: var(\n --dv-color-monokai-bg\n );\n --dv-activegroup-hiddenpanel-tab-background-color: #2d2c25;\n --dv-inactivegroup-visiblepanel-tab-background-color: var(\n --dv-color-monokai-bg\n );\n --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2c25;\n --dv-activegroup-visiblepanel-tab-color: var(--dv-color-monokai-fg);\n --dv-activegroup-hiddenpanel-tab-color: var(--dv-color-monokai-comment);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(117, 113, 94, 0.5);\n --dv-separator-border: var(--dv-color-monokai-bg-light);\n --dv-paneview-active-outline-color: var(--dv-color-monokai-green);\n --dv-active-sash-color: var(--dv-color-monokai-green);\n --dv-scrollbar-background-color: rgba(117, 113, 94, 0.5);\n}\n.dockview-theme-monokai .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab {\n position: relative;\n}\n.dockview-theme-monokai .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab::after {\n position: absolute;\n left: 0px;\n bottom: 0px;\n content: \"\";\n width: 100%;\n height: 2px;\n background-color: var(--dv-color-monokai-green);\n z-index: 999;\n}\n.dockview-theme-monokai .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab {\n position: relative;\n}\n.dockview-theme-monokai .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab::after {\n position: absolute;\n left: 0px;\n bottom: 0px;\n content: \"\";\n width: 100%;\n height: 2px;\n background-color: rgba(166, 226, 46, 0.35);\n z-index: 999;\n}\n\n.dockview-theme-solarized-light {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n}\n.dockview-theme-solarized-light .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n.dockview-theme-solarized-light {\n --dv-color-sol-base3: #fdf6e3;\n --dv-color-sol-base2: #eee8d5;\n --dv-color-sol-base1: #93a1a1;\n --dv-color-sol-base00: #657b83;\n --dv-color-sol-base01: #586e75;\n --dv-color-sol-blue: #268bd2;\n --dv-group-view-background-color: var(--dv-color-sol-base3);\n --dv-tabs-and-actions-container-background-color: var(--dv-color-sol-base2);\n --dv-activegroup-visiblepanel-tab-background-color: var(\n --dv-color-sol-base3\n );\n --dv-activegroup-hiddenpanel-tab-background-color: #e8e2d0;\n --dv-inactivegroup-visiblepanel-tab-background-color: var(\n --dv-color-sol-base3\n );\n --dv-inactivegroup-hiddenpanel-tab-background-color: #e8e2d0;\n --dv-activegroup-visiblepanel-tab-color: var(--dv-color-sol-base01);\n --dv-activegroup-hiddenpanel-tab-color: var(--dv-color-sol-base00);\n --dv-inactivegroup-visiblepanel-tab-color: var(--dv-color-sol-base1);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(147, 161, 161, 0.6);\n --dv-separator-border: var(--dv-color-sol-base2);\n --dv-paneview-active-outline-color: var(--dv-color-sol-blue);\n --dv-active-sash-color: var(--dv-color-sol-blue);\n --dv-scrollbar-background-color: rgba(101, 123, 131, 0.25);\n --dv-drag-over-background-color: rgba(38, 139, 210, 0.15);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);\n --dv-floating-border: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n.dockview-theme-solarized-light-spaced {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n --dv-spacing-padding: 10px;\n --dv-tab-font-size: 12px;\n --dv-border-radius: 20px;\n --dv-tab-margin: 0.5rem 0.25rem;\n --dv-tabs-and-actions-container-height: 44px;\n --dv-tab-border-radius: 8px;\n --dv-sash-border-radius: 4px;\n --dv-dropdown-border-radius: 8px;\n --dv-tab-close-icon-size: 8px;\n --dv-floating-group-border: 2px solid var(--dv-group-view-background-color);\n box-sizing: border-box;\n padding: var(--dv-spacing-padding);\n background-color: var(--dv-group-view-background-color);\n}\n.dv-shell .dockview-theme-solarized-light-spaced {\n padding: 0;\n}\n.dockview-theme-solarized-light-spaced .dv-resize-container:has(> .dv-groupview) {\n border-radius: 8px;\n}\n.dockview-theme-solarized-light-spaced .dv-sash {\n border-radius: var(--dv-sash-border-radius);\n}\n.dockview-theme-solarized-light-spaced .dv-drop-target-anchor {\n border-radius: calc(var(--dv-border-radius) / 4);\n}\n.dockview-theme-solarized-light-spaced .dv-drop-target-anchor.dv-drop-target-content {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-solarized-light-spaced .dv-resize-container {\n border-radius: var(--dv-border-radius) !important;\n border: none;\n}\n.dockview-theme-solarized-light-spaced .dv-resize-container .dv-groupview {\n border: var(--dv-floating-group-border);\n}\n.dockview-theme-solarized-light-spaced .dv-tabs-overflow-container,\n.dockview-theme-solarized-light-spaced .dv-tabs-overflow-dropdown-default {\n border-radius: var(--dv-dropdown-border-radius);\n height: unset !important;\n}\n.dockview-theme-solarized-light-spaced .dv-render-overlay {\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-theme-solarized-light-spaced .dv-tab {\n border-radius: var(--dv-tab-border-radius);\n}\n.dockview-theme-solarized-light-spaced .dv-tab .dv-svg {\n height: var(--dv-tab-close-icon-size);\n width: var(--dv-tab-close-icon-size);\n}\n.dockview-theme-solarized-light-spaced .dv-tabs-container-vertical .dv-tab {\n margin: 0.25rem 0.5rem;\n}\n.dockview-theme-solarized-light-spaced .dv-groupview {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-solarized-light-spaced .dv-groupview .dv-tabs-and-actions-container {\n padding: 0px calc(var(--dv-border-radius) / 2);\n}\n.dockview-theme-solarized-light-spaced .dv-groupview .dv-tabs-and-actions-container.dv-groupview-header-vertical {\n padding: calc(var(--dv-border-radius) / 2) 0;\n}\n.dockview-theme-solarized-light-spaced .dv-groupview .dv-content-container {\n background-color: var(--dv-tabs-and-actions-container-background-color);\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-theme-solarized-light-spaced {\n --dv-color-sol-base3: #fdf6e3;\n --dv-color-sol-base2: #eee8d5;\n --dv-color-sol-base1: #93a1a1;\n --dv-color-sol-base00: #657b83;\n --dv-color-sol-base01: #586e75;\n --dv-color-sol-blue: #268bd2;\n --dv-drag-over-background-color: rgba(38, 139, 210, 0.1);\n --dv-group-view-background-color: var(--dv-color-sol-base2);\n --dv-tabs-and-actions-container-background-color: var(--dv-color-sol-base3);\n --dv-activegroup-visiblepanel-tab-background-color: #e8e2d0;\n --dv-activegroup-hiddenpanel-tab-background-color: var(\n --dv-color-sol-base3\n );\n --dv-inactivegroup-visiblepanel-tab-background-color: #e8e2d0;\n --dv-inactivegroup-hiddenpanel-tab-background-color: var(\n --dv-color-sol-base3\n );\n --dv-activegroup-visiblepanel-tab-color: var(--dv-color-sol-base01);\n --dv-activegroup-hiddenpanel-tab-color: var(--dv-color-sol-base00);\n --dv-inactivegroup-visiblepanel-tab-color: var(--dv-color-sol-base1);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(147, 161, 161, 0.6);\n --dv-separator-border: transparent;\n --dv-paneview-active-outline-color: var(--dv-color-sol-blue);\n --dv-active-sash-color: var(--dv-color-sol-blue);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);\n --dv-floating-border: 1px solid rgba(0, 0, 0, 0.1);\n --dv-scrollbar-background-color: rgba(101, 123, 131, 0.25);\n --dv-floating-group-border: 2px solid rgba(238, 232, 213, 0.5);\n}\n\n.dockview-theme-github-dark {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n}\n.dockview-theme-github-dark .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n.dockview-theme-github-dark {\n --dv-color-gh-canvas-default: #0d1117;\n --dv-color-gh-canvas-subtle: #161b22;\n --dv-color-gh-canvas-inset: #010409;\n --dv-color-gh-border: #30363d;\n --dv-color-gh-border-muted: #21262d;\n --dv-color-gh-fg-default: #e6edf3;\n --dv-color-gh-fg-muted: #8b949e;\n --dv-color-gh-fg-subtle: #6e7681;\n --dv-color-gh-accent: #58a6ff;\n --dv-group-view-background-color: var(--dv-color-gh-canvas-default);\n --dv-tabs-and-actions-container-background-color: var(\n --dv-color-gh-canvas-subtle\n );\n --dv-activegroup-visiblepanel-tab-background-color: var(\n --dv-color-gh-canvas-default\n );\n --dv-activegroup-hiddenpanel-tab-background-color: var(\n --dv-color-gh-canvas-subtle\n );\n --dv-inactivegroup-visiblepanel-tab-background-color: var(\n --dv-color-gh-canvas-default\n );\n --dv-inactivegroup-hiddenpanel-tab-background-color: var(\n --dv-color-gh-canvas-subtle\n );\n --dv-activegroup-visiblepanel-tab-color: var(--dv-color-gh-fg-default);\n --dv-activegroup-hiddenpanel-tab-color: var(--dv-color-gh-fg-muted);\n --dv-inactivegroup-visiblepanel-tab-color: var(--dv-color-gh-fg-subtle);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(110, 118, 129, 0.5);\n --dv-separator-border: var(--dv-color-gh-border);\n --dv-paneview-active-outline-color: var(--dv-color-gh-accent);\n --dv-active-sash-color: var(--dv-color-gh-accent);\n --dv-scrollbar-background-color: rgba(48, 54, 61, 0.7);\n --dv-drag-over-background-color: rgba(88, 166, 255, 0.15);\n}\n\n.dockview-theme-github-dark-spaced {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n --dv-spacing-padding: 10px;\n --dv-tab-font-size: 12px;\n --dv-border-radius: 20px;\n --dv-tab-margin: 0.5rem 0.25rem;\n --dv-tabs-and-actions-container-height: 44px;\n --dv-tab-border-radius: 8px;\n --dv-sash-border-radius: 4px;\n --dv-dropdown-border-radius: 8px;\n --dv-tab-close-icon-size: 8px;\n --dv-floating-group-border: 2px solid var(--dv-group-view-background-color);\n box-sizing: border-box;\n padding: var(--dv-spacing-padding);\n background-color: var(--dv-group-view-background-color);\n}\n.dv-shell .dockview-theme-github-dark-spaced {\n padding: 0;\n}\n.dockview-theme-github-dark-spaced .dv-resize-container:has(> .dv-groupview) {\n border-radius: 8px;\n}\n.dockview-theme-github-dark-spaced .dv-sash {\n border-radius: var(--dv-sash-border-radius);\n}\n.dockview-theme-github-dark-spaced .dv-drop-target-anchor {\n border-radius: calc(var(--dv-border-radius) / 4);\n}\n.dockview-theme-github-dark-spaced .dv-drop-target-anchor.dv-drop-target-content {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-github-dark-spaced .dv-resize-container {\n border-radius: var(--dv-border-radius) !important;\n border: none;\n}\n.dockview-theme-github-dark-spaced .dv-resize-container .dv-groupview {\n border: var(--dv-floating-group-border);\n}\n.dockview-theme-github-dark-spaced .dv-tabs-overflow-container,\n.dockview-theme-github-dark-spaced .dv-tabs-overflow-dropdown-default {\n border-radius: var(--dv-dropdown-border-radius);\n height: unset !important;\n}\n.dockview-theme-github-dark-spaced .dv-render-overlay {\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-theme-github-dark-spaced .dv-tab {\n border-radius: var(--dv-tab-border-radius);\n}\n.dockview-theme-github-dark-spaced .dv-tab .dv-svg {\n height: var(--dv-tab-close-icon-size);\n width: var(--dv-tab-close-icon-size);\n}\n.dockview-theme-github-dark-spaced .dv-tabs-container-vertical .dv-tab {\n margin: 0.25rem 0.5rem;\n}\n.dockview-theme-github-dark-spaced .dv-groupview {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-github-dark-spaced .dv-groupview .dv-tabs-and-actions-container {\n padding: 0px calc(var(--dv-border-radius) / 2);\n}\n.dockview-theme-github-dark-spaced .dv-groupview .dv-tabs-and-actions-container.dv-groupview-header-vertical {\n padding: calc(var(--dv-border-radius) / 2) 0;\n}\n.dockview-theme-github-dark-spaced .dv-groupview .dv-content-container {\n background-color: var(--dv-tabs-and-actions-container-background-color);\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-theme-github-dark-spaced {\n --dv-color-gh-canvas-default: #0d1117;\n --dv-color-gh-canvas-subtle: #161b22;\n --dv-color-gh-canvas-inset: #010409;\n --dv-color-gh-border: #30363d;\n --dv-color-gh-border-muted: #21262d;\n --dv-color-gh-fg-default: #e6edf3;\n --dv-color-gh-fg-muted: #8b949e;\n --dv-color-gh-fg-subtle: #6e7681;\n --dv-color-gh-accent: #58a6ff;\n --dv-drag-over-background-color: rgba(88, 166, 255, 0.1);\n --dv-group-view-background-color: var(--dv-color-gh-canvas-inset);\n --dv-tabs-and-actions-container-background-color: var(\n --dv-color-gh-canvas-subtle\n );\n --dv-activegroup-visiblepanel-tab-background-color: var(\n --dv-color-gh-border\n );\n --dv-activegroup-hiddenpanel-tab-background-color: var(\n --dv-color-gh-canvas-subtle\n );\n --dv-inactivegroup-visiblepanel-tab-background-color: var(\n --dv-color-gh-border\n );\n --dv-inactivegroup-hiddenpanel-tab-background-color: var(\n --dv-color-gh-canvas-subtle\n );\n --dv-activegroup-visiblepanel-tab-color: var(--dv-color-gh-fg-default);\n --dv-activegroup-hiddenpanel-tab-color: var(--dv-color-gh-fg-muted);\n --dv-inactivegroup-visiblepanel-tab-color: var(--dv-color-gh-fg-subtle);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(110, 118, 129, 0.5);\n --dv-separator-border: transparent;\n --dv-paneview-active-outline-color: var(--dv-color-gh-accent);\n --dv-active-sash-color: var(--dv-color-gh-accent);\n --dv-scrollbar-background-color: rgba(48, 54, 61, 0.7);\n --dv-floating-group-border: 2px solid var(--dv-color-gh-canvas-inset);\n}\n\n.dockview-theme-github-light {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n}\n.dockview-theme-github-light .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n.dockview-theme-github-light {\n --dv-color-gh-light-canvas-default: #ffffff;\n --dv-color-gh-light-canvas-subtle: #f6f8fa;\n --dv-color-gh-light-canvas-inset: #f0f6ff;\n --dv-color-gh-light-border: #d0d7de;\n --dv-color-gh-light-fg-default: #1f2328;\n --dv-color-gh-light-fg-muted: #656d76;\n --dv-color-gh-light-fg-subtle: #6e7781;\n --dv-color-gh-light-accent: #0969da;\n --dv-group-view-background-color: var(--dv-color-gh-light-canvas-default);\n --dv-tabs-and-actions-container-background-color: var(\n --dv-color-gh-light-canvas-subtle\n );\n --dv-activegroup-visiblepanel-tab-background-color: var(\n --dv-color-gh-light-canvas-default\n );\n --dv-activegroup-hiddenpanel-tab-background-color: var(\n --dv-color-gh-light-canvas-subtle\n );\n --dv-inactivegroup-visiblepanel-tab-background-color: var(\n --dv-color-gh-light-canvas-default\n );\n --dv-inactivegroup-hiddenpanel-tab-background-color: var(\n --dv-color-gh-light-canvas-subtle\n );\n --dv-activegroup-visiblepanel-tab-color: var(\n --dv-color-gh-light-fg-default\n );\n --dv-activegroup-hiddenpanel-tab-color: var(--dv-color-gh-light-fg-muted);\n --dv-inactivegroup-visiblepanel-tab-color: var(\n --dv-color-gh-light-fg-subtle\n );\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(110, 118, 129, 0.4);\n --dv-separator-border: var(--dv-color-gh-light-border);\n --dv-paneview-active-outline-color: var(--dv-color-gh-light-accent);\n --dv-active-sash-color: var(--dv-color-gh-light-accent);\n --dv-scrollbar-background-color: rgba(208, 215, 222, 0.5);\n --dv-drag-over-background-color: rgba(9, 105, 218, 0.1);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);\n --dv-floating-border: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n.dockview-theme-github-light-spaced {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n --dv-spacing-padding: 10px;\n --dv-tab-font-size: 12px;\n --dv-border-radius: 20px;\n --dv-tab-margin: 0.5rem 0.25rem;\n --dv-tabs-and-actions-container-height: 44px;\n --dv-tab-border-radius: 8px;\n --dv-sash-border-radius: 4px;\n --dv-dropdown-border-radius: 8px;\n --dv-tab-close-icon-size: 8px;\n --dv-floating-group-border: 2px solid var(--dv-group-view-background-color);\n box-sizing: border-box;\n padding: var(--dv-spacing-padding);\n background-color: var(--dv-group-view-background-color);\n}\n.dv-shell .dockview-theme-github-light-spaced {\n padding: 0;\n}\n.dockview-theme-github-light-spaced .dv-resize-container:has(> .dv-groupview) {\n border-radius: 8px;\n}\n.dockview-theme-github-light-spaced .dv-sash {\n border-radius: var(--dv-sash-border-radius);\n}\n.dockview-theme-github-light-spaced .dv-drop-target-anchor {\n border-radius: calc(var(--dv-border-radius) / 4);\n}\n.dockview-theme-github-light-spaced .dv-drop-target-anchor.dv-drop-target-content {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-github-light-spaced .dv-resize-container {\n border-radius: var(--dv-border-radius) !important;\n border: none;\n}\n.dockview-theme-github-light-spaced .dv-resize-container .dv-groupview {\n border: var(--dv-floating-group-border);\n}\n.dockview-theme-github-light-spaced .dv-tabs-overflow-container,\n.dockview-theme-github-light-spaced .dv-tabs-overflow-dropdown-default {\n border-radius: var(--dv-dropdown-border-radius);\n height: unset !important;\n}\n.dockview-theme-github-light-spaced .dv-render-overlay {\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-theme-github-light-spaced .dv-tab {\n border-radius: var(--dv-tab-border-radius);\n}\n.dockview-theme-github-light-spaced .dv-tab .dv-svg {\n height: var(--dv-tab-close-icon-size);\n width: var(--dv-tab-close-icon-size);\n}\n.dockview-theme-github-light-spaced .dv-tabs-container-vertical .dv-tab {\n margin: 0.25rem 0.5rem;\n}\n.dockview-theme-github-light-spaced .dv-groupview {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-github-light-spaced .dv-groupview .dv-tabs-and-actions-container {\n padding: 0px calc(var(--dv-border-radius) / 2);\n}\n.dockview-theme-github-light-spaced .dv-groupview .dv-tabs-and-actions-container.dv-groupview-header-vertical {\n padding: calc(var(--dv-border-radius) / 2) 0;\n}\n.dockview-theme-github-light-spaced .dv-groupview .dv-content-container {\n background-color: var(--dv-tabs-and-actions-container-background-color);\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-theme-github-light-spaced {\n --dv-color-gh-light-canvas-default: #ffffff;\n --dv-color-gh-light-canvas-subtle: #f6f8fa;\n --dv-color-gh-light-border: #d0d7de;\n --dv-color-gh-light-fg-default: #1f2328;\n --dv-color-gh-light-fg-muted: #656d76;\n --dv-color-gh-light-fg-subtle: #6e7781;\n --dv-color-gh-light-accent: #0969da;\n --dv-drag-over-background-color: rgba(9, 105, 218, 0.08);\n --dv-group-view-background-color: var(--dv-color-gh-light-canvas-subtle);\n --dv-tabs-and-actions-container-background-color: var(\n --dv-color-gh-light-canvas-default\n );\n --dv-activegroup-visiblepanel-tab-background-color: var(\n --dv-color-gh-light-border\n );\n --dv-activegroup-hiddenpanel-tab-background-color: var(\n --dv-color-gh-light-canvas-default\n );\n --dv-inactivegroup-visiblepanel-tab-background-color: var(\n --dv-color-gh-light-border\n );\n --dv-inactivegroup-hiddenpanel-tab-background-color: var(\n --dv-color-gh-light-canvas-default\n );\n --dv-activegroup-visiblepanel-tab-color: var(\n --dv-color-gh-light-fg-default\n );\n --dv-activegroup-hiddenpanel-tab-color: var(--dv-color-gh-light-fg-muted);\n --dv-inactivegroup-visiblepanel-tab-color: var(\n --dv-color-gh-light-fg-subtle\n );\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(110, 118, 129, 0.4);\n --dv-separator-border: transparent;\n --dv-paneview-active-outline-color: var(--dv-color-gh-light-accent);\n --dv-active-sash-color: var(--dv-color-gh-light-accent);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);\n --dv-floating-border: 1px solid rgba(0, 0, 0, 0.1);\n --dv-scrollbar-background-color: rgba(208, 215, 222, 0.5);\n --dv-floating-group-border: 2px solid rgba(208, 215, 222, 0.5);\n}\n\n.dockview-theme-abyss-spaced {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n --dv-spacing-padding: 10px;\n --dv-tab-font-size: 12px;\n --dv-border-radius: 20px;\n --dv-tab-margin: 0.5rem 0.25rem;\n --dv-tabs-and-actions-container-height: 44px;\n --dv-tab-border-radius: 8px;\n --dv-sash-border-radius: 4px;\n --dv-dropdown-border-radius: 8px;\n --dv-tab-close-icon-size: 8px;\n --dv-floating-group-border: 2px solid var(--dv-group-view-background-color);\n box-sizing: border-box;\n padding: var(--dv-spacing-padding);\n background-color: var(--dv-group-view-background-color);\n}\n.dv-shell .dockview-theme-abyss-spaced {\n padding: 0;\n}\n.dockview-theme-abyss-spaced .dv-resize-container:has(> .dv-groupview) {\n border-radius: 8px;\n}\n.dockview-theme-abyss-spaced .dv-sash {\n border-radius: var(--dv-sash-border-radius);\n}\n.dockview-theme-abyss-spaced .dv-drop-target-anchor {\n border-radius: calc(var(--dv-border-radius) / 4);\n}\n.dockview-theme-abyss-spaced .dv-drop-target-anchor.dv-drop-target-content {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-abyss-spaced .dv-resize-container {\n border-radius: var(--dv-border-radius) !important;\n border: none;\n}\n.dockview-theme-abyss-spaced .dv-resize-container .dv-groupview {\n border: var(--dv-floating-group-border);\n}\n.dockview-theme-abyss-spaced .dv-tabs-overflow-container,\n.dockview-theme-abyss-spaced .dv-tabs-overflow-dropdown-default {\n border-radius: var(--dv-dropdown-border-radius);\n height: unset !important;\n}\n.dockview-theme-abyss-spaced .dv-render-overlay {\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-theme-abyss-spaced .dv-tab {\n border-radius: var(--dv-tab-border-radius);\n}\n.dockview-theme-abyss-spaced .dv-tab .dv-svg {\n height: var(--dv-tab-close-icon-size);\n width: var(--dv-tab-close-icon-size);\n}\n.dockview-theme-abyss-spaced .dv-tabs-container-vertical .dv-tab {\n margin: 0.25rem 0.5rem;\n}\n.dockview-theme-abyss-spaced .dv-groupview {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-abyss-spaced .dv-groupview .dv-tabs-and-actions-container {\n padding: 0px calc(var(--dv-border-radius) / 2);\n}\n.dockview-theme-abyss-spaced .dv-groupview .dv-tabs-and-actions-container.dv-groupview-header-vertical {\n padding: calc(var(--dv-border-radius) / 2) 0;\n}\n.dockview-theme-abyss-spaced .dv-groupview .dv-content-container {\n background-color: var(--dv-tabs-and-actions-container-background-color);\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-theme-abyss-spaced {\n --dv-color-abyss-dark: rgb(11, 6, 17);\n --dv-color-abyss: #16121f;\n --dv-color-abyss-light: #201d2b;\n --dv-color-abyss-lighter: #2a2837;\n --dv-color-abyss-accent: rgb(91, 30, 207);\n --dv-color-abyss-primary-text: white;\n --dv-color-abyss-secondary-text: rgb(148, 151, 169);\n --dv-drag-over-background-color: '';\n --dv-group-view-background-color: var(--dv-color-abyss-dark);\n --dv-tabs-and-actions-container-background-color: var(--dv-color-abyss);\n --dv-activegroup-visiblepanel-tab-background-color: var(\n --dv-color-abyss-lighter\n );\n --dv-activegroup-hiddenpanel-tab-background-color: var(\n --dv-color-abyss-light\n );\n --dv-inactivegroup-visiblepanel-tab-background-color: var(\n --dv-color-abyss-lighter\n );\n --dv-inactivegroup-hiddenpanel-tab-background-color: var(\n --dv-color-abyss-light\n );\n --dv-tab-divider-color: transparent;\n --dv-activegroup-visiblepanel-tab-color: var(--dv-color-abyss-primary-text);\n --dv-activegroup-hiddenpanel-tab-color: var(\n --dv-color-abyss-secondary-text\n );\n --dv-inactivegroup-visiblepanel-tab-color: var(\n --dv-color-abyss-primary-text\n );\n --dv-inactivegroup-hiddenpanel-tab-color: var(\n --dv-color-abyss-secondary-text\n );\n --dv-separator-border: transparent;\n --dv-paneview-header-border-color: rgb(51, 51, 51);\n --dv-active-sash-color: var(--dv-color-abyss-accent);\n --dv-floating-group-border: 2px solid var(--dv-color-abyss-dark);\n}\n\n.dockview-theme-light-spaced {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n --dv-spacing-padding: 10px;\n --dv-tab-font-size: 12px;\n --dv-border-radius: 20px;\n --dv-tab-margin: 0.5rem 0.25rem;\n --dv-tabs-and-actions-container-height: 44px;\n --dv-tab-border-radius: 8px;\n --dv-sash-border-radius: 4px;\n --dv-dropdown-border-radius: 8px;\n --dv-tab-close-icon-size: 8px;\n --dv-floating-group-border: 2px solid var(--dv-group-view-background-color);\n box-sizing: border-box;\n padding: var(--dv-spacing-padding);\n background-color: var(--dv-group-view-background-color);\n}\n.dv-shell .dockview-theme-light-spaced {\n padding: 0;\n}\n.dockview-theme-light-spaced .dv-resize-container:has(> .dv-groupview) {\n border-radius: 8px;\n}\n.dockview-theme-light-spaced .dv-sash {\n border-radius: var(--dv-sash-border-radius);\n}\n.dockview-theme-light-spaced .dv-drop-target-anchor {\n border-radius: calc(var(--dv-border-radius) / 4);\n}\n.dockview-theme-light-spaced .dv-drop-target-anchor.dv-drop-target-content {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-light-spaced .dv-resize-container {\n border-radius: var(--dv-border-radius) !important;\n border: none;\n}\n.dockview-theme-light-spaced .dv-resize-container .dv-groupview {\n border: var(--dv-floating-group-border);\n}\n.dockview-theme-light-spaced .dv-tabs-overflow-container,\n.dockview-theme-light-spaced .dv-tabs-overflow-dropdown-default {\n border-radius: var(--dv-dropdown-border-radius);\n height: unset !important;\n}\n.dockview-theme-light-spaced .dv-render-overlay {\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-theme-light-spaced .dv-tab {\n border-radius: var(--dv-tab-border-radius);\n}\n.dockview-theme-light-spaced .dv-tab .dv-svg {\n height: var(--dv-tab-close-icon-size);\n width: var(--dv-tab-close-icon-size);\n}\n.dockview-theme-light-spaced .dv-tabs-container-vertical .dv-tab {\n margin: 0.25rem 0.5rem;\n}\n.dockview-theme-light-spaced .dv-groupview {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-light-spaced .dv-groupview .dv-tabs-and-actions-container {\n padding: 0px calc(var(--dv-border-radius) / 2);\n}\n.dockview-theme-light-spaced .dv-groupview .dv-tabs-and-actions-container.dv-groupview-header-vertical {\n padding: calc(var(--dv-border-radius) / 2) 0;\n}\n.dockview-theme-light-spaced .dv-groupview .dv-content-container {\n background-color: var(--dv-tabs-and-actions-container-background-color);\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-theme-light-spaced {\n --dv-drag-over-background-color: '';\n --dv-group-view-background-color: #f6f5f9;\n --dv-tabs-and-actions-container-background-color: white;\n --dv-activegroup-visiblepanel-tab-background-color: #ededf0;\n --dv-activegroup-hiddenpanel-tab-background-color: #f9f9fa;\n --dv-inactivegroup-visiblepanel-tab-background-color: #ededf0;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #f9f9fa;\n --dv-tab-divider-color: transparent;\n --dv-activegroup-visiblepanel-tab-color: rgb(104, 107, 130);\n --dv-activegroup-hiddenpanel-tab-color: rgb(148, 151, 169);\n --dv-inactivegroup-visiblepanel-tab-color: rgb(104, 107, 130);\n --dv-inactivegroup-hiddenpanel-tab-color: rgb(148, 151, 169);\n --dv-separator-border: transparent;\n --dv-paneview-header-border-color: rgb(51, 51, 51);\n --dv-active-sash-color: rgb(91, 30, 207);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);\n --dv-floating-border: 1px solid rgba(0, 0, 0, 0.1);\n --dv-scrollbar-background-color: rgba(0, 0, 0, 0.25);\n --dv-floating-group-border: 2px solid rgba(255, 255, 255, 0.1);\n}\n\n.dockview-spaced {\n --dv-spacing-padding: 10px;\n --dv-tab-font-size: 12px;\n --dv-border-radius: 20px;\n --dv-tab-margin: 0.5rem 0.25rem;\n --dv-tabs-and-actions-container-height: 44px;\n --dv-tab-border-radius: 8px;\n --dv-sash-border-radius: 4px;\n --dv-dropdown-border-radius: 8px;\n --dv-tab-close-icon-size: 8px;\n --dv-floating-group-border: 2px solid var(--dv-group-view-background-color);\n box-sizing: border-box;\n padding: var(--dv-spacing-padding);\n background-color: var(--dv-group-view-background-color);\n}\n.dv-shell .dockview-spaced {\n padding: 0;\n}\n.dockview-spaced .dv-resize-container:has(> .dv-groupview) {\n border-radius: 8px;\n}\n.dockview-spaced .dv-sash {\n border-radius: var(--dv-sash-border-radius);\n}\n.dockview-spaced .dv-drop-target-anchor {\n border-radius: calc(var(--dv-border-radius) / 4);\n}\n.dockview-spaced .dv-drop-target-anchor.dv-drop-target-content {\n border-radius: var(--dv-border-radius);\n}\n.dockview-spaced .dv-resize-container {\n border-radius: var(--dv-border-radius) !important;\n border: none;\n}\n.dockview-spaced .dv-resize-container .dv-groupview {\n border: var(--dv-floating-group-border);\n}\n.dockview-spaced .dv-tabs-overflow-container,\n.dockview-spaced .dv-tabs-overflow-dropdown-default {\n border-radius: var(--dv-dropdown-border-radius);\n height: unset !important;\n}\n.dockview-spaced .dv-render-overlay {\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-spaced .dv-tab {\n border-radius: var(--dv-tab-border-radius);\n}\n.dockview-spaced .dv-tab .dv-svg {\n height: var(--dv-tab-close-icon-size);\n width: var(--dv-tab-close-icon-size);\n}\n.dockview-spaced .dv-tabs-container-vertical .dv-tab {\n margin: 0.25rem 0.5rem;\n}\n.dockview-spaced .dv-groupview {\n border-radius: var(--dv-border-radius);\n}\n.dockview-spaced .dv-groupview .dv-tabs-and-actions-container {\n padding: 0px calc(var(--dv-border-radius) / 2);\n}\n.dockview-spaced .dv-groupview .dv-tabs-and-actions-container.dv-groupview-header-vertical {\n padding: calc(var(--dv-border-radius) / 2) 0;\n}\n.dockview-spaced .dv-groupview .dv-content-container {\n background-color: var(--dv-tabs-and-actions-container-background-color);\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n\n.dv-context-menu {\n min-width: 160px;\n overflow: hidden;\n background: var(--dv-context-menu-background-color, var(--dv-activegroup-hiddenpanel-tab-background-color));\n color: var(--dv-context-menu-color, var(--dv-activegroup-hiddenpanel-tab-color));\n border: 1px solid var(--dv-tab-divider-color);\n border-radius: var(--dv-border-radius);\n box-shadow: var(--dv-floating-box-shadow);\n padding: 4px 0;\n}\n\n.dv-context-menu-item {\n height: 25px;\n padding: 0 12px;\n display: flex;\n align-items: center;\n cursor: pointer;\n font-size: var(--dv-tabs-and-actions-container-font-size);\n white-space: nowrap;\n user-select: none;\n}\n.dv-context-menu-item:hover {\n background: var(--dv-icon-hover-background-color);\n}\n.dv-context-menu-item.dv-context-menu-item--disabled {\n opacity: 0.4;\n cursor: default;\n pointer-events: none;\n}\n\n.dv-context-menu-separator {\n height: 1px;\n background: var(--dv-tab-divider-color);\n margin: 4px 0;\n}\n\n.dv-context-menu-rename {\n padding: 8px 12px 4px;\n}\n\n.dv-context-menu-rename-input {\n width: 100%;\n box-sizing: border-box;\n padding: 8px 10px;\n border: 1px solid var(--dv-tab-divider-color);\n border-radius: var(--dv-border-radius);\n background: inherit;\n color: var(--dv-activegroup-visiblepanel-tab-color);\n font-size: var(--dv-tabs-and-actions-container-font-size);\n outline: none;\n}\n.dv-context-menu-rename-input:focus {\n border-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-context-menu-rename-input::placeholder {\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n\n.dv-context-menu-color-picker {\n display: flex;\n flex-direction: row;\n gap: 6px;\n padding: 8px 12px;\n align-items: center;\n}\n\n.dv-context-menu-color-swatch {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n cursor: pointer;\n border: 2px solid transparent;\n flex-shrink: 0;\n background-color: var(--dv-tab-group-color);\n}\n.dv-context-menu-color-swatch:hover {\n opacity: 0.85;\n}\n.dv-context-menu-color-swatch.dv-context-menu-color-swatch--selected {\n outline: 2px solid var(--dv-tab-divider-color);\n outline-offset: 2px;\n}\n\n.dv-tab-group-indicator-none .dv-groupview-header-bottom .dv-tab-group-underline {\n top: auto;\n bottom: 0;\n}\n.dv-drop-target-container {\n position: absolute;\n z-index: 9999;\n top: 0px;\n left: 0px;\n height: 100%;\n width: 100%;\n pointer-events: none;\n overflow: hidden;\n --dv-transition-duration: 300ms;\n}\n.dv-drop-target-container .dv-drop-target-anchor {\n position: relative;\n border: var(--dv-drag-over-border);\n background-color: var(--dv-drag-over-background-color);\n opacity: 1;\n /* GPU optimizations */\n will-change: transform, opacity;\n transform: translate3d(0, 0, 0);\n backface-visibility: hidden;\n contain: layout paint;\n transition: opacity var(--dv-transition-duration) ease-in, top var(--dv-transition-duration) ease-out, left var(--dv-transition-duration) ease-out, width var(--dv-transition-duration) ease-out, height var(--dv-transition-duration) ease-out;\n}\n.dv-drop-target {\n position: relative;\n --dv-transition-duration: 70ms;\n}\n.dv-drop-target > .dv-drop-target-dropzone {\n position: absolute;\n left: 0px;\n top: 0px;\n height: 100%;\n width: 100%;\n z-index: 1000;\n pointer-events: none;\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection {\n position: relative;\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n border: var(--dv-drag-over-border);\n background-color: var(--dv-drag-over-background-color);\n transition: top var(--dv-transition-duration) ease-out, left var(--dv-transition-duration) ease-out, width var(--dv-transition-duration) ease-out, height var(--dv-transition-duration) ease-out, opacity var(--dv-transition-duration) ease-out;\n will-change: transform;\n pointer-events: none;\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-top.dv-drop-target-small-vertical {\n border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical {\n border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal {\n border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {\n border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-dockview {\n position: relative;\n background-color: var(--dv-group-view-background-color);\n}\n.dv-dockview .dv-watermark-container {\n position: absolute;\n top: 0px;\n left: 0px;\n height: 100%;\n width: 100%;\n z-index: 1;\n}\n.dv-dockview .dv-overlay-render-container {\n position: relative;\n}\n\n.dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab {\n background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-inactive-tab {\n background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab {\n background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);\n color: var(--dv-inactivegroup-visiblepanel-tab-color);\n}\n.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-inactive-tab {\n background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n color: var(--dv-inactivegroup-hiddenpanel-tab-color);\n}\n\n/**\n * when a tab is dragged we lose the above stylings because they are conditional on parent elements\n * therefore we also set some stylings for the dragging event\n **/\n.dv-tab.dv-tab-dragging {\n background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-groupview {\n display: flex;\n height: 100%;\n background-color: var(--dv-group-view-background-color);\n overflow: hidden;\n flex-direction: column;\n}\n.dv-groupview:focus {\n outline: none;\n}\n.dv-groupview > .dv-content-container {\n flex-grow: 1;\n min-height: 0;\n outline: none;\n}\n.dv-groupview.dv-groupview-header-bottom {\n flex-direction: column-reverse;\n}\n.dv-groupview.dv-groupview-header-left {\n flex-direction: row;\n}\n.dv-groupview.dv-groupview-header-right {\n flex-direction: row-reverse;\n}\n.dv-groupview.dv-groupview-edge.dv-edge-collapsed > .dv-content-container {\n display: none;\n}\n.dv-root-wrapper {\n height: 100%;\n width: 100%;\n}\n.dv-grid-view,\n.dv-branch-node {\n height: 100%;\n width: 100%;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-top {\n background-color: red;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-bottom {\n background-color: green;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-left {\n background-color: yellow;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-right {\n background-color: blue;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-topleft,\n.dv-debug .dv-resize-container .dv-resize-handle-topright,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomleft,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomright {\n background-color: cyan;\n}\n\n.dv-floating-overlay-host {\n position: absolute;\n pointer-events: none;\n}\n.dv-floating-overlay-host > .dv-resize-container {\n pointer-events: auto;\n}\n\n.dv-resize-container {\n --dv-overlay-z-index: var(--dv-overlay-z-index, 999);\n position: absolute;\n z-index: calc(var(--dv-overlay-z-index) - 2);\n border: var(--dv-floating-border);\n box-shadow: var(--dv-floating-box-shadow);\n /* GPU optimizations for floating group movement */\n will-change: transform, opacity;\n transform: translate3d(0, 0, 0);\n backface-visibility: hidden;\n}\n.dv-resize-container.dv-hidden {\n display: none;\n}\n.dv-resize-container.dv-resize-container-dragging {\n opacity: var(--dv-floating-group-dragging-opacity);\n /* Enhanced GPU acceleration during drag */\n will-change: transform, opacity;\n}\n.dv-resize-container .dv-resize-handle-top {\n height: 4px;\n width: calc(100% - 8px);\n left: 4px;\n top: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-bottom {\n height: 4px;\n width: calc(100% - 8px);\n left: 4px;\n bottom: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-left {\n height: calc(100% - 8px);\n width: 4px;\n left: -2px;\n top: 4px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-right {\n height: calc(100% - 8px);\n width: 4px;\n right: -2px;\n top: 4px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-topleft {\n height: 4px;\n width: 4px;\n top: -2px;\n left: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: nw-resize;\n}\n.dv-resize-container .dv-resize-handle-topright {\n height: 4px;\n width: 4px;\n right: -2px;\n top: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ne-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomleft {\n height: 4px;\n width: 4px;\n left: -2px;\n bottom: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: sw-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomright {\n height: 4px;\n width: 4px;\n right: -2px;\n bottom: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: se-resize;\n}\n.dv-render-overlay {\n --dv-overlay-z-index: var(--dv-overlay-z-index, 999);\n position: absolute;\n z-index: 1;\n width: 100%;\n height: 100%;\n contain: layout paint;\n isolation: isolate;\n /* GPU optimizations */\n will-change: transform;\n transform: translate3d(0, 0, 0);\n backface-visibility: hidden;\n}\n.dv-render-overlay.dv-render-overlay-float {\n z-index: calc(var(--dv-overlay-z-index) - 1);\n}\n\n.dv-debug .dv-render-overlay {\n outline: 1px solid red;\n outline-offset: -1;\n}\n.dv-pane-container {\n height: 100%;\n width: 100%;\n}\n.dv-pane-container.dv-animated .dv-view {\n /* GPU optimizations for smooth pane animations */\n will-change: transform;\n transform: translate3d(0, 0, 0);\n backface-visibility: hidden;\n transition: transform 0.15s ease-out;\n}\n.dv-pane-container .dv-view {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n padding: 0px !important;\n}\n.dv-pane-container .dv-view:not(:first-child)::before {\n background-color: transparent !important;\n}\n.dv-pane-container .dv-view:not(:first-child) .dv-pane > .dv-pane-header {\n border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.dv-pane-container .dv-view .dv-default-header {\n background-color: var(--dv-group-view-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n display: flex;\n padding: 0px 8px;\n cursor: pointer;\n}\n.dv-pane-container .dv-view .dv-default-header .dv-pane-header-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.dv-pane-container .dv-view .dv-default-header > span {\n padding-left: 8px;\n flex-grow: 1;\n}\n.dv-pane-container:first-of-type > .dv-pane > .dv-pane-header {\n border-top: none !important;\n}\n.dv-pane-container .dv-pane {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n height: 100%;\n}\n.dv-pane-container .dv-pane .dv-pane-header {\n box-sizing: border-box;\n user-select: none;\n position: relative;\n outline: none;\n}\n.dv-pane-container .dv-pane .dv-pane-header.dv-pane-draggable {\n cursor: pointer;\n}\n.dv-pane-container .dv-pane .dv-pane-header:focus:before, .dv-pane-container .dv-pane .dv-pane-header:focus-within:before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n content: \"\";\n pointer-events: none;\n outline: 1px solid;\n outline-width: -1px;\n outline-style: solid;\n outline-offset: -1px;\n outline-color: var(--dv-paneview-active-outline-color);\n}\n.dv-pane-container .dv-pane .dv-pane-body {\n overflow-y: auto;\n overflow-x: hidden;\n flex-grow: 1;\n position: relative;\n outline: none;\n}\n.dv-pane-container .dv-pane .dv-pane-body:focus:before, .dv-pane-container .dv-pane .dv-pane-body:focus-within:before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n content: \"\";\n pointer-events: none;\n outline: 1px solid;\n outline-width: -1px;\n outline-style: solid;\n outline-offset: -1px;\n outline-color: var(--dv-paneview-active-outline-color);\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-enabled {\n background-color: black;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-disabled {\n background-color: orange;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-maximum {\n background-color: green;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-minimum {\n background-color: red;\n}\n\n.dv-split-view-container {\n position: relative;\n overflow: hidden;\n height: 100%;\n width: 100%;\n}\n.dv-split-view-container.dv-splitview-disabled > .dv-sash-container > .dv-sash {\n pointer-events: none;\n}\n.dv-split-view-container.dv-animation .dv-view,\n.dv-split-view-container.dv-animation .dv-sash {\n /* GPU optimizations for smooth animations */\n will-change: transform;\n transform: translate3d(0, 0, 0);\n backface-visibility: hidden;\n transition: transform 0.15s ease-out;\n}\n.dv-split-view-container.dv-horizontal {\n height: 100%;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash {\n height: 100%;\n width: 4px;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-enabled {\n cursor: ew-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-disabled {\n cursor: default;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-maximum {\n cursor: w-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-minimum {\n cursor: e-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-view-container > .dv-view:not(:first-child)::before {\n height: 100%;\n width: 1px;\n}\n.dv-split-view-container.dv-vertical {\n width: 100%;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash {\n width: 100%;\n height: 4px;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-enabled {\n cursor: ns-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-disabled {\n cursor: default;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-maximum {\n cursor: n-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-minimum {\n cursor: s-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-view-container > .dv-view {\n width: 100%;\n}\n.dv-split-view-container.dv-vertical > .dv-view-container > .dv-view:not(:first-child)::before {\n height: 1px;\n width: 100%;\n}\n.dv-split-view-container .dv-sash-container {\n height: 100%;\n width: 100%;\n position: absolute;\n}\n.dv-split-view-container .dv-sash-container .dv-sash {\n position: absolute;\n z-index: 99;\n outline: none;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n touch-action: none;\n background-color: var(--dv-sash-color, transparent);\n}\n.dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):active, .dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):hover {\n background-color: var(--dv-active-sash-color, transparent);\n transition-property: background-color;\n transition-timing-function: ease-in-out;\n transition-duration: var(--dv-active-sash-transition-duration, 0.1s);\n transition-delay: var(--dv-active-sash-transition-delay, 0.5s);\n}\n.dv-split-view-container .dv-view-container {\n position: relative;\n height: 100%;\n width: 100%;\n}\n.dv-split-view-container .dv-view-container .dv-view {\n height: 100%;\n box-sizing: border-box;\n overflow: auto;\n position: absolute;\n}\n.dv-split-view-container.dv-separator-border .dv-view:not(:first-child)::before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n z-index: 5;\n pointer-events: none;\n background-color: var(--dv-separator-border);\n}\n.dv-dragged {\n transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */\n}\n\n/* Applied to the ghost tab clone during drag so it shows the same border as a focused tab */\n.dv-tab-ghost-drag {\n position: relative;\n}\n.dv-tab-ghost-drag::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\n.dv-tab {\n flex-shrink: 0;\n}\n.dv-tab:focus-within, .dv-tab:focus {\n position: relative;\n}\n.dv-tab:focus-within::after, .dv-tab:focus::after {\n position: absolute;\n content: \"\";\n height: 100%;\n width: 100%;\n top: 0px;\n left: 0px;\n pointer-events: none;\n outline: 1px solid var(--dv-tab-divider-color) !important;\n outline-offset: -1px;\n z-index: 5;\n}\n.dv-tab.dv-tab-dragging .dv-default-tab-action {\n background-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-tab.dv-active-tab .dv-default-tab .dv-default-tab-action {\n visibility: visible;\n}\n.dv-tab.dv-inactive-tab .dv-default-tab .dv-default-tab-action {\n visibility: hidden;\n}\n.dv-tab.dv-inactive-tab .dv-default-tab:hover .dv-default-tab-action {\n visibility: visible;\n}\n.dv-tab .dv-default-tab {\n position: relative;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.dv-tab .dv-default-tab .dv-default-tab-content {\n flex-grow: 1;\n margin-right: 4px;\n}\n.dv-tab .dv-default-tab .dv-default-tab-action {\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n}\n.dv-tab .dv-default-tab .dv-default-tab-action:hover {\n border-radius: 2px;\n background-color: var(--dv-icon-hover-background-color);\n}\n.dv-tabs-overflow-dropdown-default {\n height: 100%;\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n margin: var(--dv-tab-margin);\n display: flex;\n align-items: center;\n flex-shrink: 0;\n padding: 0.25rem 0.5rem;\n cursor: pointer;\n}\n.dv-tabs-overflow-dropdown-default > span {\n padding-left: 0.25rem;\n}\n.dv-tabs-overflow-dropdown-default > svg {\n transform: rotate(90deg);\n}\n.dv-tabs-overflow-dropdown-default:hover {\n border-radius: 2px;\n background-color: var(--dv-icon-hover-background-color);\n}\n.dv-tabs-container {\n display: flex;\n position: relative;\n height: 100%;\n overflow: auto;\n scrollbar-width: thin;\n /* GPU optimizations for smooth scrolling */\n will-change: scroll-position;\n transform: translate3d(0, 0, 0);\n}\n.dv-tabs-container.dv-tabs-container-vertical {\n width: 100%;\n height: fit-content;\n max-height: 100%;\n writing-mode: vertical-rl;\n}\n.dv-tabs-container.dv-horizontal .dv-tab:not(:first-child)::before, .dv-tabs-container.dv-vertical .dv-tab:not(:first-child)::before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n z-index: 5;\n pointer-events: none;\n background-color: var(--dv-tab-divider-color);\n}\n.dv-tabs-container.dv-horizontal .dv-tab:not(:first-child)::before {\n width: 1px;\n height: 100%;\n}\n.dv-tabs-container.dv-vertical .dv-tab:not(:first-child)::before {\n width: 100%;\n height: 1px;\n}\n.dv-tabs-container::-webkit-scrollbar {\n height: 3px;\n}\n.dv-tabs-container {\n /* Track */\n}\n.dv-tabs-container::-webkit-scrollbar-track {\n background: transparent;\n}\n.dv-tabs-container {\n /* Handle */\n}\n.dv-tabs-container::-webkit-scrollbar-thumb {\n background: var(--dv-tabs-container-scrollbar-color);\n}\n\n.dv-scrollable > .dv-tabs-container {\n overflow: hidden;\n}\n\n.dv-tab {\n -webkit-user-drag: element;\n outline: none;\n padding: 0.25rem 0.5rem;\n cursor: pointer;\n position: relative;\n box-sizing: border-box;\n font-size: var(--dv-tab-font-size);\n margin: var(--dv-tab-margin);\n}\n.dv-tab.dv-tab--shifting {\n will-change: transform, margin-left, margin-right, margin-top, margin-bottom;\n transition: transform var(--dv-transition-duration, 200ms) ease-out, margin-left var(--dv-transition-duration, 200ms) ease-out, margin-right var(--dv-transition-duration, 200ms) ease-out, margin-top var(--dv-transition-duration, 200ms) ease-out, margin-bottom var(--dv-transition-duration, 200ms) ease-out;\n}\n.dv-tab.dv-tab--dragging {\n width: 0 !important;\n min-width: 0 !important;\n padding: 0 !important;\n margin: 0 !important;\n overflow: hidden;\n opacity: 0;\n pointer-events: none;\n transition: width var(--dv-transition-duration, 200ms) ease-out, padding var(--dv-transition-duration, 200ms) ease-out, margin var(--dv-transition-duration, 200ms) ease-out, opacity var(--dv-transition-duration, 200ms) ease-out;\n}\n.dv-tab.dv-tab--group-collapsed {\n width: 0 !important;\n min-width: 0 !important;\n padding: 0 !important;\n margin: 0 !important;\n overflow: hidden;\n opacity: 0;\n pointer-events: none;\n transition: width var(--dv-transition-duration, 200ms) ease-out, padding var(--dv-transition-duration, 200ms) ease-out, margin var(--dv-transition-duration, 200ms) ease-out, opacity var(--dv-transition-duration, 200ms) ease-out;\n}\n.dv-tab.dv-tab--group-expanding {\n transition: width var(--dv-transition-duration, 200ms) ease-out, padding var(--dv-transition-duration, 200ms) ease-out, margin var(--dv-transition-duration, 200ms) ease-out, opacity var(--dv-transition-duration, 200ms) ease-out;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .dv-tab {\n transition: none !important;\n }\n .dv-tab-group-chip {\n transition: none !important;\n }\n}\n.dv-tab-group-chip {\n display: inline-flex;\n align-items: center;\n align-self: center;\n padding: var(--dv-tab-group-chip-padding);\n margin: 0 8px 0 8px;\n border-radius: var(--dv-tab-group-chip-border-radius);\n font-size: var(--dv-tab-group-chip-font-size);\n cursor: pointer;\n user-select: none;\n white-space: nowrap;\n box-sizing: border-box;\n line-height: 1;\n background-color: var(--dv-tab-group-color);\n color: white;\n}\n.dv-tab-group-chip.dv-tab-group-chip--accent-off {\n background-color: transparent;\n color: inherit;\n}\n.dv-tab-group-chip.dv-tab-group-chip--shifting {\n will-change: margin-left;\n transition: margin-left var(--dv-transition-duration, 200ms) ease-out;\n}\n.dv-tab-group-chip.dv-tab-group-chip--dragging {\n width: 0 !important;\n min-width: 0 !important;\n padding: 0 !important;\n margin: 0 !important;\n overflow: hidden;\n opacity: 0;\n pointer-events: none;\n transition: width var(--dv-transition-duration, 200ms) ease-out, padding var(--dv-transition-duration, 200ms) ease-out, margin var(--dv-transition-duration, 200ms) ease-out, opacity var(--dv-transition-duration, 200ms) ease-out;\n}\n.dv-tab-group-chip .dv-tab-group-chip-label--empty {\n display: none;\n}\n.dv-tab-group-chip:has(.dv-tab-group-chip-label--empty) {\n position: relative;\n width: 12px;\n height: 12px;\n padding: 0;\n border-radius: 50%;\n}\n.dv-tab-group-chip:has(.dv-tab-group-chip-label--empty)::before {\n content: \"\";\n position: absolute;\n inset: -8px;\n}\n\n.dv-tab-group-underline {\n position: absolute;\n bottom: 0;\n opacity: var(--dv-tab-group-line-opacity);\n pointer-events: none;\n z-index: 10;\n}\n\n.dv-groupview-header-bottom .dv-tab-group-underline {\n bottom: auto;\n top: 0;\n}\n\n.dv-tabs-container-vertical .dv-tab-group-underline {\n bottom: auto;\n left: 0;\n}\n\n.dv-tabs-container-vertical .dv-tab-group-chip {\n margin: 8px 0 8px 0;\n}\n.dv-tabs-container-vertical .dv-tab {\n padding: 0.5rem 0.25rem;\n}\n.dv-tabs-container-vertical .dv-tab.dv-tab--group-collapsed {\n height: 0 !important;\n min-height: 0 !important;\n width: auto !important;\n min-width: initial !important;\n transition: height var(--dv-transition-duration, 200ms) ease-out, padding var(--dv-transition-duration, 200ms) ease-out, margin var(--dv-transition-duration, 200ms) ease-out, opacity var(--dv-transition-duration, 200ms) ease-out;\n}\n.dv-tabs-container-vertical .dv-tab.dv-tab--group-expanding {\n transition: height var(--dv-transition-duration, 200ms) ease-out, padding var(--dv-transition-duration, 200ms) ease-out, margin var(--dv-transition-duration, 200ms) ease-out, opacity var(--dv-transition-duration, 200ms) ease-out;\n}\n.dv-tabs-container-vertical .dv-tab.dv-tab--dragging {\n height: 0 !important;\n min-height: 0 !important;\n width: auto !important;\n min-width: initial !important;\n transition: height var(--dv-transition-duration, 200ms) ease-out, padding var(--dv-transition-duration, 200ms) ease-out, margin var(--dv-transition-duration, 200ms) ease-out, opacity var(--dv-transition-duration, 200ms) ease-out;\n}\n\n.dv-tabs-overflow-container {\n flex-direction: column;\n height: unset;\n font-size: var(--dv-tabs-and-actions-container-font-size);\n max-height: min(50vh, 400px);\n overflow-y: auto;\n border: 1px solid var(--dv-tab-divider-color);\n background-color: var(--dv-group-view-background-color);\n /* Scrollbar styling for webkit browsers */\n}\n.dv-tabs-overflow-container::-webkit-scrollbar {\n width: 6px;\n}\n.dv-tabs-overflow-container::-webkit-scrollbar-track {\n background: transparent;\n}\n.dv-tabs-overflow-container::-webkit-scrollbar-thumb {\n background: var(--dv-tabs-container-scrollbar-color);\n border-radius: 3px;\n}\n.dv-tabs-overflow-container {\n /* Firefox scrollbar */\n scrollbar-width: thin;\n}\n.dv-tabs-overflow-container .dv-tab:not(:last-child) {\n border-bottom: 1px solid var(--dv-tab-divider-color);\n}\n.dv-tabs-overflow-container .dv-active-tab {\n background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-tabs-overflow-container .dv-inactive-tab {\n background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.dv-tabs-overflow-container .dv-tabs-overflow-group-header {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 4px 8px;\n font-size: 0.8em;\n font-weight: 600;\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n cursor: pointer;\n border-bottom: 1px solid var(--dv-tab-divider-color);\n}\n.dv-tabs-overflow-container .dv-tabs-overflow-group-header:hover {\n background-color: var(--dv-icon-hover-background-color);\n}\n.dv-tabs-overflow-container .dv-tabs-overflow-group-color {\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n flex-shrink: 0;\n background-color: var(--dv-tab-group-color);\n}\n.dv-tabs-overflow-container .dv-tabs-overflow-group-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.dv-tabs-overflow-container .dv-tabs-overflow-group-collapsed-badge {\n font-size: 0.75em;\n font-weight: 400;\n opacity: 0.7;\n padding: 1px 4px;\n border-radius: 3px;\n background-color: var(--dv-tab-divider-color);\n}\n.dv-tabs-overflow-container .dv-tab.dv-tab--grouped {\n padding-left: 16px;\n}\n.dv-tabs-and-actions-container {\n display: flex;\n background-color: var(--dv-tabs-and-actions-container-background-color);\n flex-shrink: 0;\n box-sizing: border-box;\n height: var(--dv-tabs-and-actions-container-height);\n font-size: var(--dv-tabs-and-actions-container-font-size);\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-scrollable {\n flex-grow: 1;\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container {\n flex-grow: 1;\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container .dv-tab {\n flex-grow: 1;\n padding: 0px;\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-void-container {\n flex-grow: 0;\n}\n.dv-tabs-and-actions-container .dv-void-container {\n display: flex;\n flex-grow: 1;\n}\n.dv-tabs-and-actions-container .dv-void-container.dv-draggable {\n cursor: grab;\n}\n.dv-tabs-and-actions-container .dv-right-actions-container {\n display: flex;\n}\n.dv-tabs-and-actions-container .dv-right-actions-container.dv-right-actions-container-vertical {\n flex-direction: column;\n}\n.dv-tabs-and-actions-container.dv-groupview-header-vertical {\n flex-direction: column;\n height: auto;\n width: var(--dv-tabs-and-actions-container-height);\n}\n.dv-watermark {\n display: flex;\n height: 100%;\n}";
40
+ var css_248z = ".dv-scrollable {\n position: relative;\n overflow: hidden;\n}\n.dv-scrollable .dv-scrollbar {\n position: absolute;\n border-radius: 2px;\n background-color: transparent;\n /* GPU optimizations */\n will-change: background-color, transform;\n transform: translate3d(0, 0, 0);\n backface-visibility: hidden;\n transition-property: background-color;\n transition-timing-function: ease-in-out;\n transition-duration: 1s;\n transition-delay: 0s;\n}\n.dv-scrollable .dv-scrollbar-horizontal {\n bottom: 0px;\n left: 0px;\n height: 4px;\n}\n.dv-scrollable .dv-scrollbar-vertical {\n right: 0px;\n top: 0px;\n width: 4px;\n}\n.dv-scrollable:hover .dv-scrollbar, .dv-scrollable.dv-scrollable-resizing .dv-scrollbar, .dv-scrollable.dv-scrollable-scrolling .dv-scrollbar {\n background-color: var(--dv-scrollbar-background-color, rgba(255, 255, 255, 0.25));\n}\n.dv-svg {\n display: inline-block;\n fill: currentcolor;\n line-height: 1;\n stroke: currentcolor;\n stroke-width: 0;\n}\n.dockview-theme-dark {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n}\n.dockview-theme-dark .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n.dockview-theme-dark {\n --dv-group-view-background-color: #1e1e1e;\n --dv-tabs-and-actions-container-background-color: #252526;\n --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-tab-divider-color: #1e1e1e;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: #969696;\n --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n --dv-separator-border: rgb(68, 68, 68);\n --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n}\n\n.dockview-theme-light {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n}\n.dockview-theme-light .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n.dockview-theme-light {\n --dv-group-view-background-color: white;\n --dv-tabs-and-actions-container-background-color: #f3f3f3;\n --dv-activegroup-visiblepanel-tab-background-color: white;\n --dv-activegroup-hiddenpanel-tab-background-color: #ececec;\n --dv-inactivegroup-visiblepanel-tab-background-color: white;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #ececec;\n --dv-tab-divider-color: white;\n --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n --dv-activegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.7);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(51, 51, 51, 0.7);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.35);\n --dv-separator-border: rgba(128, 128, 128, 0.35);\n --dv-paneview-header-border-color: rgb(51, 51, 51);\n --dv-scrollbar-background-color: rgba(0, 0, 0, 0.25);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);\n --dv-floating-border: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n.dockview-theme-vs {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n}\n.dockview-theme-vs .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n.dockview-theme-vs {\n --dv-group-view-background-color: #1e1e1e;\n --dv-tabs-and-actions-container-background-color: #252526;\n --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-tab-divider-color: #1e1e1e;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: #969696;\n --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n --dv-separator-border: rgb(68, 68, 68);\n --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n --dv-tabs-and-actions-container-background-color: #2d2d30;\n --dv-tabs-and-actions-container-height: 20px;\n --dv-tabs-and-actions-container-font-size: 11px;\n --dv-activegroup-visiblepanel-tab-background-color: #007acc;\n --dv-inactivegroup-visiblepanel-tab-background-color: #3f3f46;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: white;\n --dv-inactivegroup-visiblepanel-tab-color: white;\n --dv-inactivegroup-hiddenpanel-tab-color: white;\n}\n.dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container {\n box-sizing: content-box;\n border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tab.dv-active-tab {\n border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tab.dv-inactive-tab {\n border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container {\n box-sizing: content-box;\n border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tab.dv-active-tab {\n border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tab.dv-inactive-tab {\n border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n}\n\n.dockview-theme-abyss {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n}\n.dockview-theme-abyss .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n.dockview-theme-abyss {\n --dv-color-abyss-dark: #000c18;\n --dv-color-abyss: #10192c;\n --dv-color-abyss-light: #1c1c2a;\n --dv-color-abyss-lighter: #2b2b4a;\n --dv-color-abyss-accent: rgb(91, 30, 207);\n --dv-color-abyss-primary-text: white;\n --dv-color-abyss-secondary-text: rgb(148, 151, 169);\n --dv-group-view-background-color: var(--dv-color-abyss-dark);\n --dv-tabs-and-actions-container-background-color: var(\n --dv-color-abyss-light\n );\n --dv-activegroup-visiblepanel-tab-background-color: var(\n --dv-color-abyss-dark\n );\n --dv-activegroup-hiddenpanel-tab-background-color: var(--dv-color-abyss);\n --dv-inactivegroup-visiblepanel-tab-background-color: var(\n --dv-color-abyss-dark\n );\n --dv-inactivegroup-hiddenpanel-tab-background-color: var(--dv-color-abyss);\n --dv-tab-divider-color: var(--dv-color-abyss-lighter);\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);\n --dv-separator-border: var(--dv-color-abyss-lighter);\n --dv-paneview-header-border-color: var(--dv-color-abyss-lighter);\n --dv-paneview-active-outline-color: #596f99;\n}\n\n.dockview-theme-dracula {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n}\n.dockview-theme-dracula .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n.dockview-theme-dracula {\n --dv-group-view-background-color: #282a36;\n --dv-tabs-and-actions-container-background-color: #191a21;\n --dv-activegroup-visiblepanel-tab-background-color: #282a36;\n --dv-activegroup-hiddenpanel-tab-background-color: #21222c;\n --dv-inactivegroup-visiblepanel-tab-background-color: #282a36;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #21222c;\n --dv-tab-divider-color: #191a21;\n --dv-activegroup-visiblepanel-tab-color: rgb(248, 248, 242);\n --dv-activegroup-hiddenpanel-tab-color: rgb(98, 114, 164);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(98, 114, 164, 0.5);\n --dv-separator-border: #bd93f9;\n --dv-paneview-header-border-color: #bd93f9;\n --dv-paneview-active-outline-color: #6272a4;\n}\n.dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab {\n position: relative;\n}\n.dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab::after {\n position: absolute;\n left: 0px;\n top: 0px;\n content: \"\";\n width: 100%;\n height: 1px;\n background-color: #94527e;\n z-index: 999;\n}\n.dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab {\n position: relative;\n}\n.dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab::after {\n position: absolute;\n left: 0px;\n bottom: 0px;\n content: \"\";\n width: 100%;\n height: 1px;\n background-color: #5e3d5a;\n z-index: 999;\n}\n\n.dockview-theme-nord {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n}\n.dockview-theme-nord .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n.dockview-theme-nord {\n --dv-color-nord-polar-0: #2e3440;\n --dv-color-nord-polar-1: #3b4252;\n --dv-color-nord-polar-2: #434c5e;\n --dv-color-nord-polar-3: #4c566a;\n --dv-color-nord-frost: #88c0d0;\n --dv-color-nord-frost-2: #81a1c1;\n --dv-color-nord-snow-0: #eceff4;\n --dv-color-nord-snow-1: #d8dee9;\n --dv-group-view-background-color: var(--dv-color-nord-polar-0);\n --dv-tabs-and-actions-container-background-color: var(\n --dv-color-nord-polar-1\n );\n --dv-activegroup-visiblepanel-tab-background-color: var(\n --dv-color-nord-polar-0\n );\n --dv-activegroup-hiddenpanel-tab-background-color: var(\n --dv-color-nord-polar-2\n );\n --dv-inactivegroup-visiblepanel-tab-background-color: var(\n --dv-color-nord-polar-1\n );\n --dv-inactivegroup-hiddenpanel-tab-background-color: var(\n --dv-color-nord-polar-2\n );\n --dv-activegroup-visiblepanel-tab-color: var(--dv-color-nord-snow-0);\n --dv-activegroup-hiddenpanel-tab-color: var(--dv-color-nord-snow-1);\n --dv-inactivegroup-visiblepanel-tab-color: #8a9bbf;\n --dv-inactivegroup-hiddenpanel-tab-color: #5e6f8e;\n --dv-separator-border: var(--dv-color-nord-polar-3);\n --dv-paneview-active-outline-color: var(--dv-color-nord-frost);\n --dv-active-sash-color: var(--dv-color-nord-frost);\n --dv-scrollbar-background-color: rgba(76, 86, 106, 0.5);\n}\n.dockview-theme-nord .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab {\n position: relative;\n}\n.dockview-theme-nord .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab::after {\n position: absolute;\n left: 0px;\n bottom: 0px;\n content: \"\";\n width: 100%;\n height: 2px;\n background-color: var(--dv-color-nord-frost);\n z-index: 999;\n}\n.dockview-theme-nord .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab {\n position: relative;\n}\n.dockview-theme-nord .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab::after {\n position: absolute;\n left: 0px;\n bottom: 0px;\n content: \"\";\n width: 100%;\n height: 2px;\n background-color: var(--dv-color-nord-frost-2);\n z-index: 999;\n}\n\n.dockview-theme-nord-spaced {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n --dv-spacing-padding: 10px;\n --dv-tab-font-size: 12px;\n --dv-border-radius: 20px;\n --dv-tab-margin: 0.5rem 0.25rem;\n --dv-tabs-and-actions-container-height: 44px;\n --dv-tab-border-radius: 8px;\n --dv-sash-border-radius: 4px;\n --dv-dropdown-border-radius: 8px;\n --dv-tab-close-icon-size: 8px;\n --dv-floating-group-border: 2px solid var(--dv-group-view-background-color);\n box-sizing: border-box;\n padding: var(--dv-spacing-padding);\n background-color: var(--dv-group-view-background-color);\n}\n.dv-shell .dockview-theme-nord-spaced {\n padding: 0;\n}\n.dockview-theme-nord-spaced .dv-resize-container:has(> .dv-groupview) {\n border-radius: 8px;\n}\n.dockview-theme-nord-spaced .dv-sash {\n border-radius: var(--dv-sash-border-radius);\n}\n.dockview-theme-nord-spaced .dv-drop-target-anchor {\n border-radius: calc(var(--dv-border-radius) / 4);\n}\n.dockview-theme-nord-spaced .dv-drop-target-anchor.dv-drop-target-content {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-nord-spaced .dv-resize-container {\n border-radius: var(--dv-border-radius) !important;\n border: none;\n}\n.dockview-theme-nord-spaced .dv-resize-container .dv-groupview {\n border: var(--dv-floating-group-border);\n}\n.dockview-theme-nord-spaced .dv-tabs-overflow-container,\n.dockview-theme-nord-spaced .dv-tabs-overflow-dropdown-default {\n border-radius: var(--dv-dropdown-border-radius);\n height: unset !important;\n}\n.dockview-theme-nord-spaced .dv-render-overlay {\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-theme-nord-spaced .dv-tab {\n border-radius: var(--dv-tab-border-radius);\n}\n.dockview-theme-nord-spaced .dv-tab .dv-svg {\n height: var(--dv-tab-close-icon-size);\n width: var(--dv-tab-close-icon-size);\n}\n.dockview-theme-nord-spaced .dv-tabs-container-vertical .dv-tab {\n margin: 0.25rem 0.5rem;\n}\n.dockview-theme-nord-spaced .dv-groupview {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-nord-spaced .dv-groupview .dv-tabs-and-actions-container {\n padding: 0px calc(var(--dv-border-radius) / 2);\n}\n.dockview-theme-nord-spaced .dv-groupview .dv-tabs-and-actions-container.dv-groupview-header-vertical {\n padding: calc(var(--dv-border-radius) / 2) 0;\n}\n.dockview-theme-nord-spaced .dv-groupview .dv-content-container {\n background-color: var(--dv-tabs-and-actions-container-background-color);\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-theme-nord-spaced {\n --dv-color-nord-polar-0: #2e3440;\n --dv-color-nord-polar-1: #3b4252;\n --dv-color-nord-polar-2: #434c5e;\n --dv-color-nord-polar-3: #4c566a;\n --dv-color-nord-frost: #88c0d0;\n --dv-color-nord-frost-2: #81a1c1;\n --dv-color-nord-snow-0: #eceff4;\n --dv-color-nord-snow-1: #d8dee9;\n --dv-group-view-background-color: var(--dv-color-nord-polar-0);\n --dv-tabs-and-actions-container-background-color: var(\n --dv-color-nord-polar-1\n );\n --dv-activegroup-visiblepanel-tab-background-color: var(\n --dv-color-nord-polar-2\n );\n --dv-activegroup-hiddenpanel-tab-background-color: var(\n --dv-color-nord-polar-1\n );\n --dv-inactivegroup-visiblepanel-tab-background-color: var(\n --dv-color-nord-polar-2\n );\n --dv-inactivegroup-hiddenpanel-tab-background-color: var(\n --dv-color-nord-polar-1\n );\n --dv-activegroup-visiblepanel-tab-color: var(--dv-color-nord-snow-0);\n --dv-activegroup-hiddenpanel-tab-color: var(--dv-color-nord-snow-1);\n --dv-inactivegroup-visiblepanel-tab-color: #8a9bbf;\n --dv-inactivegroup-hiddenpanel-tab-color: #5e6f8e;\n --dv-separator-border: transparent;\n --dv-paneview-active-outline-color: var(--dv-color-nord-frost);\n --dv-active-sash-color: var(--dv-color-nord-frost);\n --dv-scrollbar-background-color: rgba(76, 86, 106, 0.5);\n --dv-floating-group-border: 2px solid var(--dv-color-nord-polar-0);\n}\n\n.dockview-theme-catppuccin-mocha {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n}\n.dockview-theme-catppuccin-mocha .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n.dockview-theme-catppuccin-mocha {\n --dv-color-mocha-crust: #11111b;\n --dv-color-mocha-mantle: #181825;\n --dv-color-mocha-base: #1e1e2e;\n --dv-color-mocha-surface0: #313244;\n --dv-color-mocha-surface1: #45475a;\n --dv-color-mocha-text: #cdd6f4;\n --dv-color-mocha-subtext1: #bac2de;\n --dv-color-mocha-subtext0: #a6adc8;\n --dv-color-mocha-mauve: #cba6f7;\n --dv-color-mocha-lavender: #b4befe;\n --dv-group-view-background-color: var(--dv-color-mocha-base);\n --dv-tabs-and-actions-container-background-color: var(\n --dv-color-mocha-mantle\n );\n --dv-activegroup-visiblepanel-tab-background-color: var(\n --dv-color-mocha-base\n );\n --dv-activegroup-hiddenpanel-tab-background-color: var(\n --dv-color-mocha-surface0\n );\n --dv-inactivegroup-visiblepanel-tab-background-color: var(\n --dv-color-mocha-mantle\n );\n --dv-inactivegroup-hiddenpanel-tab-background-color: var(\n --dv-color-mocha-crust\n );\n --dv-activegroup-visiblepanel-tab-color: var(--dv-color-mocha-text);\n --dv-activegroup-hiddenpanel-tab-color: var(--dv-color-mocha-subtext1);\n --dv-inactivegroup-visiblepanel-tab-color: var(--dv-color-mocha-subtext0);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(166, 173, 200, 0.5);\n --dv-separator-border: var(--dv-color-mocha-surface1);\n --dv-paneview-active-outline-color: var(--dv-color-mocha-mauve);\n --dv-active-sash-color: var(--dv-color-mocha-mauve);\n --dv-scrollbar-background-color: rgba(49, 50, 68, 0.8);\n}\n.dockview-theme-catppuccin-mocha .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab {\n position: relative;\n}\n.dockview-theme-catppuccin-mocha .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab::after {\n position: absolute;\n left: 0px;\n top: 0px;\n content: \"\";\n width: 100%;\n height: 2px;\n background-color: var(--dv-color-mocha-mauve);\n z-index: 999;\n}\n.dockview-theme-catppuccin-mocha .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab {\n position: relative;\n}\n.dockview-theme-catppuccin-mocha .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab::after {\n position: absolute;\n left: 0px;\n top: 0px;\n content: \"\";\n width: 100%;\n height: 2px;\n background-color: rgba(180, 190, 254, 0.4);\n z-index: 999;\n}\n\n.dockview-theme-catppuccin-mocha-spaced {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n --dv-spacing-padding: 10px;\n --dv-tab-font-size: 12px;\n --dv-border-radius: 20px;\n --dv-tab-margin: 0.5rem 0.25rem;\n --dv-tabs-and-actions-container-height: 44px;\n --dv-tab-border-radius: 8px;\n --dv-sash-border-radius: 4px;\n --dv-dropdown-border-radius: 8px;\n --dv-tab-close-icon-size: 8px;\n --dv-floating-group-border: 2px solid var(--dv-group-view-background-color);\n box-sizing: border-box;\n padding: var(--dv-spacing-padding);\n background-color: var(--dv-group-view-background-color);\n}\n.dv-shell .dockview-theme-catppuccin-mocha-spaced {\n padding: 0;\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-resize-container:has(> .dv-groupview) {\n border-radius: 8px;\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-sash {\n border-radius: var(--dv-sash-border-radius);\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-drop-target-anchor {\n border-radius: calc(var(--dv-border-radius) / 4);\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-drop-target-anchor.dv-drop-target-content {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-resize-container {\n border-radius: var(--dv-border-radius) !important;\n border: none;\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-resize-container .dv-groupview {\n border: var(--dv-floating-group-border);\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-tabs-overflow-container,\n.dockview-theme-catppuccin-mocha-spaced .dv-tabs-overflow-dropdown-default {\n border-radius: var(--dv-dropdown-border-radius);\n height: unset !important;\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-render-overlay {\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-tab {\n border-radius: var(--dv-tab-border-radius);\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-tab .dv-svg {\n height: var(--dv-tab-close-icon-size);\n width: var(--dv-tab-close-icon-size);\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-tabs-container-vertical .dv-tab {\n margin: 0.25rem 0.5rem;\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-groupview {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-groupview .dv-tabs-and-actions-container {\n padding: 0px calc(var(--dv-border-radius) / 2);\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-groupview .dv-tabs-and-actions-container.dv-groupview-header-vertical {\n padding: calc(var(--dv-border-radius) / 2) 0;\n}\n.dockview-theme-catppuccin-mocha-spaced .dv-groupview .dv-content-container {\n background-color: var(--dv-tabs-and-actions-container-background-color);\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-theme-catppuccin-mocha-spaced {\n --dv-color-mocha-crust: #11111b;\n --dv-color-mocha-mantle: #181825;\n --dv-color-mocha-base: #1e1e2e;\n --dv-color-mocha-surface0: #313244;\n --dv-color-mocha-surface1: #45475a;\n --dv-color-mocha-text: #cdd6f4;\n --dv-color-mocha-subtext1: #bac2de;\n --dv-color-mocha-subtext0: #a6adc8;\n --dv-color-mocha-mauve: #cba6f7;\n --dv-color-mocha-lavender: #b4befe;\n --dv-group-view-background-color: var(--dv-color-mocha-crust);\n --dv-tabs-and-actions-container-background-color: var(\n --dv-color-mocha-mantle\n );\n --dv-activegroup-visiblepanel-tab-background-color: var(\n --dv-color-mocha-surface0\n );\n --dv-activegroup-hiddenpanel-tab-background-color: var(\n --dv-color-mocha-mantle\n );\n --dv-inactivegroup-visiblepanel-tab-background-color: var(\n --dv-color-mocha-surface0\n );\n --dv-inactivegroup-hiddenpanel-tab-background-color: var(\n --dv-color-mocha-mantle\n );\n --dv-activegroup-visiblepanel-tab-color: var(--dv-color-mocha-text);\n --dv-activegroup-hiddenpanel-tab-color: var(--dv-color-mocha-subtext1);\n --dv-inactivegroup-visiblepanel-tab-color: var(--dv-color-mocha-subtext0);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(166, 173, 200, 0.5);\n --dv-separator-border: transparent;\n --dv-paneview-active-outline-color: var(--dv-color-mocha-mauve);\n --dv-active-sash-color: var(--dv-color-mocha-mauve);\n --dv-scrollbar-background-color: rgba(49, 50, 68, 0.8);\n --dv-floating-group-border: 2px solid var(--dv-color-mocha-crust);\n}\n\n.dockview-theme-monokai {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n}\n.dockview-theme-monokai .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n.dockview-theme-monokai {\n --dv-color-monokai-bg: #272822;\n --dv-color-monokai-bg-light: #3e3d32;\n --dv-color-monokai-comment: #75715e;\n --dv-color-monokai-fg: #f8f8f2;\n --dv-color-monokai-green: #a6e22e;\n --dv-group-view-background-color: var(--dv-color-monokai-bg);\n --dv-tabs-and-actions-container-background-color: var(\n --dv-color-monokai-bg-light\n );\n --dv-activegroup-visiblepanel-tab-background-color: var(\n --dv-color-monokai-bg\n );\n --dv-activegroup-hiddenpanel-tab-background-color: #2d2c25;\n --dv-inactivegroup-visiblepanel-tab-background-color: var(\n --dv-color-monokai-bg\n );\n --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2c25;\n --dv-activegroup-visiblepanel-tab-color: var(--dv-color-monokai-fg);\n --dv-activegroup-hiddenpanel-tab-color: var(--dv-color-monokai-comment);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(117, 113, 94, 0.5);\n --dv-separator-border: var(--dv-color-monokai-bg-light);\n --dv-paneview-active-outline-color: var(--dv-color-monokai-green);\n --dv-active-sash-color: var(--dv-color-monokai-green);\n --dv-scrollbar-background-color: rgba(117, 113, 94, 0.5);\n}\n.dockview-theme-monokai .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab {\n position: relative;\n}\n.dockview-theme-monokai .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab::after {\n position: absolute;\n left: 0px;\n bottom: 0px;\n content: \"\";\n width: 100%;\n height: 2px;\n background-color: var(--dv-color-monokai-green);\n z-index: 999;\n}\n.dockview-theme-monokai .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab {\n position: relative;\n}\n.dockview-theme-monokai .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab::after {\n position: absolute;\n left: 0px;\n bottom: 0px;\n content: \"\";\n width: 100%;\n height: 2px;\n background-color: rgba(166, 226, 46, 0.35);\n z-index: 999;\n}\n\n.dockview-theme-solarized-light {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n}\n.dockview-theme-solarized-light .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n.dockview-theme-solarized-light {\n --dv-color-sol-base3: #fdf6e3;\n --dv-color-sol-base2: #eee8d5;\n --dv-color-sol-base1: #93a1a1;\n --dv-color-sol-base00: #657b83;\n --dv-color-sol-base01: #586e75;\n --dv-color-sol-blue: #268bd2;\n --dv-group-view-background-color: var(--dv-color-sol-base3);\n --dv-tabs-and-actions-container-background-color: var(--dv-color-sol-base2);\n --dv-activegroup-visiblepanel-tab-background-color: var(\n --dv-color-sol-base3\n );\n --dv-activegroup-hiddenpanel-tab-background-color: #e8e2d0;\n --dv-inactivegroup-visiblepanel-tab-background-color: var(\n --dv-color-sol-base3\n );\n --dv-inactivegroup-hiddenpanel-tab-background-color: #e8e2d0;\n --dv-activegroup-visiblepanel-tab-color: var(--dv-color-sol-base01);\n --dv-activegroup-hiddenpanel-tab-color: var(--dv-color-sol-base00);\n --dv-inactivegroup-visiblepanel-tab-color: var(--dv-color-sol-base1);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(147, 161, 161, 0.6);\n --dv-separator-border: var(--dv-color-sol-base2);\n --dv-paneview-active-outline-color: var(--dv-color-sol-blue);\n --dv-active-sash-color: var(--dv-color-sol-blue);\n --dv-scrollbar-background-color: rgba(101, 123, 131, 0.25);\n --dv-drag-over-background-color: rgba(38, 139, 210, 0.15);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);\n --dv-floating-border: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n.dockview-theme-solarized-light-spaced {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n --dv-spacing-padding: 10px;\n --dv-tab-font-size: 12px;\n --dv-border-radius: 20px;\n --dv-tab-margin: 0.5rem 0.25rem;\n --dv-tabs-and-actions-container-height: 44px;\n --dv-tab-border-radius: 8px;\n --dv-sash-border-radius: 4px;\n --dv-dropdown-border-radius: 8px;\n --dv-tab-close-icon-size: 8px;\n --dv-floating-group-border: 2px solid var(--dv-group-view-background-color);\n box-sizing: border-box;\n padding: var(--dv-spacing-padding);\n background-color: var(--dv-group-view-background-color);\n}\n.dv-shell .dockview-theme-solarized-light-spaced {\n padding: 0;\n}\n.dockview-theme-solarized-light-spaced .dv-resize-container:has(> .dv-groupview) {\n border-radius: 8px;\n}\n.dockview-theme-solarized-light-spaced .dv-sash {\n border-radius: var(--dv-sash-border-radius);\n}\n.dockview-theme-solarized-light-spaced .dv-drop-target-anchor {\n border-radius: calc(var(--dv-border-radius) / 4);\n}\n.dockview-theme-solarized-light-spaced .dv-drop-target-anchor.dv-drop-target-content {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-solarized-light-spaced .dv-resize-container {\n border-radius: var(--dv-border-radius) !important;\n border: none;\n}\n.dockview-theme-solarized-light-spaced .dv-resize-container .dv-groupview {\n border: var(--dv-floating-group-border);\n}\n.dockview-theme-solarized-light-spaced .dv-tabs-overflow-container,\n.dockview-theme-solarized-light-spaced .dv-tabs-overflow-dropdown-default {\n border-radius: var(--dv-dropdown-border-radius);\n height: unset !important;\n}\n.dockview-theme-solarized-light-spaced .dv-render-overlay {\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-theme-solarized-light-spaced .dv-tab {\n border-radius: var(--dv-tab-border-radius);\n}\n.dockview-theme-solarized-light-spaced .dv-tab .dv-svg {\n height: var(--dv-tab-close-icon-size);\n width: var(--dv-tab-close-icon-size);\n}\n.dockview-theme-solarized-light-spaced .dv-tabs-container-vertical .dv-tab {\n margin: 0.25rem 0.5rem;\n}\n.dockview-theme-solarized-light-spaced .dv-groupview {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-solarized-light-spaced .dv-groupview .dv-tabs-and-actions-container {\n padding: 0px calc(var(--dv-border-radius) / 2);\n}\n.dockview-theme-solarized-light-spaced .dv-groupview .dv-tabs-and-actions-container.dv-groupview-header-vertical {\n padding: calc(var(--dv-border-radius) / 2) 0;\n}\n.dockview-theme-solarized-light-spaced .dv-groupview .dv-content-container {\n background-color: var(--dv-tabs-and-actions-container-background-color);\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-theme-solarized-light-spaced {\n --dv-color-sol-base3: #fdf6e3;\n --dv-color-sol-base2: #eee8d5;\n --dv-color-sol-base1: #93a1a1;\n --dv-color-sol-base00: #657b83;\n --dv-color-sol-base01: #586e75;\n --dv-color-sol-blue: #268bd2;\n --dv-drag-over-background-color: rgba(38, 139, 210, 0.1);\n --dv-group-view-background-color: var(--dv-color-sol-base2);\n --dv-tabs-and-actions-container-background-color: var(--dv-color-sol-base3);\n --dv-activegroup-visiblepanel-tab-background-color: #e8e2d0;\n --dv-activegroup-hiddenpanel-tab-background-color: var(\n --dv-color-sol-base3\n );\n --dv-inactivegroup-visiblepanel-tab-background-color: #e8e2d0;\n --dv-inactivegroup-hiddenpanel-tab-background-color: var(\n --dv-color-sol-base3\n );\n --dv-activegroup-visiblepanel-tab-color: var(--dv-color-sol-base01);\n --dv-activegroup-hiddenpanel-tab-color: var(--dv-color-sol-base00);\n --dv-inactivegroup-visiblepanel-tab-color: var(--dv-color-sol-base1);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(147, 161, 161, 0.6);\n --dv-separator-border: transparent;\n --dv-paneview-active-outline-color: var(--dv-color-sol-blue);\n --dv-active-sash-color: var(--dv-color-sol-blue);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);\n --dv-floating-border: 1px solid rgba(0, 0, 0, 0.1);\n --dv-scrollbar-background-color: rgba(101, 123, 131, 0.25);\n --dv-floating-group-border: 2px solid rgba(238, 232, 213, 0.5);\n}\n\n.dockview-theme-github-dark {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n}\n.dockview-theme-github-dark .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n.dockview-theme-github-dark {\n --dv-color-gh-canvas-default: #0d1117;\n --dv-color-gh-canvas-subtle: #161b22;\n --dv-color-gh-canvas-inset: #010409;\n --dv-color-gh-border: #30363d;\n --dv-color-gh-border-muted: #21262d;\n --dv-color-gh-fg-default: #e6edf3;\n --dv-color-gh-fg-muted: #8b949e;\n --dv-color-gh-fg-subtle: #6e7681;\n --dv-color-gh-accent: #58a6ff;\n --dv-group-view-background-color: var(--dv-color-gh-canvas-default);\n --dv-tabs-and-actions-container-background-color: var(\n --dv-color-gh-canvas-subtle\n );\n --dv-activegroup-visiblepanel-tab-background-color: var(\n --dv-color-gh-canvas-default\n );\n --dv-activegroup-hiddenpanel-tab-background-color: var(\n --dv-color-gh-canvas-subtle\n );\n --dv-inactivegroup-visiblepanel-tab-background-color: var(\n --dv-color-gh-canvas-default\n );\n --dv-inactivegroup-hiddenpanel-tab-background-color: var(\n --dv-color-gh-canvas-subtle\n );\n --dv-activegroup-visiblepanel-tab-color: var(--dv-color-gh-fg-default);\n --dv-activegroup-hiddenpanel-tab-color: var(--dv-color-gh-fg-muted);\n --dv-inactivegroup-visiblepanel-tab-color: var(--dv-color-gh-fg-subtle);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(110, 118, 129, 0.5);\n --dv-separator-border: var(--dv-color-gh-border);\n --dv-paneview-active-outline-color: var(--dv-color-gh-accent);\n --dv-active-sash-color: var(--dv-color-gh-accent);\n --dv-scrollbar-background-color: rgba(48, 54, 61, 0.7);\n --dv-drag-over-background-color: rgba(88, 166, 255, 0.15);\n}\n\n.dockview-theme-github-dark-spaced {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n --dv-spacing-padding: 10px;\n --dv-tab-font-size: 12px;\n --dv-border-radius: 20px;\n --dv-tab-margin: 0.5rem 0.25rem;\n --dv-tabs-and-actions-container-height: 44px;\n --dv-tab-border-radius: 8px;\n --dv-sash-border-radius: 4px;\n --dv-dropdown-border-radius: 8px;\n --dv-tab-close-icon-size: 8px;\n --dv-floating-group-border: 2px solid var(--dv-group-view-background-color);\n box-sizing: border-box;\n padding: var(--dv-spacing-padding);\n background-color: var(--dv-group-view-background-color);\n}\n.dv-shell .dockview-theme-github-dark-spaced {\n padding: 0;\n}\n.dockview-theme-github-dark-spaced .dv-resize-container:has(> .dv-groupview) {\n border-radius: 8px;\n}\n.dockview-theme-github-dark-spaced .dv-sash {\n border-radius: var(--dv-sash-border-radius);\n}\n.dockview-theme-github-dark-spaced .dv-drop-target-anchor {\n border-radius: calc(var(--dv-border-radius) / 4);\n}\n.dockview-theme-github-dark-spaced .dv-drop-target-anchor.dv-drop-target-content {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-github-dark-spaced .dv-resize-container {\n border-radius: var(--dv-border-radius) !important;\n border: none;\n}\n.dockview-theme-github-dark-spaced .dv-resize-container .dv-groupview {\n border: var(--dv-floating-group-border);\n}\n.dockview-theme-github-dark-spaced .dv-tabs-overflow-container,\n.dockview-theme-github-dark-spaced .dv-tabs-overflow-dropdown-default {\n border-radius: var(--dv-dropdown-border-radius);\n height: unset !important;\n}\n.dockview-theme-github-dark-spaced .dv-render-overlay {\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-theme-github-dark-spaced .dv-tab {\n border-radius: var(--dv-tab-border-radius);\n}\n.dockview-theme-github-dark-spaced .dv-tab .dv-svg {\n height: var(--dv-tab-close-icon-size);\n width: var(--dv-tab-close-icon-size);\n}\n.dockview-theme-github-dark-spaced .dv-tabs-container-vertical .dv-tab {\n margin: 0.25rem 0.5rem;\n}\n.dockview-theme-github-dark-spaced .dv-groupview {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-github-dark-spaced .dv-groupview .dv-tabs-and-actions-container {\n padding: 0px calc(var(--dv-border-radius) / 2);\n}\n.dockview-theme-github-dark-spaced .dv-groupview .dv-tabs-and-actions-container.dv-groupview-header-vertical {\n padding: calc(var(--dv-border-radius) / 2) 0;\n}\n.dockview-theme-github-dark-spaced .dv-groupview .dv-content-container {\n background-color: var(--dv-tabs-and-actions-container-background-color);\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-theme-github-dark-spaced {\n --dv-color-gh-canvas-default: #0d1117;\n --dv-color-gh-canvas-subtle: #161b22;\n --dv-color-gh-canvas-inset: #010409;\n --dv-color-gh-border: #30363d;\n --dv-color-gh-border-muted: #21262d;\n --dv-color-gh-fg-default: #e6edf3;\n --dv-color-gh-fg-muted: #8b949e;\n --dv-color-gh-fg-subtle: #6e7681;\n --dv-color-gh-accent: #58a6ff;\n --dv-drag-over-background-color: rgba(88, 166, 255, 0.1);\n --dv-group-view-background-color: var(--dv-color-gh-canvas-inset);\n --dv-tabs-and-actions-container-background-color: var(\n --dv-color-gh-canvas-subtle\n );\n --dv-activegroup-visiblepanel-tab-background-color: var(\n --dv-color-gh-border\n );\n --dv-activegroup-hiddenpanel-tab-background-color: var(\n --dv-color-gh-canvas-subtle\n );\n --dv-inactivegroup-visiblepanel-tab-background-color: var(\n --dv-color-gh-border\n );\n --dv-inactivegroup-hiddenpanel-tab-background-color: var(\n --dv-color-gh-canvas-subtle\n );\n --dv-activegroup-visiblepanel-tab-color: var(--dv-color-gh-fg-default);\n --dv-activegroup-hiddenpanel-tab-color: var(--dv-color-gh-fg-muted);\n --dv-inactivegroup-visiblepanel-tab-color: var(--dv-color-gh-fg-subtle);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(110, 118, 129, 0.5);\n --dv-separator-border: transparent;\n --dv-paneview-active-outline-color: var(--dv-color-gh-accent);\n --dv-active-sash-color: var(--dv-color-gh-accent);\n --dv-scrollbar-background-color: rgba(48, 54, 61, 0.7);\n --dv-floating-group-border: 2px solid var(--dv-color-gh-canvas-inset);\n}\n\n.dockview-theme-github-light {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n}\n.dockview-theme-github-light .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n.dockview-theme-github-light {\n --dv-color-gh-light-canvas-default: #ffffff;\n --dv-color-gh-light-canvas-subtle: #f6f8fa;\n --dv-color-gh-light-canvas-inset: #f0f6ff;\n --dv-color-gh-light-border: #d0d7de;\n --dv-color-gh-light-fg-default: #1f2328;\n --dv-color-gh-light-fg-muted: #656d76;\n --dv-color-gh-light-fg-subtle: #6e7781;\n --dv-color-gh-light-accent: #0969da;\n --dv-group-view-background-color: var(--dv-color-gh-light-canvas-default);\n --dv-tabs-and-actions-container-background-color: var(\n --dv-color-gh-light-canvas-subtle\n );\n --dv-activegroup-visiblepanel-tab-background-color: var(\n --dv-color-gh-light-canvas-default\n );\n --dv-activegroup-hiddenpanel-tab-background-color: var(\n --dv-color-gh-light-canvas-subtle\n );\n --dv-inactivegroup-visiblepanel-tab-background-color: var(\n --dv-color-gh-light-canvas-default\n );\n --dv-inactivegroup-hiddenpanel-tab-background-color: var(\n --dv-color-gh-light-canvas-subtle\n );\n --dv-activegroup-visiblepanel-tab-color: var(\n --dv-color-gh-light-fg-default\n );\n --dv-activegroup-hiddenpanel-tab-color: var(--dv-color-gh-light-fg-muted);\n --dv-inactivegroup-visiblepanel-tab-color: var(\n --dv-color-gh-light-fg-subtle\n );\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(110, 118, 129, 0.4);\n --dv-separator-border: var(--dv-color-gh-light-border);\n --dv-paneview-active-outline-color: var(--dv-color-gh-light-accent);\n --dv-active-sash-color: var(--dv-color-gh-light-accent);\n --dv-scrollbar-background-color: rgba(208, 215, 222, 0.5);\n --dv-drag-over-background-color: rgba(9, 105, 218, 0.1);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);\n --dv-floating-border: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n.dockview-theme-github-light-spaced {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n --dv-spacing-padding: 10px;\n --dv-tab-font-size: 12px;\n --dv-border-radius: 20px;\n --dv-tab-margin: 0.5rem 0.25rem;\n --dv-tabs-and-actions-container-height: 44px;\n --dv-tab-border-radius: 8px;\n --dv-sash-border-radius: 4px;\n --dv-dropdown-border-radius: 8px;\n --dv-tab-close-icon-size: 8px;\n --dv-floating-group-border: 2px solid var(--dv-group-view-background-color);\n box-sizing: border-box;\n padding: var(--dv-spacing-padding);\n background-color: var(--dv-group-view-background-color);\n}\n.dv-shell .dockview-theme-github-light-spaced {\n padding: 0;\n}\n.dockview-theme-github-light-spaced .dv-resize-container:has(> .dv-groupview) {\n border-radius: 8px;\n}\n.dockview-theme-github-light-spaced .dv-sash {\n border-radius: var(--dv-sash-border-radius);\n}\n.dockview-theme-github-light-spaced .dv-drop-target-anchor {\n border-radius: calc(var(--dv-border-radius) / 4);\n}\n.dockview-theme-github-light-spaced .dv-drop-target-anchor.dv-drop-target-content {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-github-light-spaced .dv-resize-container {\n border-radius: var(--dv-border-radius) !important;\n border: none;\n}\n.dockview-theme-github-light-spaced .dv-resize-container .dv-groupview {\n border: var(--dv-floating-group-border);\n}\n.dockview-theme-github-light-spaced .dv-tabs-overflow-container,\n.dockview-theme-github-light-spaced .dv-tabs-overflow-dropdown-default {\n border-radius: var(--dv-dropdown-border-radius);\n height: unset !important;\n}\n.dockview-theme-github-light-spaced .dv-render-overlay {\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-theme-github-light-spaced .dv-tab {\n border-radius: var(--dv-tab-border-radius);\n}\n.dockview-theme-github-light-spaced .dv-tab .dv-svg {\n height: var(--dv-tab-close-icon-size);\n width: var(--dv-tab-close-icon-size);\n}\n.dockview-theme-github-light-spaced .dv-tabs-container-vertical .dv-tab {\n margin: 0.25rem 0.5rem;\n}\n.dockview-theme-github-light-spaced .dv-groupview {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-github-light-spaced .dv-groupview .dv-tabs-and-actions-container {\n padding: 0px calc(var(--dv-border-radius) / 2);\n}\n.dockview-theme-github-light-spaced .dv-groupview .dv-tabs-and-actions-container.dv-groupview-header-vertical {\n padding: calc(var(--dv-border-radius) / 2) 0;\n}\n.dockview-theme-github-light-spaced .dv-groupview .dv-content-container {\n background-color: var(--dv-tabs-and-actions-container-background-color);\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-theme-github-light-spaced {\n --dv-color-gh-light-canvas-default: #ffffff;\n --dv-color-gh-light-canvas-subtle: #f6f8fa;\n --dv-color-gh-light-border: #d0d7de;\n --dv-color-gh-light-fg-default: #1f2328;\n --dv-color-gh-light-fg-muted: #656d76;\n --dv-color-gh-light-fg-subtle: #6e7781;\n --dv-color-gh-light-accent: #0969da;\n --dv-drag-over-background-color: rgba(9, 105, 218, 0.08);\n --dv-group-view-background-color: var(--dv-color-gh-light-canvas-subtle);\n --dv-tabs-and-actions-container-background-color: var(\n --dv-color-gh-light-canvas-default\n );\n --dv-activegroup-visiblepanel-tab-background-color: var(\n --dv-color-gh-light-border\n );\n --dv-activegroup-hiddenpanel-tab-background-color: var(\n --dv-color-gh-light-canvas-default\n );\n --dv-inactivegroup-visiblepanel-tab-background-color: var(\n --dv-color-gh-light-border\n );\n --dv-inactivegroup-hiddenpanel-tab-background-color: var(\n --dv-color-gh-light-canvas-default\n );\n --dv-activegroup-visiblepanel-tab-color: var(\n --dv-color-gh-light-fg-default\n );\n --dv-activegroup-hiddenpanel-tab-color: var(--dv-color-gh-light-fg-muted);\n --dv-inactivegroup-visiblepanel-tab-color: var(\n --dv-color-gh-light-fg-subtle\n );\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(110, 118, 129, 0.4);\n --dv-separator-border: transparent;\n --dv-paneview-active-outline-color: var(--dv-color-gh-light-accent);\n --dv-active-sash-color: var(--dv-color-gh-light-accent);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);\n --dv-floating-border: 1px solid rgba(0, 0, 0, 0.1);\n --dv-scrollbar-background-color: rgba(208, 215, 222, 0.5);\n --dv-floating-group-border: 2px solid rgba(208, 215, 222, 0.5);\n}\n\n.dockview-theme-abyss-spaced {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n --dv-spacing-padding: 10px;\n --dv-tab-font-size: 12px;\n --dv-border-radius: 20px;\n --dv-tab-margin: 0.5rem 0.25rem;\n --dv-tabs-and-actions-container-height: 44px;\n --dv-tab-border-radius: 8px;\n --dv-sash-border-radius: 4px;\n --dv-dropdown-border-radius: 8px;\n --dv-tab-close-icon-size: 8px;\n --dv-floating-group-border: 2px solid var(--dv-group-view-background-color);\n box-sizing: border-box;\n padding: var(--dv-spacing-padding);\n background-color: var(--dv-group-view-background-color);\n}\n.dv-shell .dockview-theme-abyss-spaced {\n padding: 0;\n}\n.dockview-theme-abyss-spaced .dv-resize-container:has(> .dv-groupview) {\n border-radius: 8px;\n}\n.dockview-theme-abyss-spaced .dv-sash {\n border-radius: var(--dv-sash-border-radius);\n}\n.dockview-theme-abyss-spaced .dv-drop-target-anchor {\n border-radius: calc(var(--dv-border-radius) / 4);\n}\n.dockview-theme-abyss-spaced .dv-drop-target-anchor.dv-drop-target-content {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-abyss-spaced .dv-resize-container {\n border-radius: var(--dv-border-radius) !important;\n border: none;\n}\n.dockview-theme-abyss-spaced .dv-resize-container .dv-groupview {\n border: var(--dv-floating-group-border);\n}\n.dockview-theme-abyss-spaced .dv-tabs-overflow-container,\n.dockview-theme-abyss-spaced .dv-tabs-overflow-dropdown-default {\n border-radius: var(--dv-dropdown-border-radius);\n height: unset !important;\n}\n.dockview-theme-abyss-spaced .dv-render-overlay {\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-theme-abyss-spaced .dv-tab {\n border-radius: var(--dv-tab-border-radius);\n}\n.dockview-theme-abyss-spaced .dv-tab .dv-svg {\n height: var(--dv-tab-close-icon-size);\n width: var(--dv-tab-close-icon-size);\n}\n.dockview-theme-abyss-spaced .dv-tabs-container-vertical .dv-tab {\n margin: 0.25rem 0.5rem;\n}\n.dockview-theme-abyss-spaced .dv-groupview {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-abyss-spaced .dv-groupview .dv-tabs-and-actions-container {\n padding: 0px calc(var(--dv-border-radius) / 2);\n}\n.dockview-theme-abyss-spaced .dv-groupview .dv-tabs-and-actions-container.dv-groupview-header-vertical {\n padding: calc(var(--dv-border-radius) / 2) 0;\n}\n.dockview-theme-abyss-spaced .dv-groupview .dv-content-container {\n background-color: var(--dv-tabs-and-actions-container-background-color);\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-theme-abyss-spaced {\n --dv-color-abyss-dark: rgb(11, 6, 17);\n --dv-color-abyss: #16121f;\n --dv-color-abyss-light: #201d2b;\n --dv-color-abyss-lighter: #2a2837;\n --dv-color-abyss-accent: rgb(91, 30, 207);\n --dv-color-abyss-primary-text: white;\n --dv-color-abyss-secondary-text: rgb(148, 151, 169);\n --dv-drag-over-background-color: '';\n --dv-group-view-background-color: var(--dv-color-abyss-dark);\n --dv-tabs-and-actions-container-background-color: var(--dv-color-abyss);\n --dv-activegroup-visiblepanel-tab-background-color: var(\n --dv-color-abyss-lighter\n );\n --dv-activegroup-hiddenpanel-tab-background-color: var(\n --dv-color-abyss-light\n );\n --dv-inactivegroup-visiblepanel-tab-background-color: var(\n --dv-color-abyss-lighter\n );\n --dv-inactivegroup-hiddenpanel-tab-background-color: var(\n --dv-color-abyss-light\n );\n --dv-tab-divider-color: transparent;\n --dv-activegroup-visiblepanel-tab-color: var(--dv-color-abyss-primary-text);\n --dv-activegroup-hiddenpanel-tab-color: var(\n --dv-color-abyss-secondary-text\n );\n --dv-inactivegroup-visiblepanel-tab-color: var(\n --dv-color-abyss-primary-text\n );\n --dv-inactivegroup-hiddenpanel-tab-color: var(\n --dv-color-abyss-secondary-text\n );\n --dv-separator-border: transparent;\n --dv-paneview-header-border-color: rgb(51, 51, 51);\n --dv-active-sash-color: var(--dv-color-abyss-accent);\n --dv-floating-group-border: 2px solid var(--dv-color-abyss-dark);\n}\n\n.dockview-theme-light-spaced {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n --dv-spacing-padding: 10px;\n --dv-tab-font-size: 12px;\n --dv-border-radius: 20px;\n --dv-tab-margin: 0.5rem 0.25rem;\n --dv-tabs-and-actions-container-height: 44px;\n --dv-tab-border-radius: 8px;\n --dv-sash-border-radius: 4px;\n --dv-dropdown-border-radius: 8px;\n --dv-tab-close-icon-size: 8px;\n --dv-floating-group-border: 2px solid var(--dv-group-view-background-color);\n box-sizing: border-box;\n padding: var(--dv-spacing-padding);\n background-color: var(--dv-group-view-background-color);\n}\n.dv-shell .dockview-theme-light-spaced {\n padding: 0;\n}\n.dockview-theme-light-spaced .dv-resize-container:has(> .dv-groupview) {\n border-radius: 8px;\n}\n.dockview-theme-light-spaced .dv-sash {\n border-radius: var(--dv-sash-border-radius);\n}\n.dockview-theme-light-spaced .dv-drop-target-anchor {\n border-radius: calc(var(--dv-border-radius) / 4);\n}\n.dockview-theme-light-spaced .dv-drop-target-anchor.dv-drop-target-content {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-light-spaced .dv-resize-container {\n border-radius: var(--dv-border-radius) !important;\n border: none;\n}\n.dockview-theme-light-spaced .dv-resize-container .dv-groupview {\n border: var(--dv-floating-group-border);\n}\n.dockview-theme-light-spaced .dv-tabs-overflow-container,\n.dockview-theme-light-spaced .dv-tabs-overflow-dropdown-default {\n border-radius: var(--dv-dropdown-border-radius);\n height: unset !important;\n}\n.dockview-theme-light-spaced .dv-render-overlay {\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-theme-light-spaced .dv-tab {\n border-radius: var(--dv-tab-border-radius);\n}\n.dockview-theme-light-spaced .dv-tab .dv-svg {\n height: var(--dv-tab-close-icon-size);\n width: var(--dv-tab-close-icon-size);\n}\n.dockview-theme-light-spaced .dv-tabs-container-vertical .dv-tab {\n margin: 0.25rem 0.5rem;\n}\n.dockview-theme-light-spaced .dv-groupview {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-light-spaced .dv-groupview .dv-tabs-and-actions-container {\n padding: 0px calc(var(--dv-border-radius) / 2);\n}\n.dockview-theme-light-spaced .dv-groupview .dv-tabs-and-actions-container.dv-groupview-header-vertical {\n padding: calc(var(--dv-border-radius) / 2) 0;\n}\n.dockview-theme-light-spaced .dv-groupview .dv-content-container {\n background-color: var(--dv-tabs-and-actions-container-background-color);\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-theme-light-spaced {\n --dv-drag-over-background-color: '';\n --dv-group-view-background-color: #f6f5f9;\n --dv-tabs-and-actions-container-background-color: white;\n --dv-activegroup-visiblepanel-tab-background-color: #ededf0;\n --dv-activegroup-hiddenpanel-tab-background-color: #f9f9fa;\n --dv-inactivegroup-visiblepanel-tab-background-color: #ededf0;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #f9f9fa;\n --dv-tab-divider-color: transparent;\n --dv-activegroup-visiblepanel-tab-color: rgb(104, 107, 130);\n --dv-activegroup-hiddenpanel-tab-color: rgb(148, 151, 169);\n --dv-inactivegroup-visiblepanel-tab-color: rgb(104, 107, 130);\n --dv-inactivegroup-hiddenpanel-tab-color: rgb(148, 151, 169);\n --dv-separator-border: transparent;\n --dv-paneview-header-border-color: rgb(51, 51, 51);\n --dv-active-sash-color: rgb(91, 30, 207);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);\n --dv-floating-border: 1px solid rgba(0, 0, 0, 0.1);\n --dv-scrollbar-background-color: rgba(0, 0, 0, 0.25);\n --dv-floating-group-border: 2px solid rgba(255, 255, 255, 0.1);\n}\n\n.dockview-spaced {\n --dv-spacing-padding: 10px;\n --dv-tab-font-size: 12px;\n --dv-border-radius: 20px;\n --dv-tab-margin: 0.5rem 0.25rem;\n --dv-tabs-and-actions-container-height: 44px;\n --dv-tab-border-radius: 8px;\n --dv-sash-border-radius: 4px;\n --dv-dropdown-border-radius: 8px;\n --dv-tab-close-icon-size: 8px;\n --dv-floating-group-border: 2px solid var(--dv-group-view-background-color);\n box-sizing: border-box;\n padding: var(--dv-spacing-padding);\n background-color: var(--dv-group-view-background-color);\n}\n.dv-shell .dockview-spaced {\n padding: 0;\n}\n.dockview-spaced .dv-resize-container:has(> .dv-groupview) {\n border-radius: 8px;\n}\n.dockview-spaced .dv-sash {\n border-radius: var(--dv-sash-border-radius);\n}\n.dockview-spaced .dv-drop-target-anchor {\n border-radius: calc(var(--dv-border-radius) / 4);\n}\n.dockview-spaced .dv-drop-target-anchor.dv-drop-target-content {\n border-radius: var(--dv-border-radius);\n}\n.dockview-spaced .dv-resize-container {\n border-radius: var(--dv-border-radius) !important;\n border: none;\n}\n.dockview-spaced .dv-resize-container .dv-groupview {\n border: var(--dv-floating-group-border);\n}\n.dockview-spaced .dv-tabs-overflow-container,\n.dockview-spaced .dv-tabs-overflow-dropdown-default {\n border-radius: var(--dv-dropdown-border-radius);\n height: unset !important;\n}\n.dockview-spaced .dv-render-overlay {\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n.dockview-spaced .dv-tab {\n border-radius: var(--dv-tab-border-radius);\n}\n.dockview-spaced .dv-tab .dv-svg {\n height: var(--dv-tab-close-icon-size);\n width: var(--dv-tab-close-icon-size);\n}\n.dockview-spaced .dv-tabs-container-vertical .dv-tab {\n margin: 0.25rem 0.5rem;\n}\n.dockview-spaced .dv-groupview {\n border-radius: var(--dv-border-radius);\n}\n.dockview-spaced .dv-groupview .dv-tabs-and-actions-container {\n padding: 0px calc(var(--dv-border-radius) / 2);\n}\n.dockview-spaced .dv-groupview .dv-tabs-and-actions-container.dv-groupview-header-vertical {\n padding: calc(var(--dv-border-radius) / 2) 0;\n}\n.dockview-spaced .dv-groupview .dv-content-container {\n background-color: var(--dv-tabs-and-actions-container-background-color);\n border-bottom-left-radius: var(--dv-border-radius);\n border-bottom-right-radius: var(--dv-border-radius);\n}\n\n.dv-context-menu {\n min-width: 160px;\n overflow: hidden;\n background: var(--dv-context-menu-background-color, var(--dv-activegroup-hiddenpanel-tab-background-color));\n color: var(--dv-context-menu-color, var(--dv-activegroup-hiddenpanel-tab-color));\n border: 1px solid var(--dv-tab-divider-color);\n border-radius: var(--dv-border-radius);\n box-shadow: var(--dv-floating-box-shadow);\n padding: 4px 0;\n}\n\n.dv-context-menu-item {\n height: 25px;\n padding: 0 12px;\n display: flex;\n align-items: center;\n cursor: pointer;\n font-size: var(--dv-tabs-and-actions-container-font-size);\n white-space: nowrap;\n user-select: none;\n}\n.dv-context-menu-item:hover {\n background: var(--dv-icon-hover-background-color);\n}\n.dv-context-menu-item.dv-context-menu-item--disabled {\n opacity: 0.4;\n cursor: default;\n pointer-events: none;\n}\n\n.dv-context-menu-separator {\n height: 1px;\n background: var(--dv-tab-divider-color);\n margin: 4px 0;\n}\n\n.dv-context-menu-rename {\n padding: 8px 12px 4px;\n}\n\n.dv-context-menu-rename-input {\n width: 100%;\n box-sizing: border-box;\n padding: 8px 10px;\n border: 1px solid var(--dv-tab-divider-color);\n border-radius: var(--dv-border-radius);\n background: inherit;\n color: var(--dv-activegroup-visiblepanel-tab-color);\n font-size: var(--dv-tabs-and-actions-container-font-size);\n outline: none;\n}\n.dv-context-menu-rename-input:focus {\n border-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-context-menu-rename-input::placeholder {\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n\n.dv-context-menu-color-picker {\n display: flex;\n flex-direction: row;\n gap: 6px;\n padding: 8px 12px;\n align-items: center;\n}\n\n.dv-context-menu-color-swatch {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n cursor: pointer;\n border: 2px solid transparent;\n flex-shrink: 0;\n background-color: var(--dv-tab-group-color);\n}\n.dv-context-menu-color-swatch:hover {\n opacity: 0.85;\n}\n.dv-context-menu-color-swatch.dv-context-menu-color-swatch--selected {\n outline: 2px solid var(--dv-tab-divider-color);\n outline-offset: 2px;\n}\n\n.dv-tab-group-indicator-none .dv-groupview-header-bottom .dv-tab-group-underline {\n top: auto;\n bottom: 0;\n}\n.dv-drop-target-container {\n position: absolute;\n z-index: 9999;\n top: 0px;\n left: 0px;\n height: 100%;\n width: 100%;\n pointer-events: none;\n overflow: hidden;\n --dv-transition-duration: 300ms;\n}\n.dv-drop-target-container .dv-drop-target-anchor {\n position: relative;\n border: var(--dv-drag-over-border);\n background-color: var(--dv-drag-over-background-color);\n opacity: 1;\n /* GPU optimizations */\n will-change: transform, opacity;\n transform: translate3d(0, 0, 0);\n backface-visibility: hidden;\n contain: layout paint;\n transition: opacity var(--dv-transition-duration) ease-in, top var(--dv-transition-duration) ease-out, left var(--dv-transition-duration) ease-out, width var(--dv-transition-duration) ease-out, height var(--dv-transition-duration) ease-out;\n}\n.dv-drop-target {\n position: relative;\n --dv-transition-duration: 70ms;\n}\n.dv-drop-target > .dv-drop-target-dropzone {\n position: absolute;\n left: 0px;\n top: 0px;\n height: 100%;\n width: 100%;\n z-index: 1000;\n pointer-events: none;\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection {\n position: relative;\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n border: var(--dv-drag-over-border);\n background-color: var(--dv-drag-over-background-color);\n transition: top var(--dv-transition-duration) ease-out, left var(--dv-transition-duration) ease-out, width var(--dv-transition-duration) ease-out, height var(--dv-transition-duration) ease-out, opacity var(--dv-transition-duration) ease-out;\n will-change: transform;\n pointer-events: none;\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-top.dv-drop-target-small-vertical {\n border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical {\n border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal {\n border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {\n border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-dockview {\n position: relative;\n background-color: var(--dv-group-view-background-color);\n}\n.dv-dockview .dv-watermark-container {\n position: absolute;\n top: 0px;\n left: 0px;\n height: 100%;\n width: 100%;\n z-index: 1;\n}\n.dv-dockview .dv-overlay-render-container {\n position: relative;\n}\n\n.dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab {\n background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-inactive-tab {\n background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab {\n background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);\n color: var(--dv-inactivegroup-visiblepanel-tab-color);\n}\n.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-inactive-tab {\n background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n color: var(--dv-inactivegroup-hiddenpanel-tab-color);\n}\n\n/**\n * when a tab is dragged we lose the above stylings because they are conditional on parent elements\n * therefore we also set some stylings for the dragging event\n **/\n.dv-tab.dv-tab-dragging {\n background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-groupview {\n display: flex;\n height: 100%;\n background-color: var(--dv-group-view-background-color);\n overflow: hidden;\n flex-direction: column;\n}\n.dv-groupview:focus {\n outline: none;\n}\n.dv-groupview > .dv-content-container {\n flex-grow: 1;\n min-height: 0;\n outline: none;\n}\n.dv-groupview.dv-groupview-header-bottom {\n flex-direction: column-reverse;\n}\n.dv-groupview.dv-groupview-header-left {\n flex-direction: row;\n}\n.dv-groupview.dv-groupview-header-right {\n flex-direction: row-reverse;\n}\n.dv-groupview.dv-groupview-edge.dv-edge-collapsed > .dv-content-container {\n display: none;\n}\n.dv-root-wrapper {\n height: 100%;\n width: 100%;\n}\n.dv-grid-view,\n.dv-branch-node {\n height: 100%;\n width: 100%;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-top {\n background-color: red;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-bottom {\n background-color: green;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-left {\n background-color: yellow;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-right {\n background-color: blue;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-topleft,\n.dv-debug .dv-resize-container .dv-resize-handle-topright,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomleft,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomright {\n background-color: cyan;\n}\n\n.dv-floating-overlay-host {\n position: absolute;\n pointer-events: none;\n}\n.dv-floating-overlay-host > .dv-resize-container {\n pointer-events: auto;\n}\n\n.dv-resize-container {\n --dv-overlay-z-index: var(--dv-overlay-z-index, 999);\n position: absolute;\n z-index: calc(var(--dv-overlay-z-index) - 2);\n border: var(--dv-floating-border);\n box-shadow: var(--dv-floating-box-shadow);\n /* GPU optimizations for floating group movement */\n will-change: transform, opacity;\n transform: translate3d(0, 0, 0);\n backface-visibility: hidden;\n}\n.dv-resize-container.dv-hidden {\n display: none;\n}\n.dv-resize-container.dv-resize-container-dragging {\n opacity: var(--dv-floating-group-dragging-opacity);\n /* Enhanced GPU acceleration during drag */\n will-change: transform, opacity;\n}\n.dv-resize-container .dv-resize-handle-top,\n.dv-resize-container .dv-resize-handle-bottom,\n.dv-resize-container .dv-resize-handle-left,\n.dv-resize-container .dv-resize-handle-right,\n.dv-resize-container .dv-resize-handle-topleft,\n.dv-resize-container .dv-resize-handle-topright,\n.dv-resize-container .dv-resize-handle-bottomleft,\n.dv-resize-container .dv-resize-handle-bottomright {\n touch-action: none;\n}\n.dv-resize-container .dv-resize-handle-top {\n height: 4px;\n width: calc(100% - 8px);\n left: 4px;\n top: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-bottom {\n height: 4px;\n width: calc(100% - 8px);\n left: 4px;\n bottom: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-left {\n height: calc(100% - 8px);\n width: 4px;\n left: -2px;\n top: 4px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-right {\n height: calc(100% - 8px);\n width: 4px;\n right: -2px;\n top: 4px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-topleft {\n height: 4px;\n width: 4px;\n top: -2px;\n left: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: nw-resize;\n}\n.dv-resize-container .dv-resize-handle-topright {\n height: 4px;\n width: 4px;\n right: -2px;\n top: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ne-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomleft {\n height: 4px;\n width: 4px;\n left: -2px;\n bottom: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: sw-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomright {\n height: 4px;\n width: 4px;\n right: -2px;\n bottom: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: se-resize;\n}\n@media (pointer: coarse) {\n .dv-resize-container .dv-resize-handle-top,\n .dv-resize-container .dv-resize-handle-bottom {\n height: 16px;\n width: calc(100% - 48px);\n left: 24px;\n }\n .dv-resize-container .dv-resize-handle-top {\n top: -10px;\n }\n .dv-resize-container .dv-resize-handle-bottom {\n bottom: -10px;\n }\n .dv-resize-container .dv-resize-handle-left,\n .dv-resize-container .dv-resize-handle-right {\n width: 16px;\n height: calc(100% - 48px);\n top: 24px;\n }\n .dv-resize-container .dv-resize-handle-left {\n left: -10px;\n }\n .dv-resize-container .dv-resize-handle-right {\n right: -10px;\n }\n .dv-resize-container .dv-resize-handle-topleft,\n .dv-resize-container .dv-resize-handle-topright,\n .dv-resize-container .dv-resize-handle-bottomleft,\n .dv-resize-container .dv-resize-handle-bottomright {\n height: 24px;\n width: 24px;\n }\n .dv-resize-container .dv-resize-handle-topleft {\n top: -12px;\n left: -12px;\n }\n .dv-resize-container .dv-resize-handle-topright {\n top: -12px;\n right: -12px;\n }\n .dv-resize-container .dv-resize-handle-bottomleft {\n bottom: -12px;\n left: -12px;\n }\n .dv-resize-container .dv-resize-handle-bottomright {\n bottom: -12px;\n right: -12px;\n }\n}\n.dv-render-overlay {\n --dv-overlay-z-index: var(--dv-overlay-z-index, 999);\n position: absolute;\n z-index: 1;\n width: 100%;\n height: 100%;\n contain: layout paint;\n isolation: isolate;\n /* GPU optimizations */\n will-change: transform;\n transform: translate3d(0, 0, 0);\n backface-visibility: hidden;\n}\n.dv-render-overlay.dv-render-overlay-float {\n z-index: calc(var(--dv-overlay-z-index) - 1);\n}\n\n.dv-debug .dv-render-overlay {\n outline: 1px solid red;\n outline-offset: -1;\n}\n.dv-pane-container {\n height: 100%;\n width: 100%;\n}\n.dv-pane-container.dv-animated .dv-view {\n /* GPU optimizations for smooth pane animations */\n will-change: transform;\n transform: translate3d(0, 0, 0);\n backface-visibility: hidden;\n transition: transform 0.15s ease-out;\n}\n.dv-pane-container .dv-view {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n padding: 0px !important;\n}\n.dv-pane-container .dv-view:not(:first-child)::before {\n background-color: transparent !important;\n}\n.dv-pane-container .dv-view:not(:first-child) .dv-pane > .dv-pane-header {\n border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.dv-pane-container .dv-view .dv-default-header {\n background-color: var(--dv-group-view-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n display: flex;\n padding: 0px 8px;\n cursor: pointer;\n}\n.dv-pane-container .dv-view .dv-default-header .dv-pane-header-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.dv-pane-container .dv-view .dv-default-header > span {\n padding-left: 8px;\n flex-grow: 1;\n}\n.dv-pane-container:first-of-type > .dv-pane > .dv-pane-header {\n border-top: none !important;\n}\n.dv-pane-container .dv-pane {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n height: 100%;\n}\n.dv-pane-container .dv-pane .dv-pane-header {\n box-sizing: border-box;\n user-select: none;\n position: relative;\n outline: none;\n}\n.dv-pane-container .dv-pane .dv-pane-header.dv-pane-draggable {\n cursor: pointer;\n}\n.dv-pane-container .dv-pane .dv-pane-header:focus:before, .dv-pane-container .dv-pane .dv-pane-header:focus-within:before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n content: \"\";\n pointer-events: none;\n outline: 1px solid;\n outline-width: -1px;\n outline-style: solid;\n outline-offset: -1px;\n outline-color: var(--dv-paneview-active-outline-color);\n}\n.dv-pane-container .dv-pane .dv-pane-body {\n overflow-y: auto;\n overflow-x: hidden;\n flex-grow: 1;\n position: relative;\n outline: none;\n}\n.dv-pane-container .dv-pane .dv-pane-body:focus:before, .dv-pane-container .dv-pane .dv-pane-body:focus-within:before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n content: \"\";\n pointer-events: none;\n outline: 1px solid;\n outline-width: -1px;\n outline-style: solid;\n outline-offset: -1px;\n outline-color: var(--dv-paneview-active-outline-color);\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-enabled {\n background-color: black;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-disabled {\n background-color: orange;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-maximum {\n background-color: green;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-minimum {\n background-color: red;\n}\n\n.dv-split-view-container {\n position: relative;\n overflow: hidden;\n height: 100%;\n width: 100%;\n}\n.dv-split-view-container.dv-splitview-disabled > .dv-sash-container > .dv-sash {\n pointer-events: none;\n}\n.dv-split-view-container.dv-animation .dv-view,\n.dv-split-view-container.dv-animation .dv-sash {\n /* GPU optimizations for smooth animations */\n will-change: transform;\n transform: translate3d(0, 0, 0);\n backface-visibility: hidden;\n transition: transform 0.15s ease-out;\n}\n.dv-split-view-container.dv-horizontal {\n height: 100%;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash {\n height: 100%;\n width: 4px;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-enabled {\n cursor: ew-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-disabled {\n cursor: default;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-maximum {\n cursor: w-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-minimum {\n cursor: e-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-view-container > .dv-view:not(:first-child)::before {\n height: 100%;\n width: 1px;\n}\n.dv-split-view-container.dv-vertical {\n width: 100%;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash {\n width: 100%;\n height: 4px;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-enabled {\n cursor: ns-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-disabled {\n cursor: default;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-maximum {\n cursor: n-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-minimum {\n cursor: s-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-view-container > .dv-view {\n width: 100%;\n}\n.dv-split-view-container.dv-vertical > .dv-view-container > .dv-view:not(:first-child)::before {\n height: 1px;\n width: 100%;\n}\n.dv-split-view-container .dv-sash-container {\n height: 100%;\n width: 100%;\n position: absolute;\n}\n.dv-split-view-container .dv-sash-container .dv-sash {\n position: absolute;\n z-index: 99;\n outline: none;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n touch-action: none;\n background-color: var(--dv-sash-color, transparent);\n}\n.dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):active, .dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):hover {\n background-color: var(--dv-active-sash-color, transparent);\n transition-property: background-color;\n transition-timing-function: ease-in-out;\n transition-duration: var(--dv-active-sash-transition-duration, 0.1s);\n transition-delay: var(--dv-active-sash-transition-delay, 0.5s);\n}\n@media (pointer: coarse) {\n .dv-split-view-container .dv-sash-container > .dv-sash:not(.dv-disabled)::before {\n content: \"\";\n position: absolute;\n background: transparent;\n }\n .dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash:not(.dv-disabled)::before {\n top: 0;\n bottom: 0;\n left: -10px;\n right: -10px;\n }\n .dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash:not(.dv-disabled)::before {\n left: 0;\n right: 0;\n top: -10px;\n bottom: -10px;\n }\n}\n.dv-split-view-container .dv-view-container {\n position: relative;\n height: 100%;\n width: 100%;\n}\n.dv-split-view-container .dv-view-container .dv-view {\n height: 100%;\n box-sizing: border-box;\n overflow: auto;\n position: absolute;\n}\n.dv-split-view-container.dv-separator-border .dv-view:not(:first-child)::before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n z-index: 5;\n pointer-events: none;\n background-color: var(--dv-separator-border);\n}\n.dv-dragged {\n transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */\n}\n\n/* Applied to the ghost tab clone during drag so it shows the same border as a focused tab */\n.dv-tab-ghost-drag {\n position: relative;\n}\n.dv-tab-ghost-drag::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\n.dv-tab {\n flex-shrink: 0;\n}\n.dv-tab:focus-within, .dv-tab:focus {\n position: relative;\n}\n.dv-tab:focus-within::after, .dv-tab:focus::after {\n position: absolute;\n content: \"\";\n height: 100%;\n width: 100%;\n top: 0px;\n left: 0px;\n pointer-events: none;\n outline: 1px solid var(--dv-tab-divider-color) !important;\n outline-offset: -1px;\n z-index: 5;\n}\n.dv-tab.dv-tab-dragging .dv-default-tab-action {\n background-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-tab.dv-active-tab .dv-default-tab .dv-default-tab-action {\n visibility: visible;\n}\n.dv-tab.dv-inactive-tab .dv-default-tab .dv-default-tab-action {\n visibility: hidden;\n}\n.dv-tab.dv-inactive-tab .dv-default-tab:hover .dv-default-tab-action {\n visibility: visible;\n}\n@media (hover: none) {\n .dv-tab.dv-inactive-tab .dv-default-tab .dv-default-tab-action {\n visibility: visible;\n }\n}\n.dv-tab .dv-default-tab {\n position: relative;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.dv-tab .dv-default-tab .dv-default-tab-content {\n flex-grow: 1;\n margin-right: 4px;\n}\n.dv-tab .dv-default-tab .dv-default-tab-action {\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n}\n.dv-tab .dv-default-tab .dv-default-tab-action:hover {\n border-radius: 2px;\n background-color: var(--dv-icon-hover-background-color);\n}\n@media (pointer: coarse) {\n .dv-tab .dv-default-tab .dv-default-tab-action {\n padding: 8px;\n }\n}\n.dv-tabs-overflow-dropdown-default {\n height: 100%;\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n margin: var(--dv-tab-margin);\n display: flex;\n align-items: center;\n flex-shrink: 0;\n padding: 0.25rem 0.5rem;\n cursor: pointer;\n}\n.dv-tabs-overflow-dropdown-default > span {\n padding-left: 0.25rem;\n}\n.dv-tabs-overflow-dropdown-default > svg {\n transform: rotate(90deg);\n}\n.dv-tabs-overflow-dropdown-default:hover {\n border-radius: 2px;\n background-color: var(--dv-icon-hover-background-color);\n}\n@charset \"UTF-8\";\n.dv-tabs-container {\n display: flex;\n position: relative;\n height: 100%;\n overflow: auto;\n scrollbar-width: thin;\n /* GPU optimizations for smooth scrolling */\n will-change: scroll-position;\n transform: translate3d(0, 0, 0);\n /**\n * Stop scroll-chaining at the tab strip so that wheel / trackpad\n * overscroll past the strip's edges doesn't trigger the browser's\n * swipe-to-go-back-or-forward gesture (and doesn't scroll the page\n * either). `contain` keeps the native bounce visuals; `none` would\n * also disable them.\n */\n overscroll-behavior: contain;\n /**\n * Empty space between tabs (and the scrollbar lane) keeps pan-x so a\n * flick on those areas produces native momentum scroll. The tab and\n * chip elements themselves opt out (`touch-action: none`) so the\n * pointer drag source owns the gesture from pointerdown — a flick on\n * a tab or chip always becomes a drag, regardless of direction.\n */\n touch-action: pan-x;\n}\n.dv-tabs-container.dv-tabs-container-vertical {\n width: 100%;\n height: fit-content;\n max-height: 100%;\n writing-mode: vertical-rl;\n touch-action: pan-y;\n}\n.dv-tabs-container.dv-horizontal .dv-tab:not(:first-child)::before, .dv-tabs-container.dv-vertical .dv-tab:not(:first-child)::before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n z-index: 5;\n pointer-events: none;\n background-color: var(--dv-tab-divider-color);\n}\n.dv-tabs-container.dv-horizontal .dv-tab:not(:first-child)::before {\n width: 1px;\n height: 100%;\n}\n.dv-tabs-container.dv-vertical .dv-tab:not(:first-child)::before {\n width: 100%;\n height: 1px;\n}\n.dv-tabs-container::-webkit-scrollbar {\n height: 3px;\n}\n.dv-tabs-container {\n /* Track */\n}\n.dv-tabs-container::-webkit-scrollbar-track {\n background: transparent;\n}\n.dv-tabs-container {\n /* Handle */\n}\n.dv-tabs-container::-webkit-scrollbar-thumb {\n background: var(--dv-tabs-container-scrollbar-color);\n}\n\n.dv-scrollable > .dv-tabs-container {\n overflow: hidden;\n}\n\n.dv-tab {\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n outline: none;\n padding: 0.25rem 0.5rem;\n cursor: pointer;\n position: relative;\n box-sizing: border-box;\n font-size: var(--dv-tab-font-size);\n margin: var(--dv-tab-margin);\n touch-action: none;\n}\n.dv-tab.dv-tab--shifting {\n will-change: transform, margin-left, margin-right, margin-top, margin-bottom;\n transition: transform var(--dv-transition-duration, 200ms) ease-out, margin-left var(--dv-transition-duration, 200ms) ease-out, margin-right var(--dv-transition-duration, 200ms) ease-out, margin-top var(--dv-transition-duration, 200ms) ease-out, margin-bottom var(--dv-transition-duration, 200ms) ease-out;\n}\n.dv-tab.dv-tab--dragging {\n width: 0 !important;\n min-width: 0 !important;\n padding: 0 !important;\n margin: 0 !important;\n overflow: hidden;\n opacity: 0;\n pointer-events: none;\n transition: width var(--dv-transition-duration, 200ms) ease-out, padding var(--dv-transition-duration, 200ms) ease-out, margin var(--dv-transition-duration, 200ms) ease-out, opacity var(--dv-transition-duration, 200ms) ease-out;\n}\n.dv-tab.dv-tab--group-collapsed {\n width: 0 !important;\n min-width: 0 !important;\n padding: 0 !important;\n margin: 0 !important;\n overflow: hidden;\n opacity: 0;\n pointer-events: none;\n transition: width var(--dv-transition-duration, 200ms) ease-out, padding var(--dv-transition-duration, 200ms) ease-out, margin var(--dv-transition-duration, 200ms) ease-out, opacity var(--dv-transition-duration, 200ms) ease-out;\n}\n.dv-tab.dv-tab--group-expanding {\n transition: width var(--dv-transition-duration, 200ms) ease-out, padding var(--dv-transition-duration, 200ms) ease-out, margin var(--dv-transition-duration, 200ms) ease-out, opacity var(--dv-transition-duration, 200ms) ease-out;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .dv-tab {\n transition: none !important;\n }\n .dv-tab-group-chip {\n transition: none !important;\n }\n}\n.dv-tab-group-chip {\n display: inline-flex;\n align-items: center;\n align-self: center;\n padding: var(--dv-tab-group-chip-padding);\n margin: 0 8px 0 8px;\n border-radius: var(--dv-tab-group-chip-border-radius);\n font-size: var(--dv-tab-group-chip-font-size);\n cursor: pointer;\n user-select: none;\n white-space: nowrap;\n box-sizing: border-box;\n line-height: 1;\n touch-action: none;\n background-color: var(--dv-tab-group-color);\n color: white;\n}\n.dv-tab-group-chip.dv-tab-group-chip--accent-off {\n background-color: transparent;\n color: inherit;\n}\n.dv-tab-group-chip.dv-tab-group-chip--shifting {\n will-change: margin-left;\n transition: margin-left var(--dv-transition-duration, 200ms) ease-out;\n}\n.dv-tab-group-chip.dv-tab-group-chip--dragging {\n width: 0 !important;\n min-width: 0 !important;\n padding: 0 !important;\n margin: 0 !important;\n overflow: hidden;\n opacity: 0;\n pointer-events: none;\n transition: width var(--dv-transition-duration, 200ms) ease-out, padding var(--dv-transition-duration, 200ms) ease-out, margin var(--dv-transition-duration, 200ms) ease-out, opacity var(--dv-transition-duration, 200ms) ease-out;\n}\n.dv-tab-group-chip .dv-tab-group-chip-label--empty {\n display: none;\n}\n.dv-tab-group-chip:has(.dv-tab-group-chip-label--empty) {\n position: relative;\n width: 12px;\n height: 12px;\n padding: 0;\n border-radius: 50%;\n}\n.dv-tab-group-chip:has(.dv-tab-group-chip-label--empty)::before {\n content: \"\";\n position: absolute;\n inset: -8px;\n}\n\n.dv-tab-group-underline {\n position: absolute;\n bottom: 0;\n opacity: var(--dv-tab-group-line-opacity);\n pointer-events: none;\n z-index: 10;\n}\n\n.dv-groupview-header-bottom .dv-tab-group-underline {\n bottom: auto;\n top: 0;\n}\n\n.dv-tabs-container-vertical .dv-tab-group-underline {\n bottom: auto;\n left: 0;\n}\n\n.dv-tabs-container-vertical .dv-tab-group-chip {\n margin: 8px 0 8px 0;\n}\n.dv-tabs-container-vertical .dv-tab {\n padding: 0.5rem 0.25rem;\n}\n.dv-tabs-container-vertical .dv-tab.dv-tab--group-collapsed {\n height: 0 !important;\n min-height: 0 !important;\n width: auto !important;\n min-width: initial !important;\n transition: height var(--dv-transition-duration, 200ms) ease-out, padding var(--dv-transition-duration, 200ms) ease-out, margin var(--dv-transition-duration, 200ms) ease-out, opacity var(--dv-transition-duration, 200ms) ease-out;\n}\n.dv-tabs-container-vertical .dv-tab.dv-tab--group-expanding {\n transition: height var(--dv-transition-duration, 200ms) ease-out, padding var(--dv-transition-duration, 200ms) ease-out, margin var(--dv-transition-duration, 200ms) ease-out, opacity var(--dv-transition-duration, 200ms) ease-out;\n}\n.dv-tabs-container-vertical .dv-tab.dv-tab--dragging {\n height: 0 !important;\n min-height: 0 !important;\n width: auto !important;\n min-width: initial !important;\n transition: height var(--dv-transition-duration, 200ms) ease-out, padding var(--dv-transition-duration, 200ms) ease-out, margin var(--dv-transition-duration, 200ms) ease-out, opacity var(--dv-transition-duration, 200ms) ease-out;\n}\n\n.dv-tabs-overflow-container {\n flex-direction: column;\n height: unset;\n font-size: var(--dv-tabs-and-actions-container-font-size);\n max-height: min(50vh, 400px);\n overflow-y: auto;\n border: 1px solid var(--dv-tab-divider-color);\n background-color: var(--dv-group-view-background-color);\n /* Scrollbar styling for webkit browsers */\n}\n.dv-tabs-overflow-container::-webkit-scrollbar {\n width: 6px;\n}\n.dv-tabs-overflow-container::-webkit-scrollbar-track {\n background: transparent;\n}\n.dv-tabs-overflow-container::-webkit-scrollbar-thumb {\n background: var(--dv-tabs-container-scrollbar-color);\n border-radius: 3px;\n}\n.dv-tabs-overflow-container {\n /* Firefox scrollbar */\n scrollbar-width: thin;\n}\n.dv-tabs-overflow-container .dv-tab:not(:last-child) {\n border-bottom: 1px solid var(--dv-tab-divider-color);\n}\n.dv-tabs-overflow-container .dv-active-tab {\n background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-tabs-overflow-container .dv-inactive-tab {\n background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.dv-tabs-overflow-container .dv-tabs-overflow-group-header {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 4px 8px;\n font-size: 0.8em;\n font-weight: 600;\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n cursor: pointer;\n border-bottom: 1px solid var(--dv-tab-divider-color);\n}\n.dv-tabs-overflow-container .dv-tabs-overflow-group-header:hover {\n background-color: var(--dv-icon-hover-background-color);\n}\n.dv-tabs-overflow-container .dv-tabs-overflow-group-color {\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n flex-shrink: 0;\n background-color: var(--dv-tab-group-color);\n}\n.dv-tabs-overflow-container .dv-tabs-overflow-group-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.dv-tabs-overflow-container .dv-tabs-overflow-group-collapsed-badge {\n font-size: 0.75em;\n font-weight: 400;\n opacity: 0.7;\n padding: 1px 4px;\n border-radius: 3px;\n background-color: var(--dv-tab-divider-color);\n}\n.dv-tabs-overflow-container .dv-tab.dv-tab--grouped {\n padding-left: 16px;\n}\n.dv-tabs-and-actions-container {\n display: flex;\n background-color: var(--dv-tabs-and-actions-container-background-color);\n flex-shrink: 0;\n box-sizing: border-box;\n height: var(--dv-tabs-and-actions-container-height);\n font-size: var(--dv-tabs-and-actions-container-font-size);\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-scrollable {\n flex-grow: 1;\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container {\n flex-grow: 1;\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container .dv-tab {\n flex-grow: 1;\n padding: 0px;\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-void-container {\n flex-grow: 0;\n}\n.dv-tabs-and-actions-container .dv-void-container {\n display: flex;\n flex-grow: 1;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n touch-action: none;\n}\n.dv-tabs-and-actions-container .dv-void-container.dv-draggable {\n cursor: grab;\n}\n.dv-tabs-and-actions-container .dv-right-actions-container {\n display: flex;\n}\n.dv-tabs-and-actions-container .dv-right-actions-container.dv-right-actions-container-vertical {\n flex-direction: column;\n}\n.dv-tabs-and-actions-container.dv-groupview-header-vertical {\n flex-direction: column;\n height: auto;\n width: var(--dv-tabs-and-actions-container-height);\n}\n.dv-watermark {\n display: flex;\n height: 100%;\n}";
41
41
  styleInject(css_248z);
42
42
 
43
43
  class TransferObject {
@@ -508,8 +508,10 @@
508
508
  function quasiDefaultPrevented(event) {
509
509
  return event[QUASI_PREVENT_DEFAULT_KEY];
510
510
  }
511
- function addStyles(document, styleSheetList) {
511
+ function addStyles(document, styleSheetList, options = {}) {
512
512
  const styleSheets = Array.from(styleSheetList);
513
+ const { nonce } = options;
514
+ const resolvedNonce = typeof nonce === 'function' ? nonce(document) : nonce;
513
515
  for (const styleSheet of styleSheets) {
514
516
  if (styleSheet.href) {
515
517
  const link = document.createElement('link');
@@ -517,6 +519,10 @@
517
519
  link.type = styleSheet.type;
518
520
  link.rel = 'stylesheet';
519
521
  document.head.appendChild(link);
522
+ // The <link> will load and apply its rules in the target
523
+ // document. Reading cssRules here would duplicate them
524
+ // (and throws for cross-origin sheets).
525
+ continue;
520
526
  }
521
527
  let cssTexts = [];
522
528
  try {
@@ -527,11 +533,16 @@
527
533
  catch (err) {
528
534
  console.warn('dockview: failed to access stylesheet rules due to security restrictions', err);
529
535
  }
536
+ const fragment = document.createDocumentFragment();
530
537
  for (const rule of cssTexts) {
531
538
  const style = document.createElement('style');
539
+ if (resolvedNonce) {
540
+ style.setAttribute('nonce', resolvedNonce);
541
+ }
532
542
  style.appendChild(document.createTextNode(rule));
533
- document.head.appendChild(style);
543
+ fragment.appendChild(style);
534
544
  }
545
+ document.head.appendChild(fragment);
535
546
  }
536
547
  }
537
548
  function getDomNodePagePosition(domNode) {
@@ -570,7 +581,7 @@
570
581
  * Should be more efficient than element.querySelectorAll("*") since there
571
582
  * is no need to store every element in-memory using this approach
572
583
  */
573
- function allTagsNamesInclusiveOfShadowDoms(tagNames) {
584
+ function allTagsNamesInclusiveOfShadowDoms(tagNames, rootNode) {
574
585
  const iframes = [];
575
586
  function findIframesInNode(node) {
576
587
  if (node.nodeType === Node.ELEMENT_NODE) {
@@ -585,11 +596,15 @@
585
596
  }
586
597
  }
587
598
  }
588
- findIframesInNode(document.documentElement);
599
+ // Document → walk from its root element. Element → walk from itself.
600
+ const startEl = rootNode instanceof Document
601
+ ? rootNode.documentElement
602
+ : rootNode;
603
+ findIframesInNode(startEl);
589
604
  return iframes;
590
605
  }
591
606
  function disableIframePointEvents(rootNode = document) {
592
- const iframes = allTagsNamesInclusiveOfShadowDoms(['IFRAME', 'WEBVIEW']);
607
+ const iframes = allTagsNamesInclusiveOfShadowDoms(['IFRAME', 'WEBVIEW'], rootNode);
593
608
  const original = new WeakMap(); // don't hold onto HTMLElement references longer than required
594
609
  for (const iframe of iframes) {
595
610
  original.set(iframe, iframe.style.pointerEvents);
@@ -4009,67 +4024,6 @@
4009
4024
  }
4010
4025
  }
4011
4026
 
4012
- class DragHandler extends CompositeDisposable {
4013
- constructor(el, disabled) {
4014
- super();
4015
- this.el = el;
4016
- this.disabled = disabled;
4017
- this.dataDisposable = new MutableDisposable();
4018
- this.pointerEventsDisposable = new MutableDisposable();
4019
- this._onDragStart = new Emitter();
4020
- this.onDragStart = this._onDragStart.event;
4021
- this.addDisposables(this._onDragStart, this.dataDisposable, this.pointerEventsDisposable);
4022
- this.configure();
4023
- }
4024
- setDisabled(disabled) {
4025
- this.disabled = disabled;
4026
- }
4027
- isCancelled(_event) {
4028
- return false;
4029
- }
4030
- configure() {
4031
- this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
4032
- if (event.defaultPrevented ||
4033
- this.isCancelled(event) ||
4034
- this.disabled) {
4035
- event.preventDefault();
4036
- return;
4037
- }
4038
- const iframes = disableIframePointEvents();
4039
- this.pointerEventsDisposable.value = {
4040
- dispose: () => {
4041
- iframes.release();
4042
- },
4043
- };
4044
- this.el.classList.add('dv-dragged');
4045
- setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
4046
- this.dataDisposable.value = this.getData(event);
4047
- this._onDragStart.fire(event);
4048
- if (event.dataTransfer) {
4049
- event.dataTransfer.effectAllowed = 'move';
4050
- const hasData = event.dataTransfer.items.length > 0;
4051
- if (!hasData) {
4052
- /**
4053
- * Although this is not used by dockview many third party dnd libraries will check
4054
- * dataTransfer.types to determine valid drag events.
4055
- *
4056
- * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
4057
- * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
4058
- * dnd logic. You can see the code at
4059
- P * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
4060
- */
4061
- event.dataTransfer.setData('text/plain', '');
4062
- }
4063
- }
4064
- }), addDisposableListener(this.el, 'dragend', () => {
4065
- this.pointerEventsDisposable.dispose();
4066
- setTimeout(() => {
4067
- this.dataDisposable.dispose(); // allow the data to be read by other handlers before disposing
4068
- }, 0);
4069
- }));
4070
- }
4071
- }
4072
-
4073
4027
  class DragAndDropObserver extends CompositeDisposable {
4074
4028
  constructor(element, callbacks) {
4075
4029
  super();
@@ -4120,48 +4074,197 @@
4120
4074
  }
4121
4075
  }
4122
4076
 
4123
- function setGPUOptimizedBounds(element, bounds) {
4124
- const { top, left, width, height } = bounds;
4125
- const topPx = `${Math.round(top)}px`;
4126
- const leftPx = `${Math.round(left)}px`;
4127
- const widthPx = `${Math.round(width)}px`;
4128
- const heightPx = `${Math.round(height)}px`;
4129
- // Use traditional positioning but maintain GPU layer
4130
- element.style.top = topPx;
4131
- element.style.left = leftPx;
4132
- element.style.width = widthPx;
4133
- element.style.height = heightPx;
4134
- element.style.visibility = 'visible';
4135
- // Ensure GPU layer is maintained
4136
- if (!element.style.transform || element.style.transform === '') {
4137
- element.style.transform = 'translate3d(0, 0, 0)';
4138
- }
4139
- }
4140
- function setGPUOptimizedBoundsFromStrings(element, bounds) {
4141
- const { top, left, width, height } = bounds;
4142
- // Use traditional positioning but maintain GPU layer
4143
- element.style.top = top;
4144
- element.style.left = left;
4145
- element.style.width = width;
4146
- element.style.height = height;
4147
- element.style.visibility = 'visible';
4148
- // Ensure GPU layer is maintained
4149
- if (!element.style.transform || element.style.transform === '') {
4150
- element.style.transform = 'translate3d(0, 0, 0)';
4151
- }
4152
- }
4153
- function checkBoundsChanged(element, bounds) {
4154
- const { top, left, width, height } = bounds;
4155
- const topPx = `${Math.round(top)}px`;
4156
- const leftPx = `${Math.round(left)}px`;
4157
- const widthPx = `${Math.round(width)}px`;
4158
- const heightPx = `${Math.round(height)}px`;
4159
- // Check if position or size changed (back to traditional method)
4160
- return (element.style.top !== topPx ||
4161
- element.style.left !== leftPx ||
4162
- element.style.width !== widthPx ||
4163
- element.style.height !== heightPx);
4077
+ // Two render paths: in-place (dropzone appended to drop element) and
4078
+ // anchored (overlay rendered into an external anchor container).
4079
+ const DEFAULT_SIZE = { value: 50, type: 'percentage' };
4080
+ const SMALL_WIDTH_BOUNDARY = 100;
4081
+ const SMALL_HEIGHT_BOUNDARY = 100;
4082
+ function createOverlayElements() {
4083
+ const dropzone = document.createElement('div');
4084
+ dropzone.className = 'dv-drop-target-dropzone';
4085
+ const selection = document.createElement('div');
4086
+ selection.className = 'dv-drop-target-selection';
4087
+ dropzone.appendChild(selection);
4088
+ return { dropzone, selection };
4089
+ }
4090
+ function computeOverlayShape(quadrant, width, height, overlayModel) {
4091
+ var _a, _b, _c;
4092
+ const smallWidthBoundary = (_a = overlayModel === null || overlayModel === void 0 ? void 0 : overlayModel.smallWidthBoundary) !== null && _a !== void 0 ? _a : SMALL_WIDTH_BOUNDARY;
4093
+ const smallHeightBoundary = (_b = overlayModel === null || overlayModel === void 0 ? void 0 : overlayModel.smallHeightBoundary) !== null && _b !== void 0 ? _b : SMALL_HEIGHT_BOUNDARY;
4094
+ const isSmallX = width < smallWidthBoundary;
4095
+ const isSmallY = height < smallHeightBoundary;
4096
+ const isLeft = quadrant === 'left';
4097
+ const isRight = quadrant === 'right';
4098
+ const isTop = quadrant === 'top';
4099
+ const isBottom = quadrant === 'bottom';
4100
+ const rightClass = !isSmallX && isRight;
4101
+ const leftClass = !isSmallX && isLeft;
4102
+ const topClass = !isSmallY && isTop;
4103
+ const bottomClass = !isSmallY && isBottom;
4104
+ let size = 1;
4105
+ const sizeOptions = (_c = overlayModel === null || overlayModel === void 0 ? void 0 : overlayModel.size) !== null && _c !== void 0 ? _c : DEFAULT_SIZE;
4106
+ if (sizeOptions.type === 'percentage') {
4107
+ size = clamp(sizeOptions.value, 0, 100) / 100;
4108
+ }
4109
+ else {
4110
+ if (rightClass || leftClass) {
4111
+ size = clamp(0, sizeOptions.value, width) / width;
4112
+ }
4113
+ if (topClass || bottomClass) {
4114
+ size = clamp(0, sizeOptions.value, height) / height;
4115
+ }
4116
+ }
4117
+ return {
4118
+ isSmallX,
4119
+ isSmallY,
4120
+ isLeft,
4121
+ isRight,
4122
+ isTop,
4123
+ isBottom,
4124
+ rightClass,
4125
+ leftClass,
4126
+ topClass,
4127
+ bottomClass,
4128
+ size,
4129
+ };
4130
+ }
4131
+ function renderInPlaceOverlay(overlay, quadrant, width, height, overlayModel) {
4132
+ const shape = computeOverlayShape(quadrant, width, height, overlayModel);
4133
+ const { rightClass, leftClass, topClass, bottomClass, size } = shape;
4134
+ const box = { top: '0px', left: '0px', width: '100%', height: '100%' };
4135
+ if (rightClass) {
4136
+ box.left = `${100 * (1 - size)}%`;
4137
+ box.width = `${100 * size}%`;
4138
+ }
4139
+ else if (leftClass) {
4140
+ box.width = `${100 * size}%`;
4141
+ }
4142
+ else if (topClass) {
4143
+ box.height = `${100 * size}%`;
4144
+ }
4145
+ else if (bottomClass) {
4146
+ box.top = `${100 * (1 - size)}%`;
4147
+ box.height = `${100 * size}%`;
4148
+ }
4149
+ if (shape.isSmallX && shape.isLeft) {
4150
+ box.width = '4px';
4151
+ }
4152
+ if (shape.isSmallX && shape.isRight) {
4153
+ box.left = `${width - 4}px`;
4154
+ box.width = '4px';
4155
+ }
4156
+ if (shape.isSmallY && shape.isTop) {
4157
+ box.height = '4px';
4158
+ }
4159
+ if (shape.isSmallY && shape.isBottom) {
4160
+ box.top = `${height - 4}px`;
4161
+ box.height = '4px';
4162
+ }
4163
+ overlay.style.top = box.top;
4164
+ overlay.style.left = box.left;
4165
+ overlay.style.width = box.width;
4166
+ overlay.style.height = box.height;
4167
+ overlay.style.visibility = 'visible';
4168
+ if (!overlay.style.transform || overlay.style.transform === '') {
4169
+ overlay.style.transform = 'translate3d(0, 0, 0)';
4170
+ }
4171
+ const isLine = (shape.isSmallX && (shape.isLeft || shape.isRight)) ||
4172
+ (shape.isSmallY && (shape.isTop || shape.isBottom));
4173
+ toggleClass(overlay, 'dv-drop-target-small-vertical', shape.isSmallY);
4174
+ toggleClass(overlay, 'dv-drop-target-small-horizontal', shape.isSmallX);
4175
+ toggleClass(overlay, 'dv-drop-target-selection-line', isLine);
4176
+ toggleClass(overlay, 'dv-drop-target-left', shape.isLeft);
4177
+ toggleClass(overlay, 'dv-drop-target-right', shape.isRight);
4178
+ toggleClass(overlay, 'dv-drop-target-top', shape.isTop);
4179
+ toggleClass(overlay, 'dv-drop-target-bottom', shape.isBottom);
4180
+ toggleClass(overlay, 'dv-drop-target-center', quadrant === 'center');
4181
+ }
4182
+ function checkAnchoredBoundsChanged(overlay, bounds) {
4183
+ const topPx = `${Math.round(bounds.top)}px`;
4184
+ const leftPx = `${Math.round(bounds.left)}px`;
4185
+ const widthPx = `${Math.round(bounds.width)}px`;
4186
+ const heightPx = `${Math.round(bounds.height)}px`;
4187
+ return (overlay.style.top !== topPx ||
4188
+ overlay.style.left !== leftPx ||
4189
+ overlay.style.width !== widthPx ||
4190
+ overlay.style.height !== heightPx);
4191
+ }
4192
+ function applyAnchoredBounds(overlay, bounds) {
4193
+ overlay.style.top = `${Math.round(bounds.top)}px`;
4194
+ overlay.style.left = `${Math.round(bounds.left)}px`;
4195
+ overlay.style.width = `${Math.round(bounds.width)}px`;
4196
+ overlay.style.height = `${Math.round(bounds.height)}px`;
4197
+ overlay.style.visibility = 'visible';
4198
+ if (!overlay.style.transform || overlay.style.transform === '') {
4199
+ overlay.style.transform = 'translate3d(0, 0, 0)';
4200
+ }
4201
+ }
4202
+ /** `boundsChanged: false` lets callers skip redundant work on tight drag loops. */
4203
+ function renderAnchoredOverlay(args) {
4204
+ const shape = computeOverlayShape(args.quadrant, args.width, args.height, args.overlayModel);
4205
+ const { rightClass, leftClass, topClass, bottomClass, size } = shape;
4206
+ const elBox = args.outlineElement.getBoundingClientRect();
4207
+ const ta = args.targetModel.getElements(undefined, args.outlineElement);
4208
+ const el = ta.root;
4209
+ const overlay = ta.overlay;
4210
+ const bigbox = el.getBoundingClientRect();
4211
+ const rootTop = elBox.top - bigbox.top;
4212
+ const rootLeft = elBox.left - bigbox.left;
4213
+ const box = {
4214
+ top: rootTop,
4215
+ left: rootLeft,
4216
+ width: args.width,
4217
+ height: args.height,
4218
+ };
4219
+ if (rightClass) {
4220
+ box.left = rootLeft + args.width * (1 - size);
4221
+ box.width = args.width * size;
4222
+ }
4223
+ else if (leftClass) {
4224
+ box.width = args.width * size;
4225
+ }
4226
+ else if (topClass) {
4227
+ box.height = args.height * size;
4228
+ }
4229
+ else if (bottomClass) {
4230
+ box.top = rootTop + args.height * (1 - size);
4231
+ box.height = args.height * size;
4232
+ }
4233
+ if (shape.isSmallX && shape.isLeft) {
4234
+ box.width = 4;
4235
+ }
4236
+ if (shape.isSmallX && shape.isRight) {
4237
+ box.left = rootLeft + args.width - 4;
4238
+ box.width = 4;
4239
+ }
4240
+ if (shape.isSmallY && shape.isTop) {
4241
+ box.height = 4;
4242
+ }
4243
+ if (shape.isSmallY && shape.isBottom) {
4244
+ box.top = rootTop + args.height - 4;
4245
+ box.height = 4;
4246
+ }
4247
+ if (!checkAnchoredBoundsChanged(overlay, box)) {
4248
+ return { boundsChanged: false, targetChanged: ta.changed };
4249
+ }
4250
+ applyAnchoredBounds(overlay, box);
4251
+ overlay.className = `dv-drop-target-anchor${args.className ? ` ${args.className}` : ''}`;
4252
+ toggleClass(overlay, 'dv-drop-target-left', shape.isLeft);
4253
+ toggleClass(overlay, 'dv-drop-target-right', shape.isRight);
4254
+ toggleClass(overlay, 'dv-drop-target-top', shape.isTop);
4255
+ toggleClass(overlay, 'dv-drop-target-bottom', shape.isBottom);
4256
+ toggleClass(overlay, 'dv-drop-target-anchor-line', (shape.isSmallX && (shape.isLeft || shape.isRight)) ||
4257
+ (shape.isSmallY && (shape.isTop || shape.isBottom)));
4258
+ toggleClass(overlay, 'dv-drop-target-center', args.quadrant === 'center');
4259
+ if (ta.changed) {
4260
+ toggleClass(overlay, 'dv-drop-target-anchor-container-changed', true);
4261
+ setTimeout(() => {
4262
+ toggleClass(overlay, 'dv-drop-target-anchor-container-changed', false);
4263
+ }, 10);
4264
+ }
4265
+ return { boundsChanged: true, targetChanged: ta.changed };
4164
4266
  }
4267
+
4165
4268
  class WillShowOverlayEvent extends DockviewEvent {
4166
4269
  get nativeEvent() {
4167
4270
  return this.options.nativeEvent;
@@ -4206,16 +4309,10 @@
4206
4309
  throw new Error(`invalid position '${position}'`);
4207
4310
  }
4208
4311
  }
4209
- const DEFAULT_ACTIVATION_SIZE = {
4312
+ const DEFAULT_ACTIVATION_SIZE$1 = {
4210
4313
  value: 20,
4211
4314
  type: 'percentage',
4212
4315
  };
4213
- const DEFAULT_SIZE = {
4214
- value: 50,
4215
- type: 'percentage',
4216
- };
4217
- const SMALL_WIDTH_BOUNDARY = 100;
4218
- const SMALL_HEIGHT_BOUNDARY = 100;
4219
4316
  class Droptarget extends CompositeDisposable {
4220
4317
  get disabled() {
4221
4318
  return this._disabled;
@@ -4296,20 +4393,12 @@
4296
4393
  this.markAsUsed(e);
4297
4394
  if (overrideTarget) ;
4298
4395
  else if (!this.targetElement) {
4299
- this.targetElement = document.createElement('div');
4300
- this.targetElement.className = 'dv-drop-target-dropzone';
4301
- this.overlayElement = document.createElement('div');
4302
- this.overlayElement.className = 'dv-drop-target-selection';
4396
+ const els = createOverlayElements();
4397
+ this.targetElement = els.dropzone;
4398
+ this.overlayElement = els.selection;
4303
4399
  this._state = 'center';
4304
- this.targetElement.appendChild(this.overlayElement);
4305
4400
  target.classList.add('dv-drop-target');
4306
4401
  target.append(this.targetElement);
4307
- // this.overlayElement.style.opacity = '0';
4308
- // requestAnimationFrame(() => {
4309
- // if (this.overlayElement) {
4310
- // this.overlayElement.style.opacity = '';
4311
- // }
4312
- // });
4313
4402
  }
4314
4403
  this.toggleClasses(quadrant, width, height);
4315
4404
  this._state = quadrant;
@@ -4379,166 +4468,29 @@
4379
4468
  return typeof value === 'boolean' && value;
4380
4469
  }
4381
4470
  toggleClasses(quadrant, width, height) {
4382
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
4471
+ var _a, _b, _c, _d, _e;
4383
4472
  const target = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
4384
- if (!target && !this.overlayElement) {
4385
- return;
4386
- }
4387
- const smallWidthBoundary = (_d = (_c = this.options.overlayModel) === null || _c === void 0 ? void 0 : _c.smallWidthBoundary) !== null && _d !== void 0 ? _d : SMALL_WIDTH_BOUNDARY;
4388
- const smallHeightBoundary = (_f = (_e = this.options.overlayModel) === null || _e === void 0 ? void 0 : _e.smallHeightBoundary) !== null && _f !== void 0 ? _f : SMALL_HEIGHT_BOUNDARY;
4389
- const isSmallX = width < smallWidthBoundary;
4390
- const isSmallY = height < smallHeightBoundary;
4391
- const isLeft = quadrant === 'left';
4392
- const isRight = quadrant === 'right';
4393
- const isTop = quadrant === 'top';
4394
- const isBottom = quadrant === 'bottom';
4395
- const rightClass = !isSmallX && isRight;
4396
- const leftClass = !isSmallX && isLeft;
4397
- const topClass = !isSmallY && isTop;
4398
- const bottomClass = !isSmallY && isBottom;
4399
- let size = 1;
4400
- const sizeOptions = (_h = (_g = this.options.overlayModel) === null || _g === void 0 ? void 0 : _g.size) !== null && _h !== void 0 ? _h : DEFAULT_SIZE;
4401
- if (sizeOptions.type === 'percentage') {
4402
- size = clamp(sizeOptions.value, 0, 100) / 100;
4403
- }
4404
- else {
4405
- if (rightClass || leftClass) {
4406
- size = clamp(0, sizeOptions.value, width) / width;
4407
- }
4408
- if (topClass || bottomClass) {
4409
- size = clamp(0, sizeOptions.value, height) / height;
4410
- }
4411
- }
4412
4473
  if (target) {
4413
- const outlineEl = (_l = (_k = (_j = this.options).getOverlayOutline) === null || _k === void 0 ? void 0 : _k.call(_j)) !== null && _l !== void 0 ? _l : this.element;
4414
- const elBox = outlineEl.getBoundingClientRect();
4415
- const ta = target.getElements(undefined, outlineEl);
4416
- const el = ta.root;
4417
- const overlay = ta.overlay;
4418
- const bigbox = el.getBoundingClientRect();
4419
- const rootTop = elBox.top - bigbox.top;
4420
- const rootLeft = elBox.left - bigbox.left;
4421
- const box = {
4422
- top: rootTop,
4423
- left: rootLeft,
4424
- width: width,
4425
- height: height,
4426
- };
4427
- if (rightClass) {
4428
- box.left = rootLeft + width * (1 - size);
4429
- box.width = width * size;
4430
- }
4431
- else if (leftClass) {
4432
- box.width = width * size;
4433
- }
4434
- else if (topClass) {
4435
- box.height = height * size;
4436
- }
4437
- else if (bottomClass) {
4438
- box.top = rootTop + height * (1 - size);
4439
- box.height = height * size;
4440
- }
4441
- if (isSmallX && isLeft) {
4442
- box.width = 4;
4443
- }
4444
- if (isSmallX && isRight) {
4445
- box.left = rootLeft + width - 4;
4446
- box.width = 4;
4447
- }
4448
- if (isSmallY && isTop) {
4449
- box.height = 4;
4450
- }
4451
- if (isSmallY && isBottom) {
4452
- box.top = rootTop + height - 4;
4453
- box.height = 4;
4454
- }
4455
- // Use GPU-optimized bounds checking and setting
4456
- if (!checkBoundsChanged(overlay, box)) {
4457
- return;
4458
- }
4459
- setGPUOptimizedBounds(overlay, box);
4460
- overlay.className = `dv-drop-target-anchor${this.options.className ? ` ${this.options.className}` : ''}`;
4461
- toggleClass(overlay, 'dv-drop-target-left', isLeft);
4462
- toggleClass(overlay, 'dv-drop-target-right', isRight);
4463
- toggleClass(overlay, 'dv-drop-target-top', isTop);
4464
- toggleClass(overlay, 'dv-drop-target-bottom', isBottom);
4465
- toggleClass(overlay, 'dv-drop-target-anchor-line', (isSmallX && (isLeft || isRight)) ||
4466
- (isSmallY && (isTop || isBottom)));
4467
- toggleClass(overlay, 'dv-drop-target-center', quadrant === 'center');
4468
- if (ta.changed) {
4469
- toggleClass(overlay, 'dv-drop-target-anchor-container-changed', true);
4470
- setTimeout(() => {
4471
- toggleClass(overlay, 'dv-drop-target-anchor-container-changed', false);
4472
- }, 10);
4473
- }
4474
+ const outlineEl = (_e = (_d = (_c = this.options).getOverlayOutline) === null || _d === void 0 ? void 0 : _d.call(_c)) !== null && _e !== void 0 ? _e : this.element;
4475
+ renderAnchoredOverlay({
4476
+ outlineElement: outlineEl,
4477
+ targetModel: target,
4478
+ quadrant,
4479
+ width,
4480
+ height,
4481
+ overlayModel: this.options.overlayModel,
4482
+ className: this.options.className,
4483
+ });
4474
4484
  return;
4475
4485
  }
4476
4486
  if (!this.overlayElement) {
4477
4487
  return;
4478
4488
  }
4479
- const box = { top: '0px', left: '0px', width: '100%', height: '100%' };
4480
- /**
4481
- * You can also achieve the overlay placement using the transform CSS property
4482
- * to translate and scale the element however this has the undesired effect of
4483
- * 'skewing' the element. Comment left here for anybody that ever revisits this.
4484
- *
4485
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/transform
4486
- *
4487
- * right
4488
- * translateX(${100 * (1 - size) / 2}%) scaleX(${scale})
4489
- *
4490
- * left
4491
- * translateX(-${100 * (1 - size) / 2}%) scaleX(${scale})
4492
- *
4493
- * top
4494
- * translateY(-${100 * (1 - size) / 2}%) scaleY(${scale})
4495
- *
4496
- * bottom
4497
- * translateY(${100 * (1 - size) / 2}%) scaleY(${scale})
4498
- */
4499
- if (rightClass) {
4500
- box.left = `${100 * (1 - size)}%`;
4501
- box.width = `${100 * size}%`;
4502
- }
4503
- else if (leftClass) {
4504
- box.width = `${100 * size}%`;
4505
- }
4506
- else if (topClass) {
4507
- box.height = `${100 * size}%`;
4508
- }
4509
- else if (bottomClass) {
4510
- box.top = `${100 * (1 - size)}%`;
4511
- box.height = `${100 * size}%`;
4512
- }
4513
- if (isSmallX && isLeft) {
4514
- box.width = '4px';
4515
- }
4516
- if (isSmallX && isRight) {
4517
- box.left = `${width - 4}px`;
4518
- box.width = '4px';
4519
- }
4520
- if (isSmallY && isTop) {
4521
- box.height = '4px';
4522
- }
4523
- if (isSmallY && isBottom) {
4524
- box.top = `${height - 4}px`;
4525
- box.height = '4px';
4526
- }
4527
- setGPUOptimizedBoundsFromStrings(this.overlayElement, box);
4528
- const isLine = (isSmallX && (isLeft || isRight)) ||
4529
- (isSmallY && (isTop || isBottom));
4530
- toggleClass(this.overlayElement, 'dv-drop-target-small-vertical', isSmallY);
4531
- toggleClass(this.overlayElement, 'dv-drop-target-small-horizontal', isSmallX);
4532
- toggleClass(this.overlayElement, 'dv-drop-target-selection-line', isLine);
4533
- toggleClass(this.overlayElement, 'dv-drop-target-left', isLeft);
4534
- toggleClass(this.overlayElement, 'dv-drop-target-right', isRight);
4535
- toggleClass(this.overlayElement, 'dv-drop-target-top', isTop);
4536
- toggleClass(this.overlayElement, 'dv-drop-target-bottom', isBottom);
4537
- toggleClass(this.overlayElement, 'dv-drop-target-center', quadrant === 'center');
4489
+ renderInPlaceOverlay(this.overlayElement, quadrant, width, height, this.options.overlayModel);
4538
4490
  }
4539
4491
  calculateQuadrant(overlayType, x, y, width, height) {
4540
4492
  var _a, _b;
4541
- const activationSizeOptions = (_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.activationSize) !== null && _b !== void 0 ? _b : DEFAULT_ACTIVATION_SIZE;
4493
+ const activationSizeOptions = (_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.activationSize) !== null && _b !== void 0 ? _b : DEFAULT_ACTIVATION_SIZE$1;
4542
4494
  const isPercentage = activationSizeOptions.type === 'percentage';
4543
4495
  if (isPercentage) {
4544
4496
  return calculateQuadrantAsPercentage(overlayType, x, y, width, height, activationSizeOptions.value);
@@ -4596,129 +4548,846 @@
4596
4548
  return 'center';
4597
4549
  }
4598
4550
 
4599
- const PROPERTY_KEYS_PANEVIEW = (() => {
4600
- /**
4601
- * by readong the keys from an empty value object TypeScript will error
4602
- * when we add or remove new properties to `DockviewOptions`
4603
- */
4604
- const properties = {
4605
- disableAutoResizing: undefined,
4606
- disableDnd: undefined,
4607
- className: undefined,
4608
- };
4609
- return Object.keys(properties);
4610
- })();
4611
- class PaneviewUnhandledDragOverEvent extends AcceptableEvent {
4612
- constructor(nativeEvent, position, getData, panel) {
4613
- super();
4614
- this.nativeEvent = nativeEvent;
4615
- this.position = position;
4616
- this.getData = getData;
4617
- this.panel = panel;
4618
- }
4551
+ function addGhostImage(dataTransfer, ghostElement, options) {
4552
+ var _a, _b;
4553
+ // class dockview provides to force ghost image to be drawn on a different layer and prevent weird rendering issues
4554
+ addClasses(ghostElement, 'dv-dragged');
4555
+ // move the element off-screen initially otherwise it may in some cases be rendered at (0,0) momentarily
4556
+ ghostElement.style.top = '-9999px';
4557
+ document.body.appendChild(ghostElement);
4558
+ dataTransfer.setDragImage(ghostElement, (_a = options === null || options === void 0 ? void 0 : options.x) !== null && _a !== void 0 ? _a : 0, (_b = options === null || options === void 0 ? void 0 : options.y) !== null && _b !== void 0 ? _b : 0);
4559
+ setTimeout(() => {
4560
+ removeClasses(ghostElement, 'dv-dragged');
4561
+ ghostElement.remove();
4562
+ }, 0);
4619
4563
  }
4620
4564
 
4621
- class WillFocusEvent extends DockviewEvent {
4622
- constructor() {
4623
- super();
4624
- }
4625
- }
4626
4565
  /**
4627
- * A core api implementation that should be used across all panel-like objects
4566
+ * Singleton — only one pointer-driven drag active at a time.
4567
+ *
4568
+ * State is shared across every Dockview instance on the page. Targets
4569
+ * from instance B receive hit-tests from drags originating in instance A;
4570
+ * that's intentional for cross-instance drops since `LocalSelectionTransfer`
4571
+ * is also process-wide. The corollary is that every Tabs subscriber to
4572
+ * `onDragMove` fires for every pointer drag globally — each subscriber
4573
+ * hit-tests against its own DOM, so this is O(N) per pointermove where N
4574
+ * is the number of registered listeners across all instances.
4628
4575
  */
4629
- class PanelApiImpl extends CompositeDisposable {
4630
- get isFocused() {
4631
- return this._isFocused;
4632
- }
4633
- get isActive() {
4634
- return this._isActive;
4635
- }
4636
- get isVisible() {
4637
- return this._isVisible;
4638
- }
4639
- get width() {
4640
- return this._width;
4641
- }
4642
- get height() {
4643
- return this._height;
4576
+ class PointerDragController extends CompositeDisposable {
4577
+ static getInstance() {
4578
+ if (!PointerDragController._instance) {
4579
+ PointerDragController._instance = new PointerDragController();
4580
+ }
4581
+ return PointerDragController._instance;
4644
4582
  }
4645
- constructor(id, component) {
4583
+ constructor() {
4646
4584
  super();
4647
- this.id = id;
4648
- this.component = component;
4649
- this._isFocused = false;
4650
- this._isActive = false;
4651
- this._isVisible = true;
4652
- this._width = 0;
4653
- this._height = 0;
4654
- this._parameters = {};
4655
- this.panelUpdatesDisposable = new MutableDisposable();
4656
- this._onDidDimensionChange = new Emitter();
4657
- this.onDidDimensionsChange = this._onDidDimensionChange.event;
4658
- this._onDidChangeFocus = new Emitter();
4659
- this.onDidFocusChange = this._onDidChangeFocus.event;
4660
- //
4661
- this._onWillFocus = new Emitter();
4662
- this.onWillFocus = this._onWillFocus.event;
4663
- //
4664
- this._onDidVisibilityChange = new Emitter();
4665
- this.onDidVisibilityChange = this._onDidVisibilityChange.event;
4666
- this._onWillVisibilityChange = new Emitter();
4667
- this.onWillVisibilityChange = this._onWillVisibilityChange.event;
4668
- this._onDidActiveChange = new Emitter();
4669
- this.onDidActiveChange = this._onDidActiveChange.event;
4670
- this._onActiveChange = new Emitter();
4671
- this.onActiveChange = this._onActiveChange.event;
4672
- this._onDidParametersChange = new Emitter();
4673
- this.onDidParametersChange = this._onDidParametersChange.event;
4674
- this.addDisposables(this.onDidFocusChange((event) => {
4675
- this._isFocused = event.isFocused;
4676
- }), this.onDidActiveChange((event) => {
4677
- this._isActive = event.isActive;
4678
- }), this.onDidVisibilityChange((event) => {
4679
- this._isVisible = event.isVisible;
4680
- }), this.onDidDimensionsChange((event) => {
4681
- this._width = event.width;
4682
- this._height = event.height;
4683
- }), this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onWillFocus, this._onActiveChange, this._onWillFocus, this._onWillVisibilityChange, this._onDidParametersChange);
4585
+ this._targets = new Set();
4586
+ /** Kept in sync with `_targets` so hit-testing is allocation-free. */
4587
+ this._targetByElement = new Map();
4588
+ this._onDragStart = new Emitter();
4589
+ this.onDragStart = this._onDragStart.event;
4590
+ this._onDragMove = new Emitter();
4591
+ this.onDragMove = this._onDragMove.event;
4592
+ this._onDragEnd = new Emitter();
4593
+ this.onDragEnd = this._onDragEnd.event;
4594
+ this.addDisposables(this._onDragStart, this._onDragMove, this._onDragEnd);
4684
4595
  }
4685
- getParameters() {
4686
- return this._parameters;
4596
+ get active() {
4597
+ return this._active;
4687
4598
  }
4688
- initialize(panel) {
4689
- this.panelUpdatesDisposable.value = this._onDidParametersChange.event((parameters) => {
4690
- this._parameters = parameters;
4691
- panel.update({
4692
- params: parameters,
4693
- });
4599
+ registerTarget(target) {
4600
+ this._targets.add(target);
4601
+ this._targetByElement.set(target.element, target);
4602
+ return {
4603
+ dispose: () => {
4604
+ this._targets.delete(target);
4605
+ if (this._targetByElement.get(target.element) === target) {
4606
+ this._targetByElement.delete(target.element);
4607
+ }
4608
+ if (this._currentTarget === target) {
4609
+ this._currentTarget = undefined;
4610
+ }
4611
+ },
4612
+ };
4613
+ }
4614
+ beginDrag(args) {
4615
+ var _a, _b, _c;
4616
+ if (this._active) {
4617
+ this.cancel();
4618
+ }
4619
+ const { pointerEvent, source } = args;
4620
+ // Call `getData()` before mutating controller state — a throw
4621
+ // here would otherwise leave `_active` populated with no window
4622
+ // listeners installed, blocking every subsequent drag.
4623
+ const dataDisposable = args.getData();
4624
+ this._active = {
4625
+ pointerId: pointerEvent.pointerId,
4626
+ startX: pointerEvent.clientX,
4627
+ startY: pointerEvent.clientY,
4628
+ source,
4629
+ };
4630
+ this._onDragMoveCallback = args.onDragMove;
4631
+ this._onDragEndCallback = args.onDragEnd;
4632
+ this._dataDisposable = dataDisposable;
4633
+ this._ghost = args.ghost;
4634
+ // Iframes capture pointermove once the cursor crosses into them,
4635
+ // which would freeze the drag from the parent window's POV.
4636
+ this._iframeShield = disableIframePointEvents((_a = source.ownerDocument) !== null && _a !== void 0 ? _a : document);
4637
+ const startEvent = {
4638
+ clientX: pointerEvent.clientX,
4639
+ clientY: pointerEvent.clientY,
4640
+ pointerEvent,
4641
+ };
4642
+ this._onDragStart.fire(startEvent);
4643
+ // Source's owning window — popout drags fire on their own window,
4644
+ // not the main one.
4645
+ const targetWindow = (_c = (_b = source.ownerDocument) === null || _b === void 0 ? void 0 : _b.defaultView) !== null && _c !== void 0 ? _c : window;
4646
+ this._moveListener = addDisposableListener(targetWindow, 'pointermove', (e) => {
4647
+ if (!this._active || e.pointerId !== this._active.pointerId) {
4648
+ return;
4649
+ }
4650
+ this._handleMove(e);
4651
+ });
4652
+ this._upListener = addDisposableListener(targetWindow, 'pointerup', (e) => {
4653
+ if (!this._active || e.pointerId !== this._active.pointerId) {
4654
+ return;
4655
+ }
4656
+ this._handleEnd(e, true);
4657
+ });
4658
+ this._cancelListener = addDisposableListener(targetWindow, 'pointercancel', (e) => {
4659
+ if (!this._active || e.pointerId !== this._active.pointerId) {
4660
+ return;
4661
+ }
4662
+ this._handleEnd(e, false);
4694
4663
  });
4695
4664
  }
4696
- setVisible(isVisible) {
4697
- this._onWillVisibilityChange.fire({ isVisible });
4665
+ cancel() {
4666
+ var _a, _b;
4667
+ if (!this._active) {
4668
+ return;
4669
+ }
4670
+ (_a = this._currentTarget) === null || _a === void 0 ? void 0 : _a.handleDragLeave();
4671
+ this._teardown();
4672
+ (_b = this._dataDisposable) === null || _b === void 0 ? void 0 : _b.dispose();
4673
+ this._dataDisposable = undefined;
4698
4674
  }
4699
- setActive() {
4700
- this._onActiveChange.fire();
4675
+ _findTargetUnder(x, y) {
4676
+ var _a, _b;
4677
+ // `elementsFromPoint` is topmost-first; walk up to find the closest
4678
+ // registered ancestor (so a tab beats the layout-root that contains it).
4679
+ // Use the source's owning document so popout drags hit their own targets.
4680
+ const sourceDoc = (_b = (_a = this._active) === null || _a === void 0 ? void 0 : _a.source.ownerDocument) !== null && _b !== void 0 ? _b : document;
4681
+ const elements = sourceDoc.elementsFromPoint(x, y);
4682
+ for (const el of elements) {
4683
+ let current = el;
4684
+ while (current) {
4685
+ const target = this._targetByElement.get(current);
4686
+ if (target) {
4687
+ return target;
4688
+ }
4689
+ current = current.parentElement;
4690
+ }
4691
+ }
4692
+ return undefined;
4701
4693
  }
4702
- updateParameters(parameters) {
4703
- this._onDidParametersChange.fire(parameters);
4694
+ _handleMove(e) {
4695
+ var _a, _b, _c;
4696
+ (_a = this._ghost) === null || _a === void 0 ? void 0 : _a.update(e.clientX, e.clientY);
4697
+ const dragEvent = {
4698
+ clientX: e.clientX,
4699
+ clientY: e.clientY,
4700
+ pointerEvent: e,
4701
+ };
4702
+ const newTarget = this._findTargetUnder(e.clientX, e.clientY);
4703
+ if (newTarget !== this._currentTarget) {
4704
+ (_b = this._currentTarget) === null || _b === void 0 ? void 0 : _b.handleDragLeave();
4705
+ this._currentTarget = newTarget;
4706
+ }
4707
+ if (newTarget) {
4708
+ newTarget.handleDragOver(dragEvent);
4709
+ }
4710
+ (_c = this._onDragMoveCallback) === null || _c === void 0 ? void 0 : _c.call(this, dragEvent);
4711
+ this._onDragMove.fire(dragEvent);
4712
+ }
4713
+ _handleEnd(e, dropped) {
4714
+ var _a;
4715
+ const dragEvent = {
4716
+ clientX: e.clientX,
4717
+ clientY: e.clientY,
4718
+ pointerEvent: e,
4719
+ };
4720
+ if (dropped && this._currentTarget) {
4721
+ this._currentTarget.handleDrop(dragEvent);
4722
+ }
4723
+ else {
4724
+ (_a = this._currentTarget) === null || _a === void 0 ? void 0 : _a.handleDragLeave();
4725
+ }
4726
+ const onEnd = this._onDragEndCallback;
4727
+ const dataDisposable = this._dataDisposable;
4728
+ this._teardown();
4729
+ this._dataDisposable = undefined;
4730
+ // Defer disposal so drop handlers can still read the transfer data.
4731
+ setTimeout(() => dataDisposable === null || dataDisposable === void 0 ? void 0 : dataDisposable.dispose(), 0);
4732
+ onEnd === null || onEnd === void 0 ? void 0 : onEnd(dragEvent, dropped);
4733
+ this._onDragEnd.fire(dragEvent);
4734
+ }
4735
+ _teardown() {
4736
+ var _a, _b, _c, _d, _e;
4737
+ this._currentTarget = undefined;
4738
+ this._active = undefined;
4739
+ this._onDragMoveCallback = undefined;
4740
+ this._onDragEndCallback = undefined;
4741
+ (_a = this._ghost) === null || _a === void 0 ? void 0 : _a.dispose();
4742
+ this._ghost = undefined;
4743
+ (_b = this._iframeShield) === null || _b === void 0 ? void 0 : _b.release();
4744
+ this._iframeShield = undefined;
4745
+ (_c = this._moveListener) === null || _c === void 0 ? void 0 : _c.dispose();
4746
+ (_d = this._upListener) === null || _d === void 0 ? void 0 : _d.dispose();
4747
+ (_e = this._cancelListener) === null || _e === void 0 ? void 0 : _e.dispose();
4748
+ this._moveListener = undefined;
4749
+ this._upListener = undefined;
4750
+ this._cancelListener = undefined;
4704
4751
  }
4705
4752
  }
4706
4753
 
4707
- class SplitviewPanelApiImpl extends PanelApiImpl {
4708
- //
4709
- constructor(id, component) {
4710
- super(id, component);
4711
- this._onDidConstraintsChangeInternal = new Emitter();
4712
- this.onDidConstraintsChangeInternal = this._onDidConstraintsChangeInternal.event;
4713
- //
4714
- this._onDidConstraintsChange = new Emitter({
4715
- replay: true,
4716
- });
4717
- this.onDidConstraintsChange = this._onDidConstraintsChange.event;
4718
- //
4719
- this._onDidSizeChange = new Emitter();
4720
- this.onDidSizeChange = this._onDidSizeChange.event;
4721
- this.addDisposables(this._onDidConstraintsChangeInternal, this._onDidConstraintsChange, this._onDidSizeChange);
4754
+ const DEFAULT_ACTIVATION_SIZE = {
4755
+ value: 20,
4756
+ type: 'percentage',
4757
+ };
4758
+ /** Pointer-driven counterpart to `Droptarget` with identical visual output. */
4759
+ class PointerDropTarget extends CompositeDisposable {
4760
+ get disabled() {
4761
+ return this._disabled;
4762
+ }
4763
+ set disabled(value) {
4764
+ this._disabled = value;
4765
+ if (value) {
4766
+ this._removeOverlay();
4767
+ }
4768
+ }
4769
+ get state() {
4770
+ return this._state;
4771
+ }
4772
+ constructor(element, options) {
4773
+ super();
4774
+ this.element = element;
4775
+ this.options = options;
4776
+ this._onDrop = new Emitter();
4777
+ this.onDrop = this._onDrop.event;
4778
+ this._onWillShowOverlay = new Emitter();
4779
+ this.onWillShowOverlay = this._onWillShowOverlay.event;
4780
+ this._disabled = false;
4781
+ this._acceptedTargetZonesSet = new Set(options.acceptedTargetZones);
4782
+ const handle = {
4783
+ element: this.element,
4784
+ handleDragOver: (e) => this._onDragOver(e),
4785
+ handleDragLeave: () => this._onDragLeave(),
4786
+ handleDrop: (e) => this._onDropEvent(e),
4787
+ };
4788
+ this.addDisposables(this._onDrop, this._onWillShowOverlay, PointerDragController.getInstance().registerTarget(handle));
4789
+ }
4790
+ setTargetZones(zones) {
4791
+ this._acceptedTargetZonesSet = new Set(zones);
4792
+ }
4793
+ setOverlayModel(model) {
4794
+ this.options.overlayModel = model;
4795
+ }
4796
+ dispose() {
4797
+ this._removeOverlay();
4798
+ super.dispose();
4799
+ }
4800
+ _onDragOver(event) {
4801
+ var _a, _b, _c, _d, _e;
4802
+ if (this._disabled) {
4803
+ this._removeOverlay();
4804
+ return;
4805
+ }
4806
+ const overrideTarget = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
4807
+ if (this._acceptedTargetZonesSet.size === 0) {
4808
+ if (overrideTarget) {
4809
+ return;
4810
+ }
4811
+ this._removeOverlay();
4812
+ return;
4813
+ }
4814
+ const outlineEl = (_e = (_d = (_c = this.options).getOverlayOutline) === null || _d === void 0 ? void 0 : _d.call(_c)) !== null && _e !== void 0 ? _e : this.element;
4815
+ const width = outlineEl.offsetWidth;
4816
+ const height = outlineEl.offsetHeight;
4817
+ if (width === 0 || height === 0) {
4818
+ return;
4819
+ }
4820
+ const rect = outlineEl.getBoundingClientRect();
4821
+ const x = event.clientX - rect.left;
4822
+ const y = event.clientY - rect.top;
4823
+ const quadrant = this._calculateQuadrant(x, y, width, height);
4824
+ if (quadrant === null) {
4825
+ this._removeOverlay();
4826
+ return;
4827
+ }
4828
+ if (!this.options.canDisplayOverlay(event.pointerEvent, quadrant)) {
4829
+ if (overrideTarget) {
4830
+ return;
4831
+ }
4832
+ this._removeOverlay();
4833
+ return;
4834
+ }
4835
+ const willShow = new WillShowOverlayEvent({
4836
+ nativeEvent: event.pointerEvent,
4837
+ position: quadrant,
4838
+ });
4839
+ this._onWillShowOverlay.fire(willShow);
4840
+ if (willShow.defaultPrevented) {
4841
+ this._removeOverlay();
4842
+ return;
4843
+ }
4844
+ if (overrideTarget) {
4845
+ renderAnchoredOverlay({
4846
+ outlineElement: outlineEl,
4847
+ targetModel: overrideTarget,
4848
+ quadrant,
4849
+ width,
4850
+ height,
4851
+ overlayModel: this.options.overlayModel,
4852
+ className: this.options.className,
4853
+ });
4854
+ this._state = quadrant;
4855
+ return;
4856
+ }
4857
+ if (!this._targetElement) {
4858
+ const els = createOverlayElements();
4859
+ this._targetElement = els.dropzone;
4860
+ this._overlayElement = els.selection;
4861
+ this._state = 'center';
4862
+ this.element.classList.add('dv-drop-target');
4863
+ this.element.append(this._targetElement);
4864
+ }
4865
+ if (this._overlayElement) {
4866
+ renderInPlaceOverlay(this._overlayElement, quadrant, width, height, this.options.overlayModel);
4867
+ }
4868
+ this._state = quadrant;
4869
+ }
4870
+ _onDragLeave() {
4871
+ var _a, _b;
4872
+ const overrideTarget = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
4873
+ // Anchor target owns its own lifecycle; just clear our latched
4874
+ // state so a subsequent pointerup doesn't fire a stale drop.
4875
+ if (overrideTarget) {
4876
+ this._state = undefined;
4877
+ overrideTarget.clear();
4878
+ return;
4879
+ }
4880
+ this._removeOverlay();
4881
+ }
4882
+ _onDropEvent(event) {
4883
+ var _a, _b;
4884
+ const state = this._state;
4885
+ const overrideTarget = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
4886
+ this._removeOverlay();
4887
+ overrideTarget === null || overrideTarget === void 0 ? void 0 : overrideTarget.clear();
4888
+ if (state) {
4889
+ this._onDrop.fire({
4890
+ position: state,
4891
+ nativeEvent: event.pointerEvent,
4892
+ });
4893
+ }
4894
+ }
4895
+ _calculateQuadrant(x, y, width, height) {
4896
+ var _a, _b;
4897
+ const activation = (_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.activationSize) !== null && _b !== void 0 ? _b : DEFAULT_ACTIVATION_SIZE;
4898
+ if (activation.type === 'percentage') {
4899
+ return calculateQuadrantAsPercentage(this._acceptedTargetZonesSet, x, y, width, height, activation.value);
4900
+ }
4901
+ return calculateQuadrantAsPixels(this._acceptedTargetZonesSet, x, y, width, height, activation.value);
4902
+ }
4903
+ _removeOverlay() {
4904
+ var _a;
4905
+ if (this._targetElement) {
4906
+ this._state = undefined;
4907
+ (_a = this._targetElement.parentElement) === null || _a === void 0 ? void 0 : _a.classList.remove('dv-drop-target');
4908
+ this._targetElement.remove();
4909
+ this._targetElement = undefined;
4910
+ this._overlayElement = undefined;
4911
+ }
4912
+ else {
4913
+ this._state = undefined;
4914
+ }
4915
+ }
4916
+ }
4917
+
4918
+ const DEFAULT_THRESHOLD = 5;
4919
+ const DEFAULT_TOUCH_INITIATION_DELAY = 250;
4920
+ const DEFAULT_PRESS_TOLERANCE = 8;
4921
+ /**
4922
+ * Pointer-event drag source. Waits for movement past `threshold` (and
4923
+ * touch-only `touchInitiationDelay`) before promoting to a drag so taps
4924
+ * pass through unaffected.
4925
+ */
4926
+ class PointerDragSource extends CompositeDisposable {
4927
+ constructor(element, options) {
4928
+ var _a;
4929
+ super();
4930
+ this.element = element;
4931
+ this.options = options;
4932
+ this._disabled = false;
4933
+ this._armed = false;
4934
+ this._startX = 0;
4935
+ this._startY = 0;
4936
+ this._touchOnly = (_a = options.touchOnly) !== null && _a !== void 0 ? _a : true;
4937
+ this.addDisposables(addDisposableListener(this.element, 'pointerdown', (e) => {
4938
+ this._onPointerDown(e);
4939
+ }));
4940
+ }
4941
+ setDisabled(value) {
4942
+ this._disabled = value;
4943
+ if (value) {
4944
+ this._cancelPending();
4945
+ }
4946
+ }
4947
+ /**
4948
+ * `false` lets the pointer source also handle mouse pointers; used when
4949
+ * `dndStrategy: 'pointer'` to drive every input type through this path.
4950
+ */
4951
+ setTouchOnly(value) {
4952
+ if (this._touchOnly === value) {
4953
+ return;
4954
+ }
4955
+ this._touchOnly = value;
4956
+ // A pending mouse-tracked drag should be abandoned if we re-enable
4957
+ // the touch-only filter mid-flight.
4958
+ if (value) {
4959
+ this._cancelPending();
4960
+ }
4961
+ }
4962
+ _shouldHandle(event) {
4963
+ var _a, _b;
4964
+ if (this._disabled) {
4965
+ return false;
4966
+ }
4967
+ // Pointer-type filter runs before isCancelled — consumer state read
4968
+ // by isCancelled may not be populated for events we'll never handle.
4969
+ if (this._touchOnly &&
4970
+ event.pointerType !== 'touch' &&
4971
+ event.pointerType !== 'pen') {
4972
+ return false;
4973
+ }
4974
+ if ((_b = (_a = this.options).isCancelled) === null || _b === void 0 ? void 0 : _b.call(_a, event)) {
4975
+ return false;
4976
+ }
4977
+ return true;
4978
+ }
4979
+ _onPointerDown(event) {
4980
+ var _a, _b, _c, _d, _e;
4981
+ if (!this._shouldHandle(event)) {
4982
+ return;
4983
+ }
4984
+ // Defensive: a fresh pointerdown supersedes any in-flight tracking.
4985
+ this._cancelPending();
4986
+ this._pendingPointerId = event.pointerId;
4987
+ this._startX = event.clientX;
4988
+ this._startY = event.clientY;
4989
+ this._startEvent = event;
4990
+ const isTouch = event.pointerType === 'touch' || event.pointerType === 'pen';
4991
+ // Touch waits a short window so a still finger can press-and-hold
4992
+ // before drifting; once the timer fires, any motion past `threshold`
4993
+ // begins the drag.
4994
+ const initiationDelayOpt = this.options.touchInitiationDelay;
4995
+ const initiationDelay = (_a = (typeof initiationDelayOpt === 'function'
4996
+ ? initiationDelayOpt()
4997
+ : initiationDelayOpt)) !== null && _a !== void 0 ? _a : DEFAULT_TOUCH_INITIATION_DELAY;
4998
+ this._armed = !isTouch || initiationDelay <= 0;
4999
+ if (isTouch && initiationDelay > 0 && isFinite(initiationDelay)) {
5000
+ this._armTimer = setTimeout(() => {
5001
+ this._armTimer = undefined;
5002
+ this._armed = true;
5003
+ }, initiationDelay);
5004
+ }
5005
+ const threshold = (_b = this.options.threshold) !== null && _b !== void 0 ? _b : DEFAULT_THRESHOLD;
5006
+ const pressToleranceOpt = this.options.pressTolerance;
5007
+ const pressTolerance = (_c = (typeof pressToleranceOpt === 'function'
5008
+ ? pressToleranceOpt()
5009
+ : pressToleranceOpt)) !== null && _c !== void 0 ? _c : DEFAULT_PRESS_TOLERANCE;
5010
+ // Source's owning window — popout drags fire on their own window.
5011
+ const targetWindow = (_e = (_d = this.element.ownerDocument) === null || _d === void 0 ? void 0 : _d.defaultView) !== null && _e !== void 0 ? _e : window;
5012
+ this._pendingMoveListener = addDisposableListener(targetWindow, 'pointermove', (moveEvent) => {
5013
+ if (moveEvent.pointerId !== this._pendingPointerId) {
5014
+ return;
5015
+ }
5016
+ const dx = moveEvent.clientX - this._startX;
5017
+ const dy = moveEvent.clientY - this._startY;
5018
+ const distance = Math.hypot(dx, dy);
5019
+ if (this._armed) {
5020
+ if (distance >= threshold) {
5021
+ this._beginDrag(moveEvent);
5022
+ }
5023
+ return;
5024
+ }
5025
+ // Pre-arm phase: a flick past `pressTolerance` in any
5026
+ // direction is treated as drag intent. The element opts out
5027
+ // of native scroll via `touch-action: none`; container-level
5028
+ // scrolling lives on the surrounding strip's empty space.
5029
+ if (distance > pressTolerance) {
5030
+ this._beginDrag(moveEvent);
5031
+ }
5032
+ });
5033
+ this._pendingUpListener = addDisposableListener(targetWindow, 'pointerup', (upEvent) => {
5034
+ if (upEvent.pointerId !== this._pendingPointerId) {
5035
+ return;
5036
+ }
5037
+ this._cancelPending();
5038
+ });
5039
+ this._pendingCancelListener = addDisposableListener(targetWindow, 'pointercancel', (cancelEvent) => {
5040
+ if (cancelEvent.pointerId !== this._pendingPointerId) {
5041
+ return;
5042
+ }
5043
+ this._cancelPending();
5044
+ });
5045
+ }
5046
+ /** For sibling gesture detectors (e.g. LongPressDetector) to dismiss a pending drag. */
5047
+ cancelPending() {
5048
+ this._cancelPending();
5049
+ }
5050
+ _cancelPending() {
5051
+ var _a, _b, _c;
5052
+ this._pendingPointerId = undefined;
5053
+ if (this._armTimer !== undefined) {
5054
+ clearTimeout(this._armTimer);
5055
+ this._armTimer = undefined;
5056
+ }
5057
+ this._armed = false;
5058
+ (_a = this._pendingMoveListener) === null || _a === void 0 ? void 0 : _a.dispose();
5059
+ (_b = this._pendingUpListener) === null || _b === void 0 ? void 0 : _b.dispose();
5060
+ (_c = this._pendingCancelListener) === null || _c === void 0 ? void 0 : _c.dispose();
5061
+ this._pendingMoveListener = undefined;
5062
+ this._pendingUpListener = undefined;
5063
+ this._pendingCancelListener = undefined;
5064
+ this._startEvent = undefined;
5065
+ }
5066
+ _beginDrag(triggerEvent) {
5067
+ var _a, _b, _c, _d, _e;
5068
+ const startEvent = (_a = this._startEvent) !== null && _a !== void 0 ? _a : triggerEvent;
5069
+ this._cancelPending();
5070
+ (_c = (_b = this.options).onDragStart) === null || _c === void 0 ? void 0 : _c.call(_b, startEvent);
5071
+ const ghost = (_e = (_d = this.options).createGhost) === null || _e === void 0 ? void 0 : _e.call(_d, startEvent);
5072
+ PointerDragController.getInstance().beginDrag({
5073
+ pointerEvent: triggerEvent,
5074
+ source: this.element,
5075
+ getData: () => this.options.getData(startEvent),
5076
+ ghost,
5077
+ onDragMove: this.options.onDragMove,
5078
+ onDragEnd: this.options.onDragEnd,
5079
+ });
5080
+ }
5081
+ dispose() {
5082
+ this._cancelPending();
5083
+ super.dispose();
5084
+ }
5085
+ }
5086
+
5087
+ /**
5088
+ * Floating clone that follows the pointer; appended to the owning
5089
+ * document's body with `pointer-events: none` so it doesn't intercept
5090
+ * hit-testing.
5091
+ */
5092
+ class PointerGhost {
5093
+ constructor(opts) {
5094
+ var _a, _b, _c, _d, _e;
5095
+ this._disposed = false;
5096
+ this.element = opts.element;
5097
+ this.offsetX = (_a = opts.offsetX) !== null && _a !== void 0 ? _a : 0;
5098
+ this.offsetY = (_b = opts.offsetY) !== null && _b !== void 0 ? _b : 0;
5099
+ // Animate via transform (see update); position:fixed for scroll-independence.
5100
+ this.element.style.position = 'fixed';
5101
+ this.element.style.left = '0px';
5102
+ this.element.style.top = '0px';
5103
+ this.element.style.pointerEvents = 'none';
5104
+ this.element.style.zIndex = '99999';
5105
+ this.element.style.opacity = String((_c = opts.opacity) !== null && _c !== void 0 ? _c : 0.8);
5106
+ this.element.style.willChange = 'transform';
5107
+ this.element.style.transform = `translate3d(${opts.initialX - this.offsetX}px, ${opts.initialY - this.offsetY}px, 0)`;
5108
+ const ownerDocument = (_e = (_d = opts.owner) === null || _d === void 0 ? void 0 : _d.ownerDocument) !== null && _e !== void 0 ? _e : document;
5109
+ ownerDocument.body.appendChild(this.element);
5110
+ }
5111
+ update(clientX, clientY) {
5112
+ if (this._disposed) {
5113
+ return;
5114
+ }
5115
+ // translate3d composites on the GPU — no layout per pointermove.
5116
+ this.element.style.transform = `translate3d(${clientX - this.offsetX}px, ${clientY - this.offsetY}px, 0)`;
5117
+ }
5118
+ dispose() {
5119
+ if (this._disposed) {
5120
+ return;
5121
+ }
5122
+ this._disposed = true;
5123
+ this.element.remove();
5124
+ }
5125
+ }
5126
+
5127
+ /**
5128
+ * HTML5 drag source. Listens for the native `dragstart` event, calls
5129
+ * `getData` to populate transfer, optionally renders the ghost via
5130
+ * `setDragImage`, fires `onDragStart` / `onDragEnd`, and tears down the
5131
+ * transfer disposer after `dragend`.
5132
+ */
5133
+ class Html5DragSource extends CompositeDisposable {
5134
+ constructor(el, opts) {
5135
+ super();
5136
+ this.el = el;
5137
+ this.opts = opts;
5138
+ this._dataDisposable = new MutableDisposable();
5139
+ this._pointerEventsDisposable = new MutableDisposable();
5140
+ this._disabled = !!opts.disabled;
5141
+ this.addDisposables(this._dataDisposable, this._pointerEventsDisposable, addDisposableListener(this.el, 'dragstart', (event) => {
5142
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
5143
+ if (event.defaultPrevented ||
5144
+ this._disabled ||
5145
+ ((_b = (_a = this.opts).isCancelled) === null || _b === void 0 ? void 0 : _b.call(_a, event))) {
5146
+ event.preventDefault();
5147
+ return;
5148
+ }
5149
+ // Iframes capture pointermove once the cursor enters them,
5150
+ // which freezes drag tracking from the parent window's
5151
+ // POV. Shield the source's owning document so popout-window
5152
+ // drags shield the popout, not the main window.
5153
+ const iframes = disableIframePointEvents((_c = this.el.ownerDocument) !== null && _c !== void 0 ? _c : document);
5154
+ this._pointerEventsDisposable.value = {
5155
+ dispose: () => iframes.release(),
5156
+ };
5157
+ this.el.classList.add('dv-dragged');
5158
+ setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
5159
+ this._dataDisposable.value = this.opts.getData(event);
5160
+ const ghost = (_e = (_d = this.opts).createGhost) === null || _e === void 0 ? void 0 : _e.call(_d, event);
5161
+ if (ghost && event.dataTransfer) {
5162
+ addGhostImage(event.dataTransfer, ghost.element, {
5163
+ x: (_f = ghost.offsetX) !== null && _f !== void 0 ? _f : 0,
5164
+ y: (_g = ghost.offsetY) !== null && _g !== void 0 ? _g : 0,
5165
+ });
5166
+ if (ghost.dispose) {
5167
+ // addGhostImage removes the element from the DOM on
5168
+ // the next tick; dispose the framework renderer on
5169
+ // the same schedule.
5170
+ const disposeGhost = ghost.dispose;
5171
+ setTimeout(() => disposeGhost(), 0);
5172
+ }
5173
+ }
5174
+ if (event.dataTransfer) {
5175
+ event.dataTransfer.effectAllowed = 'move';
5176
+ // Some third-party DnD libs (e.g. react-dnd) cancel the
5177
+ // dragstart when `dataTransfer.types` is empty.
5178
+ if (event.dataTransfer.items.length === 0) {
5179
+ event.dataTransfer.setData('text/plain', '');
5180
+ }
5181
+ }
5182
+ (_j = (_h = this.opts).onDragStart) === null || _j === void 0 ? void 0 : _j.call(_h, event);
5183
+ }), addDisposableListener(this.el, 'dragend', (event) => {
5184
+ var _a, _b;
5185
+ this._pointerEventsDisposable.dispose();
5186
+ // Defer disposal so drop handlers can still read the
5187
+ // transfer payload before it clears.
5188
+ setTimeout(() => this._dataDisposable.dispose(), 0);
5189
+ (_b = (_a = this.opts).onDragEnd) === null || _b === void 0 ? void 0 : _b.call(_a, event);
5190
+ }));
5191
+ }
5192
+ setDisabled(value) {
5193
+ this._disabled = value;
5194
+ }
5195
+ setTouchOnly(_) {
5196
+ // No-op — HTML5 path can't filter by pointer type.
5197
+ }
5198
+ cancelPending() {
5199
+ // No-op — HTML5 has no pre-arm phase to cancel.
5200
+ }
5201
+ }
5202
+ class Html5DragBackend {
5203
+ constructor() {
5204
+ this.kind = 'html5';
5205
+ }
5206
+ createDropTarget(element, options) {
5207
+ return new Droptarget(element, options);
5208
+ }
5209
+ createDragSource(element, options) {
5210
+ return new Html5DragSource(element, options);
5211
+ }
5212
+ }
5213
+ class PointerDragBackend {
5214
+ constructor() {
5215
+ this.kind = 'pointer';
5216
+ }
5217
+ createDropTarget(element, options) {
5218
+ return new PointerDropTarget(element, options);
5219
+ }
5220
+ createDragSource(element, options) {
5221
+ const pointerCreateGhost = options.createGhost
5222
+ ? (event) => {
5223
+ const spec = options.createGhost(event);
5224
+ if (!spec) {
5225
+ return undefined;
5226
+ }
5227
+ const ghost = new PointerGhost({
5228
+ element: spec.element,
5229
+ initialX: event.clientX,
5230
+ initialY: event.clientY,
5231
+ offsetX: spec.offsetX,
5232
+ offsetY: spec.offsetY,
5233
+ owner: element,
5234
+ });
5235
+ if (spec.dispose) {
5236
+ const baseDispose = ghost.dispose.bind(ghost);
5237
+ const disposeSpec = spec.dispose;
5238
+ ghost.dispose = () => {
5239
+ baseDispose();
5240
+ disposeSpec();
5241
+ };
5242
+ }
5243
+ return ghost;
5244
+ }
5245
+ : undefined;
5246
+ const source = new PointerDragSource(element, {
5247
+ getData: options.getData,
5248
+ isCancelled: options.isCancelled,
5249
+ onDragStart: options.onDragStart,
5250
+ onDragEnd: options.onDragEnd
5251
+ ? (event) => options.onDragEnd(event.pointerEvent)
5252
+ : undefined,
5253
+ createGhost: pointerCreateGhost,
5254
+ touchOnly: options.touchOnly,
5255
+ touchInitiationDelay: options.touchInitiationDelay,
5256
+ pressTolerance: options.pressTolerance,
5257
+ threshold: options.threshold,
5258
+ });
5259
+ if (options.disabled) {
5260
+ source.setDisabled(true);
5261
+ }
5262
+ return source;
5263
+ }
5264
+ }
5265
+ const html5Backend = new Html5DragBackend();
5266
+ const pointerBackend = new PointerDragBackend();
5267
+
5268
+ const PROPERTY_KEYS_PANEVIEW = (() => {
5269
+ /**
5270
+ * by readong the keys from an empty value object TypeScript will error
5271
+ * when we add or remove new properties to `DockviewOptions`
5272
+ */
5273
+ const properties = {
5274
+ disableAutoResizing: undefined,
5275
+ disableDnd: undefined,
5276
+ className: undefined,
5277
+ };
5278
+ return Object.keys(properties);
5279
+ })();
5280
+ class PaneviewUnhandledDragOverEvent extends AcceptableEvent {
5281
+ constructor(nativeEvent, position, getData, panel) {
5282
+ super();
5283
+ this.nativeEvent = nativeEvent;
5284
+ this.position = position;
5285
+ this.getData = getData;
5286
+ this.panel = panel;
5287
+ }
5288
+ }
5289
+
5290
+ class WillFocusEvent extends DockviewEvent {
5291
+ constructor() {
5292
+ super();
5293
+ }
5294
+ }
5295
+ /**
5296
+ * A core api implementation that should be used across all panel-like objects
5297
+ */
5298
+ class PanelApiImpl extends CompositeDisposable {
5299
+ get isFocused() {
5300
+ return this._isFocused;
5301
+ }
5302
+ get isActive() {
5303
+ return this._isActive;
5304
+ }
5305
+ get isVisible() {
5306
+ return this._isVisible;
5307
+ }
5308
+ get width() {
5309
+ return this._width;
5310
+ }
5311
+ get height() {
5312
+ return this._height;
5313
+ }
5314
+ constructor(id, component) {
5315
+ super();
5316
+ this.id = id;
5317
+ this.component = component;
5318
+ this._isFocused = false;
5319
+ this._isActive = false;
5320
+ this._isVisible = true;
5321
+ this._width = 0;
5322
+ this._height = 0;
5323
+ this._parameters = {};
5324
+ this.panelUpdatesDisposable = new MutableDisposable();
5325
+ this._onDidDimensionChange = new Emitter();
5326
+ this.onDidDimensionsChange = this._onDidDimensionChange.event;
5327
+ this._onDidChangeFocus = new Emitter();
5328
+ this.onDidFocusChange = this._onDidChangeFocus.event;
5329
+ //
5330
+ this._onWillFocus = new Emitter();
5331
+ this.onWillFocus = this._onWillFocus.event;
5332
+ //
5333
+ this._onDidVisibilityChange = new Emitter();
5334
+ this.onDidVisibilityChange = this._onDidVisibilityChange.event;
5335
+ this._onWillVisibilityChange = new Emitter();
5336
+ this.onWillVisibilityChange = this._onWillVisibilityChange.event;
5337
+ this._onDidActiveChange = new Emitter();
5338
+ this.onDidActiveChange = this._onDidActiveChange.event;
5339
+ this._onActiveChange = new Emitter();
5340
+ this.onActiveChange = this._onActiveChange.event;
5341
+ this._onDidParametersChange = new Emitter();
5342
+ this.onDidParametersChange = this._onDidParametersChange.event;
5343
+ this.addDisposables(this.onDidFocusChange((event) => {
5344
+ this._isFocused = event.isFocused;
5345
+ }), this.onDidActiveChange((event) => {
5346
+ this._isActive = event.isActive;
5347
+ }), this.onDidVisibilityChange((event) => {
5348
+ this._isVisible = event.isVisible;
5349
+ }), this.onDidDimensionsChange((event) => {
5350
+ this._width = event.width;
5351
+ this._height = event.height;
5352
+ }), this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onWillFocus, this._onActiveChange, this._onWillFocus, this._onWillVisibilityChange, this._onDidParametersChange);
5353
+ }
5354
+ getParameters() {
5355
+ return this._parameters;
5356
+ }
5357
+ initialize(panel) {
5358
+ this.panelUpdatesDisposable.value = this._onDidParametersChange.event((parameters) => {
5359
+ this._parameters = parameters;
5360
+ panel.update({
5361
+ params: parameters,
5362
+ });
5363
+ });
5364
+ }
5365
+ setVisible(isVisible) {
5366
+ this._onWillVisibilityChange.fire({ isVisible });
5367
+ }
5368
+ setActive() {
5369
+ this._onActiveChange.fire();
5370
+ }
5371
+ updateParameters(parameters) {
5372
+ this._onDidParametersChange.fire(parameters);
5373
+ }
5374
+ }
5375
+
5376
+ class SplitviewPanelApiImpl extends PanelApiImpl {
5377
+ //
5378
+ constructor(id, component) {
5379
+ super(id, component);
5380
+ this._onDidConstraintsChangeInternal = new Emitter();
5381
+ this.onDidConstraintsChangeInternal = this._onDidConstraintsChangeInternal.event;
5382
+ //
5383
+ this._onDidConstraintsChange = new Emitter({
5384
+ replay: true,
5385
+ });
5386
+ this.onDidConstraintsChange = this._onDidConstraintsChange.event;
5387
+ //
5388
+ this._onDidSizeChange = new Emitter();
5389
+ this.onDidSizeChange = this._onDidSizeChange.event;
5390
+ this.addDisposables(this._onDidConstraintsChangeInternal, this._onDidConstraintsChange, this._onDidSizeChange);
4722
5391
  }
4723
5392
  setConstraints(value) {
4724
5393
  this._onDidConstraintsChangeInternal.fire(value);
@@ -5061,35 +5730,42 @@
5061
5730
  const id = this.id;
5062
5731
  const accessorId = this.accessor.id;
5063
5732
  this.header.draggable = true;
5064
- this.handler = new (class PaneDragHandler extends DragHandler {
5065
- getData() {
5733
+ const sharedDragOptions = {
5734
+ getData: () => {
5066
5735
  LocalSelectionTransfer.getInstance().setData([new PaneTransfer(accessorId, id)], PaneTransfer.prototype);
5067
5736
  return {
5068
5737
  dispose: () => {
5069
5738
  LocalSelectionTransfer.getInstance().clearData(PaneTransfer.prototype);
5070
5739
  },
5071
5740
  };
5741
+ },
5742
+ };
5743
+ this.html5DragSource = html5Backend.createDragSource(this.header, sharedDragOptions);
5744
+ this.pointerDragSource = pointerBackend.createDragSource(this.header, sharedDragOptions);
5745
+ const canDisplayOverlay = (event, position) => {
5746
+ const data = getPaneData();
5747
+ if (data) {
5748
+ if (data.paneId !== this.id &&
5749
+ data.viewId === this.accessor.id) {
5750
+ return true;
5751
+ }
5072
5752
  }
5073
- })(this.header);
5074
- this.target = new Droptarget(this.element, {
5753
+ const firedEvent = new PaneviewUnhandledDragOverEvent(event, position, getPaneData, this);
5754
+ this._onUnhandledDragOverEvent.fire(firedEvent);
5755
+ return firedEvent.isAccepted;
5756
+ };
5757
+ const dropTargetOptions = {
5075
5758
  acceptedTargetZones: ['top', 'bottom'],
5076
5759
  overlayModel: {
5077
5760
  activationSize: { type: 'percentage', value: 50 },
5078
5761
  },
5079
- canDisplayOverlay: (event, position) => {
5080
- const data = getPaneData();
5081
- if (data) {
5082
- if (data.paneId !== this.id &&
5083
- data.viewId === this.accessor.id) {
5084
- return true;
5085
- }
5086
- }
5087
- const firedEvent = new PaneviewUnhandledDragOverEvent(event, position, getPaneData, this);
5088
- this._onUnhandledDragOverEvent.fire(firedEvent);
5089
- return firedEvent.isAccepted;
5090
- },
5091
- });
5092
- this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop((event) => {
5762
+ canDisplayOverlay,
5763
+ };
5764
+ this.target = html5Backend.createDropTarget(this.element, dropTargetOptions);
5765
+ this.pointerTarget = pointerBackend.createDropTarget(this.element, dropTargetOptions);
5766
+ this.addDisposables(this._onDidDrop, this.html5DragSource, this.pointerDragSource, this.target, this.pointerTarget, this.target.onDrop((event) => {
5767
+ this.onDrop(event);
5768
+ }), this.pointerTarget.onDrop((event) => {
5093
5769
  this.onDrop(event);
5094
5770
  }));
5095
5771
  }
@@ -5144,6 +5820,25 @@
5144
5820
  this._element.tabIndex = -1;
5145
5821
  this.addDisposables(this._onDidFocus, this._onDidBlur);
5146
5822
  const target = group.dropTargetContainer;
5823
+ const canDisplayOverlay = (event, position) => {
5824
+ if (this.group.locked === 'no-drop-target' ||
5825
+ (this.group.locked && position === 'center')) {
5826
+ return false;
5827
+ }
5828
+ const data = getPanelData();
5829
+ if (!data &&
5830
+ event.shiftKey &&
5831
+ this.group.location.type !== 'floating') {
5832
+ return false;
5833
+ }
5834
+ if (data && data.viewId === this.accessor.id) {
5835
+ return true;
5836
+ }
5837
+ return this.group.canDisplayOverlay(event, position, 'content');
5838
+ };
5839
+ // `dropTarget` stays the concrete `Droptarget` (not via the backend
5840
+ // factory) because overlayRenderContainer forwards HTML5 drag events
5841
+ // through `dropTarget.dnd` — that field is not part of `IDropTarget`.
5147
5842
  this.dropTarget = new Droptarget(this.element, {
5148
5843
  getOverlayOutline: () => {
5149
5844
  var _a;
@@ -5153,25 +5848,22 @@
5153
5848
  },
5154
5849
  className: 'dv-drop-target-content',
5155
5850
  acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
5156
- canDisplayOverlay: (event, position) => {
5157
- if (this.group.locked === 'no-drop-target' ||
5158
- (this.group.locked && position === 'center')) {
5159
- return false;
5160
- }
5161
- const data = getPanelData();
5162
- if (!data &&
5163
- event.shiftKey &&
5164
- this.group.location.type !== 'floating') {
5165
- return false;
5166
- }
5167
- if (data && data.viewId === this.accessor.id) {
5168
- return true;
5169
- }
5170
- return this.group.canDisplayOverlay(event, position, 'content');
5851
+ canDisplayOverlay,
5852
+ getOverrideTarget: target ? () => target.model : undefined,
5853
+ });
5854
+ this.pointerDropTarget = pointerBackend.createDropTarget(this.element, {
5855
+ acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
5856
+ canDisplayOverlay,
5857
+ getOverlayOutline: () => {
5858
+ var _a;
5859
+ return ((_a = accessor.options.theme) === null || _a === void 0 ? void 0 : _a.dndPanelOverlay) === 'group'
5860
+ ? this.element.parentElement
5861
+ : null;
5171
5862
  },
5863
+ className: 'dv-drop-target-content',
5172
5864
  getOverrideTarget: target ? () => target.model : undefined,
5173
5865
  });
5174
- this.addDisposables(this.dropTarget);
5866
+ this.addDisposables(this.dropTarget, this.pointerDropTarget);
5175
5867
  }
5176
5868
  show() {
5177
5869
  this.element.style.display = '';
@@ -5259,37 +5951,169 @@
5259
5951
  }
5260
5952
  }
5261
5953
 
5262
- function addGhostImage(dataTransfer, ghostElement, options) {
5263
- var _a, _b;
5264
- // class dockview provides to force ghost image to be drawn on a different layer and prevent weird rendering issues
5265
- addClasses(ghostElement, 'dv-dragged');
5266
- // move the element off-screen initially otherwise it may in some cases be rendered at (0,0) momentarily
5267
- ghostElement.style.top = '-9999px';
5268
- document.body.appendChild(ghostElement);
5269
- dataTransfer.setDragImage(ghostElement, (_a = options === null || options === void 0 ? void 0 : options.x) !== null && _a !== void 0 ? _a : 0, (_b = options === null || options === void 0 ? void 0 : options.y) !== null && _b !== void 0 ? _b : 0);
5270
- setTimeout(() => {
5271
- removeClasses(ghostElement, 'dv-dragged');
5272
- ghostElement.remove();
5273
- }, 0);
5274
- }
5275
-
5276
- class TabDragHandler extends DragHandler {
5277
- constructor(element, accessor, group, panel, disabled) {
5278
- super(element, disabled);
5279
- this.accessor = accessor;
5280
- this.group = group;
5281
- this.panel = panel;
5282
- this.panelTransfer = LocalSelectionTransfer.getInstance();
5954
+ const DEFAULT_DELAY = 500;
5955
+ const DEFAULT_TOLERANCE = 8;
5956
+ /**
5957
+ * Passive — does not consume the pointer; movement past `tolerance`
5958
+ * cancels silently so a sibling `PointerDragSource` can take over.
5959
+ */
5960
+ class LongPressDetector extends CompositeDisposable {
5961
+ constructor(element, options) {
5962
+ super();
5963
+ this.element = element;
5964
+ this.options = options;
5965
+ this._startX = 0;
5966
+ this._startY = 0;
5967
+ this.addDisposables(addDisposableListener(this.element, 'pointerdown', (e) => {
5968
+ this._onPointerDown(e);
5969
+ }));
5970
+ }
5971
+ _onPointerDown(event) {
5972
+ var _a, _b, _c, _d, _e;
5973
+ const touchOnly = (_a = this.options.touchOnly) !== null && _a !== void 0 ? _a : true;
5974
+ if (touchOnly &&
5975
+ event.pointerType !== 'touch' &&
5976
+ event.pointerType !== 'pen') {
5977
+ return;
5978
+ }
5979
+ // Defensive — supersede any in-flight press.
5980
+ this._cancelPending();
5981
+ this._pointerId = event.pointerId;
5982
+ this._startX = event.clientX;
5983
+ this._startY = event.clientY;
5984
+ const delay = (_b = this.options.delay) !== null && _b !== void 0 ? _b : DEFAULT_DELAY;
5985
+ const tolerance = (_c = this.options.tolerance) !== null && _c !== void 0 ? _c : DEFAULT_TOLERANCE;
5986
+ // Source's owning window — popout drags fire on their own window.
5987
+ const targetWindow = (_e = (_d = this.element.ownerDocument) === null || _d === void 0 ? void 0 : _d.defaultView) !== null && _e !== void 0 ? _e : window;
5988
+ this._timer = setTimeout(() => {
5989
+ this._timer = undefined;
5990
+ this._cancelPending();
5991
+ // Touch browsers synthesize a compatibility `contextmenu` event
5992
+ // for long-press. preventDefault on the original pointerdown is
5993
+ // too late (already dispatched), so install a one-shot
5994
+ // capture-phase guard for the next contextmenu. Without this,
5995
+ // consumers that don't preventDefault inside their onLongPress
5996
+ // (or that early-return before doing so) leak the browser's
5997
+ // native menu on top of theirs.
5998
+ this._installContextMenuGuard(targetWindow);
5999
+ // Same idea for `click`: when the user releases their finger
6000
+ // after the long-press, touch browsers dispatch a `click` to
6001
+ // the element the touch ended on (the source). Consumers
6002
+ // typically wire click to a primary action (e.g. tab activate,
6003
+ // tab-group chip collapse-toggle). Without this guard, the
6004
+ // long-press immediately fires both the context menu AND the
6005
+ // primary action — and the action's side effects (e.g. a chip
6006
+ // collapse animation) read as a screen wobble while the menu
6007
+ // is supposed to be open. Scoped to the source element so
6008
+ // clicks on menu items elsewhere remain effective.
6009
+ this._installClickGuard(targetWindow);
6010
+ this.options.onLongPress(event);
6011
+ }, delay);
6012
+ this._moveListener = addDisposableListener(targetWindow, 'pointermove', (moveEvent) => {
6013
+ if (moveEvent.pointerId !== this._pointerId) {
6014
+ return;
6015
+ }
6016
+ const dx = moveEvent.clientX - this._startX;
6017
+ const dy = moveEvent.clientY - this._startY;
6018
+ if (Math.hypot(dx, dy) > tolerance) {
6019
+ this._cancelPending();
6020
+ }
6021
+ });
6022
+ this._upListener = addDisposableListener(targetWindow, 'pointerup', (upEvent) => {
6023
+ if (upEvent.pointerId !== this._pointerId) {
6024
+ return;
6025
+ }
6026
+ this._cancelPending();
6027
+ });
6028
+ this._cancelListener = addDisposableListener(targetWindow, 'pointercancel', (cancelEvent) => {
6029
+ if (cancelEvent.pointerId !== this._pointerId) {
6030
+ return;
6031
+ }
6032
+ this._cancelPending();
6033
+ });
6034
+ }
6035
+ _installContextMenuGuard(targetWindow) {
6036
+ let guard;
6037
+ const timeout = setTimeout(() => guard === null || guard === void 0 ? void 0 : guard.dispose(), 500);
6038
+ guard = addDisposableListener(targetWindow, 'contextmenu', (event) => {
6039
+ event.preventDefault();
6040
+ clearTimeout(timeout);
6041
+ guard === null || guard === void 0 ? void 0 : guard.dispose();
6042
+ }, { capture: true });
6043
+ }
6044
+ _installClickGuard(targetWindow) {
6045
+ let guard;
6046
+ const timeout = setTimeout(() => guard === null || guard === void 0 ? void 0 : guard.dispose(), 500);
6047
+ guard = addDisposableListener(targetWindow, 'click', (event) => {
6048
+ // Only suppress clicks targeted at the long-pressed element
6049
+ // or its descendants. A user tap on a context menu item (or
6050
+ // anywhere else) still gets through unchanged.
6051
+ const target = event.target;
6052
+ if (target && this.element.contains(target)) {
6053
+ event.preventDefault();
6054
+ event.stopPropagation();
6055
+ }
6056
+ clearTimeout(timeout);
6057
+ guard === null || guard === void 0 ? void 0 : guard.dispose();
6058
+ }, { capture: true });
6059
+ }
6060
+ _cancelPending() {
6061
+ var _a, _b, _c;
6062
+ if (this._timer !== undefined) {
6063
+ clearTimeout(this._timer);
6064
+ this._timer = undefined;
6065
+ }
6066
+ this._pointerId = undefined;
6067
+ (_a = this._moveListener) === null || _a === void 0 ? void 0 : _a.dispose();
6068
+ (_b = this._upListener) === null || _b === void 0 ? void 0 : _b.dispose();
6069
+ (_c = this._cancelListener) === null || _c === void 0 ? void 0 : _c.dispose();
6070
+ this._moveListener = undefined;
6071
+ this._upListener = undefined;
6072
+ this._cancelListener = undefined;
6073
+ }
6074
+ dispose() {
6075
+ this._cancelPending();
6076
+ super.dispose();
6077
+ }
6078
+ }
6079
+
6080
+ function resolveDndCapabilities(options) {
6081
+ if (options.disableDnd) {
6082
+ return { html5: false, pointer: false, pointerHandlesMouse: false };
6083
+ }
6084
+ switch (options.dndStrategy) {
6085
+ case 'pointer':
6086
+ return { html5: false, pointer: true, pointerHandlesMouse: true };
6087
+ case 'html5':
6088
+ return { html5: true, pointer: false, pointerHandlesMouse: false };
6089
+ case 'auto':
6090
+ case undefined:
6091
+ default:
6092
+ // On touch-primary devices (phones / basic tablets) HTML5 DnD's
6093
+ // native long-press intercepts the gesture before our pointer
6094
+ // backend can react — Android Chrome launches a system drag with
6095
+ // its half-transparent thumbnail, and the long-press context menu
6096
+ // never opens. Disable HTML5 there so the pointer backend owns
6097
+ // every gesture. Hybrid devices (touchscreen laptops, Surface,
6098
+ // iPad with mouse) keep both backends — mouse uses HTML5, touch
6099
+ // falls back to whichever backend the underlying element wired.
6100
+ return isCoarsePrimaryInput$2()
6101
+ ? { html5: false, pointer: true, pointerHandlesMouse: true }
6102
+ : { html5: true, pointer: true, pointerHandlesMouse: false };
5283
6103
  }
5284
- getData(event) {
5285
- this.panelTransfer.setData([new PanelTransfer(this.accessor.id, this.group.id, this.panel.id)], PanelTransfer.prototype);
5286
- return {
5287
- dispose: () => {
5288
- this.panelTransfer.clearData(PanelTransfer.prototype);
5289
- },
5290
- };
6104
+ }
6105
+ function isCoarsePrimaryInput$2() {
6106
+ if (typeof window === 'undefined' || !window.matchMedia) {
6107
+ return false;
5291
6108
  }
6109
+ // Coarse pointer without any fine pointer = phone-class device. A laptop
6110
+ // touchscreen reports both, and we want HTML5 to remain available there
6111
+ // because a real mouse is also plugged in.
6112
+ const coarse = window.matchMedia('(pointer: coarse)').matches;
6113
+ const fine = window.matchMedia('(pointer: fine)').matches;
6114
+ return coarse && !fine;
5292
6115
  }
6116
+
5293
6117
  class Tab extends CompositeDisposable {
5294
6118
  get element() {
5295
6119
  return this._element;
@@ -5300,6 +6124,7 @@
5300
6124
  this.accessor = accessor;
5301
6125
  this.group = group;
5302
6126
  this.content = undefined;
6127
+ this.panelTransfer = LocalSelectionTransfer.getInstance();
5303
6128
  this._direction = 'horizontal';
5304
6129
  this._onPointDown = new Emitter();
5305
6130
  this.onPointerDown = this._onPointDown.event;
@@ -5311,114 +6136,106 @@
5311
6136
  this.onDragStart = this._onDragStart.event;
5312
6137
  this._onDragEnd = new Emitter();
5313
6138
  this.onDragEnd = this._onDragEnd.event;
6139
+ const caps = resolveDndCapabilities(this.accessor.options);
5314
6140
  this._element = document.createElement('div');
5315
6141
  this._element.className = 'dv-tab';
5316
6142
  this._element.tabIndex = 0;
5317
- this._element.draggable = !this.accessor.options.disableDnd;
6143
+ this._element.draggable = caps.html5;
5318
6144
  toggleClass(this.element, 'dv-inactive-tab', true);
5319
- this.dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel, !!this.accessor.options.disableDnd);
5320
- this.dropTarget = new Droptarget(this._element, {
6145
+ const canDisplayOverlay = (event, position) => {
6146
+ var _a;
6147
+ if (this.group.locked) {
6148
+ return false;
6149
+ }
6150
+ const data = getPanelData();
6151
+ if (data && this.accessor.id === data.viewId) {
6152
+ // Smooth-reorder takes over the in-flight visual when active,
6153
+ // so individual tab overlays are suppressed for internal drags.
6154
+ if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
6155
+ return false;
6156
+ }
6157
+ return true;
6158
+ }
6159
+ return this.group.model.canDisplayOverlay(event, position, 'tab');
6160
+ };
6161
+ this.dropTarget = html5Backend.createDropTarget(this._element, {
5321
6162
  acceptedTargetZones: ['left', 'right'],
5322
6163
  overlayModel: this._buildOverlayModel(),
5323
- canDisplayOverlay: (event, position) => {
6164
+ canDisplayOverlay,
6165
+ getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
6166
+ });
6167
+ this.pointerDropTarget = pointerBackend.createDropTarget(this._element, {
6168
+ acceptedTargetZones: ['left', 'right'],
6169
+ overlayModel: this._buildOverlayModel(),
6170
+ canDisplayOverlay,
6171
+ getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
6172
+ });
6173
+ const sharedDragOptions = {
6174
+ getData: () => {
6175
+ this.panelTransfer.setData([
6176
+ new PanelTransfer(this.accessor.id, this.group.id, this.panel.id),
6177
+ ], PanelTransfer.prototype);
6178
+ return {
6179
+ dispose: () => {
6180
+ this.panelTransfer.clearData(PanelTransfer.prototype);
6181
+ },
6182
+ };
6183
+ },
6184
+ // 30/-10 matches the HTML5 setDragImage offset that has been
6185
+ // shipped for years; pointer backend wraps in PointerGhost,
6186
+ // HTML5 backend feeds into setDragImage.
6187
+ createGhost: () => ({
6188
+ element: this._buildGhostElement(),
6189
+ offsetX: 30,
6190
+ offsetY: -10,
6191
+ }),
6192
+ onDragStart: (event) => {
5324
6193
  var _a;
5325
- if (this.group.locked) {
5326
- return false;
5327
- }
5328
- const data = getPanelData();
5329
- if (data && this.accessor.id === data.viewId) {
5330
- if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
5331
- // When smooth reorder is enabled, the Tabs
5332
- // container handles all intra-accessor drops
5333
- // (both same-group and cross-group) via
5334
- // animation. Suppress the per-tab overlay so
5335
- // the tab is dropped *beside* rather than *on*.
5336
- return false;
5337
- }
5338
- return true;
6194
+ this._onDragStart.fire(event);
6195
+ if (!(event instanceof PointerEvent) &&
6196
+ ((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
6197
+ // Delay collapse to next frame so the browser
6198
+ // captures the full drag image first.
6199
+ requestAnimationFrame(() => {
6200
+ toggleClass(this.element, 'dv-tab--dragging', true);
6201
+ });
5339
6202
  }
5340
- return this.group.model.canDisplayOverlay(event, position, 'tab');
5341
6203
  },
5342
- getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
5343
- });
5344
- this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
6204
+ onDragEnd: (event) => {
6205
+ this._onDragEnd.fire(event);
6206
+ },
6207
+ };
6208
+ this.html5DragSource = html5Backend.createDragSource(this._element, Object.assign(Object.assign({}, sharedDragOptions), { disabled: !caps.html5 }));
6209
+ this.pointerDragSource = pointerBackend.createDragSource(this._element, Object.assign(Object.assign({}, sharedDragOptions), { disabled: !caps.pointer, touchOnly: !caps.pointerHandlesMouse, isCancelled: () => !resolveDndCapabilities(this.accessor.options).pointer }));
6210
+ // Both droptargets feed the same downstream stream; consumers don't
6211
+ // need to know which path produced the overlay.
6212
+ this.onWillShowOverlay = exports.DockviewEvent.any(this.dropTarget.onWillShowOverlay, this.pointerDropTarget.onWillShowOverlay);
5345
6213
  this.addDisposables(this._onPointDown, this._onTabClick, this._onDropped, this._onDragStart, this._onDragEnd, this.accessor.onDidOptionsChange(() => {
5346
- this.dropTarget.setOverlayModel(this._buildOverlayModel());
5347
- }), this.dragHandler.onDragStart((event) => {
5348
- var _a;
5349
- if (event.dataTransfer) {
5350
- const style = getComputedStyle(this.element);
5351
- const newNode = this.element.cloneNode(true);
5352
- const isVertical = this._direction === 'vertical';
5353
- /**
5354
- * Properties to skip when copying computed styles for a
5355
- * vertical tab ghost. `writing-mode` is excluded so we
5356
- * can force `horizontal-tb`. Size and margin logical
5357
- * properties are excluded because their physical meaning
5358
- * flips when writing-mode changes, which would produce
5359
- * incorrect dimensions.
5360
- */
5361
- const verticalSkip = new Set([
5362
- 'writing-mode',
5363
- 'inline-size',
5364
- 'block-size',
5365
- 'min-inline-size',
5366
- 'min-block-size',
5367
- 'max-inline-size',
5368
- 'max-block-size',
5369
- 'margin-inline',
5370
- 'margin-inline-start',
5371
- 'margin-inline-end',
5372
- 'margin-block',
5373
- 'margin-block-start',
5374
- 'margin-block-end',
5375
- 'padding-inline',
5376
- 'padding-inline-start',
5377
- 'padding-inline-end',
5378
- 'padding-block',
5379
- 'padding-block-start',
5380
- 'padding-block-end',
5381
- ]);
5382
- Array.from(style).forEach((key) => {
5383
- if (isVertical && verticalSkip.has(key)) {
5384
- return;
5385
- }
5386
- newNode.style.setProperty(key, style.getPropertyValue(key), style.getPropertyPriority(key));
5387
- });
5388
- if (isVertical) {
5389
- // Force horizontal text flow and swap the physical
5390
- // dimensions so the ghost appears as a horizontal tab.
5391
- newNode.style.setProperty('writing-mode', 'horizontal-tb');
5392
- newNode.style.setProperty('width', style.height);
5393
- newNode.style.setProperty('height', style.width);
5394
- }
5395
- newNode.style.position = 'absolute';
5396
- newNode.classList.add('dv-tab-ghost-drag');
5397
- addGhostImage(event.dataTransfer, newNode, {
5398
- y: -10,
5399
- x: 30,
5400
- });
5401
- }
5402
- this._onDragStart.fire(event);
5403
- if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
5404
- // Delay collapse to next frame so the browser
5405
- // captures the full drag image first
5406
- requestAnimationFrame(() => {
5407
- toggleClass(this.element, 'dv-tab--dragging', true);
5408
- });
5409
- }
5410
- }), addDisposableListener(this._element, 'dragend', (event) => {
6214
+ const model = this._buildOverlayModel();
6215
+ this.dropTarget.setOverlayModel(model);
6216
+ this.pointerDropTarget.setOverlayModel(model);
6217
+ }), addDisposableListener(this._element, 'dragend', () => {
6218
+ // The shared onDragEnd handler already fires _onDragEnd via
6219
+ // the HTML5 backend; just strip the dragging class here.
5411
6220
  toggleClass(this.element, 'dv-tab--dragging', false);
5412
- this._onDragEnd.fire(event);
5413
- }), this.dragHandler, addDisposableListener(this._element, 'pointerdown', (event) => {
6221
+ }), this.html5DragSource, addDisposableListener(this._element, 'pointerdown', (event) => {
5414
6222
  this._onPointDown.fire(event);
5415
6223
  }), addDisposableListener(this._element, 'click', (event) => {
5416
6224
  this._onTabClick.fire(event);
5417
6225
  }), addDisposableListener(this._element, 'contextmenu', (event) => {
5418
6226
  this.accessor.contextMenuController.show(this.panel, this.group, event);
6227
+ }), new LongPressDetector(this._element, {
6228
+ onLongPress: (event) => {
6229
+ // Don't let a subsequent finger move arm a drag on top
6230
+ // of the just-opened menu.
6231
+ this.pointerDragSource.cancelPending();
6232
+ this.accessor.contextMenuController.show(this.panel, this.group, event);
6233
+ },
5419
6234
  }), this.dropTarget.onDrop((event) => {
5420
6235
  this._onDropped.fire(event);
5421
- }), this.dropTarget);
6236
+ }), this.pointerDropTarget.onDrop((event) => {
6237
+ this._onDropped.fire(event);
6238
+ }), this.dropTarget, this.pointerDropTarget, this.pointerDragSource);
5422
6239
  }
5423
6240
  setActive(isActive) {
5424
6241
  toggleClass(this.element, 'dv-active-tab', isActive);
@@ -5448,11 +6265,60 @@
5448
6265
  }
5449
6266
  setDirection(direction) {
5450
6267
  this._direction = direction;
5451
- this.dropTarget.setTargetZones(direction === 'vertical' ? ['top', 'bottom'] : ['left', 'right']);
6268
+ const zones = direction === 'vertical' ? ['top', 'bottom'] : ['left', 'right'];
6269
+ this.dropTarget.setTargetZones(zones);
6270
+ this.pointerDropTarget.setTargetZones(zones);
5452
6271
  }
5453
6272
  updateDragAndDropState() {
5454
- this._element.draggable = !this.accessor.options.disableDnd;
5455
- this.dragHandler.setDisabled(!!this.accessor.options.disableDnd);
6273
+ const caps = resolveDndCapabilities(this.accessor.options);
6274
+ this._element.draggable = caps.html5;
6275
+ this.html5DragSource.setDisabled(!caps.html5);
6276
+ this.pointerDragSource.setDisabled(!caps.pointer);
6277
+ this.pointerDragSource.setTouchOnly(!caps.pointerHandlesMouse);
6278
+ }
6279
+ /**
6280
+ * Vertical tabs are flipped to horizontal so the ghost stays readable
6281
+ * during the drag rather than appearing sideways-rotated.
6282
+ */
6283
+ _buildGhostElement() {
6284
+ const style = getComputedStyle(this.element);
6285
+ const newNode = this.element.cloneNode(true);
6286
+ const isVertical = this._direction === 'vertical';
6287
+ const verticalSkip = new Set([
6288
+ 'writing-mode',
6289
+ 'inline-size',
6290
+ 'block-size',
6291
+ 'min-inline-size',
6292
+ 'min-block-size',
6293
+ 'max-inline-size',
6294
+ 'max-block-size',
6295
+ 'margin-inline',
6296
+ 'margin-inline-start',
6297
+ 'margin-inline-end',
6298
+ 'margin-block',
6299
+ 'margin-block-start',
6300
+ 'margin-block-end',
6301
+ 'padding-inline',
6302
+ 'padding-inline-start',
6303
+ 'padding-inline-end',
6304
+ 'padding-block',
6305
+ 'padding-block-start',
6306
+ 'padding-block-end',
6307
+ ]);
6308
+ Array.from(style).forEach((key) => {
6309
+ if (isVertical && verticalSkip.has(key)) {
6310
+ return;
6311
+ }
6312
+ newNode.style.setProperty(key, style.getPropertyValue(key), style.getPropertyPriority(key));
6313
+ });
6314
+ if (isVertical) {
6315
+ newNode.style.setProperty('writing-mode', 'horizontal-tb');
6316
+ newNode.style.setProperty('width', style.height);
6317
+ newNode.style.setProperty('height', style.width);
6318
+ }
6319
+ newNode.style.position = 'absolute';
6320
+ newNode.classList.add('dv-tab-ghost-drag');
6321
+ return newNode;
5456
6322
  }
5457
6323
  }
5458
6324
 
@@ -5460,6 +6326,7 @@
5460
6326
  get kind() {
5461
6327
  return this.options.kind;
5462
6328
  }
6329
+ /** Narrow with `instanceof DragEvent` before reading `dataTransfer`. */
5463
6330
  get nativeEvent() {
5464
6331
  return this.event.nativeEvent;
5465
6332
  }
@@ -5490,103 +6357,202 @@
5490
6357
  }
5491
6358
  }
5492
6359
 
5493
- class GroupDragHandler extends DragHandler {
5494
- constructor(element, accessor, group, disabled) {
5495
- super(element, disabled);
5496
- this.accessor = accessor;
5497
- this.group = group;
5498
- this.panelTransfer = LocalSelectionTransfer.getInstance();
5499
- this.addDisposables(addDisposableListener(element, 'pointerdown', (e) => {
5500
- if (e.shiftKey) {
5501
- /**
5502
- * You cannot call e.preventDefault() because that will prevent drag events from firing
5503
- * but we also need to stop any group overlay drag events from occuring
5504
- * Use a custom event marker that can be checked by the overlay drag events
5505
- */
5506
- quasiPreventDefault(e);
5507
- }
5508
- }, true));
5509
- }
5510
- isCancelled(_event) {
5511
- if (this.group.api.location.type === 'floating' && !_event.shiftKey) {
5512
- return true;
5513
- }
5514
- if (this.group.api.location.type === 'edge' && this.group.size === 0) {
5515
- return true;
5516
- }
5517
- return false;
5518
- }
5519
- getData(dragEvent) {
5520
- const dataTransfer = dragEvent.dataTransfer;
5521
- this.panelTransfer.setData([new PanelTransfer(this.accessor.id, this.group.id, null)], PanelTransfer.prototype);
5522
- const style = window.getComputedStyle(this.el);
5523
- const bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');
5524
- const color = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-color');
5525
- if (dataTransfer) {
5526
- const ghostElement = document.createElement('div');
5527
- ghostElement.style.backgroundColor = bgColor;
5528
- ghostElement.style.color = color;
5529
- ghostElement.style.padding = '2px 8px';
5530
- ghostElement.style.height = '24px';
5531
- ghostElement.style.fontSize = '11px';
5532
- ghostElement.style.lineHeight = '20px';
5533
- ghostElement.style.borderRadius = '12px';
5534
- ghostElement.style.position = 'absolute';
5535
- ghostElement.style.pointerEvents = 'none';
5536
- ghostElement.style.top = '-9999px';
5537
- ghostElement.textContent = `Multiple Panels (${this.group.size})`;
5538
- addGhostImage(dataTransfer, ghostElement, { y: -10, x: 30 });
5539
- }
5540
- return {
5541
- dispose: () => {
5542
- this.panelTransfer.clearData(PanelTransfer.prototype);
5543
- },
5544
- };
5545
- }
5546
- }
5547
-
6360
+ // Floating-group redock via touch: require a deliberate long press so the
6361
+ // "move the float around" gesture doesn't double-trigger the redock ghost.
6362
+ // Infinity pressTolerance disables the pre-arm flick override; any motion
6363
+ // during the wait is treated as drag-the-float, not redock intent.
6364
+ const FLOATING_REDOCK_INITIATION_DELAY_MS = 500;
5548
6365
  class VoidContainer extends CompositeDisposable {
5549
6366
  get element() {
5550
6367
  return this._element;
5551
6368
  }
5552
6369
  constructor(accessor, group) {
6370
+ var _a, _b;
5553
6371
  super();
5554
6372
  this.accessor = accessor;
5555
6373
  this.group = group;
6374
+ this.panelTransfer = LocalSelectionTransfer.getInstance();
5556
6375
  this._onDrop = new Emitter();
5557
6376
  this.onDrop = this._onDrop.event;
5558
6377
  this._onDragStart = new Emitter();
5559
6378
  this.onDragStart = this._onDragStart.event;
6379
+ const caps = resolveDndCapabilities(this.accessor.options);
5560
6380
  this._element = document.createElement('div');
5561
6381
  this._element.className = 'dv-void-container';
5562
- this._element.draggable = !this.accessor.options.disableDnd;
5563
- toggleClass(this._element, 'dv-draggable', !this.accessor.options.disableDnd);
6382
+ this._element.draggable = caps.html5;
6383
+ toggleClass(this._element, 'dv-draggable', caps.html5 || caps.pointer);
5564
6384
  this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'pointerdown', () => {
5565
6385
  this.accessor.doSetGroupActive(this.group);
5566
- }));
5567
- this.handler = new GroupDragHandler(this._element, accessor, group, !!this.accessor.options.disableDnd);
5568
- this.dropTarget = new Droptarget(this._element, {
6386
+ }),
6387
+ // Shift+pointerdown marks the event so the group's overlay
6388
+ // drag (move-by-floating) sees it was consumed and doesn't
6389
+ // fire alongside the HTML5 drag. quasiPreventDefault sets the
6390
+ // marker without calling preventDefault — that would also
6391
+ // block dragstart, which we need to fire.
6392
+ addDisposableListener(this._element, 'pointerdown', (e) => {
6393
+ if (e.shiftKey) {
6394
+ quasiPreventDefault(e);
6395
+ }
6396
+ }, true));
6397
+ const canDisplayOverlay = (event, position) => {
6398
+ if (this.group.api.locked) {
6399
+ // Dropping on the void/header space adds the panel
6400
+ // to this group, which `locked` is meant to prevent
6401
+ // (both `true` and `'no-drop-target'`).
6402
+ return false;
6403
+ }
6404
+ const data = getPanelData();
6405
+ if (data && this.accessor.id === data.viewId) {
6406
+ return true;
6407
+ }
6408
+ return group.model.canDisplayOverlay(event, position, 'header_space');
6409
+ };
6410
+ this.dropTarget = html5Backend.createDropTarget(this._element, {
5569
6411
  acceptedTargetZones: ['center'],
5570
- canDisplayOverlay: (event, position) => {
5571
- const data = getPanelData();
5572
- if (data && this.accessor.id === data.viewId) {
5573
- return true;
5574
- }
5575
- return group.model.canDisplayOverlay(event, position, 'header_space');
5576
- },
6412
+ canDisplayOverlay,
5577
6413
  getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
5578
6414
  });
5579
- this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
5580
- this.addDisposables(this.handler, this.handler.onDragStart((event) => {
5581
- this._onDragStart.fire(event);
5582
- }), this.dropTarget.onDrop((event) => {
6415
+ this.pointerDropTarget = pointerBackend.createDropTarget(this._element, {
6416
+ acceptedTargetZones: ['center'],
6417
+ canDisplayOverlay,
6418
+ getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
6419
+ });
6420
+ const buildMultiPanelsGhost = () => {
6421
+ const ghostEl = document.createElement('div');
6422
+ const style = window.getComputedStyle(this._element);
6423
+ const bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');
6424
+ const color = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-color');
6425
+ ghostEl.style.backgroundColor = bgColor;
6426
+ ghostEl.style.color = color;
6427
+ ghostEl.style.padding = '2px 8px';
6428
+ ghostEl.style.height = '24px';
6429
+ ghostEl.style.fontSize = '11px';
6430
+ ghostEl.style.lineHeight = '20px';
6431
+ ghostEl.style.borderRadius = '12px';
6432
+ ghostEl.style.whiteSpace = 'nowrap';
6433
+ ghostEl.style.boxSizing = 'border-box';
6434
+ // HTML5 setDragImage snapshots the element as appended to the
6435
+ // document; a default block-level div would stretch to the
6436
+ // body's width and render as a viewport-wide bar.
6437
+ ghostEl.style.display = 'inline-block';
6438
+ ghostEl.textContent = `Multiple Panels (${this.group.size})`;
6439
+ return ghostEl;
6440
+ };
6441
+ const buildGhostSpec = () => {
6442
+ const createGhost = this.accessor.options.createGroupDragGhostComponent;
6443
+ if (createGhost) {
6444
+ const renderer = createGhost(this.group);
6445
+ renderer.init({
6446
+ group: this.group,
6447
+ api: this.accessor.api,
6448
+ });
6449
+ return {
6450
+ element: renderer.element,
6451
+ offsetX: 30,
6452
+ offsetY: -10,
6453
+ dispose: renderer.dispose
6454
+ ? () => { var _a; return (_a = renderer.dispose) === null || _a === void 0 ? void 0 : _a.call(renderer); }
6455
+ : undefined,
6456
+ };
6457
+ }
6458
+ return {
6459
+ element: buildMultiPanelsGhost(),
6460
+ offsetX: 30,
6461
+ offsetY: -10,
6462
+ };
6463
+ };
6464
+ const sharedDragOptions = {
6465
+ getData: () => {
6466
+ this.panelTransfer.setData([new PanelTransfer(this.accessor.id, this.group.id, null)], PanelTransfer.prototype);
6467
+ return {
6468
+ dispose: () => {
6469
+ this.panelTransfer.clearData(PanelTransfer.prototype);
6470
+ },
6471
+ };
6472
+ },
6473
+ createGhost: buildGhostSpec,
6474
+ onDragStart: (event) => {
6475
+ this._onDragStart.fire(event);
6476
+ },
6477
+ };
6478
+ this.html5DragSource = html5Backend.createDragSource(this._element, Object.assign(Object.assign({}, sharedDragOptions), { disabled: !caps.html5, isCancelled: (event) => {
6479
+ // HTML5: floating groups need shift+drag as the explicit
6480
+ // detach gesture (otherwise click-and-drag conflicts with
6481
+ // moving the floating group itself).
6482
+ if (this.group.api.location.type === 'floating' &&
6483
+ !event.shiftKey) {
6484
+ return true;
6485
+ }
6486
+ if (this.group.api.location.type === 'edge' &&
6487
+ this.group.size === 0) {
6488
+ return true;
6489
+ }
6490
+ return false;
6491
+ } }));
6492
+ const isFloating = () => { var _a, _b, _c; return ((_c = (_b = (_a = this.group) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.location) === null || _c === void 0 ? void 0 : _c.type) === 'floating'; };
6493
+ this.pointerDragSource = pointerBackend.createDragSource(this._element, Object.assign(Object.assign({}, sharedDragOptions), { disabled: !caps.pointer, touchOnly: !caps.pointerHandlesMouse,
6494
+ // Floating groups share this element with the overlay's
6495
+ // move-the-float drag. Without a longer hold + tolerance
6496
+ // override, both gestures commit simultaneously and the
6497
+ // user sees the float follow their finger *and* a ghost.
6498
+ touchInitiationDelay: () => isFloating() ? FLOATING_REDOCK_INITIATION_DELAY_MS : 250, pressTolerance: () => (isFloating() ? Infinity : 8), isCancelled: () => {
6499
+ if (!resolveDndCapabilities(this.accessor.options).pointer) {
6500
+ return true;
6501
+ }
6502
+ // Pointer: long-press IS the deliberate gesture, so
6503
+ // floating groups don't need the shift gate.
6504
+ if (this.group.api.location.type === 'edge' &&
6505
+ this.group.size === 0) {
6506
+ return true;
6507
+ }
6508
+ return false;
6509
+ }, onDragStart: (event) => {
6510
+ var _a;
6511
+ // Redock just committed — abort any in-flight overlay
6512
+ // move so the float stops following the finger while
6513
+ // the ghost takes over.
6514
+ (_a = this.getFloatingOverlay()) === null || _a === void 0 ? void 0 : _a.cancelPendingDrag();
6515
+ this._onDragStart.fire(event);
6516
+ } }));
6517
+ // Mirror direction: once the overlay's move-the-float gesture has
6518
+ // actually moved something, cancel the pending redock arm so the
6519
+ // ghost doesn't appear mid-drag if the user holds past 500ms.
6520
+ const overlayMoveSub = new MutableDisposable();
6521
+ const refreshOverlayMoveSub = () => {
6522
+ const overlay = this.getFloatingOverlay();
6523
+ overlayMoveSub.value = overlay
6524
+ ? overlay.onDidStartMoving(() => {
6525
+ this.pointerDragSource.cancelPending();
6526
+ })
6527
+ : exports.DockviewDisposable.NONE;
6528
+ };
6529
+ refreshOverlayMoveSub();
6530
+ this.addDisposables(overlayMoveSub);
6531
+ const locationChange = (_b = (_a = this.group) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.onDidLocationChange;
6532
+ if (locationChange) {
6533
+ this.addDisposables(locationChange(refreshOverlayMoveSub));
6534
+ }
6535
+ this.onWillShowOverlay = exports.DockviewEvent.any(this.dropTarget.onWillShowOverlay, this.pointerDropTarget.onWillShowOverlay);
6536
+ this.addDisposables(this.html5DragSource, this.dropTarget.onDrop((event) => {
6537
+ this._onDrop.fire(event);
6538
+ }), this.pointerDropTarget.onDrop((event) => {
5583
6539
  this._onDrop.fire(event);
5584
- }), this.dropTarget);
6540
+ }), this.dropTarget, this.pointerDropTarget, this.pointerDragSource);
5585
6541
  }
5586
6542
  updateDragAndDropState() {
5587
- this._element.draggable = !this.accessor.options.disableDnd;
5588
- toggleClass(this._element, 'dv-draggable', !this.accessor.options.disableDnd);
5589
- this.handler.setDisabled(!!this.accessor.options.disableDnd);
6543
+ const caps = resolveDndCapabilities(this.accessor.options);
6544
+ this._element.draggable = caps.html5;
6545
+ toggleClass(this._element, 'dv-draggable', caps.html5 || caps.pointer);
6546
+ this.html5DragSource.setDisabled(!caps.html5);
6547
+ this.pointerDragSource.setDisabled(!caps.pointer);
6548
+ this.pointerDragSource.setTouchOnly(!caps.pointerHandlesMouse);
6549
+ }
6550
+ getFloatingOverlay() {
6551
+ var _a, _b;
6552
+ if (!this.group) {
6553
+ return undefined;
6554
+ }
6555
+ return (_b = (_a = this.accessor.floatingGroups) === null || _a === void 0 ? void 0 : _a.find((fg) => fg.group === this.group)) === null || _b === void 0 ? void 0 : _b.overlay;
5590
6556
  }
5591
6557
  }
5592
6558
 
@@ -5842,6 +6808,14 @@
5842
6808
  return (palette !== null && palette !== void 0 ? palette : getFallbackPalette()).resolveValue(color);
5843
6809
  }
5844
6810
 
6811
+ /**
6812
+ * Visual chip for a tab group. Owns the DOM element, label, click /
6813
+ * context-menu interactions, and exposes a long-press gesture as a
6814
+ * second `onContextMenu` source. Drag-and-drop wiring lives in
6815
+ * `TabGroupManager` — the manager constructs the drag sources on this
6816
+ * chip's element so it can include tabs-list context (custom group
6817
+ * drag image, tab-group transfer payload).
6818
+ */
5845
6819
  class TabGroupChip extends CompositeDisposable {
5846
6820
  get element() {
5847
6821
  return this._element;
@@ -5852,22 +6826,22 @@
5852
6826
  this._onClick = new Emitter();
5853
6827
  this.onClick = this._onClick.event;
5854
6828
  this._onContextMenu = new Emitter();
6829
+ /** Fires on right-click and on touch long-press. */
5855
6830
  this.onContextMenu = this._onContextMenu.event;
5856
- this._onDragStart = new Emitter();
5857
- this.onDragStart = this._onDragStart.event;
5858
6831
  this._element = document.createElement('div');
5859
6832
  this._element.className = 'dv-tab-group-chip';
5860
6833
  this._element.tabIndex = 0;
5861
- this._element.draggable = true;
5862
6834
  this._label = document.createElement('span');
5863
6835
  this._label.className = 'dv-tab-group-chip-label';
5864
6836
  this._element.appendChild(this._label);
5865
- this.addDisposables(this._onClick, this._onContextMenu, this._onDragStart, addDisposableListener(this._element, 'click', (event) => {
6837
+ this.addDisposables(this._onClick, this._onContextMenu, new LongPressDetector(this._element, {
6838
+ onLongPress: (event) => {
6839
+ this._onContextMenu.fire(event);
6840
+ },
6841
+ }), addDisposableListener(this._element, 'click', (event) => {
5866
6842
  this._onClick.fire(event);
5867
6843
  }), addDisposableListener(this._element, 'contextmenu', (event) => {
5868
6844
  this._onContextMenu.fire(event);
5869
- }), addDisposableListener(this._element, 'dragstart', (event) => {
5870
- this._onDragStart.fire(event);
5871
6845
  }));
5872
6846
  }
5873
6847
  init(params) {
@@ -6149,7 +7123,7 @@
6149
7123
  let svg = underline.firstElementChild;
6150
7124
  let path;
6151
7125
  if (!svg || svg.tagName !== 'svg') {
6152
- underline.innerHTML = '';
7126
+ underline.replaceChildren();
6153
7127
  svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
6154
7128
  svg.style.display = 'block';
6155
7129
  path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
@@ -6247,7 +7221,7 @@
6247
7221
  underline.style.display = '';
6248
7222
  // Clear any SVG content left over from a mode switch
6249
7223
  if (underline.firstElementChild) {
6250
- underline.innerHTML = '';
7224
+ underline.replaceChildren();
6251
7225
  }
6252
7226
  underline.style.backgroundColor = color;
6253
7227
  if (isVertical) {
@@ -6331,6 +7305,12 @@
6331
7305
  this._positionChipForGroup(tabGroup);
6332
7306
  }
6333
7307
  }
7308
+ updateDirection() {
7309
+ const isVertical = this._ctx.getDirection() === 'vertical';
7310
+ for (const [, entry] of this._chipRenderers) {
7311
+ entry.dropTarget.setTargetZones(isVertical ? ['top'] : ['left']);
7312
+ }
7313
+ }
6334
7314
  snapshotChipWidths() {
6335
7315
  const widths = new Map();
6336
7316
  for (const [groupId, entry] of this._chipRenderers) {
@@ -6424,6 +7404,45 @@
6424
7404
  (_a = this._pendingTransitionCleanups.get(panelId)) === null || _a === void 0 ? void 0 : _a();
6425
7405
  this._pendingTransitionCleanups.delete(panelId);
6426
7406
  }
7407
+ updateDragAndDropState() {
7408
+ const caps = resolveDndCapabilities(this._ctx.accessor.options);
7409
+ for (const entry of this._chipRenderers.values()) {
7410
+ entry.chip.element.draggable = caps.html5;
7411
+ entry.html5DragSource.setDisabled(!caps.html5);
7412
+ entry.pointerDragSource.setDisabled(!caps.pointer);
7413
+ entry.pointerDragSource.setTouchOnly(!caps.pointerHandlesMouse);
7414
+ }
7415
+ }
7416
+ /**
7417
+ * Synchronously dispose the chip drag sources for an in-flight chip
7418
+ * drag. Called from `_commitGroupMove` so the transfer payload +
7419
+ * iframe shield are released BEFORE the cross-group move detaches
7420
+ * the chip (chip dispose is scheduled on a microtask via
7421
+ * `_scheduleTabGroupUpdate`, which is too late for callers that read
7422
+ * `getPanelData()` synchronously after the move). Idempotent — the
7423
+ * subsequent `update()` will also dispose the sources.
7424
+ */
7425
+ disposeChipDrag(tabGroupId) {
7426
+ var _a, _b;
7427
+ const entry = this._chipRenderers.get(tabGroupId);
7428
+ if (!entry) {
7429
+ return;
7430
+ }
7431
+ // Optional-chained because tests may inject minimal entries
7432
+ // that skip the manager's normal `_ensureChipForGroup` flow.
7433
+ (_a = entry.html5DragSource) === null || _a === void 0 ? void 0 : _a.dispose();
7434
+ (_b = entry.pointerDragSource) === null || _b === void 0 ? void 0 : _b.dispose();
7435
+ }
7436
+ /** Cloned chip rect used as the pointer follow-finger ghost. */
7437
+ _buildChipGhostElement(chipEl) {
7438
+ const style = getComputedStyle(chipEl);
7439
+ const clone = chipEl.cloneNode(true);
7440
+ Array.from(style).forEach((key) => {
7441
+ clone.style.setProperty(key, style.getPropertyValue(key), style.getPropertyPriority(key));
7442
+ });
7443
+ clone.style.position = 'absolute';
7444
+ return clone;
7445
+ }
6427
7446
  disposeAll() {
6428
7447
  var _a;
6429
7448
  (_a = this._indicator) === null || _a === void 0 ? void 0 : _a.dispose();
@@ -6469,6 +7488,74 @@
6469
7488
  ? createChip(tabGroup)
6470
7489
  : new TabGroupChip(this._ctx.accessor.tabGroupColorPalette);
6471
7490
  chip.init({ tabGroup, api: this._ctx.accessor.api });
7491
+ const caps = resolveDndCapabilities(this._ctx.accessor.options);
7492
+ chip.element.draggable = caps.html5;
7493
+ const panelTransfer = LocalSelectionTransfer.getInstance();
7494
+ // Shared `getData` for both backends. Sets a group-level
7495
+ // PanelTransfer (panelId=null, tabGroupId identifies the group).
7496
+ // The returned disposer clears it on drag end.
7497
+ const getData = () => {
7498
+ panelTransfer.setData([
7499
+ new PanelTransfer(this._ctx.accessor.id, this._ctx.group.id, null, tabGroup.id),
7500
+ ], PanelTransfer.prototype);
7501
+ return {
7502
+ dispose: () => {
7503
+ panelTransfer.clearData(PanelTransfer.prototype);
7504
+ },
7505
+ };
7506
+ };
7507
+ // The chip's HTML5 drag image is the cloned tabs list (chip only),
7508
+ // mounted inside the dockview root for CSS-variable inheritance and
7509
+ // positioned against the chip's in-place rect. Layout-dependent
7510
+ // offset means we set the drag image directly in `onDragStart`
7511
+ // (inside the dragstart handler) rather than via the generic
7512
+ // `createGhost` factory, which only knows about ghost specs that
7513
+ // can be appended to `document.body`.
7514
+ const html5DragSource = html5Backend.createDragSource(chip.element, {
7515
+ getData,
7516
+ disabled: !caps.html5,
7517
+ isCancelled: () => !resolveDndCapabilities(this._ctx.accessor.options).html5,
7518
+ onDragStart: (event) => {
7519
+ // Type guard via `dataTransfer` — `instanceof DragEvent`
7520
+ // would throw in jsdom which doesn't ship a DragEvent
7521
+ // constructor.
7522
+ if ('dataTransfer' in event && event.dataTransfer) {
7523
+ this.setGroupDragImage(event, tabGroup, chip.element);
7524
+ }
7525
+ this._callbacks.onChipDragStart(tabGroup, chip, event);
7526
+ },
7527
+ onDragEnd: (event) => {
7528
+ var _a, _b;
7529
+ (_b = (_a = this._callbacks).onChipDragEnd) === null || _b === void 0 ? void 0 : _b.call(_a, tabGroup, chip, event);
7530
+ },
7531
+ });
7532
+ // Synchronous panelTransfer cleanup directly on the chip element.
7533
+ // `Html5DragSource`'s dragend defers data disposal via `setTimeout(0)`
7534
+ // so drop handlers can read the payload — but a chip drag that
7535
+ // ends via `moveGroupOrPanel` (no actual drop event) needs the
7536
+ // singleton cleared immediately, otherwise a synchronous
7537
+ // `getPanelData()` after the move still sees the stale chip
7538
+ // payload. Attached directly (not via `addDisposableListener`) so
7539
+ // the listener survives chip disposal in the detach-then-dragend
7540
+ // cross-group path; `once: true` auto-removes after the single
7541
+ // dragend that we care about. (#1254)
7542
+ chip.element.addEventListener('dragend', () => {
7543
+ panelTransfer.clearData(PanelTransfer.prototype);
7544
+ }, { once: true });
7545
+ const pointerDragSource = pointerBackend.createDragSource(chip.element, {
7546
+ getData,
7547
+ disabled: !caps.pointer,
7548
+ touchOnly: !caps.pointerHandlesMouse,
7549
+ isCancelled: () => !resolveDndCapabilities(this._ctx.accessor.options).pointer,
7550
+ createGhost: () => ({
7551
+ element: this._buildChipGhostElement(chip.element),
7552
+ offsetX: 8,
7553
+ offsetY: 8,
7554
+ }),
7555
+ onDragStart: (event) => {
7556
+ this._callbacks.onChipDragStart(tabGroup, chip, event);
7557
+ },
7558
+ });
6472
7559
  const disposables = [
6473
7560
  tabGroup.onDidChange(() => {
6474
7561
  var _a;
@@ -6482,24 +7569,70 @@
6482
7569
  tabGroup.onDidCollapseChange(() => {
6483
7570
  this._updateTabGroupClasses();
6484
7571
  }),
7572
+ html5DragSource,
7573
+ pointerDragSource,
6485
7574
  ];
6486
- // Wire chip context menu and drag for all chip renderers
7575
+ // Context menu: built-in TabGroupChip already aggregates right-click
7576
+ // + touch long-press into `onContextMenu`. Custom chip renderers
7577
+ // don't, so attach a long-press detector and contextmenu listener
7578
+ // directly on their element.
7579
+ const onContextMenu = (event) => {
7580
+ // A long-press on a chip should preempt the in-flight pointer
7581
+ // drag and open the menu instead.
7582
+ pointerDragSource.cancelPending();
7583
+ this._callbacks.onChipContextMenu(tabGroup, event);
7584
+ };
6487
7585
  if (chip instanceof TabGroupChip) {
6488
- disposables.push(chip.onContextMenu((event) => {
6489
- this._callbacks.onChipContextMenu(tabGroup, event);
6490
- }), chip.onDragStart((event) => {
6491
- this._callbacks.onChipDragStart(tabGroup, chip, event);
6492
- }));
7586
+ disposables.push(chip.onContextMenu(onContextMenu));
6493
7587
  }
6494
7588
  else {
6495
- disposables.push(addDisposableListener(chip.element, 'contextmenu', (event) => {
6496
- this._callbacks.onChipContextMenu(tabGroup, event);
6497
- }), addDisposableListener(chip.element, 'dragstart', (event) => {
6498
- this._callbacks.onChipDragStart(tabGroup, chip, event);
6499
- }));
6500
- }
7589
+ disposables.push(new LongPressDetector(chip.element, {
7590
+ onLongPress: onContextMenu,
7591
+ }), addDisposableListener(chip.element, 'contextmenu', onContextMenu));
7592
+ }
7593
+ // The chip sits before its group's first tab in the DOM, so it
7594
+ // covers the "drop before the group" position. Without a drop
7595
+ // target here, dropping a tab over the chip is a dead zone —
7596
+ // particularly visible when the group is first in the tabs list
7597
+ // and there's no preceding tab whose right zone covers position 0.
7598
+ // The smooth animation path already shifts the chip's margin to
7599
+ // open a gap, so suppress the overlay in that mode.
7600
+ const isVertical = this._ctx.getDirection() === 'vertical';
7601
+ const dropTarget = new Droptarget(chip.element, {
7602
+ acceptedTargetZones: isVertical ? ['top'] : ['left'],
7603
+ overlayModel: {
7604
+ activationSize: { value: 100, type: 'percentage' },
7605
+ },
7606
+ canDisplayOverlay: (event, position) => {
7607
+ var _a;
7608
+ if (this._ctx.group.locked) {
7609
+ return false;
7610
+ }
7611
+ if (this._ctx.accessor.options.disableDnd) {
7612
+ return false;
7613
+ }
7614
+ const data = getPanelData();
7615
+ if (data && this._ctx.accessor.id === data.viewId) {
7616
+ if (((_a = this._ctx.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) ===
7617
+ 'smooth') {
7618
+ return false;
7619
+ }
7620
+ return true;
7621
+ }
7622
+ return this._ctx.group.model.canDisplayOverlay(event, position, 'tab');
7623
+ },
7624
+ });
7625
+ disposables.push(dropTarget, dropTarget.onDrop((event) => {
7626
+ this._callbacks.onChipDrop(tabGroup, event);
7627
+ }));
6501
7628
  const disposable = new CompositeDisposable(...disposables);
6502
- this._chipRenderers.set(tabGroup.id, { chip, disposable });
7629
+ this._chipRenderers.set(tabGroup.id, {
7630
+ chip,
7631
+ html5DragSource,
7632
+ pointerDragSource,
7633
+ disposable,
7634
+ dropTarget,
7635
+ });
6503
7636
  // Group is born collapsed (cross-group drop, layout restore, etc.):
6504
7637
  // its tabs are about to be added without the collapsed class. Skip
6505
7638
  // the animation in the upcoming _updateTabGroupClasses call so they
@@ -6758,6 +7891,7 @@
6758
7891
  for (const tab of this._tabs) {
6759
7892
  tab.value.setDirection(value);
6760
7893
  }
7894
+ this._tabGroupManager.updateDirection();
6761
7895
  }
6762
7896
  constructor(group, accessor, options) {
6763
7897
  super();
@@ -6777,7 +7911,7 @@
6777
7911
  this._voidContainer = null;
6778
7912
  this._voidContainerListeners = null;
6779
7913
  this._extendedDropZone = null;
6780
- this._chipDragCleanup = null;
7914
+ this._pointerInsideTabsList = false;
6781
7915
  this._onTabDragStart = new Emitter();
6782
7916
  this.onTabDragStart = this._onTabDragStart.event;
6783
7917
  this._onDrop = new Emitter();
@@ -6812,13 +7946,40 @@
6812
7946
  onChipDragStart: (tabGroup, chip, event) => {
6813
7947
  this._handleChipDragStart(tabGroup, chip, event);
6814
7948
  },
7949
+ onChipDragEnd: () => {
7950
+ // HTML5 chip dragend (incl. cancels). The Html5DragSource
7951
+ // owns the listener on the chip element, so this fires
7952
+ // even if the chip was detached cross-group — the
7953
+ // element keeps its listeners until the source is
7954
+ // disposed. resetDragAnimation is a no-op after a
7955
+ // successful drop (anim state already null) thanks to
7956
+ // the gating inside it.
7957
+ this.resetDragAnimation();
7958
+ },
7959
+ onChipDrop: (tabGroup, event) => {
7960
+ this._handleChipDrop(tabGroup, event);
7961
+ },
6815
7962
  });
6816
7963
  this.addDisposables(this._onOverflowTabsChange, this._observerDisposable, this._onWillShowOverlay, this._onDrop, this._onTabDragStart, {
6817
7964
  dispose: () => {
6818
7965
  var _a;
6819
7966
  (_a = this._flipTransitionCleanup) === null || _a === void 0 ? void 0 : _a.call(this);
6820
7967
  },
6821
- }, addDisposableListener(this.element, 'pointerdown', (event) => {
7968
+ },
7969
+ // Pointer-side cleanup: when any pointer drag ends, tear
7970
+ // down smooth-reorder anim state the dragover bridge may
7971
+ // have installed. The chip's pointer drag source handles
7972
+ // its own transfer payload + iframe-shield cleanup.
7973
+ PointerDragController.getInstance().onDragEnd(() => {
7974
+ this._pointerInsideTabsList = false;
7975
+ this.resetDragAnimation();
7976
+ }),
7977
+ // Pointer-event mirror of the HTML5 dragover / dragleave handlers
7978
+ // below. Drives smooth-reorder for `dndStrategy: 'pointer'` and
7979
+ // for touch drags in `'auto'`.
7980
+ PointerDragController.getInstance().onDragMove((e) => {
7981
+ this._handlePointerDragMove(e.clientX, e.clientY);
7982
+ }), addDisposableListener(this.element, 'pointerdown', (event) => {
6822
7983
  if (event.defaultPrevented) {
6823
7984
  return;
6824
7985
  }
@@ -6826,135 +7987,60 @@
6826
7987
  if (isLeftClick) {
6827
7988
  this.accessor.doSetGroupActive(this.group);
6828
7989
  }
6829
- }), addDisposableListener(this._tabsList, 'dragover', (event) => {
6830
- var _a, _b, _c, _d;
6831
- if (this.accessor.options.disableDnd) {
6832
- return;
6833
- }
6834
- // If _animState exists but belongs to a different
6835
- // drag (stale from a previous operation), replace it
6836
- // so the current drag is handled correctly.
6837
- if (this._animState) {
6838
- const data = getPanelData();
6839
- if ((data === null || data === void 0 ? void 0 : data.tabGroupId) &&
6840
- data.groupId !== this.group.id &&
6841
- this._animState.sourceTabGroupId !== data.tabGroupId) {
6842
- this._animState = null;
6843
- }
6844
- }
6845
- if (!this._animState) {
6846
- const data = getPanelData();
6847
- // In default animation mode, individual tab drops
6848
- // are handled by per-tab Droptargets. But tab group
6849
- // chip drags still need tab-list-level handling so
6850
- // that drops on gaps / void space work.
6851
- if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) ===
6852
- 'default' &&
6853
- !(data === null || data === void 0 ? void 0 : data.tabGroupId)) {
6854
- return;
6855
- }
6856
- if (data &&
6857
- (data.panelId || data.tabGroupId) &&
6858
- data.groupId !== this.group.id) {
6859
- const avgWidth = this.getAverageTabWidth();
6860
- if (data.tabGroupId) {
6861
- // External group drag — look up the
6862
- // source tab group to size the gap
6863
- const sourceGroup = this.accessor.getPanel(data.groupId);
6864
- const sourceTg = sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.getTabGroups().find((tg) => tg.id === data.tabGroupId);
6865
- const panelCount = (_b = sourceTg === null || sourceTg === void 0 ? void 0 : sourceTg.panelIds.length) !== null && _b !== void 0 ? _b : 1;
6866
- const groupGapWidth = avgWidth * panelCount + avgWidth;
6867
- this._animState = {
6868
- sourceTabId: '',
6869
- sourceIndex: -1,
6870
- tabPositions: this.snapshotTabPositions(),
6871
- chipPositions: this._tabGroupManager.snapshotChipWidths(),
6872
- currentInsertionIndex: null,
6873
- targetTabGroupId: null,
6874
- sourceTabGroupId: data.tabGroupId,
6875
- sourceGroupPanelIds: sourceTg
6876
- ? new Set(sourceTg.panelIds)
6877
- : new Set(),
6878
- sourceChipWidth: avgWidth,
6879
- cursorOffsetFromDragLeft: groupGapWidth / 2,
6880
- sourceGapWidth: groupGapWidth,
6881
- containerLeft: this._tabsList.getBoundingClientRect()
6882
- .left,
6883
- };
6884
- }
6885
- else {
6886
- this._animState = {
6887
- sourceTabId: data.panelId,
6888
- sourceIndex: -1,
6889
- tabPositions: this.snapshotTabPositions(),
6890
- chipPositions: this._tabGroupManager.snapshotChipWidths(),
6891
- currentInsertionIndex: null,
6892
- targetTabGroupId: null,
6893
- sourceTabGroupId: null,
6894
- sourceGroupPanelIds: null,
6895
- sourceChipWidth: 0,
6896
- cursorOffsetFromDragLeft: avgWidth / 2,
6897
- sourceGapWidth: avgWidth,
6898
- containerLeft: this._tabsList.getBoundingClientRect()
6899
- .left,
6900
- };
6901
- }
6902
- }
6903
- else {
6904
- return;
6905
- }
6906
- }
6907
- event.preventDefault(); // allow drop to fire on the container
6908
- // For intra-group drag (sourceIndex >= 0) the gap
6909
- // animation is the sole visual indicator — clear any
6910
- // stale anchor overlay that may have been set while the
6911
- // cursor was over the panel content area or another zone.
6912
- // External drags (sourceIndex === -1) leave the overlay
6913
- // to the individual tab Droptargets so cross-group
6914
- // animation is not disrupted.
6915
- if (this._animState.sourceIndex !== -1) {
6916
- (_d = (_c = this.group.model.dropTargetContainer) === null || _c === void 0 ? void 0 : _c.model) === null || _d === void 0 ? void 0 : _d.clear();
6917
- }
6918
- this.handleDragOver(event);
6919
- }, true), addDisposableListener(this._tabsList, 'dragleave', (event) => {
6920
- var _a, _b, _c;
6921
- if (!this._animState) {
7990
+ }),
7991
+ // Trackpad / wheel forwarding. The strip scrolls along its own
7992
+ // axis (x for horizontal headers, y for vertical), so deltaY
7993
+ // from a plain mouse wheel maps onto the strip's axis too —
7994
+ // this gives the VS Code-style "scroll over tab bar to page
7995
+ // through tabs" feel. We only consume the event when the strip
7996
+ // is actually overflowing in the direction the user wheeled in,
7997
+ // so a wheel at the edge of a non-overflowing strip still
7998
+ // bubbles up and scrolls the page. `{ passive: false }` is
7999
+ // required because we call preventDefault().
8000
+ addDisposableListener(this._tabsList, 'wheel', (event) => {
8001
+ const isVertical = this._direction === 'vertical';
8002
+ const primary = isVertical
8003
+ ? event.deltaY || event.deltaX
8004
+ : event.deltaX || event.deltaY;
8005
+ if (primary === 0) {
6922
8006
  return;
6923
8007
  }
6924
- const related = event.relatedTarget;
6925
- // Ignore moves between children of the tabs list
6926
- if (related && this._tabsList.contains(related)) {
6927
- return;
6928
- }
6929
- // If moving into the broader drop zone (e.g. void container,
6930
- // left actions), keep _animState alive so the external
6931
- // dragover listeners can continue the gap animation.
6932
- if (related && ((_a = this._extendedDropZone) === null || _a === void 0 ? void 0 : _a.contains(related))) {
6933
- this.resetTabTransforms();
6934
- this._animState.currentInsertionIndex = null;
8008
+ const max = isVertical
8009
+ ? this._tabsList.scrollHeight -
8010
+ this._tabsList.clientHeight
8011
+ : this._tabsList.scrollWidth -
8012
+ this._tabsList.clientWidth;
8013
+ if (max <= 0) {
6935
8014
  return;
6936
8015
  }
6937
- // When leaving toward the void container (empty header space
6938
- // to the right), keep the animation state so the drop can
6939
- // still land at the end position.
6940
- const rt = event.relatedTarget;
6941
- const isVoid = this._voidContainer &&
6942
- rt &&
6943
- (rt === this._voidContainer ||
6944
- this._voidContainer.contains(rt));
6945
- if (isVoid) {
8016
+ const current = isVertical
8017
+ ? this._tabsList.scrollTop
8018
+ : this._tabsList.scrollLeft;
8019
+ // At the edge in the wheel direction: let the page
8020
+ // scroll instead of trapping the gesture.
8021
+ if ((primary < 0 && current <= 0) ||
8022
+ (primary > 0 && current >= max)) {
6946
8023
  return;
6947
8024
  }
6948
- this.resetTabTransforms();
6949
- if (this._animState) {
6950
- if (this._animState.sourceIndex === -1) {
6951
- (_c = (_b = this.group.model.dropTargetContainer) === null || _b === void 0 ? void 0 : _b.model) === null || _c === void 0 ? void 0 : _c.clear();
6952
- this._animState = null;
6953
- }
6954
- else {
6955
- this._animState.currentInsertionIndex = null;
6956
- }
8025
+ event.preventDefault();
8026
+ // Custom-scrollbar mode wraps the tabs list and installs
8027
+ // its own wheel listener that rewrites scrollLeft from a
8028
+ // deltaY-only tracker. Without stopPropagation that
8029
+ // handler would clobber our deltaX-aware update.
8030
+ event.stopPropagation();
8031
+ if (isVertical) {
8032
+ this._tabsList.scrollTop = current + primary;
8033
+ }
8034
+ else {
8035
+ this._tabsList.scrollLeft = current + primary;
8036
+ }
8037
+ }, { passive: false }), addDisposableListener(this._tabsList, 'dragover', (event) => {
8038
+ if (this._processDragOver(event.clientX)) {
8039
+ // Allow `drop` to fire on the tabs list container.
8040
+ event.preventDefault();
6957
8041
  }
8042
+ }, true), addDisposableListener(this._tabsList, 'dragleave', (event) => {
8043
+ this._processDragLeave(event.relatedTarget);
6958
8044
  }, true), addDisposableListener(this._tabsList, 'dragend', () => {
6959
8045
  this.resetDragAnimation();
6960
8046
  }), addDisposableListener(this._tabsList, 'drop', (event) => {
@@ -7076,6 +8162,9 @@
7076
8162
  const disposable = new CompositeDisposable(tab.onDragStart((event) => {
7077
8163
  var _a;
7078
8164
  this._onTabDragStart.fire({ nativeEvent: event, panel });
8165
+ // Both HTML5 and pointer drags initialize _animState. Cleanup
8166
+ // is wired in both paths: HTML5 via dragend/drop on _tabsList,
8167
+ // pointer via PointerDragController.onDragEnd subscriptions.
7079
8168
  if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
7080
8169
  const tabWidth = tab.element.getBoundingClientRect().width;
7081
8170
  const sourceIndex = this._tabs.findIndex((x) => x.value === tab);
@@ -7335,6 +8424,7 @@
7335
8424
  for (const tab of this._tabs) {
7336
8425
  tab.value.updateDragAndDropState();
7337
8426
  }
8427
+ this._tabGroupManager.updateDragAndDropState();
7338
8428
  }
7339
8429
  /**
7340
8430
  * Synchronize chip elements and CSS classes for all tab groups
@@ -7346,6 +8436,13 @@
7346
8436
  refreshTabGroupAccent() {
7347
8437
  this._tabGroupManager.refreshAccents();
7348
8438
  }
8439
+ /**
8440
+ * Tabs-list-specific side effects of a chip drag start. The chip's
8441
+ * drag sources (constructed by `TabGroupManager`) own the transfer
8442
+ * payload, iframe shielding, dataTransfer setup, and the HTML5 drag
8443
+ * image. This method just sets up the smooth-reorder anim state and
8444
+ * collapses the source-group tabs in the tabs list.
8445
+ */
7349
8446
  _handleChipDragStart(tabGroup, chip, event) {
7350
8447
  var _a;
7351
8448
  const firstPanelId = tabGroup.panelIds[0];
@@ -7376,89 +8473,79 @@
7376
8473
  sourceGapWidth: groupGapWidth,
7377
8474
  containerLeft: this._tabsList.getBoundingClientRect().left,
7378
8475
  };
7379
- // Set LocalSelectionTransfer so drop targets recognise this as
7380
- // an internal dockview drag. panelId is null (group-level),
7381
- // tabGroupId identifies which tab group is being dragged.
7382
- const panelTransfer = LocalSelectionTransfer.getInstance();
7383
- panelTransfer.setData([
7384
- new PanelTransfer(this.accessor.id, this.group.id, null, tabGroup.id),
7385
- ], PanelTransfer.prototype);
7386
- const iframes = disableIframePointEvents();
7387
- // The dragend listener on `_tabsList` is unreachable for chip
7388
- // drags because cross-group drops detach the chip from the DOM
7389
- // before dragend fires (the source tab group becomes empty, so
7390
- // `_positionChipForGroup` removes the chip element). Without
7391
- // bubbling, the tabsList listener never runs and `_animState`,
7392
- // `_chipDragCleanup`, and the dragging CSS classes leak. Listen
7393
- // directly on the chip element so cleanup happens regardless of
7394
- // whether it's still attached. (Issue #1254.)
7395
- const chipElement = chip.element;
7396
- const onChipDragEnd = () => {
7397
- chipElement.removeEventListener('dragend', onChipDragEnd);
7398
- this.resetDragAnimation();
7399
- };
7400
- chipElement.addEventListener('dragend', onChipDragEnd);
7401
- this._chipDragCleanup = {
7402
- dispose: () => {
7403
- chipElement.removeEventListener('dragend', onChipDragEnd);
7404
- panelTransfer.clearData(PanelTransfer.prototype);
7405
- iframes.release();
7406
- },
7407
- };
7408
- if (event.dataTransfer) {
7409
- event.dataTransfer.effectAllowed = 'move';
7410
- if (event.dataTransfer.items.length === 0) {
7411
- event.dataTransfer.setData('text/plain', '');
7412
- }
7413
- }
7414
- if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
7415
- // Collapse group tabs + chip after the browser
7416
- // captures the drag image, then open the gap at the
7417
- // source position — all instant (no transitions).
7418
- const groupPanelIds = new Set(tabGroup.panelIds);
7419
- this._pendingCollapse = true;
7420
- requestAnimationFrame(() => {
7421
- var _a;
7422
- var _b;
7423
- this._pendingCollapse = false;
7424
- if (!this._animState) {
7425
- return;
7426
- }
7427
- // Collapse all group tabs instantly
7428
- for (const t of this._tabs) {
7429
- if (groupPanelIds.has(t.value.panel.id)) {
7430
- t.value.element.style.transition = 'none';
7431
- toggleClass(t.value.element, 'dv-tab--dragging', true);
7432
- }
7433
- }
7434
- // Collapse the group chip instantly
7435
- const chipEntry = this._tabGroupManager.chipRenderers.get(tabGroup.id);
7436
- if (chipEntry) {
7437
- chipEntry.chip.element.style.transition = 'none';
7438
- toggleClass(chipEntry.chip.element, 'dv-tab-group-chip--dragging', true);
7439
- }
7440
- // Single reflow for the entire batch
7441
- void this._tabsList.offsetHeight;
7442
- const underline = this._tabGroupManager.groupUnderlines.get(tabGroup.id);
7443
- if (underline) {
7444
- underline.style.display = 'none';
7445
- }
7446
- (_a = (_b = this._animState).currentInsertionIndex) !== null && _a !== void 0 ? _a : (_b.currentInsertionIndex = firstIdx);
7447
- // Apply gap with transitions disabled
7448
- this.applyDragOverTransforms(true);
7449
- // Re-enable transitions for subsequent moves
7450
- for (const t of this._tabs) {
7451
- if (groupPanelIds.has(t.value.panel.id)) {
7452
- t.value.element.style.removeProperty('transition');
7453
- }
8476
+ if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) !== 'smooth') {
8477
+ return;
8478
+ }
8479
+ // Collapse group tabs + chip after the browser captures the drag
8480
+ // image, then open the gap at the source position — all instant
8481
+ // (no transitions).
8482
+ const groupPanelIds = new Set(tabGroup.panelIds);
8483
+ this._pendingCollapse = true;
8484
+ requestAnimationFrame(() => {
8485
+ var _a;
8486
+ var _b;
8487
+ this._pendingCollapse = false;
8488
+ if (!this._animState) {
8489
+ return;
8490
+ }
8491
+ // Collapse all group tabs instantly
8492
+ for (const t of this._tabs) {
8493
+ if (groupPanelIds.has(t.value.panel.id)) {
8494
+ t.value.element.style.transition = 'none';
8495
+ toggleClass(t.value.element, 'dv-tab--dragging', true);
7454
8496
  }
7455
- if (chipEntry) {
7456
- chipEntry.chip.element.style.removeProperty('transition');
8497
+ }
8498
+ // Collapse the group chip instantly
8499
+ const chipEntry = this._tabGroupManager.chipRenderers.get(tabGroup.id);
8500
+ if (chipEntry) {
8501
+ chipEntry.chip.element.style.transition = 'none';
8502
+ toggleClass(chipEntry.chip.element, 'dv-tab-group-chip--dragging', true);
8503
+ }
8504
+ // Single reflow for the entire batch
8505
+ void this._tabsList.offsetHeight;
8506
+ const underline = this._tabGroupManager.groupUnderlines.get(tabGroup.id);
8507
+ if (underline) {
8508
+ underline.style.display = 'none';
8509
+ }
8510
+ (_a = (_b = this._animState).currentInsertionIndex) !== null && _a !== void 0 ? _a : (_b.currentInsertionIndex = firstIdx);
8511
+ this.applyDragOverTransforms(true);
8512
+ for (const t of this._tabs) {
8513
+ if (groupPanelIds.has(t.value.panel.id)) {
8514
+ t.value.element.style.removeProperty('transition');
7457
8515
  }
7458
- });
8516
+ }
8517
+ if (chipEntry) {
8518
+ chipEntry.chip.element.style.removeProperty('transition');
8519
+ }
8520
+ });
8521
+ }
8522
+ /**
8523
+ * A drop on a tab group chip means "insert before this group". Resolve to
8524
+ * the index of the group's first tab, adjusting for same-group removal
8525
+ * (when the source tab is currently to the left of the target slot, its
8526
+ * removal shifts the insertion index down by one). Always clears
8527
+ * `targetTabGroupId` so the dropped tab lands outside the group.
8528
+ */
8529
+ _handleChipDrop(tabGroup, event) {
8530
+ const firstPanelId = tabGroup.panelIds[0];
8531
+ if (!firstPanelId) {
8532
+ return;
8533
+ }
8534
+ const insertionIndex = this._tabs.findIndex((x) => x.value.panel.id === firstPanelId);
8535
+ if (insertionIndex === -1) {
8536
+ return;
7459
8537
  }
7460
- // Build a composite drag image showing chip + group tabs
7461
- this._tabGroupManager.setGroupDragImage(event, tabGroup, chip.element);
8538
+ const data = getPanelData();
8539
+ const sourceIndex = data && data.groupId === this.group.id && data.panelId
8540
+ ? this._tabs.findIndex((x) => x.value.panel.id === data.panelId)
8541
+ : -1;
8542
+ const adjustedIndex = insertionIndex -
8543
+ (sourceIndex !== -1 && sourceIndex < insertionIndex ? 1 : 0);
8544
+ this._onDrop.fire({
8545
+ event: event.nativeEvent,
8546
+ index: adjustedIndex,
8547
+ targetTabGroupId: null,
8548
+ });
7462
8549
  }
7463
8550
  /**
7464
8551
  * Sets the broader container that is part of the same logical drop surface
@@ -7520,6 +8607,164 @@
7520
8607
  }
7521
8608
  return total / this._tabs.length;
7522
8609
  }
8610
+ /**
8611
+ * Pointer-event entry point. The HTML5 path enters via the per-element
8612
+ * `dragover` listener; this one hit-tests the global pointer-drag
8613
+ * position against the tabs list and routes through the same shared
8614
+ * `_processDragOver` / `_processDragLeave` helpers.
8615
+ */
8616
+ _handlePointerDragMove(clientX, clientY) {
8617
+ var _a;
8618
+ const sourceDoc = (_a = this._tabsList.ownerDocument) !== null && _a !== void 0 ? _a : document;
8619
+ const elAtPoint = sourceDoc.elementFromPoint(clientX, clientY);
8620
+ const inside = !!elAtPoint &&
8621
+ (this._tabsList.contains(elAtPoint) ||
8622
+ (!!this._extendedDropZone &&
8623
+ this._extendedDropZone.contains(elAtPoint)));
8624
+ if (!inside) {
8625
+ if (this._pointerInsideTabsList) {
8626
+ this._pointerInsideTabsList = false;
8627
+ this._processDragLeave(elAtPoint);
8628
+ }
8629
+ return;
8630
+ }
8631
+ this._pointerInsideTabsList = true;
8632
+ this._processDragOver(clientX);
8633
+ }
8634
+ /**
8635
+ * Shared body of the dragover entry point. Refreshes stale anim state
8636
+ * for a changed drag identity, initializes anim state for incoming
8637
+ * cross-group drags, and dispatches to the gap-following math in
8638
+ * `handleDragOver`. Returns true when this tabs list has taken
8639
+ * ownership of the drag — HTML5 callers use this to gate
8640
+ * `event.preventDefault()`.
8641
+ */
8642
+ _processDragOver(clientX) {
8643
+ var _a, _b, _c, _d;
8644
+ if (this.accessor.options.disableDnd) {
8645
+ return false;
8646
+ }
8647
+ // Stale-state guard: if a previous drag's anim state is still here
8648
+ // but the current drag is a different identity, drop the stale one
8649
+ // so the new drag starts from a clean slate.
8650
+ if (this._animState) {
8651
+ const data = getPanelData();
8652
+ if ((data === null || data === void 0 ? void 0 : data.tabGroupId) &&
8653
+ data.groupId !== this.group.id &&
8654
+ this._animState.sourceTabGroupId !== data.tabGroupId) {
8655
+ this._animState = null;
8656
+ }
8657
+ }
8658
+ if (!this._animState) {
8659
+ const data = getPanelData();
8660
+ // In default animation mode, individual tab drops are handled
8661
+ // by per-tab Droptargets; only chip drags need tabs-list-level
8662
+ // handling so drops on void space still work.
8663
+ if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'default' &&
8664
+ !(data === null || data === void 0 ? void 0 : data.tabGroupId)) {
8665
+ return false;
8666
+ }
8667
+ if (data &&
8668
+ (data.panelId || data.tabGroupId) &&
8669
+ data.groupId !== this.group.id) {
8670
+ const avgWidth = this.getAverageTabWidth();
8671
+ if (data.tabGroupId) {
8672
+ // External group drag — look up the source group to
8673
+ // size the gap.
8674
+ const sourceGroup = this.accessor.getPanel(data.groupId);
8675
+ const sourceTg = sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.getTabGroups().find((tg) => tg.id === data.tabGroupId);
8676
+ const panelCount = (_b = sourceTg === null || sourceTg === void 0 ? void 0 : sourceTg.panelIds.length) !== null && _b !== void 0 ? _b : 1;
8677
+ const groupGapWidth = avgWidth * panelCount + avgWidth;
8678
+ this._animState = {
8679
+ sourceTabId: '',
8680
+ sourceIndex: -1,
8681
+ tabPositions: this.snapshotTabPositions(),
8682
+ chipPositions: this._tabGroupManager.snapshotChipWidths(),
8683
+ currentInsertionIndex: null,
8684
+ targetTabGroupId: null,
8685
+ sourceTabGroupId: data.tabGroupId,
8686
+ sourceGroupPanelIds: sourceTg
8687
+ ? new Set(sourceTg.panelIds)
8688
+ : new Set(),
8689
+ sourceChipWidth: avgWidth,
8690
+ cursorOffsetFromDragLeft: groupGapWidth / 2,
8691
+ sourceGapWidth: groupGapWidth,
8692
+ containerLeft: this._tabsList.getBoundingClientRect().left,
8693
+ };
8694
+ }
8695
+ else {
8696
+ this._animState = {
8697
+ sourceTabId: data.panelId,
8698
+ sourceIndex: -1,
8699
+ tabPositions: this.snapshotTabPositions(),
8700
+ chipPositions: this._tabGroupManager.snapshotChipWidths(),
8701
+ currentInsertionIndex: null,
8702
+ targetTabGroupId: null,
8703
+ sourceTabGroupId: null,
8704
+ sourceGroupPanelIds: null,
8705
+ sourceChipWidth: 0,
8706
+ cursorOffsetFromDragLeft: avgWidth / 2,
8707
+ sourceGapWidth: avgWidth,
8708
+ containerLeft: this._tabsList.getBoundingClientRect().left,
8709
+ };
8710
+ }
8711
+ }
8712
+ else {
8713
+ return false;
8714
+ }
8715
+ }
8716
+ // For intra-group drag (sourceIndex >= 0) the gap animation is the
8717
+ // sole visual indicator — clear any stale anchor overlay that may
8718
+ // have been set while the cursor was over the panel content area or
8719
+ // another zone. External drags (sourceIndex === -1) leave the
8720
+ // overlay to the individual tab Droptargets so cross-group
8721
+ // animation is not disrupted.
8722
+ if (this._animState.sourceIndex !== -1) {
8723
+ (_d = (_c = this.group.model.dropTargetContainer) === null || _c === void 0 ? void 0 : _c.model) === null || _d === void 0 ? void 0 : _d.clear();
8724
+ }
8725
+ this.handleDragOver({ clientX });
8726
+ return true;
8727
+ }
8728
+ /**
8729
+ * Shared body of the dragleave entry point. Preserves anim state when
8730
+ * the drag moves between tabs-list children, into the extended drop
8731
+ * zone, or into the void container; tears it down otherwise.
8732
+ */
8733
+ _processDragLeave(related) {
8734
+ var _a, _b, _c;
8735
+ if (!this._animState) {
8736
+ return;
8737
+ }
8738
+ // Moves between children of the tabs list aren't real leaves.
8739
+ if (related && this._tabsList.contains(related)) {
8740
+ return;
8741
+ }
8742
+ // Moving into the broader drop zone (e.g. void container, left
8743
+ // actions) — keep anim state alive so external listeners can
8744
+ // continue the gap animation.
8745
+ if (related && ((_a = this._extendedDropZone) === null || _a === void 0 ? void 0 : _a.contains(related))) {
8746
+ this.resetTabTransforms();
8747
+ this._animState.currentInsertionIndex = null;
8748
+ return;
8749
+ }
8750
+ // Leaving toward the void container (empty header space to the
8751
+ // right): keep anim state so a drop can still land at the end.
8752
+ const isVoid = this._voidContainer &&
8753
+ related &&
8754
+ (related === this._voidContainer ||
8755
+ this._voidContainer.contains(related));
8756
+ if (isVoid) {
8757
+ return;
8758
+ }
8759
+ this.resetTabTransforms();
8760
+ if (this._animState.sourceIndex === -1) {
8761
+ (_c = (_b = this.group.model.dropTargetContainer) === null || _b === void 0 ? void 0 : _b.model) === null || _c === void 0 ? void 0 : _c.clear();
8762
+ this._animState = null;
8763
+ }
8764
+ else {
8765
+ this._animState.currentInsertionIndex = null;
8766
+ }
8767
+ }
7523
8768
  handleDragOver(event) {
7524
8769
  var _a, _b, _c, _d, _e;
7525
8770
  if (!this._animState) {
@@ -7640,11 +8885,15 @@
7640
8885
  if (!isInsideRange && !isJustBeforeGroup) {
7641
8886
  continue;
7642
8887
  }
7643
- if (isGroupDrag) {
8888
+ if (isGroupDrag && isInsideRange) {
7644
8889
  // A group cannot be dropped inside another group.
7645
8890
  // Snap the insertion index to just before or just
7646
8891
  // after this group based on cursor position relative
7647
- // to the group's midpoint.
8892
+ // to the group's midpoint. Only applies when the
8893
+ // insertion would land *inside* the group — for
8894
+ // `isJustBeforeGroup`, the index is already outside
8895
+ // (immediately left of the group) and is a valid
8896
+ // drop position, so leave it untouched (issue #1264).
7648
8897
  const groupMid = (firstIdx + lastIdx + 1) / 2;
7649
8898
  if (insertionIndex < groupMid) {
7650
8899
  insertionIndex = firstIdx;
@@ -7655,6 +8904,12 @@
7655
8904
  // targetTabGroupId stays null
7656
8905
  break;
7657
8906
  }
8907
+ if (isGroupDrag && isJustBeforeGroup) {
8908
+ // Cursor is just before the group — accept this
8909
+ // index as-is. Groups can be dropped at the slot
8910
+ // immediately left of another group's first tab.
8911
+ break;
8912
+ }
7658
8913
  if (isJustBeforeGroup) {
7659
8914
  // Check whether only the source tab (or source group
7660
8915
  // tabs) sits between insertionIndex and firstIdx.
@@ -7919,20 +9174,23 @@
7919
9174
  * in the model, and run a FLIP animation.
7920
9175
  */
7921
9176
  _commitGroupMove(sourceTabGroupId, insertionIndex) {
7922
- var _a, _b, _c;
7923
- // Read transfer data BEFORE disposing cleanup — disposing
7924
- // _chipDragCleanup clears the global LocalSelectionTransfer
7925
- // singleton which getPanelData() reads from.
9177
+ var _a, _b;
9178
+ // Read transfer data first.
7926
9179
  const data = getPanelData();
7927
- (_a = this._chipDragCleanup) === null || _a === void 0 ? void 0 : _a.dispose();
7928
- this._chipDragCleanup = null;
9180
+ // Synchronously dispose the source chip's drag sources, which
9181
+ // clears the panelTransfer payload + iframe shield. Cross-group
9182
+ // moves dissolve the source chip on a microtask, which is too
9183
+ // late: a synchronous `getPanelData()` after this method (or any
9184
+ // sibling dragover handler firing in the same tick) would
9185
+ // otherwise see stale data still referencing the old tabGroupId.
9186
+ this._tabGroupManager.disposeChipDrag(sourceTabGroupId);
7929
9187
  // Check if the tab group exists in this group (within-group reorder)
7930
9188
  // or in another group (cross-group move).
7931
9189
  const isLocal = this.group.model
7932
9190
  .getTabGroups()
7933
9191
  .some((tg) => tg.id === sourceTabGroupId);
7934
9192
  if (isLocal) {
7935
- if (((_b = this.accessor.options.theme) === null || _b === void 0 ? void 0 : _b.tabAnimation) === 'smooth') {
9193
+ if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
7936
9194
  this._clearGroupDragClasses(sourceTabGroupId);
7937
9195
  const firstPositions = this.snapshotTabPositions();
7938
9196
  this.resetTabTransforms();
@@ -7960,7 +9218,7 @@
7960
9218
  this.accessor.moveGroupOrPanel({
7961
9219
  from: {
7962
9220
  groupId: data.groupId,
7963
- tabGroupId: (_c = data.tabGroupId) !== null && _c !== void 0 ? _c : sourceTabGroupId,
9221
+ tabGroupId: (_b = data.tabGroupId) !== null && _b !== void 0 ? _b : sourceTabGroupId,
7964
9222
  },
7965
9223
  to: {
7966
9224
  group: this.group,
@@ -7988,22 +9246,27 @@
7988
9246
  this._tabGroupManager.skipNextCollapseAnimation = true;
7989
9247
  }
7990
9248
  resetDragAnimation() {
7991
- var _a, _b;
7992
9249
  this._pendingCollapse = false;
7993
- this.resetTabTransforms();
7994
- // Clear drag-collapse classes instantly (no transition)
7995
- if ((_a = this._animState) === null || _a === void 0 ? void 0 : _a.sourceTabGroupId) {
7996
- this._clearGroupDragClasses(this._animState.sourceTabGroupId);
7997
- }
7998
- else {
7999
- this._removeClassInstantlyBatch(this._tabs.map((t) => t.value.element), 'dv-tab--dragging');
8000
- }
8001
- this._animState = null;
8002
- (_b = this._chipDragCleanup) === null || _b === void 0 ? void 0 : _b.dispose();
8003
- this._chipDragCleanup = null;
8004
- // Restore any hidden underlines from group drags
8005
- for (const [, el] of this._tabGroupManager.groupUnderlines) {
8006
- el.style.removeProperty('display');
9250
+ // After a drop, `tab.onDrop` consumes _animState (sets it to null)
9251
+ // and immediately calls `runFlipAnimation`, which sets transforms
9252
+ // and queues an rAF to trigger the CSS transition. dragend fires
9253
+ // synchronously on the source element BEFORE that rAF runs — if
9254
+ // we cleared transforms here we'd clobber the in-flight FLIP, so
9255
+ // gate the cleanup on _animState still being set (i.e. drag was
9256
+ // cancelled rather than dropped).
9257
+ if (this._animState) {
9258
+ this.resetTabTransforms();
9259
+ if (this._animState.sourceTabGroupId) {
9260
+ this._clearGroupDragClasses(this._animState.sourceTabGroupId);
9261
+ }
9262
+ else {
9263
+ this._removeClassInstantlyBatch(this._tabs.map((t) => t.value.element), 'dv-tab--dragging');
9264
+ }
9265
+ this._animState = null;
9266
+ // Restore any hidden underlines from group drags.
9267
+ for (const [, el] of this._tabGroupManager.groupUnderlines) {
9268
+ el.style.removeProperty('display');
9269
+ }
8007
9270
  }
8008
9271
  }
8009
9272
  runFlipAnimation(firstPositions, sourceTabId, isCrossGroup = false, animRange) {
@@ -8496,12 +9759,14 @@
8496
9759
  disableFloatingGroups: undefined,
8497
9760
  floatingGroupBounds: undefined,
8498
9761
  popoutUrl: undefined,
9762
+ nonce: undefined,
8499
9763
  defaultRenderer: undefined,
8500
9764
  defaultHeaderPosition: undefined,
8501
9765
  debug: undefined,
8502
9766
  rootOverlayModel: undefined,
8503
9767
  locked: undefined,
8504
9768
  disableDnd: undefined,
9769
+ dndStrategy: undefined,
8505
9770
  className: undefined,
8506
9771
  noPanelsOverlay: undefined,
8507
9772
  dndEdges: undefined,
@@ -8511,6 +9776,7 @@
8511
9776
  getTabContextMenuItems: undefined,
8512
9777
  getTabGroupChipContextMenuItems: undefined,
8513
9778
  createTabGroupChipComponent: undefined,
9779
+ createGroupDragGhostComponent: undefined,
8514
9780
  tabGroupColors: undefined,
8515
9781
  tabGroupAccent: undefined,
8516
9782
  };
@@ -8685,6 +9951,10 @@
8685
9951
  }
8686
9952
 
8687
9953
  class DockviewDidDropEvent extends DockviewEvent {
9954
+ /**
9955
+ * `PointerEvent` for touch drags has no `dataTransfer`; use
9956
+ * `getData()` for the dockview payload regardless of input method.
9957
+ */
8688
9958
  get nativeEvent() {
8689
9959
  return this.options.nativeEvent;
8690
9960
  }
@@ -8789,29 +10059,28 @@
8789
10059
  toggleClass(this.container, 'dv-groupview-floating', false);
8790
10060
  toggleClass(this.container, 'dv-groupview-popout', false);
8791
10061
  toggleClass(this.container, 'dv-groupview-edge', false);
10062
+ // Mouse and touch drop targets must agree on accepted zones.
10063
+ const applyZones = (zones) => {
10064
+ this.contentContainer.dropTarget.setTargetZones(zones);
10065
+ this.contentContainer.pointerDropTarget.setTargetZones(zones);
10066
+ };
8792
10067
  switch (value.type) {
8793
10068
  case 'grid':
8794
- this.contentContainer.dropTarget.setTargetZones([
8795
- 'top',
8796
- 'bottom',
8797
- 'left',
8798
- 'right',
8799
- 'center',
8800
- ]);
10069
+ applyZones(['top', 'bottom', 'left', 'right', 'center']);
8801
10070
  break;
8802
10071
  case 'floating':
8803
- this.contentContainer.dropTarget.setTargetZones(['center']);
8804
- this.contentContainer.dropTarget.setTargetZones(value
10072
+ applyZones(['center']);
10073
+ applyZones(value
8805
10074
  ? ['center']
8806
10075
  : ['top', 'bottom', 'left', 'right', 'center']);
8807
10076
  toggleClass(this.container, 'dv-groupview-floating', true);
8808
10077
  break;
8809
10078
  case 'popout':
8810
- this.contentContainer.dropTarget.setTargetZones(['center']);
10079
+ applyZones(['center']);
8811
10080
  toggleClass(this.container, 'dv-groupview-popout', true);
8812
10081
  break;
8813
10082
  case 'edge':
8814
- this.contentContainer.dropTarget.setTargetZones(['center']);
10083
+ applyZones(['center']);
8815
10084
  toggleClass(this.container, 'dv-groupview-edge', true);
8816
10085
  break;
8817
10086
  }
@@ -8937,6 +10206,8 @@
8937
10206
  // noop
8938
10207
  }), this.contentContainer.dropTarget.onDrop((event) => {
8939
10208
  this.handleDropEvent('content', event.nativeEvent, event.position);
10209
+ }), this.contentContainer.pointerDropTarget.onDrop((event) => {
10210
+ this.handleDropEvent('content', event.nativeEvent, event.position);
8940
10211
  }), this.tabsContainer.onWillShowOverlay((event) => {
8941
10212
  this._onWillShowOverlay.fire(event);
8942
10213
  }), this.contentContainer.dropTarget.onWillShowOverlay((event) => {
@@ -8947,6 +10218,14 @@
8947
10218
  group: this.groupPanel,
8948
10219
  getData: getPanelData,
8949
10220
  }));
10221
+ }), this.contentContainer.pointerDropTarget.onWillShowOverlay((event) => {
10222
+ this._onWillShowOverlay.fire(new DockviewWillShowOverlayLocationEvent(event, {
10223
+ kind: 'content',
10224
+ panel: this.activePanel,
10225
+ api: this._api,
10226
+ group: this.groupPanel,
10227
+ getData: getPanelData,
10228
+ }));
8950
10229
  }), this._onMove, this._onDidChange, this._onDidDrop, this._onWillDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange, this._onUnhandledDragOverEvent, this._onDidPanelTitleChange, this._onDidPanelParametersChange, this._onDidCreateTabGroup, this._onDidDestroyTabGroup, this._onDidAddPanelToTabGroup, this._onDidRemovePanelFromTabGroup, this._onDidTabGroupChange, this._onDidTabGroupCollapsedChange, this._onDidCreateTabGroup.event(() => {
8951
10230
  this._scheduleTabGroupUpdate();
8952
10231
  }), this._onDidDestroyTabGroup.event(() => {
@@ -9203,6 +10482,15 @@
9203
10482
  refreshTabGroupAccent() {
9204
10483
  this.tabsContainer.refreshTabGroupAccent();
9205
10484
  }
10485
+ refreshWatermark() {
10486
+ var _a, _b;
10487
+ if (this.watermark) {
10488
+ this.watermark.element.remove();
10489
+ (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
10490
+ this.watermark = undefined;
10491
+ }
10492
+ this.updateContainer();
10493
+ }
9206
10494
  getTabGroupForPanel(panelId) {
9207
10495
  return this._findTabGroupForPanel(panelId);
9208
10496
  }
@@ -10033,6 +11321,18 @@
10033
11321
  }
10034
11322
  return this._group.model.location;
10035
11323
  }
11324
+ get locked() {
11325
+ if (!this._group) {
11326
+ throw new Error(NOT_INITIALIZED_MESSAGE);
11327
+ }
11328
+ return this._group.locked;
11329
+ }
11330
+ set locked(value) {
11331
+ if (!this._group) {
11332
+ throw new Error(NOT_INITIALIZED_MESSAGE);
11333
+ }
11334
+ this._group.locked = value;
11335
+ }
10036
11336
  constructor(id, accessor) {
10037
11337
  super(id, '__dockviewgroup__');
10038
11338
  this.accessor = accessor;
@@ -10623,6 +11923,11 @@
10623
11923
  const didTitleChange = title !== this.title;
10624
11924
  if (didTitleChange) {
10625
11925
  this._title = title;
11926
+ // keep the view-model's cached init params in sync so that tab
11927
+ // renderers constructed lazily (e.g. the header overflow
11928
+ // dropdown via createTabRenderer) see the updated title
11929
+ // (#914).
11930
+ this.view.setTitle(title);
10626
11931
  this.api._onDidTitleChange.fire({ title });
10627
11932
  }
10628
11933
  }
@@ -10783,6 +12088,14 @@
10783
12088
  this.content.init(params);
10784
12089
  this.tab.init(Object.assign(Object.assign({}, params), { tabLocation: 'header' }));
10785
12090
  }
12091
+ setTitle(title) {
12092
+ // keep the cached init params in sync so that tab renderers created
12093
+ // lazily after the title changes (e.g. for the header overflow
12094
+ // dropdown) see the current title rather than the stale original.
12095
+ if (this._params) {
12096
+ this._params.title = title;
12097
+ }
12098
+ }
10786
12099
  layout(width, height) {
10787
12100
  var _a, _b;
10788
12101
  (_b = (_a = this.content).layout) === null || _b === void 0 ? void 0 : _b.call(_a, width, height);
@@ -10916,7 +12229,12 @@
10916
12229
  this.onDidChange = this._onDidChange.event;
10917
12230
  this._onDidChangeEnd = new Emitter();
10918
12231
  this.onDidChangeEnd = this._onDidChangeEnd.event;
10919
- this.addDisposables(this._onDidChange, this._onDidChangeEnd);
12232
+ this._onDidStartMoving = new Emitter();
12233
+ /** Fires once per drag, the first time the float actually moves. */
12234
+ this.onDidStartMoving = this._onDidStartMoving.event;
12235
+ this._dragMove = new MutableDisposable();
12236
+ this._dragCancelled = false;
12237
+ this.addDisposables(this._onDidChange, this._onDidChangeEnd, this._onDidStartMoving, this._dragMove);
10920
12238
  this._element.className = 'dv-resize-container';
10921
12239
  this._isVisible = true;
10922
12240
  this.setupResize('top');
@@ -11025,16 +12343,60 @@
11025
12343
  result.height = element.height;
11026
12344
  return result;
11027
12345
  }
12346
+ /**
12347
+ * Abort an in-flight move-the-float drag. Used by the void container
12348
+ * when a redock long-press fires after the move started, so the ghost
12349
+ * gesture wins without the float continuing to follow the finger.
12350
+ * Does not emit `onDidChangeEnd` because no change is being committed.
12351
+ */
12352
+ cancelPendingDrag() {
12353
+ if (!this._dragMove.value) {
12354
+ return;
12355
+ }
12356
+ this._dragCancelled = true;
12357
+ toggleClass(this._element, 'dv-resize-container-dragging', false);
12358
+ this._dragMove.value = exports.DockviewDisposable.NONE;
12359
+ }
11028
12360
  setupDrag(dragTarget, options = { inDragMode: false }) {
11029
- const move = new MutableDisposable();
11030
- const track = () => {
12361
+ const track = (captureTarget, pointerId) => {
11031
12362
  let offset = null;
12363
+ let hasMoved = false;
12364
+ this._dragCancelled = false;
11032
12365
  const iframes = disableIframePointEvents();
11033
- move.value = new CompositeDisposable({
12366
+ if (captureTarget &&
12367
+ typeof pointerId === 'number' &&
12368
+ typeof captureTarget.setPointerCapture === 'function') {
12369
+ try {
12370
+ captureTarget.setPointerCapture(pointerId);
12371
+ }
12372
+ catch (_a) {
12373
+ // ignore – non-fatal if the browser refuses capture
12374
+ }
12375
+ }
12376
+ const end = () => {
12377
+ toggleClass(this._element, 'dv-resize-container-dragging', false);
12378
+ this._dragMove.value = exports.DockviewDisposable.NONE;
12379
+ this._onDidChangeEnd.fire();
12380
+ };
12381
+ this._dragMove.value = new CompositeDisposable({
11034
12382
  dispose: () => {
11035
12383
  iframes.release();
12384
+ if (captureTarget &&
12385
+ typeof pointerId === 'number' &&
12386
+ typeof captureTarget.releasePointerCapture ===
12387
+ 'function') {
12388
+ try {
12389
+ captureTarget.releasePointerCapture(pointerId);
12390
+ }
12391
+ catch (_a) {
12392
+ // ignore – pointer may already be released
12393
+ }
12394
+ }
11036
12395
  },
11037
12396
  }, addDisposableListener(window, 'pointermove', (e) => {
12397
+ if (this._dragCancelled) {
12398
+ return;
12399
+ }
11038
12400
  const containerRect = this.options.container.getBoundingClientRect();
11039
12401
  const x = e.clientX - containerRect.left;
11040
12402
  const y = e.clientY - containerRect.top;
@@ -11071,13 +12433,13 @@
11071
12433
  bounds.right = right;
11072
12434
  }
11073
12435
  this.setBounds(bounds);
11074
- }), addDisposableListener(window, 'pointerup', () => {
11075
- toggleClass(this._element, 'dv-resize-container-dragging', false);
11076
- move.dispose();
11077
- this._onDidChangeEnd.fire();
11078
- }));
12436
+ if (!hasMoved) {
12437
+ hasMoved = true;
12438
+ this._onDidStartMoving.fire();
12439
+ }
12440
+ }), addDisposableListener(window, 'pointerup', end), addDisposableListener(window, 'pointercancel', end));
11079
12441
  };
11080
- this.addDisposables(move, addDisposableListener(dragTarget, 'pointerdown', (event) => {
12442
+ this.addDisposables(addDisposableListener(dragTarget, 'pointerdown', (event) => {
11081
12443
  if (event.defaultPrevented) {
11082
12444
  event.preventDefault();
11083
12445
  return;
@@ -11087,7 +12449,7 @@
11087
12449
  if (quasiDefaultPrevented(event)) {
11088
12450
  return;
11089
12451
  }
11090
- track();
12452
+ track(dragTarget, event.pointerId);
11091
12453
  }), addDisposableListener(this.options.content, 'pointerdown', (event) => {
11092
12454
  if (event.defaultPrevented) {
11093
12455
  return;
@@ -11098,7 +12460,7 @@
11098
12460
  return;
11099
12461
  }
11100
12462
  if (event.shiftKey) {
11101
- track();
12463
+ track(this.options.content, event.pointerId);
11102
12464
  }
11103
12465
  }), addDisposableListener(this.options.content, 'pointerdown', () => {
11104
12466
  arialLevelTracker.push(this._element);
@@ -11116,6 +12478,19 @@
11116
12478
  e.preventDefault();
11117
12479
  let startPosition = null;
11118
12480
  const iframes = disableIframePointEvents();
12481
+ const pointerId = e.pointerId;
12482
+ if (typeof resizeHandleElement.setPointerCapture === 'function') {
12483
+ try {
12484
+ resizeHandleElement.setPointerCapture(pointerId);
12485
+ }
12486
+ catch (_a) {
12487
+ // ignore – non-fatal if the browser refuses capture
12488
+ }
12489
+ }
12490
+ const end = () => {
12491
+ move.dispose();
12492
+ this._onDidChangeEnd.fire();
12493
+ };
11119
12494
  move.value = new CompositeDisposable(addDisposableListener(window, 'pointermove', (e) => {
11120
12495
  const containerRect = this.options.container.getBoundingClientRect();
11121
12496
  const overlayRect = this._element.getBoundingClientRect();
@@ -11250,11 +12625,17 @@
11250
12625
  }), {
11251
12626
  dispose: () => {
11252
12627
  iframes.release();
12628
+ if (typeof resizeHandleElement.releasePointerCapture ===
12629
+ 'function') {
12630
+ try {
12631
+ resizeHandleElement.releasePointerCapture(pointerId);
12632
+ }
12633
+ catch (_a) {
12634
+ // ignore – pointer may already be released
12635
+ }
12636
+ }
11253
12637
  },
11254
- }, addDisposableListener(window, 'pointerup', () => {
11255
- move.dispose();
11256
- this._onDidChangeEnd.fire();
11257
- }));
12638
+ }, addDisposableListener(window, 'pointerup', end), addDisposableListener(window, 'pointercancel', end));
11258
12639
  }));
11259
12640
  }
11260
12641
  getMinimumWidth(width) {
@@ -11702,7 +13083,9 @@
11702
13083
  const externalDocument = externalWindow.document;
11703
13084
  externalDocument.title = document.title;
11704
13085
  externalDocument.body.appendChild(container);
11705
- addStyles(externalDocument, window.document.styleSheets);
13086
+ addStyles(externalDocument, window.document.styleSheets, {
13087
+ nonce: this.options.nonce,
13088
+ });
11706
13089
  /**
11707
13090
  * beforeunload must be registered after load for reasons I could not determine
11708
13091
  * otherwise the beforeunload event will not fire when the window is closed
@@ -11777,6 +13160,14 @@
11777
13160
  }
11778
13161
  }
11779
13162
 
13163
+ function isCoarsePrimaryInput$1(win) {
13164
+ if (!win.matchMedia) {
13165
+ return false;
13166
+ }
13167
+ const coarse = win.matchMedia('(pointer: coarse)').matches;
13168
+ const fine = win.matchMedia('(pointer: fine)').matches;
13169
+ return coarse && !fine;
13170
+ }
11780
13171
  class PopupService extends CompositeDisposable {
11781
13172
  constructor(root, win = window) {
11782
13173
  super();
@@ -11815,8 +13206,22 @@
11815
13206
  wrapper.style.left = `${position.x - offsetX}px`;
11816
13207
  this._element.appendChild(wrapper);
11817
13208
  this._active = wrapper;
13209
+ // Outside-pointerdown dismissal is suppressed for a short grace
13210
+ // window after opening. Touch long-press callers (chip / tab context
13211
+ // menus) open the popover while the user's finger is still pressing
13212
+ // the source element — Android Chrome can dispatch a follow-up
13213
+ // synthetic pointerdown tied to the gesture, and the release-then-
13214
+ // retap motion can land just outside the wrapper. Either would
13215
+ // dismiss the popover before the user can see or interact with it.
13216
+ // The grace window is short enough that intentional outside taps
13217
+ // still feel responsive.
13218
+ const openedAt = Date.now();
13219
+ const POINTERDOWN_GRACE_MS = 200;
11818
13220
  this._activeDisposable.value = new CompositeDisposable(addDisposableListener(this._window, 'pointerdown', (event) => {
11819
13221
  var _a;
13222
+ if (Date.now() - openedAt < POINTERDOWN_GRACE_MS) {
13223
+ return;
13224
+ }
11820
13225
  const target = event.target;
11821
13226
  if (!(target instanceof HTMLElement)) {
11822
13227
  return;
@@ -11834,6 +13239,18 @@
11834
13239
  this.close();
11835
13240
  }
11836
13241
  }), addDisposableListener(this._window, 'resize', () => {
13242
+ // On touch-primary devices, common interactions resize the
13243
+ // window: on-screen keyboard pop, orientation change, browser
13244
+ // address-bar collapse. None of these mean "the user wants
13245
+ // the popover dismissed". Specifically, focusing the chip
13246
+ // context menu's rename input pops the keyboard, which would
13247
+ // otherwise close the menu the moment the user goes to edit
13248
+ // it. Desktop / hybrid input keeps the existing behaviour —
13249
+ // there a resize genuinely means the user has resized the
13250
+ // window and the popover position is now stale.
13251
+ if (isCoarsePrimaryInput$1(this._window)) {
13252
+ return;
13253
+ }
11837
13254
  this.close();
11838
13255
  }));
11839
13256
  this._window.requestAnimationFrame(() => {
@@ -11890,6 +13307,14 @@
11890
13307
  el.setAttribute('role', 'separator');
11891
13308
  return el;
11892
13309
  }
13310
+ function isCoarsePrimaryInput() {
13311
+ if (typeof window === 'undefined' || !window.matchMedia) {
13312
+ return false;
13313
+ }
13314
+ const coarse = window.matchMedia('(pointer: coarse)').matches;
13315
+ const fine = window.matchMedia('(pointer: fine)').matches;
13316
+ return coarse && !fine;
13317
+ }
11893
13318
  function buildRenameInput(tabGroup) {
11894
13319
  const wrapper = document.createElement('div');
11895
13320
  wrapper.className = 'dv-context-menu-rename';
@@ -11910,10 +13335,17 @@
11910
13335
  e.stopPropagation();
11911
13336
  });
11912
13337
  wrapper.appendChild(input);
11913
- requestAnimationFrame(() => {
11914
- input.focus();
11915
- input.select();
11916
- });
13338
+ // Skip auto-focus on touch-primary devices: focusing the input pops the
13339
+ // on-screen keyboard, which fires `window resize`, which `PopupService`
13340
+ // listens to and uses to dismiss the popover — so the menu opens, the
13341
+ // keyboard appears, and the menu immediately closes before the user can
13342
+ // type. The user can still tap the input to focus it intentionally.
13343
+ if (!isCoarsePrimaryInput()) {
13344
+ requestAnimationFrame(() => {
13345
+ input.focus();
13346
+ input.select();
13347
+ });
13348
+ }
11917
13349
  return wrapper;
11918
13350
  }
11919
13351
  function buildColorPicker(tabGroup, palette) {
@@ -12828,7 +14260,7 @@
12828
14260
  return this._popoutRestorationPromise;
12829
14261
  }
12830
14262
  constructor(container, options) {
12831
- var _a, _b, _c, _d, _e, _f;
14263
+ var _a, _b, _c, _d, _e, _f, _g;
12832
14264
  super(container, {
12833
14265
  proportionalLayout: true,
12834
14266
  orientation: exports.Orientation.HORIZONTAL,
@@ -12892,6 +14324,7 @@
12892
14324
  this._floatingGroups = [];
12893
14325
  this._popoutGroups = [];
12894
14326
  this._popoutRestorationPromise = Promise.resolve();
14327
+ this._popoutRestorationCleanups = new Set();
12895
14328
  this._onDidRemoveGroup = new Emitter();
12896
14329
  this.onDidRemoveGroup = this._onDidRemoveGroup.event;
12897
14330
  this._onDidAddGroup = new Emitter();
@@ -12926,37 +14359,51 @@
12926
14359
  this._floatingOverlayHost = document.createElement('div');
12927
14360
  this._floatingOverlayHost.className = 'dv-floating-overlay-host';
12928
14361
  this._shellManager.element.appendChild(this._floatingOverlayHost);
12929
- this._rootDropTarget = new Droptarget(this.element, {
12930
- className: 'dv-drop-target-edge',
12931
- canDisplayOverlay: (event, position) => {
12932
- const data = getPanelData();
12933
- if (data) {
12934
- if (data.viewId !== this.id) {
12935
- return false;
12936
- }
12937
- if (position === 'center') {
12938
- // center drop target is only allowed if there are no panels in the grid
12939
- // floating panels are allowed
12940
- return this.gridview.length === 0;
12941
- }
12942
- return true;
12943
- }
12944
- if (position === 'center' && this.gridview.length !== 0) {
12945
- /**
12946
- * for external events only show the four-corner drag overlays, disable
12947
- * the center position so that external drag events can fall through to the group
12948
- * and panel drop target handlers
12949
- */
14362
+ const rootCanDisplayOverlay = (event, position) => {
14363
+ const data = getPanelData();
14364
+ if (data) {
14365
+ if (data.viewId !== this.id) {
12950
14366
  return false;
12951
14367
  }
12952
- const firedEvent = new DockviewUnhandledDragOverEvent(event, 'edge', position, getPanelData);
12953
- this._onUnhandledDragOverEvent.fire(firedEvent);
12954
- return firedEvent.isAccepted;
12955
- },
14368
+ if (position === 'center') {
14369
+ // center drop target is only allowed if there are no panels in the grid
14370
+ // floating panels are allowed
14371
+ return this.gridview.length === 0;
14372
+ }
14373
+ return true;
14374
+ }
14375
+ if (position === 'center' && this.gridview.length !== 0) {
14376
+ /**
14377
+ * for external events only show the four-corner drag overlays, disable
14378
+ * the center position so that external drag events can fall through to the group
14379
+ * and panel drop target handlers
14380
+ */
14381
+ return false;
14382
+ }
14383
+ const firedEvent = new DockviewUnhandledDragOverEvent(event, 'edge', position, getPanelData);
14384
+ this._onUnhandledDragOverEvent.fire(firedEvent);
14385
+ return firedEvent.isAccepted;
14386
+ };
14387
+ this._rootDropTarget = html5Backend.createDropTarget(this.element, {
14388
+ className: 'dv-drop-target-edge',
14389
+ canDisplayOverlay: rootCanDisplayOverlay,
12956
14390
  acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
12957
14391
  overlayModel: (_f = options.rootOverlayModel) !== null && _f !== void 0 ? _f : DEFAULT_ROOT_OVERLAY_MODEL,
12958
14392
  getOverrideTarget: () => { var _a; return (_a = this.rootDropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
12959
14393
  });
14394
+ this._rootPointerDropTarget = pointerBackend.createDropTarget(this.element, {
14395
+ className: 'dv-drop-target-edge',
14396
+ canDisplayOverlay: rootCanDisplayOverlay,
14397
+ acceptedTargetZones: [
14398
+ 'top',
14399
+ 'bottom',
14400
+ 'left',
14401
+ 'right',
14402
+ 'center',
14403
+ ],
14404
+ overlayModel: (_g = options.rootOverlayModel) !== null && _g !== void 0 ? _g : DEFAULT_ROOT_OVERLAY_MODEL,
14405
+ getOverrideTarget: () => { var _a; return (_a = this.rootDropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
14406
+ });
12960
14407
  this.updateDropTargetModel(options);
12961
14408
  toggleClass(this.gridview.element, 'dv-dockview', true);
12962
14409
  toggleClass(this.element, 'dv-debug', !!options.debug);
@@ -12997,6 +14444,14 @@
12997
14444
  this._bufferOnDidLayoutChange.fire();
12998
14445
  }), exports.DockviewDisposable.from(() => {
12999
14446
  var _a;
14447
+ // Cancel any pending popout-restoration timers scheduled by
14448
+ // fromJSON so they don't open new browser windows after
14449
+ // dispose, and resolve their promises so callers awaiting
14450
+ // popoutRestorationPromise don't hang. See issue #851.
14451
+ for (const cleanup of [...this._popoutRestorationCleanups]) {
14452
+ cleanup();
14453
+ }
14454
+ this._popoutRestorationCleanups.clear();
13000
14455
  // iterate over a copy of the array since .dispose() mutates the original array
13001
14456
  for (const group of [...this._floatingGroups]) {
13002
14457
  group.dispose();
@@ -13010,7 +14465,7 @@
13010
14465
  d.dispose();
13011
14466
  }
13012
14467
  this._edgeGroupDisposables.clear();
13013
- }), this._rootDropTarget, this._rootDropTarget.onWillShowOverlay((event) => {
14468
+ }), this._rootDropTarget, this._rootPointerDropTarget, exports.DockviewEvent.any(this._rootDropTarget.onWillShowOverlay, this._rootPointerDropTarget.onWillShowOverlay)((event) => {
13014
14469
  if (this.gridview.length > 0 && event.position === 'center') {
13015
14470
  // option only available when no panels in primary grid
13016
14471
  return;
@@ -13022,7 +14477,7 @@
13022
14477
  group: undefined,
13023
14478
  getData: getPanelData,
13024
14479
  }));
13025
- }), this._rootDropTarget.onDrop((event) => {
14480
+ }), exports.DockviewEvent.any(this._rootDropTarget.onDrop, this._rootPointerDropTarget.onDrop)((event) => {
13026
14481
  var _a;
13027
14482
  const willDropEvent = new DockviewWillDropEvent({
13028
14483
  nativeEvent: event.nativeEvent,
@@ -13060,7 +14515,7 @@
13060
14515
  getData: getPanelData,
13061
14516
  }));
13062
14517
  }
13063
- }), this._rootDropTarget);
14518
+ }));
13064
14519
  }
13065
14520
  setVisible(panel, visible) {
13066
14521
  switch (panel.api.location.type) {
@@ -13093,7 +14548,7 @@
13093
14548
  return (_a = this._popoutPopupServices.get(group.id)) !== null && _a !== void 0 ? _a : this.popupService;
13094
14549
  }
13095
14550
  addPopoutGroup(itemToPopout, options) {
13096
- var _a, _b, _c, _d, _e;
14551
+ var _a, _b, _c, _d, _e, _f;
13097
14552
  if (itemToPopout instanceof DockviewGroupPanel &&
13098
14553
  itemToPopout.model.location.type === 'edge') {
13099
14554
  // edge groups are permanent structural elements and cannot be popped out
@@ -13128,6 +14583,7 @@
13128
14583
  height: box.height,
13129
14584
  onDidOpen: options === null || options === void 0 ? void 0 : options.onDidOpen,
13130
14585
  onWillClose: options === null || options === void 0 ? void 0 : options.onWillClose,
14586
+ nonce: (_f = this.options) === null || _f === void 0 ? void 0 : _f.nonce,
13131
14587
  });
13132
14588
  const popoutWindowDisposable = new CompositeDisposable(_window, _window.onDidClose(() => {
13133
14589
  popoutWindowDisposable.dispose();
@@ -13545,7 +15001,7 @@
13545
15001
  }
13546
15002
  }
13547
15003
  updateOptions(options) {
13548
- var _a, _b, _c;
15004
+ var _a, _b, _c, _d, _e;
13549
15005
  super.updateOptions(options);
13550
15006
  if ('floatingGroupBounds' in options) {
13551
15007
  for (const group of this._floatingGroups) {
@@ -13571,9 +15027,12 @@
13571
15027
  }
13572
15028
  this.updateDropTargetModel(options);
13573
15029
  const oldDisableDnd = this.options.disableDnd;
15030
+ const oldDndStrategy = this.options.dndStrategy;
13574
15031
  this._options = Object.assign(Object.assign({}, this.options), options);
13575
15032
  const newDisableDnd = this.options.disableDnd;
13576
- if (oldDisableDnd !== newDisableDnd) {
15033
+ const newDndStrategy = this.options.dndStrategy;
15034
+ if (oldDisableDnd !== newDisableDnd ||
15035
+ oldDndStrategy !== newDndStrategy) {
13577
15036
  this.updateDragAndDropState();
13578
15037
  }
13579
15038
  if ('theme' in options) {
@@ -13586,8 +15045,19 @@
13586
15045
  group.model.updateHeaderActions();
13587
15046
  }
13588
15047
  }
15048
+ if ('createWatermarkComponent' in options) {
15049
+ if (this._watermark) {
15050
+ this._watermark.element.parentElement.remove();
15051
+ (_d = (_c = this._watermark).dispose) === null || _d === void 0 ? void 0 : _d.call(_c);
15052
+ this._watermark = null;
15053
+ }
15054
+ this.updateWatermark();
15055
+ for (const group of this.groups) {
15056
+ group.model.refreshWatermark();
15057
+ }
15058
+ }
13589
15059
  if ('tabGroupColors' in options || 'tabGroupAccent' in options) {
13590
- this._tabGroupColorPalette.setEntries((_c = this._options.tabGroupColors) !== null && _c !== void 0 ? _c : DEFAULT_TAB_GROUP_COLORS);
15060
+ this._tabGroupColorPalette.setEntries((_e = this._options.tabGroupColors) !== null && _e !== void 0 ? _e : DEFAULT_TAB_GROUP_COLORS);
13591
15061
  this._tabGroupColorPalette.enabled =
13592
15062
  this._options.tabGroupAccent !== 'off';
13593
15063
  for (const group of this.groups) {
@@ -14013,7 +15483,23 @@
14013
15483
  const group = createGroupFromSerializedState(data);
14014
15484
  // Add a small delay for each popup after the first to avoid browser popup blocking
14015
15485
  const popoutPromise = new Promise((resolve) => {
14016
- setTimeout(() => {
15486
+ const cleanup = () => {
15487
+ this._popoutRestorationCleanups.delete(cleanup);
15488
+ clearTimeout(handle);
15489
+ resolve();
15490
+ };
15491
+ const handle = setTimeout(() => {
15492
+ this._popoutRestorationCleanups.delete(cleanup);
15493
+ // Guard against the component being disposed before
15494
+ // this timer fires. Under React StrictMode the
15495
+ // component is mounted -> disposed -> remounted, and
15496
+ // without this guard the first instance's queued
15497
+ // restoration would open a second popout window.
15498
+ // See issue #851.
15499
+ if (this.isDisposed) {
15500
+ resolve();
15501
+ return;
15502
+ }
14017
15503
  this.addPopoutGroup(group, {
14018
15504
  position: position !== null && position !== void 0 ? position : undefined,
14019
15505
  overridePopoutGroup: gridReferenceGroup
@@ -14026,6 +15512,7 @@
14026
15512
  });
14027
15513
  resolve();
14028
15514
  }, index * DESERIALIZATION_POPOUT_DELAY_MS); // 100ms delay between each popup
15515
+ this._popoutRestorationCleanups.add(cleanup);
14029
15516
  });
14030
15517
  popoutPromises.push(popoutPromise);
14031
15518
  });
@@ -14556,8 +16043,11 @@
14556
16043
  * the source group is a popout group with a single panel
14557
16044
  *
14558
16045
  * 1. remove the panel from the group without triggering any events
14559
- * 2. remove the popout group
14560
- * 3. create a new group at the requested location and add that panel
16046
+ * 2. remove the popout group — this may cascade-remove the empty
16047
+ * reference group it left behind in the main grid (see
16048
+ * doRemoveGroup for popout groups), which can shift grid indices
16049
+ * 3. recompute the target location now that the grid is stable
16050
+ * 4. create a new group at the recomputed location and add that panel
14561
16051
  */
14562
16052
  const popoutGroup = this._popoutGroups.find((group) => group.popoutGroup === sourceGroup);
14563
16053
  const removedPanel = this.movingLock(() => popoutGroup.popoutGroup.model.removePanel(popoutGroup.popoutGroup.panels[0], {
@@ -14565,7 +16055,8 @@
14565
16055
  skipSetActiveGroup: true,
14566
16056
  }));
14567
16057
  this.doRemoveGroup(sourceGroup, { skipActive: true });
14568
- const newGroup = this.createGroupAtLocation(targetLocation);
16058
+ const updatedTargetLocation = getRelativeLocation(this.gridview.orientation, getGridLocation(destinationGroup.element), destinationTarget);
16059
+ const newGroup = this.createGroupAtLocation(updatedTargetLocation);
14569
16060
  this.movingLock(() => newGroup.model.openPanel(removedPanel, {
14570
16061
  skipSetActive: true,
14571
16062
  }));
@@ -15105,15 +16596,18 @@
15105
16596
  }
15106
16597
  updateDropTargetModel(options) {
15107
16598
  if ('dndEdges' in options) {
15108
- this._rootDropTarget.disabled =
15109
- typeof options.dndEdges === 'boolean' &&
15110
- options.dndEdges === false;
16599
+ const disabled = typeof options.dndEdges === 'boolean' &&
16600
+ options.dndEdges === false;
16601
+ this._rootDropTarget.disabled = disabled;
16602
+ this._rootPointerDropTarget.disabled = disabled;
15111
16603
  if (typeof options.dndEdges === 'object' &&
15112
16604
  options.dndEdges !== null) {
15113
16605
  this._rootDropTarget.setOverlayModel(options.dndEdges);
16606
+ this._rootPointerDropTarget.setOverlayModel(options.dndEdges);
15114
16607
  }
15115
16608
  else {
15116
16609
  this._rootDropTarget.setOverlayModel(DEFAULT_ROOT_OVERLAY_MODEL);
16610
+ this._rootPointerDropTarget.setOverlayModel(DEFAULT_ROOT_OVERLAY_MODEL);
15117
16611
  }
15118
16612
  }
15119
16613
  if ('rootOverlayModel' in options) {