### Create and Register a Custom Panel in JavaScript

Source: https://dockview.dev/docs/core/panels/register

Demonstrates how to create a custom panel component by implementing the `IContentRenderer` interface and registering it with Dockview using the `createComponent` option. The example shows a simple panel with an HTML element and its initialization.

```javascript
class Panel implements IContentRenderer {
    private readonly _element: HTMLElement;

    get element(): HTMLElement {
        return this._element;
    }

    constructor() {
        this._element = document.createElement('div');
    }

    init(parameters: GroupPanelPartInitParameters): void {
        // Initialization logic here
    }
}

const api = createDockview(parentElement, {
    createComponent: (options) => {
        switch (options.name) {
            case 'component_1':
                return new Panel();
        }
    },
});
```

--------------------------------

### Set Panel Initial Size (JavaScript)

Source: https://dockview.dev/docs/core/panels/add

This code example shows how to specify the initial width and height for a panel. The Dockview framework attempts to honor these initial dimensions, but they might be altered based on the current grid layout and available space.

```javascript
api.addPanel({
    id: 'panel_1',
    component: 'default',
    initialWidth: 100,
    initialHeight: 100
});
```

--------------------------------

### Load Dock Layout from JSON in JavaScript

Source: https://dockview.dev/docs/core/state/load

This snippet demonstrates how to load a dock layout from a JSON string using the `fromJSON` method. It includes error handling for invalid or corrupted JSON data and an example of retrieving layout data from local storage. The `onReady` callback is used to perform the layout loading operation after the Dockview component is ready.

```javascript
const onReady = (event: DockviewReadyEvent) => {
    let success = false;

    const mySerializedLayout = localStorage.getItem('my_layout');

    if (mySerializedLayout) {
        try {
            const layout = JSON.parse(mySerializedLayout);
            event.api.fromJSON(layout);
            success = true;
        } catch (err) {
            // log the error
        }
    }

    if (!success) {
        // perhap load a default layout?
    }
};

return <DockviewComponent onReady={onReady}/>;
```

--------------------------------

### Pass custom parameters to a panel

Source: https://dockview.dev/docs/core/panels/add

This example demonstrates how to pass custom parameters to a panel using the `params` option. These parameters are accessible within both the panel and its tab renderer. The `params` can be updated after the panel creation using other API methods.

```javascript
const panel: IDockviewPanel = api.addPanel({
    id: 'my_unique_panel_id',
    component: 'my_component',
    params: {
        myCustomKey: 'my_custom_value',
    },
});
```

--------------------------------

### Registering Higher-Order Component - TypeScript

Source: https://dockview.dev/docs/core/panels/rendering

Example of how to register a component wrapped by the 'RenderWhenVisible' higher-order component. This ensures that 'MyComponent' will only be rendered when its associated panel is visible.

```typescript
const components = { default: RenderWhenVisible(MyComponent) };
```

--------------------------------

### Make a panel float

Source: https://dockview.dev/docs/core/panels/add

This example demonstrates how to make a panel float. The `floating: true` option will place the panel in a default floating position. Alternatively, a `floating` object can specify `position` (with `left`, `top`, `bottom`, `right`), `width`, and `height` for precise control.

```javascript
api.addPanel({
    id: 'panel_1',
    component: 'default',
    floating: true
});

api.addPanel({
  id: 'panel_2',
  component: 'default',
  floating: {
      position: { left: 10, top: 10 },
      width: 300,
      height: 300
  }
});
```

--------------------------------

### Position panel relative to a group

Source: https://dockview.dev/docs/core/panels/add

This example demonstrates positioning a panel relative to an existing group using `referenceGroup` and `direction`. The `direction` can be 'within', 'below', 'above', 'right', or 'left'. Similar to panel referencing, an `index` can be specified.

```javascript
const panel2: IDockviewPanel = api.addPanel({
    id: 'panel_2',
    component: 'default',
    position: {
      referenceGroup: 'panel_1',
      direction: 'left'
    }
});


api.addPanel({
    id: 'panel_2',
    component: 'default',
    position: {
      referenceGroup: panel2.group,
      direction: 'left'
    }
});

api.addPanel({
    id: 'panel_3',
    component: 'default',
    position: {
      referenceGroup: panel2.group,
          index: 2
    }
});
```

--------------------------------

### Dockview Configuration

Source: https://dockview.dev/docs/other/paneview/overview

This section details the configuration options available for the Dockview component, including properties for styling, behavior, and event handling.

```APIDOC
## Dockview Configuration Properties

### Description
Configuration options for the Dockview splitview control.

### Method
N/A (Configuration object)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
- **className** (string) - Optional - Custom CSS class name for the component.
- **disableAutoResizing** (boolean) - Optional - Disables automatic resizing of panels.
- **disableDnd** (boolean) - Optional - Disables drag and drop functionality for panels.
- **components** (Record<string, React.FunctionComponent<IPaneviewPanelProps<any>>>) - Required - A record of components to be used within the panels.
- **headerComponents** (Record<string, React.FunctionComponent<IPaneviewPanelProps<any>>>) - Optional - A record of components to be used in the panel headers.
- **onReady** (function) - Required - Callback function executed when the component is ready. Receives a `PaneviewReadyEvent`.
- **onDidDrop** (function) - Required - Callback function executed when a panel is dropped. Receives a `PaneviewDidDropEvent`.

### Request Example
```json
{
  "className": "my-dockview",
  "disableAutoResizing": false,
  "disableDnd": false,
  "components": {
    "my-panel": PanelComponent
  },
  "headerComponents": {
    "my-header": HeaderComponent
  },
  "onReady": (event) => console.log('Dockview is ready!'),
  "onDidDrop": (event) => console.log('Panel dropped!')
}
```

### Response
#### Success Response (200)
N/A (This describes configuration, not a typical API response)

#### Response Example
N/A
```

