deslop-ui

Review every canvas file the branch changed (git diff origin/main --stat -- packages/review/app). Assume each new style or component is a copy of something the kit already has, and prove otherwise before you keep it.

The kit

Everything below lives in packages/review/app/src/ui/ unless a path says otherwise. Kit modules never import app code.

• Controls: Button (variant, tone; buttonLook for an anchor drawn as a button), IconButton (aria-pressed for toggles), SegmentedControl, Checkbox, Radio, CheckboxMark (a row that is itself the checkbox), Switch, TextField, TextArea, Select, fieldStyles.bare, Kbd/Shortcut.
• Overlays: Popover (placed with menuStyles.popover or shellStyles.topbarPopover), useDismissOnOutside, Dialog, OptionMenu in src/option-menu.tsx. Menu rows use menuStyles.item, groups split with menuStyles.separator, arrows move with moveMenuFocus. Disclosures use DisclosureChevron with disclosureStyles.toggle and chevronMarker on the toggle.
• Feedback: Spinner (spinStyles.turning for a turning icon), ProgressRing, EmptyState, StatusBanner, StatusDot, useCopy/CopyButton, useTooltip, useNotify in src/notify.ts.
• Glyphs: icons.tsx (24 grid, sized with iconStyles), board and PR-state marks in board-icons.tsx, agent marks through AgentLogo in brand-icons.tsx. Icons are SVG, never Unicode characters.
• Fragments: textStyles (truncate, clamp2, error, eyebrow, sectionTitle, count), focusStyles.ring/ringInset, buttonStyles.reset, dividerStyles.vertical, surfaceStyles (card, popover, dialog), listRowStyles for sidebar rows, pillStyles/Chip, CrumbSeparator, OverlayScrollbar.
• Settings use Section/Row from src/settings-section.tsx. Times, durations and counts use src/format.ts.

Checklist

pnpm lint already rejects off-scale literals, !important, bare transparent, raw colors, glyph icons, <select> outside the kit, unused stylex.create keys, Code OSS imports and app imports from src/ui/. The checklist is what lint cannot see.

• Hand-rolled controls. Search the kit before keeping any of these, and swap in the kit piece:
  • a <button> with its own padding, border, background and font: Button, IconButton or buttonStyles.reset
  • a local <input> or <textarea> look: TextField, TextArea, Checkbox, Radio or Switch
  • a click-outside effect: Popover or useDismissOnOutside
  • a fixed overlay: Dialog
  • a single-choice menu: OptionMenu
  • a rotating chevron: DisclosureChevron with chevronMarker
  • a border-ring spinner: Spinner
  • a copied-state timer: useCopy
  • a sidebar row with its own hover wash: listRowStyles
  • a rounded chip with an inset ring: pillStyles or Chip
  • a notification dot: StatusDot
  • a styled <kbd>: Kbd or Shortcut
  • title= on an icon control: useTooltip
• Menu and list rows. A row rendered as a <button> stacks focusStyles.ringInset, buttonStyles.reset, then menuStyles.item (or listRowStyles.row + wash). Without the reset the browser's 2px border shows and the row grows.
• Locked checkboxes. Checkbox dims to half opacity when disabled. A locked-on option (a required item) is checked + disabled with a useTooltip on its wrapper that says why, as onboarding/install-step.tsx does. A dimmed box with no reason reads as broken.
• Local icons. An inline <svg> belongs in icons.tsx, drawn on its 24 grid and sized with iconStyles. Agent marks go through AgentLogo.

• Repeated fragments. These become kit fragments:

  • overflow: hidden + textOverflow: ellipsis + whiteSpace: nowrap: textStyles.truncate
  • two-line clamps: textStyles.clamp2
  • error colors: textStyles.error
  • focus outlines: focusStyles.ring / ringInset
  • 1px vertical rules: dividerStyles.vertical
  • bordered figures: surfaceStyles.card
  • hairlines between menu groups: menuStyles.separator

  A pattern that appears a third time goes in the kit.

• Off-scale values. Don't silence lint with a new step or an inline calc(). Snap to the nearest step, and name a geometry-coupled offset once. Reduced-motion and narrow-width media queries become stylex.env.reducedMotion / stylex.env.narrow; a one-off layout breakpoint may stay local. Replace local spin keyframes and easings with motion.* and spinStyles.
• Every animation stills under reduced motion. Check each animationName and transition has a stylex.env.reducedMotion branch.
• Focus. Look for anything that sets disabled on the button that was just pressed (Send, Retry, an opener while it loads). Replace it with a guard in the handler. Popovers and dialogs must close on Escape and give focus back to their trigger.
• Scrollbars. global.css already styles every native scrollbar in the canvas. Delete local ::-webkit-scrollbar rules. Setting scrollbarWidth or scrollbarColor turns that styling off, and scrollbarColor inherits, so set them only for a scroller that hides its bar on purpose. A main scroller whose bar must not take layout width gets OverlayScrollbar and overlayScrollbarStyles.scroller.
• Portals. UI portaled outside .review-app needs themeStyles.vars, or kit controls lose their chrome tokens and collapse.
• Feedback placement. Errors inside a modal render inline with role="alert". Transient success after a surface closes uses useNotify. Don't do both.
• Slop in styles. Delete:
  • comment-per-property styles
  • descendant selectors (use markers or variants)
  • zIndex literals that stack across surfaces (use layer; order inside one component may stay local)
  • shadows outside elevation
  • duplicate stylex.create blocks that differ by one property (use a variant)
• Tests. Don't add tests that assert class names, CSS text or style objects. Test behaviour (roles, focus, dismissal) and check the visuals in the Desktop.
• Style-only refactors. Prove no pixel changed with computed-style diffs before and after, with the pointer moved off the page. Not by eye.

Then:

1. Run pnpm format, pnpm lint and pnpm -w exec tsc --noEmit -p packages/review/app from the repo root.
2. Run the canvas tests for the files you touched.
3. Check the changed surfaces in an isolated Desktop (DEV_FAST_REVIEW_DESKTOP_BACKGROUND=1): dark, light, a narrow width, keyboard focus and reduced motion.
4. Report what you replaced, and anything you kept local and why.