Motir

Estimate: 35m

The design asset for the issue-view surface. detail.pen predates custom fields entirely — the rail cards, per-type editors, and the empty-fields disclosure are all undesigned (NONE exists). Output: design/work-items/custom-fields.mock.html + PNG + a section in design/work-items/design-notes.md. Render checklist + AA + dark parity. Mirror: the Jira issue-view Details / "Show more fields" behaviour (verified).

Specify, panel by panel:

• Placement — custom-field cards in the core-fields rail, BELOW the built-in fields (status…estimate, created/updated stay last or the design picks the exact order), each reusing the shipped FieldCard grammar verbatim (uppercase label + chevron toggle + value line) — no new card chrome.
• Per-type value rendering — text (truncating, full on title); number (formatted decimal); date (the formatDate style the rail already uses); select (the option label — an archived option renders with a muted "(archived)" mark); user (Avatar + name, the assignee grammar). Empty value = the muted placeholder ("None"/"—", the rail convention).
• Per-type editors (inline, the FieldCard toggle pattern): text → input; number → numeric input with inline validation error; date → the shipped DatePicker (2.4.12) with Clear; select → the shipped Combobox (archived options excluded; a current-but-archived value shown selected with the mark); user → the member picker (the AssigneePicker grammar) with an Unset row. Each editor shows the inline 422 error state (rose-tint, the 2.4.9 grammar).
• "Show more fields" — fields WITHOUT values collapse behind a quiet disclosure row at the rail's end ("Show more fields (N)" → expands to the empty cards for setting; collapses back; a field gaining a value moves above the line — the verified Jira hide-when-empty rule). With NO custom fields defined, the rail is byte-identical to today (no disclosure, no section gap).
• Viewer read-only — values render, no chevrons/editors (the rail's existing read-only grammar). Loading: the rail skeleton extends naturally.

Acceptance criteria

• design/work-items/custom-fields.mock.html + PNG + the design-notes section exist; composed from the shipped FieldCard/picker primitives + token tiers only; render checklist + AA + dark parity pass.
• Panels cover: rail placement among built-ins, all five value renderings (incl. archived-option + empty placeholder), all five editors with an inline error state, the "Show more fields (N)" disclosure (collapsed + expanded + the no-fields-defined null case), and viewer read-only.
• design-notes.md names the per-type glyph/format map (shared with 5.3.4), the exact ordering rule, and the no-fields null-case guarantee (rail unchanged).
• No improvised primitive — every editor is a shipped picker; any token need recorded.

Context refs

• design/work-items/detail.pen + design-notes (the rail grammar) + CoreFieldsPanel.tsx FieldCard (the shipped card to compose — rung-2 reality)
• components/ui/DatePicker (2.4.11/12 design+code), Combobox, AssigneePicker — the editors
• The verified Jira Details/"Show more fields" rule in the Story 5.3 description
• Findings #35/#54; the design-mockup render checklist