Layout
Resizable multi-pane layout, composed on the Surface primitive and hand-rolled (no split-pane dependency). SplitView is the engine — N panes along one axis, separated by draggable, keyboard-accessible resize handles; PaneLayout is the everyday start/primary/end preset over it. Drag a hairline handle, or focus one and use the arrow keys (Home/End to jump, Enter to collapse). Sizes persist to localStorage via persistKey, and below the md breakpoint the split folds into a stack with the collapsible panes tucked into drawers. Flip the theme in the top bar to confirm every surface re-skins from the tokens.
- SplitView
- panes: { id, content, title?, collapsible? }[] laid out along direction ('horizontal' | 'vertical'). defaultSizes / minSizes are percentages (normalized to 100); collapsible is the per-view fallback. persistKey saves sizes + collapsed panes to localStorage. step sets the arrow-key nudge (%). Client (pointer + keyboard + storage state).
- PaneLayout
- Slot preset over SplitView: a required primary region with optional start / end PaneRegions ({ content, title?, defaultSize?, minSize?, collapsible? }). Asides default collapsible; primary fills the remainder. Server-safe — it just composes the client SplitView.
- resize handles
- Each handle is role='separator', tabIndex=0 (the WAI-ARIA window-splitter pattern — each is its own widget), with aria-orientation (the divider line's orientation), aria-valuemin/max/now (leading pane %), and aria-controls. Pointer drag uses Pointer Events with capture.
- keyboard
- Arrow keys resize (←/→ horizontal, ↑/↓ vertical) by step%, Home/End snap to the leading pane's min/max, Enter/Space toggle collapse of the bordering collapsible pane. Resize + collapse animate, gated by prefers-reduced-motion.
- mobile (useIsMobile)
- Below md the split is abandoned for a vertical stack: non-collapsible panes render in flow; collapsible ('auxiliary') panes become closed disclosure drawers so the primary content leads.
SplitView — two panes
The canonical list/detail split. Drag the hairline between the panes, or Tab to it and nudge with ←/→ (Home/End jump to the min/max). The layout is persisted: resize it, reload the page, and it comes back where you left it (persistKey='ds-demo-split-two').
List
Resizable region. Drag the handle, or focus it and nudge with the arrow keys.
Sizes are percentages applied as flex weights, so panes reflow proportionally.
Home / End jump the divider to this pane's minimum and maximum.
Enter or Space on a collapsible handle folds the pane to zero; press again to restore.
Scroll inside a pane independently — each pane owns its own overflow.
Press Tab to move focus between the resize handles.
Resizable region. Drag the handle, or focus it and nudge with the arrow keys.
Sizes are percentages applied as flex weights, so panes reflow proportionally.
Detail
Resizable region. Drag the handle, or focus it and nudge with the arrow keys.
Sizes are percentages applied as flex weights, so panes reflow proportionally.
Home / End jump the divider to this pane's minimum and maximum.
Enter or Space on a collapsible handle folds the pane to zero; press again to restore.
Scroll inside a pane independently — each pane owns its own overflow.
Press Tab to move focus between the resize handles.
Resizable region. Drag the handle, or focus it and nudge with the arrow keys.
Sizes are percentages applied as flex weights, so panes reflow proportionally.
Home / End jump the divider to this pane's minimum and maximum.
Enter or Space on a collapsible handle folds the pane to zero; press again to restore.
SplitView — three panes, collapsible sides
An IDE-style navigator / editor / inspector split. Both side panes are collapsible: double-click their handle (or focus it and press Enter) to fold the pane to zero — the editor reflows to fill the gap — and again to restore. Each pane scrolls independently.
Editor
Resizable region. Drag the handle, or focus it and nudge with the arrow keys.
Sizes are percentages applied as flex weights, so panes reflow proportionally.
Home / End jump the divider to this pane's minimum and maximum.
Enter or Space on a collapsible handle folds the pane to zero; press again to restore.
Scroll inside a pane independently — each pane owns its own overflow.
Press Tab to move focus between the resize handles.
Resizable region. Drag the handle, or focus it and nudge with the arrow keys.
Sizes are percentages applied as flex weights, so panes reflow proportionally.
Home / End jump the divider to this pane's minimum and maximum.
Enter or Space on a collapsible handle folds the pane to zero; press again to restore.
Scroll inside a pane independently — each pane owns its own overflow.
Press Tab to move focus between the resize handles.
Resizable region. Drag the handle, or focus it and nudge with the arrow keys.
Sizes are percentages applied as flex weights, so panes reflow proportionally.
Inspector
Resizable region. Drag the handle, or focus it and nudge with the arrow keys.
Sizes are percentages applied as flex weights, so panes reflow proportionally.
Home / End jump the divider to this pane's minimum and maximum.
Enter or Space on a collapsible handle folds the pane to zero; press again to restore.
Scroll inside a pane independently — each pane owns its own overflow.
Press Tab to move focus between the resize handles.
Resizable region. Drag the handle, or focus it and nudge with the arrow keys.
Sizes are percentages applied as flex weights, so panes reflow proportionally.
Home / End jump the divider to this pane's minimum and maximum.
Enter or Space on a collapsible handle folds the pane to zero; press again to restore.
SplitView — vertical
The same engine stacked top/bottom (direction='vertical'): a preview over a collapsible console. The handle is now horizontal (aria-orientation='horizontal') and resizes with ↑/↓; Enter folds the console away.
Preview
Resizable region. Drag the handle, or focus it and nudge with the arrow keys.
Sizes are percentages applied as flex weights, so panes reflow proportionally.
Home / End jump the divider to this pane's minimum and maximum.
Enter or Space on a collapsible handle folds the pane to zero; press again to restore.
Scroll inside a pane independently — each pane owns its own overflow.
Press Tab to move focus between the resize handles.
Resizable region. Drag the handle, or focus it and nudge with the arrow keys.
Sizes are percentages applied as flex weights, so panes reflow proportionally.
Home / End jump the divider to this pane's minimum and maximum.
Enter or Space on a collapsible handle folds the pane to zero; press again to restore.
Console
Resizable region. Drag the handle, or focus it and nudge with the arrow keys.
Sizes are percentages applied as flex weights, so panes reflow proportionally.
Home / End jump the divider to this pane's minimum and maximum.
Enter or Space on a collapsible handle folds the pane to zero; press again to restore.
Scroll inside a pane independently — each pane owns its own overflow.
Press Tab to move focus between the resize handles.
Resizable region. Drag the handle, or focus it and nudge with the arrow keys.
Sizes are percentages applied as flex weights, so panes reflow proportionally.
PaneLayout
The ergonomic preset: name a primary region and optional start / end panels, and PaneLayout assembles the panes + sizes and forwards them to SplitView — so all the resize, keyboard, persistence and mobile-stack behaviour is inherited, not re-implemented. The asides are collapsible by default.
Files
Resizable region. Drag the handle, or focus it and nudge with the arrow keys.
Sizes are percentages applied as flex weights, so panes reflow proportionally.
Home / End jump the divider to this pane's minimum and maximum.
Enter or Space on a collapsible handle folds the pane to zero; press again to restore.
Scroll inside a pane independently — each pane owns its own overflow.
Press Tab to move focus between the resize handles.
Resizable region. Drag the handle, or focus it and nudge with the arrow keys.
Sizes are percentages applied as flex weights, so panes reflow proportionally.
Home / End jump the divider to this pane's minimum and maximum.
Enter or Space on a collapsible handle folds the pane to zero; press again to restore.
Scroll inside a pane independently — each pane owns its own overflow.
Press Tab to move focus between the resize handles.
Workspace
Resizable region. Drag the handle, or focus it and nudge with the arrow keys.
Sizes are percentages applied as flex weights, so panes reflow proportionally.
Home / End jump the divider to this pane's minimum and maximum.
Enter or Space on a collapsible handle folds the pane to zero; press again to restore.
Scroll inside a pane independently — each pane owns its own overflow.
Press Tab to move focus between the resize handles.
Resizable region. Drag the handle, or focus it and nudge with the arrow keys.
Sizes are percentages applied as flex weights, so panes reflow proportionally.
Home / End jump the divider to this pane's minimum and maximum.
Enter or Space on a collapsible handle folds the pane to zero; press again to restore.
Scroll inside a pane independently — each pane owns its own overflow.
Press Tab to move focus between the resize handles.
Resizable region. Drag the handle, or focus it and nudge with the arrow keys.
Sizes are percentages applied as flex weights, so panes reflow proportionally.
Home / End jump the divider to this pane's minimum and maximum.
Enter or Space on a collapsible handle folds the pane to zero; press again to restore.
Details
Resizable region. Drag the handle, or focus it and nudge with the arrow keys.
Sizes are percentages applied as flex weights, so panes reflow proportionally.
Home / End jump the divider to this pane's minimum and maximum.
Enter or Space on a collapsible handle folds the pane to zero; press again to restore.
Scroll inside a pane independently — each pane owns its own overflow.
Press Tab to move focus between the resize handles.
Resizable region. Drag the handle, or focus it and nudge with the arrow keys.
Sizes are percentages applied as flex weights, so panes reflow proportionally.
Home / End jump the divider to this pane's minimum and maximum.
Enter or Space on a collapsible handle folds the pane to zero; press again to restore.
Scroll inside a pane independently — each pane owns its own overflow.
Press Tab to move focus between the resize handles.
- primary / primaryTitle
- The main content region (ReactNode) + its accessible label. Never collapsible; always fills the space the asides leave.
- start / end
- Optional PaneRegions flanking the primary (left/right in horizontal, top/bottom in vertical). Each is collapsible by default and carries its own defaultSize / minSize (%).
- passthrough
- direction, persistKey, ariaLabel, className, style and paneClassName forward straight to SplitView.