dockview-core 6.2.2 → 6.4.0

package/dist/cjs/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';
@@ -272,6 +276,7 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     getTabGroups(): readonly ITabGroup[];
     updateTabGroups(): void;
     refreshTabGroupAccent(): void;
+    refreshWatermark(): void;
     getTabGroupForPanel(panelId: string): ITabGroup | undefined;
     private _findTabGroupForPanel;
     private _removeTabGroupInternal;
@@ -323,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;

package/dist/cjs/dockview/dockviewGroupPanelModel.js

@@ -70,6 +70,10 @@ var DockviewDidDropEvent = /** @class */ (function (_super) {
         return _this;
     }
     Object.defineProperty(DockviewDidDropEvent.prototype, "nativeEvent", {
+        /**
+         * `PointerEvent` for touch drags has no `dataTransfer`; use
+         * `getData()` for the dockview payload regardless of input method.
+         */
         get: function () {
             return this.options.nativeEvent;
         },
@@ -261,6 +265,8 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
             // noop
         }), _this.contentContainer.dropTarget.onDrop(function (event) {
             _this.handleDropEvent('content', event.nativeEvent, event.position);
+        }), _this.contentContainer.pointerDropTarget.onDrop(function (event) {
+            _this.handleDropEvent('content', event.nativeEvent, event.position);
         }), _this.tabsContainer.onWillShowOverlay(function (event) {
             _this._onWillShowOverlay.fire(event);
         }), _this.contentContainer.dropTarget.onWillShowOverlay(function (event) {
@@ -271,6 +277,14 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
                 group: _this.groupPanel,
                 getData: dataTransfer_1.getPanelData,
             }));
