[discussion] Add Window Splitter component?

[oliviertassinari]

⚠️ Info: This issue is for product research, to gather community input. In this base-ui repo we are, currently, focused on the core set of components needed to create a great design system, so the probability we build this in this repo is very low.

Summary

Examples in other libraries

• https://github.com/bvaughn/react-resizable-panels
• https://github.com/mathuo/dockview
• https://github.com/caplin/FlexLayout
• https://github.com/ticlo/rc-dock
• https://github.com/jupyterlab/lumino
• https://github.com/golden-layout/golden-layout
• https://github.com/nomcopter/react-mosaic
• https://github.com/johnwalley/allotmenthttps://github.com/gridstack/gridstack.js

(internal benchmark)

Motivation

TBD

• User requests:
  • https://x.com/dawi80/status/2041491113626787970
• UI library requests:
  • https://github.com/shadcn-ui/ui/issues?q=is%3Aissue%20state%3Aopen%20Resizable
  • Add Window Splitter component mui-x#512

One can also argue that #4788 is a more complex version of this component.

[cmayoracurzio]

Hi there @oliviertassinari ,

I've built similar components at enterprise so excited to see BaseUI will be tackling them. Thought it would be helpful to share a list of open-source projects that implement window splitter/dock manager in different ways:

• https://github.com/bvaughn/react-resizable-panels
• https://github.com/mathuo/dockview
• https://github.com/caplin/FlexLayout
• https://github.com/ticlo/rc-dock
• https://github.com/jupyterlab/lumino
• https://github.com/golden-layout/golden-layout
• https://github.com/nomcopter/react-mosaic
• https://github.com/johnwalley/allotment
• https://github.com/gridstack/gridstack.js

There is also a WAI-ARIA pattern for window splitters: https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter

Made a quick demo last weekend for a different purpose. Focused on performance, not full featured, but in case helpful: https://tatami-nu.vercel.app.

Would love to contribute, read the CONTRIBUTING.md but I suppose you first want to define the requirements, e.g., rendering approaches, solving for percentage and pixel sizes, nice drag-and-drop, etc. Let me know and I rant more about this!

[colmtuite]

@cmayoracurzio Just want to let you know that I have tagged your Discord DM. I'll get in touch asap, when I find some time.