dockview-core - npm Package Compare versions

Comparing version 0.0.0-experimental-91e4e321-20230827 to 0.0.0-experimental-dc50d4e-20231022

dist/cjs/api/component.api.d.ts

@@ -16,2 +16,3 @@ import { DockviewDropEvent, IDockviewComponent, SerializedDockview } from '../dockview/dockviewComponent';
 import { PaneviewDropEvent } from '../paneview/draggablePaneviewPanel';
+import { GroupDragEvent, TabDragEvent } from '../dockview/components/titlebar/tabsContainer';
 export interface CommonApi<T = any> {
@@ -30,23 +31,86 @@ readonly height: number;
     private readonly component;
+    /**
+     * The minimum size  the component can reach where size is measured in the direction of orientation provided.
+     */
     get minimumSize(): number;
+    /**
+     * The maximum size the component can reach where size is measured in the direction of orientation provided.
+     */
     get maximumSize(): number;
+    /**
+     * Width of the component.
+     */
+    get width(): number;
+    /**
+     * Height of the component.
+     */
     get height(): number;
-    get width(): number;
+    /**
+     * The current number of panels.
+     */
     get length(): number;
+    /**
+     * The current orientation of the component.
+     */
     get orientation(): Orientation;
+    /**
+     * The list of current panels.
+     */
     get panels(): ISplitviewPanel[];
+    /**
+     * Invoked after a layout is loaded through the `fromJSON` method.
+     */
     get onDidLayoutFromJSON(): Event<void>;
+    /**
+     * Invoked whenever any aspect of the layout changes.
+     * If listening to this event it may be worth debouncing ouputs.
+     */
     get onDidLayoutChange(): Event<void>;
+    /**
+     * Invoked when a view is added.
+     */
     get onDidAddView(): Event<IView>;
+    /**
+     * Invoked when a view is removed.
+     */
     get onDidRemoveView(): Event<IView>;
     constructor(component: ISplitviewComponent);
+    /**
+     * Update configuratable options.
+     */
     updateOptions(options: SplitviewComponentUpdateOptions): void;
+    /**
+     * Removes an existing panel and optionally provide a `Sizing` method
+     * for the subsequent resize.
+     */
     removePanel(panel: ISplitviewPanel, sizing?: Sizing): void;
+    /**
+     * Focus the component.
+     */
     focus(): void;
+    /**
+     * Get the reference to a panel given it's `string` id.
+     */
     getPanel(id: string): ISplitviewPanel | undefined;
+    /**
+     * Layout the panel with a width and height.
+     */
     layout(width: number, height: number): void;
+    /**
+     * Add a new panel and return the created instance.
+     */
     addPanel<T extends object = Parameters>(options: AddSplitviewComponentOptions<T>): ISplitviewPanel;
+    /**
+     * Move a panel given it's current and desired index.
+     */
     movePanel(from: number, to: number): void;
+    /**
+     * Deserialize a layout to built a splitivew.
+     */
     fromJSON(data: SerializedSplitview): void;
+    /** Serialize a layout */
     toJSON(): SerializedSplitview;
+    /**
+     * Remove all panels and clear the component.
+     */
     clear(): void;
@@ -56,21 +120,78 @@ }
     private readonly component;
+    /**
+     * The minimum size  the component can reach where size is measured in the direction of orientation provided.
+     */
     get minimumSize(): number;
+    /**
+     * The maximum size the component can reach where size is measured in the direction of orientation provided.
+     */
     get maximumSize(): number;
+    /**
+     * Width of the component.
+     */
+    get width(): number;
+    /**
+     * Height of the component.
+     */
     get height(): number;
-    get width(): number;
+    /**
+     * All panel objects.
+     */
     get panels(): IPaneviewPanel[];
+    /**
+     * Invoked when any layout change occures, an aggregation of many events.
+     */
     get onDidLayoutChange(): Event<void>;
+    /**
+     * Invoked after a layout is deserialzied using the `fromJSON` method.
+     */
     get onDidLayoutFromJSON(): Event<void>;
+    /**
+     * Invoked when a panel is added. May be called multiple times when moving panels.
+     */
     get onDidAddView(): Event<IPaneviewPanel>;
+    /**
+     * Invoked when a panel is removed. May be called multiple times when moving panels.
+     */
     get onDidRemoveView(): Event<IPaneviewPanel>;
+    /**
+     * Invoked when a Drag'n'Drop event occurs that the component was unable to handle. Exposed for custom Drag'n'Drop functionality.
+     */
     get onDidDrop(): Event<PaneviewDropEvent>;
     constructor(component: IPaneviewComponent);
+    /**
+     * Remove a panel given the panel object.
+     */
     removePanel(panel: IPaneviewPanel): void;
+    /**
+     * Get a panel object given a `string` id. May return `undefined`.
+     */
     getPanel(id: string): IPaneviewPanel | undefined;
+    /**
+     * Move a panel given it's current and desired index.
+     */
     movePanel(from: number, to: number): void;
+    /**
+     *  Focus the component. Will try to focus an active panel if one exists.
+     */
     focus(): void;
+    /**
+     * Force resize the component to an exact width and height. Read about auto-resizing before using.
+     */
     layout(width: number, height: number): void;
+    /**
+     * Add a panel and return the created object.
+     */
     addPanel<T extends object = Parameters>(options: AddPaneviewComponentOptions<T>): IPaneviewPanel;
+    /**
+     * Create a component from a serialized object.
+     */
     fromJSON(data: SerializedPaneview): void;
+    /**
+     * Create a serialized object of the current component.
+     */
     toJSON(): SerializedPaneview;
+    /**
+     * Reset the component back to an empty and default state.
+     */
     clear(): void;
@@ -80,21 +201,75 @@ }
     private readonly component;
+    /**
+     * Width of the component.
+     */
+    get width(): number;
+    /**
+     * Height of the component.
+     */
+    get height(): number;
+    /**
+     * Minimum height of the component.
+     */
     get minimumHeight(): number;
+    /**
+     * Maximum height of the component.
+     */
     get maximumHeight(): number;
+    /**
+     * Minimum width of the component.
+     */
     get minimumWidth(): number;
+    /**
+     * Maximum width of the component.
+     */
     get maximumWidth(): number;
-    get width(): number;
-    get height(): number;
+    /**
+     * Invoked when any layout change occures, an aggregation of many events.
+     */
     get onDidLayoutChange(): Event<void>;
+    /**
+     * Invoked when a panel is added. May be called multiple times when moving panels.
+     */
     get onDidAddPanel(): Event<IGridviewPanel>;
+    /**
+     * Invoked when a panel is removed. May be called multiple times when moving panels.
+     */
     get onDidRemovePanel(): Event<IGridviewPanel>;
+    /**
+     * Invoked when the active panel changes. May be undefined if no panel is active.
+     */
     get onDidActivePanelChange(): Event<IGridviewPanel | undefined>;
+    /**
+     * Invoked after a layout is deserialzied using the `fromJSON` method.
+     */
     get onDidLayoutFromJSON(): Event<void>;
+    /**
+     * All panel objects.
+     */
     get panels(): IGridviewPanel[];
+    /**
+     * Current orientation. Can be changed after initialization.
+     */
     get orientation(): Orientation;
     set orientation(value: Orientation);
     constructor(component: IGridviewComponent);
+    /**
+     *  Focus the component. Will try to focus an active panel if one exists.
+     */
     focus(): void;
+    /**
+     * Force resize the component to an exact width and height. Read about auto-resizing before using.
+     */
     layout(width: number, height: number, force?: boolean): void;
+    /**
+     * Add a panel and return the created object.
+     */
     addPanel<T extends object = Parameters>(options: AddComponentOptions<T>): IGridviewPanel;
+    /**
+     * Remove a panel given the panel object.
+     */
     removePanel(panel: IGridviewPanel, sizing?: Sizing): void;
+    /**
+     * Move a panel in a particular direction relative to another panel.
+     */
     movePanel(panel: IGridviewPanel, options: {
@@ -105,5 +280,17 @@ direction: Direction;
     }): void;
+    /**
+     * Get a panel object given a `string` id. May return `undefined`.
+     */
     getPanel(id: string): IGridviewPanel | undefined;
+    /**
+     * Create a component from a serialized object.
+     */
     fromJSON(data: SerializedGridviewComponent): void;
+    /**
+     * Create a serialized object of the current component.
+     */
     toJSON(): SerializedGridviewComponent;
+    /**
+     * Reset the component back to an empty and default state.
+     */
     clear(): void;
@@ -113,36 +300,138 @@ }
     private readonly component;
+    /**
+     * The unique identifier for this instance. Used to manage scope of Drag'n'Drop events.
+     */
     get id(): string;
+    /**
+     * Width of the component.
+     */
     get width(): number;
+    /**
+     * Height of the component.
+     */
     get height(): number;
+    /**
+     * Minimum height of the component.
+     */
     get minimumHeight(): number;
+    /**
+     * Maximum height of the component.
+     */
     get maximumHeight(): number;
+    /**
+     * Minimum width of the component.
+     */
     get minimumWidth(): number;
+    /**
+     * Maximum width of the component.
+     */
     get maximumWidth(): number;
+    /**
+     * Total number of groups.
+     */
     get size(): number;
+    /**
+     * Total number of panels.
+     */
     get totalPanels(): number;
+    /**
+     * Invoked when the active group changes. May be undefined if no group is active.
+     */
     get onDidActiveGroupChange(): Event<DockviewGroupPanel | undefined>;
+    /**
+     * Invoked when a group is added. May be called multiple times when moving groups.
+     */
     get onDidAddGroup(): Event<DockviewGroupPanel>;
+    /**
+     * Invoked when a group is removed. May be called multiple times when moving groups.
+     */
     get onDidRemoveGroup(): Event<DockviewGroupPanel>;
+    /**
+     * Invoked when the active panel changes. May be undefined if no panel is active.
+     */
     get onDidActivePanelChange(): Event<IDockviewPanel | undefined>;
+    /**
+     * Invoked when a panel is added. May be called multiple times when moving panels.
+     */
     get onDidAddPanel(): Event<IDockviewPanel>;
+    /**
+     * Invoked when a panel is removed. May be called multiple times when moving panels.
+     */
     get onDidRemovePanel(): Event<IDockviewPanel>;
+    /**
+     * Invoked after a layout is deserialzied using the `fromJSON` method.
+     */
     get onDidLayoutFromJSON(): Event<void>;
+    /**
+     * Invoked when any layout change occures, an aggregation of many events.
+     */
     get onDidLayoutChange(): Event<void>;
+    /**
+     * Invoked when a Drag'n'Drop event occurs that the component was unable to handle. Exposed for custom Drag'n'Drop functionality.
+     */
     get onDidDrop(): Event<DockviewDropEvent>;
+    /**
+     * Invoked before a group is dragged. Exposed for custom Drag'n'Drop functionality.
+     */
+    get onWillDragGroup(): Event<GroupDragEvent>;
+    /**
+     * Invoked before a panel is dragged. Exposed for custom Drag'n'Drop functionality.
+     */
+    get onWillDragPanel(): Event<TabDragEvent>;
+    /**
+     * All panel objects.
+     */
     get panels(): IDockviewPanel[];
+    /**
+     * All group objects.
+     */
     get groups(): DockviewGroupPanel[];
+    /**
+     *  Active panel object.
+     */
     get activePanel(): IDockviewPanel | undefined;
+    /**
+     * Active group object.
+     */
     get activeGroup(): DockviewGroupPanel | undefined;
     constructor(component: IDockviewComponent);
+    /**
+     *  Focus the component. Will try to focus an active panel if one exists.
+     */
     focus(): void;
+    /**
+     * Get a panel object given a `string` id. May return `undefined`.
+     */
     getPanel(id: string): IDockviewPanel | undefined;
+    /**
+     * Force resize the component to an exact width and height. Read about auto-resizing before using.
+     */
     layout(width: number, height: number, force?: boolean): void;
+    /**
+     * Add a panel and return the created object.
+     */
     addPanel<T extends object = Parameters>(options: AddPanelOptions<T>): IDockviewPanel;
+    /**
+     * Remove a panel given the panel object.
+     */
     removePanel(panel: IDockviewPanel): void;
+    /**
+     * Add a group and return the created object.
+     */
     addGroup(options?: AddGroupOptions): DockviewGroupPanel;
-    moveToNext(options?: MovementOptions): void;
-    moveToPrevious(options?: MovementOptions): void;
+    /**
+     * Close all groups and panels.
+     */
     closeAllGroups(): void;
+    /**
+     * Remove a group and any panels within the group.
+     */
     removeGroup(group: IDockviewGroupPanel): void;
+    /**
+     * Get a group object given a `string` id. May return undefined.
+     */
     getGroup(id: string): DockviewGroupPanel | undefined;
+    /**
+     * Add a floating group
+     */
     addFloatingGroup(item: IDockviewPanel | DockviewGroupPanel, coord?: {
@@ -152,6 +441,23 @@ x: number;
     }): void;
+    /**
+     * Create a component from a serialized object.
+     */
     fromJSON(data: SerializedDockview): void;
+    /**
+     * Create a serialized object of the current component.
+     */
     toJSON(): SerializedDockview;
+    /**
+     * Reset the component back to an empty and default state.
+     */
     clear(): void;
+    /**
+     * Move the focus progmatically to the next panel or group.
+     */
+    moveToNext(options?: MovementOptions): void;
+    /**
+     * Move the focus progmatically to the previous panel or group.
+     */
+    moveToPrevious(options?: MovementOptions): void;
 }
 //# sourceMappingURL=component.api.d.ts.map

dist/cjs/api/component.api.js

