Components · Layout
The canonical master–detail layout: a selectable list on the left, its detail on the right, split by a draggable hairline divider. Drag the divider or focus it and nudge with ←/→ (Home/End jump to the min/max); double-click or press Enter to collapse a pane to zero and reflow the other. Sizes persist to localStorage, and below the md breakpoint the split folds into a stack.
Live split · Roster → Rescuer · divider pinned to its drag state
aria-selected="true" — exactly one is selected, and it drives the detail pane. Hover fills --surface-2; focus shows the ring.--surface-2 grip chip. role="separator", tabindex=0, aria-valuenow = leading pane %.←/→ nudge by step %, Home/End snap to this pane's minSize / max. Sizes are flex weights, so the panes reflow proportionally.collapsible pane folds to weight 0 on double-click (or Enter on the bordering separator) and the sibling fills the gap; press again to restore. The collapse animates unless prefers-reduced-motion.persistKey the sizes + which panes are collapsed are written to localStorage — resize, reload, and the split comes back where you left it.md (useIsMobile) the row split is abandoned: the primary pane leads in flow and any collapsible ("auxiliary") pane becomes a closed disclosure drawer.Source · SplitView.tsx — the hand-rolled N-pane engine (pointer-drag + arrow-key role="separator" handles, collapse-to-zero, localStorage persistence, mobile stack), and PaneLayout.tsx — the start/primary/end preset over it. Both compose the Surface primitive (the clipped radius-lg frame) and add no split-pane dependency. Panes layer --surface (list) under --surface-2 (detail); the selected-row treatment mirrors PortalSidebar's active rail.