Motir

Estimate: 48m

The design asset EVERY UI subtask of this story builds against. The Backlog is a brand-new surface — design/ has no backlog/ area and no existing mockup depicts a ranked backlog, a sprint-planning container, a drag-into-sprint state, or a multi-select bar — so under the design gate NO design exists and this subtask CREATES it FIRST (mirrors 1.0.5 / 1.2.1 / 1.3.3 / 1.5.1 and the 4.5.1 scrum extension). Output: a NEW area design/backlog/ with backlog.mock.html (the surface + its states) + backlog-scale.mock.html (the large-backlog virtualized/paginated panel) + PNG exports + design/backlog/design-notes.md naming every composing primitive, copy string, and placement. Built from the real design system (components/ui/* + the --el-* tokens + element shape tokens — so a coding agent has no Pencil→code gap); --el-* only (no Tier-0 --color-*); shape via the element shape tokens; AA-safe; the Jira backlog / sprint-planning screen as the mirror.

This surface REUSES existing vocabularies — reference, don't redraw. The issue ROW reuses the Story-2.x work-items list row (type icon + key + summary + epic chip + assignee + status); the DRAG affordance reuses the Story-3.2 board drag vocabulary (handle, drag overlay, drop highlight); the empty/loading/error states reuse the shipped EmptyState / ErrorState / skeleton idioms. Draw the NET-NEW composition, not the primitives.

Specify, panel by panel:

• Page layout — within the app shell: the new Backlog nav item (where it sits relative to Boards/Reports + its icon) and the two stacked regions — sprint containers (top) over the backlog container (bottom).
• Sprint-planning container — a collapsible panel: sprint name + state Pill, the date range, an issue count, a committed-points slot (the Story-4.3 SEAM — draw it as a labelled empty slot, note it is filled by 4.3), a velocity slot (the Story-4.6 SEAM), the Start-sprint entry point (note the flow is Story 4.4 — this asset specifies only the entry point placement/label, like 4.5.1 did for Complete-sprint), the ranked issue rows, and an inline + Create issue row. Plus the empty sprint container ("No issues — drag from the backlog") and the Create sprint affordance (adds an empty planned sprint).
• Backlog container — the count header ("N issues" — the bounded count, not a loaded-row tally), the ranked rows, the inline create row.
• Issue row — the composed row with the drag handle, type icon (--el-type-* hue), key, summary, epic chip, the estimate slot (the Story-4.3 SEAM — an empty/placeholder badge, noted as filled by 4.3), assignee avatar, status Pill, the selection affordance, and the ⋯ context menu. Specify the slot order so the estimate seam has a reserved place (4.3 drops a number in without a relayout).
• Drag states — a row mid-drag (the overlay), the drop-target highlight on a sprint container and on a backlog insertion point, and the multi-select drag (the "N issues" stacked overlay).
• Multi-select — the selected-row treatment and the selection/bulk-action bar ("N selected" + Move to sprint ▸ / Move to backlog), distinct from a single-row hover.
• Context menu (⋯) — the row actions: Move to sprint ▸ (submenu of sprints), Move to top / bottom of backlog, (and the seams the later stories add).
• States — empty backlog EmptyState + create CTA; no-sprints state; loading skeleton; ErrorState + retry.
• Scale panel (backlog-scale.mock.html) — the large backlog: the bounded count header, the virtualized list window (only the visible rows rendered), and the lazy-load affordance, so the build target is the bounded shape, not load-all (finding #57).

Acceptance criteria

• A NEW design/backlog/ area exists with backlog.mock.html + backlog-scale.mock.html + PNG export(s) + design/backlog/design-notes.md; the mockups are built from components/ui/* + --el-*/element-shape tokens only (no Tier-0 --color-*, no raw rounded-*/p-* for control shape), pass the render checklist (icon viewBox, no nested buttons, prettier), and are AA-safe.
• The mockups draw: the page layout + nav item, the sprint-planning container (name + state + dates + count + the committed-points SEAM slot + the velocity SEAM slot + Start-sprint entry point + inline create + Create-sprint), the backlog container (bounded count header + rows + inline create), the issue row (with a RESERVED estimate-seam slot), the drag states (single + multi-select overlay + drop highlights), the multi-select selection/bulk bar, the ⋯ context menu, every empty/loading/error state, and the scale panel (bounded count + virtualized window + lazy-load).
• design-notes.md names each composing primitive (Pill, EmptyState, ErrorState, the work-items row, the ⋯ menu, the skeleton) AND explicitly documents the SEAMS: the row estimate slot + the sprint committed-points slot are filled by Story 4.3, the velocity slot by Story 4.6, and the Start-sprint flow is Story 4.4 (this asset is the entry point only) — so a future coding agent does not improvise them.
• The asset REUSES (references, does not redraw) the work-items row + the 3.2 board drag vocabulary + the shipped state primitives; it specifies only the net-new backlog/sprint-planning composition.

Context refs

• design/work-items/list.mock.html + design-notes.md (Story 2.x) — the issue-row vocabulary to reuse (type icon, key, summary, epic chip, assignee, status)
• design/boards/board.mock.html + the 3.2 board design-notes — the drag handle / overlay / drop-highlight vocabulary to reference (so backlog drag matches board drag)
• components/ui/* (Pill, EmptyState, ErrorState, Button, the menu primitive) + the heading/type scale — the primitives to compose
• app/globals.css --el-* + element-shape tokens; the /tokens specimen route
• Story 4.3 (estimation — fills the estimate + committed-points seams), Story 4.6 (velocity — fills the velocity seam), Story 4.4 (Start-sprint flow the entry point seams to) — name them in the notes
• The Jira backlog / sprint-planning screen as the mirror; finding #57 (bounded/virtualized, not load-all), #35 (not colour-alone), #54 (use the palette)