Hover Preview

Preview Info Footer

A collapsible panel below the preview scroll area showing live details about the swatch, surface, or container under the cursor:

• Swatch row — column index, contrast ratio, hex value.
• Clamp row — "Same hex as neighbour — contrast ceiling reached" or "No contrast ceiling reached".
• Chroma row — "Chroma clipped N% — gamut limit at this tone" or "Full source chroma preserved".
• Entity row — surface / container / content / scrim / seed.

The info updates via event delegation — a single pointermove handler on the scroll container walks up from the target to the nearest [data-preview-hover] element, avoiding React listeners on thousands of individual swatches. Pointer-leave clears to null (placeholder dashes).

Toggle: Settings → Editor Display → Preview footer. Hotkey: ⌥2 (Alt+2). State persisted as showPreviewFooterPanel in LayoutState.