dockview-core 6.2.2 → 6.4.0

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,
@@ -162,6 +163,7 @@ export class DockviewComponent extends BaseGrid {
         this._floatingGroups = [];
         this._popoutGroups = [];
         this._popoutRestorationPromise = Promise.resolve();
+        this._popoutRestorationCleanups = new Set();
         this._onDidRemoveGroup = new Emitter();
         this.onDidRemoveGroup = this._onDidRemoveGroup.event;
         this._onDidAddGroup = new Emitter();
@@ -196,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);
@@ -267,6 +283,14 @@ export class DockviewComponent extends BaseGrid {
             this._bufferOnDidLayoutChange.fire();
         }), Disposable.from(() => {
             var _a;
+            // Cancel any pending popout-restoration timers scheduled by
+            // fromJSON so they don't open new browser windows after
+            // dispose, and resolve their promises so callers awaiting
+            // popoutRestorationPromise don't hang. See issue #851.
+            for (const cleanup of [...this._popoutRestorationCleanups]) {
+                cleanup();
+            }
+            this._popoutRestorationCleanups.clear();
             // iterate over a copy of the array since .dispose() mutates the original array
             for (const group of [...this._floatingGroups]) {
                 group.dispose();
@@ -280,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;
@@ -292,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,
@@ -330,7 +354,7 @@ export class DockviewComponent extends BaseGrid {
                     getData: getPanelData,
                 }));
             }
