Motir

Repo: motir-core. ONE PR, design/-only. Created by motir run MOTIR-2373's design gate (run.md guard #3): that bug's first acceptance criterion is "the right cluster's contents at < md are decided against a design, not improvised … whichever the design asset says", and no design asset says. This card is that asset.

The gap, measured on origin/main @ 8c42971c

The shipped bar carries up to EIGHT controls. app/(authed)/_components/TopNav.tsx:111-135 renders, in order: PlanWithAILauncher (labelled) · BuildInPublicButton or BuildingInPublicHeaderLink (labelled) · CreateIssueButton · CommandPaletteTrigger · ReportButton · ThemeToggle · NotificationBell · UserMenu.

The design area that OWNS the shell draws THREE. Every .pen source under design/shell/ was read node-by-node, every panel enumerated:

Those assets are MOTIR-53's (1.5.1, done) and predate five of the eight controls. No panel of any asset in design/ depicts a narrow-width bar carrying the current control set, and no asset anywhere depicts an overflow affordance for it.

design/shell/ also carries no design-notes.md — git ls-tree origin/main design/shell/ returns five files (cmd-k · desktop · desktop-collapsed · mobile-drawer · shortcuts, each .pen+.png) and none of them is the third file of the THREE-file asset contract.

Why the per-control designs do not add up to an answer

Each design that ADDED a control specified its desktop placement and nothing else — the door is drawn, the narrow-width room is not (gate 5's inverse):

• design/ai-chat/design-notes.md:786 and :1015 — "The TopNav right cluster order is [Plan with AI] [Build in public] [+ Create ⌘C] [Search ⌘K] [bug] [screen] [bell] [avatar]", and :458 — the pill is "present on every screen, never covering content". At 375px it is covering content; that sentence is the assertion this card has to make true or retract.
• design/notifications/design-notes.md:44-47 — the bell mounts between ThemeToggle and UserMenu, and "inside the off-canvas mobile SidebarDrawer it renders icon-only". ⚠️ That narrow-width claim is not shipped: components/ui/SidebarDrawer.tsx on origin/main imports no bell / notification component. It is prior art to honour or overrule, not a fact.
• design/public-projects/design-notes.md:596-606 — the single stateful build-in-public slot (CTA or indicator, never both, never empty), desktop only.

An input the design must weigh, not assume

components/planning/PlanWithAIFab.tsx does ship, and app/(authed)/layout.tsx:279 mounts it on every authed screen behind the same showPlanWithAi gate as the header pill. So planning has a second door at phone width and the pill may be droppable without losing access. No other control in the cluster has a second door on origin/main — which is why "hide the labelled ones below md" is a decision about reachability, not a CSS detail.

Acceptance criteria

• design/shell/ gains the complete THREE-file asset set for the narrow-width bar: a design-notes.md (the area has none), the source (a *.mock.html built from the real design system, or an updated .pen), and a same-basename .png export.
• The asset is drawn against shipped reality: the crowded bar is RENDERED first — the real TopNav at 375×812 with showPlanWithAi, buildingInPublic, buildInPublicProjectKey and a non-null initialUnreadCount all live — and the design composes from that render's real markup, not a stylized stand-in. The render is committed as part of the asset or reproduced in design-notes.md with the command that produced it.
• The notes state a BUDGET: how many controls the bar carries at each breakpoint, and the rule the next control added to the cluster must follow.
• All eight controls have a named disposition below md — stays · drops its label to icon-only · moves into an overflow · moves into the SidebarDrawer · is dropped because a named second door exists. None is left unaddressed, and any control that leaves the bar has its replacement reachability drawn.
• The access path is DRAWN, not described: whatever affordance receives the displaced controls (a ⋯ trigger, a drawer section) is visible in a panel, in the shipped primitive it composes from, so a reader SEES the door.
• Both narrow-width states are drawn at 375px — bar closed, and drawer open — with the hamburger's hit area shown clear of the right cluster in both.
• design-notes.md names the three sources above by file and line, and says explicitly where this design overrides them (the ai-chat "never covering content" claim and the notifications drawer claim in particular).
• Colour routes through --el-* element tokens and shape through the element-semantic shape tokens; every element names the components/ui/* primitive it composes from. No invented colour, no Tier-0 --color-*, no raw rounded-*/p-*.
• Nothing outside design/shell/ changes. No .tsx, no test, no token file — the code change is MOTIR-2373's, and this card must not pre-empt it.
• Branch prefix design/MOTIR-<id>-<slug> (a design-asset-only diff; ci.yml then skips the Playwright + Vitest-integration jobs and the Vercel preview).

Context refs

• app/(authed)/_components/TopNav.tsx — the bar. Left cluster min-w-0; the right cluster is not, which is the mechanism of the overflow.
• design/shell/mobile-drawer.pen · desktop.pen · desktop-collapsed.pen — the stale assets, and the layout language to extend.
• design/ai-chat/design-notes.md §786 / §1015 / §458 · design/notifications/design-notes.md §44 · design/public-projects/design-notes.md §596 — the per-control placement designs to reconcile.
• components/planning/PlanWithAIFab.tsx, app/(authed)/layout.tsx:279 — the second door for planning.
• components/ui/SidebarDrawer.tsx — the off-canvas drawer, a candidate home for displaced controls.
• MOTIR-53 — the 1.5.1 design card whose assets these are.
• MOTIR-2373 — the bug this unblocks. MOTIR-1150 — in flight on TopNav.tsx; it touches only the LEFT cluster and shipped hidden md:flex on its own addition.