dockview-core 6.3.0 → 6.4.0

package/dist/esm/dnd/pointer/pointerGhost.js

@@ -0,0 +1,39 @@
+/**
+ * Floating clone that follows the pointer; appended to the owning
+ * document's body with `pointer-events: none` so it doesn't intercept
+ * hit-testing.
+ */
+export class PointerGhost {
+    constructor(opts) {
+        var _a, _b, _c, _d, _e;
+        this._disposed = false;
+        this.element = opts.element;
+        this.offsetX = (_a = opts.offsetX) !== null && _a !== void 0 ? _a : 0;
+        this.offsetY = (_b = opts.offsetY) !== null && _b !== void 0 ? _b : 0;
+        // Animate via transform (see update); position:fixed for scroll-independence.
+        this.element.style.position = 'fixed';
+        this.element.style.left = '0px';
+        this.element.style.top = '0px';
+        this.element.style.pointerEvents = 'none';
+        this.element.style.zIndex = '99999';
+        this.element.style.opacity = String((_c = opts.opacity) !== null && _c !== void 0 ? _c : 0.8);
+        this.element.style.willChange = 'transform';
+        this.element.style.transform = `translate3d(${opts.initialX - this.offsetX}px, ${opts.initialY - this.offsetY}px, 0)`;
+        const ownerDocument = (_e = (_d = opts.owner) === null || _d === void 0 ? void 0 : _d.ownerDocument) !== null && _e !== void 0 ? _e : document;
+        ownerDocument.body.appendChild(this.element);
+    }
+    update(clientX, clientY) {
+        if (this._disposed) {
+            return;
+        }
+        // translate3d composites on the GPU — no layout per pointermove.
+        this.element.style.transform = `translate3d(${clientX - this.offsetX}px, ${clientY - this.offsetY}px, 0)`;
+    }
+    dispose() {
+        if (this._disposed) {
+            return;
+        }
+        this._disposed = true;
+        this.element.remove();
+    }
+}

package/dist/esm/dnd/pointer/types.d.ts

@@ -0,0 +1,16 @@
+import { Position } from '../droptarget';
+export interface PointerDragEvent {
+    readonly clientX: number;
+    readonly clientY: number;
+    readonly pointerEvent: PointerEvent;
+}
+export interface PointerDroptargetEvent {
+    readonly position: Position;
+    readonly nativeEvent: PointerEvent;
+}
+export interface IPointerDropTargetHandle {
+    readonly element: HTMLElement;
+    handleDragOver(event: PointerDragEvent): void;
+    handleDragLeave(): void;
+    handleDrop(event: PointerDragEvent): void;
+}

package/dist/esm/dnd/pointer/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/dockview/components/panel/content.d.ts

@@ -2,10 +2,11 @@ import { CompositeDisposable, IDisposable } from '../../../lifecycle';
 import { Event } from '../../../events';
 import { IDockviewPanel } from '../../dockviewPanel';
 import { DockviewComponent } from '../../dockviewComponent';
