chore: docs

packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts

@@ -59,7 +59,7 @@ describe('tabsContainer', () => {
         fireEvent.dragEnter(emptySpace);
         fireEvent.dragOver(emptySpace);
 
-        expect(groupView.canDisplayOverlay).toBeCalled();
+        expect(groupView.canDisplayOverlay).toHaveBeenCalled();
 
         expect(
             cut.element.getElementsByClassName('drop-target-dropzone').length
@@ -127,7 +127,7 @@ describe('tabsContainer', () => {
         fireEvent.dragEnter(emptySpace);
         fireEvent.dragOver(emptySpace);
 
-        expect(groupView.canDisplayOverlay).toBeCalledTimes(0);
+        expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(0);
 
         expect(
             cut.element.getElementsByClassName('drop-target-dropzone').length
@@ -192,7 +192,7 @@ describe('tabsContainer', () => {
         fireEvent.dragEnter(emptySpace);
         fireEvent.dragOver(emptySpace);
 
-        expect(groupView.canDisplayOverlay).toBeCalledTimes(0);
+        expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(0);
 
         expect(
             cut.element.getElementsByClassName('drop-target-dropzone').length
@@ -257,7 +257,7 @@ describe('tabsContainer', () => {
         fireEvent.dragEnter(emptySpace);
         fireEvent.dragOver(emptySpace);
 
-        expect(groupView.canDisplayOverlay).toBeCalledTimes(0);
+        expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(0);
 
         expect(
             cut.element.getElementsByClassName('drop-target-dropzone').length
@@ -327,7 +327,7 @@ describe('tabsContainer', () => {
         fireEvent.dragEnter(emptySpace);
         fireEvent.dragOver(emptySpace);
 
-        expect(groupView.canDisplayOverlay).toBeCalledTimes(1);
+        expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(1);
 
         expect(
             cut.element.getElementsByClassName('drop-target-dropzone').length
@@ -507,7 +507,7 @@ describe('tabsContainer', () => {
         const eventPreventDefaultSpy = jest.spyOn(event, 'preventDefault');
         fireEvent(container, event);
 
-        expect(accessor.addFloatingGroup).toBeCalledWith(
+        expect(accessor.addFloatingGroup).toHaveBeenCalledWith(
             groupPanel,
             {
                 x: 100,
@@ -567,15 +567,15 @@ describe('tabsContainer', () => {
         const eventPreventDefaultSpy = jest.spyOn(event, 'preventDefault');
         fireEvent(container, event);
 
-        expect(accessor.addFloatingGroup).toBeCalledTimes(0);
-        expect(eventPreventDefaultSpy).toBeCalledTimes(0);
+        expect(accessor.addFloatingGroup).toHaveBeenCalledTimes(0);
+        expect(eventPreventDefaultSpy).toHaveBeenCalledTimes(0);
 
         const event2 = new KeyboardEvent('mousedown', { shiftKey: false });
         const eventPreventDefaultSpy2 = jest.spyOn(event2, 'preventDefault');
         fireEvent(container, event2);
 
-        expect(accessor.addFloatingGroup).toBeCalledTimes(0);
-        expect(eventPreventDefaultSpy2).toBeCalledTimes(0);
+        expect(accessor.addFloatingGroup).toHaveBeenCalledTimes(0);
+        expect(eventPreventDefaultSpy2).toHaveBeenCalledTimes(0);
     });
 
     test('that selecting a tab with shift down will move that tab into a new floating group', () => {

packages/docs/docs/components/advanced.mdx

@@ -1,8 +0,0 @@
-import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-import DockviewNative2 from '@site/sandboxes/nativeapp-dockview/src/app';
-
-# Window-like mananger with tabs
-
-<MultiFrameworkContainer sandboxId="nativeapp-dockview" react={DockviewNative2} />
-
-

packages/docs/docs/components/dockview.mdx

@@ -7,15 +7,15 @@ import { MultiFrameworkContainer } from '@site/src/components/ui/container';
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
-import DockviewPersistence from '@site/sandboxes/layout-dockview/src/app';
+// import DockviewPersistence 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 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/headeractions-dockview/src/app';
+// import DockviewGroupControl from '@site/sandboxes/headeractions-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';
@@ -28,10 +28,10 @@ import DockviewWithIFrames from '@site/sandboxes/iframe-dockview/src/app';
 // import DockviewFloating from '@site/sandboxes/floatinggroup-dockview/src/app';
 import DockviewLockedGroup from '@site/sandboxes/lockedgroup-dockview/src/app';
 import DockviewKeyboard from '@site/sandboxes/keyboard-dockview/src/app';
-import DockviewPopoutGroup from '@site/sandboxes/popoutgroup-dockview/src/app';
-import DockviewMaximizeGroup from '@site/sandboxes/maximizegroup-dockview/src/app';
-import DockviewRenderMode from '@site/sandboxes/rendermode-dockview/src/app';
-import DockviewScrollbars from '@site/sandboxes/scrollbars-dockview/src/app';
+// import DockviewPopoutGroup from '@site/sandboxes/popoutgroup-dockview/src/app';
+// import DockviewMaximizeGroup from '@site/sandboxes/maximizegroup-dockview/src/app';
+// import DockviewRenderMode from '@site/sandboxes/rendermode-dockview/src/app';
+// import DockviewScrollbars from '@site/sandboxes/scrollbars-dockview/src/app';
 
 import DockviewFocus from '@site/sandboxes/focus-dockview/src/app';
 
@@ -199,10 +199,10 @@ const onReady = (event: DockviewReadyEvent) => {
 Here is an example using the above code loading from and saving to localStorage.
 If you refresh the page you should notice your layout is loaded as you left it.
 
-<MultiFrameworkContainer
+{/* <MultiFrameworkContainer
     sandboxId="layout-dockview"
     react={DockviewPersistence}
-/>
+/> */}
 
 ## Scrollbars
 
@@ -215,10 +215,10 @@ The following container three views:
 - **Panel 3**: Sets `height: 100%` and defines an inner component with `overflow: auto` to enable the scrollbars.
 
 
-<MultiFrameworkContainer
+{/* <MultiFrameworkContainer
     sandboxId="scrollbars-dockview"
     react={DockviewScrollbars}
-/>
+/> */}
 
 ## Resizing
 
@@ -264,10 +264,10 @@ 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.
 
-<MultiFrameworkContainer
+{/* <MultiFrameworkContainer
     sandboxId="watermark-dockview"
     react={DockviewWatermark}
-/>
+/> */}
 
 ## Drag And Drop
 
@@ -447,11 +447,11 @@ const group = props.containerApi.addGroup();
 props.group.api.moveTo({ group });
 ```
 
-<MultiFrameworkContainer
+{/* <MultiFrameworkContainer
     height={600}
     sandboxId="popoutgroup-dockview"
     react={DockviewPopoutGroup}
-/>
+/> */}
 
 ## Maximized Groups
 
@@ -486,11 +486,11 @@ const result: boolean = api.isMaxmized();
 api.exitMaximized();
 ```
 
-<MultiFrameworkContainer
+{/* <MultiFrameworkContainer
     height={600}
     sandboxId="maximizegroup-dockview"
     react={DockviewMaximizeGroup}
-/>
+/> */}
 
 
 ## Panels
@@ -663,11 +663,11 @@ This design allows for maximum performance at some cost.
 - `always` mode. In this mode when panels become hidden the HTMLElement is not destroyed so all DOM state such as scrollbar positions will be maintained. This is implemented by rendering each panel as an absolutely positioned
 HTMLElement and hidden the HTMLElement with `display: none` when it should be hidden.
 
-<MultiFrameworkContainer
+{/* <MultiFrameworkContainer
     height={500}
     sandboxId="rendermode-dockview"
     react={DockviewRenderMode}
-/>
+/> */}
 
 ####
 
@@ -937,10 +937,10 @@ const RightHeaderActionsComponent = (props: IDockviewHeaderActionsProps) => {
 };
 ```
 
-<MultiFrameworkContainer
+{/* <MultiFrameworkContainer
     sandboxId="groupcontrol-dockview"
     react={DockviewGroupControl}
-/>
+/> */}
 
 ### Constraints
 

packages/docs/docs/components/events.mdx

@@ -1,12 +0,0 @@
-import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-import EventsDockview from '@site/sandboxes/events-dockview/src/app';
-
-# Events
-
-A simple example showing events fired by `dockviewz that can be interacted with.
-
-<MultiFrameworkContainer
-    height={600}
-    sandboxId="events-dockview"
-    react={EventsDockview}
-/>

packages/docs/docs/components/iframe.mdx

@@ -1,28 +0,0 @@
-import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-import DockviewWithIFrames from '@site/sandboxes/iframe-dockview/src/app';
-
-# iFrames
-
-iFrames required special attention because of a particular behaviour in how iFrames render:
-
-> Re-parenting an iFrame will reload the contents of the iFrame or the rephrase this, moving an iFrame within the DOM will cause a reload of its contents.
-
-You can find many examples of discussions on this. Two reputable forums for example are linked [here](https://bugzilla.mozilla.org/show_bug.cgi?id=254144) and [here](https://github.com/whatwg/html/issues/5484).
-
-To ensure iFrames work as expected you should render them in panels with `renderer: 'always'` to ensure they are never removed from the DOM, alternatively set the defaultRenderer to `always`.
-
-> See the **Panel Rendering** section for more information of render modes.
-
-```tsx title="Example of a panel using an alternative renderer"
-api.addPanel({
-  id: 'my_panel_id',
-  component: 'my_component',
-  renderer: 'always',
-});
-        ```
-
-<MultiFrameworkContainer
-    sandboxId="iframe-dockview"
-    height={600}
-    react={DockviewWithIFrames}
-/>

packages/docs/docs/components/nested.mdx

@@ -1,9 +0,0 @@
-import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-import NestedDockview from '@site/sandboxes/nested-dockview/src/app';
-
-# Nested Dockviews
-
-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`.
-
-<MultiFrameworkContainer sandboxId="nested-dockview" react={NestedDockview} />

packages/docs/docs/components/scrollbars.mdx

@@ -1,22 +0,0 @@
----
-title: Scrolling
----
-
-import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-import DockviewScrollbars from '@site/sandboxes/scrollbars-dockview/src/app';
-
-# Scrollbars
-
-Scrollbars will appear if the contents of your view has a fixed height. If you are using a relative height such
-as *100%* you will need to define an inner container with the appropiate `overflow` value to allow scrollbars to appear.
-
-The following container three views:
-- **Panel 1**: Sets `height: 100%` and no scrollbar appears even, the content is clipped.
-- **Panel 2**: Sets `height: 2000px` and a scrollbar does appear since a fixed height has been used.
-- **Panel 3**: Sets `height: 100%` and defines an inner component with `overflow: auto` to enable the scrollbars.
-
-
-<MultiFrameworkContainer
-    sandboxId="scrollbars-dockview"
-    react={DockviewScrollbars}
-/>

packages/docs/docs/components/theme.mdx

@@ -1,26 +0,0 @@
----
-title: Theme
-sidebar_position: 1
----
-
-import Link from '@docusaurus/Link';
-
-# Theme
-
-As well as importing the `dockview` stylesheet you must provide a class-based theme somewhere in your application. For example.
-
-```tsx
-// Providing a theme directly through the DockviewReact component props
-<DockviewReact className="dockview-theme-dark" />
-
-// Providing a theme somewhere in the DOM tree
-<div className="dockview-theme-dark">
-  <div>
-    {/**...  */}
-    <DockviewReact  />
-  </div>
-</div>
-```
-
-You can find more details on theming <Link to="../theme">here</Link>.
-

packages/docs/docs/components/watermark.mdx

@@ -1,15 +0,0 @@
-import useBaseUrl from '@docusaurus/useBaseUrl';
-import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-import DockviewWatermark from '@site/sandboxes/watermark-dockview/src/app';
-
-
-# Watermark
-
-When the dockview is empty you may want to display some fallback content, this is refered to as the `watermark`.
-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.
-
-<MultiFrameworkContainer
-    sandboxId="watermark-dockview"
-    react={DockviewWatermark}
-/>

packages/docs/docs/core/dnd/_category_.json

@@ -0,0 +1,6 @@
+{
+  "position": 3,
+  "label": "Drag & Drop",
+  "collapsible": true,
+  "collapsed": true
+}

packages/docs/docs/core/dnd/dragAndDrop copy.mdx

@@ -1,14 +1,25 @@
 ---
+title: 'Dnd'
 sidebar_position: 2
 ---
 
-
-
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import { MultiFrameworkContainer } from '@site/src/components/ui/container';
 import DndDockview from '@site/sandboxes/dnd-dockview/src/app';
 import DockviewExternalDnd from '@site/sandboxes/externaldnd-dockview/src/app';
 
+import { DocRef } from '@site/src/components/ui/reference/docRef';
+
+The dock makes heavy use of drag and drop functionalities.
+
+<DocRef declaration="DockviewApi"
+  methods={[
+    'onWillDragPanel', 'onWillDragGroup',
+    'onWillDrop', 'onDidDrop', 'onWillShowOverlay'
+  ]}
+  />
+
+
 # Drag And Drop
 
 You can override the conditions of the far edge overlays through the `rootOverlayModel` prop.

packages/docs/docs/core/dnd/dragAndDrop.mdx

@@ -0,0 +1,44 @@
+---
+title: 'Overview'
+sidebar_position: 2
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import { MultiFrameworkContainer } from '@site/src/components/ui/container';
+import DndDockview from '@site/sandboxes/dnd-dockview/src/app';
+import DockviewExternalDnd from '@site/sandboxes/externaldnd-dockview/src/app';
+
+import { DocRef } from '@site/src/components/ui/reference/docRef';
+
+Dockview supports a wide variety of built-in Drag and Drop possibilities.
+
+<h4>Position a tab between two other tabs</h4>
+
+<div style={{display:' flex', justifyContent: 'center'}}>
+  <img style={{ height: '50px' }} src={useBaseUrl('/img/add_to_tab.svg')} />
+</div>
+
+<h4>Position a tab at the end of a list of tabs</h4>
+
+<div style={{display:' flex', justifyContent: 'center'}}>
+  <img style={{ height: '50px' }} src={useBaseUrl('/img/add_to_empty_space.svg')} />
+</div>
+
+<h4>Merge one group with another group</h4>
+
+<div style={{display:' flex', justifyContent: 'center'}}>
+  <img style={{ height: '50px' }} src={useBaseUrl('/img/add_to_group.svg')} />
+</div>
+
+<h4>Move both Tabs and Groups in relation to another group</h4>
+
+
+<div style={{display:' flex', justifyContent: 'center'}}>
+  <img style={{ height: '300px' }} src={useBaseUrl('/img/drop_positions.svg')} />
+</div>
+
+<h4>Move both Tabs and Groups in relation to the container</h4>
+
+<div style={{display:' flex', justifyContent: 'center'}}>
+  <img style={{ height: '300px' }} src={useBaseUrl('/img/magnet_drop_positions.svg')} />
+</div>

packages/docs/docs/core/groups/constraints.mdx

@@ -0,0 +1,7 @@
+---
+title: Constraints
+---
+
+import { DocRef } from '@site/src/components/ui/reference/docRef';
+
+<DocRef declaration="DockviewGroupPanelApi" methods={['setConstraints', 'onDidConstraintsChange']} />

packages/docs/docs/core/groups/controls.mdx

@@ -2,49 +2,41 @@
 title: Group Controls
 ---
 
-import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-import DockviewGroupControl from '@site/sandboxes/headeractions-dockview/src/app';
+import LiveExample from '@site/src/components/ui/exampleFrame';
+import { DocRef } from '@site/src/components/ui/reference/docRef';
 
-## Group Controls Panel
+This section describes how you can customize the header component of each group.
 
-`DockviewReact` accepts `leftHeaderActionsComponent`, `rightHeaderActionsComponent` and `prefixHeaderActionsComponent` which expect a React component with props `IDockviewHeaderActionsProps`.
-These controls are rendered to left and right side of the space to the right of the tabs in the header bar as well as before the first tab in the case of the prefix header prop.
+<FrameworkSpecific framework='React'>
+  <DocRef declaration="IDockviewReactProps" methods={['leftHeaderActionsComponent', 'rightHeaderActionsComponent', 'prefixHeaderActionsComponent']} />
+</FrameworkSpecific>
+
+<FrameworkSpecific framework='JavaScript'>
+  <DocRef declaration="DockviewComponentOptions"
+    methods={['createLeftHeaderActionsElement', 'createRightHeaderActionsElement', 'createPrefixHeaderActionsElement']} />
+</FrameworkSpecific>
 
 ```tsx
-const Component: React.FunctionComponent<IDockviewHeaderActionsProps> = () => {
-    return <div>{'...'}</div>;
+const LeftComponent = (props: IDockviewHeaderActionsProps) => {
+    return <div>{/** content */}</div>;
 };
 
-return <DockviewReact {...props} leftHeaderActionsComponent={Component} rightHeaderActionsComponent={...} />;
-```
-
-As a simple example the below uses the `groupControlComponent` to render a small control that indicates whether the group
-is active and which panel is active in that group.
-
-```tsx
-const RightHeaderActionsComponent = (props: IDockviewHeaderActionsProps) => {
-    const isGroupActive = props.isGroupActive;
-    const activePanel = props.activePanel;
-
-    return (
-        <div className="dockview-groupcontrol-demo">
-            <span
-                className="dockview-groupcontrol-demo-group-active"
-                style={{
-                    background: isGroupActive ? 'green' : 'red',
-                }}
-            >
-                {isGroupActive ? 'Group Active' : 'Group Inactive'}
-            </span>
-            <span className="dockview-groupcontrol-demo-active-panel">{`activePanel: ${
-                activePanel?.id || 'null'
-            }`}</span>
-        </div>
-    );
+const RightComponent = (props: IDockviewHeaderActionsProps) => {
+       return <div>{/** content */}</div>;
 };
+
+const PrefixComponent = (props: IDockviewHeaderActionsProps) => {
+    return <div>{/** content */}</div>;
+};
+
+return <DockviewReact
+  leftHeaderActionsComponent={LeftComponent}
+  rightHeaderActionsComponent={RightComponent}
+  prefixHeaderActionsComponent={PrefixComponent}
+/>;
 ```
 
-<MultiFrameworkContainer
-    sandboxId="groupcontrol-dockview"
-    react={DockviewGroupControl}
-/>
+## Live Example
+
+<LiveExample framework="react" id="dockview/group-actions"/>
+

packages/docs/docs/core/groups/floatingGroups.mdx

@@ -6,12 +6,15 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import LiveExample from '@site/src/components/ui/exampleFrame';
 import { DocRef } from '@site/src/components/ui/reference/docRef';
 
-
-## Floating Groups
+This section describes floating groups.
 
 Dockview has built-in support for floating groups. Each floating container can contain a single group with many panels
 and you can have as many floating containers as needed. You cannot dock multiple groups together in the same floating container.
 
+## Options
+
+The following properties can be set to configure the behaviours of floating groups.
+
 <FrameworkSpecific framework='React'>
   <DocRef declaration="IDockviewReactProps" methods={['floatingGroupBounds', 'disableFloatingGroups']} />
 </FrameworkSpecific>
@@ -20,6 +23,8 @@ and you can have as many floating containers as needed. You cannot dock multiple
   <DocRef declaration="DockviewComponentOptions" methods={['floatingGroupBounds', 'disableFloatingGroups']} />
 </FrameworkSpecific>
 
+## Live Example
+
 <LiveExample framework="react" id="dockview/floating-groups"/>
 
 

packages/docs/docs/core/groups/maxmizedGroups.mdx

@@ -2,19 +2,29 @@
 title: Maximized Groups
 ---
 
-import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-import DockviewMaximizeGroup from '@site/sandboxes/maximizegroup-dockview/src/app';
 import { DocRef } from '@site/src/components/ui/reference/docRef';
+import LiveExample from '@site/src/components/ui/exampleFrame';
 
-## Maximized Groups
+This section described how to maxmimize groups.
 
-To maximize a group from the component `api`:
+
+:::info
+Floating and Popout groups cannot be maximized. Calling maximize function on groups in these states will have no effect.
+:::
+
+## API methods
+
+The following methods on the [API](/docs/api/dockview/overview) are related to maximizing groups.
 
 <DocRef declaration="DockviewPanelApi" methods={['maximize', 'isMaximized', 'exitMaximized']} />
 
+and the followng methods on the [Panel API](/docs/api/dockview/panelApi) are related to maximizing groups.
+
 <DocRef declaration="DockviewApi" methods={['maximizeGroup', 'hasMaximizedGroup', 'exitMaximizedGroup', 'onDidMaxmizedGroupChange']} />
 
-If you maximize a group that group will automatically become active.
+## Live Examples
+
+<LiveExample framework="react" id="dockview/maximize-group"/>
 
 ```tsx
 // maximize a specified group
@@ -45,8 +55,4 @@ const result: boolean = api.isMaxmized();
 api.exitMaximized();
 ```
 
-<MultiFrameworkContainer
-    height={600}
-    sandboxId="maximizegroup-dockview"
-    react={DockviewMaximizeGroup}
-/>
+

packages/docs/docs/core/groups/popoutGroups.mdx

@@ -2,9 +2,7 @@
 title: Popout Windows
 ---
 
-import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-import DockviewPopoutGroup from '@site/sandboxes/popoutgroup-dockview/src/app';
-
+import LiveExample from '@site/src/components/ui/exampleFrame';
 import { DocRef } from '@site/src/components/ui/reference/docRef';
 
 ## Popout Groups
@@ -48,9 +46,4 @@ const group = props.containerApi.addGroup();
 props.group.api.moveTo({ group });
 ```
 
-<MultiFrameworkContainer
-    height={600}
-    sandboxId="popoutgroup-dockview"
-    react={DockviewPopoutGroup}
-/>
-
+<LiveExample framework="react" id="dockview/popout-group"/>

packages/docs/docs/core/groups/resizing.mdx

@@ -0,0 +1,50 @@
+---
+title: Resizing
+---
+
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import { MultiFrameworkContainer } from '@site/src/components/ui/container';
+import DockviewResizeContainer from '@site/sandboxes/resizecontainer-dockview/src/app';
+import ResizeDockview from '@site/sandboxes/resize-dockview/src/app';
+
+import { DocRef } from '@site/src/components/ui/reference/docRef';
+
+<DocRef declaration="DockviewGroupPanelApi" methods={['height', 'width', 'setSize', 'onDidDimensionsChange']} />
+
+
+## Panel Resizing
+
+Each Dockview contains of a number of groups and each group has a number of panels.
+Logically a user may want to resize a panel, but this translates to resizing the group which contains that panel.
+
+You can set the size of a panel using `props.api.setSize(...)`.
+You can also set the size of the group associated with the panel using `props.api.group.api.setSize(...)` although this isn't recommended
+due to the clunky syntax.
+
+```tsx
+// it's mandatory to provide either a height or a width, providing both is optional
+props.api.setSize({
+    height: 100,
+    width: 200,
+});
+
+// you could also resize the panels group, although not recommended it achieved the same result
+props.api.group.api.setSize({
+    height: 100,
+    width: 200,
+});
+```
+
+You can see an example invoking both approaches below.
+
+<MultiFrameworkContainer sandboxId="resize-dockview" react={ResizeDockview} />
+
+## Container Resizing
+
+The component will automatically resize to it's container.
+
+<MultiFrameworkContainer
+    sandboxId="resizecontainer-dockview"
+    react={DockviewResizeContainer}
+/>

packages/docs/docs/core/panels/register.mdx

@@ -8,8 +8,8 @@ This section describes how to register a panel.
 You can register panes through the `components` option.
 
 <FrameworkSpecific framework='React'>
-```jsx
-<DockviewReact components={{
+```tsx
+const components = {
   component_1: (props: IDockviewPanelProps) => {
     const api: DockviewPanelApi  = props.api;
     const containerApi: DockviewApi  = props.containerApi;
@@ -19,7 +19,9 @@ You can register panes through the `components` option.
   component_2: (props: IDockviewPanelProps) => {
     return <div>{/** logic */}</div>
   }
-}}/>
+}
+
+return <DockviewReact components={components}/>
 ```
 </FrameworkSpecific>
 

packages/docs/docs/core/panels/rendering.mdx

@@ -4,9 +4,11 @@ sidebar_postiion: 5
 ---
 
 import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-import DockviewRenderMode from '@site/sandboxes/rendermode-dockview/src/app';
 import RenderingDockview from '@site/sandboxes/rendering-dockview/src/app';
 
+import LiveExample from '@site/src/components/ui/exampleFrame';
+
+
 Rendering type is an important consideration when creating your application and whether your panels should be destroyed when hidden.
 
 :::info
@@ -68,11 +70,8 @@ api.addPanel({
 
 ## Live Example
 
-<MultiFrameworkContainer
-    height={500}
-    sandboxId="rendermode-dockview"
-    react={DockviewRenderMode}
-/>
+<LiveExample framework="react" id="dockview/render-mode"/>
+
 
 By default `DockviewReact` only adds to the DOM those panels that are visible,
 if a panel is not the active tab and not shown the contents of the hidden panel will be removed from the DOM.

packages/docs/docs/core/panels/resizing.mdx

@@ -1,10 +1,17 @@
+---
+title: Resizing
+---
+
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import { MultiFrameworkContainer } from '@site/src/components/ui/container';
 import DockviewResizeContainer from '@site/sandboxes/resizecontainer-dockview/src/app';
 import ResizeDockview from '@site/sandboxes/resize-dockview/src/app';
 
+import { DocRef } from '@site/src/components/ui/reference/docRef';
+
+<DocRef declaration="DockviewPanelApi" methods={['height', 'width', 'setSize', 'onDidDimensionsChange']} />
+
 
-# Resizing
 
 ## Panel Resizing
 

packages/docs/docs/core/scrollbars.mdx

@@ -0,0 +1,20 @@
+---
+title: Scrolling
+---
+
+import LiveExample from '@site/src/components/ui/exampleFrame';
+
+It's important to understand how to configure the scrollbar within a panel.
+
+A panel will appear with a scrollbar if the the contents of your view has a fixed height.
+If you are using a relative height such as `100%` you will need a child container
+with the appropiate `overflow` value to allow for scrollbars.
+
+## Live Examples
+
+The following example contains three views:
+- **Panel 1** (`height: 100%`): No scrollbar appears and the content is clipped.
+- **Panel 2** (`height: 2000px`): A scrollbar does appear since a fixed height has been used.
+- **Panel 3**: `height: 100%` and a child component with `overflow: auto` which will enable scrollbars.
+
+<LiveExample framework="react" id="dockview/scrollbars"/>

packages/docs/docs/core/state/_category_.json

@@ -0,0 +1,6 @@
+{
+  "position": 3,
+  "label": "State",
+  "collapsible": true,
+  "collapsed": true
+}

packages/docs/docs/core/state/load.mdx

@@ -0,0 +1,47 @@
+---
+title: Loading State
+---
+
+import { MultiFrameworkContainer } from '@site/src/components/ui/container';
+import LiveExample from '@site/src/components/ui/exampleFrame';
+import { DocRef } from '@site/src/components/ui/reference/docRef';
+
+This section described loading a dock layout.9
+
+<DocRef declaration="DockviewApi" methods={['fromJSON', 'onDidLayoutFromJSON']} />
+
+## Layout Persistence
+
+Layouts are loaded and saved via to `fromJSON` and `toJSON` methods on the Dockview api.
+The api also exposes an event `onDidLayoutChange` you can listen on to determine when the layout has changed.
+Below are some snippets showing how you might load from and save to localStorage.
+
+If you try to load a invalid or corrupted layout the dock will recover g
+
+```tsx title="Loading a layout from localStorage"
+const onReady = (event: DockviewReadyEvent) => {
+    const layoutString = localStorage.getItem('dockview_persistence_layout');
+
+    let success = false;
+
+    if (layoutString) {
+        try {
+            const layout = JSON.parse(layoutString);
+            event.api.fromJSON(layout);
+            success = true;
+        } catch (err) {
+            // log the error
+        }
+    }
+
+    if (!success) {
+        // do something if there is no layout or there was a loading error
+    }
+};
+```
+
+Here is an example using the above code loading from and saving to localStorage.
+If you refresh the page you should notice your layout is loaded as you left it.
+
+<LiveExample framework="react" id="dockview/layout"/>
+

packages/docs/docs/core/state/save.mdx

@@ -1,12 +1,19 @@
 ---
-title: Layouts
+title: Saving State
 ---
 
 
 import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-import DockviewPersistence from '@site/sandboxes/layout-dockview/src/app';
+import LiveExample from '@site/src/components/ui/exampleFrame';
+import { DocRef } from '@site/src/components/ui/reference/docRef';
 
-# Layout Persistence
+This section describes how to serialize a dockview instance.
+
+<DocRef declaration="DockviewApi" methods={['toJSON', 'onDidLayoutChange']} />
+
+
+
+## Layout Persistence
 
 Layouts are loaded and saved via to `fromJSON` and `toJSON` methods on the Dockview api.
 The api also exposes an event `onDidLayoutChange` you can listen on to determine when the layout has changed.
@@ -58,7 +65,5 @@ const onReady = (event: DockviewReadyEvent) => {
 Here is an example using the above code loading from and saving to localStorage.
 If you refresh the page you should notice your layout is loaded as you left it.
 
-<MultiFrameworkContainer
-    sandboxId="layout-dockview"
-    react={DockviewPersistence}
-/>
+<LiveExample framework="react" id="dockview/layout"/>
+

packages/docs/docs/core/watermark.mdx

@@ -0,0 +1,31 @@
+---
+title: Watermark
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+import { DocRef } from '@site/src/components/ui/reference/docRef';
+import LiveExample from '@site/src/components/ui/exampleFrame';
+
+When there is nothing else to display.
+
+When the dock is empty or a group has no panels (an empty group) you can render some fallback
+content which is refered to as a `watermark`. Both are controlled through the same provided component.
+
+## Options
+
+The following properties can be set to configure the behaviours of floating groups.
+
+<FrameworkSpecific framework='React'>
+  <DocRef declaration="IDockviewReactProps" methods={['watermarkComponent']} />
+</FrameworkSpecific>
+
+<FrameworkSpecific framework='JavaScript'>
+  <DocRef declaration="DockviewComponentOptions"
+  methods={['watermarkComponent', 'watermarkFrameworkComponent', 'frameworkComponentFactory']}
+  />
+</FrameworkSpecific>
+
+## Live Examples
+
+<LiveExample framework="react" id="dockview/watermark"/>

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

@@ -657,6 +657,18 @@ const DockviewDemo = (props: { theme?: string }) => {
                                 >
                                     pop
                                 </button>
+                                <button
+                                    onClick={() => {
+                                        const panel = api?.getGroup(x);
+                                        if (panel?.api.isMaximized()) {
+                                            panel.api.exitMaximized();
+                                        } else {
+                                            panel?.api.maximize();
+                                        }
+                                    }}
+                                >
+                                    max
+                                </button>
                             </>
                         );
                     })}

packages/docs/sandboxes/react/dockview/group-actions/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "headeractions-dockview",
+  "name": "dockview.group-actions",
   "description": "",
   "keywords": [
     "dockview"

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

@@ -1,5 +1,5 @@
 {
-  "name": "layout-dockview",
+  "name": "dockview.layout",
   "description": "",
   "keywords": [
     "dockview"
@@ -29,4 +29,4 @@
     "not ie <= 11",
     "not op_mini all"
   ]
-}
+}

packages/docs/sandboxes/react/dockview/maximize-group/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "maximizegroup-dockview",
+  "name": "dockview.maximize-group",
   "description": "",
   "keywords": [
     "dockview"

packages/docs/sandboxes/react/dockview/popout-group/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "popout-dockview",
+  "name": "dockview.popout-group",
   "description": "",
   "keywords": [
     "dockview"
@@ -30,4 +30,4 @@
     "not ie <= 11",
     "not op_mini all"
   ]
-}
+}

packages/docs/sandboxes/react/dockview/render-mode/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "rendermode-dockview",
+  "name": "dockview.render-mode",
   "description": "",
   "keywords": [
     "dockview"

packages/docs/sandboxes/react/dockview/scrollbars/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "scrollbars-dockview",
+  "name": "dockview.scrollbars",
   "description": "",
   "keywords": [
     "dockview"
@@ -31,4 +31,4 @@
     "not ie <= 11",
     "not op_mini all"
   ]
-}
+}

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

@@ -1,5 +1,5 @@
 {
-  "name": "watermark-dockview",
+  "name": "dockview.watermark",
   "description": "",
   "keywords": [
     "dockview"
@@ -29,4 +29,4 @@
     "not ie <= 11",
     "not op_mini all"
   ]
-}
+}

packages/docs/src/components/ui/reference/docRef.tsx

@@ -110,7 +110,6 @@ const Row = (props: { doc: Doc }) => {
             >
                 <div
                     style={{
-                        // maxWidth: '30%',
                         display: 'flex',
                         flexDirection: 'column',
                         alignItems: 'start',