Act as a senior front-end engineer. Build one modal and drawer system for {{business_name}}'s app in my {{tech_stack}} project, styled in {{visual_style}}. Use the native dialog element with showModal(), or the Radix or shadcn/ui Dialog if it's already installed. Don't hand-roll focus management. List every existing modal you'll migrate. When to use which: - modal: short, focused tasks and confirmations - drawer from the right: details of a record while keeping the list in view; reflect it in the URL so it can be shared and reopened - full page: anything longer than about 6 fields Behavior: - aria-labelledby the title, aria-describedby the description - initial focus: the first field, or for destructive confirmations the safest button - focus is trapped; on close it returns to the trigger - Escape closes; if there are unsaved changes, ask first - overlay click closes only non-destructive dialogs - background is inert; body scroll locks without a layout jump (scrollbar-gutter: stable or padding compensation); overscroll-behavior: contain inside - no dialog opens another dialog; swap content instead Sizes: small 400px, medium 560px, large 720px; drawers 420px. At 768 and below, modals become bottom sheets, full width, max height 90dvh, with a drag handle and a visible Close button; drawers go full width. Header and footer actions stay sticky while the body scrolls. Visual: surface token, 12 to 16px radius, one overlay color at 50 to 60% opacity, a single elevation shadow; title 18 to 20px weight 600; buttons right-aligned at 1280, stacked full width at 360 with the primary on top. States: loading inside the dialog with buttons disabled; errors inline, keeping input; long titles wrap. Motion: modal fades with a 0.98 to 1 scale in 180ms; drawer slides in 240ms cubic-bezier(0.32, 0.72, 0, 1); fade only under prefers-reduced-motion. Avoid: popups on page load, only an X to close, 100vh sheets cut off on iOS, stacked overlays.