chore: improve docs

.codesandbox/ci.json

@@ -15,7 +15,6 @@
     "/packages/docs/sandboxes/floatinggroup-dockview",
     "/packages/docs/sandboxes/fullwidthtab-dockview",
     "/packages/docs/sandboxes/headeractions-dockview",
-    "/packages/docs/sandboxes/ide-example",
     "/packages/docs/sandboxes/groupcontol-dockview",
     "/packages/docs/sandboxes/iframe-dockview",
     "/packages/docs/sandboxes/keyboard-dockview",

packages/dockview-core/src/api/component.api.ts

@@ -56,132 +56,224 @@ export interface CommonApi<T = any> {
 }
 
 export class SplitviewApi implements CommonApi<SerializedSplitview> {
+    /**
+     * The minimum size  the component can reach where size is measured in the direction of orientation provided.
+     */
     get minimumSize(): number {
         return this.component.minimumSize;
     }
 
+    /**
+     * The maximum size the component can reach where size is measured in the direction of orientation provided.
+     */
     get maximumSize(): number {
         return this.component.maximumSize;
     }
 
-    get height(): number {
+    /**
-        return this.component.height;
+     * Width of the component.
-    }
+     */
-
     get width(): number {
         return this.component.width;
     }
 
+    /**
+     * Height of the component.
+     */
+    get height(): number {
+        return this.component.height;
+    }
+    /**
+     * The current number of panels.
+     */
     get length(): number {
         return this.component.length;
     }
 
+    /**
+     * The current orientation of the component.
+     */
     get orientation(): Orientation {
         return this.component.orientation;
     }
 
+    /**
+     * The list of current panels.
+     */
     get panels(): ISplitviewPanel[] {
         return this.component.panels;
     }
 
+    /**
+     * Invoked after a layout is loaded through the `fromJSON` method.
+     */
     get onDidLayoutFromJSON(): Event<void> {
         return this.component.onDidLayoutFromJSON;
     }
 
+    /**
+     * Invoked whenever any aspect of the layout changes.
+     * If listening to this event it may be worth debouncing ouputs.
+     */
     get onDidLayoutChange(): Event<void> {
         return this.component.onDidLayoutChange;
     }
 
+    /**
+     * Invoked when a view is added.
+     */
     get onDidAddView(): Event<IView> {
         return this.component.onDidAddView;
     }
 
+    /**
+     * Invoked when a view is removed.
+     */
     get onDidRemoveView(): Event<IView> {
         return this.component.onDidRemoveView;
     }
 
     constructor(private readonly component: ISplitviewComponent) {}
 
+    /**
+     * Update configuratable options.
+     */
     updateOptions(options: SplitviewComponentUpdateOptions): void {
         this.component.updateOptions(options);
     }
 
+    /**
+     * Removes an existing panel and optionally provide a `Sizing` method
+     * for the subsequent resize.
+     */
     removePanel(panel: ISplitviewPanel, sizing?: Sizing): void {
         this.component.removePanel(panel, sizing);
     }
 
+    /**
+     * Focus the component.
+     */
     focus(): void {
         this.component.focus();
     }
 
+    /**
+     * Get the reference to a panel given it's `string` id.
+     */
     getPanel(id: string): ISplitviewPanel | undefined {
         return this.component.getPanel(id);
     }
 
+    /**
+     * Layout the panel with a width and height.
+     */
     layout(width: number, height: number): void {
         return this.component.layout(width, height);
     }
 
+    /**
+     * Add a new panel and return the created instance.
+     */
     addPanel<T extends object = Parameters>(
         options: AddSplitviewComponentOptions<T>
     ): ISplitviewPanel {
         return this.component.addPanel(options);
     }
 
+    /**
+     * Move a panel given it's current and desired index.
+     */
     movePanel(from: number, to: number): void {
         this.component.movePanel(from, to);
     }
 
+    /**
+     * Deserialize a layout to built a splitivew.
+     */
     fromJSON(data: SerializedSplitview): void {
         this.component.fromJSON(data);
     }
 
+    /** Serialize a layout */
     toJSON(): SerializedSplitview {
         return this.component.toJSON();
     }
 
+    /**
+     * Remove all panels and clear the component.
+     */
     clear(): void {
         this.component.clear();
     }
 }
 
 export class PaneviewApi implements CommonApi<SerializedPaneview> {
+    /**
+     * The minimum size  the component can reach where size is measured in the direction of orientation provided.
+     */
     get minimumSize(): number {
         return this.component.minimumSize;
     }
 
+    /**
+     * The maximum size the component can reach where size is measured in the direction of orientation provided.
+     */
     get maximumSize(): number {
         return this.component.maximumSize;
     }
 
-    get height(): number {
+    /**
-        return this.component.height;
+     * Width of the component.
-    }
+     */
-
     get width(): number {
         return this.component.width;
     }
 
+    /**
+     * Height of the component.
+     */
+    get height(): number {
+        return this.component.height;
+    }
+
+    /**
+     * All panel objects.
+     */
     get panels(): IPaneviewPanel[] {
         return this.component.panels;
     }
 
+    /**
+     * Invoked when any layout change occures, an aggregation of many events.
+     */
     get onDidLayoutChange(): Event<void> {
         return this.component.onDidLayoutChange;
     }
 
+    /**
+     * Invoked after a layout is deserialzied using the `fromJSON` method.
+     */
     get onDidLayoutFromJSON(): Event<void> {
         return this.component.onDidLayoutFromJSON;
     }
 
+    /**
+     * Invoked when a panel is added. May be called multiple times when moving panels.
+     */
     get onDidAddView(): Event<IPaneviewPanel> {
         return this.component.onDidAddView;
     }
 
+    /**
+     * Invoked when a panel is removed. May be called multiple times when moving panels.
+     */
     get onDidRemoveView(): Event<IPaneviewPanel> {
         return this.component.onDidRemoveView;
     }
 
+    /**
+     * Invoked when a Drag'n'Drop event occurs that the component was unable to handle. Exposed for custom Drag'n'Drop functionality.
+     */
     get onDidDrop(): Event<PaneviewDropEvent> {
         const emitter = new Emitter<PaneviewDropEvent>();
 
@@ -199,94 +291,160 @@ export class PaneviewApi implements CommonApi<SerializedPaneview> {
 
     constructor(private readonly component: IPaneviewComponent) {}
 
+    /**
+     * Remove a panel given the panel object.
+     */
     removePanel(panel: IPaneviewPanel): void {
         this.component.removePanel(panel);
     }
 
+    /**
+     * Get a panel object given a `string` id. May return `undefined`.
+     */
     getPanel(id: string): IPaneviewPanel | undefined {
         return this.component.getPanel(id);
     }
 
+    /**
+     * Move a panel given it's current and desired index.
+     */
     movePanel(from: number, to: number): void {
         this.component.movePanel(from, to);
     }
 
+    /**
+     *  Focus the component. Will try to focus an active panel if one exists.
+     */
     focus(): void {
         this.component.focus();
     }
 
+    /**
+     * Force resize the component to an exact width and height. Read about auto-resizing before using.
+     */
     layout(width: number, height: number): void {
         this.component.layout(width, height);
     }
 
+    /**
+     * Add a panel and return the created object.
+     */
     addPanel<T extends object = Parameters>(
         options: AddPaneviewComponentOptions<T>
     ): IPaneviewPanel {
         return this.component.addPanel(options);
     }
 
+    /**
+     * Create a component from a serialized object.
+     */
     fromJSON(data: SerializedPaneview): void {
         this.component.fromJSON(data);
     }
 
+    /**
+     * Create a serialized object of the current component.
+     */
     toJSON(): SerializedPaneview {
         return this.component.toJSON();
     }
 
+    /**
+     * Reset the component back to an empty and default state.
+     */
     clear(): void {
         this.component.clear();
     }
 }
 
 export class GridviewApi implements CommonApi<SerializedGridviewComponent> {
-    get minimumHeight(): number {
+    /**
-        return this.component.minimumHeight;
+     * Width of the component.
-    }
+     */
-
-    get maximumHeight(): number {
-        return this.component.maximumHeight;
-    }
-
-    get minimumWidth(): number {
-        return this.component.minimumWidth;
-    }
-
-    get maximumWidth(): number {
-        return this.component.maximumWidth;
-    }
-
     get width(): number {
         return this.component.width;
     }
 
+    /**
+     * Height of the component.
+     */
     get height(): number {
         return this.component.height;
     }
 
+    /**
+     * Minimum height of the component.
+     */
+    get minimumHeight(): number {
+        return this.component.minimumHeight;
+    }
+
+    /**
+     * Maximum height of the component.
+     */
+    get maximumHeight(): number {
+        return this.component.maximumHeight;
+    }
+
+    /**
+     * Minimum width of the component.
+     */
+    get minimumWidth(): number {
+        return this.component.minimumWidth;
+    }
+
+    /**
+     * Maximum width of the component.
+     */
+    get maximumWidth(): number {
+        return this.component.maximumWidth;
+    }
+
+    /**
+     * Invoked when any layout change occures, an aggregation of many events.
+     */
     get onDidLayoutChange(): Event<void> {
         return this.component.onDidLayoutChange;
     }
 
+    /**
+     * Invoked when a panel is added. May be called multiple times when moving panels.
+     */
     get onDidAddPanel(): Event<IGridviewPanel> {
         return this.component.onDidAddGroup;
     }
 
+    /**
+     * Invoked when a panel is removed. May be called multiple times when moving panels.
+     */
     get onDidRemovePanel(): Event<IGridviewPanel> {
         return this.component.onDidRemoveGroup;
     }
 
+    /**
+     * Invoked when the active panel changes. May be undefined if no panel is active.
+     */
     get onDidActivePanelChange(): Event<IGridviewPanel | undefined> {
         return this.component.onDidActiveGroupChange;
     }
 
+    /**
+     * Invoked after a layout is deserialzied using the `fromJSON` method.
+     */
     get onDidLayoutFromJSON(): Event<void> {
         return this.component.onDidLayoutFromJSON;
     }
 
+    /**
+     * All panel objects.
+     */
     get panels(): IGridviewPanel[] {
         return this.component.groups;
     }
 
+    /**
+     * Current orientation. Can be changed after initialization.
+     */
     get orientation(): Orientation {
         return this.component.orientation;
     }
@@ -297,24 +455,39 @@ export class GridviewApi implements CommonApi<SerializedGridviewComponent> {
 
     constructor(private readonly component: IGridviewComponent) {}
 
+    /**
+     *  Focus the component. Will try to focus an active panel if one exists.
+     */
     focus(): void {
         this.component.focus();
     }
 
+    /**
+     * Force resize the component to an exact width and height. Read about auto-resizing before using.
+     */
     layout(width: number, height: number, force = false): void {
         this.component.layout(width, height, force);
     }
 
+    /**
+     * Add a panel and return the created object.
+     */
     addPanel<T extends object = Parameters>(
         options: AddComponentOptions<T>
     ): IGridviewPanel {
         return this.component.addPanel(options);
     }
 
+    /**
+     * Remove a panel given the panel object.
+     */
     removePanel(panel: IGridviewPanel, sizing?: Sizing): void {
         this.component.removePanel(panel, sizing);
     }
 
+    /**
+     * Move a panel in a particular direction relative to another panel.
+     */
     movePanel(
         panel: IGridviewPanel,
         options: { direction: Direction; reference: string; size?: number }
@@ -322,168 +495,274 @@ export class GridviewApi implements CommonApi<SerializedGridviewComponent> {
         this.component.movePanel(panel, options);
     }
 
+    /**
+     * Get a panel object given a `string` id. May return `undefined`.
+     */
     getPanel(id: string): IGridviewPanel | undefined {
         return this.component.getPanel(id);
     }
 
+    /**
+     * Create a component from a serialized object.
+     */
     fromJSON(data: SerializedGridviewComponent): void {
         return this.component.fromJSON(data);
     }
 
+    /**
+     * Create a serialized object of the current component.
+     */
     toJSON(): SerializedGridviewComponent {
         return this.component.toJSON();
     }
 
+    /**
+     * Reset the component back to an empty and default state.
+     */
     clear(): void {
         this.component.clear();
     }
 }
 
 export class DockviewApi implements CommonApi<SerializedDockview> {
+    /**
+     * The unique identifier for this instance. Used to manage scope of Drag'n'Drop events.
+     */
     get id(): string {
         return this.component.id;
     }
 
+    /**
+     * Width of the component.
+     */
     get width(): number {
         return this.component.width;
     }
 
+    /**
+     * Height of the component.
+     */
     get height(): number {
         return this.component.height;
     }
 
+    /**
+     * Minimum height of the component.
+     */
     get minimumHeight(): number {
         return this.component.minimumHeight;
     }
 
+    /**
+     * Maximum height of the component.
+     */
     get maximumHeight(): number {
         return this.component.maximumHeight;
     }
 
+    /**
+     * Minimum width of the component.
+     */
     get minimumWidth(): number {
         return this.component.minimumWidth;
     }
 
+    /**
+     * Maximum width of the component.
+     */
     get maximumWidth(): number {
         return this.component.maximumWidth;
     }
 
+    /**
+     * Total number of groups.
+     */
     get size(): number {
         return this.component.size;
     }
 
+    /**
+     * Total number of panels.
+     */
     get totalPanels(): number {
         return this.component.totalPanels;
     }
 
+    /**
+     * Invoked when the active group changes. May be undefined if no group is active.
+     */
     get onDidActiveGroupChange(): Event<DockviewGroupPanel | undefined> {
         return this.component.onDidActiveGroupChange;
     }
 
+    /**
+     * Invoked when a group is added. May be called multiple times when moving groups.
+     */
     get onDidAddGroup(): Event<DockviewGroupPanel> {
         return this.component.onDidAddGroup;
     }
 
+    /**
+     * Invoked when a group is removed. May be called multiple times when moving groups.
+     */
     get onDidRemoveGroup(): Event<DockviewGroupPanel> {
         return this.component.onDidRemoveGroup;
     }
 
+    /**
+     * Invoked when the active panel changes. May be undefined if no panel is active.
+     */
     get onDidActivePanelChange(): Event<IDockviewPanel | undefined> {
         return this.component.onDidActivePanelChange;
     }
 
+    /**
+     * Invoked when a panel is added. May be called multiple times when moving panels.
+     */
     get onDidAddPanel(): Event<IDockviewPanel> {
         return this.component.onDidAddPanel;
     }
 
+    /**
+     * Invoked when a panel is removed. May be called multiple times when moving panels.
+     */
     get onDidRemovePanel(): Event<IDockviewPanel> {
         return this.component.onDidRemovePanel;
     }
 
+    /**
+     * Invoked after a layout is deserialzied using the `fromJSON` method.
+     */
     get onDidLayoutFromJSON(): Event<void> {
         return this.component.onDidLayoutFromJSON;
     }
 
+    /**
+     * Invoked when any layout change occures, an aggregation of many events.
+     */
     get onDidLayoutChange(): Event<void> {
         return this.component.onDidLayoutChange;
     }
 
+    /**
+     * Invoked when a Drag'n'Drop event occurs that the component was unable to handle. Exposed for custom Drag'n'Drop functionality.
+     */
     get onDidDrop(): Event<DockviewDropEvent> {
         return this.component.onDidDrop;
     }
 
+    /**
+     * Invoked before a group is dragged. Exposed for custom Drag'n'Drop functionality.
+     */
     get onWillDragGroup(): Event<GroupDragEvent> {
         return this.component.onWillDragGroup;
     }
 
+    /**
+     * Invoked before a panel is dragged. Exposed for custom Drag'n'Drop functionality.
+     */
     get onWillDragPanel(): Event<TabDragEvent> {
         return this.component.onWillDragPanel;
     }
 
+    /**
+     * All panel objects.
+     */
     get panels(): IDockviewPanel[] {
         return this.component.panels;
     }
 
+    /**
+     * All group objects.
+     */
     get groups(): DockviewGroupPanel[] {
         return this.component.groups;
     }
 
+    /**
+     *  Active panel object.
+     */
     get activePanel(): IDockviewPanel | undefined {
         return this.component.activePanel;
     }
 
+    /**
+     * Active group object.
+     */
     get activeGroup(): DockviewGroupPanel | undefined {
         return this.component.activeGroup;
     }
 
     constructor(private readonly component: IDockviewComponent) {}
 
+    /**
+     *  Focus the component. Will try to focus an active panel if one exists.
+     */
     focus(): void {
         this.component.focus();
     }
 
+    /**
+     * Get a panel object given a `string` id. May return `undefined`.
+     */
     getPanel(id: string): IDockviewPanel | undefined {
         return this.component.getGroupPanel(id);
     }
 
+    /**
+     * Force resize the component to an exact width and height. Read about auto-resizing before using.
+     */
     layout(width: number, height: number, force = false): void {
         this.component.layout(width, height, force);
     }
 
+    /**
+     * Add a panel and return the created object.
+     */
     addPanel<T extends object = Parameters>(
         options: AddPanelOptions<T>
     ): IDockviewPanel {
         return this.component.addPanel(options);
     }
 
+    /**
+     * Remove a panel given the panel object.
+     */
     removePanel(panel: IDockviewPanel): void {
         this.component.removePanel(panel);
     }
 
+    /**
+     * Add a group and return the created object.
+     */
     addGroup(options?: AddGroupOptions): DockviewGroupPanel {
         return this.component.addGroup(options);
     }
 
-    moveToNext(options?: MovementOptions): void {
+    /**
-        this.component.moveToNext(options);
+     * Close all groups and panels.
-    }
+     */
-
-    moveToPrevious(options?: MovementOptions): void {
-        this.component.moveToPrevious(options);
-    }
-
     closeAllGroups(): void {
         return this.component.closeAllGroups();
     }
 
+    /**
+     * Remove a group and any panels within the group.
+     */
     removeGroup(group: IDockviewGroupPanel): void {
         this.component.removeGroup(<DockviewGroupPanel>group);
     }
 
+    /**
+     * Get a group object given a `string` id. May return undefined.
+     */
     getGroup(id: string): DockviewGroupPanel | undefined {
         return this.component.getPanel(id);
     }
 
+    /**
+     * Add a floating group
+     */
     addFloatingGroup(
         item: IDockviewPanel | DockviewGroupPanel,
         coord?: { x: number; y: number }
@@ -491,15 +770,38 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
         return this.component.addFloatingGroup(item, coord);
     }
 
+    /**
+     * Create a component from a serialized object.
+     */
     fromJSON(data: SerializedDockview): void {
         this.component.fromJSON(data);
     }
 
+    /**
+     * Create a serialized object of the current component.
+     */
     toJSON(): SerializedDockview {
         return this.component.toJSON();
     }
 
+    /**
+     * Reset the component back to an empty and default state.
+     */
     clear(): void {
         this.component.clear();
     }
+
+    /**
+     * Move the focus progmatically to the next panel or group.
+     */
+    moveToNext(options?: MovementOptions): void {
+        this.component.moveToNext(options);
+    }
+
+    /**
+     * Move the focus progmatically to the previous panel or group.
+     */
+    moveToPrevious(options?: MovementOptions): void {
+        this.component.moveToPrevious(options);
+    }
 }

packages/dockview-core/src/dnd/abstractDragHandler.ts

@@ -6,6 +6,8 @@ import {
     MutableDisposable,
 } from '../lifecycle';
 
+const CLONE_ELEMENT = true;
+
 export abstract class DragHandler extends CompositeDisposable {
     private readonly dataDisposable = new MutableDisposable();
     private readonly pointerEventsDisposable = new MutableDisposable();
@@ -57,8 +59,24 @@ export abstract class DragHandler extends CompositeDisposable {
                     iframe.style.pointerEvents = 'none';
                 }
 
-                this.el.classList.add('dv-dragged');
+                if (CLONE_ELEMENT && event.dataTransfer) {
-                setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
+                    const clone = this.el.cloneNode(true) as HTMLElement;
+                    const styles = window.getComputedStyle(this.el);
+                    clone.style.cssText = Object.values(styles)
+                        .map((key) => `${key}:${styles.getPropertyValue(key)}`)
+                        .join(';');
+                    clone.classList.add('dv-dragged');
+
+                    document.body.append(clone);
+                    setTimeout(() => {
+                        // clone.parentElement?.removeChild(clone);
+                    }, 0);
+
+                    event.dataTransfer.setDragImage(clone, 0, 0);
+                } else {
+                    this.el.classList.add('dv-dragged');
+                    setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
+                }
 
                 this.dataDisposable.value = this.getData(event);
                 this._onDragStart.fire(event);

packages/dockview-core/src/dockview/components/tab/tab.ts

@@ -24,6 +24,13 @@ class TabDragHandler extends DragHandler {
         private readonly panel: IDockviewPanel
     ) {
         super(element);
+
+        this.onDragStart((e) => {
+            this.accessor.removePanel(this.panel, {
+                skipDispose: true,
+                removeEmptyGroup: true,
+            });
+        });
     }
 
     getData(event: DragEvent): IDisposable {

packages/docs/docs/components/dockview.mdx

@@ -27,7 +27,6 @@ import DockviewTabheight from '@site/sandboxes/tabheight-dockview/src/app';
 import DockviewWithIFrames from '@site/sandboxes/iframe-dockview/src/app';
 import DockviewFloating from '@site/sandboxes/floatinggroup-dockview/src/app';
 import DockviewLockedGroup from '@site/sandboxes/lockedgroup-dockview/src/app';
-import IDEExample from '@site/sandboxes/ide-example/src/app';
 import DockviewKeyboard from '@site/sandboxes/keyboard-dockview/src/app';
 
 import { DocRef, Markdown } from '@site/src/components/ui/reference/docRef';
@@ -862,14 +861,6 @@ Keyboard shortcuts
     react={DockviewKeyboard}
 />
 
-## Application with sidebars
-
-<MultiFrameworkContainer
-    height={600}
-    sandboxId="ide-example"
-    react={IDEExample}
-/>
-
 ### Nested Dockviews
 
 You can safely create multiple dockview instances within one page and nest dockviews within other dockviews.

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

@@ -318,14 +318,17 @@ const EventsDockview = (props: { theme?: string }) => {
                 height: '100%',
             }}
         >
-            <label>
+            <div>
-                <input
+                <label>
-                    type="checkbox"
+                    <input
-                    checked={checked}
+                        type="checkbox"
-                    onChange={(e) => setChecked(e.target.checked)}
+                        checked={checked}
-                />
+                        onChange={(e) => setChecked(e.target.checked)}
-                <span>{'fromJSON'}</span>
+                    />
-            </label>
+                    <span>{'fromJSON'}</span>
+                </label>
+                <button onClick={() => setLines([])}>Clear logs</button>
+            </div>
             <div style={{ flexGrow: 1 }}>
                 <DockviewReact
                     components={components}
@@ -333,7 +336,7 @@ const EventsDockview = (props: { theme?: string }) => {
                     className={`${props.theme || 'dockview-theme-abyss'}`}
                 />
             </div>
-            <div style={{ flexGrow: 1, paddingTop: '5px' }}>
+            <div style={{ height: '200px', paddingTop: '5px' }}>
                 <Console lines={lines} />
             </div>
         </div>

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

@@ -20,7 +20,7 @@ export interface IConsoleProps {
 }
 
 export const Console = (props: IConsoleProps) => {
-    const ref = React.useRef<HTMLDivElement>();
+    const ref = React.useRef<HTMLDivElement>(null);
 
     React.useLayoutEffect(() => {
         if (!ref.current) {

packages/docs/sandboxes/ide-example/package.json

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

packages/docs/sandboxes/ide-example/public/index.html

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

packages/docs/sandboxes/ide-example/src/app.tsx

@@ -1,154 +0,0 @@
-import {
-    GridviewReact,
-    GridviewReadyEvent,
-    IGridviewPanelProps,
-    GridviewComponent,
-    Orientation,
-    GridviewApi,
-    LayoutPriority,
-} from 'dockview';
-import * as React from 'react';
-
-const components = {
-    'left-sidebar': (props: IGridviewPanelProps<{ title: string }>) => {
-        return (
-            <div
-                style={{
-                    height: '100%',
-                    padding: '20px',
-                    background: 'var(--dv-group-view-background-color)',
-                }}
-            >
-                {props.params.title}
-            </div>
-        );
-    },
-    'middle-content': (props: IGridviewPanelProps<{ title: string }>) => {
-        return (
-            <div
-                style={{
-                    height: '100%',
-                    padding: '20px',
-                    background: 'var(--dv-group-view-background-color)',
-                }}
-            >
-                {props.params.title}
-            </div>
-        );
-    },
-    'right-sidebar': (props: IGridviewPanelProps<{ title: string }>) => {
-        return (
-            <div
-                style={{
-                    height: '100%',
-                    padding: '20px',
-                    background: 'var(--dv-group-view-background-color)',
-                }}
-            >
-                {props.params.title}
-            </div>
-        );
-    },
-};
-
-const App = (props: { theme?: string }) => {
-    const [api, setApi] = React.useState<GridviewApi>();
-
-    const onReady = (event: GridviewReadyEvent) => {
-        event.api.fromJSON({
-            grid: {
-                height: 1000,
-                width: 1000,
-                orientation: Orientation.HORIZONTAL,
-                root: {
-                    type: 'branch',
-                    data: [
-                        {
-                            type: 'leaf',
-                            data: {
-                                id: 'left-sidebar-id',
-                                component: 'left-sidebar',
-                                snap: true,
-                                minimumWidth: 100,
-                            },
-                            size: 200,
-                        },
-                        {
-                            type: 'leaf',
-                            data: {
-                                id: 'middle-content-id',
-                                component: 'middle-content',
-                                priority: LayoutPriority.High,
-                                minimumWidth: 100,
-                            },
-                            size: 600,
-                        },
-                        {
-                            type: 'leaf',
-                            data: {
-                                id: 'right-sidebar-id',
-                                component: 'right-sidebar',
-                                snap: true,
-                                minimumWidth: 100,
-                            },
-                            size: 200,
-                        },
-                    ],
-                },
-            },
-        });
-
-        setApi(event.api);
-    };
-
-    const onKeyPress = (event: React.KeyboardEvent) => {
-        if (!api) {
-            return;
-        }
-
-        if (event.ctrlKey) {
-            if (event.code === 'ArrowLeft') {
-                const leftSidebarPanel = api.getPanel('left-sidebar-id');
-
-                if (leftSidebarPanel) {
-                    leftSidebarPanel.api.setVisible(false);
-                }
-            }
-        }
-
-        if (event.code === 'ArrowRight') {
-            const leftSidebarPanel = api.getPanel('left-sidebar-id');
-
-            if (leftSidebarPanel) {
-                leftSidebarPanel.api.setVisible(true);
-            }
-        }
-    };
-
-    return (
-        <div
-            tabIndex={-1}
-            style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
-            onKeyDown={onKeyPress}
-        >
-            <div>
-                {'Use '}
-                <span>{'Ctrl+ArrowLeft'}</span>
-                {' and '}
-                <span>{'Ctrl+ArrowRight'}</span>
-                {
-                    ' to show and hide the left sidebar. The right sidebar can be hidden by dragging it to the right.'
-                }
-            </div>
-            <div style={{ flexGrow: 1 }}>
-                <GridviewReact
-                    onReady={onReady}
-                    components={components}
-                    className={`${props.theme || 'dockview-theme-abyss'}`}
-                />
-            </div>
-        </div>
-    );
-};
-
-export default App;

packages/docs/sandboxes/ide-example/src/index.tsx

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

packages/docs/sandboxes/ide-example/src/styles.css

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

packages/docs/sandboxes/ide-example/tsconfig.json

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

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

@@ -37,4 +37,10 @@
             }
         }
     }
+
+    .doc-text {
+        font-size: 1em;
+        font-weight: 400;
+        margin-bottom: 8px;
+    }
 }

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

@@ -9,18 +9,66 @@ export interface DocRefProps {
 import docsJson from '../../../generated/api.output.json';
 
 type DocsContent = { kind: string; text: string; tag?: string };
+type DocsTag = { tag: string; content: DocsContent[] };
+type DocsComment = {
+    summary?: DocsContent[];
+    blockTags?: DocsTag[];
+};
 type DocsJson = {
     [index: string]: Array<{
         name: string;
         signature: string;
-        comment?: {
+        comment?: DocsComment;
-            summary?: DocsContent[];
-            blockTags?: Array<{ tag: string; content: DocsContent }>;
-        };
         type: string;
     }>;
 };
 
+export const Text = (props: { content: DocsContent[] }) => {
+    return (
+        <div className="doc-text">
+            {props.content.map((piece, i) => {
+                switch (piece.kind) {
+                    case 'text': {
+                        return <span key={i}>{piece.text}</span>;
+                    }
+                    case 'code':
+                        return (
+                            <code key={i}>
+                                {piece.text.substring(1, piece.text.length - 1)}
+                            </code>
+                        );
+                    default:
+                        throw new Error(`unhandled piece ${piece.kind}`);
+                }
+            })}
+        </div>
+    );
+};
+
+export const Tags = (props: { tags: DocsTag[] }) => {
+    return (
+        <div>
+            {props.tags.map((tag, i) => {
+                return (
+                    <div key={i}>
+                        <div>{tag.tag}</div>
+                        <Text content={tag.content} />
+                    </div>
+                );
+            })}
+        </div>
+    );
+};
+
+export const Summary = (props: { summary: DocsComment }) => {
+    return (
+        <div>
+            <Text content={props.summary.summary ?? []} />
+            {/* <Tags tags={props.summary.blockTags ?? []} /> */}
+        </div>
+    );
+};
+
 export const Markdown = (props: { children: string }) => {
     return <span>{props.children}</span>;
 };
@@ -94,6 +142,13 @@ export const DocRef = (props: DocRefProps) => {
                                 >
                                     {/* <div>{'-'}</div> */}
                                     <div>
+                                        <div>
+                                            {doc.comment && (
+                                                <Summary
+                                                    summary={doc.comment}
+                                                />
+                                            )}
+                                        </div>
                                         <CodeBlock language="tsx">
                                             {doc.signature}
                                         </CodeBlock>

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

@@ -1,171 +0,0 @@
-import { ReactPropDocsTable } from '../referenceTable';
-import * as React from 'react';
-
-export default () => (
-    <ReactPropDocsTable
-        title="Dockview API"
-        url="https://dockview.dev/typedocs/classes/dockview_core.DockviewApi.html"
-        data={[
-            {
-                property: 'id',
-                propertyDescription:
-                    'The unique id associated with the dock instance',
-                type: 'string',
-            },
-            {
-                property: 'width',
-                type: 'number',
-            },
-            {
-                property: 'height',
-                type: 'number',
-            },
-            {
-                property: 'minimumHeight',
-                type: 'number',
-            },
-            {
-                property: 'maximumHeight',
-                type: 'number',
-            },
-            {
-                property: 'minimumWidth',
-                type: 'number',
-            },
-            {
-                property: 'maximumWidth',
-                type: 'number',
-            },
-            {
-                property: 'size',
-                propertyDescription: 'Total number of groups',
-                type: 'number',
-            },
-            {
-                property: 'totalPanels',
-                propertyDescription: 'Total number of panels',
-                type: 'number',
-            },
-            {
-                property: 'onDidActiveGroupChange',
-                type: 'Event<DockviewGroupPanel | undefined>',
-            },
-            {
-                property: 'onDidAddGroup',
-                type: 'Event<DockviewGroupPanel>',
-            },
-            {
-                property: 'onDidRemoveGroup',
-                type: 'Event<DockviewGroupPanel>',
-            },
-            {
-                property: 'onDidActivePanelChange',
-                type: 'Event<IDockviewPanel | undefined>',
-            },
-            {
-                property: 'onDidAddPanel',
-                type: 'Event<IDockviewPanel>',
-            },
-            {
-                property: 'onDidRemovePanel',
-                type: 'Event<IDockviewPanel>',
-            },
-            {
-                property: 'onDidLayoutFromJSON',
-                type: 'Event<void>',
-            },
-            {
-                property: 'onDidLayoutChange',
-                type: 'Event<void>',
-            },
-            {
-                property: 'onDidDrop',
-                type: 'Event<DockviewDropEvent>',
-            },
-            {
-                property: 'onWillDragGroup',
-                type: 'Event<GroupDragEvent>',
-            },
-            {
-                property: 'onWillDragPanel',
-                type: 'Event<TabDragEvent>',
-            },
-            {
-                property: 'panels',
-                type: 'IDockviewPanel[]',
-            },
-            {
-                property: 'groups',
-                type: 'DockviewGroupPanel[]',
-            },
-            {
-                property: 'activePanel',
-                type: 'IDockviewPanel | undefined',
-            },
-            {
-                property: 'activeGroup',
-                type: 'DockviewGroupPanel | undefined',
-            },
-            {
-                property: 'focus',
-                type: '(): void',
-            },
-            {
-                property: 'getPanel',
-                type: '(id: string): IDockviewPanel | undefined',
-            },
-            {
-                property: 'layout',
-                type: '(width: number, height: number): void',
-            },
-            {
-                property: 'addPanel',
-                type: 'addPanel(options: AddPanelOptions): void',
-            },
-            {
-                property: 'removePanel',
-                type: '(panel: IDockviewPanel): void',
-            },
-            {
-                property: 'addGroup',
-                type: '(options?: AddGroupOptions): DockviewGroupPanel',
-            },
-            {
-                property: 'moveToNext',
-                type: '(options?: MovementOptions): void',
-            },
-            {
-                property: 'moveToPrevious',
-                type: '(options?: MovementOptions): void',
-            },
-            {
-                property: 'closeAllGroups',
-                type: '(): void',
-            },
-            {
-                property: 'removeGroup',
-                type: '(group: IDockviewGroupPanel): void ',
-            },
-            {
-                property: 'getGroup',
-                type: '(id: string): DockviewGroupPanel | undefined',
-            },
-            {
-                property: 'addFloatingGroup',
-                type: '(item: IDockviewPanel | DockviewGroupPanel, coord?: { x: number, y: number }): void',
-            },
-            {
-                property: 'fromJSON',
-                type: '(data: SerializedDockview): void',
-            },
-            {
-                property: 'toJSON',
-                type: '(): SerializedDockview ',
-            },
-            {
-                property: 'clear',
-                type: '(): void',
-            },
-        ]}
-    />
-);

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

@@ -1,103 +0,0 @@
-import { ReactPropDocsTable } from '../referenceTable';
-import * as React from 'react';
-
-export default () => (
-    <ReactPropDocsTable
-        title="Dockview Panel API"
-        url="https://dockview.dev/typedocs/interfaces/dockview_core.DockviewPanelApi.html"
-        data={[
-            {
-                property: 'group',
-                type: 'DockviewGroupPanel',
-            },
-            {
-                property: 'isGroupActive',
-                type: 'boolean',
-            },
-            {
-                property: 'title',
-                type: 'string | undefined',
-            },
-            {
-                property: 'group',
-                type: 'DockviewGroupPanel',
-            },
-            {
-                property: 'onDidActiveGroupChange',
-                type: 'Event<void>',
-            },
-            {
-                property: 'onDidGroupChange',
-                type: 'Event<void>',
-            },
-            {
-                property: 'close',
-                type: '(): void',
-            },
-            {
-                property: 'setTitle',
-                type: '(title: string): void',
-            },
-            {
-                property: 'moveTo',
-                type: '(options: { group: DockviewGroupPanel, position?: Position, index?: number }): void',
-            },
-            {
-                property: 'setSize',
-                type: '(event: SizeEvent): void',
-            },
-            {
-                property: 'onDidDimensionsChange',
-                type: 'Event<PanelDimensionChangeEvent>',
-            },
-            {
-                property: 'onDidFocusChange',
-                type: 'Event<FocusEvent>',
-            },
-            {
-                property: 'onDidVisibilityChange',
-                type: 'Event<VisibilityEvent>',
-            },
-            {
-                property: 'onDidActiveChange',
-                type: 'Event<ActiveEvent>',
-            },
-            {
-                property: 'setVisible',
-                type: '(isVisible: boolean): void',
-            },
-            {
-                property: 'setActive',
-                type: '(): void',
-            },
-            {
-                property: 'updateParameters',
-                type: '(parameters: Parameters): void',
-            },
-            {
-                property: 'id',
-                type: 'string',
-            },
-            {
-                property: 'isFocused',
-                type: 'boolean',
-            },
-            {
-                property: 'isActive',
-                type: 'boolean',
-            },
-            {
-                property: 'isVisible',
-                type: 'boolean',
-            },
-            {
-                property: 'width',
-                type: 'number',
-            },
-            {
-                property: 'height',
-                type: 'number',
-            },
-        ]}
-    />
-);

packages/docs/src/components/ui/referenceTable.scss

@@ -1,64 +0,0 @@
-.ref-table {
-    font-size: 12px;
-    width: 100%;
-    border-collapse: collapse;
-
-    line-height: 20px;
-
-    button {
-        all: unset;
-    }
-
-    code {
-        padding: 0px 4px;
-        margin: 0px 4px;
-    }
-
-    .ref-table-icon {
-        cursor: pointer;
-    }
-
-    .ref-table-property {
-        width: 30%;
-    }
-
-    .ref-table-type {
-        width: 50%;
-    }
-
-    .ref-table-default {
-        width: 20%;
-    }
-
-    thead {
-        text-align: left;
-        background-color: inherit;
-
-        tr {
-            border: none;
-        }
-    }
-
-    th,
-    td {
-        border: none;
-        padding: none;
-    }
-
-    tr {
-        background-color: inherit !important;
-    }
-}
-
-.ref-table-popover {
-    padding: 5px 10px;
-    border-radius: 4px;
-    font-size: 12px;
-    box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
-        hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
-    animation-duration: 400ms;
-    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-    will-change: transform, opacity;
-    background-color: var(--ifm-background-surface-color);
-    color: var(--ifm-font-color-base);
-}

packages/docs/src/components/ui/referenceTable.tsx

@@ -1,196 +0,0 @@
-import * as React from 'react';
-import './referenceTable.scss';
-
-export interface ReferenceProps {
-    title?: string;
-    url?: string;
-    data: {
-        property: string;
-        propertyDescription?: string;
-        default?: string;
-        type: string;
-        typeDescription?: string;
-    }[];
-}
-
-import * as Popover from '@radix-ui/react-popover';
-import { InfoCircledIcon } from '@radix-ui/react-icons';
-
-export const ReactPropDocsTable = (props: ReferenceProps) => {
-    return (
-        <div>
-            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-                {props.title && <span>{props.title}</span>}
-                {props.url && (
-                    <button>
-                        <a href={props.url}>{'See API documentation'}</a>
-                    </button>
-                )}
-            </div>
-            <table className="ref-table">
-                <thead>
-                    <tr>
-                        <th className="ref-table-property">Property</th>
-                        <th className="ref-table-type">Type</th>
-                        <th className="ref-table-default">Default</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {props.data.map((item) => {
-                        return (
-                            <tr key={item.property}>
-                                <td className="ref-table-property">
-                                    <span
-                                        style={{
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                        }}
-                                    >
-                                        <code>{item.property}</code>
-                                        {item.propertyDescription && (
-                                            <Popover.Root>
-                                                <Popover.Trigger>
-                                                    <InfoCircledIcon className="ref-table-icon" />
-                                                </Popover.Trigger>
-                                                <Popover.Portal>
-                                                    <Popover.Content className="ref-table-popover">
-                                                        <div>
-                                                            {
-                                                                item.propertyDescription
-                                                            }
-                                                        </div>
-                                                    </Popover.Content>
-                                                </Popover.Portal>
-                                            </Popover.Root>
-                                        )}
-                                    </span>
-                                </td>
-                                <td className="ref-table-type">
-                                    <span
-                                        style={{
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                        }}
-                                    >
-                                        <code>{item.type}</code>
-                                        {item.typeDescription && (
-                                            <Popover.Root>
-                                                <Popover.Trigger>
-                                                    <InfoCircledIcon className="ref-table-icon" />
-                                                </Popover.Trigger>
-                                                <Popover.Portal>
-                                                    <Popover.Content className="ref-table-popover">
-                                                        <div>
-                                                            <code>
-                                                                {
-                                                                    item.typeDescription
-                                                                }
-                                                            </code>
-                                                        </div>
-                                                    </Popover.Content>
-                                                </Popover.Portal>
-                                            </Popover.Root>
-                                        )}
-                                    </span>
-                                </td>
-                                <td className="ref-table-default">
-                                    {item.default ? (
-                                        <code>{item.default}</code>
-                                    ) : (
-                                        <span>{'-'}</span>
-                                    )}
-                                </td>
-                            </tr>
-                        );
-                    })}
-                </tbody>
-            </table>
-        </div>
-    );
-};
-
-export const ClassDocsTable = (props: ReferenceProps) => {
-    return (
-        <div>
-            <div>{props.title && <span>{props.title}</span>}</div>
-            <table className="ref-table">
-                <thead>
-                    <tr>
-                        <th className="ref-table-property">Property</th>
-                        <th className="ref-table-type">Type</th>
-                        <th className="ref-table-default">Default</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {props.data.map((item) => {
-                        return (
-                            <tr key={item.property}>
-                                <td className="ref-table-property">
-                                    <span
-                                        style={{
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                        }}
-                                    >
-                                        <code>{item.property}</code>
-                                        {item.propertyDescription && (
-                                            <Popover.Root>
-                                                <Popover.Trigger>
-                                                    <InfoCircledIcon className="ref-table-icon" />
-                                                </Popover.Trigger>
-                                                <Popover.Portal>
-                                                    <Popover.Content className="ref-table-popover">
-                                                        <div>
-                                                            {
-                                                                item.propertyDescription
-                                                            }
-                                                        </div>
-                                                    </Popover.Content>
-                                                </Popover.Portal>
-                                            </Popover.Root>
-                                        )}
-                                    </span>
-                                </td>
-                                <td className="ref-table-type">
-                                    <span
-                                        style={{
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                        }}
-                                    >
-                                        <code>{item.type}</code>
-                                        {item.typeDescription && (
-                                            <Popover.Root>
-                                                <Popover.Trigger>
-                                                    <InfoCircledIcon className="ref-table-icon" />
-                                                </Popover.Trigger>
-                                                <Popover.Portal>
-                                                    <Popover.Content className="ref-table-popover">
-                                                        <div>
-                                                            <code>
-                                                                {
-                                                                    item.typeDescription
-                                                                }
-                                                            </code>
-                                                        </div>
-                                                    </Popover.Content>
-                                                </Popover.Portal>
-                                            </Popover.Root>
-                                        )}
-                                    </span>
-                                </td>
-                                <td className="ref-table-default">
-                                    {item.default ? (
-                                        <code>{item.default}</code>
-                                    ) : (
-                                        <span>{'-'}</span>
-                                    )}
-                                </td>
-                            </tr>
-                        );
-                    })}
-                </tbody>
-            </table>
-        </div>
-    );
-};

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

@@ -27,7 +27,6 @@ import DockviewTabheight from '@site/sandboxes/tabheight-dockview/src/app';
 import DockviewWithIFrames from '@site/sandboxes/iframe-dockview/src/app';
 import DockviewFloating from '@site/sandboxes/floatinggroup-dockview/src/app';
 import DockviewLockedGroup from '@site/sandboxes/lockedgroup-dockview/src/app';
-import IDEExample from '@site/sandboxes/ide-example/src/app';
 import DockviewKeyboard from '@site/sandboxes/keyboard-dockview/src/app';
 
 import { DocRef, Markdown } from '@site/src/components/ui/reference/docRef';
@@ -862,14 +861,6 @@ Keyboard shortcuts
     react={DockviewKeyboard}
 />
 
-## Application with sidebars
-
-<MultiFrameworkContainer
-    height={600}
-    sandboxId="ide-example"
-    react={IDEExample}
-/>
-
 ### Nested Dockviews
 
 You can safely create multiple dockview instances within one page and nest dockviews within other dockviews.

scripts/docs.mjs

@@ -288,11 +288,12 @@ function getFunction(
             };
         }
         case ReflectionKind.Method: {
-            const { signatures, comment } = method;
+            const { signatures } = method;
             if (signatures.length > 1) {
                 throw new Error(`signatures.length > 1`);
             }
-            const { name, parameters, type, typeParameter } = signatures[0];
+            const { name, parameters, type, typeParameter, comment } =
+                signatures[0];
 
             let _typeParameter = '';