-        }), this._rootDropTarget);
+        }));
     }
     setVisible(panel, visible) {
         switch (panel.api.location.type) {
@@ -366,7 +390,7 @@ export class DockviewComponent extends BaseGrid {
         return (_a = this._popoutPopupServices.get(group.id)) !== null && _a !== void 0 ? _a : this.popupService;
     }
     addPopoutGroup(itemToPopout, options) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         if (itemToPopout instanceof DockviewGroupPanel &&
             itemToPopout.model.location.type === 'edge') {
             // edge groups are permanent structural elements and cannot be popped out
@@ -401,6 +425,7 @@ export class DockviewComponent extends BaseGrid {
             height: box.height,
             onDidOpen: options === null || options === void 0 ? void 0 : options.onDidOpen,
             onWillClose: options === null || options === void 0 ? void 0 : options.onWillClose,
+            nonce: (_f = this.options) === null || _f === void 0 ? void 0 : _f.nonce,
         });
         const popoutWindowDisposable = new CompositeDisposable(_window, _window.onDidClose(() => {
             popoutWindowDisposable.dispose();
@@ -820,7 +845,7 @@ export class DockviewComponent extends BaseGrid {
         }
     }
     updateOptions(options) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         super.updateOptions(options);
         if ('floatingGroupBounds' in options) {
             for (const group of this._floatingGroups) {
@@ -846,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) {
@@ -861,8 +889,19 @@ export class DockviewComponent extends BaseGrid {
                 group.model.updateHeaderActions();
             }
         }
+        if ('createWatermarkComponent' in options) {
+            if (this._watermark) {
+                this._watermark.element.parentElement.remove();
+                (_d = (_c = this._watermark).dispose) === null || _d === void 0 ? void 0 : _d.call(_c);
+                this._watermark = null;
+            }
+            this.updateWatermark();
+            for (const group of this.groups) {
+                group.model.refreshWatermark();
+            }
+        }
         if ('tabGroupColors' in options || 'tabGroupAccent' in options) {
-            this._tabGroupColorPalette.setEntries((_c = this._options.tabGroupColors) !== null && _c !== void 0 ? _c : DEFAULT_TAB_GROUP_COLORS);
+            this._tabGroupColorPalette.setEntries((_e = this._options.tabGroupColors) !== null && _e !== void 0 ? _e : DEFAULT_TAB_GROUP_COLORS);
             this._tabGroupColorPalette.enabled =
                 this._options.tabGroupAccent !== 'off';
             for (const group of this.groups) {
@@ -1288,7 +1327,23 @@ export class DockviewComponent extends BaseGrid {
                 const group = createGroupFromSerializedState(data);
                 // Add a small delay for each popup after the first to avoid browser popup blocking
                 const popoutPromise = new Promise((resolve) => {
-                    setTimeout(() => {
+                    const cleanup = () => {
+                        this._popoutRestorationCleanups.delete(cleanup);
+                        clearTimeout(handle);
+                        resolve();
+                    };
+                    const handle = setTimeout(() => {
+                        this._popoutRestorationCleanups.delete(cleanup);
+                        // Guard against the component being disposed before
+                        // this timer fires. Under React StrictMode the
+                        // component is mounted -> disposed -> remounted, and
+                        // without this guard the first instance's queued
+                        // restoration would open a second popout window.
+                        // See issue #851.
+                        if (this.isDisposed) {
+                            resolve();
+                            return;
+                        }
                         this.addPopoutGroup(group, {
                             position: position !== null && position !== void 0 ? position : undefined,
                             overridePopoutGroup: gridReferenceGroup
@@ -1301,6 +1356,7 @@ export class DockviewComponent extends BaseGrid {
                         });
                         resolve();
                     }, index * DESERIALIZATION_POPOUT_DELAY_MS); // 100ms delay between each popup
+                    this._popoutRestorationCleanups.add(cleanup);
                 });
                 popoutPromises.push(popoutPromise);
             });
@@ -1831,8 +1887,11 @@ export class DockviewComponent extends BaseGrid {
                      * the source group is a popout group with a single panel
                      *
                      * 1. remove the panel from the group without triggering any events
-                     * 2. remove the popout group
-                     * 3. create a new group at the requested location and add that panel
+                     * 2. remove the popout group — this may cascade-remove the empty
+                     *    reference group it left behind in the main grid (see
+                     *    doRemoveGroup for popout groups), which can shift grid indices
+                     * 3. recompute the target location now that the grid is stable
+                     * 4. create a new group at the recomputed location and add that panel
                      */
                     const popoutGroup = this._popoutGroups.find((group) => group.popoutGroup === sourceGroup);
                     const removedPanel = this.movingLock(() => popoutGroup.popoutGroup.model.removePanel(popoutGroup.popoutGroup.panels[0], {
@@ -1840,7 +1899,8 @@ export class DockviewComponent extends BaseGrid {
                         skipSetActiveGroup: true,
                     }));
                     this.doRemoveGroup(sourceGroup, { skipActive: true });
-                    const newGroup = this.createGroupAtLocation(targetLocation);
+                    const updatedTargetLocation = getRelativeLocation(this.gridview.orientation, getGridLocation(destinationGroup.element), destinationTarget);
+                    const newGroup = this.createGroupAtLocation(updatedTargetLocation);
                     this.movingLock(() => newGroup.model.openPanel(removedPanel, {
                         skipSetActive: true,
                     }));
@@ -2380,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';
@@ -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/esm/dockview/dockviewGroupPanelModel.js

@@ -9,6 +9,10 @@ import { TabsContainer, } from './components/titlebar/tabsContainer';
 import { DockviewUnhandledDragOverEvent, } from './options';
 import { TabGroup, } from './tabGroup';
 export class DockviewDidDropEvent extends DockviewEvent {
+    /**
+     * `PointerEvent` for touch drags has no `dataTransfer`; use
+     * `getData()` for the dockview payload regardless of input method.
+     */
     get nativeEvent() {
         return this.options.nativeEvent;
     }
@@ -113,29 +117,28 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         toggleClass(this.container, 'dv-groupview-floating', false);
         toggleClass(this.container, 'dv-groupview-popout', false);
         toggleClass(this.container, 'dv-groupview-edge', false);
+        // Mouse and touch drop targets must agree on accepted zones.
+        const applyZones = (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']);
                 toggleClass(this.container, 'dv-groupview-floating', true);
                 break;
             case 'popout':
-                this.contentContainer.dropTarget.setTargetZones(['center']);
+                applyZones(['center']);
                 toggleClass(this.container, 'dv-groupview-popout', true);
                 break;
             case 'edge':
-                this.contentContainer.dropTarget.setTargetZones(['center']);
+                applyZones(['center']);
                 toggleClass(this.container, 'dv-groupview-edge', true);
                 break;
         }
@@ -261,6 +264,8 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
             // noop
         }), this.contentContainer.dropTarget.onDrop((event) => {
             this.handleDropEvent('content', event.nativeEvent, event.position);
+        }), this.contentContainer.pointerDropTarget.onDrop((event) => {
+            this.handleDropEvent('content', event.nativeEvent, event.position);
         }), this.tabsContainer.onWillShowOverlay((event) => {
             this._onWillShowOverlay.fire(event);
         }), this.contentContainer.dropTarget.onWillShowOverlay((event) => {
@@ -271,6 +276,14 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
                 group: this.groupPanel,
                 getData: getPanelData,
             }));
+        }), this.contentContainer.pointerDropTarget.onWillShowOverlay((event) => {
+            this._onWillShowOverlay.fire(new DockviewWillShowOverlayLocationEvent(event, {
+                kind: 'content',
+                panel: this.activePanel,
+                api: this._api,
+                group: this.groupPanel,
+                getData: 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(() => {
             this._scheduleTabGroupUpdate();
         }), this._onDidDestroyTabGroup.event(() => {
@@ -527,6 +540,15 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
     refreshTabGroupAccent() {
         this.tabsContainer.refreshTabGroupAccent();
     }
+    refreshWatermark() {
+        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();
+    }
     getTabGroupForPanel(panelId) {
         return this._findTabGroupForPanel(panelId);
     }

package/dist/esm/dockview/dockviewPanel.js

@@ -85,6 +85,11 @@ export class DockviewPanel extends CompositeDisposable {
         const 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 });
         }
     }

package/dist/esm/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/esm/dockview/dockviewPanelModel.js

@@ -30,6 +30,14 @@ export class DockviewPanelModel {
         this.content.init(params);
         this.tab.init(Object.assign(Object.assign({}, params), { tabLocation: 'header' }));
     }
+    setTitle(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;
+        }
+    }
     layout(width, height) {
         var _a, _b;
         (_b = (_a = this.content).layout) === null || _b === void 0 ? void 0 : _b.call(_a, width, height);

package/dist/esm/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/esm/dockview/events.js

@@ -2,6 +2,7 @@ export class DockviewWillShowOverlayLocationEvent {
     get kind() {
         return this.options.kind;
     }
+    /** Narrow with `instanceof DragEvent` before reading `dataTransfer`. */
     get nativeEvent() {
         return this.event.nativeEvent;
     }

package/dist/esm/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/esm/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/esm/dockview/options.js

@@ -21,12 +21,14 @@ export const PROPERTY_KEYS_DOCKVIEW = (() => {
         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,
@@ -36,6 +38,7 @@ export const PROPERTY_KEYS_DOCKVIEW = (() => {
         getTabContextMenuItems: undefined,
         getTabGroupChipContextMenuItems: undefined,
         createTabGroupChipComponent: undefined,
+        createGroupDragGhostComponent: undefined,
         tabGroupColors: undefined,
         tabGroupAccent: undefined,
     };

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