--------------------------------

### Extend Dockview Abyss Theme (CSS)

Source: https://dockview.dev/docs/overview/getStarted/theme

Provides an example of extending the 'dockview-theme-abyss' by adding a custom border to the tabs container for active and inactive groups. This showcases how to modify existing theme styles using CSS.

```css
.dockview-theme-abyss {
  .groupview {
      &.active-group {
          > .tabs-and-actions-container {
              border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);
          }
      }
      &.inactive-group {
          > .tabs-and-actions-container {
              border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);
          }
      }
  }
}
```

--------------------------------

### Component Creation Options

Source: https://dockview.dev/docs/api/dockview/options

Options for creating various components within the Dockview interface, including content renderers, header actions, and tab renderers.

```APIDOC
## Component Creation Functions

### createComponent

#### Description
Creates a content renderer for a component.

### createLeftHeaderActionComponent

#### Description
Creates a left header action component for a group.

### createPrefixHeaderActionComponent

#### Description
Creates a prefix header action component for a group.

### createRightHeaderActionComponent

#### Description
Creates a right header action component for a group.

### createTabComponent

#### Description
Creates a tab renderer for a component.

### createWatermarkComponent

#### Description
Creates a watermark component to be displayed when no panels are present.

### defaultTabComponent

#### Description
Specifies the default tab component to use.
```

--------------------------------

### Get Panel by ID - Dockview API

Source: https://dockview.dev/docs/api/dockview/overview

Retrieves a panel object using its string ID. This method may return undefined if no panel with the specified ID is found. It takes a string ID and returns an IDockviewPanel or undefined.

```typescript
getPanel(id: string): IDockviewPanel | undefined
```

--------------------------------

### Get Group by ID - Dockview API

Source: https://dockview.dev/docs/api/dockview/overview

Retrieves a group object using its string ID. This method may return undefined if no group with the specified ID is found. It takes a string ID and returns an IDockviewGroupPanel or undefined.

```typescript
getGroup(id: string): IDockviewGroupPanel | undefined
```

--------------------------------

### Panel API for Grid Constraints and Sizing (JavaScript)

Source: https://dockview.dev/docs/api/gridview/panelApi

This section of the Panel API documentation focuses on functionalities related to grid constraints and sizing. It includes properties similar to the general panel API but adds methods for setting grid constraints and managing panel size, along with specific event listeners for grid constraint changes.

```javascript
readonly component: string
readonly height: number
readonly id: string
readonly isActive: boolean
readonly isFocused: boolean
readonly isVisible: boolean
readonly onDidActiveChange: Event<ActiveEvent>
readonly onDidConstraintsChange: Event<GridConstraintChangeEvent>
readonly onDidDimensionsChange: Event<PanelDimensionChangeEvent>
readonly onDidFocusChange: Event<FocusEvent>
readonly onDidParametersChange: Event<Parameters>
readonly onDidVisibilityChange: Event<VisibilityEvent>
readonly onWillFocus: Event<WillFocusEvent>
readonly width: number
getParameters<T extends Parameters = Parameters>(): T
setActive(): void
setConstraints(value: GridConstraintChangeEvent2): void
setSize(event: SizeEvent): void
setVisible(isVisible: boolean): void
updateParameters(parameters: Parameters): void
```

--------------------------------

### Panel Properties and Methods

Source: https://dockview.dev/docs/api/gridview/panelApi

This section details the properties and methods available on a Dockview panel object.

```APIDOC
## Panel API

### Description
This API provides access to various properties and methods of a Dockview panel, allowing for interaction with its state, dimensions, and events.

### Properties
- **component** (string) - The id of the component renderer.
- **height** (number) - The panel height in pixels.
- **id** (string) - The id of the panel.
- **isActive** (boolean) - Whether the panel is the actively selected panel.
- **isFocused** (boolean) - Whether the panel holds the current focus.
- **isVisible** (boolean) - Whether the panel is visible.
- **width** (number) - The panel width in pixels.

### Methods
- **getParameters<T extends Parameters = Parameters>()**: T - Retrieves the parameters of the panel.
- **setActive()**: void - Sets the panel as the active panel.
- **setVisible(isVisible: boolean)**: void - Sets the visibility of the panel.
- **updateParameters(parameters: Parameters)**: void - Updates the parameters of the panel.

### Events
- **onDidActiveChange**: Event<ActiveEvent>
- **onDidDimensionsChange**: Event<PanelDimensionChangeEvent>
- **onDidFocusChange**: Event<FocusEvent>
- **onDidParametersChange**: Event<Parameters>
- **onDidVisibilityChange**: Event<VisibilityEvent>
- **onWillFocus**: Event<WillFocusEvent>

### Constraints & Sizing (Specific to Grid Layout)
- **onDidConstraintsChange**: Event<GridConstraintChangeEvent>
- **setConstraints(value: GridConstraintChangeEvent2)**: void
- **setSize(event: SizeEvent)**: void

### Example
```javascript
// Example usage (assuming 'panel' is a Panel object)
console.log(panel.id);
panel.setActive();
panel.setVisible(false);
```
```

--------------------------------

### Create Dockview Component Options

Source: https://dockview.dev/docs/api/splitview/options

Defines the options for creating a Dockview component. This is a core function for initializing panels within the Dockview interface. It returns a SplitviewPanel.

