Elements07/15
Sheet
G1G7The one drawer: floats over the region (never reflows the layout), full takeover under 700px, a lens on the armed object with crossfade swap, resizable handle with keyboard path, lens/focus postures remembered per key.
- Use when
Editing or inspecting the thing selected from an adjacent list.
- Don't use when
Blocking decisions (Overlay) or whole workflows (a route).
- States
- closedopen lens (340px)open focus (560px+)takeover (<700px container)dragging the handlecontent swapping (120ms crossfade)
- Keyboard
- Escsteps focus → lens → closed
- ←/→ on the handlenudges width 16px
- Traps
- Cold-mount focus: focus the title only after the panel exists (key the effect on mounted, not just open).
- Focus steal: the title-focus effect must never depend on callback props — an unstable onClose would re-fire it on every continuous save.
- Acceptance
- The layout behind never reflows (push mode is dead).
- Arming a different object swaps content in place — the drawer does not close/reopen.
- The handle is a citizen: role=separator, focusable, ←/→ nudges, width remembered per key per posture.
- Closing is announced with Undo when local state dies, never blocked by a dialog.