Pane layout primitive
State: open/verified · Kind: module · Audience: system
Summary
Section titled “Summary”- A framework-agnostic Vue 3 primitive that lays out N configurable regions in a flex row with drag-resize, collapse-to-rail, and viewport clamping.
- Structural only: opaque region ids, no keyboard ownership, no design-system coupling beyond a —pane-* CSS variable contract.
Statement
Section titled “Statement”The package renders a row of panes (fixed, resizable, or flex-width) with draggable dividers, per-pane collapse to a configurable indicator strip (spine, tab, peek, rail, or custom app content), and imperative controller methods (toggle, resize, focus) that a host app’s keyboard/focus registry drives. It exposes no app semantics of its own; a semantic layer above it (named rail/secondary/main/aux regions, keybindings, token mapping) is expected to be supplied by the consuming shell.
What it provides
Section titled “What it provides”- PaneGroup / Pane / PaneDivider / PaneIndicator / PaneIndicatorMenu Vue components
- usePaneGroup controller API (createPaneGroup, providePaneGroup, toggle/resize/focus)
- Indicator registry with built-in styles (spine, tab, peek, rail) plus per-pane/user override precedence
- tokens.css theming contract (—pane-* variables, motion curves, corner radius)
Underlying implementation
Section titled “Underlying implementation”- packages/ts/panes/src/PaneGroup.vue
- packages/ts/panes/src/usePaneGroup.ts
- packages/ts/panes/src/paneIndicators.ts
- packages/ts/panes/src/dividerDrag.ts
Locations
Section titled “Locations”packages/ts/panes/src/packages/ts/panes/README.md