```typescript
createComponent: (options: CreateComponentOptions): SplitviewPanel
```

--------------------------------

### Set custom title for a panel

Source: https://dockview.dev/docs/core/panels/add

This example shows how to provide a custom title for a panel. If no `title` is specified, the panel's `id` will be used as the tab title. The `api.setTitle()` method can also be used to update the title after the panel has been created.

```javascript
api.addPanel({
    id: 'panel_1',
    component: 'my_component',
    title: 'my_custom_title',
});
```

```javascript
api.setTitle('my_new_custom_title');
```

--------------------------------

### General Layout and Behavior Options

Source: https://dockview.dev/docs/api/dockview/options

Configuration options that control the overall layout, behavior, and appearance of the Dockview container and its elements.

```APIDOC
## Dockview Configuration Options

### className

#### Description
Applies a custom CSS class to the Dockview container.

### debug

#### Description
Enables or disables debug mode for enhanced troubleshooting.

### defaultRenderer

#### Description
Determines when the default renderer is applied ('always' or 'onlyWhenVisible').

### disableAutoResizing

#### Description
Disables automatic resizing controlled by `ResizeObserver`. Manual resizing requires calling `.layout(width, height)`.

### disableDnd

#### Description
Disables drag and drop functionality within the Dockview.

### disableFloatingGroups

#### Description
Disables the ability for groups to be floated outside the main container.

### disableTabsOverflowList

#### Description
Controls the behavior of tab overflow when the tab list becomes too crowded.

### dndEdges

#### Description
Defines the drop target overlay model or explicitly disables it.

### floatingGroupBounds

#### Description
Sets the bounds for floating groups, either with minimum dimensions or constrained within the viewport.

### hideBorders

#### Description
Determines whether borders are hidden within the Dockview.

### locked

#### Description
Locks the Dockview, preventing any modifications or interactions.

### noPanelsOverlay

#### Description
Specifies the overlay to display when no panels are present ('watermark' or 'emptyGroup').

### popoutUrl

#### Description
Sets the URL for popout functionality, often used with floating groups.

### rootOverlayModel

#### Description
Deprecated. Use `dndEdges` instead. Controls the root overlay model for drag and drop interactions.

### scrollbars

#### Description
Selects the scrollbar behavior ('custom' for internal implementation or 'native' for browser defaults). Applied only to the tab header.

### singleTabMode

#### Description
Configures the single tab mode ('default' or 'fullwidth').

### theme

#### Description
Applies a specific theme to the Dockview interface.
```

--------------------------------

### Panel Methods (Extended)

Source: https://dockview.dev/docs/api/paneview/panelApi

This section details additional methods for managing panel constraints and size.

```APIDOC
## Panel Methods (Extended)

### Description
Includes methods for setting panel constraints and adjusting its size.

### Methods

- **setConstraints**(value: PanelConstraintChangeEvent2): void - Sets the constraints for the panel.
- **setSize**(event: PanelSizeEvent): void - Adjusts the size of the panel.
```

--------------------------------

### React Dockview with onDidDrop and onUnhandledDragOverEvent

Source: https://dockview.dev/docs/core/dnd/dragAndDrop

This example shows how to handle drop events and unhandled drag over events in DockviewReact. The onDidDrop function adds a new panel when a drop occurs, and onUnhandledDragOverEvent allows the application to accept external drag events.

```javascript
/**
 * called when an ondrop event which does not originate from the dockview libray and
 * passes the onUnhandledDragOverEvent condition
 **/
const onDidDrop = (event: DockviewDropEvent) => {
    const { group } = event;

    event.api.addPanel({
        id: 'test',
        component: 'default',
        position: {
            referencePanel: group.activePanel.id,
            direction: 'within',
        },
    });
};

const onReady = (event: DockviewReadyEvent) => {

  /**
   * called for drag over events which do not originate from the dockview library
   * allowing the developer to decide where the overlay should be shown for a
   * particular drag event
   **/
  api.onUnhandledDragOverEvent(event => {
    event.accept();
  });
}

return (
    <DockviewReact
        components={components}
        onReady={onReady}
        className="dockview-theme-abyss"
        onDidDrop={onDidDrop}
    />
);
```

--------------------------------

### Create Component Option

Source: https://dockview.dev/docs/api/dockview/options

Defines the options for creating a component within Dockview. This is a core function for rendering content panels.

```typescript
createComponent: (options: CreateComponentOptions): IContentRenderer
```

--------------------------------

### Save Dockview Layout to Local Storage with React

Source: https://dockview.dev/docs/core/state/save

This React effect hook saves the Dockview layout to local storage whenever it changes. It uses `api.onDidLayoutChange` to detect changes and `api.toJSON()` to get the layout data. The effect cleans up the event listener on unmount.

```typescript
const [api, setApi] = React.useState<DockviewApi>();

React.useEffect(() => {
  if(!api) {
    return;
  }

  const disposable = api.onDidLayoutChange(() => {
    const layout: SerializedDockview = api.toJSON();
    localStorage.setItem('my_layout', JSON.stringify(layout));
  });

  return () => disposable.dispose();
}, [api]);

const onReady = (event: DockviewReadyEvent) => {
  setApi(event.api);
}

return <DockviewComponent onReady={onReady}/>
```

--------------------------------

### Theme Configuration

Source: https://dockview.dev/docs/api/dockview/options

Sets the overall theme for the Dockview interface. This option accepts a `DockviewTheme` value to apply predefined visual styles.

```typescript
theme?: DockviewTheme
```

--------------------------------

### Panel API Methods

