chore: sandbox examples

.codesandbox/ci.json

@@ -4,7 +4,16 @@
     "packages/dockview"
   ],
   "sandboxes": [
-    "/packages/docs/sandboxes/layout-persistance"
+    "/packages/docs/sandboxes/constraints-dockview",
+    "/packages/docs/sandboxes/customheader-dockview",
+    "/packages/docs/sandboxes/dnd-dockview",
+    "/packages/docs/sandboxes/events-dockview",
+    "/packages/docs/sandboxes/groupcontol-dockview",
+    "/packages/docs/sandboxes/layout-dockview",
+    "/packages/docs/sandboxes/nested-dockview",
+    "/packages/docs/sandboxes/resize-dockview",
+    "/packages/docs/sandboxes/simple-dockview",
+    "/packages/docs/sandboxes/watermark-dockview"
   ],
   "node": "16"
 }

packages/dockview-core/package.json

@@ -21,8 +21,8 @@
     "build:modulefiles": "rollup -c",
     "build": "npm run build:ci && npm run build:modulefiles",
     "clean": "rimraf dist/ .build/",
+    "prepublishOnly": "npm run rebuild && npm run test",
     "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-core",
     "test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-core --coverage",

packages/dockview/package.json

@@ -22,7 +22,7 @@
     "build": "npm run build:ci && npm run build:modulefiles",
     "clean": "rimraf dist/ .build/",
     "docs": "typedoc",
-    "prepack": "npm run rebuild && npm run test",
+    "prepublishOnly": "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",

packages/docs/docs/components/dockview.mdx

@@ -7,23 +7,23 @@ import {
     RenderingDockview,
     Checkbox,
 } from '@site/src/components/dockview/rendering';
-import { DndDockview } from '@site/src/components/dockview/dnd';
+
-import { EventsDockview } from '@site/src/components/dockview/events';
-import { ContextMenuDockview } from '@site/src/components/dockview/contextMenu';
-import { NestedDockview } from '@site/src/components/dockview/nested';
-import { CustomHeadersDockview } from '@site/src/components/dockview/customHeaders';
-import { DockviewGroupControl } from '@site/src/components/dockview/groupControl';
-import {
-    DockviewNative,
-    DockviewNative2,
-} from '@site/src/components/dockview/native';
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
-import DockviewPersistance from '@site/sandboxes/layout-persistance/src/app';
+import DockviewPersistance from '@site/sandboxes/layout-dockview/src/app';
 import SimpleDockview from '@site/sandboxes/simple-dockview/src/app';
 import ResizeDockview from '@site/sandboxes/resize-dockview/src/app';
 import DockviewWatermark from '@site/sandboxes/watermark-dockview/src/app';
+import DockviewConstraints from '@site/sandboxes/constraints-dockview/src/app';
+import DndDockview from '@site/sandboxes/dnd-dockview/src/app';
+import NestedDockview from '@site/sandboxes/nested-dockview/src/app';
+import EventsDockview from '@site/sandboxes/events-dockview/src/app';
+import DockviewGroupControl from '@site/sandboxes/groupcontrol-dockview/src/app';
+import CustomHeadersDockview from '@site/sandboxes/customheader-dockview/src/app';
+import DockviewNative from '@site/sandboxes/fullwidthtab-dockview/src/app';
+import DockviewNative2 from '@site/sandboxes/nativeapp-dockview/src/app';
+import DockviewSetTitle from '@site/sandboxes/updatetitle-dockview/src/app';
 
 # Dockview
 
@@ -247,7 +247,9 @@ When the dockview is empty you may want to display some fallback content, this i
 By default there the watermark has no content but you can provide as a prop to `DockviewReact` a `watermarkComponent`
 which will be rendered when there are no panels or groups.
 
+<Container>
     <DockviewWatermark />
+</Container>
 
 ## Drag And Drop
 
@@ -324,7 +326,9 @@ return (
 );
 ```
 
+<Container>
     <DndDockview />
+</Container>
 
 ## Panels
 
@@ -515,12 +519,14 @@ You can also override the default tab renderer which will be used when no `tabCo
 <DockviewReact defaultTabComponent={MyCustomHeader}  ... />;
 ```
 
-As a simple example the below attachs a custom event handler for the context menu on all tabs as a default tab renderer
+As a simple example the below attaches a custom event handler for the context menu on all tabs as a default tab renderer
 
 The below example uses a custom tab renderer to reigster a popover when the user right clicked on a tab.
 This still makes use of the `DockviewDefaultTab` since it's only a minor change.
 
+<Container>
     <CustomHeadersDockview />
+</Container>
 
 ### Default Tab Title
 
@@ -538,11 +544,15 @@ You can update the title through the panel api which can be accessed via `props.
 component or via `api.getPanel('panel1').api` if you are accessing from outside of the panel component.
 
 ```tsx
-api.updateTitle('my_new_custom_title');
+api.setTitle('my_new_custom_title');
 ```
 
 > Note this only works when using the default tab implementation.
 
+<Container>
+    <DockviewSetTitle />
+</Container>
+
 ### Custom Tab Title
 
 If you are using a custom tab implementation you should pass variables through as a parameter and render them
@@ -588,7 +598,9 @@ to the entire width of the group. For example:
 <DockviewReactComponent singleTabMode="fullwidth" {...otherProps} />
 ```
 
+<Container>
     <DockviewNative />
+</Container>
 
 ## Groups
 
@@ -640,11 +652,15 @@ const GroupControlComponent = (props: IDockviewGroupControlProps) => {
 };
 ```
 
