Motir

Estimate: 45m · Depends on: 1.5.1, 3.2.1

The design asset the UI subtask (3.6.3) builds against — NO design/boards/ mockup draws the board-config admin (the 3.2.1 asset is the board itself; its column [⋯] menu is a disabled seam), so the design gate requires producing it FIRST (mirrors 1.0.5 / 1.2.1 / 1.3.3 / 1.5.1 / 3.2.1). Output: design/boards/board-config.mock.html (an HTML mockup built from the real design system — components/ui/* + the issue/board pills + the --el-*/element-shape tokens) + a PNG export + a design/boards/design-notes.md section. --el-* only (no Tier-0 --color-*); shape via the element tokens; AA-safe; mirrors Jira board settings → Columns as the reference.

Specify, panel by panel:

• Page layout — a project-settings page beside the Workflow editor (the settings/project/workflow page, Story 2.2.5): the same settings header/grammar, a board name field, and the column manager below. Document the settings-nav entry (Board, next to Workflow).
• Column manager — the ordered list/row of columns (reuse the board’s column visual language from 3.2.1): each column shows its name (editable), a drag handle to reorder, a delete affordance, and the status chips mapped to it (the Pill neutral tone from the 3.2.6 tray). An "Add column" affordance.
• Status mapping — the Jira "Columns" interaction: an unmapped-statuses rail/tray (the statuses with no column) + the ability to assign a status to a column (drag a status chip into a column, AND a non-drag fallback — a per-column status picker/menu — so it is keyboard-operable, finding #35). Moving a status between columns is a re-map; removing it returns it to the unmapped rail.
• States — a delete-column confirm (naming what happens to its mapped statuses → they return to unmapped; and the guard when its status still holds board cards), the read-only (non-admin) treatment, loading + error + save feedback, and the empty (brand-new board) shape.
• Cross-links — where the board’s 3.2.6 unmapped tray ("Map columns →") and the 3.2.3 column [⋯] menu land in this surface.

Acceptance criteria

• design/boards/board-config.mock.html + PNG + a design-notes.md section exist; built from components/ui/* + --el-*/element-shape tokens only (no Tier-0 --color-*, no raw rounded-*/p-* for control shape); passes the render checklist (icon viewBox, no nested buttons, prettier); AA-safe.
• The mockup draws: the settings page (name field + column manager), per-column rename/reorder/delete, the status mapping (unmapped rail + assign-to-column, with a non-drag keyboard fallback), the delete-column confirm + guard, and the read-only / loading / error / empty states.
• design-notes.md names each composing primitive (Pill, Button, Modal/confirm, Input, the board column language), documents the keyboard mapping path (not drag-only, finding #35), states the surface lives beside the Workflow editor, and names Jira board settings → Columns as the mirror.
• Mapping/drag affordances are not colour-alone (finding #35); status chips use the palette via --el-* (finding #54).

Context refs

• design/boards/board.mock.html + design-notes.md (3.2.1) — the board + column visual language + the unmapped-statuses tray this resolves
• app/(authed)/settings/project/workflow/_components/WorkflowEditor.tsx (2.2.5) — the sibling settings surface to match in grammar/placement
• components/ui/* (Pill, Button, Modal, Input, Tooltip) + the board column markup (3.2.3) to reuse
• app/globals.css --el-* + element-shape tokens; the /tokens specimen route
• Jira board settings → Columns as the mirror; findings #35 (not colour-alone), #54 (use the palette)