@@ -21,2 +21,5 @@ "use strict";
     Object.defineProperty(SplitviewApi.prototype, "minimumSize", {
+        /**
+         * The minimum size  the component can reach where size is measured in the direction of orientation provided.
+         */
         get: function () {
@@ -29,2 +32,5 @@ return this.component.minimumSize;
     Object.defineProperty(SplitviewApi.prototype, "maximumSize", {
+        /**
+         * The maximum size the component can reach where size is measured in the direction of orientation provided.
+         */
         get: function () {
@@ -36,5 +42,8 @@ return this.component.maximumSize;
     });
-    Object.defineProperty(SplitviewApi.prototype, "height", {
+    Object.defineProperty(SplitviewApi.prototype, "width", {
+        /**
+         * Width of the component.
+         */
         get: function () {
-            return this.component.height;
+            return this.component.width;
         },
@@ -44,5 +53,8 @@ enumerable: false,
     });
-    Object.defineProperty(SplitviewApi.prototype, "width", {
+    Object.defineProperty(SplitviewApi.prototype, "height", {
+        /**
+         * Height of the component.
+         */
         get: function () {
-            return this.component.width;
+            return this.component.height;
         },
@@ -53,2 +65,5 @@ enumerable: false,
     Object.defineProperty(SplitviewApi.prototype, "length", {
+        /**
+         * The current number of panels.
+         */
         get: function () {
@@ -61,2 +76,5 @@ return this.component.length;
     Object.defineProperty(SplitviewApi.prototype, "orientation", {
+        /**
+         * The current orientation of the component.
+         */
         get: function () {
@@ -69,2 +87,5 @@ return this.component.orientation;
     Object.defineProperty(SplitviewApi.prototype, "panels", {
+        /**
+         * The list of current panels.
+         */
         get: function () {
@@ -77,2 +98,5 @@ return this.component.panels;
     Object.defineProperty(SplitviewApi.prototype, "onDidLayoutFromJSON", {
+        /**
+         * Invoked after a layout is loaded through the `fromJSON` method.
+         */
         get: function () {
@@ -85,2 +109,6 @@ return this.component.onDidLayoutFromJSON;
     Object.defineProperty(SplitviewApi.prototype, "onDidLayoutChange", {
+        /**
+         * Invoked whenever any aspect of the layout changes.
+         * If listening to this event it may be worth debouncing ouputs.
+         */
         get: function () {
@@ -93,2 +121,5 @@ return this.component.onDidLayoutChange;
     Object.defineProperty(SplitviewApi.prototype, "onDidAddView", {
+        /**
+         * Invoked when a view is added.
+         */
         get: function () {
@@ -101,2 +132,5 @@ return this.component.onDidAddView;
     Object.defineProperty(SplitviewApi.prototype, "onDidRemoveView", {
+        /**
+         * Invoked when a view is removed.
+         */
         get: function () {
@@ -108,29 +142,58 @@ return this.component.onDidRemoveView;
     });
+    /**
+     * Update configuratable options.
+     */
     SplitviewApi.prototype.updateOptions = function (options) {
         this.component.updateOptions(options);
     };
+    /**
+     * Removes an existing panel and optionally provide a `Sizing` method
+     * for the subsequent resize.
+     */
     SplitviewApi.prototype.removePanel = function (panel, sizing) {
         this.component.removePanel(panel, sizing);
     };
+    /**
+     * Focus the component.
+     */
     SplitviewApi.prototype.focus = function () {
         this.component.focus();
     };
+    /**
+     * Get the reference to a panel given it's `string` id.
+     */
     SplitviewApi.prototype.getPanel = function (id) {
         return this.component.getPanel(id);
     };
+    /**
+     * Layout the panel with a width and height.
+     */
     SplitviewApi.prototype.layout = function (width, height) {
         return this.component.layout(width, height);
     };
+    /**
+     * Add a new panel and return the created instance.
+     */
     SplitviewApi.prototype.addPanel = function (options) {
         return this.component.addPanel(options);
     };
+    /**
+     * Move a panel given it's current and desired index.
+     */
     SplitviewApi.prototype.movePanel = function (from, to) {
         this.component.movePanel(from, to);
     };
+    /**
+     * Deserialize a layout to built a splitivew.
+     */
     SplitviewApi.prototype.fromJSON = function (data) {
         this.component.fromJSON(data);
     };
+    /** Serialize a layout */
     SplitviewApi.prototype.toJSON = function () {
         return this.component.toJSON();
     };
+    /**
+     * Remove all panels and clear the component.
+     */
     SplitviewApi.prototype.clear = function () {
@@ -147,2 +210,5 @@ this.component.clear();
     Object.defineProperty(PaneviewApi.prototype, "minimumSize", {
+        /**
+         * The minimum size  the component can reach where size is measured in the direction of orientation provided.
+         */
         get: function () {
@@ -155,2 +221,5 @@ return this.component.minimumSize;
     Object.defineProperty(PaneviewApi.prototype, "maximumSize", {
+        /**
+         * The maximum size the component can reach where size is measured in the direction of orientation provided.
+         */
         get: function () {
@@ -162,5 +231,8 @@ return this.component.maximumSize;
     });
-    Object.defineProperty(PaneviewApi.prototype, "height", {
+    Object.defineProperty(PaneviewApi.prototype, "width", {
+        /**
+         * Width of the component.
+         */
         get: function () {
-            return this.component.height;
+            return this.component.width;
         },
@@ -170,5 +242,8 @@ enumerable: false,
     });
-    Object.defineProperty(PaneviewApi.prototype, "width", {
+    Object.defineProperty(PaneviewApi.prototype, "height", {
+        /**
+         * Height of the component.
+         */
         get: function () {
-            return this.component.width;
+            return this.component.height;
         },
@@ -179,2 +254,5 @@ enumerable: false,
     Object.defineProperty(PaneviewApi.prototype, "panels", {
+        /**
+         * All panel objects.
+         */
         get: function () {
@@ -187,2 +265,5 @@ return this.component.panels;
     Object.defineProperty(PaneviewApi.prototype, "onDidLayoutChange", {
+        /**
+         * Invoked when any layout change occures, an aggregation of many events.
+         */
         get: function () {
@@ -195,2 +276,5 @@ return this.component.onDidLayoutChange;
     Object.defineProperty(PaneviewApi.prototype, "onDidLayoutFromJSON", {
+        /**
+         * Invoked after a layout is deserialzied using the `fromJSON` method.
+         */
         get: function () {
@@ -203,2 +287,5 @@ return this.component.onDidLayoutFromJSON;
     Object.defineProperty(PaneviewApi.prototype, "onDidAddView", {
+        /**
+         * Invoked when a panel is added. May be called multiple times when moving panels.
+         */
         get: function () {
@@ -211,2 +298,5 @@ return this.component.onDidAddView;
     Object.defineProperty(PaneviewApi.prototype, "onDidRemoveView", {
+        /**
+         * Invoked when a panel is removed. May be called multiple times when moving panels.
+         */
         get: function () {
@@ -219,2 +309,5 @@ return this.component.onDidRemoveView;
     Object.defineProperty(PaneviewApi.prototype, "onDidDrop", {
+        /**
+         * Invoked when a Drag'n'Drop event occurs that the component was unable to handle. Exposed for custom Drag'n'Drop functionality.
+         */
         get: function () {
@@ -235,26 +328,53 @@ var _this = this;
     });
+    /**
+     * Remove a panel given the panel object.
+     */
     PaneviewApi.prototype.removePanel = function (panel) {
         this.component.removePanel(panel);
     };
+    /**
+     * Get a panel object given a `string` id. May return `undefined`.
+     */
     PaneviewApi.prototype.getPanel = function (id) {
         return this.component.getPanel(id);
     };
+    /**
+     * Move a panel given it's current and desired index.
+     */
     PaneviewApi.prototype.movePanel = function (from, to) {
         this.component.movePanel(from, to);
     };
+    /**
+     *  Focus the component. Will try to focus an active panel if one exists.
+     */
     PaneviewApi.prototype.focus = function () {
         this.component.focus();
     };
+    /**
+     * Force resize the component to an exact width and height. Read about auto-resizing before using.
+     */
     PaneviewApi.prototype.layout = function (width, height) {
         this.component.layout(width, height);
     };
+    /**
+     * Add a panel and return the created object.
+     */
     PaneviewApi.prototype.addPanel = function (options) {
         return this.component.addPanel(options);
     };
+    /**
+     * Create a component from a serialized object.
+     */
     PaneviewApi.prototype.fromJSON = function (data) {
         this.component.fromJSON(data);
     };
+    /**
+     * Create a serialized object of the current component.
+     */
     PaneviewApi.prototype.toJSON = function () {
         return this.component.toJSON();
     };
+    /**
+     * Reset the component back to an empty and default state.
+     */
     PaneviewApi.prototype.clear = function () {
@@ -270,5 +390,8 @@ this.component.clear();
     }
-    Object.defineProperty(GridviewApi.prototype, "minimumHeight", {
+    Object.defineProperty(GridviewApi.prototype, "width", {
+        /**
+         * Width of the component.
+         */
         get: function () {
-            return this.component.minimumHeight;
+            return this.component.width;
         },
@@ -278,5 +401,8 @@ enumerable: false,
     });
-    Object.defineProperty(GridviewApi.prototype, "maximumHeight", {
+    Object.defineProperty(GridviewApi.prototype, "height", {
+        /**
+         * Height of the component.
+         */
         get: function () {
-            return this.component.maximumHeight;
+            return this.component.height;
         },
@@ -286,5 +412,8 @@ enumerable: false,
     });
-    Object.defineProperty(GridviewApi.prototype, "minimumWidth", {
+    Object.defineProperty(GridviewApi.prototype, "minimumHeight", {
+        /**
+         * Minimum height of the component.
+         */
         get: function () {
-            return this.component.minimumWidth;
+            return this.component.minimumHeight;
         },
@@ -294,5 +423,8 @@ enumerable: false,
     });
-    Object.defineProperty(GridviewApi.prototype, "maximumWidth", {
+    Object.defineProperty(GridviewApi.prototype, "maximumHeight", {
+        /**
+         * Maximum height of the component.
+         */
         get: function () {
-            return this.component.maximumWidth;
+            return this.component.maximumHeight;
         },
@@ -302,5 +434,8 @@ enumerable: false,
     });
-    Object.defineProperty(GridviewApi.prototype, "width", {
+    Object.defineProperty(GridviewApi.prototype, "minimumWidth", {
+        /**
+         * Minimum width of the component.
+         */
         get: function () {
-            return this.component.width;
+            return this.component.minimumWidth;
         },
@@ -310,5 +445,8 @@ enumerable: false,
     });
-    Object.defineProperty(GridviewApi.prototype, "height", {
+    Object.defineProperty(GridviewApi.prototype, "maximumWidth", {
+        /**
+         * Maximum width of the component.
+         */
         get: function () {
-            return this.component.height;
+            return this.component.maximumWidth;
         },
@@ -319,2 +457,5 @@ enumerable: false,
     Object.defineProperty(GridviewApi.prototype, "onDidLayoutChange", {
+        /**
+         * Invoked when any layout change occures, an aggregation of many events.
+         */
         get: function () {
@@ -327,2 +468,5 @@ return this.component.onDidLayoutChange;
     Object.defineProperty(GridviewApi.prototype, "onDidAddPanel", {
+        /**
+         * Invoked when a panel is added. May be called multiple times when moving panels.
+         */
         get: function () {
@@ -335,2 +479,5 @@ return this.component.onDidAddGroup;
     Object.defineProperty(GridviewApi.prototype, "onDidRemovePanel", {
+        /**
+         * Invoked when a panel is removed. May be called multiple times when moving panels.
+         */
         get: function () {
@@ -343,2 +490,5 @@ return this.component.onDidRemoveGroup;
     Object.defineProperty(GridviewApi.prototype, "onDidActivePanelChange", {
+        /**
+         * Invoked when the active panel changes. May be undefined if no panel is active.
+         */
         get: function () {
@@ -351,2 +501,5 @@ return this.component.onDidActiveGroupChange;
     Object.defineProperty(GridviewApi.prototype, "onDidLayoutFromJSON", {
+        /**
+         * Invoked after a layout is deserialzied using the `fromJSON` method.
+         */
         get: function () {
@@ -359,2 +512,5 @@ return this.component.onDidLayoutFromJSON;
     Object.defineProperty(GridviewApi.prototype, "panels", {
+        /**
+         * All panel objects.
+         */
         get: function () {
@@ -367,2 +523,5 @@ return this.component.groups;
     Object.defineProperty(GridviewApi.prototype, "orientation", {
+        /**
+         * Current orientation. Can be changed after initialization.
+         */
         get: function () {
@@ -377,5 +536,11 @@ return this.component.orientation;
     });
+    /**
+     *  Focus the component. Will try to focus an active panel if one exists.
+     */
     GridviewApi.prototype.focus = function () {
         this.component.focus();
     };
+    /**
+     * Force resize the component to an exact width and height. Read about auto-resizing before using.
+     */
     GridviewApi.prototype.layout = function (width, height, force) {
@@ -385,20 +550,41 @@ if (force === void 0) { force = false; }
     };
+    /**
+     * Add a panel and return the created object.
+     */
     GridviewApi.prototype.addPanel = function (options) {
         return this.component.addPanel(options);
     };
+    /**
+     * Remove a panel given the panel object.
+     */
     GridviewApi.prototype.removePanel = function (panel, sizing) {
         this.component.removePanel(panel, sizing);
     };
+    /**
+     * Move a panel in a particular direction relative to another panel.
+     */
     GridviewApi.prototype.movePanel = function (panel, options) {
         this.component.movePanel(panel, options);
     };
+    /**
+     * Get a panel object given a `string` id. May return `undefined`.
+     */
     GridviewApi.prototype.getPanel = function (id) {
         return this.component.getPanel(id);
     };
+    /**
+     * Create a component from a serialized object.
+     */
     GridviewApi.prototype.fromJSON = function (data) {
         return this.component.fromJSON(data);
     };
+    /**
+     * Create a serialized object of the current component.
+     */
     GridviewApi.prototype.toJSON = function () {
         return this.component.toJSON();
     };
+    /**
+     * Reset the component back to an empty and default state.
+     */
     GridviewApi.prototype.clear = function () {
@@ -415,2 +601,5 @@ this.component.clear();
     Object.defineProperty(DockviewApi.prototype, "id", {
+        /**
+         * The unique identifier for this instance. Used to manage scope of Drag'n'Drop events.
+         */
         get: function () {
@@ -423,2 +612,5 @@ return this.component.id;
     Object.defineProperty(DockviewApi.prototype, "width", {
+        /**
+         * Width of the component.
+         */
         get: function () {
@@ -431,2 +623,5 @@ return this.component.width;
     Object.defineProperty(DockviewApi.prototype, "height", {
+        /**
+         * Height of the component.
+         */
         get: function () {
@@ -439,2 +634,5 @@ return this.component.height;
     Object.defineProperty(DockviewApi.prototype, "minimumHeight", {
+        /**
+         * Minimum height of the component.
+         */
         get: function () {
@@ -447,2 +645,5 @@ return this.component.minimumHeight;
     Object.defineProperty(DockviewApi.prototype, "maximumHeight", {
+        /**
+         * Maximum height of the component.
+         */
         get: function () {
@@ -455,2 +656,5 @@ return this.component.maximumHeight;
     Object.defineProperty(DockviewApi.prototype, "minimumWidth", {
+        /**
+         * Minimum width of the component.
+         */
         get: function () {
@@ -463,2 +667,5 @@ return this.component.minimumWidth;
     Object.defineProperty(DockviewApi.prototype, "maximumWidth", {
+        /**
+         * Maximum width of the component.
+         */
         get: function () {
@@ -471,2 +678,5 @@ return this.component.maximumWidth;
     Object.defineProperty(DockviewApi.prototype, "size", {
+        /**
+         * Total number of groups.
+         */
         get: function () {
@@ -479,2 +689,5 @@ return this.component.size;
     Object.defineProperty(DockviewApi.prototype, "totalPanels", {
+        /**
+         * Total number of panels.
+         */
         get: function () {
@@ -487,2 +700,5 @@ return this.component.totalPanels;
     Object.defineProperty(DockviewApi.prototype, "onDidActiveGroupChange", {
+        /**
+         * Invoked when the active group changes. May be undefined if no group is active.
+         */
         get: function () {
@@ -495,2 +711,5 @@ return this.component.onDidActiveGroupChange;
     Object.defineProperty(DockviewApi.prototype, "onDidAddGroup", {
+        /**
+         * Invoked when a group is added. May be called multiple times when moving groups.
+         */
         get: function () {
@@ -503,2 +722,5 @@ return this.component.onDidAddGroup;
     Object.defineProperty(DockviewApi.prototype, "onDidRemoveGroup", {
+        /**
+         * Invoked when a group is removed. May be called multiple times when moving groups.
+         */
         get: function () {
@@ -511,2 +733,5 @@ return this.component.onDidRemoveGroup;
     Object.defineProperty(DockviewApi.prototype, "onDidActivePanelChange", {
+        /**
+         * Invoked when the active panel changes. May be undefined if no panel is active.
+         */
         get: function () {
@@ -519,2 +744,5 @@ return this.component.onDidActivePanelChange;
     Object.defineProperty(DockviewApi.prototype, "onDidAddPanel", {
+        /**
+         * Invoked when a panel is added. May be called multiple times when moving panels.
+         */
         get: function () {
@@ -527,2 +755,5 @@ return this.component.onDidAddPanel;
     Object.defineProperty(DockviewApi.prototype, "onDidRemovePanel", {
+        /**
+         * Invoked when a panel is removed. May be called multiple times when moving panels.
+         */
         get: function () {
@@ -535,2 +766,5 @@ return this.component.onDidRemovePanel;
     Object.defineProperty(DockviewApi.prototype, "onDidLayoutFromJSON", {
+        /**
+         * Invoked after a layout is deserialzied using the `fromJSON` method.
+         */
         get: function () {
@@ -543,2 +777,5 @@ return this.component.onDidLayoutFromJSON;
     Object.defineProperty(DockviewApi.prototype, "onDidLayoutChange", {
+        /**
+         * Invoked when any layout change occures, an aggregation of many events.
+         */
         get: function () {
@@ -551,2 +788,5 @@ return this.component.onDidLayoutChange;
     Object.defineProperty(DockviewApi.prototype, "onDidDrop", {
+        /**
+         * Invoked when a Drag'n'Drop event occurs that the component was unable to handle. Exposed for custom Drag'n'Drop functionality.
+         */
         get: function () {
@@ -558,3 +798,26 @@ return this.component.onDidDrop;
     });
+    Object.defineProperty(DockviewApi.prototype, "onWillDragGroup", {
+        /**
+         * Invoked before a group is dragged. Exposed for custom Drag'n'Drop functionality.
+         */
+        get: function () {
+            return this.component.onWillDragGroup;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewApi.prototype, "onWillDragPanel", {
+        /**
+         * Invoked before a panel is dragged. Exposed for custom Drag'n'Drop functionality.
+         */
+        get: function () {
+            return this.component.onWillDragPanel;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(DockviewApi.prototype, "panels", {
+        /**
+         * All panel objects.
+         */
         get: function () {
@@ -567,2 +830,5 @@ return this.component.panels;
     Object.defineProperty(DockviewApi.prototype, "groups", {
+        /**
+         * All group objects.
+         */
         get: function () {
@@ -575,2 +841,5 @@ return this.component.groups;
     Object.defineProperty(DockviewApi.prototype, "activePanel", {
+        /**
+         *  Active panel object.
+         */
         get: function () {
@@ -583,2 +852,5 @@ return this.component.activePanel;
     Object.defineProperty(DockviewApi.prototype, "activeGroup", {
+        /**
+         * Active group object.
+         */
         get: function () {
@@ -590,8 +862,17 @@ return this.component.activeGroup;
     });
+    /**
+     *  Focus the component. Will try to focus an active panel if one exists.
+     */
     DockviewApi.prototype.focus = function () {
         this.component.focus();
     };
+    /**
+     * Get a panel object given a `string` id. May return `undefined`.
+     */
     DockviewApi.prototype.getPanel = function (id) {
         return this.component.getGroupPanel(id);
     };
+    /**
+     * Force resize the component to an exact width and height. Read about auto-resizing before using.
+     */
     DockviewApi.prototype.layout = function (width, height, force) {
@@ -601,38 +882,74 @@ if (force === void 0) { force = false; }
     };
+    /**
+     * Add a panel and return the created object.
+     */
     DockviewApi.prototype.addPanel = function (options) {
         return this.component.addPanel(options);
     };
+    /**
+     * Remove a panel given the panel object.
+     */
     DockviewApi.prototype.removePanel = function (panel) {
         this.component.removePanel(panel);
     };
+    /**
+     * Add a group and return the created object.
+     */
     DockviewApi.prototype.addGroup = function (options) {
         return this.component.addGroup(options);
     };
-    DockviewApi.prototype.moveToNext = function (options) {
-        this.component.moveToNext(options);
-    };
-    DockviewApi.prototype.moveToPrevious = function (options) {
-        this.component.moveToPrevious(options);
-    };
+    /**
+     * Close all groups and panels.
+     */
     DockviewApi.prototype.closeAllGroups = function () {
         return this.component.closeAllGroups();
     };
+    /**
+     * Remove a group and any panels within the group.
+     */
     DockviewApi.prototype.removeGroup = function (group) {
         this.component.removeGroup(group);
     };
+    /**
+     * Get a group object given a `string` id. May return undefined.
+     */
     DockviewApi.prototype.getGroup = function (id) {
         return this.component.getPanel(id);
     };
+    /**
+     * Add a floating group
+     */
     DockviewApi.prototype.addFloatingGroup = function (item, coord) {
         return this.component.addFloatingGroup(item, coord);
     };
+    /**
+     * Create a component from a serialized object.
+     */
     DockviewApi.prototype.fromJSON = function (data) {
         this.component.fromJSON(data);
     };
+    /**
+     * Create a serialized object of the current component.
+     */
     DockviewApi.prototype.toJSON = function () {
         return this.component.toJSON();
     };
+    /**
+     * Reset the component back to an empty and default state.
+     */
     DockviewApi.prototype.clear = function () {
         this.component.clear();
     };
+    /**
+     * Move the focus progmatically to the next panel or group.
+     */
+    DockviewApi.prototype.moveToNext = function (options) {
+        this.component.moveToNext(options);
+    };
+    /**
+     * Move the focus progmatically to the previous panel or group.
+     */
+    DockviewApi.prototype.moveToPrevious = function (options) {
+        this.component.moveToPrevious(options);
+    };
     return DockviewApi;
@@ -639,0 +956,0 @@ }());

dist/cjs/api/dockviewGroupPanelApi.d.ts

@@ -0,0 +0,0 @@ import { Position } from '../dnd/droptarget';

dist/cjs/api/dockviewGroupPanelApi.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/api/dockviewPanelApi.d.ts

@@ -0,0 +0,0 @@ import { Emitter, Event } from '../events';

dist/cjs/api/dockviewPanelApi.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/api/gridviewPanelApi.d.ts

@@ -0,0 +0,0 @@ import { Emitter, Event } from '../events';

dist/cjs/api/gridviewPanelApi.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/api/panelApi.d.ts

@@ -0,0 +0,0 @@ import { Emitter, Event } from '../events';

dist/cjs/api/panelApi.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/api/paneviewPanelApi.d.ts

@@ -0,0 +0,0 @@ import { Emitter, Event } from '../events';

dist/cjs/api/paneviewPanelApi.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/api/splitviewPanelApi.d.ts

@@ -0,0 +0,0 @@ import { Emitter, Event } from '../events';

dist/cjs/api/splitviewPanelApi.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/array.d.ts

@@ -0,0 +0,0 @@ export declare function tail<T>(arr: T[]): [T[], T];

dist/cjs/array.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/dnd/abstractDragHandler.d.ts

@@ -7,5 +7,5 @@ import { CompositeDisposable, IDisposable } from '../lifecycle';
     private readonly _onDragStart;
-    readonly onDragStart: import("../events").Event<void>;
+    readonly onDragStart: import("../events").Event<DragEvent>;
     constructor(el: HTMLElement);
-    abstract getData(dataTransfer?: DataTransfer | null): IDisposable;
+    abstract getData(event: DragEvent): IDisposable;
     protected isCancelled(_event: DragEvent): boolean;
@@ -12,0 +12,0 @@ private configure;

dist/cjs/dnd/abstractDragHandler.js

@@ -78,3 +78,3 @@ "use strict";
             var e_1, _a;
-            if (_this.isCancelled(event)) {
+            if (event.defaultPrevented || _this.isCancelled(event)) {
                 event.preventDefault();
@@ -117,15 +117,19 @@ return;
             setTimeout(function () { return _this.el.classList.remove('dv-dragged'); }, 0);
-            _this.dataDisposable.value = _this.getData(event.dataTransfer);
+            _this.dataDisposable.value = _this.getData(event);
+            _this._onDragStart.fire(event);
             if (event.dataTransfer) {
                 event.dataTransfer.effectAllowed = 'move';
-                /**
-                 * Although this is not used by dockview many third party dnd libraries will check
-                 * dataTransfer.types to determine valid drag events.
-                 *
-                 * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
-                 * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
-                 * dnd logic. You can see the code at
-                 * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
-                 */
-                event.dataTransfer.setData('text/plain', '__dockview_internal_drag_event__');
+                var hasData = event.dataTransfer.items.length > 0;
+                if (!hasData) {
+                    /**
+                     * Although this is not used by dockview many third party dnd libraries will check
+                     * dataTransfer.types to determine valid drag events.
+                     *
+                     * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
+                     * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
+                     * dnd logic. You can see the code at
+                     * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
+                     */
+                    event.dataTransfer.setData('text/plain', '__dockview_internal_drag_event__');
+                }
             }
@@ -132,0 +136,0 @@ }), (0, events_1.addDisposableListener)(this.el, 'dragend', function () {

dist/cjs/dnd/dataTransfer.d.ts

@@ -0,0 +0,0 @@ declare class TransferObject {

dist/cjs/dnd/dataTransfer.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/dnd/dnd.d.ts

@@ -0,0 +0,0 @@ import { CompositeDisposable } from '../lifecycle';

dist/cjs/dnd/dnd.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/dnd/droptarget.d.ts

@@ -0,0 +0,0 @@ import { Event } from '../events';

dist/cjs/dnd/droptarget.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/dnd/ghost.d.ts

 export declare function addGhostImage(dataTransfer: DataTransfer, ghostElement: HTMLElement): void;
 //# sourceMappingURL=ghost.d.ts.map

dist/cjs/dnd/ghost.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/dnd/groupDragHandler.d.ts

@@ -0,1 +1,2 @@
+import { DockviewComponent } from '../dockview/dockviewComponent';
 import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
@@ -5,9 +6,9 @@ import { IDisposable } from '../lifecycle';
 export declare class GroupDragHandler extends DragHandler {
-    private readonly accessorId;
+    private readonly accessor;
     private readonly group;
     private readonly panelTransfer;
-    constructor(element: HTMLElement, accessorId: string, group: DockviewGroupPanel);
+    constructor(element: HTMLElement, accessor: DockviewComponent, group: DockviewGroupPanel);
     isCancelled(_event: DragEvent): boolean;
-    getData(dataTransfer: DataTransfer | null): IDisposable;
+    getData(dragEvent: DragEvent): IDisposable;
 }
 //# sourceMappingURL=groupDragHandler.d.ts.map

dist/cjs/dnd/groupDragHandler.js

@@ -26,5 +26,5 @@ "use strict";
     __extends(GroupDragHandler, _super);
-    function GroupDragHandler(element, accessorId, group) {
+    function GroupDragHandler(element, accessor, group) {
         var _this = _super.call(this, element) || this;
-        _this.accessorId = accessorId;
+        _this.accessor = accessor;
         _this.group = group;
@@ -50,5 +50,6 @@ _this.panelTransfer = dataTransfer_1.LocalSelectionTransfer.getInstance();
     };
-    GroupDragHandler.prototype.getData = function (dataTransfer) {
+    GroupDragHandler.prototype.getData = function (dragEvent) {
         var _this = this;
-        this.panelTransfer.setData([new dataTransfer_1.PanelTransfer(this.accessorId, this.group.id, null)], dataTransfer_1.PanelTransfer.prototype);
+        var dataTransfer = dragEvent.dataTransfer;
+        this.panelTransfer.setData([new dataTransfer_1.PanelTransfer(this.accessor.id, this.group.id, null)], dataTransfer_1.PanelTransfer.prototype);
         var style = window.getComputedStyle(this.el);
@@ -55,0 +56,0 @@ var bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');

dist/cjs/dnd/overlay.d.ts

@@ -12,2 +12,4 @@ import { Event } from '../events';
     private static MINIMUM_WIDTH;
+    set minimumInViewportWidth(value: number | undefined);
+    set minimumInViewportHeight(value: number | undefined);
     constructor(options: {
@@ -14,0 +16,0 @@ height: number;

dist/cjs/dnd/overlay.js

@@ -101,2 +101,16 @@ "use strict";
     }
+    Object.defineProperty(Overlay.prototype, "minimumInViewportWidth", {
+        set: function (value) {
+            this.options.minimumInViewportWidth = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Overlay.prototype, "minimumInViewportHeight", {
+        set: function (value) {
+            this.options.minimumInViewportHeight = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Overlay.prototype.setBounds = function (bounds) {
@@ -122,3 +136,5 @@ if (bounds === void 0) { bounds = {}; }
         // a minimum height of minimumViewportHeight must be inside the viewport
-        var yOffset = Math.max(0, this.getMinimumHeight(overlayRect.height));
+        var yOffset = typeof this.options.minimumInViewportHeight === 'number'
+            ? Math.max(0, this.getMinimumHeight(overlayRect.height))
+            : 0;
         var left = (0, math_1.clamp)(overlayRect.left - containerRect.left, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
@@ -276,8 +292,7 @@ var top = (0, math_1.clamp)(overlayRect.top - containerRect.top, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
                 var width = undefined;
-                var that = _this;
-                function moveTop() {
+                var moveTop = function () {
                     top = (0, math_1.clamp)(y, -Number.MAX_VALUE, startPosition.originalY +
                         startPosition.originalHeight >
                         containerRect.height
-                        ? that.getMinimumHeight(containerRect.height)
+                        ? _this.getMinimumHeight(containerRect.height)
                         : Math.max(0, startPosition.originalY +
@@ -290,17 +305,19 @@ startPosition.originalHeight -
                             top;
-                }
-                function moveBottom() {
+                };
+                var moveBottom = function () {
                     top =
                         startPosition.originalY -
                             startPosition.originalHeight;
-                    height = (0, math_1.clamp)(y - top, top < 0 && that.options.minimumInViewportHeight
+                    height = (0, math_1.clamp)(y - top, top < 0 &&
+                        typeof _this.options
+                            .minimumInViewportHeight === 'number'
                         ? -top +
-                            that.options.minimumInViewportHeight
+                            _this.options.minimumInViewportHeight
                         : Overlay.MINIMUM_HEIGHT, Number.MAX_VALUE);
-                }
-                function moveLeft() {
+                };
+                var moveLeft = function () {
                     left = (0, math_1.clamp)(x, -Number.MAX_VALUE, startPosition.originalX +
                         startPosition.originalWidth >
                         containerRect.width
-                        ? that.getMinimumWidth(containerRect.width)
+                        ? _this.getMinimumWidth(containerRect.width)
                         : Math.max(0, startPosition.originalX +
@@ -313,12 +330,14 @@ startPosition.originalWidth -
                             left;
-                }
-                function moveRight() {
+                };
+                var moveRight = function () {
                     left =
                         startPosition.originalX -
                             startPosition.originalWidth;
-                    width = (0, math_1.clamp)(x - left, left < 0 && that.options.minimumInViewportWidth
+                    width = (0, math_1.clamp)(x - left, left < 0 &&
+                        typeof _this.options
+                            .minimumInViewportWidth === 'number'
                         ? -left +
-                            that.options.minimumInViewportWidth
+                            _this.options.minimumInViewportWidth
                         : Overlay.MINIMUM_WIDTH, Number.MAX_VALUE);
-                }
+                };
                 switch (direction) {
@@ -325,0 +344,0 @@ case 'top':

dist/cjs/dockview/components/panel/content.d.ts

@@ -0,0 +0,0 @@ import { CompositeDisposable, IDisposable } from '../../../lifecycle';

dist/cjs/dockview/components/panel/content.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/dockview/components/tab/defaultTab.d.ts

@@ -0,0 +0,0 @@ import { CompositeDisposable } from '../../../lifecycle';

dist/cjs/dockview/components/tab/defaultTab.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/dockview/components/tab/tab.d.ts

@@ -7,4 +7,5 @@ import { Event } from '../../../events';
 import { DroptargetEvent } from '../../../dnd/droptarget';
+import { IDockviewPanel } from '../../dockviewPanel';
 export interface ITab extends IDisposable {
-    readonly panelId: string;
+    readonly panel: IDockviewPanel;
     readonly element: HTMLElement;
@@ -17,3 +18,3 @@ setContent: (element: ITabRenderer) => void;
 export declare class Tab extends CompositeDisposable implements ITab {
-    readonly panelId: string;
+    readonly panel: IDockviewPanel;
     private readonly accessor;
@@ -23,3 +24,3 @@ private readonly group;
     private readonly droptarget;
-    private content?;
+    private content;
     private readonly _onChanged;
@@ -29,4 +30,6 @@ readonly onChanged: Event<MouseEvent>;
     readonly onDrop: Event<DroptargetEvent>;
+    private readonly _onDragStart;
+    readonly onDragStart: Event<DragEvent>;
     get element(): HTMLElement;
-    constructor(panelId: string, accessor: DockviewComponent, group: DockviewGroupPanel);
+    constructor(panel: IDockviewPanel, accessor: DockviewComponent, group: DockviewGroupPanel);
     setActive(isActive: boolean): void;
@@ -33,0 +36,0 @@ setContent(part: ITabRenderer): void;

dist/cjs/dockview/components/tab/tab.js

@@ -26,9 +26,31 @@ "use strict";
 var abstractDragHandler_1 = require("../../../dnd/abstractDragHandler");
+var TabDragHandler = /** @class */ (function (_super) {
+    __extends(TabDragHandler, _super);
+    function TabDragHandler(element, accessor, group, panel) {
+        var _this = _super.call(this, element) || this;
+        _this.accessor = accessor;
+        _this.group = group;
+        _this.panel = panel;
+        _this.panelTransfer = dataTransfer_1.LocalSelectionTransfer.getInstance();
+        return _this;
+    }
+    TabDragHandler.prototype.getData = function (event) {
+        var _this = this;
+        this.panelTransfer.setData([new dataTransfer_1.PanelTransfer(this.accessor.id, this.group.id, this.panel.id)], dataTransfer_1.PanelTransfer.prototype);
+        return {
+            dispose: function () {
+                _this.panelTransfer.clearData(dataTransfer_1.PanelTransfer.prototype);
+            },
+        };
+    };
+    return TabDragHandler;
+}(abstractDragHandler_1.DragHandler));
 var Tab = /** @class */ (function (_super) {
     __extends(Tab, _super);
-    function Tab(panelId, accessor, group) {
+    function Tab(panel, accessor, group) {
         var _this = _super.call(this) || this;
-        _this.panelId = panelId;
+        _this.panel = panel;
         _this.accessor = accessor;
         _this.group = group;
+        _this.content = undefined;
         _this._onChanged = new events_1.Emitter();
@@ -38,2 +60,4 @@ _this.onChanged = _this._onChanged.event;
         _this.onDrop = _this._onDropped.event;
+        _this._onDragStart = new events_1.Emitter();
+        _this.onDragStart = _this._onDragStart.event;
         _this._element = document.createElement('div');
@@ -44,26 +68,3 @@ _this._element.className = 'tab';
         (0, dom_1.toggleClass)(_this.element, 'inactive-tab', true);
-        _this.addDisposables(_this._onChanged, _this._onDropped, new (/** @class */ (function (_super) {
-            __extends(Handler, _super);
-            function Handler() {
-                var _this = _super !== null && _super.apply(this, arguments) || this;
-                _this.panelTransfer = dataTransfer_1.LocalSelectionTransfer.getInstance();
-                return _this;
-            }
-            Handler.prototype.getData = function () {
-                var _this = this;
-                this.panelTransfer.setData([new dataTransfer_1.PanelTransfer(accessor.id, group.id, panelId)], dataTransfer_1.PanelTransfer.prototype);
-                return {
-                    dispose: function () {
-                        _this.panelTransfer.clearData(dataTransfer_1.PanelTransfer.prototype);
-                    },
-                };
-            };
-            return Handler;
-        }(abstractDragHandler_1.DragHandler)))(_this._element));
-        _this.addDisposables((0, events_1.addDisposableListener)(_this._element, 'mousedown', function (event) {
-            if (event.defaultPrevented) {
-                return;
-            }
-            _this._onChanged.fire(event);
-        }));
+        var dragHandler = new TabDragHandler(_this._element, _this.accessor, _this.group, _this.panel);
         _this.droptarget = new droptarget_1.Droptarget(_this._element, {
@@ -82,3 +83,3 @@ acceptedTargetZones: ['center'],
                     }
-                    return _this.panelId !== data.panelId;
+                    return _this.panel.id !== data.panelId;
                 }
@@ -88,3 +89,10 @@ return _this.group.model.canDisplayOverlay(event, position, types_1.DockviewDropTargets.Tab);
         });
-        _this.addDisposables(_this.droptarget.onDrop(function (event) {
+        _this.addDisposables(_this._onChanged, _this._onDropped, _this._onDragStart, dragHandler.onDragStart(function (event) {
+            _this._onDragStart.fire(event);
+        }), dragHandler, (0, events_1.addDisposableListener)(_this._element, 'mousedown', function (event) {
+            if (event.defaultPrevented) {
+                return;
+            }
+            _this._onChanged.fire(event);
+        }), _this.droptarget.onDrop(function (event) {
             _this._onDropped.fire(event);
@@ -91,0 +99,0 @@ }), _this.droptarget);

dist/cjs/dockview/components/titlebar/tabsContainer.d.ts

@@ -11,2 +11,10 @@ import { IDisposable, CompositeDisposable } from '../../../lifecycle';
 }
+export interface TabDragEvent {
+    readonly nativeEvent: DragEvent;
+    readonly panel: IDockviewPanel;
+}
+export interface GroupDragEvent {
+    readonly nativeEvent: DragEvent;
+    readonly group: DockviewGroupPanel;
+}
 export interface ITabsContainer extends IDisposable {
@@ -16,5 +24,8 @@ readonly element: HTMLElement;
     readonly size: number;
+    hidden: boolean;
     delete: (id: string) => void;
     indexOf: (id: string) => number;
     onDrop: Event<TabDropIndexEvent>;
+    onTabDragStart: Event<TabDragEvent>;
+    onGroupDragStart: Event<GroupDragEvent>;
     setActive: (isGroupActive: boolean) => void;
@@ -27,3 +38,3 @@ setActivePanel: (panel: IDockviewPanel) => void;
     setLeftActionsElement(element: HTMLElement | undefined): void;
-    hidden: boolean;
+    setPrefixActionsElement(element: HTMLElement | undefined): void;
     show(): void;
@@ -39,2 +50,3 @@ hide(): void;
     private readonly leftActionsContainer;
+    private readonly preActionsContainer;
     private readonly voidContainer;
@@ -45,5 +57,10 @@ private tabs;
     private leftActions;
+    private preActions;
     private _hidden;
     private readonly _onDrop;
     readonly onDrop: Event<TabDropIndexEvent>;
+    private readonly _onTabDragStart;
+    readonly onTabDragStart: Event<TabDragEvent>;
+    private readonly _onGroupDragStart;
+    readonly onGroupDragStart: Event<GroupDragEvent>;
     get panels(): string[];
@@ -57,2 +74,3 @@ get size(): number;
     setLeftActionsElement(element: HTMLElement | undefined): void;
+    setPrefixActionsElement(element: HTMLElement | undefined): void;
     get element(): HTMLElement;
@@ -59,0 +77,0 @@ isActive(tab: ITab): boolean;

dist/cjs/dockview/components/titlebar/tabsContainer.js

@@ -71,3 +71,7 @@ "use strict";
         _this.onDrop = _this._onDrop.event;
-        _this.addDisposables(_this._onDrop);
+        _this._onTabDragStart = new events_1.Emitter();
+        _this.onTabDragStart = _this._onTabDragStart.event;
+        _this._onGroupDragStart = new events_1.Emitter();
+        _this.onGroupDragStart = _this._onGroupDragStart.event;
+        _this.addDisposables(_this._onDrop, _this._onTabDragStart, _this._onGroupDragStart);
         _this._element = document.createElement('div');
@@ -89,5 +93,8 @@ _this._element.className = 'tabs-and-actions-container';
         _this.leftActionsContainer.className = 'left-actions-container';
+        _this.preActionsContainer = document.createElement('div');
+        _this.preActionsContainer.className = 'pre-actions-container';
         _this.tabContainer = document.createElement('div');
         _this.tabContainer.className = 'tabs-container';
         _this.voidContainer = new voidContainer_1.VoidContainer(_this.accessor, _this.group);
+        _this._element.appendChild(_this.preActionsContainer);
         _this._element.appendChild(_this.tabContainer);
@@ -97,3 +104,8 @@ _this._element.appendChild(_this.leftActionsContainer);
         _this._element.appendChild(_this.rightActionsContainer);
-        _this.addDisposables(_this.voidContainer, _this.voidContainer.onDrop(function (event) {
+        _this.addDisposables(_this.voidContainer, _this.voidContainer.onDragStart(function (event) {
+            _this._onGroupDragStart.fire({
+                nativeEvent: event,
+                group: _this.group,
+            });
+        }), _this.voidContainer.onDrop(function (event) {
             _this._onDrop.fire({
@@ -129,3 +141,3 @@ event: event.nativeEvent,
         get: function () {
-            return this.tabs.map(function (_) { return _.value.panelId; });
+            return this.tabs.map(function (_) { return _.value.panel.id; });
         },
@@ -187,2 +199,15 @@ enumerable: false,
     };
+    TabsContainer.prototype.setPrefixActionsElement = function (element) {
+        if (this.preActions === element) {
+            return;
+        }
+        if (this.preActions) {
+            this.preActions.remove();
+            this.preActions = undefined;
+        }
+        if (element) {
+            this.preActionsContainer.appendChild(element);
+            this.preActions = element;
+        }
+    };
     Object.defineProperty(TabsContainer.prototype, "element", {
@@ -200,3 +225,3 @@ get: function () {
     TabsContainer.prototype.indexOf = function (id) {
-        return this.tabs.findIndex(function (tab) { return tab.value.panelId === id; });
+        return this.tabs.findIndex(function (tab) { return tab.value.panel.id === id; });
     };
@@ -220,3 +245,3 @@ TabsContainer.prototype.setActive = function (_isGroupActive) {
     TabsContainer.prototype.delete = function (id) {
-        var index = this.tabs.findIndex(function (tab) { return tab.value.panelId === id; });
+        var index = this.tabs.findIndex(function (tab) { return tab.value.panel.id === id; });
         var tabToRemove = this.tabs.splice(index, 1)[0];
@@ -230,3 +255,3 @@ var value = tabToRemove.value, disposable = tabToRemove.disposable;
         this.tabs.forEach(function (tab) {
-            var isActivePanel = panel.id === tab.value.panelId;
+            var isActivePanel = panel.id === tab.value.panel.id;
             tab.value.setActive(isActivePanel);
@@ -239,11 +264,13 @@ });
         if (index === void 0) { index = this.tabs.length; }
-        if (this.tabs.find(function (tab) { return tab.value.panelId === panel.id; })) {
+        if (this.tabs.find(function (tab) { return tab.value.panel.id === panel.id; })) {
             return;
         }
-        var tabToAdd = new tab_1.Tab(panel.id, this.accessor, this.group);
+        var tab = new tab_1.Tab(panel, this.accessor, this.group);
         if (!((_a = panel.view) === null || _a === void 0 ? void 0 : _a.tab)) {
             throw new Error('invalid header component');
         }
-        tabToAdd.setContent(panel.view.tab);
-        var disposable = lifecycle_1.CompositeDisposable.from(tabToAdd.onChanged(function (event) {
+        tab.setContent(panel.view.tab);
+        var disposable = new lifecycle_1.CompositeDisposable(tab.onDragStart(function (event) {
+            _this._onTabDragStart.fire({ nativeEvent: event, panel: panel });
+        }), tab.onChanged(function (event) {
             var _a;
@@ -256,4 +283,4 @@ var isFloatingGroupsEnabled = !_this.accessor.options.disableFloatingGroups;
                 event.preventDefault();
-                var panel_1 = _this.accessor.getGroupPanel(tabToAdd.panelId);
-                var _b = tabToAdd.element.getBoundingClientRect(), top_2 = _b.top, left = _b.left;
+                var panel_1 = _this.accessor.getGroupPanel(tab.panel.id);
+                var _b = tab.element.getBoundingClientRect(), top_2 = _b.top, left = _b.left;
                 var _c = _this.accessor.element.getBoundingClientRect(), rootTop = _c.top, rootLeft = _c.left;
@@ -275,9 +302,9 @@ _this.accessor.addFloatingGroup(panel_1, {
             });
-        }), tabToAdd.onDrop(function (event) {
+        }), tab.onDrop(function (event) {
             _this._onDrop.fire({
                 event: event.nativeEvent,
-                index: _this.tabs.findIndex(function (x) { return x.value === tabToAdd; }),
+                index: _this.tabs.findIndex(function (x) { return x.value === tab; }),
             });
         }));
-        var value = { value: tabToAdd, disposable: disposable };
+        var value = { value: tab, disposable: disposable };
         this.addTab(value, index);
@@ -284,0 +311,0 @@ };

dist/cjs/dockview/components/titlebar/voidContainer.d.ts

@@ -13,2 +13,4 @@ import { DroptargetEvent } from '../../../dnd/droptarget';
     readonly onDrop: Event<DroptargetEvent>;
+    private readonly _onDragStart;
+    readonly onDragStart: Event<DragEvent>;
     get element(): HTMLElement;
@@ -15,0 +17,0 @@ constructor(accessor: DockviewComponent, group: DockviewGroupPanel);

dist/cjs/dockview/components/titlebar/voidContainer.js

@@ -34,2 +34,4 @@ "use strict";
         _this.onDrop = _this._onDrop.event;
+        _this._onDragStart = new events_1.Emitter();
+        _this.onDragStart = _this._onDragStart.event;
         _this._element = document.createElement('div');
@@ -39,6 +41,6 @@ _this._element.className = 'void-container';
         _this._element.draggable = true;
-        _this.addDisposables(_this._onDrop, (0, events_1.addDisposableListener)(_this._element, 'click', function () {
+        _this.addDisposables(_this._onDrop, _this._onDragStart, (0, events_1.addDisposableListener)(_this._element, 'click', function () {
             _this.accessor.doSetGroupActive(_this.group);
         }));
-        var handler = new groupDragHandler_1.GroupDragHandler(_this._element, accessor.id, group);
+        var handler = new groupDragHandler_1.GroupDragHandler(_this._element, accessor, group);
         _this.voidDropTarget = new droptarget_1.Droptarget(_this._element, {
@@ -61,3 +63,5 @@ acceptedTargetZones: ['center'],
         });
-        _this.addDisposables(handler, _this.voidDropTarget.onDrop(function (event) {
+        _this.addDisposables(handler, handler.onDragStart(function (event) {
+            _this._onDragStart.fire(event);
+        }), _this.voidDropTarget.onDrop(function (event) {
             _this._onDrop.fire(event);
@@ -64,0 +68,0 @@ }), _this.voidDropTarget);

dist/cjs/dockview/components/watermark/watermark.d.ts

@@ -0,0 +0,0 @@ import { IWatermarkRenderer, WatermarkRendererInitParameters } from '../../types';

dist/cjs/dockview/components/watermark/watermark.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/dockview/deserializer.d.ts

@@ -0,0 +0,0 @@ import { GroupviewPanelState } from './types';

dist/cjs/dockview/deserializer.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/dockview/dockviewComponent.d.ts

@@ -14,2 +14,3 @@ import { SerializedGridObject } from '../gridview/gridview';
 import { DockviewFloatingGroupPanel, IDockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel';
+import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContainer';
 export interface PanelReference {
@@ -43,3 +44,3 @@ update: (event: {
 }
-export type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent' | 'defaultTabComponent' | 'createLeftHeaderActionsElement' | 'createRightHeaderActionsElement' | 'disableFloatingGroups' | 'floatingGroupsAlwaysWithinViewport'>;
+export type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent' | 'defaultTabComponent' | 'createLeftHeaderActionsElement' | 'createRightHeaderActionsElement' | 'createPrefixHeaderActionsElement' | 'disableFloatingGroups' | 'floatingGroupBounds'>;
 export interface DockviewDropEvent extends GroupviewDropEvent {
@@ -77,2 +78,4 @@ api: DockviewApi;
     readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>;
+    readonly onWillDragPanel: Event<TabDragEvent>;
+    readonly onWillDragGroup: Event<GroupDragEvent>;
     addFloatingGroup(item: IDockviewPanel | DockviewGroupPanel, coord?: {
@@ -89,2 +92,6 @@ x: number;
     private watermark;
+    private readonly _onWillDragPanel;
+    readonly onWillDragPanel: Event<TabDragEvent>;
+    private readonly _onWillDragGroup;
+    readonly onWillDragGroup: Event<GroupDragEvent>;
     private readonly _onDidDrop;
@@ -156,4 +163,3 @@ readonly onDidDrop: Event<DockviewDropEvent>;
     private findGroup;
-    dispose(): void;
 }
 //# sourceMappingURL=dockviewComponent.d.ts.map

dist/cjs/dockview/dockviewComponent.js

@@ -87,2 +87,63 @@ "use strict";
 var dockviewFloatingGroupPanel_1 = require("./dockviewFloatingGroupPanel");
+var DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
+function typeValidate3(data, path) {
+    if (typeof data.id !== 'string') {
+        throw new Error("".concat(path, ".id must be a string"));
+    }
+    if (typeof data.activeView !== 'string' ||
+        typeof data.activeView !== 'undefined') {
+        throw new Error("".concat(path, ".activeView must be a string of undefined"));
+    }
+}
+function typeValidate2(data, path) {
+    if (typeof data.size !== 'number' && typeof data.size !== 'undefined') {
+        throw new Error("".concat(path, ".size must be a number or undefined"));
+    }
+    if (typeof data.visible !== 'boolean' &&
+        typeof data.visible !== 'undefined') {
+        throw new Error("".concat(path, ".visible must be a boolean or undefined"));
+    }
+    if (data.type === 'leaf') {
+        if (typeof data.data !== 'object' ||
+            data.data === null ||
+            Array.isArray(data.data)) {
+            throw new Error('object must be a non-null object');
+        }
+        typeValidate3(data.data, "".concat(path, ".data"));
+    }
+    else if (data.type === 'branch') {
+        if (!Array.isArray(data.data)) {
+            throw new Error("".concat(path, ".data must be an array"));
+        }
+    }
+    else {
+        throw new Error("".concat(path, ".type must be onew of {'branch', 'leaf'}"));
+    }
+}
+function typeValidate(data) {
+    if (typeof data !== 'object' || data === null) {
+        throw new Error('object must be a non-null object');
+    }
+    var grid = data.grid, panels = data.panels, activeGroup = data.activeGroup, floatingGroups = data.floatingGroups;
+    if (typeof grid !== 'object' || grid === null) {
+        throw new Error("'.grid' must be a non-null object");
+    }
+    if (typeof grid.height !== 'number') {
+        throw new Error("'.grid.height' must be a number");
+    }
+    if (typeof grid.width !== 'number') {
+        throw new Error("'.grid.width' must be a number");
+    }
+    if (typeof grid.root !== 'object' || grid.root === null) {
+        throw new Error("'.grid.root' must be a non-null object");
+    }
+    if (grid.root.type !== 'branch') {
+        throw new Error(".grid.root.type must be of type 'branch'");
+    }
+    if (grid.orientation !== splitview_1.Orientation.HORIZONTAL &&
+        grid.orientation !== splitview_1.Orientation.VERTICAL) {
+        throw new Error("'.grid.width' must be one of {".concat(splitview_1.Orientation.HORIZONTAL, ", ").concat(splitview_1.Orientation.VERTICAL, "}"));
+    }
+    typeValidate2(grid.root, '.grid.root');
+}
 var DockviewComponent = /** @class */ (function (_super) {
@@ -100,2 +161,6 @@ __extends(DockviewComponent, _super);
         _this.watermark = null;
+        _this._onWillDragPanel = new events_1.Emitter();
+        _this.onWillDragPanel = _this._onWillDragPanel.event;
+        _this._onWillDragGroup = new events_1.Emitter();
+        _this.onWillDragGroup = _this._onWillDragGroup.event;
         _this._onDidDrop = new events_1.Emitter();
@@ -113,3 +178,3 @@ _this.onDidDrop = _this._onDidDrop.event;
         (0, dom_1.toggleClass)(_this.gridview.element, 'dv-dockview', true);
-        _this.addDisposables(_this._onDidDrop, events_1.Event.any(_this.onDidAddGroup, _this.onDidRemoveGroup)(function () {
+        _this.addDisposables(_this._onWillDragPanel, _this._onWillDragGroup, _this._onDidActivePanelChange, _this._onDidAddPanel, _this._onDidRemovePanel, _this._onDidLayoutFromJSON, _this._onDidDrop, events_1.Event.any(_this.onDidAddGroup, _this.onDidRemoveGroup)(function () {
             _this.updateWatermark();
@@ -228,3 +293,3 @@ }), events_1.Event.any(_this.onDidAddPanel, _this.onDidRemovePanel, _this.onDidActivePanelChange)(function () {
         var _this = this;
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f;
         var group;
@@ -257,10 +322,8 @@ if (item instanceof dockviewPanel_1.DockviewPanel) {
             top: overlayTop,
-            minimumInViewportWidth: this.options
-                .floatingGroupsAlwaysWithinViewport
+            minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
                 ? undefined
-                : 100,
-            minimumInViewportHeight: this.options
-                .floatingGroupsAlwaysWithinViewport
+                : (_d = (_c = this.options.floatingGroupBounds) === null || _c === void 0 ? void 0 : _c.minimumWidthWithinViewport) !== null && _d !== void 0 ? _d : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
+            minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
                 ? undefined
-                : 100,
+                : (_f = (_e = this.options.floatingGroupBounds) === null || _e === void 0 ? void 0 : _e.minimumHeightWithinViewport) !== null && _f !== void 0 ? _f : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
         });
@@ -338,4 +401,8 @@ var el = group.element.querySelector('.void-container');
     DockviewComponent.prototype.updateOptions = function (options) {
+        var e_1, _a;
+        var _b, _c;
         var hasOrientationChanged = typeof options.orientation === 'string' &&
             this.gridview.orientation !== options.orientation;
+        var hasFloatingGroupOptionsChanged = options.floatingGroupBounds !== undefined &&
+            options.floatingGroupBounds !== this.options.floatingGroupBounds;
         this._options = __assign(__assign({}, this.options), options);
@@ -345,6 +412,38 @@ if (hasOrientationChanged) {
         }
+        if (hasFloatingGroupOptionsChanged) {
+            try {
+                for (var _d = __values(this.floatingGroups), _e = _d.next(); !_e.done; _e = _d.next()) {
+                    var group = _e.value;
+                    switch (this.options.floatingGroupBounds) {
+                        case 'boundedWithinViewport':
+                            group.overlay.minimumInViewportHeight = undefined;
+                            group.overlay.minimumInViewportWidth = undefined;
+                            break;
+                        case undefined:
+                            group.overlay.minimumInViewportHeight =
+                                DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
+                            group.overlay.minimumInViewportWidth =
+                                DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
+                            break;
+                        default:
+                            group.overlay.minimumInViewportHeight =
+                                (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumHeightWithinViewport;
+                            group.overlay.minimumInViewportWidth =
+                                (_c = this.options.floatingGroupBounds) === null || _c === void 0 ? void 0 : _c.minimumWidthWithinViewport;
+                    }
+                    group.overlay.setBounds({});
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        }
         this.layout(this.gridview.width, this.gridview.height, true);
     };
     DockviewComponent.prototype.layout = function (width, height, forceResize) {
-        var e_1, _a;
+        var e_2, _a;
         _super.prototype.layout.call(this, width, height, forceResize);
@@ -359,3 +458,3 @@ if (this.floatingGroups) {
             }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
             finally {
@@ -365,3 +464,3 @@ try {
                 }
-                finally { if (e_1) throw e_1.error; }
+                finally { if (e_2) throw e_2.error; }
             }
@@ -451,6 +550,9 @@ }
     DockviewComponent.prototype.fromJSON = function (data) {
-        var e_2, _a, e_3, _b;
+        var e_3, _a, e_4, _b, e_5, _c, e_6, _d, e_7, _e, e_8, _f;
         var _this = this;
-        var _c;
+        var _g;
         this.clear();
+        if (typeof data !== 'object' || data === null) {
+            throw new Error('serialized layout must be a non-null object');
+        }
         var grid = data.grid, panels = data.panels, activeGroup = data.activeGroup;
@@ -460,19 +562,42 @@ if (grid.root.type !== 'branch' || !Array.isArray(grid.root.data)) {
         }
-        // take note of the existing dimensions
-        var width = this.width;
-        var height = this.height;
-        var createGroupFromSerializedState = function (data) {
-            var e_4, _a;
-            var id = data.id, locked = data.locked, hideHeader = data.hideHeader, views = data.views, activeView = data.activeView;
-            var group = _this.createGroup({
-                id: id,
-                locked: !!locked,
-                hideHeader: !!hideHeader,
-            });
-            _this._onDidAddGroup.fire(group);
-            try {
-                for (var views_1 = __values(views), views_1_1 = views_1.next(); !views_1_1.done; views_1_1 = views_1.next()) {
-                    var child = views_1_1.value;
-                    var panel = _this._deserializer.fromJSON(panels[child], group);
-                    var isActive = typeof activeView === 'string' && activeView === panel.id;
+        try {
+            // take note of the existing dimensions
+            var width = this.width;
+            var height = this.height;
+            var createGroupFromSerializedState_1 = function (data) {
+                var e_9, _a;
+                var id = data.id, locked = data.locked, hideHeader = data.hideHeader, views = data.views, activeView = data.activeView;
+                if (typeof id !== 'string') {
+                    throw new Error('group id must be of type string');
+                }
+                var group = _this.createGroup({
+                    id: id,
+                    locked: !!locked,
+                    hideHeader: !!hideHeader,
+                });
+                var createdPanels = [];
+                try {
+                    for (var views_1 = __values(views), views_1_1 = views_1.next(); !views_1_1.done; views_1_1 = views_1.next()) {
+                        var child = views_1_1.value;
+                        /**
+                         * Run the deserializer step seperately since this may fail to due corrupted external state.
+                         * In running this section first we avoid firing lots of 'add' events in the event of a failure
+                         * due to a corruption of input data.
+                         */
+                        var panel = _this._deserializer.fromJSON(panels[child], group);
+                        createdPanels.push(panel);
+                    }
+                }
+                catch (e_9_1) { e_9 = { error: e_9_1 }; }
+                finally {
+                    try {
+                        if (views_1_1 && !views_1_1.done && (_a = views_1.return)) _a.call(views_1);
+                    }
+                    finally { if (e_9) throw e_9.error; }
+                }
+                _this._onDidAddGroup.fire(group);
+                for (var i = 0; i < views.length; i++) {
+                    var panel = createdPanels[i];
+                    var isActive = typeof activeView === 'string' &&
+                        activeView === panel.id;
                     group.model.openPanel(panel, {
@@ -483,62 +608,129 @@ skipSetPanelActive: !isActive,
                 }
+                if (!group.activePanel && group.panels.length > 0) {
+                    group.model.openPanel(group.panels[group.panels.length - 1], {
+                        skipSetGroupActive: true,
+                    });
+                }
+                return group;
+            };
+            this.gridview.deserialize(grid, {
+                fromJSON: function (node) {
+                    return createGroupFromSerializedState_1(node.data);
+                },
+            });
+            this.layout(width, height, true);
+            var serializedFloatingGroups = (_g = data.floatingGroups) !== null && _g !== void 0 ? _g : [];
+            try {
+                for (var serializedFloatingGroups_1 = __values(serializedFloatingGroups), serializedFloatingGroups_1_1 = serializedFloatingGroups_1.next(); !serializedFloatingGroups_1_1.done; serializedFloatingGroups_1_1 = serializedFloatingGroups_1.next()) {
+                    var serializedFloatingGroup = serializedFloatingGroups_1_1.value;
+                    var data_1 = serializedFloatingGroup.data, position = serializedFloatingGroup.position;
+                    var group = createGroupFromSerializedState_1(data_1);
+                    this.addFloatingGroup(group, {
+                        x: position.left,
+                        y: position.top,
+                        height: position.height,
+                        width: position.width,
+                    }, { skipRemoveGroup: true, inDragMode: false });
+                }
             }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (serializedFloatingGroups_1_1 && !serializedFloatingGroups_1_1.done && (_a = serializedFloatingGroups_1.return)) _a.call(serializedFloatingGroups_1);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
+            try {
+                for (var _h = __values(this.floatingGroups), _j = _h.next(); !_j.done; _j = _h.next()) {
+                    var floatingGroup = _j.value;
+                    floatingGroup.overlay.setBounds();
+                }
+            }
             catch (e_4_1) { e_4 = { error: e_4_1 }; }
             finally {
                 try {
-                    if (views_1_1 && !views_1_1.done && (_a = views_1.return)) _a.call(views_1);
+                    if (_j && !_j.done && (_b = _h.return)) _b.call(_h);
                 }
                 finally { if (e_4) throw e_4.error; }
             }
-            if (!group.activePanel && group.panels.length > 0) {
-                group.model.openPanel(group.panels[group.panels.length - 1], {
-                    skipSetGroupActive: true,
-                });
+            if (typeof activeGroup === 'string') {
+                var panel = this.getPanel(activeGroup);
+                if (panel) {
+                    this.doSetGroupActive(panel);
+                }
             }
-            return group;
-        };
-        this.gridview.deserialize(grid, {
-            fromJSON: function (node) {
-                return createGroupFromSerializedState(node.data);
-            },
-        });
-        this.layout(width, height, true);
-        var serializedFloatingGroups = (_c = data.floatingGroups) !== null && _c !== void 0 ? _c : [];
-        try {
-            for (var serializedFloatingGroups_1 = __values(serializedFloatingGroups), serializedFloatingGroups_1_1 = serializedFloatingGroups_1.next(); !serializedFloatingGroups_1_1.done; serializedFloatingGroups_1_1 = serializedFloatingGroups_1.next()) {
-                var serializedFloatingGroup = serializedFloatingGroups_1_1.value;
-                var data_1 = serializedFloatingGroup.data, position = serializedFloatingGroup.position;
-                var group = createGroupFromSerializedState(data_1);
-                this.addFloatingGroup(group, {
-                    x: position.left,
-                    y: position.top,
-                    height: position.height,
-                    width: position.width,
-                }, { skipRemoveGroup: true, inDragMode: false });
-            }
         }
-        catch (e_2_1) { e_2 = { error: e_2_1 }; }
-        finally {
+        catch (err) {
             try {
-                if (serializedFloatingGroups_1_1 && !serializedFloatingGroups_1_1.done && (_a = serializedFloatingGroups_1.return)) _a.call(serializedFloatingGroups_1);
+                /**
+                 * Takes all the successfully created groups and remove all of their panels.
+                 */
+                for (var _k = __values(this.groups), _l = _k.next(); !_l.done; _l = _k.next()) {
+                    var group = _l.value;
+                    try {
+                        for (var _m = (e_6 = void 0, __values(group.panels)), _o = _m.next(); !_o.done; _o = _m.next()) {
+                            var panel = _o.value;
+                            this.removePanel(panel, {
+                                removeEmptyGroup: false,
+                                skipDispose: false,
+                            });
+                        }
+                    }
+                    catch (e_6_1) { e_6 = { error: e_6_1 }; }
+                    finally {
+                        try {
+                            if (_o && !_o.done && (_d = _m.return)) _d.call(_m);
+                        }
+                        finally { if (e_6) throw e_6.error; }
+                    }
+                }
             }
-            finally { if (e_2) throw e_2.error; }
-        }
-        try {
-            for (var _d = __values(this.floatingGroups), _e = _d.next(); !_e.done; _e = _d.next()) {
-                var floatingGroup = _e.value;
-                floatingGroup.overlay.setBounds();
+            catch (e_5_1) { e_5 = { error: e_5_1 }; }
+            finally {
+                try {
+                    if (_l && !_l.done && (_c = _k.return)) _c.call(_k);
+                }
+                finally { if (e_5) throw e_5.error; }
             }
-        }
-        catch (e_3_1) { e_3 = { error: e_3_1 }; }
-        finally {
             try {
-                if (_e && !_e.done && (_b = _d.return)) _b.call(_d);
+                /**
+                 * To remove a group we cannot call this.removeGroup(...) since this makes assumptions about
+                 * the underlying HTMLElement existing in the Gridview.
+                 */
+                for (var _p = __values(this.groups), _q = _p.next(); !_q.done; _q = _p.next()) {
+                    var group = _q.value;
+                    group.dispose();
+                    this._groups.delete(group.id);
+                    this._onDidRemoveGroup.fire(group);
+                }
             }
-            finally { if (e_3) throw e_3.error; }
-        }
-        if (typeof activeGroup === 'string') {
-            var panel = this.getPanel(activeGroup);
-            if (panel) {
-                this.doSetGroupActive(panel);
+            catch (e_7_1) { e_7 = { error: e_7_1 }; }
+            finally {
+                try {
+                    if (_q && !_q.done && (_e = _p.return)) _e.call(_p);
+                }
+                finally { if (e_7) throw e_7.error; }
             }
+            try {
+                // iterate over a reassigned array since original array will be modified
+                for (var _r = __values(__spreadArray([], __read(this.floatingGroups), false)), _s = _r.next(); !_s.done; _s = _r.next()) {
+                    var floatingGroup = _s.value;
+                    floatingGroup.dispose();
+                }
+            }
+            catch (e_8_1) { e_8 = { error: e_8_1 }; }
+            finally {
+                try {
+                    if (_s && !_s.done && (_f = _r.return)) _f.call(_r);
+                }
+                finally { if (e_8) throw e_8.error; }
+            }
+            // fires clean-up events and clears the underlying HTML gridview.
+            this.clear();
+            /**
+             * even though we have cleaned-up we still want to inform the caller of their error
+             * and we'll do this through re-throwing the original error since afterall you would
+             * expect trying to load a corrupted layout to result in an error and not silently fail...
+             */
+            throw err;
         }
@@ -548,3 +740,3 @@ this._onDidLayoutFromJSON.fire();
     DockviewComponent.prototype.clear = function () {
-        var e_5, _a;
+        var e_10, _a;
         var groups = Array.from(this._groups.values()).map(function (_) { return _.value; });
@@ -560,3 +752,3 @@ var hasActiveGroup = !!this.activeGroup;
         }
-        catch (e_5_1) { e_5 = { error: e_5_1 }; }
+        catch (e_10_1) { e_10 = { error: e_10_1 }; }
         finally {
@@ -566,3 +758,3 @@ try {
             }
-            finally { if (e_5) throw e_5.error; }
+            finally { if (e_10) throw e_10.error; }
         }
@@ -578,3 +770,3 @@ if (hasActiveGroup) {
     DockviewComponent.prototype.closeAllGroups = function () {
-        var e_6, _a;
+        var e_11, _a;
         try {
@@ -587,3 +779,3 @@ for (var _b = __values(this._groups.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
         }
-        catch (e_6_1) { e_6 = { error: e_6_1 }; }
+        catch (e_11_1) { e_11 = { error: e_11_1 }; }
         finally {
@@ -593,3 +785,3 @@ try {
             }
-            finally { if (e_6) throw e_6.error; }
+            finally { if (e_11) throw e_11.error; }
         }
@@ -770,3 +962,3 @@ };
     DockviewComponent.prototype.removeGroup = function (group, options) {
-        var e_7, _a;
+        var e_12, _a;
         var _b;
@@ -783,3 +975,3 @@ var panels = __spreadArray([], __read(group.panels), false); // reassign since group panels will mutate
         }
-        catch (e_7_1) { e_7 = { error: e_7_1 }; }
+        catch (e_12_1) { e_12 = { error: e_12_1 }; }
         finally {
@@ -789,3 +981,3 @@ try {
             }
-            finally { if (e_7) throw e_7.error; }
+            finally { if (e_12) throw e_12.error; }
         }
@@ -800,2 +992,3 @@ this.doRemoveGroup(group, options);
                 this._groups.delete(group.id);
+                // TODO: fire group removed event?
             }
@@ -870,3 +1063,3 @@ floatingGroup.dispose();
     DockviewComponent.prototype.moveGroup = function (sourceGroup, referenceGroup, target) {
-        var e_8, _a;
+        var e_13, _a;
         if (sourceGroup) {
@@ -889,3 +1082,3 @@ if (!target || target === 'center') {
                 }
-                catch (e_8_1) { e_8 = { error: e_8_1 }; }
+                catch (e_13_1) { e_13 = { error: e_13_1 }; }
                 finally {
@@ -895,3 +1088,3 @@ try {
                     }
-                    finally { if (e_8) throw e_8.error; }
+                    finally { if (e_13) throw e_13.error; }
                 }
@@ -940,3 +1133,7 @@ }
         if (!this._groups.has(view.id)) {
-            var disposable = new lifecycle_1.CompositeDisposable(view.model.onMove(function (event) {
+            var disposable = new lifecycle_1.CompositeDisposable(view.model.onTabDragStart(function (event) {
+                _this._onWillDragPanel.fire(event);
+            }), view.model.onGroupDragStart(function (event) {
+                _this._onWillDragGroup.fire(event);
+            }), view.model.onMove(function (event) {
                 var groupId = event.groupId, itemId = event.itemId, target = event.target, index = event.index;
@@ -983,9 +1180,2 @@ _this.moveGroupOrPanel(view, groupId, itemId, target, index);
     };
-    DockviewComponent.prototype.dispose = function () {
-        this._onDidActivePanelChange.dispose();
-        this._onDidAddPanel.dispose();
-        this._onDidRemovePanel.dispose();
-        this._onDidLayoutFromJSON.dispose();
-        _super.prototype.dispose.call(this);
-    };
     return DockviewComponent;
@@ -992,0 +1182,0 @@ }(baseComponentGridview_1.BaseGrid));

dist/cjs/dockview/dockviewFloatingGroupPanel.d.ts

@@ -0,0 +0,0 @@ import { Overlay } from '../dnd/overlay';

dist/cjs/dockview/dockviewFloatingGroupPanel.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/dockview/dockviewGroupPanel.d.ts

@@ -0,0 +0,0 @@ import { IFrameworkPart } from '../panel/types';

dist/cjs/dockview/dockviewGroupPanel.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/dockview/dockviewGroupPanelModel.d.ts

@@ -8,2 +8,3 @@ import { PanelTransfer } from '../dnd/dataTransfer';
 import { IPanel, PanelInitParameters, PanelUpdateEvent } from '../panel/types';
+import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContainer';
 import { DockviewDropTargets } from './types';
@@ -111,2 +112,3 @@ import { DockviewGroupPanel } from './dockviewGroupPanel';
     private _leftHeaderActions;
+    private _prefixHeaderActions;
     private mostRecentlyUsed;
@@ -122,2 +124,6 @@ private readonly _onDidChange;
     readonly onDidDrop: Event<GroupviewDropEvent>;
+    private readonly _onTabDragStart;
+    readonly onTabDragStart: Event<TabDragEvent>;
+    private readonly _onGroupDragStart;
+    readonly onGroupDragStart: Event<GroupDragEvent>;
     private readonly _onDidAddPanel;
@@ -124,0 +130,0 @@ readonly onDidAddPanel: Event<GroupviewChangeEvent>;

dist/cjs/dockview/dockviewGroupPanelModel.js

@@ -86,2 +86,6 @@ "use strict";
         _this.onDidDrop = _this._onDidDrop.event;
+        _this._onTabDragStart = new events_1.Emitter();
+        _this.onTabDragStart = _this._onTabDragStart.event;
+        _this._onGroupDragStart = new events_1.Emitter();
+        _this.onGroupDragStart = _this._onGroupDragStart.event;
         _this._onDidAddPanel = new events_1.Emitter();
@@ -127,3 +131,7 @@ _this.onDidAddPanel = _this._onDidAddPanel.event;
         _this.locked = options.locked || false;
-        _this.addDisposables(_this.tabsContainer.onDrop(function (event) {
+        _this.addDisposables(_this._onTabDragStart, _this._onGroupDragStart, _this.tabsContainer.onTabDragStart(function (event) {
+            _this._onTabDragStart.fire(event);
+        }), _this.tabsContainer.onGroupDragStart(function (event) {
+            _this._onGroupDragStart.fire(event);
+        }), _this.tabsContainer.onDrop(function (event) {
             _this.handleDropEvent(event.event, 'center', event.index);
@@ -266,2 +274,12 @@ }), _this.contentContainer.onDidFocus(function () {
         }
+        if (this.accessor.options.createPrefixHeaderActionsElement) {
+            this._prefixHeaderActions =
+                this.accessor.options.createPrefixHeaderActionsElement(this.groupPanel);
+            this.addDisposables(this._prefixHeaderActions);
+            this._prefixHeaderActions.init({
+                containerApi: new component_api_1.DockviewApi(this.accessor),
+                api: this.groupPanel.api,
+            });
+            this.tabsContainer.setPrefixActionsElement(this._prefixHeaderActions.element);
+        }
     };
@@ -268,0 +286,0 @@ DockviewGroupPanelModel.prototype.indexOf = function (panel) {

dist/cjs/dockview/dockviewPanel.d.ts

@@ -0,0 +0,0 @@ import { DockviewApi } from '../api/component.api';

dist/cjs/dockview/dockviewPanel.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/dockview/dockviewPanelModel.d.ts

@@ -0,0 +0,0 @@ import { GroupPanelPartInitParameters, IContentRenderer, ITabRenderer } from './types';

dist/cjs/dockview/dockviewPanelModel.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/dockview/options.d.ts

@@ -70,6 +70,10 @@ import { DockviewApi } from '../api/component.api';
     createLeftHeaderActionsElement?: (group: DockviewGroupPanel) => IHeaderActionsRenderer;
+    createPrefixHeaderActionsElement?: (group: DockviewGroupPanel) => IHeaderActionsRenderer;
     singleTabMode?: 'fullwidth' | 'default';
     parentElement?: HTMLElement;
     disableFloatingGroups?: boolean;
-    floatingGroupsAlwaysWithinViewport?: boolean;
+    floatingGroupBounds?: 'boundedWithinViewport' | {
+        minimumHeightWithinViewport?: number;
+        minimumWidthWithinViewport?: number;
+    };
 }
@@ -76,0 +80,0 @@ export interface PanelOptions<P extends object = Parameters> {

dist/cjs/dockview/options.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/dockview/types.d.ts

@@ -0,0 +0,0 @@ import { IDockviewComponent } from './dockviewComponent';

dist/cjs/dockview/types.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/dom.d.ts

@@ -0,0 +0,0 @@ import { Event as DockviewEvent } from './events';

dist/cjs/dom.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/events.d.ts

@@ -0,0 +0,0 @@ import { IDisposable } from './lifecycle';

dist/cjs/events.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/gridview/baseComponentGridview.d.ts

@@ -52,3 +52,3 @@ import { Emitter, Event, TickDelayedEvent } from '../events';
     readonly onDidLayoutChange: Event<void>;
-    private readonly _onDidRemoveGroup;
+    protected readonly _onDidRemoveGroup: Emitter<T>;
     readonly onDidRemoveGroup: Event<T>;
@@ -55,0 +55,0 @@ protected readonly _onDidAddGroup: Emitter<T>;

dist/cjs/gridview/baseComponentGridview.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/gridview/basePanelView.d.ts

@@ -0,0 +0,0 @@ import { CompositeDisposable } from '../lifecycle';

dist/cjs/gridview/basePanelView.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/gridview/branchNode.d.ts

@@ -0,0 +0,0 @@ import { IView, Orientation, Sizing, LayoutPriority, ISplitviewStyles } from '../splitview/splitview';

dist/cjs/gridview/branchNode.js

@@ -105,2 +105,3 @@ "use strict";
                 proportionalLayout: proportionalLayout,
+                styles: styles,
             });
@@ -107,0 +108,0 @@ }

dist/cjs/gridview/gridview.d.ts

@@ -0,0 +0,0 @@ import { ISplitviewStyles, LayoutPriority, Orientation, Sizing } from '../splitview/splitview';

dist/cjs/gridview/gridview.js

@@ -497,2 +497,10 @@ "use strict";
             }
+            /**
+             * clean down the branch node since we need to dipose of it and
+             * when .dispose() it called on a branch it will dispose of any
+             * views it is holding onto.
+             */
+            while (sibling.children.length > 0) {
+                sibling.removeChild(0);
+            }
         }
@@ -499,0 +507,0 @@ else {

dist/cjs/gridview/gridviewComponent.d.ts

@@ -0,0 +0,0 @@ import { SerializedGridview } from './gridview';

dist/cjs/gridview/gridviewComponent.js

@@ -148,48 +148,80 @@ "use strict";
     GridviewComponent.prototype.fromJSON = function (serializedGridview) {
+        var e_1, _a;
         var _this = this;
         this.clear();
         var grid = serializedGridview.grid, activePanel = serializedGridview.activePanel;
-        var queue = [];
-        // take note of the existing dimensions
-        var width = this.width;
-        var height = this.height;
-        this.gridview.deserialize(grid, {
-            fromJSON: function (node) {
-                var data = node.data;
-                var view = (0, componentFactory_1.createComponent)(data.id, data.component, _this.options.components || {}, _this.options.frameworkComponents || {}, _this.options.frameworkComponentFactory
-                    ? {
-                        createComponent: _this.options.frameworkComponentFactory
-                            .createComponent,
-                    }
-                    : undefined);
-                queue.push(function () {
-                    return view.init({
-                        params: data.params,
-                        minimumWidth: data.minimumWidth,
-                        maximumWidth: data.maximumWidth,
-                        minimumHeight: data.minimumHeight,
-                        maximumHeight: data.maximumHeight,
-                        priority: data.priority,
-                        snap: !!data.snap,
-                        accessor: _this,
-                        isVisible: node.visible,
+        try {
+            var queue_1 = [];
+            // take note of the existing dimensions
+            var width = this.width;
+            var height = this.height;
+            this.gridview.deserialize(grid, {
+                fromJSON: function (node) {
+                    var data = node.data;
+                    var view = (0, componentFactory_1.createComponent)(data.id, data.component, _this.options.components || {}, _this.options.frameworkComponents || {}, _this.options.frameworkComponentFactory
+                        ? {
+                            createComponent: _this.options.frameworkComponentFactory
+                                .createComponent,
+                        }
+                        : undefined);
+                    queue_1.push(function () {
+                        return view.init({
+                            params: data.params,
+                            minimumWidth: data.minimumWidth,
+                            maximumWidth: data.maximumWidth,
+                            minimumHeight: data.minimumHeight,
+                            maximumHeight: data.maximumHeight,
+                            priority: data.priority,
+                            snap: !!data.snap,
+                            accessor: _this,
+                            isVisible: node.visible,
+                        });
                     });
-                });
-                _this._onDidAddGroup.fire(view);
-                _this.registerPanel(view);
-                return view;
-            },
-        });
-        this.layout(width, height, true);
-        queue.forEach(function (f) { return f(); });
-        if (typeof activePanel === 'string') {
-            var panel = this.getPanel(activePanel);
-            if (panel) {
-                this.doSetGroupActive(panel);
+                    _this._onDidAddGroup.fire(view);
+                    _this.registerPanel(view);
+                    return view;
+                },
+            });
+            this.layout(width, height, true);
+            queue_1.forEach(function (f) { return f(); });
+            if (typeof activePanel === 'string') {
+                var panel = this.getPanel(activePanel);
+                if (panel) {
+                    this.doSetGroupActive(panel);
+                }
             }
         }
+        catch (err) {
+            try {
+                /**
+                 * To remove a group we cannot call this.removeGroup(...) since this makes assumptions about
+                 * the underlying HTMLElement existing in the Gridview.
+                 */
+                for (var _b = __values(this.groups), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var group = _c.value;
+                    group.dispose();
+                    this._groups.delete(group.id);
+                    this._onDidRemoveGroup.fire(group);
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            // fires clean-up events and clears the underlying HTML gridview.
+            this.clear();
+            /**
+             * even though we have cleaned-up we still want to inform the caller of their error
+             * and we'll do this through re-throwing the original error since afterall you would
+             * expect trying to load a corrupted layout to result in an error and not silently fail...
+             */
+            throw err;
+        }
         this._onDidLayoutfromJSON.fire();
     };
     GridviewComponent.prototype.clear = function () {
-        var e_1, _a;
+        var e_2, _a;
         var hasActiveGroup = this.activeGroup;
@@ -204,3 +236,3 @@ var groups = Array.from(this._groups.values()); // reassign since group panels will mutate
         }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
         finally {
@@ -210,3 +242,3 @@ try {
             }
-            finally { if (e_1) throw e_1.error; }
+            finally { if (e_2) throw e_2.error; }
         }
@@ -213,0 +245,0 @@ if (hasActiveGroup) {

dist/cjs/gridview/gridviewPanel.d.ts

@@ -0,0 +0,0 @@ import { PanelInitParameters } from '../panel/types';

dist/cjs/gridview/gridviewPanel.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/gridview/leafNode.d.ts

@@ -0,0 +0,0 @@ import { IView, LayoutPriority, Orientation } from '../splitview/splitview';

dist/cjs/gridview/leafNode.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/gridview/options.d.ts

@@ -0,0 +0,0 @@ import { GridviewPanel } from './gridviewPanel';

dist/cjs/gridview/options.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=options.js.map

dist/cjs/gridview/types.d.ts

@@ -0,0 +0,0 @@ import { BranchNode } from './branchNode';

dist/cjs/gridview/types.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=types.js.map

dist/cjs/index.d.ts

@@ -19,2 +19,3 @@ export * from './dnd/dataTransfer';
 export * from './dockview/components/tab/tab';
+export { TabDragEvent, GroupDragEvent, } from './dockview/components/titlebar/tabsContainer';
 export * from './dockview/types';
@@ -21,0 +22,0 @@ export * from './dockview/dockviewGroupPanel';

dist/cjs/index.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/lifecycle.d.ts

@@ -15,3 +15,2 @@ export interface IDisposable {
     protected get isDisposed(): boolean;
-    static from(...args: IDisposable[]): CompositeDisposable;
     constructor(...args: IDisposable[]);
@@ -18,0 +17,0 @@ addDisposables(...args: IDisposable[]): void;

dist/cjs/lifecycle.js

 "use strict";
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -53,9 +28,2 @@ exports.MutableDisposable = exports.CompositeDisposable = exports.Disposable = void 0;
     });
-    CompositeDisposable.from = function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        return new (CompositeDisposable.bind.apply(CompositeDisposable, __spreadArray([void 0], __read(args), false)))();
-    };
     CompositeDisposable.prototype.addDisposables = function () {
@@ -62,0 +30,0 @@ var _this = this;

dist/cjs/math.d.ts

@@ -0,0 +0,0 @@ export declare const clamp: (value: number, min: number, max: number) => number;

dist/cjs/math.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/panel/componentFactory.d.ts

@@ -0,0 +0,0 @@ export interface FrameworkFactory<T> {

dist/cjs/panel/componentFactory.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/panel/types.d.ts

@@ -0,0 +0,0 @@ import { IDisposable } from '../lifecycle';

dist/cjs/panel/types.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=types.js.map

dist/cjs/paneview/defaultPaneviewHeader.d.ts

@@ -0,0 +0,0 @@ import { PaneviewPanelApiImpl } from '../api/paneviewPanelApi';

dist/cjs/paneview/defaultPaneviewHeader.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/paneview/draggablePaneviewPanel.d.ts

@@ -0,0 +0,0 @@ import { PaneviewApi } from '../api/component.api';

dist/cjs/paneview/draggablePaneviewPanel.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/paneview/options.d.ts

@@ -0,0 +0,0 @@ import { FrameworkFactory } from '../panel/componentFactory';

dist/cjs/paneview/options.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=options.js.map

dist/cjs/paneview/paneview.d.ts

@@ -0,0 +0,0 @@ import { Orientation, ISplitViewDescriptor, Sizing } from '../splitview/splitview';

dist/cjs/paneview/paneview.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/paneview/paneviewComponent.d.ts

@@ -0,0 +0,0 @@ import { Event } from '../events';

dist/cjs/paneview/paneviewComponent.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/paneview/paneviewPanel.d.ts

@@ -0,0 +0,0 @@ import { PaneviewApi } from '../api/component.api';

dist/cjs/paneview/paneviewPanel.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/resizable.d.ts

@@ -0,0 +0,0 @@ import { CompositeDisposable } from './lifecycle';

dist/cjs/resizable.js

@@ -42,2 +42,10 @@ "use strict";
             }
+            if (!document.body.contains(_this._element)) {
+                /**
+                 * since the event is dispatched through requestAnimationFrame there is a small chance
+                 * the component is no longer attached to the DOM, if that is the case the dimensions
+                 * are mostly likely all zero and meaningless. we should skip this case.
+                 */
+                return;
+            }
             var _a = entry.contentRect, width = _a.width, height = _a.height;
@@ -44,0 +52,0 @@ _this.layout(width, height);

dist/cjs/splitview/options.d.ts

@@ -0,0 +0,0 @@ import { IPanel, PanelInitParameters } from '../panel/types';

dist/cjs/splitview/options.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=options.js.map

dist/cjs/splitview/splitview.d.ts

@@ -0,0 +0,0 @@ import { Event } from '../events';

dist/cjs/splitview/splitview.js

@@ -386,2 +386,3 @@ "use strict";
     Splitview.prototype.onDidChange = function (item, size) {
+        var _this = this;
         var index = this.viewItems.indexOf(item);
@@ -394,3 +395,12 @@ if (index < 0 || index >= this.viewItems.length) {
         item.size = size;
-        this.relayout([index]);
+        var indexes = (0, math_1.range)(this.viewItems.length).filter(function (i) { return i !== index; });
+        var lowPriorityIndexes = __spreadArray(__spreadArray([], __read(indexes.filter(function (i) { return _this.viewItems[i].priority === LayoutPriority.Low; })), false), [
+            index,
+        ], false);
+        var highPriorityIndexes = indexes.filter(function (i) { return _this.viewItems[i].priority === LayoutPriority.High; });
+        /**
+         * add this view we are changing to the low-index list since we have determined the size
+         * here and don't want it changed
+         */
+        this.relayout(__spreadArray(__spreadArray([], __read(lowPriorityIndexes), false), [index], false), highPriorityIndexes);
     };
@@ -397,0 +407,0 @@ Splitview.prototype.addView = function (view, size, index, skipLayout) {

dist/cjs/splitview/splitviewComponent.d.ts

@@ -0,0 +0,0 @@ import { IDisposable } from '../lifecycle';

dist/cjs/splitview/splitviewComponent.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/splitview/splitviewPanel.d.ts

@@ -0,0 +0,0 @@ import { ISerializableView, PanelViewInitParameters } from './options';

dist/cjs/splitview/splitviewPanel.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/splitview/viewItem.d.ts

@@ -0,0 +0,0 @@ import { IDisposable } from '../lifecycle';

dist/cjs/splitview/viewItem.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/svg.d.ts

@@ -0,0 +0,0 @@ export declare const createCloseButton: () => SVGSVGElement;

dist/cjs/svg.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/types.d.ts

 export type FunctionOrValue<T> = (() => T) | T;
 export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
 //# sourceMappingURL=types.d.ts.map

dist/cjs/types.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=types.js.map

dist/esm/api/component.api.d.ts

@@ -16,2 +16,3 @@ import { DockviewDropEvent, IDockviewComponent, SerializedDockview } from '../dockview/dockviewComponent';
 import { PaneviewDropEvent } from '../paneview/draggablePaneviewPanel';
+import { GroupDragEvent, TabDragEvent } from '../dockview/components/titlebar/tabsContainer';
 export interface CommonApi<T = any> {
@@ -30,23 +31,86 @@ readonly height: number;
     private readonly component;
+    /**
+     * The minimum size  the component can reach where size is measured in the direction of orientation provided.
+     */
     get minimumSize(): number;
+    /**
+     * The maximum size the component can reach where size is measured in the direction of orientation provided.
+     */
     get maximumSize(): number;
+    /**
+     * Width of the component.
+     */
+    get width(): number;
+    /**
+     * Height of the component.
+     */
     get height(): number;
-    get width(): number;
+    /**
+     * The current number of panels.
+     */
     get length(): number;
+    /**
+     * The current orientation of the component.
+     */
     get orientation(): Orientation;
+    /**
+     * The list of current panels.
+     */
     get panels(): ISplitviewPanel[];
+    /**
+     * Invoked after a layout is loaded through the `fromJSON` method.
+     */
     get onDidLayoutFromJSON(): Event<void>;
+    /**
+     * Invoked whenever any aspect of the layout changes.
+     * If listening to this event it may be worth debouncing ouputs.
+     */
     get onDidLayoutChange(): Event<void>;
+    /**
+     * Invoked when a view is added.
+     */
     get onDidAddView(): Event<IView>;
+    /**
+     * Invoked when a view is removed.
+     */
     get onDidRemoveView(): Event<IView>;
     constructor(component: ISplitviewComponent);
+    /**
+     * Update configuratable options.
+     */
     updateOptions(options: SplitviewComponentUpdateOptions): void;
+    /**
+     * Removes an existing panel and optionally provide a `Sizing` method
+     * for the subsequent resize.
+     */
     removePanel(panel: ISplitviewPanel, sizing?: Sizing): void;
+    /**
+     * Focus the component.
+     */
     focus(): void;
+    /**
+     * Get the reference to a panel given it's `string` id.
+     */
     getPanel(id: string): ISplitviewPanel | undefined;
+    /**
+     * Layout the panel with a width and height.
+     */
     layout(width: number, height: number): void;
+    /**
+     * Add a new panel and return the created instance.
+     */
     addPanel<T extends object = Parameters>(options: AddSplitviewComponentOptions<T>): ISplitviewPanel;
+    /**
+     * Move a panel given it's current and desired index.
+     */
     movePanel(from: number, to: number): void;
+    /**
+     * Deserialize a layout to built a splitivew.
+     */
     fromJSON(data: SerializedSplitview): void;
+    /** Serialize a layout */
     toJSON(): SerializedSplitview;
+    /**
+     * Remove all panels and clear the component.
+     */
     clear(): void;
@@ -56,21 +120,78 @@ }
     private readonly component;
+    /**
+     * The minimum size  the component can reach where size is measured in the direction of orientation provided.
+     */
     get minimumSize(): number;
+    /**
+     * The maximum size the component can reach where size is measured in the direction of orientation provided.
+     */
     get maximumSize(): number;
+    /**
+     * Width of the component.
+     */
+    get width(): number;
+    /**
+     * Height of the component.
+     */
     get height(): number;
-    get width(): number;
+    /**
+     * All panel objects.
+     */
     get panels(): IPaneviewPanel[];
+    /**
+     * Invoked when any layout change occures, an aggregation of many events.
+     */
     get onDidLayoutChange(): Event<void>;
+    /**
+     * Invoked after a layout is deserialzied using the `fromJSON` method.
+     */
     get onDidLayoutFromJSON(): Event<void>;
+    /**
+     * Invoked when a panel is added. May be called multiple times when moving panels.
+     */
     get onDidAddView(): Event<IPaneviewPanel>;
+    /**
+     * Invoked when a panel is removed. May be called multiple times when moving panels.
+     */
     get onDidRemoveView(): Event<IPaneviewPanel>;
+    /**
+     * Invoked when a Drag'n'Drop event occurs that the component was unable to handle. Exposed for custom Drag'n'Drop functionality.
+     */
     get onDidDrop(): Event<PaneviewDropEvent>;
     constructor(component: IPaneviewComponent);
+    /**
+     * Remove a panel given the panel object.
+     */
     removePanel(panel: IPaneviewPanel): void;
+    /**
+     * Get a panel object given a `string` id. May return `undefined`.
+     */
     getPanel(id: string): IPaneviewPanel | undefined;
+    /**
+     * Move a panel given it's current and desired index.
+     */
     movePanel(from: number, to: number): void;
+    /**
+     *  Focus the component. Will try to focus an active panel if one exists.
+     */
     focus(): void;
+    /**
+     * Force resize the component to an exact width and height. Read about auto-resizing before using.
+     */
     layout(width: number, height: number): void;
+    /**
+     * Add a panel and return the created object.
+     */
     addPanel<T extends object = Parameters>(options: AddPaneviewComponentOptions<T>): IPaneviewPanel;
+    /**
+     * Create a component from a serialized object.
+     */
     fromJSON(data: SerializedPaneview): void;
+    /**
+     * Create a serialized object of the current component.
+     */
     toJSON(): SerializedPaneview;
+    /**
+     * Reset the component back to an empty and default state.
+     */
     clear(): void;
@@ -80,21 +201,75 @@ }
     private readonly component;
+    /**
+     * Width of the component.
+     */
+    get width(): number;
+    /**
+     * Height of the component.
+     */
+    get height(): number;
+    /**
+     * Minimum height of the component.
+     */
     get minimumHeight(): number;
+    /**
+     * Maximum height of the component.
+     */
     get maximumHeight(): number;
+    /**
+     * Minimum width of the component.
+     */
     get minimumWidth(): number;
+    /**
+     * Maximum width of the component.
+     */
     get maximumWidth(): number;
-    get width(): number;
-    get height(): number;
+    /**
+     * Invoked when any layout change occures, an aggregation of many events.
+     */
     get onDidLayoutChange(): Event<void>;
+    /**
+     * Invoked when a panel is added. May be called multiple times when moving panels.
+     */
     get onDidAddPanel(): Event<IGridviewPanel>;
+    /**
+     * Invoked when a panel is removed. May be called multiple times when moving panels.
+     */
     get onDidRemovePanel(): Event<IGridviewPanel>;
+    /**
+     * Invoked when the active panel changes. May be undefined if no panel is active.
+     */
     get onDidActivePanelChange(): Event<IGridviewPanel | undefined>;
+    /**
+     * Invoked after a layout is deserialzied using the `fromJSON` method.
+     */
     get onDidLayoutFromJSON(): Event<void>;
+    /**
+     * All panel objects.
+     */
     get panels(): IGridviewPanel[];
+    /**
+     * Current orientation. Can be changed after initialization.
+     */
     get orientation(): Orientation;
     set orientation(value: Orientation);
     constructor(component: IGridviewComponent);
+    /**
+     *  Focus the component. Will try to focus an active panel if one exists.
+     */
     focus(): void;
+    /**
+     * Force resize the component to an exact width and height. Read about auto-resizing before using.
+     */
     layout(width: number, height: number, force?: boolean): void;
+    /**
+     * Add a panel and return the created object.
+     */
     addPanel<T extends object = Parameters>(options: AddComponentOptions<T>): IGridviewPanel;
+    /**
+     * Remove a panel given the panel object.
+     */
     removePanel(panel: IGridviewPanel, sizing?: Sizing): void;
+    /**
+     * Move a panel in a particular direction relative to another panel.
+     */
     movePanel(panel: IGridviewPanel, options: {
@@ -105,5 +280,17 @@ direction: Direction;
     }): void;
+    /**
+     * Get a panel object given a `string` id. May return `undefined`.
+     */
     getPanel(id: string): IGridviewPanel | undefined;
+    /**
+     * Create a component from a serialized object.
+     */
     fromJSON(data: SerializedGridviewComponent): void;
+    /**
+     * Create a serialized object of the current component.
+     */
     toJSON(): SerializedGridviewComponent;
+    /**
+     * Reset the component back to an empty and default state.
+     */
     clear(): void;
@@ -113,36 +300,138 @@ }
     private readonly component;
+    /**
+     * The unique identifier for this instance. Used to manage scope of Drag'n'Drop events.
+     */
     get id(): string;
+    /**
+     * Width of the component.
+     */
     get width(): number;
+    /**
+     * Height of the component.
+     */
     get height(): number;
+    /**
+     * Minimum height of the component.
+     */
     get minimumHeight(): number;
+    /**
+     * Maximum height of the component.
+     */
     get maximumHeight(): number;
+    /**
+     * Minimum width of the component.
+     */
     get minimumWidth(): number;
+    /**
+     * Maximum width of the component.
+     */
     get maximumWidth(): number;
+    /**
+     * Total number of groups.
+     */
     get size(): number;
+    /**
+     * Total number of panels.
+     */
     get totalPanels(): number;
+    /**
+     * Invoked when the active group changes. May be undefined if no group is active.
+     */
     get onDidActiveGroupChange(): Event<DockviewGroupPanel | undefined>;
+    /**
+     * Invoked when a group is added. May be called multiple times when moving groups.
+     */
     get onDidAddGroup(): Event<DockviewGroupPanel>;
+    /**
+     * Invoked when a group is removed. May be called multiple times when moving groups.
+     */
     get onDidRemoveGroup(): Event<DockviewGroupPanel>;
+    /**
+     * Invoked when the active panel changes. May be undefined if no panel is active.
+     */
     get onDidActivePanelChange(): Event<IDockviewPanel | undefined>;
+    /**
+     * Invoked when a panel is added. May be called multiple times when moving panels.
+     */
     get onDidAddPanel(): Event<IDockviewPanel>;
+    /**
+     * Invoked when a panel is removed. May be called multiple times when moving panels.
+     */
     get onDidRemovePanel(): Event<IDockviewPanel>;
+    /**
+     * Invoked after a layout is deserialzied using the `fromJSON` method.
+     */
     get onDidLayoutFromJSON(): Event<void>;
+    /**
+     * Invoked when any layout change occures, an aggregation of many events.
+     */
     get onDidLayoutChange(): Event<void>;
+    /**
+     * Invoked when a Drag'n'Drop event occurs that the component was unable to handle. Exposed for custom Drag'n'Drop functionality.
+     */
     get onDidDrop(): Event<DockviewDropEvent>;
+    /**
+     * Invoked before a group is dragged. Exposed for custom Drag'n'Drop functionality.
+     */
+    get onWillDragGroup(): Event<GroupDragEvent>;
+    /**
+     * Invoked before a panel is dragged. Exposed for custom Drag'n'Drop functionality.
+     */
+    get onWillDragPanel(): Event<TabDragEvent>;
+    /**
+     * All panel objects.
+     */
     get panels(): IDockviewPanel[];
+    /**
+     * All group objects.
+     */
     get groups(): DockviewGroupPanel[];
+    /**
+     *  Active panel object.
+     */
     get activePanel(): IDockviewPanel | undefined;
+    /**
+     * Active group object.
+     */
     get activeGroup(): DockviewGroupPanel | undefined;
     constructor(component: IDockviewComponent);
+    /**
+     *  Focus the component. Will try to focus an active panel if one exists.
+     */
     focus(): void;
+    /**
+     * Get a panel object given a `string` id. May return `undefined`.
+     */
     getPanel(id: string): IDockviewPanel | undefined;
+    /**
+     * Force resize the component to an exact width and height. Read about auto-resizing before using.
+     */
     layout(width: number, height: number, force?: boolean): void;
+    /**
+     * Add a panel and return the created object.
+     */
     addPanel<T extends object = Parameters>(options: AddPanelOptions<T>): IDockviewPanel;
+    /**
+     * Remove a panel given the panel object.
+     */
     removePanel(panel: IDockviewPanel): void;
+    /**
+     * Add a group and return the created object.
+     */
     addGroup(options?: AddGroupOptions): DockviewGroupPanel;
-    moveToNext(options?: MovementOptions): void;
-    moveToPrevious(options?: MovementOptions): void;
+    /**
+     * Close all groups and panels.
+     */
     closeAllGroups(): void;
+    /**
+     * Remove a group and any panels within the group.
+     */
     removeGroup(group: IDockviewGroupPanel): void;
+    /**
+     * Get a group object given a `string` id. May return undefined.
+     */
     getGroup(id: string): DockviewGroupPanel | undefined;
+    /**
+     * Add a floating group
+     */
     addFloatingGroup(item: IDockviewPanel | DockviewGroupPanel, coord?: {
@@ -152,6 +441,23 @@ x: number;
     }): void;
+    /**
+     * Create a component from a serialized object.
+     */
     fromJSON(data: SerializedDockview): void;
+    /**
+     * Create a serialized object of the current component.
+     */
     toJSON(): SerializedDockview;
+    /**
+     * Reset the component back to an empty and default state.
+     */
     clear(): void;
+    /**
+     * Move the focus progmatically to the next panel or group.
+     */
+    moveToNext(options?: MovementOptions): void;
+    /**
+     * Move the focus progmatically to the previous panel or group.
+     */
+    moveToPrevious(options?: MovementOptions): void;
 }
 //# sourceMappingURL=component.api.d.ts.map

dist/esm/api/component.api.js

 import { Emitter } from '../events';
 export class SplitviewApi {
+    /**
+     * The minimum size  the component can reach where size is measured in the direction of orientation provided.
+     */
     get minimumSize() {
         return this.component.minimumSize;
     }
+    /**
+     * The maximum size the component can reach where size is measured in the direction of orientation provided.
+     */
     get maximumSize() {
         return this.component.maximumSize;
     }
+    /**
+     * Width of the component.
+     */
+    get width() {
+        return this.component.width;
+    }
+    /**
+     * Height of the component.
+     */
     get height() {
         return this.component.height;
     }
-    get width() {
-        return this.component.width;
-    }
+    /**
+     * The current number of panels.
+     */
     get length() {
         return this.component.length;
     }
+    /**
+     * The current orientation of the component.
+     */
     get orientation() {
         return this.component.orientation;
     }
+    /**
+     * The list of current panels.
+     */
     get panels() {
         return this.component.panels;
     }
+    /**
+     * Invoked after a layout is loaded through the `fromJSON` method.
+     */
     get onDidLayoutFromJSON() {
         return this.component.onDidLayoutFromJSON;
     }
+    /**
+     * Invoked whenever any aspect of the layout changes.
+     * If listening to this event it may be worth debouncing ouputs.
+     */
     get onDidLayoutChange() {
         return this.component.onDidLayoutChange;
     }
+    /**
+     * Invoked when a view is added.
+     */
     get onDidAddView() {
         return this.component.onDidAddView;
     }
+    /**
+     * Invoked when a view is removed.
+     */
     get onDidRemoveView() {
@@ -39,29 +73,58 @@ return this.component.onDidRemoveView;
     }
+    /**
+     * Update configuratable options.
+     */
     updateOptions(options) {
         this.component.updateOptions(options);
     }
+    /**
+     * Removes an existing panel and optionally provide a `Sizing` method
+     * for the subsequent resize.
+     */
     removePanel(panel, sizing) {
         this.component.removePanel(panel, sizing);
     }
+    /**
+     * Focus the component.
+     */
     focus() {
         this.component.focus();
     }
+    /**
+     * Get the reference to a panel given it's `string` id.
+     */
     getPanel(id) {
         return this.component.getPanel(id);
     }
+    /**
+     * Layout the panel with a width and height.
+     */
     layout(width, height) {
         return this.component.layout(width, height);
     }
+    /**
+     * Add a new panel and return the created instance.
+     */
     addPanel(options) {
         return this.component.addPanel(options);
     }
+    /**
+     * Move a panel given it's current and desired index.
+     */
     movePanel(from, to) {
         this.component.movePanel(from, to);
     }
+    /**
+     * Deserialize a layout to built a splitivew.
+     */
     fromJSON(data) {
         this.component.fromJSON(data);
     }
+    /** Serialize a layout */
     toJSON() {
         return this.component.toJSON();
     }
+    /**
+     * Remove all panels and clear the component.
+     */
     clear() {
@@ -72,29 +135,59 @@ this.component.clear();
 export class PaneviewApi {
+    /**
+     * The minimum size  the component can reach where size is measured in the direction of orientation provided.
+     */
     get minimumSize() {
         return this.component.minimumSize;
     }
+    /**
+     * The maximum size the component can reach where size is measured in the direction of orientation provided.
+     */
     get maximumSize() {
         return this.component.maximumSize;
     }
+    /**
+     * Width of the component.
+     */
+    get width() {
+        return this.component.width;
+    }
+    /**
+     * Height of the component.
+     */
     get height() {
         return this.component.height;
     }
-    get width() {
-        return this.component.width;
-    }
+    /**
+     * All panel objects.
+     */
     get panels() {
         return this.component.panels;
     }
+    /**
+     * Invoked when any layout change occures, an aggregation of many events.
+     */
     get onDidLayoutChange() {
         return this.component.onDidLayoutChange;
     }
+    /**
+     * Invoked after a layout is deserialzied using the `fromJSON` method.
+     */
     get onDidLayoutFromJSON() {
         return this.component.onDidLayoutFromJSON;
     }
+    /**
+     * Invoked when a panel is added. May be called multiple times when moving panels.
+     */
     get onDidAddView() {
         return this.component.onDidAddView;
     }
+    /**
+     * Invoked when a panel is removed. May be called multiple times when moving panels.
+     */
     get onDidRemoveView() {
         return this.component.onDidRemoveView;
     }
+    /**
+     * Invoked when a Drag'n'Drop event occurs that the component was unable to handle. Exposed for custom Drag'n'Drop functionality.
+     */
     get onDidDrop() {
@@ -114,26 +207,53 @@ const emitter = new Emitter();
     }
+    /**
+     * Remove a panel given the panel object.
+     */
     removePanel(panel) {
         this.component.removePanel(panel);
     }
+    /**
+     * Get a panel object given a `string` id. May return `undefined`.
+     */
     getPanel(id) {
         return this.component.getPanel(id);
     }
+    /**
+     * Move a panel given it's current and desired index.
+     */
     movePanel(from, to) {
         this.component.movePanel(from, to);
     }
+    /**
+     *  Focus the component. Will try to focus an active panel if one exists.
+     */
     focus() {
         this.component.focus();
     }
+    /**
+     * Force resize the component to an exact width and height. Read about auto-resizing before using.
+     */
     layout(width, height) {
         this.component.layout(width, height);
     }
+    /**
+     * Add a panel and return the created object.
+     */
     addPanel(options) {
         return this.component.addPanel(options);
     }
+    /**
+     * Create a component from a serialized object.
+     */
     fromJSON(data) {
         this.component.fromJSON(data);
     }
+    /**
+     * Create a serialized object of the current component.
+     */
     toJSON() {
         return this.component.toJSON();
     }
+    /**
+     * Reset the component back to an empty and default state.
+     */
     clear() {
@@ -144,38 +264,77 @@ this.component.clear();
 export class GridviewApi {
+    /**
+     * Width of the component.
+     */
+    get width() {
+        return this.component.width;
+    }
+    /**
+     * Height of the component.
+     */
+    get height() {
+        return this.component.height;
+    }
+    /**
+     * Minimum height of the component.
+     */
     get minimumHeight() {
         return this.component.minimumHeight;
     }
+    /**
+     * Maximum height of the component.
+     */
     get maximumHeight() {
         return this.component.maximumHeight;
     }
+    /**
+     * Minimum width of the component.
+     */
     get minimumWidth() {
         return this.component.minimumWidth;
     }
+    /**
+     * Maximum width of the component.
+     */
     get maximumWidth() {
         return this.component.maximumWidth;
     }
-    get width() {
-        return this.component.width;
-    }
-    get height() {
-        return this.component.height;
-    }
+    /**
+     * Invoked when any layout change occures, an aggregation of many events.
+     */
     get onDidLayoutChange() {
         return this.component.onDidLayoutChange;
     }
+    /**
+     * Invoked when a panel is added. May be called multiple times when moving panels.
+     */
     get onDidAddPanel() {
         return this.component.onDidAddGroup;
     }
+    /**
+     * Invoked when a panel is removed. May be called multiple times when moving panels.
+     */
     get onDidRemovePanel() {
         return this.component.onDidRemoveGroup;
     }
+    /**
+     * Invoked when the active panel changes. May be undefined if no panel is active.
+     */
     get onDidActivePanelChange() {
         return this.component.onDidActiveGroupChange;
     }
+    /**
+     * Invoked after a layout is deserialzied using the `fromJSON` method.
+     */
     get onDidLayoutFromJSON() {
         return this.component.onDidLayoutFromJSON;
     }
+    /**
+     * All panel objects.
+     */
     get panels() {
         return this.component.groups;
     }
+    /**
+     * Current orientation. Can be changed after initialization.
+     */
     get orientation() {
@@ -190,26 +349,53 @@ return this.component.orientation;
     }
+    /**
+     *  Focus the component. Will try to focus an active panel if one exists.
+     */
     focus() {
         this.component.focus();
     }
+    /**
+     * Force resize the component to an exact width and height. Read about auto-resizing before using.
+     */
     layout(width, height, force = false) {
         this.component.layout(width, height, force);
     }
+    /**
+     * Add a panel and return the created object.
+     */
     addPanel(options) {
         return this.component.addPanel(options);
     }
+    /**
+     * Remove a panel given the panel object.
+     */
     removePanel(panel, sizing) {
         this.component.removePanel(panel, sizing);
     }
+    /**
+     * Move a panel in a particular direction relative to another panel.
+     */
     movePanel(panel, options) {
         this.component.movePanel(panel, options);
     }
+    /**
+     * Get a panel object given a `string` id. May return `undefined`.
+     */
     getPanel(id) {
         return this.component.getPanel(id);
     }
+    /**
+     * Create a component from a serialized object.
+     */
     fromJSON(data) {
         return this.component.fromJSON(data);
     }
+    /**
+     * Create a serialized object of the current component.
+     */
     toJSON() {
         return this.component.toJSON();
     }
+    /**
+     * Reset the component back to an empty and default state.
+     */
     clear() {
@@ -220,65 +406,143 @@ this.component.clear();
 export class DockviewApi {
+    /**
+     * The unique identifier for this instance. Used to manage scope of Drag'n'Drop events.
+     */
     get id() {
         return this.component.id;
     }
+    /**
+     * Width of the component.
+     */
     get width() {
         return this.component.width;
     }
+    /**
+     * Height of the component.
+     */
     get height() {
         return this.component.height;
     }
+    /**
+     * Minimum height of the component.
+     */
     get minimumHeight() {
         return this.component.minimumHeight;
     }
+    /**
+     * Maximum height of the component.
+     */
     get maximumHeight() {
         return this.component.maximumHeight;
     }
+    /**
+     * Minimum width of the component.
+     */
     get minimumWidth() {
         return this.component.minimumWidth;
     }
+    /**
+     * Maximum width of the component.
+     */
     get maximumWidth() {
         return this.component.maximumWidth;
     }
+    /**
+     * Total number of groups.
+     */
     get size() {
         return this.component.size;
     }
+    /**
+     * Total number of panels.
+     */
     get totalPanels() {
         return this.component.totalPanels;
     }
+    /**
+     * Invoked when the active group changes. May be undefined if no group is active.
+     */
     get onDidActiveGroupChange() {
         return this.component.onDidActiveGroupChange;
     }
+    /**
+     * Invoked when a group is added. May be called multiple times when moving groups.
+     */
     get onDidAddGroup() {
         return this.component.onDidAddGroup;
     }
+    /**
+     * Invoked when a group is removed. May be called multiple times when moving groups.
+     */
     get onDidRemoveGroup() {
         return this.component.onDidRemoveGroup;
     }
+    /**
+     * Invoked when the active panel changes. May be undefined if no panel is active.
+     */
     get onDidActivePanelChange() {
         return this.component.onDidActivePanelChange;
     }
+    /**
+     * Invoked when a panel is added. May be called multiple times when moving panels.
+     */
     get onDidAddPanel() {
         return this.component.onDidAddPanel;
     }
+    /**
+     * Invoked when a panel is removed. May be called multiple times when moving panels.
+     */
     get onDidRemovePanel() {
         return this.component.onDidRemovePanel;
     }
+    /**
+     * Invoked after a layout is deserialzied using the `fromJSON` method.
+     */
     get onDidLayoutFromJSON() {
         return this.component.onDidLayoutFromJSON;
     }
+    /**
+     * Invoked when any layout change occures, an aggregation of many events.
+     */
     get onDidLayoutChange() {
         return this.component.onDidLayoutChange;
     }
+    /**
+     * Invoked when a Drag'n'Drop event occurs that the component was unable to handle. Exposed for custom Drag'n'Drop functionality.
+     */
     get onDidDrop() {
         return this.component.onDidDrop;
     }
+    /**
+     * Invoked before a group is dragged. Exposed for custom Drag'n'Drop functionality.
+     */
+    get onWillDragGroup() {
+        return this.component.onWillDragGroup;
+    }
+    /**
+     * Invoked before a panel is dragged. Exposed for custom Drag'n'Drop functionality.
+     */
+    get onWillDragPanel() {
+        return this.component.onWillDragPanel;
+    }
+    /**
+     * All panel objects.
+     */
     get panels() {
         return this.component.panels;
     }
+    /**
+     * All group objects.
+     */
     get groups() {
         return this.component.groups;
     }
+    /**
+     *  Active panel object.
+     */
     get activePanel() {
         return this.component.activePanel;
     }
+    /**
+     * Active group object.
+     */
     get activeGroup() {
@@ -290,48 +554,93 @@ return this.component.activeGroup;
     }
+    /**
+     *  Focus the component. Will try to focus an active panel if one exists.
+     */
     focus() {
         this.component.focus();
     }
+    /**
+     * Get a panel object given a `string` id. May return `undefined`.
+     */
     getPanel(id) {
         return this.component.getGroupPanel(id);
     }
+    /**
+     * Force resize the component to an exact width and height. Read about auto-resizing before using.
+     */
     layout(width, height, force = false) {
         this.component.layout(width, height, force);
     }
+    /**
+     * Add a panel and return the created object.
+     */
     addPanel(options) {
         return this.component.addPanel(options);
     }
+    /**
+     * Remove a panel given the panel object.
+     */
     removePanel(panel) {
         this.component.removePanel(panel);
     }
+    /**
+     * Add a group and return the created object.
+     */
     addGroup(options) {
         return this.component.addGroup(options);
     }
-    moveToNext(options) {
-        this.component.moveToNext(options);
-    }
-    moveToPrevious(options) {
-        this.component.moveToPrevious(options);
-    }
+    /**
+     * Close all groups and panels.
+     */
     closeAllGroups() {
         return this.component.closeAllGroups();
     }
+    /**
+     * Remove a group and any panels within the group.
+     */
     removeGroup(group) {
         this.component.removeGroup(group);
     }
+    /**
+     * Get a group object given a `string` id. May return undefined.
+     */
     getGroup(id) {
         return this.component.getPanel(id);
     }
+    /**
+     * Add a floating group
+     */
     addFloatingGroup(item, coord) {
         return this.component.addFloatingGroup(item, coord);
     }
+    /**
+     * Create a component from a serialized object.
+     */
     fromJSON(data) {
         this.component.fromJSON(data);
     }
+    /**
+     * Create a serialized object of the current component.
+     */
     toJSON() {
         return this.component.toJSON();
     }
+    /**
+     * Reset the component back to an empty and default state.
+     */
     clear() {
         this.component.clear();
     }
+    /**
+     * Move the focus progmatically to the next panel or group.
+     */
+    moveToNext(options) {
+        this.component.moveToNext(options);
+    }
+    /**
+     * Move the focus progmatically to the previous panel or group.
+     */
+    moveToPrevious(options) {
+        this.component.moveToPrevious(options);
+    }
 }
 //# sourceMappingURL=component.api.js.map

dist/esm/api/dockviewGroupPanelApi.d.ts

@@ -0,0 +0,0 @@ import { Position } from '../dnd/droptarget';

dist/esm/api/dockviewGroupPanelApi.js

@@ -0,0 +0,0 @@ import { Emitter } from '../events';

dist/esm/api/dockviewPanelApi.d.ts

@@ -0,0 +0,0 @@ import { Emitter, Event } from '../events';

dist/esm/api/dockviewPanelApi.js

@@ -0,0 +0,0 @@ import { Emitter } from '../events';

dist/esm/api/gridviewPanelApi.d.ts

@@ -0,0 +0,0 @@ import { Emitter, Event } from '../events';

dist/esm/api/gridviewPanelApi.js

@@ -0,0 +0,0 @@ import { Emitter } from '../events';

dist/esm/api/panelApi.d.ts

@@ -0,0 +0,0 @@ import { Emitter, Event } from '../events';

dist/esm/api/panelApi.js

@@ -0,0 +0,0 @@ import { Emitter } from '../events';

dist/esm/api/paneviewPanelApi.d.ts

@@ -0,0 +0,0 @@ import { Emitter, Event } from '../events';

dist/esm/api/paneviewPanelApi.js

@@ -0,0 +0,0 @@ import { Emitter } from '../events';

dist/esm/api/splitviewPanelApi.d.ts

@@ -0,0 +0,0 @@ import { Emitter, Event } from '../events';

dist/esm/api/splitviewPanelApi.js

@@ -0,0 +0,0 @@ import { Emitter } from '../events';

dist/esm/array.d.ts

@@ -0,0 +0,0 @@ export declare function tail<T>(arr: T[]): [T[], T];

dist/esm/array.js

@@ -0,0 +0,0 @@ export function tail(arr) {

dist/esm/dnd/abstractDragHandler.d.ts

@@ -7,5 +7,5 @@ import { CompositeDisposable, IDisposable } from '../lifecycle';
     private readonly _onDragStart;
-    readonly onDragStart: import("../events").Event<void>;
+    readonly onDragStart: import("../events").Event<DragEvent>;
     constructor(el: HTMLElement);
-    abstract getData(dataTransfer?: DataTransfer | null): IDisposable;
+    abstract getData(event: DragEvent): IDisposable;
     protected isCancelled(_event: DragEvent): boolean;
@@ -12,0 +12,0 @@ private configure;

dist/esm/dnd/abstractDragHandler.js

@@ -20,3 +20,3 @@ import { getElementsByTagName } from '../dom';
         this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
-            if (this.isCancelled(event)) {
+            if (event.defaultPrevented || this.isCancelled(event)) {
                 event.preventDefault();
@@ -41,15 +41,19 @@ return;
             setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
-            this.dataDisposable.value = this.getData(event.dataTransfer);
+            this.dataDisposable.value = this.getData(event);
+            this._onDragStart.fire(event);
             if (event.dataTransfer) {
                 event.dataTransfer.effectAllowed = 'move';
-                /**
-                 * Although this is not used by dockview many third party dnd libraries will check
-                 * dataTransfer.types to determine valid drag events.
-                 *
-                 * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
-                 * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
-                 * dnd logic. You can see the code at
-                 * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
-                 */
-                event.dataTransfer.setData('text/plain', '__dockview_internal_drag_event__');
+                const hasData = event.dataTransfer.items.length > 0;
+                if (!hasData) {
+                    /**
+                     * Although this is not used by dockview many third party dnd libraries will check
+                     * dataTransfer.types to determine valid drag events.
+                     *
+                     * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
+                     * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
+                     * dnd logic. You can see the code at
+                     * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
+                     */
+                    event.dataTransfer.setData('text/plain', '__dockview_internal_drag_event__');
+                }
             }
@@ -56,0 +60,0 @@ }), addDisposableListener(this.el, 'dragend', () => {

dist/esm/dnd/dataTransfer.d.ts

@@ -0,0 +0,0 @@ declare class TransferObject {

dist/esm/dnd/dataTransfer.js

@@ -0,0 +0,0 @@ class TransferObject {

dist/esm/dnd/dnd.d.ts

@@ -0,0 +0,0 @@ import { CompositeDisposable } from '../lifecycle';

dist/esm/dnd/dnd.js

@@ -0,0 +0,0 @@ import { addDisposableListener } from '../events';

dist/esm/dnd/droptarget.d.ts

@@ -0,0 +0,0 @@ import { Event } from '../events';

dist/esm/dnd/droptarget.js

@@ -0,0 +0,0 @@ import { toggleClass } from '../dom';

dist/esm/dnd/ghost.d.ts

 export declare function addGhostImage(dataTransfer: DataTransfer, ghostElement: HTMLElement): void;
 //# sourceMappingURL=ghost.d.ts.map

dist/esm/dnd/ghost.js

@@ -0,0 +0,0 @@ import { addClasses, removeClasses } from '../dom';

dist/esm/dnd/groupDragHandler.d.ts

@@ -0,1 +1,2 @@
+import { DockviewComponent } from '../dockview/dockviewComponent';
 import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
@@ -5,9 +6,9 @@ import { IDisposable } from '../lifecycle';
 export declare class GroupDragHandler extends DragHandler {
-    private readonly accessorId;
+    private readonly accessor;
     private readonly group;
     private readonly panelTransfer;
-    constructor(element: HTMLElement, accessorId: string, group: DockviewGroupPanel);
+    constructor(element: HTMLElement, accessor: DockviewComponent, group: DockviewGroupPanel);
     isCancelled(_event: DragEvent): boolean;
-    getData(dataTransfer: DataTransfer | null): IDisposable;
+    getData(dragEvent: DragEvent): IDisposable;
 }
 //# sourceMappingURL=groupDragHandler.d.ts.map

dist/esm/dnd/groupDragHandler.js

@@ -7,5 +7,5 @@ import { quasiPreventDefault } from '../dom';
 export class GroupDragHandler extends DragHandler {
-    constructor(element, accessorId, group) {
+    constructor(element, accessor, group) {
         super(element);
-        this.accessorId = accessorId;
+        this.accessor = accessor;
         this.group = group;
@@ -30,4 +30,5 @@ this.panelTransfer = LocalSelectionTransfer.getInstance();
     }
-    getData(dataTransfer) {
-        this.panelTransfer.setData([new PanelTransfer(this.accessorId, this.group.id, null)], PanelTransfer.prototype);
+    getData(dragEvent) {
+        const dataTransfer = dragEvent.dataTransfer;
+        this.panelTransfer.setData([new PanelTransfer(this.accessor.id, this.group.id, null)], PanelTransfer.prototype);
         const style = window.getComputedStyle(this.el);
@@ -34,0 +35,0 @@ const bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');

dist/esm/dnd/overlay.d.ts

@@ -12,2 +12,4 @@ import { Event } from '../events';
     private static MINIMUM_WIDTH;
+    set minimumInViewportWidth(value: number | undefined);
+    set minimumInViewportHeight(value: number | undefined);
     constructor(options: {
@@ -14,0 +16,0 @@ height: number;

dist/esm/dnd/overlay.js

@@ -17,2 +17,8 @@ import { getElementsByTagName, quasiDefaultPrevented, toggleClass, } from '../dom';
 export class Overlay extends CompositeDisposable {
+    set minimumInViewportWidth(value) {
+        this.options.minimumInViewportWidth = value;
+    }
+    set minimumInViewportHeight(value) {
+        this.options.minimumInViewportHeight = value;
+    }
     constructor(options) {
@@ -65,3 +71,5 @@ super();
         // a minimum height of minimumViewportHeight must be inside the viewport
-        const yOffset = Math.max(0, this.getMinimumHeight(overlayRect.height));
+        const yOffset = typeof this.options.minimumInViewportHeight === 'number'
+            ? Math.max(0, this.getMinimumHeight(overlayRect.height))
+            : 0;
         const left = clamp(overlayRect.left - containerRect.left, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
@@ -189,8 +197,7 @@ const top = clamp(overlayRect.top - containerRect.top, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
                 let width = undefined;
-                const that = this;
-                function moveTop() {
+                const moveTop = () => {
                     top = clamp(y, -Number.MAX_VALUE, startPosition.originalY +
                         startPosition.originalHeight >
                         containerRect.height
-                        ? that.getMinimumHeight(containerRect.height)
+                        ? this.getMinimumHeight(containerRect.height)
                         : Math.max(0, startPosition.originalY +
@@ -203,17 +210,19 @@ startPosition.originalHeight -
                             top;
-                }
-                function moveBottom() {
+                };
+                const moveBottom = () => {
                     top =
                         startPosition.originalY -
                             startPosition.originalHeight;
-                    height = clamp(y - top, top < 0 && that.options.minimumInViewportHeight
+                    height = clamp(y - top, top < 0 &&
+                        typeof this.options
+                            .minimumInViewportHeight === 'number'
                         ? -top +
-                            that.options.minimumInViewportHeight
+                            this.options.minimumInViewportHeight
                         : Overlay.MINIMUM_HEIGHT, Number.MAX_VALUE);
-                }
-                function moveLeft() {
+                };
+                const moveLeft = () => {
                     left = clamp(x, -Number.MAX_VALUE, startPosition.originalX +
                         startPosition.originalWidth >
                         containerRect.width
-                        ? that.getMinimumWidth(containerRect.width)
+                        ? this.getMinimumWidth(containerRect.width)
                         : Math.max(0, startPosition.originalX +
@@ -226,12 +235,14 @@ startPosition.originalWidth -
                             left;
-                }
-                function moveRight() {
+                };
+                const moveRight = () => {
                     left =
                         startPosition.originalX -
                             startPosition.originalWidth;
-                    width = clamp(x - left, left < 0 && that.options.minimumInViewportWidth
+                    width = clamp(x - left, left < 0 &&
+                        typeof this.options
+                            .minimumInViewportWidth === 'number'
                         ? -left +
-                            that.options.minimumInViewportWidth
+                            this.options.minimumInViewportWidth
                         : Overlay.MINIMUM_WIDTH, Number.MAX_VALUE);
-                }
+                };
                 switch (direction) {
@@ -238,0 +249,0 @@ case 'top':

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

@@ -0,0 +0,0 @@ import { CompositeDisposable, IDisposable } from '../../../lifecycle';

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

@@ -0,0 +0,0 @@ import { CompositeDisposable, MutableDisposable, } from '../../../lifecycle';

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

@@ -0,0 +0,0 @@ import { CompositeDisposable } from '../../../lifecycle';

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

@@ -0,0 +0,0 @@ import { CompositeDisposable } from '../../../lifecycle';

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

@@ -7,4 +7,5 @@ import { Event } from '../../../events';
 import { DroptargetEvent } from '../../../dnd/droptarget';
+import { IDockviewPanel } from '../../dockviewPanel';
 export interface ITab extends IDisposable {
-    readonly panelId: string;
+    readonly panel: IDockviewPanel;
     readonly element: HTMLElement;
@@ -17,3 +18,3 @@ setContent: (element: ITabRenderer) => void;
 export declare class Tab extends CompositeDisposable implements ITab {
-    readonly panelId: string;
+    readonly panel: IDockviewPanel;
     private readonly accessor;
@@ -23,3 +24,3 @@ private readonly group;
     private readonly droptarget;
-    private content?;
+    private content;
     private readonly _onChanged;
@@ -29,4 +30,6 @@ readonly onChanged: Event<MouseEvent>;
     readonly onDrop: Event<DroptargetEvent>;
+    private readonly _onDragStart;
+    readonly onDragStart: Event<DragEvent>;
     get element(): HTMLElement;
-    constructor(panelId: string, accessor: DockviewComponent, group: DockviewGroupPanel);
+    constructor(panel: IDockviewPanel, accessor: DockviewComponent, group: DockviewGroupPanel);
     setActive(isActive: boolean): void;
@@ -33,0 +36,0 @@ setContent(part: ITabRenderer): void;

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

@@ -8,2 +8,19 @@ import { addDisposableListener, Emitter } from '../../../events';
 import { DragHandler } from '../../../dnd/abstractDragHandler';
+class TabDragHandler extends DragHandler {
+    constructor(element, accessor, group, panel) {
+        super(element);
+        this.accessor = accessor;
+        this.group = group;
+        this.panel = panel;
+        this.panelTransfer = LocalSelectionTransfer.getInstance();
+    }
+    getData(event) {
+        this.panelTransfer.setData([new PanelTransfer(this.accessor.id, this.group.id, this.panel.id)], PanelTransfer.prototype);
+        return {
+            dispose: () => {
+                this.panelTransfer.clearData(PanelTransfer.prototype);
+            },
+        };
+    }
+}
 export class Tab extends CompositeDisposable {
@@ -13,7 +30,8 @@ get element() {
     }
-    constructor(panelId, accessor, group) {
+    constructor(panel, accessor, group) {
         super();
-        this.panelId = panelId;
+        this.panel = panel;
         this.accessor = accessor;
         this.group = group;
+        this.content = undefined;
         this._onChanged = new Emitter();
@@ -23,2 +41,4 @@ this.onChanged = this._onChanged.event;
         this.onDrop = this._onDropped.event;
+        this._onDragStart = new Emitter();
+        this.onDragStart = this._onDragStart.event;
         this._element = document.createElement('div');
@@ -29,22 +49,3 @@ this._element.className = 'tab';
         toggleClass(this.element, 'inactive-tab', true);
-        this.addDisposables(this._onChanged, this._onDropped, new (class Handler extends DragHandler {
-            constructor() {
-                super(...arguments);
-                this.panelTransfer = LocalSelectionTransfer.getInstance();
-            }
-            getData() {
-                this.panelTransfer.setData([new PanelTransfer(accessor.id, group.id, panelId)], PanelTransfer.prototype);
-                return {
-                    dispose: () => {
-                        this.panelTransfer.clearData(PanelTransfer.prototype);
-                    },
-                };
-            }
-        })(this._element));
-        this.addDisposables(addDisposableListener(this._element, 'mousedown', (event) => {
-            if (event.defaultPrevented) {
-                return;
-            }
-            this._onChanged.fire(event);
-        }));
+        const dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel);
         this.droptarget = new Droptarget(this._element, {
@@ -63,3 +64,3 @@ acceptedTargetZones: ['center'],
                     }
-                    return this.panelId !== data.panelId;
+                    return this.panel.id !== data.panelId;
                 }
@@ -69,3 +70,10 @@ return this.group.model.canDisplayOverlay(event, position, DockviewDropTargets.Tab);
         });
-        this.addDisposables(this.droptarget.onDrop((event) => {
+        this.addDisposables(this._onChanged, this._onDropped, this._onDragStart, dragHandler.onDragStart((event) => {
+            this._onDragStart.fire(event);
+        }), dragHandler, addDisposableListener(this._element, 'mousedown', (event) => {
+            if (event.defaultPrevented) {
+                return;
+            }
+            this._onChanged.fire(event);
+        }), this.droptarget.onDrop((event) => {
             this._onDropped.fire(event);
@@ -72,0 +80,0 @@ }), this.droptarget);

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

@@ -11,2 +11,10 @@ import { IDisposable, CompositeDisposable } from '../../../lifecycle';
 }
+export interface TabDragEvent {
+    readonly nativeEvent: DragEvent;
+    readonly panel: IDockviewPanel;
+}
+export interface GroupDragEvent {
+    readonly nativeEvent: DragEvent;
+    readonly group: DockviewGroupPanel;
+}
 export interface ITabsContainer extends IDisposable {
@@ -16,5 +24,8 @@ readonly element: HTMLElement;
     readonly size: number;
+    hidden: boolean;
     delete: (id: string) => void;
     indexOf: (id: string) => number;
     onDrop: Event<TabDropIndexEvent>;
+    onTabDragStart: Event<TabDragEvent>;
+    onGroupDragStart: Event<GroupDragEvent>;
     setActive: (isGroupActive: boolean) => void;
@@ -27,3 +38,3 @@ setActivePanel: (panel: IDockviewPanel) => void;
     setLeftActionsElement(element: HTMLElement | undefined): void;
-    hidden: boolean;
+    setPrefixActionsElement(element: HTMLElement | undefined): void;
     show(): void;
@@ -39,2 +50,3 @@ hide(): void;
     private readonly leftActionsContainer;
+    private readonly preActionsContainer;
     private readonly voidContainer;
@@ -45,5 +57,10 @@ private tabs;
     private leftActions;
+    private preActions;
     private _hidden;
     private readonly _onDrop;
     readonly onDrop: Event<TabDropIndexEvent>;
+    private readonly _onTabDragStart;
+    readonly onTabDragStart: Event<TabDragEvent>;
+    private readonly _onGroupDragStart;
+    readonly onGroupDragStart: Event<GroupDragEvent>;
     get panels(): string[];
@@ -57,2 +74,3 @@ get size(): number;
     setLeftActionsElement(element: HTMLElement | undefined): void;
+    setPrefixActionsElement(element: HTMLElement | undefined): void;
     get element(): HTMLElement;
@@ -59,0 +77,0 @@ isActive(tab: ITab): boolean;

dist/esm/dockview/components/titlebar/tabsContainer.js

@@ -8,3 +8,3 @@ import { CompositeDisposable, } from '../../../lifecycle';
     get panels() {
-        return this.tabs.map((_) => _.value.panelId);
+        return this.tabs.map((_) => _.value.panel.id);
     }
@@ -55,2 +55,15 @@ get size() {
     }
+    setPrefixActionsElement(element) {
+        if (this.preActions === element) {
+            return;
+        }
+        if (this.preActions) {
+            this.preActions.remove();
+            this.preActions = undefined;
+        }
+        if (element) {
+            this.preActionsContainer.appendChild(element);
+            this.preActions = element;
+        }
+    }
     get element() {
@@ -64,3 +77,3 @@ return this._element;
     indexOf(id) {
-        return this.tabs.findIndex((tab) => tab.value.panelId === id);
+        return this.tabs.findIndex((tab) => tab.value.panel.id === id);
     }
@@ -76,3 +89,7 @@ constructor(accessor, group) {
         this.onDrop = this._onDrop.event;
-        this.addDisposables(this._onDrop);
+        this._onTabDragStart = new Emitter();
+        this.onTabDragStart = this._onTabDragStart.event;
+        this._onGroupDragStart = new Emitter();
+        this.onGroupDragStart = this._onGroupDragStart.event;
+        this.addDisposables(this._onDrop, this._onTabDragStart, this._onGroupDragStart);
         this._element = document.createElement('div');
@@ -94,5 +111,8 @@ this._element.className = 'tabs-and-actions-container';
         this.leftActionsContainer.className = 'left-actions-container';
+        this.preActionsContainer = document.createElement('div');
+        this.preActionsContainer.className = 'pre-actions-container';
         this.tabContainer = document.createElement('div');
         this.tabContainer.className = 'tabs-container';
         this.voidContainer = new VoidContainer(this.accessor, this.group);
+        this._element.appendChild(this.preActionsContainer);
         this._element.appendChild(this.tabContainer);
@@ -102,3 +122,8 @@ this._element.appendChild(this.leftActionsContainer);
         this._element.appendChild(this.rightActionsContainer);
-        this.addDisposables(this.voidContainer, this.voidContainer.onDrop((event) => {
+        this.addDisposables(this.voidContainer, this.voidContainer.onDragStart((event) => {
+            this._onGroupDragStart.fire({
+                nativeEvent: event,
+                group: this.group,
+            });
+        }), this.voidContainer.onDrop((event) => {
             this._onDrop.fire({
@@ -149,3 +174,3 @@ event: event.nativeEvent,
     delete(id) {
-        const index = this.tabs.findIndex((tab) => tab.value.panelId === id);
+        const index = this.tabs.findIndex((tab) => tab.value.panel.id === id);
         const tabToRemove = this.tabs.splice(index, 1)[0];
@@ -159,3 +184,3 @@ const { value, disposable } = tabToRemove;
         this.tabs.forEach((tab) => {
-            const isActivePanel = panel.id === tab.value.panelId;
+            const isActivePanel = panel.id === tab.value.panel.id;
             tab.value.setActive(isActivePanel);
@@ -166,11 +191,13 @@ });
         var _a;
-        if (this.tabs.find((tab) => tab.value.panelId === panel.id)) {
+        if (this.tabs.find((tab) => tab.value.panel.id === panel.id)) {
             return;
         }
-        const tabToAdd = new Tab(panel.id, this.accessor, this.group);
+        const tab = new Tab(panel, this.accessor, this.group);
         if (!((_a = panel.view) === null || _a === void 0 ? void 0 : _a.tab)) {
             throw new Error('invalid header component');
         }
-        tabToAdd.setContent(panel.view.tab);
-        const disposable = CompositeDisposable.from(tabToAdd.onChanged((event) => {
+        tab.setContent(panel.view.tab);
+        const disposable = new CompositeDisposable(tab.onDragStart((event) => {
+            this._onTabDragStart.fire({ nativeEvent: event, panel });
+        }), tab.onChanged((event) => {
             var _a;
@@ -183,4 +210,4 @@ const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
                 event.preventDefault();
-                const panel = this.accessor.getGroupPanel(tabToAdd.panelId);
-                const { top, left } = tabToAdd.element.getBoundingClientRect();
+                const panel = this.accessor.getGroupPanel(tab.panel.id);
+                const { top, left } = tab.element.getBoundingClientRect();
                 const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
@@ -202,9 +229,9 @@ this.accessor.addFloatingGroup(panel, {
             });
-        }), tabToAdd.onDrop((event) => {
+        }), tab.onDrop((event) => {
             this._onDrop.fire({
                 event: event.nativeEvent,
-                index: this.tabs.findIndex((x) => x.value === tabToAdd),
+                index: this.tabs.findIndex((x) => x.value === tab),
             });
         }));
-        const value = { value: tabToAdd, disposable };
+        const value = { value: tab, disposable };
         this.addTab(value, index);
@@ -211,0 +238,0 @@ }

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

@@ -13,2 +13,4 @@ import { DroptargetEvent } from '../../../dnd/droptarget';
     readonly onDrop: Event<DroptargetEvent>;
+    private readonly _onDragStart;
+    readonly onDragStart: Event<DragEvent>;
     get element(): HTMLElement;
@@ -15,0 +17,0 @@ constructor(accessor: DockviewComponent, group: DockviewGroupPanel);

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

@@ -18,2 +18,4 @@ import { last } from '../../../array';
         this.onDrop = this._onDrop.event;
+        this._onDragStart = new Emitter();
+        this.onDragStart = this._onDragStart.event;
         this._element = document.createElement('div');
@@ -23,6 +25,6 @@ this._element.className = 'void-container';
         this._element.draggable = true;
-        this.addDisposables(this._onDrop, addDisposableListener(this._element, 'click', () => {
+        this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'click', () => {
             this.accessor.doSetGroupActive(this.group);
         }));
-        const handler = new GroupDragHandler(this._element, accessor.id, group);
+        const handler = new GroupDragHandler(this._element, accessor, group);
         this.voidDropTarget = new Droptarget(this._element, {
@@ -45,3 +47,5 @@ acceptedTargetZones: ['center'],
         });
-        this.addDisposables(handler, this.voidDropTarget.onDrop((event) => {
+        this.addDisposables(handler, handler.onDragStart((event) => {
+            this._onDragStart.fire(event);
+        }), this.voidDropTarget.onDrop((event) => {
             this._onDrop.fire(event);
@@ -48,0 +52,0 @@ }), this.voidDropTarget);

dist/esm/dockview/components/watermark/watermark.d.ts

@@ -0,0 +0,0 @@ import { IWatermarkRenderer, WatermarkRendererInitParameters } from '../../types';

dist/esm/dockview/components/watermark/watermark.js

@@ -0,0 +0,0 @@ import { addDisposableListener } from '../../../events';

dist/esm/dockview/deserializer.d.ts

@@ -0,0 +0,0 @@ import { GroupviewPanelState } from './types';

dist/esm/dockview/deserializer.js

@@ -0,0 +0,0 @@ import { DockviewPanel } from './dockviewPanel';

dist/esm/dockview/dockviewComponent.d.ts

@@ -14,2 +14,3 @@ import { SerializedGridObject } from '../gridview/gridview';
 import { DockviewFloatingGroupPanel, IDockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel';
+import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContainer';
 export interface PanelReference {
@@ -43,3 +44,3 @@ update: (event: {
 }
-export type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent' | 'defaultTabComponent' | 'createLeftHeaderActionsElement' | 'createRightHeaderActionsElement' | 'disableFloatingGroups' | 'floatingGroupsAlwaysWithinViewport'>;
+export type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent' | 'defaultTabComponent' | 'createLeftHeaderActionsElement' | 'createRightHeaderActionsElement' | 'createPrefixHeaderActionsElement' | 'disableFloatingGroups' | 'floatingGroupBounds'>;
 export interface DockviewDropEvent extends GroupviewDropEvent {
@@ -77,2 +78,4 @@ api: DockviewApi;
     readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>;
+    readonly onWillDragPanel: Event<TabDragEvent>;
+    readonly onWillDragGroup: Event<GroupDragEvent>;
     addFloatingGroup(item: IDockviewPanel | DockviewGroupPanel, coord?: {
@@ -89,2 +92,6 @@ x: number;
     private watermark;
+    private readonly _onWillDragPanel;
+    readonly onWillDragPanel: Event<TabDragEvent>;
+    private readonly _onWillDragGroup;
+    readonly onWillDragGroup: Event<GroupDragEvent>;
     private readonly _onDidDrop;
@@ -156,4 +163,3 @@ readonly onDidDrop: Event<DockviewDropEvent>;
     private findGroup;
-    dispose(): void;
 }
 //# sourceMappingURL=dockviewComponent.d.ts.map

dist/esm/dockview/dockviewComponent.js

@@ -22,2 +22,63 @@ import { getRelativeLocation, getGridLocation, } from '../gridview/gridview';
 import { DockviewFloatingGroupPanel, } from './dockviewFloatingGroupPanel';
+const DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
+function typeValidate3(data, path) {
+    if (typeof data.id !== 'string') {
+        throw new Error(`${path}.id must be a string`);
+    }
+    if (typeof data.activeView !== 'string' ||
+        typeof data.activeView !== 'undefined') {
+        throw new Error(`${path}.activeView must be a string of undefined`);
+    }
+}
+function typeValidate2(data, path) {
+    if (typeof data.size !== 'number' && typeof data.size !== 'undefined') {
+        throw new Error(`${path}.size must be a number or undefined`);
+    }
+    if (typeof data.visible !== 'boolean' &&
+        typeof data.visible !== 'undefined') {
+        throw new Error(`${path}.visible must be a boolean or undefined`);
+    }
+    if (data.type === 'leaf') {
+        if (typeof data.data !== 'object' ||
+            data.data === null ||
+            Array.isArray(data.data)) {
+            throw new Error('object must be a non-null object');
+        }
+        typeValidate3(data.data, `${path}.data`);
+    }
+    else if (data.type === 'branch') {
+        if (!Array.isArray(data.data)) {
+            throw new Error(`${path}.data must be an array`);
+        }
+    }
+    else {
+        throw new Error(`${path}.type must be onew of {'branch', 'leaf'}`);
+    }
+}
+function typeValidate(data) {
+    if (typeof data !== 'object' || data === null) {
+        throw new Error('object must be a non-null object');
+    }
+    const { grid, panels, activeGroup, floatingGroups } = data;
+    if (typeof grid !== 'object' || grid === null) {
+        throw new Error("'.grid' must be a non-null object");
+    }
+    if (typeof grid.height !== 'number') {
+        throw new Error("'.grid.height' must be a number");
+    }
+    if (typeof grid.width !== 'number') {
+        throw new Error("'.grid.width' must be a number");
+    }
+    if (typeof grid.root !== 'object' || grid.root === null) {
+        throw new Error("'.grid.root' must be a non-null object");
+    }
+    if (grid.root.type !== 'branch') {
+        throw new Error(".grid.root.type must be of type 'branch'");
+    }
+    if (grid.orientation !== Orientation.HORIZONTAL &&
+        grid.orientation !== Orientation.VERTICAL) {
+        throw new Error(`'.grid.width' must be one of {${Orientation.HORIZONTAL}, ${Orientation.VERTICAL}}`);
+    }
+    typeValidate2(grid.root, '.grid.root');
+}
 export class DockviewComponent extends BaseGrid {
@@ -53,2 +114,6 @@ get orientation() {
         this.watermark = null;
+        this._onWillDragPanel = new Emitter();
+        this.onWillDragPanel = this._onWillDragPanel.event;
+        this._onWillDragGroup = new Emitter();
+        this.onWillDragGroup = this._onWillDragGroup.event;
         this._onDidDrop = new Emitter();
@@ -66,3 +131,3 @@ this.onDidDrop = this._onDidDrop.event;
         toggleClass(this.gridview.element, 'dv-dockview', true);
-        this.addDisposables(this._onDidDrop, Event.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
+        this.addDisposables(this._onWillDragPanel, this._onWillDragGroup, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, Event.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
             this.updateWatermark();
@@ -140,3 +205,3 @@ }), Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
     addFloatingGroup(item, coord, options) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f;
         let group;
@@ -169,10 +234,8 @@ if (item instanceof DockviewPanel) {
             top: overlayTop,
-            minimumInViewportWidth: this.options
-                .floatingGroupsAlwaysWithinViewport
+            minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
                 ? undefined
-                : 100,
-            minimumInViewportHeight: this.options
-                .floatingGroupsAlwaysWithinViewport
+                : (_d = (_c = this.options.floatingGroupBounds) === null || _c === void 0 ? void 0 : _c.minimumWidthWithinViewport) !== null && _d !== void 0 ? _d : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
+            minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
                 ? undefined
-                : 100,
+                : (_f = (_e = this.options.floatingGroupBounds) === null || _e === void 0 ? void 0 : _e.minimumHeightWithinViewport) !== null && _f !== void 0 ? _f : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
         });
@@ -250,4 +313,7 @@ const el = group.element.querySelector('.void-container');
     updateOptions(options) {
+        var _a, _b;
         const hasOrientationChanged = typeof options.orientation === 'string' &&
             this.gridview.orientation !== options.orientation;
+        const hasFloatingGroupOptionsChanged = options.floatingGroupBounds !== undefined &&
+            options.floatingGroupBounds !== this.options.floatingGroupBounds;
         this._options = Object.assign(Object.assign({}, this.options), options);
@@ -257,2 +323,24 @@ if (hasOrientationChanged) {
         }
+        if (hasFloatingGroupOptionsChanged) {
+            for (const group of this.floatingGroups) {
+                switch (this.options.floatingGroupBounds) {
+                    case 'boundedWithinViewport':
+                        group.overlay.minimumInViewportHeight = undefined;
+                        group.overlay.minimumInViewportWidth = undefined;
+                        break;
+                    case undefined:
+                        group.overlay.minimumInViewportHeight =
+                            DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
+                        group.overlay.minimumInViewportWidth =
+                            DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
+                        break;
+                    default:
+                        group.overlay.minimumInViewportHeight =
+                            (_a = this.options.floatingGroupBounds) === null || _a === void 0 ? void 0 : _a.minimumHeightWithinViewport;
+                        group.overlay.minimumInViewportWidth =
+                            (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport;
+                }
+                group.overlay.setBounds({});
+            }
+        }
         this.layout(this.gridview.width, this.gridview.height, true);
@@ -350,2 +438,5 @@ }
         this.clear();
+        if (typeof data !== 'object' || data === null) {
+            throw new Error('serialized layout must be a non-null object');
+        }
         const { grid, panels, activeGroup } = data;
@@ -355,53 +446,103 @@ if (grid.root.type !== 'branch' || !Array.isArray(grid.root.data)) {
         }
-        // take note of the existing dimensions
-        const width = this.width;
-        const height = this.height;
-        const createGroupFromSerializedState = (data) => {
-            const { id, locked, hideHeader, views, activeView } = data;
-            const group = this.createGroup({
-                id,
-                locked: !!locked,
-                hideHeader: !!hideHeader,
+        try {
+            // take note of the existing dimensions
+            const width = this.width;
+            const height = this.height;
+            const createGroupFromSerializedState = (data) => {
+                const { id, locked, hideHeader, views, activeView } = data;
+                if (typeof id !== 'string') {
+                    throw new Error('group id must be of type string');
+                }
+                const group = this.createGroup({
+                    id,
+                    locked: !!locked,
+                    hideHeader: !!hideHeader,
+                });
+                const createdPanels = [];
+                for (const child of views) {
+                    /**
+                     * Run the deserializer step seperately since this may fail to due corrupted external state.
+                     * In running this section first we avoid firing lots of 'add' events in the event of a failure
+                     * due to a corruption of input data.
+                     */
+                    const panel = this._deserializer.fromJSON(panels[child], group);
+                    createdPanels.push(panel);
+                }
+                this._onDidAddGroup.fire(group);
+                for (let i = 0; i < views.length; i++) {
+                    const panel = createdPanels[i];
+                    const isActive = typeof activeView === 'string' &&
+                        activeView === panel.id;
+                    group.model.openPanel(panel, {
+                        skipSetPanelActive: !isActive,
+                        skipSetGroupActive: true,
+                    });
+                }
+                if (!group.activePanel && group.panels.length > 0) {
+                    group.model.openPanel(group.panels[group.panels.length - 1], {
+                        skipSetGroupActive: true,
+                    });
+                }
+                return group;
+            };
+            this.gridview.deserialize(grid, {
+                fromJSON: (node) => {
+                    return createGroupFromSerializedState(node.data);
+                },
             });
-            this._onDidAddGroup.fire(group);
-            for (const child of views) {
-                const panel = this._deserializer.fromJSON(panels[child], group);
-                const isActive = typeof activeView === 'string' && activeView === panel.id;
-                group.model.openPanel(panel, {
-                    skipSetPanelActive: !isActive,
-                    skipSetGroupActive: true,
-                });
+            this.layout(width, height, true);
+            const serializedFloatingGroups = (_a = data.floatingGroups) !== null && _a !== void 0 ? _a : [];
+            for (const serializedFloatingGroup of serializedFloatingGroups) {
+                const { data, position } = serializedFloatingGroup;
+                const group = createGroupFromSerializedState(data);
+                this.addFloatingGroup(group, {
+                    x: position.left,
+                    y: position.top,
+                    height: position.height,
+                    width: position.width,
+                }, { skipRemoveGroup: true, inDragMode: false });
             }
-            if (!group.activePanel && group.panels.length > 0) {
-                group.model.openPanel(group.panels[group.panels.length - 1], {
-                    skipSetGroupActive: true,
-                });
+            for (const floatingGroup of this.floatingGroups) {
+                floatingGroup.overlay.setBounds();
             }
-            return group;
-        };
-        this.gridview.deserialize(grid, {
-            fromJSON: (node) => {
-                return createGroupFromSerializedState(node.data);
-            },
-        });
-        this.layout(width, height, true);
-        const serializedFloatingGroups = (_a = data.floatingGroups) !== null && _a !== void 0 ? _a : [];
-        for (const serializedFloatingGroup of serializedFloatingGroups) {
-            const { data, position } = serializedFloatingGroup;
-            const group = createGroupFromSerializedState(data);
-            this.addFloatingGroup(group, {
-                x: position.left,
-                y: position.top,
-                height: position.height,
-                width: position.width,
-            }, { skipRemoveGroup: true, inDragMode: false });
+            if (typeof activeGroup === 'string') {
+                const panel = this.getPanel(activeGroup);
+                if (panel) {
+                    this.doSetGroupActive(panel);
+                }
+            }
         }
-        for (const floatingGroup of this.floatingGroups) {
-            floatingGroup.overlay.setBounds();
-        }
-        if (typeof activeGroup === 'string') {
-            const panel = this.getPanel(activeGroup);
-            if (panel) {
-                this.doSetGroupActive(panel);
+        catch (err) {
+            /**
+             * Takes all the successfully created groups and remove all of their panels.
+             */
+            for (const group of this.groups) {
+                for (const panel of group.panels) {
+                    this.removePanel(panel, {
+                        removeEmptyGroup: false,
+                        skipDispose: false,
+                    });
+                }
             }
+            /**
+             * To remove a group we cannot call this.removeGroup(...) since this makes assumptions about
+             * the underlying HTMLElement existing in the Gridview.
+             */
+            for (const group of this.groups) {
+                group.dispose();
+                this._groups.delete(group.id);
+                this._onDidRemoveGroup.fire(group);
+            }
+            // iterate over a reassigned array since original array will be modified
+            for (const floatingGroup of [...this.floatingGroups]) {
+                floatingGroup.dispose();
+            }
+            // fires clean-up events and clears the underlying HTML gridview.
+            this.clear();
+            /**
+             * even though we have cleaned-up we still want to inform the caller of their error
+             * and we'll do this through re-throwing the original error since afterall you would
+             * expect trying to load a corrupted layout to result in an error and not silently fail...
+             */
+            throw err;
         }
@@ -620,2 +761,3 @@ this._onDidLayoutFromJSON.fire();
                 this._groups.delete(group.id);
+                // TODO: fire group removed event?
             }
@@ -743,3 +885,7 @@ floatingGroup.dispose();
         if (!this._groups.has(view.id)) {
-            const disposable = new CompositeDisposable(view.model.onMove((event) => {
+            const disposable = new CompositeDisposable(view.model.onTabDragStart((event) => {
+                this._onWillDragPanel.fire(event);
+            }), view.model.onGroupDragStart((event) => {
+                this._onWillDragGroup.fire(event);
+            }), view.model.onMove((event) => {
                 const { groupId, itemId, target, index } = event;
@@ -783,10 +929,3 @@ this.moveGroupOrPanel(view, groupId, itemId, target, index);
     }
-    dispose() {
-        this._onDidActivePanelChange.dispose();
-        this._onDidAddPanel.dispose();
-        this._onDidRemovePanel.dispose();
-        this._onDidLayoutFromJSON.dispose();
-        super.dispose();
-    }
 }
 //# sourceMappingURL=dockviewComponent.js.map

dist/esm/dockview/dockviewFloatingGroupPanel.d.ts

@@ -0,0 +0,0 @@ import { Overlay } from '../dnd/overlay';

dist/esm/dockview/dockviewFloatingGroupPanel.js

@@ -0,0 +0,0 @@ import { CompositeDisposable } from '../lifecycle';

dist/esm/dockview/dockviewGroupPanel.d.ts

@@ -0,0 +0,0 @@ import { IFrameworkPart } from '../panel/types';

dist/esm/dockview/dockviewGroupPanel.js

@@ -0,0 +0,0 @@ import { DockviewGroupPanelModel, } from './dockviewGroupPanelModel';

dist/esm/dockview/dockviewGroupPanelModel.d.ts

@@ -8,2 +8,3 @@ import { PanelTransfer } from '../dnd/dataTransfer';
 import { IPanel, PanelInitParameters, PanelUpdateEvent } from '../panel/types';
+import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContainer';
 import { DockviewDropTargets } from './types';
@@ -111,2 +112,3 @@ import { DockviewGroupPanel } from './dockviewGroupPanel';
     private _leftHeaderActions;
+    private _prefixHeaderActions;
     private mostRecentlyUsed;
@@ -122,2 +124,6 @@ private readonly _onDidChange;
     readonly onDidDrop: Event<GroupviewDropEvent>;
+    private readonly _onTabDragStart;
+    readonly onTabDragStart: Event<TabDragEvent>;
+    private readonly _onGroupDragStart;
+    readonly onGroupDragStart: Event<GroupDragEvent>;
     private readonly _onDidAddPanel;
@@ -124,0 +130,0 @@ readonly onDidAddPanel: Event<GroupviewChangeEvent>;

dist/esm/dockview/dockviewGroupPanelModel.js

@@ -79,2 +79,6 @@ import { DockviewApi } from '../api/component.api';
         this.onDidDrop = this._onDidDrop.event;
+        this._onTabDragStart = new Emitter();
+        this.onTabDragStart = this._onTabDragStart.event;
+        this._onGroupDragStart = new Emitter();
+        this.onGroupDragStart = this._onGroupDragStart.event;
         this._onDidAddPanel = new Emitter();
@@ -120,3 +124,7 @@ this.onDidAddPanel = this._onDidAddPanel.event;
         this.locked = options.locked || false;
-        this.addDisposables(this.tabsContainer.onDrop((event) => {
+        this.addDisposables(this._onTabDragStart, this._onGroupDragStart, this.tabsContainer.onTabDragStart((event) => {
+            this._onTabDragStart.fire(event);
+        }), this.tabsContainer.onGroupDragStart((event) => {
+            this._onGroupDragStart.fire(event);
+        }), this.tabsContainer.onDrop((event) => {
             this.handleDropEvent(event.event, 'center', event.index);
@@ -165,2 +173,12 @@ }), this.contentContainer.onDidFocus(() => {
         }
+        if (this.accessor.options.createPrefixHeaderActionsElement) {
+            this._prefixHeaderActions =
+                this.accessor.options.createPrefixHeaderActionsElement(this.groupPanel);
+            this.addDisposables(this._prefixHeaderActions);
+            this._prefixHeaderActions.init({
+                containerApi: new DockviewApi(this.accessor),
+                api: this.groupPanel.api,
+            });
+            this.tabsContainer.setPrefixActionsElement(this._prefixHeaderActions.element);
+        }
     }
@@ -167,0 +185,0 @@ indexOf(panel) {

dist/esm/dockview/dockviewPanel.d.ts

@@ -0,0 +0,0 @@ import { DockviewApi } from '../api/component.api';

dist/esm/dockview/dockviewPanel.js

@@ -0,0 +0,0 @@ import { DockviewPanelApiImpl, } from '../api/dockviewPanelApi';

dist/esm/dockview/dockviewPanelModel.d.ts

@@ -0,0 +0,0 @@ import { GroupPanelPartInitParameters, IContentRenderer, ITabRenderer } from './types';

dist/esm/dockview/dockviewPanelModel.js

@@ -0,0 +0,0 @@ import { DefaultTab } from './components/tab/defaultTab';

dist/esm/dockview/options.d.ts

@@ -70,6 +70,10 @@ import { DockviewApi } from '../api/component.api';
     createLeftHeaderActionsElement?: (group: DockviewGroupPanel) => IHeaderActionsRenderer;
+    createPrefixHeaderActionsElement?: (group: DockviewGroupPanel) => IHeaderActionsRenderer;
     singleTabMode?: 'fullwidth' | 'default';
     parentElement?: HTMLElement;
     disableFloatingGroups?: boolean;
-    floatingGroupsAlwaysWithinViewport?: boolean;
+    floatingGroupBounds?: 'boundedWithinViewport' | {
+        minimumHeightWithinViewport?: number;
+        minimumWidthWithinViewport?: number;
+    };
 }
@@ -76,0 +80,0 @@ export interface PanelOptions<P extends object = Parameters> {

dist/esm/dockview/options.js

@@ -0,0 +0,0 @@ export function isPanelOptionsWithPanel(data) {

dist/esm/dockview/types.d.ts

@@ -0,0 +0,0 @@ import { IDockviewComponent } from './dockviewComponent';

dist/esm/dockview/types.js

@@ -0,0 +0,0 @@ export var DockviewDropTargets;

dist/esm/dom.d.ts

@@ -0,0 +0,0 @@ import { Event as DockviewEvent } from './events';

dist/esm/dom.js

@@ -0,0 +0,0 @@ import { Emitter, addDisposableListener, addDisposableWindowListener, } from './events';

dist/esm/events.d.ts

@@ -0,0 +0,0 @@ import { IDisposable } from './lifecycle';

dist/esm/events.js

@@ -0,0 +0,0 @@ export var Event;

dist/esm/gridview/baseComponentGridview.d.ts

@@ -52,3 +52,3 @@ import { Emitter, Event, TickDelayedEvent } from '../events';
     readonly onDidLayoutChange: Event<void>;
-    private readonly _onDidRemoveGroup;
+    protected readonly _onDidRemoveGroup: Emitter<T>;
     readonly onDidRemoveGroup: Event<T>;
@@ -55,0 +55,0 @@ protected readonly _onDidAddGroup: Emitter<T>;

dist/esm/gridview/baseComponentGridview.js

@@ -0,0 +0,0 @@ import { Emitter, Event, TickDelayedEvent } from '../events';

dist/esm/gridview/basePanelView.d.ts

@@ -0,0 +0,0 @@ import { CompositeDisposable } from '../lifecycle';

dist/esm/gridview/basePanelView.js

@@ -0,0 +0,0 @@ import { trackFocus } from '../dom';

dist/esm/gridview/branchNode.d.ts

@@ -0,0 +0,0 @@ import { IView, Orientation, Sizing, LayoutPriority, ISplitviewStyles } from '../splitview/splitview';

dist/esm/gridview/branchNode.js

@@ -115,2 +115,3 @@ /*---------------------------------------------------------------------------------------------
                 proportionalLayout,
+                styles,
             });
@@ -117,0 +118,0 @@ }

dist/esm/gridview/gridview.d.ts

@@ -0,0 +0,0 @@ import { ISplitviewStyles, LayoutPriority, Orientation, Sizing } from '../splitview/splitview';

dist/esm/gridview/gridview.js

@@ -415,2 +415,10 @@ /*---------------------------------------------------------------------------------------------
             }
+            /**
+             * clean down the branch node since we need to dipose of it and
+             * when .dispose() it called on a branch it will dispose of any
+             * views it is holding onto.
+             */
+            while (sibling.children.length > 0) {
+                sibling.removeChild(0);
+            }
         }
@@ -417,0 +425,0 @@ else {

dist/esm/gridview/gridviewComponent.d.ts

@@ -0,0 +0,0 @@ import { SerializedGridview } from './gridview';

dist/esm/gridview/gridviewComponent.js

@@ -80,39 +80,60 @@ import { getRelativeLocation, getGridLocation, } from './gridview';
         const { grid, activePanel } = serializedGridview;
-        const queue = [];
-        // take note of the existing dimensions
-        const width = this.width;
-        const height = this.height;
-        this.gridview.deserialize(grid, {
-            fromJSON: (node) => {
-                const { data } = node;
-                const view = createComponent(data.id, data.component, this.options.components || {}, this.options.frameworkComponents || {}, this.options.frameworkComponentFactory
-                    ? {
-                        createComponent: this.options.frameworkComponentFactory
-                            .createComponent,
-                    }
-                    : undefined);
-                queue.push(() => view.init({
-                    params: data.params,
-                    minimumWidth: data.minimumWidth,
-                    maximumWidth: data.maximumWidth,
-                    minimumHeight: data.minimumHeight,
-                    maximumHeight: data.maximumHeight,
-                    priority: data.priority,
-                    snap: !!data.snap,
-                    accessor: this,
-                    isVisible: node.visible,
-                }));
-                this._onDidAddGroup.fire(view);
-                this.registerPanel(view);
-                return view;
-            },
-        });
-        this.layout(width, height, true);
-        queue.forEach((f) => f());
-        if (typeof activePanel === 'string') {
-            const panel = this.getPanel(activePanel);
-            if (panel) {
-                this.doSetGroupActive(panel);
+        try {
+            const queue = [];
+            // take note of the existing dimensions
+            const width = this.width;
+            const height = this.height;
+            this.gridview.deserialize(grid, {
+                fromJSON: (node) => {
+                    const { data } = node;
+                    const view = createComponent(data.id, data.component, this.options.components || {}, this.options.frameworkComponents || {}, this.options.frameworkComponentFactory
+                        ? {
+                            createComponent: this.options.frameworkComponentFactory
+                                .createComponent,
+                        }
+                        : undefined);
+                    queue.push(() => view.init({
+                        params: data.params,
+                        minimumWidth: data.minimumWidth,
+                        maximumWidth: data.maximumWidth,
+                        minimumHeight: data.minimumHeight,
+                        maximumHeight: data.maximumHeight,
+                        priority: data.priority,
+                        snap: !!data.snap,
+                        accessor: this,
+                        isVisible: node.visible,
+                    }));
+                    this._onDidAddGroup.fire(view);
+                    this.registerPanel(view);
+                    return view;
+                },
+            });
+            this.layout(width, height, true);
+            queue.forEach((f) => f());
+            if (typeof activePanel === 'string') {
+                const panel = this.getPanel(activePanel);
+                if (panel) {
+                    this.doSetGroupActive(panel);
+                }
             }
         }
+        catch (err) {
+            /**
+             * To remove a group we cannot call this.removeGroup(...) since this makes assumptions about
+             * the underlying HTMLElement existing in the Gridview.
+             */
+            for (const group of this.groups) {
+                group.dispose();
+                this._groups.delete(group.id);
+                this._onDidRemoveGroup.fire(group);
+            }
+            // fires clean-up events and clears the underlying HTML gridview.
+            this.clear();
+            /**
+             * even though we have cleaned-up we still want to inform the caller of their error
+             * and we'll do this through re-throwing the original error since afterall you would
+             * expect trying to load a corrupted layout to result in an error and not silently fail...
+             */
+            throw err;
+        }
         this._onDidLayoutfromJSON.fire();
@@ -119,0 +140,0 @@ }

dist/esm/gridview/gridviewPanel.d.ts

@@ -0,0 +0,0 @@ import { PanelInitParameters } from '../panel/types';

dist/esm/gridview/gridviewPanel.js

@@ -0,0 +0,0 @@ import { BasePanelView, } from './basePanelView';

dist/esm/gridview/leafNode.d.ts

@@ -0,0 +0,0 @@ import { IView, LayoutPriority, Orientation } from '../splitview/splitview';

dist/esm/gridview/leafNode.js

@@ -0,0 +0,0 @@ /*---------------------------------------------------------------------------------------------

dist/esm/gridview/options.d.ts

@@ -0,0 +0,0 @@ import { GridviewPanel } from './gridviewPanel';

dist/esm/gridview/options.js

 export {};
 //# sourceMappingURL=options.js.map

dist/esm/gridview/types.d.ts

@@ -0,0 +0,0 @@ import { BranchNode } from './branchNode';

dist/esm/gridview/types.js

 export {};
 //# sourceMappingURL=types.js.map

dist/esm/index.d.ts

@@ -19,2 +19,3 @@ export * from './dnd/dataTransfer';
 export * from './dockview/components/tab/tab';
+export { TabDragEvent, GroupDragEvent, } from './dockview/components/titlebar/tabsContainer';
 export * from './dockview/types';
@@ -21,0 +22,0 @@ export * from './dockview/dockviewGroupPanel';

dist/esm/index.js

@@ -0,0 +0,0 @@ export * from './dnd/dataTransfer';

dist/esm/lifecycle.d.ts

@@ -15,3 +15,2 @@ export interface IDisposable {
     protected get isDisposed(): boolean;
-    static from(...args: IDisposable[]): CompositeDisposable;
     constructor(...args: IDisposable[]);
@@ -18,0 +17,0 @@ addDisposables(...args: IDisposable[]): void;

dist/esm/lifecycle.js

@@ -13,5 +13,2 @@ export var Disposable;
     }
-    static from(...args) {
-        return new CompositeDisposable(...args);
-    }
     constructor(...args) {
@@ -18,0 +15,0 @@ this._isDisposed = false;

dist/esm/math.d.ts

@@ -0,0 +0,0 @@ export declare const clamp: (value: number, min: number, max: number) => number;

dist/esm/math.js

@@ -0,0 +0,0 @@ export const clamp = (value, min, max) => {

dist/esm/panel/componentFactory.d.ts

@@ -0,0 +0,0 @@ export interface FrameworkFactory<T> {

dist/esm/panel/componentFactory.js

@@ -0,0 +0,0 @@ export function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {

dist/esm/panel/types.d.ts

@@ -0,0 +0,0 @@ import { IDisposable } from '../lifecycle';

dist/esm/panel/types.js

 export {};
 //# sourceMappingURL=types.js.map

dist/esm/paneview/defaultPaneviewHeader.d.ts

@@ -0,0 +0,0 @@ import { PaneviewPanelApiImpl } from '../api/paneviewPanelApi';

dist/esm/paneview/defaultPaneviewHeader.js

@@ -0,0 +0,0 @@ import { addDisposableListener } from '../events';

dist/esm/paneview/draggablePaneviewPanel.d.ts

@@ -0,0 +0,0 @@ import { PaneviewApi } from '../api/component.api';

dist/esm/paneview/draggablePaneviewPanel.js

@@ -0,0 +0,0 @@ import { PaneviewApi } from '../api/component.api';

dist/esm/paneview/options.d.ts

@@ -0,0 +0,0 @@ import { FrameworkFactory } from '../panel/componentFactory';

dist/esm/paneview/options.js

 export {};
 //# sourceMappingURL=options.js.map

dist/esm/paneview/paneview.d.ts

@@ -0,0 +0,0 @@ import { Orientation, ISplitViewDescriptor, Sizing } from '../splitview/splitview';

dist/esm/paneview/paneview.js

@@ -0,0 +0,0 @@ import { Splitview, Orientation, } from '../splitview/splitview';

dist/esm/paneview/paneviewComponent.d.ts

@@ -0,0 +0,0 @@ import { Event } from '../events';

dist/esm/paneview/paneviewComponent.js

@@ -0,0 +0,0 @@ import { PaneviewApi } from '../api/component.api';

dist/esm/paneview/paneviewPanel.d.ts

@@ -0,0 +0,0 @@ import { PaneviewApi } from '../api/component.api';

dist/esm/paneview/paneviewPanel.js

@@ -0,0 +0,0 @@ import { PaneviewPanelApiImpl } from '../api/paneviewPanelApi';

dist/esm/resizable.d.ts

@@ -0,0 +0,0 @@ import { CompositeDisposable } from './lifecycle';

dist/esm/resizable.js

@@ -26,2 +26,10 @@ import { watchElementResize } from './dom';
             }
+            if (!document.body.contains(this._element)) {
+                /**
+                 * since the event is dispatched through requestAnimationFrame there is a small chance
+                 * the component is no longer attached to the DOM, if that is the case the dimensions
+                 * are mostly likely all zero and meaningless. we should skip this case.
+                 */
+                return;
+            }
             const { width, height } = entry.contentRect;
@@ -28,0 +36,0 @@ this.layout(width, height);

dist/esm/splitview/options.d.ts

@@ -0,0 +0,0 @@ import { IPanel, PanelInitParameters } from '../panel/types';

dist/esm/splitview/options.js

 export {};
 //# sourceMappingURL=options.js.map

dist/esm/splitview/splitview.d.ts

@@ -0,0 +0,0 @@ import { Event } from '../events';

dist/esm/splitview/splitview.js

@@ -293,3 +293,13 @@ /*---------------------------------------------------------------------------------------------
         item.size = size;
-        this.relayout([index]);
+        const indexes = range(this.viewItems.length).filter((i) => i !== index);
+        const lowPriorityIndexes = [
+            ...indexes.filter((i) => this.viewItems[i].priority === LayoutPriority.Low),
+            index,
+        ];
+        const highPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === LayoutPriority.High);
+        /**
+         * add this view we are changing to the low-index list since we have determined the size
+         * here and don't want it changed
+         */
+        this.relayout([...lowPriorityIndexes, index], highPriorityIndexes);
     }
@@ -296,0 +306,0 @@ addView(view, size = { type: 'distribute' }, index = this.viewItems.length, skipLayout) {

dist/esm/splitview/splitviewComponent.d.ts

@@ -0,0 +0,0 @@ import { IDisposable } from '../lifecycle';

dist/esm/splitview/splitviewComponent.js

@@ -0,0 +0,0 @@ import { CompositeDisposable, MutableDisposable, } from '../lifecycle';

dist/esm/splitview/splitviewPanel.d.ts

@@ -0,0 +0,0 @@ import { ISerializableView, PanelViewInitParameters } from './options';

dist/esm/splitview/splitviewPanel.js

@@ -0,0 +0,0 @@ import { BasePanelView, } from '../gridview/basePanelView';

dist/esm/splitview/viewItem.d.ts

@@ -0,0 +0,0 @@ import { IDisposable } from '../lifecycle';

dist/esm/splitview/viewItem.js

@@ -0,0 +0,0 @@ import { clamp } from '../math';

dist/esm/svg.d.ts

@@ -0,0 +0,0 @@ export declare const createCloseButton: () => SVGSVGElement;

dist/esm/svg.js

@@ -0,0 +0,0 @@ const createSvgElementFromPath = (params) => {

dist/esm/types.d.ts

 export type FunctionOrValue<T> = (() => T) | T;
 export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
 //# sourceMappingURL=types.d.ts.map

dist/esm/types.js

 export {};
 //# sourceMappingURL=types.js.map

package.json

 {
     "name": "dockview-core",
-    "version": "0.0.0-experimental-91e4e321-20230827",
+    "version": "0.0.0-experimental-dc50d4e-20231022",
     "description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
@@ -16,3 +16,16 @@ "main": "./dist/cjs/index.js",
     "homepage": "https://github.com/mathuo/dockview",
-    "scripts": {},
+    "scripts": {
+        "build:package": "npm run build:cjs && npm run build:esm && npm run build:css",
+        "build:cjs": "cross-env ../../node_modules/.bin/tsc --project ./tsconfig.json --extendedDiagnostics",
+        "build:css": "gulp sass",
+        "build:esm": "cross-env ../../node_modules/.bin/tsc --project ./tsconfig.esm.json --extendedDiagnostics",
+        "build:bundles": "rollup -c",
+        "build": "npm run build:package && npm run build:bundles",
+        "clean": "rimraf dist/ .build/ .rollup.cache/",
+        "prepublishOnly": "npm run rebuild && npm run test",
+        "docs": "typedoc",
+        "rebuild": "npm run clean && npm run build",
+        "test": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-core",
+        "test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-core --coverage"
+    },
     "files": [
@@ -52,5 +65,4 @@ "dist",
         "rollup": "^3.15.0",
-        "rollup-plugin-postcss": "^4.0.2",
-        "typedoc": "^0.23.25"
+        "rollup-plugin-postcss": "^4.0.2"
     }
 }

README.md

@@ -0,0 +0,0 @@ <div align="center">

No alert changes

Improved metrics

Total package byte prevSize

6997922

increased by3.81%

Dev dependency count

7

decreased by-12.5%

Lines of code

75554

increased by7.08%

No dependency changes