Motir

Repo: motir-core. One PR. Surfaced while rendering the shipped Children panel for the MOTIR-2285 design asset — a pre-existing defect, logged as its own card rather than absorbed into that run (notes.html #27 / the drive-by-fix rule).

The defect, on origin/main

app/(authed)/items/[key]/_components/ChildList.tsx renders each child row with

className="hover:bg-(--el-surface) group flex items-center gap-3 rounded-md px-2 py-2 …"

rounded-md is a Tier-0 radius utility. CLAUDE.md's shape rule is explicit that a control's own radius must come from an element-semantic shape token — a menu/list row is --radius-control — because only those tokens are overridden by a [data-style] block. So under every named style (soft-playful, neo-brutalism, swiss, cybercore, retrofuturism …) the child rows keep a fixed 6px radius while every other row-shaped affordance on the page reshapes around them.

The row's px-2 py-2 is the same class of escape: --spacing-control-x / --spacing-control-y are the tokens a row's own padding is supposed to flow through.

Scope

In: the row's radius and its own padding in ChildList.tsx, routed through --radius-control / --spacing-control-x / --spacing-control-y, plus a render check across the implemented styles in light and dark so the row still reads as a row at a pill radius.

Out: the panel's List ↔ Graph switcher and everything else Story MOTIR-2284 ships — this is a separate PR against a file that story also edits, so land whichever merges first and rebase the other. Out too: a sweep of every other raw rounded-* in the repo (that is a bigger, deliberately-scoped audit, not this).

Acceptance criteria

• ChildList.tsx names no Tier-0 radius or fixed padding utility for the row: rg 'rounded-md|px-2 py-2' app/\(authed\)/items/\[key\]/_components/ChildList.tsx returns nothing.
• The row's radius is rounded-(--radius-control) and its own padding is px-(--spacing-control-x) py-(--spacing-control-y); the layout gap-3 between the row's children stays raw (layout spacing is not shape).
• The hover fill, the focus-visible ring, the peek-link behaviour and the row's contents are unchanged — this is a token substitution, not a redesign.
• The row is rendered in at least the default style plus one style that pills --radius-btn/--radius-control (soft-playful) and one that squares it (swiss / neo-brutalism), light and dark, and the row still reads as a row in each.

Context refs

• app/(authed)/items/[key]/_components/ChildList.tsx — the row.
• motir-core/CLAUDE.md — "Shape (radius + spacing + sizing) flows through element-semantic shape tokens", and its small-affordance row → --radius-control mapping.
• lib/theme/styles.ts + the [data-style] blocks in @motir/design-system's theme.css — what does and does not flip.
• Sibling rows that already do this correctly (e.g. the canvas breadcrumb crumb buttons, rounded-(--radius-control)).