+<Container>
     <DockviewGroupControl />
+</Container>
 
 ## Events
 
+<Container height={600}>
     <EventsDockview />
+</Container>
 
 ## Advanced Examples
 
@@ -653,7 +669,9 @@ const GroupControlComponent = (props: IDockviewGroupControlProps) => {
 You can safely create multiple dockview instances within one page and nest dockviews within other dockviews.
 If you wish to interact with the drop event from one dockview instance in another dockview instance you can implement the `showDndOverlay` and `onDidDrop` props on `DockviewReact`.
 
+<Container>
     <NestedDockview />
+</Container>
 
 ### Example
 
@@ -666,3 +684,9 @@ hello 2
 <div style={{ height: '400px', width: '100%' }}>
     <App />
 </div>
+
+## Contraints
+
+<Container>
+    <DockviewConstraints />
+</Container>

packages/docs/sandboxes/constraints-dockview/package.json

@@ -1,11 +1,8 @@
 {
-  "name": "layout-persistance",
+  "name": "constraints-dockview",
-  "description": "Using interpolations & CSS 3D create a flip card effect",
+  "description": "",
   "keywords": [
-    "css",
+    "dockview"
-    "3D",
-    "useSpring",
-    "interpolation"
   ],
   "version": "1.0.0",
   "main": "src/index.tsx",

packages/docs/sandboxes/constraints-dockview/src/app.tsx

@@ -0,0 +1,99 @@
+import {
+    DockviewApi,
+    DockviewMutableDisposable,
+    DockviewReact,
+    DockviewReadyEvent,
+    GridConstraintChangeEvent,
+    IDockviewPanelProps,
+} from 'dockview';
+import * as React from 'react';
+
+const components = {
+    default: (props: IDockviewPanelProps<{ title: string }>) => {
+        const [contraints, setContraints] =
+            React.useState<GridConstraintChangeEvent | null>(null);
+
+        React.useEffect(() => {
+            props.api.group.api.setConstraints({
+                maximumHeight: 200,
+                maximumWidth: 200,
+            });
+        }, []);
+
+        React.useEffect(() => {
+            const disposable1 = new DockviewMutableDisposable();
+
+            const disposable = props.api.onDidGroupChange(() => {
+                disposable1.value = props.api.group.api.onDidConstraintsChange(
+                    (event) => {
+                        setContraints(event);
+                    }
+                );
+            });
+
+            setContraints({
+                maximumHeight: props.api.group.maximumHeight,
+                minimumHeight: props.api.group.minimumHeight,
+                maximumWidth: props.api.group.maximumWidth,
+                minimumWidth: props.api.group.minimumWidth,
+            });
+
+            return () => {
+                disposable1.dispose();
+                disposable.dispose();
+            };
+        }, []);
+
+        return (
+            <div
+                style={{
+                    height: '100%',
+                    padding: '20px',
+                    background: 'var(--dv-group-view-background-color)',
+                    color: 'white',
+                }}
+            >
+                <span> {props.params.title}</span>
+                {contraints && (
+                    <div>
+                        <div>{`minHeight=${contraints.minimumHeight}`}</div>
+                        <div>{`maxHeight=${contraints.maximumHeight}`}</div>
+                        <div>{`minWidth=${contraints.minimumWidth}`}</div>
+                        <div>{`maxWidth=${contraints.maximumWidth}`}</div>
+                    </div>
+                )}
+            </div>
+        );
+    },
+};
+
+const App = () => {
+    const [api, setApi] = React.useState<DockviewApi>();
+
+    const onReady = (event: DockviewReadyEvent) => {
+        event.api.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        event.api.addPanel({
+            id: 'panel_2',
+            component: 'default',
+        });
+
+        event.api.addPanel({
+            id: 'panel_3',
+            component: 'default',
+        });
+    };
+
+    return (
+        <DockviewReact
+            onReady={onReady}
+            components={components}
+            className="dockview-theme-abyss "
+        />
+    );
+};
+
+export default App;

packages/docs/sandboxes/customheader-dockview/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "customheader-dockview",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

packages/docs/sandboxes/customheader-dockview/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>

packages/docs/sandboxes/customheader-dockview/src/app.tsx

@@ -31,7 +31,7 @@ const headerComponents = {
     },
 };
 
-export const CustomHeadersDockview = () => {
+const CustomHeadersDockview = () => {
     const onReady = (event: DockviewReadyEvent) => {
         const d = localStorage.getItem('test');
 
@@ -88,20 +88,13 @@ export const CustomHeadersDockview = () => {
     };
 
     return (
-        <div
-            style={{
-                height: '500px',
-                margin: '40px 0px',
-                display: 'flex',
-                flexDirection: 'column',
-            }}
-        >
         <DockviewReact
             components={components}
             defaultTabComponent={headerComponents.default}
             onReady={onReady}
             className="dockview-theme-abyss"
         />
-        </div>
     );
 };
+
+export default CustomHeadersDockview;

packages/docs/sandboxes/customheader-dockview/src/index.tsx

@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}

packages/docs/sandboxes/customheader-dockview/src/styles.css

@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}

packages/docs/sandboxes/customheader-dockview/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true
+  }
+}

packages/docs/sandboxes/dnd-dockview/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "dnd-dockview",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

packages/docs/sandboxes/dnd-dockview/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>

packages/docs/sandboxes/dnd-dockview/src/app.tsx

@@ -18,7 +18,7 @@ const components = {
     },
 };
 