Source: https://dockview.dev/docs/api/dockview/panelApi

This section details the methods available on a Panel object, used for controlling and interacting with the panel.

```APIDOC
## Panel API Methods

### Description
These methods allow for programmatic control over the panel, such as closing, maximizing, and updating its properties.

### Methods
- **close()**: void - Closes the panel.
- **exitMaximized()**: void - Exits the maximized state of the panel.
- **getParameters<T extends Parameters = Parameters>()**: T - Retrieves the panel's parameters. The type `T` can be specified for more specific parameter types.
- **getWindow()**: Window - Returns the `Window` object associated with the panel, if available.
- **isMaximized()**: boolean - Returns `true` if the panel is currently maximized, `false` otherwise.
- **maximize()**: void - Maximizes the panel.
- **moveTo(options: DockviewGroupMoveParams)**: void - Moves the panel to a specified location or group.
- **setActive()**: void - Sets the panel as the active panel.
- **setRenderer(renderer: DockviewPanelRenderer)**: void - Updates the panel's renderer.
- **setSize(event: SizeEvent)**: void - Sets the panel's size according to the provided `SizeEvent`.
- **setTitle(title: string)**: void - Updates the panel's title.
- **updateParameters(parameters: Parameters)**: void - Updates the panel's parameters.
```

--------------------------------

### Paneview Component Methods

Source: https://dockview.dev/docs/api/paneview/api

Provides methods for interacting with and managing the Paneview component, including adding/removing panels, serialization, and layout adjustments.

```APIDOC
## Paneview Component Methods

### Description
Methods for performing actions on the Paneview component, such as adding, removing, or moving panels, serializing/deserializing layout, and managing component state.

### Methods
#### addPanel
- **addPanel** (options: AddPaneviewComponentOptions) - Adds a panel to the Paneview and returns the created panel object.
  - Parameters:
    - **options** (AddPaneviewComponentOptions) - Options for creating and adding the panel.
  - Returns: `IPaneviewPanel` - The newly added panel object.

#### clear
- **clear** () - Resets the component to an empty and default state.

#### dispose
- **dispose** () - Releases resources and tears down the component. Note: Do not call this when using framework-specific versions of Dockview.

#### focus
- **focus** () - Focuses the component. It will attempt to focus an active panel if one exists.

#### fromJSON
- **fromJSON** (data: SerializedPaneview) - Creates a Paneview component from a serialized object.
  - Parameters:
    - **data** (SerializedPaneview) - The serialized data representing the desired layout.

#### getPanel
- **getPanel** (id: string) - Retrieves a panel object by its string ID. Returns `undefined` if the panel is not found.
  - Parameters:
    - **id** (string) - The ID of the panel to retrieve.
  - Returns: `IPaneviewPanel | undefined` - The panel object or undefined.

#### layout
- **layout** (width: number, height: number) - Forces the component to resize to an exact width and height. Consider using auto-resizing features before employing this method.
  - Parameters:
    - **width** (number) - The target width.
    - **height** (number) - The target height.

#### movePanel
- **movePanel** (from: number, to: number) - Moves a panel from one index to another within the Paneview.
  - Parameters:
    - **from** (number) - The current index of the panel.
    - **to** (number) - The desired index for the panel.

#### removePanel
- **removePanel** (panel: IPaneviewPanel) - Removes a specific panel object from the Paneview.
  - Parameters:
    - **panel** (IPaneviewPanel) - The panel object to remove.

#### toJSON
- **toJSON** () - Creates and returns a serialized object representing the current state of the Paneview component.
  - Returns: `SerializedPaneview` - The serialized representation of the component.

#### updateOptions
- **updateOptions** (options: Partial<PaneviewComponentOptions>) - Updates the configurable options of the Paneview component.
  - Parameters:
    - **options** (Partial<PaneviewComponentOptions>) - An object containing the options to update.
```

--------------------------------

### Use Built-in Dockview Themes (JavaScript)

Source: https://dockview.dev/docs/overview/getStarted/theme

Demonstrates how to import and apply built-in themes provided by Dockview. It shows how to use the `theme` property for dock components and the `className` property for other component types.

```javascript
import { themeAbyss } from "dockview";

// For dock components
theme={themeAbyss}

// For other components
const {className} = themeAbyss;
```

--------------------------------

### Gridview Component Properties

Source: https://dockview.dev/docs/other/gridview/overview

Configuration options for the Gridview component, including styling, behavior, and event handling.

```APIDOC
## Gridview Component Properties

### Description
Configuration options for the Gridview component, including styling, behavior, and event handling.

### Method
N/A

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A

### Component Properties

- **className** (string) - Optional - A custom class name for the gridview.
- **disableAutoResizing** (boolean) - Optional - If true, disables automatic resizing of panels.
- **hideBorders** (boolean) - Optional - If true, hides the borders between panels.
- **orientation** (Orientation) - Required - Defines the orientation of the splitters (e.g., 'vertical' or 'horizontal').
- **proportionalLayout** (boolean) - Optional - If true, enables proportional layout for panels.
- **components** (Record<string, React.FunctionComponent<IGridviewPanelProps<any>>>) - Required - A mapping of component names to their React function components.
- **onReady** (GridviewReadyEvent) - Required - A callback function that is invoked when the gridview is ready.
```

--------------------------------

### Set Panel Size using Dockview API (JavaScript)

Source: https://dockview.dev/docs/core/groups/resizing

Demonstrates how to set the size of a panel using the Dockview API. It's mandatory to provide either height or width, and both can be provided optionally. This method directly resizes the panel.

