diff --git a/packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts b/packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts
index 1226b6cb2..475146b5f 100644
--- a/packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts
+++ b/packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts
@@ -5,6 +5,12 @@ import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
 
 describe('groupPanelApi', () => {
     test('title', () => {
+        const accessor: Partial<DockviewComponent> = {
+            onDidAddPanel: jest.fn(),
+            onDidRemovePanel: jest.fn(),
+            options: {},
+        };
+
         const panelMock = jest.fn<DockviewPanel, []>(() => {
             return {
                 update: jest.fn(),
@@ -18,7 +24,11 @@ describe('groupPanelApi', () => {
         const panel = new panelMock();
         const group = new groupMock();
 
-        const cut = new DockviewPanelApiImpl(panel, group);
+        const cut = new DockviewPanelApiImpl(
+            panel,
+            group,
+            <DockviewComponent>accessor
+        );
 
         cut.setTitle('test_title');
         expect(panel.setTitle).toBeCalledTimes(1);
@@ -44,7 +54,8 @@ describe('groupPanelApi', () => {
 
         const cut = new DockviewPanelApiImpl(
             <IDockviewPanel>groupPanel,
-            <DockviewGroupPanel>groupViewPanel
+            <DockviewGroupPanel>groupViewPanel,
+            <DockviewComponent>accessor
         );
 
         cut.updateParameters({ keyA: 'valueA' });
@@ -73,7 +84,8 @@ describe('groupPanelApi', () => {
 
         const cut = new DockviewPanelApiImpl(
             <IDockviewPanel>groupPanel,
-            <DockviewGroupPanel>groupViewPanel
+            <DockviewGroupPanel>groupViewPanel,
+            <DockviewComponent>accessor
         );
 
         let events = 0;
diff --git a/packages/dockview-core/src/__tests__/array.spec.ts b/packages/dockview-core/src/__tests__/array.spec.ts
index 9e3f0055a..3b48b83ed 100644
--- a/packages/dockview-core/src/__tests__/array.spec.ts
+++ b/packages/dockview-core/src/__tests__/array.spec.ts
@@ -3,6 +3,7 @@ import {
     last,
     pushToEnd,
     pushToStart,
+    remove,
     sequenceEquals,
     tail,
 } from '../array';
@@ -47,4 +48,22 @@ describe('array', () => {
         expect(sequenceEquals([1, 2, 3, 4], [1, 2, 3])).toBeFalsy();
         expect(sequenceEquals([1, 2, 3, 4], [1, 2, 3, 4, 5])).toBeFalsy();
     });
+
+    test('remove', () => {
+        const arr1 = [1, 2, 3, 4];
+        remove(arr1, 2);
+        expect(arr1).toEqual([1, 3, 4]);
+
+        const arr2 = [1, 2, 2, 3, 4];
+        remove(arr2, 2);
+        expect(arr2).toEqual([1, 2, 3, 4]);
+
+        const arr3 = [1];
+        remove(arr3, 2);
+        expect(arr3).toEqual([1]);
+        remove(arr3, 1);
+        expect(arr3).toEqual([]);
+        remove(arr3, 1);
+        expect(arr3).toEqual([]);
+    });
 });
diff --git a/packages/dockview-core/src/__tests__/dnd/abstractDragHandler.spec.ts b/packages/dockview-core/src/__tests__/dnd/abstractDragHandler.spec.ts
index 312916ae5..df57caa66 100644
--- a/packages/dockview-core/src/__tests__/dnd/abstractDragHandler.spec.ts
+++ b/packages/dockview-core/src/__tests__/dnd/abstractDragHandler.spec.ts
@@ -118,4 +118,62 @@ describe('abstractDragHandler', () => {
         expect(webview.style.pointerEvents).toBe('auto');
         expect(span.style.pointerEvents).toBeFalsy();
     });
+
+    test('that .preventDefault() is called for cancelled events', () => {
+        const element = document.createElement('div');
+
+        const handler = new (class TestClass extends DragHandler {
+            constructor(el: HTMLElement) {
+                super(el);
+            }
+
+            protected isCancelled(_event: DragEvent): boolean {
+                return true;
+            }
+
+            getData(): IDisposable {
+                return {
+                    dispose: () => {
+                        // /
+                    },
+                };
+            }
+        })(element);
+
+        const event = new Event('dragstart');
+        const spy = jest.spyOn(event, 'preventDefault');
+        fireEvent(element, event);
+        expect(spy).toBeCalledTimes(1);
+
+        handler.dispose();
+    });
+
+    test('that .preventDefault() is not called for non-cancelled events', () => {
+        const element = document.createElement('div');
+
+        const handler = new (class TestClass extends DragHandler {
+            constructor(el: HTMLElement) {
+                super(el);
+            }
+
+            protected isCancelled(_event: DragEvent): boolean {
+                return false;
+            }
+
+            getData(): IDisposable {
+                return {
+                    dispose: () => {
+                        // /
+                    },
+                };
+            }
+        })(element);
+
+        const event = new Event('dragstart');
+        const spy = jest.spyOn(event, 'preventDefault');
+        fireEvent(element, event);
+        expect(spy).toBeCalledTimes(0);
+
+        handler.dispose();
+    });
 });
diff --git a/packages/dockview-core/src/__tests__/dnd/droptarget.spec.ts b/packages/dockview-core/src/__tests__/dnd/droptarget.spec.ts
index 5875637ec..32de9729e 100644
--- a/packages/dockview-core/src/__tests__/dnd/droptarget.spec.ts
+++ b/packages/dockview-core/src/__tests__/dnd/droptarget.spec.ts
@@ -34,6 +34,48 @@ describe('droptarget', () => {
         jest.spyOn(element, 'clientWidth', 'get').mockImplementation(() => 200);
     });
 
+    test('that dragover events are marked', () => {
+        droptarget = new Droptarget(element, {
+            canDisplayOverlay: () => true,
+            acceptedTargetZones: ['center'],
+        });
+
+        fireEvent.dragEnter(element);
+        const event = new Event('dragover');
+        fireEvent(element, event);
+
+        expect(
+            (event as any)['__dockview_droptarget_event_is_used__']
+        ).toBeTruthy();
+    });
+
+    test('that the drop target is removed when receiving a marked dragover event', () => {
+        let position: Position | undefined = undefined;
+
+        droptarget = new Droptarget(element, {
+            canDisplayOverlay: () => true,
+            acceptedTargetZones: ['center'],
+        });
+
+        droptarget.onDrop((event) => {
+            position = event.position;
+        });
+
+        fireEvent.dragEnter(element);
+        fireEvent.dragOver(element);
+
+        const target = element.querySelector(
+            '.drop-target-dropzone'
+        ) as HTMLElement;
+        fireEvent.drop(target);
+        expect(position).toBe('center');
+
+        const event = new Event('dragover');
+        (event as any)['__dockview_droptarget_event_is_used__'] = true;
+        fireEvent(element, event);
+        expect(element.querySelector('.drop-target-dropzone')).toBeNull();
+    });
+
     test('directionToPosition', () => {
         expect(directionToPosition('above')).toBe('top');
         expect(directionToPosition('below')).toBe('bottom');
diff --git a/packages/dockview-core/src/__tests__/dnd/groupDragHandler.spec.ts b/packages/dockview-core/src/__tests__/dnd/groupDragHandler.spec.ts
new file mode 100644
index 000000000..b597f2fa5
--- /dev/null
+++ b/packages/dockview-core/src/__tests__/dnd/groupDragHandler.spec.ts
@@ -0,0 +1,101 @@
+import { fireEvent } from '@testing-library/dom';
+import { GroupDragHandler } from '../../dnd/groupDragHandler';
+import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
+import { LocalSelectionTransfer, PanelTransfer } from '../../dnd/dataTransfer';
+
+describe('groupDragHandler', () => {
+    test('that the dnd transfer object is setup and torndown', () => {
+        const element = document.createElement('div');
+
+        const groupMock = jest.fn<DockviewGroupPanel, []>(() => {
+            const partial: Partial<DockviewGroupPanel> = {
+                id: 'test_group_id',
+                api: { isFloating: false } as any,
+            };
+            return partial as DockviewGroupPanel;
+        });
+        const group = new groupMock();
+
+        const cut = new GroupDragHandler(element, 'test_accessor_id', group);
+
+        fireEvent.dragStart(element, new Event('dragstart'));
+
+        expect(
+            LocalSelectionTransfer.getInstance<PanelTransfer>().hasData(
+                PanelTransfer.prototype
+            )
+        ).toBeTruthy();
+        const transferObject =
+            LocalSelectionTransfer.getInstance<PanelTransfer>().getData(
+                PanelTransfer.prototype
+            )![0];
+        expect(transferObject).toBeTruthy();
+        expect(transferObject.viewId).toBe('test_accessor_id');
+        expect(transferObject.groupId).toBe('test_group_id');
+        expect(transferObject.panelId).toBeNull();
+
+        fireEvent.dragStart(element, new Event('dragend'));
+        expect(
+            LocalSelectionTransfer.getInstance<PanelTransfer>().hasData(
+                PanelTransfer.prototype
+            )
+        ).toBeFalsy();
+
+        cut.dispose();
+    });
+    test('that the event is cancelled when isFloating and shiftKey=true', () => {
+        const element = document.createElement('div');
+
+        const groupMock = jest.fn<DockviewGroupPanel, []>(() => {
+            const partial: Partial<DockviewGroupPanel> = {
+                api: { isFloating: true } as any,
+            };
+            return partial as DockviewGroupPanel;
+        });
+        const group = new groupMock();
+
+        const cut = new GroupDragHandler(element, 'accessor_id', group);
+
+        const event = new KeyboardEvent('dragstart', { shiftKey: false });
+
+        const spy = jest.spyOn(event, 'preventDefault');
+        fireEvent(element, event);
+        expect(spy).toBeCalledTimes(1);
+
+        const event2 = new KeyboardEvent('dragstart', { shiftKey: true });
+
+        const spy2 = jest.spyOn(event2, 'preventDefault');
+        fireEvent(element, event);
+        expect(spy2).toBeCalledTimes(0);
+
+        cut.dispose();
+    });
+
+    test('that the event is never cancelled when the group is not floating', () => {
+        const element = document.createElement('div');
+
+        const groupMock = jest.fn<DockviewGroupPanel, []>(() => {
+            const partial: Partial<DockviewGroupPanel> = {
+                api: { isFloating: false } as any,
+            };
+            return partial as DockviewGroupPanel;
+        });
+        const group = new groupMock();
+
+        const cut = new GroupDragHandler(element, 'accessor_id', group);
+
+        const event = new KeyboardEvent('dragstart', { shiftKey: false });
+
+        const spy = jest.spyOn(event, 'preventDefault');
+        fireEvent(element, event);
+        expect(spy).toBeCalledTimes(0);
+
+        const event2 = new KeyboardEvent('dragstart', { shiftKey: true });
+
+        const spy2 = jest.spyOn(event2, 'preventDefault');
+        fireEvent(element, event);
+        expect(spy2).toBeCalledTimes(0);
+
+        cut.dispose();
+    });
+});
diff --git a/packages/dockview-core/src/__tests__/dnd/overlay.spec.ts b/packages/dockview-core/src/__tests__/dnd/overlay.spec.ts
new file mode 100644
index 000000000..edc661a12
--- /dev/null
+++ b/packages/dockview-core/src/__tests__/dnd/overlay.spec.ts
@@ -0,0 +1,156 @@
+import { Overlay } from '../../dnd/overlay';
+
+describe('overlay', () => {
+    test('toJSON', () => {
+        const container = document.createElement('div');
+        const content = document.createElement('div');
+
+        document.body.appendChild(container);
+        container.appendChild(content);
+
+        const cut = new Overlay({
+            height: 200,
+            width: 100,
+            left: 10,
+            top: 20,
+            minimumInViewportWidth: 0,
+            minimumInViewportHeight: 0,
+            container,
+            content,
+        });
+
+        jest.spyOn(
+            container.childNodes.item(0) as HTMLElement,
+            'getBoundingClientRect'
+        ).mockImplementation(() => {
+            return { left: 80, top: 100, width: 40, height: 50 } as any;
+        });
+        jest.spyOn(container, 'getBoundingClientRect').mockImplementation(
+            () => {
+                return { left: 20, top: 30, width: 100, height: 100 } as any;
+            }
+        );
+
+        expect(cut.toJSON()).toEqual({
+            top: 70,
+            left: 60,
+            width: 40,
+            height: 50,
+        });
+    });
+
+    test('that out-of-bounds dimensions are fixed', () => {
+        const container = document.createElement('div');
+        const content = document.createElement('div');
+
+        document.body.appendChild(container);
+        container.appendChild(content);
+
+        const cut = new Overlay({
+            height: 200,
+            width: 100,
+            left: -1000,
+            top: -1000,
+            minimumInViewportWidth: 0,
+            minimumInViewportHeight: 0,
+            container,
+            content,
+        });
+
+        jest.spyOn(
+            container.childNodes.item(0) as HTMLElement,
+            'getBoundingClientRect'
+        ).mockImplementation(() => {
+            return { left: 80, top: 100, width: 40, height: 50 } as any;
+        });
+        jest.spyOn(container, 'getBoundingClientRect').mockImplementation(
+            () => {
+                return { left: 20, top: 30, width: 100, height: 100 } as any;
+            }
+        );
+
+        expect(cut.toJSON()).toEqual({
+            top: 70,
+            left: 60,
+            width: 40,
+            height: 50,
+        });
+    });
+
+    test('setBounds', () => {
+        const container = document.createElement('div');
+        const content = document.createElement('div');
+
+        document.body.appendChild(container);
+        container.appendChild(content);
+
+        const cut = new Overlay({
+            height: 1000,
+            width: 1000,
+            left: 0,
+            top: 0,
+            minimumInViewportWidth: 0,
+            minimumInViewportHeight: 0,
+            container,
+            content,
+        });
+
+        const element: HTMLElement = container.querySelector(
+            '.dv-resize-container'
+        )!;
+        expect(element).toBeTruthy();
+
+        jest.spyOn(element, 'getBoundingClientRect').mockImplementation(() => {
+            return { left: 300, top: 400, width: 1000, height: 1000 } as any;
+        });
+        jest.spyOn(container, 'getBoundingClientRect').mockImplementation(
+            () => {
+                return { left: 0, top: 0, width: 1000, height: 1000 } as any;
+            }
+        );
+
+        cut.setBounds({ height: 100, width: 200, left: 300, top: 400 });
+
+        expect(element.style.height).toBe('100px');
+        expect(element.style.width).toBe('200px');
+        expect(element.style.left).toBe('300px');
+        expect(element.style.top).toBe('400px');
+    });
+
+    test('that the resize handles are added', () => {
+        const container = document.createElement('div');
+        const content = document.createElement('div');
+
+        const cut = new Overlay({
+            height: 500,
+            width: 500,
+            left: 100,
+            top: 200,
+            minimumInViewportWidth: 0,
+            minimumInViewportHeight: 0,
+            container,
+            content,
+        });
+
+        expect(container.querySelector('.dv-resize-handle-top')).toBeTruthy();
+        expect(
+            container.querySelector('.dv-resize-handle-bottom')
+        ).toBeTruthy();
+        expect(container.querySelector('.dv-resize-handle-left')).toBeTruthy();
+        expect(container.querySelector('.dv-resize-handle-right')).toBeTruthy();
+        expect(
+            container.querySelector('.dv-resize-handle-topleft')
+        ).toBeTruthy();
+        expect(
+            container.querySelector('.dv-resize-handle-topright')
+        ).toBeTruthy();
+        expect(
+            container.querySelector('.dv-resize-handle-bottomleft')
+        ).toBeTruthy();
+        expect(
+            container.querySelector('.dv-resize-handle-bottomright')
+        ).toBeTruthy();
+
+        cut.dispose();
+    });
+});
diff --git a/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts b/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts
index 77efaca4c..5514500b3 100644
--- a/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts
+++ b/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts
@@ -8,6 +8,7 @@ import { DockviewGroupPanel } from '../../../../dockview/dockviewGroupPanel';
 import { DockviewGroupPanelModel } from '../../../../dockview/dockviewGroupPanelModel';
 import { fireEvent } from '@testing-library/dom';
 import { TestPanel } from '../../dockviewGroupPanelModel.spec';
+import { IDockviewPanel } from '../../../../dockview/dockviewPanel';
 
 describe('tabsContainer', () => {
     test('that an external event does not render a drop target and calls through to the group mode', () => {
@@ -463,4 +464,169 @@ describe('tabsContainer', () => {
         expect(query.length).toBe(1);
         expect(query[0].children.length).toBe(0);
     });
+
+    test('that a tab will become floating when clicked if not floating and shift is selected', () => {
+        const accessorMock = jest.fn<DockviewComponent, []>(() => {
+            return (<Partial<DockviewComponent>>{
+                options: {},
+                onDidAddPanel: jest.fn(),
+                onDidRemovePanel: jest.fn(),
+                element: document.createElement('div'),
+                addFloatingGroup: jest.fn(),
+            }) as DockviewComponent;
+        });
+
+        const groupPanelMock = jest.fn<DockviewGroupPanel, []>(() => {
+            return (<Partial<DockviewGroupPanel>>{
+                api: { isFloating: false } as any,
+            }) as DockviewGroupPanel;
+        });
+
+        const accessor = new accessorMock();
+        const groupPanel = new groupPanelMock();
+
+        const cut = new TabsContainer(accessor, groupPanel);
+
+        const container = cut.element.querySelector('.void-container')!;
+        expect(container).toBeTruthy();
+
+        jest.spyOn(cut.element, 'getBoundingClientRect').mockImplementation(
+            () => {
+                return { top: 50, left: 100, width: 0, height: 0 } as any;
+            }
+        );
+        jest.spyOn(
+            accessor.element,
+            'getBoundingClientRect'
+        ).mockImplementation(() => {
+            return { top: 10, left: 20, width: 0, height: 0 } as any;
+        });
+
+        const event = new KeyboardEvent('mousedown', { shiftKey: true });
+        const eventPreventDefaultSpy = jest.spyOn(event, 'preventDefault');
+        fireEvent(container, event);
+
+        expect(accessor.addFloatingGroup).toBeCalledWith(
+            groupPanel,
+            {
+                x: 100,
+                y: 60,
+            },
+            { inDragMode: true }
+        );
+        expect(accessor.addFloatingGroup).toBeCalledTimes(1);
+        expect(eventPreventDefaultSpy).toBeCalledTimes(1);
+
+        const event2 = new KeyboardEvent('mousedown', { shiftKey: false });
+        const eventPreventDefaultSpy2 = jest.spyOn(event2, 'preventDefault');
+        fireEvent(container, event2);
+
+        expect(accessor.addFloatingGroup).toBeCalledTimes(1);
+        expect(eventPreventDefaultSpy2).toBeCalledTimes(0);
+    });
+
+    test('that a tab that is already floating cannot be floated again', () => {
+        const accessorMock = jest.fn<DockviewComponent, []>(() => {
+            return (<Partial<DockviewComponent>>{
+                options: {},
+                onDidAddPanel: jest.fn(),
+                onDidRemovePanel: jest.fn(),
+                element: document.createElement('div'),
+                addFloatingGroup: jest.fn(),
+            }) as DockviewComponent;
+        });
+
+        const groupPanelMock = jest.fn<DockviewGroupPanel, []>(() => {
+            return (<Partial<DockviewGroupPanel>>{
+                api: { isFloating: true } as any,
+            }) as DockviewGroupPanel;
+        });
+
+        const accessor = new accessorMock();
+        const groupPanel = new groupPanelMock();
+
+        const cut = new TabsContainer(accessor, groupPanel);
+
+        const container = cut.element.querySelector('.void-container')!;
+        expect(container).toBeTruthy();
+
+        jest.spyOn(cut.element, 'getBoundingClientRect').mockImplementation(
+            () => {
+                return { top: 50, left: 100, width: 0, height: 0 } as any;
+            }
+        );
+        jest.spyOn(
+            accessor.element,
+            'getBoundingClientRect'
+        ).mockImplementation(() => {
+            return { top: 10, left: 20, width: 0, height: 0 } as any;
+        });
+
+        const event = new KeyboardEvent('mousedown', { shiftKey: true });
+        const eventPreventDefaultSpy = jest.spyOn(event, 'preventDefault');
+        fireEvent(container, event);
+
+        expect(accessor.addFloatingGroup).toBeCalledTimes(0);
+        expect(eventPreventDefaultSpy).toBeCalledTimes(0);
+
+        const event2 = new KeyboardEvent('mousedown', { shiftKey: false });
+        const eventPreventDefaultSpy2 = jest.spyOn(event2, 'preventDefault');
+        fireEvent(container, event2);
+
+        expect(accessor.addFloatingGroup).toBeCalledTimes(0);
+        expect(eventPreventDefaultSpy2).toBeCalledTimes(0);
+    });
+
+    test('that selecting a tab which shift down will move that tab into a new floating group', () => {
+        const accessorMock = jest.fn<DockviewComponent, []>(() => {
+            return (<Partial<DockviewComponent>>{
+                options: {},
+                onDidAddPanel: jest.fn(),
+                onDidRemovePanel: jest.fn(),
+                element: document.createElement('div'),
+                addFloatingGroup: jest.fn(),
+                getGroupPanel: jest.fn(),
+            }) as DockviewComponent;
+        });
+
+        const groupPanelMock = jest.fn<DockviewGroupPanel, []>(() => {
+            return (<Partial<DockviewGroupPanel>>{
+                api: { isFloating: true } as any,
+            }) as DockviewGroupPanel;
+        });
+
+        const accessor = new accessorMock();
+        const groupPanel = new groupPanelMock();
+
+        const cut = new TabsContainer(accessor, groupPanel);
+
+        const panelMock = jest.fn<IDockviewPanel, []>(() => {
+            const partial: Partial<IDockviewPanel> = {
+                id: 'test_id',
+
+                view: {
+                    tab: {
+                        element: document.createElement('div'),
+                    } as any,
+                    content: {
+                        element: document.createElement('div'),
+                    } as any,
+                } as any,
+            };
+            return partial as IDockviewPanel;
+        });
+        const panel = new panelMock();
+
+        cut.openPanel(panel);
+
+        const el = cut.element.querySelector('.tab')!;
+        expect(el).toBeTruthy();
+
+        const event = new KeyboardEvent('mousedown', { shiftKey: true });
+        const preventDefaultSpy = jest.spyOn(event, 'preventDefault');
+        fireEvent(el, event);
+
+        expect(preventDefaultSpy).toBeCalledTimes(1);
+        expect(accessor.addFloatingGroup).toBeCalledTimes(1);
+    });
 });
diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
index 8091ff768..778df49d6 100644
--- a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
+++ b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
@@ -2287,6 +2287,126 @@ describe('dockviewComponent', () => {
         });
     });
 
+    test('orthogonal realigment #4', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        dockview.layout(1000, 1000);
+
+        expect(dockview.orientation).toBe(Orientation.HORIZONTAL);
+
+        dockview.addPanel({
+            id: 'panel1',
+            component: 'default',
+            position: {
+                direction: 'above',
+            },
+        });
+
+        expect(dockview.orientation).toBe(Orientation.VERTICAL);
+
+        expect(JSON.parse(JSON.stringify(dockview.toJSON()))).toEqual({
+            activeGroup: '1',
+            grid: {
+                root: {
+                    type: 'branch',
+                    data: [
+                        {
+                            type: 'leaf',
+                            data: {
+                                views: ['panel1'],
+                                id: '1',
+                                activeView: 'panel1',
+                            },
+                            size: 1000,
+                        },
+                    ],
+                    size: 1000,
+                },
+                height: 1000,
+                width: 1000,
+                orientation: Orientation.VERTICAL,
+            },
+            panels: {
+                panel1: {
+                    id: 'panel1',
+                    contentComponent: 'default',
+                    title: 'panel1',
+                },
+            },
+        });
+    });
+
+    test('orthogonal realigment #5', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.VERTICAL,
+        });
+
+        dockview.layout(1000, 1000);
+
+        expect(dockview.orientation).toBe(Orientation.VERTICAL);
+
+        dockview.addPanel({
+            id: 'panel1',
+            component: 'default',
+            position: {
+                direction: 'left',
+            },
+        });
+
+        expect(dockview.orientation).toBe(Orientation.HORIZONTAL);
+
+        expect(JSON.parse(JSON.stringify(dockview.toJSON()))).toEqual({
+            activeGroup: '1',
+            grid: {
+                root: {
+                    type: 'branch',
+                    data: [
+                        {
+                            type: 'leaf',
+                            data: {
+                                views: ['panel1'],
+                                id: '1',
+                                activeView: 'panel1',
+                            },
+                            size: 1000,
+                        },
+                    ],
+                    size: 1000,
+                },
+                height: 1000,
+                width: 1000,
+                orientation: Orientation.HORIZONTAL,
+            },
+            panels: {
+                panel1: {
+                    id: 'panel1',
+                    contentComponent: 'default',
+                    title: 'panel1',
+                },
+            },
+        });
+    });
+
     test('that a empty component has no groups', () => {
         const container = document.createElement('div');
 
@@ -2619,4 +2739,1052 @@ describe('dockviewComponent', () => {
             },
         });
     });
+
+    test('floating: group is removed', async () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        dockview.layout(1000, 500);
+
+        expect(dockview.groups.length).toBe(0);
+        const panel = dockview.addPanel({
+            id: 'panel_1',
+            component: 'default',
+            floating: true,
+        });
+        expect(dockview.groups.length).toBe(1);
+
+        dockview.removePanel(panel);
+        expect(dockview.groups.length).toBe(0);
+    });
+
+    test('floating: move a floating group of one tab to a new fixed group', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        dockview.layout(1000, 500);
+
+        const panel1 = dockview.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        const panel2 = dockview.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            floating: true,
+        });
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(2);
+        expect(dockview.panels.length).toBe(2);
+
+        dockview.moveGroupOrPanel(
+            panel1.group,
+            panel2.group.id,
+            undefined,
+            'right'
+        );
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeFalsy();
+        expect(dockview.groups.length).toBe(2);
+        expect(dockview.panels.length).toBe(2);
+    });
+
+    test('floating: move a floating group of one tab to an existing fixed group', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        dockview.layout(1000, 500);
+
+        const panel1 = dockview.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        const panel2 = dockview.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            floating: true,
+        });
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(2);
+        expect(dockview.panels.length).toBe(2);
+
+        dockview.moveGroupOrPanel(
+            panel1.group,
+            panel2.group.id,
+            undefined,
+            'center'
+        );
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeFalsy();
+        expect(dockview.groups.length).toBe(1);
+        expect(dockview.panels.length).toBe(2);
+    });
+
+    test('floating: move a floating group of one tab to an existing floating group', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        dockview.layout(1000, 500);
+
+        const panel1 = dockview.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        const panel2 = dockview.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            floating: true,
+        });
+
+        const panel3 = dockview.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            floating: true,
+        });
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeTruthy();
+        expect(panel3.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(3);
+        expect(dockview.panels.length).toBe(3);
+
+        dockview.moveGroupOrPanel(
+            panel2.group,
+            panel3.group.id,
+            undefined,
+            'center'
+        );
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeTruthy();
+        expect(panel3.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(2);
+        expect(dockview.panels.length).toBe(3);
+    });
+
+    test('floating: move a floating group of many tabs to a new fixed group', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        dockview.layout(1000, 500);
+
+        const panel1 = dockview.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        const panel2 = dockview.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            floating: true,
+        });
+
+        const panel3 = dockview.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            position: { referencePanel: panel2 },
+        });
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeTruthy();
+        expect(panel3.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(2);
+        expect(dockview.panels.length).toBe(3);
+
+        dockview.moveGroupOrPanel(
+            panel1.group,
+            panel2.group.id,
+            undefined,
+            'right'
+        );
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeFalsy();
+        expect(panel3.group.api.isFloating).toBeFalsy();
+        expect(dockview.groups.length).toBe(2);
+        expect(dockview.panels.length).toBe(3);
+    });
+
+    test('floating: move a floating group of many tabs to an existing fixed group', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        dockview.layout(1000, 500);
+
+        const panel1 = dockview.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        const panel2 = dockview.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            floating: true,
+        });
+
+        const panel3 = dockview.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            position: { referencePanel: panel2 },
+        });
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeTruthy();
+        expect(panel3.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(2);
+        expect(dockview.panels.length).toBe(3);
+
+        dockview.moveGroupOrPanel(
+            panel1.group,
+            panel2.group.id,
+            undefined,
+            'center'
+        );
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeFalsy();
+        expect(panel3.group.api.isFloating).toBeFalsy();
+        expect(dockview.groups.length).toBe(1);
+        expect(dockview.panels.length).toBe(3);
+    });
+
+    test('floating: move a floating group of many tabs to an existing floating group', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        dockview.layout(1000, 500);
+
+        const panel1 = dockview.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        const panel2 = dockview.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            floating: true,
+        });
+
+        const panel3 = dockview.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            position: { referencePanel: panel2 },
+        });
+
+        const panel4 = dockview.addPanel({
+            id: 'panel_4',
+            component: 'default',
+            floating: true,
+        });
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeTruthy();
+        expect(panel3.group.api.isFloating).toBeTruthy();
+        expect(panel4.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(3);
+        expect(dockview.panels.length).toBe(4);
+
+        dockview.moveGroupOrPanel(
+            panel4.group,
+            panel2.group.id,
+            undefined,
+            'center'
+        );
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeTruthy();
+        expect(panel3.group.api.isFloating).toBeTruthy();
+        expect(panel4.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(2);
+        expect(dockview.panels.length).toBe(4);
+    });
+
+    test('floating: move a floating tab of one tab to a new fixed group', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        dockview.layout(1000, 500);
+
+        const panel1 = dockview.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        const panel2 = dockview.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            floating: true,
+        });
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(2);
+        expect(dockview.panels.length).toBe(2);
+
+        dockview.moveGroupOrPanel(
+            panel1.group,
+            panel2.group.id,
+            panel2.id,
+            'right'
+        );
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeFalsy();
+        expect(dockview.groups.length).toBe(2);
+        expect(dockview.panels.length).toBe(2);
+    });
+
+    test('floating: move a floating tab of one tab to an existing fixed group', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        dockview.layout(1000, 500);
+
+        const panel1 = dockview.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        const panel2 = dockview.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            floating: true,
+        });
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(2);
+        expect(dockview.panels.length).toBe(2);
+
+        dockview.moveGroupOrPanel(
+            panel1.group,
+            panel2.group.id,
+            panel2.id,
+            'center'
+        );
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeFalsy();
+        expect(dockview.groups.length).toBe(1);
+        expect(dockview.panels.length).toBe(2);
+    });
+
+    test('floating: move a floating tab of one tab to an existing floating group', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        dockview.layout(1000, 500);
+
+        const panel1 = dockview.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        const panel2 = dockview.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            floating: true,
+        });
+
+        const panel3 = dockview.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            floating: true,
+        });
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeTruthy();
+        expect(panel3.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(3);
+        expect(dockview.panels.length).toBe(3);
+
+        dockview.moveGroupOrPanel(
+            panel2.group,
+            panel3.group.id,
+            panel3.id,
+            'center'
+        );
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeTruthy();
+        expect(panel3.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(2);
+        expect(dockview.panels.length).toBe(3);
+    });
+
+    test('floating: move a floating tab of many tabs to a new fixed group', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        dockview.layout(1000, 500);
+
+        const panel1 = dockview.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        const panel2 = dockview.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            floating: true,
+        });
+
+        const panel3 = dockview.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            position: { referencePanel: panel2 },
+        });
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeTruthy();
+        expect(panel3.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(2);
+        expect(dockview.panels.length).toBe(3);
+
+        dockview.moveGroupOrPanel(
+            panel1.group,
+            panel2.group.id,
+            panel2.id,
+            'right'
+        );
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeFalsy();
+        expect(panel3.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(3);
+        expect(dockview.panels.length).toBe(3);
+    });
+
+    test('floating: move a floating tab of many tabs to an existing fixed group', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        dockview.layout(1000, 500);
+
+        const panel1 = dockview.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        const panel2 = dockview.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            floating: true,
+        });
+
+        const panel3 = dockview.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            position: { referencePanel: panel2 },
+        });
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeTruthy();
+        expect(panel3.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(2);
+        expect(dockview.panels.length).toBe(3);
+
+        dockview.moveGroupOrPanel(
+            panel1.group,
+            panel2.group.id,
+            panel2.id,
+            'center'
+        );
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeFalsy();
+        expect(panel3.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(2);
+        expect(dockview.panels.length).toBe(3);
+    });
+
+    test('floating: move a floating tab of many tabs to an existing floating group', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        dockview.layout(1000, 500);
+
+        const panel1 = dockview.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        const panel2 = dockview.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            floating: true,
+        });
+
+        const panel3 = dockview.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            position: { referencePanel: panel2 },
+        });
+
+        const panel4 = dockview.addPanel({
+            id: 'panel_4',
+            component: 'default',
+            floating: true,
+        });
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeTruthy();
+        expect(panel3.group.api.isFloating).toBeTruthy();
+        expect(panel4.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(3);
+        expect(dockview.panels.length).toBe(4);
+
+        dockview.moveGroupOrPanel(
+            panel4.group,
+            panel2.group.id,
+            panel2.id,
+            'center'
+        );
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeTruthy();
+        expect(panel3.group.api.isFloating).toBeTruthy();
+        expect(panel4.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(3);
+        expect(dockview.panels.length).toBe(4);
+    });
+
+    test('floating: move a fixed tab of one tab to an existing floating group', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        dockview.layout(1000, 500);
+
+        const panel1 = dockview.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        const panel2 = dockview.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            position: { direction: 'right' },
+        });
+
+        const panel3 = dockview.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            floating: true,
+        });
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeFalsy();
+        expect(panel3.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(3);
+        expect(dockview.panels.length).toBe(3);
+
+        dockview.moveGroupOrPanel(
+            panel3.group,
+            panel1.group.id,
+            panel1.id,
+            'center'
+        );
+
+        expect(panel1.group.api.isFloating).toBeTruthy();
+        expect(panel2.group.api.isFloating).toBeFalsy();
+        expect(panel3.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(2);
+        expect(dockview.panels.length).toBe(3);
+    });
+
+    test('floating: move a fixed tab of many tabs to an existing floating group', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        dockview.layout(1000, 500);
+
+        const panel1 = dockview.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        const panel2 = dockview.addPanel({
+            id: 'panel_2',
+            component: 'default',
+        });
+
+        const panel3 = dockview.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            floating: true,
+        });
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeFalsy();
+        expect(panel3.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(2);
+        expect(dockview.panels.length).toBe(3);
+
+        dockview.moveGroupOrPanel(
+            panel3.group,
+            panel1.group.id,
+            panel1.id,
+            'center'
+        );
+
+        expect(panel1.group.api.isFloating).toBeTruthy();
+        expect(panel2.group.api.isFloating).toBeFalsy();
+        expect(panel3.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(2);
+        expect(dockview.panels.length).toBe(3);
+    });
+
+    test('floating: move a fixed group of one tab to an existing floating group', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        dockview.layout(1000, 500);
+
+        const panel1 = dockview.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        const panel2 = dockview.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            position: { direction: 'right' },
+        });
+
+        const panel3 = dockview.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            floating: true,
+        });
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeFalsy();
+        expect(panel3.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(3);
+        expect(dockview.panels.length).toBe(3);
+
+        dockview.moveGroupOrPanel(
+            panel3.group,
+            panel1.group.id,
+            undefined,
+            'center'
+        );
+
+        expect(panel1.group.api.isFloating).toBeTruthy();
+        expect(panel2.group.api.isFloating).toBeFalsy();
+        expect(panel3.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(2);
+        expect(dockview.panels.length).toBe(3);
+    });
+
+    test('floating: move a fixed group of many tabs to an existing floating group', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        dockview.layout(1000, 500);
+
+        const panel1 = dockview.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        const panel2 = dockview.addPanel({
+            id: 'panel_2',
+            component: 'default',
+        });
+
+        const panel3 = dockview.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            floating: true,
+        });
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeFalsy();
+        expect(panel3.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(2);
+        expect(dockview.panels.length).toBe(3);
+
+        dockview.moveGroupOrPanel(
+            panel3.group,
+            panel1.group.id,
+            undefined,
+            'center'
+        );
+
+        expect(panel1.group.api.isFloating).toBeTruthy();
+        expect(panel2.group.api.isFloating).toBeTruthy();
+        expect(panel3.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(1);
+        expect(dockview.panels.length).toBe(3);
+    });
+
+    test('floating: move a fixed tab of one tab to a new floating group', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        dockview.layout(1000, 500);
+
+        const panel1 = dockview.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        const panel2 = dockview.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            position: { direction: 'right' },
+        });
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeFalsy();
+        expect(dockview.groups.length).toBe(2);
+        expect(dockview.panels.length).toBe(2);
+
+        dockview.addFloatingGroup(panel2);
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(2);
+        expect(dockview.panels.length).toBe(2);
+    });
+
+    test('floating: move a fixed tab of many tabs to a new floating group', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        dockview.layout(1000, 500);
+
+        const panel1 = dockview.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        const panel2 = dockview.addPanel({
+            id: 'panel_2',
+            component: 'default',
+        });
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeFalsy();
+        expect(dockview.groups.length).toBe(1);
+        expect(dockview.panels.length).toBe(2);
+
+        dockview.addFloatingGroup(panel2);
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(2);
+        expect(dockview.panels.length).toBe(2);
+    });
+
+    test('floating: move a fixed group of one tab to a new floating group', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        dockview.layout(1000, 500);
+
+        const panel1 = dockview.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        const panel2 = dockview.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            position: { direction: 'right' },
+        });
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeFalsy();
+        expect(dockview.groups.length).toBe(2);
+        expect(dockview.panels.length).toBe(2);
+
+        dockview.addFloatingGroup(panel2.group);
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(2);
+        expect(dockview.panels.length).toBe(2);
+    });
+
+    test('floating: move a fixed group of many tabs to a new floating group', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        dockview.layout(1000, 500);
+
+        const panel1 = dockview.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        const panel2 = dockview.addPanel({
+            id: 'panel_2',
+            component: 'default',
+        });
+
+        expect(panel1.group.api.isFloating).toBeFalsy();
+        expect(panel2.group.api.isFloating).toBeFalsy();
+        expect(dockview.groups.length).toBe(1);
+        expect(dockview.panels.length).toBe(2);
+
+        dockview.addFloatingGroup(panel2.group);
+
+        expect(panel1.group.api.isFloating).toBeTruthy();
+        expect(panel2.group.api.isFloating).toBeTruthy();
+        expect(dockview.groups.length).toBe(1);
+        expect(dockview.panels.length).toBe(2);
+    });
+
+    test('that moving the last panel to be floating should leave an empty gridview', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        dockview.layout(1000, 500);
+
+        const panel1 = dockview.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        expect(
+            dockview.element.querySelectorAll('.view-container > .view').length
+        ).toBe(1);
+
+        dockview.addFloatingGroup(panel1);
+
+        expect(
+            dockview.element.querySelectorAll('.view-container > .view').length
+        ).toBe(0);
+    });
 });
diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts
index 249167341..5d5657b80 100644
--- a/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts
+++ b/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts
@@ -247,8 +247,8 @@ describe('groupview', () => {
             id: 'dockview-1',
             removePanel: removePanelMock,
             removeGroup: removeGroupMock,
-            onDidAddPanel: jest.fn(),
-            onDidRemovePanel: jest.fn(),
+            onDidAddPanel: () => ({ dispose: jest.fn() }),
+            onDidRemovePanel: () => ({ dispose: jest.fn() }),
         }) as DockviewComponent;
 
         groupview = new DockviewGroupPanel(dockview, 'groupview-1', options);
@@ -858,6 +858,47 @@ describe('groupview', () => {
         ).toBe(0);
     });
 
+    test('that the watermark is removed when dispose is called', () => {
+        const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
+            () => {
+                return {
+                    canDisplayOverlay: jest.fn(),
+                };
+            }
+        );
+
+        const groupView = new groupviewMock() as DockviewGroupPanelModel;
+
+        const groupPanelMock = jest.fn<Partial<DockviewGroupPanel>, []>(() => {
+            return {
+                id: 'testgroupid',
+                model: groupView,
+            };
+        });
+
+        const container = document.createElement('div');
+
+        const cut = new DockviewGroupPanelModel(
+            container,
+            dockview,
+            'groupviewid',
+            {},
+            new groupPanelMock() as DockviewGroupPanel
+        );
+
+        cut.initialize();
+
+        expect(
+            container.getElementsByClassName('watermark-test-container').length
+        ).toBe(1);
+
+        cut.dispose();
+
+        expect(
+            container.getElementsByClassName('watermark-test-container').length
+        ).toBe(0);
+    });
+
     test('that watermark is added', () => {
         const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
             () => {
diff --git a/packages/dockview-core/src/__tests__/dom.spec.ts b/packages/dockview-core/src/__tests__/dom.spec.ts
new file mode 100644
index 000000000..f628d5904
--- /dev/null
+++ b/packages/dockview-core/src/__tests__/dom.spec.ts
@@ -0,0 +1,21 @@
+import { quasiDefaultPrevented, quasiPreventDefault } from '../dom';
+
+describe('dom', () => {
+    test('quasiPreventDefault', () => {
+        const event = new Event('myevent');
+        expect((event as any)['dv-quasiPreventDefault']).toBeUndefined();
+        quasiPreventDefault(event);
+        expect((event as any)['dv-quasiPreventDefault']).toBe(true);
+    });
+
+    test('quasiDefaultPrevented', () => {
+        const event = new Event('myevent');
+        expect(quasiDefaultPrevented(event)).toBeFalsy();
+
+        (event as any)['dv-quasiPreventDefault'] = false;
+        expect(quasiDefaultPrevented(event)).toBeFalsy();
+
+        (event as any)['dv-quasiPreventDefault'] = true;
+        expect(quasiDefaultPrevented(event)).toBeTruthy();
+    });
+});
diff --git a/packages/dockview-core/src/__tests__/gridview/gridview.spec.ts b/packages/dockview-core/src/__tests__/gridview/gridview.spec.ts
index bb67ad2ea..a34b71702 100644
--- a/packages/dockview-core/src/__tests__/gridview/gridview.spec.ts
+++ b/packages/dockview-core/src/__tests__/gridview/gridview.spec.ts
@@ -690,4 +690,37 @@ describe('gridview', () => {
             gridview.element.querySelectorAll('.mock-grid-view').length
         ).toBe(4);
     });
+
+    test('that calling insertOrthogonalSplitviewAtRoot() for an empty view doesnt add any nodes', () => {
+        const gridview = new Gridview(
+            false,
+            { separatorBorder: '' },
+            Orientation.HORIZONTAL
+        );
+        gridview.layout(1000, 1000);
+
+        expect(gridview.serialize()).toEqual({
+            height: 1000,
+            orientation: 'HORIZONTAL',
+            root: {
+                data: [],
+                size: 1000,
+                type: 'branch',
+            },
+            width: 1000,
+        });
+
+        gridview.insertOrthogonalSplitviewAtRoot();
+
+        expect(gridview.serialize()).toEqual({
+            height: 1000,
+            orientation: 'VERTICAL',
+            root: {
+                data: [],
+                size: 1000,
+                type: 'branch',
+            },
+            width: 1000,
+        });
+    });
 });
diff --git a/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts b/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts
index 267600ffb..99e237a6f 100644
--- a/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts
+++ b/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts
@@ -2046,7 +2046,7 @@ describe('gridview', () => {
         });
     });
 
