A panel at the side of the screen to edit without leaving it: a profile, a task, an item of a contract. The default is floating (12 px from the edges, rounded, with a footer that stays); it can sit docked against the edge, come from the left, and on a phone it is a sheet that rises from the bottom, with a handle. The variant :sheet is that bottom sheet at any width.

The LiveView decides when it is there (:if={@editing}); the drawer takes the focus in, keeps it inside (Phoenix.Component.focus_wrap/1), closes with Esc, the close button and a click outside, and hands the focus back to the button that opened it when that button used open/1. Widths: 384, 480 (default) and 640.

While it is open the DevactionUI.Overlay hook locks the scroll of the page and makes everything around it inert (put data-overlay-keep on what has to stay usable, such as a toast region). Overlays stack: Esc closes only the one on top. The stacking order, from the bottom: a popover in place z-40, a tooltip z-50, the drawer z-60, a DevactionUI.Modal z-70 (so a modal opened from a drawer is over it), a popover with portal z-80; a toast region of the app has to be above that.

On a phone, and at any width with variant={:sheet}, the drawer is a sheet from the bottom with a handle that closes it when dragged down (a short drag springs back; with prefers-reduced-motion it does not animate). The width is 384 (:sm), 480 (:md, the default, min(30rem, 100vw - 1.5rem)) or 640 (:lg). The actions of the footer are the caller's: the canvas draws Cancel as a 44 px quiet button with no border.