dockview-core 6.6.1 → 7.0.3

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

@@ -4,8 +4,11 @@ import { IGridView } from '../gridview/gridview';
 import { IContentRenderer, ITabRenderer, IWatermarkRenderer } from './types';
 import { Parameters } from '../panel/types';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
+import { DockviewMessages } from './accessibilityMessages';
+export type { DockviewMessages } from './accessibilityMessages';
 import { PanelTransfer } from '../dnd/dataTransfer';
 import { IDisposable } from '../lifecycle';
+import { Box } from '../types';
 import { DroptargetOverlayModel, Position } from '../dnd/droptarget';
 import { GroupOptions } from './dockviewGroupPanelModel';
 import { DockviewGroupDropLocation } from './events';
@@ -13,7 +16,7 @@ import { IDockviewPanel } from './dockviewPanel';
 import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
 import { IGroupDragGhostRenderer, IGroupHeaderProps, ITabGroupChipRenderer } from './framework';
 import { FloatingGroupOptions } from './dockviewComponent';
-import { Contraints } from '../gridview/gridviewPanel';
+import { Constraints } from '../gridview/gridviewPanel';
 import { AcceptableEvent, IAcceptableEvent } from '../events';
 import { DockviewTheme } from './theme';
 import { ITabGroup } from './tabGroup';
@@ -43,6 +46,54 @@ export interface ContextMenuItemConfig {
     disabled?: boolean;
 }
 export type ContextMenuItem = BuiltInContextMenuItem | ContextMenuItemConfig;
