WIP: integrate fixed side panels into DockviewComponent

[mathuo]

Summary

Integrates fixed side panels (IDE shell layout) as a first-class feature of `DockviewComponent`. Fixed panels wrap the dockview grid in a `ShellManager` (nested splitviews) and expose fully-functional `DockviewGroupPanel` instances at each edge — complete with tabs, drag-and-drop, overflow, serialization, and the full group panel API.

Also adds a `location` prop to header action renderer components (React + Vue) so custom renderers can adapt their UI based on where a group lives (grid, floating, or a fixed position).

---

Changes

New: Fixed Side Panels (fixedPanels option)

Pass a fixedPanels config to DockviewOptions (or the React/Vue/Angular wrapper prop) to wrap the dockview grid with up to four fixed panels:

// Vanilla TypeScript
const dockview = new DockviewComponent(container, {
    fixedPanels: {
        top:    { id: 'top',    initialSize: 80,  minimumSize: 60 },
        bottom: { id: 'bottom', initialSize: 200, minimumSize: 100 },
        left:   { id: 'left',  initialSize: 220, minimumSize: 150 },
        right:  { id: 'right', initialSize: 220, minimumSize: 150 },
    },
    // ...other options
});

// React
<DockviewReact
    fixedPanels={{
        top:    { id: 'top',    initialSize: 80,  minimumSize: 60 },
        bottom: { id: 'bottom', initialSize: 200, minimumSize: 100 },
        left:   { id: 'left',  initialSize: 220, minimumSize: 150 },
        right:  { id: 'right', initialSize: 220, minimumSize: 150 },
    }}
    onReady={(event) => {
        // Add panels into a fixed group using getFixedPanel
        const leftApi = event.api.getFixedPanel('left');
        if (leftApi) {
            event.api.addPanel({
                id: 'explorer',
                component: 'Explorer',
                title: 'Explorer',
                position: { referenceGroup: leftApi.id },
            });
        }
    }}
    components={components}
/>

Each position accepts:

Option	Description
id	Required. Stable ID used for serialization and getFixedPanel() lookup.
initialSize	Initial width (left/right) or height (top/bottom) in pixels. Default: 200.
minimumSize	Minimum expanded size. Default: collapsedSize + 50.
maximumSize	Maximum expanded size. Default: unlimited.
collapsedSize	Height/width of the header when collapsed. Default: 35.

Fixed panels behave like regular dockview groups: they support tabs, the overflow dropdown, drag-and-drop (into the panel), and all tab/header customisation APIs.

---

New DockviewApi methods

// Get the group panel API for a fixed panel (returns undefined if not configured)
const leftGroup: DockviewGroupPanelApi | undefined = api.getFixedPanel('left');

// Show or hide a fixed panel
api.setFixedPanelVisible('bottom', false);

// Query visibility
const isVisible: boolean = api.isFixedPanelVisible('right');

---

New DockviewGroupPanelApi methods (fixed groups only)

const groupApi = api.getFixedPanel('left');

groupApi?.collapse();          // Collapse to header-only
groupApi?.expand();            // Restore to last expanded size
const collapsed = groupApi?.isCollapsed(); // true/false

Collapse/expand are no-ops on non-fixed groups. Clicking a non-active tab in a fixed panel switches to that tab without toggling the expansion; clicking the already-active tab toggles collapse/expand.

---

New location prop in header action renderers (React + Vue)

IDockviewHeaderActionsProps now includes a location: DockviewGroupLocation field. This is available in rightHeaderActionsComponent, leftHeaderActionsComponent, and prefixHeaderActionsComponent and updates reactively when a group moves (e.g. dragged into a floating window or a fixed panel).

// React example: show a collapse button only in fixed panels
const MyRightActions = (props: IDockviewGroupHeaderActionsProps) => {
    if (props.location.type !== 'fixed') return null;
    return (
        <button onClick={() => props.api.collapse()}>
            Collapse
        </button>
    );
};

DockviewGroupLocation is now exported from the public API (dockview-core, dockview, dockview-vue, dockview-angular).

---

Serialization

Fixed panel state (size, visibility, collapsed state, and group contents) is included in toJSON / fromJSON:

const state = api.toJSON();
// state.fixedPanels = {
//   left: { size: 220, visible: true, collapsed: false, group: { ... } },
//   bottom: { size: 200, visible: false, collapsed: false, group: { ... } },
//   ...
// }

api.fromJSON(state); // restores fixed panel layout

---

Implementation notes

• ShellManager (dockviewShell.ts) — wraps the dockview element in two nested Splitview instances (vertical outer, horizontal inner) to position fixed panels at each edge. The center view has LayoutPriority.High so it absorbs all resize.
• FixedPanelView — IView adapter for each fixed panel group. When collapsed, it locks minimumSize === maximumSize === collapsedSize to prevent sash dragging from reopening the panel.
• Layout routing — DockviewComponent.layout() is intercepted when a shell is active: external resize calls flow through ShellManager, and shell callbacks go directly to the grid via a re-entrancy guard (_inShellLayout).
• Popup service root — moved to the shell element so overflow dropdowns in fixed panels position correctly relative to the shell container.
• Theme propagation — the shell element receives the same theme class as the dockview element.

---

🤖 Generated with Claude Code

[mathuo]

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 2b1f2ab:

Sandbox	Source
dockview-app	Configuration
editor-gridview	Configuration
externaldnd-dockview	Configuration
fullwidthtab-dockview	Configuration
iframe-dockview	Configuration
keyboard-dockview	Configuration
nativeapp-dockview	Configuration
rendering-dockview	Configuration

[mathuo]

[mathuo]

[sonarqubecloud]

Quality Gate passed

Issues
12 New issues
0 Accepted issues

Measures
0 Security Hotspots
87.8% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud