Components / Canvas Sheet
Canvas Sheet
The stacking panel system inside the canvas column: every area page is a base sheet, and detail views stack on top of it. Overlays in the app are stacked CanvasSheets, not modals.
import { CanvasSheet, CanvasSheetBody, CanvasSheetChrome, CanvasSheetHeader, CanvasSheetToolbar } from '@layers/ui/canvas-sheet'Rendered stock
House rules
- Sheets are siblings inside the canvas main column, never nested; a detail view renders after its base sheet, not inside it.
- stackedDepth on the base sheet drives the recession (0 normal, up to 3); the base sheet stays mounted while details stack above.
- onClose on the top sheet renders the X and handles Escape; the state that gates a sheet lives in URL search params or layout state, not the page component.
- CanvasSheetChrome is the sticky header for tabbed sheets (NavTabs plus an optional CanvasSheetToolbar, every toolbar control size="sm"); CanvasSheetHeader is the standardized title row for chrome-less sheets, never a hand-rolled h2.
- Vertical rhythm is automatic: Body carries pt-6, dropping to pt-0 when the chrome holds a toolbar. Never add manual pt/pb/gap between chrome and body.