Components / Window Sheet
Window Sheet
The resizable inspector panel anchored to the right edge: post inspectors, editors, settings panels that live beside the page instead of over its center. Drag the left edge to resize.
import { WindowSheet, WindowSheetBody, WindowSheetContent, WindowSheetDescription, WindowSheetFooter, WindowSheetHeader, WindowSheetSection, WindowSheetTitle } from '@layers/ui/window-sheet'Rendered stock
House rules
- Resizing is built in: defaultWidth (520), minWidth (400), and maxWidth (90% of the viewport by default) live on WindowSheetContent.
- There is no exported trigger; control it with open/onOpenChange on the root.
- WindowSheetTitle is required for accessibility; give it className="sr-only" when the header carries the visible title.
- WindowSheetHeader children are the left side; the actions prop is the right-side control group. showCloseButton on Content adds the corner X.
- WindowSheetFooter right-aligns its buttons (justify-end) to match the dialog convention; footer buttons are size="lg" (40px), with Cancel as the outline button first and the primary action last.
- WindowSheetBody is the scrollable region; WindowSheetSection provides the p-6 padding, with variant="secondary" for tinted regions. Never pad the body directly.
- variant="secondary" declares data-surface="secondary": the section gets the secondary fill and remaps --card to --background for its subtree, so Cards inside stay visible. Never override a card background per call site (see the Surfaces section of the tokens doc).
- Never use stock Sheet; canvas detail views stack as CanvasSheets instead.