feat: add header position support to dockview group panel

[mslxl]

Resolve #894

Add headerPosition option to DockviewGroupPanel so that the user can change the position of the tab container in Dockview.

I have added a new action to packages\docs\sandboxes\react\dockview\demo-dockview, which allows the position field to loop through 'top', 'left', 'bottom', and 'right'.

Position	Image
top
left
bottom
right

Tested on firefox and chrome

[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 30ccca0:

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

[mslxl]

Umm, the result of codesandbox is different from my local environment. I am not familiar with codesandbox-ci. Is the CI configured right, or is there something wrong with me?

Here is the result of nativeapp-dockview in my local environment(I run it by modifying the ExampleFrame component):

Besides, if I omit some subtle detail or screwed up some features exists before, please tell me so I can fix it.

[SeanBannister]

This is fantastic and I'm really keen for it, could I suggest changing the orientation of the left tabs:

[AliFlux]

Nice! Cant wait for it to merge

[david-tsai-skydio]

@mslxl - this is awesome! I would agree with what @SeanBannister is saying regarding the position of the "close" button.

[tengl]

This would be really nice to have as soon as possible. We are in the process of selecting a dock manager and Dockview it the favorite so far. The only thing that makes us doubt is the position of the tabs.

For reference, Visual Studio has the text as in this screen shot.

But using a wide screen makes it unnatural to turn the head to the right, so I agree with @SeanBannister that the orientation should be changed if the tabs are placed to the left.

[mslxl]

Thanks for the appreciation

Regarding text orientation, I don't think it should be modified. Allowing users to customize the component might be the simpler choice. This is mainly based on two considerations.

First is the typography of CJK characters (and perhaps other languages I'm not familiar with). In some contexts, their vertical layout should not be rotated, and writing-mode handles this very well.

The second is the implementation issue. The current writing-mode: vertical-* cannot achieve this specific text orientation, while writing-mode: sideways-* requires newer browser versions (supported by all browsers only after March 2025). If we use transform: rotate to adjust the direction, it rotates all internal content. Sometimes developers don't want the custom controls inside to rotate. Furthermore, after rotation, the element's visual size doesn't match its actual layout dimensions, which might require introducing more JS to handle.

Additionally, this PR has been open for too long, and I've already forgotten some of the context. When this PR was created, it was arguably the "pre-AI coding era." Now that various Agents and models have taken the world stage, the significance of this PR's existence has become questionable.