IDE-style dockable workspace built on splitters and tab stacks. Panes can be dragged between stacks, torn off into floating windows, and the resulting arrangement is round-trippable as a JSON DockLayoutSnapshot for persistence.
Basic usage
Keyboard shortcuts
Tab / Shift+Tab — move focus through tabstrips, splitter dividers, intersection handles, and floating-pane close buttons
← / → / Home / End — navigate between tabs in the focused stack
On a focused splitter divider: ←/→ (or ↑/↓ for vertical splits) resize by 10% (Shift: 1%), Home/End to limits
On a focused intersection handle (the round glyph at split crossings): same arrow keys, but ←/→ drives the vertical divider and ↑/↓ drives the horizontal one
Enter / Space on a tab — activate it
Floating pane close button (×) — also focusable; Enter / Space closes
M on a focused tab — enter pane move mode
In move mode: T / R / B / L docks the pane to the top / right / bottom / left of the current stack · F tears it off into a floating window · Esc cancels
Panel 1
This panel demonstrates static content projected through a named slot.
Panel 2
Switch tabs to see how the dock manager preserves the layout.
Panel 3
Web component powered
Panel 4
Layouts can be saved as JSON using the capture button.
Panel 5
Use this panel to imagine additional tools or editors.
Floating tools
Floating panes can host inspectors, consoles, or other auxiliary UI.