-    test('that a deep layout with fromJSON dimensions identical to the current dimensions loads', async () => {
+    test('that a deep HORIZONTAL layout with fromJSON dimensions identical to the current dimensions loads', async () => {
         const container = document.createElement('div');
 
         const gridview = new GridviewComponent({
@@ -2056,12 +2056,12 @@ describe('gridview', () => {
             components: { default: TestGridview },
         });
 
-        gridview.layout(5000, 5000);
+        gridview.layout(6000, 5000);
 
         gridview.fromJSON({
             grid: {
                 height: 5000,
-                width: 5000,
+                width: 6000,
                 orientation: Orientation.HORIZONTAL,
                 root: {
                     type: 'branch',
@@ -2069,7 +2069,7 @@ describe('gridview', () => {
                     data: [
                         {
                             type: 'leaf',
-                            size: 1000,
+                            size: 2000,
                             data: {
                                 id: 'panel_1',
                                 component: 'default',
@@ -2078,7 +2078,7 @@ describe('gridview', () => {
                         },
                         {
                             type: 'branch',
-                            size: 2000,
+                            size: 3000,
                             data: [
                                 {
                                     type: 'branch',
@@ -2095,7 +2095,7 @@ describe('gridview', () => {
                                         },
                                         {
                                             type: 'branch',
-                                            size: 1000,
+                                            size: 2000,
                                             data: [
                                                 {
                                                     type: 'leaf',
@@ -2132,7 +2132,7 @@ describe('gridview', () => {
                         },
                         {
                             type: 'leaf',
-                            size: 2000,
+                            size: 1000,
                             data: {
                                 id: 'panel_6',
                                 component: 'default',
@@ -2148,7 +2148,7 @@ describe('gridview', () => {
         expect(JSON.parse(JSON.stringify(gridview.toJSON()))).toEqual({
             grid: {
                 height: 5000,
-                width: 5000,
+                width: 6000,
                 orientation: Orientation.HORIZONTAL,
                 root: {
                     type: 'branch',
@@ -2156,7 +2156,7 @@ describe('gridview', () => {
                     data: [
                         {
                             type: 'leaf',
-                            size: 1000,
+                            size: 2000,
                             data: {
                                 id: 'panel_1',
                                 component: 'default',
@@ -2165,7 +2165,7 @@ describe('gridview', () => {
                         },
                         {
                             type: 'branch',
-                            size: 2000,
+                            size: 3000,
                             data: [
                                 {
                                     type: 'branch',
@@ -2182,7 +2182,7 @@ describe('gridview', () => {
                                         },
                                         {
                                             type: 'branch',
-                                            size: 1000,
+                                            size: 2000,
                                             data: [
                                                 {
                                                     type: 'leaf',
@@ -2217,9 +2217,374 @@ describe('gridview', () => {
                                 },
                             ],
                         },
+                        {
+                            type: 'leaf',
+                            size: 1000,
+                            data: {
+                                id: 'panel_6',
+                                component: 'default',
+                                snap: false,
+                            },
+                        },
+                    ],
+                },
+            },
+            activePanel: 'panel_1',
+        });
+
+        gridview.layout(6000, 5000, true);
+
+        expect(JSON.parse(JSON.stringify(gridview.toJSON()))).toEqual({
+            grid: {
+                height: 5000,
+                width: 6000,
+                orientation: Orientation.HORIZONTAL,
+                root: {
+                    type: 'branch',
+                    size: 5000,
+                    data: [
                         {
                             type: 'leaf',
                             size: 2000,
+                            data: {
+                                id: 'panel_1',
+                                component: 'default',
+                                snap: false,
+                            },
+                        },
+                        {
+                            type: 'branch',
+                            size: 3000,
+                            data: [
+                                {
+                                    type: 'branch',
+                                    size: 4000,
+                                    data: [
+                                        {
+                                            type: 'leaf',
+                                            size: 1000,
+                                            data: {
+                                                id: 'panel_2',
+                                                component: 'default',
+                                                snap: false,
+                                            },
+                                        },
+                                        {
+                                            type: 'branch',
+                                            size: 2000,
+                                            data: [
+                                                {
+                                                    type: 'leaf',
+                                                    size: 2000,
+                                                    data: {
+                                                        id: 'panel_3',
+                                                        component: 'default',
+                                                        snap: false,
+                                                    },
+                                                },
+                                                {
+                                                    type: 'leaf',
+                                                    size: 2000,
+                                                    data: {
+                                                        id: 'panel_4',
+                                                        component: 'default',
+                                                        snap: false,
+                                                    },
+                                                },
+                                            ],
+                                        },
+                                    ],
+                                },
+                                {
+                                    type: 'leaf',
+                                    size: 1000,
+                                    data: {
+                                        id: 'panel_5',
+                                        component: 'default',
+                                        snap: false,
+                                    },
+                                },
+                            ],
+                        },
+                        {
+                            type: 'leaf',
+                            size: 1000,
+                            data: {
+                                id: 'panel_6',
+                                component: 'default',
+                                snap: false,
+                            },
+                        },
+                    ],
+                },
+            },
+            activePanel: 'panel_1',
+        });
+    });
+
+    test('that a deep VERTICAL layout with fromJSON dimensions identical to the current dimensions loads', async () => {
+        const container = document.createElement('div');
+
+        const gridview = new GridviewComponent({
+            parentElement: container,
+            proportionalLayout: true,
+            orientation: Orientation.VERTICAL,
+            components: { default: TestGridview },
+        });
+
+        gridview.layout(5000, 6000);
+
+        gridview.fromJSON({
+            grid: {
+                height: 6000,
+                width: 5000,
+                orientation: Orientation.VERTICAL,
+                root: {
+                    type: 'branch',
+                    size: 5000,
+                    data: [
+                        {
+                            type: 'leaf',
+                            size: 2000,
+                            data: {
+                                id: 'panel_1',
+                                component: 'default',
+                                snap: false,
+                            },
+                        },
+                        {
+                            type: 'branch',
+                            size: 3000,
+                            data: [
+                                {
+                                    type: 'branch',
+                                    size: 4000,
+                                    data: [
+                                        {
+                                            type: 'leaf',
+                                            size: 1000,
+                                            data: {
+                                                id: 'panel_2',
+                                                component: 'default',
+                                                snap: false,
+                                            },
+                                        },
+                                        {
+                                            type: 'branch',
+                                            size: 2000,
+                                            data: [
+                                                {
+                                                    type: 'leaf',
+                                                    size: 2000,
+                                                    data: {
+                                                        id: 'panel_3',
+                                                        component: 'default',
+                                                        snap: false,
+                                                    },
+                                                },
+                                                {
+                                                    type: 'leaf',
+                                                    size: 2000,
+                                                    data: {
+                                                        id: 'panel_4',
+                                                        component: 'default',
+                                                        snap: false,
+                                                    },
+                                                },
+                                            ],
+                                        },
+                                    ],
+                                },
+                                {
+                                    type: 'leaf',
+                                    size: 1000,
+                                    data: {
+                                        id: 'panel_5',
+                                        component: 'default',
+                                        snap: false,
+                                    },
+                                },
+                            ],
+                        },
+                        {
+                            type: 'leaf',
+                            size: 1000,
+                            data: {
+                                id: 'panel_6',
+                                component: 'default',
+                                snap: false,
+                            },
+                        },
+                    ],
+                },
+            },
+            activePanel: 'panel_1',
+        });
+
+        expect(JSON.parse(JSON.stringify(gridview.toJSON()))).toEqual({
+            grid: {
+                height: 6000,
+                width: 5000,
+                orientation: Orientation.VERTICAL,
+                root: {
+                    type: 'branch',
+                    size: 5000,
+                    data: [
+                        {
+                            type: 'leaf',
+                            size: 2000,
+                            data: {
+                                id: 'panel_1',
+                                component: 'default',
+                                snap: false,
+                            },
+                        },
+                        {
+                            type: 'branch',
+                            size: 3000,
+                            data: [
+                                {
+                                    type: 'branch',
+                                    size: 4000,
+                                    data: [
+                                        {
+                                            type: 'leaf',
+                                            size: 1000,
+                                            data: {
+                                                id: 'panel_2',
+                                                component: 'default',
+                                                snap: false,
+                                            },
+                                        },
+                                        {
+                                            type: 'branch',
+                                            size: 2000,
+                                            data: [
+                                                {
+                                                    type: 'leaf',
+                                                    size: 2000,
+                                                    data: {
+                                                        id: 'panel_3',
+                                                        component: 'default',
+                                                        snap: false,
+                                                    },
+                                                },
+                                                {
+                                                    type: 'leaf',
+                                                    size: 2000,
+                                                    data: {
+                                                        id: 'panel_4',
+                                                        component: 'default',
+                                                        snap: false,
+                                                    },
+                                                },
+                                            ],
+                                        },
+                                    ],
+                                },
+                                {
+                                    type: 'leaf',
+                                    size: 1000,
+                                    data: {
+                                        id: 'panel_5',
+                                        component: 'default',
+                                        snap: false,
+                                    },
+                                },
+                            ],
+                        },
+                        {
+                            type: 'leaf',
+                            size: 1000,
+                            data: {
+                                id: 'panel_6',
+                                component: 'default',
+                                snap: false,
+                            },
+                        },
+                    ],
+                },
+            },
+            activePanel: 'panel_1',
+        });
+
+        gridview.layout(5000, 6000, true);
+
+        expect(JSON.parse(JSON.stringify(gridview.toJSON()))).toEqual({
+            grid: {
+                height: 6000,
+                width: 5000,
+                orientation: Orientation.VERTICAL,
+                root: {
+                    type: 'branch',
+                    size: 5000,
+                    data: [
+                        {
+                            type: 'leaf',
+                            size: 2000,
+                            data: {
+                                id: 'panel_1',
+                                component: 'default',
+                                snap: false,
+                            },
+                        },
+                        {
+                            type: 'branch',
+                            size: 3000,
+                            data: [
+                                {
+                                    type: 'branch',
+                                    size: 4000,
+                                    data: [
+                                        {
+                                            type: 'leaf',
+                                            size: 1000,
+                                            data: {
+                                                id: 'panel_2',
+                                                component: 'default',
+                                                snap: false,
+                                            },
+                                        },
+                                        {
+                                            type: 'branch',
+                                            size: 2000,
+                                            data: [
+                                                {
+                                                    type: 'leaf',
+                                                    size: 2000,
+                                                    data: {
+                                                        id: 'panel_3',
+                                                        component: 'default',
+                                                        snap: false,
+                                                    },
+                                                },
+                                                {
+                                                    type: 'leaf',
+                                                    size: 2000,
+                                                    data: {
+                                                        id: 'panel_4',
+                                                        component: 'default',
+                                                        snap: false,
+                                                    },
+                                                },
+                                            ],
+                                        },
+                                    ],
+                                },
+                                {
+                                    type: 'leaf',
+                                    size: 1000,
+                                    data: {
+                                        id: 'panel_5',
+                                        component: 'default',
+                                        snap: false,
+                                    },
+                                },
+                            ],
+                        },
+                        {
+                            type: 'leaf',
+                            size: 1000,
                             data: {
                                 id: 'panel_6',
                                 component: 'default',
diff --git a/packages/dockview-core/src/api/component.api.ts b/packages/dockview-core/src/api/component.api.ts
index d527ef6af..e67fc1b62 100644
--- a/packages/dockview-core/src/api/component.api.ts
+++ b/packages/dockview-core/src/api/component.api.ts
@@ -435,7 +435,7 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
         return this.component.addPanel(options);
     }
 
-    addGroup(options?: AddGroupOptions): IDockviewGroupPanel {
+    addGroup(options?: AddGroupOptions): DockviewGroupPanel {
         return this.component.addGroup(options);
     }
 
@@ -459,6 +459,13 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
         return this.component.getPanel(id);
     }
 
+    addFloatingGroup(
+        item: IDockviewPanel | DockviewGroupPanel,
+        coord?: { x: number; y: number }
+    ): void {
+        return this.component.addFloatingGroup(item, coord);
+    }
+
     fromJSON(data: SerializedDockview): void {
         this.component.fromJSON(data);
     }
diff --git a/packages/dockview-core/src/api/dockviewGroupPanelApi.ts b/packages/dockview-core/src/api/dockviewGroupPanelApi.ts
new file mode 100644
index 000000000..65154b961
--- /dev/null
+++ b/packages/dockview-core/src/api/dockviewGroupPanelApi.ts
@@ -0,0 +1,54 @@
+import { Position } from '../dnd/droptarget';
+import { DockviewComponent } from '../dockview/dockviewComponent';
+import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
+import { Emitter, Event } from '../events';
+import { GridviewPanelApi, GridviewPanelApiImpl } from './gridviewPanelApi';
+
+export interface DockviewGroupPanelApi extends GridviewPanelApi {
+    readonly onDidFloatingStateChange: Event<DockviewGroupPanelFloatingChangeEvent>;
+    readonly isFloating: boolean;
+    moveTo(options: { group: DockviewGroupPanel; position?: Position }): void;
+}
+
+export interface DockviewGroupPanelFloatingChangeEvent {
+    readonly isFloating: boolean;
+}
+
+export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
+    private _group: DockviewGroupPanel | undefined;
+
+    readonly _onDidFloatingStateChange =
+        new Emitter<DockviewGroupPanelFloatingChangeEvent>();
+    readonly onDidFloatingStateChange: Event<DockviewGroupPanelFloatingChangeEvent> =
+        this._onDidFloatingStateChange.event;
+
+    get isFloating() {
+        if (!this._group) {
+            throw new Error(`DockviewGroupPanelApiImpl not initialized`);
+        }
+        return this._group.model.isFloating;
+    }
+
+    constructor(id: string, private readonly accessor: DockviewComponent) {
+        super(id);
+
+        this.addDisposables(this._onDidFloatingStateChange);
+    }
+
+    moveTo(options: { group: DockviewGroupPanel; position?: Position }): void {
+        if (!this._group) {
+            throw new Error(`DockviewGroupPanelApiImpl not initialized`);
+        }
+
+        this.accessor.moveGroupOrPanel(
+            options.group,
+            this._group.id,
+            undefined,
+            options.position ?? 'center'
+        );
+    }
+
+    initialize(group: DockviewGroupPanel): void {
+        this._group = group;
+    }
+}
diff --git a/packages/dockview-core/src/api/dockviewPanelApi.ts b/packages/dockview-core/src/api/dockviewPanelApi.ts
index 5c6222071..e724c251d 100644
--- a/packages/dockview-core/src/api/dockviewPanelApi.ts
+++ b/packages/dockview-core/src/api/dockviewPanelApi.ts
@@ -3,6 +3,8 @@ import { GridviewPanelApiImpl, GridviewPanelApi } from './gridviewPanelApi';
 import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
 import { MutableDisposable } from '../lifecycle';
 import { IDockviewPanel } from '../dockview/dockviewPanel';
+import { DockviewComponent } from '../dockview/dockviewComponent';
+import { Position } from '../dnd/droptarget';
 
 export interface TitleEvent {
     readonly title: string;
@@ -24,6 +26,11 @@ export interface DockviewPanelApi
     readonly onDidGroupChange: Event<void>;
     close(): void;
     setTitle(title: string): void;
+    moveTo(options: {
+        group: DockviewGroupPanel;
+        position?: Position;
+        index?: number;
+    }): void;
 }
 
 export class DockviewPanelApiImpl
@@ -73,7 +80,11 @@ export class DockviewPanelApiImpl
         return this._group;
     }
 
-    constructor(private panel: IDockviewPanel, group: DockviewGroupPanel) {
+    constructor(
+        private panel: IDockviewPanel,
+        group: DockviewGroupPanel,
+        private readonly accessor: DockviewComponent
+    ) {
         super(panel.id);
 
         this.initialize(panel);
@@ -88,11 +99,25 @@ export class DockviewPanelApiImpl
         );
     }
 
-    public setTitle(title: string): void {
+    moveTo(options: {
+        group: DockviewGroupPanel;
+        position?: Position;
+        index?: number;
+    }): void {
+        this.accessor.moveGroupOrPanel(
+            options.group,
+            this._group.id,
+            this.panel.id,
+            options.position ?? 'center',
+            options.index
+        );
+    }
+
+    setTitle(title: string): void {
         this.panel.setTitle(title);
     }
 
-    public close(): void {
+    close(): void {
         this.group.model.closePanel(this.panel);
     }
 }
diff --git a/packages/dockview-core/src/array.ts b/packages/dockview-core/src/array.ts
index 227744927..44b1003f3 100644
--- a/packages/dockview-core/src/array.ts
+++ b/packages/dockview-core/src/array.ts
@@ -61,3 +61,13 @@ export function firstIndex<T>(
 
     return -1;
 }
+
+export function remove<T>(array: T[], value: T): boolean {
+    const index = array.findIndex((t) => t === value);
+
+    if (index > -1) {
+        array.splice(index, 1);
+        return true;
+    }
+    return false;
+}
diff --git a/packages/dockview-core/src/dnd/abstractDragHandler.ts b/packages/dockview-core/src/dnd/abstractDragHandler.ts
index 55e03fa42..0e452dcf3 100644
--- a/packages/dockview-core/src/dnd/abstractDragHandler.ts
+++ b/packages/dockview-core/src/dnd/abstractDragHandler.ts
@@ -27,10 +27,19 @@ export abstract class DragHandler extends CompositeDisposable {
 
     abstract getData(dataTransfer?: DataTransfer | null): IDisposable;
 
+    protected isCancelled(_event: DragEvent): boolean {
+        return false;
+    }
+
     private configure(): void {
         this.addDisposables(
             this._onDragStart,
             addDisposableListener(this.el, 'dragstart', (event) => {
+                if (this.isCancelled(event)) {
+                    event.preventDefault();
+                    return;
+                }
+
                 const iframes = [
                     ...getElementsByTagName('iframe'),
                     ...getElementsByTagName('webview'),
diff --git a/packages/dockview-core/src/dnd/droptarget.scss b/packages/dockview-core/src/dnd/droptarget.scss
index fbb800615..2767c2c24 100644
--- a/packages/dockview-core/src/dnd/droptarget.scss
+++ b/packages/dockview-core/src/dnd/droptarget.scss
@@ -7,7 +7,8 @@
         top: 0px;
         height: 100%;
         width: 100%;
-        z-index: 10000;
+        z-index: 1000;
+        pointer-events: none;
 
         > .drop-target-selection {
             position: relative;
@@ -15,7 +16,9 @@
             height: 100%;
             width: 100%;
             background-color: var(--dv-drag-over-background-color);
-            transition: top 70ms ease-out,left 70ms ease-out,width 70ms ease-out,height 70ms ease-out,opacity .15s ease-out;
+            transition: top 70ms ease-out, left 70ms ease-out,
+                width 70ms ease-out, height 70ms ease-out,
+                opacity 0.15s ease-out;
             will-change: transform;
             pointer-events: none;
 
diff --git a/packages/dockview-core/src/dnd/droptarget.ts b/packages/dockview-core/src/dnd/droptarget.ts
index 12fcb0ea0..003f8b045 100644
--- a/packages/dockview-core/src/dnd/droptarget.ts
+++ b/packages/dockview-core/src/dnd/droptarget.ts
@@ -58,10 +58,13 @@ export class Droptarget extends CompositeDisposable {
     private targetElement: HTMLElement | undefined;
     private overlayElement: HTMLElement | undefined;
     private _state: Position | undefined;
+    private _acceptedTargetZonesSet: Set<Position>;
 
     private readonly _onDrop = new Emitter<DroptargetEvent>();
     readonly onDrop: Event<DroptargetEvent> = this._onDrop.event;
 
+    private static USED_EVENT_ID = '__dockview_droptarget_event_is_used__';
+
     get state(): Position | undefined {
         return this._state;
     }
@@ -83,7 +86,7 @@ export class Droptarget extends CompositeDisposable {
         super();
 
         // use a set to take advantage of #<set>.has
-        const acceptedTargetZonesSet = new Set(
+        this._acceptedTargetZonesSet = new Set(
             this.options.acceptedTargetZones
         );
 
@@ -92,6 +95,11 @@ export class Droptarget extends CompositeDisposable {
             new DragAndDropObserver(this.element, {
                 onDragEnter: () => undefined,
                 onDragOver: (e) => {
+                    if (this._acceptedTargetZonesSet.size === 0) {
+                        this.removeDropTarget();
+                        return;
+                    }
+
                     const width = this.element.clientWidth;
                     const height = this.element.clientHeight;
 
@@ -106,14 +114,19 @@ export class Droptarget extends CompositeDisposable {
                     const y = e.clientY - rect.top;
 
                     const quadrant = this.calculateQuadrant(
-                        acceptedTargetZonesSet,
+                        this._acceptedTargetZonesSet,
                         x,
                         y,
                         width,
                         height
                     );
 
-                    if (quadrant === null) {
+                    /**
+                     * If the event has already been used by another DropTarget instance
+                     * then don't show a second drop target, only one target should be
+                     * active at any one time
+                     */
+                    if (this.isAlreadyUsed(e) || quadrant === null) {
                         // no drop target should be displayed
                         this.removeDropTarget();
                         return;
@@ -121,12 +134,16 @@ export class Droptarget extends CompositeDisposable {
 
                     if (typeof this.options.canDisplayOverlay === 'boolean') {
                         if (!this.options.canDisplayOverlay) {
+                            this.removeDropTarget();
                             return;
                         }
                     } else if (!this.options.canDisplayOverlay(e, quadrant)) {
+                        this.removeDropTarget();
                         return;
                     }
 
+                    this.markAsUsed(e);
+
                     if (!this.targetElement) {
                         this.targetElement = document.createElement('div');
                         this.targetElement.className = 'drop-target-dropzone';
@@ -139,14 +156,6 @@ export class Droptarget extends CompositeDisposable {
                         this.element.append(this.targetElement);
                     }
 
-                    if (this.options.acceptedTargetZones.length === 0) {
-                        return;
-                    }
-
-                    if (!this.targetElement || !this.overlayElement) {
-                        return;
-                    }
-
                     this.toggleClasses(quadrant, width, height);
 
                     this.setState(quadrant);
@@ -175,11 +184,30 @@ export class Droptarget extends CompositeDisposable {
         );
     }
 
-    public dispose(): void {
+    setTargetZones(acceptedTargetZones: Position[]): void {
+        this._acceptedTargetZonesSet = new Set(acceptedTargetZones);
+    }
+
+    dispose(): void {
         this.removeDropTarget();
         super.dispose();
     }
 
+    /**
+     * Add a property to the event object for other potential listeners to check
+     */
+    private markAsUsed(event: DragEvent): void {
+        (event as any)[Droptarget.USED_EVENT_ID] = true;
+    }
+
+    /**
+     * Check is the event has already been used by another instance od DropTarget
+     */
+    private isAlreadyUsed(event: DragEvent): boolean {
+        const value = (event as any)[Droptarget.USED_EVENT_ID];
+        return typeof value === 'boolean' && value;
+    }
+
     private toggleClasses(
         quadrant: Position,
         width: number,
diff --git a/packages/dockview-core/src/dnd/groupDragHandler.ts b/packages/dockview-core/src/dnd/groupDragHandler.ts
index bdd183182..0a6f55008 100644
--- a/packages/dockview-core/src/dnd/groupDragHandler.ts
+++ b/packages/dockview-core/src/dnd/groupDragHandler.ts
@@ -1,4 +1,6 @@
 import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
+import { quasiPreventDefault } from '../dom';
+import { addDisposableListener } from '../events';
 import { IDisposable } from '../lifecycle';
 import { DragHandler } from './abstractDragHandler';
 import { LocalSelectionTransfer, PanelTransfer } from './dataTransfer';
@@ -14,6 +16,31 @@ export class GroupDragHandler extends DragHandler {
         private readonly group: DockviewGroupPanel
     ) {
         super(element);
+
+        this.addDisposables(
+            addDisposableListener(
+                element,
+                'mousedown',
+                (e) => {
+                    if (e.shiftKey) {
+                        /**
+                         * You cannot call e.preventDefault() because that will prevent drag events from firing
+                         * but we also need to stop any group overlay drag events from occuring
+                         * Use a custom event marker that can be checked by the overlay drag events
+                         */
+                        quasiPreventDefault(e);
+                    }
+                },
+                true
+            )
+        );
+    }
+
+    override isCancelled(_event: DragEvent): boolean {
+        if (this.group.api.isFloating && !_event.shiftKey) {
+            return true;
+        }
+        return false;
     }
 
     getData(dataTransfer: DataTransfer | null): IDisposable {
diff --git a/packages/dockview-core/src/dnd/overlay.scss b/packages/dockview-core/src/dnd/overlay.scss
new file mode 100644
index 000000000..5f95b379a
--- /dev/null
+++ b/packages/dockview-core/src/dnd/overlay.scss
@@ -0,0 +1,122 @@
+.dv-debug {
+    .dv-resize-container {
+        .dv-resize-handle-top {
+            background-color: red;
+        }
+
+        .dv-resize-handle-bottom {
+            background-color: green;
+        }
+
+        .dv-resize-handle-left {
+            background-color: yellow;
+        }
+
+        .dv-resize-handle-right {
+            background-color: blue;
+        }
+
+        .dv-resize-handle-topleft,
+        .dv-resize-handle-topright,
+        .dv-resize-handle-bottomleft,
+        .dv-resize-handle-bottomright {
+            background-color: cyan;
+        }
+    }
+}
+
+.dv-resize-container {
+    position: absolute;
+    z-index: 997;
+
+    &.dv-bring-to-front {
+        z-index: 998;
+    }
+
+    border: 1px solid var(--dv-tab-divider-color);
+    box-shadow: var(--dv-floating-box-shadow);
+
+    &.dv-resize-container-dragging {
+        opacity: 0.5;
+    }
+
+    .dv-resize-handle-top {
+        height: 4px;
+        width: calc(100% - 8px);
+        left: 4px;
+        top: -2px;
+        z-index: 999;
+        position: absolute;
+        cursor: ns-resize;
+    }
+
+    .dv-resize-handle-bottom {
+        height: 4px;
+        width: calc(100% - 8px);
+        left: 4px;
+        bottom: -2px;
+        z-index: 999;
+        position: absolute;
+        cursor: ns-resize;
+    }
+
+    .dv-resize-handle-left {
+        height: calc(100% - 8px);
+        width: 4px;
+        left: -2px;
+        top: 4px;
+        z-index: 999;
+        position: absolute;
+        cursor: ew-resize;
+    }
+
+    .dv-resize-handle-right {
+        height: calc(100% - 8px);
+        width: 4px;
+        right: -2px;
+        top: 4px;
+        z-index: 999;
+        position: absolute;
+        cursor: ew-resize;
+    }
+
+    .dv-resize-handle-topleft {
+        height: 4px;
+        width: 4px;
+        top: -2px;
+        left: -2px;
+        z-index: 999;
+        position: absolute;
+        cursor: nw-resize;
+    }
+
+    .dv-resize-handle-topright {
+        height: 4px;
+        width: 4px;
+        right: -2px;
+        top: -2px;
+        z-index: 999;
+        position: absolute;
+        cursor: ne-resize;
+    }
+
+    .dv-resize-handle-bottomleft {
+        height: 4px;
+        width: 4px;
+        left: -2px;
+        bottom: -2px;
+        z-index: 999;
+        position: absolute;
+        cursor: sw-resize;
+    }
+
+    .dv-resize-handle-bottomright {
+        height: 4px;
+        width: 4px;
+        right: -2px;
+        bottom: -2px;
+        z-index: 999;
+        position: absolute;
+        cursor: se-resize;
+    }
+}
diff --git a/packages/dockview-core/src/dnd/overlay.ts b/packages/dockview-core/src/dnd/overlay.ts
new file mode 100644
index 000000000..6d818725a
--- /dev/null
+++ b/packages/dockview-core/src/dnd/overlay.ts
@@ -0,0 +1,449 @@
+import { quasiDefaultPrevented, toggleClass } from '../dom';
+import {
+    Emitter,
+    Event,
+    addDisposableListener,
+    addDisposableWindowListener,
+} from '../events';
+import { CompositeDisposable, MutableDisposable } from '../lifecycle';
+import { clamp } from '../math';
+
+const bringElementToFront = (() => {
+    let previous: HTMLElement | null = null;
+
+    function pushToTop(element: HTMLElement) {
+        if (previous !== element && previous !== null) {
+            toggleClass(previous, 'dv-bring-to-front', false);
+        }
+
+        toggleClass(element, 'dv-bring-to-front', true);
+        previous = element;
+    }
+
+    return pushToTop;
+})();
+
+export class Overlay extends CompositeDisposable {
+    private _element: HTMLElement = document.createElement('div');
+
+    private readonly _onDidChange = new Emitter<void>();
+    readonly onDidChange: Event<void> = this._onDidChange.event;
+
+    private static MINIMUM_HEIGHT = 20;
+    private static MINIMUM_WIDTH = 20;
+
+    constructor(
+        private readonly options: {
+            height: number;
+            width: number;
+            left: number;
+            top: number;
+            container: HTMLElement;
+            content: HTMLElement;
+            minimumInViewportWidth: number;
+            minimumInViewportHeight: number;
+        }
+    ) {
+        super();
+
+        this.addDisposables(this._onDidChange);
+
+        this.setupOverlay();
+        this.setupResize('top');
+        this.setupResize('bottom');
+        this.setupResize('left');
+        this.setupResize('right');
+        this.setupResize('topleft');
+        this.setupResize('topright');
+        this.setupResize('bottomleft');
+        this.setupResize('bottomright');
+
+        this._element.appendChild(this.options.content);
+        this.options.container.appendChild(this._element);
+
+        // if input bad resize within acceptable boundaries
+        this.renderWithinBoundaryConditions();
+    }
+
+    setBounds(
+        bounds: Partial<{
+            height: number;
+            width: number;
+            top: number;
+            left: number;
+        }>
+    ): void {
+        if (typeof bounds.height === 'number') {
+            this._element.style.height = `${bounds.height}px`;
+        }
+        if (typeof bounds.width === 'number') {
+            this._element.style.width = `${bounds.width}px`;
+        }
+        if (typeof bounds.top === 'number') {
+            this._element.style.top = `${bounds.top}px`;
+        }
+        if (typeof bounds.left === 'number') {
+            this._element.style.left = `${bounds.left}px`;
+        }
+
+        this.renderWithinBoundaryConditions();
+    }
+
+    toJSON(): { top: number; left: number; height: number; width: number } {
+        const container = this.options.container.getBoundingClientRect();
+        const element = this._element.getBoundingClientRect();
+
+        return {
+            top: element.top - container.top,
+            left: element.left - container.left,
+            width: element.width,
+            height: element.height,
+        };
+    }
+
+    renderWithinBoundaryConditions(): void {
+        const containerRect = this.options.container.getBoundingClientRect();
+        const overlayRect = this._element.getBoundingClientRect();
+
+        // a minimum width of minimumViewportWidth must be inside the viewport
+        const xOffset = Math.max(
+            0,
+            overlayRect.width - this.options.minimumInViewportWidth
+        );
+
+        // a minimum height of minimumViewportHeight must be inside the viewport
+        const yOffset = Math.max(
+            0,
+            overlayRect.height - this.options.minimumInViewportHeight
+        );
+
+        const left = clamp(
+            overlayRect.left - containerRect.left,
+            -xOffset,
+            Math.max(0, containerRect.width - overlayRect.width + xOffset)
+        );
+
+        const top = clamp(
+            overlayRect.top - containerRect.top,
+            -yOffset,
+            Math.max(0, containerRect.height - overlayRect.height + yOffset)
+        );
+
+        this._element.style.left = `${left}px`;
+        this._element.style.top = `${top}px`;
+    }
+
+    setupDrag(
+        dragTarget: HTMLElement,
+        options: { inDragMode: boolean } = { inDragMode: false }
+    ): void {
+        const move = new MutableDisposable();
+
+        const track = () => {
+            let offset: { x: number; y: number } | null = null;
+
+            move.value = new CompositeDisposable(
+                addDisposableWindowListener(window, 'mousemove', (e) => {
+                    const containerRect =
+                        this.options.container.getBoundingClientRect();
+                    const x = e.clientX - containerRect.left;
+                    const y = e.clientY - containerRect.top;
+
+                    toggleClass(
+                        this._element,
+                        'dv-resize-container-dragging',
+                        true
+                    );
+
+                    const overlayRect = this._element.getBoundingClientRect();
+                    if (offset === null) {
+                        offset = {
+                            x: e.clientX - overlayRect.left,
+                            y: e.clientY - overlayRect.top,
+                        };
+                    }
+
+                    const xOffset = Math.max(
+                        0,
+                        overlayRect.width - this.options.minimumInViewportWidth
+                    );
+                    const yOffset = Math.max(
+                        0,
+                        overlayRect.height -
+                            this.options.minimumInViewportHeight
+                    );
+
+                    const left = clamp(
+                        x - offset.x,
+                        -xOffset,
+                        Math.max(
+                            0,
+                            containerRect.width - overlayRect.width + xOffset
+                        )
+                    );
+
+                    const top = clamp(
+                        y - offset.y,
+                        -yOffset,
+                        Math.max(
+                            0,
+                            containerRect.height - overlayRect.height + yOffset
+                        )
+                    );
+
+                    this._element.style.left = `${left}px`;
+                    this._element.style.top = `${top}px`;
+                }),
+                addDisposableWindowListener(window, 'mouseup', () => {
+                    toggleClass(
+                        this._element,
+                        'dv-resize-container-dragging',
+                        false
+                    );
+
+                    move.dispose();
+                    this._onDidChange.fire();
+                })
+            );
+        };
+
+        this.addDisposables(
+            move,
+            addDisposableListener(dragTarget, 'mousedown', (event) => {
+                if (event.defaultPrevented) {
+                    event.preventDefault();
+                    return;
+                }
+
+                // if somebody has marked this event then treat as a defaultPrevented
+                // without actually calling event.preventDefault()
+                if (quasiDefaultPrevented(event)) {
+                    return;
+                }
+
+                track();
+            }),
+            addDisposableListener(
+                this.options.content,
+                'mousedown',
+                (event) => {
+                    if (event.defaultPrevented) {
+                        return;
+                    }
+
+                    // if somebody has marked this event then treat as a defaultPrevented
+                    // without actually calling event.preventDefault()
+                    if (quasiDefaultPrevented(event)) {
+                        return;
+                    }
+
+                    if (event.shiftKey) {
+                        track();
+                    }
+                }
+            ),
+            addDisposableListener(
+                this.options.content,
+                'mousedown',
+                () => {
+                    bringElementToFront(this._element);
+                },
+                true
+            )
+        );
+
+        bringElementToFront(this._element);
+
+        if (options.inDragMode) {
+            track();
+        }
+    }
+
+    private setupOverlay(): void {
+        this._element.style.height = `${this.options.height}px`;
+        this._element.style.width = `${this.options.width}px`;
+        this._element.style.left = `${this.options.left}px`;
+        this._element.style.top = `${this.options.top}px`;
+
+        this._element.className = 'dv-resize-container';
+    }
+
+    private setupResize(
+        direction:
+            | 'top'
+            | 'bottom'
+            | 'left'
+            | 'right'
+            | 'topleft'
+            | 'topright'
+            | 'bottomleft'
+            | 'bottomright'
+    ): void {
+        const resizeHandleElement = document.createElement('div');
+        resizeHandleElement.className = `dv-resize-handle-${direction}`;
+        this._element.appendChild(resizeHandleElement);
+
+        const move = new MutableDisposable();
+
+        this.addDisposables(
+            move,
+            addDisposableListener(resizeHandleElement, 'mousedown', (e) => {
+                e.preventDefault();
+
+                let startPosition: {
+                    originalY: number;
+                    originalHeight: number;
+                    originalX: number;
+                    originalWidth: number;
+                } | null = null;
+
+                move.value = new CompositeDisposable(
+                    addDisposableWindowListener(window, 'mousemove', (e) => {
+                        const containerRect =
+                            this.options.container.getBoundingClientRect();
+                        const overlayRect =
+                            this._element.getBoundingClientRect();
+
+                        const y = e.clientY - containerRect.top;
+                        const x = e.clientX - containerRect.left;
+
+                        if (startPosition === null) {
+                            // record the initial dimensions since as all subsequence moves are relative to this
+                            startPosition = {
+                                originalY: y,
+                                originalHeight: overlayRect.height,
+                                originalX: x,
+                                originalWidth: overlayRect.width,
+                            };
+                        }
+
+                        let top: number | null = null;
+                        let height: number | null = null;
+                        let left: number | null = null;
+                        let width: number | null = null;
+
+                        function moveTop() {
+                            top = clamp(
+                                y,
+                                0,
+                                Math.max(
+                                    0,
+                                    startPosition!.originalY +
+                                        startPosition!.originalHeight -
+                                        Overlay.MINIMUM_HEIGHT
+                                )
+                            );
+                            height =
+                                startPosition!.originalY +
+                                startPosition!.originalHeight -
+                                top;
+                        }
+
+                        function moveBottom() {
+                            top =
+                                startPosition!.originalY -
+                                startPosition!.originalHeight;
+
+                            height = clamp(
+                                y - top,
+                                Overlay.MINIMUM_HEIGHT,
+                                Math.max(
+                                    0,
+                                    containerRect.height -
+                                        startPosition!.originalY +
+                                        startPosition!.originalHeight
+                                )
+                            );
+                        }
+
+                        function moveLeft() {
+                            left = clamp(
+                                x,
+                                0,
+                                Math.max(
+                                    0,
+                                    startPosition!.originalX +
+                                        startPosition!.originalWidth -
+                                        Overlay.MINIMUM_WIDTH
+                                )
+                            );
+                            width =
+                                startPosition!.originalX +
+                                startPosition!.originalWidth -
+                                left;
+                        }
+
+                        function moveRight() {
+                            left =
+                                startPosition!.originalX -
+                                startPosition!.originalWidth;
+                            width = clamp(
+                                x - left,
+                                Overlay.MINIMUM_WIDTH,
+                                Math.max(
+                                    0,
+                                    containerRect.width -
+                                        startPosition!.originalX +
+                                        startPosition!.originalWidth
+                                )
+                            );
+                        }
+
+                        switch (direction) {
+                            case 'top':
+                                moveTop();
+                                break;
+                            case 'bottom':
+                                moveBottom();
+                                break;
+                            case 'left':
+                                moveLeft();
+                                break;
+                            case 'right':
+                                moveRight();
+                                break;
+                            case 'topleft':
+                                moveTop();
+                                moveLeft();
+                                break;
+                            case 'topright':
+                                moveTop();
+                                moveRight();
+                                break;
+                            case 'bottomleft':
+                                moveBottom();
+                                moveLeft();
+                                break;
+                            case 'bottomright':
+                                moveBottom();
+                                moveRight();
+                                break;
+                        }
+
+                        if (height !== null) {
+                            this._element.style.height = `${height}px`;
+                        }
+                        if (top !== null) {
+                            this._element.style.top = `${top}px`;
+                        }
+                        if (left !== null) {
+                            this._element.style.left = `${left}px`;
+                        }
+                        if (width !== null) {
+                            this._element.style.width = `${width}px`;
+                        }
+                    }),
+                    addDisposableWindowListener(window, 'mouseup', () => {
+                        move.dispose();
+                        this._onDidChange.fire();
+                    })
+                );
+            })
+        );
+    }
+
+    override dispose(): void {
+        this._element.remove();
+        super.dispose();
+    }
+}
diff --git a/packages/dockview-core/src/dockview/components/tab/tab.ts b/packages/dockview-core/src/dockview/components/tab/tab.ts
index 15c81206b..b57d08b26 100644
--- a/packages/dockview-core/src/dockview/components/tab/tab.ts
+++ b/packages/dockview-core/src/dockview/components/tab/tab.ts
@@ -6,7 +6,7 @@ import {
     PanelTransfer,
 } from '../../../dnd/dataTransfer';
 import { toggleClass } from '../../../dom';
-import { IDockviewComponent } from '../../dockviewComponent';
+import { DockviewComponent } from '../../dockviewComponent';
 import { DockviewDropTargets, ITabRenderer } from '../../types';
 import { DockviewGroupPanel } from '../../dockviewGroupPanel';
 import { DroptargetEvent, Droptarget } from '../../../dnd/droptarget';
@@ -38,7 +38,7 @@ export class Tab extends CompositeDisposable implements ITab {
 
     constructor(
         public readonly panelId: string,
-        private readonly accessor: IDockviewComponent,
+        private readonly accessor: DockviewComponent,
         private readonly group: DockviewGroupPanel
     ) {
         super();
@@ -79,6 +79,7 @@ export class Tab extends CompositeDisposable implements ITab {
                 if (event.defaultPrevented) {
                     return;
                 }
+
                 /**
                  * TODO: alternative to stopPropagation
                  *
diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts
index b0ce14fc8..b857dc00e 100644
--- a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts
+++ b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts
@@ -9,7 +9,7 @@ import { DockviewComponent } from '../../dockviewComponent';
 import { DockviewGroupPanel } from '../../dockviewGroupPanel';
 import { VoidContainer } from './voidContainer';
 import { toggleClass } from '../../../dom';
-import { IDockviewPanel } from '../../dockviewPanel';
+import { DockviewPanel, IDockviewPanel } from '../../dockviewPanel';
 
 export interface TabDropIndexEvent {
     readonly event: DragEvent;
@@ -187,6 +187,36 @@ export class TabsContainer
                     index: this.tabs.length,
                 });
             }),
+            addDisposableListener(
+                this.voidContainer.element,
+                'mousedown',
+                (event) => {
+                    const isFloatingGroupsEnabled =
+                        !this.accessor.options.disableFloatingGroups;
+
+                    if (
+                        isFloatingGroupsEnabled &&
+                        event.shiftKey &&
+                        !this.group.api.isFloating
+                    ) {
+                        event.preventDefault();
+
+                        const { top, left } =
+                            this.element.getBoundingClientRect();
+                        const { top: rootTop, left: rootLeft } =
+                            this.accessor.element.getBoundingClientRect();
+
+                        this.accessor.addFloatingGroup(
+                            this.group,
+                            {
+                                x: left - rootLeft + 20,
+                                y: top - rootTop + 20,
+                            },
+                            { inDragMode: true }
+                        );
+                    }
+                }
+            ),
             addDisposableListener(this.tabContainer, 'mousedown', (event) => {
                 if (event.defaultPrevented) {
                     return;
@@ -263,6 +293,30 @@ export class TabsContainer
 
         const disposable = CompositeDisposable.from(
             tabToAdd.onChanged((event) => {
+                const isFloatingGroupsEnabled =
+                    !this.accessor.options.disableFloatingGroups;
+
+                if (isFloatingGroupsEnabled && event.shiftKey) {
+                    event.preventDefault();
+
+                    const panel = this.accessor.getGroupPanel(tabToAdd.panelId);
+
+                    const { top, left } =
+                        tabToAdd.element.getBoundingClientRect();
+                    const { top: rootTop, left: rootLeft } =
+                        this.accessor.element.getBoundingClientRect();
+
+                    this.accessor.addFloatingGroup(
+                        panel as DockviewPanel,
+                        {
+                            x: left - rootLeft,
+                            y: top - rootTop,
+                        },
+                        { inDragMode: true }
+                    );
+                    return;
+                }
+
                 const alreadyFocused =
                     panel.id === this.group.model.activePanel?.id &&
                     this.group.model.isContentFocused;
diff --git a/packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts b/packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts
index 1737c87aa..5aef855c6 100644
--- a/packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts
+++ b/packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts
@@ -28,6 +28,7 @@ export class VoidContainer extends CompositeDisposable {
         this._element = document.createElement('div');
 
         this._element.className = 'void-container';
+        this._element.id = 'dv-group-float-drag-handle';
         this._element.tabIndex = 0;
         this._element.draggable = true;
 
diff --git a/packages/dockview-core/src/dockview/deserializer.ts b/packages/dockview-core/src/dockview/deserializer.ts
index 82daa7381..3f3490b14 100644
--- a/packages/dockview-core/src/dockview/deserializer.ts
+++ b/packages/dockview-core/src/dockview/deserializer.ts
@@ -1,7 +1,7 @@
 import { GroupviewPanelState } from './types';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { DockviewPanel, IDockviewPanel } from './dockviewPanel';
-import { IDockviewComponent } from './dockviewComponent';
+import { DockviewComponent } from './dockviewComponent';
 import { DockviewPanelModel } from './dockviewPanelModel';
 import { DockviewApi } from '../api/component.api';
 
@@ -21,7 +21,7 @@ interface LegacyState extends GroupviewPanelState {
 }
 
 export class DefaultDockviewDeserialzier implements IPanelDeserializer {
-    constructor(private readonly layout: IDockviewComponent) {}
+    constructor(private readonly layout: DockviewComponent) {}
 
     public fromJSON(
         panelData: GroupviewPanelState,
diff --git a/packages/dockview-core/src/dockview/dockviewComponent.scss b/packages/dockview-core/src/dockview/dockviewComponent.scss
index db272fc48..1aa878539 100644
--- a/packages/dockview-core/src/dockview/dockviewComponent.scss
+++ b/packages/dockview-core/src/dockview/dockviewComponent.scss
@@ -1,14 +1,15 @@
 .dv-dockview {
-  position: relative;
-  background-color: var(--dv-group-view-background-color);
+    position: relative;
+    background-color: var(--dv-group-view-background-color);
 
-  .dv-watermark-container {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    height: 100%;
-    width: 100%;
-  }
+    .dv-watermark-container {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        height: 100%;
+        width: 100%;
+        z-index: 1;
+    }
 }
 
 .groupview {
diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts
index cce14c23d..2ef2cdf5a 100644
--- a/packages/dockview-core/src/dockview/dockviewComponent.ts
+++ b/packages/dockview-core/src/dockview/dockviewComponent.ts
@@ -5,7 +5,7 @@ import {
     ISerializedLeafNode,
 } from '../gridview/gridview';
 import { directionToPosition, Droptarget, Position } from '../dnd/droptarget';
-import { tail, sequenceEquals } from '../array';
+import { tail, sequenceEquals, remove } from '../array';
 import { DockviewPanel, IDockviewPanel } from './dockviewPanel';
 import { CompositeDisposable } from '../lifecycle';
 import { Event, Emitter } from '../events';
@@ -41,15 +41,26 @@ import {
     GroupPanelViewState,
     GroupviewDropEvent,
 } from './dockviewGroupPanelModel';
-import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel';
+import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { DockviewPanelModel } from './dockviewPanelModel';
 import { getPanelData } from '../dnd/dataTransfer';
+import { Overlay } from '../dnd/overlay';
+import { toggleClass } from '../dom';
+import {
+    DockviewFloatingGroupPanel,
+    IDockviewFloatingGroupPanel,
+} from './dockviewFloatingGroupPanel';
 
 export interface PanelReference {
     update: (event: { params: { [key: string]: any } }) => void;
     remove: () => void;
 }
 
+export interface SerializedFloatingGroup {
+    data: GroupPanelViewState;
+    position: { height: number; width: number; left: number; top: number };
+}
+
 export interface SerializedDockview {
     grid: {
         root: SerializedGridObject<GroupPanelViewState>;
@@ -57,8 +68,9 @@ export interface SerializedDockview {
         width: number;
         orientation: Orientation;
     };
-    panels: { [key: string]: GroupviewPanelState };
+    panels: Record<string, GroupviewPanelState>;
     activeGroup?: string;
+    floatingGroups?: SerializedFloatingGroup[];
 }
 
 export type DockviewComponentUpdateOptions = Pick<
@@ -84,6 +96,7 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     readonly activePanel: IDockviewPanel | undefined;
     readonly totalPanels: number;
     readonly panels: IDockviewPanel[];
+    readonly floatingGroups: IDockviewFloatingGroupPanel[];
     readonly onDidDrop: Event<DockviewDropEvent>;
     readonly orientation: Orientation;
     updateOptions(options: DockviewComponentUpdateOptions): void;
@@ -102,7 +115,7 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     getGroupPanel: (id: string) => IDockviewPanel | undefined;
     createWatermarkComponent(): IWatermarkRenderer;
     // lifecycle
-    addGroup(options?: AddGroupOptions): IDockviewGroupPanel;
+    addGroup(options?: AddGroupOptions): DockviewGroupPanel;
     closeAllGroups(): void;
     // events
     moveToNext(options?: MovementOptions): void;
@@ -116,6 +129,10 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     readonly onDidAddPanel: Event<IDockviewPanel>;
     readonly onDidLayoutFromJSON: Event<void>;
     readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>;
+    addFloatingGroup(
+        item: IDockviewPanel | DockviewGroupPanel,
+        coord?: { x: number; y: number }
+    ): void;
 }
 
 export class DockviewComponent
@@ -147,6 +164,8 @@ export class DockviewComponent
     readonly onDidActivePanelChange: Event<IDockviewPanel | undefined> =
         this._onDidActivePanelChange.event;
 
+    readonly floatingGroups: DockviewFloatingGroupPanel[] = [];
+
     get orientation(): Orientation {
         return this.gridview.orientation;
     }
@@ -181,7 +200,7 @@ export class DockviewComponent
             parentElement: options.parentElement,
         });
 
-        this.element.classList.add('dv-dockview');
+        toggleClass(this.gridview.element, 'dv-dockview', true);
 
         this.addDisposables(
             this._onDidDrop,
@@ -229,6 +248,13 @@ export class DockviewComponent
                     if (data.viewId !== this.id) {
                         return false;
                     }
+
+                    if (position === 'center') {
+                        // center drop target is only allowed if there are no panels in the grid
+                        // floating panels are allowed
+                        return this.gridview.length === 0;
+                    }
+
                     return true;
                 }
 
@@ -243,7 +269,7 @@ export class DockviewComponent
 
                 return false;
             },
-            acceptedTargetZones: ['top', 'bottom', 'left', 'right'],
+            acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
             overlayModel: {
                 activationSize: { type: 'pixels', value: 10 },
                 size: { type: 'pixels', value: 20 },
@@ -278,6 +304,85 @@ export class DockviewComponent
         this.updateWatermark();
     }
 
+    addFloatingGroup(
+        item: DockviewPanel | DockviewGroupPanel,
+        coord?: { x?: number; y?: number; height?: number; width?: number },
+        options?: { skipRemoveGroup?: boolean; inDragMode: boolean }
+    ): void {
+        let group: DockviewGroupPanel;
+
+        if (item instanceof DockviewPanel) {
+            group = this.createGroup();
+
+            this.removePanel(item, {
+                removeEmptyGroup: true,
+                skipDispose: true,
+            });
+
+            group.model.openPanel(item);
+        } else {
+            group = item;
+
+            const skip =
+                typeof options?.skipRemoveGroup === 'boolean' &&
+                options.skipRemoveGroup;
+
+            if (!skip) {
+                this.doRemoveGroup(item, { skipDispose: true });
+            }
+        }
+
+        group.model.isFloating = true;
+
+        const overlayLeft =
+            typeof coord?.x === 'number' ? Math.max(coord.x, 0) : 100;
+        const overlayTop =
+            typeof coord?.y === 'number' ? Math.max(coord.y, 0) : 100;
+
+        const overlay = new Overlay({
+            container: this.gridview.element,
+            content: group.element,
+            height: coord?.height ?? 300,
+            width: coord?.width ?? 300,
+            left: overlayLeft,
+            top: overlayTop,
+            minimumInViewportWidth: 100,
+            minimumInViewportHeight: 100,
+        });
+
+        const el = group.element.querySelector('#dv-group-float-drag-handle');
+
+        if (el) {
+            overlay.setupDrag(el as HTMLElement, {
+                inDragMode:
+                    typeof options?.inDragMode === 'boolean'
+                        ? options.inDragMode
+                        : false,
+            });
+        }
+
+        const floatingGroupPanel = new DockviewFloatingGroupPanel(
+            group,
+            overlay
+        );
+
+        floatingGroupPanel.addDisposables(
+            overlay.onDidChange(() => {
+                this._bufferOnDidLayoutChange.fire();
+            }),
+            {
+                dispose: () => {
+                    group.model.isFloating = false;
+                    remove(this.floatingGroups, floatingGroupPanel);
+                    this.updateWatermark();
+                },
+            }
+        );
+
+        this.floatingGroups.push(floatingGroupPanel);
+        this.updateWatermark();
+    }
+
     private orthogonalize(position: Position): DockviewGroupPanel {
         switch (position) {
             case 'top':
@@ -303,6 +408,7 @@ export class DockviewComponent
         switch (position) {
             case 'top':
             case 'left':
+            case 'center':
                 return this.createGroupAtLocation([0]); // insert into first position
             case 'bottom':
             case 'right':
@@ -326,6 +432,21 @@ export class DockviewComponent
         this.layout(this.gridview.width, this.gridview.height, true);
     }
 
+    override layout(
+        width: number,
+        height: number,
+        forceResize?: boolean | undefined
+    ): void {
+        super.layout(width, height, forceResize);
+
+        if (this.floatingGroups) {
+            for (const floating of this.floatingGroups) {
+                // ensure floting groups stay within visible boundaries
+                floating.overlay.renderWithinBoundaryConditions();
+            }
+        }
+    }
+
     focus(): void {
         this.activeGroup?.focus();
     }
@@ -397,11 +518,26 @@ export class DockviewComponent
             return collection;
         }, {} as { [key: string]: GroupviewPanelState });
 
-        return {
+        const floats: SerializedFloatingGroup[] = this.floatingGroups.map(
+            (floatingGroup) => {
+                return {
+                    data: floatingGroup.group.toJSON() as GroupPanelViewState,
+                    position: floatingGroup.overlay.toJSON(),
+                };
+            }
+        );
+
+        const result: SerializedDockview = {
             grid: data,
             panels,
             activeGroup: this.activeGroup?.id,
         };
+
+        if (floats.length > 0) {
+            result.floatingGroups = floats;
+        }
+
+        return result;
     }
 
     fromJSON(data: SerializedDockview): void {
@@ -417,48 +553,67 @@ export class DockviewComponent
         const width = this.width;
         const height = this.height;
 
+        const createGroupFromSerializedState = (data: GroupPanelViewState) => {
+            const { id, locked, hideHeader, views, activeView } = data;
+
+            const group = this.createGroup({
+                id,
+                locked: !!locked,
+                hideHeader: !!hideHeader,
+            });
+
+            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,
+                });
+            }
+
+            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: ISerializedLeafNode<GroupPanelViewState>) => {
-                const { id, locked, hideHeader, views, activeView } = node.data;
-
-                const group = this.createGroup({
-                    id,
-                    locked: !!locked,
-                    hideHeader: !!hideHeader,
-                });
-
-                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,
-                    });
-                }
-
-                if (!group.activePanel && group.panels.length > 0) {
-                    group.model.openPanel(
-                        group.panels[group.panels.length - 1],
-                        {
-                            skipSetGroupActive: true,
-                        }
-                    );
-                }
-
-                return group;
+                return createGroupFromSerializedState(node.data);
             },
         });
 
-        this.layout(width, height);
+        this.layout(width, height, true);
+
+        const serializedFloatingGroups = data.floatingGroups ?? [];
+
+        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 }
+            );
+        }
+
+        for (const floatingGroup of this.floatingGroups) {
+            floatingGroup.overlay.renderWithinBoundaryConditions();
+        }
 
         if (typeof activeGroup === 'string') {
             const panel = this.getPanel(activeGroup);
@@ -478,7 +633,7 @@ export class DockviewComponent
 
         for (const group of groups) {
             // remove the group will automatically remove the panels
-            this.removeGroup(group, true);
+            this.removeGroup(group, { skipActive: true });
         }
 
         if (hasActiveGroup) {
@@ -500,13 +655,19 @@ export class DockviewComponent
         }
     }
 
-    addPanel(options: AddPanelOptions): IDockviewPanel {
+    addPanel(options: AddPanelOptions): DockviewPanel {
         if (this.panels.find((_) => _.id === options.id)) {
             throw new Error(`panel with id ${options.id} already exists`);
         }
 
         let referenceGroup: DockviewGroupPanel | undefined;
 
+        if (options.position && options.floating) {
+            throw new Error(
+                'you can only provide one of: position, floating as arguments to .addPanel(...)'
+            );
+        }
+
         if (options.position) {
             if (isPanelOptionsWithPanel(options.position)) {
                 const referencePanel =
@@ -545,13 +706,29 @@ export class DockviewComponent
             referenceGroup = this.activeGroup;
         }
 
-        let panel: IDockviewPanel;
+        let panel: DockviewPanel;
 
         if (referenceGroup) {
             const target = toTarget(
                 <Direction>options.position?.direction || 'within'
             );
-            if (target === 'center') {
+
+            if (options.floating) {
+                const group = this.createGroup();
+                panel = this.createPanel(options, group);
+                group.model.openPanel(panel);
+
+                const o =
+                    typeof options.floating === 'object' &&
+                    options.floating !== null
+                        ? options.floating
+                        : {};
+
+                this.addFloatingGroup(group, o, {
+                    inDragMode: false,
+                    skipRemoveGroup: true,
+                });
+            } else if (referenceGroup.api.isFloating || target === 'center') {
                 panel = this.createPanel(options, referenceGroup);
                 referenceGroup.model.openPanel(panel);
             } else {
@@ -565,10 +742,26 @@ export class DockviewComponent
                 panel = this.createPanel(options, group);
                 group.model.openPanel(panel);
             }
+        } else if (options.floating) {
+            const group = this.createGroup();
+            panel = this.createPanel(options, group);
+            group.model.openPanel(panel);
+
+            const o =
+                typeof options.floating === 'object' &&
+                options.floating !== null
+                    ? options.floating
+                    : {};
+
+            this.addFloatingGroup(group, o, {
+                inDragMode: false,
+                skipRemoveGroup: true,
+            });
         } else {
             const group = this.createGroupAtLocation();
 
             panel = this.createPanel(options, group);
+
             group.model.openPanel(panel);
         }
 
@@ -592,7 +785,9 @@ export class DockviewComponent
 
         group.model.removePanel(panel);
 
-        panel.dispose();
+        if (!options.skipDispose) {
+            panel.dispose();
+        }
 
         if (group.size === 0 && options.removeEmptyGroup) {
             this.removeGroup(group);
@@ -614,7 +809,7 @@ export class DockviewComponent
     }
 
     private updateWatermark(): void {
-        if (this.groups.length === 0) {
+        if (this.groups.filter((x) => !x.api.isFloating).length === 0) {
             if (!this.watermark) {
                 this.watermark = this.createWatermarkComponent();
 
@@ -626,7 +821,7 @@ export class DockviewComponent
                 watermarkContainer.className = 'dv-watermark-container';
                 watermarkContainer.appendChild(this.watermark.element);
 
-                this.element.appendChild(watermarkContainer);
+                this.gridview.element.appendChild(watermarkContainer);
             }
         } else if (this.watermark) {
             this.watermark.element.parentElement!.remove();
@@ -696,17 +891,51 @@ export class DockviewComponent
         }
     }
 
-    removeGroup(group: DockviewGroupPanel, skipActive = false): void {
+    removeGroup(
+        group: DockviewGroupPanel,
+        options?:
+            | {
+                  skipActive?: boolean;
+                  skipDispose?: boolean;
+              }
+            | undefined
+    ): void {
         const panels = [...group.panels]; // reassign since group panels will mutate
 
         for (const panel of panels) {
             this.removePanel(panel, {
                 removeEmptyGroup: false,
-                skipDispose: false,
+                skipDispose: options?.skipDispose ?? false,
             });
         }
 
-        super.doRemoveGroup(group, { skipActive });
+        this.doRemoveGroup(group, options);
+    }
+
+    protected override doRemoveGroup(
+        group: DockviewGroupPanel,
+        options?:
+            | {
+                  skipActive?: boolean;
+                  skipDispose?: boolean;
+              }
+            | undefined
+    ): DockviewGroupPanel {
+        const floatingGroup = this.floatingGroups.find(
+            (_) => _.group === group
+        );
+
+        if (floatingGroup) {
+            if (!options?.skipDispose) {
+                floatingGroup.group.dispose();
+                this._groups.delete(group.id);
+            }
+            floatingGroup.dispose();
+
+            return floatingGroup.group;
+        }
+
+        return super.doRemoveGroup(group, options);
     }
 
     moveGroupOrPanel(
@@ -757,34 +986,44 @@ export class DockviewComponent
 
             if (sourceGroup && sourceGroup.size < 2) {
                 const [targetParentLocation, to] = tail(targetLocation);
-                const sourceLocation = getGridLocation(sourceGroup.element);
-                const [sourceParentLocation, from] = tail(sourceLocation);
 
-                if (
-                    sequenceEquals(sourceParentLocation, targetParentLocation)
-                ) {
-                    // special case when 'swapping' two views within same grid location
-                    // if a group has one tab - we are essentially moving the 'group'
-                    // which is equivalent to swapping two views in this case
-                    this.gridview.moveView(sourceParentLocation, from, to);
-                } else {
-                    // source group will become empty so delete the group
-                    const targetGroup = this.doRemoveGroup(sourceGroup, {
-                        skipActive: true,
-                        skipDispose: true,
-                    });
+                const isFloating = this.floatingGroups.find(
+                    (x) => x.group === sourceGroup
+                );
 
-                    // after deleting the group we need to re-evaulate the ref location
-                    const updatedReferenceLocation = getGridLocation(
-                        destinationGroup.element
-                    );
-                    const location = getRelativeLocation(
-                        this.gridview.orientation,
-                        updatedReferenceLocation,
-                        destinationTarget
-                    );
-                    this.doAddGroup(targetGroup, location);
+                if (!isFloating) {
+                    const sourceLocation = getGridLocation(sourceGroup.element);
+                    const [sourceParentLocation, from] = tail(sourceLocation);
+
+                    if (
+                        sequenceEquals(
+                            sourceParentLocation,
+                            targetParentLocation
+                        )
+                    ) {
+                        // special case when 'swapping' two views within same grid location
+                        // if a group has one tab - we are essentially moving the 'group'
+                        // which is equivalent to swapping two views in this case
+                        this.gridview.moveView(sourceParentLocation, from, to);
+                    }
                 }
+
+                // source group will become empty so delete the group
+                const targetGroup = this.doRemoveGroup(sourceGroup, {
+                    skipActive: true,
+                    skipDispose: true,
+                });
+
+                // after deleting the group we need to re-evaulate the ref location
+                const updatedReferenceLocation = getGridLocation(
+                    destinationGroup.element
+                );
+                const location = getRelativeLocation(
+                    this.gridview.orientation,
+                    updatedReferenceLocation,
+                    destinationTarget
+                );
+                this.doAddGroup(targetGroup, location);
             } else {
                 const groupItem: IDockviewPanel | undefined =
                     sourceGroup?.model.removePanel(sourceItemId) ||
@@ -828,7 +1067,17 @@ export class DockviewComponent
                     });
                 }
             } else {
-                this.gridview.removeView(getGridLocation(sourceGroup.element));
+                const floatingGroup = this.floatingGroups.find(
+                    (x) => x.group === sourceGroup
+                );
+
+                if (floatingGroup) {
+                    floatingGroup.dispose();
+                } else {
+                    this.gridview.removeView(
+                        getGridLocation(sourceGroup.element)
+                    );
+                }
 
                 const referenceLocation = getGridLocation(
                     referenceGroup.element
@@ -921,7 +1170,7 @@ export class DockviewComponent
     private createPanel(
         options: AddPanelOptions,
         group: DockviewGroupPanel
-    ): IDockviewPanel {
+    ): DockviewPanel {
         const contentComponent = options.component;
         const tabComponent =
             options.tabComponent || this.options.defaultTabComponent;
diff --git a/packages/dockview-core/src/dockview/dockviewFloatingGroupPanel.ts b/packages/dockview-core/src/dockview/dockviewFloatingGroupPanel.ts
new file mode 100644
index 000000000..65d768c94
--- /dev/null
+++ b/packages/dockview-core/src/dockview/dockviewFloatingGroupPanel.ts
@@ -0,0 +1,37 @@
+import { Overlay } from '../dnd/overlay';
+import { CompositeDisposable } from '../lifecycle';
+import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel';
+
+export interface IDockviewFloatingGroupPanel {
+    readonly group: IDockviewGroupPanel;
+    position(
+        bounds: Partial<{
+            top: number;
+            left: number;
+            height: number;
+            width: number;
+        }>
+    ): void;
+}
+
+export class DockviewFloatingGroupPanel
+    extends CompositeDisposable
+    implements IDockviewFloatingGroupPanel
+{
+    constructor(readonly group: DockviewGroupPanel, readonly overlay: Overlay) {
+        super();
+
+        this.addDisposables(overlay);
+    }
+
+    position(
+        bounds: Partial<{
+            top: number;
+            left: number;
+            height: number;
+            width: number;
+        }>
+    ): void {
+        this.overlay.setBounds(bounds);
+    }
+}
diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanel.ts
index b8391306c..0a1ccd52f 100644
--- a/packages/dockview-core/src/dockview/dockviewGroupPanel.ts
+++ b/packages/dockview-core/src/dockview/dockviewGroupPanel.ts
@@ -1,6 +1,5 @@
 import { IFrameworkPart } from '../panel/types';
 import { DockviewComponent } from '../dockview/dockviewComponent';
-import { GridviewPanelApi } from '../api/gridviewPanelApi';
 import {
     DockviewGroupPanelModel,
     GroupOptions,
@@ -9,8 +8,13 @@ import {
 } from './dockviewGroupPanelModel';
 import { GridviewPanel, IGridviewPanel } from '../gridview/gridviewPanel';
 import { IDockviewPanel } from '../dockview/dockviewPanel';
+import {
+    DockviewGroupPanelApi,
+    DockviewGroupPanelApiImpl,
+} from '../api/dockviewGroupPanelApi';
 
-export interface IDockviewGroupPanel extends IGridviewPanel {
+export interface IDockviewGroupPanel
+    extends IGridviewPanel<DockviewGroupPanelApi> {
     model: IDockviewGroupPanelModel;
     locked: boolean;
     readonly size: number;
@@ -20,13 +24,11 @@ export interface IDockviewGroupPanel extends IGridviewPanel {
 
 export type IDockviewGroupPanelPublic = IDockviewGroupPanel;
 
-export type DockviewGroupPanelApi = GridviewPanelApi;
-
 export class DockviewGroupPanel
-    extends GridviewPanel
+    extends GridviewPanel<DockviewGroupPanelApiImpl>
     implements IDockviewGroupPanel
 {
-    private readonly _model: IDockviewGroupPanelModel;
+    private readonly _model: DockviewGroupPanelModel;
 
     get panels(): IDockviewPanel[] {
         return this._model.panels;
@@ -40,7 +42,7 @@ export class DockviewGroupPanel
         return this._model.size;
     }
 
-    get model(): IDockviewGroupPanelModel {
+    get model(): DockviewGroupPanelModel {
         return this._model;
     }
 
@@ -61,10 +63,17 @@ export class DockviewGroupPanel
         id: string,
         options: GroupOptions
     ) {
-        super(id, 'groupview_default', {
-            minimumHeight: 100,
-            minimumWidth: 100,
-        });
+        super(
+            id,
+            'groupview_default',
+            {
+                minimumHeight: 100,
+                minimumWidth: 100,
+            },
+            new DockviewGroupPanelApiImpl(id, accessor)
+        );
+
+        this.api.initialize(this); // cannot use 'this' after after 'super' call
 
         this._model = new DockviewGroupPanelModel(
             this.element,
@@ -94,7 +103,6 @@ export class DockviewGroupPanel
     }
 
     toJSON(): any {
-        // TODO fix typing
         return this.model.toJSON();
     }
 }
diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts
index 8db0ac1b2..fb15a8895 100644
--- a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts
+++ b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts
@@ -137,6 +137,7 @@ export class DockviewGroupPanelModel
     private watermark?: IWatermarkRenderer;
     private _isGroupActive = false;
     private _locked = false;
+    private _isFloating = false;
     private _rightHeaderActions: IHeaderActionsRenderer | undefined;
     private _leftHeaderActions: IHeaderActionsRenderer | undefined;
 
@@ -224,6 +225,24 @@ export class DockviewGroupPanelModel
         );
     }
 
+    get isFloating(): boolean {
+        return this._isFloating;
+    }
+
+    set isFloating(value: boolean) {
+        this._isFloating = value;
+
+        this.dropTarget.setTargetZones(
+            value ? ['center'] : ['top', 'bottom', 'left', 'right', 'center']
+        );
+
+        toggleClass(this.container, 'dv-groupview-floating', value);
+
+        this.groupPanel.api._onDidFloatingStateChange.fire({
+            isFloating: this.isFloating,
+        });
+    }
+
     constructor(
         private readonly container: HTMLElement,
         private accessor: DockviewComponent,
@@ -233,7 +252,7 @@ export class DockviewGroupPanelModel
     ) {
         super();
 
-        this.container.classList.add('groupview');
+        toggleClass(this.container, 'groupview', true);
 
         this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
 
@@ -248,6 +267,10 @@ export class DockviewGroupPanelModel
 
                 const data = getPanelData();
 
+                if (!data && event.shiftKey && !this.isFloating) {
+                    return false;
+                }
+
                 if (data && data.viewId === this.accessor.id) {
                     if (data.groupId === this.id) {
                         if (position === 'center') {
@@ -773,6 +796,7 @@ export class DockviewGroupPanelModel
     public dispose(): void {
         super.dispose();
 
+        this.watermark?.element.remove();
         this.watermark?.dispose?.();
 
         for (const panel of this.panels) {
diff --git a/packages/dockview-core/src/dockview/dockviewPanel.ts b/packages/dockview-core/src/dockview/dockviewPanel.ts
index 4f67933fc..c2d1b08dd 100644
--- a/packages/dockview-core/src/dockview/dockviewPanel.ts
+++ b/packages/dockview-core/src/dockview/dockviewPanel.ts
@@ -8,7 +8,7 @@ import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { CompositeDisposable, IDisposable } from '../lifecycle';
 import { IPanel, PanelUpdateEvent, Parameters } from '../panel/types';
 import { IDockviewPanelModel } from './dockviewPanelModel';
-import { IDockviewComponent } from './dockviewComponent';
+import { DockviewComponent } from './dockviewComponent';
 
 export interface IDockviewPanel extends IDisposable, IPanel {
     readonly view: IDockviewPanelModel;
@@ -47,7 +47,7 @@ export class DockviewPanel
 
     constructor(
         public readonly id: string,
-        accessor: IDockviewComponent,
+        accessor: DockviewComponent,
         private readonly containerApi: DockviewApi,
         group: DockviewGroupPanel,
         readonly view: IDockviewPanelModel
@@ -55,7 +55,7 @@ export class DockviewPanel
         super();
         this._group = group;
 
-        this.api = new DockviewPanelApiImpl(this, this._group);
+        this.api = new DockviewPanelApiImpl(this, this._group, accessor);
 
         this.addDisposables(
             this.api.onActiveChange(() => {
diff --git a/packages/dockview-core/src/dockview/options.ts b/packages/dockview-core/src/dockview/options.ts
index 147cc5e48..e7249d6c9 100644
--- a/packages/dockview-core/src/dockview/options.ts
+++ b/packages/dockview-core/src/dockview/options.ts
@@ -8,16 +8,14 @@ import {
     IWatermarkRenderer,
     DockviewDropTargets,
 } from './types';
-import {
-    DockviewGroupPanel,
-    DockviewGroupPanelApi,
-} from './dockviewGroupPanel';
+import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { ISplitviewStyles, Orientation } from '../splitview/splitview';
 import { PanelTransfer } from '../dnd/dataTransfer';
 import { IDisposable } from '../lifecycle';
 import { Position } from '../dnd/droptarget';
 import { IDockviewPanel } from './dockviewPanel';
 import { FrameworkFactory } from '../panel/componentFactory';
+import { DockviewGroupPanelApi } from '../api/dockviewGroupPanelApi';
 
 export interface IHeaderActionsRenderer extends IDisposable {
     readonly element: HTMLElement;
@@ -87,6 +85,7 @@ export interface DockviewComponentOptions extends DockviewRenderFunctions {
     ) => IHeaderActionsRenderer;
     singleTabMode?: 'fullwidth' | 'default';
     parentElement?: HTMLElement;
+    disableFloatingGroups?: boolean;
 }
 
 export interface PanelOptions {
@@ -134,12 +133,32 @@ export function isPanelOptionsWithGroup(
     return false;
 }
 
-export interface AddPanelOptions
-    extends Omit<PanelOptions, 'component' | 'tabComponent'> {
+type AddPanelFloatingGroupUnion = {
+    floating:
+        | {
+              height?: number;
+              width?: number;
+              x?: number;
+              y?: number;
+          }
+        | true;
+    position: never;
+};
+
+type AddPanelPositionUnion = {
+    floating: false | never;
+    position: AddPanelPositionOptions;
+};
+
+type AddPanelOptionsUnion = AddPanelFloatingGroupUnion | AddPanelPositionUnion;
+
+export type AddPanelOptions = Omit<
+    PanelOptions,
+    'component' | 'tabComponent'
+> & {
     component: string;
     tabComponent?: string;
-    position?: AddPanelPositionOptions;
-}
+} & Partial<AddPanelOptionsUnion>;
 
 type AddGroupOptionsWithPanel = {
     referencePanel: string | IDockviewPanel;
diff --git a/packages/dockview-core/src/dom.ts b/packages/dockview-core/src/dom.ts
index 4a36f4bde..a12b50742 100644
--- a/packages/dockview-core/src/dom.ts
+++ b/packages/dockview-core/src/dom.ts
@@ -1,5 +1,5 @@
 import {
-    Event,
+    Event as DockviewEvent,
     Emitter,
     addDisposableListener,
     addDisposableWindowListener,
@@ -87,8 +87,8 @@ export function getElementsByTagName(tag: string): HTMLElement[] {
 }
 
 export interface IFocusTracker extends IDisposable {
-    readonly onDidFocus: Event<void>;
-    readonly onDidBlur: Event<void>;
+    readonly onDidFocus: DockviewEvent<void>;
+    readonly onDidBlur: DockviewEvent<void>;
     refreshState?(): void;
 }
 
@@ -101,10 +101,10 @@ export function trackFocus(element: HTMLElement | Window): IFocusTracker {
  */
 class FocusTracker extends CompositeDisposable implements IFocusTracker {
     private readonly _onDidFocus = new Emitter<void>();
-    public readonly onDidFocus: Event<void> = this._onDidFocus.event;
+    public readonly onDidFocus: DockviewEvent<void> = this._onDidFocus.event;
 
     private readonly _onDidBlur = new Emitter<void>();
-    public readonly onDidBlur: Event<void> = this._onDidBlur.event;
+    public readonly onDidBlur: DockviewEvent<void> = this._onDidBlur.event;
 
     private _refreshStateHandler: () => void;
 
@@ -172,3 +172,16 @@ class FocusTracker extends CompositeDisposable implements IFocusTracker {
         this._refreshStateHandler();
     }
 }
+
+// quasi: apparently, but not really; seemingly
+const QUASI_PREVENT_DEFAULT_KEY = 'dv-quasiPreventDefault';
+
+// mark an event directly for other listeners to check
+export function quasiPreventDefault(event: Event): void {
+    (event as any)[QUASI_PREVENT_DEFAULT_KEY] = true;
+}
+
+// check if this event has been marked
+export function quasiDefaultPrevented(event: Event): boolean {
+    return (event as any)[QUASI_PREVENT_DEFAULT_KEY];
+}
diff --git a/packages/dockview-core/src/events.ts b/packages/dockview-core/src/events.ts
index cb8d95930..9474ad317 100644
--- a/packages/dockview-core/src/events.ts
+++ b/packages/dockview-core/src/events.ts
@@ -74,7 +74,7 @@ export class Emitter<T> implements IDisposable {
     static ENABLE_TRACKING = false;
     static readonly MEMORY_LEAK_WATCHER = new LeakageMonitor();
 
-    static setLeakageMonitorEnabled(isEnabled: boolean) {
+    static setLeakageMonitorEnabled(isEnabled: boolean): void {
         if (isEnabled !== Emitter.ENABLE_TRACKING) {
             Emitter.MEMORY_LEAK_WATCHER.clear();
         }
diff --git a/packages/dockview-core/src/gridview/branchNode.ts b/packages/dockview-core/src/gridview/branchNode.ts
index 6295b3f88..ab5507128 100644
--- a/packages/dockview-core/src/gridview/branchNode.ts
+++ b/packages/dockview-core/src/gridview/branchNode.ts
@@ -149,7 +149,7 @@ export class BranchNode extends CompositeDisposable implements IView {
                                 : true,
                     };
                 }),
-                size: this.size,
+                size: this.orthogonalSize,
             };
 
             this.children = childDescriptors.map((c) => c.node);
@@ -235,7 +235,7 @@ export class BranchNode extends CompositeDisposable implements IView {
         this._size = orthogonalSize;
         this._orthogonalSize = size;
 
-        this.splitview.layout(this.size, this.orthogonalSize);
+        this.splitview.layout(orthogonalSize, size);
     }
 
     public addChild(
diff --git a/packages/dockview-core/src/gridview/gridview.ts b/packages/dockview-core/src/gridview/gridview.ts
index cd49a5624..f4f1d35eb 100644
--- a/packages/dockview-core/src/gridview/gridview.ts
+++ b/packages/dockview-core/src/gridview/gridview.ts
@@ -400,8 +400,9 @@ export class Gridview implements IDisposable {
                 orientation,
                 this.proportionalLayout,
                 this.styles,
-                orthogonalSize, // <- size - flips at each depth
                 node.size, // <- orthogonal size - flips at each depth
+                orthogonalSize, // <- size - flips at each depth
+
                 children
             );
         } else {
@@ -455,7 +456,9 @@ export class Gridview implements IDisposable {
             this.root.size
         );
 
-        if (oldRoot.children.length === 1) {
+        if (oldRoot.children.length === 0) {
+            // no data so no need to add anything back in
+        } else if (oldRoot.children.length === 1) {
             // can remove one level of redundant branching if there is only a single child
             const childReference = oldRoot.children[0];
             const child = oldRoot.removeChild(0); // remove to prevent disposal when disposing of unwanted root
diff --git a/packages/dockview-core/src/gridview/gridviewComponent.ts b/packages/dockview-core/src/gridview/gridviewComponent.ts
index 40dea53aa..12729b599 100644
--- a/packages/dockview-core/src/gridview/gridviewComponent.ts
+++ b/packages/dockview-core/src/gridview/gridviewComponent.ts
@@ -219,7 +219,7 @@ export class GridviewComponent
             },
         });
 
-        this.layout(width, height);
+        this.layout(width, height, true);
 
         queue.forEach((f) => f());
 
diff --git a/packages/dockview-core/src/gridview/gridviewPanel.ts b/packages/dockview-core/src/gridview/gridviewPanel.ts
index 9562bb92b..b35758287 100644
--- a/packages/dockview-core/src/gridview/gridviewPanel.ts
+++ b/packages/dockview-core/src/gridview/gridviewPanel.ts
@@ -28,8 +28,8 @@ export interface GridviewInitParameters extends PanelInitParameters {
     isVisible?: boolean;
 }
 
-export interface IGridviewPanel
-    extends BasePanelViewExported<GridviewPanelApi> {
+export interface IGridviewPanel<T extends GridviewPanelApi = GridviewPanelApi>
+    extends BasePanelViewExported<T> {
     readonly minimumWidth: number;
     readonly maximumWidth: number;
     readonly minimumHeight: number;
@@ -38,8 +38,10 @@ export interface IGridviewPanel
     readonly snap: boolean;
 }
 
-export abstract class GridviewPanel
-    extends BasePanelView<GridviewPanelApiImpl>
+export abstract class GridviewPanel<
+        T extends GridviewPanelApiImpl = GridviewPanelApiImpl
+    >
+    extends BasePanelView<T>
     implements IGridPanelComponentView, IGridviewPanel
 {
     private _evaluatedMinimumWidth = 0;
@@ -134,9 +136,10 @@ export abstract class GridviewPanel
             maximumWidth?: number;
             minimumHeight?: number;
             maximumHeight?: number;
-        }
+        },
+        api?: T
     ) {
-        super(id, component, new GridviewPanelApiImpl(id));
+        super(id, component, api ?? <T>new GridviewPanelApiImpl(id));
 
         if (typeof options?.minimumWidth === 'number') {
             this._minimumWidth = options.minimumWidth;
diff --git a/packages/dockview-core/src/index.ts b/packages/dockview-core/src/index.ts
index 35aec243e..be2f51877 100644
--- a/packages/dockview-core/src/index.ts
+++ b/packages/dockview-core/src/index.ts
@@ -1,7 +1,5 @@
 export * from './dnd/dataTransfer';
 
-export { watchElementResize } from './dom';
-
 /**
  * Events, Emitters and Disposables are very common concepts that most codebases will contain.
  * We export them with a 'Dockview' prefix here to prevent accidental use by others.
@@ -71,6 +69,10 @@ export {
     SplitviewPanelApi,
 } from './api/splitviewPanelApi';
 export { ExpansionEvent, PaneviewPanelApi } from './api/paneviewPanelApi';
+export {
+    DockviewGroupPanelApi,
+    DockviewGroupPanelFloatingChangeEvent,
+} from './api/dockviewGroupPanelApi';
 export {
     CommonApi,
     SplitviewApi,
diff --git a/packages/dockview-core/src/math.ts b/packages/dockview-core/src/math.ts
index 4ee363902..1e4f7e1e9 100644
--- a/packages/dockview-core/src/math.ts
+++ b/packages/dockview-core/src/math.ts
@@ -5,7 +5,7 @@ export const clamp = (value: number, min: number, max: number): number => {
     return Math.min(max, Math.max(value, min));
 };
 
-export const sequentialNumberGenerator = () => {
+export const sequentialNumberGenerator = (): { next: () => string } => {
     let value = 1;
     return { next: () => (value++).toString() };
 };
diff --git a/packages/dockview-core/src/splitview/splitview.scss b/packages/dockview-core/src/splitview/splitview.scss
index 1f0df7ca9..df3380a89 100644
--- a/packages/dockview-core/src/splitview/splitview.scss
+++ b/packages/dockview-core/src/splitview/splitview.scss
@@ -1,3 +1,24 @@
+.dv-debug {
+    .split-view-container {
+        .sash-container {
+            .sash {
+                &.enabled {
+                    background-color: black;
+                }
+                &.disabled {
+                    background-color: orange;
+                }
+                &.maximum {
+                    background-color: green;
+                }
+                &.minimum {
+                    background-color: red;
+                }
+            }
+        }
+    }
+}
+
 .split-view-container {
     position: relative;
     overflow: hidden;
@@ -12,22 +33,6 @@
         }
     }
 
-    // debug
-    // .sash {
-    //   &.enabled {
-    //     background-color: black;
-    //   }
-    //   &.disabled {
-    //     background-color: orange;
-    //   }
-    //   &.maximum {
-    //     background-color: green;
-    //   }
-    //   &.minimum {
-    //     background-color: red;
-    //   }
-    // }
-
     &.horizontal {
         height: 100%;
 
diff --git a/packages/dockview-core/src/theme.scss b/packages/dockview-core/src/theme.scss
index daa0ffaef..6a10a1a35 100644
--- a/packages/dockview-core/src/theme.scss
+++ b/packages/dockview-core/src/theme.scss
@@ -7,6 +7,7 @@
     --dv-drag-over-border-color: white;
     --dv-tabs-container-scrollbar-color: #888;
     --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
+    --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
 }
 
 @mixin dockview-theme-dark-mixin {
@@ -225,3 +226,124 @@
 .dockview-theme-dracula {
     @include dockview-theme-dracula-mixin();
 }
+
+@mixin dockview-design-replit-mixin {
+    &.dv-dockview {
+        padding: 3px;
+    }
+
+    .view:has(> .groupview) {
+        padding: 3px;
+    }
+
+    .dv-resize-container:has(> .groupview) {
+        border-radius: 8px;
+    }
+
+    .groupview {
+        overflow: hidden;
+        border-radius: 10px;
+
+        .tabs-and-actions-container {
+            .tab {
+                margin: 4px;
+                border-radius: 8px;
+
+                .dockview-svg {
+                    height: 8px;
+                    width: 8px;
+                }
+
+                &:hover {
+                    background-color: #e4e5e6 !important;
+                }
+            }
+            border-bottom: 1px solid rgba(128, 128, 128, 0.35);
+        }
+
+        .content-container {
+            background-color: #fcfcfc;
+        }
+
+        &.active-group {
+            border: 1px solid rgba(128, 128, 128, 0.35);
+        }
+
+        &.inactive-group {
+            border: 1px solid transparent;
+        }
+    }
+
+    .vertical > .sash-container > .sash {
+        &::after {
+            content: '';
+            height: 4px;
+            width: 40px;
+            border-radius: 2px;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background-color: var(--dv-separator-handle-background-color);
+            position: absolute;
+        }
+
+        &:hover {
+            &::after {
+                background-color: var(
+                    --dv-separator-handle-hover-background-color
+                );
+            }
+        }
+    }
+
+    .horizontal > .sash-container > .sash {
+        &::after {
+            content: '';
+            height: 40px;
+            width: 4px;
+            border-radius: 2px;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background-color: var(--dv-separator-handle-background-color);
+            position: absolute;
+        }
+
+        &:hover {
+            &::after {
+                background-color: var(
+                    --dv-separator-handle-hover-background-color
+                );
+            }
+        }
+    }
+}
+
+.dockview-theme-replit {
+    @include dockview-theme-core-mixin();
+    @include dockview-design-replit-mixin();
+    //
+    --dv-group-view-background-color: #ebeced;
+    //
+    --dv-tabs-and-actions-container-background-color: #fcfcfc;
+    //
+    --dv-activegroup-visiblepanel-tab-background-color: #f0f1f2;
+    --dv-activegroup-hiddenpanel-tab-background-color: ##fcfcfc;
+    --dv-inactivegroup-visiblepanel-tab-background-color: #f0f1f2;
+    --dv-inactivegroup-hiddenpanel-tab-background-color: #fcfcfc;
+    --dv-tab-divider-color: transparent;
+    //
+    --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);
+    --dv-activegroup-hiddenpanel-tab-color: rgb(51, 51, 51);
+    --dv-inactivegroup-visiblepanel-tab-color: rgb(51, 51, 51);
+    --dv-inactivegroup-hiddenpanel-tab-color: rgb(51, 51, 51);
+    //
+    --dv-separator-border: transparent;
+    --dv-paneview-header-border-color: rgb(51, 51, 51);
+
+    --dv-background-color: #ebeced;
+
+    /////
+    --dv-separator-handle-background-color: #cfd1d3;
+    --dv-separator-handle-hover-background-color: #babbbb;
+}
diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx
index d2215db7f..3f2f0f51c 100644
--- a/packages/docs/docs/components/dockview.mdx
+++ b/packages/docs/docs/components/dockview.mdx
@@ -28,6 +28,7 @@ import DockviewExternalDnd from '@site/sandboxes/externaldnd-dockview/src/app';
 import DockviewResizeContainer from '@site/sandboxes/resizecontainer-dockview/src/app';
 import DockviewTabheight from '@site/sandboxes/tabheight-dockview/src/app';
 import DockviewWithIFrames from '@site/sandboxes/iframe-dockview/src/app';
+import DockviewFloating from '@site/sandboxes/floatinggroup-dockview/src/app';
 
 import { attach as attachDockviewVanilla } from '@site/sandboxes/javascript/vanilla-dockview/src/app';
 import { attach as attachSimpleDockview } from '@site/sandboxes/javascript/simple-dockview/src/app';
@@ -361,6 +362,33 @@ any drag and drop logic for other controls.
     <DockviewExternalDnd />
 </Container>
 
+## Floating Groups
+
+Dockview has built-in support for floating groups. Each floating container can contain a single group with many panels
+and you can have as many floating containers as needed. You cannot dock multiple groups together in the same floating container.
+
+Floating groups can be interacted with whilst holding the `shift` key activating the `event.shiftKey` boolean property on `KeyboardEvent` events.
+
+> Float an existing tab by holding `shift` whilst interacting with the tab
+
+<img style={{ width: '60%' }} src={useBaseUrl('/img/float_add.svg')} />
+
+> Move a floating tab by holding `shift` whilst moving the cursor or dragging the empty
+> header space
+
+<img style={{ width: '60%' }} src={useBaseUrl('/img/float_move.svg')} />
+
+> Move an entire floating group by holding `shift` whilst dragging the empty header space
+
+<img style={{ width: '60%' }} src={useBaseUrl('/img/float_group.svg')} />
+
+Floating groups can be programatically added through the dockview `api` method `api.addFloatingGroup(...)` and you can check whether
+a group is floating via the `group.api.isFloating` property. See examples for full code.
+
+<Container height={600} sandboxId="floatinggroup-dockview">
+    <DockviewFloating />
+</Container>
+
 ## Panels
 
 ### Add Panel
@@ -471,6 +499,21 @@ panel.api.updateParameters({
 });
 ```
 
+### Move panel
+
+You can programatically move a panel using the panel `api`.
+
+```ts
+panel.api.moveTo({ group, position, index });
+```
+
+An equivalent method for moving groups is avaliable on the group `api`.
+
+```ts
+const group = panel.api.group;
+group.api.moveTo({ group, position });
+```
+
 ### Panel Rendering
 
 By default `DockviewReact` only adds to the DOM those panels that are visible,
diff --git a/packages/docs/docusaurus.config.js b/packages/docs/docusaurus.config.js
index fc5450b1b..4c770d792 100644
--- a/packages/docs/docusaurus.config.js
+++ b/packages/docs/docusaurus.config.js
@@ -39,13 +39,15 @@ const config = {
         'docusaurus-plugin-sass',
         (context, options) => {
             return {
-                name: 'webpack',
+                name: 'custom-webpack',
                 configureWebpack: (config, isServer, utils) => {
                     return {
                         // externals: ['react', 'react-dom'],
                         devtool: 'source-map',
                         resolve: {
+                            ...config.resolve,
                             alias: {
+                                ...config.resolve.alias,
                                 react: path.join(
                                     __dirname,
                                     '../../node_modules',
@@ -57,9 +59,6 @@ const config = {
                                     'react-dom'
                                 ),
                             },
-                            fallback: {
-                                timers: false,
-                            },
                         },
                     };
                 },
diff --git a/packages/docs/sandboxes/demo-dockview/src/app.tsx b/packages/docs/sandboxes/demo-dockview/src/app.tsx
index 5ed911053..7461fe1a1 100644
--- a/packages/docs/sandboxes/demo-dockview/src/app.tsx
+++ b/packages/docs/sandboxes/demo-dockview/src/app.tsx
@@ -191,7 +191,7 @@ const LeftControls = (props: IDockviewHeaderActionsProps) => {
     );
 };
 
-const DockviewDemo = () => {
+const DockviewDemo = (props: { theme?: string }) => {
     const onReady = (event: DockviewReadyEvent) => {
         event.api.addPanel({
             id: 'panel_1',
@@ -249,7 +249,7 @@ const DockviewDemo = () => {
             rightHeaderActionsComponent={RightControls}
             leftHeaderActionsComponent={LeftControls}
             onReady={onReady}
-            className="dockview-theme-abyss"
+            className={props.theme || 'dockview-theme-abyss'}
         />
     );
 };
diff --git a/packages/docs/sandboxes/floatinggroup-dockview/package.json b/packages/docs/sandboxes/floatinggroup-dockview/package.json
new file mode 100644
index 000000000..9ce09597c
--- /dev/null
+++ b/packages/docs/sandboxes/floatinggroup-dockview/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "floatinggroup-dockview",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5",
+    "react-scripts": "*"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/packages/docs/sandboxes/floatinggroup-dockview/public/index.html b/packages/docs/sandboxes/floatinggroup-dockview/public/index.html
new file mode 100644
index 000000000..1f8a52426
--- /dev/null
+++ b/packages/docs/sandboxes/floatinggroup-dockview/public/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/packages/docs/sandboxes/floatinggroup-dockview/src/app.tsx b/packages/docs/sandboxes/floatinggroup-dockview/src/app.tsx
new file mode 100644
index 000000000..6dc1c553a
--- /dev/null
+++ b/packages/docs/sandboxes/floatinggroup-dockview/src/app.tsx
@@ -0,0 +1,266 @@
+import {
+    DockviewApi,
+    DockviewGroupPanel,
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewHeaderActionsProps,
+    IDockviewPanelProps,
+    SerializedDockview,
+} from 'dockview';
+import * as React from 'react';
+import { Icon } from './utils';
+
+const components = {
+    default: (props: IDockviewPanelProps<{ title: string }>) => {
+        return (
+            <div
+                style={{
+                    height: '100%',
+                    padding: '20px',
+                    background: 'var(--dv-group-view-background-color)',
+                }}
+            >
+                {props.params.title}
+            </div>
+        );
+    },
+};
+
+const counter = (() => {
+    let i = 0;
+
+    return {
+        next: () => ++i,
+    };
+})();
+
+function loadDefaultLayout(api: DockviewApi) {
+    api.addPanel({
+        id: 'panel_1',
+        component: 'default',
+    });
+
+    api.addPanel({
+        id: 'panel_2',
+        component: 'default',
+    });
+
+    api.addPanel({
+        id: 'panel_3',
+        component: 'default',
+    });
+
+    const panel4 = api.addPanel({
+        id: 'panel_4',
+        component: 'default',
+        floating: true,
+    });
+
+    api.addPanel({
+        id: 'panel_5',
+        component: 'default',
+        floating: false,
+        position: { referencePanel: panel4 },
+    });
+
+    api.addPanel({
+        id: 'panel_6',
+        component: 'default',
+    });
+}
+
+let panelCount = 0;
+
+function addPanel(api: DockviewApi) {
+    api.addPanel({
+        id: (++panelCount).toString(),
+        title: `Tab ${panelCount}`,
+        component: 'default',
+    });
+}
+
+function addFloatingPanel2(api: DockviewApi) {
+    api.addPanel({
+        id: (++panelCount).toString(),
+        title: `Tab ${panelCount}`,
+        component: 'default',
+        floating: { width: 250, height: 150, x: 50, y: 50 },
+    });
+}
+
+function safeParse<T>(value: any): T | null {
+    try {
+        return JSON.parse(value) as T;
+    } catch (err) {
+        return null;
+    }
+}
+
+const useLocalStorage = <T,>(
+    key: string
+): [T | null, (setter: T | null) => void] => {
+    const [state, setState] = React.useState<T | null>(
+        safeParse(localStorage.getItem(key))
+    );
+
+    React.useEffect(() => {
+        const _state = localStorage.getItem('key');
+        try {
+            if (_state !== null) {
+                setState(JSON.parse(_state));
+            }
+        } catch (err) {
+            //
+        }
+    }, [key]);
+
+    return [
+        state,
+        (_state: T | null) => {
+            if (_state === null) {
+                localStorage.removeItem(key);
+            } else {
+                localStorage.setItem(key, JSON.stringify(_state));
+                setState(_state);
+            }
+        },
+    ];
+};
+
+export const DockviewPersistance = () => {
+    const [api, setApi] = React.useState<DockviewApi>();
+    const [layout, setLayout] =
+        useLocalStorage<SerializedDockview>('floating.layout');
+
+    const load = (api: DockviewApi) => {
+        api.clear();
+        if (layout) {
+            try {
+                api.fromJSON(layout);
+            } catch (err) {
+                console.error(err);
+                api.clear();
+                loadDefaultLayout(api);
+            }
+        } else {
+            loadDefaultLayout(api);
+        }
+    };
+
+    const onReady = (event: DockviewReadyEvent) => {
+        load(event.api);
+        setApi(event.api);
+    };
+
+    return (
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                height: '100%',
+            }}
+        >
+            <div style={{ height: '25px' }}>
+                <button
+                    onClick={() => {
+                        if (api) {
+                            setLayout(api.toJSON());
+                        }
+                    }}
+                >
+                    Save
+                </button>
+                <button
+                    onClick={() => {
+                        if (api) {
+                            load(api);
+                        }
+                    }}
+                >
+                    Load
+                </button>
+                <button
+                    onClick={() => {
+                        api!.clear();
+                        setLayout(null);
+                    }}
+                >
+                    Clear
+                </button>
+                <button
+                    onClick={() => {
+                        addFloatingPanel2(api!);
+                    }}
+                >
+                    Add Floating Group
+                </button>
+            </div>
+            <div
+                style={{
+                    flexGrow: 1,
+                    overflow: 'hidden',
+                }}
+            >
+                <DockviewReact
+                    onReady={onReady}
+                    components={components}
+                    watermarkComponent={Watermark}
+                    leftHeaderActionsComponent={LeftComponent}
+                    rightHeaderActionsComponent={RightComponent}
+                    className="dockview-theme-abyss"
+                />
+            </div>
+        </div>
+    );
+};
+
+const LeftComponent = (props: IDockviewHeaderActionsProps) => {
+    const onClick = () => {
+        addPanel(props.containerApi);
+    };
+    return (
+        <div style={{ height: '100%', color: 'white', padding: '0px 4px' }}>
+            <Icon onClick={onClick} icon={'add'} />
+        </div>
+    );
+};
+
+const RightComponent = (props: IDockviewHeaderActionsProps) => {
+    const [floating, setFloating] = React.useState<boolean>(
+        props.api.isFloating
+    );
+
+    React.useEffect(() => {
+        const disposable = props.group.api.onDidFloatingStateChange((event) => [
+            setFloating(event.isFloating),
+        ]);
+
+        return () => {
+            disposable.dispose();
+        };
+    }, [props.group.api]);
+
+    const onClick = () => {
+        if (floating) {
+            const group = props.containerApi.addGroup();
+            props.group.api.moveTo({ group });
+        } else {
+            props.containerApi.addFloatingGroup(props.group);
+        }
+    };
+
+    return (
+        <div style={{ height: '100%', color: 'white', padding: '0px 4px' }}>
+            <Icon
+                onClick={onClick}
+                icon={floating ? 'jump_to_element' : 'back_to_tab'}
+            />
+        </div>
+    );
+};
+
+export default DockviewPersistance;
+
+const Watermark = () => {
+    return <div style={{ color: 'white', padding: '8px' }}>watermark</div>;
+};
diff --git a/packages/docs/sandboxes/floatinggroup-dockview/src/index.tsx b/packages/docs/sandboxes/floatinggroup-dockview/src/index.tsx
new file mode 100644
index 000000000..2fe1be232
--- /dev/null
+++ b/packages/docs/sandboxes/floatinggroup-dockview/src/index.tsx
@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}
diff --git a/packages/docs/sandboxes/floatinggroup-dockview/src/styles.css b/packages/docs/sandboxes/floatinggroup-dockview/src/styles.css
new file mode 100644
index 000000000..92b6a1b36
--- /dev/null
+++ b/packages/docs/sandboxes/floatinggroup-dockview/src/styles.css
@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}
diff --git a/packages/docs/sandboxes/floatinggroup-dockview/src/utils.tsx b/packages/docs/sandboxes/floatinggroup-dockview/src/utils.tsx
new file mode 100644
index 000000000..457128d67
--- /dev/null
+++ b/packages/docs/sandboxes/floatinggroup-dockview/src/utils.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+export const Icon = (props: {
+    icon: string;
+    title?: string;
+    onClick?: (event: React.MouseEvent) => void;
+}) => {
+    return (
+        <div
+            title={props.title}
+            style={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                width: '30px',
+                height: '100%',
+
+                fontSize: '18px',
+            }}
+            onClick={props.onClick}
+        >
+            <span
+                style={{ fontSize: 'inherit', cursor: 'pointer' }}
+                className="material-symbols-outlined"
+            >
+                {props.icon}
+            </span>
+        </div>
+    );
+};
diff --git a/packages/docs/sandboxes/floatinggroup-dockview/tsconfig.json b/packages/docs/sandboxes/floatinggroup-dockview/tsconfig.json
new file mode 100644
index 000000000..cdc4fb5f5
--- /dev/null
+++ b/packages/docs/sandboxes/floatinggroup-dockview/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "build/dist",
+        "module": "esnext",
+        "target": "es5",
+        "lib": ["es6", "dom"],
+        "sourceMap": true,
+        "allowJs": true,
+        "jsx": "react-jsx",
+        "moduleResolution": "node",
+        "rootDir": "src",
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true
+    }
+}
diff --git a/packages/docs/sandboxes/layout-dockview/src/app.tsx b/packages/docs/sandboxes/layout-dockview/src/app.tsx
index 33f1d6368..f0796befa 100644
--- a/packages/docs/sandboxes/layout-dockview/src/app.tsx
+++ b/packages/docs/sandboxes/layout-dockview/src/app.tsx
@@ -71,7 +71,7 @@ export const DockviewPersistance = () => {
                 event.api.fromJSON(layout);
                 success = true;
             } catch (err) {
-                //
+                console.error(err);
             }
         }
 
diff --git a/packages/docs/sandboxes/simple-dockview/src/app.tsx b/packages/docs/sandboxes/simple-dockview/src/app.tsx
index 4d1f066da..258e0a114 100644
--- a/packages/docs/sandboxes/simple-dockview/src/app.tsx
+++ b/packages/docs/sandboxes/simple-dockview/src/app.tsx
@@ -15,7 +15,7 @@ const components = {
     },
 };
 
-export const App: React.FC = () => {
+export const App: React.FC = (props: { theme?: string }) => {
     const onReady = (event: DockviewReadyEvent) => {
         const panel = event.api.addPanel({
             id: 'panel_1',
@@ -88,7 +88,7 @@ export const App: React.FC = () => {
         <DockviewReact
             components={components}
             onReady={onReady}
-            className="dockview-theme-abyss"
+            className={props.theme || 'dockview-theme-abyss'}
         />
     );
 };
diff --git a/packages/docs/src/components/gridview/events.tsx b/packages/docs/src/components/gridview/events.tsx
index 6917df907..9f2b0546d 100644
--- a/packages/docs/src/components/gridview/events.tsx
+++ b/packages/docs/src/components/gridview/events.tsx
@@ -251,8 +251,6 @@ export const EventsGridview = () => {
             },
         });
 
-        console.log('sdf');
-
         api.addPanel({
             id: 'panel_4',
             component: 'default',
diff --git a/packages/docs/src/components/ui/codeSandboxButton.tsx b/packages/docs/src/components/ui/codeSandboxButton.tsx
index d536d0ad0..f17a3dec9 100644
--- a/packages/docs/src/components/ui/codeSandboxButton.tsx
+++ b/packages/docs/src/components/ui/codeSandboxButton.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import './codeSandboxButton.scss';
+import { ThemePicker } from './container';
 
 const BASE_SANDBOX_URL =
     'https://codesandbox.io/s/github/mathuo/dockview/tree/master/packages/docs/sandboxes';
@@ -40,26 +41,29 @@ export const CodeSandboxButton = (props: { id: string }) => {
     }, [props.id]);
 
     return (
-        <span
-            className="codesandbox-button"
-            style={{ display: 'flex', alignItems: 'center' }}
-        >
-            <span className="codesandbox-button-pretext">{`Open in `}</span>
-            <a
-                href={url}
-                target={'_blank'}
-                className="codesandbox-button-content"
+        <>
+            <ThemePicker />
+            <span
+                className="codesandbox-button"
+                style={{ display: 'flex', alignItems: 'center' }}
             >
-                <span
-                    style={{
-                        fontWeight: 'bold',
-                        paddingRight: '4px',
-                    }}
+                <span className="codesandbox-button-pretext">{`Open in `}</span>
+                <a
+                    href={url}
+                    target={'_blank'}
+                    className="codesandbox-button-content"
                 >
-                    CodeSandbox
-                </span>
-                <CloseButton />
-            </a>
-        </span>
+                    <span
+                        style={{
+                            fontWeight: 'bold',
+                            paddingRight: '4px',
+                        }}
+                    >
+                        CodeSandbox
+                    </span>
+                    <CloseButton />
+                </a>
+            </span>
+        </>
     );
 };
diff --git a/packages/docs/src/components/ui/container.tsx b/packages/docs/src/components/ui/container.tsx
index 5ad78067e..b5321c570 100644
--- a/packages/docs/src/components/ui/container.tsx
+++ b/packages/docs/src/components/ui/container.tsx
@@ -69,6 +69,71 @@ const JavascriptIcon = (props: { height: number; width: number }) => {
     );
 };
 
+const themes = [
+    'dockview-theme-dark',
+    'dockview-theme-light',
+    'dockview-theme-vs',
+    'dockview-theme-dracula',
+    'dockview-theme-replit',
+];
+
+function useLocalStorageItem(key: string, defaultValue: string): string {
+    const [item, setItem] = React.useState<string | null>(
+        localStorage.getItem(key)
+    );
+
+    React.useEffect(() => {
+        const listener = (event: StorageEvent) => {
+            setItem(localStorage.getItem(key));
+        };
+
+        window.addEventListener('storage', listener);
+
+        setItem(localStorage.getItem(key));
+
+        return () => {
+            window.removeEventListener('storage', listener);
+        };
+    }, [key]);
+
+    return item === null ? defaultValue : item;
+}
+
+export const ThemePicker = () => {
+    const [theme, setTheme] = React.useState<string>(
+        localStorage.getItem('dv-theme-class-name') || themes[0]
+    );
+
+    React.useEffect(() => {
+        localStorage.setItem('dv-theme-class-name', theme);
+        window.dispatchEvent(new StorageEvent('storage'));
+    }, [theme]);
+
+    return (
+        <div
+            style={{
+                height: '20px',
+                display: 'flex',
+                alignItems: 'center',
+                padding: '0px 0px 0px 4px',
+            }}
+        >
+            <span style={{ paddingRight: '4px' }}>{'Theme: '}</span>
+            <select
+                style={{ backgroundColor: 'inherit', color: 'inherit' }}
+                onChange={(e) => setTheme(e.target.value)}
+                value={theme}
+            >
+                {themes.map((theme) => (
+                    <option key={theme} value={theme}>
+                        {theme}
+                    </option>
+                ))}
+            </select>
+        </div>
+    );
+};
+
 export const MultiFrameworkContainer = (props: {
     react: React.FC;
     typescript: (parent: HTMLElement) => { dispose: () => void };
@@ -81,6 +146,11 @@ export const MultiFrameworkContainer = (props: {
 
     const [animation, setAnimation] = React.useState<boolean>(false);
 
+    const theme = useLocalStorageItem(
+        'dv-theme-class-name',
+        'dockview-theme-abyss'
+    );
+
     React.useEffect(() => {
         setAnimation(true);
 
@@ -139,7 +209,7 @@ export const MultiFrameworkContainer = (props: {
                         <Spinner />
                     </div>
                 )}
-                {framework === 'React' && <props.react />}
+                {framework === 'React' && <props.react theme={theme} />}
             </div>
             <div
                 style={{
diff --git a/packages/docs/static/img/float_add.svg b/packages/docs/static/img/float_add.svg
new file mode 100644
index 000000000..7d12de4d6
--- /dev/null
+++ b/packages/docs/static/img/float_add.svg
@@ -0,0 +1,20 @@
+<svg width="156" height="76" viewBox="0 0 156 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="14" width="156" height="62" fill="#000C18"/>
+<rect width="156" height="14" fill="#1C1C2A"/>
+<rect width="30" height="14" fill="#10192C"/>
+<rect x="31" width="30" height="14" fill="#10192C"/>
+<rect x="30" width="1" height="14" fill="#2B2B4A"/>
+<rect x="61" width="1" height="14" fill="#2B2B4A"/>
+<rect x="41" y="54" width="30" height="14" fill="#000C18"/>
+<rect x="33" y="5" width="15" height="4" rx="2" fill="#777777"/>
+<rect x="2" y="5" width="6" height="4" rx="2" fill="#777777"/>
+<rect x="10" y="5" width="18" height="4" rx="2" fill="#777777"/>
+<rect x="68.5" y="7.5" width="83" height="60" fill="#000C18" stroke="#2B2B4A"/>
+<rect x="100" y="8" width="51" height="14" fill="#1C1C2A"/>
+<rect x="83" y="13" width="12" height="4" rx="2" fill="white"/>
+<rect x="73" y="13" width="7" height="4" rx="2" fill="white"/>
+<rect x="99" y="8" width="1" height="14" fill="#2B2B4A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M70.3445 8.26544C70.5198 8.14263 70.5104 7.87986 70.3266 7.76998L66.1804 5.29049C65.9614 5.15953 65.6906 5.34916 65.7388 5.59974L66.6506 10.344C66.691 10.5542 66.9347 10.653 67.1101 10.5302L67.7716 10.067C67.8669 10.0002 67.9142 9.88362 67.8922 9.76929L67.6024 8.26123C67.5542 8.01064 67.825 7.82101 68.044 7.95197L69.362 8.74015C69.4619 8.79989 69.5876 8.79538 69.683 8.7286L70.3445 8.26544Z" fill="white"/>
+<rect x="69.5" y="9.5" width="4" height="2" stroke="white" stroke-dasharray="0.25 0.25"/>
+<path d="M70.9414 4.47461V4.81445H68.9922V4.47461H70.9414ZM70.1484 3.64453V5.71484H69.7871V3.64453H70.1484ZM73.9473 5.28125C73.9473 5.21484 73.9368 5.15625 73.916 5.10547C73.8965 5.05339 73.8613 5.00651 73.8105 4.96484C73.7611 4.92318 73.6921 4.88346 73.6035 4.8457C73.5163 4.80794 73.4056 4.76953 73.2715 4.73047C73.1309 4.6888 73.0039 4.64258 72.8906 4.5918C72.7773 4.53971 72.6803 4.48047 72.5996 4.41406C72.5189 4.34766 72.457 4.27148 72.4141 4.18555C72.3711 4.09961 72.3496 4.0013 72.3496 3.89062C72.3496 3.77995 72.3724 3.67773 72.418 3.58398C72.4635 3.49023 72.5286 3.40885 72.6133 3.33984C72.6992 3.26953 72.8014 3.21484 72.9199 3.17578C73.0384 3.13672 73.1706 3.11719 73.3164 3.11719C73.5299 3.11719 73.7109 3.1582 73.8594 3.24023C74.0091 3.32096 74.123 3.42708 74.2012 3.55859C74.2793 3.6888 74.3184 3.82812 74.3184 3.97656H73.9434C73.9434 3.86979 73.9206 3.77539 73.875 3.69336C73.8294 3.61003 73.7604 3.54492 73.668 3.49805C73.5755 3.44987 73.4583 3.42578 73.3164 3.42578C73.1823 3.42578 73.0716 3.44596 72.9844 3.48633C72.8971 3.52669 72.832 3.58138 72.7891 3.65039C72.7474 3.7194 72.7266 3.79818 72.7266 3.88672C72.7266 3.94661 72.7389 4.0013 72.7637 4.05078C72.7897 4.09896 72.8294 4.14388 72.8828 4.18555C72.9375 4.22721 73.0065 4.26562 73.0898 4.30078C73.1745 4.33594 73.2754 4.36979 73.3926 4.40234C73.554 4.44792 73.6934 4.4987 73.8105 4.55469C73.9277 4.61068 74.0241 4.67383 74.0996 4.74414C74.1764 4.81315 74.2331 4.89193 74.2695 4.98047C74.3073 5.06771 74.3262 5.16667 74.3262 5.27734C74.3262 5.39323 74.3027 5.49805 74.2559 5.5918C74.209 5.68555 74.1419 5.76562 74.0547 5.83203C73.9674 5.89844 73.8626 5.94987 73.7402 5.98633C73.6191 6.02148 73.4837 6.03906 73.334 6.03906C73.2025 6.03906 73.0729 6.02083 72.9453 5.98438C72.819 5.94792 72.7038 5.89323 72.5996 5.82031C72.4967 5.7474 72.4141 5.65755 72.3516 5.55078C72.2904 5.44271 72.2598 5.31771 72.2598 5.17578H72.6348C72.6348 5.27344 72.6536 5.35742 72.6914 5.42773C72.7292 5.49674 72.7806 5.55404 72.8457 5.59961C72.9121 5.64518 72.987 5.67904 73.0703 5.70117C73.1549 5.72201 73.2428 5.73242 73.334 5.73242C73.4655 5.73242 73.5768 5.71419 73.668 5.67773C73.7591 5.64128 73.8281 5.58919 73.875 5.52148C73.9232 5.45378 73.9473 5.3737 73.9473 5.28125ZM76.6641 4.37891V4.68555H75.125V4.37891H76.6641ZM75.1836 3.15625V6H74.8066V3.15625H75.1836ZM76.9922 3.15625V6H76.6172V3.15625H76.9922ZM78.0664 3.15625V6H77.6895V3.15625H78.0664ZM79.1289 3.15625V6H78.752V3.15625H79.1289ZM80.3203 4.43555V4.74414H79.0469V4.43555H80.3203ZM80.5137 3.15625V3.46484H79.0469V3.15625H80.5137ZM82.0527 3.15625V6H81.6816V3.15625H82.0527ZM82.9668 3.15625V3.46484H80.7695V3.15625H82.9668ZM84.6797 3.15625V6H84.3027V3.15625H84.6797ZM86.3965 3.15625L85.2148 4.48242L84.5508 5.17188L84.4883 4.76953L84.9883 4.21875L85.9434 3.15625H86.3965ZM86.0332 6L84.9805 4.61328L85.2051 4.31445L86.4824 6H86.0332ZM88.6211 5.69336V6H87.1152V5.69336H88.6211ZM87.1914 3.15625V6H86.8145V3.15625H87.1914ZM88.4219 4.37891V4.68555H87.1152V4.37891H88.4219ZM88.6016 3.15625V3.46484H87.1152V3.15625H88.6016ZM89.2188 3.15625L89.957 4.58398L90.6973 3.15625H91.125L90.1445 4.9375V6H89.7676V4.9375L88.7871 3.15625H89.2188Z" fill="white"/>
+</svg>
diff --git a/packages/docs/static/img/float_group.svg b/packages/docs/static/img/float_group.svg
new file mode 100644
index 000000000..fcb06299a
--- /dev/null
+++ b/packages/docs/static/img/float_group.svg
@@ -0,0 +1,24 @@
+<svg width="156" height="76" viewBox="0 0 156 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="14" width="156" height="62" fill="#000C18"/>
+<rect width="156" height="14" fill="#1C1C2A"/>
+<rect width="30" height="14" fill="#10192C"/>
+<rect x="31" width="30" height="14" fill="#10192C"/>
+<rect x="30" width="1" height="14" fill="#2B2B4A"/>
+<rect x="61" width="1" height="14" fill="#2B2B4A"/>
+<rect x="41" y="54" width="30" height="14" fill="#000C18"/>
+<rect x="33" y="5" width="15" height="4" rx="2" fill="#777777"/>
+<rect x="2" y="5" width="6" height="4" rx="2" fill="#777777"/>
+<rect x="10" y="5" width="18" height="4" rx="2" fill="#777777"/>
+<rect x="11.5" y="29.5" width="83" height="33" fill="#000C18" stroke="#2B2B4A"/>
+<rect x="43" y="30" width="51" height="14" fill="#1C1C2A"/>
+<rect x="26" y="35" width="12" height="4" rx="2" fill="white"/>
+<rect x="16" y="35" width="7" height="4" rx="2" fill="white"/>
+<rect x="42" y="30" width="1" height="14" fill="#2B2B4A"/>
+<path d="M85.9414 34.4746V34.8145H83.9922V34.4746H85.9414ZM85.1484 33.6445V35.7148H84.7871V33.6445H85.1484ZM88.9473 35.2812C88.9473 35.2148 88.9368 35.1562 88.916 35.1055C88.8965 35.0534 88.8613 35.0065 88.8105 34.9648C88.7611 34.9232 88.6921 34.8835 88.6035 34.8457C88.5163 34.8079 88.4056 34.7695 88.2715 34.7305C88.1309 34.6888 88.0039 34.6426 87.8906 34.5918C87.7773 34.5397 87.6803 34.4805 87.5996 34.4141C87.5189 34.3477 87.457 34.2715 87.4141 34.1855C87.3711 34.0996 87.3496 34.0013 87.3496 33.8906C87.3496 33.7799 87.3724 33.6777 87.418 33.584C87.4635 33.4902 87.5286 33.4089 87.6133 33.3398C87.6992 33.2695 87.8014 33.2148 87.9199 33.1758C88.0384 33.1367 88.1706 33.1172 88.3164 33.1172C88.5299 33.1172 88.7109 33.1582 88.8594 33.2402C89.0091 33.321 89.123 33.4271 89.2012 33.5586C89.2793 33.6888 89.3184 33.8281 89.3184 33.9766H88.9434C88.9434 33.8698 88.9206 33.7754 88.875 33.6934C88.8294 33.61 88.7604 33.5449 88.668 33.498C88.5755 33.4499 88.4583 33.4258 88.3164 33.4258C88.1823 33.4258 88.0716 33.446 87.9844 33.4863C87.8971 33.5267 87.832 33.5814 87.7891 33.6504C87.7474 33.7194 87.7266 33.7982 87.7266 33.8867C87.7266 33.9466 87.7389 34.0013 87.7637 34.0508C87.7897 34.099 87.8294 34.1439 87.8828 34.1855C87.9375 34.2272 88.0065 34.2656 88.0898 34.3008C88.1745 34.3359 88.2754 34.3698 88.3926 34.4023C88.554 34.4479 88.6934 34.4987 88.8105 34.5547C88.9277 34.6107 89.0241 34.6738 89.0996 34.7441C89.1764 34.8132 89.2331 34.8919 89.2695 34.9805C89.3073 35.0677 89.3262 35.1667 89.3262 35.2773C89.3262 35.3932 89.3027 35.498 89.2559 35.5918C89.209 35.6855 89.1419 35.7656 89.0547 35.832C88.9674 35.8984 88.8626 35.9499 88.7402 35.9863C88.6191 36.0215 88.4837 36.0391 88.334 36.0391C88.2025 36.0391 88.0729 36.0208 87.9453 35.9844C87.819 35.9479 87.7038 35.8932 87.5996 35.8203C87.4967 35.7474 87.4141 35.6576 87.3516 35.5508C87.2904 35.4427 87.2598 35.3177 87.2598 35.1758H87.6348C87.6348 35.2734 87.6536 35.3574 87.6914 35.4277C87.7292 35.4967 87.7806 35.554 87.8457 35.5996C87.9121 35.6452 87.987 35.679 88.0703 35.7012C88.1549 35.722 88.2428 35.7324 88.334 35.7324C88.4655 35.7324 88.5768 35.7142 88.668 35.6777C88.7591 35.6413 88.8281 35.5892 88.875 35.5215C88.9232 35.4538 88.9473 35.3737 88.9473 35.2812ZM91.6641 34.3789V34.6855H90.125V34.3789H91.6641ZM90.1836 33.1562V36H89.8066V33.1562H90.1836ZM91.9922 33.1562V36H91.6172V33.1562H91.9922ZM93.0664 33.1562V36H92.6895V33.1562H93.0664ZM94.1289 33.1562V36H93.752V33.1562H94.1289ZM95.3203 34.4355V34.7441H94.0469V34.4355H95.3203ZM95.5137 33.1562V33.4648H94.0469V33.1562H95.5137ZM97.0527 33.1562V36H96.6816V33.1562H97.0527ZM97.9668 33.1562V33.4648H95.7695V33.1562H97.9668ZM99.6797 33.1562V36H99.3027V33.1562H99.6797ZM101.396 33.1562L100.215 34.4824L99.5508 35.1719L99.4883 34.7695L99.9883 34.2188L100.943 33.1562H101.396ZM101.033 36L99.9805 34.6133L100.205 34.3145L101.482 36H101.033ZM103.621 35.6934V36H102.115V35.6934H103.621ZM102.191 33.1562V36H101.814V33.1562H102.191ZM103.422 34.3789V34.6855H102.115V34.3789H103.422ZM103.602 33.1562V33.4648H102.115V33.1562H103.602ZM104.219 33.1562L104.957 34.584L105.697 33.1562H106.125L105.145 34.9375V36H104.768V34.9375L103.787 33.1562H104.219Z" fill="white"/>
+<rect x="43" y="30" width="30" height="14" fill="#10192C"/>
+<rect x="45" y="35" width="15" height="4" rx="2" fill="#777777"/>
+<rect x="82.5" y="37.5" width="48" height="13" fill="#000C18" stroke="#2B2B4A"/>
+<path d="M89.3308 42.0909H89.7512L90.7399 44.5057H90.774L91.7626 42.0909H92.1831V45H91.8535V42.7898H91.8251L90.916 45H90.5978L89.6887 42.7898H89.6603V45H89.3308V42.0909ZM94.2189 44.108V42.8182H94.5542V45H94.2189V44.6307H94.1962C94.1451 44.7415 94.0655 44.8357 93.9576 44.9134C93.8496 44.9901 93.7132 45.0284 93.5485 45.0284C93.4121 45.0284 93.2909 44.9986 93.1848 44.9389C93.0788 44.8783 92.9954 44.7874 92.9348 44.6662C92.8742 44.544 92.8439 44.3902 92.8439 44.2045V42.8182H93.1792V44.1818C93.1792 44.3409 93.2237 44.4678 93.3127 44.5625C93.4026 44.6572 93.5172 44.7045 93.6564 44.7045C93.7398 44.7045 93.8245 44.6832 93.9107 44.6406C93.9978 44.598 94.0707 44.5327 94.1294 44.4446C94.1891 44.3565 94.2189 44.2443 94.2189 44.108ZM95.5034 42.0909V45H95.1681V42.0909H95.5034ZM97.0662 42.8182V43.1023H95.9355V42.8182H97.0662ZM96.2651 42.2955H96.6003V44.375C96.6003 44.4697 96.6141 44.5407 96.6415 44.5881C96.6699 44.6345 96.7059 44.6657 96.7495 44.6818C96.794 44.697 96.8408 44.7045 96.8901 44.7045C96.927 44.7045 96.9573 44.7027 96.981 44.6989C97.0047 44.6941 97.0236 44.6903 97.0378 44.6875L97.106 44.9886C97.0833 44.9972 97.0516 45.0057 97.0108 45.0142C96.9701 45.0237 96.9185 45.0284 96.856 45.0284C96.7613 45.0284 96.6685 45.008 96.5776 44.9673C96.4876 44.9266 96.4128 44.8646 96.3532 44.7812C96.2944 44.6979 96.2651 44.5928 96.2651 44.4659V42.2955ZM97.5705 45V42.8182H97.9057V45H97.5705ZM97.7409 42.4545C97.6756 42.4545 97.6193 42.4323 97.5719 42.3878C97.5255 42.3433 97.5023 42.2898 97.5023 42.2273C97.5023 42.1648 97.5255 42.1113 97.5719 42.0668C97.6193 42.0223 97.6756 42 97.7409 42C97.8063 42 97.8622 42.0223 97.9086 42.0668C97.9559 42.1113 97.9796 42.1648 97.9796 42.2273C97.9796 42.2898 97.9559 42.3433 97.9086 42.3878C97.8622 42.4323 97.8063 42.4545 97.7409 42.4545ZM98.5197 45.8182V42.8182H98.8436V43.1648H98.8833C98.908 43.1269 98.9421 43.0786 98.9856 43.0199C99.0301 42.9602 99.0936 42.9072 99.176 42.8608C99.2593 42.8134 99.372 42.7898 99.514 42.7898C99.6977 42.7898 99.8597 42.8357 99.9998 42.9276C100.14 43.0194 100.249 43.1496 100.328 43.3182C100.407 43.4867 100.446 43.6856 100.446 43.9148C100.446 44.1458 100.407 44.3461 100.328 44.5156C100.249 44.6842 100.14 44.8149 100.001 44.9077C99.862 44.9995 99.7015 45.0455 99.5197 45.0455C99.3796 45.0455 99.2673 45.0223 99.1831 44.9759C99.0988 44.9285 99.0339 44.875 98.9885 44.8153C98.943 44.7547 98.908 44.7045 98.8833 44.6648H98.8549V45.8182H98.5197ZM98.8493 43.9091C98.8493 44.0739 98.8734 44.2192 98.9217 44.3452C98.97 44.4702 99.0405 44.5682 99.1333 44.6392C99.2261 44.7093 99.3398 44.7443 99.4743 44.7443C99.6144 44.7443 99.7314 44.7074 99.8251 44.6335C99.9198 44.5587 99.9908 44.4583 100.038 44.3324C100.086 44.2055 100.111 44.0644 100.111 43.9091C100.111 43.7557 100.087 43.6174 100.04 43.4943C99.9932 43.3703 99.9226 43.2723 99.8279 43.2003C99.7342 43.1274 99.6163 43.0909 99.4743 43.0909C99.3379 43.0909 99.2233 43.1255 99.1305 43.1946C99.0377 43.2628 98.9676 43.3584 98.9203 43.4815C98.8729 43.6037 98.8493 43.7462 98.8493 43.9091ZM101.292 42.0909V45H100.957V42.0909H101.292ZM102.821 45.0455C102.611 45.0455 102.43 44.9991 102.277 44.9062C102.126 44.8125 102.009 44.6818 101.926 44.5142C101.845 44.3456 101.804 44.1496 101.804 43.9261C101.804 43.7027 101.845 43.5057 101.926 43.3352C102.009 43.1638 102.123 43.0303 102.27 42.9347C102.418 42.8381 102.59 42.7898 102.787 42.7898C102.901 42.7898 103.013 42.8087 103.124 42.8466C103.235 42.8845 103.335 42.946 103.426 43.0312C103.517 43.1155 103.59 43.2273 103.644 43.3665C103.698 43.5057 103.725 43.6771 103.725 43.8807V44.0227H102.043V43.733H103.384C103.384 43.6098 103.359 43.5 103.31 43.4034C103.262 43.3068 103.192 43.2306 103.102 43.1747C103.013 43.1188 102.908 43.0909 102.787 43.0909C102.654 43.0909 102.538 43.1241 102.441 43.1903C102.344 43.2557 102.27 43.3409 102.218 43.446C102.165 43.5511 102.139 43.6638 102.139 43.7841V43.9773C102.139 44.142 102.168 44.2817 102.225 44.3963C102.282 44.5099 102.362 44.5966 102.465 44.6562C102.567 44.715 102.686 44.7443 102.821 44.7443C102.909 44.7443 102.989 44.732 103.06 44.7074C103.132 44.6818 103.194 44.6439 103.246 44.5938C103.298 44.5426 103.338 44.4792 103.367 44.4034L103.691 44.4943C103.656 44.6042 103.599 44.7008 103.519 44.7841C103.438 44.8665 103.339 44.9309 103.22 44.9773C103.102 45.0227 102.969 45.0455 102.821 45.0455ZM105.36 45.8182V42.8182H105.683V43.1648H105.723C105.748 43.1269 105.782 43.0786 105.825 43.0199C105.87 42.9602 105.933 42.9072 106.016 42.8608C106.099 42.8134 106.212 42.7898 106.354 42.7898C106.538 42.7898 106.7 42.8357 106.84 42.9276C106.98 43.0194 107.089 43.1496 107.168 43.3182C107.246 43.4867 107.286 43.6856 107.286 43.9148C107.286 44.1458 107.246 44.3461 107.168 44.5156C107.089 44.6842 106.98 44.8149 106.841 44.9077C106.702 44.9995 106.541 45.0455 106.36 45.0455C106.219 45.0455 106.107 45.0223 106.023 44.9759C105.939 44.9285 105.874 44.875 105.828 44.8153C105.783 44.7547 105.748 44.7045 105.723 44.6648H105.695V45.8182H105.36ZM105.689 43.9091C105.689 44.0739 105.713 44.2192 105.762 44.3452C105.81 44.4702 105.88 44.5682 105.973 44.6392C106.066 44.7093 106.18 44.7443 106.314 44.7443C106.454 44.7443 106.571 44.7074 106.665 44.6335C106.76 44.5587 106.831 44.4583 106.878 44.3324C106.926 44.2055 106.95 44.0644 106.95 43.9091C106.95 43.7557 106.927 43.6174 106.879 43.4943C106.833 43.3703 106.762 43.2723 106.668 43.2003C106.574 43.1274 106.456 43.0909 106.314 43.0909C106.178 43.0909 106.063 43.1255 105.97 43.1946C105.878 43.2628 105.807 43.3584 105.76 43.4815C105.713 43.6037 105.689 43.7462 105.689 43.9091ZM108.439 45.0511C108.301 45.0511 108.175 45.0251 108.063 44.973C107.95 44.92 107.86 44.8438 107.794 44.7443C107.728 44.6439 107.695 44.5227 107.695 44.3807C107.695 44.2557 107.719 44.1544 107.769 44.0767C107.818 43.9981 107.884 43.9366 107.966 43.892C108.048 43.8475 108.139 43.8144 108.239 43.7926C108.339 43.7699 108.44 43.7519 108.541 43.7386C108.674 43.7216 108.781 43.7088 108.864 43.7003C108.947 43.6908 109.008 43.6752 109.046 43.6534C109.084 43.6316 109.104 43.5937 109.104 43.5398V43.5284C109.104 43.3883 109.066 43.2794 108.989 43.2017C108.913 43.1241 108.798 43.0852 108.644 43.0852C108.484 43.0852 108.358 43.1203 108.267 43.1903C108.176 43.2604 108.112 43.3352 108.075 43.4148L107.757 43.3011C107.814 43.1686 107.89 43.0653 107.985 42.9915C108.08 42.9167 108.184 42.8646 108.297 42.8352C108.411 42.8049 108.522 42.7898 108.632 42.7898C108.702 42.7898 108.783 42.7983 108.874 42.8153C108.966 42.8314 109.054 42.8651 109.139 42.9162C109.226 42.9673 109.297 43.0445 109.354 43.1477C109.411 43.2509 109.439 43.3892 109.439 43.5625V45H109.104V44.7045H109.087C109.064 44.7519 109.026 44.8026 108.973 44.8565C108.92 44.9105 108.85 44.9564 108.762 44.9943C108.673 45.0322 108.566 45.0511 108.439 45.0511ZM108.49 44.75C108.623 44.75 108.735 44.724 108.825 44.6719C108.917 44.6198 108.986 44.5526 109.033 44.4702C109.08 44.3878 109.104 44.3011 109.104 44.2102V43.9034C109.09 43.9205 109.058 43.9361 109.01 43.9503C108.963 43.9635 108.908 43.9754 108.845 43.9858C108.784 43.9953 108.724 44.0038 108.665 44.0114C108.607 44.018 108.56 44.0237 108.524 44.0284C108.437 44.0398 108.356 44.0582 108.28 44.0838C108.205 44.1084 108.145 44.1458 108.098 44.196C108.053 44.2453 108.03 44.3125 108.03 44.3977C108.03 44.5142 108.073 44.6023 108.159 44.6619C108.246 44.7206 108.357 44.75 108.49 44.75ZM110.386 43.6875V45H110.051V42.8182H110.375V43.1591H110.403C110.454 43.0483 110.532 42.9593 110.636 42.892C110.74 42.8239 110.875 42.7898 111.04 42.7898C111.187 42.7898 111.317 42.8201 111.427 42.8807C111.538 42.9403 111.624 43.0312 111.686 43.1534C111.747 43.2746 111.778 43.428 111.778 43.6136V45H111.443V43.6364C111.443 43.465 111.398 43.3314 111.309 43.2358C111.22 43.1392 111.098 43.0909 110.943 43.0909C110.836 43.0909 110.74 43.1141 110.656 43.1605C110.573 43.2069 110.507 43.2746 110.459 43.3636C110.41 43.4527 110.386 43.5606 110.386 43.6875ZM113.306 45.0455C113.095 45.0455 112.914 44.9991 112.762 44.9062C112.61 44.8125 112.493 44.6818 112.411 44.5142C112.329 44.3456 112.289 44.1496 112.289 43.9261C112.289 43.7027 112.329 43.5057 112.411 43.3352C112.493 43.1638 112.608 43.0303 112.754 42.9347C112.902 42.8381 113.075 42.7898 113.271 42.7898C113.385 42.7898 113.497 42.8087 113.608 42.8466C113.719 42.8845 113.82 42.946 113.911 43.0312C114.002 43.1155 114.074 43.2273 114.128 43.3665C114.182 43.5057 114.209 43.6771 114.209 43.8807V44.0227H112.527V43.733H113.868C113.868 43.6098 113.843 43.5 113.794 43.4034C113.746 43.3068 113.677 43.2306 113.587 43.1747C113.498 43.1188 113.393 43.0909 113.271 43.0909C113.138 43.0909 113.022 43.1241 112.925 43.1903C112.828 43.2557 112.754 43.3409 112.702 43.446C112.65 43.5511 112.624 43.6638 112.624 43.7841V43.9773C112.624 44.142 112.652 44.2817 112.709 44.3963C112.767 44.5099 112.847 44.5966 112.949 44.6562C113.051 44.715 113.17 44.7443 113.306 44.7443C113.394 44.7443 113.473 44.732 113.544 44.7074C113.616 44.6818 113.678 44.6439 113.73 44.5938C113.782 44.5426 113.823 44.4792 113.851 44.4034L114.175 44.4943C114.141 44.6042 114.084 44.7008 114.003 44.7841C113.923 44.8665 113.823 44.9309 113.705 44.9773C113.586 45.0227 113.453 45.0455 113.306 45.0455ZM115.054 42.0909V45H114.719V42.0909H115.054ZM117.214 43.3068L116.912 43.392C116.894 43.3419 116.866 43.2931 116.829 43.2457C116.793 43.1974 116.743 43.1577 116.681 43.1264C116.618 43.0952 116.538 43.0795 116.441 43.0795C116.307 43.0795 116.196 43.1103 116.107 43.1719C116.019 43.2325 115.975 43.3097 115.975 43.4034C115.975 43.4867 116.005 43.5526 116.066 43.6009C116.126 43.6491 116.221 43.6894 116.35 43.7216L116.674 43.8011C116.869 43.8485 117.014 43.9209 117.11 44.0185C117.206 44.1151 117.253 44.2396 117.253 44.392C117.253 44.517 117.217 44.6288 117.145 44.7273C117.074 44.8258 116.975 44.9034 116.847 44.9602C116.719 45.017 116.571 45.0455 116.401 45.0455C116.179 45.0455 115.994 44.9972 115.849 44.9006C115.703 44.804 115.61 44.6629 115.572 44.4773L115.89 44.3977C115.92 44.5152 115.977 44.6032 116.062 44.6619C116.147 44.7206 116.258 44.75 116.395 44.75C116.552 44.75 116.676 44.7169 116.768 44.6506C116.86 44.5833 116.907 44.5028 116.907 44.4091C116.907 44.3333 116.88 44.2699 116.827 44.2188C116.774 44.1667 116.693 44.1278 116.583 44.1023L116.219 44.017C116.019 43.9697 115.873 43.8963 115.779 43.7969C115.686 43.6965 115.64 43.571 115.64 43.4205C115.64 43.2973 115.674 43.1884 115.743 43.0938C115.814 42.9991 115.909 42.9247 116.029 42.8707C116.15 42.8168 116.287 42.7898 116.441 42.7898C116.657 42.7898 116.826 42.8371 116.949 42.9318C117.073 43.0265 117.162 43.1515 117.214 43.3068ZM119.002 43.5455C119.002 43.1875 119.049 42.8584 119.142 42.5582C119.235 42.2571 119.369 41.9801 119.542 41.7273H119.838C119.769 41.821 119.705 41.9366 119.646 42.0739C119.587 42.2102 119.535 42.3603 119.491 42.5241C119.446 42.687 119.411 42.8556 119.386 43.0298C119.361 43.2041 119.349 43.3759 119.349 43.5455C119.349 43.7708 119.371 43.9995 119.414 44.2315C119.458 44.4635 119.517 44.679 119.59 44.8778C119.664 45.0767 119.747 45.2386 119.838 45.3636H119.542C119.369 45.1108 119.235 44.8343 119.142 44.5341C119.049 44.233 119.002 43.9034 119.002 43.5455ZM121.309 45.0398C121.122 45.0398 120.955 45.0076 120.808 44.9432C120.662 44.8788 120.546 44.7893 120.46 44.6747C120.375 44.5592 120.328 44.4252 120.321 44.2727H120.679C120.686 44.3665 120.719 44.4474 120.775 44.5156C120.832 44.5829 120.907 44.6349 120.998 44.6719C121.09 44.7088 121.192 44.7273 121.304 44.7273C121.429 44.7273 121.54 44.7055 121.636 44.6619C121.733 44.6184 121.809 44.5578 121.863 44.4801C121.918 44.4025 121.946 44.3125 121.946 44.2102C121.946 44.1032 121.919 44.009 121.866 43.9276C121.813 43.8452 121.736 43.7808 121.633 43.7344C121.531 43.688 121.406 43.6648 121.258 43.6648H121.025V43.3523H121.258C121.374 43.3523 121.475 43.3314 121.562 43.2898C121.65 43.2481 121.719 43.1894 121.768 43.1136C121.818 43.0379 121.844 42.9489 121.844 42.8466C121.844 42.7481 121.822 42.6624 121.778 42.5895C121.735 42.5166 121.673 42.4598 121.594 42.419C121.515 42.3783 121.422 42.358 121.315 42.358C121.215 42.358 121.12 42.3764 121.031 42.4134C120.943 42.4493 120.871 42.5019 120.815 42.571C120.759 42.6392 120.729 42.7216 120.724 42.8182H120.383C120.389 42.6657 120.435 42.5322 120.521 42.4176C120.607 42.3021 120.72 42.2121 120.859 42.1477C120.999 42.0833 121.153 42.0511 121.321 42.0511C121.501 42.0511 121.655 42.0876 121.784 42.1605C121.913 42.2325 122.012 42.3277 122.081 42.446C122.15 42.5644 122.184 42.6922 122.184 42.8295C122.184 42.9934 122.141 43.133 122.055 43.2486C121.97 43.3641 121.854 43.4441 121.707 43.4886V43.5114C121.891 43.5417 122.034 43.6198 122.138 43.7457C122.241 43.8707 122.292 44.0256 122.292 44.2102C122.292 44.3684 122.249 44.5104 122.163 44.6364C122.078 44.7614 121.961 44.8598 121.814 44.9318C121.666 45.0038 121.498 45.0398 121.309 45.0398ZM123.595 43.5455C123.595 43.9034 123.548 44.233 123.454 44.5341C123.362 44.8343 123.229 45.1108 123.055 45.3636H122.76C122.828 45.2699 122.891 45.1544 122.95 45.017C123.01 44.8807 123.062 44.7311 123.106 44.5682C123.151 44.4044 123.185 44.2353 123.21 44.0611C123.236 43.8859 123.248 43.714 123.248 43.5455C123.248 43.3201 123.227 43.0914 123.183 42.8594C123.14 42.6274 123.081 42.4119 123.007 42.2131C122.933 42.0142 122.851 41.8523 122.76 41.7273H123.055C123.229 41.9801 123.362 42.2571 123.454 42.5582C123.548 42.8584 123.595 43.1875 123.595 43.5455Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M85.3445 37.2654C85.5198 37.1426 85.5104 36.8799 85.3266 36.77L81.1804 34.2905C80.9614 34.1595 80.6906 34.3492 80.7388 34.5997L81.6506 39.344C81.691 39.5542 81.9347 39.653 82.1101 39.5302L82.7716 39.067C82.8669 39.0002 82.9142 38.8836 82.8922 38.7693L82.6024 37.2612C82.5542 37.0106 82.825 36.821 83.044 36.952L84.362 37.7401C84.4619 37.7999 84.5876 37.7954 84.683 37.7286L85.3445 37.2654Z" fill="white"/>
+<rect x="84.5" y="38.5" width="4" height="2" stroke="white" stroke-dasharray="0.25 0.25"/>
+</svg>
diff --git a/packages/docs/static/img/float_move.svg b/packages/docs/static/img/float_move.svg
new file mode 100644
index 000000000..b8f5ccfcb
--- /dev/null
+++ b/packages/docs/static/img/float_move.svg
@@ -0,0 +1,29 @@
+<svg width="156" height="76" viewBox="0 0 156 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="14" width="156" height="62" fill="#000C18"/>
+<rect width="156" height="14" fill="#1C1C2A"/>
+<rect width="30" height="14" fill="#10192C"/>
+<rect x="31" width="30" height="14" fill="#10192C"/>
+<rect x="30" width="1" height="14" fill="#2B2B4A"/>
+<rect x="61" width="1" height="14" fill="#2B2B4A"/>
+<rect x="41" y="54" width="30" height="14" fill="#000C18"/>
+<rect x="33" y="5" width="15" height="4" rx="2" fill="#777777"/>
+<rect x="2" y="5" width="6" height="4" rx="2" fill="#777777"/>
+<rect x="10" y="5" width="18" height="4" rx="2" fill="#777777"/>
+<g opacity="0.3">
+<rect x="28.5" y="20.5" width="83" height="37" fill="#000C18" stroke="#2B2B4A"/>
+<rect x="60" y="21" width="51" height="14" fill="#1C1C2A"/>
+<rect x="43" y="26" width="12" height="4" rx="2" fill="white"/>
+<rect x="33" y="26" width="7" height="4" rx="2" fill="white"/>
+<rect x="59" y="21" width="1" height="14" fill="#2B2B4A"/>
+</g>
+<rect x="11.5" y="29.5" width="83" height="38" fill="#000C18" stroke="#2B2B4A"/>
+<rect x="43" y="30" width="51" height="14" fill="#1C1C2A"/>
+<rect x="26" y="35" width="12" height="4" rx="2" fill="white"/>
+<rect x="16" y="35" width="7" height="4" rx="2" fill="white"/>
+<rect x="42" y="30" width="1" height="14" fill="#2B2B4A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M70.3445 58.2654C70.5198 58.1426 70.5104 57.8799 70.3266 57.77L66.1804 55.2905C65.9614 55.1595 65.6906 55.3492 65.7388 55.5997L66.6506 60.344C66.691 60.5542 66.9347 60.653 67.1101 60.5302L67.7716 60.067C67.8669 60.0002 67.9142 59.8836 67.8922 59.7693L67.6024 58.2612C67.5542 58.0106 67.825 57.821 68.044 57.952L69.362 58.7401C69.4619 58.7999 69.5876 58.7954 69.683 58.7286L70.3445 58.2654Z" fill="white"/>
+<rect x="69.5" y="59.5" width="4" height="2" stroke="white" stroke-dasharray="0.25 0.25"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M77.3445 37.2654C77.5198 37.1426 77.5104 36.8799 77.3266 36.77L73.1804 34.2905C72.9614 34.1595 72.6906 34.3492 72.7388 34.5997L73.6506 39.344C73.691 39.5542 73.9347 39.653 74.1101 39.5302L74.7716 39.067C74.8669 39.0002 74.9142 38.8836 74.8922 38.7693L74.6024 37.2612C74.5542 37.0106 74.825 36.821 75.044 36.952L76.362 37.7401C76.4619 37.7999 76.5876 37.7954 76.683 37.7286L77.3445 37.2654Z" fill="white"/>
+<rect x="76.5" y="38.5" width="4" height="2" stroke="white" stroke-dasharray="0.25 0.25"/>
+<path d="M70.9414 54.4746V54.8145H68.9922V54.4746H70.9414ZM70.1484 53.6445V55.7148H69.7871V53.6445H70.1484ZM73.9473 55.2812C73.9473 55.2148 73.9368 55.1562 73.916 55.1055C73.8965 55.0534 73.8613 55.0065 73.8105 54.9648C73.7611 54.9232 73.6921 54.8835 73.6035 54.8457C73.5163 54.8079 73.4056 54.7695 73.2715 54.7305C73.1309 54.6888 73.0039 54.6426 72.8906 54.5918C72.7773 54.5397 72.6803 54.4805 72.5996 54.4141C72.5189 54.3477 72.457 54.2715 72.4141 54.1855C72.3711 54.0996 72.3496 54.0013 72.3496 53.8906C72.3496 53.7799 72.3724 53.6777 72.418 53.584C72.4635 53.4902 72.5286 53.4089 72.6133 53.3398C72.6992 53.2695 72.8014 53.2148 72.9199 53.1758C73.0384 53.1367 73.1706 53.1172 73.3164 53.1172C73.5299 53.1172 73.7109 53.1582 73.8594 53.2402C74.0091 53.321 74.123 53.4271 74.2012 53.5586C74.2793 53.6888 74.3184 53.8281 74.3184 53.9766H73.9434C73.9434 53.8698 73.9206 53.7754 73.875 53.6934C73.8294 53.61 73.7604 53.5449 73.668 53.498C73.5755 53.4499 73.4583 53.4258 73.3164 53.4258C73.1823 53.4258 73.0716 53.446 72.9844 53.4863C72.8971 53.5267 72.832 53.5814 72.7891 53.6504C72.7474 53.7194 72.7266 53.7982 72.7266 53.8867C72.7266 53.9466 72.7389 54.0013 72.7637 54.0508C72.7897 54.099 72.8294 54.1439 72.8828 54.1855C72.9375 54.2272 73.0065 54.2656 73.0898 54.3008C73.1745 54.3359 73.2754 54.3698 73.3926 54.4023C73.554 54.4479 73.6934 54.4987 73.8105 54.5547C73.9277 54.6107 74.0241 54.6738 74.0996 54.7441C74.1764 54.8132 74.2331 54.8919 74.2695 54.9805C74.3073 55.0677 74.3262 55.1667 74.3262 55.2773C74.3262 55.3932 74.3027 55.498 74.2559 55.5918C74.209 55.6855 74.1419 55.7656 74.0547 55.832C73.9674 55.8984 73.8626 55.9499 73.7402 55.9863C73.6191 56.0215 73.4837 56.0391 73.334 56.0391C73.2025 56.0391 73.0729 56.0208 72.9453 55.9844C72.819 55.9479 72.7038 55.8932 72.5996 55.8203C72.4967 55.7474 72.4141 55.6576 72.3516 55.5508C72.2904 55.4427 72.2598 55.3177 72.2598 55.1758H72.6348C72.6348 55.2734 72.6536 55.3574 72.6914 55.4277C72.7292 55.4967 72.7806 55.554 72.8457 55.5996C72.9121 55.6452 72.987 55.679 73.0703 55.7012C73.1549 55.722 73.2428 55.7324 73.334 55.7324C73.4655 55.7324 73.5768 55.7142 73.668 55.6777C73.7591 55.6413 73.8281 55.5892 73.875 55.5215C73.9232 55.4538 73.9473 55.3737 73.9473 55.2812ZM76.6641 54.3789V54.6855H75.125V54.3789H76.6641ZM75.1836 53.1562V56H74.8066V53.1562H75.1836ZM76.9922 53.1562V56H76.6172V53.1562H76.9922ZM78.0664 53.1562V56H77.6895V53.1562H78.0664ZM79.1289 53.1562V56H78.752V53.1562H79.1289ZM80.3203 54.4355V54.7441H79.0469V54.4355H80.3203ZM80.5137 53.1562V53.4648H79.0469V53.1562H80.5137ZM82.0527 53.1562V56H81.6816V53.1562H82.0527ZM82.9668 53.1562V53.4648H80.7695V53.1562H82.9668ZM84.6797 53.1562V56H84.3027V53.1562H84.6797ZM86.3965 53.1562L85.2148 54.4824L84.5508 55.1719L84.4883 54.7695L84.9883 54.2188L85.9434 53.1562H86.3965ZM86.0332 56L84.9805 54.6133L85.2051 54.3145L86.4824 56H86.0332ZM88.6211 55.6934V56H87.1152V55.6934H88.6211ZM87.1914 53.1562V56H86.8145V53.1562H87.1914ZM88.4219 54.3789V54.6855H87.1152V54.3789H88.4219ZM88.6016 53.1562V53.4648H87.1152V53.1562H88.6016ZM89.2188 53.1562L89.957 54.584L90.6973 53.1562H91.125L90.1445 54.9375V56H89.7676V54.9375L88.7871 53.1562H89.2188Z" fill="white"/>
+</svg>