```javascript
// it's mandatory to provide either a height or a width, providing both is optional  
props.api.setSize({
    height: 100,
    width: 200,
});
```

--------------------------------

### createComponent API

Source: https://dockview.dev/docs/api/gridview/options

This section details the `createComponent` function used to create new components within the Dockview grid. It outlines the available options for customizing the component's behavior and appearance.

```APIDOC
## createComponent API

### Description

This endpoint details the `createComponent` function, which is used to instantiate and configure new components within the Dockview grid layout system.

### Method

```
createComponent
```

### Parameters

#### Request Body Options

- **className** (string) - Optional - A CSS class name to apply to the component.
- **disableAutoResizing** (boolean) - Optional - If true, disables automatic resizing of the component.
- **hideBorders** (boolean) - Optional - If true, hides the borders of the component.
- **orientation** (Orientation) - Required - Specifies the orientation of the component (e.g., horizontal or vertical).
- **proportionalLayout** (boolean) - Optional - If true, enables proportional layout for the component.

### Request Example

```json
{
  "createComponent": {
    "options": {
      "className": "my-custom-component",
      "disableAutoResizing": false,
      "hideBorders": true,
      "orientation": "horizontal",
      "proportionalLayout": true
    }
  }
}
```

### Response

#### Success Response (200)

- **GridviewPanel<GridviewPanelApiImpl>** - The newly created gridview panel instance.

#### Response Example

```json
{
  "componentInstance": "{...}" 
}
```
```

--------------------------------

### Create Dockview Pane Component (JavaScript)

Source: https://dockview.dev/docs/api/paneview/options

This function creates a new pane component within the Dockview interface. It accepts an options object to define the component's properties and returns an IPanePart interface representing the created pane. No specific dependencies are mentioned beyond the Dockview framework itself.

```javascript
createComponent: (options: CreateComponentOptions): IPanePart
```

--------------------------------

### Splitview Component Methods

Source: https://dockview.dev/docs/api/splitview/api

Methods for interacting with and managing the Splitview component, including adding/removing panels, layout adjustments, and serialization.

```APIDOC
## Splitview Component Methods

### Description
Provides methods to manipulate the Splitview component, such as adding, removing, and rearranging panels, updating the layout, and serializing/deserializing component state.

### Methods
- **addPanel(options: AddSplitviewComponentOptions)*** (ISplitviewPanel) - Adds a new panel and returns the created instance. `T` is the type of the parameters for the panel's view.
- **clear()**: void - Removes all panels and clears the component.
- **dispose()**: void - Releases resources and tears down the component. Do not call when using framework versions of Dockview.
- **focus()**: void - Focuses the component.
- **fromJSON(data: SerializedSplitview)**: void - Deserializes a layout to build a splitview.
- **getPanel(id: string)**: ISplitviewPanel | undefined - Gets the reference to a panel given its `string` id.
- **layout(width: number, height: number)**: void - Lays out the panel with a specified width and height.
- **movePanel(from: number, to: number)**: void - Moves a panel from its current index to a desired index.
- **removePanel(panel: ISplitviewPanel, sizing: InvisibleSizing | SplitSizing | DistributeSizing)**: void - Removes an existing panel and optionally provides a `Sizing` method for the subsequent resize.
- **toJSON()**: SerializedSplitview - Serializes the current layout.
- **updateOptions(options: Partial<SplitviewComponentOptions>)**: void - Updates configurable options.
```

--------------------------------

### Create Dockview Component (JavaScript)

Source: https://dockview.dev/docs/api/gridview/options

Defines the function to create a new component within the Dockview grid. It accepts an options object to configure the panel's behavior and appearance. Dependencies include the Dockview library itself.

```javascript
createComponent: (options: CreateComponentOptions): GridviewPanel<GridviewPanelApiImpl>
```

--------------------------------

### Panel Properties and Methods

Source: https://dockview.dev/docs/api/splitview/panelApi

This section details the properties and methods available for a Panel object, allowing for inspection and manipulation of panel states.

```APIDOC
## Panel API Reference

### Properties

- **component** (string) - The id of the component renderer.
- **height** (number) - The panel height in pixels.
- **id** (string) - The id of the panel.
- **isActive** (boolean) - Whether the panel is the actively selected panel.
- **isFocused** (boolean) - Whether the panel holds the current focus.
- **isVisible** (boolean) - Whether the panel is visible.
- **width** (number) - The panel width in pixels.

### Events

- **onDidActiveChange** (Event<ActiveEvent>) - Event triggered when the active state changes.
- **onDidDimensionsChange** (Event<PanelDimensionChangeEvent>) - Event triggered when panel dimensions change.
- **onDidFocusChange** (Event<FocusEvent>) - Event triggered when the focus state changes.
- **onDidParametersChange** (Event<Parameters>) - Event triggered when panel parameters change.
- **onDidVisibilityChange** (Event<VisibilityEvent>) - Event triggered when the visibility state changes.
- **onWillFocus** (Event<WillFocusEvent>) - Event triggered when the panel is about to gain focus.
- **onDidConstraintsChange** (Event<PanelConstraintChangeEvent>) - Event triggered when panel constraints change.

### Methods

- **getParameters**<T extends Parameters = Parameters>(): T - Retrieves the parameters for the panel.
- **setActive**(): void - Sets the panel as the active panel.
- **setVisible**(isVisible: boolean): void - Sets the visibility state of the panel.
- **updateParameters**(parameters: Parameters): void - Updates the parameters of the panel.
- **setConstraints**(value: PanelConstraintChangeEvent2): void - Sets the constraints for the panel.
- **setSize**(event: PanelSizeEvent): void - Sets the size of the panel.
```