-export const DndDockview = (props: { renderVisibleOnly: boolean }) => {
+const DndDockview = (props: { renderVisibleOnly: boolean }) => {
     const onReady = (event: DockviewReadyEvent) => {
         event.api.addPanel({
             id: 'panel_1',
@@ -60,7 +60,7 @@ export const DndDockview = (props: { renderVisibleOnly: boolean }) => {
             component: 'default',
             position: {
                 direction: positionToDirection(event.position),
-                referenceGroup: event.group,
+                referenceGroup: event.group || undefined,
             },
         });
     };
@@ -70,7 +70,13 @@ export const DndDockview = (props: { renderVisibleOnly: boolean }) => {
     };
 
     return (
-        <>
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                height: '100%',
+            }}
+        >
             <div
                 style={{
                     backgroundColor: 'orange',
@@ -83,14 +89,7 @@ export const DndDockview = (props: { renderVisibleOnly: boolean }) => {
             >
                 Drag me
             </div>
-            <div
+
-                style={{
-                    height: '300px',
-                    backgroundColor: 'rgb(30,30,30)',
-                    color: 'white',
-                    margin: '20px 0px',
-                }}
-            >
             <DockviewReact
                 components={components}
                 onReady={onReady}
@@ -99,6 +98,7 @@ export const DndDockview = (props: { renderVisibleOnly: boolean }) => {
                 showDndOverlay={showDndOverlay}
             />
         </div>
-        </>
     );
 };
+
+export default DndDockview;

packages/docs/sandboxes/dnd-dockview/src/index.tsx

@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}

packages/docs/sandboxes/dnd-dockview/src/styles.css

@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}

packages/docs/sandboxes/dnd-dockview/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true
+  }
+}

packages/docs/sandboxes/events-dockview/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "events-dockview",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

packages/docs/sandboxes/events-dockview/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>

packages/docs/sandboxes/events-dockview/src/app.tsx

@@ -6,7 +6,7 @@ import {
     IDockviewPanelProps,
 } from 'dockview';
 import * as React from 'react';
-import { Console, Line } from '../console/console';
+import { Console, Line } from './console';
 
 const components = {
     default: (props: IDockviewPanelProps<{ title: string }>) => {
@@ -14,7 +14,7 @@ const components = {
     },
 };
 
-export const EventsDockview = () => {
+const EventsDockview = () => {
     const [lines, setLines] = React.useState<Line[]>([]);
     const [checked, setChecked] = React.useState<boolean>(false);
 
@@ -312,7 +312,13 @@ export const EventsDockview = () => {
     };
 
     return (
-        <>
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                height: '100%',
+            }}
+        >
             <label>
                 <input
                     type="checkbox"
@@ -321,22 +327,18 @@ export const EventsDockview = () => {
                 />
                 <span>{'fromJSON'}</span>
             </label>
-            <div
+            <div style={{ flexGrow: 1 }}>
-                style={{
-                    height: '300px',
-                    backgroundColor: 'rgb(30,30,30)',
-                    color: 'white',
-                    margin: '20px 0px',
-                }}
-            >
                 <DockviewReact
                     components={components}
                     onReady={onReady}
                     className="dockview-theme-abyss"
                 />
             </div>
-
+            <div style={{ flexGrow: 1 }}>
                 <Console lines={lines} />
-        </>
+            </div>
+        </div>
     );
 };
+
+export default EventsDockview;

packages/docs/sandboxes/events-dockview/src/console.scss

@@ -0,0 +1,27 @@
+.console-container {
+    background-color: black;
+    color: white;
+    padding-left: 8px;
+    max-height: 200px;
+    overflow-y: scroll;
+    overflow-x: auto;
+
+    .console-line {
+        height: 20px;
+        line-height: 20px;
+        font-size: 13px;
+        border-bottom: 1px solid rgb(30, 30, 30);
+        display: flex;
+        padding-left: 4px;
+
+        .console-line-timestamp {
+            color: lightgray;
+            padding-right: 4px;
+        }
+
+        .console-line-text {
+            padding: 0px 4px;
+            flex-grow: 1;
+        }
+    }
+}

packages/docs/sandboxes/events-dockview/src/console.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import './console.scss';
+
+const formatTime = (now: Date) => {
+    const pad = (x: number) => (x < 10 ? `0${x}` : `${x}`);
+
+    return `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(
+        now.getSeconds()
+    )}.${now.getMilliseconds()}`;
+};
+
+export interface Line {
+    timestamp: Date;
+    text: string;
+    css?: React.CSSProperties;
+}
+
+export interface IConsoleProps {
+    lines: Line[];
+}
+
+export const Console = (props: IConsoleProps) => {
+    const ref = React.useRef<HTMLDivElement>();
+
+    React.useLayoutEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+
+        ref.current.scrollTop = Math.max(
+            0,
+            ref.current.scrollHeight - ref.current.clientHeight
+        );
+    }, [props.lines]);
+
+    return (
+        <div ref={ref} className="console-container">
+            {props.lines.map((line, i) => {
+                return (
+                    <div key={i} className="console-line">
+                        <span className="console-line-timestamp">
+                            {formatTime(line.timestamp)}
+                        </span>
+                        <span className="console-line-text" style={line.css}>
+                            {line.text}
+                        </span>
+                    </div>
+                );
+            })}
+        </div>
+    );
+};

packages/docs/sandboxes/events-dockview/src/index.tsx

@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}

packages/docs/sandboxes/events-dockview/src/styles.css

@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}

packages/docs/sandboxes/events-dockview/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true
+  }
+}

packages/docs/sandboxes/fullwidthtab-dockview/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "watermark-dockview",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

packages/docs/sandboxes/fullwidthtab-dockview/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>

