docs: document the presenter's click preview

src/content/built-in/shortcuts.md

@@ -16,6 +16,7 @@ description: The keyboard and mouse controls of a deck, and how to change them.
 | `d` | Dark or light mode |
 | `g` | Go to a slide: type a number or part of a title, then Enter |
 | Escape | Close the overview, dialogs and menus |
+| `u` | Presenter page: show or hide the [click preview](../guide/presenter-mode.md#click-preview) |
 
 Shortcuts are off while you type in a text field or an editor, and while the drawing toolbar is open. Escape leaves a text field (not an editor), so the keys work again. After a click on a checkbox or a button, the arrow keys still move the slides. While the info dialog or a modal `<dialog>` of a slide is open, only Escape works. When a `slide-ng-drag` element is selected, the arrow keys nudge it instead of moving through the slides.
 
@@ -43,7 +44,7 @@ export default (actions: ShortcutActions, list: Shortcut[]): Shortcut[] => [
 ];
 ```
 
-`key` is a `KeyboardEvent.key` name, with `shift+` in front if needed, and `space` for the space bar. When two shortcuts have the same key, the one later in the list wins, so appending `{ key: 'k' }` replaces a built-in `k`. A deck's `setup/shortcuts.ts` runs after the shortcuts of its theme and addons, so it gets their list and has the last word. The names of the default shortcuts are `next_space`, `prev_space`, `next_right`, `prev_left`, `next_page_key`, `prev_page_key`, `next_down`, `prev_up`, `next_shift`, `prev_shift`, `toggle_dark`, `toggle_overview`, `toggle_overview_backtick`, `hide_overview`, `goto`, `fullscreen`, and the overview moves `right_overview`, `left_overview`, `up_overview`, `down_overview` and `goto_from_overview`.
+`key` is a `KeyboardEvent.key` name, with `shift+` in front if needed, and `space` for the space bar. When two shortcuts have the same key, the one later in the list wins, so appending `{ key: 'k' }` replaces a built-in `k`. A deck's `setup/shortcuts.ts` runs after the shortcuts of its theme and addons, so it gets their list and has the last word. The names of the default shortcuts are `next_space`, `prev_space`, `next_right`, `prev_left`, `next_page_key`, `prev_page_key`, `next_down`, `prev_up`, `next_shift`, `prev_shift`, `toggle_dark`, `toggle_overview`, `toggle_overview_backtick`, `hide_overview`, `goto`, `fullscreen`, `toggle_click_preview` (presenter page only), and the overview moves `right_overview`, `left_overview`, `up_overview`, `down_overview` and `goto_from_overview`.
 
 ## Color mode
 

src/content/guide/presenter-mode.md

@@ -27,6 +27,37 @@ Say hello.
 
 `slide-ng export-notes` makes a PDF of the notes. See [Speaker notes](../features/speaker-notes.md).
 
+## Click preview
+
+The eye button next to the layout button, or `u`, turns on a click preview of the current slide. The preview is on the presenter page only. The audience page, `/notes` and the next-step pane do not change.
+
+- Parts that are already shown look as usual.
+- The part of the next click is brighter and has a dashed outline.
+- The parts of later clicks are greyed out.
+- Each part that a later click changes has a badge with the number of that click.
+
+Click a badge or a greyed-out part to go to that click. Every window follows. A link or button inside a greyed-out part is not followed; parts already shown keep their own clicks. While you draw, the pen gets the click and the slide does not move. The choice is remembered in the browser, under the key `slide-ng-presenter-click-preview`. The shortcut is named `toggle_click_preview`, see [Shortcuts](../built-in/shortcuts.md#change-the-keys).
+
+A theme or a deck can change the look with CSS variables:
+
+| Variable | Default | What it sets |
+| --- | --- | --- |
+| `--slide-ng-ghost-opacity` | `0.25` | Opacity of the parts of later clicks |
+| `--slide-ng-ghost-next-opacity` | `0.75` | Opacity of the part of the next click |
+| `--slide-ng-ghost-next` | `var(--slidev-theme-primary)` | Colour of the outline and the badge of the next click |
+| `--slide-ng-ghost-badge-background` | `#6b7280` | Background of the other badges |
+| `--slide-ng-ghost-badge-foreground` | `white` | Text of the badges |
+
+The parts carry the classes `slide-ng-click-ahead` and, for the next click, `slide-ng-click-next`. The click is in `data-slide-ng-click-at`.
+
+The preview has limits:
+
+- A `<slide-ng-switch>` shows only its current child. The badge on the switch says when it changes.
+- Code line steps, Magic Move, `slide-ng-mark` and `slide-ng-motion` show their state at the current click, not their later state. A badge says when they change next.
+- The notes PDF has no click preview.
+
+Slidev has no click preview, see [What differs from Slidev](../migrating/from-slidev.md#added-in-slide-ng).
+
 ## Timer
 
 ```md

src/content/migrating/from-slidev.md

@@ -16,6 +16,10 @@ slide.ng reads the same markdown file format as *Slidev, with the same slide spl
 - Most headmatter keys, see [Headmatter and frontmatter](../built-in/headmatter.md), and most of the command line.
 - The same keyboard shortcuts, the presenter view, drawing and recording.
 
+## Added in slide.ng
+
+- A click preview on the presenter page: the eye button or `u` shows what the later clicks of the current slide show, greyed out, and a click on a part goes to its click. See [Presenter mode](../guide/presenter-mode.md#click-preview).
+
 ## Syntax differences
 
 | In Slidev | In slide.ng |