Page Header

Written for the variant you picked above: Light

Build a document page header in a calm, warm-minimal style (Inter, ink #37352f, 4px radii, pastel select pills). A full-width cover 140–250px tall (24% of the container width) shows a flat colour or an image with background-size cover. On hover or focus a joined pair of small white tool buttons appears at its bottom right: 'Change cover' (opens a listbox of covers with a 28×18 swatch each) and, for images, 'Reposition'. Repositioning shows a centred dark hint 'Drag image to reposition · ↑ ↓ · Enter to save', turns the cover into a focused slider, and maps a vertical drag to background-position-y; Save position and Cancel replace the tools. Below, in a 46rem column, an 84px emoji icon button overlaps the cover by 42px (a 4×4 emoji grid picker), then a borderless auto-growing 30–40px bold title with tight tracking and an 'Untitled' placeholder. Then a property list (dl) with a hairline under it: each row is a muted label with a 16px line icon (Status, Owner, Due, Tags) and a value cell that highlights warm grey on hover. Status is a rounded pill with a coloured dot that opens a listbox; Owner shows a 20px initials avatar and name with a people listbox; Due is a native date input; Tags are 3px-radius pastel pills with × remove buttons and a + that opens a search-or-create popover ('Create “Fieldwork”' assigns the next colour). Popovers are white, 6px radius, with a three-layer soft shadow. Selected variant — Light (light): Light theme: page #ffffff, ink #37352f, muted #787774, faint #a5a29a, hover rgb(55 53 47 / 0.06), active option rgb(55 53 47 / 0.08), hairline rgb(55 53 47 / 0.09), focus #2383e2, cover tools rgb(255 255 255 / 0.92) with #5f5e5b text. Pills: gray #f1f1ef/#787774, blue #e7f3f8/#337ea9, green #edf3ec/#448361, red #fdebec/#c4403b, purple #f6f3f9/#9065b0, orange #fbecdd/#b85c0b. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Each picker is a listbox that takes focus: ↑/↓/Home/End move, Enter or Space picks, Escape or Tab closes and returns focus to its trigger; outside presses close it. The cover slider moves 5% per arrow key, Enter saves and Escape restores the previous position. Enter in the title jumps to the Status value. onChange receives the full page state after every edit. Motion: Popovers fade in and drop 3px over 120ms; cover tools fade in on hover. Reduced motion removes both. Accessibility: A header element with a description list; value buttons are named by their row label and current value via aria-labelledby, carry aria-expanded, and open listboxes with aria-activedescendant and aria-selected. Tag remove buttons are named 'Remove tag …'. The reposition mode is a real slider with aria-valuenow and a spoken value. Visible 2px focus rings throughout. Responsive behavior: The label column narrows to 6.5rem under 30rem; title and cover scale with container units; popovers fit the column on phones. Touch: Cover tools are always visible on touch screens; repositioning works with a finger drag (touch-action none while active); every picker is tap-friendly. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Each picker is a listbox that takes focus: ↑/↓/Home/End move, Enter or Space picks, Escape or Tab closes and returns focus to its trigger; outside presses close it. The cover slider moves 5% per arrow key, Enter saves and Escape restores the previous position. Enter in the title jumps to the Status value. onChange receives the full page state after every edit.

Motion

Popovers fade in and drop 3px over 120ms; cover tools fade in on hover. Reduced motion removes both.

Accessibility

A header element with a description list; value buttons are named by their row label and current value via aria-labelledby, carry aria-expanded, and open listboxes with aria-activedescendant and aria-selected. Tag remove buttons are named 'Remove tag …'. The reposition mode is a real slider with aria-valuenow and a spoken value. Visible 2px focus rings throughout.

Responsive

The label column narrows to 6.5rem under 30rem; title and cover scale with container units; popovers fit the column on phones.

On touch

Cover tools are always visible on touch screens; repositioning works with a finger drag (touch-action none while active); every picker is tap-friendly.