packages/docs/sandboxes/fullwidthtab-dockview/src/app.scss

@@ -0,0 +1,17 @@
+.my-custom-tab {
+    padding: 0px 8px;
+    width: 100%;
+    display: flex;
+    height: 100%;
+    align-items: center;
+    background-color: var(--dv-tabs-and-actions-container-background-color);
+
+    .my-custom-tab-icon {
+        font-size: 16px;
+
+        &:hover {
+            border-radius: 2px;
+            background-color: var(--dv-icon-hover-background-color);
+        }
+    }
+}

packages/docs/sandboxes/fullwidthtab-dockview/src/app.tsx

@@ -0,0 +1,100 @@
+import {
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+    IDockviewPanelHeaderProps,
+} from 'dockview';
+import * as React from 'react';
+import './app.scss';
+
+const components = {
+    default: (props: IDockviewPanelProps<{ title: string; x?: number }>) => {
+        return (
+            <div
+                style={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    color: 'white',
+                    height: '100%',
+                }}
+            >
+                <span>{`${props.params.title}`}</span>
+                {props.params.x && <span>{`  ${props.params.x}`}</span>}
+            </div>
+        );
+    },
+};
+
+const tabComponents = {
+    default: (props: IDockviewPanelHeaderProps<{ title: string }>) => {
+        return (
+            <div className="my-custom-tab">
+                <span>{props.params.title}</span>
+                <span style={{ flexGrow: 1 }} />
+
+                <span className="my-custom-tab-icon material-symbols-outlined">
+                    minimize
+                </span>
+                <span className="my-custom-tab-icon material-symbols-outlined">
+                    maximize
+                </span>
+                <span className="my-custom-tab-icon material-symbols-outlined">
+                    close
+                </span>
+            </div>
+        );
+    },
+};
+
+const DockviewNative = () => {
+    const onReady = (event: DockviewReadyEvent) => {
+        const panel1 = event.api.addPanel({
+            id: 'panel_1',
+            component: 'default',
+            tabComponent: 'default',
+            params: {
+                title: 'Window 1',
+            },
+        });
+        panel1.group.locked = true;
+
+        const panel2 = event.api.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            tabComponent: 'default',
+            params: {
+                title: 'Window 2',
+            },
+            position: {
+                direction: 'right',
+            },
+        });
+        panel2.group.locked = true;
+
+        const panel3 = event.api.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            tabComponent: 'default',
+            params: {
+                title: 'Window 3',
+            },
+            position: {
+                direction: 'below',
+            },
+        });
+        panel3.group.locked = true;
+    };
+
+    return (
+        <DockviewReact
+            onReady={onReady}
+            components={components}
+            tabComponents={tabComponents}
+            className="dockview-theme-abyss"
+            singleTabMode="fullwidth"
+        />
+    );
+};
+
+export default DockviewNative;

packages/docs/sandboxes/fullwidthtab-dockview/src/index.tsx

@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}

packages/docs/sandboxes/fullwidthtab-dockview/src/styles.css

@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}

packages/docs/sandboxes/fullwidthtab-dockview/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true
+  }
+}

packages/docs/sandboxes/groupcontrol-dockview/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "groupcontrol-dockview",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

packages/docs/sandboxes/groupcontrol-dockview/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>

packages/docs/sandboxes/groupcontrol-dockview/src/app.scss

@@ -0,0 +1,17 @@
+.dockview-groupcontrol-demo {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    color: white;
+    background-color: black;
+    padding-left: 8px;
+
+    .dockview-groupcontrol-demo-group-active {
+        padding: 0px 8px;
+    }
+
+    .dockview-groupcontrol-demo-active-panel {
+        color: yellow;
+        padding: 0px 8px;
+    }
+}

packages/docs/sandboxes/groupcontrol-dockview/src/app.tsx

@@ -5,7 +5,7 @@ import {
     IDockviewPanelProps,
 } from 'dockview';
 import * as React from 'react';
-import './groupControl.scss';
+import './app.scss';
 
 const components = {
     default: (props: IDockviewPanelProps<{ title: string; x?: number }>) => {
@@ -47,7 +47,7 @@ const GroupControlComponent = (props: IDockviewGroupControlProps) => {
     );
 };
 
-export const DockviewGroupControl = () => {
+const DockviewGroupControl = () => {
     const onReady = (event: DockviewReadyEvent) => {
         const panel1 = event.api.addPanel({
             id: 'panel_1',
@@ -84,19 +84,13 @@ export const DockviewGroupControl = () => {
     };
 
     return (
-        <div
-            style={{
-                height: '500px',
-                display: 'flex',
-                flexDirection: 'column',
-            }}
-        >
         <DockviewReact
             onReady={onReady}
             components={components}
             groupControlComponent={GroupControlComponent}
             className="dockview-theme-abyss"
         />
-        </div>
     );
 };
+
+export default DockviewGroupControl;

packages/docs/sandboxes/groupcontrol-dockview/src/index.tsx

@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}

packages/docs/sandboxes/groupcontrol-dockview/src/styles.css

@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}

packages/docs/sandboxes/groupcontrol-dockview/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true
+  }
+}

packages/docs/sandboxes/layout-dockview/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "layout-dockview",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

packages/docs/sandboxes/layout-dockview/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>

packages/docs/sandboxes/layout-dockview/src/app.tsx

@@ -102,11 +102,18 @@ export const DockviewPersistance = () => {
             style={{
                 display: 'flex',
                 flexDirection: 'column',
+                height: '100%',
             }}
         >
-            <div>
+            <div style={{ height: '25px' }}>
                 <button onClick={clearLayout}>Reset Layout</button>
             </div>
+            <div
+                style={{
+                    flexGrow: 1,
+                    overflow: 'hidden',
+                }}
+            >
                 <DockviewReact
                     onReady={onReady}
                     components={components}
@@ -114,6 +121,7 @@ export const DockviewPersistance = () => {
                     className="dockview-theme-abyss"
                 />
             </div>
+        </div>
     );
 };
 

packages/docs/sandboxes/layout-dockview/src/index.tsx

@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}

