dockview-core 6.3.0 → 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 (123) hide show
  1. package/README.md +1 -0
  2. package/dist/cjs/dnd/backend.d.ts +70 -0
  3. package/dist/cjs/dnd/backend.js +171 -0
  4. package/dist/cjs/dnd/dropOverlay.d.ts +20 -0
  5. package/dist/cjs/dnd/dropOverlay.js +197 -0
  6. package/dist/cjs/dnd/droptarget.d.ts +20 -6
  7. package/dist/cjs/dnd/droptarget.js +14 -208
  8. package/dist/cjs/dnd/pointer/index.d.ts +11 -0
  9. package/dist/cjs/dnd/pointer/index.js +13 -0
  10. package/dist/cjs/dnd/pointer/longPress.d.ts +32 -0
  11. package/dist/cjs/dnd/pointer/longPress.js +151 -0
  12. package/dist/cjs/dnd/pointer/pointerDragController.d.ts +60 -0
  13. package/dist/cjs/dnd/pointer/pointerDragController.js +241 -0
  14. package/dist/cjs/dnd/pointer/pointerDragSource.d.ts +61 -0
  15. package/dist/cjs/dnd/pointer/pointerDragSource.js +195 -0
  16. package/dist/cjs/dnd/pointer/pointerDropTarget.d.ts +39 -0
  17. package/dist/cjs/dnd/pointer/pointerDropTarget.js +198 -0
  18. package/dist/cjs/dnd/pointer/pointerGhost.d.ts +30 -0
  19. package/dist/cjs/dnd/pointer/pointerGhost.js +44 -0
  20. package/dist/cjs/dnd/pointer/types.d.ts +16 -0
  21. package/dist/cjs/dnd/pointer/types.js +2 -0
  22. package/dist/cjs/dockview/components/panel/content.d.ts +3 -1
  23. package/dist/cjs/dockview/components/panel/content.js +33 -16
  24. package/dist/cjs/dockview/components/popupService.js +34 -0
  25. package/dist/cjs/dockview/components/tab/tab.d.ts +11 -3
  26. package/dist/cjs/dockview/components/tab/tab.js +151 -117
  27. package/dist/cjs/dockview/components/titlebar/tabGroupChip.d.ts +9 -2
  28. package/dist/cjs/dockview/components/titlebar/tabGroupChip.js +15 -6
  29. package/dist/cjs/dockview/components/titlebar/tabGroups.d.ts +33 -5
  30. package/dist/cjs/dockview/components/titlebar/tabGroups.js +231 -40
  31. package/dist/cjs/dockview/components/titlebar/tabs.d.ts +38 -1
  32. package/dist/cjs/dockview/components/titlebar/tabs.js +372 -251
  33. package/dist/cjs/dockview/components/titlebar/tabsContainer.d.ts +5 -3
  34. package/dist/cjs/dockview/components/titlebar/voidContainer.d.ts +6 -2
  35. package/dist/cjs/dockview/components/titlebar/voidContainer.js +189 -27
  36. package/dist/cjs/dockview/contextMenu.js +19 -4
  37. package/dist/cjs/dockview/dndCapabilities.d.ts +19 -0
  38. package/dist/cjs/dockview/dndCapabilities.js +39 -0
  39. package/dist/cjs/dockview/dockviewComponent.d.ts +1 -0
  40. package/dist/cjs/dockview/dockviewComponent.js +54 -33
  41. package/dist/cjs/dockview/dockviewGroupPanelModel.d.ts +9 -5
  42. package/dist/cjs/dockview/dockviewGroupPanelModel.js +25 -11
  43. package/dist/cjs/dockview/events.d.ts +2 -1
  44. package/dist/cjs/dockview/events.js +1 -0
  45. package/dist/cjs/dockview/options.d.ts +18 -3
  46. package/dist/cjs/dockview/options.js +1 -0
  47. package/dist/cjs/dom.js +7 -3
  48. package/dist/cjs/overlay/overlay.d.ts +12 -0
  49. package/dist/cjs/overlay/overlay.js +84 -16
  50. package/dist/cjs/paneview/draggablePaneviewPanel.d.ts +3 -1
  51. package/dist/cjs/paneview/draggablePaneviewPanel.js +27 -26
  52. package/dist/cjs/paneview/options.d.ts +4 -3
  53. package/dist/dockview-core.js +2199 -834
  54. package/dist/dockview-core.min.js +2 -2
  55. package/dist/dockview-core.min.js.map +1 -1
  56. package/dist/dockview-core.min.noStyle.js +2 -2
  57. package/dist/dockview-core.min.noStyle.js.map +1 -1
  58. package/dist/dockview-core.noStyle.js +2202 -837
  59. package/dist/esm/dnd/backend.d.ts +70 -0
  60. package/dist/esm/dnd/backend.js +148 -0
  61. package/dist/esm/dnd/dropOverlay.d.ts +20 -0
  62. package/dist/esm/dnd/dropOverlay.js +192 -0
  63. package/dist/esm/dnd/droptarget.d.ts +20 -6
  64. package/dist/esm/dnd/droptarget.js +16 -210
  65. package/dist/esm/dnd/pointer/index.d.ts +11 -0
  66. package/dist/esm/dnd/pointer/index.js +5 -0
  67. package/dist/esm/dnd/pointer/longPress.d.ts +32 -0
  68. package/dist/esm/dnd/pointer/longPress.js +127 -0
  69. package/dist/esm/dnd/pointer/pointerDragController.d.ts +60 -0
  70. package/dist/esm/dnd/pointer/pointerDragController.js +191 -0
  71. package/dist/esm/dnd/pointer/pointerDragSource.d.ts +61 -0
  72. package/dist/esm/dnd/pointer/pointerDragSource.js +171 -0
  73. package/dist/esm/dnd/pointer/pointerDropTarget.d.ts +39 -0
  74. package/dist/esm/dnd/pointer/pointerDropTarget.js +168 -0
  75. package/dist/esm/dnd/pointer/pointerGhost.d.ts +30 -0
  76. package/dist/esm/dnd/pointer/pointerGhost.js +39 -0
  77. package/dist/esm/dnd/pointer/types.d.ts +16 -0
  78. package/dist/esm/dnd/pointer/types.js +1 -0
  79. package/dist/esm/dockview/components/panel/content.d.ts +3 -1
  80. package/dist/esm/dockview/components/panel/content.js +33 -16
  81. package/dist/esm/dockview/components/popupService.js +34 -0
  82. package/dist/esm/dockview/components/tab/tab.d.ts +11 -3
  83. package/dist/esm/dockview/components/tab/tab.js +139 -114
  84. package/dist/esm/dockview/components/titlebar/tabGroupChip.d.ts +9 -2
  85. package/dist/esm/dockview/components/titlebar/tabGroupChip.js +15 -6
  86. package/dist/esm/dockview/components/titlebar/tabGroups.d.ts +33 -5
  87. package/dist/esm/dockview/components/titlebar/tabGroups.js +177 -12
  88. package/dist/esm/dockview/components/titlebar/tabs.d.ts +38 -1
  89. package/dist/esm/dockview/components/titlebar/tabs.js +348 -227
  90. package/dist/esm/dockview/components/titlebar/tabsContainer.d.ts +5 -3
  91. package/dist/esm/dockview/components/titlebar/voidContainer.d.ts +6 -2
  92. package/dist/esm/dockview/components/titlebar/voidContainer.js +179 -31
  93. package/dist/esm/dockview/contextMenu.js +19 -4
  94. package/dist/esm/dockview/dndCapabilities.d.ts +19 -0
  95. package/dist/esm/dockview/dndCapabilities.js +36 -0
  96. package/dist/esm/dockview/dockviewComponent.d.ts +1 -0
  97. package/dist/esm/dockview/dockviewComponent.js +55 -34
  98. package/dist/esm/dockview/dockviewGroupPanelModel.d.ts +9 -5
  99. package/dist/esm/dockview/dockviewGroupPanelModel.js +24 -11
  100. package/dist/esm/dockview/events.d.ts +2 -1
  101. package/dist/esm/dockview/events.js +1 -0
  102. package/dist/esm/dockview/options.d.ts +18 -3
  103. package/dist/esm/dockview/options.js +1 -0
  104. package/dist/esm/dom.js +7 -3
  105. package/dist/esm/overlay/overlay.d.ts +12 -0
  106. package/dist/esm/overlay/overlay.js +85 -17
  107. package/dist/esm/paneview/draggablePaneviewPanel.d.ts +3 -1
  108. package/dist/esm/paneview/draggablePaneviewPanel.js +26 -20
  109. package/dist/esm/paneview/options.d.ts +4 -3
  110. package/dist/package/main.cjs.js +2202 -837
  111. package/dist/package/main.cjs.min.js +2 -2
  112. package/dist/package/main.esm.min.mjs +2 -2
  113. package/dist/package/main.esm.mjs +2202 -837
  114. package/dist/styles/dockview.css +117 -1
  115. package/package.json +3 -1
  116. package/dist/cjs/dnd/abstractDragHandler.d.ts +0 -14
  117. package/dist/cjs/dnd/abstractDragHandler.js +0 -86
  118. package/dist/cjs/dnd/groupDragHandler.d.ts +0 -12
  119. package/dist/cjs/dnd/groupDragHandler.js +0 -104
  120. package/dist/esm/dnd/abstractDragHandler.d.ts +0 -14
  121. package/dist/esm/dnd/abstractDragHandler.js +0 -63
  122. package/dist/esm/dnd/groupDragHandler.d.ts +0 -12
  123. package/dist/esm/dnd/groupDragHandler.js +0 -81
package/dist/dockview-core.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * dockview-core
3
- * @version 6.3.0
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 {
@@ -581,7 +581,7 @@
581
581
  * Should be more efficient than element.querySelectorAll("*") since there
582
582
  * is no need to store every element in-memory using this approach
583
583
  */
584
- function allTagsNamesInclusiveOfShadowDoms(tagNames) {
584
+ function allTagsNamesInclusiveOfShadowDoms(tagNames, rootNode) {
585
585
  const iframes = [];
586
586
  function findIframesInNode(node) {
587
587
  if (node.nodeType === Node.ELEMENT_NODE) {
@@ -596,11 +596,15 @@
596
596
  }
597
597
  }
598
598
  }
599
- 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);
600
604
  return iframes;
601
605
  }