+export interface DropOverlayModelParams {
+    /** Which of a group's drop targets the overlay is for. `'edge'` is shaped by `dndEdges`, not this option. */
+    location: DockviewGroupDropLocation;
+    /** The group the target belongs to, where known (tab / header_space / content). */
+    group?: DockviewGroupPanel;
+}
+/** A layout change to be announced — see the `getAnnouncement` option. */
+export interface LiveRegionEvent {
+    /**
+     * What changed: a panel was added (`'open'`) or removed (`'close'`); a
+     * group was maximized (`'maximize'`) / restored (`'restore'`); or a group
+     * moved to a floating window (`'float'`), back into the grid (`'dock'`), or
+     * out to a popout window (`'popout'`). `panel` is the affected panel — for
+     * group events, the group's active panel.
+     */
+    kind: 'open' | 'close' | 'maximize' | 'restore' | 'float' | 'dock' | 'popout';
+    panel: IDockviewPanel;
+}
+/** A resolved announcement handed to a custom `announcer`. */
+export interface AnnouncementEvent {
+    /** The (already localised) text to announce. */
+    message: string;
+    /** `'assertive'` interrupts the screen reader; `'polite'` waits for a pause. */
+    politeness: 'polite' | 'assertive';
+}
+/**
+ * Key bindings for {@link DockviewComponentOptions.keyboardNavigation}. Each
+ * value is a string of `+`-separated parts, modifiers first, e.g. `'ctrl+]'`,
+ * `'shift+f6'`. Recognised modifiers: `ctrl`, `shift`, `alt`, `meta` (alias
+ * `cmd`). The final part is the `KeyboardEvent.key` to match, case-insensitively
+ * (`']'`, `'f6'`, `'arrowleft'`).
+ */
+export interface DockviewKeybindings {
+    /** Switch to the next tab in the focused group. Default `ctrl+]`. */
+    nextTab: string;
+    /** Switch to the previous tab in the focused group. Default `ctrl+[`. */
+    prevTab: string;
+    /** Move focus to the next group. Default `f6`. */
+    focusNextGroup: string;
+    /** Move focus to the previous group. Default `shift+f6`. */
+    focusPrevGroup: string;
+    /** Move focus from panel content to the focused group's tab strip. Default `ctrl+shift+\`. */
+    focusTabs: string;
+}
+export interface KeyboardNavigationOptions {
+    /** Override individual {@link DockviewKeybindings}; unset keys keep their defaults. */
+    keymap?: Partial<DockviewKeybindings>;
+}
 export interface GetTabContextMenuItemsParams {
     panel: IDockviewPanel;
     group: DockviewGroupPanel;
@@ -78,6 +129,26 @@ export interface ViewFactoryData {
 export type DockviewHeaderPosition = 'top' | 'bottom' | 'left' | 'right';
 export type DockviewHeaderDirection = 'horizontal' | 'vertical';
 export type DockviewDndStrategy = 'auto' | 'pointer' | 'html5';
+/**
+ * Context handed to {@link DockviewOptions.transformFloatingGroupDrag} on each
+ * pointer-move frame while a floating group is being dragged.
+ */
+export interface FloatingGroupDragContext {
+    /** The floating group being dragged. */
+    readonly group: DockviewGroupPanel;
+    /** Proposed top-left + size this frame, in container pixels (pre-clamp). */
+    readonly proposed: Box;
+    /** Size of the container the floating group is dragged within. */
+    readonly container: {
+        width: number;
+        height: number;
+    };
+    /**
+     * Bounds of the other floating groups (relative to the same container),
+     * snapshotted at drag start.
+     */
+    readonly others: readonly Box[];
+}
 export interface DockviewOptions {
     /**
      * Disable the auto-resizing which is controlled through a `ResizeObserver`.
@@ -91,16 +162,39 @@ export interface DockviewOptions {
         minimumHeightWithinViewport?: number;
         minimumWidthWithinViewport?: number;
     };
+    /**
+     * Adjust a floating group's position while it is being dragged. Runs on
+     * each pointer-move frame with the proposed top-left (before the container
+     * clamp) and returns an adjusted top-left, or nothing to leave it
+     * unchanged. Use it for snapping, alignment, or custom bounds. Move only —
+     * resizing a floating group is unaffected.
+     *
+     * `context.others` holds the bounds of the other floating groups (relative
+     * to the same container), snapshotted at drag start, so the callback can
+     * align the dragged group against its siblings.
+     */
+    transformFloatingGroupDrag?: (context: FloatingGroupDragContext) => {
+        top: number;
+        left: number;
+    } | void;
+    /**
+     * Selects which element moves a floating group when dragged.
+     *
+     * - `'titlebar'` (default): a dedicated, blank drag-handle bar is rendered
+     *   above the group's tab bar. Dragging it moves the floating window;
+     *   shift+drag (mouse) / long-press (touch) redocks into the grid. Style
+     *   it with the `--dv-floating-titlebar-*` theme variables.
+     * - `'tabbar'`: the legacy behaviour — the empty space in the tab bar
+     *   (the "void container") doubles as the move handle. No dedicated bar
+     *   is rendered.
+     */
+    floatingGroupDragHandle?: 'titlebar' | 'tabbar';
     popoutUrl?: string;
     nonce?: CspNonceProvider;
     defaultRenderer?: DockviewPanelRenderer;
     defaultHeaderPosition?: DockviewHeaderPosition;
     debug?: boolean;
     dndEdges?: false | DroptargetOverlayModel;
-    /**
-     * @deprecated use `dndEdges` instead. To be removed in a future version.
-     * */
-    rootOverlayModel?: DroptargetOverlayModel;
     disableDnd?: boolean;
     /**
      * Selects which drag-and-drop implementation is active.
@@ -166,6 +260,65 @@ export interface DockviewOptions {
      * enabling i18n / custom visuals.
      */
     createGroupDragGhostComponent?: (group: DockviewGroupPanel) => IGroupDragGhostRenderer;
+    /**
+     * Shape the drop overlay shown over a group's drop targets — the tab
+     * strip (`'tab'`), the header void space (`'header_space'`) and the
+     * panel content area (`'content'`). Return a {@link DroptargetOverlayModel}
+     * to override that target's default overlay (size, activation threshold,
+     * small-element boundaries), or `undefined` to keep the default.
+     *
+     * `group` is provided where known (tab / header_space). The outer-layout
+     * edge overlay is shaped by `dndEdges`, not this option, so `'edge'` is
+     * not dispatched here.
+     */
+    dropOverlayModel?: (params: DropOverlayModelParams) => DroptargetOverlayModel | undefined;
+    /**
+     * Built-in screen-reader announcements of layout changes (a visually-hidden
+     * `aria-live` region narrating panel open/close etc.). On by default —
+     * set to `false` to disable, e.g. when the host app provides its own
+     * announcement system. Honoured live via `updateOptions`.
+     */
+    announcements?: boolean;
+    /**
+     * Localise or override the built-in announcement strings (the default
+     * messages are English). Return a string to use it, `null` / `''` to
+     * suppress that announcement, or `undefined` to keep the default. This is
+     * how non-English apps translate announcements — core ships no message
+     * catalog, only the default strings + this hook.
+     */
+    getAnnouncement?: (event: LiveRegionEvent) => string | null | undefined;
+    /**
+     * Route announcements to your own screen-reader infrastructure instead of
+     * the built-in `aria-live` regions (e.g. an app-wide live region). When
+     * set, dockview hands you each {@link AnnouncementEvent} and writes nothing
+     * to its own regions. `getAnnouncement` (localisation) still applies first.
+     */
+    announcer?: (event: AnnouncementEvent) => void;
+    /**
+     * Translate / override the strings dockview speaks to assistive technology
+     * — both the LiveRegion announcements and the keyboard-docking narration.
+     * Provide any subset of {@link DockviewMessages}; unset entries keep the
+     * English defaults. (`getAnnouncement` still applies first, per-event, for
+     * announcements.)
+     */
+    messages?: Partial<DockviewMessages>;
+    /**
+     * Operate the dock with the keyboard. `true` enables the default bindings;
+     * pass an object to override individual ones via `keymap`. Off by default
+     * (opt-in while the feature matures). Enables:
+     *
+     * - **Switch tab** within the focused group — `Ctrl`+`]` / `Ctrl`+`[`.
+     * - **Move focus between groups** — `F6` / `Shift`+`F6` (sequential) or
+     *   `Ctrl`+`Shift`+arrow keys (spatial: focus the group in that direction).
+     * - **Dock the active panel** without a mouse — `Ctrl`+`M` arms a two-phase
+     *   move (arrows cycle the target group with a live drop preview +
+     *   screen-reader narration, `Enter` docks, `Escape` cancels).
+     *
+     * Defaults avoid `Cmd`-based and browser-reserved combinations (e.g.
+     * `Cmd`+`M` is the macOS minimise-window shortcut); use {@link keymap} to
+     * rebind for your platform.
+     */
+    keyboardNavigation?: boolean | KeyboardNavigationOptions;
     /**
      * Replace the built-in tab group color palette with a user-defined list.
      *
@@ -300,7 +453,7 @@ export type AddPanelOptions<P extends object = Parameters> = {
     inactive?: boolean;
     initialWidth?: number;
     initialHeight?: number;
-} & Partial<AddPanelOptionsUnion> & Partial<Contraints>;
+} & Partial<AddPanelOptionsUnion> & Partial<Constraints>;
 type AddGroupOptionsWithPanel = {
     referencePanel: string | IDockviewPanel;
     direction?: Omit<Direction, 'within'>;

package/dist/esm/dockview/options.js

@@ -20,12 +20,13 @@ export const PROPERTY_KEYS_DOCKVIEW = (() => {
         singleTabMode: undefined,
         disableFloatingGroups: undefined,
         floatingGroupBounds: undefined,
+        transformFloatingGroupDrag: undefined,
+        floatingGroupDragHandle: undefined,
         popoutUrl: undefined,
         nonce: undefined,
         defaultRenderer: undefined,
         defaultHeaderPosition: undefined,
         debug: undefined,
-        rootOverlayModel: undefined,
         locked: undefined,
         disableDnd: undefined,
         dndStrategy: undefined,
@@ -39,6 +40,12 @@ export const PROPERTY_KEYS_DOCKVIEW = (() => {
         getTabGroupChipContextMenuItems: undefined,
         createTabGroupChipComponent: undefined,
         createGroupDragGhostComponent: undefined,
+        dropOverlayModel: undefined,
+        announcements: undefined,
+        getAnnouncement: undefined,
+        announcer: undefined,
+        messages: undefined,
+        keyboardNavigation: undefined,
         tabGroupColors: undefined,
         tabGroupAccent: undefined,
     };

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

@@ -0,0 +1,95 @@
+import { IDisposable } from '../lifecycle';
+import { Event } from '../events';
+import { PopupService } from './components/popupService';
+import { PopoutWindow } from '../popoutWindow';
+import { DockviewGroupPanel } from './dockviewGroupPanel';
+import { SerializedPopoutGroup } from './dockviewComponent';
+import { Gridview } from '../gridview/gridview';
+import { OverlayRenderContainer } from '../overlay/overlayRenderContainer';
+import { DropTargetAnchorContainer } from '../dnd/dropTargetAnchorContainer';
+export interface PopoutGroupEntry {
+    window: PopoutWindow;
+    popoutGroup: DockviewGroupPanel;
+    referenceGroup?: string;
+    /**
+     * The popout window hosts its own gridview so it can hold a nested
+     * splitview layout of groups. `popoutGroup` is the window's anchor group.
+     */
+    gridview: Gridview;
+    /**
+     * Render / drop-target containers and window accessor for this popout, so
+     * groups relocated into the window can be wired to its own document.
+     */
+    overlayRenderContainer: OverlayRenderContainer;
+    dropTargetContainer: DropTargetAnchorContainer;
+    getWindow: () => Window;
+    popoutUrl?: string;
+    disposable: {
+        dispose: () => DockviewGroupPanel | undefined;
+    };
+}
+/**
+ * Narrow callback surface the PopoutWindowService needs from its host.
+ */
+export interface IPopoutWindowHost {
+    readonly isDisposed: boolean;
+}
+export interface IPopoutWindowService extends IDisposable {
+    readonly entries: readonly PopoutGroupEntry[];
+    readonly onDidRemove: Event<PopoutGroupEntry>;
+    add(entry: PopoutGroupEntry): void;
+    remove(entry: PopoutGroupEntry): void;
+    findByGroup(group: DockviewGroupPanel): PopoutGroupEntry | undefined;
+    findReferenceGroupId(group: DockviewGroupPanel): string | undefined;
+    observeGridviewSize(popoutWindow: PopoutWindow, gridview: Gridview, overlayRenderContainer: OverlayRenderContainer): IDisposable | undefined;
+    getPopupService(groupId: string): PopupService | undefined;
+    setPopupService(groupId: string, service: PopupService): void;
+    deletePopupService(groupId: string): void;
+    readonly restorationPromise: Promise<void>;
+    scheduleRestoration(delayMs: number, work: () => void, onCancel?: () => void): Promise<void>;
+    finishRestoration(promises: Promise<void>[]): void;
+    cancelPendingRestorations(): void;
+    serialize(): SerializedPopoutGroup[];
+    disposeAll(): void;
+}
+export declare class PopoutWindowService implements IPopoutWindowService {
+    private readonly _host;
+    private readonly _entries;
+    private readonly _popupServices;
+    private readonly _restorationCleanups;
+    private _restorationPromise;
+    private readonly _onDidRemove;
+    readonly onDidRemove: Event<PopoutGroupEntry>;
+    constructor(host: IPopoutWindowHost);
+    get entries(): readonly PopoutGroupEntry[];
+    get restorationPromise(): Promise<void>;
+    add(entry: PopoutGroupEntry): void;
+    remove(entry: PopoutGroupEntry): void;
+    findByGroup(group: DockviewGroupPanel): PopoutGroupEntry | undefined;
+    findReferenceGroupId(group: DockviewGroupPanel): string | undefined;
+    /**
+     * The popout window's innerWidth/innerHeight are often 0/stale until it has
+     * painted, and the nested gridview lays its children out to the size passed
+     * to layout() (a plain group fills via CSS instead). To stop content
+     * rendering into a zero box until a manual resize — and to avoid the race a
+     * fixed number of animation frames had — observe the gridview element with
+     * a ResizeObserver created in the POPOUT window's OWN realm. A parent-realm
+     * observer fires unreliably across the window boundary; a same-realm one
+     * fires reliably, including the initial observation once the window is
+     * sized.
+     *
+     * @returns a disposable that disconnects the observer, or `undefined` when
+     * the popout realm has no ResizeObserver (e.g. jsdom).
+     */
+    observeGridviewSize(popoutWindow: PopoutWindow, gridview: Gridview, overlayRenderContainer: OverlayRenderContainer): IDisposable | undefined;
+    getPopupService(groupId: string): PopupService | undefined;
+    setPopupService(groupId: string, service: PopupService): void;
+    deletePopupService(groupId: string): void;
+    scheduleRestoration(delayMs: number, work: () => void, onCancel?: () => void): Promise<void>;
+    finishRestoration(promises: Promise<void>[]): void;
+    cancelPendingRestorations(): void;
+    serialize(): SerializedPopoutGroup[];
+    disposeAll(): void;
+    dispose(): void;
+}
+export declare const PopoutWindowModule: import("./modules").DockviewModule<IPopoutWindowHost>;

package/dist/esm/dockview/popoutWindowService.js

@@ -0,0 +1,175 @@
+import { Emitter } from '../events';
+import { remove } from '../array';
+import { defineModule } from './modules';
+export class PopoutWindowService {
+    constructor(host) {
+        this._entries = [];
+        this._popupServices = new Map();
+        this._restorationCleanups = new Set();
+        this._restorationPromise = Promise.resolve();
+        this._onDidRemove = new Emitter();
+        this.onDidRemove = this._onDidRemove.event;
+        this._host = host;
+    }
+    get entries() {
+        return this._entries;
+    }
+    get restorationPromise() {
+        return this._restorationPromise;
+    }
+    add(entry) {
+        this._entries.push(entry);
+    }
+    remove(entry) {
+        // Fire only on a genuine removal, and not while the host component is
+        // tearing down (consumers don't want popout-removed events during
+        // dispose).
+        if (remove(this._entries, entry) && !this._host.isDisposed) {
+            this._onDidRemove.fire(entry);
+        }
+    }
+    findByGroup(group) {
+        // A popout window may host several groups in a nested gridview, so
+        // match by membership (DOM containment) rather than only the anchor.
+        return this._entries.find((entry) => entry.popoutGroup === group ||
+            entry.gridview.element.contains(group.element));
+    }
+    findReferenceGroupId(group) {
+        var _a;
+        return (_a = this._entries.find((entry) => entry.popoutGroup === group)) === null || _a === void 0 ? void 0 : _a.referenceGroup;
+    }
+    /**
+     * The popout window's innerWidth/innerHeight are often 0/stale until it has
+     * painted, and the nested gridview lays its children out to the size passed
+     * to layout() (a plain group fills via CSS instead). To stop content
+     * rendering into a zero box until a manual resize — and to avoid the race a
+     * fixed number of animation frames had — observe the gridview element with
+     * a ResizeObserver created in the POPOUT window's OWN realm. A parent-realm
+     * observer fires unreliably across the window boundary; a same-realm one
+     * fires reliably, including the initial observation once the window is
+     * sized.
+     *
+     * @returns a disposable that disconnects the observer, or `undefined` when
+     * the popout realm has no ResizeObserver (e.g. jsdom).
+     */
+    observeGridviewSize(popoutWindow, gridview, overlayRenderContainer) {
+        var _a;
+        const PopoutResizeObserver = (_a = popoutWindow.window) === null || _a === void 0 ? void 0 : _a.ResizeObserver;
+        if (!PopoutResizeObserver) {
+            return undefined;
+        }
+        let lastWidth = -1;
+        let lastHeight = -1;
+        const relayout = () => {
+            const win = popoutWindow.window;
+            if (this._host.isDisposed || !win || win.closed) {
+                return;
+            }
+            const width = Math.round(gridview.element.clientWidth);
+            const height = Math.round(gridview.element.clientHeight);
+            if (width === lastWidth && height === lastHeight) {
+                return;
+            }
+            lastWidth = width;
+            lastHeight = height;
+            if (width > 0 && height > 0) {
+                gridview.layout(width, height);
+            }
+            overlayRenderContainer.updateAllPositions();
+        };
+        const observer = new PopoutResizeObserver(() => {
+            var _a;
+            // Defer out of the observer callback into the popout's own frame to
+            // size against the settled layout and to avoid resize-loop warnings.
+            const raf = (_a = popoutWindow.window) === null || _a === void 0 ? void 0 : _a.requestAnimationFrame;
+            if (raf) {
+                raf.call(popoutWindow.window, relayout);
+            }
+            else {
+                relayout();
+            }
+        });
+        observer.observe(gridview.element);
+        return { dispose: () => observer.disconnect() };
+    }
+    getPopupService(groupId) {
+        return this._popupServices.get(groupId);
+    }
+    setPopupService(groupId, service) {
+        this._popupServices.set(groupId, service);
+    }
+    deletePopupService(groupId) {
+        this._popupServices.delete(groupId);
+    }
+    scheduleRestoration(delayMs, work, onCancel) {
+        return new Promise((resolve) => {
+            const cleanup = () => {
+                this._restorationCleanups.delete(cleanup);
+                clearTimeout(handle);
+                onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+                resolve();
+            };
+            const handle = setTimeout(() => {
+                this._restorationCleanups.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._host.isDisposed) {
+                    resolve();
+                    return;
+                }
+                work();
+                resolve();
+            }, delayMs);
+            this._restorationCleanups.add(cleanup);
+        });
+    }
+    finishRestoration(promises) {
+        this._restorationPromise = Promise.all(promises).then(() => void 0);
+    }
+    cancelPendingRestorations() {
+        for (const cleanup of [...this._restorationCleanups]) {
+            cleanup();
+        }
+        this._restorationCleanups.clear();
+    }
+    serialize() {
+        return this._entries.map((entry) => {
+            const grid = entry.gridview.serialize();
+            const root = grid.root;
+            const url = entry.popoutGroup.api.location.type === 'popout'
+                ? entry.popoutGroup.api.location.popoutUrl
+                : undefined;
+            const base = {
+                gridReferenceGroup: entry.referenceGroup,
+                position: entry.window.dimensions(),
+                url,
+            };
+            // Single-group window keeps the legacy `data` shape so layouts
+            // round-trip byte-stably and older readers keep working.
+            if (root.type === 'branch' &&
+                root.data.length === 1 &&
+                root.data[0].type === 'leaf') {
+                return Object.assign(Object.assign({}, base), { data: root.data[0].data });
+            }
+            return Object.assign(Object.assign({}, base), { grid });
+        });
+    }
+    disposeAll() {
+        for (const entry of [...this._entries]) {
+            entry.disposable.dispose();
+        }
+    }
+    dispose() {
+        this.cancelPendingRestorations();
+        this.disposeAll();
+        this._onDidRemove.dispose();
+    }
+}
+export const PopoutWindowModule = defineModule({
+    name: 'PopoutWindow',
+    serviceKey: 'popoutWindowService',
+    create: (host) => new PopoutWindowService(host),
+});

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

@@ -0,0 +1,35 @@
+import { IDisposable } from '../lifecycle';
+import { Event } from '../events';
+import { DroptargetEvent, DropTargetTargetModel, Position, WillShowOverlayEvent } from '../dnd/droptarget';
+import { DockviewComponentOptions } from './options';
+export interface IRootDropTargetHost {
+    readonly id: string;
+    readonly element: HTMLElement;
+    readonly options: DockviewComponentOptions;
+    isGridEmpty(): boolean;
+    rootDropTargetOverrideTarget(): DropTargetTargetModel | undefined;
+    /**
+     * Build, fire, and return the verdict for an unhandled-drag-over event.
+     * Implemented on the component side so the service stays free of
+     * circular imports with the event class declared in dockviewComponent.
+     */
+    dispatchUnhandledDragOver(nativeEvent: DragEvent | PointerEvent, position: Position): boolean;
+}
+export interface IRootDropTargetService extends IDisposable {
+    /** Merged stream from both DnD backends. */
+    readonly onWillShowOverlay: Event<WillShowOverlayEvent>;
+    /** Merged stream from both DnD backends. */
+    readonly onDrop: Event<DroptargetEvent>;
+    /** Apply changed options (dndEdges). */
+    setOptions(options: Partial<DockviewComponentOptions>): void;
+}
+export declare class RootDropTargetService implements IRootDropTargetService {
+    private readonly _html5Target;
+    private readonly _pointerTarget;
+    readonly onWillShowOverlay: Event<WillShowOverlayEvent>;
+    readonly onDrop: Event<DroptargetEvent>;
+    constructor(host: IRootDropTargetHost);
+    setOptions(options: Partial<DockviewComponentOptions>): void;
+    dispose(): void;
+}
+export declare const RootDropTargetModule: import("./modules").DockviewModule<IRootDropTargetHost>;

package/dist/esm/dockview/rootDropTargetService.js

@@ -0,0 +1,82 @@
+import { Event } from '../events';
+import { html5Backend, pointerBackend } from '../dnd/backend';
+import { getPanelData } from '../dnd/dataTransfer';
+import { defineModule } from './modules';
+const DEFAULT_ROOT_OVERLAY_MODEL = {
+    activationSize: { type: 'pixels', value: 10 },
+    size: { type: 'pixels', value: 20 },
+};
+export class RootDropTargetService {
+    constructor(host) {
+        const canDisplayOverlay = (event, position) => {
+            const data = getPanelData();
+            if (data) {
+                if (data.viewId !== host.id) {
+                    return false;
+                }
+                if (position === 'center') {
+                    // center drop target only allowed if no panels in primary
+                    // grid; floating panels are allowed
+                    return host.isGridEmpty();
+                }
+                return true;
+            }
+            if (position === 'center' && !host.isGridEmpty()) {
+                // for external events only show the four-corner drag overlays,
+                // disable center so external drag events can fall through to
+                // the group and panel drop target handlers
+                return false;
+            }
+            return host.dispatchUnhandledDragOver(event, position);
+        };
+        const overlayModel = typeof host.options.dndEdges === 'object' &&
+            host.options.dndEdges !== null
+            ? host.options.dndEdges
+            : DEFAULT_ROOT_OVERLAY_MODEL;
+        this._html5Target = html5Backend.createDropTarget(host.element, {
+            className: 'dv-drop-target-edge',
+            canDisplayOverlay,
+            acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
+            overlayModel,
+            getOverrideTarget: () => host.rootDropTargetOverrideTarget(),
+        });
+        this._pointerTarget = pointerBackend.createDropTarget(host.element, {
+            className: 'dv-drop-target-edge',
+            canDisplayOverlay,
+            acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
+            overlayModel,
+            getOverrideTarget: () => host.rootDropTargetOverrideTarget(),
+        });
+        this.onWillShowOverlay = Event.any(this._html5Target.onWillShowOverlay, this._pointerTarget.onWillShowOverlay);
+        this.onDrop = Event.any(this._html5Target.onDrop, this._pointerTarget.onDrop);
+        // Apply initial-state options now that the targets exist; setOptions
+        // handles dndEdges (disable + overlay model) and late changes.
+        this.setOptions(host.options);
+    }
+    setOptions(options) {
+        if ('dndEdges' in options) {
+            const disabled = typeof options.dndEdges === 'boolean' &&
+                options.dndEdges === false;
+            this._html5Target.disabled = disabled;
+            this._pointerTarget.disabled = disabled;
+            if (typeof options.dndEdges === 'object' &&
+                options.dndEdges !== null) {
+                this._html5Target.setOverlayModel(options.dndEdges);
+                this._pointerTarget.setOverlayModel(options.dndEdges);
+            }
+            else {
+                this._html5Target.setOverlayModel(DEFAULT_ROOT_OVERLAY_MODEL);
+                this._pointerTarget.setOverlayModel(DEFAULT_ROOT_OVERLAY_MODEL);
+            }
+        }
+    }
+    dispose() {
+        this._html5Target.dispose();
+        this._pointerTarget.dispose();
+    }
+}
+export const RootDropTargetModule = defineModule({
+    name: 'RootDropTarget',
+    serviceKey: 'rootDropTargetService',
+    create: (host) => new RootDropTargetService(host),
+});

package/dist/esm/dockview/strictEventsSequencing.js

@@ -16,11 +16,11 @@ export class StrictEventsSequencing extends CompositeDisposable {
                 panels.add(panel.api.id);
             }
         }), this.accessor.onDidRemovePanel((panel) => {
-            if (!panels.has(panel.api.id)) {
-                throw new Error(`dockview: Invalid event sequence. [onDidRemovePanel] called for panel ${panel.api.id} but panel does not exists`);
+            if (panels.has(panel.api.id)) {
+                panels.delete(panel.api.id);
             }
             else {
-                panels.delete(panel.api.id);
+                throw new Error(`dockview: Invalid event sequence. [onDidRemovePanel] called for panel ${panel.api.id} but panel does not exists`);
             }
         }), this.accessor.onDidAddGroup((group) => {
             if (groups.has(group.api.id)) {
@@ -30,11 +30,11 @@ export class StrictEventsSequencing extends CompositeDisposable {
                 groups.add(group.api.id);
             }
         }), this.accessor.onDidRemoveGroup((group) => {
-            if (!groups.has(group.api.id)) {
-                throw new Error(`dockview: Invalid event sequence. [onDidRemoveGroup] called for group ${group.api.id} but group does not exists`);
+            if (groups.has(group.api.id)) {
+                groups.delete(group.api.id);
             }
             else {
-                groups.delete(group.api.id);
+                throw new Error(`dockview: Invalid event sequence. [onDidRemoveGroup] called for group ${group.api.id} but group does not exists`);
             }
         }));
     }