Editor dialog shell

Purpose and placement

A centered scrim and card isolate a single create or edit task.

Anatomy

• Fixed black/50 overlay
• 576px maximum card
• Heading and close action
• Stacked field region
• Full-width primary action

Contract

States and feedback

• Create versus edit heading
• Pending save
• Inline validation or service error
• Open suggestions

Interaction and composition

Keep title, close control and action together. For native dropdowns, capture selected values rather than reconstructing the platform menu. For custom icon suggestions, capture the union of input and open surface.

Responsive behavior

32px inner padding plus 24px viewport gutters can constrain phone fields. Tall editors may exceed short viewport height; normal screenshots retain this limitation and expanded captures are labeled separately.

Accessibility contract

Close buttons are named and create forms autofocus an input. The source cards are divs without role=dialog, aria-modal, focus trap, Escape close or restored focus.

Known implementation gaps

Modal semantics and keyboard containment are open accessibility work. Do not call the current overlay an accessible dialog primitive.

Source references