602
606
  function disableIframePointEvents(rootNode = document) {
603
- const iframes = allTagsNamesInclusiveOfShadowDoms(['IFRAME', 'WEBVIEW']);
607
+ const iframes = allTagsNamesInclusiveOfShadowDoms(['IFRAME', 'WEBVIEW'], rootNode);
604
608
  const original = new WeakMap(); // don't hold onto HTMLElement references longer than required
605
609
  for (const iframe of iframes) {
606
610
  original.set(iframe, iframe.style.pointerEvents);
@@ -4020,67 +4024,6 @@
4020
4024
  }
4021
4025
  }
4022
4026
 
4023
- class DragHandler extends CompositeDisposable {
4024
- constructor(el, disabled) {
4025
- super();
4026
- this.el = el;
4027
- this.disabled = disabled;
4028
- this.dataDisposable = new MutableDisposable();
4029
- this.pointerEventsDisposable = new MutableDisposable();
4030
- this._onDragStart = new Emitter();
4031
- this.onDragStart = this._onDragStart.event;
4032
- this.addDisposables(this._onDragStart, this.dataDisposable, this.pointerEventsDisposable);
4033
- this.configure();
4034
- }
4035
- setDisabled(disabled) {
4036
- this.disabled = disabled;
4037
- }
4038
- isCancelled(_event) {
4039
- return false;
4040
- }
4041
- configure() {
4042
- this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
4043
- if (event.defaultPrevented ||
4044
- this.isCancelled(event) ||
4045
- this.disabled) {
4046
- event.preventDefault();
4047
- return;
4048
- }
4049
- const iframes = disableIframePointEvents();
4050
- this.pointerEventsDisposable.value = {
4051
- dispose: () => {
4052
- iframes.release();
4053
- },
4054
- };
4055
- this.el.classList.add('dv-dragged');
4056
- setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
4057
- this.dataDisposable.value = this.getData(event);
4058
- this._onDragStart.fire(event);
4059
- if (event.dataTransfer) {
4060
- event.dataTransfer.effectAllowed = 'move';
4061
- const hasData = event.dataTransfer.items.length > 0;
4062
- if (!hasData) {
4063
- /**
4064
- * Although this is not used by dockview many third party dnd libraries will check
4065
- * dataTransfer.types to determine valid drag events.
4066
- *
4067
- * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
4068
- * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
4069
- * dnd logic. You can see the code at
4070
- P * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
4071
- */
4072
- event.dataTransfer.setData('text/plain', '');
4073
- }
4074
- }
4075
- }), addDisposableListener(this.el, 'dragend', () => {
4076
- this.pointerEventsDisposable.dispose();
4077
- setTimeout(() => {
4078
- this.dataDisposable.dispose(); // allow the data to be read by other handlers before disposing
4079
- }, 0);
4080
- }));
4081
- }
4082
- }
4083
-
4084
4027
  class DragAndDropObserver extends CompositeDisposable {
4085
4028
  constructor(element, callbacks) {
4086
4029
  super();
@@ -4131,48 +4074,197 @@
4131
4074
  }
4132
4075
  }
4133
4076
 
4134
- function setGPUOptimizedBounds(element, bounds) {
4135
- const { top, left, width, height } = bounds;
4136
- const topPx = `${Math.round(top)}px`;
4137
- const leftPx = `${Math.round(left)}px`;
4138
- const widthPx = `${Math.round(width)}px`;
4139
- const heightPx = `${Math.round(height)}px`;
4140
- // Use traditional positioning but maintain GPU layer
4141
- element.style.top = topPx;
4142
- element.style.left = leftPx;
4143
- element.style.width = widthPx;
4144
- element.style.height = heightPx;
4145
- element.style.visibility = 'visible';
4146
- // Ensure GPU layer is maintained
4147
- if (!element.style.transform || element.style.transform === '') {
4148
- element.style.transform = 'translate3d(0, 0, 0)';
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
+ }
4149
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
+ };
4150
4130
  }
4151
- function setGPUOptimizedBoundsFromStrings(element, bounds) {
4152
- const { top, left, width, height } = bounds;
4153
- // Use traditional positioning but maintain GPU layer
4154
- element.style.top = top;
4155
- element.style.left = left;
4156
- element.style.width = width;
4157
- element.style.height = height;
4158
- element.style.visibility = 'visible';
4159
- // Ensure GPU layer is maintained
4160
- if (!element.style.transform || element.style.transform === '') {
4161
- element.style.transform = 'translate3d(0, 0, 0)';
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)';
4162
4200
  }
4163
4201
  }
4164
- function checkBoundsChanged(element, bounds) {
4165
- const { top, left, width, height } = bounds;
4166
- const topPx = `${Math.round(top)}px`;
4167
- const leftPx = `${Math.round(left)}px`;
4168
- const widthPx = `${Math.round(width)}px`;
4169
- const heightPx = `${Math.round(height)}px`;
4170
- // Check if position or size changed (back to traditional method)
4171
- return (element.style.top !== topPx ||
4172
- element.style.left !== leftPx ||
4173
- element.style.width !== widthPx ||
4174
- element.style.height !== heightPx);
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 };
4175
4266
  }
4267
+
4176
4268
  class WillShowOverlayEvent extends DockviewEvent {
4177
4269
  get nativeEvent() {
4178
4270
  return this.options.nativeEvent;
@@ -4217,16 +4309,10 @@
4217
4309
  throw new Error(`invalid position '${position}'`);
4218
4310
  }
4219
4311
  }
