From ab5a11f13b973e7bb9023a884ab0ce389af4e058 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Wed, 28 Aug 2024 21:53:08 +0100
Subject: [PATCH] chore: docs

---
 packages/docs/docs/advanced/events.mdx        |  12 -
 packages/docs/docs/core/dnd/external.mdx      |  18 +-
 packages/docs/docs/core/overview.mdx          |   9 +
 packages/docs/docs/core/panels/register.mdx   |  33 +-
 packages/docs/docs/core/watermark.mdx         |   2 +-
 .../docs/overview/getStarted/installation.mdx |   2 +-
 .../docs/docs/overview/getStarted/theme.mdx   |   7 +-
 .../sandboxes/iframe-dockview/src/app.tsx     |  24 +-
 .../react/dockview/demo-dockview/src/app.scss |  56 +-
 .../react/dockview/demo-dockview/src/app.tsx  |  44 +-
 .../demo-dockview/src/gridActions.tsx         | 130 ++++-
 .../demo-dockview/src/groupActions.tsx        |  10 +-
 .../demo-dockview/src/panelBuilder.tsx        | 115 ++++
 .../docs/src/components/frameworkSpecific.tsx |   2 +-
 packages/docs/src/generated/api.output.json   | 547 ++++++++++++++----
 .../dockview/demo-dockview/react/src/app.tsx  |   7 +-
 .../dockview/watermark/react/src/app.tsx      |   3 +-
 .../watermark/typescript/src/index.ts         | 135 +++++
 18 files changed, 953 insertions(+), 203 deletions(-)
 delete mode 100644 packages/docs/docs/advanced/events.mdx
 create mode 100644 packages/docs/sandboxes/react/dockview/demo-dockview/src/panelBuilder.tsx
 create mode 100644 packages/docs/templates/dockview/watermark/typescript/src/index.ts

diff --git a/packages/docs/docs/advanced/events.mdx b/packages/docs/docs/advanced/events.mdx
deleted file mode 100644
index e4edada93..000000000
--- a/packages/docs/docs/advanced/events.mdx
+++ /dev/null
@@ -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}
-/>
diff --git a/packages/docs/docs/core/dnd/external.mdx b/packages/docs/docs/core/dnd/external.mdx
index 7e80d2dc7..7264446a1 100644
--- a/packages/docs/docs/core/dnd/external.mdx
+++ b/packages/docs/docs/core/dnd/external.mdx
@@ -9,25 +9,9 @@ import { DocRef } from '@site/src/components/ui/reference/docRef';
 import LiveExample from '@site/src/components/ui/exampleFrame';
 
 <DocRef declaration="DockviewApi"
-  methods={['onDidDrop']}
+  methods={['onDidDrop', 'onUnhandledDragOverEvent']}
 />
 
-
-<FrameworkSpecific framework='React'>
-  <DocRef declaration="IDockviewReactProps" methods={['showDndOverlay']} />
-</FrameworkSpecific>
-
-<FrameworkSpecific framework='Vue'>
-  <DocRef declaration="IDockviewVueProps" methods={['showDndOverlay']} />
-</FrameworkSpecific>
-
-<FrameworkSpecific framework='JavaScript'>
-  <DocRef declaration="DockviewComponentOptions"
-  methods={['showDndOverlay']}
-  />
-</FrameworkSpecific>
-
-
 ## Intercepting Drag Events
 
 You can intercept drag events to attach your own metadata using the `onWillDragPanel` and `onWillDragGroup` api methods.
diff --git a/packages/docs/docs/core/overview.mdx b/packages/docs/docs/core/overview.mdx
index abedc5738..f3cf26628 100644
--- a/packages/docs/docs/core/overview.mdx
+++ b/packages/docs/docs/core/overview.mdx
@@ -8,6 +8,15 @@ This section provided a core overview.
 The component takes a collection of [Options](/docs/api/dockview/options) as inputs and
 once you have created a dock you can store a reference to the [API](/docs/api/dockview/overview) that is created.
 
+
+<FrameworkSpecific framework='JavaScript'>
+```tsx
+const element: HTMLElement
+const options: DockviewComponentOptions
+const api: DockviewApi = createDockview(element, options);
+```
+</FrameworkSpecific>
+
 <FrameworkSpecific framework='React'>
 ```tsx
 function onReady(event: DockviewReadyEvent) {
diff --git a/packages/docs/docs/core/panels/register.mdx b/packages/docs/docs/core/panels/register.mdx
index 0b3b834be..5f90c7bb5 100644
--- a/packages/docs/docs/core/panels/register.mdx
+++ b/packages/docs/docs/core/panels/register.mdx
@@ -20,7 +20,7 @@ You can register panels through the dock  [option](/docs/api/dockview/options) `
 
 
 <FrameworkSpecific framework='JavaScript'>
-  <DocRef declaration="DockviewComponentOptions" methods={['components']} />
+  <DocRef declaration="DockviewComponentOptions" methods={['createComponent']} />
 </FrameworkSpecific>
 
 
@@ -44,6 +44,37 @@ return <DockviewReact components={components}/>
 </FrameworkSpecific>
 
 
