Usage
@prepared911/ui/blocks/detail-drawer and its styles.css, plus the styles.css of each component the block composes (Drawer, AlertDialog, LoadingBoundary, ErrorBoundary, Skeleton, Box, Text, and the Button, Menu, and Checkbox you put in its slots).
DetailDrawer is the record detail drawer: Drawer's header, scrolling body, and footer for one record at a time. There is one drawer. The page owns which record it shows, and changing the record swaps the content in place.
open and recordId are controlled. onOpenChange(open, details) reports a request to open or close: the trigger, the close control, Escape, or a press outside. details.cancel() vetoes a cancelable one. onRecordChange(id, details) reports the record the person chose in the record strip. Apply them to your state; the drawer shows what you ask for.
title is the record's title and subtitle the line under it. Both may be data (DisplayValue). label names the drawer itself, such as "Incident details". actions takes Buttons, a ButtonGroup, or a Menu trigger; they sit between the title and the close control.children scroll under the header. Compose DetailDrawerSection for a titled section, with a hairline between sections. The body brings its own content padding: a section pads itself, a bare child does not.footer takes Buttons at the inline end, primary last, and footerText adds a hint at the inline start. The footer stays in view while the body scrolls.records ({ id, label }) and recordsLabel to show a segmented strip under the header. The selected segment is the record on screen. Pressing a segment, or an arrow key on it, reports onRecordChange. Keep the set small, a handful of related records: every record is a segment. A long list of records belongs in the page's table.
loading shows skeletons for the title and the body, named by loadingLabel. The drawer is not disabled while it loads: the person can still close it or move to another record. Give title a placeholder while loading so the heading keeps its name.
The body sits in a LoadingBoundary, so a body that suspends shows its skeleton. A body that throws shows the ErrorBoundary recovery you describe in error (title, description, retryLabel, or a custom fallback), and another record id resets it. Omit error and the error reaches your own boundary.
Pass guard to ask before the drawer drops edits. While guard.dirty is true:
recordId, such as a row press, is guarded the same way.guard.onDiscard. Reset your form there so dirty turns false.onOpenChange(true, details) when you asked to close, onRecordChange(shownId, details) when you asked for another record. Both carry reason: "imperative-action" and are not cancelable. Apply them like any other change.onOpenChange, and an outside press closes it with light-dismiss unless you cancel it. Focus moves into the drawer when it opens. When it closes, focus returns to its trigger if there is one, and otherwise to the element that was focused before it opened, such as the table row. The trigger slot takes one Button; use it when a single control opens the drawer. A drawer opened from a row needs none.
A drawer mounted in a detached window's React tree opens its dialog and its confirm dialog in that window.
edge, size, modal, or resizable props. It renders Drawer's defaults. See the contract.recordId.