4220
- const DEFAULT_ACTIVATION_SIZE = {
4312
+ const DEFAULT_ACTIVATION_SIZE$1 = {
4221
4313
  value: 20,
4222
4314
  type: 'percentage',
4223
4315
  };
4224
- const DEFAULT_SIZE = {
4225
- value: 50,
4226
- type: 'percentage',
4227
- };
4228
- const SMALL_WIDTH_BOUNDARY = 100;
4229
- const SMALL_HEIGHT_BOUNDARY = 100;
4230
4316
  class Droptarget extends CompositeDisposable {
4231
4317
  get disabled() {
4232
4318
  return this._disabled;
@@ -4307,20 +4393,12 @@
4307
4393
  this.markAsUsed(e);
4308
4394
  if (overrideTarget) ;
4309
4395
  else if (!this.targetElement) {
4310
- this.targetElement = document.createElement('div');
4311
- this.targetElement.className = 'dv-drop-target-dropzone';
4312
- this.overlayElement = document.createElement('div');
4313
- this.overlayElement.className = 'dv-drop-target-selection';
4396
+ const els = createOverlayElements();
4397
+ this.targetElement = els.dropzone;
4398
+ this.overlayElement = els.selection;
4314
4399
  this._state = 'center';
4315
- this.targetElement.appendChild(this.overlayElement);
4316
4400
  target.classList.add('dv-drop-target');
4317
4401
  target.append(this.targetElement);
4318
- // this.overlayElement.style.opacity = '0';
4319
- // requestAnimationFrame(() => {
4320
- // if (this.overlayElement) {
4321
- // this.overlayElement.style.opacity = '';
4322
- // }
4323
- // });
4324
4402
  }
4325
4403
  this.toggleClasses(quadrant, width, height);
4326
4404
  this._state = quadrant;
@@ -4390,166 +4468,29 @@
4390
4468
  return typeof value === 'boolean' && value;
4391
4469
  }
4392
4470
  toggleClasses(quadrant, width, height) {
4393
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
4471
+ var _a, _b, _c, _d, _e;
4394
4472
  const target = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
4395
- if (!target && !this.overlayElement) {
4396
- return;
4397
- }
4398
- const smallWidthBoundary = (_d = (_c = this.options.overlayModel) === null || _c === void 0 ? void 0 : _c.smallWidthBoundary) !== null && _d !== void 0 ? _d : SMALL_WIDTH_BOUNDARY;
4399
- const smallHeightBoundary = (_f = (_e = this.options.overlayModel) === null || _e === void 0 ? void 0 : _e.smallHeightBoundary) !== null && _f !== void 0 ? _f : SMALL_HEIGHT_BOUNDARY;
4400
- const isSmallX = width < smallWidthBoundary;
4401
- const isSmallY = height < smallHeightBoundary;
4402
- const isLeft = quadrant === 'left';
4403
- const isRight = quadrant === 'right';
4404
- const isTop = quadrant === 'top';
4405
- const isBottom = quadrant === 'bottom';
4406
- const rightClass = !isSmallX && isRight;
4407
- const leftClass = !isSmallX && isLeft;
4408
- const topClass = !isSmallY && isTop;
4409
- const bottomClass = !isSmallY && isBottom;
4410
- let size = 1;
4411
- const sizeOptions = (_h = (_g = this.options.overlayModel) === null || _g === void 0 ? void 0 : _g.size) !== null && _h !== void 0 ? _h : DEFAULT_SIZE;
4412
- if (sizeOptions.type === 'percentage') {
4413
- size = clamp(sizeOptions.value, 0, 100) / 100;
4414
- }
4415
- else {
4416
- if (rightClass || leftClass) {
4417
- size = clamp(0, sizeOptions.value, width) / width;
4418
- }
4419
- if (topClass || bottomClass) {
4420
- size = clamp(0, sizeOptions.value, height) / height;
4421
- }
4422
- }
4423
4473
  if (target) {
4424
- const outlineEl = (_l = (_k = (_j = this.options).getOverlayOutline) === null || _k === void 0 ? void 0 : _k.call(_j)) !== null && _l !== void 0 ? _l : this.element;
4425
- const elBox = outlineEl.getBoundingClientRect();
4426
- const ta = target.getElements(undefined, outlineEl);
4427
- const el = ta.root;
4428
- const overlay = ta.overlay;
4429
- const bigbox = el.getBoundingClientRect();
4430
- const rootTop = elBox.top - bigbox.top;
4431
- const rootLeft = elBox.left - bigbox.left;
4432
- const box = {
4433
- top: rootTop,
4434
- left: rootLeft,
4435
- width: width,
4436
- height: height,
4437
- };
4438
- if (rightClass) {
4439
- box.left = rootLeft + width * (1 - size);
4440
- box.width = width * size;
4441
- }
4442
- else if (leftClass) {
4443
- box.width = width * size;
4444
- }
4445
- else if (topClass) {
4446
- box.height = height * size;
4447
- }
4448
- else if (bottomClass) {
4449
- box.top = rootTop + height * (1 - size);
4450
- box.height = height * size;
4451
- }
4452
- if (isSmallX && isLeft) {
4453
- box.width = 4;
4454
- }
4455
- if (isSmallX && isRight) {
4456
- box.left = rootLeft + width - 4;
4457
- box.width = 4;
4458
- }
4459
- if (isSmallY && isTop) {
4460
- box.height = 4;
4461
- }
4462
- if (isSmallY && isBottom) {
4463
- box.top = rootTop + height - 4;
4464
- box.height = 4;
4465
- }
4466
- // Use GPU-optimized bounds checking and setting
4467
- if (!checkBoundsChanged(overlay, box)) {
4468
- return;
4469
- }
4470
- setGPUOptimizedBounds(overlay, box);
4471
- overlay.className = `dv-drop-target-anchor${this.options.className ? ` ${this.options.className}` : ''}`;
4472
- toggleClass(overlay, 'dv-drop-target-left', isLeft);
4473
- toggleClass(overlay, 'dv-drop-target-right', isRight);
4474
- toggleClass(overlay, 'dv-drop-target-top', isTop);
4475
- toggleClass(overlay, 'dv-drop-target-bottom', isBottom);
4476
- toggleClass(overlay, 'dv-drop-target-anchor-line', (isSmallX && (isLeft || isRight)) ||
4477
- (isSmallY && (isTop || isBottom)));
4478
- toggleClass(overlay, 'dv-drop-target-center', quadrant === 'center');
4479
- if (ta.changed) {
4480
- toggleClass(overlay, 'dv-drop-target-anchor-container-changed', true);
4481
- setTimeout(() => {
4482
- toggleClass(overlay, 'dv-drop-target-anchor-container-changed', false);
4483
- }, 10);
4484
- }
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
+ });
4485
4484
  return;
4486
4485
  }
4487
4486
  if (!this.overlayElement) {
4488
4487
  return;
4489
4488
  }
4490
- const box = { top: '0px', left: '0px', width: '100%', height: '100%' };
4491
- /**
4492
- * You can also achieve the overlay placement using the transform CSS property
4493
- * to translate and scale the element however this has the undesired effect of
4494
- * 'skewing' the element. Comment left here for anybody that ever revisits this.
4495
- *
4496
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/transform
4497
- *
4498
- * right
4499
- * translateX(${100 * (1 - size) / 2}%) scaleX(${scale})
4500
- *
4501
- * left
4502
- * translateX(-${100 * (1 - size) / 2}%) scaleX(${scale})
4503
- *
4504
- * top
4505
- * translateY(-${100 * (1 - size) / 2}%) scaleY(${scale})
4506
- *
4507
- * bottom
4508
- * translateY(${100 * (1 - size) / 2}%) scaleY(${scale})
4509
- */
4510
- if (rightClass) {
4511
- box.left = `${100 * (1 - size)}%`;
4512
- box.width = `${100 * size}%`;
4513
- }
4514
- else if (leftClass) {
4515
- box.width = `${100 * size}%`;
4516
- }
4517
- else if (topClass) {
4518
- box.height = `${100 * size}%`;
4519
- }
4520
- else if (bottomClass) {
4521
- box.top = `${100 * (1 - size)}%`;
4522
- box.height = `${100 * size}%`;
4523
- }
4524
- if (isSmallX && isLeft) {
4525
- box.width = '4px';
4526
- }
4527
- if (isSmallX && isRight) {
4528
- box.left = `${width - 4}px`;
4529
- box.width = '4px';
4530
- }
4531
- if (isSmallY && isTop) {
4532
- box.height = '4px';
4533
- }
4534
- if (isSmallY && isBottom) {
4535
- box.top = `${height - 4}px`;
4536
- box.height = '4px';
4537
- }
4538
- setGPUOptimizedBoundsFromStrings(this.overlayElement, box);
4539
- const isLine = (isSmallX && (isLeft || isRight)) ||
4540
- (isSmallY && (isTop || isBottom));
4541
- toggleClass(this.overlayElement, 'dv-drop-target-small-vertical', isSmallY);
4542
- toggleClass(this.overlayElement, 'dv-drop-target-small-horizontal', isSmallX);
4543
- toggleClass(this.overlayElement, 'dv-drop-target-selection-line', isLine);
4544
- toggleClass(this.overlayElement, 'dv-drop-target-left', isLeft);
4545
- toggleClass(this.overlayElement, 'dv-drop-target-right', isRight);
4546
- toggleClass(this.overlayElement, 'dv-drop-target-top', isTop);
4547
- toggleClass(this.overlayElement, 'dv-drop-target-bottom', isBottom);
4548
- toggleClass(this.overlayElement, 'dv-drop-target-center', quadrant === 'center');
4489
+ renderInPlaceOverlay(this.overlayElement, quadrant, width, height, this.options.overlayModel);
4549
4490
  }