+        }), _this.contentContainer.pointerDropTarget.onWillShowOverlay(function (event) {
+            _this._onWillShowOverlay.fire(new events_2.DockviewWillShowOverlayLocationEvent(event, {
+                kind: 'content',
+                panel: _this.activePanel,
+                api: _this._api,
+                group: _this.groupPanel,
+                getData: dataTransfer_1.getPanelData,
+            }));
         }), _this._onMove, _this._onDidChange, _this._onDidDrop, _this._onWillDrop, _this._onDidAddPanel, _this._onDidRemovePanel, _this._onDidActivePanelChange, _this._onUnhandledDragOverEvent, _this._onDidPanelTitleChange, _this._onDidPanelParametersChange, _this._onDidCreateTabGroup, _this._onDidDestroyTabGroup, _this._onDidAddPanelToTabGroup, _this._onDidRemovePanelFromTabGroup, _this._onDidTabGroupChange, _this._onDidTabGroupCollapsedChange, _this._onDidCreateTabGroup.event(function () {
             _this._scheduleTabGroupUpdate();
         }), _this._onDidDestroyTabGroup.event(function () {
@@ -402,33 +416,33 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
             return this._location;
         },
         set: function (value) {
+            var _this = this;
             this._location = value;
             (0, dom_1.toggleClass)(this.container, 'dv-groupview-floating', false);
             (0, dom_1.toggleClass)(this.container, 'dv-groupview-popout', false);
             (0, dom_1.toggleClass)(this.container, 'dv-groupview-edge', false);
+            // Mouse and touch drop targets must agree on accepted zones.
+            var applyZones = function (zones) {
+                _this.contentContainer.dropTarget.setTargetZones(zones);
+                _this.contentContainer.pointerDropTarget.setTargetZones(zones);
+            };
             switch (value.type) {
                 case 'grid':
-                    this.contentContainer.dropTarget.setTargetZones([
-                        'top',
-                        'bottom',
-                        'left',
-                        'right',
-                        'center',
-                    ]);
+                    applyZones(['top', 'bottom', 'left', 'right', 'center']);
                     break;
                 case 'floating':
-                    this.contentContainer.dropTarget.setTargetZones(['center']);
-                    this.contentContainer.dropTarget.setTargetZones(value
+                    applyZones(['center']);
+                    applyZones(value
                         ? ['center']
                         : ['top', 'bottom', 'left', 'right', 'center']);
                     (0, dom_1.toggleClass)(this.container, 'dv-groupview-floating', true);
                     break;
                 case 'popout':
-                    this.contentContainer.dropTarget.setTargetZones(['center']);
+                    applyZones(['center']);
                     (0, dom_1.toggleClass)(this.container, 'dv-groupview-popout', true);
                     break;
                 case 'edge':
-                    this.contentContainer.dropTarget.setTargetZones(['center']);
+                    applyZones(['center']);
                     (0, dom_1.toggleClass)(this.container, 'dv-groupview-edge', true);
                     break;
             }
@@ -721,6 +735,15 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
     DockviewGroupPanelModel.prototype.refreshTabGroupAccent = function () {
         this.tabsContainer.refreshTabGroupAccent();
     };
+    DockviewGroupPanelModel.prototype.refreshWatermark = function () {
+        var _a, _b;
+        if (this.watermark) {
+            this.watermark.element.remove();
+            (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
+            this.watermark = undefined;
+        }
+        this.updateContainer();
+    };
     DockviewGroupPanelModel.prototype.getTabGroupForPanel = function (panelId) {
         return this._findTabGroupForPanel(panelId);
     };

package/dist/cjs/dockview/dockviewPanel.js

@@ -159,6 +159,11 @@ var DockviewPanel = /** @class */ (function (_super) {
         var didTitleChange = title !== this.title;
         if (didTitleChange) {
             this._title = title;
+            // keep the view-model's cached init params in sync so that tab
+            // renderers constructed lazily (e.g. the header overflow
+            // dropdown via createTabRenderer) see the updated title
+            // (#914).
+            this.view.setTitle(title);
             this.api._onDidTitleChange.fire({ title: title });
         }
     };

package/dist/cjs/dockview/dockviewPanelModel.d.ts

@@ -12,6 +12,7 @@ export interface IDockviewPanelModel extends IDisposable {
     layout(width: number, height: number): void;
     init(params: GroupPanelPartInitParameters): void;
     createTabRenderer(tabLocation: TabLocation): ITabRenderer;
+    setTitle(title: string): void;
 }
 export declare class DockviewPanelModel implements IDockviewPanelModel {
     private readonly accessor;
@@ -27,6 +28,7 @@ export declare class DockviewPanelModel implements IDockviewPanelModel {
     constructor(accessor: IDockviewComponent, id: string, contentComponent: string, tabComponent?: string | undefined);
     createTabRenderer(tabLocation: TabLocation): ITabRenderer;
     init(params: GroupPanelPartInitParameters): void;
+    setTitle(title: string): void;
     layout(width: number, height: number): void;
     update(event: PanelUpdateEvent): void;
     dispose(): void;

package/dist/cjs/dockview/dockviewPanelModel.js

@@ -52,6 +52,14 @@ var DockviewPanelModel = /** @class */ (function () {
         this.content.init(params);
         this.tab.init(__assign(__assign({}, params), { tabLocation: 'header' }));
     };
+    DockviewPanelModel.prototype.setTitle = function (title) {
+        // keep the cached init params in sync so that tab renderers created
+        // lazily after the title changes (e.g. for the header overflow
+        // dropdown) see the current title rather than the stale original.
+        if (this._params) {
+            this._params.title = title;
+        }
+    };
     DockviewPanelModel.prototype.layout = function (width, height) {
         var _a, _b;
         (_b = (_a = this.content).layout) === null || _b === void 0 ? void 0 : _b.call(_a, width, height);

package/dist/cjs/dockview/events.d.ts

@@ -25,7 +25,8 @@ export declare class DockviewWillShowOverlayLocationEvent implements IDockviewEv
     private readonly event;
     readonly options: DockviewWillShowOverlayLocationEventOptions;
     get kind(): DockviewGroupDropLocation;
-    get nativeEvent(): DragEvent;
+    /** Narrow with `instanceof DragEvent` before reading `dataTransfer`. */
+    get nativeEvent(): DragEvent | PointerEvent;
     get position(): Position;
     get defaultPrevented(): boolean;
     get panel(): IDockviewPanel | undefined;

package/dist/cjs/dockview/events.js

@@ -14,6 +14,7 @@ var DockviewWillShowOverlayLocationEvent = /** @class */ (function () {
         configurable: true
     });
     Object.defineProperty(DockviewWillShowOverlayLocationEvent.prototype, "nativeEvent", {
+        /** Narrow with `instanceof DragEvent` before reading `dataTransfer`. */
         get: function () {
             return this.event.nativeEvent;
         },

package/dist/cjs/dockview/framework.d.ts

@@ -55,3 +55,11 @@ export interface ITabGroupChipRenderer {
     }): void;
     dispose(): void;
 }
+export interface IGroupDragGhostRenderer {
+    readonly element: HTMLElement;
+    init(params: {
+        group: IDockviewGroupPanel;
+        api: DockviewApi;
+    }): void;
+    dispose?(): void;
+}

package/dist/cjs/dockview/options.d.ts

@@ -11,12 +11,14 @@ import { GroupOptions } from './dockviewGroupPanelModel';
 import { DockviewGroupDropLocation } from './events';
 import { IDockviewPanel } from './dockviewPanel';
 import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
-import { IGroupHeaderProps, ITabGroupChipRenderer } from './framework';
+import { IGroupDragGhostRenderer, IGroupHeaderProps, ITabGroupChipRenderer } from './framework';
 import { FloatingGroupOptions } from './dockviewComponent';
 import { Contraints } from '../gridview/gridviewPanel';
 import { AcceptableEvent, IAcceptableEvent } from '../events';
 import { DockviewTheme } from './theme';
 import { ITabGroup } from './tabGroup';
+import { CspNonceProvider } from '../dom';
+export { CspNonceProvider };
 import { DockviewTabGroupColorEntry } from './tabGroupAccent';
 export interface IHeaderActionsRenderer extends IDisposable {
     readonly element: HTMLElement;
@@ -75,6 +77,7 @@ export interface ViewFactoryData {
 }
 export type DockviewHeaderPosition = 'top' | 'bottom' | 'left' | 'right';
 export type DockviewHeaderDirection = 'horizontal' | 'vertical';
+export type DockviewDndStrategy = 'auto' | 'pointer' | 'html5';
 export interface DockviewOptions {
     /**
      * Disable the auto-resizing which is controlled through a `ResizeObserver`.
@@ -89,6 +92,7 @@ export interface DockviewOptions {
         minimumWidthWithinViewport?: number;
     };
     popoutUrl?: string;
+    nonce?: CspNonceProvider;
     defaultRenderer?: DockviewPanelRenderer;
     defaultHeaderPosition?: DockviewHeaderPosition;
     debug?: boolean;
@@ -98,6 +102,19 @@ export interface DockviewOptions {
      * */
     rootOverlayModel?: DroptargetOverlayModel;
     disableDnd?: boolean;
+    /**
+     * Selects which drag-and-drop implementation is active.
+     *
+     * - `'auto'` (default): HTML5 drag-and-drop drives mouse drags; pointer
+     *   events drive touch and pen drags. Matches the historical behaviour.
+     * - `'pointer'`: pointer events drive every input type. Useful in
+     *   environments where HTML5 drag-and-drop is unreliable (some Linux
+     *   browsers, certain Safari versions, embedded webviews). Cross-window
+     *   HTML5 drag and the HTML5 native drag image are not available in this
+     *   mode.
+     * - `'html5'`: HTML5 drag-and-drop only — disables touch / pen drag.
+     */
+    dndStrategy?: DockviewDndStrategy;
     locked?: boolean;
     className?: string;
     /**
@@ -140,6 +157,15 @@ export interface DockviewOptions {
      * If not provided, the default chip renderer is used.
      */
     createTabGroupChipComponent?: (tabGroup: ITabGroup) => ITabGroupChipRenderer;
+    /**
+     * Factory to create the custom ghost element shown while dragging a
+     * group of panels (the small floating chip that follows the cursor).
+     *
+     * If not provided, a default ghost rendering `"Multiple Panels (N)"`
+     * is used. Supplying a factory replaces the entire default ghost,
+     * enabling i18n / custom visuals.
+     */
+    createGroupDragGhostComponent?: (group: DockviewGroupPanel) => IGroupDragGhostRenderer;
     /**
      * Replace the built-in tab group color palette with a user-defined list.
      *
@@ -165,19 +191,20 @@ export interface DockviewOptions {
 }
 export type TabAnimation = 'smooth' | 'default';
 export interface DockviewDndOverlayEvent extends IAcceptableEvent {
-    nativeEvent: DragEvent;
+    /** Narrow with `instanceof DragEvent` before reading `dataTransfer`. */
+    nativeEvent: DragEvent | PointerEvent;
     target: DockviewGroupDropLocation;
     position: Position;
     group?: DockviewGroupPanel;
     getData: () => PanelTransfer | undefined;
 }
 export declare class DockviewUnhandledDragOverEvent extends AcceptableEvent implements DockviewDndOverlayEvent {
-    readonly nativeEvent: DragEvent;
+    readonly nativeEvent: DragEvent | PointerEvent;
     readonly target: DockviewGroupDropLocation;
     readonly position: Position;
     readonly getData: () => PanelTransfer | undefined;
     readonly group?: DockviewGroupPanel | undefined;
-    constructor(nativeEvent: DragEvent, target: DockviewGroupDropLocation, position: Position, getData: () => PanelTransfer | undefined, group?: DockviewGroupPanel | undefined);
+    constructor(nativeEvent: DragEvent | PointerEvent, target: DockviewGroupDropLocation, position: Position, getData: () => PanelTransfer | undefined, group?: DockviewGroupPanel | undefined);
 }
 export declare const PROPERTY_KEYS_DOCKVIEW: (keyof DockviewOptions)[];
 export interface CreateComponentOptions {
@@ -292,4 +319,3 @@ export interface MovementOptions extends MovementOptions2 {
     includePanel?: boolean;
     group?: DockviewGroupPanel;
 }
-export {};

package/dist/cjs/dockview/options.js

@@ -47,12 +47,14 @@ exports.PROPERTY_KEYS_DOCKVIEW = (function () {
         disableFloatingGroups: undefined,
         floatingGroupBounds: undefined,
         popoutUrl: undefined,
+        nonce: undefined,
         defaultRenderer: undefined,
         defaultHeaderPosition: undefined,
         debug: undefined,
         rootOverlayModel: undefined,
         locked: undefined,
         disableDnd: undefined,
+        dndStrategy: undefined,
         className: undefined,
         noPanelsOverlay: undefined,
         dndEdges: undefined,
@@ -62,6 +64,7 @@ exports.PROPERTY_KEYS_DOCKVIEW = (function () {
         getTabContextMenuItems: undefined,
         getTabGroupChipContextMenuItems: undefined,
         createTabGroupChipComponent: undefined,
+        createGroupDragGhostComponent: undefined,
         tabGroupColors: undefined,
         tabGroupAccent: undefined,
     };

package/dist/cjs/dom.d.ts

@@ -24,7 +24,11 @@ export interface IFocusTracker extends IDisposable {
 export declare function trackFocus(element: HTMLElement): IFocusTracker;
 export declare function quasiPreventDefault(event: Event): void;
 export declare function quasiDefaultPrevented(event: Event): boolean;
-export declare function addStyles(document: Document, styleSheetList: StyleSheetList): void;
+export type CspNonceProvider = string | ((targetDocument: Document) => string | undefined);
+export interface AddStylesOptions {
+    nonce?: CspNonceProvider;
+}
+export declare function addStyles(document: Document, styleSheetList: StyleSheetList, options?: AddStylesOptions): void;
 export declare function getDomNodePagePosition(domNode: Element): {
     left: number;
     top: number;

package/dist/cjs/dom.js

@@ -218,9 +218,12 @@ function quasiPreventDefault(event) {
 function quasiDefaultPrevented(event) {
     return event[QUASI_PREVENT_DEFAULT_KEY];
 }
-function addStyles(document, styleSheetList) {
+function addStyles(document, styleSheetList, options) {
     var e_3, _a, e_4, _b;
+    if (options === void 0) { options = {}; }
     var styleSheets = Array.from(styleSheetList);
+    var nonce = options.nonce;
+    var resolvedNonce = typeof nonce === 'function' ? nonce(document) : nonce;
     try {
         for (var styleSheets_1 = __values(styleSheets), styleSheets_1_1 = styleSheets_1.next(); !styleSheets_1_1.done; styleSheets_1_1 = styleSheets_1.next()) {
             var styleSheet = styleSheets_1_1.value;
@@ -230,6 +233,10 @@ function addStyles(document, styleSheetList) {
                 link.type = styleSheet.type;
                 link.rel = 'stylesheet';
                 document.head.appendChild(link);
+                // The <link> will load and apply its rules in the target
+                // document. Reading cssRules here would duplicate them
+                // (and throws for cross-origin sheets).
+                continue;
             }
             var cssTexts = [];
             try {
@@ -240,12 +247,16 @@ function addStyles(document, styleSheetList) {
             catch (err) {
                 console.warn('dockview: failed to access stylesheet rules due to security restrictions', err);
             }
+            var fragment = document.createDocumentFragment();
             try {
                 for (var cssTexts_1 = (e_4 = void 0, __values(cssTexts)), cssTexts_1_1 = cssTexts_1.next(); !cssTexts_1_1.done; cssTexts_1_1 = cssTexts_1.next()) {
                     var rule = cssTexts_1_1.value;
                     var style = document.createElement('style');
+                    if (resolvedNonce) {
+                        style.setAttribute('nonce', resolvedNonce);
+                    }
                     style.appendChild(document.createTextNode(rule));
-                    document.head.appendChild(style);
+                    fragment.appendChild(style);
                 }
             }
             catch (e_4_1) { e_4 = { error: e_4_1 }; }
@@ -255,6 +266,7 @@ function addStyles(document, styleSheetList) {
                 }
                 finally { if (e_4) throw e_4.error; }
             }
+            document.head.appendChild(fragment);
         }
     }
     catch (e_3_1) { e_3 = { error: e_3_1 }; }
@@ -301,7 +313,7 @@ function addTestId(element, id) {
  * Should be more efficient than element.querySelectorAll("*") since there
  * is no need to store every element in-memory using this approach
  */
-function allTagsNamesInclusiveOfShadowDoms(tagNames) {
+function allTagsNamesInclusiveOfShadowDoms(tagNames, rootNode) {
     var iframes = [];
     function findIframesInNode(node) {
         var e_5, _a;
@@ -327,13 +339,17 @@ function allTagsNamesInclusiveOfShadowDoms(tagNames) {
             }
         }
     }
-    findIframesInNode(document.documentElement);
+    // Document → walk from its root element. Element → walk from itself.
+    var startEl = rootNode instanceof Document
+        ? rootNode.documentElement
+        : rootNode;
+    findIframesInNode(startEl);
     return iframes;
 }
 function disableIframePointEvents(rootNode) {
     var e_6, _a;
     if (rootNode === void 0) { rootNode = document; }
-    var iframes = allTagsNamesInclusiveOfShadowDoms(['IFRAME', 'WEBVIEW']);
+    var iframes = allTagsNamesInclusiveOfShadowDoms(['IFRAME', 'WEBVIEW'], rootNode);
     var original = new WeakMap(); // don't hold onto HTMLElement references longer than required
     try {
         for (var iframes_1 = __values(iframes), iframes_1_1 = iframes_1.next(); !iframes_1_1.done; iframes_1_1 = iframes_1.next()) {

package/dist/cjs/index.d.ts

@@ -21,7 +21,7 @@ export { DockviewWillShowOverlayLocationEvent, DockviewTabGroupChangeEvent, Dock
 export { TabDragEvent, GroupDragEvent, } from './dockview/components/titlebar/tabsContainer';
 export * from './dockview/types';
 export * from './dockview/dockviewGroupPanel';
-export { IGroupPanelBaseProps, IDockviewPanelHeaderProps, IDockviewPanelProps, IDockviewHeaderActionsProps, IGroupHeaderProps, IWatermarkPanelProps, DockviewReadyEvent, ITabGroupChipRenderer, } from './dockview/framework';
+export { IGroupPanelBaseProps, IDockviewPanelHeaderProps, IDockviewPanelProps, IDockviewHeaderActionsProps, IGroupHeaderProps, IWatermarkPanelProps, DockviewReadyEvent, ITabGroupChipRenderer, IGroupDragGhostRenderer, } from './dockview/framework';
 export * from './dockview/options';
 export * from './dockview/theme';
 export * from './dockview/dockviewPanel';

package/dist/cjs/overlay/overlay.d.ts

@@ -8,6 +8,11 @@ export declare class Overlay extends CompositeDisposable {
     readonly onDidChange: Event<void>;
     private readonly _onDidChangeEnd;
     readonly onDidChangeEnd: Event<void>;
+    private readonly _onDidStartMoving;
+    /** Fires once per drag, the first time the float actually moves. */
+    readonly onDidStartMoving: Event<void>;
+    private readonly _dragMove;
+    private _dragCancelled;
     private static readonly MINIMUM_HEIGHT;
     private static readonly MINIMUM_WIDTH;
     private verticalAlignment;
@@ -27,6 +32,13 @@ export declare class Overlay extends CompositeDisposable {
     bringToFront(): void;
     setBounds(bounds?: Partial<AnchoredBox>): void;
     toJSON(): AnchoredBox;
+    /**
+     * Abort an in-flight move-the-float drag. Used by the void container
+     * when a redock long-press fires after the move started, so the ghost
+     * gesture wins without the float continuing to follow the finger.
+     * Does not emit `onDidChangeEnd` because no change is being committed.
+     */
+    cancelPendingDrag(): void;
     setupDrag(dragTarget: HTMLElement, options?: {
         inDragMode: boolean;
     }): void;

package/dist/cjs/overlay/overlay.js

@@ -90,7 +90,12 @@ var Overlay = /** @class */ (function (_super) {
         _this.onDidChange = _this._onDidChange.event;
         _this._onDidChangeEnd = new events_1.Emitter();
         _this.onDidChangeEnd = _this._onDidChangeEnd.event;
-        _this.addDisposables(_this._onDidChange, _this._onDidChangeEnd);
+        _this._onDidStartMoving = new events_1.Emitter();
+        /** Fires once per drag, the first time the float actually moves. */
+        _this.onDidStartMoving = _this._onDidStartMoving.event;
+        _this._dragMove = new lifecycle_1.MutableDisposable();
+        _this._dragCancelled = false;
+        _this.addDisposables(_this._onDidChange, _this._onDidChangeEnd, _this._onDidStartMoving, _this._dragMove);
         _this._element.className = 'dv-resize-container';
         _this._isVisible = true;
         _this.setupResize('top');
@@ -229,18 +234,62 @@ var Overlay = /** @class */ (function (_super) {
         result.height = element.height;
         return result;
     };
+    /**
+     * Abort an in-flight move-the-float drag. Used by the void container
+     * when a redock long-press fires after the move started, so the ghost
+     * gesture wins without the float continuing to follow the finger.
+     * Does not emit `onDidChangeEnd` because no change is being committed.
+     */
+    Overlay.prototype.cancelPendingDrag = function () {
+        if (!this._dragMove.value) {
+            return;
+        }
+        this._dragCancelled = true;
+        (0, dom_1.toggleClass)(this._element, 'dv-resize-container-dragging', false);
+        this._dragMove.value = lifecycle_1.Disposable.NONE;
+    };
     Overlay.prototype.setupDrag = function (dragTarget, options) {
         var _this = this;
         if (options === void 0) { options = { inDragMode: false }; }
-        var move = new lifecycle_1.MutableDisposable();
-        var track = function () {
+        var track = function (captureTarget, pointerId) {
             var offset = null;
+            var hasMoved = false;
+            _this._dragCancelled = false;
             var iframes = (0, dom_1.disableIframePointEvents)();
-            move.value = new lifecycle_1.CompositeDisposable({
+            if (captureTarget &&
+                typeof pointerId === 'number' &&
+                typeof captureTarget.setPointerCapture === 'function') {
+                try {
+                    captureTarget.setPointerCapture(pointerId);
+                }
+                catch (_a) {
+                    // ignore – non-fatal if the browser refuses capture
+                }
+            }
+            var end = function () {
+                (0, dom_1.toggleClass)(_this._element, 'dv-resize-container-dragging', false);
+                _this._dragMove.value = lifecycle_1.Disposable.NONE;
+                _this._onDidChangeEnd.fire();
+            };
+            _this._dragMove.value = new lifecycle_1.CompositeDisposable({
                 dispose: function () {
                     iframes.release();
+                    if (captureTarget &&
+                        typeof pointerId === 'number' &&
+                        typeof captureTarget.releasePointerCapture ===
+                            'function') {
+                        try {
+                            captureTarget.releasePointerCapture(pointerId);
+                        }
+                        catch (_a) {
+                            // ignore – pointer may already be released
+                        }
+                    }
                 },
             }, (0, events_1.addDisposableListener)(window, 'pointermove', function (e) {
+                if (_this._dragCancelled) {
+                    return;
+                }
                 var containerRect = _this.options.container.getBoundingClientRect();
                 var x = e.clientX - containerRect.left;
                 var y = e.clientY - containerRect.top;
@@ -277,13 +326,13 @@ var Overlay = /** @class */ (function (_super) {
                     bounds.right = right;
                 }
                 _this.setBounds(bounds);
-            }), (0, events_1.addDisposableListener)(window, 'pointerup', function () {
-                (0, dom_1.toggleClass)(_this._element, 'dv-resize-container-dragging', false);
-                move.dispose();
-                _this._onDidChangeEnd.fire();
-            }));
+                if (!hasMoved) {
+                    hasMoved = true;
+                    _this._onDidStartMoving.fire();
+                }
+            }), (0, events_1.addDisposableListener)(window, 'pointerup', end), (0, events_1.addDisposableListener)(window, 'pointercancel', end));
         };
-        this.addDisposables(move, (0, events_1.addDisposableListener)(dragTarget, 'pointerdown', function (event) {
+        this.addDisposables((0, events_1.addDisposableListener)(dragTarget, 'pointerdown', function (event) {
             if (event.defaultPrevented) {
                 event.preventDefault();
                 return;
@@ -293,7 +342,7 @@ var Overlay = /** @class */ (function (_super) {
             if ((0, dom_1.quasiDefaultPrevented)(event)) {
                 return;
             }
-            track();
+            track(dragTarget, event.pointerId);
         }), (0, events_1.addDisposableListener)(this.options.content, 'pointerdown', function (event) {
             if (event.defaultPrevented) {
                 return;
@@ -304,7 +353,7 @@ var Overlay = /** @class */ (function (_super) {
                 return;
             }
             if (event.shiftKey) {
-                track();
+                track(_this.options.content, event.pointerId);
             }
         }), (0, events_1.addDisposableListener)(this.options.content, 'pointerdown', function () {
             arialLevelTracker.push(_this._element);
@@ -323,6 +372,19 @@ var Overlay = /** @class */ (function (_super) {
             e.preventDefault();
             var startPosition = null;
             var iframes = (0, dom_1.disableIframePointEvents)();
+            var pointerId = e.pointerId;
+            if (typeof resizeHandleElement.setPointerCapture === 'function') {
+                try {
+                    resizeHandleElement.setPointerCapture(pointerId);
+                }
+                catch (_a) {
+                    // ignore – non-fatal if the browser refuses capture
+                }
+            }
+            var end = function () {
+                move.dispose();
+                _this._onDidChangeEnd.fire();
+            };
             move.value = new lifecycle_1.CompositeDisposable((0, events_1.addDisposableListener)(window, 'pointermove', function (e) {
                 var containerRect = _this.options.container.getBoundingClientRect();
                 var overlayRect = _this._element.getBoundingClientRect();
@@ -457,11 +519,17 @@ var Overlay = /** @class */ (function (_super) {
             }), {
                 dispose: function () {
                     iframes.release();
+                    if (typeof resizeHandleElement.releasePointerCapture ===
+                        'function') {
+                        try {
+                            resizeHandleElement.releasePointerCapture(pointerId);
+                        }
+                        catch (_a) {
+                            // ignore – pointer may already be released
+                        }
+                    }
                 },
-            }, (0, events_1.addDisposableListener)(window, 'pointerup', function () {
-                move.dispose();
-                _this._onDidChangeEnd.fire();
-            }));
+            }, (0, events_1.addDisposableListener)(window, 'pointerup', end), (0, events_1.addDisposableListener)(window, 'pointercancel', end));
         }));
     };
     Overlay.prototype.getMinimumWidth = function (width) {

package/dist/cjs/paneview/draggablePaneviewPanel.d.ts

@@ -12,8 +12,10 @@ export interface PaneviewDidDropEvent extends DroptargetEvent {
     api: PaneviewApi;
 }
 export declare abstract class DraggablePaneviewPanel extends PaneviewPanel {
-    private handler;
+    private html5DragSource;
+    private pointerDragSource;
     private target;
+    private pointerTarget;
     private readonly _onDidDrop;
     readonly onDidDrop: Event<PaneviewDidDropEvent>;
     private readonly _onUnhandledDragOverEvent;