dockview-core 6.3.0 → 6.4.0

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

@@ -7,16 +7,18 @@ import { DockviewComponent } from '../../dockviewComponent';
 import { DockviewWillShowOverlayLocationEvent } from '../../events';
 import { DockviewHeaderDirection } from '../../options';
 export interface TabDropIndexEvent {
-    readonly event: DragEvent;
+    readonly event: DragEvent | PointerEvent;
     readonly index: number;
     readonly targetTabGroupId?: string | null;
 }
 export interface TabDragEvent {
-    readonly nativeEvent: DragEvent;
+    /** Narrow with `instanceof DragEvent` before reading `dataTransfer`. */
+    readonly nativeEvent: DragEvent | PointerEvent;
     readonly panel: IDockviewPanel;
 }
 export interface GroupDragEvent {
-    readonly nativeEvent: DragEvent;
+    /** Narrow with `instanceof DragEvent` before reading `dataTransfer`. */
+    readonly nativeEvent: DragEvent | PointerEvent;
     readonly group: DockviewGroupPanel;
 }
 export interface ITabsContainer extends IDisposable {

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

@@ -8,13 +8,17 @@ export declare class VoidContainer extends CompositeDisposable {
     private readonly group;
     private readonly _element;
     private readonly dropTarget;
-    private readonly handler;
+    private readonly pointerDropTarget;
+    private readonly html5DragSource;
+    private readonly pointerDragSource;
+    private readonly panelTransfer;
     private readonly _onDrop;
     readonly onDrop: Event<DroptargetEvent>;
     private readonly _onDragStart;
-    readonly onDragStart: Event<DragEvent>;
+    readonly onDragStart: Event<PointerEvent | DragEvent>;
     readonly onWillShowOverlay: Event<WillShowOverlayEvent>;
     get element(): HTMLElement;
     constructor(accessor: DockviewComponent, group: DockviewGroupPanel);
     updateDragAndDropState(): void;
+    private getFloatingOverlay;
 }

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

@@ -1,56 +1,204 @@
-import { getPanelData } from '../../../dnd/dataTransfer';
-import { Droptarget, } from '../../../dnd/droptarget';
-import { GroupDragHandler } from '../../../dnd/groupDragHandler';
-import { addDisposableListener, Emitter } from '../../../events';
-import { CompositeDisposable } from '../../../lifecycle';
-import { toggleClass } from '../../../dom';
+import { getPanelData, LocalSelectionTransfer, PanelTransfer, } from '../../../dnd/dataTransfer';
+import { html5Backend, pointerBackend, } from '../../../dnd/backend';
+import { addDisposableListener, Emitter, Event } from '../../../events';
+import { CompositeDisposable, Disposable, MutableDisposable, } from '../../../lifecycle';
+import { quasiPreventDefault, 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;
 export class VoidContainer extends CompositeDisposable {
     get element() {
         return this._element;
     }
     constructor(accessor, group) {
+        var _a, _b;
         super();
         this.accessor = accessor;
         this.group = group;
+        this.panelTransfer = LocalSelectionTransfer.getInstance();
         this._onDrop = new Emitter();
         this.onDrop = this._onDrop.event;
         this._onDragStart = new Emitter();
         this.onDragStart = this._onDragStart.event;
+        const caps = resolveDndCapabilities(this.accessor.options);
         this._element = document.createElement('div');
         this._element.className = 'dv-void-container';
-        this._element.draggable = !this.accessor.options.disableDnd;
-        toggleClass(this._element, 'dv-draggable', !this.accessor.options.disableDnd);
+        this._element.draggable = caps.html5;
+        toggleClass(this._element, 'dv-draggable', caps.html5 || caps.pointer);
         this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'pointerdown', () => {
             this.accessor.doSetGroupActive(this.group);
-        }));
-        this.handler = new GroupDragHandler(this._element, accessor, group, !!this.accessor.options.disableDnd);
-        this.dropTarget = new Droptarget(this._element, {
+        }), 
+        // Shift+pointerdown marks the event so the group's overlay
+        // drag (move-by-floating) sees it was consumed and doesn't
+        // fire alongside the HTML5 drag. quasiPreventDefault sets the
+        // marker without calling preventDefault — that would also
+        // block dragstart, which we need to fire.
+        addDisposableListener(this._element, 'pointerdown', (e) => {
+            if (e.shiftKey) {
+                quasiPreventDefault(e);
+            }
+        }, true));
+        const canDisplayOverlay = (event, position) => {
+            if (this.group.api.locked) {
+                // Dropping on the void/header space adds the panel
+                // to this group, which `locked` is meant to prevent
+                // (both `true` and `'no-drop-target'`).
+                return false;
+            }
+            const data = getPanelData();
+            if (data && this.accessor.id === data.viewId) {
+                return true;
+            }
+            return group.model.canDisplayOverlay(event, position, 'header_space');
+        };
+        this.dropTarget = html5Backend.createDropTarget(this._element, {
             acceptedTargetZones: ['center'],
-            canDisplayOverlay: (event, position) => {
-                if (this.group.api.locked) {
-                    // Dropping on the void/header space adds the panel
-                    // to this group, which `locked` is meant to prevent
-                    // (both `true` and `'no-drop-target'`).
-                    return false;
+            canDisplayOverlay,
+            getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
+        });
+        this.pointerDropTarget = pointerBackend.createDropTarget(this._element, {
+            acceptedTargetZones: ['center'],
+            canDisplayOverlay,
+            getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
+        });
+        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 = () => {
+            const createGhost = this.accessor.options.createGroupDragGhostComponent;
+            if (createGhost) {
+                const renderer = createGhost(this.group);
+                renderer.init({
+                    group: this.group,
+                    api: this.accessor.api,
+                });
+                return {
+                    element: renderer.element,
+                    offsetX: 30,
+                    offsetY: -10,
+                    dispose: renderer.dispose
+                        ? () => { var _a; return (_a = renderer.dispose) === null || _a === void 0 ? void 0 : _a.call(renderer); }
+                        : undefined,
+                };
+            }
+            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: floating groups need shift+drag as the explicit
+                // detach gesture (otherwise click-and-drag conflicts with
+                // moving the floating group itself).
+                if (this.group.api.location.type === 'floating' &&
+                    !event.shiftKey) {
+                    return true;
                 }
-                const data = getPanelData();
-                if (data && this.accessor.id === data.viewId) {
+                if (this.group.api.location.type === 'edge' &&
+                    this.group.size === 0) {
                     return true;
                 }
-                return group.model.canDisplayOverlay(event, position, 'header_space');
-            },
-            getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
-        });
-        this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
-        this.addDisposables(this.handler, this.handler.onDragStart((event) => {
-            this._onDragStart.fire(event);
-        }), this.dropTarget.onDrop((event) => {
+                return false;
+            } }));
+        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.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 = (_b = (_a = this.group) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.onDidLocationChange;
+        if (locationChange) {
+            this.addDisposables(locationChange(refreshOverlayMoveSub));
+        }
+        this.onWillShowOverlay = Event.any(this.dropTarget.onWillShowOverlay, this.pointerDropTarget.onWillShowOverlay);
+        this.addDisposables(this.html5DragSource, this.dropTarget.onDrop((event) => {
             this._onDrop.fire(event);
-        }), this.dropTarget);
+        }), this.pointerDropTarget.onDrop((event) => {
+            this._onDrop.fire(event);
+        }), this.dropTarget, this.pointerDropTarget, this.pointerDragSource);
     }
     updateDragAndDropState() {
-        this._element.draggable = !this.accessor.options.disableDnd;
-        toggleClass(this._element, 'dv-draggable', !this.accessor.options.disableDnd);
-        this.handler.setDisabled(!!this.accessor.options.disableDnd);
+        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;
     }
 }