4550
4491
  calculateQuadrant(overlayType, x, y, width, height) {
4551
4492
  var _a, _b;
4552
- 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;
4553
4494
  const isPercentage = activationSizeOptions.type === 'percentage';
4554
4495
  if (isPercentage) {
4555
4496
  return calculateQuadrantAsPercentage(overlayType, x, y, width, height, activationSizeOptions.value);
@@ -4607,6 +4548,723 @@
4607
4548
  return 'center';
4608
4549
  }
4609
4550
 
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);
4563
+ }
4564
+
4565
+ /**
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.
4575
+ */
4576
+ class PointerDragController extends CompositeDisposable {
4577
+ static getInstance() {
4578
+ if (!PointerDragController._instance) {
4579
+ PointerDragController._instance = new PointerDragController();
4580
+ }
4581
+ return PointerDragController._instance;
4582
+ }
4583
+ constructor() {
4584
+ super();
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);
4595
+ }
4596
+ get active() {
4597
+ return this._active;
4598
+ }
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);
4663
+ });
4664
+ }
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;
4674
+ }
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;
4693
+ }
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;
4751
+ }
4752
+ }
4753
+
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
+
4610
5268
  const PROPERTY_KEYS_PANEVIEW = (() => {
4611
5269
  /**
4612
5270
  * by readong the keys from an empty value object TypeScript will error
@@ -5072,35 +5730,42 @@
5072
5730
  const id = this.id;
5073
5731
  const accessorId = this.accessor.id;
5074
5732
  this.header.draggable = true;
5075
- this.handler = new (class PaneDragHandler extends DragHandler {
5076
- getData() {
5733
+ const sharedDragOptions = {
5734
+ getData: () => {
5077
5735
  LocalSelectionTransfer.getInstance().setData([new PaneTransfer(accessorId, id)], PaneTransfer.prototype);
5078
5736
  return {
5079
5737
  dispose: () => {
5080
5738
  LocalSelectionTransfer.getInstance().clearData(PaneTransfer.prototype);
5081
5739
  },
5082
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
+ }
5083
5752
  }
5084
- })(this.header);
5085
- 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 = {
5086
5758
  acceptedTargetZones: ['top', 'bottom'],
5087
5759
  overlayModel: {
5088
5760
  activationSize: { type: 'percentage', value: 50 },
5089
5761
  },
5090
- canDisplayOverlay: (event, position) => {
5091
- const data = getPaneData();
5092
- if (data) {
5093
- if (data.paneId !== this.id &&
5094
- data.viewId === this.accessor.id) {
5095
- return true;
5096
- }
5097
- }
5098
- const firedEvent = new PaneviewUnhandledDragOverEvent(event, position, getPaneData, this);
5099
- this._onUnhandledDragOverEvent.fire(firedEvent);
5100
- return firedEvent.isAccepted;
5101
- },
5102
- });
5103
- 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) => {
5104
5769
  this.onDrop(event);
5105
5770
  }));
5106
5771
  }
@@ -5155,6 +5820,25 @@
5155
5820
  this._element.tabIndex = -1;
5156
5821
  this.addDisposables(this._onDidFocus, this._onDidBlur);
5157
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`.
5158
5842
  this.dropTarget = new Droptarget(this.element, {
5159
5843
  getOverlayOutline: () => {
5160
5844
  var _a;
@@ -5164,25 +5848,22 @@
5164
5848
  },
5165
5849
  className: 'dv-drop-target-content',
5166
5850
  acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
5167
- canDisplayOverlay: (event, position) => {
5168
- if (this.group.locked === 'no-drop-target' ||
5169
- (this.group.locked && position === 'center')) {
5170
- return false;
5171
- }
5172
- const data = getPanelData();
5173
- if (!data &&
5174
- event.shiftKey &&
5175
- this.group.location.type !== 'floating') {
5176
- return false;
5177
- }
5178
- if (data && data.viewId === this.accessor.id) {
5179
- return true;
5180
- }
5181
- 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;
5182
5862
  },
5863
+ className: 'dv-drop-target-content',
5183
5864
  getOverrideTarget: target ? () => target.model : undefined,
5184
5865
  });
5185
- this.addDisposables(this.dropTarget);
5866
+ this.addDisposables(this.dropTarget, this.pointerDropTarget);
5186
5867
  }
5187
5868
  show() {
5188
5869
  this.element.style.display = '';
@@ -5270,37 +5951,169 @@
5270
5951
  }
5271
5952
  }
5272
5953
 
5273
- function addGhostImage(dataTransfer, ghostElement, options) {
5274
- var _a, _b;
5275
- // class dockview provides to force ghost image to be drawn on a different layer and prevent weird rendering issues
5276
- addClasses(ghostElement, 'dv-dragged');
5277
- // move the element off-screen initially otherwise it may in some cases be rendered at (0,0) momentarily
5278
- ghostElement.style.top = '-9999px';
5279
- document.body.appendChild(ghostElement);
5280
- 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);
5281
- setTimeout(() => {
5282
- removeClasses(ghostElement, 'dv-dragged');
5283
- ghostElement.remove();
5284
- }, 0);
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
+ }
5285
6078
  }
5286
6079
 
5287
- class TabDragHandler extends DragHandler {
5288
- constructor(element, accessor, group, panel, disabled) {
5289
- super(element, disabled);
5290
- this.accessor = accessor;
5291
- this.group = group;
5292
- this.panel = panel;
5293
- this.panelTransfer = LocalSelectionTransfer.getInstance();
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 };
5294
6103
  }
5295
- getData(event) {
5296
- this.panelTransfer.setData([new PanelTransfer(this.accessor.id, this.group.id, this.panel.id)], PanelTransfer.prototype);
5297
- return {
5298
- dispose: () => {
5299
- this.panelTransfer.clearData(PanelTransfer.prototype);
5300
- },
5301
- };
6104
+ }
6105
+ function isCoarsePrimaryInput$2() {
6106
+ if (typeof window === 'undefined' || !window.matchMedia) {
6107
+ return false;
5302
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;
5303
6115
  }
6116
+
5304
6117
  class Tab extends CompositeDisposable {
5305
6118
  get element() {
5306
6119
  return this._element;
@@ -5311,6 +6124,7 @@
5311
6124
  this.accessor = accessor;
5312
6125
  this.group = group;
5313
6126
  this.content = undefined;
6127
+ this.panelTransfer = LocalSelectionTransfer.getInstance();
5314
6128
  this._direction = 'horizontal';
5315
6129
  this._onPointDown = new Emitter();
5316
6130
  this.onPointerDown = this._onPointDown.event;
@@ -5322,114 +6136,106 @@
5322
6136
  this.onDragStart = this._onDragStart.event;
5323
6137
  this._onDragEnd = new Emitter();
5324
6138
  this.onDragEnd = this._onDragEnd.event;
6139
+ const caps = resolveDndCapabilities(this.accessor.options);
5325
6140
  this._element = document.createElement('div');
5326
6141
  this._element.className = 'dv-tab';
5327
6142
  this._element.tabIndex = 0;
5328
- this._element.draggable = !this.accessor.options.disableDnd;
6143
+ this._element.draggable = caps.html5;
5329
6144
  toggleClass(this.element, 'dv-inactive-tab', true);
5330
- this.dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel, !!this.accessor.options.disableDnd);
5331
- 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, {
5332
6162
  acceptedTargetZones: ['left', 'right'],
5333
6163
  overlayModel: this._buildOverlayModel(),
5334
- 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) => {
5335
6193
  var _a;
5336
- if (this.group.locked) {
5337
- return false;
5338
- }
5339
- const data = getPanelData();
5340
- if (data && this.accessor.id === data.viewId) {
5341
- if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
5342
- // When smooth reorder is enabled, the Tabs
5343
- // container handles all intra-accessor drops
5344
- // (both same-group and cross-group) via
5345
- // animation. Suppress the per-tab overlay so
5346
- // the tab is dropped *beside* rather than *on*.
5347
- return false;
5348
- }
5349
- 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
+ });
5350
6202
  }
5351
- return this.group.model.canDisplayOverlay(event, position, 'tab');
5352
6203
  },
5353
- getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
5354
- });
5355
- 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);
5356
6213
  this.addDisposables(this._onPointDown, this._onTabClick, this._onDropped, this._onDragStart, this._onDragEnd, this.accessor.onDidOptionsChange(() => {
5357
- this.dropTarget.setOverlayModel(this._buildOverlayModel());
5358
- }), this.dragHandler.onDragStart((event) => {
5359
- var _a;
5360
- if (event.dataTransfer) {
5361
- const style = getComputedStyle(this.element);
5362
- const newNode = this.element.cloneNode(true);
5363
- const isVertical = this._direction === 'vertical';
5364
- /**
5365
- * Properties to skip when copying computed styles for a
5366
- * vertical tab ghost. `writing-mode` is excluded so we
5367
- * can force `horizontal-tb`. Size and margin logical
5368
- * properties are excluded because their physical meaning
5369
- * flips when writing-mode changes, which would produce
5370
- * incorrect dimensions.
5371
- */
5372
- const verticalSkip = new Set([
5373
- 'writing-mode',
5374
- 'inline-size',
5375
- 'block-size',
5376
- 'min-inline-size',
5377
- 'min-block-size',
5378
- 'max-inline-size',
5379
- 'max-block-size',
5380
- 'margin-inline',
5381
- 'margin-inline-start',
5382
- 'margin-inline-end',
5383
- 'margin-block',
5384
- 'margin-block-start',
5385
- 'margin-block-end',
5386
- 'padding-inline',
5387
- 'padding-inline-start',
5388
- 'padding-inline-end',
5389
- 'padding-block',
5390
- 'padding-block-start',
5391
- 'padding-block-end',
5392
- ]);
5393
- Array.from(style).forEach((key) => {
5394
- if (isVertical && verticalSkip.has(key)) {
5395
- return;
5396
- }
5397
- newNode.style.setProperty(key, style.getPropertyValue(key), style.getPropertyPriority(key));
5398
- });
5399
- if (isVertical) {
5400
- // Force horizontal text flow and swap the physical
5401
- // dimensions so the ghost appears as a horizontal tab.
5402
- newNode.style.setProperty('writing-mode', 'horizontal-tb');
5403
- newNode.style.setProperty('width', style.height);
5404
- newNode.style.setProperty('height', style.width);
5405
- }
5406
- newNode.style.position = 'absolute';
5407
- newNode.classList.add('dv-tab-ghost-drag');
5408
- addGhostImage(event.dataTransfer, newNode, {
5409
- y: -10,
5410
- x: 30,
5411
- });
5412
- }
5413
- this._onDragStart.fire(event);
5414
- if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
5415
- // Delay collapse to next frame so the browser
5416
- // captures the full drag image first
5417
- requestAnimationFrame(() => {
5418
- toggleClass(this.element, 'dv-tab--dragging', true);
5419
- });
5420
- }
5421
- }), 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.
5422
6220
  toggleClass(this.element, 'dv-tab--dragging', false);
5423
- this._onDragEnd.fire(event);
5424
- }), this.dragHandler, addDisposableListener(this._element, 'pointerdown', (event) => {
6221
+ }), this.html5DragSource, addDisposableListener(this._element, 'pointerdown', (event) => {
5425
6222
  this._onPointDown.fire(event);
5426
6223
  }), addDisposableListener(this._element, 'click', (event) => {
5427
6224
  this._onTabClick.fire(event);
5428
6225
  }), addDisposableListener(this._element, 'contextmenu', (event) => {
5429
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
+ },
5430
6234
  }), this.dropTarget.onDrop((event) => {
5431
6235
  this._onDropped.fire(event);
5432
- }), this.dropTarget);
6236
+ }), this.pointerDropTarget.onDrop((event) => {
6237
+ this._onDropped.fire(event);
6238
+ }), this.dropTarget, this.pointerDropTarget, this.pointerDragSource);
5433
6239
  }
5434
6240
  setActive(isActive) {
5435
6241
  toggleClass(this.element, 'dv-active-tab', isActive);
@@ -5459,11 +6265,60 @@
5459
6265
  }
5460
6266
  setDirection(direction) {
5461
6267
  this._direction = direction;
5462
- 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);
5463
6271
  }
5464
6272
  updateDragAndDropState() {
5465
- this._element.draggable = !this.accessor.options.disableDnd;
5466
- 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;
5467
6322
  }
5468
6323
  }
5469
6324
 
@@ -5471,6 +6326,7 @@
5471
6326
  get kind() {
5472
6327
  return this.options.kind;
5473
6328
  }
6329
+ /** Narrow with `instanceof DragEvent` before reading `dataTransfer`. */
5474
6330
  get nativeEvent() {
5475
6331
  return this.event.nativeEvent;
5476
6332
  }
@@ -5501,131 +6357,202 @@
5501
6357
  }
5502
6358
  }
5503
6359
 