--------------------------------

### Dockview Panel Properties

Source: https://dockview.dev/docs/other/paneview/overview

Defines the properties available for configuring Dockview panels, including CSS classes, resizing behavior, drag-and-drop functionality, and custom components for panels and headers. Event handlers for panel readiness and drop events are also specified.

```typescript
className?: string
disableAutoResizing?: boolean
disableDnd?: boolean
components: Record<string,React.FunctionComponent<IPaneviewPanelProps<any>>>
headerComponents?: Record<string,React.FunctionComponent<IPaneviewPanelProps<any>>>
onReady: (event: PaneviewReadyEvent): void
onDidDrop(event: PaneviewDidDropEvent): void
```

--------------------------------

### Root Overlay Model Option (Deprecated)

Source: https://dockview.dev/docs/api/dockview/options

Deprecated option for configuring the root overlay model. Use `dndEdges` instead. This setting will be removed in a future version.

```typescript
rootOverlayModel?: DroptargetOverlayModel
```

--------------------------------

### Paneview Component Methods (JavaScript)

Source: https://dockview.dev/docs/api/paneview/api

Provides an overview of the methods available for interacting with a Dockview Paneview component. These methods allow for actions like adding/removing panels, serializing/deserializing layouts, and managing component focus.

```javascript
addPanel<T extends object = Parameters>(options: AddPaneviewComponentOptions<T>): IPaneviewPanel
clear(): void
dispose(): void
focus(): void
fromJSON(data: SerializedPaneview): void
getPanel(id: string): IPaneviewPanel | undefined
layout(width: number, height: number): void
movePanel(from: number, to: number): void
removePanel(panel: IPaneviewPanel): void
toJSON(): SerializedPaneview
updateOptions(options: Partial<PaneviewComponentOptions>): void
```

--------------------------------

### Panel Constraints and Size Management (JavaScript)

Source: https://dockview.dev/docs/api/paneview/panelApi

This section covers methods for managing panel constraints and size. The `setConstraints` method allows for defining the acceptable size ranges for a panel, while `setSize` allows for programmatically setting the panel's dimensions.

```javascript
readonly onDidConstraintsChange: Event<PanelConstraintChangeEvent>;
setConstraints(value: PanelConstraintChangeEvent2): void;
setSize(event: PanelSizeEvent): void;
```

--------------------------------

### Drag and Drop Configuration

Source: https://dockview.dev/docs/core/dnd/dragAndDrop

Customize the appearance and behavior of drag and drop overlays using the `dndEdges` prop.

```APIDOC
## Drag and Drop Configuration

### Description
The `dndEdges` prop allows you to override the conditions for the far edge overlays used during drag and drop operations.

### Props

#### `dndEdges`

- **Description**: Configures the properties of the drag and drop edge overlays.
- **Type**: `object`
- **Properties**:
  - `size`: Defines the size of the edge overlay.
    - `value` (number): The size value.
    - `type` ('pixels' | 'percentage'): The unit type for the size.
  - `activationSize`: Defines the size threshold for activating the overlay.
    - `value` (number): The activation size value.
    - `type` ('pixels' | 'percentage'): The unit type for the activation size.

### Example Usage

```jsx
<DockviewReact
  {...props}
  dndEdges={{
    size: { value: 100, type: 'pixels' },
    activationSize: { value: 5, type: 'percentage' },
  }}
/>
```
```

--------------------------------

### Popout URL Configuration

Source: https://dockview.dev/docs/api/dockview/options

Specifies the URL to be used when a panel is popped out into a separate window. This allows for configuring external or specific popout views.

```typescript
popoutUrl?: string
```

--------------------------------

### Move Panel with Dockview JavaScript API

Source: https://dockview.dev/docs/core/panels/move

Demonstrates how to move a panel to a specified group and position using the `moveTo` method. Requires a panel and group object, along with position and index parameters. An equivalent method exists for moving entire groups.

```javascript
panel.api.moveTo({ group, position, index });
```

```javascript
const group = panel.api.group;
group.api.moveTo({ group, position });
```

--------------------------------

### Dockview API Methods

Source: https://dockview.dev/docs/api/dockview/overview

This section covers the methods available on the Dockview API object, including functions for adding floating groups, adding new groups, adding panels, and manipulating the layout.

```APIDOC
## Dockview API Methods

### Description
Provides functionality to interact with and modify the Dockview layout, including adding and managing panels and groups.

### Methods
- **addFloatingGroup**(item: DockviewGroupPanel | IDockviewPanel, options: FloatingGroupOptions): void
  - Description: Adds a floating group to the Dockview instance.
  - Parameters:
    - **item** (DockviewGroupPanel | IDockviewPanel) - The panel or group to add as a floating group.
    - **options** (FloatingGroupOptions) - Options for configuring the floating group.

- **addGroup**(options: (GroupOptions & AbsolutePosition) | (GroupOptions & AddGroupOptionsWithPanel) | (GroupOptions & AddGroupOptionsWithGroup)): DockviewGroupPanel
  - Description: Adds a new group to the Dockview instance.
  - Parameters:
    - **options** (GroupOptions & AbsolutePosition | GroupOptions & AddGroupOptionsWithPanel | GroupOptions & AddGroupOptionsWithGroup) - Options for configuring the new group, including position and content.
  - Returns: The newly created DockviewGroupPanel.

- **addPanel**<T extends object = Parameters>(options: AddPanelOptions<T>): IDockviewPanel
  - Description: Adds a new panel to the Dockview instance.
  - Parameters:
    - **options** (AddPanelOptions<T>) - Options for configuring the new panel, including its content and initial placement.
  - Returns: The newly created IDockviewPanel.
```

