Prepared Docs

Overview

DrawerHost from @prepared911/ui/blocks/drawer-host is the app drawer a shell mounts once. The shell owns whether it is open and which id it shows. The host renders that one drawer, swaps the content when the id changes, and can show a nav strip under the header.

Use it where a shell used to mount DrawerPortal and drive several drawers through useDrawerStore from @prepared911/ui-drawer. A single panel that is not the shared app drawer still uses Drawer. A record with an unsaved-changes guard uses DetailDrawer.

When to use

The shell's shared drawer. Diagnostics, layers, and chat take turns in one panel.
State the shell already owns. The drawer search param stays on the shell route. Pass open and drawerId, or pass a store the shell created with createDrawerHostStore.
A nav strip inside that drawer. Pass nav on the drawer entry. The host renders the same segmented strip as DrawerNav.

When not to use

One record with a dirty form. Use DetailDrawer.
A form drawer with a sticky footer. Use FormLayoutDrawer.
A remote writing the shell URL. Remotes do not set the drawer search param. They ask the shell, and the shell updates the host.

State

Pass open, drawerId, and onOpenChange, or pass store. Do not pass both. createDrawerHostStore returns a new store each call. The shell holds it. The package does not keep a shared store, so two copies of the package do not share open state.

Changing drawerId while open is true replaces the header and the body in the same dialog.

Focus

Escape closes the drawer and focus returns to trigger. Open it from a row and omit trigger: focus returns to the element that was focused before the drawer opened.

Page Header / Accessibility

Drawer host / API and Development

Overview

When to use

The shell's shared drawer. Diagnostics, layers, and chat take turns in one panel.
State the shell already owns. The drawer search param stays on the shell route. Pass open and drawerId, or pass a store the shell created with createDrawerHostStore.
A nav strip inside that drawer. Pass nav on the drawer entry. The host renders the same segmented strip as DrawerNav.

When not to use

One record with a dirty form. Use DetailDrawer.
A form drawer with a sticky footer. Use FormLayoutDrawer.
A remote writing the shell URL. Remotes do not set the drawer search param. They ask the shell, and the shell updates the host.

State

Changing drawerId while open is true replaces the header and the body in the same dialog.

Focus

Escape closes the drawer and focus returns to trigger. Open it from a row and omit trigger: focus returns to the element that was focused before the drawer opened.

Page Header / Accessibility

Drawer host / API and Development