From 080db84537f00c70e084193379ffc5dd2a409fd5 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Wed, 18 Jan 2023 21:28:01 +0800
Subject: [PATCH 1/7] refactor: expose a vanillajs export

---
 packages/dockview/rollup.config.js            | 85 ++++++++++++++-----
 .../scripts/rollupEntryTarget-core.ts         |  2 +
 ...ryTarget.ts => rollupEntryTarget-react.ts} |  0
 packages/dockview/src/core.ts                 | 54 ++++++++++++
 packages/dockview/src/index.ts                | 56 +-----------
 5 files changed, 119 insertions(+), 78 deletions(-)
 create mode 100644 packages/dockview/scripts/rollupEntryTarget-core.ts
 rename packages/dockview/scripts/{rollupEntryTarget.ts => rollupEntryTarget-react.ts} (100%)
 create mode 100644 packages/dockview/src/core.ts

diff --git a/packages/dockview/rollup.config.js b/packages/dockview/rollup.config.js
index f9ee1e91b..06d4fe9ac 100644
--- a/packages/dockview/rollup.config.js
+++ b/packages/dockview/rollup.config.js
@@ -6,11 +6,13 @@ import { terser } from 'rollup-plugin-terser';
 import postcss from 'rollup-plugin-postcss';
 
 const { name, version, homepage, license } = require('./package.json');
-const main = join(__dirname, './scripts/rollupEntryTarget.ts');
-const mainNoStyles = join(__dirname, './src/index.ts');
+const reactMain = join(__dirname, './scripts/rollupEntryTarget-react.ts');
+const reactMainNoStyles = join(__dirname, './src/index.ts');
+const main = join(__dirname, './scripts/rollupEntryTarget-core.ts');
+const mainNoStyles = join(__dirname, './src/core.ts');
 const outputDir = join(__dirname, 'dist');
 