--------------------------------

### GridviewComponent Methods

Source: https://dockview.dev/docs/api/gridview/api

Provides essential methods for managing Dockview gridview components. These include adding/removing panels, clearing and disposing the component, serializing/deserializing layouts, and forcing layout updates.

```javascript
addPanel<T extends object = Parameters>(options: AddComponentOptions<T>): IGridviewPanel<GridviewPanelApi>
clear(): void
dispose(): void
focus(): void
fromJSON(data: SerializedGridviewComponent): void
getPanel(id: string): IGridviewPanel<GridviewPanelApi> | undefined
layout(width: number, height: number, force: boolean): void
movePanel(panel: IGridviewPanel<GridviewPanelApi>, options: {
	direction: Direction,
	reference: string,
	size?: number
}): void
removePanel(panel: IGridviewPanel<GridviewPanelApi>, sizing: InvisibleSizing | SplitSizing | DistributeSizing): void
toJSON(): SerializedGridviewComponent
updateOptions(options: Partial<GridviewComponentOptions>): void
```

--------------------------------

### Third-Party Drag and Drop Integration

Source: https://dockview.dev/docs/core/dnd/dragAndDrop

Demonstrates how Dockview coexists with third-party drag and drop libraries within panels without interference.

```APIDOC
## Third Party Dnd Libraries

### Description
This section shows an example of using a third-party drag and drop library inside a panel. Dockview is designed not to interfere with the drag and drop logic of other controls, ensuring seamless integration.

### Example Scenario

Panels within the Dockview layout can contain components that utilize their own drag and drop functionalities. The provided example illustrates that `dockview` does not prevent or alter these external drag and drop interactions.

*(Visual representation of panels with internal drag-and-drop elements would typically be shown here)*
```

--------------------------------

### GridviewComponent API

Source: https://dockview.dev/docs/api/gridview/api

This section details the properties and methods available on the GridviewComponent, which serves as the core interface for managing a collection of panels within Dockview.

```APIDOC
## GridviewComponent API

### Description
Provides access to the properties and methods of the GridviewComponent for managing panels, layout, and component behavior.

### Properties

#### height
- **height** (number) - The current height of the component.

#### maximumHeight
- **maximumHeight** (number) - The maximum allowed height for the component.

#### maximumWidth
- **maximumWidth** (number) - The maximum allowed width for the component.

#### minimumHeight
- **minimumHeight** (number) - The minimum allowed height for the component.

#### minimumWidth
- **minimumWidth** (number) - The minimum allowed width for the component.

#### onDidActivePanelChange
- **onDidActivePanelChange** (Event<IGridviewPanel<GridviewPanelApi> | undefined>) - Event invoked when the active panel changes. May be undefined if no panel is active.

#### onDidAddPanel
- **onDidAddPanel** (Event<IGridviewPanel<GridviewPanelApi>>) - Event invoked when a panel is added. May be called multiple times when moving panels.

#### onDidLayoutChange
- **onDidLayoutChange** (Event<void>) - Event invoked when any layout change occurs, an aggregation of many events.

#### onDidLayoutFromJSON
- **onDidLayoutFromJSON** (Event<void>) - Event invoked after a layout is deserialized using the `fromJSON` method.

#### onDidRemovePanel
- **onDidRemovePanel** (Event<IGridviewPanel<GridviewPanelApi>>) - Event invoked when a panel is removed. May be called multiple times when moving panels.

#### orientation
- **orientation** (Orientation) - The current orientation of the component. Can be changed after initialization.

#### panels
- **panels** (IGridviewPanel<GridviewPanelApi>[]) - An array containing all panel objects within the component.

#### width
- **width** (number) - The current width of the component.

### Methods

#### addPanel
- **addPanel**&lt;T extends object = Parameters&gt;(options: AddComponentOptions&lt;T&gt;): IGridviewPanel&lt;GridviewPanelApi&gt;
  - **Description**: Adds a panel to the component and returns the created panel object.
  - **Parameters**:
    - **options** (AddComponentOptions&lt;T&gt;) - Options for adding the component.

#### clear
- **clear**(): void
  - **Description**: Resets the component to an empty and default state.

#### dispose
- **dispose**(): void
  - **Description**: Releases resources and tears down the component. Do not call when using framework versions of Dockview.

#### focus
- **focus**(): void
  - **Description**: Focuses the component. Will try to focus an active panel if one exists.

#### fromJSON
- **fromJSON**(data: SerializedGridviewComponent): void
  - **Description**: Creates a component layout from a serialized object.
  - **Parameters**:
    - **data** (SerializedGridviewComponent) - The serialized layout data.

#### getPanel
- **getPanel**(id: string): IGridviewPanel&lt;GridviewPanelApi&gt; | undefined
  - **Description**: Retrieves a panel object given its `id`. Returns `undefined` if the panel is not found.
  - **Parameters**:
    - **id** (string) - The unique identifier of the panel.

#### layout
- **layout**(width: number, height: number, force: boolean): void
  - **Description**: Forces the component to resize to a specific width and height. Consider using auto-resizing features before using this method.
  - **Parameters**:
    - **width** (number) - The desired width.
    - **height** (number) - The desired height.
    - **force** (boolean) - Whether to force the layout update.

#### movePanel
- **movePanel**(panel: IGridviewPanel&lt;GridviewPanelApi&gt;, options: { direction: Direction, reference: string, size?: number }): void
  - **Description**: Moves a panel relative to another panel in a specified direction.
  - **Parameters**:
    - **panel** (IGridviewPanel&lt;GridviewPanelApi&gt;) - The panel to move.
    - **options** ({ direction: Direction, reference: string, size?: number }) - Options specifying the move direction, reference panel, and optional size.

#### removePanel
- **removePanel**(panel: IGridviewPanel&lt;GridviewPanelApi&gt;, sizing: InvisibleSizing | SplitSizing | DistributeSizing): void
  - **Description**: Removes a panel from the component.
  - **Parameters**:
    - **panel** (IGridviewPanel&lt;GridviewPanelApi&gt;) - The panel to remove.
    - **sizing** (InvisibleSizing | SplitSizing | DistributeSizing) - The sizing strategy for removal.

#### toJSON
- **toJSON**(): SerializedGridviewComponent
  - **Description**: Creates a serialized object representing the current component layout.
  - **Returns**: SerializedGridviewComponent - The serialized layout data.

#### updateOptions
- **updateOptions**(options: Partial&lt;GridviewComponentOptions&gt;): void
  - **Description**: Updates the component's options.
  - **Parameters**:
    - **options** (Partial&lt;GridviewComponentOptions&gt;) - Partial options to update.
```