5504
- class GroupDragHandler extends DragHandler {
5505
- constructor(element, accessor, group, disabled) {
5506
- super(element, disabled);
5507
- this.accessor = accessor;
5508
- this.group = group;
5509
- this.panelTransfer = LocalSelectionTransfer.getInstance();
5510
- this.addDisposables(addDisposableListener(element, 'pointerdown', (e) => {
5511
- if (e.shiftKey) {
5512
- /**
5513
- * You cannot call e.preventDefault() because that will prevent drag events from firing
5514
- * but we also need to stop any group overlay drag events from occuring
5515
- * Use a custom event marker that can be checked by the overlay drag events
5516
- */
5517
- quasiPreventDefault(e);
5518
- }
5519
- }, true));
5520
- }
5521
- isCancelled(_event) {
5522
- if (this.group.api.location.type === 'floating' && !_event.shiftKey) {
5523
- return true;
5524
- }
5525
- if (this.group.api.location.type === 'edge' && this.group.size === 0) {
5526
- return true;
5527
- }
5528
- return false;
5529
- }
5530
- getData(dragEvent) {
5531
- const dataTransfer = dragEvent.dataTransfer;
5532
- this.panelTransfer.setData([new PanelTransfer(this.accessor.id, this.group.id, null)], PanelTransfer.prototype);
5533
- const style = window.getComputedStyle(this.el);
5534
- const bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');
5535
- const color = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-color');
5536
- if (dataTransfer) {
5537
- const createGhost = this.accessor.options.createGroupDragGhostComponent;
5538
- let ghostElement;
5539
- let customRenderer;
5540
- if (createGhost) {
5541
- customRenderer = createGhost(this.group);
5542
- customRenderer.init({
5543
- group: this.group,
5544
- api: this.accessor.api,
5545
- });
5546
- ghostElement = customRenderer.element;
5547
- ghostElement.style.position = 'absolute';
5548
- ghostElement.style.pointerEvents = 'none';
5549
- ghostElement.style.top = '-9999px';
5550
- }
5551
- else {
5552
- ghostElement = document.createElement('div');
5553
- ghostElement.style.backgroundColor = bgColor;
5554
- ghostElement.style.color = color;
5555
- ghostElement.style.padding = '2px 8px';
5556
- ghostElement.style.height = '24px';
5557
- ghostElement.style.fontSize = '11px';
5558
- ghostElement.style.lineHeight = '20px';
5559
- ghostElement.style.borderRadius = '12px';
5560
- ghostElement.style.position = 'absolute';
5561
- ghostElement.style.pointerEvents = 'none';
5562
- ghostElement.style.top = '-9999px';
5563
- ghostElement.textContent = `Multiple Panels (${this.group.size})`;
5564
- }
5565
- addGhostImage(dataTransfer, ghostElement, { y: -10, x: 30 });
5566
- if (customRenderer === null || customRenderer === void 0 ? void 0 : customRenderer.dispose) {
5567
- // addGhostImage removes the element from the DOM on the next
5568
- // tick; dispose the framework renderer on the same schedule.
5569
- const renderer = customRenderer;
5570
- setTimeout(() => { var _a; return (_a = renderer.dispose) === null || _a === void 0 ? void 0 : _a.call(renderer); }, 0);
5571
- }
5572
- }
5573
- return {
5574
- dispose: () => {
5575
- this.panelTransfer.clearData(PanelTransfer.prototype);
5576
- },
5577
- };
5578
- }
5579
- }
5580
-
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;
5581
6365
  class VoidContainer extends CompositeDisposable {
5582
6366
  get element() {
5583
6367
  return this._element;
5584
6368
  }
5585
6369
  constructor(accessor, group) {
6370
+ var _a, _b;
5586
6371
  super();
5587
6372
  this.accessor = accessor;
5588
6373
  this.group = group;
6374
+ this.panelTransfer = LocalSelectionTransfer.getInstance();
5589
6375
  this._onDrop = new Emitter();
5590
6376
  this.onDrop = this._onDrop.event;
5591
6377
  this._onDragStart = new Emitter();
5592
6378
  this.onDragStart = this._onDragStart.event;
6379
+ const caps = resolveDndCapabilities(this.accessor.options);
5593
6380
  this._element = document.createElement('div');
5594
6381
  this._element.className = 'dv-void-container';
5595
- this._element.draggable = !this.accessor.options.disableDnd;
5596
- 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);
5597
6384
  this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'pointerdown', () => {
5598
6385
  this.accessor.doSetGroupActive(this.group);
5599
- }));
5600
- this.handler = new GroupDragHandler(this._element, accessor, group, !!this.accessor.options.disableDnd);
5601
- 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, {
5602
6411
  acceptedTargetZones: ['center'],
5603
- canDisplayOverlay: (event, position) => {
5604
- if (this.group.api.locked) {
5605
- // Dropping on the void/header space adds the panel
5606
- // to this group, which `locked` is meant to prevent
5607
- // (both `true` and `'no-drop-target'`).
5608
- return false;
6412
+ canDisplayOverlay,
6413
+ getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
6414
+ });
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;
5609
6485
  }
5610
- const data = getPanelData();
5611
- if (data && this.accessor.id === data.viewId) {
6486
+ if (this.group.api.location.type === 'edge' &&
6487
+ this.group.size === 0) {
5612
6488
  return true;
5613
6489
  }
5614
- return group.model.canDisplayOverlay(event, position, 'header_space');
5615
- },
5616
- getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
5617
- });
5618
- this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
5619
- this.addDisposables(this.handler, this.handler.onDragStart((event) => {
5620
- this._onDragStart.fire(event);
5621
- }), this.dropTarget.onDrop((event) => {
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) => {
5622
6537
  this._onDrop.fire(event);
5623
- }), this.dropTarget);
6538
+ }), this.pointerDropTarget.onDrop((event) => {
6539
+ this._onDrop.fire(event);
6540
+ }), this.dropTarget, this.pointerDropTarget, this.pointerDragSource);
5624
6541
  }
5625
6542
  updateDragAndDropState() {
5626
- this._element.draggable = !this.accessor.options.disableDnd;
5627
- toggleClass(this._element, 'dv-draggable', !this.accessor.options.disableDnd);
5628
- 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;
5629
6556
  }
5630
6557
  }
5631
6558
 
@@ -5881,6 +6808,14 @@
5881
6808
  return (palette !== null && palette !== void 0 ? palette : getFallbackPalette()).resolveValue(color);
5882
6809
  }
5883
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
+ */
5884
6819
  class TabGroupChip extends CompositeDisposable {
5885
6820
  get element() {
5886
6821
  return this._element;
@@ -5891,22 +6826,22 @@
5891
6826
  this._onClick = new Emitter();
5892
6827
  this.onClick = this._onClick.event;
5893
6828
  this._onContextMenu = new Emitter();
6829
+ /** Fires on right-click and on touch long-press. */
5894
6830
  this.onContextMenu = this._onContextMenu.event;
5895
- this._onDragStart = new Emitter();
5896
- this.onDragStart = this._onDragStart.event;
5897
6831
  this._element = document.createElement('div');
5898
6832
  this._element.className = 'dv-tab-group-chip';
5899
6833
  this._element.tabIndex = 0;
5900
- this._element.draggable = true;
5901
6834
  this._label = document.createElement('span');
5902
6835
  this._label.className = 'dv-tab-group-chip-label';
5903
6836
  this._element.appendChild(this._label);
5904
- 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) => {
5905
6842
  this._onClick.fire(event);
5906
6843
  }), addDisposableListener(this._element, 'contextmenu', (event) => {
5907
6844
  this._onContextMenu.fire(event);
5908
- }), addDisposableListener(this._element, 'dragstart', (event) => {
5909
- this._onDragStart.fire(event);
5910
6845
  }));
5911
6846
  }
5912
6847
  init(params) {
@@ -6370,6 +7305,12 @@
6370
7305
  this._positionChipForGroup(tabGroup);
6371
7306
  }
6372
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
+ }
6373
7314
  snapshotChipWidths() {
6374
7315
  const widths = new Map();
6375
7316
  for (const [groupId, entry] of this._chipRenderers) {
@@ -6463,6 +7404,45 @@
6463
7404
  (_a = this._pendingTransitionCleanups.get(panelId)) === null || _a === void 0 ? void 0 : _a();
6464
7405
  this._pendingTransitionCleanups.delete(panelId);
6465
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
+ }
6466
7446
  disposeAll() {
6467
7447
  var _a;
6468
7448
  (_a = this._indicator) === null || _a === void 0 ? void 0 : _a.dispose();
@@ -6508,6 +7488,74 @@
6508
7488
  ? createChip(tabGroup)
6509
7489
  : new TabGroupChip(this._ctx.accessor.tabGroupColorPalette);
6510
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
+ });
6511
7559
  const disposables = [
6512
7560
  tabGroup.onDidChange(() => {
6513
7561
  var _a;
@@ -6521,24 +7569,70 @@
6521
7569
  tabGroup.onDidCollapseChange(() => {
6522
7570
  this._updateTabGroupClasses();
6523
7571
  }),
7572
+ html5DragSource,
7573
+ pointerDragSource,
6524
7574
  ];
6525
- // 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
+ };
6526
7585
  if (chip instanceof TabGroupChip) {
6527
- disposables.push(chip.onContextMenu((event) => {
6528
- this._callbacks.onChipContextMenu(tabGroup, event);
6529
- }), chip.onDragStart((event) => {
6530
- this._callbacks.onChipDragStart(tabGroup, chip, event);
6531
- }));
7586
+ disposables.push(chip.onContextMenu(onContextMenu));
6532
7587
  }
6533
7588
  else {
6534
- disposables.push(addDisposableListener(chip.element, 'contextmenu', (event) => {
6535
- this._callbacks.onChipContextMenu(tabGroup, event);
6536
- }), addDisposableListener(chip.element, 'dragstart', (event) => {
6537
- this._callbacks.onChipDragStart(tabGroup, chip, event);
6538
- }));
6539
- }
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
+ }));
6540
7628
  const disposable = new CompositeDisposable(...disposables);
6541
- this._chipRenderers.set(tabGroup.id, { chip, disposable });
7629
+ this._chipRenderers.set(tabGroup.id, {
7630
+ chip,
7631
+ html5DragSource,
7632
+ pointerDragSource,
7633
+ disposable,
7634
+ dropTarget,
7635
+ });
6542
7636
  // Group is born collapsed (cross-group drop, layout restore, etc.):
6543
7637
  // its tabs are about to be added without the collapsed class. Skip
6544
7638
  // the animation in the upcoming _updateTabGroupClasses call so they
@@ -6797,6 +7891,7 @@
6797
7891
  for (const tab of this._tabs) {
6798
7892
  tab.value.setDirection(value);
6799
7893
  }
7894
+ this._tabGroupManager.updateDirection();
6800
7895
  }
6801
7896
  constructor(group, accessor, options) {
6802
7897
  super();
@@ -6816,7 +7911,7 @@
6816
7911
  this._voidContainer = null;
6817
7912
  this._voidContainerListeners = null;
6818
7913
  this._extendedDropZone = null;
6819
- this._chipDragCleanup = null;
7914
+ this._pointerInsideTabsList = false;
6820
7915
  this._onTabDragStart = new Emitter();
6821
7916
  this.onTabDragStart = this._onTabDragStart.event;
6822
7917
  this._onDrop = new Emitter();
@@ -6851,13 +7946,40 @@
6851
7946
  onChipDragStart: (tabGroup, chip, event) => {
6852
7947
  this._handleChipDragStart(tabGroup, chip, event);
6853
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
+ },
6854
7962
  });
