AppShell
Default
UI Library
Canonical shared UI primitives for the sibling apps. Each page demonstrates one component, its props, and its customization surface.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| open | boolean | true | Pane visibility. Bindable; or drive via onOpenChange. |
| paneSize | number | 288 | Bindable pane width in px; clamped to min/max. |
| collapseMode | 'hide' | 'rail' | 'hide' | Rail keeps a 64px rail with drag-to-collapse; hide removes the pane. |
| railWidth | number | 64 | Rail width and drag-collapse threshold in rail mode. |
| min | number | 160 | Minimum drag width (rail mode uses railWidth instead). |
| max | number | 480 | Maximum drag width. |
| defaultSize | number | 288 | Width used on rail re-open and NaN fallback. |
| storageKey | string | undefined | undefined | Optional persistence; default none (session-only, no storage touch). |
| showToggle | boolean | true | Header collapse toggle (Button + MenuIcon). |
| toggleShowLabel | string | undefined | i18n 'appShell.showPane' | Label override for the closed toggle. |
| toggleHideLabel | string | undefined | i18n 'appShell.hidePane' | Label override for the open toggle. |
| resizeLabel | string | undefined | i18n 'appShell.resize' | Splitter aria label override. |
| onOpenChange | (open: boolean) => void | — | Fires on toggle and rail collapse. |
| onPaneChange | (size: number) => void | — | Fires on splitter drag. |
| onDragEnd | () => void | — | Fires after drag; width already persisted. |
| headerLeft | Snippet | — | Brand content left of the header toggle row. |
| headerRight | Snippet | — | Controls (theme, language) at the header right. |
| leftPane | Snippet | — | Left pane content; render a rail variant when closed. |
| children | Snippet | — | Main content. |