dockview-core 6.6.1 → 7.0.2

package/dist/esm/dockview/components/panel/content.js

@@ -1,14 +1,18 @@
-import { CompositeDisposable, MutableDisposable, } from '../../../lifecycle';
+import { CompositeDisposable, Disposable, MutableDisposable, } from '../../../lifecycle';
 import { Emitter } from '../../../events';
 import { trackFocus } from '../../../dom';
 import { Droptarget } from '../../../dnd/droptarget';
 import { pointerBackend } from '../../../dnd/backend';
 import { getPanelData } from '../../../dnd/dataTransfer';
+let _contentId = 0;
+/** Stable DOM id so each tab's `aria-controls` can reference its tabpanel. */
+const nextContentId = () => `dv-tabpanel-${_contentId++}`;
 export class ContentContainer extends CompositeDisposable {
     get element() {
         return this._element;
     }
     constructor(accessor, group) {
+        var _a, _b, _c, _d, _e, _f, _g;
         super();
         this.accessor = accessor;
         this.group = group;
@@ -20,8 +24,17 @@ export class ContentContainer extends CompositeDisposable {
         this._element = document.createElement('div');
         this._element.className = 'dv-content-container';
         this._element.tabIndex = -1;
+        // WAI-ARIA Tabs pattern: the single content area per group is the
+        // tabpanel; `aria-labelledby` is pointed at the active tab in
+        // `setLabelledBy` (driven from the group model on activation).
+        this._element.id = nextContentId();
+        this._element.setAttribute('role', 'tabpanel');
         this.addDisposables(this._onDidFocus, this._onDidBlur);
-        const target = group.dropTargetContainer;
+        // Resolve the override anchor dynamically: a group can be relocated
+        // between roots (grid / floating / popout) after construction, and the
+        // popout anchor in particular lives in another window — a value
+        // captured here would mount overlays in the wrong window.
+        const getOverrideTarget = () => { var _a; return (_a = group.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; };
         const canDisplayOverlay = (event, position) => {
             if (this.group.locked === 'no-drop-target' ||
                 (this.group.locked && position === 'center')) {
@@ -51,7 +64,8 @@ export class ContentContainer extends CompositeDisposable {
             className: 'dv-drop-target-content',
             acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
             canDisplayOverlay,
-            getOverrideTarget: target ? () => target.model : undefined,
+            getOverrideTarget,
+            overlayModel: (_b = (_a = this.accessor).resolveDropOverlayModel) === null || _b === void 0 ? void 0 : _b.call(_a, 'content'),
         });
         this.pointerDropTarget = pointerBackend.createDropTarget(this.element, {
             acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
@@ -63,9 +77,18 @@ export class ContentContainer extends CompositeDisposable {
                     : null;
             },
             className: 'dv-drop-target-content',
-            getOverrideTarget: target ? () => target.model : undefined,
+            getOverrideTarget,
+            overlayModel: (_d = (_c = this.accessor).resolveDropOverlayModel) === null || _d === void 0 ? void 0 : _d.call(_c, 'content'),
         });
-        this.addDisposables(this.dropTarget, this.pointerDropTarget);
+        this.addDisposables(this.dropTarget, this.pointerDropTarget, 
+        // Re-apply the app-supplied overlay model when options change.
+        // `{}` resets to the built-in default (all fields optional).
+        (_g = (_f = (_e = this.accessor).onDidOptionsChange) === null || _f === void 0 ? void 0 : _f.call(_e, () => {
+            var _a, _b, _c;
+            const model = (_c = (_b = (_a = this.accessor).resolveDropOverlayModel) === null || _b === void 0 ? void 0 : _b.call(_a, 'content')) !== null && _c !== void 0 ? _c : {};
+            this.dropTarget.setOverlayModel(model);
+            this.pointerDropTarget.setOverlayModel(model);
+        })) !== null && _g !== void 0 ? _g : Disposable.NONE);
     }
     show() {
         this.element.style.display = '';
@@ -73,6 +96,14 @@ export class ContentContainer extends CompositeDisposable {
     hide() {
         this.element.style.display = 'none';
     }
+    setLabelledBy(tabElementId) {
+        if (tabElementId) {
+            this._element.setAttribute('aria-labelledby', tabElementId);
+        }
+        else {
+            this._element.removeAttribute('aria-labelledby');
+        }
+    }
     renderPanel(panel, options = { asActive: true }) {
         var _a, _b, _c, _d;
         const doRender = options.asActive ||

package/dist/esm/dockview/components/tab/tab.js

@@ -5,11 +5,15 @@ import { toggleClass } from '../../../dom';
 import { html5Backend, pointerBackend, } from '../../../dnd/backend';
 import { LongPressDetector } from '../../../dnd/pointer/longPress';
 import { resolveDndCapabilities } from '../../dndCapabilities';
+let _tabId = 0;
+/** Stable DOM id referenced by the tabpanel's `aria-labelledby`. */
+const nextTabId = () => `dv-tab-${_tabId++}`;
 export class Tab extends CompositeDisposable {
     get element() {
         return this._element;
     }
     constructor(panel, accessor, group) {
+        var _a, _b;
         super();
         this.panel = panel;
         this.accessor = accessor;
@@ -30,8 +34,20 @@ export class Tab extends CompositeDisposable {
         const caps = resolveDndCapabilities(this.accessor.options);
         this._element = document.createElement('div');
         this._element.className = 'dv-tab';
-        this._element.tabIndex = 0;
+        // Roving tabindex (WAI-ARIA Tabs pattern): only the active tab is in
+        // the tab order; `setActive` flips this. Inactive tabs are reachable
+        // via arrow keys, handled by the tab strip.
+        this._element.tabIndex = -1;
         this._element.draggable = caps.html5;
+        // WAI-ARIA Tabs pattern. `aria-controls` points at the group's single
+        // tabpanel (the content container); `aria-selected` tracks activation.
+        this._element.id = nextTabId();
+        this._element.setAttribute('role', 'tab');
+        this._element.setAttribute('aria-selected', 'false');
+        const contentContainerId = (_b = (_a = this.group) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.contentContainerId;
+        if (contentContainerId) {
+            this._element.setAttribute('aria-controls', contentContainerId);
+        }
         toggleClass(this.element, 'dv-inactive-tab', true);
         const canDisplayOverlay = (event, position) => {
             var _a;
@@ -114,13 +130,15 @@ export class Tab extends CompositeDisposable {
         }), addDisposableListener(this._element, 'click', (event) => {
             this._onTabClick.fire(event);
         }), addDisposableListener(this._element, 'contextmenu', (event) => {
-            this.accessor.contextMenuController.show(this.panel, this.group, event);
+            var _a;
+            (_a = this.accessor.contextMenuService) === null || _a === void 0 ? void 0 : _a.show(this.panel, this.group, event);
         }), new LongPressDetector(this._element, {
             onLongPress: (event) => {
+                var _a;
                 // Don't let a subsequent finger move arm a drag on top
                 // of the just-opened menu.
                 this.pointerDragSource.cancelPending();
-                this.accessor.contextMenuController.show(this.panel, this.group, event);
+                (_a = this.accessor.contextMenuService) === null || _a === void 0 ? void 0 : _a.show(this.panel, this.group, event);
             },
         }), this.dropTarget.onDrop((event) => {
             this._onDropped.fire(event);
@@ -131,6 +149,10 @@ export class Tab extends CompositeDisposable {
     setActive(isActive) {
         toggleClass(this.element, 'dv-active-tab', isActive);
         toggleClass(this.element, 'dv-inactive-tab', !isActive);
+        this._element.setAttribute('aria-selected', isActive ? 'true' : 'false');
+        // Roving tabindex anchors to the active tab; arrow-key navigation in
+        // the tab strip moves the rover from there.
+        this._element.tabIndex = isActive ? 0 : -1;
     }
     setContent(part) {
         if (this.content) {
@@ -140,12 +162,18 @@ export class Tab extends CompositeDisposable {
         this._element.appendChild(this.content.element);
     }
     _buildOverlayModel() {
-        var _a;
+        var _a, _b, _c;
+        // An app-supplied model (the dropOverlayModel option) takes precedence
+        // over the theme-derived default for this tab.
+        const custom = (_b = (_a = this.accessor).resolveDropOverlayModel) === null || _b === void 0 ? void 0 : _b.call(_a, 'tab', this.group);
+        if (custom) {
+            return custom;
+        }
         // 'line' themes render a 4px insertion strip at the tab edge via the
         // anchor container's small-boundary path.  'fill' themes render a
         // half-width highlighted area, so we disable the small-boundary path
         // entirely (boundary = 0 ⟹ isSmall always false).
-        const smallBoundary = ((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.dndTabIndicator) === 'line'
+        const smallBoundary = ((_c = this.accessor.options.theme) === null || _c === void 0 ? void 0 : _c.dndTabIndicator) === 'line'
             ? Number.POSITIVE_INFINITY
             : 0;
         return {

package/dist/esm/dockview/components/titlebar/floatingTitleBar.d.ts

@@ -0,0 +1,35 @@
+import { DockviewComponent } from '../../dockviewComponent';
+import { Event } from '../../../events';
+import { CompositeDisposable } from '../../../lifecycle';
+import { DockviewGroupPanel } from '../../dockviewGroupPanel';
+/**
+ * A dedicated, blank drag handle rendered above a floating group's tab bar.
+ *
+ * It plays the same dual role the tab-bar void container plays today: a plain
+ * pointer-drag moves the floating window (wired by the overlay via
+ * `setupDrag`), while a shift+drag (mouse) or long-press (touch) detaches the
+ * group to redock it into the grid. The redock half is provided by the shared
+ * {@link GroupDragSource}; the move half is owned by the overlay.
+ *
+ * The bar is intentionally contentless — styling is driven entirely through
+ * the `--dv-floating-titlebar-*` theme variables.
+ */
+export declare class FloatingTitleBar extends CompositeDisposable {
+    private readonly accessor;
+    private readonly _element;
+    private readonly dragSource;
+    private _group;
+    private readonly _onDragStart;
+    readonly onDragStart: Event<PointerEvent | DragEvent>;
+    get element(): HTMLElement;
+    /** The window's current anchor group — the one this bar drags/activates. */
+    get group(): DockviewGroupPanel;
+    /**
+     * Retarget the bar at a new anchor group. Called when the original anchor
+     * leaves a multi-group floating window and another member is promoted, so
+     * the bar keeps activating/redocking a group that actually lives here.
+     */
+    setGroup(group: DockviewGroupPanel): void;
+    constructor(accessor: DockviewComponent, group: DockviewGroupPanel);
+    updateDragAndDropState(): void;
+}

package/dist/esm/dockview/components/titlebar/floatingTitleBar.js

@@ -0,0 +1,65 @@
+import { addDisposableListener, Emitter } from '../../../events';
+import { CompositeDisposable } from '../../../lifecycle';
+import { quasiPreventDefault } from '../../../dom';
+import { GroupDragSource } from './groupDragSource';
+/**
+ * A dedicated, blank drag handle rendered above a floating group's tab bar.
+ *
+ * It plays the same dual role the tab-bar void container plays today: a plain
+ * pointer-drag moves the floating window (wired by the overlay via
+ * `setupDrag`), while a shift+drag (mouse) or long-press (touch) detaches the
+ * group to redock it into the grid. The redock half is provided by the shared
+ * {@link GroupDragSource}; the move half is owned by the overlay.
+ *
+ * The bar is intentionally contentless — styling is driven entirely through
+ * the `--dv-floating-titlebar-*` theme variables.
+ */
+export class FloatingTitleBar extends CompositeDisposable {
+    get element() {
+        return this._element;
+    }
+    /** The window's current anchor group — the one this bar drags/activates. */
+    get group() {
+        return this._group;
+    }
+    /**
+     * Retarget the bar at a new anchor group. Called when the original anchor
+     * leaves a multi-group floating window and another member is promoted, so
+     * the bar keeps activating/redocking a group that actually lives here.
+     */
+    setGroup(group) {
+        this._group = group;
+    }
+    constructor(accessor, group) {
+        super();
+        this.accessor = accessor;
+        this._onDragStart = new Emitter();
+        this.onDragStart = this._onDragStart.event;
+        this._group = group;
+        this._element = document.createElement('div');
+        this._element.className = 'dv-floating-titlebar';
+        this.addDisposables(this._onDragStart, addDisposableListener(this._element, 'pointerdown', () => {
+            this.accessor.doSetGroupActive(this._group);
+        }), 
+        // Shift+pointerdown marks the event so the overlay's
+        // move-the-float drag doesn't fire alongside the HTML5 redock
+        // drag. See VoidContainer for the same disambiguation.
+        addDisposableListener(this._element, 'pointerdown', (e) => {
+            if (e.shiftKey) {
+                quasiPreventDefault(e);
+            }
+        }, true));
+        this.dragSource = new GroupDragSource({
+            element: this._element,
+            accessor: this.accessor,
+            // resolve lazily so the drag source follows anchor reassignment
+            group: () => this._group,
+        });
+        this.addDisposables(this.dragSource, this.dragSource.onDragStart((event) => {
+            this._onDragStart.fire(event);
+        }));
+    }
+    updateDragAndDropState() {
+        this.dragSource.updateDragAndDropState();
+    }
+}

package/dist/esm/dockview/components/titlebar/groupDragSource.d.ts

@@ -0,0 +1,52 @@
+import { DockviewComponent } from '../../dockviewComponent';
+import { Event } from '../../../events';
+import { CompositeDisposable } from '../../../lifecycle';
+import { DockviewGroupPanel } from '../../dockviewGroupPanel';
+declare const FLOATING_REDOCK_INITIATION_DELAY_MS = 500;
+export interface GroupDragSourceOptions {
+    readonly element: HTMLElement;
+    readonly accessor: DockviewComponent;
+    /**
+     * The group this handle drags. Pass a function when the handle outlives the
+     * group it represents and can be retargeted — e.g. a floating window's
+     * dedicated title bar, whose anchor group is reassigned when the original
+     * anchor leaves a multi-group window. A fixed reference (the tab-bar void
+     * container, which lives inside its own group's DOM) is also accepted.
+     */
+    readonly group: DockviewGroupPanel | (() => DockviewGroupPanel);
+    /**
+     * Whether this element is the floating window's move handle. Only the move
+     * handle needs the floating disambiguation (shift for mouse / long-press
+     * for touch) that keeps the redock gesture from firing alongside the
+     * move-the-float gesture. Other handles on a floating group (e.g. the tab
+     * bar's void container when a dedicated title bar is the move handle) drag
+     * to redock with a plain drag, exactly like a group in the main grid.
+     * Defaults to `() => true`.
+     */
+    readonly isFloatingMoveHandle?: () => boolean;
+}
+/**
+ * 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.
+ */
+export declare class GroupDragSource extends CompositeDisposable {
+    private readonly _element;
+    private readonly accessor;
+    private readonly groupAccessor;
+    private readonly html5DragSource;
+    private readonly pointerDragSource;
+    private readonly panelTransfer;
+    private readonly _onDragStart;
+    readonly onDragStart: Event<PointerEvent | DragEvent>;
+    private readonly isFloatingMoveHandle;
+    private get group();
+    constructor(options: GroupDragSourceOptions);
+    updateDragAndDropState(): void;
+    private getFloatingOverlay;
+}
+export { FLOATING_REDOCK_INITIATION_DELAY_MS };

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

@@ -0,0 +1,178 @@
+import { LocalSelectionTransfer, PanelTransfer, } from '../../../dnd/dataTransfer';
+import { html5Backend, pointerBackend, } from '../../../dnd/backend';
+import { Emitter } from '../../../events';
+import { CompositeDisposable, Disposable, MutableDisposable, } from '../../../lifecycle';
+import { toggleClass } from '../../../dom';
+import { resolveDndCapabilities } from '../../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.
+const FLOATING_REDOCK_INITIATION_DELAY_MS = 500;
+/**
+ * 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.
+ */
+export class GroupDragSource extends CompositeDisposable {
+    // Resolved lazily so a retargetable handle (the floating title bar) always
+    // drags the window's *current* anchor group, not the one captured here.
+    get group() {
+        return this.groupAccessor();
+    }
+    constructor(options) {
+        var _a, _b, _c;
+        super();
+        this.panelTransfer = LocalSelectionTransfer.getInstance();
+        this._onDragStart = new Emitter();
+        this.onDragStart = this._onDragStart.event;
+        this._element = options.element;
+        this.accessor = options.accessor;
+        const group = options.group;
+        this.groupAccessor = typeof group === 'function' ? group : () => group;
+        this.isFloatingMoveHandle =
+            (_a = options.isFloatingMoveHandle) !== null && _a !== void 0 ? _a : (() => true);
+        const caps = resolveDndCapabilities(this.accessor.options);
+        this._element.draggable = caps.html5;
+        toggleClass(this._element, 'dv-draggable', caps.html5 || caps.pointer);
+        this.addDisposables(this._onDragStart);
+        const buildMultiPanelsGhost = () => {
+            const ghostEl = document.createElement('div');
+            const style = window.getComputedStyle(this._element);
+            const bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');
+            const 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 (${this.group.size})`;
+            return ghostEl;
+        };
+        const buildGhostSpec = () => {
+            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).
+            const 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,
+            };
+        };
+        const sharedDragOptions = {
+            getData: () => {
+                this.panelTransfer.setData([new PanelTransfer(this.accessor.id, this.group.id, null)], PanelTransfer.prototype);
+                return {
+                    dispose: () => {
+                        this.panelTransfer.clearData(PanelTransfer.prototype);
+                    },
+                };
+            },
+            createGhost: buildGhostSpec,
+            onDragStart: (event) => {
+                this._onDragStart.fire(event);
+            },
+        };
+        this.html5DragSource = html5Backend.createDragSource(this._element, Object.assign(Object.assign({}, sharedDragOptions), { disabled: !caps.html5, isCancelled: (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.
+        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' &&
+                this.isFloatingMoveHandle();
+        };
+        this.pointerDragSource = pointerBackend.createDragSource(this._element, Object.assign(Object.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: () => isFloating() ? FLOATING_REDOCK_INITIATION_DELAY_MS : 250, pressTolerance: () => (isFloating() ? Infinity : 8), isCancelled: () => {
+                if (!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: (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.
+        const overlayMoveSub = new MutableDisposable();
+        const refreshOverlayMoveSub = () => {
+            const overlay = this.getFloatingOverlay();
+            overlayMoveSub.value = overlay
+                ? overlay.onDidStartMoving(() => {
+                    this.pointerDragSource.cancelPending();
+                })
+                : Disposable.NONE;
+        };
+        refreshOverlayMoveSub();
+        this.addDisposables(overlayMoveSub);
+        const 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);
+    }
+    updateDragAndDropState() {
+        const caps = resolveDndCapabilities(this.accessor.options);
+        this._element.draggable = caps.html5;
+        toggleClass(this._element, 'dv-draggable', caps.html5 || caps.pointer);
+        this.html5DragSource.setDisabled(!caps.html5);
+        this.pointerDragSource.setDisabled(!caps.pointer);
+        this.pointerDragSource.setTouchOnly(!caps.pointerHandlesMouse);
+    }
+    getFloatingOverlay() {
+        var _a, _b;
+        if (!this.group) {
+            return undefined;
+        }
+        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;
+    }
+}
+export { FLOATING_REDOCK_INITIATION_DELAY_MS };

package/dist/esm/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/esm/dockview/components/titlebar/tabGroupIndicator.js

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

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

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

package/dist/esm/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;