packages/docs/sandboxes/layout-dockview/src/styles.css

@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}

packages/docs/sandboxes/layout-dockview/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true
+  }
+}

packages/docs/sandboxes/nativeapp-dockview/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "watermark-dockview",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

packages/docs/sandboxes/nativeapp-dockview/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>

packages/docs/sandboxes/nativeapp-dockview/src/app.scss

@@ -0,0 +1,17 @@
+.my-custom-tab {
+    padding: 0px 8px;
+    width: 100%;
+    display: flex;
+    height: 100%;
+    align-items: center;
+    background-color: var(--dv-tabs-and-actions-container-background-color);
+
+    .my-custom-tab-icon {
+        font-size: 16px;
+
+        &:hover {
+            border-radius: 2px;
+            background-color: var(--dv-icon-hover-background-color);
+        }
+    }
+}

packages/docs/sandboxes/nativeapp-dockview/src/app.tsx

@@ -2,12 +2,10 @@ import {
     DockviewReact,
     DockviewReadyEvent,
     IDockviewPanelProps,
-    Position,
-    Direction,
     IDockviewPanelHeaderProps,
 } from 'dockview';
 import * as React from 'react';
-import './native.scss';
+import './app.scss';
 
 const components = {
     default: (props: IDockviewPanelProps<{ title: string; x?: number }>) => {
@@ -71,10 +69,10 @@ const tabComponents = {
                 <span style={{ flexGrow: 1 }} />
 
                 <span className="my-custom-tab-icon material-symbols-outlined">
-                    chrome_minimize
+                    minimize
                 </span>
                 <span className="my-custom-tab-icon material-symbols-outlined">
-                    chrome_maximize
+                    maximize
                 </span>
                 <span className="my-custom-tab-icon material-symbols-outlined">
                     close
@@ -84,65 +82,7 @@ const tabComponents = {
     },
 };
 
-export const DockviewNative = () => {
+const DockviewNative2 = () => {
-    const onReady = (event: DockviewReadyEvent) => {
-        const panel1 = event.api.addPanel({
-            id: 'panel_1',
-            component: 'default',
-            tabComponent: 'default',
-            params: {
-                title: 'Window 1',
-            },
-        });
-        panel1.group.locked = true;
-
-        const panel2 = event.api.addPanel({
-            id: 'panel_2',
-            component: 'default',
-            tabComponent: 'default',
-            params: {
-                title: 'Window 2',
-            },
-            position: {
-                direction: 'right',
-            },
-        });
-        panel2.group.locked = true;
-
-        const panel3 = event.api.addPanel({
-            id: 'panel_3',
-            component: 'default',
-            tabComponent: 'default',
-            params: {
-                title: 'Window 3',
-            },
-            position: {
-                direction: 'below',
-            },
-        });
-        panel3.group.locked = true;
-    };
-
-    return (
-        <div
-            style={{
-                height: '500px',
-                display: 'flex',
-                flexDirection: 'column',
-            }}
-        >
-            <DockviewReact
-                onReady={onReady}
-                components={components}
-                tabComponents={tabComponents}
-                className="dockview-theme-abyss"
-                singleTabMode="fullwidth"
-            />
-        </div>
-    );
-};
-
-export const DockviewNative2 = () => {
     const onReady = (event: DockviewReadyEvent) => {
         const panel1 = event.api.addPanel({
             id: 'panel_1',
@@ -199,3 +139,5 @@ export const DockviewNative2 = () => {
         </div>
     );
 };
+
+export default DockviewNative2;

packages/docs/sandboxes/nativeapp-dockview/src/index.tsx

@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}

packages/docs/sandboxes/nativeapp-dockview/src/styles.css

@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}

packages/docs/sandboxes/nativeapp-dockview/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true
+  }
+}

packages/docs/sandboxes/nested-dockview/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "nested-dockview",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

packages/docs/sandboxes/nested-dockview/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>

packages/docs/sandboxes/nested-dockview/src/app.tsx

@@ -6,7 +6,7 @@ import {
     IDockviewPanelProps,
 } from 'dockview';
 import * as React from 'react';
-import './nested.scss';
+import './app.scss';
 
 const InnerDockview = () => {
     const onReady = (event: DockviewReadyEvent) => {
@@ -52,7 +52,7 @@ const components = {
     innerDockview: InnerDockview,
 };
 
-export const NestedDockview = () => {
+const NestedDockview = () => {
     const onReady = (event: DockviewReadyEvent) => {
         event.api.addPanel({
             id: 'panel_1',
@@ -82,13 +82,6 @@ export const NestedDockview = () => {
     };
 
     return (
-        <div
-            style={{
-                height: '500px',
-                display: 'flex',
-                flexDirection: 'column',
-            }}
-        >
         <DockviewReact
             onReady={onReady}
             components={components}
@@ -96,6 +89,7 @@ export const NestedDockview = () => {
             showDndOverlay={showDndOverlay}
             onDidDrop={onDidDrop}
         />
-        </div>
     );
 };
+
+export default NestedDockview;

packages/docs/sandboxes/nested-dockview/src/index.tsx

@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}

packages/docs/sandboxes/nested-dockview/src/styles.css

@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}

packages/docs/sandboxes/nested-dockview/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true
+  }
+}

packages/docs/sandboxes/resize-dockview/package.json

@@ -1,11 +1,8 @@
 {
-  "name": "layout-persistance",
+  "name": "resize-dockview",
-  "description": "Using interpolations & CSS 3D create a flip card effect",
+  "description": "",
   "keywords": [
-    "css",
+    "dockview"
-    "3D",
-    "useSpring",
-    "interpolation"
   ],
   "version": "1.0.0",
   "main": "src/index.tsx",

packages/docs/sandboxes/simple-dockview/package.json

@@ -1,11 +1,8 @@
 {
-  "name": "layout-persistance",
+  "name": "simple-dockview",
-  "description": "Using interpolations & CSS 3D create a flip card effect",
+  "description": "",
   "keywords": [
-    "css",
+    "dockview"
-    "3D",
-    "useSpring",
-    "interpolation"
   ],
   "version": "1.0.0",
   "main": "src/index.tsx",

packages/docs/sandboxes/updatetitle-dockview/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "updatetitle-dockview",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

packages/docs/sandboxes/updatetitle-dockview/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>

packages/docs/sandboxes/updatetitle-dockview/src/app.tsx

@@ -0,0 +1,77 @@
+import {
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview';
+import * as React from 'react';
+
+const components = {
+    default: (
+        props: IDockviewPanelProps<{ title: string; myValue: string }>
+    ) => {
+        const [title, setTitle] = React.useState<string>(props.params.title);
+
+        const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+            setTitle(event.target.value);
+        };
+
+        const onClick = () => {
+            props.api.setTitle(title);
+        };
+
+        return (
+            <div style={{ padding: '20px', color: 'white' }}>
+                <div>
+                    <span style={{ color: 'grey' }}>{'props.api.title='}</span>
+                    <span>{`${props.api.title}`}</span>
+                </div>
+                <input value={title} onChange={onChange} />
+                <button onClick={onClick}>Change</button>
+            </div>
+        );
+    },
+};
+
+export const App: React.FC = () => {
+    const onReady = (event: DockviewReadyEvent) => {
+        const panel = event.api.addPanel({
+            id: 'panel_1',
+            component: 'default',
+            title: 'Panel 1',
+        });
+
+        const panel2 = event.api.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            title: 'Panel 2',
+
+            position: { referencePanel: panel },
+        });
+
+        const panel3 = event.api.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            title: 'Panel 3',
+
+            position: { referencePanel: panel, direction: 'right' },
+        });
+
+        const panel4 = event.api.addPanel({
+            id: 'panel_4',
+            component: 'default',
+            title: 'Panel 4',
+
+            position: { referencePanel: panel3 },
+        });
+    };
+
+    return (
+        <DockviewReact
+            components={components}
+            onReady={onReady}
+            className="dockview-theme-abyss"
+        />
+    );
+};
+
+export default App;

packages/docs/sandboxes/updatetitle-dockview/src/index.tsx

@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}

packages/docs/sandboxes/updatetitle-dockview/src/styles.css

@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}

packages/docs/sandboxes/updatetitle-dockview/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true
+  }
+}