--------------------------------

### Import Dockview CSS

Source: https://dockview.dev/docs/overview/getStarted/theme

Imports the main stylesheet for Dockview components. This is a prerequisite for applying any theme or styling.

```css
@import './node_modules/dockview-core/dist/styles/dockview.css';
```

--------------------------------

### Panel Properties and Methods (JavaScript)

Source: https://dockview.dev/docs/api/gridview/panelApi

This snippet details the properties and methods available on a Dockview panel. Properties include identifiers, dimensions, and state information (active, focused, visible). Methods allow for interaction such as setting visibility, updating parameters, and retrieving parameters. Event listeners are also provided for state changes.

```javascript
readonly component: string
readonly height: number
readonly id: string
readonly isActive: boolean
readonly isFocused: boolean
readonly isVisible: boolean
readonly onDidActiveChange: Event<ActiveEvent>
readonly onDidDimensionsChange: Event<PanelDimensionChangeEvent>
readonly onDidFocusChange: Event<FocusEvent>
readonly onDidParametersChange: Event<Parameters>
readonly onDidVisibilityChange: Event<VisibilityEvent>
readonly onWillFocus: Event<WillFocusEvent>
readonly width: number
getParameters<T extends Parameters = Parameters>(): T
setActive(): void
setVisible(isVisible: boolean): void
updateParameters(parameters: Parameters): void
```

--------------------------------

### Use a custom tab renderer for a panel

Source: https://dockview.dev/docs/core/panels/add

This snippet illustrates how to specify a custom tab renderer for a panel using the `tabComponent` option. This allows for a completely custom tab UI. Ensure the specified `tabComponent` is registered correctly.

```javascript
const panel: IDockviewPanel = api.addPanel({
    id: 'my_unique_panel_id',
    component: 'my_component',
    tabComponent: 'my_tab_component',
});
```

--------------------------------

### Panel API Events

Source: https://dockview.dev/docs/api/dockview/panelApi

This section outlines the events that a Panel object can emit, allowing for reactions to state changes.

```APIDOC
## Panel API Events

### Description
These events are emitted when specific changes occur related to the panel's state or interactions.

### Events
- **onDidActiveChange** (Event<ActiveEvent>) - Emitted when the panel's active state changes.
- **onDidActiveGroupChange** (Event<ActiveGroupEvent>) - Emitted when the active group within the panel's container changes.
- **onDidDimensionsChange** (Event<PanelDimensionChangeEvent>) - Emitted when the panel's dimensions change.
- **onDidFocusChange** (Event<FocusEvent>) - Emitted when the panel's focus state changes.
- **onDidGroupChange** (Event<GroupChangedEvent>) - Emitted when the panel is moved to a different group.
- **onDidLocationChange** (Event<DockviewGroupPanelFloatingChangeEvent>) - Emitted when the panel's location changes (e.g., floating).
- **onDidParametersChange** (Event<Parameters>) - Emitted when the panel's parameters are updated.
- **onDidRendererChange** (Event<RendererChangedEvent>) - Emitted when the panel's renderer is changed.
- **onDidTitleChange** (Event<TitleEvent>) - Emitted when the panel's title changes.
- **onDidVisibilityChange** (Event<VisibilityEvent>) - Emitted when the panel's visibility changes.
- **onWillFocus** (Event<WillFocusEvent>) - Emitted just before the panel gains focus.
```

--------------------------------

### Panel Event Handlers

Source: https://dockview.dev/docs/api/paneview/panelApi

This section details the event handler properties available for a panel, allowing for reactions to changes in its state.

```APIDOC
## Panel Event Handlers

### Description
Exposes event listeners for various state changes within a panel, such as activation, dimension changes, focus shifts, parameter updates, and visibility changes.

### Events

- **onDidActiveChange** (Event<ActiveEvent>) - Event triggered when the active state of the panel changes.
- **onDidDimensionsChange** (Event<PanelDimensionChangeEvent>) - Event triggered when the dimensions of the panel change.
- **onDidFocusChange** (Event<FocusEvent>) - Event triggered when the focus state of the panel changes.
- **onDidParametersChange** (Event<Parameters>) - Event triggered when the panel's parameters are updated.
- **onDidVisibilityChange** (Event<VisibilityEvent>) - Event triggered when the visibility state of the panel changes.
- **onWillFocus** (Event<WillFocusEvent>) - Event triggered just before the panel gains focus.
```