# Agent notes

## UI

- The clipper's UI comes from [`@usememos/ui`](https://github.com/usememos/ui), the shared Memos design system, pinned to an exact version. `@base-ui/react` is pinned to the exact version ui's `peerDependencies` names and is upgraded only together with ui, never on its own.
- Before any UI work, read `node_modules/@usememos/ui/llms-full.txt`: tokens, components and their parts, the type scale, and the rules. Follow it over habit. Key pages: typography.md, layout.md, depth.md, patterns.md and custom-components.md.
- Text uses ui's type classes, never Tailwind text sizes or weights: `mu-caption` (13/400) and `mu-label-sm` (13/500) for secondary text and small labels, `mu-body` (14/400) and `mu-label` (14/500) for body text and labels, `mu-title` (16/500) for the step and empty-state titles, `mu-heading` (20/500) for a page title. Nothing below 13px, no weight above 500. `text-fact` is the clipper's own mono 13px voice for hosts, versions, tokens and URLs.
- Colors, radii, shadows and fonts come from ui's `tailwind.css` as `mu-` utilities (`bg-mu-surface`, `text-mu-ink-muted`, `border-mu-edge`, `rounded-mu-md`, `shadow-mu-pop`, `font-mu-mono`), or `var(--mu-*)` where Tailwind can't reach. No raw colors, no hand-picked Tailwind colors. Spacing stays on the 4px grid: no half steps such as `p-0.5` or `gap-1.5`; the only 2px value is `--mu-inset`.
- Build a part ui doesn't ship the way `custom-components.md` says: use a ui component if one fits; otherwise its class function (`buttonClasses`, `inputClasses`, `textareaClasses`, `badgeClasses`, `menuClasses`, `popoverClasses`) plus layout classes, with state in attributes (`aria-invalid`, `aria-disabled`, `data-highlighted`); otherwise the public classes (`mu-s-sm`, `mu-focus`, `mu-icon`, depth classes) and tokens. Behavior for a new part comes from `@base-ui/react` directly, as ui does. Never import a Base UI part to replace a ui component that exists, and never add a local UI kit (`src/components/ui/`). `src/components/inline-status.tsx` is the one small stand-in, kept until ui ships an Alert.
- Read the `--mu-row-*` variables in CSS when a part must match a control row; never set them. Pick a size class (`mu-s-xs | sm | md`) instead. Popups take only `side` and `align`; their offsets are fixed by ui.
- `--clip-highlight*` is the clipper's own content color (template tokens, the excerpt bar, the template preview). Never use it on a ui control, for focus, or for warnings.