-function outputFile(format, isMinified, withStyles) {
+function outputFile(format, isMinified, withStyles, isReact) {
     let filename = join(outputDir, name);
 
     if (format !== 'umd') {
@@ -23,13 +25,27 @@ function outputFile(format, isMinified, withStyles) {
         filename += '.noStyle';
     }
 
+    if (!isReact) {
+        filename += '.corejs';
+    }
+
     return `${filename}.js`;
 }
 
+function getInput(options) {
+    const { withStyles, isReact } = options;
+
+    if (withStyles) {
+        return isReact ? reactMain : main;
+    }
+
+    return isReact ? reactMainNoStyles : mainNoStyles;
+}
+
 function createBundle(format, options) {
-    const { withStyles, isMinified } = options;
-    const input = withStyles ? main : mainNoStyles;
-    const file = outputFile(format, isMinified, withStyles);
+    const { withStyles, isMinified, isReact } = options;
+    const input = getInput(options);
+    const file = outputFile(format, isMinified, withStyles, isReact);
 
     const external = [];
 
@@ -66,37 +82,60 @@ function createBundle(format, options) {
 
     if (format === 'umd') {
         output['name'] = name;
-
-        // TODO: should be conditional on whether user wants the React wrappers
-        output.globals['react'] = 'React';
-        output.globals['react-dom'] = 'ReactDOM';
     }
 
-    // TODO: should be conditional on whether user wants the React wrappers
-    external.push('react', 'react-dom');
+    if (isReact) {
+        // TODO: should be conditional on whether user wants the React wrappers
+        external.push('react', 'react-dom');
+
+        if (format === 'umd') {
+            // TODO: should be conditional on whether user wants the React wrappers
+            output.globals['react'] = 'React';
+            output.globals['react-dom'] = 'ReactDOM';
+        }
+    }
 
     return {
         input,
         output,
         plugins,
         external,
+        // manualChunks(id) {
+        //     if (id.includes('src/react/')) {
+        //         return 'react';
+        //     }
+        // },
     };
 }
 
 export default [
     // amd
-    createBundle('amd', { withStyles: false, isMinified: false }),
-    createBundle('amd', { withStyles: true, isMinified: false }),
-    createBundle('amd', { withStyles: false, isMinified: true }),
-    createBundle('amd', { withStyles: true, isMinified: true }),
+    createBundle('amd', {
+        withStyles: false,
+        isMinified: false,
+        isReact: true,
+    }),
+    createBundle('amd', { withStyles: true, isMinified: false, isReact: true }),
+    createBundle('amd', { withStyles: false, isMinified: true, isReact: true }),
+    createBundle('amd', { withStyles: true, isMinified: true, isReact: true }),
     // umd
-    createBundle('umd', { withStyles: false, isMinified: false }),
-    createBundle('umd', { withStyles: true, isMinified: false }),
-    createBundle('umd', { withStyles: false, isMinified: true }),
-    createBundle('umd', { withStyles: true, isMinified: true }),
+    createBundle('umd', {
+        withStyles: false,
+        isMinified: false,
+        isReact: true,
+    }),
+    createBundle('umd', { withStyles: true, isMinified: false, isReact: true }),
+    createBundle('umd', { withStyles: false, isMinified: true, isReact: true }),
+    createBundle('umd', { withStyles: true, isMinified: true, isReact: true }),
     // cjs
-    createBundle('cjs', { withStyles: true, isMinified: false }),
+    createBundle('cjs', { withStyles: true, isMinified: false, isReact: true }),
     // esm
-    createBundle('esm', { withStyles: true, isMinified: false }),
-    createBundle('esm', { withStyles: true, isMinified: true }),
+    createBundle('esm', { withStyles: true, isMinified: false, isReact: true }),
+    createBundle('esm', { withStyles: true, isMinified: true, isReact: true }),
+    // react extensions
+    createBundle('umd', {
+        withStyles: true,
+        isMinified: false,
+        isReact: false,
+    }),
 ];
diff --git a/packages/dockview/scripts/rollupEntryTarget-core.ts b/packages/dockview/scripts/rollupEntryTarget-core.ts
new file mode 100644
index 000000000..fc6590960
--- /dev/null
+++ b/packages/dockview/scripts/rollupEntryTarget-core.ts
@@ -0,0 +1,2 @@
+import '../dist/styles/dockview.css';
+export * from '../src/core';
diff --git a/packages/dockview/scripts/rollupEntryTarget.ts b/packages/dockview/scripts/rollupEntryTarget-react.ts
similarity index 100%
rename from packages/dockview/scripts/rollupEntryTarget.ts
rename to packages/dockview/scripts/rollupEntryTarget-react.ts
diff --git a/packages/dockview/src/core.ts b/packages/dockview/src/core.ts
new file mode 100644
index 000000000..fab7afbba
--- /dev/null
+++ b/packages/dockview/src/core.ts
@@ -0,0 +1,54 @@
+export * from './dnd/dataTransfer';
+
+export * from './splitview/core/splitview';
+export * from './paneview/paneview';
+export * from './gridview/gridview';
+export * from './groupview/groupview';
+export * from './gridview/baseComponentGridview';
+
+export * from './groupview/panel/content';
+export * from './groupview/tab';
+export * from './groupview/dnd';
+export * from './groupview/types';
+export * from './dockview/options';
+
+export * from './dockview/dockviewComponent';
+export * from './gridview/gridviewComponent';
+export * from './splitview/splitviewComponent';
+export * from './paneview/paneviewComponent';
+export { PaneviewComponentOptions } from './paneview/options';
+
+export * from './gridview/gridviewPanel';
+export * from './splitview/splitviewPanel';
+export * from './paneview/paneviewPanel';
+export * from './groupview/groupPanel';
+
+export { Event } from './events';
+export { IDisposable } from './lifecycle';
+export { Position, Droptarget } from './dnd/droptarget';
+export {
+    FocusEvent,
+    PanelDimensionChangeEvent,
+    VisibilityEvent,
+    ActiveEvent,
+    PanelApi,
+} from './api/panelApi';
+export {
+    SizeEvent,
+    GridviewPanelApi,
+    GridConstraintChangeEvent,
+} from './api/gridviewPanelApi';
+export { TitleEvent, DockviewPanelApi } from './api/groupPanelApi';
+export {
+    PanelSizeEvent,
+    PanelConstraintChangeEvent,
+    SplitviewPanelApi,
+} from './api/splitviewPanelApi';
+export { ExpansionEvent, PaneviewPanelApi } from './api/paneviewPanelApi';
+export {
+    CommonApi,
+    SplitviewApi,
+    PaneviewApi,
+    GridviewApi,
+    DockviewApi,
+} from './api/component.api';
diff --git a/packages/dockview/src/index.ts b/packages/dockview/src/index.ts
index 8177eb720..1b788ad1a 100644
--- a/packages/dockview/src/index.ts
+++ b/packages/dockview/src/index.ts
@@ -1,56 +1,2 @@
-export * from './dnd/dataTransfer';
-
-export * from './splitview/core/splitview';
-export * from './paneview/paneview';
-export * from './gridview/gridview';
-export * from './groupview/groupview';
-export * from './gridview/baseComponentGridview';
-
-export * from './groupview/panel/content';
-export * from './groupview/tab';
-export * from './groupview/dnd';
-export * from './groupview/types';
-export * from './dockview/options';
-
-export * from './dockview/dockviewComponent';
-export * from './gridview/gridviewComponent';
-export * from './splitview/splitviewComponent';
-export * from './paneview/paneviewComponent';
-export { PaneviewComponentOptions } from './paneview/options';
-
-export * from './gridview/gridviewPanel';
-export * from './splitview/splitviewPanel';
-export * from './paneview/paneviewPanel';
-export * from './groupview/groupPanel';
-
+export * from './core';
 export * from './react'; // TODO: should be conditional on whether user wants the React wrappers
-
-export { Event } from './events';
-export { IDisposable } from './lifecycle';
-export { Position } from './dnd/droptarget';
-export {
-    FocusEvent,
-    PanelDimensionChangeEvent,
-    VisibilityEvent,
-    ActiveEvent,
-    PanelApi,
-} from './api/panelApi';
-export {
-    SizeEvent,
-    GridviewPanelApi,
-    GridConstraintChangeEvent,
-} from './api/gridviewPanelApi';
-export { TitleEvent, DockviewPanelApi } from './api/groupPanelApi';
-export {
-    PanelSizeEvent,
-    PanelConstraintChangeEvent,
-    SplitviewPanelApi,
-} from './api/splitviewPanelApi';
-export { ExpansionEvent, PaneviewPanelApi } from './api/paneviewPanelApi';
-export {
-    CommonApi,
-    SplitviewApi,
-    PaneviewApi,
-    GridviewApi,
-    DockviewApi,
-} from './api/component.api';

From bd381640afc5111424b7e441d5c06e852f9bdf6c Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Tue, 7 Feb 2023 17:36:41 +0700
Subject: [PATCH 2/7] refactor: isolate react code

---
 packages/dockview/src/dockview/options.ts                | 9 +++++++--
 packages/dockview/src/groupview/groupview.ts             | 2 +-
 packages/dockview/src/react/dockview/dockview.tsx        | 2 +-
 .../dockview/src/react/dockview/groupControlsRenderer.ts | 5 -----
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/dockview/src/dockview/options.ts b/packages/dockview/src/dockview/options.ts
index 08c88c88a..6119aea3e 100644
--- a/packages/dockview/src/dockview/options.ts
+++ b/packages/dockview/src/dockview/options.ts
@@ -8,12 +8,17 @@ import {
     WatermarkConstructor,
     IWatermarkRenderer,
 } from '../groupview/types';
-import { GroupPanel } from '../groupview/groupviewPanel';
+import { GroupPanel, GroupviewPanelApi } from '../groupview/groupviewPanel';
 import { ISplitviewStyles, Orientation } from '../splitview/core/splitview';
 import { FrameworkFactory } from '../types';
 import { DockviewDropTargets } from '../groupview/dnd';
 import { PanelTransfer } from '../dnd/dataTransfer';
-import { IGroupControlRenderer } from '../react/dockview/groupControlsRenderer';
+import { IDisposable } from '../lifecycle';
+
+export interface IGroupControlRenderer extends IDisposable {
+    readonly element: HTMLElement;
+    init(params: { containerApi: DockviewApi; api: GroupviewPanelApi }): void;
+}
 
 export interface GroupPanelFrameworkComponentFactory {
     content: FrameworkFactory<IContentRenderer>;
diff --git a/packages/dockview/src/groupview/groupview.ts b/packages/dockview/src/groupview/groupview.ts
index d900b64ae..2178dfffa 100644
--- a/packages/dockview/src/groupview/groupview.ts
+++ b/packages/dockview/src/groupview/groupview.ts
@@ -14,7 +14,7 @@ import { ITabsContainer, TabsContainer } from './titlebar/tabsContainer';
 import { IWatermarkRenderer } from './types';
 import { GroupPanel } from './groupviewPanel';
 import { DockviewDropTargets } from './dnd';
-import { IGroupControlRenderer } from '../react/dockview/groupControlsRenderer';
+import { IGroupControlRenderer } from '../core';
 
 export interface DndService {
     canDisplayOverlay(
diff --git a/packages/dockview/src/react/dockview/dockview.tsx b/packages/dockview/src/react/dockview/dockview.tsx
index 41790b0c8..2d57e6861 100644
--- a/packages/dockview/src/react/dockview/dockview.tsx
+++ b/packages/dockview/src/react/dockview/dockview.tsx
@@ -9,6 +9,7 @@ import { ReactPanelDeserialzier } from '../deserializer';
 import {
     DockviewDndOverlayEvent,
     GroupPanelFrameworkComponentFactory,
+    IGroupControlRenderer,
 } from '../../dockview/options';
 import { DockviewPanelApi } from '../../api/groupPanelApi';
 import { ReactPortalStore, usePortalsLifecycle } from '../react';
@@ -19,7 +20,6 @@ import { watchElementResize } from '../../dom';
 import { IContentRenderer, ITabRenderer } from '../../groupview/types';
 import {
     IDockviewGroupControlProps,
-    IGroupControlRenderer,
     ReactGroupControlsRendererPart,
 } from './groupControlsRenderer';
 import { GroupPanel } from '../../groupview/groupviewPanel';
diff --git a/packages/dockview/src/react/dockview/groupControlsRenderer.ts b/packages/dockview/src/react/dockview/groupControlsRenderer.ts
index 1bbbbdc8f..3a9b6c483 100644
--- a/packages/dockview/src/react/dockview/groupControlsRenderer.ts
+++ b/packages/dockview/src/react/dockview/groupControlsRenderer.ts
@@ -18,11 +18,6 @@ export interface IDockviewGroupControlProps {
     isGroupActive: boolean;
 }
 
-export interface IGroupControlRenderer extends IDisposable {
-    readonly element: HTMLElement;
-    init(params: { containerApi: DockviewApi; api: GroupviewPanelApi }): void;
-}
-
 export class ReactGroupControlsRendererPart {
     private mutableDisposable = new MutableDisposable();
     private _element: HTMLElement;

From ff3f0b23a8c88858a42cf549ce36fe7058040005 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Tue, 7 Feb 2023 18:03:07 +0700
Subject: [PATCH 3/7] feat: generate UMD bundle without react dependency

---
 packages/dockview/rollup.config.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/dockview/rollup.config.js b/packages/dockview/rollup.config.js
index 06d4fe9ac..6a19b0cf0 100644
--- a/packages/dockview/rollup.config.js
+++ b/packages/dockview/rollup.config.js
@@ -15,6 +15,10 @@ const outputDir = join(__dirname, 'dist');
 function outputFile(format, isMinified, withStyles, isReact) {
     let filename = join(outputDir, name);
 
+    if (isReact) {
+        filename += '.react';
+    }
+
     if (format !== 'umd') {
         filename += `.${format}`;
     }
@@ -25,10 +29,6 @@ function outputFile(format, isMinified, withStyles, isReact) {
         filename += '.noStyle';
     }
 
-    if (!isReact) {
-        filename += '.corejs';
-    }
-
     return `${filename}.js`;
 }
 
@@ -132,7 +132,7 @@ export default [
     // esm
     createBundle('esm', { withStyles: true, isMinified: false, isReact: true }),
     createBundle('esm', { withStyles: true, isMinified: true, isReact: true }),
-    // react extensions
+    // core bundles (no-react)
     createBundle('umd', {
         withStyles: true,
         isMinified: false,

From 5f72f5a36d1cf488c3786bfbede08a89734ee6a9 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Mon, 27 Feb 2023 16:58:50 +0800
Subject: [PATCH 4/7] chore: split packages

---
 packages/dockview-core/README.md              |  52 +++++++
 packages/dockview-core/gulpfile.js            |   6 +
 packages/dockview-core/jest.config.js         |  27 ++++
 packages/dockview-core/package.json           |  73 +++++++++
 packages/dockview-core/rollup.config.js       | 141 ++++++++++++++++++
 .../scripts/publishExperimental.js            |  63 ++++++++
 .../scripts/rollupEntryTarget-core.ts         |   2 +
 .../scripts/rollupEntryTarget-react.ts        |   2 +
 .../src/__tests__/__mocks__/resizeObserver.js |  13 ++
 .../src/__tests__/__test_utils__/utils.ts     |  14 ++
 .../src/__tests__/api/api.spec.ts             |   0
 .../src/__tests__/api/component.api.spec.ts   |   0
 .../__tests__/api/dockviewPanelApi.spec.ts    |   0
 .../src/__tests__/array.spec.ts               |   0
 .../__tests__/dnd/abstractDragHandler.spec.ts |   0
 .../src/__tests__/dnd/dataTransfer.spec.ts    |   0
 .../src/__tests__/dnd/droptarget.spec.ts      |   0
 .../dockview/defaultGroupPanelView.spec.ts    |   0
 .../dockview/dockviewComponent.spec.ts        |   0
 .../__tests__/dockview/dockviewPanel.spec.ts  |   0
 .../src/__tests__/events.spec.ts              |   0
 .../gridview/baseComponentGridview.spec.ts    |   0
 .../src/__tests__/gridview/gridview.spec.ts   |   0
 .../gridview/gridviewComponent.spec.ts        |   0
 .../__tests__/gridview/gridviewPanel.spec.ts  |   0
 .../src/__tests__/groupview/groupview.spec.ts |   0
 .../__tests__/groupview/panel/content.spec.ts |   0
 .../src/__tests__/groupview/tab.spec.ts       |   0
 .../groupview/titlebar/tabsContainer.spec.ts  |   0
 .../src/__tests__/lifecycle.spec.ts           |   0
 .../src/__tests__/math.spec.ts                |   0
 .../__tests__/panel/componentFactory.spec.ts  |   0
 .../src/__tests__/paneview/paneview.spec.ts   |   0
 .../paneview/paneviewComponent.spec.ts        |   0
 .../splitview/core/splitview.spec.ts          |   0
 .../splitview/splitviewComponent.spec.ts      |   0
 .../src/actionbar/actionsContainer.scss       |   0
 .../src/actionbar/actionsContainer.ts         |   0
 .../src/api/component.api.ts                  |   2 +-
 .../src/api/dockviewPanelApi.ts               |   0
 .../src/api/gridviewPanelApi.ts               |   0
 .../src/api/panelApi.ts                       |   0
 .../src/api/paneviewPanelApi.ts               |   0
 .../src/api/splitviewPanelApi.ts              |   0
 .../{dockview => dockview-core}/src/array.ts  |   0
 .../{dockview => dockview-core}/src/core.ts   |  22 ++-
 .../src/dnd/abstractDragHandler.ts            |   0
 .../src/dnd/dataTransfer.ts                   |   0
 .../src/dnd/dnd.ts                            |   0
 .../src/dnd/droptarget.scss                   |   0
 .../src/dnd/droptarget.ts                     |   0
 .../src/dnd/ghost.ts                          |   0
 .../src/dnd/groupDragHandler.ts               |   0
 .../dockview/components/tab/defaultTab.scss   |   0
 .../src/dockview/components/tab/defaultTab.ts |   0
 .../components/watermark/watermark.scss       |   0
 .../components/watermark/watermark.ts         |   0
 .../src/dockview/defaultGroupPanelView.ts     |   0
 .../src/dockview/deserializer.ts              |   0
 .../src/dockview/dockviewComponent.scss       |   0
 .../src/dockview/dockviewComponent.ts         |   0
 .../src/dockview/dockviewPanel.ts             |   0
 .../src/dockview/options.ts                   |   0
 .../dockview-core/src/dockview/validation.ts  | 117 +++++++++++++++
 .../{dockview => dockview-core}/src/dom.ts    |   0
 .../{dockview => dockview-core}/src/events.ts |   0
 .../src/gridview/baseComponentGridview.ts     |   0
 .../src/gridview/basePanelView.ts             |   0
 .../src/gridview/branchNode.ts                |   0
 .../src/gridview/gridview.scss                |   0
 .../src/gridview/gridview.ts                  |   0
 .../src/gridview/gridviewComponent.ts         |   0
 .../src/gridview/gridviewPanel.ts             |   4 +-
 .../src/gridview/leafNode.ts                  |   0
 .../src/gridview/options.ts                   |   0
 .../src/gridview/types.ts                     |   0
 .../src/groupview/dnd.ts                      |   0
 .../src/groupview/groupview.scss              |   0
 .../src/groupview/groupview.ts                |   0
 .../src/groupview/groupviewPanel.ts           |   2 +-
 .../src/groupview/panel/content.ts            |   0
 .../src/groupview/tab.ts                      |   0
 .../src/groupview/titlebar/tabsContainer.scss |   0
 .../src/groupview/titlebar/tabsContainer.ts   |   0
 .../src/groupview/titlebar/voidContainer.ts   |   0
 .../src/groupview/types.ts                    |   0
 .../src/hostedContainer.ts                    |   0
 packages/dockview-core/src/index.ts           |   2 +
 .../src/lifecycle.ts                          |   0
 .../{dockview => dockview-core}/src/math.ts   |   0
 .../src/panel/componentFactory.ts             |   0
 .../src/panel/types.ts                        |   0
 .../src/paneview/defaultPaneviewHeader.ts     |   0
 .../src/paneview/draggablePaneviewPanel.ts    |   8 +-
 .../src/paneview/options.ts                   |   0
 .../src/paneview/paneview.scss                |   0
 .../src/paneview/paneview.ts                  |   0
 .../src/paneview/paneviewComponent.ts         |   8 +-
 .../src/paneview/paneviewPanel.ts             |   0
 .../src/splitview/core/options.ts             |   0
 .../src/splitview/core/splitview.scss         |   0
 .../src/splitview/core/splitview.ts           |   0
 .../src/splitview/core/viewItem.ts            |   0
 .../src/splitview/splitviewComponent.ts       |   0
 .../src/splitview/splitviewPanel.ts           |   0
 .../{dockview => dockview-core}/src/svg.scss  |   0
 .../{dockview => dockview-core}/src/svg.ts    |   0
 .../src/theme.scss                            |   0
 packages/dockview-core/src/types.ts           |  13 ++
 packages/dockview-core/test.html              |  87 +++++++++++
 packages/dockview-core/tsconfig.esm.json      |  11 ++
 packages/dockview-core/tsconfig.json          |  11 ++
 packages/dockview-core/typedoc.json           |   7 +
 packages/dockview/package.json                |   3 +
 .../dockview/src/{react => }/deserializer.ts  |  23 +--
 .../src/{react => }/dockview/defaultTab.scss  |   0
 .../src/{react => }/dockview/defaultTab.tsx   |   0
 .../src/{react => }/dockview/dockview.scss    |   0
 .../src/{react => }/dockview/dockview.tsx     |  24 +--
 .../dockview/groupControlsRenderer.ts         |  14 +-
 .../{react => }/dockview/reactContentPart.ts  |  15 +-
 .../{react => }/dockview/reactHeaderPart.ts   |  15 +-
 .../dockview/reactWatermarkPart.ts            |  12 +-
 .../dockview/v2/reactContentRenderer.ts       |   8 +-
 .../dockview/v2/reactGroupPanelView.ts        |   8 +-
 .../dockview/v2/webviewContentRenderer.ts     |   8 +-
 .../src/{react => }/gridview/gridview.tsx     |  10 +-
 .../dockview/src/{react => }/gridview/view.ts |   9 +-
 packages/dockview/src/index.scss              |   1 +
 packages/dockview/src/index.ts                |  13 +-
 .../src/{react => }/paneview/paneview.tsx     |  14 +-
 .../src/{react => }/paneview/view.tsx         |   4 +-
 packages/dockview/src/{react => }/react.ts    |   8 +-
 packages/dockview/src/react/index.ts          |   9 --
 packages/dockview/src/react/types.ts          |   9 --
 .../src/{react => }/splitview/splitview.tsx   |  10 +-
 .../src/{react => }/splitview/view.ts         |   8 +-
 packages/dockview/src/{react => }/svg.tsx     |   0
 packages/dockview/src/types.ts                |  16 +-
 139 files changed, 795 insertions(+), 133 deletions(-)
 create mode 100644 packages/dockview-core/README.md
 create mode 100644 packages/dockview-core/gulpfile.js
 create mode 100644 packages/dockview-core/jest.config.js
 create mode 100644 packages/dockview-core/package.json
 create mode 100644 packages/dockview-core/rollup.config.js
 create mode 100644 packages/dockview-core/scripts/publishExperimental.js
 create mode 100644 packages/dockview-core/scripts/rollupEntryTarget-core.ts
 create mode 100644 packages/dockview-core/scripts/rollupEntryTarget-react.ts
 create mode 100644 packages/dockview-core/src/__tests__/__mocks__/resizeObserver.js
 create mode 100644 packages/dockview-core/src/__tests__/__test_utils__/utils.ts
 rename packages/{dockview => dockview-core}/src/__tests__/api/api.spec.ts (100%)
 rename packages/{dockview => dockview-core}/src/__tests__/api/component.api.spec.ts (100%)
 rename packages/{dockview => dockview-core}/src/__tests__/api/dockviewPanelApi.spec.ts (100%)
 rename packages/{dockview => dockview-core}/src/__tests__/array.spec.ts (100%)
 rename packages/{dockview => dockview-core}/src/__tests__/dnd/abstractDragHandler.spec.ts (100%)
 rename packages/{dockview => dockview-core}/src/__tests__/dnd/dataTransfer.spec.ts (100%)
 rename packages/{dockview => dockview-core}/src/__tests__/dnd/droptarget.spec.ts (100%)
 rename packages/{dockview => dockview-core}/src/__tests__/dockview/defaultGroupPanelView.spec.ts (100%)
 rename packages/{dockview => dockview-core}/src/__tests__/dockview/dockviewComponent.spec.ts (100%)
 rename packages/{dockview => dockview-core}/src/__tests__/dockview/dockviewPanel.spec.ts (100%)
 rename packages/{dockview => dockview-core}/src/__tests__/events.spec.ts (100%)
 rename packages/{dockview => dockview-core}/src/__tests__/gridview/baseComponentGridview.spec.ts (100%)
 rename packages/{dockview => dockview-core}/src/__tests__/gridview/gridview.spec.ts (100%)
 rename packages/{dockview => dockview-core}/src/__tests__/gridview/gridviewComponent.spec.ts (100%)
 rename packages/{dockview => dockview-core}/src/__tests__/gridview/gridviewPanel.spec.ts (100%)
 rename packages/{dockview => dockview-core}/src/__tests__/groupview/groupview.spec.ts (100%)
 rename packages/{dockview => dockview-core}/src/__tests__/groupview/panel/content.spec.ts (100%)
 rename packages/{dockview => dockview-core}/src/__tests__/groupview/tab.spec.ts (100%)
 rename packages/{dockview => dockview-core}/src/__tests__/groupview/titlebar/tabsContainer.spec.ts (100%)
 rename packages/{dockview => dockview-core}/src/__tests__/lifecycle.spec.ts (100%)
 rename packages/{dockview => dockview-core}/src/__tests__/math.spec.ts (100%)
 rename packages/{dockview => dockview-core}/src/__tests__/panel/componentFactory.spec.ts (100%)
 rename packages/{dockview => dockview-core}/src/__tests__/paneview/paneview.spec.ts (100%)
 rename packages/{dockview => dockview-core}/src/__tests__/paneview/paneviewComponent.spec.ts (100%)
 rename packages/{dockview => dockview-core}/src/__tests__/splitview/core/splitview.spec.ts (100%)
 rename packages/{dockview => dockview-core}/src/__tests__/splitview/splitviewComponent.spec.ts (100%)
 rename packages/{dockview => dockview-core}/src/actionbar/actionsContainer.scss (100%)
 rename packages/{dockview => dockview-core}/src/actionbar/actionsContainer.ts (100%)
 rename packages/{dockview => dockview-core}/src/api/component.api.ts (99%)
 rename packages/{dockview => dockview-core}/src/api/dockviewPanelApi.ts (100%)
 rename packages/{dockview => dockview-core}/src/api/gridviewPanelApi.ts (100%)
 rename packages/{dockview => dockview-core}/src/api/panelApi.ts (100%)
 rename packages/{dockview => dockview-core}/src/api/paneviewPanelApi.ts (100%)
 rename packages/{dockview => dockview-core}/src/api/splitviewPanelApi.ts (100%)
 rename packages/{dockview => dockview-core}/src/array.ts (100%)
 rename packages/{dockview => dockview-core}/src/core.ts (75%)
 rename packages/{dockview => dockview-core}/src/dnd/abstractDragHandler.ts (100%)
 rename packages/{dockview => dockview-core}/src/dnd/dataTransfer.ts (100%)
 rename packages/{dockview => dockview-core}/src/dnd/dnd.ts (100%)
 rename packages/{dockview => dockview-core}/src/dnd/droptarget.scss (100%)
 rename packages/{dockview => dockview-core}/src/dnd/droptarget.ts (100%)
 rename packages/{dockview => dockview-core}/src/dnd/ghost.ts (100%)
 rename packages/{dockview => dockview-core}/src/dnd/groupDragHandler.ts (100%)
 rename packages/{dockview => dockview-core}/src/dockview/components/tab/defaultTab.scss (100%)
 rename packages/{dockview => dockview-core}/src/dockview/components/tab/defaultTab.ts (100%)
 rename packages/{dockview => dockview-core}/src/dockview/components/watermark/watermark.scss (100%)
 rename packages/{dockview => dockview-core}/src/dockview/components/watermark/watermark.ts (100%)
 rename packages/{dockview => dockview-core}/src/dockview/defaultGroupPanelView.ts (100%)
 rename packages/{dockview => dockview-core}/src/dockview/deserializer.ts (100%)
 rename packages/{dockview => dockview-core}/src/dockview/dockviewComponent.scss (100%)
 rename packages/{dockview => dockview-core}/src/dockview/dockviewComponent.ts (100%)
 rename packages/{dockview => dockview-core}/src/dockview/dockviewPanel.ts (100%)
 rename packages/{dockview => dockview-core}/src/dockview/options.ts (100%)
 create mode 100644 packages/dockview-core/src/dockview/validation.ts
 rename packages/{dockview => dockview-core}/src/dom.ts (100%)
 rename packages/{dockview => dockview-core}/src/events.ts (100%)
 rename packages/{dockview => dockview-core}/src/gridview/baseComponentGridview.ts (100%)
 rename packages/{dockview => dockview-core}/src/gridview/basePanelView.ts (100%)
 rename packages/{dockview => dockview-core}/src/gridview/branchNode.ts (100%)
 rename packages/{dockview => dockview-core}/src/gridview/gridview.scss (100%)
 rename packages/{dockview => dockview-core}/src/gridview/gridview.ts (100%)
 rename packages/{dockview => dockview-core}/src/gridview/gridviewComponent.ts (100%)
 rename packages/{dockview => dockview-core}/src/gridview/gridviewPanel.ts (98%)
 rename packages/{dockview => dockview-core}/src/gridview/leafNode.ts (100%)
 rename packages/{dockview => dockview-core}/src/gridview/options.ts (100%)
 rename packages/{dockview => dockview-core}/src/gridview/types.ts (100%)
 rename packages/{dockview => dockview-core}/src/groupview/dnd.ts (100%)
 rename packages/{dockview => dockview-core}/src/groupview/groupview.scss (100%)
 rename packages/{dockview => dockview-core}/src/groupview/groupview.ts (100%)
 rename packages/{dockview => dockview-core}/src/groupview/groupviewPanel.ts (97%)
 rename packages/{dockview => dockview-core}/src/groupview/panel/content.ts (100%)
 rename packages/{dockview => dockview-core}/src/groupview/tab.ts (100%)
 rename packages/{dockview => dockview-core}/src/groupview/titlebar/tabsContainer.scss (100%)
 rename packages/{dockview => dockview-core}/src/groupview/titlebar/tabsContainer.ts (100%)
 rename packages/{dockview => dockview-core}/src/groupview/titlebar/voidContainer.ts (100%)
 rename packages/{dockview => dockview-core}/src/groupview/types.ts (100%)
 rename packages/{dockview => dockview-core}/src/hostedContainer.ts (100%)
 create mode 100644 packages/dockview-core/src/index.ts
 rename packages/{dockview => dockview-core}/src/lifecycle.ts (100%)
 rename packages/{dockview => dockview-core}/src/math.ts (100%)
 rename packages/{dockview => dockview-core}/src/panel/componentFactory.ts (100%)
 rename packages/{dockview => dockview-core}/src/panel/types.ts (100%)
 rename packages/{dockview => dockview-core}/src/paneview/defaultPaneviewHeader.ts (100%)
 rename packages/{dockview => dockview-core}/src/paneview/draggablePaneviewPanel.ts (93%)
 rename packages/{dockview => dockview-core}/src/paneview/options.ts (100%)
 rename packages/{dockview => dockview-core}/src/paneview/paneview.scss (100%)
 rename packages/{dockview => dockview-core}/src/paneview/paneview.ts (100%)
 rename packages/{dockview => dockview-core}/src/paneview/paneviewComponent.ts (98%)
 rename packages/{dockview => dockview-core}/src/paneview/paneviewPanel.ts (100%)
 rename packages/{dockview => dockview-core}/src/splitview/core/options.ts (100%)
 rename packages/{dockview => dockview-core}/src/splitview/core/splitview.scss (100%)
 rename packages/{dockview => dockview-core}/src/splitview/core/splitview.ts (100%)
 rename packages/{dockview => dockview-core}/src/splitview/core/viewItem.ts (100%)
 rename packages/{dockview => dockview-core}/src/splitview/splitviewComponent.ts (100%)
 rename packages/{dockview => dockview-core}/src/splitview/splitviewPanel.ts (100%)
 rename packages/{dockview => dockview-core}/src/svg.scss (100%)
 rename packages/{dockview => dockview-core}/src/svg.ts (100%)
 rename packages/{dockview => dockview-core}/src/theme.scss (100%)
 create mode 100644 packages/dockview-core/src/types.ts
 create mode 100644 packages/dockview-core/test.html
 create mode 100644 packages/dockview-core/tsconfig.esm.json
 create mode 100644 packages/dockview-core/tsconfig.json
 create mode 100644 packages/dockview-core/typedoc.json
 rename packages/dockview/src/{react => }/deserializer.ts (75%)
 rename packages/dockview/src/{react => }/dockview/defaultTab.scss (100%)
 rename packages/dockview/src/{react => }/dockview/defaultTab.tsx (100%)
 rename packages/dockview/src/{react => }/dockview/dockview.scss (100%)
 rename packages/dockview/src/{react => }/dockview/dockview.tsx (95%)
 rename packages/dockview/src/{react => }/dockview/groupControlsRenderer.ts (89%)
 rename packages/dockview/src/{react => }/dockview/reactContentPart.ts (91%)
 rename packages/dockview/src/{react => }/dockview/reactHeaderPart.ts (88%)
 rename packages/dockview/src/{react => }/dockview/reactWatermarkPart.ts (93%)
 rename packages/dockview/src/{react => }/dockview/v2/reactContentRenderer.ts (92%)
 rename packages/dockview/src/{react => }/dockview/v2/reactGroupPanelView.ts (79%)
 rename packages/dockview/src/{react => }/dockview/v2/webviewContentRenderer.ts (85%)
 rename packages/dockview/src/{react => }/gridview/gridview.tsx (93%)
 rename packages/dockview/src/{react => }/gridview/view.ts (76%)
 create mode 100644 packages/dockview/src/index.scss
 rename packages/dockview/src/{react => }/paneview/paneview.tsx (92%)
 rename packages/dockview/src/{react => }/paneview/view.tsx (93%)
 rename packages/dockview/src/{react => }/react.ts (97%)
 delete mode 100644 packages/dockview/src/react/index.ts
 delete mode 100644 packages/dockview/src/react/types.ts
 rename packages/dockview/src/{react => }/splitview/splitview.tsx (92%)
 rename packages/dockview/src/{react => }/splitview/view.ts (81%)
 rename packages/dockview/src/{react => }/svg.tsx (100%)

diff --git a/packages/dockview-core/README.md b/packages/dockview-core/README.md
new file mode 100644
index 000000000..214dc0e75
--- /dev/null
+++ b/packages/dockview-core/README.md
@@ -0,0 +1,52 @@
+<div align="center">
+<h1>dockview</h1>
+
+<p>Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support written in TypeScript</p>
+
+</div>
+
+---
+
+[![npm version](https://badge.fury.io/js/dockview.svg)](https://www.npmjs.com/package/dockview)
+[![CI Build](https://github.com/mathuo/dockview/workflows/CI/badge.svg)](https://github.com/mathuo/dockview/actions?query=workflow%3ACI)
+[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=coverage)](https://sonarcloud.io/summary/overall?id=mathuo_dockview)
+[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=alert_status)](https://sonarcloud.io/summary/overall?id=mathuo_dockview)
+[![Bundle Phobia](https://badgen.net/bundlephobia/minzip/dockview)](https://bundlephobia.com/result?p=dockview)
+
+##
+
+Please see the website: https://dockview.dev
+
+Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@latest/
+
+## Features
+
+-   Simple splitviews, nested splitviews (i.e. gridviews) supporting full layout managment with
+    dockable and tabular views
+-   Extensive API support at the component level and view level
+-   Themable and customizable
+-   Serialization / deserialization support
+-   Tabular docking and Drag and Drop support
+-   Documentation and examples
+
+This project was inspired by many popular IDE editors. Some parts of the core resizable panelling are inspired by code found in the VSCode codebase, [splitview](https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/splitview) and [gridview](https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/grid).
+
+## Quick start
+
+Dockview has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. You can install dockview from [npm](https://www.npmjs.com/package/dockview). Please see the [Getting Started Guide](https://mathuo.github.io/dockview/docs/).
+
+```
+npm install --save dockview
+```
+
+Within your project you must import or reference the stylesheet at `dockview/dist/styles/dockview.css` and attach a theme.
+
+```css
+@import '~dockview/dist/styles/dockview.css';
+```
+
+You should also attach a dockview theme to an element containing your components. For example:
+
+```html
+<body classname="dockview-theme-dark"></body>
+```
diff --git a/packages/dockview-core/gulpfile.js b/packages/dockview-core/gulpfile.js
new file mode 100644
index 000000000..4b62c983d
--- /dev/null
+++ b/packages/dockview-core/gulpfile.js
@@ -0,0 +1,6 @@
+const gulp = require('gulp');
+const buildfile = require('../../scripts/build');
+
+buildfile.init();
+
+gulp.task('run', gulp.series(['sass']));
diff --git a/packages/dockview-core/jest.config.js b/packages/dockview-core/jest.config.js
new file mode 100644
index 000000000..e72f97d2c
--- /dev/null
+++ b/packages/dockview-core/jest.config.js
@@ -0,0 +1,27 @@
+const { name } = require('./package');
+
+const baseConfig = require('../../jest.config.base');
+
+console.log('loaded');
+
+module.exports = {
+    ...baseConfig,
+    roots: ['<rootDir>/packages/dockview'],
+    modulePaths: ['<rootDir>/packages/dockview/src'],
+    displayName: { name, color: 'blue' },
+    rootDir: '../../',
+    collectCoverageFrom: [
+        '<rootDir>/packages/dockview/src/**/*.{js,jsx,ts,tsx}',
+    ],
+    setupFiles: [
+        '<rootDir>/packages/dockview/src/__tests__/__mocks__/resizeObserver.js',
+    ],
+    coveragePathIgnorePatterns: ['/node_modules/'],
+    modulePathIgnorePatterns: [
+        '<rootDir>/packages/dockview/src/__tests__/__mocks__',
+        '<rootDir>/packages/dockview/src/__tests__/__test_utils__',
+    ],
+    coverageDirectory: '<rootDir>/packages/dockview/coverage/',
+    testResultsProcessor: 'jest-sonar-reporter',
+    testEnvironment: 'jsdom',
+};
diff --git a/packages/dockview-core/package.json b/packages/dockview-core/package.json
new file mode 100644
index 000000000..0a04d23cc
--- /dev/null
+++ b/packages/dockview-core/package.json
@@ -0,0 +1,73 @@
+{
+  "name": "dockview-core",
+  "version": "1.6.0",
+  "description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/cjs/index.d.ts",
+  "module": "./dist/esm/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mathuo/dockview.git"
+  },
+  "bugs": {
+    "url": "https://github.com/mathuo/dockview/issues"
+  },
+  "homepage": "https://github.com/mathuo/dockview",
+  "scripts": {
+    "build:ci": "npm run build:cjs && npm run build:esm && npm run build:css",
+    "build:cjs": "cross-env ../../node_modules/.bin/tsc --project ./tsconfig.json --extendedDiagnostics",
+    "build:css": "gulp sass",
+    "build:esm": "cross-env ../../node_modules/.bin/tsc --project ./tsconfig.esm.json --extendedDiagnostics",
+    "build:modulefiles": "rollup -c",
+    "build": "npm run build:ci && npm run build:modulefiles",
+    "clean": "rimraf dist/ .build/",
+    "docs": "typedoc",
+    "prepack": "npm run rebuild && npm run test",
+    "rebuild": "npm run clean && npm run build",
+    "test": "cross-env ../../node_modules/.bin/jest --selectProjects dockview",
+    "test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview --coverage",
+    "dev-publish": "node ./scripts/publishExperimental.js"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "keywords": [
+    "splitview",
+    "split-view",
+    "gridview",
+    "grid-view",
+    "dockview",
+    "dock-view",
+    "grid",
+    "tabs",
+    "layout",
+    "layout manager",
+    "dock layout",
+    "dock",
+    "docking",
+    "splitter",
+    "drag-and-drop",
+    "drag",
+    "drop",
+    "react",
+    "react-component"
+  ],
+  "author": "https://github.com/mathuo",
+  "license": "MIT",
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@testing-library/react": "^13.4.0",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "cross-env": "^7.0.3",
+    "postcss": "^8.4.21",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^4.1.2",
+    "rollup": "^3.15.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "typedoc": "^0.23.25"
+  }
+}
diff --git a/packages/dockview-core/rollup.config.js b/packages/dockview-core/rollup.config.js
new file mode 100644
index 000000000..9abce3a84
--- /dev/null
+++ b/packages/dockview-core/rollup.config.js
@@ -0,0 +1,141 @@
+/* eslint-disable */
+
+const { join } = require('path');
+const typescript = require('@rollup/plugin-typescript');
+const { terser } = require('rollup-plugin-terser');
+const postcss = require('rollup-plugin-postcss');
+
+const { name, version, homepage, license } = require('./package.json');
+const reactMain = join(__dirname, './scripts/rollupEntryTarget-react.ts');
+const reactMainNoStyles = join(__dirname, './src/index.ts');
+const main = join(__dirname, './scripts/rollupEntryTarget-core.ts');
+const mainNoStyles = join(__dirname, './src/core.ts');
+const outputDir = join(__dirname, 'dist');
+
+function outputFile(format, isMinified, withStyles, isReact) {
+    let filename = join(outputDir, name);
+
+    if (isReact) {
+        filename += '.react';
+    }
+
+    if (format !== 'umd') {
+        filename += `.${format}`;
+    }
+    if (isMinified) {
+        filename += '.min';
+    }
+    if (!withStyles) {
+        filename += '.noStyle';
+    }
+
+    return `${filename}.js`;
+}
+
+function getInput(options) {
+    const { withStyles, isReact } = options;
+
+    if (withStyles) {
+        return isReact ? reactMain : main;
+    }
+
+    return isReact ? reactMainNoStyles : mainNoStyles;
+}
+
+function createBundle(format, options) {
+    const { withStyles, isMinified, isReact } = options;
+    const input = getInput(options);
+    const file = outputFile(format, isMinified, withStyles, isReact);
+
+    const external = [];
+
+    const output = {
+        file,
+        format,
+        globals: {},
+        banner: [
+            `/**`,
+            ` * ${name}`,
+            ` * @version ${version}`,
+            ` * @link ${homepage}`,
+            ` * @license ${license}`,
+            ` */`,
+        ].join('\n'),
+    };
+
+    const plugins = [
+        typescript({
+            tsconfig: 'tsconfig.esm.json',
+            incremental: false,
+            tsBuildInfoFile: undefined,
+            outDir: undefined,
+            declaration: false,
+        }),
+    ];
+
+    if (isMinified) {
+        plugins.push(terser());
+    }
+    if (withStyles) {
+        plugins.push(postcss());
+    }
+
+    if (format === 'umd') {
+        output['name'] = name;
+    }
+
+    if (isReact) {
+        // TODO: should be conditional on whether user wants the React wrappers
+        external.push('react', 'react-dom');
+
+        if (format === 'umd') {
+            // TODO: should be conditional on whether user wants the React wrappers
+            output.globals['react'] = 'React';
+            output.globals['react-dom'] = 'ReactDOM';
+        }
+    }
+
+    return {
+        input,
+        output,
+        plugins,
+        external,
+        // manualChunks(id) {
+        //     if (id.includes('src/react/')) {
+        //         return 'react';
+        //     }
+        // },
+    };
+}
+
+module.exports = [
+    // amd
+    createBundle('amd', {
+        withStyles: false,
+        isMinified: false,
+        isReact: true,
+    }),
+    createBundle('amd', { withStyles: true, isMinified: false, isReact: true }),
+    createBundle('amd', { withStyles: false, isMinified: true, isReact: true }),
+    createBundle('amd', { withStyles: true, isMinified: true, isReact: true }),
+    // umd
+    createBundle('umd', {
+        withStyles: false,
+        isMinified: false,
+        isReact: true,
+    }),
+    createBundle('umd', { withStyles: true, isMinified: false, isReact: true }),
+    createBundle('umd', { withStyles: false, isMinified: true, isReact: true }),
+    createBundle('umd', { withStyles: true, isMinified: true, isReact: true }),
+    // cjs
+    createBundle('cjs', { withStyles: true, isMinified: false, isReact: true }),
+    // esm
+    createBundle('esm', { withStyles: true, isMinified: false, isReact: true }),
+    createBundle('esm', { withStyles: true, isMinified: true, isReact: true }),
+    // core bundles (no-react)
+    createBundle('umd', {
+        withStyles: true,
+        isMinified: false,
+        isReact: false,
+    }),
+];
diff --git a/packages/dockview-core/scripts/publishExperimental.js b/packages/dockview-core/scripts/publishExperimental.js
new file mode 100644
index 000000000..efd1b8e2d
--- /dev/null
+++ b/packages/dockview-core/scripts/publishExperimental.js
@@ -0,0 +1,63 @@
+const cp = require('child_process');
+const fs = require('fs-extra');
+const path = require('path');
+
+const rootDir = path.join(__dirname, '..');
+const publishDir = path.join(rootDir, '__publish__');
+
+cp.execSync('npm run clean', { cwd: rootDir, stdio: 'inherit' });
+cp.execSync('npm run test', { cwd: __dirname, stdio: 'inherit' });
+cp.execSync('npm run build', { cwd: rootDir, stdio: 'inherit' });
+
+if (fs.existsSync(publishDir)) {
+    fs.removeSync(publishDir);
+}
+fs.mkdirSync(publishDir);
+
+if (!fs.existsSync(path.join(publishDir, 'dist'))) {
+    fs.mkdirSync(path.join(publishDir, 'dist'));
+}
+
+const package = JSON.parse(
+    fs.readFileSync(path.join(rootDir, 'package.json')).toString()
+);
+
+for (const file of package.files) {
+    fs.copySync(path.join(rootDir, file), path.join(publishDir, file));
+}
+
+const result = cp
+    .execSync('git rev-parse --short HEAD', {
+        cwd: rootDir,
+    })
+    .toString()
+    .replace(/\n/g, '');
+
+function formatDate() {
+    const date = new Date();
+
+    function pad(value) {
+        if (value.toString().length === 1) {
+            return `0${value}`;
+        }
+        return value;
+    }
+
+    return `${date.getFullYear()}${pad(date.getMonth() + 1)}${pad(
+        date.getDate()
+    )}`;
+}
+
+package.version = `0.0.0-experimental-${result}-${formatDate()}`;
+package.scripts = {};
+
+fs.writeFileSync(
+    path.join(publishDir, 'package.json'),
+    JSON.stringify(package, null, 4)
+);
+
+const command = 'npm publish --tag experimental';
+
+cp.execSync(command, { cwd: publishDir, stdio: 'inherit' });
+
+fs.removeSync(publishDir);
diff --git a/packages/dockview-core/scripts/rollupEntryTarget-core.ts b/packages/dockview-core/scripts/rollupEntryTarget-core.ts
new file mode 100644
index 000000000..fc6590960
--- /dev/null
+++ b/packages/dockview-core/scripts/rollupEntryTarget-core.ts
@@ -0,0 +1,2 @@
+import '../dist/styles/dockview.css';
+export * from '../src/core';
diff --git a/packages/dockview-core/scripts/rollupEntryTarget-react.ts b/packages/dockview-core/scripts/rollupEntryTarget-react.ts
new file mode 100644
index 000000000..6ce476579
--- /dev/null
+++ b/packages/dockview-core/scripts/rollupEntryTarget-react.ts
@@ -0,0 +1,2 @@
+import '../dist/styles/dockview.css';
+export * from '../src/index';
diff --git a/packages/dockview-core/src/__tests__/__mocks__/resizeObserver.js b/packages/dockview-core/src/__tests__/__mocks__/resizeObserver.js
new file mode 100644
index 000000000..bcd486343
--- /dev/null
+++ b/packages/dockview-core/src/__tests__/__mocks__/resizeObserver.js
@@ -0,0 +1,13 @@
+class ResizeObserver {
+    observe() {
+        // do nothing
+    }
+    unobserve() {
+        // do nothing
+    }
+    disconnect() {
+      // do nothing
+    }
+}
+
+window.ResizeObserver = ResizeObserver;
\ No newline at end of file
diff --git a/packages/dockview-core/src/__tests__/__test_utils__/utils.ts b/packages/dockview-core/src/__tests__/__test_utils__/utils.ts
new file mode 100644
index 000000000..ab8dc0a9e
--- /dev/null
+++ b/packages/dockview-core/src/__tests__/__test_utils__/utils.ts
@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+export function setMockRefElement(node: Partial<HTMLElement>): void {
+    const mockRef = {
+        get current() {
+            return node;
+        },
+        set current(_value) {
+            //noop
+        },
+    };
+
+    jest.spyOn(React, 'useRef').mockReturnValueOnce(mockRef);
+}
diff --git a/packages/dockview/src/__tests__/api/api.spec.ts b/packages/dockview-core/src/__tests__/api/api.spec.ts
similarity index 100%
rename from packages/dockview/src/__tests__/api/api.spec.ts
rename to packages/dockview-core/src/__tests__/api/api.spec.ts
diff --git a/packages/dockview/src/__tests__/api/component.api.spec.ts b/packages/dockview-core/src/__tests__/api/component.api.spec.ts
similarity index 100%
rename from packages/dockview/src/__tests__/api/component.api.spec.ts
rename to packages/dockview-core/src/__tests__/api/component.api.spec.ts
diff --git a/packages/dockview/src/__tests__/api/dockviewPanelApi.spec.ts b/packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts
similarity index 100%
rename from packages/dockview/src/__tests__/api/dockviewPanelApi.spec.ts
rename to packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts
diff --git a/packages/dockview/src/__tests__/array.spec.ts b/packages/dockview-core/src/__tests__/array.spec.ts
similarity index 100%
rename from packages/dockview/src/__tests__/array.spec.ts
rename to packages/dockview-core/src/__tests__/array.spec.ts
diff --git a/packages/dockview/src/__tests__/dnd/abstractDragHandler.spec.ts b/packages/dockview-core/src/__tests__/dnd/abstractDragHandler.spec.ts
similarity index 100%
rename from packages/dockview/src/__tests__/dnd/abstractDragHandler.spec.ts
rename to packages/dockview-core/src/__tests__/dnd/abstractDragHandler.spec.ts
diff --git a/packages/dockview/src/__tests__/dnd/dataTransfer.spec.ts b/packages/dockview-core/src/__tests__/dnd/dataTransfer.spec.ts
similarity index 100%
rename from packages/dockview/src/__tests__/dnd/dataTransfer.spec.ts
rename to packages/dockview-core/src/__tests__/dnd/dataTransfer.spec.ts
diff --git a/packages/dockview/src/__tests__/dnd/droptarget.spec.ts b/packages/dockview-core/src/__tests__/dnd/droptarget.spec.ts
similarity index 100%
rename from packages/dockview/src/__tests__/dnd/droptarget.spec.ts
rename to packages/dockview-core/src/__tests__/dnd/droptarget.spec.ts
diff --git a/packages/dockview/src/__tests__/dockview/defaultGroupPanelView.spec.ts b/packages/dockview-core/src/__tests__/dockview/defaultGroupPanelView.spec.ts
similarity index 100%
rename from packages/dockview/src/__tests__/dockview/defaultGroupPanelView.spec.ts
rename to packages/dockview-core/src/__tests__/dockview/defaultGroupPanelView.spec.ts
diff --git a/packages/dockview/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
similarity index 100%
rename from packages/dockview/src/__tests__/dockview/dockviewComponent.spec.ts
rename to packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
diff --git a/packages/dockview/src/__tests__/dockview/dockviewPanel.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts
similarity index 100%
rename from packages/dockview/src/__tests__/dockview/dockviewPanel.spec.ts
rename to packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts
diff --git a/packages/dockview/src/__tests__/events.spec.ts b/packages/dockview-core/src/__tests__/events.spec.ts
similarity index 100%
rename from packages/dockview/src/__tests__/events.spec.ts
rename to packages/dockview-core/src/__tests__/events.spec.ts
diff --git a/packages/dockview/src/__tests__/gridview/baseComponentGridview.spec.ts b/packages/dockview-core/src/__tests__/gridview/baseComponentGridview.spec.ts
similarity index 100%
rename from packages/dockview/src/__tests__/gridview/baseComponentGridview.spec.ts
rename to packages/dockview-core/src/__tests__/gridview/baseComponentGridview.spec.ts
diff --git a/packages/dockview/src/__tests__/gridview/gridview.spec.ts b/packages/dockview-core/src/__tests__/gridview/gridview.spec.ts
similarity index 100%
rename from packages/dockview/src/__tests__/gridview/gridview.spec.ts
rename to packages/dockview-core/src/__tests__/gridview/gridview.spec.ts
diff --git a/packages/dockview/src/__tests__/gridview/gridviewComponent.spec.ts b/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts
similarity index 100%
rename from packages/dockview/src/__tests__/gridview/gridviewComponent.spec.ts
rename to packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts
diff --git a/packages/dockview/src/__tests__/gridview/gridviewPanel.spec.ts b/packages/dockview-core/src/__tests__/gridview/gridviewPanel.spec.ts
similarity index 100%
rename from packages/dockview/src/__tests__/gridview/gridviewPanel.spec.ts
rename to packages/dockview-core/src/__tests__/gridview/gridviewPanel.spec.ts
diff --git a/packages/dockview/src/__tests__/groupview/groupview.spec.ts b/packages/dockview-core/src/__tests__/groupview/groupview.spec.ts
similarity index 100%
rename from packages/dockview/src/__tests__/groupview/groupview.spec.ts
rename to packages/dockview-core/src/__tests__/groupview/groupview.spec.ts
diff --git a/packages/dockview/src/__tests__/groupview/panel/content.spec.ts b/packages/dockview-core/src/__tests__/groupview/panel/content.spec.ts
similarity index 100%
rename from packages/dockview/src/__tests__/groupview/panel/content.spec.ts
rename to packages/dockview-core/src/__tests__/groupview/panel/content.spec.ts
diff --git a/packages/dockview/src/__tests__/groupview/tab.spec.ts b/packages/dockview-core/src/__tests__/groupview/tab.spec.ts
similarity index 100%
rename from packages/dockview/src/__tests__/groupview/tab.spec.ts
rename to packages/dockview-core/src/__tests__/groupview/tab.spec.ts
diff --git a/packages/dockview/src/__tests__/groupview/titlebar/tabsContainer.spec.ts b/packages/dockview-core/src/__tests__/groupview/titlebar/tabsContainer.spec.ts
similarity index 100%
rename from packages/dockview/src/__tests__/groupview/titlebar/tabsContainer.spec.ts
rename to packages/dockview-core/src/__tests__/groupview/titlebar/tabsContainer.spec.ts
diff --git a/packages/dockview/src/__tests__/lifecycle.spec.ts b/packages/dockview-core/src/__tests__/lifecycle.spec.ts
similarity index 100%
rename from packages/dockview/src/__tests__/lifecycle.spec.ts
rename to packages/dockview-core/src/__tests__/lifecycle.spec.ts
diff --git a/packages/dockview/src/__tests__/math.spec.ts b/packages/dockview-core/src/__tests__/math.spec.ts
similarity index 100%
rename from packages/dockview/src/__tests__/math.spec.ts
rename to packages/dockview-core/src/__tests__/math.spec.ts
diff --git a/packages/dockview/src/__tests__/panel/componentFactory.spec.ts b/packages/dockview-core/src/__tests__/panel/componentFactory.spec.ts
similarity index 100%
rename from packages/dockview/src/__tests__/panel/componentFactory.spec.ts
rename to packages/dockview-core/src/__tests__/panel/componentFactory.spec.ts
diff --git a/packages/dockview/src/__tests__/paneview/paneview.spec.ts b/packages/dockview-core/src/__tests__/paneview/paneview.spec.ts
similarity index 100%
rename from packages/dockview/src/__tests__/paneview/paneview.spec.ts
rename to packages/dockview-core/src/__tests__/paneview/paneview.spec.ts
diff --git a/packages/dockview/src/__tests__/paneview/paneviewComponent.spec.ts b/packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts
similarity index 100%
rename from packages/dockview/src/__tests__/paneview/paneviewComponent.spec.ts
rename to packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts
diff --git a/packages/dockview/src/__tests__/splitview/core/splitview.spec.ts b/packages/dockview-core/src/__tests__/splitview/core/splitview.spec.ts
similarity index 100%
rename from packages/dockview/src/__tests__/splitview/core/splitview.spec.ts
rename to packages/dockview-core/src/__tests__/splitview/core/splitview.spec.ts
diff --git a/packages/dockview/src/__tests__/splitview/splitviewComponent.spec.ts b/packages/dockview-core/src/__tests__/splitview/splitviewComponent.spec.ts
similarity index 100%
rename from packages/dockview/src/__tests__/splitview/splitviewComponent.spec.ts
rename to packages/dockview-core/src/__tests__/splitview/splitviewComponent.spec.ts
diff --git a/packages/dockview/src/actionbar/actionsContainer.scss b/packages/dockview-core/src/actionbar/actionsContainer.scss
similarity index 100%
rename from packages/dockview/src/actionbar/actionsContainer.scss
rename to packages/dockview-core/src/actionbar/actionsContainer.scss
diff --git a/packages/dockview/src/actionbar/actionsContainer.ts b/packages/dockview-core/src/actionbar/actionsContainer.ts
similarity index 100%
rename from packages/dockview/src/actionbar/actionsContainer.ts
rename to packages/dockview-core/src/actionbar/actionsContainer.ts
diff --git a/packages/dockview/src/api/component.api.ts b/packages/dockview-core/src/api/component.api.ts
similarity index 99%
rename from packages/dockview/src/api/component.api.ts
rename to packages/dockview-core/src/api/component.api.ts
index 2036781d3..c61d81c46 100644
--- a/packages/dockview/src/api/component.api.ts
+++ b/packages/dockview-core/src/api/component.api.ts
@@ -32,8 +32,8 @@ import { IView, Orientation, Sizing } from '../splitview/core/splitview';
 import { ISplitviewPanel } from '../splitview/splitviewPanel';
 import { GroupPanel, IGroupviewPanel } from '../groupview/groupviewPanel';
 import { Emitter, Event } from '../events';
-import { PaneviewDropEvent } from '../react';
 import { IDockviewPanel } from '../dockview/dockviewPanel';
+import { PaneviewDropEvent } from '../paneview/draggablePaneviewPanel';
 
 export interface CommonApi<T = any> {
     readonly height: number;
diff --git a/packages/dockview/src/api/dockviewPanelApi.ts b/packages/dockview-core/src/api/dockviewPanelApi.ts
similarity index 100%
rename from packages/dockview/src/api/dockviewPanelApi.ts
rename to packages/dockview-core/src/api/dockviewPanelApi.ts
diff --git a/packages/dockview/src/api/gridviewPanelApi.ts b/packages/dockview-core/src/api/gridviewPanelApi.ts
similarity index 100%
rename from packages/dockview/src/api/gridviewPanelApi.ts
rename to packages/dockview-core/src/api/gridviewPanelApi.ts
diff --git a/packages/dockview/src/api/panelApi.ts b/packages/dockview-core/src/api/panelApi.ts
similarity index 100%
rename from packages/dockview/src/api/panelApi.ts
rename to packages/dockview-core/src/api/panelApi.ts
diff --git a/packages/dockview/src/api/paneviewPanelApi.ts b/packages/dockview-core/src/api/paneviewPanelApi.ts
similarity index 100%
rename from packages/dockview/src/api/paneviewPanelApi.ts
rename to packages/dockview-core/src/api/paneviewPanelApi.ts
diff --git a/packages/dockview/src/api/splitviewPanelApi.ts b/packages/dockview-core/src/api/splitviewPanelApi.ts
similarity index 100%
rename from packages/dockview/src/api/splitviewPanelApi.ts
rename to packages/dockview-core/src/api/splitviewPanelApi.ts
diff --git a/packages/dockview/src/array.ts b/packages/dockview-core/src/array.ts
similarity index 100%
rename from packages/dockview/src/array.ts
rename to packages/dockview-core/src/array.ts
diff --git a/packages/dockview/src/core.ts b/packages/dockview-core/src/core.ts
similarity index 75%
rename from packages/dockview/src/core.ts
rename to packages/dockview-core/src/core.ts
index 7cb102718..494755bd0 100644
--- a/packages/dockview/src/core.ts
+++ b/packages/dockview-core/src/core.ts
@@ -1,16 +1,36 @@
+export * from './hostedContainer';
+
 export * from './dnd/dataTransfer';
 
+export * from './math';
+export * from './dom';
+export * from './events';
+export * from './lifecycle';
+
+export * from './panel/types';
+export * from './panel/componentFactory';
+
 export * from './splitview/core/splitview';
+export * from './splitview/core/options';
+
 export * from './paneview/paneview';
 export * from './gridview/gridview';
 export * from './groupview/groupview';
 export * from './gridview/baseComponentGridview';
 
+export * from './paneview/draggablePaneviewPanel';
+
 export * from './groupview/panel/content';
 export * from './groupview/tab';
 export * from './groupview/dnd';
 export * from './groupview/types';
+export * from './groupview/groupviewPanel';
+
 export * from './dockview/options';
+export * from './dockview/dockviewPanel';
+export * from './dockview/components/tab/defaultTab';
+export * from './dockview/deserializer';
+export * from './dockview/defaultGroupPanelView';
 
 export * from './dockview/dockviewComponent';
 export * from './gridview/gridviewComponent';
@@ -23,8 +43,6 @@ export * from './splitview/splitviewPanel';
 export * from './paneview/paneviewPanel';
 export * from './groupview/types';
 
-export * from './react'; // TODO: should be conditional on whether user wants the React wrappers
-
 export { Event } from './events';
 export { IDisposable } from './lifecycle';
 export {
diff --git a/packages/dockview/src/dnd/abstractDragHandler.ts b/packages/dockview-core/src/dnd/abstractDragHandler.ts
similarity index 100%
rename from packages/dockview/src/dnd/abstractDragHandler.ts
rename to packages/dockview-core/src/dnd/abstractDragHandler.ts
diff --git a/packages/dockview/src/dnd/dataTransfer.ts b/packages/dockview-core/src/dnd/dataTransfer.ts
similarity index 100%
rename from packages/dockview/src/dnd/dataTransfer.ts
rename to packages/dockview-core/src/dnd/dataTransfer.ts
diff --git a/packages/dockview/src/dnd/dnd.ts b/packages/dockview-core/src/dnd/dnd.ts
similarity index 100%
rename from packages/dockview/src/dnd/dnd.ts
rename to packages/dockview-core/src/dnd/dnd.ts
diff --git a/packages/dockview/src/dnd/droptarget.scss b/packages/dockview-core/src/dnd/droptarget.scss
similarity index 100%
rename from packages/dockview/src/dnd/droptarget.scss
rename to packages/dockview-core/src/dnd/droptarget.scss
diff --git a/packages/dockview/src/dnd/droptarget.ts b/packages/dockview-core/src/dnd/droptarget.ts
similarity index 100%
rename from packages/dockview/src/dnd/droptarget.ts
rename to packages/dockview-core/src/dnd/droptarget.ts
diff --git a/packages/dockview/src/dnd/ghost.ts b/packages/dockview-core/src/dnd/ghost.ts
similarity index 100%
rename from packages/dockview/src/dnd/ghost.ts
rename to packages/dockview-core/src/dnd/ghost.ts
diff --git a/packages/dockview/src/dnd/groupDragHandler.ts b/packages/dockview-core/src/dnd/groupDragHandler.ts
similarity index 100%
rename from packages/dockview/src/dnd/groupDragHandler.ts
rename to packages/dockview-core/src/dnd/groupDragHandler.ts
diff --git a/packages/dockview/src/dockview/components/tab/defaultTab.scss b/packages/dockview-core/src/dockview/components/tab/defaultTab.scss
similarity index 100%
rename from packages/dockview/src/dockview/components/tab/defaultTab.scss
rename to packages/dockview-core/src/dockview/components/tab/defaultTab.scss
diff --git a/packages/dockview/src/dockview/components/tab/defaultTab.ts b/packages/dockview-core/src/dockview/components/tab/defaultTab.ts
similarity index 100%
rename from packages/dockview/src/dockview/components/tab/defaultTab.ts
rename to packages/dockview-core/src/dockview/components/tab/defaultTab.ts
diff --git a/packages/dockview/src/dockview/components/watermark/watermark.scss b/packages/dockview-core/src/dockview/components/watermark/watermark.scss
similarity index 100%
rename from packages/dockview/src/dockview/components/watermark/watermark.scss
rename to packages/dockview-core/src/dockview/components/watermark/watermark.scss
diff --git a/packages/dockview/src/dockview/components/watermark/watermark.ts b/packages/dockview-core/src/dockview/components/watermark/watermark.ts
similarity index 100%
rename from packages/dockview/src/dockview/components/watermark/watermark.ts
rename to packages/dockview-core/src/dockview/components/watermark/watermark.ts
diff --git a/packages/dockview/src/dockview/defaultGroupPanelView.ts b/packages/dockview-core/src/dockview/defaultGroupPanelView.ts
similarity index 100%
rename from packages/dockview/src/dockview/defaultGroupPanelView.ts
rename to packages/dockview-core/src/dockview/defaultGroupPanelView.ts
diff --git a/packages/dockview/src/dockview/deserializer.ts b/packages/dockview-core/src/dockview/deserializer.ts
similarity index 100%
rename from packages/dockview/src/dockview/deserializer.ts
rename to packages/dockview-core/src/dockview/deserializer.ts
diff --git a/packages/dockview/src/dockview/dockviewComponent.scss b/packages/dockview-core/src/dockview/dockviewComponent.scss
similarity index 100%
rename from packages/dockview/src/dockview/dockviewComponent.scss
rename to packages/dockview-core/src/dockview/dockviewComponent.scss
diff --git a/packages/dockview/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts
similarity index 100%
rename from packages/dockview/src/dockview/dockviewComponent.ts
rename to packages/dockview-core/src/dockview/dockviewComponent.ts
diff --git a/packages/dockview/src/dockview/dockviewPanel.ts b/packages/dockview-core/src/dockview/dockviewPanel.ts
similarity index 100%
rename from packages/dockview/src/dockview/dockviewPanel.ts
rename to packages/dockview-core/src/dockview/dockviewPanel.ts
diff --git a/packages/dockview/src/dockview/options.ts b/packages/dockview-core/src/dockview/options.ts
similarity index 100%
rename from packages/dockview/src/dockview/options.ts
rename to packages/dockview-core/src/dockview/options.ts
diff --git a/packages/dockview-core/src/dockview/validation.ts b/packages/dockview-core/src/dockview/validation.ts
new file mode 100644
index 000000000..f0a11f155
--- /dev/null
+++ b/packages/dockview-core/src/dockview/validation.ts
@@ -0,0 +1,117 @@
+import { SerializedGridObject } from '../gridview/gridview';
+import { GroupPanelViewState } from '../groupview/groupview';
+import { GroupviewPanelState } from '../groupview/types';
+import { Orientation } from '../splitview/core/splitview';
+import { SerializedDockview } from './dockviewComponent';
+
+function validateGroupViewPanelState(value: GroupviewPanelState): void {
+    if (typeof value.id !== 'string') {
+        throw new Error('invalid layout');
+    }
+
+    if (typeof value.title !== 'string') {
+        throw new Error('invalid layout');
+    }
+
+    if (value.params !== undefined && typeof value.params !== 'object') {
+        throw new Error('invalid layout');
+    }
+}
+
+function validateGroupPanelViewState(value: GroupPanelViewState): void {
+    if (typeof value.id !== 'string') {
+        throw new Error('invalid layout');
+    }
+    if (value.locked !== undefined && typeof value.locked !== 'boolean') {
+        throw new Error('invalid layout');
+    }
+    if (value.hideHeader !== undefined && typeof value.locked !== 'boolean') {
+        throw new Error('invalid layout');
+    }
+    if (
+        value.activeView !== undefined &&
+        typeof value.activeView !== 'string'
+    ) {
+        throw new Error('invalid layout');
+    }
+
+    if (!Array.isArray(value.views)) {
+        throw new Error('invalid layout');
+    }
+
+    for (const child of value.views) {
+        if (typeof child !== 'string') {
+            if (!Array.isArray(value.views)) {
+                throw new Error('invalid layout');
+            }
+        }
+    }
+}
+
+function validateSerializedGridObject(
+    value: SerializedGridObject<GroupPanelViewState>
+): void {
+    if (value.size !== undefined && typeof value.size !== 'number') {
+        throw new Error('invalid layout');
+    }
+
+    if (value.visible !== undefined && typeof value.size !== 'boolean') {
+        throw new Error('invalid layout');
+    }
+
+    if (value.type !== 'branch' && value.type !== 'leaf') {
+        throw new Error('invalid layout');
+    }
+
+    if (Array.isArray(value.data)) {
+        for (const child of value.data) {
+            validateSerializedGridObject(child);
+        }
+    } else {
+        validateGroupPanelViewState(value.data);
+    }
+}
+
+export function validateSerializedDockview(data: SerializedDockview): void {
+    if (typeof data !== 'object') {
+        throw new Error('invalid layout');
+    }
+
+    const { grid, panels, options, activeGroup } = data;
+
+    if (typeof grid !== 'object') {
+        throw new Error('invalid layout');
+    }
+
+    if (typeof grid.height !== 'number') {
+        throw new Error('invalid layout');
+    }
+
+    if (typeof grid.width !== 'number') {
+        throw new Error('invalid layout');
+    }
+
+    if (
+        grid.orientation !== Orientation.HORIZONTAL &&
+        grid.orientation !== Orientation.VERTICAL
+    ) {
+        throw new Error('invalid layout');
+    }
+
+    validateSerializedGridObject(grid.root);
+
+    if (
+        data.activeGroup !== undefined &&
+        typeof data.activeGroup !== 'string'
+    ) {
+        throw new Error('invalid layout');
+    }
+
+    if (typeof data.panels !== 'object') {
+        throw new Error('invalid layout');
+    }
+
+    for (const value of Object.values(data.panels)) {
+        validateGroupViewPanelState(value);
+    }
+}
diff --git a/packages/dockview/src/dom.ts b/packages/dockview-core/src/dom.ts
similarity index 100%
rename from packages/dockview/src/dom.ts
rename to packages/dockview-core/src/dom.ts
diff --git a/packages/dockview/src/events.ts b/packages/dockview-core/src/events.ts
similarity index 100%
rename from packages/dockview/src/events.ts
rename to packages/dockview-core/src/events.ts
diff --git a/packages/dockview/src/gridview/baseComponentGridview.ts b/packages/dockview-core/src/gridview/baseComponentGridview.ts
similarity index 100%
rename from packages/dockview/src/gridview/baseComponentGridview.ts
rename to packages/dockview-core/src/gridview/baseComponentGridview.ts
diff --git a/packages/dockview/src/gridview/basePanelView.ts b/packages/dockview-core/src/gridview/basePanelView.ts
similarity index 100%
rename from packages/dockview/src/gridview/basePanelView.ts
rename to packages/dockview-core/src/gridview/basePanelView.ts
diff --git a/packages/dockview/src/gridview/branchNode.ts b/packages/dockview-core/src/gridview/branchNode.ts
similarity index 100%
rename from packages/dockview/src/gridview/branchNode.ts
rename to packages/dockview-core/src/gridview/branchNode.ts
diff --git a/packages/dockview/src/gridview/gridview.scss b/packages/dockview-core/src/gridview/gridview.scss
similarity index 100%
rename from packages/dockview/src/gridview/gridview.scss
rename to packages/dockview-core/src/gridview/gridview.scss
diff --git a/packages/dockview/src/gridview/gridview.ts b/packages/dockview-core/src/gridview/gridview.ts
similarity index 100%
rename from packages/dockview/src/gridview/gridview.ts
rename to packages/dockview-core/src/gridview/gridview.ts
diff --git a/packages/dockview/src/gridview/gridviewComponent.ts b/packages/dockview-core/src/gridview/gridviewComponent.ts
similarity index 100%
rename from packages/dockview/src/gridview/gridviewComponent.ts
rename to packages/dockview-core/src/gridview/gridviewComponent.ts
diff --git a/packages/dockview/src/gridview/gridviewPanel.ts b/packages/dockview-core/src/gridview/gridviewPanel.ts
similarity index 98%
rename from packages/dockview/src/gridview/gridviewPanel.ts
rename to packages/dockview-core/src/gridview/gridviewPanel.ts
index 34d620747..b95603bec 100644
--- a/packages/dockview/src/gridview/gridviewPanel.ts
+++ b/packages/dockview-core/src/gridview/gridviewPanel.ts
@@ -126,8 +126,8 @@ export abstract class GridviewPanel
         return this.api.isActive;
     }
 
-    constructor(id: string, component: string, api: GridviewPanelApiImpl) {
-        super(id, component, api);
+    constructor(id: string, component: string) {
+        super(id, component, new GridviewPanelApiImpl(id));
 
         this.api.initialize(this); // TODO: required to by-pass 'super before this' requirement
 
diff --git a/packages/dockview/src/gridview/leafNode.ts b/packages/dockview-core/src/gridview/leafNode.ts
similarity index 100%
rename from packages/dockview/src/gridview/leafNode.ts
rename to packages/dockview-core/src/gridview/leafNode.ts
diff --git a/packages/dockview/src/gridview/options.ts b/packages/dockview-core/src/gridview/options.ts
similarity index 100%
rename from packages/dockview/src/gridview/options.ts
rename to packages/dockview-core/src/gridview/options.ts
diff --git a/packages/dockview/src/gridview/types.ts b/packages/dockview-core/src/gridview/types.ts
similarity index 100%
rename from packages/dockview/src/gridview/types.ts
rename to packages/dockview-core/src/gridview/types.ts
diff --git a/packages/dockview/src/groupview/dnd.ts b/packages/dockview-core/src/groupview/dnd.ts
similarity index 100%
rename from packages/dockview/src/groupview/dnd.ts
rename to packages/dockview-core/src/groupview/dnd.ts
diff --git a/packages/dockview/src/groupview/groupview.scss b/packages/dockview-core/src/groupview/groupview.scss
similarity index 100%
rename from packages/dockview/src/groupview/groupview.scss
rename to packages/dockview-core/src/groupview/groupview.scss
diff --git a/packages/dockview/src/groupview/groupview.ts b/packages/dockview-core/src/groupview/groupview.ts
similarity index 100%
rename from packages/dockview/src/groupview/groupview.ts
rename to packages/dockview-core/src/groupview/groupview.ts
diff --git a/packages/dockview/src/groupview/groupviewPanel.ts b/packages/dockview-core/src/groupview/groupviewPanel.ts
similarity index 97%
rename from packages/dockview/src/groupview/groupviewPanel.ts
rename to packages/dockview-core/src/groupview/groupviewPanel.ts
index cf1a0e276..4ef6caa77 100644
--- a/packages/dockview/src/groupview/groupviewPanel.ts
+++ b/packages/dockview-core/src/groupview/groupviewPanel.ts
@@ -74,7 +74,7 @@ export class GroupPanel extends GridviewPanel implements IGroupviewPanel {
         id: string,
         options: GroupOptions
     ) {
-        super(id, 'groupview_default', new GroupviewApi(id));
+        super(id, 'groupview_default');
 
         this._model = new Groupview(this.element, accessor, id, options, this);
     }
diff --git a/packages/dockview/src/groupview/panel/content.ts b/packages/dockview-core/src/groupview/panel/content.ts
similarity index 100%
rename from packages/dockview/src/groupview/panel/content.ts
rename to packages/dockview-core/src/groupview/panel/content.ts
diff --git a/packages/dockview/src/groupview/tab.ts b/packages/dockview-core/src/groupview/tab.ts
similarity index 100%
rename from packages/dockview/src/groupview/tab.ts
rename to packages/dockview-core/src/groupview/tab.ts
diff --git a/packages/dockview/src/groupview/titlebar/tabsContainer.scss b/packages/dockview-core/src/groupview/titlebar/tabsContainer.scss
similarity index 100%
rename from packages/dockview/src/groupview/titlebar/tabsContainer.scss
rename to packages/dockview-core/src/groupview/titlebar/tabsContainer.scss
diff --git a/packages/dockview/src/groupview/titlebar/tabsContainer.ts b/packages/dockview-core/src/groupview/titlebar/tabsContainer.ts
similarity index 100%
rename from packages/dockview/src/groupview/titlebar/tabsContainer.ts
rename to packages/dockview-core/src/groupview/titlebar/tabsContainer.ts
diff --git a/packages/dockview/src/groupview/titlebar/voidContainer.ts b/packages/dockview-core/src/groupview/titlebar/voidContainer.ts
similarity index 100%
rename from packages/dockview/src/groupview/titlebar/voidContainer.ts
rename to packages/dockview-core/src/groupview/titlebar/voidContainer.ts
diff --git a/packages/dockview/src/groupview/types.ts b/packages/dockview-core/src/groupview/types.ts
similarity index 100%
rename from packages/dockview/src/groupview/types.ts
rename to packages/dockview-core/src/groupview/types.ts
diff --git a/packages/dockview/src/hostedContainer.ts b/packages/dockview-core/src/hostedContainer.ts
similarity index 100%
rename from packages/dockview/src/hostedContainer.ts
rename to packages/dockview-core/src/hostedContainer.ts
diff --git a/packages/dockview-core/src/index.ts b/packages/dockview-core/src/index.ts
new file mode 100644
index 000000000..2621031ac
--- /dev/null
+++ b/packages/dockview-core/src/index.ts
@@ -0,0 +1,2 @@
+export * from './core';
+// export * from './react'; // TODO: should be conditional on whether user wants the React wrappers
diff --git a/packages/dockview/src/lifecycle.ts b/packages/dockview-core/src/lifecycle.ts
similarity index 100%
rename from packages/dockview/src/lifecycle.ts
rename to packages/dockview-core/src/lifecycle.ts
diff --git a/packages/dockview/src/math.ts b/packages/dockview-core/src/math.ts
similarity index 100%
rename from packages/dockview/src/math.ts
rename to packages/dockview-core/src/math.ts
diff --git a/packages/dockview/src/panel/componentFactory.ts b/packages/dockview-core/src/panel/componentFactory.ts
similarity index 100%
rename from packages/dockview/src/panel/componentFactory.ts
rename to packages/dockview-core/src/panel/componentFactory.ts
diff --git a/packages/dockview/src/panel/types.ts b/packages/dockview-core/src/panel/types.ts
similarity index 100%
rename from packages/dockview/src/panel/types.ts
rename to packages/dockview-core/src/panel/types.ts
diff --git a/packages/dockview/src/paneview/defaultPaneviewHeader.ts b/packages/dockview-core/src/paneview/defaultPaneviewHeader.ts
similarity index 100%
rename from packages/dockview/src/paneview/defaultPaneviewHeader.ts
rename to packages/dockview-core/src/paneview/defaultPaneviewHeader.ts
diff --git a/packages/dockview/src/paneview/draggablePaneviewPanel.ts b/packages/dockview-core/src/paneview/draggablePaneviewPanel.ts
similarity index 93%
rename from packages/dockview/src/paneview/draggablePaneviewPanel.ts
rename to packages/dockview-core/src/paneview/draggablePaneviewPanel.ts
index 55e3b26a5..9194456f9 100644
--- a/packages/dockview/src/paneview/draggablePaneviewPanel.ts
+++ b/packages/dockview-core/src/paneview/draggablePaneviewPanel.ts
@@ -1,3 +1,4 @@
+import { Paneview, PaneviewApi } from '../core';
 import { DragHandler } from '../dnd/abstractDragHandler';
 import {
     getPaneData,
@@ -15,16 +16,17 @@ import {
     PaneviewPanel,
 } from './paneviewPanel';
 
-export interface PaneviewDropEvent2 extends DroptargetEvent {
+export interface PaneviewDropEvent extends DroptargetEvent {
     panel: IPaneviewPanel;
     getData: () => PaneTransfer | undefined;
+    api: PaneviewApi;
 }
 
 export abstract class DraggablePaneviewPanel extends PaneviewPanel {
     private handler: DragHandler | undefined;
     private target: Droptarget | undefined;
 
-    private readonly _onDidDrop = new Emitter<PaneviewDropEvent2>();
+    private readonly _onDidDrop = new Emitter<PaneviewDropEvent>();
     readonly onDidDrop = this._onDidDrop.event;
 
     constructor(
@@ -117,6 +119,7 @@ export abstract class DraggablePaneviewPanel extends PaneviewPanel {
             this._onDidDrop.fire({
                 ...event,
                 panel: this,
+                api: new PaneviewApi(this.accessor),
                 getData: getPaneData,
             });
             return;
@@ -133,6 +136,7 @@ export abstract class DraggablePaneviewPanel extends PaneviewPanel {
                 ...event,
                 panel: this,
                 getData: getPaneData,
+                api: new PaneviewApi(this.accessor),
             });
             return;
         }
diff --git a/packages/dockview/src/paneview/options.ts b/packages/dockview-core/src/paneview/options.ts
similarity index 100%
rename from packages/dockview/src/paneview/options.ts
rename to packages/dockview-core/src/paneview/options.ts
diff --git a/packages/dockview/src/paneview/paneview.scss b/packages/dockview-core/src/paneview/paneview.scss
similarity index 100%
rename from packages/dockview/src/paneview/paneview.scss
rename to packages/dockview-core/src/paneview/paneview.scss
diff --git a/packages/dockview/src/paneview/paneview.ts b/packages/dockview-core/src/paneview/paneview.ts
similarity index 100%
rename from packages/dockview/src/paneview/paneview.ts
rename to packages/dockview-core/src/paneview/paneview.ts
diff --git a/packages/dockview/src/paneview/paneviewComponent.ts b/packages/dockview-core/src/paneview/paneviewComponent.ts
similarity index 98%
rename from packages/dockview/src/paneview/paneviewComponent.ts
rename to packages/dockview-core/src/paneview/paneviewComponent.ts
index d0995b3a6..7cf3b04a1 100644
--- a/packages/dockview/src/paneview/paneviewComponent.ts
+++ b/packages/dockview-core/src/paneview/paneviewComponent.ts
@@ -21,7 +21,7 @@ import {
 } from './paneviewPanel';
 import {
     DraggablePaneviewPanel,
-    PaneviewDropEvent2,
+    PaneviewDropEvent,
 } from './draggablePaneviewPanel';
 import { DefaultHeader } from './defaultPaneviewHeader';
 import { sequentialNumberGenerator } from '../math';
@@ -115,7 +115,7 @@ export interface IPaneviewComponent extends IDisposable {
     readonly options: PaneviewComponentOptions;
     readonly onDidAddView: Event<PaneviewPanel>;
     readonly onDidRemoveView: Event<PaneviewPanel>;
-    readonly onDidDrop: Event<PaneviewDropEvent2>;
+    readonly onDidDrop: Event<PaneviewDropEvent>;
     readonly onDidLayoutChange: Event<void>;
     readonly onDidLayoutFromJSON: Event<void>;
     addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel;
@@ -146,8 +146,8 @@ export class PaneviewComponent
     private readonly _onDidLayoutChange = new Emitter<void>();
     readonly onDidLayoutChange: Event<void> = this._onDidLayoutChange.event;
 
-    private readonly _onDidDrop = new Emitter<PaneviewDropEvent2>();
-    readonly onDidDrop: Event<PaneviewDropEvent2> = this._onDidDrop.event;
+    private readonly _onDidDrop = new Emitter<PaneviewDropEvent>();
+    readonly onDidDrop: Event<PaneviewDropEvent> = this._onDidDrop.event;
 
     private readonly _onDidAddView = new Emitter<PaneviewPanel>();
     readonly onDidAddView = this._onDidAddView.event;
diff --git a/packages/dockview/src/paneview/paneviewPanel.ts b/packages/dockview-core/src/paneview/paneviewPanel.ts
similarity index 100%
rename from packages/dockview/src/paneview/paneviewPanel.ts
rename to packages/dockview-core/src/paneview/paneviewPanel.ts
diff --git a/packages/dockview/src/splitview/core/options.ts b/packages/dockview-core/src/splitview/core/options.ts
similarity index 100%
rename from packages/dockview/src/splitview/core/options.ts
rename to packages/dockview-core/src/splitview/core/options.ts
diff --git a/packages/dockview/src/splitview/core/splitview.scss b/packages/dockview-core/src/splitview/core/splitview.scss
similarity index 100%
rename from packages/dockview/src/splitview/core/splitview.scss
rename to packages/dockview-core/src/splitview/core/splitview.scss
diff --git a/packages/dockview/src/splitview/core/splitview.ts b/packages/dockview-core/src/splitview/core/splitview.ts
similarity index 100%
rename from packages/dockview/src/splitview/core/splitview.ts
rename to packages/dockview-core/src/splitview/core/splitview.ts
diff --git a/packages/dockview/src/splitview/core/viewItem.ts b/packages/dockview-core/src/splitview/core/viewItem.ts
similarity index 100%
rename from packages/dockview/src/splitview/core/viewItem.ts
rename to packages/dockview-core/src/splitview/core/viewItem.ts
diff --git a/packages/dockview/src/splitview/splitviewComponent.ts b/packages/dockview-core/src/splitview/splitviewComponent.ts
similarity index 100%
rename from packages/dockview/src/splitview/splitviewComponent.ts
rename to packages/dockview-core/src/splitview/splitviewComponent.ts
diff --git a/packages/dockview/src/splitview/splitviewPanel.ts b/packages/dockview-core/src/splitview/splitviewPanel.ts
similarity index 100%
rename from packages/dockview/src/splitview/splitviewPanel.ts
rename to packages/dockview-core/src/splitview/splitviewPanel.ts
diff --git a/packages/dockview/src/svg.scss b/packages/dockview-core/src/svg.scss
similarity index 100%
rename from packages/dockview/src/svg.scss
rename to packages/dockview-core/src/svg.scss
diff --git a/packages/dockview/src/svg.ts b/packages/dockview-core/src/svg.ts
similarity index 100%
rename from packages/dockview/src/svg.ts
rename to packages/dockview-core/src/svg.ts
diff --git a/packages/dockview/src/theme.scss b/packages/dockview-core/src/theme.scss
similarity index 100%
rename from packages/dockview/src/theme.scss
rename to packages/dockview-core/src/theme.scss
diff --git a/packages/dockview-core/src/types.ts b/packages/dockview-core/src/types.ts
new file mode 100644
index 000000000..fbe4b5799
--- /dev/null
+++ b/packages/dockview-core/src/types.ts
@@ -0,0 +1,13 @@
+export interface Constructor<T> {
+    new (): T;
+}
+
+export interface FrameworkFactory<T> {
+    createComponent: (id: string, componentId: string, component: any) => T;
+}
+
+export type FunctionOrValue<T> = (() => T) | T;
+
+export function isBooleanValue(value: any): value is boolean {
+    return typeof value === 'boolean';
+}
diff --git a/packages/dockview-core/test.html b/packages/dockview-core/test.html
new file mode 100644
index 000000000..dc77f294d
--- /dev/null
+++ b/packages/dockview-core/test.html
@@ -0,0 +1,87 @@
+<!-- <!DOCTYPE html> -->
+<html>
+    <head>
+      <script src="https://unpkg.com/dockview@0.0.0-experimental-ff3f0b23-20230207/dist/dockview.js"></script>
+      <style>
+        body {
+          margin: 0;
+        }
+
+        #root {
+          height: 100vh;
+          width: 100vw;
+          background-color: grey;
+        }
+
+        #app {
+          height: 100%;
+          width: 100%;
+        }
+      </style>
+    </head>
+    <body>
+        <div id="root">
+          <div class="dockview-theme-dark" id="app">
+          </div>
+        </div>
+        <script>
+          class CustomPanel {
+            element = document.createElement('div');
+
+            constructor(id, component) {
+              this.id = id;
+              this.component = component
+            }
+
+            updateParentGroup(group, isPanelVisible) {
+              //
+            }
+
+            init(parameters) {
+              //
+            }
+
+            layout(width, height) {
+              //
+            }
+
+            update(event) {
+              //
+            }
+
+            toJSON() {
+              return {}
+            }
+
+            focus() {
+              //
+            }
+
+            dispose() {
+              //
+            }
+          }
+
+
+          const root = document.getElementById("root");
+          const app = document.getElementById("app");
+          const dockviewComponent = new dockview.DockviewComponent(app, {
+            components: {
+              myCustomPanel: CustomPanel
+            }
+          });
+
+          const observer = new ResizeObserver((entires) => {
+            const firstEntry = entires[0];
+            const { width, height } = firstEntry.contentRect;
+            dockviewComponent.layout(width, height);
+          });
+
+          observer.observe(root);
+
+          dockviewComponent.addPanel({component: 'myCustomPanel', id:'1', title: 'Panel 1'});
+          dockviewComponent.addPanel({component: 'myCustomPanel', id:'2', title: 'Panel 2'});
+
+        </script>
+    </body>
+</html>
diff --git a/packages/dockview-core/tsconfig.esm.json b/packages/dockview-core/tsconfig.esm.json
new file mode 100644
index 000000000..b48538b62
--- /dev/null
+++ b/packages/dockview-core/tsconfig.esm.json
@@ -0,0 +1,11 @@
+{
+    "extends": "../../module-build/tsconfig.esm.json",
+    "compilerOptions": {
+        "outDir": "dist/esm",
+        "tsBuildInfoFile": ".build/tsconfig.tsbuildinfo.esm",
+        "jsx": "react",
+        "rootDir": "src"
+    },
+    "include": ["src"],
+    "exclude": ["**/node_modules", "src/__tests__"]
+}
diff --git a/packages/dockview-core/tsconfig.json b/packages/dockview-core/tsconfig.json
new file mode 100644
index 000000000..9ff78cef1
--- /dev/null
+++ b/packages/dockview-core/tsconfig.json
@@ -0,0 +1,11 @@
+{
+    "extends": "../../module-build/tsconfig.json",
+    "compilerOptions": {
+        "outDir": "dist/cjs",
+        "tsBuildInfoFile": ".build/tsconfig.tsbuildinfo.cjs",
+        "jsx": "react",
+        "rootDir": "src"
+    },
+    "include": ["src"],
+    "exclude": ["**/node_modules", "src/__tests__"]
+}
\ No newline at end of file
diff --git a/packages/dockview-core/typedoc.json b/packages/dockview-core/typedoc.json
new file mode 100644
index 000000000..9ab13c458
--- /dev/null
+++ b/packages/dockview-core/typedoc.json
@@ -0,0 +1,7 @@
+{
+    "out": "typedocs",
+    "entryPoints": ["./src/index.ts"],
+    "exclude": ["**/_test/**/*.*", "**/index.ts"],
+    "excludeExternals": true,
+    "excludePrivate": true
+}
diff --git a/packages/dockview/package.json b/packages/dockview/package.json
index d2adaf103..932a6e24f 100644
--- a/packages/dockview/package.json
+++ b/packages/dockview/package.json
@@ -55,6 +55,9 @@
   ],
   "author": "https://github.com/mathuo",
   "license": "MIT",
+  "dependencies": {
+    "dockview-core": "^1.6.0"
+  },
   "devDependencies": {
     "@rollup/plugin-typescript": "^11.0.0",
     "@testing-library/react": "^13.4.0",
diff --git a/packages/dockview/src/react/deserializer.ts b/packages/dockview/src/deserializer.ts
similarity index 75%
rename from packages/dockview/src/react/deserializer.ts
rename to packages/dockview/src/deserializer.ts
index 36f16d570..d071fa66e 100644
--- a/packages/dockview/src/react/deserializer.ts
+++ b/packages/dockview/src/deserializer.ts
@@ -1,13 +1,16 @@
-import { DockviewComponent } from '../dockview/dockviewComponent';
-import { GroupviewPanelState } from '../groupview/types';
-import { DockviewPanel, IDockviewPanel } from '../dockview/dockviewPanel';
-import { IPanelDeserializer } from '../dockview/deserializer';
-import { createComponent } from '../panel/componentFactory';
-import { DockviewApi } from '../api/component.api';
-import { DefaultTab } from '../dockview/components/tab/defaultTab';
-import { DefaultGroupPanelView } from '../dockview/defaultGroupPanelView';
-import { GroupPanel } from '../groupview/groupviewPanel';
-import { ITabRenderer } from '../groupview/types';
+import {
+    ITabRenderer,
+    GroupPanel,
+    DefaultGroupPanelView,
+    DefaultTab,
+    DockviewApi,
+    createComponent,
+    IPanelDeserializer,
+    DockviewPanel,
+    IDockviewPanel,
+    GroupviewPanelState,
+    DockviewComponent,
+} from 'dockview-core';
 
 export class ReactPanelDeserialzier implements IPanelDeserializer {
     constructor(private readonly layout: DockviewComponent) {}
diff --git a/packages/dockview/src/react/dockview/defaultTab.scss b/packages/dockview/src/dockview/defaultTab.scss
similarity index 100%
rename from packages/dockview/src/react/dockview/defaultTab.scss
rename to packages/dockview/src/dockview/defaultTab.scss
diff --git a/packages/dockview/src/react/dockview/defaultTab.tsx b/packages/dockview/src/dockview/defaultTab.tsx
similarity index 100%
rename from packages/dockview/src/react/dockview/defaultTab.tsx
rename to packages/dockview/src/dockview/defaultTab.tsx
diff --git a/packages/dockview/src/react/dockview/dockview.scss b/packages/dockview/src/dockview/dockview.scss
similarity index 100%
rename from packages/dockview/src/react/dockview/dockview.scss
rename to packages/dockview/src/dockview/dockview.scss
diff --git a/packages/dockview/src/react/dockview/dockview.tsx b/packages/dockview/src/dockview/dockview.tsx
similarity index 95%
rename from packages/dockview/src/react/dockview/dockview.tsx
rename to packages/dockview/src/dockview/dockview.tsx
index d6250d786..35c8b7232 100644
--- a/packages/dockview/src/react/dockview/dockview.tsx
+++ b/packages/dockview/src/dockview/dockview.tsx
@@ -2,28 +2,28 @@ import * as React from 'react';
 import {
     DockviewComponent,
     DockviewDropEvent,
-} from '../../dockview/dockviewComponent';
-import { ReactPanelContentPart } from './reactContentPart';
-import { ReactPanelHeaderPart } from './reactHeaderPart';
-import { ReactPanelDeserialzier } from '../deserializer';
-import {
     DockviewDndOverlayEvent,
     GroupPanelFrameworkComponentFactory,
     IGroupControlRenderer,
-} from '../../dockview/options';
-import { DockviewPanelApi } from '../../api/dockviewPanelApi';
+    DockviewPanelApi,
+    DockviewApi,
+    IContentRenderer,
+    ITabRenderer,
+    watchElementResize,
+    GroupPanel,
+    DEFAULT_TAB_IDENTIFIER,
+} from 'dockview-core';
+import { ReactPanelContentPart } from './reactContentPart';
+import { ReactPanelHeaderPart } from './reactHeaderPart';
+import { ReactPanelDeserialzier } from '../deserializer';
+
 import { ReactPortalStore, usePortalsLifecycle } from '../react';
-import { DockviewApi } from '../../api/component.api';
 import { IWatermarkPanelProps, ReactWatermarkPart } from './reactWatermarkPart';
 import { PanelCollection, PanelParameters } from '../types';
-import { watchElementResize } from '../../dom';
-import { IContentRenderer, ITabRenderer } from '../../groupview/types';
 import {
     IDockviewGroupControlProps,
     ReactGroupControlsRendererPart,
 } from './groupControlsRenderer';
-import { GroupPanel } from '../../groupview/groupviewPanel';
-import { DEFAULT_TAB_IDENTIFIER } from '../../dockview/components/tab/defaultTab';
 
 function createGroupControlElement(
     component: React.FunctionComponent<IDockviewGroupControlProps> | undefined,
diff --git a/packages/dockview/src/react/dockview/groupControlsRenderer.ts b/packages/dockview/src/dockview/groupControlsRenderer.ts
similarity index 89%
rename from packages/dockview/src/react/dockview/groupControlsRenderer.ts
rename to packages/dockview/src/dockview/groupControlsRenderer.ts
index e1014518a..1b954a66b 100644
--- a/packages/dockview/src/react/dockview/groupControlsRenderer.ts
+++ b/packages/dockview/src/dockview/groupControlsRenderer.ts
@@ -1,10 +1,14 @@
 import * as React from 'react';
 import { ReactPart, ReactPortalStore } from '../react';
-import { PanelUpdateEvent } from '../../panel/types';
-import { GroupPanel, GroupviewPanelApi } from '../../groupview/groupviewPanel';
-import { DockviewApi } from '../../api/component.api';
-import { CompositeDisposable, MutableDisposable } from '../../lifecycle';
-import { IDockviewPanel } from '../../dockview/dockviewPanel';
+import {
+    IDockviewPanel,
+    CompositeDisposable,
+    MutableDisposable,
+    DockviewApi,
+    GroupPanel,
+    GroupviewPanelApi,
+    PanelUpdateEvent,
+} from 'dockview-core';
 
 export interface IDockviewGroupControlProps {
     api: GroupviewPanelApi;
diff --git a/packages/dockview/src/react/dockview/reactContentPart.ts b/packages/dockview/src/dockview/reactContentPart.ts
similarity index 91%
rename from packages/dockview/src/react/dockview/reactContentPart.ts
rename to packages/dockview/src/dockview/reactContentPart.ts
index 41ea1d954..9f3557609 100644
--- a/packages/dockview/src/react/dockview/reactContentPart.ts
+++ b/packages/dockview/src/dockview/reactContentPart.ts
@@ -1,13 +1,14 @@
 import * as React from 'react';
-import {
-    IContentRenderer,
-    GroupPanelContentPartInitParameters,
-} from '../../groupview/types';
 import { ReactPart, ReactPortalStore } from '../react';
 import { IDockviewPanelProps } from '../dockview/dockview';
-import { PanelUpdateEvent } from '../../panel/types';
-import { GroupPanel } from '../../groupview/groupviewPanel';
-import { Emitter, Event } from '../../events';
+import {
+    Emitter,
+    Event,
+    GroupPanel,
+    PanelUpdateEvent,
+    IContentRenderer,
+    GroupPanelContentPartInitParameters,
+} from 'dockview-core';
 
 export class ReactPanelContentPart implements IContentRenderer {
     private _element: HTMLElement;
diff --git a/packages/dockview/src/react/dockview/reactHeaderPart.ts b/packages/dockview/src/dockview/reactHeaderPart.ts
similarity index 88%
rename from packages/dockview/src/react/dockview/reactHeaderPart.ts
rename to packages/dockview/src/dockview/reactHeaderPart.ts
index b2f137ea8..602054d36 100644
--- a/packages/dockview/src/react/dockview/reactHeaderPart.ts
+++ b/packages/dockview/src/dockview/reactHeaderPart.ts
@@ -1,13 +1,14 @@
 import * as React from 'react';
-import {
-    ITabRenderer,
-    GroupPanelPartInitParameters,
-} from '../../groupview/types';
-import { GroupPanel } from '../../groupview/groupviewPanel';
-import { PanelUpdateEvent } from '../../panel/types';
+
 import { ReactPart, ReactPortalStore } from '../react';
 import { IGroupPanelBaseProps } from './dockview';
-import { DEFAULT_TAB_IDENTIFIER } from '../../dockview/components/tab/defaultTab';
+import {
+    DEFAULT_TAB_IDENTIFIER,
+    PanelUpdateEvent,
+    GroupPanel,
+    ITabRenderer,
+    GroupPanelPartInitParameters,
+} from 'dockview-core';
 
 export class ReactPanelHeaderPart implements ITabRenderer {
     private _element: HTMLElement;
diff --git a/packages/dockview/src/react/dockview/reactWatermarkPart.ts b/packages/dockview/src/dockview/reactWatermarkPart.ts
similarity index 93%
rename from packages/dockview/src/react/dockview/reactWatermarkPart.ts
rename to packages/dockview/src/dockview/reactWatermarkPart.ts
index 7fa44d505..e0b7253ed 100644
--- a/packages/dockview/src/react/dockview/reactWatermarkPart.ts
+++ b/packages/dockview/src/dockview/reactWatermarkPart.ts
@@ -1,12 +1,12 @@
 import * as React from 'react';
-import {
-    GroupPanelPartInitParameters,
-    IWatermarkRenderer,
-} from '../../groupview/types';
-import { GroupPanel } from '../../groupview/groupviewPanel';
 import { ReactPart, ReactPortalStore } from '../react';
 import { IGroupPanelBaseProps } from './dockview';
-import { PanelUpdateEvent } from '../../panel/types';
+import {
+    PanelUpdateEvent,
+    GroupPanel,
+    GroupPanelPartInitParameters,
+    IWatermarkRenderer,
+} from 'dockview-core';
 
 export interface IWatermarkPanelProps extends IGroupPanelBaseProps {
     close: () => void;
diff --git a/packages/dockview/src/react/dockview/v2/reactContentRenderer.ts b/packages/dockview/src/dockview/v2/reactContentRenderer.ts
similarity index 92%
rename from packages/dockview/src/react/dockview/v2/reactContentRenderer.ts
rename to packages/dockview/src/dockview/v2/reactContentRenderer.ts
index 83f693b80..2ffeef9ae 100644
--- a/packages/dockview/src/react/dockview/v2/reactContentRenderer.ts
+++ b/packages/dockview/src/dockview/v2/reactContentRenderer.ts
@@ -1,10 +1,10 @@
 import {
     GroupPanelPartInitParameters,
     IContentRenderer,
-} from '../../../groupview/types';
-import { GroupPanel } from '../../../groupview/groupviewPanel';
-import { HostedContainer } from '../../../hostedContainer';
-import { PanelUpdateEvent } from '../../../panel/types';
+    GroupPanel,
+    HostedContainer,
+    PanelUpdateEvent,
+} from 'dockview-core';
 import { ReactPart, ReactPortalStore } from '../../react';
 import { IDockviewPanelProps } from '../dockview';
 
diff --git a/packages/dockview/src/react/dockview/v2/reactGroupPanelView.ts b/packages/dockview/src/dockview/v2/reactGroupPanelView.ts
similarity index 79%
rename from packages/dockview/src/react/dockview/v2/reactGroupPanelView.ts
rename to packages/dockview/src/dockview/v2/reactGroupPanelView.ts
index b9925790a..d0b39f730 100644
--- a/packages/dockview/src/react/dockview/v2/reactGroupPanelView.ts
+++ b/packages/dockview/src/dockview/v2/reactGroupPanelView.ts
@@ -1,10 +1,10 @@
-import { DefaultTab } from '../../../dockview/components/tab/defaultTab';
+import { ReactPortalStore } from '../../react';
 import {
+    DefaultGroupPanelView,
     DockviewRenderFunctions,
     ViewFactoryData,
-} from '../../../dockview/options';
-import { ReactPortalStore } from '../../react';
-import { DefaultGroupPanelView } from '../../../dockview/defaultGroupPanelView';
+    DefaultTab,
+} from 'dockview-core';
 import { ReactContentRenderer } from './reactContentRenderer';
 
 export class ReactGroupPanelView extends DefaultGroupPanelView {
diff --git a/packages/dockview/src/react/dockview/v2/webviewContentRenderer.ts b/packages/dockview/src/dockview/v2/webviewContentRenderer.ts
similarity index 85%
rename from packages/dockview/src/react/dockview/v2/webviewContentRenderer.ts
rename to packages/dockview/src/dockview/v2/webviewContentRenderer.ts
index 71c5beb31..374b887ba 100644
--- a/packages/dockview/src/react/dockview/v2/webviewContentRenderer.ts
+++ b/packages/dockview/src/dockview/v2/webviewContentRenderer.ts
@@ -1,10 +1,10 @@
 import {
     GroupPanelPartInitParameters,
     IContentRenderer,
-} from '../../../groupview/types';
-import { GroupPanel } from '../../../groupview/groupviewPanel';
-import { HostedContainer } from '../../../hostedContainer';
-import { PanelUpdateEvent } from '../../../panel/types';
+    GroupPanel,
+    HostedContainer,
+    PanelUpdateEvent,
+} from 'dockview-core';
 
 export class WebviewContentRenderer implements IContentRenderer {
     private _hostedContainer: HostedContainer;
diff --git a/packages/dockview/src/react/gridview/gridview.tsx b/packages/dockview/src/gridview/gridview.tsx
similarity index 93%
rename from packages/dockview/src/react/gridview/gridview.tsx
rename to packages/dockview/src/gridview/gridview.tsx
index d13db6eb2..bd330e65d 100644
--- a/packages/dockview/src/react/gridview/gridview.tsx
+++ b/packages/dockview/src/gridview/gridview.tsx
@@ -2,14 +2,14 @@ import * as React from 'react';
 import {
     GridviewComponent,
     IGridviewComponent,
-} from '../../gridview/gridviewComponent';
-import { GridviewPanelApi } from '../../api/gridviewPanelApi';
-import { Orientation } from '../../splitview/core/splitview';
+    GridviewPanelApi,
+    Orientation,
+    GridviewApi,
+    watchElementResize,
+} from 'dockview-core';
 import { ReactGridPanelView } from './view';
 import { usePortalsLifecycle } from '../react';
-import { GridviewApi } from '../../api/component.api';
 import { PanelCollection, PanelParameters } from '../types';
-import { watchElementResize } from '../../dom';
 
 export interface GridviewReadyEvent {
     api: GridviewApi;
diff --git a/packages/dockview/src/react/gridview/view.ts b/packages/dockview/src/gridview/view.ts
similarity index 76%
rename from packages/dockview/src/react/gridview/view.ts
rename to packages/dockview/src/gridview/view.ts
index 992e647da..c941457e5 100644
--- a/packages/dockview/src/react/gridview/view.ts
+++ b/packages/dockview/src/gridview/view.ts
@@ -1,10 +1,9 @@
-import { GridviewApi } from '../../api/component.api';
-import { GridviewPanelApiImpl } from '../../api/gridviewPanelApi';
 import {
+    GridviewApi,
     GridviewPanel,
     GridviewInitParameters,
-} from '../../gridview/gridviewPanel';
-import { IFrameworkPart } from '../../panel/types';
+    IFrameworkPart,
+} from 'dockview-core';
 import { ReactPart, ReactPortalStore } from '../react';
 import { IGridviewPanelProps } from './gridview';
 
@@ -15,7 +14,7 @@ export class ReactGridPanelView extends GridviewPanel {
         private readonly reactComponent: React.FunctionComponent<IGridviewPanelProps>,
         private readonly reactPortalStore: ReactPortalStore
     ) {
-        super(id, component, new GridviewPanelApiImpl(id));
+        super(id, component);
     }
 
     getComponent(): IFrameworkPart {
diff --git a/packages/dockview/src/index.scss b/packages/dockview/src/index.scss
new file mode 100644
index 000000000..7c4a8f79e
--- /dev/null
+++ b/packages/dockview/src/index.scss
@@ -0,0 +1 @@
+@import "dockview-core/dist/styles/dockview.css"
diff --git a/packages/dockview/src/index.ts b/packages/dockview/src/index.ts
index 1b788ad1a..acc7fec37 100644
--- a/packages/dockview/src/index.ts
+++ b/packages/dockview/src/index.ts
@@ -1,2 +1,11 @@
-export * from './core';
-export * from './react'; // TODO: should be conditional on whether user wants the React wrappers
+export * from 'dockview-core';
+
+export * from './dockview/dockview';
+export * from './dockview/defaultTab';
+export * from './splitview/splitview';
+export * from './gridview/gridview';
+export { IDockviewGroupControlProps } from './dockview/groupControlsRenderer';
+export { IWatermarkPanelProps } from './dockview/reactWatermarkPart';
+export * from './paneview/paneview';
+export * from './types';
+export * from './react';
diff --git a/packages/dockview/src/react/paneview/paneview.tsx b/packages/dockview/src/paneview/paneview.tsx
similarity index 92%
rename from packages/dockview/src/react/paneview/paneview.tsx
rename to packages/dockview/src/paneview/paneview.tsx
index 8dbba197f..ed27f9893 100644
--- a/packages/dockview/src/react/paneview/paneview.tsx
+++ b/packages/dockview/src/paneview/paneview.tsx
@@ -1,16 +1,16 @@
 import * as React from 'react';
-import { PaneviewPanelApi } from '../../api/paneviewPanelApi';
 import {
+    PaneviewPanelApi,
     PaneviewComponent,
     IPaneviewComponent,
     PaneviewDndOverlayEvent,
-} from '../../paneview/paneviewComponent';
+    PaneviewApi,
+    watchElementResize,
+    PaneviewDropEvent,
+} from 'dockview-core';
 import { usePortalsLifecycle } from '../react';
-import { PaneviewApi } from '../../api/component.api';
 import { PanePanelSection } from './view';
 import { PanelCollection, PanelParameters } from '../types';
-import { watchElementResize } from '../../dom';
-import { PaneviewDropEvent2 } from '../../paneview/draggablePaneviewPanel';
 
 export interface PaneviewReadyEvent {
     api: PaneviewApi;
@@ -23,10 +23,6 @@ export interface IPaneviewPanelProps<T extends { [index: string]: any } = any>
     title: string;
 }
 
-export interface PaneviewDropEvent extends PaneviewDropEvent2 {
-    api: PaneviewApi;
-}
-
 export interface IPaneviewReactProps {
     onReady: (event: PaneviewReadyEvent) => void;
     components: PanelCollection<IPaneviewPanelProps>;
diff --git a/packages/dockview/src/react/paneview/view.tsx b/packages/dockview/src/paneview/view.tsx
similarity index 93%
rename from packages/dockview/src/react/paneview/view.tsx
rename to packages/dockview/src/paneview/view.tsx
index 06624a873..5a3ccfc2c 100644
--- a/packages/dockview/src/react/paneview/view.tsx
+++ b/packages/dockview/src/paneview/view.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { PanelUpdateEvent } from '../../panel/types';
 import {
+    PanelUpdateEvent,
     IPaneBodyPart,
     PanePanelComponentInitParameter,
-} from '../../paneview/paneviewPanel';
+} from 'dockview-core';
 import { ReactPart, ReactPortalStore } from '../react';
 import { IPaneviewPanelProps } from './paneview';
 
diff --git a/packages/dockview/src/react/react.ts b/packages/dockview/src/react.ts
similarity index 97%
rename from packages/dockview/src/react/react.ts
rename to packages/dockview/src/react.ts
index 73bb1e3ef..52991e7c6 100644
--- a/packages/dockview/src/react/react.ts
+++ b/packages/dockview/src/react.ts
@@ -1,8 +1,10 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { IDisposable } from '../lifecycle';
-import { sequentialNumberGenerator } from '../math';
-import { IFrameworkPart } from '../panel/types';
+import {
+    IFrameworkPart,
+    sequentialNumberGenerator,
+    IDisposable,
+} from 'dockview-core';
 
 export interface ReactPortalStore {
     addPortal: (portal: React.ReactPortal) => IDisposable;
diff --git a/packages/dockview/src/react/index.ts b/packages/dockview/src/react/index.ts
deleted file mode 100644
index 96c0eef63..000000000
--- a/packages/dockview/src/react/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export * from './dockview/dockview';
-export * from './dockview/defaultTab';
-export * from './splitview/splitview';
-export * from './gridview/gridview';
-export { IDockviewGroupControlProps } from './dockview/groupControlsRenderer';
-export { IWatermarkPanelProps } from './dockview/reactWatermarkPart';
-export * from './paneview/paneview';
-export * from './types';
-export * from './react';
diff --git a/packages/dockview/src/react/types.ts b/packages/dockview/src/react/types.ts
deleted file mode 100644
index d5b7b07a3..000000000
--- a/packages/dockview/src/react/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as React from 'react';
-
-export interface PanelCollection<T extends object> {
-    [name: string]: React.FunctionComponent<T>;
-}
-
-export interface PanelParameters<T extends {} = Record<string, any>> {
-    params: T;
-}
diff --git a/packages/dockview/src/react/splitview/splitview.tsx b/packages/dockview/src/splitview/splitview.tsx
similarity index 92%
rename from packages/dockview/src/react/splitview/splitview.tsx
rename to packages/dockview/src/splitview/splitview.tsx
index 7fe6877c8..d6382a29f 100644
--- a/packages/dockview/src/react/splitview/splitview.tsx
+++ b/packages/dockview/src/splitview/splitview.tsx
@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { SplitviewApi } from '../../api/component.api';
-import { SplitviewPanelApi } from '../../api/splitviewPanelApi';
 import {
+    SplitviewApi,
+    SplitviewPanelApi,
     ISplitviewComponent,
     SplitviewComponent,
-} from '../../splitview/splitviewComponent';
-import { Orientation } from '../../splitview/core/splitview';
+    Orientation,
+    watchElementResize,
+} from 'dockview-core';
 import { usePortalsLifecycle } from '../react';
 import { PanelCollection, PanelParameters } from '../types';
 import { ReactPanelView } from './view';
-import { watchElementResize } from '../../dom';
 
 export interface SplitviewReadyEvent {
     api: SplitviewApi;
diff --git a/packages/dockview/src/react/splitview/view.ts b/packages/dockview/src/splitview/view.ts
similarity index 81%
rename from packages/dockview/src/react/splitview/view.ts
rename to packages/dockview/src/splitview/view.ts
index 9c7c66450..51a7aa53b 100644
--- a/packages/dockview/src/react/splitview/view.ts
+++ b/packages/dockview/src/splitview/view.ts
@@ -1,6 +1,8 @@
-import { SplitviewApi } from '../../api/component.api';
-import { PanelViewInitParameters } from '../../splitview/core/options';
-import { SplitviewPanel } from '../../splitview/splitviewPanel';
+import {
+    SplitviewApi,
+    PanelViewInitParameters,
+    SplitviewPanel,
+} from 'dockview-core';
 import { ReactPart, ReactPortalStore } from '../react';
 import { ISplitviewPanelProps } from './splitview';
 
diff --git a/packages/dockview/src/react/svg.tsx b/packages/dockview/src/svg.tsx
similarity index 100%
rename from packages/dockview/src/react/svg.tsx
rename to packages/dockview/src/svg.tsx
diff --git a/packages/dockview/src/types.ts b/packages/dockview/src/types.ts
index fbe4b5799..d5b7b07a3 100644
--- a/packages/dockview/src/types.ts
+++ b/packages/dockview/src/types.ts
@@ -1,13 +1,9 @@
-export interface Constructor<T> {
-    new (): T;
+import * as React from 'react';
+
+export interface PanelCollection<T extends object> {
+    [name: string]: React.FunctionComponent<T>;
 }
 
-export interface FrameworkFactory<T> {
-    createComponent: (id: string, componentId: string, component: any) => T;
-}
-
-export type FunctionOrValue<T> = (() => T) | T;
-
-export function isBooleanValue(value: any): value is boolean {
-    return typeof value === 'boolean';
+export interface PanelParameters<T extends {} = Record<string, any>> {
+    params: T;
 }

From e2049edab7aef8f21fc0a05829c80dac5d26ebd4 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Mon, 27 Feb 2023 16:59:08 +0800
Subject: [PATCH 5/7] chore: adjust sonar projects

---
 sonar-project.properties | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/sonar-project.properties b/sonar-project.properties
index 9ceed39eb..92decfee7 100644
--- a/sonar-project.properties
+++ b/sonar-project.properties
@@ -1,9 +1,9 @@
 sonar.projectKey=mathuo_dockview
 sonar.organization=dockview
 
-sonar.inclusions=packages/dockview/src/**/*
-sonar.exclusions=packages/dockview/src/__tests__/**
-sonar.tests=packages/dockview/src/__tests__
+sonar.inclusions=packages/dockview/src/**/*,packages/dockview-core/src/**/*
+sonar.exclusions=packages/dockview/src/__tests__/**,packages/dockview-core/src/__tests__/**
+sonar.tests=packages/dockview/src/__tests__,packages/dockview-core/src/__tests__
 
 sonar.testExecutionReportPaths=test-report.xml
 sonar.javascript.lcov.reportPaths=coverage/lcov.info

From a9b44d964193d7cf4ea13c73412bdc0a78bc37f4 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Mon, 27 Feb 2023 17:01:36 +0800
Subject: [PATCH 6/7] chore: build fixes

---
 package.json                                  |   4 +-
 packages/dockview-core/jest.config.js         |  14 +--
 packages/dockview-core/package.json           |   9 +-
 packages/dockview-core/rollup.config.js       |  70 +++--------
 .../scripts/rollupEntryTarget-core.ts         |   2 -
 ...ryTarget-react.ts => rollupEntryTarget.ts} |   0
 .../dockview/dockviewComponent.spec.ts        |  28 ++---
 .../gridview/gridviewComponent.spec.ts        |   3 +-
 packages/dockview-core/src/core.ts            |  78 ------------
 .../src/dockview/defaultGroupPanelView.ts     |   2 +-
 .../src/dockview/deserializer.ts              |  73 ++++++++++-
 .../src/dockview/dockviewComponent.ts         |   2 +-
 .../dockview-core/src/dockview/validation.ts  | 117 ------------------
 .../dockview-core/src/groupview/groupview.ts  |   2 +-
 packages/dockview-core/src/index.ts           |  87 ++++++++++++-
 .../src/paneview/draggablePaneviewPanel.ts    |   2 +-
 packages/dockview-core/test.html              |  87 -------------
 packages/dockview/package.json                |   1 +
 packages/dockview/rollup.config.js            |  79 ++++--------
 .../dockview/scripts/publishExperimental.js   |   1 +
 .../scripts/rollupEntryTarget-core.ts         |   2 -
 ...ryTarget-react.ts => rollupEntryTarget.ts} |   0
 .../react/dockview/dockview.spec.tsx          |   6 +-
 .../dockview/groupControlsRenderer.spec.ts    |   8 +-
 .../react/dockview/reactHeaderPart.spec.ts    |   4 +-
 .../react/gridview/gridview.spec.tsx          |   7 +-
 .../react/paneview/paneview.spec.tsx          |   6 +-
 .../src/__tests__/react/react.spec.tsx        |   2 +-
 .../react/splitview/splitview.spec.tsx        |   7 +-
 packages/dockview/src/deserializer.ts         |  77 ------------
 packages/dockview/src/dockview/dockview.tsx   |   4 +-
 .../src/dockview/groupControlsRenderer.ts     |   8 +-
 .../dockview/src/dockview/reactContentPart.ts |   6 +-
 .../dockview/src/dockview/reactHeaderPart.ts  |   1 -
 packages/dockview/src/react.ts                |  20 +--
 packages/dockview/tsconfig.json               |   5 +-
 yarn.lock                                     |  34 +++++
 37 files changed, 307 insertions(+), 551 deletions(-)
 delete mode 100644 packages/dockview-core/scripts/rollupEntryTarget-core.ts
 rename packages/dockview-core/scripts/{rollupEntryTarget-react.ts => rollupEntryTarget.ts} (100%)
 delete mode 100644 packages/dockview-core/src/core.ts
 delete mode 100644 packages/dockview-core/src/dockview/validation.ts
 delete mode 100644 packages/dockview-core/test.html
 delete mode 100644 packages/dockview/scripts/rollupEntryTarget-core.ts
 rename packages/dockview/scripts/{rollupEntryTarget-react.ts => rollupEntryTarget.ts} (100%)
 delete mode 100644 packages/dockview/src/deserializer.ts

diff --git a/package.json b/package.json
index de2220b07..5c7449fae 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,8 @@
     "test": "jest",
     "lint": "eslint packages/**/src/** --ext .ts,.tsx,.js,.jsx",
     "package": "node scripts/package.js",
-    "package-all": "lerna run docs --scope dockview && node scripts/package.js",
-    "build": "lerna run build --scope dockview",
+    "package-all": "lerna run docs --scope '{dockview-core,dockview}' && node scripts/package.js",
+    "build": "lerna run build --scope '{dockview-core,dockview}'",
     "clean": "lerna run clean",
     "bootstrap": "lerna bootstrap",
     "test:cov": "jest --coverage",
diff --git a/packages/dockview-core/jest.config.js b/packages/dockview-core/jest.config.js
index e72f97d2c..295bffeda 100644
--- a/packages/dockview-core/jest.config.js
+++ b/packages/dockview-core/jest.config.js
@@ -6,22 +6,22 @@ console.log('loaded');
 
 module.exports = {
     ...baseConfig,
-    roots: ['<rootDir>/packages/dockview'],
-    modulePaths: ['<rootDir>/packages/dockview/src'],
+    roots: ['<rootDir>/packages/dockview-core'],
+    modulePaths: ['<rootDir>/packages/dockview-core/src'],
     displayName: { name, color: 'blue' },
     rootDir: '../../',
     collectCoverageFrom: [
-        '<rootDir>/packages/dockview/src/**/*.{js,jsx,ts,tsx}',
+        '<rootDir>/packages/dockview-core/src/**/*.{js,jsx,ts,tsx}',
     ],
     setupFiles: [
-        '<rootDir>/packages/dockview/src/__tests__/__mocks__/resizeObserver.js',
+        '<rootDir>/packages/dockview-core/src/__tests__/__mocks__/resizeObserver.js',
     ],
     coveragePathIgnorePatterns: ['/node_modules/'],
     modulePathIgnorePatterns: [
-        '<rootDir>/packages/dockview/src/__tests__/__mocks__',
-        '<rootDir>/packages/dockview/src/__tests__/__test_utils__',
+        '<rootDir>/packages/dockview-core/src/__tests__/__mocks__',
+        '<rootDir>/packages/dockview-core/src/__tests__/__test_utils__',
     ],
-    coverageDirectory: '<rootDir>/packages/dockview/coverage/',
+    coverageDirectory: '<rootDir>/packages/dockview-core/coverage/',
     testResultsProcessor: 'jest-sonar-reporter',
     testEnvironment: 'jsdom',
 };
diff --git a/packages/dockview-core/package.json b/packages/dockview-core/package.json
index 0a04d23cc..3c6d9aed7 100644
--- a/packages/dockview-core/package.json
+++ b/packages/dockview-core/package.json
@@ -24,8 +24,8 @@
     "docs": "typedoc",
     "prepack": "npm run rebuild && npm run test",
     "rebuild": "npm run clean && npm run build",
-    "test": "cross-env ../../node_modules/.bin/jest --selectProjects dockview",
-    "test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview --coverage",
+    "test": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-core",
+    "test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-core --coverage",
     "dev-publish": "node ./scripts/publishExperimental.js"
   },
   "files": [
@@ -57,13 +57,8 @@
   "license": "MIT",
   "devDependencies": {
     "@rollup/plugin-typescript": "^11.0.0",
-    "@testing-library/react": "^13.4.0",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
     "cross-env": "^7.0.3",
     "postcss": "^8.4.21",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "rimraf": "^4.1.2",
     "rollup": "^3.15.0",
     "rollup-plugin-postcss": "^4.0.2",
diff --git a/packages/dockview-core/rollup.config.js b/packages/dockview-core/rollup.config.js
index 9abce3a84..db87a8a18 100644
--- a/packages/dockview-core/rollup.config.js
+++ b/packages/dockview-core/rollup.config.js
@@ -6,19 +6,13 @@ const { terser } = require('rollup-plugin-terser');
 const postcss = require('rollup-plugin-postcss');
 
 const { name, version, homepage, license } = require('./package.json');
-const reactMain = join(__dirname, './scripts/rollupEntryTarget-react.ts');
-const reactMainNoStyles = join(__dirname, './src/index.ts');
-const main = join(__dirname, './scripts/rollupEntryTarget-core.ts');
-const mainNoStyles = join(__dirname, './src/core.ts');
+const main = join(__dirname, './scripts/rollupEntryTarget.ts');
+const mainNoStyles = join(__dirname, './src/index.ts');
 const outputDir = join(__dirname, 'dist');
 
-function outputFile(format, isMinified, withStyles, isReact) {
+function outputFile(format, isMinified, withStyles) {
     let filename = join(outputDir, name);
 
-    if (isReact) {
-        filename += '.react';
-    }
-
     if (format !== 'umd') {
         filename += `.${format}`;
     }
@@ -33,13 +27,13 @@ function outputFile(format, isMinified, withStyles, isReact) {
 }
 
 function getInput(options) {
-    const { withStyles, isReact } = options;
+    const { withStyles } = options;
 
     if (withStyles) {
-        return isReact ? reactMain : main;
+        return main;
     }
 
-    return isReact ? reactMainNoStyles : mainNoStyles;
+    return mainNoStyles;
 }
 
 function createBundle(format, options) {
@@ -84,58 +78,28 @@ function createBundle(format, options) {
         output['name'] = name;
     }
 
-    if (isReact) {
-        // TODO: should be conditional on whether user wants the React wrappers
-        external.push('react', 'react-dom');
-
-        if (format === 'umd') {
-            // TODO: should be conditional on whether user wants the React wrappers
-            output.globals['react'] = 'React';
-            output.globals['react-dom'] = 'ReactDOM';
-        }
-    }
-
     return {
         input,
         output,
         plugins,
         external,
-        // manualChunks(id) {
-        //     if (id.includes('src/react/')) {
-        //         return 'react';
-        //     }
-        // },
     };
 }
 
 module.exports = [
     // amd
-    createBundle('amd', {
-        withStyles: false,
-        isMinified: false,
-        isReact: true,
-    }),
-    createBundle('amd', { withStyles: true, isMinified: false, isReact: true }),
-    createBundle('amd', { withStyles: false, isMinified: true, isReact: true }),
-    createBundle('amd', { withStyles: true, isMinified: true, isReact: true }),
+    createBundle('amd', { withStyles: false, isMinified: false }),
+    createBundle('amd', { withStyles: true, isMinified: false }),
+    createBundle('amd', { withStyles: false, isMinified: true }),
+    createBundle('amd', { withStyles: true, isMinified: true }),
     // umd
-    createBundle('umd', {
-        withStyles: false,
-        isMinified: false,
-        isReact: true,
-    }),
-    createBundle('umd', { withStyles: true, isMinified: false, isReact: true }),
-    createBundle('umd', { withStyles: false, isMinified: true, isReact: true }),
-    createBundle('umd', { withStyles: true, isMinified: true, isReact: true }),
+    createBundle('umd', { withStyles: false, isMinified: false }),
+    createBundle('umd', { withStyles: true, isMinified: false }),
+    createBundle('umd', { withStyles: false, isMinified: true }),
+    createBundle('umd', { withStyles: true, isMinified: true }),
     // cjs
-    createBundle('cjs', { withStyles: true, isMinified: false, isReact: true }),
+    createBundle('cjs', { withStyles: true, isMinified: false }),
     // esm
-    createBundle('esm', { withStyles: true, isMinified: false, isReact: true }),
-    createBundle('esm', { withStyles: true, isMinified: true, isReact: true }),
-    // core bundles (no-react)
-    createBundle('umd', {
-        withStyles: true,
-        isMinified: false,
-        isReact: false,
-    }),
+    createBundle('esm', { withStyles: true, isMinified: false }),
+    createBundle('esm', { withStyles: true, isMinified: true }),
 ];
diff --git a/packages/dockview-core/scripts/rollupEntryTarget-core.ts b/packages/dockview-core/scripts/rollupEntryTarget-core.ts
deleted file mode 100644
index fc6590960..000000000
--- a/packages/dockview-core/scripts/rollupEntryTarget-core.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import '../dist/styles/dockview.css';
-export * from '../src/core';
diff --git a/packages/dockview-core/scripts/rollupEntryTarget-react.ts b/packages/dockview-core/scripts/rollupEntryTarget.ts
similarity index 100%
rename from packages/dockview-core/scripts/rollupEntryTarget-react.ts
rename to packages/dockview-core/scripts/rollupEntryTarget.ts
diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
index 5eb0806b5..7e04afc83 100644
--- a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
+++ b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
@@ -6,7 +6,6 @@ import {
 } from '../../groupview/types';
 import { PanelUpdateEvent } from '../../panel/types';
 import { Orientation } from '../../splitview/core/splitview';
-import { ReactPanelDeserialzier } from '../../react/deserializer';
 import { GroupPanel } from '../../groupview/groupviewPanel';
 import { CompositeDisposable } from '../../lifecycle';
 import {
@@ -22,6 +21,7 @@ import {
     DockviewPanelApi,
     DockviewPanelApiImpl,
 } from '../../api/dockviewPanelApi';
+import { DefaultDockviewDeserialzier } from '../../dockview/deserializer';
 
 class PanelContentPartTest implements IContentRenderer {
     element: HTMLElement = document.createElement('div');
@@ -512,7 +512,7 @@ describe('dockviewComponent', () => {
     test('serialization', () => {
         dockview.layout(1000, 1000);
 
-        dockview.deserializer = new ReactPanelDeserialzier(dockview);
+        dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
         dockview.fromJSON({
             activeGroup: 'group-1',
             grid: {
@@ -1038,7 +1038,7 @@ describe('dockviewComponent', () => {
             fromJSON: (panelData: GroupviewPanelState): IDockviewPanel => {
                 return new TestGroupPanel(
                     panelData.id,
-                    panelData.title,
+                    panelData.title || '',
                     dockview
                 );
             },
@@ -1427,7 +1427,7 @@ describe('dockviewComponent', () => {
                 default: PanelContentPartTest,
             },
         });
-        dockview.deserializer = new ReactPanelDeserialzier(dockview);
+        dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
 
         dockview.layout(500, 1000);
 
@@ -1552,7 +1552,7 @@ describe('dockviewComponent', () => {
             })
         );
 
-        dockview.deserializer = new ReactPanelDeserialzier(dockview);
+        dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
         dockview.fromJSON({
             activeGroup: 'group-1',
             grid: {
@@ -1686,7 +1686,7 @@ describe('dockviewComponent', () => {
                 default: PanelContentPartTest,
             },
         });
-        dockview.deserializer = new ReactPanelDeserialzier(dockview);
+        dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
         dockview.fromJSON({
             activeGroup: 'group-1',
             grid: {
@@ -1778,7 +1778,7 @@ describe('dockviewComponent', () => {
                 test_tab_id: PanelTabPartTest,
             },
         });
-        dockview.deserializer = new ReactPanelDeserialzier(dockview);
+        dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
         dockview.fromJSON({
             activeGroup: 'group-1',
             grid: {
@@ -1890,7 +1890,7 @@ describe('dockviewComponent', () => {
                 test_tab_id: PanelTabPartTest,
             },
         });
-        dockview.deserializer = new ReactPanelDeserialzier(dockview);
+        dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
         dockview.fromJSON({
             activeGroup: 'group-1',
             grid: {
@@ -1980,7 +1980,7 @@ describe('dockviewComponent', () => {
             },
             orientation: Orientation.HORIZONTAL,
         });
-        dockview.deserializer = new ReactPanelDeserialzier(dockview);
+        dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
 
         expect(dockview.orientation).toBe(Orientation.HORIZONTAL);
 
@@ -2086,7 +2086,7 @@ describe('dockviewComponent', () => {
             },
             orientation: Orientation.HORIZONTAL,
         });
-        dockview.deserializer = new ReactPanelDeserialzier(dockview);
+        dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
 
         expect(dockview.orientation).toBe(Orientation.HORIZONTAL);
 
@@ -2227,7 +2227,7 @@ describe('dockviewComponent', () => {
             },
             orientation: Orientation.HORIZONTAL,
         });
-        dockview.deserializer = new ReactPanelDeserialzier(dockview);
+        dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
 
         expect(dockview.orientation).toBe(Orientation.HORIZONTAL);
 
@@ -2355,7 +2355,7 @@ describe('dockviewComponent', () => {
             },
             orientation: Orientation.HORIZONTAL,
         });
-        dockview.deserializer = new ReactPanelDeserialzier(dockview);
+        dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
 
         expect(dockview.groups.length).toBe(0);
     });
@@ -2372,7 +2372,7 @@ describe('dockviewComponent', () => {
             },
             orientation: Orientation.HORIZONTAL,
         });
-        dockview.deserializer = new ReactPanelDeserialzier(dockview);
+        dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
 
         expect(dockview.groups.length).toBe(0);
 
@@ -2412,7 +2412,7 @@ describe('dockviewComponent', () => {
             },
             orientation: Orientation.HORIZONTAL,
         });
-        dockview.deserializer = new ReactPanelDeserialzier(dockview);
+        dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
 
         expect(JSON.parse(JSON.stringify(dockview.toJSON()))).toEqual({
             grid: {
diff --git a/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts b/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts
index 65f61b41f..ab17a0a15 100644
--- a/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts
+++ b/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts
@@ -1,4 +1,3 @@
-import { GridviewPanelApiImpl } from '../../api/gridviewPanelApi';
 import { GridviewComponent } from '../../gridview/gridviewComponent';
 import { GridviewPanel } from '../../gridview/gridviewPanel';
 import { CompositeDisposable } from '../../lifecycle';
@@ -7,7 +6,7 @@ import { Orientation } from '../../splitview/core/splitview';
 
 class TestGridview extends GridviewPanel {
     constructor(id: string, componentName: string) {
-        super(id, componentName, new GridviewPanelApiImpl(id));
+        super(id, componentName);
 
         this.api.initialize(this);
 
diff --git a/packages/dockview-core/src/core.ts b/packages/dockview-core/src/core.ts
deleted file mode 100644
index 494755bd0..000000000
--- a/packages/dockview-core/src/core.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-export * from './hostedContainer';
-
-export * from './dnd/dataTransfer';
-
-export * from './math';
-export * from './dom';
-export * from './events';
-export * from './lifecycle';
-
-export * from './panel/types';
-export * from './panel/componentFactory';
-
-export * from './splitview/core/splitview';
-export * from './splitview/core/options';
-
-export * from './paneview/paneview';
-export * from './gridview/gridview';
-export * from './groupview/groupview';
-export * from './gridview/baseComponentGridview';
-
-export * from './paneview/draggablePaneviewPanel';
-
-export * from './groupview/panel/content';
-export * from './groupview/tab';
-export * from './groupview/dnd';
-export * from './groupview/types';
-export * from './groupview/groupviewPanel';
-
-export * from './dockview/options';
-export * from './dockview/dockviewPanel';
-export * from './dockview/components/tab/defaultTab';
-export * from './dockview/deserializer';
-export * from './dockview/defaultGroupPanelView';
-
-export * from './dockview/dockviewComponent';
-export * from './gridview/gridviewComponent';
-export * from './splitview/splitviewComponent';
-export * from './paneview/paneviewComponent';
-export { PaneviewComponentOptions } from './paneview/options';
-
-export * from './gridview/gridviewPanel';
-export * from './splitview/splitviewPanel';
-export * from './paneview/paneviewPanel';
-export * from './groupview/types';
-
-export { Event } from './events';
-export { IDisposable } from './lifecycle';
-export {
-    Position,
-    positionToDirection,
-    directionToPosition,
-} from './dnd/droptarget';
-export {
-    FocusEvent,
-    PanelDimensionChangeEvent,
-    VisibilityEvent,
-    ActiveEvent,
-    PanelApi,
-} from './api/panelApi';
-export {
-    SizeEvent,
-    GridviewPanelApi,
-    GridConstraintChangeEvent,
-} from './api/gridviewPanelApi';
-export { TitleEvent, DockviewPanelApi } from './api/dockviewPanelApi';
-export {
-    PanelSizeEvent,
-    PanelConstraintChangeEvent,
-    SplitviewPanelApi,
-} from './api/splitviewPanelApi';
-export { ExpansionEvent, PaneviewPanelApi } from './api/paneviewPanelApi';
-export {
-    CommonApi,
-    SplitviewApi,
-    PaneviewApi,
-    GridviewApi,
-    DockviewApi,
-} from './api/component.api';
diff --git a/packages/dockview-core/src/dockview/defaultGroupPanelView.ts b/packages/dockview-core/src/dockview/defaultGroupPanelView.ts
index 9bcf97815..4a7406a81 100644
--- a/packages/dockview-core/src/dockview/defaultGroupPanelView.ts
+++ b/packages/dockview-core/src/dockview/defaultGroupPanelView.ts
@@ -3,10 +3,10 @@ import {
     GroupPanelPartInitParameters,
     IContentRenderer,
     ITabRenderer,
+    GroupPanelUpdateEvent,
 } from '../groupview/types';
 import { GroupPanel } from '../groupview/groupviewPanel';
 import { IDisposable } from '../lifecycle';
-import { GroupPanelUpdateEvent } from '../groupview/types';
 
 export interface IGroupPanelView extends IDisposable {
     readonly content: IContentRenderer;
diff --git a/packages/dockview-core/src/dockview/deserializer.ts b/packages/dockview-core/src/dockview/deserializer.ts
index becac00aa..ef1a5b400 100644
--- a/packages/dockview-core/src/dockview/deserializer.ts
+++ b/packages/dockview-core/src/dockview/deserializer.ts
@@ -1,7 +1,76 @@
-import { GroupviewPanelState } from '../groupview/types';
+import { GroupviewPanelState, ITabRenderer } from '../groupview/types';
 import { GroupPanel } from '../groupview/groupviewPanel';
-import { IDockviewPanel } from './dockviewPanel';
+import { DockviewPanel, IDockviewPanel } from './dockviewPanel';
+import { DockviewComponent } from './dockviewComponent';
+import { createComponent } from '../panel/componentFactory';
+import { DefaultTab } from './components/tab/defaultTab';
+import { DefaultGroupPanelView } from './defaultGroupPanelView';
+import { DockviewApi } from '../api/component.api';
 
 export interface IPanelDeserializer {
     fromJSON(panelData: GroupviewPanelState, group: GroupPanel): IDockviewPanel;
 }
+
+export class DefaultDockviewDeserialzier implements IPanelDeserializer {
+    constructor(private readonly layout: DockviewComponent) {}
+
+    public fromJSON(
+        panelData: GroupviewPanelState,
+        group: GroupPanel
+    ): IDockviewPanel {
+        const panelId = panelData.id;
+        const params = panelData.params;
+        const title = panelData.title;
+        const viewData = panelData.view;
+
+        let tab: ITabRenderer;
+
+        if (viewData.tab?.id) {
+            tab = createComponent(
+                viewData.tab.id,
+                viewData.tab.id,
+                this.layout.options.tabComponents,
+                this.layout.options.frameworkTabComponents,
+                this.layout.options.frameworkComponentFactory?.tab,
+                () => new DefaultTab()
+            );
+        } else if (this.layout.options.defaultTabComponent) {
+            tab = createComponent(
+                this.layout.options.defaultTabComponent,
+                this.layout.options.defaultTabComponent,
+                this.layout.options.tabComponents,
+                this.layout.options.frameworkTabComponents,
+                this.layout.options.frameworkComponentFactory?.tab,
+                () => new DefaultTab()
+            );
+        } else {
+            tab = new DefaultTab();
+        }
+
+        const view = new DefaultGroupPanelView({
+            content: createComponent(
+                viewData.content.id,
+                viewData.content.id,
+                this.layout.options.components,
+                this.layout.options.frameworkComponents,
+                this.layout.options.frameworkComponentFactory?.content
+            ),
+            tab,
+        });
+
+        const panel = new DockviewPanel(
+            panelId,
+            this.layout,
+            new DockviewApi(this.layout),
+            group
+        );
+
+        panel.init({
+            view,
+            title,
+            params: params || {},
+        });
+
+        return panel;
+    }
+}
diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts
index f21ecb1d7..f84353bfd 100644
--- a/packages/dockview-core/src/dockview/dockviewComponent.ts
+++ b/packages/dockview-core/src/dockview/dockviewComponent.ts
@@ -6,7 +6,6 @@ import {
 } from '../gridview/gridview';
 import { directionToPosition, Droptarget, Position } from '../dnd/droptarget';
 import { tail, sequenceEquals } from '../array';
-import { GroupviewPanelState } from '../groupview/types';
 import { DockviewPanel, IDockviewPanel } from './dockviewPanel';
 import { CompositeDisposable } from '../lifecycle';
 import { Event, Emitter } from '../events';
@@ -15,6 +14,7 @@ import {
     IContentRenderer,
     ITabRenderer,
     IWatermarkRenderer,
+    GroupviewPanelState,
 } from '../groupview/types';
 import { sequentialNumberGenerator } from '../math';
 import { IPanelDeserializer } from './deserializer';
diff --git a/packages/dockview-core/src/dockview/validation.ts b/packages/dockview-core/src/dockview/validation.ts
deleted file mode 100644
index f0a11f155..000000000
--- a/packages/dockview-core/src/dockview/validation.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import { SerializedGridObject } from '../gridview/gridview';
-import { GroupPanelViewState } from '../groupview/groupview';
-import { GroupviewPanelState } from '../groupview/types';
-import { Orientation } from '../splitview/core/splitview';
-import { SerializedDockview } from './dockviewComponent';
-
-function validateGroupViewPanelState(value: GroupviewPanelState): void {
-    if (typeof value.id !== 'string') {
-        throw new Error('invalid layout');
-    }
-
-    if (typeof value.title !== 'string') {
-        throw new Error('invalid layout');
-    }
-
-    if (value.params !== undefined && typeof value.params !== 'object') {
-        throw new Error('invalid layout');
-    }
-}
-
-function validateGroupPanelViewState(value: GroupPanelViewState): void {
-    if (typeof value.id !== 'string') {
-        throw new Error('invalid layout');
-    }
-    if (value.locked !== undefined && typeof value.locked !== 'boolean') {
-        throw new Error('invalid layout');
-    }
-    if (value.hideHeader !== undefined && typeof value.locked !== 'boolean') {
-        throw new Error('invalid layout');
-    }
-    if (
-        value.activeView !== undefined &&
-        typeof value.activeView !== 'string'
-    ) {
-        throw new Error('invalid layout');
-    }
-
-    if (!Array.isArray(value.views)) {
-        throw new Error('invalid layout');
-    }
-
-    for (const child of value.views) {
-        if (typeof child !== 'string') {
-            if (!Array.isArray(value.views)) {
-                throw new Error('invalid layout');
-            }
-        }
-    }
-}
-
-function validateSerializedGridObject(
-    value: SerializedGridObject<GroupPanelViewState>
-): void {
-    if (value.size !== undefined && typeof value.size !== 'number') {
-        throw new Error('invalid layout');
-    }
-
-    if (value.visible !== undefined && typeof value.size !== 'boolean') {
-        throw new Error('invalid layout');
-    }
-
-    if (value.type !== 'branch' && value.type !== 'leaf') {
-        throw new Error('invalid layout');
-    }
-
-    if (Array.isArray(value.data)) {
-        for (const child of value.data) {
-            validateSerializedGridObject(child);
-        }
-    } else {
-        validateGroupPanelViewState(value.data);
-    }
-}
-
-export function validateSerializedDockview(data: SerializedDockview): void {
-    if (typeof data !== 'object') {
-        throw new Error('invalid layout');
-    }
-
-    const { grid, panels, options, activeGroup } = data;
-
-    if (typeof grid !== 'object') {
-        throw new Error('invalid layout');
-    }
-
-    if (typeof grid.height !== 'number') {
-        throw new Error('invalid layout');
-    }
-
-    if (typeof grid.width !== 'number') {
-        throw new Error('invalid layout');
-    }
-
-    if (
-        grid.orientation !== Orientation.HORIZONTAL &&
-        grid.orientation !== Orientation.VERTICAL
-    ) {
-        throw new Error('invalid layout');
-    }
-
-    validateSerializedGridObject(grid.root);
-
-    if (
-        data.activeGroup !== undefined &&
-        typeof data.activeGroup !== 'string'
-    ) {
-        throw new Error('invalid layout');
-    }
-
-    if (typeof data.panels !== 'object') {
-        throw new Error('invalid layout');
-    }
-
-    for (const value of Object.values(data.panels)) {
-        validateGroupViewPanelState(value);
-    }
-}
diff --git a/packages/dockview-core/src/groupview/groupview.ts b/packages/dockview-core/src/groupview/groupview.ts
index 30bc889d2..7e34326c0 100644
--- a/packages/dockview-core/src/groupview/groupview.ts
+++ b/packages/dockview-core/src/groupview/groupview.ts
@@ -14,7 +14,7 @@ import { IWatermarkRenderer } from './types';
 import { GroupPanel } from './groupviewPanel';
 import { DockviewDropTargets } from './dnd';
 import { IDockviewPanel } from '../dockview/dockviewPanel';
-import { IGroupControlRenderer } from '../core';
+import { IGroupControlRenderer } from '../dockview/options';
 
 export interface DndService {
     canDisplayOverlay(
diff --git a/packages/dockview-core/src/index.ts b/packages/dockview-core/src/index.ts
index 2621031ac..75fa21228 100644
--- a/packages/dockview-core/src/index.ts
+++ b/packages/dockview-core/src/index.ts
@@ -1,2 +1,85 @@
-export * from './core';
-// export * from './react'; // TODO: should be conditional on whether user wants the React wrappers
+export * from './hostedContainer';
+
+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.
+ */
+export { Emitter as DockviewEmitter, Event as DockviewEvent } from './events';
+export {
+    IDisposable as IDockviewDisposable,
+    MutableDisposable as DockviewMutableDisposable,
+    CompositeDisposable as DockviewCompositeDisposable,
+} from './lifecycle';
+
+export * from './panel/types';
+export * from './panel/componentFactory';
+
+export * from './splitview/core/splitview';
+export * from './splitview/core/options';
+
+export * from './paneview/paneview';
+export * from './gridview/gridview';
+export * from './groupview/groupview';
+export * from './gridview/baseComponentGridview';
+
+export * from './paneview/draggablePaneviewPanel';
+
+export * from './groupview/panel/content';
+export * from './groupview/tab';
+export * from './groupview/dnd';
+export * from './groupview/types';
+export * from './groupview/groupviewPanel';
+
+export * from './dockview/options';
+export * from './dockview/dockviewPanel';
+export * from './dockview/components/tab/defaultTab';
+export * from './dockview/deserializer';
+export * from './dockview/defaultGroupPanelView';
+
+export * from './dockview/dockviewComponent';
+export * from './gridview/gridviewComponent';
+export * from './splitview/splitviewComponent';
+export * from './paneview/paneviewComponent';
+export { PaneviewComponentOptions } from './paneview/options';
+
+export * from './gridview/gridviewPanel';
+export * from './splitview/splitviewPanel';
+export * from './paneview/paneviewPanel';
+export * from './groupview/types';
+
+export { Event } from './events';
+export {
+    Position,
+    positionToDirection,
+    directionToPosition,
+} from './dnd/droptarget';
+export {
+    FocusEvent,
+    PanelDimensionChangeEvent,
+    VisibilityEvent,
+    ActiveEvent,
+    PanelApi,
+} from './api/panelApi';
+export {
+    SizeEvent,
+    GridviewPanelApi,
+    GridConstraintChangeEvent,
+} from './api/gridviewPanelApi';
+export { TitleEvent, DockviewPanelApi } from './api/dockviewPanelApi';
+export {
+    PanelSizeEvent,
+    PanelConstraintChangeEvent,
+    SplitviewPanelApi,
+} from './api/splitviewPanelApi';
+export { ExpansionEvent, PaneviewPanelApi } from './api/paneviewPanelApi';
+export {
+    CommonApi,
+    SplitviewApi,
+    PaneviewApi,
+    GridviewApi,
+    DockviewApi,
+} from './api/component.api';
diff --git a/packages/dockview-core/src/paneview/draggablePaneviewPanel.ts b/packages/dockview-core/src/paneview/draggablePaneviewPanel.ts
index 9194456f9..ee31cd78c 100644
--- a/packages/dockview-core/src/paneview/draggablePaneviewPanel.ts
+++ b/packages/dockview-core/src/paneview/draggablePaneviewPanel.ts
@@ -1,4 +1,4 @@
-import { Paneview, PaneviewApi } from '../core';
+import { PaneviewApi } from '../api/component.api';
 import { DragHandler } from '../dnd/abstractDragHandler';
 import {
     getPaneData,
diff --git a/packages/dockview-core/test.html b/packages/dockview-core/test.html
deleted file mode 100644
index dc77f294d..000000000
--- a/packages/dockview-core/test.html
+++ /dev/null
@@ -1,87 +0,0 @@
-<!-- <!DOCTYPE html> -->
-<html>
-    <head>
-      <script src="https://unpkg.com/dockview@0.0.0-experimental-ff3f0b23-20230207/dist/dockview.js"></script>
-      <style>
-        body {
-          margin: 0;
-        }
-
-        #root {
-          height: 100vh;
-          width: 100vw;
-          background-color: grey;
-        }
-
-        #app {
-          height: 100%;
-          width: 100%;
-        }
-      </style>
-    </head>
-    <body>
-        <div id="root">
-          <div class="dockview-theme-dark" id="app">
-          </div>
-        </div>
-        <script>
-          class CustomPanel {
-            element = document.createElement('div');
-
-            constructor(id, component) {
-              this.id = id;
-              this.component = component
-            }
-
-            updateParentGroup(group, isPanelVisible) {
-              //
-            }
-
-            init(parameters) {
-              //
-            }
-
-            layout(width, height) {
-              //
-            }
-
-            update(event) {
-              //
-            }
-
-            toJSON() {
-              return {}
-            }
-
-            focus() {
-              //
-            }
-
-            dispose() {
-              //
-            }
-          }
-
-
-          const root = document.getElementById("root");
-          const app = document.getElementById("app");
-          const dockviewComponent = new dockview.DockviewComponent(app, {
-            components: {
-              myCustomPanel: CustomPanel
-            }
-          });
-
-          const observer = new ResizeObserver((entires) => {
-            const firstEntry = entires[0];
-            const { width, height } = firstEntry.contentRect;
-            dockviewComponent.layout(width, height);
-          });
-
-          observer.observe(root);
-
-          dockviewComponent.addPanel({component: 'myCustomPanel', id:'1', title: 'Panel 1'});
-          dockviewComponent.addPanel({component: 'myCustomPanel', id:'2', title: 'Panel 2'});
-
-        </script>
-    </body>
-</html>
diff --git a/packages/dockview/package.json b/packages/dockview/package.json
index 932a6e24f..a00ff296e 100644
--- a/packages/dockview/package.json
+++ b/packages/dockview/package.json
@@ -59,6 +59,7 @@
     "dockview-core": "^1.6.0"
   },
   "devDependencies": {
+    "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-typescript": "^11.0.0",
     "@testing-library/react": "^13.4.0",
     "@types/react": "^18.0.28",
diff --git a/packages/dockview/rollup.config.js b/packages/dockview/rollup.config.js
index 9abce3a84..42b354279 100644
--- a/packages/dockview/rollup.config.js
+++ b/packages/dockview/rollup.config.js
@@ -4,21 +4,16 @@ const { join } = require('path');
 const typescript = require('@rollup/plugin-typescript');
 const { terser } = require('rollup-plugin-terser');
 const postcss = require('rollup-plugin-postcss');
+const nodeResolve = require('@rollup/plugin-node-resolve');
 
 const { name, version, homepage, license } = require('./package.json');
-const reactMain = join(__dirname, './scripts/rollupEntryTarget-react.ts');
-const reactMainNoStyles = join(__dirname, './src/index.ts');
-const main = join(__dirname, './scripts/rollupEntryTarget-core.ts');
-const mainNoStyles = join(__dirname, './src/core.ts');
+const main = join(__dirname, './scripts/rollupEntryTarget.ts');
+const mainNoStyles = join(__dirname, './src/index.ts');
 const outputDir = join(__dirname, 'dist');
 
-function outputFile(format, isMinified, withStyles, isReact) {
+function outputFile(format, isMinified, withStyles) {
     let filename = join(outputDir, name);
 
-    if (isReact) {
-        filename += '.react';
-    }
-
     if (format !== 'umd') {
         filename += `.${format}`;
     }
@@ -33,19 +28,19 @@ function outputFile(format, isMinified, withStyles, isReact) {
 }
 
 function getInput(options) {
-    const { withStyles, isReact } = options;
+    const { withStyles } = options;
 
     if (withStyles) {
-        return isReact ? reactMain : main;
+        return main;
     }
 
-    return isReact ? reactMainNoStyles : mainNoStyles;
+    return mainNoStyles;
 }
 
 function createBundle(format, options) {
-    const { withStyles, isMinified, isReact } = options;
+    const { withStyles, isMinified } = options;
     const input = getInput(options);
-    const file = outputFile(format, isMinified, withStyles, isReact);
+    const file = outputFile(format, isMinified, withStyles);
 
     const external = [];
 
@@ -64,6 +59,9 @@ function createBundle(format, options) {
     };
 
     const plugins = [
+        nodeResolve({
+            include: ['node_modules/dockview-core/**'],
+        }),
         typescript({
             tsconfig: 'tsconfig.esm.json',
             incremental: false,
@@ -84,15 +82,11 @@ function createBundle(format, options) {
         output['name'] = name;
     }
 
-    if (isReact) {
-        // TODO: should be conditional on whether user wants the React wrappers
-        external.push('react', 'react-dom');
+    external.push('react', 'react-dom');
 
-        if (format === 'umd') {
-            // TODO: should be conditional on whether user wants the React wrappers
-            output.globals['react'] = 'React';
-            output.globals['react-dom'] = 'ReactDOM';
-        }
+    if (format === 'umd') {
+        output.globals['react'] = 'React';
+        output.globals['react-dom'] = 'ReactDOM';
     }
 
     return {
@@ -100,42 +94,23 @@ function createBundle(format, options) {
         output,
         plugins,
         external,
-        // manualChunks(id) {
-        //     if (id.includes('src/react/')) {
-        //         return 'react';
-        //     }
-        // },
     };
 }
 
 module.exports = [
     // amd
-    createBundle('amd', {
-        withStyles: false,
-        isMinified: false,
-        isReact: true,
-    }),
-    createBundle('amd', { withStyles: true, isMinified: false, isReact: true }),
-    createBundle('amd', { withStyles: false, isMinified: true, isReact: true }),
-    createBundle('amd', { withStyles: true, isMinified: true, isReact: true }),
+    createBundle('amd', { withStyles: false, isMinified: false }),
+    createBundle('amd', { withStyles: true, isMinified: false }),
+    createBundle('amd', { withStyles: false, isMinified: true }),
+    createBundle('amd', { withStyles: true, isMinified: true }),
     // umd
-    createBundle('umd', {
-        withStyles: false,
-        isMinified: false,
-        isReact: true,
-    }),
-    createBundle('umd', { withStyles: true, isMinified: false, isReact: true }),
-    createBundle('umd', { withStyles: false, isMinified: true, isReact: true }),
-    createBundle('umd', { withStyles: true, isMinified: true, isReact: true }),
+    createBundle('umd', { withStyles: false, isMinified: false }),
+    createBundle('umd', { withStyles: true, isMinified: false }),
+    createBundle('umd', { withStyles: false, isMinified: true }),
+    createBundle('umd', { withStyles: true, isMinified: true }),
     // cjs
-    createBundle('cjs', { withStyles: true, isMinified: false, isReact: true }),
+    createBundle('cjs', { withStyles: true, isMinified: false }),
     // esm
-    createBundle('esm', { withStyles: true, isMinified: false, isReact: true }),
-    createBundle('esm', { withStyles: true, isMinified: true, isReact: true }),
-    // core bundles (no-react)
-    createBundle('umd', {
-        withStyles: true,
-        isMinified: false,
-        isReact: false,
-    }),
+    createBundle('esm', { withStyles: true, isMinified: false }),
+    createBundle('esm', { withStyles: true, isMinified: true }),
 ];
diff --git a/packages/dockview/scripts/publishExperimental.js b/packages/dockview/scripts/publishExperimental.js
index efd1b8e2d..f6aa3dea1 100644
--- a/packages/dockview/scripts/publishExperimental.js
+++ b/packages/dockview/scripts/publishExperimental.js
@@ -49,6 +49,7 @@ function formatDate() {
 }
 
 package.version = `0.0.0-experimental-${result}-${formatDate()}`;
+package.dependencies['dockview-core'] = package.version;
 package.scripts = {};
 
 fs.writeFileSync(
diff --git a/packages/dockview/scripts/rollupEntryTarget-core.ts b/packages/dockview/scripts/rollupEntryTarget-core.ts
deleted file mode 100644
index fc6590960..000000000
--- a/packages/dockview/scripts/rollupEntryTarget-core.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import '../dist/styles/dockview.css';
-export * from '../src/core';
diff --git a/packages/dockview/scripts/rollupEntryTarget-react.ts b/packages/dockview/scripts/rollupEntryTarget.ts
similarity index 100%
rename from packages/dockview/scripts/rollupEntryTarget-react.ts
rename to packages/dockview/scripts/rollupEntryTarget.ts
diff --git a/packages/dockview/src/__tests__/react/dockview/dockview.spec.tsx b/packages/dockview/src/__tests__/react/dockview/dockview.spec.tsx
index 6913654dc..817e1ed46 100644
--- a/packages/dockview/src/__tests__/react/dockview/dockview.spec.tsx
+++ b/packages/dockview/src/__tests__/react/dockview/dockview.spec.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import { DockviewApi } from '../../../api/component.api';
+import { DockviewApi } from 'dockview-core';
 import {
     IDockviewPanelProps,
     DockviewReact,
     DockviewReadyEvent,
-} from '../../../react/dockview/dockview';
-import { PanelCollection } from '../../../react/types';
+} from '../../../dockview/dockview';
+import { PanelCollection } from '../../../types';
 import { setMockRefElement } from '../../__test_utils__/utils';
 
 describe('gridview react', () => {
diff --git a/packages/dockview/src/__tests__/react/dockview/groupControlsRenderer.spec.ts b/packages/dockview/src/__tests__/react/dockview/groupControlsRenderer.spec.ts
index 17c90e30e..4162d4a00 100644
--- a/packages/dockview/src/__tests__/react/dockview/groupControlsRenderer.spec.ts
+++ b/packages/dockview/src/__tests__/react/dockview/groupControlsRenderer.spec.ts
@@ -1,9 +1,5 @@
-import { Groupview } from '../../../groupview/groupview';
-import {
-    GroupPanel,
-    GroupviewPanelApi,
-} from '../../../groupview/groupviewPanel';
-import { ReactGroupControlsRendererPart } from '../../../react/dockview/groupControlsRenderer';
+import { GroupPanel, GroupviewPanelApi, Groupview } from 'dockview-core';
+import { ReactGroupControlsRendererPart } from '../../../dockview/groupControlsRenderer';
 
 describe('groupControlsRenderer', () => {
     test('#1', () => {
diff --git a/packages/dockview/src/__tests__/react/dockview/reactHeaderPart.spec.ts b/packages/dockview/src/__tests__/react/dockview/reactHeaderPart.spec.ts
index 0035ec362..9ba01ba0f 100644
--- a/packages/dockview/src/__tests__/react/dockview/reactHeaderPart.spec.ts
+++ b/packages/dockview/src/__tests__/react/dockview/reactHeaderPart.spec.ts
@@ -1,5 +1,5 @@
-import { DEFAULT_TAB_IDENTIFIER } from '../../../dockview/components/tab/defaultTab';
-import { ReactPanelHeaderPart } from '../../../react/dockview/reactHeaderPart';
+import { DEFAULT_TAB_IDENTIFIER } from 'dockview-core';
+import { ReactPanelHeaderPart } from '../../../dockview/reactHeaderPart';
 
 describe('reactHeaderPart', () => {
     test('that tab id is present in toJSON when not the default tab', () => {
diff --git a/packages/dockview/src/__tests__/react/gridview/gridview.spec.tsx b/packages/dockview/src/__tests__/react/gridview/gridview.spec.tsx
index b3b2088d3..8e76030d9 100644
--- a/packages/dockview/src/__tests__/react/gridview/gridview.spec.tsx
+++ b/packages/dockview/src/__tests__/react/gridview/gridview.spec.tsx
@@ -1,13 +1,12 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import { GridviewApi } from '../../../api/component.api';
+import { GridviewApi, Orientation } from 'dockview-core';
 import {
     IGridviewPanelProps,
     GridviewReact,
     GridviewReadyEvent,
-} from '../../../react/gridview/gridview';
-import { PanelCollection } from '../../../react/types';
-import { Orientation } from '../../../splitview/core/splitview';
+} from '../../../gridview/gridview';
+import { PanelCollection } from '../../../types';
 import { setMockRefElement } from '../../__test_utils__/utils';
 
 describe('gridview react', () => {
diff --git a/packages/dockview/src/__tests__/react/paneview/paneview.spec.tsx b/packages/dockview/src/__tests__/react/paneview/paneview.spec.tsx
index a3ccb1e6e..3223a8503 100644
--- a/packages/dockview/src/__tests__/react/paneview/paneview.spec.tsx
+++ b/packages/dockview/src/__tests__/react/paneview/paneview.spec.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import { PaneviewApi } from '../../../api/component.api';
+import { PaneviewApi } from 'dockview-core';
 import {
     IPaneviewPanelProps,
     PaneviewReact,
     PaneviewReadyEvent,
-} from '../../../react/paneview/paneview';
-import { PanelCollection } from '../../../react/types';
+} from '../../../paneview/paneview';
+import { PanelCollection } from '../../../types';
 import { setMockRefElement } from '../../__test_utils__/utils';
 
 describe('gridview react', () => {
diff --git a/packages/dockview/src/__tests__/react/react.spec.tsx b/packages/dockview/src/__tests__/react/react.spec.tsx
index 9be93848d..f9799c0a5 100644
--- a/packages/dockview/src/__tests__/react/react.spec.tsx
+++ b/packages/dockview/src/__tests__/react/react.spec.tsx
@@ -1,4 +1,4 @@
-import { ReactPart } from '../../react/react';
+import { ReactPart } from '../../react';
 import * as React from 'react';
 import { render, screen, act } from '@testing-library/react';
 
diff --git a/packages/dockview/src/__tests__/react/splitview/splitview.spec.tsx b/packages/dockview/src/__tests__/react/splitview/splitview.spec.tsx
index 78ebf7467..852171aa9 100644
--- a/packages/dockview/src/__tests__/react/splitview/splitview.spec.tsx
+++ b/packages/dockview/src/__tests__/react/splitview/splitview.spec.tsx
@@ -1,13 +1,12 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import { SplitviewApi } from '../../../api/component.api';
+import { SplitviewApi, Orientation } from 'dockview-core';
 import {
     ISplitviewPanelProps,
     SplitviewReact,
     SplitviewReadyEvent,
-} from '../../../react/splitview/splitview';
-import { PanelCollection } from '../../../react/types';
-import { Orientation } from '../../../splitview/core/splitview';
+} from '../../../splitview/splitview';
+import { PanelCollection } from '../../../types';
 import { setMockRefElement } from '../../__test_utils__/utils';
 
 describe('splitview react', () => {
diff --git a/packages/dockview/src/deserializer.ts b/packages/dockview/src/deserializer.ts
deleted file mode 100644
index d071fa66e..000000000
--- a/packages/dockview/src/deserializer.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import {
-    ITabRenderer,
-    GroupPanel,
-    DefaultGroupPanelView,
-    DefaultTab,
-    DockviewApi,
-    createComponent,
-    IPanelDeserializer,
-    DockviewPanel,
-    IDockviewPanel,
-    GroupviewPanelState,
-    DockviewComponent,
-} from 'dockview-core';
-
-export class ReactPanelDeserialzier implements IPanelDeserializer {
-    constructor(private readonly layout: DockviewComponent) {}
-
-    public fromJSON(
-        panelData: GroupviewPanelState,
-        group: GroupPanel
-    ): IDockviewPanel {
-        const panelId = panelData.id;
-        const params = panelData.params;
-        const title = panelData.title;
-        const viewData = panelData.view;
-
-        let tab: ITabRenderer;
-
-        if (viewData.tab?.id) {
-            tab = createComponent(
-                viewData.tab.id,
-                viewData.tab.id,
-                this.layout.options.tabComponents,
-                this.layout.options.frameworkTabComponents,
-                this.layout.options.frameworkComponentFactory?.tab,
-                () => new DefaultTab()
-            );
-        } else if (this.layout.options.defaultTabComponent) {
-            tab = createComponent(
-                this.layout.options.defaultTabComponent,
-                this.layout.options.defaultTabComponent,
-                this.layout.options.tabComponents,
-                this.layout.options.frameworkTabComponents,
-                this.layout.options.frameworkComponentFactory?.tab,
-                () => new DefaultTab()
-            );
-        } else {
-            tab = new DefaultTab();
-        }
-
-        const view = new DefaultGroupPanelView({
-            content: createComponent(
-                viewData.content.id,
-                viewData.content.id,
-                this.layout.options.components,
-                this.layout.options.frameworkComponents,
-                this.layout.options.frameworkComponentFactory?.content
-            ),
-            tab,
-        });
-
-        const panel = new DockviewPanel(
-            panelId,
-            this.layout,
-            new DockviewApi(this.layout),
-            group
-        );
-
-        panel.init({
-            view,
-            title,
-            params: params || {},
-        });
-
-        return panel;
-    }
-}
diff --git a/packages/dockview/src/dockview/dockview.tsx b/packages/dockview/src/dockview/dockview.tsx
index 35c8b7232..8c32bc717 100644
--- a/packages/dockview/src/dockview/dockview.tsx
+++ b/packages/dockview/src/dockview/dockview.tsx
@@ -12,10 +12,10 @@ import {
     watchElementResize,
     GroupPanel,
     DEFAULT_TAB_IDENTIFIER,
+    DefaultDockviewDeserialzier,
 } from 'dockview-core';
 import { ReactPanelContentPart } from './reactContentPart';
 import { ReactPanelHeaderPart } from './reactHeaderPart';
-import { ReactPanelDeserialzier } from '../deserializer';
 
 import { ReactPortalStore, usePortalsLifecycle } from '../react';
 import { IWatermarkPanelProps, ReactWatermarkPart } from './reactWatermarkPart';
@@ -166,7 +166,7 @@ export const DockviewReact = React.forwardRef(
             });
 
             domRef.current?.appendChild(dockview.element);
-            dockview.deserializer = new ReactPanelDeserialzier(dockview);
+            dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
 
             const { clientWidth, clientHeight } = domRef.current!;
             dockview.layout(clientWidth, clientHeight);
diff --git a/packages/dockview/src/dockview/groupControlsRenderer.ts b/packages/dockview/src/dockview/groupControlsRenderer.ts
index 1b954a66b..57375e907 100644
--- a/packages/dockview/src/dockview/groupControlsRenderer.ts
+++ b/packages/dockview/src/dockview/groupControlsRenderer.ts
@@ -2,8 +2,8 @@ import * as React from 'react';
 import { ReactPart, ReactPortalStore } from '../react';
 import {
     IDockviewPanel,
-    CompositeDisposable,
-    MutableDisposable,
+    DockviewCompositeDisposable,
+    DockviewMutableDisposable,
     DockviewApi,
     GroupPanel,
     GroupviewPanelApi,
@@ -19,7 +19,7 @@ export interface IDockviewGroupControlProps {
 }
 
 export class ReactGroupControlsRendererPart {
-    private mutableDisposable = new MutableDisposable();
+    private mutableDisposable = new DockviewMutableDisposable();
     private _element: HTMLElement;
     private _part?: ReactPart<IDockviewGroupControlProps>;
 
@@ -52,7 +52,7 @@ export class ReactGroupControlsRendererPart {
         containerApi: DockviewApi;
         api: GroupviewPanelApi;
     }): void {
-        this.mutableDisposable.value = new CompositeDisposable(
+        this.mutableDisposable.value = new DockviewCompositeDisposable(
             this._group.model.onDidAddPanel(() => {
                 this.updatePanels();
             }),
diff --git a/packages/dockview/src/dockview/reactContentPart.ts b/packages/dockview/src/dockview/reactContentPart.ts
index 9f3557609..3a7cc7180 100644
--- a/packages/dockview/src/dockview/reactContentPart.ts
+++ b/packages/dockview/src/dockview/reactContentPart.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ReactPart, ReactPortalStore } from '../react';
 import { IDockviewPanelProps } from '../dockview/dockview';
 import {
-    Emitter,
+    DockviewEmitter,
     Event,
     GroupPanel,
     PanelUpdateEvent,
@@ -16,10 +16,10 @@ export class ReactPanelContentPart implements IContentRenderer {
     //
     private _group: GroupPanel | undefined;
 
-    private readonly _onDidFocus = new Emitter<void>();
+    private readonly _onDidFocus = new DockviewEmitter<void>();
     readonly onDidFocus: Event<void> = this._onDidFocus.event;
 
-    private readonly _onDidBlur = new Emitter<void>();
+    private readonly _onDidBlur = new DockviewEmitter<void>();
     readonly onDidBlur: Event<void> = this._onDidBlur.event;
 
     get element(): HTMLElement {
diff --git a/packages/dockview/src/dockview/reactHeaderPart.ts b/packages/dockview/src/dockview/reactHeaderPart.ts
index 602054d36..54ea58e07 100644
--- a/packages/dockview/src/dockview/reactHeaderPart.ts
+++ b/packages/dockview/src/dockview/reactHeaderPart.ts
@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import { ReactPart, ReactPortalStore } from '../react';
 import { IGroupPanelBaseProps } from './dockview';
 import {
diff --git a/packages/dockview/src/react.ts b/packages/dockview/src/react.ts
index 52991e7c6..9d78ba4c1 100644
--- a/packages/dockview/src/react.ts
+++ b/packages/dockview/src/react.ts
@@ -1,13 +1,9 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import {
-    IFrameworkPart,
-    sequentialNumberGenerator,
-    IDisposable,
-} from 'dockview-core';
+import { IFrameworkPart, IDockviewDisposable } from 'dockview-core';
 
 export interface ReactPortalStore {
-    addPortal: (portal: React.ReactPortal) => IDisposable;
+    addPortal: (portal: React.ReactPortal) => IDockviewDisposable;
 }
 
 interface IPanelWrapperProps {
@@ -60,7 +56,10 @@ ReactComponentBridge.displayName = 'DockviewReactJsBridge';
  * require a key property like any other React element rendered in an array
  * to prevent excessive re-rendering
  */
-const uniquePortalKeyGenerator = sequentialNumberGenerator();
+const uniquePortalKeyGenerator = (() => {
+    let value = 1;
+    return { next: () => `dockview_react_portal_key_${(value++).toString()}` };
+})();
 
 export const ReactPartContext = React.createContext<{}>({});
 
@@ -69,7 +68,10 @@ export class ReactPart<P extends object, C extends object = {}>
 {
     private _initialProps: Record<string, any> = {};
     private componentInstance?: IPanelWrapperRef;
-    private ref?: { portal: React.ReactPortal; disposable: IDisposable };
+    private ref?: {
+        portal: React.ReactPortal;
+        disposable: IDockviewDisposable;
+    };
     private disposed = false;
 
     constructor(
@@ -156,7 +158,7 @@ export class ReactPart<P extends object, C extends object = {}>
 
 type PortalLifecycleHook = () => [
     React.ReactPortal[],
-    (portal: React.ReactPortal) => IDisposable
+    (portal: React.ReactPortal) => IDockviewDisposable
 ];
 
 /**
diff --git a/packages/dockview/tsconfig.json b/packages/dockview/tsconfig.json
index 9ff78cef1..9e9f62ec0 100644
--- a/packages/dockview/tsconfig.json
+++ b/packages/dockview/tsconfig.json
@@ -6,6 +6,9 @@
         "jsx": "react",
         "rootDir": "src"
     },
+    "references": [
+      { "dockview-core": "../dockview-core" }
+    ],
     "include": ["src"],
     "exclude": ["**/node_modules", "src/__tests__"]
-}
\ No newline at end of file
+}
diff --git a/yarn.lock b/yarn.lock
index 73e8049a2..87f2953e5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2409,6 +2409,18 @@
   resolved "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz"
   integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
 
+"@rollup/plugin-node-resolve@^15.0.1":
+  version "15.0.1"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.0.1.tgz#72be449b8e06f6367168d5b3cd5e2802e0248971"
+  integrity sha512-ReY88T7JhJjeRVbfCyNj+NXAG3IIsVMsX9b5/9jC98dRP8/yxlZdz7mHZbHk5zHr24wZZICS5AcXsFZAXYUQEg==
+  dependencies:
+    "@rollup/pluginutils" "^5.0.1"
+    "@types/resolve" "1.20.2"
+    deepmerge "^4.2.2"
+    is-builtin-module "^3.2.0"
+    is-module "^1.0.0"
+    resolve "^1.22.1"
+
 "@rollup/plugin-typescript@^11.0.0":
   version "11.0.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-typescript/-/plugin-typescript-11.0.0.tgz#f136272d1df5209daca0cb6f171c574b1d505545"
@@ -2926,6 +2938,11 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/resolve@1.20.2":
+  version "1.20.2"
+  resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.20.2.tgz#97d26e00cd4a0423b4af620abecf3e6f442b7975"
+  integrity sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==
+
 "@types/retry@0.12.0":
   version "0.12.0"
   resolved "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz"
@@ -4114,6 +4131,11 @@ buffer@^5.5.0:
     base64-js "^1.3.1"
     ieee754 "^1.1.13"
 
+builtin-modules@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.3.0.tgz#cae62812b89801e9656336e46223e030386be7b6"
+  integrity sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==
+
 builtins@^1.0.3:
   version "1.0.3"
   resolved "https://registry.npmjs.org/builtins/-/builtins-1.0.3.tgz"
@@ -7717,6 +7739,13 @@ is-buffer@^2.0.0:
   resolved "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz"
   integrity sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==
 
+is-builtin-module@^3.2.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-3.2.1.tgz#f03271717d8654cfcaf07ab0463faa3571581169"
+  integrity sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==
+  dependencies:
+    builtin-modules "^3.3.0"
+
 is-ci@2.0.0, is-ci@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
@@ -7844,6 +7873,11 @@ is-lambda@^1.0.1:
   resolved "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz"
   integrity sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==
 
+is-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
+  integrity sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==
+
 is-negated-glob@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/is-negated-glob/-/is-negated-glob-1.0.0.tgz"

From 37b0a062a4d38744aff9eb5960f4b9e31e2c2e1c Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Mon, 27 Feb 2023 22:55:36 +0800
Subject: [PATCH 7/7] chore: cleanup

---
 packages/dockview-core/src/groupview/types.ts |  1 +
 packages/dockview-core/src/index.ts           |  1 -
 .../src/dockview/v2/reactGroupPanelView.ts    | 30 -------------------
 3 files changed, 1 insertion(+), 31 deletions(-)
 delete mode 100644 packages/dockview/src/dockview/v2/reactGroupPanelView.ts

diff --git a/packages/dockview-core/src/groupview/types.ts b/packages/dockview-core/src/groupview/types.ts
index abd75e80c..670d4b939 100644
--- a/packages/dockview-core/src/groupview/types.ts
+++ b/packages/dockview-core/src/groupview/types.ts
@@ -53,6 +53,7 @@ export interface IContentRenderer extends IPanel {
     readonly onDidBlur?: Event<void>;
     updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void;
     init(parameters: GroupPanelContentPartInitParameters): void;
+    layout(width: number, height: number): void;
 }
 
 // watermark component
diff --git a/packages/dockview-core/src/index.ts b/packages/dockview-core/src/index.ts
index 75fa21228..5697c58b0 100644
--- a/packages/dockview-core/src/index.ts
+++ b/packages/dockview-core/src/index.ts
@@ -38,7 +38,6 @@ export * from './dockview/options';
 export * from './dockview/dockviewPanel';
 export * from './dockview/components/tab/defaultTab';
 export * from './dockview/deserializer';
-export * from './dockview/defaultGroupPanelView';
 
 export * from './dockview/dockviewComponent';
 export * from './gridview/gridviewComponent';
diff --git a/packages/dockview/src/dockview/v2/reactGroupPanelView.ts b/packages/dockview/src/dockview/v2/reactGroupPanelView.ts
deleted file mode 100644
index d0b39f730..000000000
--- a/packages/dockview/src/dockview/v2/reactGroupPanelView.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { ReactPortalStore } from '../../react';
-import {
-    DefaultGroupPanelView,
-    DockviewRenderFunctions,
-    ViewFactoryData,
-    DefaultTab,
-} from 'dockview-core';
-import { ReactContentRenderer } from './reactContentRenderer';
-
-export class ReactGroupPanelView extends DefaultGroupPanelView {
-    constructor(
-        id: string,
-        options: DockviewRenderFunctions,
-        private readonly data: ViewFactoryData,
-        reactPortalStore: ReactPortalStore
-    ) {
-        super({
-            content: new ReactContentRenderer(
-                id,
-                options.frameworkComponents![data.content],
-                reactPortalStore
-            ),
-            tab: new DefaultTab(),
-        });
-    }
-
-    // toJSON() {
-    //     return { ...this.data };
-    // }
-}