[adamXbot]

Follow-up to #93. The pick card's report was a single colour, so property names, values and the classes in each selector ran together.

What changes

• Colour by token. lib/pick-report.ts now splits the report into tokens (reportTokens, selectorTokens, valueTokens), and the card gives each kind its own colour:
  • labels such as classes, box, styles and styled by… are dimmed;
  • property names, values and class names each get a colour;
  • attribute tests like [data-retro] and pseudo-classes like :hover stand out within rule selectors;
  • @layer notes and counts are dimmed and set in italics.
• Aligned values. Style values line up in a column. A value that wraps, such as inset on a box-shadow, hangs under its column.
• Colour swatches. Colour values get a swatch drawn over a checkerboard, so translucent colours show as translucent. This covers rgb, hsl, oklch, oklab and the other colour functions. Screen readers skip the swatch.
• A palette per time-machine stop: DOS colours in 1999, dark ink on white for the 2003 Mac Terminal, and xterm colours in 2002. Every token colour meets 4.5:1 on its console.
• reportLines keeps the CLI's wording; the only change is the aligned values.

Testing

• npm run typecheck, npm run lint and npm run check:audit are clean. npm test passes 41 tests; new cases cover selector, value and line tokens and the alignment.
• npm run test:browser passes 70 tests in Chromium and Firefox. The report test also checks that four token kinds have distinct colours, the swatch's aria-hidden and paint, and the wrapped-value indent.
• Screenshots were checked in the default card and in all three time-machine stops.

🤖 Generated with Claude Code