dockview-core 6.6.1 → 7.0.2

package/dist/cjs/dockview/components/titlebar/groupDragSource.js

@@ -0,0 +1,218 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FLOATING_REDOCK_INITIATION_DELAY_MS = exports.GroupDragSource = void 0;
+var dataTransfer_1 = require("../../../dnd/dataTransfer");
+var backend_1 = require("../../../dnd/backend");
+var events_1 = require("../../../events");
+var lifecycle_1 = require("../../../lifecycle");
+var dom_1 = require("../../../dom");
+var dndCapabilities_1 = require("../../dndCapabilities");
+// Floating-group redock via touch: require a deliberate long press so the
+// "move the float around" gesture doesn't double-trigger the redock ghost.
+// Infinity pressTolerance disables the pre-arm flick override; any motion
+// during the wait is treated as drag-the-float, not redock intent.
+var FLOATING_REDOCK_INITIATION_DELAY_MS = 500;
+exports.FLOATING_REDOCK_INITIATION_DELAY_MS = FLOATING_REDOCK_INITIATION_DELAY_MS;
+/**
+ * The drag-source half of a group drag handle: html5 + pointer drag sources
+ * that publish a group-level `PanelTransfer`, the "Multiple Panels (N)" ghost,
+ * and the floating-group disambiguation that keeps the redock gesture from
+ * firing alongside the overlay's move-the-float gesture.
+ *
+ * Shared by the tab-bar void container and the dedicated floating title bar so
+ * both grab handles redock identically.
+ */
+var GroupDragSource = /** @class */ (function (_super) {
+    __extends(GroupDragSource, _super);
+    function GroupDragSource(options) {
+        var _a, _b, _c;
+        var _this = _super.call(this) || this;
+        _this.panelTransfer = dataTransfer_1.LocalSelectionTransfer.getInstance();
+        _this._onDragStart = new events_1.Emitter();
+        _this.onDragStart = _this._onDragStart.event;
+        _this._element = options.element;
+        _this.accessor = options.accessor;
+        var group = options.group;
+        _this.groupAccessor = typeof group === 'function' ? group : function () { return group; };
+        _this.isFloatingMoveHandle =
+            (_a = options.isFloatingMoveHandle) !== null && _a !== void 0 ? _a : (function () { return true; });
+        var caps = (0, dndCapabilities_1.resolveDndCapabilities)(_this.accessor.options);
+        _this._element.draggable = caps.html5;
+        (0, dom_1.toggleClass)(_this._element, 'dv-draggable', caps.html5 || caps.pointer);
+        _this.addDisposables(_this._onDragStart);
+        var buildMultiPanelsGhost = function () {
+            var ghostEl = document.createElement('div');
+            var style = window.getComputedStyle(_this._element);
+            var bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');
+            var color = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-color');
+            ghostEl.style.backgroundColor = bgColor;
+            ghostEl.style.color = color;
+            ghostEl.style.padding = '2px 8px';
+            ghostEl.style.height = '24px';
+            ghostEl.style.fontSize = '11px';
+            ghostEl.style.lineHeight = '20px';
+            ghostEl.style.borderRadius = '12px';
+            ghostEl.style.whiteSpace = 'nowrap';
+            ghostEl.style.boxSizing = 'border-box';
+            // HTML5 setDragImage snapshots the element as appended to the
+            // document; a default block-level div would stretch to the
+            // body's width and render as a viewport-wide bar.
+            ghostEl.style.display = 'inline-block';
+            ghostEl.textContent = "Multiple Panels (".concat(_this.group.size, ")");
+            return ghostEl;
+        };
+        var buildGhostSpec = function () {
+            var _a, _b;
+            // The custom-ghost resolution (createGroupDragGhostComponent) is
+            // owned by the AdvancedDnD module; core keeps the default chip and
+            // falls back to it when no custom ghost is produced (incl. when
+            // the module is absent).
+            var customGhost = (_b = (_a = _this.accessor).buildGroupDragGhost) === null || _b === void 0 ? void 0 : _b.call(_a, _this.group);
+            if (customGhost) {
+                return customGhost;
+            }
+            return {
+                element: buildMultiPanelsGhost(),
+                offsetX: 30,
+                offsetY: -10,
+            };
+        };
+        var sharedDragOptions = {
+            getData: function () {
+                _this.panelTransfer.setData([new dataTransfer_1.PanelTransfer(_this.accessor.id, _this.group.id, null)], dataTransfer_1.PanelTransfer.prototype);
+                return {
+                    dispose: function () {
+                        _this.panelTransfer.clearData(dataTransfer_1.PanelTransfer.prototype);
+                    },
+                };
+            },
+            createGhost: buildGhostSpec,
+            onDragStart: function (event) {
+                _this._onDragStart.fire(event);
+            },
+        };
+        _this.html5DragSource = backend_1.html5Backend.createDragSource(_this._element, __assign(__assign({}, sharedDragOptions), { disabled: !caps.html5, isCancelled: function (event) {
+                // HTML5: when this element is the floating window's move
+                // handle, redock needs shift+drag (otherwise click-and-drag
+                // conflicts with moving the float). A non-move-handle (e.g. the
+                // void container when a title bar moves the float) redocks with
+                // a plain drag, like a group in the main grid.
+                if (_this.group.api.location.type === 'floating' &&
+                    _this.isFloatingMoveHandle() &&
+                    !event.shiftKey) {
+                    return true;
+                }
+                if (_this.group.api.location.type === 'edge' &&
+                    _this.group.size === 0) {
+                    return true;
+                }
+                return false;
+            } }));
+        // Only the move handle needs the touch disambiguation; other handles
+        // redock with the normal grid press behaviour.
+        var isFloating = function () {
+            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' &&
+                _this.isFloatingMoveHandle();
+        };
+        _this.pointerDragSource = backend_1.pointerBackend.createDragSource(_this._element, __assign(__assign({}, sharedDragOptions), { disabled: !caps.pointer, touchOnly: !caps.pointerHandlesMouse, 
+            // Floating groups share this element with the overlay's
+            // move-the-float drag. Without a longer hold + tolerance
+            // override, both gestures commit simultaneously and the
+            // user sees the float follow their finger *and* a ghost.
+            touchInitiationDelay: function () {
+                return isFloating() ? FLOATING_REDOCK_INITIATION_DELAY_MS : 250;
+            }, pressTolerance: function () { return (isFloating() ? Infinity : 8); }, isCancelled: function () {
+                if (!(0, dndCapabilities_1.resolveDndCapabilities)(_this.accessor.options).pointer) {
+                    return true;
+                }
+                // Pointer: long-press IS the deliberate gesture, so
+                // floating groups don't need the shift gate.
+                if (_this.group.api.location.type === 'edge' &&
+                    _this.group.size === 0) {
+                    return true;
+                }
+                return false;
+            }, onDragStart: function (event) {
+                var _a;
+                // Redock just committed — abort any in-flight overlay
+                // move so the float stops following the finger while
+                // the ghost takes over.
+                (_a = _this.getFloatingOverlay()) === null || _a === void 0 ? void 0 : _a.cancelPendingDrag();
+                _this._onDragStart.fire(event);
+            } }));
+        // Mirror direction: once the overlay's move-the-float gesture has
+        // actually moved something, cancel the pending redock arm so the
+        // ghost doesn't appear mid-drag if the user holds past 500ms.
+        var overlayMoveSub = new lifecycle_1.MutableDisposable();
+        var refreshOverlayMoveSub = function () {
+            var overlay = _this.getFloatingOverlay();
+            overlayMoveSub.value = overlay
+                ? overlay.onDidStartMoving(function () {
+                    _this.pointerDragSource.cancelPending();
+                })
+                : lifecycle_1.Disposable.NONE;
+        };
+        refreshOverlayMoveSub();
+        _this.addDisposables(overlayMoveSub);
+        var locationChange = (_c = (_b = _this.group) === null || _b === void 0 ? void 0 : _b.api) === null || _c === void 0 ? void 0 : _c.onDidLocationChange;
+        if (locationChange) {
+            _this.addDisposables(locationChange(refreshOverlayMoveSub));
+        }
+        _this.addDisposables(_this.html5DragSource, _this.pointerDragSource);
+        return _this;
+    }
+    Object.defineProperty(GroupDragSource.prototype, "group", {
+        // Resolved lazily so a retargetable handle (the floating title bar) always
+        // drags the window's *current* anchor group, not the one captured here.
+        get: function () {
+            return this.groupAccessor();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    GroupDragSource.prototype.updateDragAndDropState = function () {
+        var caps = (0, dndCapabilities_1.resolveDndCapabilities)(this.accessor.options);
+        this._element.draggable = caps.html5;
+        (0, dom_1.toggleClass)(this._element, 'dv-draggable', caps.html5 || caps.pointer);
+        this.html5DragSource.setDisabled(!caps.html5);
+        this.pointerDragSource.setDisabled(!caps.pointer);
+        this.pointerDragSource.setTouchOnly(!caps.pointerHandlesMouse);
+    };
+    GroupDragSource.prototype.getFloatingOverlay = function () {
+        var _this = this;
+        var _a, _b;
+        if (!this.group) {
+            return undefined;
+        }
+        return (_b = (_a = this.accessor.floatingGroups) === null || _a === void 0 ? void 0 : _a.find(function (fg) { return fg.group === _this.group; })) === null || _b === void 0 ? void 0 : _b.overlay;
+    };
+    return GroupDragSource;
+}(lifecycle_1.CompositeDisposable));
+exports.GroupDragSource = GroupDragSource;

package/dist/cjs/dockview/components/titlebar/tabGroupIndicator.d.ts

@@ -1,5 +1,5 @@
 import { IValueDisposable } from '../../../lifecycle';
-import { DockviewHeaderDirection } from '../../options';
+import { DockviewHeaderDirection, DockviewHeaderPosition } from '../../options';
 import { Tab } from '../tab/tab';
 import { ITabGroup } from '../../tabGroup';
 import { TabGroupColorPalette } from '../../tabGroupAccent';
@@ -10,6 +10,7 @@ export interface TabGroupIndicatorContext {
     getTabMap(): Map<string, IValueDisposable<Tab>>;
     getChipElement(groupId: string): HTMLElement | undefined;
     getDirection(): DockviewHeaderDirection;
+    getHeaderPosition(): DockviewHeaderPosition;
     getColorPalette(): TabGroupColorPalette | undefined;
 }
 export interface ITabGroupIndicator {

package/dist/cjs/dockview/components/titlebar/tabGroupIndicator.js

@@ -385,6 +385,7 @@ var WrapTabGroupIndicator = /** @class */ (function (_super) {
         }
         var r = 6; // corner radius
         var half = t / 2;
+        var headerPosition = this._ctx.getHeaderPosition();
         if (isVertical) {
             var svgW = crossSize;
             var svgH = mainSize;
@@ -392,19 +393,22 @@ var WrapTabGroupIndicator = /** @class */ (function (_super) {
             svg.setAttribute('height', String(svgH));
             underline.style.width = "".concat(svgW, "px");
             underline.style.height = "".concat(svgH, "px");
-            var xLeft = half;
-            var xRight = svgW - half;
+            // right header: indicator on the left edge (invert x sides)
+            var isRightHeader = headerPosition === 'right';
+            var xNear = isRightHeader ? svgW - half : half;
+            var xFar = isRightHeader ? half : svgW - half;
+            var cd = isRightHeader ? -1 : 1; // curve direction
             var d = [
-                "M ".concat(xLeft, ",0"),
-                "L ".concat(xLeft, ",").concat(aStart - r),
-                "Q ".concat(xLeft, ",").concat(aStart, " ").concat(xLeft + r, ",").concat(aStart),
-                "L ".concat(xRight - r, ",").concat(aStart),
-                "Q ".concat(xRight, ",").concat(aStart, " ").concat(xRight, ",").concat(aStart + r),
-                "L ".concat(xRight, ",").concat(aEnd - r),
-                "Q ".concat(xRight, ",").concat(aEnd, " ").concat(xRight - r, ",").concat(aEnd),
-                "L ".concat(xLeft + r, ",").concat(aEnd),
-                "Q ".concat(xLeft, ",").concat(aEnd, " ").concat(xLeft, ",").concat(aEnd + r),
-                "L ".concat(xLeft, ",").concat(svgH),
+                "M ".concat(xNear, ",0"),
+                "L ".concat(xNear, ",").concat(aStart - r),
+                "Q ".concat(xNear, ",").concat(aStart, " ").concat(xNear + cd * r, ",").concat(aStart),
+                "L ".concat(xFar - cd * r, ",").concat(aStart),
+                "Q ".concat(xFar, ",").concat(aStart, " ").concat(xFar, ",").concat(aStart + r),
+                "L ".concat(xFar, ",").concat(aEnd - r),
+                "Q ".concat(xFar, ",").concat(aEnd, " ").concat(xFar - cd * r, ",").concat(aEnd),
+                "L ".concat(xNear + cd * r, ",").concat(aEnd),
+                "Q ".concat(xNear, ",").concat(aEnd, " ").concat(xNear, ",").concat(aEnd + r),
+                "L ".concat(xNear, ",").concat(svgH),
             ].join(' ');
             path.setAttribute('d', d);
         }
@@ -415,19 +419,22 @@ var WrapTabGroupIndicator = /** @class */ (function (_super) {
             svg.setAttribute('height', String(svgH));
             underline.style.width = "".concat(svgW, "px");
             underline.style.height = "".concat(svgH, "px");
-            var yBot = svgH - half;
-            var yTop = half;
+            // bottom header: indicator on the top edge (invert y sides)
+            var isBottomHeader = headerPosition === 'bottom';
+            var yNear = isBottomHeader ? half : svgH - half;
+            var yFar = isBottomHeader ? svgH - half : half;
+            var cd = isBottomHeader ? 1 : -1; // curve direction
             var d = [
-                "M 0,".concat(yBot),
-                "L ".concat(aStart - r, ",").concat(yBot),
-                "Q ".concat(aStart, ",").concat(yBot, " ").concat(aStart, ",").concat(yBot - r),
-                "L ".concat(aStart, ",").concat(yTop + r),
-                "Q ".concat(aStart, ",").concat(yTop, " ").concat(aStart + r, ",").concat(yTop),
-                "L ".concat(aEnd - r, ",").concat(yTop),
-                "Q ".concat(aEnd, ",").concat(yTop, " ").concat(aEnd, ",").concat(yTop + r),
-                "L ".concat(aEnd, ",").concat(yBot - r),
-                "Q ".concat(aEnd, ",").concat(yBot, " ").concat(aEnd + r, ",").concat(yBot),
-                "L ".concat(svgW, ",").concat(yBot),
+                "M 0,".concat(yNear),
+                "L ".concat(aStart - r, ",").concat(yNear),
+                "Q ".concat(aStart, ",").concat(yNear, " ").concat(aStart, ",").concat(yNear + cd * r),
+                "L ".concat(aStart, ",").concat(yFar - cd * r),
+                "Q ".concat(aStart, ",").concat(yFar, " ").concat(aStart + r, ",").concat(yFar),
+                "L ".concat(aEnd - r, ",").concat(yFar),
+                "Q ".concat(aEnd, ",").concat(yFar, " ").concat(aEnd, ",").concat(yFar - cd * r),
+                "L ".concat(aEnd, ",").concat(yNear + cd * r),
+                "Q ".concat(aEnd, ",").concat(yNear, " ").concat(aEnd + r, ",").concat(yNear),
+                "L ".concat(svgW, ",").concat(yNear),
             ].join(' ');
             path.setAttribute('d', d);
         }

package/dist/cjs/dockview/components/titlebar/tabGroups.js

@@ -399,6 +399,7 @@ var TabGroupManager = /** @class */ (function () {
                 getTabMap: function () { return _this._ctx.getTabMap(); },
                 getChipElement: function (id) { var _a; return (_a = _this._chipRenderers.get(id)) === null || _a === void 0 ? void 0 : _a.chip.element; },
                 getDirection: function () { return _this._ctx.getDirection(); },
+                getHeaderPosition: function () { return _this._ctx.group.model.headerPosition; },
                 getColorPalette: function () { return _this._ctx.accessor.tabGroupColorPalette; },
             });
         }

package/dist/cjs/dockview/components/titlebar/tabs.d.ts

@@ -59,7 +59,19 @@ export declare class Tabs extends CompositeDisposable {
         showTabsOverflowControl: boolean;
     });
     indexOf(id: string): number;
+    /** DOM id of the tab element for a panel — for the tabpanel's `aria-labelledby`. */
+    getTabId(panelId: string): string | undefined;
     isActive(tab: Tab): boolean;
+    private _onKeyDown;
+    /**
+     * Close the tab at `index` and move roving focus to a neighbouring tab so
+     * keyboard focus stays in the tablist.
+     */
+    private _closeTab;
+    /** Move the roving focus to the tab at `index` (updates tabindex + DOM focus). */
+    private _focusTab;
+    /** Move DOM focus to the active tab — the entry point into the tablist. */
+    focusActiveTab(): void;
     setActivePanel(panel: IDockviewPanel): void;
     openPanel(panel: IDockviewPanel, index?: number): void;
     delete(id: string): void;

package/dist/cjs/dockview/components/titlebar/tabs.js

@@ -92,6 +92,9 @@ var Tabs = /** @class */ (function (_super) {
         _this.onOverflowTabsChange = _this._onOverflowTabsChange.event;
         _this._tabsList = document.createElement('div');
         _this._tabsList.className = 'dv-tabs-container';
+        // WAI-ARIA Tabs pattern: the strip of tabs is the tablist.
+        _this._tabsList.setAttribute('role', 'tablist');
+        _this._tabsList.setAttribute('aria-orientation', _this._direction === 'vertical' ? 'vertical' : 'horizontal');
         _this.showTabsOverflowControl = options.showTabsOverflowControl;
         if (accessor.options.scrollbars === 'native') {
             _this._element = _this._tabsList;
@@ -111,7 +114,8 @@ var Tabs = /** @class */ (function (_super) {
             getDirection: function () { return _this._direction; },
         }, {
             onChipContextMenu: function (tabGroup, event) {
-                _this.accessor.contextMenuController.showForChip(tabGroup, _this.group, event);
+                var _a;
+                (_a = _this.accessor.contextMenuService) === null || _a === void 0 ? void 0 : _a.showForChip(tabGroup, _this.group, event);
             },
             onChipDragStart: function (tabGroup, chip, event) {
                 _this._handleChipDragStart(tabGroup, chip, event);
@@ -204,7 +208,14 @@ var Tabs = /** @class */ (function (_super) {
             else {
                 _this._tabsList.scrollLeft = current + primary;
             }
-        }, { passive: false }), (0, events_1.addDisposableListener)(_this._tabsList, 'dragover', function (event) {
+        }, { passive: false }), 
+        // WAI-ARIA Tabs keyboard pattern: arrow keys move the roving
+        // focus along the strip, Home/End jump to the ends, and
+        // Enter/Space activate the focused tab (manual activation, so
+        // arrowing through tabs doesn't switch panels until committed).
+        (0, events_1.addDisposableListener)(_this._tabsList, 'keydown', function (event) {
+            _this._onKeyDown(event);
+        }), (0, events_1.addDisposableListener)(_this._tabsList, 'dragover', function (event) {
             if (_this._processDragOver(event.clientX)) {
                 // Allow `drop` to fire on the tabs list container.
                 event.preventDefault();
@@ -401,6 +412,7 @@ var Tabs = /** @class */ (function (_super) {
                 return;
             }
             this._direction = value;
+            this._tabsList.setAttribute('aria-orientation', value === 'vertical' ? 'vertical' : 'horizontal');
             if (this._scrollbar) {
                 this._scrollbar.orientation = value;
             }
@@ -433,10 +445,101 @@ var Tabs = /** @class */ (function (_super) {
     Tabs.prototype.indexOf = function (id) {
         return this._tabs.findIndex(function (tab) { return tab.value.panel.id === id; });
     };
+    /** DOM id of the tab element for a panel — for the tabpanel's `aria-labelledby`. */
+    Tabs.prototype.getTabId = function (panelId) {
+        var _a;
+        return (_a = this._tabMap.get(panelId)) === null || _a === void 0 ? void 0 : _a.value.element.id;
+    };
     Tabs.prototype.isActive = function (tab) {
         return (this.selectedIndex > -1 &&
             this._tabs[this.selectedIndex].value === tab);
     };
+    Tabs.prototype._onKeyDown = function (event) {
+        var _this = this;
+        // Only handle when a tab element itself is focused — never hijack keys
+        // typed inside a custom tab renderer's own controls (inputs etc.).
+        var index = this._tabs.findIndex(function (tab) { return tab.value.element === event.target; });
+        if (index === -1) {
+            return;
+        }
+        var isVertical = this._direction === 'vertical';
+        var nextKey = isVertical ? 'ArrowDown' : 'ArrowRight';
+        var prevKey = isVertical ? 'ArrowUp' : 'ArrowLeft';
+        var last = this._tabs.length - 1;
+        switch (event.key) {
+            case nextKey:
+                event.preventDefault();
+                this._focusTab(Math.min(index + 1, last));
+                break;
+            case prevKey:
+                event.preventDefault();
+                this._focusTab(Math.max(index - 1, 0));
+                break;
+            case 'Home':
+                event.preventDefault();
+                this._focusTab(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this._focusTab(last);
+                break;
+            case 'Enter':
+            case ' ':
+                // Manual activation of the focused tab.
+                event.preventDefault();
+                this.accessor.withOrigin('user', function () {
+                    return _this._tabs[index].value.panel.api.setActive();
+                });
+                break;
+            case 'Delete':
+            case 'Backspace':
+                // Close the focused tab (Backspace covers macOS, where the
+                // primary delete key reports as Backspace).
+                event.preventDefault();
+                this._closeTab(index);
+                break;
+        }
+    };
+    /**
+     * Close the tab at `index` and move roving focus to a neighbouring tab so
+     * keyboard focus stays in the tablist.
+     */
+    Tabs.prototype._closeTab = function (index) {
+        var _a, _b, _c, _d, _e;
+        var tab = (_a = this._tabs[index]) === null || _a === void 0 ? void 0 : _a.value;
+        if (!tab) {
+            return;
+        }
+        // Resolve the post-close focus target before closing mutates the list:
+        // prefer the next tab, otherwise the previous.
+        var neighbourId = (_e = ((_c = (_b = this._tabs[index + 1]) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : (_d = this._tabs[index - 1]) === null || _d === void 0 ? void 0 : _d.value)) === null || _e === void 0 ? void 0 : _e.panel.id;
+        tab.panel.api.close();
+        if (neighbourId !== undefined) {
+            var nextIndex = this._tabs.findIndex(function (t) { return t.value.panel.id === neighbourId; });
+            if (nextIndex > -1) {
+                this._focusTab(nextIndex);
+            }
+        }
+    };
+    /** Move the roving focus to the tab at `index` (updates tabindex + DOM focus). */
+    Tabs.prototype._focusTab = function (index) {
+        for (var i = 0; i < this._tabs.length; i++) {
+            this._tabs[i].value.element.tabIndex = i === index ? 0 : -1;
+        }
+        this._tabs[index].value.element.focus();
+    };
+    /** Move DOM focus to the active tab — the entry point into the tablist. */
+    Tabs.prototype.focusActiveTab = function () {
+        var _a;
+        if (this._tabs.length === 0) {
+            return;
+        }
+        var activeId = (_a = this.group.activePanel) === null || _a === void 0 ? void 0 : _a.id;
+        var activeIndex = activeId
+            ? this._tabs.findIndex(function (t) { return t.value.panel.id === activeId; })
+            : -1;
+        this._focusTab(activeIndex > -1 ? activeIndex : 0);
+    };
     Tabs.prototype.setActivePanel = function (panel) {
         var e_3, _a;
         var isVertical = this._direction === 'vertical';

package/dist/cjs/dockview/components/titlebar/tabsContainer.d.ts

@@ -33,8 +33,10 @@ export interface ITabsContainer extends IDisposable {
     direction: DockviewHeaderDirection;
     delete(id: string): void;
     indexOf(id: string): number;
+    getTabId(panelId: string): string | undefined;
     setActive(isGroupActive: boolean): void;
     setActivePanel(panel: IDockviewPanel): void;
+    focusActiveTab(): void;
     isActive(tab: Tab): boolean;
     closePanel(panel: IDockviewPanel): void;
     openPanel(panel: IDockviewPanel, index?: number): void;
@@ -87,9 +89,11 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
     setPrefixActionsElement(element: HTMLElement | undefined): void;
     isActive(tab: Tab): boolean;
     indexOf(id: string): number;
+    getTabId(panelId: string): string | undefined;
     setActive(_isGroupActive: boolean): void;
     delete(id: string): void;
     setActivePanel(panel: IDockviewPanel): void;
+    focusActiveTab(): void;
     openPanel(panel: IDockviewPanel, index?: number): void;
     closePanel(panel: IDockviewPanel): void;
     private updateClassnames;

package/dist/cjs/dockview/components/titlebar/tabsContainer.js

@@ -253,6 +253,9 @@ var TabsContainer = /** @class */ (function (_super) {
     TabsContainer.prototype.indexOf = function (id) {
         return this.tabs.indexOf(id);
     };
+    TabsContainer.prototype.getTabId = function (panelId) {
+        return this.tabs.getTabId(panelId);
+    };
     TabsContainer.prototype.setActive = function (_isGroupActive) {
         // noop
     };
@@ -263,6 +266,9 @@ var TabsContainer = /** @class */ (function (_super) {
     TabsContainer.prototype.setActivePanel = function (panel) {
         this.tabs.setActivePanel(panel);
     };
+    TabsContainer.prototype.focusActiveTab = function () {
+        this.tabs.focusActiveTab();
+    };
     TabsContainer.prototype.openPanel = function (panel, index) {
         if (index === void 0) { index = this.tabs.size; }
         this.tabs.openPanel(panel, index);
@@ -374,8 +380,10 @@ var TabsContainer = /** @class */ (function (_super) {
                         // Activate the first panel in the group
                         var firstPanelId = tg.panelIds[0];
                         if (firstPanelId) {
-                            var panel = _this.group.panels.find(function (p) { return p.id === firstPanelId; });
-                            panel === null || panel === void 0 ? void 0 : panel.api.setActive();
+                            var panel_1 = _this.group.panels.find(function (p) { return p.id === firstPanelId; });
+                            _this.accessor.withOrigin('user', function () {
+                                return panel_1 === null || panel_1 === void 0 ? void 0 : panel_1.api.setActive();
+                            });
                         }
                     });
                     el.appendChild(groupHeader);
@@ -401,7 +409,9 @@ var TabsContainer = /** @class */ (function (_super) {
                         tg.expand();
                     }
                     tab.element.scrollIntoView();
-                    tab.panel.api.setActive();
+                    _this.accessor.withOrigin('user', function () {
+                        return tab.panel.api.setActive();
+                    });
                 });
                 wrapper.appendChild(child);
                 el.appendChild(wrapper);

package/dist/cjs/dockview/components/titlebar/voidContainer.d.ts

@@ -9,9 +9,7 @@ export declare class VoidContainer extends CompositeDisposable {
     private readonly _element;
     private readonly dropTarget;
     private readonly pointerDropTarget;
-    private readonly html5DragSource;
-    private readonly pointerDragSource;
-    private readonly panelTransfer;
+    private readonly dragSource;
     private readonly _onDrop;
     readonly onDrop: Event<DroptargetEvent>;
     private readonly _onDragStart;
@@ -20,5 +18,4 @@ export declare class VoidContainer extends CompositeDisposable {
     get element(): HTMLElement;
     constructor(accessor: DockviewComponent, group: DockviewGroupPanel);
     updateDragAndDropState(): void;
-    private getFloatingOverlay;
 }