packages/docs/sandboxes/watermark-dockview/package.json

@@ -1,11 +1,8 @@
 {
-  "name": "layout-persistance",
+  "name": "watermark-dockview",
-  "description": "Using interpolations & CSS 3D create a flip card effect",
+  "description": "",
   "keywords": [
-    "css",
+    "dockview"
-    "3D",
-    "useSpring",
-    "interpolation"
   ],
   "version": "1.0.0",
   "main": "src/index.tsx",

packages/docs/sandboxes/watermark-dockview/src/app.tsx

@@ -114,9 +114,9 @@ const DockviewWatermark = () => {
     return (
         <div
             style={{
-                height: '500px',
                 display: 'flex',
                 flexDirection: 'column',
+                height: '100%',
             }}
         >
             <div>

packages/docs/src/components/container.scss

@@ -0,0 +1,37 @@
+.codesandbox-button {
+    display: flex;
+    align-items: center;
+    padding: 0px 4px;
+    border-radius: 4px;
+
+    .codesandbox-button-pretext {
+        padding: 0px 4px;
+    }
+
+    .codesandbox-button-content {
+        display: flex;
+        align-items: center;
+    }
+
+    &:hover {
+        cursor: pointer;
+        background-color: rgb(37, 37, 37);
+
+        .codesandbox-button-content {
+            color: rgb(237, 255, 165);
+            text-decoration: none;
+        }
+
+        .codesandbox-button-pretext {
+            color: rgb(245, 245, 245);
+        }
+    }
+}
+
+.dockview-svg {
+    display: inline-block;
+    fill: currentcolor;
+    line-height: 1;
+    stroke: currentcolor;
+    stroke-width: 0;
+}

packages/docs/src/components/container.tsx

@@ -1,14 +1,82 @@
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import * as React from 'react';
+import './container.scss';
 
-export const Container = (props: { children: React.ReactNode }) => {
+const createSvgElementFromPath = (params: {
+    height: string;
+    width: string;
+    viewbox: string;
+    path: string;
+}) => {
     return (
+        <svg
+            height={params.height}
+            width={params.width}
+            viewBox={params.viewbox}
+            focusable={false}
+            className={'dockview-svg'}
+        >
+            <path d={params.path} />
+        </svg>
+    );
+};
+
+export const CreateCloseButton = () =>
+    createSvgElementFromPath({
+        width: '16',
+        height: '16',
+        viewbox: '0 0 50 58',
+        path: 'M22.5581 50.9938V30.1717L4.65116 19.869V31.7386L12.8536 36.4939V45.4198L22.5581 50.9938ZM27.2093 51.1162L37.0931 45.4226V36.2851L45.3488 31.501V19.7801L27.2093 30.2529V51.1162ZM42.9633 15.7867L33.4288 10.2615L25.0571 15.1193L16.6219 10.2567L7.00237 15.8557L24.9542 26.1842L42.9633 15.7867ZM0 43.4008V14.5498L24.9974 0L50 14.4887V43.3552L24.9969 57.7584L0 43.4008Z',
+    });
+
+export const Container = (props: {
+    children: React.ReactNode;
+    height?: number;
+}) => {
+    return (
+        <>
             <div
                 style={{
-                height: '300px',
+                    height: props.height ? `${props.height}px` : '300px',
-                margin: '20px 0px',
                 }}
             >
                 {props.children}
             </div>
+            <div
+                style={{
+                    padding: '2px 0px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    fontSize: '14px',
+                }}
+            >
+                <span style={{ flexGrow: 1 }} />
+
+                <span
+                    className="codesandbox-button"
+                    style={{ display: 'flex', alignItems: 'center' }}
+                >
+                    <span className="codesandbox-button-pretext">{`Open in `}</span>
+                    <a
+                        href="https://www.google.com"
+                        target={'_blank'}
+                        className="codesandbox-button-content"
+                    >
+                        <span
+                            style={{ fontWeight: 'bold', paddingRight: '4px' }}
+                        >
+                            CodeSandbox
+                        </span>
+                        <CreateCloseButton />
+                    </a>
+                </span>
+                {/* <span
+                    style={{ fontSize: '16px' }}
+                    className="material-symbols-outlined"
+                >
+                    open_in_new
+                </span> */}
+            </div>
+        </>
     );
 };

packages/docs/src/components/dockview/contextMenu.tsx

@@ -1,114 +0,0 @@
-import {
-    DockviewReact,
-    DockviewReadyEvent,
-    IDockviewPanelHeaderProps,
-    IDockviewPanelProps,
-    TabContextMenuEvent,
-} from 'dockview';
-import * as React from 'react';
-
-const components = {
-    default: (props: IDockviewPanelProps<{ title: string }>) => {
-        return <div style={{ padding: '20px' }}>{props.params.title}</div>;
-    },
-};
-
-const CustomTab = (
-    props: IDockviewPanelHeaderProps & React.DOMAttributes<HTMLDivElement>
-) => {
-    const onClose = React.useCallback(
-        (event: React.MouseEvent<HTMLSpanElement>) => {
-            event.stopPropagation();
-            props.api.close();
-        },
-        [props.api]
-    );
-
-    const onClick = React.useCallback(
-        (event: React.MouseEvent<HTMLDivElement>) => {
-            props.api.setActive();
-
-            if (props.onClick) {
-                props.onClick(event);
-            }
-        },
-        [props.api, props.onClick]
-    );
-
-    return (
-        <div {...props} onClick={onClick} className="dockview-react-tab">
-            <span className="dockview-react-tab-title">{props.api.title}</span>
-            <span onClick={onClose} className="dockview-react-tab-action">
-                {'✕'}
-            </span>
-        </div>
-    );
-};
-
-const Test = (props: IDockviewPanelHeaderProps) => {
-    const onContextMenu = (event: React.MouseEvent) => {
-        event.preventDefault();
-        alert('hiya');
-    };
-    return <CustomTab onContextMenu={onContextMenu} {...props} />;
-};
-
-const tabComponents = {
-    default: Test,
-};
-
-export const ContextMenuDockview = () => {
-    const onReady = (event: DockviewReadyEvent) => {
-        event.api.addPanel({
-            id: 'panel_1',
-            component: 'default',
-            tabComponent: 'default',
-            params: {
-                title: 'Panel 1',
-            },
-        });
-
-        event.api.addPanel({
-            id: 'panel_2',
-            component: 'default',
-            tabComponent: 'default',
-            params: {
-                title: 'Panel 2',
-            },
-        });
-
-        event.api.addPanel({
-            id: 'panel_3',
-            component: 'default',
-            tabComponent: 'default',
-            params: {
-                title: 'Panel 3',
-            },
-        });
-
-        event.api.addPanel({
-            id: 'panel_4',
-            component: 'default',
-            tabComponent: 'default',
-            params: {
-                title: 'Panel 4',
-            },
-            position: { referencePanel: 'panel_1', direction: 'right' },
-        });
-    };
-
-    const onContextMenu = (event: TabContextMenuEvent) => {
-        event.event.preventDefault();
-        alert(`Content appear event fired for panel ${event.panel.id}`);
-    };
-
-    return (
-        <DockviewReact
-            components={components}
-            tabComponents={tabComponents}
-            onReady={onReady}
-            className="dockview-theme-abyss"
-            onTabContextMenu={onContextMenu}
-        />
-    );
-};

packages/docs/src/components/dockview/groupControl.scss

@@ -1,17 +0,0 @@
-.dockview-groupcontrol-demo {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  color: white;
-  background-color: black;
-  padding-left: 8px;
-
-  .dockview-groupcontrol-demo-group-active {
-    padding: 0px 8px;
-  }
-
-  .dockview-groupcontrol-demo-active-panel {
-    color: yellow;
-    padding: 0px 8px;
-  }
-}

packages/docs/src/components/dockview/native.scss

@@ -1,34 +0,0 @@
-.nested-dockview {
-    position: relative;
-    ::after {
-        content: '';
-        position: absolute;
-        top: 0px;
-        left: 0px;
-        height: 1px;
-        width: 100%;
-        background-color: var(--dv-separator-border);
-    }
-}
-
-.header-title {
-  padding: 0px 8px;
-}
-
-.my-custom-tab {
-  padding: 0px 8px;
-  width: 100%;
-  display: flex;
-  height: 100%;
-  align-items: center;
-  background-color: var(--dv-tabs-and-actions-container-background-color);
-
-  .my-custom-tab-icon {
-    font-size: 16px;
-
-    &:hover {
-      border-radius: 2px;
-      background-color: var(--dv-icon-hover-background-color);
-    }
-  }
-}

packages/docs/src/components/dockview/watermark.tsx

@@ -1,134 +0,0 @@
-import {
-    DockviewApi,
-    DockviewReact,
-    DockviewReadyEvent,
-    IDockviewPanelProps,
-    IWatermarkPanelProps,
-    Orientation,
-} from 'dockview';
-import * as React from 'react';
-import './nested.scss';
-
-const components = {
-    default: (props: IDockviewPanelProps<{ title: string }>) => {
-        return (
-            <div
-                style={{
-                    height: '100%',
-                    padding: '20px',
-                    background: 'var(--dv-group-view-background-color)',
-                }}
-            >
-                {props.params.title}
-            </div>
-        );
-    },
-};
-
-const counter = (() => {
-    let i = 0;
-
-    return {
-        next: () => ++i,
-    };
-})();
-
-const Watermark = (props: IWatermarkPanelProps) => {
-    const isGroup = props.containerApi.groups.length > 0;
-
-    const addPanel = () => {
-        props.containerApi.addPanel({
-            id: counter.next().toString(),
-            component: 'default',
-        });
-    };
-
-    return (
-        <div
-            style={{
-                height: '100%',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                color: 'white',
-            }}
-        >
-            <div
-                style={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                }}
-            >
-                <span>
-                    This is a custom watermark. You can put whatever React
-                    component you want here
-                </span>
-                <span>
-                    <button onClick={addPanel}>Add New Panel</button>
-                </span>
-                {isGroup && (
-                    <span>
-                        <button
-                            onClick={() => {
-                                props.close();
-                            }}
-                        >
-                            Close Group
-                        </button>
-                    </span>
-                )}
-            </div>
-        </div>
-    );
-};
-
-export const DockviewWatermark = () => {
-    const [api, setApi] = React.useState<DockviewApi>();
-
-    const onReady = (event: DockviewReadyEvent) => {
-        // event.api.addPanel({
-        //     id: 'panel_1',
-        //     component: 'default',
-        // });
-
-        event.api.fromJSON({
-            grid: {
-                orientation: Orientation.HORIZONTAL,
-                root: { type: 'branch', data: [] },
-                height: 100,
-                width: 100,
-            },
-            panels: {},
-        });
-
-        setApi(event.api);
-    };
-
-    const onClick = () => {
-        if (!api) {
-            return;
-        }
-
-        api.addGroup();
-    };
-
-    return (
-        <div
-            style={{
-                height: '500px',
-                display: 'flex',
-                flexDirection: 'column',
-            }}
-        >
-            <div>
-                <button onClick={onClick}>Add Empty Group</button>
-            </div>
-            <DockviewReact
-                onReady={onReady}
-                components={components}
-                watermarkComponent={Watermark}
-                className="dockview-theme-abyss nested-dockview"
-            />
-        </div>
-    );
-};

packages/docs/versioned_docs/version-1.6.0/components/dockview.mdx

@@ -6,23 +6,20 @@ import {
     RenderingDockview,
     Checkbox,
 } from '@site/src/components/dockview/rendering';
-import { DndDockview } from '@site/src/components/dockview/dnd';
-import { EventsDockview } from '@site/src/components/dockview/events';
-import { ContextMenuDockview } from '@site/src/components/dockview/contextMenu';
-import { NestedDockview } from '@site/src/components/dockview/nested';
-import { CustomHeadersDockview } from '@site/src/components/dockview/customHeaders';
-import { DockviewGroupControl } from '@site/src/components/dockview/groupControl';
-import { DockviewWatermark } from '@site/src/components/dockview/watermark';
-import {
-    DockviewNative,
-    DockviewNative2,
-} from '@site/src/components/dockview/native';
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
-import DockviewPersistance from '@site/sandboxes/layout-persistance/src/app';
+import DockviewPersistance from '@site/sandboxes/layout-dockview/src/app';
 import SimpleDockview from '@site/sandboxes/simple-dockview/src/app';
 import ResizeDockview from '@site/sandboxes/resize-dockview/src/app';
+import NestedDockview from '@site/sandboxes/nested-dockview/src/app';
+import EventsDockview from '@site/sandboxes/events-dockview/src/app';
+import DndDockview from '@site/sandboxes/dnd-dockview/src/app';
+import DockviewGroupControl from '@site/sandboxes/groupcontrol-dockview/src/app';
+import DockviewWatermark from '@site/sandboxes/watermark-dockview/src/app';
+import CustomHeadersDockview from '@site/sandboxes/customheader-dockview/src/app';
+import DockviewNative from '@site/sandboxes/fullwidthtab-dockview/src/app';
+import DockviewNative2 from '@site/sandboxes/nativeapp-dockview/src/app';
 
 # Dockview