package/dist/esm/dockview/contextMenu.js

@@ -40,6 +40,14 @@ function buildSeparator() {
     el.setAttribute('role', 'separator');
     return el;
 }
+function isCoarsePrimaryInput() {
+    if (typeof window === 'undefined' || !window.matchMedia) {
+        return false;
+    }
+    const coarse = window.matchMedia('(pointer: coarse)').matches;
+    const fine = window.matchMedia('(pointer: fine)').matches;
+    return coarse && !fine;
+}
 function buildRenameInput(tabGroup) {
     const wrapper = document.createElement('div');
     wrapper.className = 'dv-context-menu-rename';
@@ -60,10 +68,17 @@ function buildRenameInput(tabGroup) {
         e.stopPropagation();
     });
     wrapper.appendChild(input);
-    requestAnimationFrame(() => {
-        input.focus();
-        input.select();
-    });
+    // Skip auto-focus on touch-primary devices: focusing the input pops the
+    // on-screen keyboard, which fires `window resize`, which `PopupService`
+    // listens to and uses to dismiss the popover — so the menu opens, the
+    // keyboard appears, and the menu immediately closes before the user can
+    // type. The user can still tap the input to focus it intentionally.
+    if (!isCoarsePrimaryInput()) {
+        requestAnimationFrame(() => {
+            input.focus();
+            input.select();
+        });
+    }
     return wrapper;
 }
 function buildColorPicker(tabGroup, palette) {

package/dist/esm/dockview/dndCapabilities.d.ts

@@ -0,0 +1,19 @@
+import { DockviewOptions } from './options';
+/**
+ * Internal mapping of the user-facing `dndStrategy` option into the
+ * per-backend capability flags consumed by drag-source / drop-target
+ * construction sites. Not part of the public API — consumers only see
+ * the `dndStrategy` option itself.
+ */
+export interface DndCapabilities {
+    /** HTML5 drag/drop wiring active (draggable attr, dragstart). */
+    readonly html5: boolean;
+    /** Pointer-event drag source active. */
+    readonly pointer: boolean;
+    /**
+     * When true, the pointer source handles mouse pointers too
+     * (`touchOnly: false`). Implies `pointer` is true.
+     */
+    readonly pointerHandlesMouse: boolean;
+}
+export declare function resolveDndCapabilities(options: Pick<DockviewOptions, 'dndStrategy' | 'disableDnd'>): DndCapabilities;

package/dist/esm/dockview/dndCapabilities.js

@@ -0,0 +1,36 @@
+export function resolveDndCapabilities(options) {
+    if (options.disableDnd) {
+        return { html5: false, pointer: false, pointerHandlesMouse: false };
+    }
+    switch (options.dndStrategy) {
+        case 'pointer':
+            return { html5: false, pointer: true, pointerHandlesMouse: true };
+        case 'html5':
+            return { html5: true, pointer: false, pointerHandlesMouse: false };
+        case 'auto':
+        case undefined:
+        default:
+            // On touch-primary devices (phones / basic tablets) HTML5 DnD's
+            // native long-press intercepts the gesture before our pointer
+            // backend can react — Android Chrome launches a system drag with
+            // its half-transparent thumbnail, and the long-press context menu
+            // never opens. Disable HTML5 there so the pointer backend owns
+            // every gesture. Hybrid devices (touchscreen laptops, Surface,
+            // iPad with mouse) keep both backends — mouse uses HTML5, touch
+            // falls back to whichever backend the underlying element wired.
+            return isCoarsePrimaryInput()
+                ? { html5: false, pointer: true, pointerHandlesMouse: true }
+                : { html5: true, pointer: true, pointerHandlesMouse: false };
+    }
+}
+function isCoarsePrimaryInput() {
+    if (typeof window === 'undefined' || !window.matchMedia) {
+        return false;
+    }
+    // Coarse pointer without any fine pointer = phone-class device. A laptop
+    // touchscreen reports both, and we want HTML5 to remain available there
+    // because a real mouse is also plugged in.
+    const coarse = window.matchMedia('(pointer: coarse)').matches;
+    const fine = window.matchMedia('(pointer: fine)').matches;
+    return coarse && !fine;
+}

package/dist/esm/dockview/dockviewComponent.d.ts

@@ -261,6 +261,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     private readonly _floatingGroups;
     private readonly _popoutGroups;
     private readonly _rootDropTarget;
+    private readonly _rootPointerDropTarget;
     private _popoutRestorationPromise;
     private readonly _popoutRestorationCleanups;
     private readonly _onDidRemoveGroup;

package/dist/esm/dockview/dockviewComponent.js

@@ -1,5 +1,6 @@
 import { getRelativeLocation, getGridLocation, orthogonal, } from '../gridview/gridview';
-import { directionToPosition, Droptarget, } from '../dnd/droptarget';
+import { directionToPosition, } from '../dnd/droptarget';
+import { html5Backend, pointerBackend } from '../dnd/backend';
 import { tail, sequenceEquals, remove } from '../array';
 import { DockviewPanel } from './dockviewPanel';
 import { CompositeDisposable, Disposable } from '../lifecycle';
@@ -98,7 +99,7 @@ export class DockviewComponent extends BaseGrid {
         return this._popoutRestorationPromise;
     }
     constructor(container, options) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         super(container, {
             proportionalLayout: true,
             orientation: Orientation.HORIZONTAL,
@@ -197,37 +198,51 @@ export class DockviewComponent extends BaseGrid {
         this._floatingOverlayHost = document.createElement('div');
         this._floatingOverlayHost.className = 'dv-floating-overlay-host';
         this._shellManager.element.appendChild(this._floatingOverlayHost);
-        this._rootDropTarget = new Droptarget(this.element, {
-            className: 'dv-drop-target-edge',
-            canDisplayOverlay: (event, position) => {
-                const data = getPanelData();
-                if (data) {
-                    if (data.viewId !== this.id) {
-                        return false;
-                    }
-                    if (position === 'center') {
-                        // center drop target is only allowed if there are no panels in the grid
-                        // floating panels are allowed
-                        return this.gridview.length === 0;
-                    }
-                    return true;
-                }
-                if (position === 'center' && this.gridview.length !== 0) {
-                    /**
-                     * for external events only show the four-corner drag overlays, disable
-                     * the center position so that external drag events can fall through to the group
-                     * and panel drop target handlers
-                     */
+        const rootCanDisplayOverlay = (event, position) => {
+            const data = getPanelData();
+            if (data) {
+                if (data.viewId !== this.id) {
                     return false;
                 }
-                const firedEvent = new DockviewUnhandledDragOverEvent(event, 'edge', position, getPanelData);
-                this._onUnhandledDragOverEvent.fire(firedEvent);
-                return firedEvent.isAccepted;
-            },
+                if (position === 'center') {
+                    // center drop target is only allowed if there are no panels in the grid
+                    // floating panels are allowed
+                    return this.gridview.length === 0;
+                }
+                return true;
+            }
+            if (position === 'center' && this.gridview.length !== 0) {
+                /**
+                 * for external events only show the four-corner drag overlays, disable
+                 * the center position so that external drag events can fall through to the group
+                 * and panel drop target handlers
+                 */
+                return false;
+            }
+            const firedEvent = new DockviewUnhandledDragOverEvent(event, 'edge', position, getPanelData);
+            this._onUnhandledDragOverEvent.fire(firedEvent);
+            return firedEvent.isAccepted;
+        };
+        this._rootDropTarget = html5Backend.createDropTarget(this.element, {
+            className: 'dv-drop-target-edge',
+            canDisplayOverlay: rootCanDisplayOverlay,
             acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
             overlayModel: (_f = options.rootOverlayModel) !== null && _f !== void 0 ? _f : DEFAULT_ROOT_OVERLAY_MODEL,
             getOverrideTarget: () => { var _a; return (_a = this.rootDropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
         });
+        this._rootPointerDropTarget = pointerBackend.createDropTarget(this.element, {
+            className: 'dv-drop-target-edge',
+            canDisplayOverlay: rootCanDisplayOverlay,
+            acceptedTargetZones: [
+                'top',
+                'bottom',
+                'left',
+                'right',
+                'center',
+            ],
+            overlayModel: (_g = options.rootOverlayModel) !== null && _g !== void 0 ? _g : DEFAULT_ROOT_OVERLAY_MODEL,
+            getOverrideTarget: () => { var _a; return (_a = this.rootDropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
+        });
         this.updateDropTargetModel(options);
         toggleClass(this.gridview.element, 'dv-dockview', true);
         toggleClass(this.element, 'dv-debug', !!options.debug);
@@ -289,7 +304,7 @@ export class DockviewComponent extends BaseGrid {
                 d.dispose();
             }
             this._edgeGroupDisposables.clear();
-        }), this._rootDropTarget, this._rootDropTarget.onWillShowOverlay((event) => {
+        }), this._rootDropTarget, this._rootPointerDropTarget, Event.any(this._rootDropTarget.onWillShowOverlay, this._rootPointerDropTarget.onWillShowOverlay)((event) => {
             if (this.gridview.length > 0 && event.position === 'center') {
                 // option only available when no panels in primary grid
                 return;
@@ -301,7 +316,7 @@ export class DockviewComponent extends BaseGrid {
                 group: undefined,
                 getData: getPanelData,
             }));
-        }), this._rootDropTarget.onDrop((event) => {
+        }), Event.any(this._rootDropTarget.onDrop, this._rootPointerDropTarget.onDrop)((event) => {
             var _a;
             const willDropEvent = new DockviewWillDropEvent({
                 nativeEvent: event.nativeEvent,
@@ -339,7 +354,7 @@ export class DockviewComponent extends BaseGrid {
                     getData: getPanelData,
                 }));
             }
-        }), this._rootDropTarget);
+        }));
     }
     setVisible(panel, visible) {
         switch (panel.api.location.type) {
@@ -856,9 +871,12 @@ export class DockviewComponent extends BaseGrid {
         }
         this.updateDropTargetModel(options);
         const oldDisableDnd = this.options.disableDnd;
+        const oldDndStrategy = this.options.dndStrategy;
         this._options = Object.assign(Object.assign({}, this.options), options);
         const newDisableDnd = this.options.disableDnd;
-        if (oldDisableDnd !== newDisableDnd) {
+        const newDndStrategy = this.options.dndStrategy;
+        if (oldDisableDnd !== newDisableDnd ||
+            oldDndStrategy !== newDndStrategy) {
             this.updateDragAndDropState();
         }
         if ('theme' in options) {
@@ -2422,15 +2440,18 @@ export class DockviewComponent extends BaseGrid {
     }
     updateDropTargetModel(options) {
         if ('dndEdges' in options) {
-            this._rootDropTarget.disabled =
-                typeof options.dndEdges === 'boolean' &&
-                    options.dndEdges === false;
+            const disabled = typeof options.dndEdges === 'boolean' &&
+                options.dndEdges === false;
+            this._rootDropTarget.disabled = disabled;
+            this._rootPointerDropTarget.disabled = disabled;
             if (typeof options.dndEdges === 'object' &&
                 options.dndEdges !== null) {
                 this._rootDropTarget.setOverlayModel(options.dndEdges);
+                this._rootPointerDropTarget.setOverlayModel(options.dndEdges);
             }
             else {
                 this._rootDropTarget.setOverlayModel(DEFAULT_ROOT_OVERLAY_MODEL);
+                this._rootPointerDropTarget.setOverlayModel(DEFAULT_ROOT_OVERLAY_MODEL);
             }
         }
         if ('rootOverlayModel' in options) {

package/dist/esm/dockview/dockviewGroupPanelModel.d.ts

@@ -52,13 +52,17 @@ export interface CreateTabGroupOptions extends TabGroupOptions {
 }
 export declare class DockviewDidDropEvent extends DockviewEvent {
     private readonly options;
-    get nativeEvent(): DragEvent;
+    /**
+     * `PointerEvent` for touch drags has no `dataTransfer`; use
+     * `getData()` for the dockview payload regardless of input method.
+     */
+    get nativeEvent(): DragEvent | PointerEvent;
     get position(): Position;
     get panel(): IDockviewPanel | undefined;
     get group(): DockviewGroupPanel | undefined;
     get api(): DockviewApi;
     constructor(options: {
-        readonly nativeEvent: DragEvent;
+        readonly nativeEvent: DragEvent | PointerEvent;
         readonly position: Position;
         readonly panel?: IDockviewPanel;
         getData(): PanelTransfer | undefined;
@@ -71,7 +75,7 @@ export declare class DockviewWillDropEvent extends DockviewDidDropEvent {
     private readonly _kind;
     get kind(): DockviewGroupDropLocation;
     constructor(options: {
-        readonly nativeEvent: DragEvent;
+        readonly nativeEvent: DragEvent | PointerEvent;
         readonly position: Position;
         readonly panel?: IDockviewPanel;
         getData(): PanelTransfer | undefined;
@@ -122,7 +126,7 @@ export interface IDockviewGroupPanelModel extends IPanel {
         panel?: IDockviewPanel;
         suppressRoll?: boolean;
     }): void;
-    canDisplayOverlay(event: DragEvent, position: Position, target: DockviewGroupDropLocation): boolean;
+    canDisplayOverlay(event: DragEvent | PointerEvent, position: Position, target: DockviewGroupDropLocation): boolean;
 }
 export type DockviewGroupLocation = {
     type: 'grid';
@@ -324,7 +328,7 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     private doSetActivePanel;
     private updateMru;
     private updateContainer;
-    canDisplayOverlay(event: DragEvent, position: Position, target: DockviewGroupDropLocation): boolean;
+    canDisplayOverlay(event: DragEvent | PointerEvent, position: Position, target: DockviewGroupDropLocation): boolean;
     private handleDropEvent;
     updateDragAndDropState(): void;
     dispose(): void;