+<FrameworkSpecific framework='JavaScript'>
+```tsx
+class Panel implements IContentRenderer {
+    private readonly _element: HTMLElement;
+
+    get element(): HTMLElement {
+        return this._element;
+    }
+
+    constructor() {
+        this._element = document.createElement('div');
+    }
+
+    init(parameters: GroupPanelPartInitParameters): void {
+        //
+    }
+}
+
+
+const api = createDockview(parentElement, {
+    createComponent: (options) => {
+        switch (options.name) {
+            case 'component_1':
+                return new Panel();
+        }
+    },
+});
+```
+</FrameworkSpecific>
+
+
 <FrameworkSpecific framework='Vue'>
 ```tsx
 const App = {
diff --git a/packages/docs/docs/core/watermark.mdx b/packages/docs/docs/core/watermark.mdx
index 7c8549ff3..e2416a6d8 100644
--- a/packages/docs/docs/core/watermark.mdx
+++ b/packages/docs/docs/core/watermark.mdx
@@ -25,7 +25,7 @@ The following properties can be set to configure the behaviours of floating grou
 
 <FrameworkSpecific framework='JavaScript'>
   <DocRef declaration="DockviewComponentOptions"
-  methods={['watermarkComponent', 'watermarkFrameworkComponent', 'frameworkComponentFactory']}
+  methods={['createWatermarkComponent']}
   />
 </FrameworkSpecific>
 
diff --git a/packages/docs/docs/overview/getStarted/installation.mdx b/packages/docs/docs/overview/getStarted/installation.mdx
index 4503011d6..2f0e97935 100644
--- a/packages/docs/docs/overview/getStarted/installation.mdx
+++ b/packages/docs/docs/overview/getStarted/installation.mdx
@@ -18,7 +18,7 @@ npm install dockview-core
 Firstly, install the `dockview` library:
 
 ```sh
-npm install dockview
+npm install dockview-react
 ```
 </FrameworkSpecific>
 
diff --git a/packages/docs/docs/overview/getStarted/theme.mdx b/packages/docs/docs/overview/getStarted/theme.mdx
index 06e9189c3..2e89eefe6 100644
--- a/packages/docs/docs/overview/getStarted/theme.mdx
+++ b/packages/docs/docs/overview/getStarted/theme.mdx
@@ -19,10 +19,15 @@ Firstly, you should import `dockview.css`:
 
 <FrameworkSpecific framework='React'>
 ```css