6855
7963
  this.addDisposables(this._onOverflowTabsChange, this._observerDisposable, this._onWillShowOverlay, this._onDrop, this._onTabDragStart, {
6856
7964
  dispose: () => {
6857
7965
  var _a;
6858
7966
  (_a = this._flipTransitionCleanup) === null || _a === void 0 ? void 0 : _a.call(this);
6859
7967
  },
6860
- }, 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) => {
6861
7983
  if (event.defaultPrevented) {
6862
7984
  return;
6863
7985
  }
@@ -6865,135 +7987,60 @@
6865
7987
  if (isLeftClick) {
6866
7988
  this.accessor.doSetGroupActive(this.group);
6867
7989
  }
6868
- }), addDisposableListener(this._tabsList, 'dragover', (event) => {
6869
- var _a, _b, _c, _d;
6870
- if (this.accessor.options.disableDnd) {
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) {
6871
8006
  return;
6872
8007
  }
6873
- // If _animState exists but belongs to a different
6874
- // drag (stale from a previous operation), replace it
6875
- // so the current drag is handled correctly.
6876
- if (this._animState) {
6877
- const data = getPanelData();
6878
- if ((data === null || data === void 0 ? void 0 : data.tabGroupId) &&
6879
- data.groupId !== this.group.id &&
6880
- this._animState.sourceTabGroupId !== data.tabGroupId) {
6881
- this._animState = null;
6882
- }
6883
- }
6884
- if (!this._animState) {
6885
- const data = getPanelData();
6886
- // In default animation mode, individual tab drops
6887
- // are handled by per-tab Droptargets. But tab group
6888
- // chip drags still need tab-list-level handling so
6889
- // that drops on gaps / void space work.
6890
- if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) ===
6891
- 'default' &&
6892
- !(data === null || data === void 0 ? void 0 : data.tabGroupId)) {
6893
- return;
6894
- }
6895
- if (data &&
6896
- (data.panelId || data.tabGroupId) &&
6897
- data.groupId !== this.group.id) {
6898
- const avgWidth = this.getAverageTabWidth();
6899
- if (data.tabGroupId) {
6900
- // External group drag — look up the
6901
- // source tab group to size the gap
6902
- const sourceGroup = this.accessor.getPanel(data.groupId);
6903
- const sourceTg = sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.getTabGroups().find((tg) => tg.id === data.tabGroupId);
6904
- const panelCount = (_b = sourceTg === null || sourceTg === void 0 ? void 0 : sourceTg.panelIds.length) !== null && _b !== void 0 ? _b : 1;
6905
- const groupGapWidth = avgWidth * panelCount + avgWidth;
6906
- this._animState = {
6907
- sourceTabId: '',
6908
- sourceIndex: -1,
6909
- tabPositions: this.snapshotTabPositions(),
6910
- chipPositions: this._tabGroupManager.snapshotChipWidths(),
6911
- currentInsertionIndex: null,
6912
- targetTabGroupId: null,
6913
- sourceTabGroupId: data.tabGroupId,
6914
- sourceGroupPanelIds: sourceTg
6915
- ? new Set(sourceTg.panelIds)
6916
- : new Set(),
6917
- sourceChipWidth: avgWidth,
6918
- cursorOffsetFromDragLeft: groupGapWidth / 2,
6919
- sourceGapWidth: groupGapWidth,
6920
- containerLeft: this._tabsList.getBoundingClientRect()
6921
- .left,
6922
- };
6923
- }
6924
- else {
6925
- this._animState = {
6926
- sourceTabId: data.panelId,
6927
- sourceIndex: -1,
6928
- tabPositions: this.snapshotTabPositions(),
6929
- chipPositions: this._tabGroupManager.snapshotChipWidths(),
6930
- currentInsertionIndex: null,
6931
- targetTabGroupId: null,
6932
- sourceTabGroupId: null,
6933
- sourceGroupPanelIds: null,
6934
- sourceChipWidth: 0,
6935
- cursorOffsetFromDragLeft: avgWidth / 2,
6936
- sourceGapWidth: avgWidth,
6937
- containerLeft: this._tabsList.getBoundingClientRect()
6938
- .left,
6939
- };
6940
- }
6941
- }
6942
- else {
6943
- return;
6944
- }
6945
- }
6946
- event.preventDefault(); // allow drop to fire on the container
6947
- // For intra-group drag (sourceIndex >= 0) the gap
6948
- // animation is the sole visual indicator — clear any
6949
- // stale anchor overlay that may have been set while the
6950
- // cursor was over the panel content area or another zone.
6951
- // External drags (sourceIndex === -1) leave the overlay
6952
- // to the individual tab Droptargets so cross-group
6953
- // animation is not disrupted.
6954
- if (this._animState.sourceIndex !== -1) {
6955
- (_d = (_c = this.group.model.dropTargetContainer) === null || _c === void 0 ? void 0 : _c.model) === null || _d === void 0 ? void 0 : _d.clear();
6956
- }
6957
- this.handleDragOver(event);
6958
- }, true), addDisposableListener(this._tabsList, 'dragleave', (event) => {
6959
- var _a, _b, _c;
6960
- if (!this._animState) {
8008
+ const max = isVertical
8009
+ ? this._tabsList.scrollHeight -
8010
+ this._tabsList.clientHeight
8011
+ : this._tabsList.scrollWidth -
8012
+ this._tabsList.clientWidth;
8013
+ if (max <= 0) {
6961
8014
  return;
6962
8015
  }
6963
- const related = event.relatedTarget;
6964
- // Ignore moves between children of the tabs list
6965
- if (related && this._tabsList.contains(related)) {
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)) {
6966
8023
  return;
6967
8024
  }
6968
- // If moving into the broader drop zone (e.g. void container,
6969
- // left actions), keep _animState alive so the external
6970
- // dragover listeners can continue the gap animation.
6971
- if (related && ((_a = this._extendedDropZone) === null || _a === void 0 ? void 0 : _a.contains(related))) {
6972
- this.resetTabTransforms();
6973
- this._animState.currentInsertionIndex = null;
6974
- return;
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;
6975
8033
  }
6976
- // When leaving toward the void container (empty header space
6977
- // to the right), keep the animation state so the drop can
6978
- // still land at the end position.
6979
- const rt = event.relatedTarget;
6980
- const isVoid = this._voidContainer &&
6981
- rt &&
6982
- (rt === this._voidContainer ||
6983
- this._voidContainer.contains(rt));
6984
- if (isVoid) {
6985
- return;
8034
+ else {
8035
+ this._tabsList.scrollLeft = current + primary;
6986
8036
  }
6987
- this.resetTabTransforms();
6988
- if (this._animState) {
6989
- if (this._animState.sourceIndex === -1) {
6990
- (_c = (_b = this.group.model.dropTargetContainer) === null || _b === void 0 ? void 0 : _b.model) === null || _c === void 0 ? void 0 : _c.clear();
6991
- this._animState = null;
6992
- }
6993
- else {
6994
- this._animState.currentInsertionIndex = null;
6995
- }
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();
6996
8041
  }
8042
+ }, true), addDisposableListener(this._tabsList, 'dragleave', (event) => {
8043
+ this._processDragLeave(event.relatedTarget);
6997
8044
  }, true), addDisposableListener(this._tabsList, 'dragend', () => {
6998
8045
  this.resetDragAnimation();
6999
8046
  }), addDisposableListener(this._tabsList, 'drop', (event) => {
@@ -7115,6 +8162,9 @@
7115
8162
  const disposable = new CompositeDisposable(tab.onDragStart((event) => {
7116
8163
  var _a;
7117
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.
7118
8168
  if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
7119
8169
  const tabWidth = tab.element.getBoundingClientRect().width;
7120
8170
  const sourceIndex = this._tabs.findIndex((x) => x.value === tab);
@@ -7374,6 +8424,7 @@
7374
8424
  for (const tab of this._tabs) {
7375
8425
  tab.value.updateDragAndDropState();
7376
8426
  }
8427
+ this._tabGroupManager.updateDragAndDropState();
7377
8428
  }
7378
8429
  /**
7379
8430
  * Synchronize chip elements and CSS classes for all tab groups
@@ -7385,6 +8436,13 @@
7385
8436
  refreshTabGroupAccent() {
7386
8437
  this._tabGroupManager.refreshAccents();
7387
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
+ */
7388
8446
  _handleChipDragStart(tabGroup, chip, event) {
7389
8447
  var _a;
7390
8448
  const firstPanelId = tabGroup.panelIds[0];
@@ -7415,89 +8473,79 @@
7415
8473
  sourceGapWidth: groupGapWidth,
7416
8474
  containerLeft: this._tabsList.getBoundingClientRect().left,
7417
8475
  };
7418
- // Set LocalSelectionTransfer so drop targets recognise this as
7419
- // an internal dockview drag. panelId is null (group-level),
7420
- // tabGroupId identifies which tab group is being dragged.
7421
- const panelTransfer = LocalSelectionTransfer.getInstance();
7422
- panelTransfer.setData([
7423
- new PanelTransfer(this.accessor.id, this.group.id, null, tabGroup.id),
7424
- ], PanelTransfer.prototype);
7425
- const iframes = disableIframePointEvents();
7426
- // The dragend listener on `_tabsList` is unreachable for chip
7427
- // drags because cross-group drops detach the chip from the DOM
7428
- // before dragend fires (the source tab group becomes empty, so
7429
- // `_positionChipForGroup` removes the chip element). Without
7430
- // bubbling, the tabsList listener never runs and `_animState`,
7431
- // `_chipDragCleanup`, and the dragging CSS classes leak. Listen
7432
- // directly on the chip element so cleanup happens regardless of
7433
- // whether it's still attached. (Issue #1254.)
7434
- const chipElement = chip.element;
7435
- const onChipDragEnd = () => {
7436
- chipElement.removeEventListener('dragend', onChipDragEnd);
7437
- this.resetDragAnimation();
7438
- };
7439
- chipElement.addEventListener('dragend', onChipDragEnd);
7440
- this._chipDragCleanup = {
7441
- dispose: () => {
7442
- chipElement.removeEventListener('dragend', onChipDragEnd);
7443
- panelTransfer.clearData(PanelTransfer.prototype);
7444
- iframes.release();
7445
- },
7446
- };
7447
- if (event.dataTransfer) {
7448
- event.dataTransfer.effectAllowed = 'move';
7449
- if (event.dataTransfer.items.length === 0) {
7450
- event.dataTransfer.setData('text/plain', '');
7451
- }
7452
- }
7453
- if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
7454
- // Collapse group tabs + chip after the browser
7455
- // captures the drag image, then open the gap at the
7456
- // source position — all instant (no transitions).
7457
- const groupPanelIds = new Set(tabGroup.panelIds);
7458
- this._pendingCollapse = true;
7459
- requestAnimationFrame(() => {
7460
- var _a;
7461
- var _b;
7462
- this._pendingCollapse = false;
7463
- if (!this._animState) {
7464
- return;
7465
- }
7466
- // Collapse all group tabs instantly
7467
- for (const t of this._tabs) {
7468
- if (groupPanelIds.has(t.value.panel.id)) {
7469
- t.value.element.style.transition = 'none';
7470
- toggleClass(t.value.element, 'dv-tab--dragging', true);
7471
- }
7472
- }
7473
- // Collapse the group chip instantly
7474
- const chipEntry = this._tabGroupManager.chipRenderers.get(tabGroup.id);
7475
- if (chipEntry) {
7476
- chipEntry.chip.element.style.transition = 'none';
7477
- toggleClass(chipEntry.chip.element, 'dv-tab-group-chip--dragging', true);
7478
- }
7479
- // Single reflow for the entire batch
7480
- void this._tabsList.offsetHeight;
7481
- const underline = this._tabGroupManager.groupUnderlines.get(tabGroup.id);
7482
- if (underline) {
7483
- underline.style.display = 'none';
7484
- }
7485
- (_a = (_b = this._animState).currentInsertionIndex) !== null && _a !== void 0 ? _a : (_b.currentInsertionIndex = firstIdx);
7486
- // Apply gap with transitions disabled
7487
- this.applyDragOverTransforms(true);
7488
- // Re-enable transitions for subsequent moves
7489
- for (const t of this._tabs) {
7490
- if (groupPanelIds.has(t.value.panel.id)) {
7491
- t.value.element.style.removeProperty('transition');
7492
- }
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);
7493
8496
  }
7494
- if (chipEntry) {
7495
- 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');
7496
8515
  }
7497
- });
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;
7498
8537
  }
7499
- // Build a composite drag image showing chip + group tabs
7500
- 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
+ });
7501
8549
  }
