Motir

Estimate: 35m · Depends on: 6.5.1

The design asset for the editable details surface. The 6.5.1 settings-area.mock.html draws the Details landing READ-ONLY with the "editing arrives with 6.8" presentation — the editing states, avatar picker, key-change flow, and previous-keys row are undesigned (the design-gate NONE-exists case). Output: design/projects/details.mock.html + PNG + a design-notes section, EXTENDING the 6.5.1 asset (same area chrome — reference it, do not redraw it). Render checklist + AA + dark parity. Mirrors: the Jira Cloud project-details page (name / key / avatar / previous-keys vocabulary); the shipped archive-confirm grammar for consequence modals.

Specify, panel by panel:

• The editable Details page — the 6.5.1 identity rows grown editable: name Input, the key as a font-mono read-only value + "Change key" affordance (the key is NOT a free-typing input — changing it is a guarded flow, the mirror shape), the avatar control, Save state (dirty/saving/saved); the re-homed Archive danger zone stays exactly as 6.5.1 drew it.
• The avatar picker — preset icon library + colour swatches (Popover vocabulary), live preview chip, "None" restoring the shipped mono-identifier rendering; the chip as rendered in the PROJECT SWITCHER (closed + open states — redraw the 1.3.3 switcher frames with the chip).
• The change-key modal — new-key input with live format validation (3–5 A–Z/0–9) + collision error states (live key vs reserved alias get distinct copy); the consequence copy verbatim ("Every issue identifier becomes NIF-<n>. Old links keep working."); the in-flight state while the rewrite commits; the success toast.
• Previous keys — the alias list row inside the card (key + since-date), each with a release control → its OWN consequence confirm ("Releasing PROD frees it for other projects and breaks old PROD links."), the verified Jira Cloud shape.
• Gated + empty states — the non-admin read-only rendering (values visible, controls absent — the 6.4.6 gating grammar); zero-aliases (row hidden).

Acceptance criteria

• The mockup + PNG + notes exist, composed from shipped primitives (Card, Input, Modal, Popover, Button, the settings-card grammar) + token tiers; render checklist + AA + dark parity pass.
• Panels cover: the card (dirty/saving/saved), the avatar picker + switcher render, the change-key modal (validation, both collision states, in-flight, success), previous-keys + release confirm, and the non-admin read-only state.
• design-notes.md names the preset icon/colour registry (the 6.8.1 validation contract), the consequence copy strings verbatim, and records the no-upload avatar deviation + the read-only-key decision.
• No improvised primitive; token needs recorded.

Context refs

• design/projects/settings-area.mock.html + notes (6.5.1) — the area chrome and the read-only Details landing this makes editable
• design/projects/ (create-modal / switcher / archive-confirm frames) + design/projects/design-notes.md; the 6.4.5 access-members surface (the gated-state grammar)
• The verified Jira details-page + previous-keys shape in the Story 6.8 description
• Findings #35/#54; the design-mockup render checklist