-@import './node_modules/dockview/dist/styles/dockview.css';
+@import './node_modules/dockview-react/dist/styles/dockview.css';
 ```
 </FrameworkSpecific>
 
+<FrameworkSpecific framework='Vue'>
+```css
+@import './node_modules/dockview-vue/dist/styles/dockview.css';
+```
+</FrameworkSpecific>
 
 
 ## Provided themes
diff --git a/packages/docs/sandboxes/iframe-dockview/src/app.tsx b/packages/docs/sandboxes/iframe-dockview/src/app.tsx
index 5a6587484..5e2b1a882 100644
--- a/packages/docs/sandboxes/iframe-dockview/src/app.tsx
+++ b/packages/docs/sandboxes/iframe-dockview/src/app.tsx
@@ -1,13 +1,33 @@
-import { DockviewReact, DockviewReadyEvent } from 'dockview';
+import {
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview';
 import * as React from 'react';
 
 const components = {
-    iframeComponent: () => {
+    iframeComponent: (props: IDockviewPanelProps) => {
+        const [enabled, setEnabled] = React.useState<boolean>(
+            props.api.isActive
+        );
+
+        React.useEffect(() => {
+            const disposable = props.api.onDidActiveChange((event) => {
+                setEnabled(event.isActive);
+                console.log(event);
+            });
+
+            return () => {
+                disposable.dispose();
+            };
+        }, [props.api]);
+
         return (
             <iframe
                 style={{
                     width: '100%',
                     height: '100%',
+                    pointerEvents: enabled ? 'inherit' : 'none',
                 }}
                 src="https://dockview.dev"
             />
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.scss b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.scss
index 001e591dd..6abc9a64d 100644
--- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.scss
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.scss
@@ -15,8 +15,6 @@
     }
 }
 
-
-
 .data-table {
     table {
         font-size: 11px;
@@ -58,35 +56,41 @@
         .selected {
             background-color: #4864dc;
         }
+    }
 
-        .demo-button {
-            min-width: 50px;
-            padding: 0px 2px;
-            border-radius: 0px;
-            display: flex;
-            flex-grow: 1;
-            align-items: center;
-            outline: 1px solid #4c65d4;
+    .button-group {
+        button {
+            margin-right: 0px;
         }
+    }
 
-        .demo-icon-button {
-            outline: 1px solid #4c65d4;
-            flex-grow: 1;
-            display: flex;
-            align-items: center;
-            border-radius: 0px;
-            padding: 0px 4px;
-            border: none;
-            cursor: pointer;
+    .demo-button {
+        min-width: 50px;
+        padding: 0px 2px;
+        border-radius: 0px;
+        display: flex;
+        flex-grow: 1;
+        align-items: center;
+        outline: 1px solid #4c65d4;
+    }
 
-            &:disabled {
-                color: gray;
-                cursor: help;
-            }
+    .demo-icon-button {
+        outline: 1px solid #4c65d4;
+        flex-grow: 1;
+        display: flex;
+        align-items: center;
+        border-radius: 0px;
+        padding: 0px 4px;
+        border: none;
+        cursor: pointer;
+
+        &:disabled {
+            color: gray;
+            cursor: help;
+        }
 
-            span {
-                font-size: 16px;
-            }
+        span {
+            font-size: 16px;
         }
     }
 }
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
index 833f62a99..2814b8e57 100644
--- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
@@ -13,7 +13,7 @@ import { GridActions } from './gridActions';
 import { PanelActions } from './panelActions';
 import { GroupActions } from './groupActions';
 import { LeftControls, PrefixHeaderControls, RightControls } from './controls';
-import { Table, usePanelApiMetadata } from './debugPanel';
+import { usePanelApiMetadata } from './debugPanel';
 
 const components = {
     default: (props: IDockviewPanelProps) => {
@@ -26,6 +26,7 @@ const components = {
                     overflow: 'auto',
                     color: 'white',
                     position: 'relative',
+                    padding: 5,
                     // border: '5px dashed purple',
                 }}
             >
@@ -43,12 +44,50 @@ const components = {
                 >
                     {props.api.title}
                 </span>
+
+                <div>
+                    <span>{'Panel Rendering Mode: '}</span>
+                    <span>{metadata.renderer.value}</span>
+                    <button
+                        onClick={() => {
+                            props.api.setRenderer(
+                                props.api.renderer === 'always'
+                                    ? 'onlyWhenVisible'
+                                    : 'always'
+                            );
+                        }}
+                    >
+                        Toggle
+                    </button>
+                </div>
             </div>
         );
     },
-    iframe: () => {
+    nested: (props: IDockviewPanelProps) => {
+        return (
+            <DockviewReact
+                components={components}
+                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',
+                        floating: true,
+                    });
+                }}
+                className={'dockview-theme-abyss'}
+            />
+        );
+    },
+    iframe: (props: IDockviewPanelProps) => {
         return (
             <iframe
+                onMouseDown={() => {
+                    if (!props.api.isActive) {
+                        props.api.setActive();
+                    }
+                }}
                 style={{
                     width: '100%',
                     height: '100%',
@@ -210,6 +249,7 @@ const DockviewDemo = (props: { theme?: string }) => {
                 padding: '8px',
                 backgroundColor: 'rgba(0,0,50,0.25)',
                 borderRadius: '8px',
+                position: 'relative',
                 ...css,
             }}
         >
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
index 1babd4ce0..c8ba04aca 100644
--- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
@@ -2,8 +2,96 @@ import { DockviewApi } from 'dockview';
 import * as React from 'react';
 import { defaultConfig, nextId } from './defaultLayout';
 
+import { createRoot, Root } from 'react-dom/client';
+import { PanelBuilder } from './panelBuilder';
+
+let mount = document.querySelector('.popover-anchor') as HTMLElement | null;
+
+if (!mount) {
+    mount = document.createElement('div');
+    mount.className = 'popover-anchor';
+    document.body.insertBefore(mount, document.body.firstChild);
+}
+
+const PopoverComponent = (props: {
+    close: () => void;
+    component: React.FC<{ close: () => void }>;
+}) => {
+    const ref = React.useRef<HTMLDivElement>(null);
+
+    React.useEffect(() => {
+        const handler = (ev: MouseEvent) => {
+            let target = ev.target as HTMLElement;
+
+            while (target.parentElement) {
+                if (target === ref.current) {
+                    return;
+                }
+                target = target.parentElement;
+            }
+
+            props.close();
+        };
+
+        window.addEventListener('mousedown', handler);
+
+        return () => {
+            window.removeEventListener('mousedown', handler);
+        };
+    }, []);
+
+    return (
+        <div
+            style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                zIndex: 9999,
+                height: '100%',
+                width: '100%',
+            }}
+        >
+            <div
+                ref={ref}
+                style={{
+                    position: 'absolute',
+                    top: '50%',
+                    left: '50%',
+                    transform: 'translate(-50%,-50%)',
+                    backgroundColor: 'black',
+                    color: 'white',
+                    padding: 10,
+                }}
+            >
+                <props.component close={props.close} />
+            </div>
+        </div>
+    );
+};
+
+function usePopover() {
+    return {
+        open: (Component: React.FC<{ close: () => void }>) => {
+            const el = document.createElement('div');
+            mount!.appendChild(el);
+            const root = createRoot(el);
+
+            root.render(
+                <PopoverComponent
+                    component={Component}
+                    close={() => {
+                        root.unmount();
+                        el.remove();
+                    }}
+                />
+            );
+        },
+    };
+}
+
 export const GridActions = (props: {
     api?: DockviewApi;
+    containerRef: HTMLElement;
     hasCustomWatermark: boolean;
     toggleCustomWatermark: () => void;
 }) => {
@@ -39,13 +127,21 @@ export const GridActions = (props: {
         }
     };
 
-    const onAddPanel = (options?: { inactive: boolean }) => {
-        props.api?.addPanel({
-            id: `id_${Date.now().toString()}`,
-            component: 'default',
-            title: `Tab ${nextId()}`,
-            inactive: options?.inactive,
-        });
+    const popover = usePopover();
+
+    const onAddPanel = (options?: { advanced: boolean }) => {
+        if (options?.advanced) {
+            popover.open(({ close }) => {
+                return <PanelBuilder api={props.api!} done={close} />;
+            });
+        } else {
+            props.api?.addPanel({
+                id: `id_${Date.now().toString()}`,
+                component: 'default',
+                title: `Tab ${nextId()}`,
+                renderer: 'always',
+            });
+        }
     };
 
     const onAddGroup = () => {
@@ -60,15 +156,17 @@ export const GridActions = (props: {
 
     return (
         <div className="action-container">
-            <button className="text-button" onClick={() => onAddPanel()}>
-                Add Panel
-            </button>
-            <button
-                className="text-button"
-                onClick={() => onAddPanel({ inactive: true })}
-            >
-                Add Inactive Panel
-            </button>
+            <div className="button-group">
+                <button className="text-button" onClick={() => onAddPanel()}>
+                    Add Panel
+                </button>
+                <button
+                    className="demo-icon-button"
+                    onClick={() => onAddPanel({ advanced: true })}
+                >
+                    <span className="material-symbols-outlined">tune</span>
+                </button>
+            </div>
             <button className="text-button" onClick={onAddGroup}>
                 Add Group
             </button>
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/groupActions.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/groupActions.tsx
index 57c9433ac..815621b72 100644
--- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/groupActions.tsx
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/groupActions.tsx
@@ -88,14 +88,18 @@ const GroupAction = (props: {
                     }
                     onClick={() => {
                         if (group) {
+
                             props.api.addFloatingGroup(group, {
+                                width: 400,
+                                height: 300,
+                                x: 50,
+                                y: 50,
                                 position: {
-                                    width: 400,
-                                    height: 300,
-                                    top: 50,
+                                    bottom: 50,
                                     right: 50,
                                 },
                             });
+
                         }
                     }}
                 >
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/panelBuilder.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/panelBuilder.tsx
new file mode 100644
index 000000000..e6d53e05a
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/panelBuilder.tsx
@@ -0,0 +1,115 @@
+import { DockviewApi } from 'dockview';
+import * as React from 'react';
+import { nextId } from './defaultLayout';
+
+export const PanelBuilder = (props: { api: DockviewApi; done: () => void }) => {
+    const [parameters, setParameters] = React.useState<{
+        initialWidth?: number;
+        initialHeight?: number;
+        maximumHeight?: number;
+        maximumWidth?: number;
+        minimumHeight?: number;
+        minimumWidth?: number;
+    }>({});
+    return (
+        <div>
+            <div
+                style={{
+                    display: 'grid',
+                    gridTemplateColumns: '1fr 1fr',
+                }}
+            >
+                <div>{'Initial Width'}</div>
+                <input
+                    type="number"
+                    value={parameters.initialWidth}
+                    onChange={(event) =>
+                        setParameters((_) => ({
+                            ..._,
+                            initialWidth: Number(event.target.value),
+                        }))
+                    }
+                />
+                <div>{'Initial Height'}</div>
+                <input
+                    type="number"
+                    value={parameters.initialHeight}
+                    onChange={(event) =>
+                        setParameters((_) => ({
+                            ..._,
+                            initialHeight: Number(event.target.value),
+                        }))
+                    }
+                />
+                <div>{'Maximum Width'}</div>
+                <input
+                    type="number"
+                    value={parameters.maximumWidth}
+                    onChange={(event) =>
+                        setParameters((_) => ({
+                            ..._,
+                            maximumWidth: Number(event.target.value),
+                        }))
+                    }
+                />
+                <div>{'Maximum Height'}</div>
+                <input
+                    type="number"
+                    value={parameters.maximumHeight}
+                    onChange={(event) =>
+                        setParameters((_) => ({
+                            ..._,
+                            maximumHeight: Number(event.target.value),
+                        }))
+                    }
+                />
+                <div>{'Minimum Width'}</div>
+                <input
+                    type="number"
+                    value={parameters.minimumWidth}
+                    onChange={(event) =>
+                        setParameters((_) => ({
+                            ..._,
+                            minimumWidth: Number(event.target.value),
+                        }))
+                    }
+                />
+                <div>{'Minimum Height'}</div>
+                <input
+                    type="number"
+                    value={parameters.minimumHeight}
+                    onChange={(event) =>
+                        setParameters((_) => ({
+                            ..._,
+                            minimumHeight: Number(event.target.value),
+                        }))
+                    }
+                />
+            </div>
+            <div>
+                <button
+                    onClick={() => {
+                        props.done();
+                    }}
+                >
+                    Cancel
+                </button>
+                <button
+                    onClick={() => {
+                        props.api?.addPanel({
+                            id: `id_${Date.now().toString()}`,
+                            component: 'default',
+                            title: `Tab ${nextId()}`,
+                            renderer: 'always',
+                            ...parameters,
+                        });
+
+                        props.done();
+                    }}
+                >
+                    Go
+                </button>
+            </div>
+        </div>
+    );
+};
diff --git a/packages/docs/src/components/frameworkSpecific.tsx b/packages/docs/src/components/frameworkSpecific.tsx
index efe8eee7e..65ae1d549 100644
--- a/packages/docs/src/components/frameworkSpecific.tsx
+++ b/packages/docs/src/components/frameworkSpecific.tsx
@@ -10,7 +10,7 @@ export interface FrameworkDescriptor {
 }
 
 const frameworks: FrameworkDescriptor[] = [
-    // { value: 'JavaScript', label: 'JavaScript', icon: 'img/js-icon.svg' },
+    { value: 'JavaScript', label: 'JavaScript', icon: 'img/js-icon.svg' },
     { value: 'React', label: 'React', icon: 'img/react-icon.svg' },
     { value: 'Vue', label: 'Vue', icon: 'img/vue-icon.svg' },
     // { value: 'Angular', label: 'Angular' },
diff --git a/packages/docs/src/generated/api.output.json b/packages/docs/src/generated/api.output.json
index 5cb7c80fc..7ddc5d38b 100644
--- a/packages/docs/src/generated/api.output.json
+++ b/packages/docs/src/generated/api.output.json
@@ -9014,6 +9014,98 @@
                     }
                 }
             },
+            {
+                "name": "maximumHeight",
+                "code": "number | undefined",
+                "kind": "accessor",
+                "value": {
+                    "name": "maximumHeight",
+                    "code": "number | undefined",
+                    "kind": "getSignature",
+                    "returnType": {
+                        "type": "or",
+                        "values": [
+                            {
+                                "type": "intrinsic",
+                                "value": "number"
+                            },
+                            {
+                                "type": "intrinsic",
+                                "value": "undefined"
+                            }
+                        ]
+                    }
+                }
+            },
+            {
+                "name": "maximumWidth",
+                "code": "number | undefined",
+                "kind": "accessor",
+                "value": {
+                    "name": "maximumWidth",
+                    "code": "number | undefined",
+                    "kind": "getSignature",
+                    "returnType": {
+                        "type": "or",
+                        "values": [
+                            {
+                                "type": "intrinsic",
+                                "value": "number"
+                            },
+                            {
+                                "type": "intrinsic",
+                                "value": "undefined"
+                            }
+                        ]
+                    }
+                }
+            },
+            {
+                "name": "minimumHeight",
+                "code": "number | undefined",
+                "kind": "accessor",
+                "value": {
+                    "name": "minimumHeight",
+                    "code": "number | undefined",
+                    "kind": "getSignature",
+                    "returnType": {
+                        "type": "or",
+                        "values": [
+                            {
+                                "type": "intrinsic",
+                                "value": "number"
+                            },
+                            {
+                                "type": "intrinsic",
+                                "value": "undefined"
+                            }
+                        ]
+                    }
+                }
+            },
+            {
+                "name": "minimumWidth",
+                "code": "number | undefined",
+                "kind": "accessor",
+                "value": {
+                    "name": "minimumWidth",
+                    "code": "number | undefined",
+                    "kind": "getSignature",
+                    "returnType": {
+                        "type": "or",
+                        "values": [
+                            {
+                                "type": "intrinsic",
+                                "value": "number"
+                            },
+                            {
+                                "type": "intrinsic",
+                                "value": "undefined"
+                            }
+                        ]
+                    }
+                }
+            },
             {
                 "name": "params",
                 "code": "Parameters | undefined",
@@ -22780,19 +22872,6 @@
                     "isReadonly": true
                 }
             },
-            {
-                "name": "parentElement",
-                "code": "HTMLElement",
-                "kind": "property",
-                "type": {
-                    "type": "reference",
-                    "value": "HTMLElement",
-                    "source": "typescript"
-                },
-                "flags": {
-                    "isReadonly": true
-                }
-            },
             {
                 "name": "proportionalLayout",
                 "code": "boolean",
@@ -23032,6 +23111,104 @@
         ],
         "extends": []
     },
+    "Contraints": {
+        "kind": "interface",
+        "name": "Contraints",
+        "children": [
+            {
+                "name": "maximumHeight",
+                "code": "number",
+                "kind": "property",
+                "type": {
+                    "type": "intrinsic",
+                    "value": "number"
+                },
+                "flags": {
+                    "isOptional": true
+                }
+            },
+            {
+                "name": "maximumWidth",
+                "code": "number",
+                "kind": "property",
+                "type": {
+                    "type": "intrinsic",
+                    "value": "number"
+                },
+                "flags": {
+                    "isOptional": true
+                }
+            },
+            {
+                "name": "minimumHeight",
+                "code": "number",
+                "kind": "property",
+                "type": {
+                    "type": "intrinsic",
+                    "value": "number"
+                },
+                "flags": {
+                    "isOptional": true
+                }
+            },
+            {
+                "name": "minimumWidth",
+                "code": "number",
+                "kind": "property",
+                "type": {
+                    "type": "intrinsic",
+                    "value": "number"
+                },
+                "flags": {
+                    "isOptional": true
+                }
+            }
+        ],
+        "extends": []
+    },
+    "CreateComponentOptions": {
+        "kind": "interface",
+        "name": "CreateComponentOptions",
+        "children": [
+            {
+                "name": "id",
+                "code": "string",
+                "kind": "property",
+                "type": {
+                    "type": "intrinsic",
+                    "value": "string"
+                },
+                "flags": {},
+                "comment": {
+                    "summary": [
+                        {
+                            "kind": "text",
+                            "text": "The unqiue identifer of the component"
+                        }
+                    ]
+                }
+            },
+            {
+                "name": "name",
+                "code": "string",
+                "kind": "property",
+                "type": {
+                    "type": "intrinsic",
+                    "value": "string"
+                },
+                "flags": {},
+                "comment": {
+                    "summary": [
+                        {
+                            "kind": "text",
+                            "text": "The component name, this should determine what is rendered."
+                        }
+                    ]
+                }
+            }
+        ],
+        "extends": []
+    },
     "DockviewDndOverlayEvent": {
         "kind": "interface",
         "name": "DockviewDndOverlayEvent",
@@ -23156,13 +23333,13 @@
         "children": [
             {
                 "name": "createComponent",
-                "code": "(options: { id: string, name: string }): IContentRenderer",
+                "code": "(options: CreateComponentOptions): IContentRenderer",
                 "kind": "property",
                 "type": {
                     "type": "reflection",
                     "value": {
                         "name": "__type",
-                        "code": "(options: { id: string, name: string }): IContentRenderer",
+                        "code": "(options: CreateComponentOptions): IContentRenderer",
                         "kind": "typeLiteral",
                         "signatures": [
                             {
@@ -23171,36 +23348,11 @@
                                 "parameters": [
                                     {
                                         "name": "options",
-                                        "code": "options: { id: string, name: string }",
+                                        "code": "options: CreateComponentOptions",
                                         "type": {
-                                            "type": "reflection",
-                                            "value": {
-                                                "name": "__type",
-                                                "code": "{ id: string, name: string }",
-                                                "kind": "typeLiteral",
-                                                "properties": [
-                                                    {
-                                                        "name": "id",
-                                                        "code": "string",
-                                                        "kind": "property",
-                                                        "type": {
-                                                            "type": "intrinsic",
-                                                            "value": "string"
-                                                        },
-                                                        "flags": {}
-                                                    },
-                                                    {
-                                                        "name": "name",
-                                                        "code": "string",
-                                                        "kind": "property",
-                                                        "type": {
-                                                            "type": "intrinsic",
-                                                            "value": "string"
-                                                        },
-                                                        "flags": {}
-                                                    }
-                                                ]
-                                            }
+                                            "type": "reference",
+                                            "value": "CreateComponentOptions",
+                                            "source": "dockview-core"
                                         },
                                         "kind": "parameter"
                                     }
@@ -23210,7 +23362,7 @@
                                     "value": "IContentRenderer",
                                     "source": "dockview-core"
                                 },
-                                "code": "(options: { id: string, name: string }): IContentRenderer",
+                                "code": "(options: CreateComponentOptions): IContentRenderer",
                                 "kind": "callSignature"
                             }
                         ]
@@ -23343,13 +23495,13 @@
             },
             {
                 "name": "createTabComponent",
-                "code": "(options: { id: string, name: string }): ITabRenderer | undefined",
+                "code": "(options: CreateComponentOptions): ITabRenderer | undefined",
                 "kind": "property",
                 "type": {
                     "type": "reflection",
                     "value": {
                         "name": "__type",
-                        "code": "(options: { id: string, name: string }): ITabRenderer | undefined",
+                        "code": "(options: CreateComponentOptions): ITabRenderer | undefined",
                         "kind": "typeLiteral",
                         "signatures": [
                             {
@@ -23358,36 +23510,11 @@
                                 "parameters": [
                                     {
                                         "name": "options",
-                                        "code": "options: { id: string, name: string }",
+                                        "code": "options: CreateComponentOptions",
                                         "type": {
-                                            "type": "reflection",
-                                            "value": {
-                                                "name": "__type",
-                                                "code": "{ id: string, name: string }",
-                                                "kind": "typeLiteral",
-                                                "properties": [
-                                                    {
-                                                        "name": "id",
-                                                        "code": "string",
-                                                        "kind": "property",
-                                                        "type": {
-                                                            "type": "intrinsic",
-                                                            "value": "string"
-                                                        },
-                                                        "flags": {}
-                                                    },
-                                                    {
-                                                        "name": "name",
-                                                        "code": "string",
-                                                        "kind": "property",
-                                                        "type": {
-                                                            "type": "intrinsic",
-                                                            "value": "string"
-                                                        },
-                                                        "flags": {}
-                                                    }
-                                                ]
-                                            }
+                                            "type": "reference",
+                                            "value": "CreateComponentOptions",
+                                            "source": "dockview-core"
                                         },
                                         "kind": "parameter"
                                     }
@@ -23406,7 +23533,7 @@
                                         }
                                     ]
                                 },
-                                "code": "(options: { id: string, name: string }): ITabRenderer | undefined",
+                                "code": "(options: CreateComponentOptions): ITabRenderer | undefined",
                                 "kind": "callSignature"
                             }
                         ]
@@ -26716,6 +26843,26 @@
                     "isReadonly": true
                 }
             },
+            {
+                "name": "constraints",
+                "code": "Partial<Contraints>",
+                "kind": "property",
+                "type": {
+                    "type": "reference",
+                    "value": "Partial",
+                    "source": "typescript",
+                    "typeArguments": [
+                        {
+                            "type": "reference",
+                            "value": "Contraints",
+                            "source": "dockview-core"
+                        }
+                    ]
+                },
+                "flags": {
+                    "isOptional": true
+                }
+            },
             {
                 "name": "hideHeader",
                 "code": "boolean",
@@ -26741,6 +26888,30 @@
                     "isReadonly": true
                 }
             },
+            {
+                "name": "initialHeight",
+                "code": "number",
+                "kind": "property",
+                "type": {
+                    "type": "intrinsic",
+                    "value": "number"
+                },
+                "flags": {
+                    "isOptional": true
+                }
+            },
+            {
+                "name": "initialWidth",
+                "code": "number",
+                "kind": "property",
+                "type": {
+                    "type": "intrinsic",
+                    "value": "number"
+                },
+                "flags": {
+                    "isOptional": true
+                }
+            },
             {
                 "name": "locked",
                 "code": "'no-drop-target' | boolean",
@@ -26865,6 +27036,26 @@
                     "isOptional": true
                 }
             },
+            {
+                "name": "constraints",
+                "code": "Partial<Contraints>",
+                "kind": "property",
+                "type": {
+                    "type": "reference",
+                    "value": "Partial",
+                    "source": "typescript",
+                    "typeArguments": [
+                        {
+                            "type": "reference",
+                            "value": "Contraints",
+                            "source": "dockview-core"
+                        }
+                    ]
+                },
+                "flags": {
+                    "isOptional": true
+                }
+            },
             {
                 "name": "hideHeader",
                 "code": "boolean",
@@ -26887,6 +27078,30 @@
                 },
                 "flags": {}
             },
+            {
+                "name": "initialHeight",
+                "code": "number",
+                "kind": "property",
+                "type": {
+                    "type": "intrinsic",
+                    "value": "number"
+                },
+                "flags": {
+                    "isOptional": true
+                }
+            },
+            {
+                "name": "initialWidth",
+                "code": "number",
+                "kind": "property",
+                "type": {
+                    "type": "intrinsic",
+                    "value": "number"
+                },
+                "flags": {
+                    "isOptional": true
+                }
+            },
             {
                 "name": "locked",
                 "code": "'no-drop-target' | boolean",
@@ -26964,6 +27179,54 @@
                 },
                 "flags": {}
             },
+            {
+                "name": "maximumHeight",
+                "code": "number",
+                "kind": "property",
+                "type": {
+                    "type": "intrinsic",
+                    "value": "number"
+                },
+                "flags": {
+                    "isOptional": true
+                }
+            },
+            {
+                "name": "maximumWidth",
+                "code": "number",
+                "kind": "property",
+                "type": {
+                    "type": "intrinsic",
+                    "value": "number"
+                },
+                "flags": {
+                    "isOptional": true
+                }
+            },
+            {
+                "name": "minimumHeight",
+                "code": "number",
+                "kind": "property",
+                "type": {
+                    "type": "intrinsic",
+                    "value": "number"
+                },
+                "flags": {
+                    "isOptional": true
+                }
+            },
+            {
+                "name": "minimumWidth",
+                "code": "number",
+                "kind": "property",
+                "type": {
+                    "type": "intrinsic",
+                    "value": "number"
+                },
+                "flags": {
+                    "isOptional": true
+                }
+            },
             {
                 "name": "params",
                 "code": "",
@@ -31160,6 +31423,58 @@
                     "isReadonly": true
                 }
             },
+            {
+                "name": "maximumHeight",
+                "code": "number",
+                "kind": "property",
+                "type": {
+                    "type": "intrinsic",
+                    "value": "number"
+                },
+                "flags": {
+                    "isOptional": true,
+                    "isReadonly": true
+                }
+            },
+            {
+                "name": "maximumWidth",
+                "code": "number",
+                "kind": "property",
+                "type": {
+                    "type": "intrinsic",
+                    "value": "number"
+                },
+                "flags": {
+                    "isOptional": true,
+                    "isReadonly": true
+                }
+            },
+            {
+                "name": "minimumHeight",
+                "code": "number",
+                "kind": "property",
+                "type": {
+                    "type": "intrinsic",
+                    "value": "number"
+                },
+                "flags": {
+                    "isOptional": true,
+                    "isReadonly": true
+                }
+            },
+            {
+                "name": "minimumWidth",
+                "code": "number",
+                "kind": "property",
+                "type": {
+                    "type": "intrinsic",
+                    "value": "number"
+                },
+                "flags": {
+                    "isOptional": true,
+                    "isReadonly": true
+                }
+            },
             {
                 "name": "params",
                 "code": "Parameters | undefined",
@@ -37257,44 +37572,6 @@
                         "kind": "callSignature"
                     }
                 ]
-            },
-            {
-                "name": "updateParentGroup",
-                "code": "(group: DockviewGroupPanel, visible: boolean): void",
-                "kind": "method",
-                "signature": [
-                    {
-                        "name": "updateParentGroup",
-                        "typeParameters": [],
-                        "parameters": [
-                            {
-                                "name": "group",
-                                "code": "group: DockviewGroupPanel",
-                                "type": {
-                                    "type": "reference",
-                                    "value": "DockviewGroupPanel",
-                                    "source": "dockview-core"
-                                },
-                                "kind": "parameter"
-                            },
-                            {
-                                "name": "visible",
-                                "code": "visible: boolean",
-                                "type": {
-                                    "type": "intrinsic",
-                                    "value": "boolean"
-                                },
-                                "kind": "parameter"
-                            }
-                        ],
-                        "returnType": {
-                            "type": "intrinsic",
-                            "value": "void"
-                        },
-                        "code": "(group: DockviewGroupPanel, visible: boolean): void",
-                        "kind": "callSignature"
-                    }
-                ]
             }
         ],
         "extends": [
@@ -41037,11 +41314,23 @@
     },
     "AddPanelOptions": {
         "name": "AddPanelOptions",
-        "code": "Partial<AddPanelOptionsUnion> & { component: string, id: string, inactive?: boolean, params?: P, renderer?: DockviewPanelRenderer, tabComponent?: string, title?: string }",
+        "code": "Partial<Contraints> & Partial<AddPanelOptionsUnion> & { component: string, id: string, inactive?: boolean, initialHeight?: number, initialWidth?: number, params?: P, renderer?: DockviewPanelRenderer, tabComponent?: string, title?: string }",
         "typeParameters": [],
         "type": {
             "type": "intersection",
             "values": [
+                {
+                    "type": "reference",
+                    "value": "Partial",
+                    "source": "typescript",
+                    "typeArguments": [
+                        {
+                            "type": "reference",
+                            "value": "Contraints",
+                            "source": "dockview-core"
+                        }
+                    ]
+                },
                 {
                     "type": "reference",
                     "value": "Partial",
@@ -41058,7 +41347,7 @@
                     "type": "reflection",
                     "value": {
                         "name": "__type",
-                        "code": "{ component: string, id: string, inactive?: boolean, params?: P, renderer?: DockviewPanelRenderer, tabComponent?: string, title?: string }",
+                        "code": "{ component: string, id: string, inactive?: boolean, initialHeight?: number, initialWidth?: number, params?: P, renderer?: DockviewPanelRenderer, tabComponent?: string, title?: string }",
                         "kind": "typeLiteral",
                         "properties": [
                             {
@@ -41125,6 +41414,30 @@
                                     ]
                                 }
                             },
+                            {
+                                "name": "initialHeight",
+                                "code": "number",
+                                "kind": "property",
+                                "type": {
+                                    "type": "intrinsic",
+                                    "value": "number"
+                                },
+                                "flags": {
+                                    "isOptional": true
+                                }
+                            },
+                            {
+                                "name": "initialWidth",
+                                "code": "number",
+                                "kind": "property",
+                                "type": {
+                                    "type": "intrinsic",
+                                    "value": "number"
+                                },
+                                "flags": {
+                                    "isOptional": true
+                                }
+                            },
                             {
                                 "name": "params",
                                 "code": "P",
diff --git a/packages/docs/templates/dockview/demo-dockview/react/src/app.tsx b/packages/docs/templates/dockview/demo-dockview/react/src/app.tsx
index f369d6914..3ab3066da 100644
--- a/packages/docs/templates/dockview/demo-dockview/react/src/app.tsx
+++ b/packages/docs/templates/dockview/demo-dockview/react/src/app.tsx
@@ -50,9 +50,14 @@ const components = {
             </div>
         );
     },
-    iframe: () => {
+    iframe: (props: IDockviewPanelProps) => {
         return (
             <iframe
+                onMouseDown={() => {
+                    if (!props.api.isActive) {
+                        props.api.setActive();
+                    }
+                }}
                 style={{
                     width: '100%',
                     height: '100%',
diff --git a/packages/docs/templates/dockview/watermark/react/src/app.tsx b/packages/docs/templates/dockview/watermark/react/src/app.tsx
index bb02781d5..a668dde59 100644
--- a/packages/docs/templates/dockview/watermark/react/src/app.tsx
+++ b/packages/docs/templates/dockview/watermark/react/src/app.tsx
@@ -50,8 +50,7 @@ const Watermark = (props: IWatermarkPanelProps) => {
                 }}
             >
                 <span>
-                    This is a custom watermark. You can put whatever React
-                    component you want here
+                    This is a custom watermark. You can change this content.
                 </span>
                 <span>
                     <button onClick={addPanel}>Add New Panel</button>
diff --git a/packages/docs/templates/dockview/watermark/typescript/src/index.ts b/packages/docs/templates/dockview/watermark/typescript/src/index.ts
new file mode 100644
index 000000000..2a167fcc5
--- /dev/null
+++ b/packages/docs/templates/dockview/watermark/typescript/src/index.ts
@@ -0,0 +1,135 @@
+import 'dockview-core/dist/styles/dockview.css';
+import {
+    createDockview,
+    DockviewApi,
+    GroupPanelPartInitParameters,
+    IContentRenderer,
+    IDockviewGroupPanel,
+    IWatermarkRenderer,
+    WatermarkRendererInitParameters,
+} from 'dockview-core';
+
+class Panel implements IContentRenderer {
+    private readonly _element: HTMLElement;
+
+    get element(): HTMLElement {
+        return this._element;
+    }
+
+    constructor() {
+        this._element = document.createElement('div');
+        this._element.style.color = 'white';
+    }
+
+    init(parameters: GroupPanelPartInitParameters): void {
+        this._element.textContent = 'Hello World';
+    }
+}
+
+class Watermark implements IWatermarkRenderer {
+    private readonly _element: HTMLElement;
+
+    get element(): HTMLElement {
+        return this._element;
+    }
+
+    constructor() {
+        const element = document.createElement('div');
+        element.style.height = '100%';
+        element.style.display = 'flex';
+        element.style.justifyContent = 'center';
+        element.style.alignItems = 'center';
+        element.style.color = 'white';
+
+        this._element = element;
+    }
+
+    init(params: WatermarkRendererInitParameters): void {
+        this.build(params.containerApi, params.group);
+    }
+
+    private build(api: DockviewApi, group?: IDockviewGroupPanel): void {
+        const container = document.createElement('div');
+        container.style.display = 'flex';
+        container.style.flexDirection = 'column';
+
+        const text = document.createElement('span');
+        text.textContent =
+            'This is a custom watermark. You can change this content.';
+
+        const button = document.createElement('button');
+        button.textContent = 'Add New Panel';
+        button.addEventListener('click', () => {
+            api.addPanel({
+                id: Date.now().toString(),
+                component: 'default',
+            });
+        });
+
+        const button2 = document.createElement('button');
+        button2.textContent = 'Close Group';
+        button2.addEventListener('click', () => {
+            api.addPanel({
+                id: Date.now().toString(),
+                component: 'default',
+            });
+        });
+
+        container.append(text, button, button2);
+        this.element.append(container);
+
+        api.onDidLayoutChange(() => {
+            button2.style.display = api.groups.length > 0 ? '' : 'none';
+        });
+
+        button2.addEventListener('click', () => {
+            group?.api.close();
+        });
+    }
+}
+
+const root = document.createElement('div');
+root.style.display = 'flex';
+root.style.flexDirection = 'column';
+root.style.height = '100%';
+
+const button = document.createElement('button');
+button.textContent = 'Add Empty Group';
+
+const container = document.createElement('div');
+container.style.flexGrow = '1';
+
+root.append(button, container);
+
+const app = document.getElementById('app');
+app.append(root);
+
+const api = createDockview(container, {
+    className: 'dockview-theme-abyss',
+    createComponent: (options) => {
+        switch (options.name) {
+            case 'default':
+                return new Panel();
+        }
+    },
+    createWatermarkComponent: () => {
+        return new Watermark();
+    },
+});
+
+api.addPanel({
+    id: 'panel_1',
+    component: 'default',
+    title: 'Panel 1',
+});
+
+api.addPanel({
+    id: 'panel_2',
+    component: 'default',
+    position: { referencePanel: 'panel_1', direction: 'right' },
+    title: 'Panel 2',
+});
+
+button.addEventListener('click', () => {
+    api.addGroup();
+});