primitives-use

# Convert a Component to Use Primitives Rewrite the named component to rely on `src/components/primitives/*` (`Button`, `FlexRow`, `Text`, etc.) instead of raw HTML, ad-hoc Tailwind, or duplicated styling. The goal is cross-platform reuse and consistency with the project's design system. ## Reference Read first: `.agents/docs/features/primitives` — full primitives documentation. ## Priority (apply in order) 1. **Use primitive props first**: - `Button`: `type="primary|secondary|danger"`, `size="small|normal"` - Layout: `<FlexRow gap="sm" justify="between">` instead of `className="flex justify-between gap-2"` - `Text` (**native only**): `variant="strong|subtle|muted"`, `size="sm|base|lg"` 2. **For text on web**: use plain HTML (`<span>`, `<p>`) with CSS typography classes (`.text-strong`, `.text-subtle`, `.text-label`, `.text-small`). **The `Text` primitive is native-only — do not use it in web production code.** 3. **If primitive props aren't enough**: fall back to Tailwind tokens (`bg-surface-0`, `text-strong`). 4. **Last resort**: existing CSS modules or hardcoded styles. ## What "convert" means - Replace `<div className="flex ...">` with the matching primitive when one exists. - Replace ad-hoc button styling with `Button` + its `type` / `size` props. - Remove `className` props that duplicate primitive defaults. - Keep behavior identical — this is a presentation refactor, not a feature change. - If a primitive doesn't exist for a pattern the component needs, surface that to the user rather than inventing one inline.