7502
8550
  /**
7503
8551
  * Sets the broader container that is part of the same logical drop surface
@@ -7559,6 +8607,164 @@
7559
8607
  }
7560
8608
  return total / this._tabs.length;
7561
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
+ }
7562
8768
  handleDragOver(event) {
7563
8769
  var _a, _b, _c, _d, _e;
7564
8770
  if (!this._animState) {
@@ -7968,20 +9174,23 @@
7968
9174
  * in the model, and run a FLIP animation.
7969
9175
  */
7970
9176
  _commitGroupMove(sourceTabGroupId, insertionIndex) {
7971
- var _a, _b, _c;
7972
- // Read transfer data BEFORE disposing cleanup — disposing
7973
- // _chipDragCleanup clears the global LocalSelectionTransfer
7974
- // singleton which getPanelData() reads from.
9177
+ var _a, _b;
9178
+ // Read transfer data first.
7975
9179
  const data = getPanelData();
7976
- (_a = this._chipDragCleanup) === null || _a === void 0 ? void 0 : _a.dispose();
7977
- 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);
7978
9187
  // Check if the tab group exists in this group (within-group reorder)
7979
9188
  // or in another group (cross-group move).
7980
9189
  const isLocal = this.group.model
7981
9190
  .getTabGroups()
7982
9191
  .some((tg) => tg.id === sourceTabGroupId);
7983
9192
  if (isLocal) {
7984
- 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') {
7985
9194
  this._clearGroupDragClasses(sourceTabGroupId);
7986
9195
  const firstPositions = this.snapshotTabPositions();
7987
9196
  this.resetTabTransforms();
@@ -8009,7 +9218,7 @@
8009
9218
  this.accessor.moveGroupOrPanel({
8010
9219
  from: {
8011
9220
  groupId: data.groupId,
8012
- tabGroupId: (_c = data.tabGroupId) !== null && _c !== void 0 ? _c : sourceTabGroupId,
9221
+ tabGroupId: (_b = data.tabGroupId) !== null && _b !== void 0 ? _b : sourceTabGroupId,
8013
9222
  },
8014
9223
  to: {
8015
9224
  group: this.group,
@@ -8037,22 +9246,27 @@
8037
9246
  this._tabGroupManager.skipNextCollapseAnimation = true;
8038
9247
  }
8039
9248
  resetDragAnimation() {
8040
- var _a, _b;
8041
9249
  this._pendingCollapse = false;
8042
- this.resetTabTransforms();
8043
- // Clear drag-collapse classes instantly (no transition)
8044
- if ((_a = this._animState) === null || _a === void 0 ? void 0 : _a.sourceTabGroupId) {
8045
- this._clearGroupDragClasses(this._animState.sourceTabGroupId);
8046
- }
8047
- else {
8048
- this._removeClassInstantlyBatch(this._tabs.map((t) => t.value.element), 'dv-tab--dragging');
8049
- }
8050
- this._animState = null;
8051
- (_b = this._chipDragCleanup) === null || _b === void 0 ? void 0 : _b.dispose();
8052
- this._chipDragCleanup = null;
8053
- // Restore any hidden underlines from group drags
8054
- for (const [, el] of this._tabGroupManager.groupUnderlines) {
8055
- 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
+ }
8056
9270
  }
8057
9271
  }
8058
9272
  runFlipAnimation(firstPositions, sourceTabId, isCrossGroup = false, animRange) {
@@ -8552,6 +9766,7 @@
8552
9766
  rootOverlayModel: undefined,
8553
9767
  locked: undefined,
8554
9768
  disableDnd: undefined,
9769
+ dndStrategy: undefined,
8555
9770
  className: undefined,
8556
9771
  noPanelsOverlay: undefined,
8557
9772
  dndEdges: undefined,
@@ -8736,6 +9951,10 @@
8736
9951
  }
8737
9952
 
8738
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
+ */
8739
9958
  get nativeEvent() {
8740
9959
  return this.options.nativeEvent;
8741
9960
  }
@@ -8840,29 +10059,28 @@
8840
10059
  toggleClass(this.container, 'dv-groupview-floating', false);
8841
10060
  toggleClass(this.container, 'dv-groupview-popout', false);
8842
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
+ };
8843
10067
  switch (value.type) {
8844
10068
  case 'grid':
8845
- this.contentContainer.dropTarget.setTargetZones([
8846
- 'top',
8847
- 'bottom',
8848
- 'left',
8849
- 'right',
8850
- 'center',
8851
- ]);
10069
+ applyZones(['top', 'bottom', 'left', 'right', 'center']);
8852
10070
  break;
8853
10071
  case 'floating':
8854
- this.contentContainer.dropTarget.setTargetZones(['center']);
8855
- this.contentContainer.dropTarget.setTargetZones(value
10072
+ applyZones(['center']);
10073
+ applyZones(value
8856
10074
  ? ['center']
8857
10075
  : ['top', 'bottom', 'left', 'right', 'center']);
8858
10076
  toggleClass(this.container, 'dv-groupview-floating', true);
8859
10077
  break;
8860
10078
  case 'popout':
8861
- this.contentContainer.dropTarget.setTargetZones(['center']);
10079
+ applyZones(['center']);
8862
10080
  toggleClass(this.container, 'dv-groupview-popout', true);
8863
10081
  break;
8864
10082
  case 'edge':
8865
- this.contentContainer.dropTarget.setTargetZones(['center']);
10083
+ applyZones(['center']);
8866
10084
  toggleClass(this.container, 'dv-groupview-edge', true);
8867
10085
  break;
8868
10086
  }
@@ -8988,6 +10206,8 @@
8988
10206
  // noop
8989
10207
  }), this.contentContainer.dropTarget.onDrop((event) => {
8990
10208
  this.handleDropEvent('content', event.nativeEvent, event.position);
10209
+ }), this.contentContainer.pointerDropTarget.onDrop((event) => {
10210
+ this.handleDropEvent('content', event.nativeEvent, event.position);
8991
10211
  }), this.tabsContainer.onWillShowOverlay((event) => {
8992
10212
  this._onWillShowOverlay.fire(event);
8993
10213
  }), this.contentContainer.dropTarget.onWillShowOverlay((event) => {
@@ -8998,6 +10218,14 @@
8998
10218
  group: this.groupPanel,
8999
10219
  getData: getPanelData,
9000
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
+ }));
9001
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(() => {
9002
10230
  this._scheduleTabGroupUpdate();
9003
10231
  }), this._onDidDestroyTabGroup.event(() => {
@@ -11001,7 +12229,12 @@
11001
12229
  this.onDidChange = this._onDidChange.event;
11002
12230
  this._onDidChangeEnd = new Emitter();
11003
12231
  this.onDidChangeEnd = this._onDidChangeEnd.event;
11004
- 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);
11005
12238
  this._element.className = 'dv-resize-container';
11006
12239
  this._isVisible = true;
11007
12240
  this.setupResize('top');
@@ -11110,16 +12343,60 @@
11110
12343
  result.height = element.height;
11111
12344
  return result;
11112
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
+ }
11113
12360
  setupDrag(dragTarget, options = { inDragMode: false }) {
11114
- const move = new MutableDisposable();
11115
- const track = () => {
12361
+ const track = (captureTarget, pointerId) => {
11116
12362
  let offset = null;
12363
+ let hasMoved = false;
12364
+ this._dragCancelled = false;
11117
12365
  const iframes = disableIframePointEvents();
11118
- 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({
11119
12382
  dispose: () => {
11120
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
+ }
11121
12395
  },
11122
12396
  }, addDisposableListener(window, 'pointermove', (e) => {
12397
+ if (this._dragCancelled) {
12398
+ return;
12399
+ }
11123
12400
  const containerRect = this.options.container.getBoundingClientRect();
11124
12401
  const x = e.clientX - containerRect.left;
11125
12402
  const y = e.clientY - containerRect.top;
@@ -11156,13 +12433,13 @@
11156
12433
  bounds.right = right;
11157
12434
  }
11158
12435
  this.setBounds(bounds);
11159
- }), addDisposableListener(window, 'pointerup', () => {
11160
- toggleClass(this._element, 'dv-resize-container-dragging', false);
11161
- move.dispose();
11162
- this._onDidChangeEnd.fire();
11163
- }));
12436
+ if (!hasMoved) {
12437
+ hasMoved = true;
12438
+ this._onDidStartMoving.fire();
12439
+ }
12440
+ }), addDisposableListener(window, 'pointerup', end), addDisposableListener(window, 'pointercancel', end));
11164
12441
  };
