🍕 feat(highlight): refined modes + single accent + selection labels

[jjpaulino]

Why

On a typical content-heavy editorial page (e.g. nymag.com), the previous highlighter painted every component, all the time, in dashed pink/yellow/teal, with width varying by sibling order. Three nested components share an edge → three parallel dashes within ~6px. No encoding of importance. The extension was strictly harder to read with than without.

This PR replaces that with a four-mode model defaulting to selection only — closest to Chrome DevTools' element inspector — and a refined visual language built around a single accent color.

Modes

Mode	Ambient outlines	Notes
`off`	none	Hover + selection still render so click works
`selection`	none	NEW DEFAULT. Like DevTools' element inspector
`editable`	only `[data-editable]`	For editorial / PM workflows
`all`	every component	Bird's-eye structure view

Switch modes:

• Header dropdown next to the eye icon (shows current mode + abbreviated label)
• h keyboard shortcut now cycles through the four modes
• Options page → new "Highlight mode" selector above the intensity slider

Visual language

State	Before	After
Ambient	2–5px dashed/dotted/double, six rotating colors	1px solid, single accent @ 18% opacity
Hover	3px solid orange	2px solid accent @ 70% opacity
Selected	5px solid red	2px solid accent @ 100% + labelled top-left badge
Find match	unchanged	unchanged (kept emerald — different signal)

Single accent (tailwind blue-600). State is encoded with width + opacity, not hue. The selection badge is a small pill anchored above the selected box that renders the component's display name, sourced from a new `data-clay-slip-label` attribute via CSS `attr()`.

How mode gating works

The stylesheet keys ambient rules off `html[data-clay-slip-mode]`. Switching modes is one attribute write — no per-element walking, no restyle pass. The `'off'` mode explicitly writes the attribute so we can add `[mode="off"]` diagnostic rules later without code changes.

```css
html[data-clay-slip-mode="all"] [data-clay-slip-color],
html[data-clay-slip-mode="editable"] [data-clay-slip-color][data-editable] {
outline: 1px solid rgba(37, 99, 235, calc(0.18 * var(--clay-slip-outline-opacity))) !important;
outline-offset: -1px !important;
}
```

Wiring

• `HighlightMode` type added to `UserPreferences` (default `'selection'`). `loadPreferences()` merges over `DEFAULT_PREFERENCES`, so existing users pick up the new default with no migration.
• Store: `setHighlightMode` + `cycleHighlightMode` actions, both persisted to `chrome.storage.sync`. The old `highlightEnabled: boolean` + `toggleHighlights` are dropped — `mode === 'off'` covers it.
• New `HighlightModeMenu` component using a native `
  Details

  ` for the popover (click-outside-to-close, keyboard activation, a11y for free).
• Options page gains a new selector + the intensity slider's help text is rewritten to explain its new role as a master opacity multiplier.

Tests

New file `tests/content/highlighter.test.ts` (18 cases) covering:

• `installHighlightStyles` is idempotent and respects pre-set mode
• `applyHighlights` tags + labels by index, skips empty labels
• `clearHighlights` wipes every attribute we set, leaves `data-editable` alone
• `setHighlightMode` round-trips, falls back to `'selection'` on garbage
• `setHovered` / `setSelected` toggle exactly one element at a time
• `setHighlightOpacity` clamps to [0, 1]

`113 → 131` tests passing.

Version

`2.0.2 → 2.1.0` (UX-significant change, additive preference).

Test plan

• `npm run validate` (typecheck + lint + format + 131 tests)
• `npm run build` clean
• Reload unpacked extension on a Clay page → page is clean by default; only the hovered component lights up
• Press h → cycles `off → selection → editable → all → off`
• Click a component → 2px solid blue outline + labelled badge in top-left
• Open Options → Highlight mode dropdown matches header dropdown; both persist on reload
• Verify intensity slider still scales every outline (selected, hovered, ambient, match)
• Find-on-page mode still uses emerald green (different signal preserved)

Screenshots

The before is in this thread (the multi-color dashed soup on nymag.com). The after will be added once the PR is reloaded locally.

Made with Cursor