-import { Droptarget } from '../../../dnd/droptarget';
+import { Droptarget, IDropTarget } from '../../../dnd/droptarget';
 import { DockviewGroupPanelModel } from '../../dockviewGroupPanelModel';
 export interface IContentContainer extends IDisposable {
     readonly dropTarget: Droptarget;
+    readonly pointerDropTarget: IDropTarget;
     onDidFocus: Event<void>;
     onDidBlur: Event<void>;
     element: HTMLElement;
@@ -32,6 +33,7 @@ export declare class ContentContainer extends CompositeDisposable implements ICo
     readonly onDidBlur: Event<void>;
     get element(): HTMLElement;
     readonly dropTarget: Droptarget;
+    readonly pointerDropTarget: IDropTarget;
     constructor(accessor: DockviewComponent, group: DockviewGroupPanelModel);
     show(): void;
     hide(): void;

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

@@ -2,6 +2,7 @@ import { CompositeDisposable, 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';
 export class ContentContainer extends CompositeDisposable {
     get element() {
@@ -21,6 +22,25 @@ export class ContentContainer extends CompositeDisposable {
         this._element.tabIndex = -1;
         this.addDisposables(this._onDidFocus, this._onDidBlur);
         const target = group.dropTargetContainer;
+        const canDisplayOverlay = (event, position) => {
+            if (this.group.locked === 'no-drop-target' ||
+                (this.group.locked && position === 'center')) {
+                return false;
+            }
+            const data = getPanelData();
+            if (!data &&
+                event.shiftKey &&
+                this.group.location.type !== 'floating') {
+                return false;
+            }
+            if (data && data.viewId === this.accessor.id) {
+                return true;
+            }
+            return this.group.canDisplayOverlay(event, position, 'content');
+        };
+        // `dropTarget` stays the concrete `Droptarget` (not via the backend
+        // factory) because overlayRenderContainer forwards HTML5 drag events
+        // through `dropTarget.dnd` — that field is not part of `IDropTarget`.
         this.dropTarget = new Droptarget(this.element, {
             getOverlayOutline: () => {
                 var _a;
@@ -30,25 +50,22 @@ export class ContentContainer extends CompositeDisposable {
             },
             className: 'dv-drop-target-content',
             acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
-            canDisplayOverlay: (event, position) => {
-                if (this.group.locked === 'no-drop-target' ||
-                    (this.group.locked && position === 'center')) {
-                    return false;
-                }
-                const data = getPanelData();
-                if (!data &&
-                    event.shiftKey &&
-                    this.group.location.type !== 'floating') {
-                    return false;
-                }
-                if (data && data.viewId === this.accessor.id) {
-                    return true;
-                }
-                return this.group.canDisplayOverlay(event, position, 'content');
+            canDisplayOverlay,
+            getOverrideTarget: target ? () => target.model : undefined,
+        });
+        this.pointerDropTarget = pointerBackend.createDropTarget(this.element, {
+            acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
+            canDisplayOverlay,
+            getOverlayOutline: () => {
+                var _a;
+                return ((_a = accessor.options.theme) === null || _a === void 0 ? void 0 : _a.dndPanelOverlay) === 'group'
+                    ? this.element.parentElement
+                    : null;
             },
+            className: 'dv-drop-target-content',
             getOverrideTarget: target ? () => target.model : undefined,
         });
-        this.addDisposables(this.dropTarget);
+        this.addDisposables(this.dropTarget, this.pointerDropTarget);
     }
     show() {
         this.element.style.display = '';

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

@@ -1,6 +1,14 @@
 import { shiftAbsoluteElementIntoView } from '../../dom';
 import { addDisposableListener } from '../../events';
 import { CompositeDisposable, Disposable, MutableDisposable, } from '../../lifecycle';
+function isCoarsePrimaryInput(win) {
+    if (!win.matchMedia) {
+        return false;
+    }
+    const coarse = win.matchMedia('(pointer: coarse)').matches;
+    const fine = win.matchMedia('(pointer: fine)').matches;
+    return coarse && !fine;
+}
 export class PopupService extends CompositeDisposable {
     constructor(root, win = window) {
         super();
@@ -39,8 +47,22 @@ export class PopupService extends CompositeDisposable {
         wrapper.style.left = `${position.x - offsetX}px`;
         this._element.appendChild(wrapper);
         this._active = wrapper;
+        // Outside-pointerdown dismissal is suppressed for a short grace
+        // window after opening. Touch long-press callers (chip / tab context
+        // menus) open the popover while the user's finger is still pressing
+        // the source element — Android Chrome can dispatch a follow-up
+        // synthetic pointerdown tied to the gesture, and the release-then-
+        // retap motion can land just outside the wrapper. Either would
+        // dismiss the popover before the user can see or interact with it.
+        // The grace window is short enough that intentional outside taps
+        // still feel responsive.
+        const openedAt = Date.now();
+        const POINTERDOWN_GRACE_MS = 200;
         this._activeDisposable.value = new CompositeDisposable(addDisposableListener(this._window, 'pointerdown', (event) => {
             var _a;
+            if (Date.now() - openedAt < POINTERDOWN_GRACE_MS) {
+                return;
+            }
             const target = event.target;
             if (!(target instanceof HTMLElement)) {
                 return;
@@ -58,6 +80,18 @@ export class PopupService extends CompositeDisposable {
                 this.close();
             }
         }), addDisposableListener(this._window, 'resize', () => {
+            // On touch-primary devices, common interactions resize the
+            // window: on-screen keyboard pop, orientation change, browser
+            // address-bar collapse. None of these mean "the user wants
+            // the popover dismissed". Specifically, focusing the chip
+            // context menu's rename input pops the keyboard, which would
+            // otherwise close the menu the moment the user goes to edit
+            // it. Desktop / hybrid input keeps the existing behaviour —
+            // there a resize genuinely means the user has resized the
+            // window and the popover position is now stale.
+            if (isCoarsePrimaryInput(this._window)) {
+                return;
+            }
             this.close();
         }));
         this._window.requestAnimationFrame(() => {

package/dist/esm/dockview/components/tab/tab.d.ts

@@ -12,8 +12,11 @@ export declare class Tab extends CompositeDisposable {
     private readonly group;
     private readonly _element;
     private readonly dropTarget;
+    private readonly pointerDropTarget;
     private content;
-    private readonly dragHandler;
+    private readonly html5DragSource;
+    private readonly pointerDragSource;
+    private readonly panelTransfer;
     private _direction;
     private readonly _onPointDown;
     readonly onPointerDown: Event<MouseEvent>;
@@ -22,9 +25,9 @@ export declare class Tab extends CompositeDisposable {
     private readonly _onDropped;
     readonly onDrop: Event<DroptargetEvent>;
     private readonly _onDragStart;
-    readonly onDragStart: Event<DragEvent>;
+    readonly onDragStart: Event<PointerEvent | DragEvent>;
     private readonly _onDragEnd;
-    readonly onDragEnd: Event<DragEvent>;
+    readonly onDragEnd: Event<PointerEvent | DragEvent>;
     readonly onWillShowOverlay: Event<WillShowOverlayEvent>;
     get element(): HTMLElement;
     constructor(panel: IDockviewPanel, accessor: DockviewComponent, group: DockviewGroupPanel);
@@ -33,4 +36,9 @@ export declare class Tab extends CompositeDisposable {
     private _buildOverlayModel;
     setDirection(direction: DockviewHeaderDirection): void;
     updateDragAndDropState(): void;
+    /**
+     * Vertical tabs are flipped to horizontal so the ghost stays readable
+     * during the drag rather than appearing sideways-rotated.
+     */
+    private _buildGhostElement;
 }

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

@@ -1,27 +1,10 @@
-import { addDisposableListener, Emitter } from '../../../events';
+import { addDisposableListener, Emitter, Event } from '../../../events';
 import { CompositeDisposable } from '../../../lifecycle';
 import { getPanelData, LocalSelectionTransfer, PanelTransfer, } from '../../../dnd/dataTransfer';
 import { toggleClass } from '../../../dom';
-import { Droptarget, } from '../../../dnd/droptarget';
-import { DragHandler } from '../../../dnd/abstractDragHandler';
-import { addGhostImage } from '../../../dnd/ghost';
-class TabDragHandler extends DragHandler {
-    constructor(element, accessor, group, panel, disabled) {
-        super(element, disabled);
-        this.accessor = accessor;
-        this.group = group;
-        this.panel = panel;
-        this.panelTransfer = LocalSelectionTransfer.getInstance();
-    }
-    getData(event) {
-        this.panelTransfer.setData([new PanelTransfer(this.accessor.id, this.group.id, this.panel.id)], PanelTransfer.prototype);
-        return {
-            dispose: () => {
-                this.panelTransfer.clearData(PanelTransfer.prototype);
-            },
-        };
-    }
-}
+import { html5Backend, pointerBackend, } from '../../../dnd/backend';
+import { LongPressDetector } from '../../../dnd/pointer/longPress';
+import { resolveDndCapabilities } from '../../dndCapabilities';
 export class Tab extends CompositeDisposable {
     get element() {
         return this._element;
@@ -32,6 +15,7 @@ export class Tab extends CompositeDisposable {
         this.accessor = accessor;
         this.group = group;
         this.content = undefined;
+        this.panelTransfer = LocalSelectionTransfer.getInstance();
         this._direction = 'horizontal';
         this._onPointDown = new Emitter();
         this.onPointerDown = this._onPointDown.event;
@@ -43,114 +27,106 @@ export class Tab extends CompositeDisposable {
         this.onDragStart = this._onDragStart.event;
         this._onDragEnd = new Emitter();
         this.onDragEnd = this._onDragEnd.event;
+        const caps = resolveDndCapabilities(this.accessor.options);
         this._element = document.createElement('div');
         this._element.className = 'dv-tab';
         this._element.tabIndex = 0;
-        this._element.draggable = !this.accessor.options.disableDnd;
+        this._element.draggable = caps.html5;
         toggleClass(this.element, 'dv-inactive-tab', true);
-        this.dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel, !!this.accessor.options.disableDnd);
-        this.dropTarget = new Droptarget(this._element, {
+        const canDisplayOverlay = (event, position) => {
+            var _a;
+            if (this.group.locked) {
+                return false;
+            }
+            const data = getPanelData();
+            if (data && this.accessor.id === data.viewId) {
+                // Smooth-reorder takes over the in-flight visual when active,
+                // so individual tab overlays are suppressed for internal drags.
+                if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
+                    return false;
+                }
+                return true;
+            }
+            return this.group.model.canDisplayOverlay(event, position, 'tab');
+        };
+        this.dropTarget = html5Backend.createDropTarget(this._element, {
+            acceptedTargetZones: ['left', 'right'],
+            overlayModel: this._buildOverlayModel(),
+            canDisplayOverlay,
+            getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
+        });
+        this.pointerDropTarget = pointerBackend.createDropTarget(this._element, {
             acceptedTargetZones: ['left', 'right'],
             overlayModel: this._buildOverlayModel(),
-            canDisplayOverlay: (event, position) => {
+            canDisplayOverlay,
+            getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
+        });
+        const sharedDragOptions = {
+            getData: () => {
+                this.panelTransfer.setData([
+                    new PanelTransfer(this.accessor.id, this.group.id, this.panel.id),
+                ], PanelTransfer.prototype);
+                return {
+                    dispose: () => {
+                        this.panelTransfer.clearData(PanelTransfer.prototype);
+                    },
+                };
+            },
+            // 30/-10 matches the HTML5 setDragImage offset that has been
+            // shipped for years; pointer backend wraps in PointerGhost,
+            // HTML5 backend feeds into setDragImage.
+            createGhost: () => ({
+                element: this._buildGhostElement(),
+                offsetX: 30,
+                offsetY: -10,
+            }),
+            onDragStart: (event) => {
                 var _a;
-                if (this.group.locked) {
-                    return false;
+                this._onDragStart.fire(event);
+                if (!(event instanceof PointerEvent) &&
+                    ((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
+                    // Delay collapse to next frame so the browser
+                    // captures the full drag image first.
+                    requestAnimationFrame(() => {
+                        toggleClass(this.element, 'dv-tab--dragging', true);
+                    });
                 }
-                const data = getPanelData();
-                if (data && this.accessor.id === data.viewId) {
-                    if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
-                        // When smooth reorder is enabled, the Tabs
-                        // container handles all intra-accessor drops
-                        // (both same-group and cross-group) via
-                        // animation.  Suppress the per-tab overlay so
-                        // the tab is dropped *beside* rather than *on*.
-                        return false;
-                    }
-                    return true;
-                }
-                return this.group.model.canDisplayOverlay(event, position, 'tab');
             },
-            getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
-        });
-        this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
+            onDragEnd: (event) => {
+                this._onDragEnd.fire(event);
+            },
+        };
+        this.html5DragSource = html5Backend.createDragSource(this._element, Object.assign(Object.assign({}, sharedDragOptions), { disabled: !caps.html5 }));
+        this.pointerDragSource = pointerBackend.createDragSource(this._element, Object.assign(Object.assign({}, sharedDragOptions), { disabled: !caps.pointer, touchOnly: !caps.pointerHandlesMouse, isCancelled: () => !resolveDndCapabilities(this.accessor.options).pointer }));
+        // Both droptargets feed the same downstream stream; consumers don't
+        // need to know which path produced the overlay.
+        this.onWillShowOverlay = Event.any(this.dropTarget.onWillShowOverlay, this.pointerDropTarget.onWillShowOverlay);
         this.addDisposables(this._onPointDown, this._onTabClick, this._onDropped, this._onDragStart, this._onDragEnd, this.accessor.onDidOptionsChange(() => {
-            this.dropTarget.setOverlayModel(this._buildOverlayModel());
-        }), this.dragHandler.onDragStart((event) => {
-            var _a;
-            if (event.dataTransfer) {
-                const style = getComputedStyle(this.element);
-                const newNode = this.element.cloneNode(true);
-                const isVertical = this._direction === 'vertical';
-                /**
-                 * Properties to skip when copying computed styles for a
-                 * vertical tab ghost.  `writing-mode` is excluded so we
-                 * can force `horizontal-tb`.  Size and margin logical
-                 * properties are excluded because their physical meaning
-                 * flips when writing-mode changes, which would produce
-                 * incorrect dimensions.
-                 */
-                const verticalSkip = new Set([
-                    'writing-mode',
-                    'inline-size',
-                    'block-size',
-                    'min-inline-size',
-                    'min-block-size',
-                    'max-inline-size',
-                    'max-block-size',
-                    'margin-inline',
-                    'margin-inline-start',
-                    'margin-inline-end',
-                    'margin-block',
-                    'margin-block-start',
-                    'margin-block-end',
-                    'padding-inline',
-                    'padding-inline-start',
-                    'padding-inline-end',
-                    'padding-block',
-                    'padding-block-start',
-                    'padding-block-end',
-                ]);
-                Array.from(style).forEach((key) => {
-                    if (isVertical && verticalSkip.has(key)) {
-                        return;
-                    }
-                    newNode.style.setProperty(key, style.getPropertyValue(key), style.getPropertyPriority(key));
-                });
-                if (isVertical) {
-                    // Force horizontal text flow and swap the physical
-                    // dimensions so the ghost appears as a horizontal tab.
-                    newNode.style.setProperty('writing-mode', 'horizontal-tb');
-                    newNode.style.setProperty('width', style.height);
-                    newNode.style.setProperty('height', style.width);
-                }
-                newNode.style.position = 'absolute';
-                newNode.classList.add('dv-tab-ghost-drag');
-                addGhostImage(event.dataTransfer, newNode, {
-                    y: -10,
-                    x: 30,
-                });
-            }
-            this._onDragStart.fire(event);
-            if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
-                // Delay collapse to next frame so the browser
-                // captures the full drag image first
-                requestAnimationFrame(() => {
-                    toggleClass(this.element, 'dv-tab--dragging', true);
-                });
-            }
-        }), addDisposableListener(this._element, 'dragend', (event) => {
+            const model = this._buildOverlayModel();
+            this.dropTarget.setOverlayModel(model);
+            this.pointerDropTarget.setOverlayModel(model);
+        }), addDisposableListener(this._element, 'dragend', () => {
+            // The shared onDragEnd handler already fires _onDragEnd via
+            // the HTML5 backend; just strip the dragging class here.
             toggleClass(this.element, 'dv-tab--dragging', false);
-            this._onDragEnd.fire(event);
-        }), this.dragHandler, addDisposableListener(this._element, 'pointerdown', (event) => {
+        }), this.html5DragSource, addDisposableListener(this._element, 'pointerdown', (event) => {
             this._onPointDown.fire(event);
         }), addDisposableListener(this._element, 'click', (event) => {
             this._onTabClick.fire(event);
         }), addDisposableListener(this._element, 'contextmenu', (event) => {
             this.accessor.contextMenuController.show(this.panel, this.group, event);
+        }), new LongPressDetector(this._element, {
+            onLongPress: (event) => {
+                // 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);
+            },
         }), this.dropTarget.onDrop((event) => {
             this._onDropped.fire(event);
-        }), this.dropTarget);
+        }), this.pointerDropTarget.onDrop((event) => {
+            this._onDropped.fire(event);
+        }), this.dropTarget, this.pointerDropTarget, this.pointerDragSource);
     }
     setActive(isActive) {
         toggleClass(this.element, 'dv-active-tab', isActive);
@@ -180,10 +156,59 @@ export class Tab extends CompositeDisposable {
     }
     setDirection(direction) {
         this._direction = direction;
-        this.dropTarget.setTargetZones(direction === 'vertical' ? ['top', 'bottom'] : ['left', 'right']);
+        const zones = direction === 'vertical' ? ['top', 'bottom'] : ['left', 'right'];
+        this.dropTarget.setTargetZones(zones);
+        this.pointerDropTarget.setTargetZones(zones);
     }
     updateDragAndDropState() {
-        this._element.draggable = !this.accessor.options.disableDnd;
-        this.dragHandler.setDisabled(!!this.accessor.options.disableDnd);
+        const caps = resolveDndCapabilities(this.accessor.options);
+        this._element.draggable = caps.html5;
+        this.html5DragSource.setDisabled(!caps.html5);
+        this.pointerDragSource.setDisabled(!caps.pointer);
+        this.pointerDragSource.setTouchOnly(!caps.pointerHandlesMouse);
+    }
+    /**
+     * Vertical tabs are flipped to horizontal so the ghost stays readable
+     * during the drag rather than appearing sideways-rotated.
+     */
+    _buildGhostElement() {
+        const style = getComputedStyle(this.element);
+        const newNode = this.element.cloneNode(true);
+        const isVertical = this._direction === 'vertical';
+        const verticalSkip = new Set([
+            'writing-mode',
+            'inline-size',
+            'block-size',
+            'min-inline-size',
+            'min-block-size',
+            'max-inline-size',
+            'max-block-size',
+            'margin-inline',
+            'margin-inline-start',
+            'margin-inline-end',
+            'margin-block',
+            'margin-block-start',
+            'margin-block-end',
+            'padding-inline',
+            'padding-inline-start',
+            'padding-inline-end',
+            'padding-block',
+            'padding-block-start',
+            'padding-block-end',
+        ]);
+        Array.from(style).forEach((key) => {
+            if (isVertical && verticalSkip.has(key)) {
+                return;
+            }
+            newNode.style.setProperty(key, style.getPropertyValue(key), style.getPropertyPriority(key));
+        });
+        if (isVertical) {
+            newNode.style.setProperty('writing-mode', 'horizontal-tb');
+            newNode.style.setProperty('width', style.height);
+            newNode.style.setProperty('height', style.width);
+        }
+        newNode.style.position = 'absolute';
+        newNode.classList.add('dv-tab-ghost-drag');
+        return newNode;
     }
 }

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

@@ -4,6 +4,14 @@ import { ITabGroup } from '../../tabGroup';
 import { TabGroupColorPalette } from '../../tabGroupAccent';
 import { ITabGroupChipRenderer } from '../../framework';
 import { DockviewApi } from '../../../api/component.api';
+/**
+ * Visual chip for a tab group. Owns the DOM element, label, click /
+ * context-menu interactions, and exposes a long-press gesture as a
+ * second `onContextMenu` source. Drag-and-drop wiring lives in
+ * `TabGroupManager` — the manager constructs the drag sources on this
+ * chip's element so it can include tabs-list context (custom group
+ * drag image, tab-group transfer payload).
+ */
 export declare class TabGroupChip extends CompositeDisposable implements ITabGroupChipRenderer {
     private readonly _palette?;
     private readonly _element;
@@ -12,9 +20,8 @@ export declare class TabGroupChip extends CompositeDisposable implements ITabGro
     private readonly _onClick;
     readonly onClick: Event<MouseEvent>;
     private readonly _onContextMenu;
+    /** Fires on right-click and on touch long-press. */
     readonly onContextMenu: Event<MouseEvent>;
-    private readonly _onDragStart;
-    readonly onDragStart: Event<DragEvent>;
     get element(): HTMLElement;
     constructor(_palette?: TabGroupColorPalette | undefined);
     init(params: {

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

@@ -2,6 +2,15 @@ import { addDisposableListener, Emitter } from '../../../events';
 import { CompositeDisposable } from '../../../lifecycle';
 import { toggleClass } from '../../../dom';
 import { applyTabGroupAccent, } from '../../tabGroupAccent';
+import { LongPressDetector } from '../../../dnd/pointer/longPress';
+/**
+ * Visual chip for a tab group. Owns the DOM element, label, click /
+ * context-menu interactions, and exposes a long-press gesture as a
+ * second `onContextMenu` source. Drag-and-drop wiring lives in
+ * `TabGroupManager` — the manager constructs the drag sources on this
+ * chip's element so it can include tabs-list context (custom group
+ * drag image, tab-group transfer payload).
+ */
 export class TabGroupChip extends CompositeDisposable {
     get element() {
         return this._element;
@@ -12,22 +21,22 @@ export class TabGroupChip extends CompositeDisposable {
         this._onClick = new Emitter();
         this.onClick = this._onClick.event;
         this._onContextMenu = new Emitter();
+        /** Fires on right-click and on touch long-press. */
         this.onContextMenu = this._onContextMenu.event;
-        this._onDragStart = new Emitter();
-        this.onDragStart = this._onDragStart.event;
         this._element = document.createElement('div');
         this._element.className = 'dv-tab-group-chip';
         this._element.tabIndex = 0;
-        this._element.draggable = true;
         this._label = document.createElement('span');
         this._label.className = 'dv-tab-group-chip-label';
         this._element.appendChild(this._label);
-        this.addDisposables(this._onClick, this._onContextMenu, this._onDragStart, addDisposableListener(this._element, 'click', (event) => {
+        this.addDisposables(this._onClick, this._onContextMenu, new LongPressDetector(this._element, {
+            onLongPress: (event) => {
+                this._onContextMenu.fire(event);
+            },
+        }), addDisposableListener(this._element, 'click', (event) => {
             this._onClick.fire(event);
         }), addDisposableListener(this._element, 'contextmenu', (event) => {
             this._onContextMenu.fire(event);
-        }), addDisposableListener(this._element, 'dragstart', (event) => {
-            this._onDragStart.fire(event);
         }));
     }
     init(params) {