11165
- this.addDisposables(move, addDisposableListener(dragTarget, 'pointerdown', (event) => {
12442
+ this.addDisposables(addDisposableListener(dragTarget, 'pointerdown', (event) => {
11166
12443
  if (event.defaultPrevented) {
11167
12444
  event.preventDefault();
11168
12445
  return;
@@ -11172,7 +12449,7 @@
11172
12449
  if (quasiDefaultPrevented(event)) {
11173
12450
  return;
11174
12451
  }
11175
- track();
12452
+ track(dragTarget, event.pointerId);
11176
12453
  }), addDisposableListener(this.options.content, 'pointerdown', (event) => {
11177
12454
  if (event.defaultPrevented) {
11178
12455
  return;
@@ -11183,7 +12460,7 @@
11183
12460
  return;
11184
12461
  }
11185
12462
  if (event.shiftKey) {
11186
- track();
12463
+ track(this.options.content, event.pointerId);
11187
12464
  }
11188
12465
  }), addDisposableListener(this.options.content, 'pointerdown', () => {
11189
12466
  arialLevelTracker.push(this._element);
@@ -11201,6 +12478,19 @@
11201
12478
  e.preventDefault();
11202
12479
  let startPosition = null;
11203
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
+ };
11204
12494
  move.value = new CompositeDisposable(addDisposableListener(window, 'pointermove', (e) => {
11205
12495
  const containerRect = this.options.container.getBoundingClientRect();
11206
12496
  const overlayRect = this._element.getBoundingClientRect();
@@ -11335,11 +12625,17 @@
11335
12625
  }), {
11336
12626
  dispose: () => {
11337
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
+ }
11338
12637
  },
11339
- }, addDisposableListener(window, 'pointerup', () => {
11340
- move.dispose();
11341
- this._onDidChangeEnd.fire();
11342
- }));
12638
+ }, addDisposableListener(window, 'pointerup', end), addDisposableListener(window, 'pointercancel', end));
11343
12639
  }));
11344
12640
  }
11345
12641
  getMinimumWidth(width) {
@@ -11864,6 +13160,14 @@
11864
13160
  }
11865
13161
  }
11866
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
+ }
11867
13171
  class PopupService extends CompositeDisposable {
11868
13172
  constructor(root, win = window) {
11869
13173
  super();
@@ -11902,8 +13206,22 @@
11902
13206
  wrapper.style.left = `${position.x - offsetX}px`;
11903
13207
  this._element.appendChild(wrapper);
11904
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;
11905
13220
  this._activeDisposable.value = new CompositeDisposable(addDisposableListener(this._window, 'pointerdown', (event) => {
11906
13221
  var _a;
13222
+ if (Date.now() - openedAt < POINTERDOWN_GRACE_MS) {
13223
+ return;
13224
+ }
11907
13225
  const target = event.target;
11908
13226
  if (!(target instanceof HTMLElement)) {
11909
13227
  return;
@@ -11921,6 +13239,18 @@
11921
13239
  this.close();
11922
13240
  }
11923
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
+ }
11924
13254
  this.close();
11925
13255
  }));
11926
13256
  this._window.requestAnimationFrame(() => {
@@ -11977,6 +13307,14 @@
11977
13307
  el.setAttribute('role', 'separator');
11978
13308
  return el;
11979
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
+ }
11980
13318
  function buildRenameInput(tabGroup) {
11981
13319
  const wrapper = document.createElement('div');
11982
13320
  wrapper.className = 'dv-context-menu-rename';
@@ -11997,10 +13335,17 @@
11997
13335
  e.stopPropagation();
11998
13336
  });
11999
13337
  wrapper.appendChild(input);
12000
- requestAnimationFrame(() => {
12001
- input.focus();
12002
- input.select();
12003
- });
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
+ }
12004
13349
  return wrapper;
12005
13350
  }
12006
13351
  function buildColorPicker(tabGroup, palette) {
@@ -12915,7 +14260,7 @@
12915
14260
  return this._popoutRestorationPromise;
12916
14261
  }
12917
14262
  constructor(container, options) {
12918
- var _a, _b, _c, _d, _e, _f;
14263
+ var _a, _b, _c, _d, _e, _f, _g;
12919
14264
  super(container, {
12920
14265
  proportionalLayout: true,
12921
14266
  orientation: exports.Orientation.HORIZONTAL,
@@ -13014,37 +14359,51 @@
13014
14359
  this._floatingOverlayHost = document.createElement('div');
13015
14360
  this._floatingOverlayHost.className = 'dv-floating-overlay-host';
13016
14361
  this._shellManager.element.appendChild(this._floatingOverlayHost);
13017
- this._rootDropTarget = new Droptarget(this.element, {
13018
- className: 'dv-drop-target-edge',
13019
- canDisplayOverlay: (event, position) => {
13020
- const data = getPanelData();
13021
- if (data) {
13022
- if (data.viewId !== this.id) {
13023
- return false;
13024
- }
13025
- if (position === 'center') {
13026
- // center drop target is only allowed if there are no panels in the grid
13027
- // floating panels are allowed
13028
- return this.gridview.length === 0;
13029
- }
13030
- return true;
13031
- }
13032
- if (position === 'center' && this.gridview.length !== 0) {
13033
- /**
13034
- * for external events only show the four-corner drag overlays, disable
13035
- * the center position so that external drag events can fall through to the group
13036
- * and panel drop target handlers
13037
- */
14362
+ const rootCanDisplayOverlay = (event, position) => {
14363
+ const data = getPanelData();
14364
+ if (data) {
14365
+ if (data.viewId !== this.id) {
13038
14366
  return false;
13039
14367
  }
13040
- const firedEvent = new DockviewUnhandledDragOverEvent(event, 'edge', position, getPanelData);
13041
- this._onUnhandledDragOverEvent.fire(firedEvent);
13042
- return firedEvent.isAccepted;
13043
- },
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,
13044
14390
  acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
13045
14391
  overlayModel: (_f = options.rootOverlayModel) !== null && _f !== void 0 ? _f : DEFAULT_ROOT_OVERLAY_MODEL,
13046
14392
  getOverrideTarget: () => { var _a; return (_a = this.rootDropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
13047
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
+ });
13048
14407
  this.updateDropTargetModel(options);
13049
14408
  toggleClass(this.gridview.element, 'dv-dockview', true);
13050
14409
  toggleClass(this.element, 'dv-debug', !!options.debug);
@@ -13106,7 +14465,7 @@
13106
14465
  d.dispose();
13107
14466
  }
13108
14467
  this._edgeGroupDisposables.clear();
13109
- }), this._rootDropTarget, this._rootDropTarget.onWillShowOverlay((event) => {
14468
+ }), this._rootDropTarget, this._rootPointerDropTarget, exports.DockviewEvent.any(this._rootDropTarget.onWillShowOverlay, this._rootPointerDropTarget.onWillShowOverlay)((event) => {
13110
14469
  if (this.gridview.length > 0 && event.position === 'center') {
13111
14470
  // option only available when no panels in primary grid
13112
14471
  return;
@@ -13118,7 +14477,7 @@
13118
14477
  group: undefined,
13119
14478
  getData: getPanelData,
13120
14479
  }));
13121
- }), this._rootDropTarget.onDrop((event) => {
14480
+ }), exports.DockviewEvent.any(this._rootDropTarget.onDrop, this._rootPointerDropTarget.onDrop)((event) => {
13122
14481
  var _a;
13123
14482
  const willDropEvent = new DockviewWillDropEvent({
13124
14483
  nativeEvent: event.nativeEvent,
@@ -13156,7 +14515,7 @@
13156
14515
  getData: getPanelData,
13157
14516
  }));
13158
14517
  }
13159
- }), this._rootDropTarget);
14518
+ }));
13160
14519
  }
13161
14520
  setVisible(panel, visible) {
13162
14521
  switch (panel.api.location.type) {
@@ -13668,9 +15027,12 @@
13668
15027
  }
13669
15028
  this.updateDropTargetModel(options);
13670
15029
  const oldDisableDnd = this.options.disableDnd;
15030
+ const oldDndStrategy = this.options.dndStrategy;
13671
15031
  this._options = Object.assign(Object.assign({}, this.options), options);
13672
15032
  const newDisableDnd = this.options.disableDnd;
13673
- if (oldDisableDnd !== newDisableDnd) {
15033
+ const newDndStrategy = this.options.dndStrategy;
15034
+ if (oldDisableDnd !== newDisableDnd ||
15035
+ oldDndStrategy !== newDndStrategy) {
13674
15036
  this.updateDragAndDropState();
13675
15037
  }
13676
15038
  if ('theme' in options) {
@@ -15234,15 +16596,18 @@
15234
16596
  }
15235
16597
  updateDropTargetModel(options) {
15236
16598
  if ('dndEdges' in options) {
15237
- this._rootDropTarget.disabled =
15238
- typeof options.dndEdges === 'boolean' &&
15239
- options.dndEdges === false;
16599
+ const disabled = typeof options.dndEdges === 'boolean' &&
16600
+ options.dndEdges === false;
16601
+ this._rootDropTarget.disabled = disabled;
16602
+ this._rootPointerDropTarget.disabled = disabled;
15240
16603
  if (typeof options.dndEdges === 'object' &&
15241
16604
  options.dndEdges !== null) {
15242
16605
  this._rootDropTarget.setOverlayModel(options.dndEdges);
16606
+ this._rootPointerDropTarget.setOverlayModel(options.dndEdges);
15243
16607
  }
15244
16608
  else {
15245
16609
  this._rootDropTarget.setOverlayModel(DEFAULT_ROOT_OVERLAY_MODEL);
16610
+ this._rootPointerDropTarget.setOverlayModel(DEFAULT_ROOT_OVERLAY_MODEL);
15246
16611
  }
15247
16612
  }
15248
16613
  if ('rootOverlayModel' in options) {