chesspal 0.4.1 → 0.6.0

package/dist/page/app/app.js

@@ -17,9 +17,10 @@ import { BadgeCounts } from "../game/badges.js";
 import { stepped } from "../game/browse.js";
 import { GameColumn } from "../game/column.js";
 import { howEnded, useDeclined, useJustEnded, useSawEnd } from "../game/ending.js";
-import { Steps } from "../game/move-list.js";
+import { Steps, stepsLine } from "../game/move-list.js";
 import { useOpeningBook } from "../game/opening-book.js";
 import { aiSpoke, aiWords, analysisTalk, judgmentsOf, playerSpent, playerWords, pliesOf, reviewCount, withBook, withJudgments, withoutReviews } from "../game/plies.js";
+import { afterMove, isJump, leaveLine, linePlies, lineRecord, onLine, stepLine } from "../game/variation.js";
 import { GuideDialog } from "../guide/guide.js";
 import { BareButton, HelpsCard, HintLine, MapButton } from "../helps/helps.js";
 import { helpsOf } from "../helps/view.js";
@@ -42,7 +43,7 @@ import { AiNameButton, ChatDialog, tableNote } from "../table/window.js";
 import { AiNote, AiWords, Compose, PointSquare, TalkFaces } from "../talk/talk.js";
 import { textFor } from "../text.js";
 import { anchorName, useAnchor } from "./anchor.js";
-import { useBrowseKeys, useFoldKeys, useLegendKey, useMapKey, useWheelSteps } from "./keys.js";
+import { useBrowseKeys, useEscapeKey, useFoldKeys, useLegendKey, useMapKey, useWheelSteps } from "./keys.js";
 import { helpsShown, phaseOf, verdictOf } from "./phase.js";
 import { ask, post, refusedText, sendMessage, sendMove, useServed } from "./served.js";
 import { tabTitle, useTabTitle } from "./title.js";
@@ -131,7 +132,7 @@ export function App({ start }) {
             apply(settingsFrom(served.settings));
         }
     }, [profileId]);
-    // The AI as the host names it (Claude, Codex), also where the page sends the player to write; the last known while the page is offline.
+    // The AI as the host names it (Claude, Codex, Gemini), also where the page sends the player to write; the last known while the page is offline.
     const name = served?.opponent ?? text.ai;
     // Under it, the model and effort the AI played its last move with (D-82).
     const signed = served?.aiModel === undefined ? undefined : signature(served.aiModel.model, served.aiModel.effort);
@@ -169,7 +170,7 @@ export function App({ start }) {
     const playedAs = studied === undefined ? name : aiNameOf(aiHostIn(live.record), aiModelIn(live.record)?.model) ?? text.ai;
     const analyst = annotator === undefined ? name : aiNameOf(annotator.annotator, annotator.annotator) ?? text.ai;
     const material = useMemo(() => materialOf(live.position.fen), [live]);
-    const pieces = useMemo(() => piecesOf(live.position.fen), [live]);
+    const piecesOnBoard = useMemo(() => piecesOf(live.position.fen), [live]);
     // How many of the game's first plies a line of the book reaches, as the server counts them (D-68).
     const bookPlies = studied !== undefined ? studied.book : game?.book ?? 0;
     // While the game goes on, the book's first moves carry its badge, when the player wants it, as the AI's review gives it after (D-69).
@@ -203,13 +204,27 @@ export function App({ start }) {
     // The legend of the marks on the board, open until the player closes it (D-99).
     const [legendOpen, setLegendOpen] = useState(false);
     useLegendKey(() => setLegendOpen((open) => !open));
+    // In analysis the player plays a variation from the move shown, White's moves and Black's (D-116): one line, kept by the page alone, faded once the board
+    // is back on the game.
+    const [line, setLine] = useState(undefined);
+    const analysing = studied !== undefined;
+    const onTheLine = analysing && onLine(line);
     const past = useMemo(() => viewing === undefined ? undefined : new Game({ tags: live.record.tags, moves: live.record.moves.slice(0, viewing) }), [live, viewing]);
-    const next = useMemo(() => viewing === undefined ? undefined : new Game({ tags: live.record.tags, moves: live.record.moves.slice(0, viewing + 1) }).lastMove, [live, viewing]);
-    const shown = useMemo(() => past ?? (pending === undefined ? live : withMove(live, pending)), [live, pending, past]);
-    // A square lit from the AI's words goes off with the position: a touch keeps it lit until then, a mouse until it leaves the word.
-    useEffect(() => setPointed(noSquares), [shown]);
+    const lineGame = useMemo(() => onTheLine ? new Game(lineRecord(live.record, line)) : undefined, [live, onTheLine ? line : undefined]);
+    const shown = useMemo(() => lineGame ?? past ?? (pending === undefined ? live : withMove(live, pending)), [live, pending, past, lineGame]);
+    // The move after the position shown, which a step back slides home: the line's own on the line.
+    const next = useMemo(() => onTheLine ? shown.legalMoves().find((move) => move.san === line.moves[line.cursor]) : viewing === undefined ? undefined : new Game({ tags: live.record.tags, moves: live.record.moves.slice(0, viewing + 1) }).lastMove, [live, viewing, shown]);
+    // Where the line starts its numbers when it leaves from the game's first position.
+    const firstPosition = useMemo(() => new Game({ tags: live.record.tags, moves: [] }).position, [live]);
+    // A square lit from the AI's words goes off with the position: a touch keeps it lit until then, a mouse until it leaves the word; in analysis a refusal
+    // goes off with it too.
+    useEffect(() => {
+        setPointed(noSquares);
+        if (analysing) {
+            setRefusal(undefined);
+        }
+    }, [shown]);
     // The player sees all of Chesspal's facts, whatever the AI's level (D-79): in a game with the helps on, always in analysis (D-114).
-    const analysing = studied !== undefined;
     const helped = helpsShown(phase, settings.helps);
     // Seen from the player's side (D-91): theirs in a game, in analysis the side the game names theirs, none when it names neither.
     const you = analysing ? playerIn(studiedSides(live.record.tags, served?.profile.name ?? "", playedAs, text.sides, served?.profile.accounts)) : game?.ai === undefined ? undefined : game.ai === "white" ? "black" : "white";
@@ -225,6 +240,7 @@ export function App({ start }) {
         setPending(undefined);
         setViewing(undefined);
         setPromoting(undefined);
+        setLine(undefined);
     }, [gameKey]);
     const played = studied === undefined ? game : null;
     useGameSounds(played, replayed, sound);
@@ -252,16 +268,43 @@ export function App({ start }) {
     const shownOpening = useMemo(() => bookAt === undefined || book === undefined ? undefined : openingOf(bookAt, book), [live, book, bookAt === undefined ? 0 : at]);
     // Whether the move shown is still the book's, whatever the badges show: the card says the move the game left it at, once it is past it.
     const leftBook = outOfBookMove(at, bookPlies);
-    // A jump of more than one move shows the position at once: only a step slides its pieces.
-    const shownBefore = useRef(at);
-    const jumped = Math.abs(shownBefore.current - at) > 1;
-    shownBefore.current = at;
+    // A jump of more than one move shows the position at once: only a step slides its pieces, on the game or on a variation.
+    const place = { at, cursor: onTheLine ? line.cursor : 0 };
+    const shownBefore = useRef(place);
+    const jumped = isJump(shownBefore.current, place);
+    shownBefore.current = place;
+    // A move of the game shown takes the board off a variation, which stays faded.
     const goTo = (count) => {
         setSelected(undefined);
+        setLine(leaveLine);
         setViewing(count >= total ? undefined : Math.max(0, count));
     };
-    const step = (to) => goTo(stepped(to, at, total));
+    // On a variation the arrows back and forward step through it; to either end of the game they leave it.
+    const step = (to) => {
+        if (onTheLine && (to === "back" || to === "forward")) {
+            setSelected(undefined);
+            setLine(stepLine(line, to));
+        }
+        else {
+            goTo(stepped(to, at, total));
+        }
+    };
     useBrowseKeys(step, () => setFlipped(!flipped));
+    // A move of the variation shown: the board goes back on it, at the game's move it leaves from.
+    const showLine = (cursor) => {
+        if (line !== undefined) {
+            setSelected(undefined);
+            setLine({ ...line, cursor });
+            setViewing(line.at >= total ? undefined : line.at);
+        }
+    };
+    // The cross and Esc close the variation: the board shows the game where it left it.
+    const closeLine = () => {
+        setSelected(undefined);
+        setLine(undefined);
+    };
+    // Esc first lets go of a piece picked, and leaves the legend, a promotion's choice, the settings and the dialogs to close themselves.
+    useEscapeKey(line === undefined || legendOpen || promoting !== undefined || setting || dialog !== undefined ? undefined : () => selected === undefined ? closeLine() : setSelected(undefined));
     const wheel = useWheelSteps(step);
     // The move shown stays in the page's address, for a reload and a link to it; after the reset on a new game, which would undo the move it goes to. A
     // game a link opens is there to look at: the analyst starts on the player's yes alone (D-89; Zoe and Federico).
@@ -269,7 +312,8 @@ export function App({ start }) {
     useAnchor({ ready: served !== undefined, shown: studied !== undefined ? anchorName(studied.name) : idle ? undefined : playedName, played: playedName, going }, viewing, (plies) => goTo(plies ?? total), async (wanted) => await post("/api/study", { game: wanted, look: true }, text, name) === undefined, setLinkIgnored);
     // The tab names the game and the move shown, as the cards name its players; between games, Chesspal alone.
     const titled = idle || served === undefined ? undefined : studiedSides(live.record.tags, served.profile.name, playedAs, text.sides, served.profile.accounts, othersOf(served.profiles, served.profile.id));
-    useTabTitle(titled === undefined ? undefined : tabTitle(titled.white.name, titled.black.name, at === 0 ? undefined : plies[at - 1]));
+    const lineNumbered = line === undefined ? undefined : linePlies(line, lineStartOf(plies, line.at, firstPosition));
+    useTabTitle(titled === undefined ? undefined : onTheLine ? tabTitle(titled.white.name, titled.black.name, lineNumbered?.[line.cursor - 1], true) : tabTitle(titled.white.name, titled.black.name, at === 0 ? undefined : plies[at - 1]));
     // The header's theme switch picks the other of the two the page shows, leaving the system's.
     const switchTheme = () => change({ ...settings, theme: document.documentElement.dataset.theme === "dark" ? "light" : "dark" });
     // An action of the player's on the game: the game the server sends next shows it; a refusal shows on the board.
@@ -322,7 +366,8 @@ export function App({ start }) {
     const mood = moodAt(live.record, sides?.white.who === "ai" ? "white" : sides?.black.who === "ai" ? "black" : ai, at).mood;
     const playerToMove = going && live.position.turn === player;
     const ahead = (side) => side === "white" ? material.balance : -material.balance;
-    const reviewed = judged || at <= inBook ? plies[at - 1] : undefined;
+    // On a variation the AI's badges, notes and drawings say nothing: they are of the game's moves (D-116).
+    const reviewed = onTheLine ? undefined : judged || at <= inBook ? plies[at - 1] : undefined;
     // With the helps on, the coach's judgments of the player's last move, once the AI has answered it, and of one a held note let go only now (D-78, D-88).
     const judgments = going && settings.helps ? judgmentsOf(plies, player, coached ?? noCoach) : [];
     const review = reviewed?.review;
@@ -330,7 +375,7 @@ export function App({ start }) {
     const drawn = hintOpen && hint !== undefined && viewing === undefined && (hint.arrows !== undefined || hint.squares !== undefined) ? hint : review;
     const drawnByCoach = hint !== undefined && drawn === hint;
     // The game over, when this is its last position: the kings' signs, on the board and in the legend.
-    const boardEnd = ended && !aborted && viewing === undefined && pending === undefined ? { how, winner, player, fresh: justEnded } : undefined;
+    const boardEnd = ended && !aborted && viewing === undefined && pending === undefined && !onTheLine ? { how, winner, player, fresh: justEnded } : undefined;
     // The legend has the marks the board shows: none of the helps' or the drawings while the board is bare (D-99).
     const shownBare = bare && helps !== undefined;
     const legendRows = legendOf({
@@ -397,7 +442,7 @@ export function App({ start }) {
     const play = (from, to, piece) => {
         setSelected(undefined);
         setRefusal(undefined);
-        if (piece === undefined && promotes(pieces.get(from), to)) {
+        if (piece === undefined && promotes(piecesOnBoard.get(from), to)) {
             setPromoting({ from, to });
             return;
         }
@@ -416,9 +461,35 @@ export function App({ start }) {
             }
         });
     };
-    // A move the board refuses says why, without the AI (D-18), unless the player turned it off: the piece goes back, the reason over it.
+    // In analysis the player moves from the position shown, White's pieces and Black's, and a variation grows (D-116); the game's own next move only steps
+    // forward through it. The move sounds as the board stands after it.
+    const explore = (from, to, piece) => {
+        setSelected(undefined);
+        setRefusal(undefined);
+        if (piece === undefined && promotes(piecesOf(shown.position.fen).get(from), to)) {
+            setPromoting({ from, to });
+            return;
+        }
+        setPromoting(undefined);
+        const move = shown.legalMoves(from).find((legal) => legal.to === to && legal.promotion === piece);
+        if (move === undefined) {
+            return;
+        }
+        const after = afterMove(line, live.record.moves.map(({ san }) => san), at, move.san);
+        setLine(after.line);
+        setViewing(after.shown >= total ? undefined : after.shown);
+        const played = new Game(shown.record);
+        const moveSound = played.play(move.san).played && sound ? soundOf(played) : undefined;
+        if (moveSound !== undefined) {
+            playSound(moveSound);
+        }
+    };
+    // A move the board refuses says why, without the AI (D-18), unless the player turned it off: the piece goes back, the reason over it. In analysis, from
+    // the position shown.
     const refuse = (from, to) => {
-        const illegal = settings.explain ? live.whyNot(from, to) : undefined;
+        const board = analysing ? shown : live;
+        const pieces = analysing ? piecesOf(shown.position.fen) : piecesOnBoard;
+        const illegal = settings.explain ? board.whyNot(from, to) : undefined;
         if (illegal !== undefined) {
             const letterOn = (square) => pieces.get(square).toUpperCase();
             const sideOn = (square) => pieces.get(square) === letterOn(square) ? "white" : "black";
@@ -453,6 +524,10 @@ export function App({ start }) {
     };
     // In analysis the AI's note goes with the other side's card and the talk with the player's, turned round with the board as in a game (D-101, Zoe).
     const studiedCard = (side, place) => sides === undefined ? null : (_jsx(PlayerCard, { place: place, picture: pictureOf(sides[side], profile, served.profiles, 48, mood), name: sides[side].name, signed: sides[side].who === "ai" && playedBy !== undefined ? signature(playedBy.model, playedBy.effort) : undefined, side: side, taken: material.taken[side], ahead: ahead(side), badges: _jsx(BadgeCounts, { plies: plies, side: side, names: text.badges }), text: text }));
+    // The variation as the column and the steps show it.
+    const lineView = !analysing || line === undefined || lineNumbered === undefined
+        ? undefined
+        : { plies: lineNumbered, at: line.at, cursor: line.cursor, onShow: showLine, onClose: closeLine, onBack: () => goTo(line.at) };
     // A game brought to analyse: the page shows it once the server has it in analysis; a refusal stays in the dialog. One the AI has to go over, with no
     // chat at the table, opens the chat's window: the analyst works with the chat's model (D-109).
     const studyGame = async (studied) => {
@@ -474,7 +549,7 @@ export function App({ start }) {
                         : null, _jsxs("main", { class: `app${flipped ? " flipped" : ""}${folds.talk === "open" ? "" : ` talk-${folds.talk}`}${folds.game === "folded" ? " folded" : ""}`, inert: offline, children: [header, sides === undefined
                             ? (_jsx(TalkFaces, { name: name, aiPicture: thinker(40), you: profile.name, picture: picture, ...(idle ? {} : { ai, player }), aiMoves: going && !playerToMove, playerMoves: playerToMove, unread: unread || asleep, text: text }))
                             : (_jsx(TalkFaces, { name: sides[ai].name, aiPicture: pictureOf(sides[ai], profile, served.profiles, 40, mood), you: sides[player].name, picture: pictureOf(sides[player], profile, served.profiles, 40, mood), ai: ai, player: player, aiMoves: false, playerMoves: false, unread: asleep, text: text })), _jsx(FoldTab, { column: "talk", folded: folds.talk === "folded", label: thinking === undefined || folds.talk !== "folded" ? text.talk : `${text.talk}: ${text.thinking[thinking]}`, unread: (unread || asleep) && folds.talk === "folded", ...(thinking === undefined || folds.talk !== "folded" ? {} : { mark: _jsx(Thought, { thinking: thinking, words: text.thinking }) }), onFold: fold }), _jsx(FoldTab, { column: "game", folded: folds.game === "folded", label: text.game, onFold: fold }), _jsx("span", { class: "visually-hidden", "aria-live": "polite", children: unread ? text.wrote(name) : "" }), _jsx("div", { class: sides === undefined ? "talk" : "talk studied", id: "talk", children: sides !== undefined && studied !== undefined
-                                ? (_jsxs(_Fragment, { children: [_jsxs("section", { class: "ai-block", "aria-label": sides[ai].name, children: [studiedCard(ai, "ai"), asleepNote, _jsx(AiNote, { ...(reviewed === undefined ? {} : { ply: reviewed }), ...(shownOpening === undefined ? {} : { opening: shownOpening }), ...(at === total && closing !== undefined ? { closing } : {}), ...(at === 0 && summary !== undefined ? { summary } : {}), ...(reviewing ? { reviewing: true } : {}), ...(count === undefined ? {} : { count }), ...(completeIt === undefined ? {} : { onComplete: completeIt }), name: analyst, by: annotator, mood: mood, ...(voiced ? { voice: text } : {}), text: text })] }), _jsxs("section", { class: "you-block", "aria-label": sides[player].name, children: [_jsx("div", { class: "chat", children: _jsx(Compose, { lines: analysisTalk(talk, studied.name), newestFirst: false, spent: 0, draft: draft, onDraft: (words) => {
+                                ? (_jsxs(_Fragment, { children: [_jsxs("section", { class: "ai-block", "aria-label": sides[ai].name, children: [studiedCard(ai, "ai"), asleepNote, _jsx(AiNote, { ...(reviewed === undefined ? {} : { ply: reviewed }), ...(shownOpening === undefined || onTheLine ? {} : { opening: shownOpening }), ...(at === total && closing !== undefined && !onTheLine ? { closing } : {}), ...(at === 0 && summary !== undefined && !onTheLine ? { summary } : {}), ...(reviewing ? { reviewing: true } : {}), ...(count === undefined ? {} : { count }), ...(completeIt === undefined ? {} : { onComplete: completeIt }), name: analyst, by: annotator, mood: mood, ...(voiced ? { voice: text } : {}), text: text })] }), _jsxs("section", { class: "you-block", "aria-label": sides[player].name, children: [_jsx("div", { class: "chat", children: _jsx(Compose, { lines: analysisTalk(talk, studied.name), newestFirst: false, spent: 0, draft: draft, onDraft: (words) => {
                                                             setDraft(words);
                                                             setUnsent(undefined);
                                                         }, onSend: () => sendWords({ game: studied.name, at }), canMove: false, name: name, problem: unsent, about: { ...(at === 0 ? {} : { ply: plies[at - 1] }), onShow: goTo }, ...(chatName === undefined ? {} : { to: chatName }), text: text }) }), studiedCard(player, "you")] })] }))
@@ -485,11 +560,18 @@ export function App({ start }) {
                                                         setUnsent(undefined);
                                                     }, onSend: sendWords, canMove: playerToMove, name: name, problem: unsent, text: text }), _jsx(PlayerCard, { place: "you", picture: picture, name: _jsx(NameButton, { profile: profile, onOpen: () => setDialog("profiles"), text: text }), side: idle ? undefined : player, taken: material.taken[player], ahead: ahead(player), turn: playerToMove, clock: _jsxs(_Fragment, { children: [clockOf(player), startClocks, nextGame] }), text: text })] })] })) }), _jsxs("div", { 
                             // Between games the board goes off (D-77): a game the page saw end once its effects are over, its final position less off than the table set.
-                            class: between && !justEnded ? "board-wrap off" : "board-wrap", onWheel: wheel, 
+                            // A variation rings the board in the accent (D-116).
+                            class: between && !justEnded ? "board-wrap off" : onTheLine ? "board-wrap variation" : "board-wrap", onWheel: wheel, 
                             // A press on the board while the player looks back brings the game as it is: the next one plays.
-                            onPointerDownCapture: viewing === undefined || studied !== undefined ? undefined : (event) => event.button === 0 && goTo(total), children: [_jsx(Board, { fen: shown.position.fen, bottom: flipped ? ai : player, lastMove: shown.lastMove, pointed: pointed, ...(helps === undefined ? {} : { helps }), ...(mapping && helps !== undefined ? { control: helps.strategy.control } : {}), bare: bare && helps !== undefined, ...(review?.badge === undefined ? {} : { badge: { badge: review.badge, name: text.badges[review.badge] } }), ...(drawn === undefined ? {} : { drawn }), nextMove: next, jumped: jumped, check: shown.position.check, end: boardEnd, player: playerToMove && pending === undefined && viewing === undefined ? player : undefined, selected: selected, targets: selected === undefined || viewing !== undefined ? [] : live.legalMoves(selected), dots: settings.dots, names: settings.squareNames, notice: viewing !== undefined ? undefined : refusal ?? (linkIgnored === undefined ? undefined : { text: text.link[linkIgnored] }), promotion: promoting === undefined || viewing !== undefined || !playerToMove ? undefined : { ...promoting, side: player }, onPromote: (piece) => piece === undefined ? setPromoting(undefined) : play(promoting.from, promoting.to, piece), onSelect: select, onMove: play, onRefuse: refuse, text: text }), folds.talk !== "open" && (asleepNote !== null || clockWaits)
+                            onPointerDownCapture: viewing === undefined || studied !== undefined ? undefined : (event) => event.button === 0 && goTo(total), children: [_jsx(Board, { fen: shown.position.fen, bottom: flipped ? ai : player, lastMove: shown.lastMove, pointed: pointed, ...(helps === undefined ? {} : { helps }), ...(mapping && helps !== undefined ? { control: helps.strategy.control } : {}), bare: bare && helps !== undefined, ...(review?.badge === undefined ? {} : { badge: { badge: review.badge, name: text.badges[review.badge] } }), ...(drawn === undefined ? {} : { drawn }), nextMove: next, jumped: jumped, check: shown.position.check, end: boardEnd, player: analysing ? (shown.outcome.over ? undefined : shown.position.turn) : playerToMove && pending === undefined && viewing === undefined ? player : undefined, selected: selected, targets: selected === undefined ? [] : analysing ? shown.legalMoves(selected) : viewing !== undefined ? [] : live.legalMoves(selected), dots: settings.dots, names: settings.squareNames, notice: viewing !== undefined && !analysing ? undefined : refusal ?? (linkIgnored === undefined ? undefined : { text: text.link[linkIgnored] }), promotion: promoting === undefined
+                                        ? undefined
+                                        : analysing
+                                            ? { ...promoting, side: shown.position.turn }
+                                            : viewing !== undefined || !playerToMove
+                                                ? undefined
+                                                : { ...promoting, side: player }, onPromote: (piece) => piece === undefined ? setPromoting(undefined) : (analysing ? explore : play)(promoting.from, promoting.to, piece), onSelect: select, onMove: analysing ? explore : play, onRefuse: refuse, text: text }), folds.talk !== "open" && (asleepNote !== null || clockWaits)
                                     ? (_jsxs("div", { class: "over-board", children: [asleepNote, startClocks] }))
-                                    : null] }), studied === undefined ? null : (_jsxs("div", { class: "board-steps", children: [_jsx(Steps, { shown: at, total: total, onStep: step, text: text }), standings === undefined ? null : _jsx(LeadChart, { plies: plies, standings: standings, shown: at, onShow: goTo, text: text })] })), helps === undefined ? null : (_jsxs("div", { class: "board-map", children: [legendAt(true), _jsx(BareButton, { bare: bare, onBare: setBare, text: text }), _jsx(MapButton, { mapping: mapping, onMap: setMapping, text: text }), hint === undefined || viewing !== undefined ? null : _jsx(HintLine, { hint: hint, open: hintOpen, onOpen: openTheHint, text: text })] })), _jsx(GameColumn, { plies: idle ? [] : plies, result: ended ? result : undefined, how: how, lit: justEnded, started: idle ? undefined : played?.started, move: live.position.moveNumber, toMove: live.position.turn, opening: opening, ...(leftBook === undefined ? {} : { outOfBook: leftBook }), helps: helps === undefined ? undefined : (_jsx(HelpsCard, { helps: helps, judged: judgments, hint: viewing === undefined ? hint : undefined, hintOpen: hintOpen, onHint: openTheHint, onPoint: setPointed, onMap: setMapping, mapping: mapping, onBare: setBare, bare: bare, legend: legend, text: text })), ...(helps === undefined && legendRows.length > 0 ? { legend } : {}), ...(standings === undefined ? {} : { standings }), ...(studied === undefined ? {} : {
+                                    : null] }), studied === undefined ? null : (_jsxs("div", { class: "board-steps", children: [_jsx(Steps, { shown: at, total: total, ...stepsLine(lineView, plies), onStep: step, text: text }), standings === undefined ? null : _jsx(LeadChart, { plies: plies, standings: standings, shown: at, onShow: goTo, text: text })] })), helps === undefined ? null : (_jsxs("div", { class: "board-map", children: [legendAt(true), _jsx(BareButton, { bare: bare, onBare: setBare, text: text }), _jsx(MapButton, { mapping: mapping, onMap: setMapping, text: text }), hint === undefined || viewing !== undefined ? null : _jsx(HintLine, { hint: hint, open: hintOpen, onOpen: openTheHint, text: text })] })), _jsx(GameColumn, { plies: idle ? [] : plies, result: ended ? result : undefined, how: how, lit: justEnded, started: idle ? undefined : played?.started, move: live.position.moveNumber, toMove: live.position.turn, opening: opening, ...(leftBook === undefined ? {} : { outOfBook: leftBook }), helps: helps === undefined ? undefined : (_jsx(HelpsCard, { helps: helps, judged: judgments, hint: viewing === undefined ? hint : undefined, hintOpen: hintOpen, onHint: openTheHint, onPoint: setPointed, onMap: setMapping, mapping: mapping, onBare: setBare, bare: bare, legend: legend, text: text })), ...(helps === undefined && legendRows.length > 0 ? { legend } : {}), ...(standings === undefined ? {} : { standings }), ...(studied === undefined ? {} : {
                                 analysis: {
                                     by: analyst,
                                     ...(summary === undefined ? {} : { summary }),
@@ -497,7 +579,7 @@ export function App({ start }) {
                                     ...(count === undefined ? {} : { count }),
                                     ...(completeIt === undefined ? {} : { onComplete: completeIt }),
                                 },
-                            }), shownPlies: at, onShow: goTo, onStep: step, ...(studied === undefined ? {} : { onDownload: () => download(studied.pgn, pgnName(live.record.tags, "analysis")) }), ...(total === 0 ? {} : { onSaveMoves: () => download(writePgn(movesOnly(live.record)), pgnName(live.record.tags)) }), ...(between && game !== null && replayed.record.moves.length > 0 ? { onAnalyse: () => void studyGame({ last: true }) } : {}), text: text }), _jsx(PageFoot, { version: served.version, text: text })] })] }) }));
+                            }), shownPlies: at, ...(lineView === undefined ? {} : { line: lineView }), onShow: goTo, onStep: step, ...(studied === undefined ? {} : { onDownload: () => download(studied.pgn, pgnName(live.record.tags, "analysis")) }), ...(total === 0 ? {} : { onSaveMoves: () => download(writePgn(movesOnly(live.record)), pgnName(live.record.tags)) }), ...(between && game !== null && replayed.record.moves.length > 0 ? { onAnalyse: () => void studyGame({ last: true }) } : {}), text: text }), _jsx(PageFoot, { version: served.version, text: text })] })] }) }));
 }
 /** The picture of a player of the game in analysis: the player's own, the AI's Torretta with its mood, another profile's, or the plain face of someone else. */
 function pictureOf({ who, profile: other }, profile, profiles, size, mood) {
@@ -580,6 +662,11 @@ function withMove(game, move) {
     const copy = new Game(game.record);
     return copy.play(move).played ? copy : game;
 }
+/** Where a variation that leaves the game after `at` moves starts its numbers: after the game's move there, or from the game's first position. */
+function lineStartOf(plies, at, first) {
+    const fork = plies[at - 1];
+    return fork === undefined ? first : fork.side === "white" ? { moveNumber: fork.number, turn: "black" } : { moveNumber: fork.number + 1, turn: "white" };
+}
 /** Whether a pawn's move takes it to the last rank, where the player chooses what it becomes. */
 function promotes(piece, to) {
     return (piece === "P" && to.endsWith("8")) || (piece === "p" && to.endsWith("1"));

package/dist/page/app/keys.js

@@ -1,5 +1,5 @@
 // The page's keys and wheel: [ and ] fold the side columns, M holds the helps' map (D-78), ? opens the legend (D-99), the arrows, Home and End step
-// through the moves and f and x turn the board, and the wheel over the board steps too.
+// through the moves and f and x turn the board, Esc closes a variation, and the wheel over the board steps too.
 import { useEffect, useRef } from "preact/hooks";
 import { flipKeys, stepKeys } from "../game/browse.js";
 import { foldKeys, gameUnderBoard, oneColumn } from "../layout/folds.js";
@@ -87,6 +87,21 @@ export function useBrowseKeys(step, flip) {
         return () => window.removeEventListener("keydown", press);
     });
 }
+/** Esc closes what `close` closes, a variation in analysis (D-116), when nothing else on the page takes it: none while it is undefined. */
+export function useEscapeKey(close) {
+    useEffect(() => {
+        if (close === undefined) {
+            return;
+        }
+        const press = (event) => {
+            if (event.key === "Escape" && forThePage(event)) {
+                close();
+            }
+        };
+        window.addEventListener("keydown", press);
+        return () => window.removeEventListener("keydown", press);
+    });
+}
 /** The mouse wheel over the board steps through the moves, as on Lichess: down forward, a step a notch, however finely a touchpad turns it. */
 export function useWheelSteps(step) {
     const turned = useRef(0);

package/dist/page/app/title.js

@@ -1,10 +1,13 @@
 // The tab's title names the game and the move shown, Stefano – Claude, 16. ♞f3, so that the player's bookmarks and tabs tell its games apart.
 import { useEffect } from "preact/hooks";
 import { figurinesOf } from "../../core/index.js";
-/** The title of a game: its players by their first names, White first, so that the move fits in a tab (Zoe), and the move shown with its number, none before the first. */
-export function tabTitle(white, black, shown) {
+/**
+ * The title of a game: its players by their first names, White first, so that the move fits in a tab (Zoe), and the move shown with its number, none before
+ * the first; a move of a variation in analysis after its fork, ⑂ (D-116).
+ */
+export function tabTitle(white, black, shown, line = false) {
     const players = `${firstName(white)} – ${firstName(black)}`;
-    return shown === undefined ? players : `${players}, ${shown.number}${shown.side === "white" ? "." : "..."} ${figurinesOf(shown.san)}`;
+    return shown === undefined ? players : `${players}, ${line ? "⑂ " : ""}${shown.number}${shown.side === "white" ? "." : "..."} ${figurinesOf(shown.san)}`;
 }
 /** Keeps the tab's title, Chesspal's name while no game shows. */
 export function useTabTitle(title) {

package/dist/page/board/board.css

@@ -960,3 +960,9 @@
         transition: opacity 400ms ease, --kept 400ms ease;
     }
 }
+
+/* A variation in analysis rings the board in the accent, just outside its edge, on the page, where every skin leaves it in sight: nothing else changes (D-116) */
+.board-wrap.variation > .board {
+    outline: 3px solid var(--accent);
+    outline-offset: 2px;
+}

package/dist/page/game/column.js

@@ -4,18 +4,18 @@ import { LeadBar, LeadChart } from "../lead/lead.js";
 import { standingAt } from "../lead/view.js";
 import { Piece } from "../pieces/pieces.js";
 import { FoldButton, useCardFold } from "./card-fold.js";
-import { MoveList, Steps } from "./move-list.js";
+import { MoveList, Steps, stepsLine } from "./move-list.js";
 import { ResultTile } from "./result-tile.js";
 import { ReviewProgress } from "./review-progress.js";
 /**
  * The column, which the player folds with its tab; under the board, where three columns would leave the board small, always open. A game in analysis
  * (D-69) says above the moves that the AI is going over it, until its word on the whole game comes, which the talk shows.
  */
-export function GameColumn({ plies, result, how, lit, started, move, toMove, opening, outOfBook, helps, legend, standings, analysis, shownPlies, onShow, onStep, onDownload, onSaveMoves, onAnalyse, text }) {
+export function GameColumn({ plies, result, how, lit, started, move, toMove, opening, outOfBook, helps, legend, standings, analysis, shownPlies, line, onShow, onStep, onDownload, onSaveMoves, onAnalyse, text }) {
     const bar = standings === undefined ? undefined : _jsx(LeadBar, { standing: standingAt(standings, shownPlies), shown: shownPlies, text: text });
     return (_jsx("aside", { class: "side", id: "game", "aria-label": text.game, children: started === undefined && analysis === undefined
             ? (_jsxs(_Fragment, { children: [_jsx("p", { class: "card empty", children: text.noGame }), onAnalyse === undefined ? null : _jsx(AnalyseButton, { label: text.study.analyseLast, onAnalyse: onAnalyse })] }))
-            : (_jsxs(_Fragment, { children: [_jsxs("div", { class: "side-cards", children: [_jsx(GameCard, { plies: plies, result: result, how: how, lit: lit, started: started, move: move, toMove: toMove, bar: bar, text: text }), analysis?.reviewing !== true ? null : (_jsxs("div", { class: "card review waiting", children: [_jsx("p", { role: "status", children: text.reviewing(analysis.by) }), analysis.count === undefined ? null : _jsx(ReviewProgress, { count: analysis.count, label: text.reviewing(analysis.by) })] })), analysis?.onComplete === undefined ? null : (_jsxs("div", { class: "card review incomplete", children: [_jsxs("p", { children: [_jsx("span", { role: "status", children: text.incomplete }), _jsx("button", { type: "button", title: text.completeHint, "aria-label": text.completeHint, onClick: analysis.onComplete, children: text.complete })] }), analysis.count === undefined || analysis.count.done === 0 ? null : _jsx(ReviewProgress, { count: analysis.count, label: text.incomplete, stopped: true })] })), analysis === undefined || standings === undefined ? null : _jsx(LeadChart, { plies: plies, standings: standings, shown: shownPlies, onShow: onShow, text: text }), opening === undefined ? null : _jsx(OpeningCard, { opening: opening, ...(outOfBook === undefined ? {} : { outOfBook }), text: text }), helps] }), _jsxs("div", { class: "side-foot", children: [result !== undefined && plies.length === 0 ? null : _jsx(MoveList, { plies: plies, result: result, shown: shownPlies, onShow: onShow, tools: legend, text: text }), onDownload === undefined && onSaveMoves === undefined ? null : (_jsxs("div", { class: "card analysis-actions", children: [onDownload === undefined ? null : _jsx(SaveButton, { label: text.study.download, hint: text.study.downloadHint, onSave: onDownload }), onSaveMoves === undefined ? null : _jsx(SaveButton, { label: text.saveMoves, hint: text.saveMovesHint, onSave: onSaveMoves })] })), onAnalyse === undefined ? null : _jsx(AnalyseButton, { label: text.study.analyseIt, onAnalyse: onAnalyse }), _jsx(Steps, { shown: shownPlies, total: plies.length, onStep: onStep, text: text })] })] })) }));
+            : (_jsxs(_Fragment, { children: [_jsxs("div", { class: "side-cards", children: [_jsx(GameCard, { plies: plies, result: result, how: how, lit: lit, started: started, move: move, toMove: toMove, bar: bar, text: text }), analysis?.reviewing !== true ? null : (_jsxs("div", { class: "card review waiting", children: [_jsx("p", { role: "status", children: text.reviewing(analysis.by) }), analysis.count === undefined ? null : _jsx(ReviewProgress, { count: analysis.count, label: text.reviewing(analysis.by) })] })), analysis?.onComplete === undefined ? null : (_jsxs("div", { class: "card review incomplete", children: [_jsxs("p", { children: [_jsx("span", { role: "status", children: text.incomplete }), _jsx("button", { type: "button", title: text.completeHint, "aria-label": text.completeHint, onClick: analysis.onComplete, children: text.complete })] }), analysis.count === undefined || analysis.count.done === 0 ? null : _jsx(ReviewProgress, { count: analysis.count, label: text.incomplete, stopped: true })] })), analysis === undefined || standings === undefined ? null : _jsx(LeadChart, { plies: plies, standings: standings, shown: shownPlies, onShow: onShow, text: text }), opening === undefined ? null : _jsx(OpeningCard, { opening: opening, ...(outOfBook === undefined ? {} : { outOfBook }), text: text }), helps] }), _jsxs("div", { class: "side-foot", children: [result !== undefined && plies.length === 0 ? null : _jsx(MoveList, { plies: plies, result: result, shown: shownPlies, ...(line === undefined ? {} : { line }), onShow: onShow, tools: legend, text: text }), onDownload === undefined && onSaveMoves === undefined ? null : (_jsxs("div", { class: "card analysis-actions", children: [onDownload === undefined ? null : _jsx(SaveButton, { label: text.study.download, hint: text.study.downloadHint, onSave: onDownload }), onSaveMoves === undefined ? null : _jsx(SaveButton, { label: text.saveMoves, hint: text.saveMovesHint, onSave: onSaveMoves })] })), onAnalyse === undefined ? null : _jsx(AnalyseButton, { label: text.study.analyseIt, onAnalyse: onAnalyse }), _jsx(Steps, { shown: shownPlies, total: plies.length, ...stepsLine(line, plies), onStep: onStep, text: text })] })] })) }));
 }
 /** A button that saves the game as a file in the player's downloads, its tooltip saying what the file holds. */
 function SaveButton({ label, hint, onSave }) {

package/dist/page/game/game.css

@@ -504,7 +504,7 @@
     font-weight: 600;
 }
 
-.moves li:nth-child(even) {
+.moves li:nth-child(even of :not(.line)) {
     background: var(--page);
 }
 
@@ -555,6 +555,97 @@
     box-shadow: 0 0 0 1.5px var(--card);
 }
 
+/* A variation in analysis (D-116): one row under the move it leaves from, indented, an accent edge on its left, its moves wrapping; the move it leaves
+   from underlined in the accent while the board shows the line */
+.moves li.line {
+    display: flex;
+    align-items: flex-start;
+    gap: 2px;
+    margin: 2px 0 2px 24px;
+    padding: 2px 2px 2px 8px;
+    border-left: 3px solid var(--accent);
+    border-radius: 0 6px 6px 0;
+    background: color-mix(in oklab, var(--accent) 8%, var(--card));
+    font-size: 13px;
+}
+
+.line-moves {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1px 2px;
+}
+
+.moves .line .ply {
+    margin-left: 0;
+    padding: 1px 4px;
+}
+
+.line-number {
+    color: var(--soft);
+    margin-right: 1px;
+}
+
+.moves .line .current .line-number {
+    color: #4d5866;
+}
+
+.moves .ply.fork {
+    box-shadow: inset 0 -2px 0 var(--accent);
+    border-radius: 5px 5px 0 0;
+}
+
+/* Back on the game the line fades, its moves still a click away */
+.moves li.line.faded {
+    opacity: 0.55;
+}
+
+.moves li.line.faded:hover,
+.moves li.line.faded:focus-within {
+    opacity: 0.85;
+}
+
+/* The cross that closes it, at the row's end; a finger's 32 pixels on a touch screen */
+.close-line {
+    display: grid;
+    place-items: center;
+    width: 24px;
+    height: 24px;
+    flex: none;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: none;
+    color: var(--soft);
+    cursor: pointer;
+}
+
+.close-line:hover {
+    background: color-mix(in oklab, var(--ink) 9%, transparent);
+    color: var(--ink);
+}
+
+.close-line .icon {
+    width: 14px;
+    height: 14px;
+    stroke-width: 2.2;
+}
+
+@media (pointer: coarse) {
+    .close-line {
+        width: 32px;
+        height: 32px;
+        margin-block: -4px;
+    }
+}
+
+@media (max-width: 479px) {
+    .moves li.line {
+        margin-left: 12px;
+        padding-left: 6px;
+    }
+}
+
 /* The buttons that step through the moves, under them as on Lichess and chess.com */
 .steps {
     display: flex;
@@ -591,6 +682,35 @@
     stroke-width: 2;
 }
 
+/* On a variation, the fork with the move it leaves from, in the accent: it takes the board back to the game */
+.steps .fork-back {
+    flex: 1.6;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 3px;
+    padding: 4px 6px;
+    border-color: var(--accent);
+    color: var(--accent);
+    font: inherit;
+    font-size: 13px;
+    white-space: nowrap;
+}
+
+.steps .fork-back:hover {
+    border-color: var(--accent);
+}
+
+.steps .fork-back span {
+    color: var(--ink);
+}
+
+.steps .fork-icon {
+    width: 16px;
+    height: 16px;
+    flex: none;
+}
+
 /* A piece in a move: the set's small one, White's white and Black's black, edged so either shows on either theme */
 .figurine {
     display: inline-block;

package/dist/page/game/move-list.js

@@ -1,22 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+// The moves of the game beside the board, in pairs, with the pieces drawn as figures, the same in every language (D-50); the player looks back through them
+// with a click on one or with the buttons under them. In analysis a variation the player plays is one row under the move it leaves from (D-116).
+import { Fragment } from "preact";
 import { useEffect, useRef } from "preact/hooks";
 import { Figurine } from "../pieces/pieces.js";
 import { BadgeIcon, NoteIcon } from "./badges.js";
 import { FoldButton, useCardFold } from "./card-fold.js";
+import { lineText, moveNumberOf } from "./variation.js";
 /**
  * The moves numbered in pairs, the one the board shows marked (`shown`, how many moves it shows), and the result once the game is over; a click on a move
  * shows it. The list keeps its last move in sight, and the one shown while the player looks back.
  */
-export function MoveList({ plies, result, shown, onShow, tools, text }) {
+export function MoveList({ plies, result, shown, line, onShow, tools, text }) {
     const list = useRef(null);
     const [folded, toggleFold] = useCardFold("moves");
     const rows = rowsOf(plies);
-    const current = plies[shown - 1];
+    const onTheLine = line !== undefined && line.cursor > 0;
+    const current = onTheLine ? undefined : plies[shown - 1];
+    const fork = onTheLine ? plies[line.at - 1] : undefined;
+    // The line goes under the row of the move it leaves from, before the first row when it leaves from the start.
+    const lineAfter = line === undefined ? undefined : line.at === 0 ? -1 : rows.findIndex((row) => row.white === plies[line.at - 1] || row.black === plies[line.at - 1]);
     useEffect(() => {
         list.current?.scrollTo({ top: list.current.scrollHeight });
     }, [plies.length]);
     // Only the list scrolls to the move shown: the page under the board stays where the player has it.
-    useEffect(() => keepInSight(list.current), [shown]);
+    useEffect(() => keepInSight(list.current), [shown, line?.cursor, line?.plies.length]);
     // The cards above it change height with the position, the helps' card above all: the list follows, its move still in sight.
     useEffect(() => {
         const element = list.current;
@@ -27,26 +35,56 @@ export function MoveList({ plies, result, shown, onShow, tools, text }) {
         observer.observe(element);
         return () => observer.disconnect();
     }, []);
-    const move = (ply) => _jsx(Move, { ply: ply, current: ply !== undefined && ply === current, onShow: () => onShow(plies.indexOf(ply) + 1), text: text });
+    const move = (ply) => _jsx(Move, { ply: ply, current: ply !== undefined && ply === current, fork: ply !== undefined && ply === fork, onShow: () => onShow(plies.indexOf(ply) + 1), text: text });
+    const lineRow = line === undefined ? null : _jsx(LineRow, { line: line, text: text });
     // The card's title with its icon, a score sheet, as the other cards of the column, which folds the card to it (Stefano); only the list under it
     // scrolls, and it stays in the page while folded, so that it keeps its move in sight.
-    return (_jsxs("section", { class: `card moves-card${folded ? " folded" : ""}`, "aria-label": text.moves, children: [_jsxs("div", { class: "moves-head", children: [_jsx("h3", { class: "card-title", children: _jsxs(FoldButton, { folded: folded, onFold: toggleFold, text: text, children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M6 3H15L19 7V21H6ZM15 3V7H19M9 11H16M9 14.5H16M9 18H13" }) }), text.moves] }) }), tools] }), _jsxs("div", { ref: list, class: "moves", hidden: folded, children: [_jsx("ol", { children: rows.map(({ number, white, black }) => (_jsxs("li", { children: [_jsxs("span", { class: "number", children: [number, "."] }), move(white), move(black)] }, number))) }), result === undefined ? null : _jsx("p", { class: "result", children: result })] })] }));
+    return (_jsxs("section", { class: `card moves-card${folded ? " folded" : ""}`, "aria-label": text.moves, children: [_jsxs("div", { class: "moves-head", children: [_jsx("h3", { class: "card-title", children: _jsxs(FoldButton, { folded: folded, onFold: toggleFold, text: text, children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M6 3H15L19 7V21H6ZM15 3V7H19M9 11H16M9 14.5H16M9 18H13" }) }), text.moves] }) }), tools] }), _jsxs("div", { ref: list, class: "moves", hidden: folded, children: [_jsxs("ol", { children: [lineAfter === -1 ? lineRow : null, rows.map(({ number, white, black }, index) => (_jsxs(Fragment, { children: [_jsxs("li", { children: [_jsxs("span", { class: "number", children: [number, "."] }), move(white), move(black)] }), index === lineAfter ? lineRow : null] }, number)))] }), result === undefined ? null : _jsx("p", { class: "result", children: result })] })] }));
 }
-/** The buttons that step through the moves: to the start, back, forward, and to the game as it is; each one off where it could not go. */
-export function Steps({ shown, total, onStep, text }) {
+/**
+ * The buttons that step through the moves: to the start, back, forward, and to the game as it is; each one off where it could not go. On a variation,
+ * back and forward step through it, and the fork with the move it leaves from takes the board back to the game.
+ */
+export function Steps({ shown, total, line, fork, onStep, text }) {
+    const onTheLine = line !== undefined && line.cursor > 0;
     const button = (step, path, off) => (_jsx("button", { type: "button", title: text.steps[step], "aria-label": text.steps[step], disabled: off, onClick: () => onStep(step), children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: path }) }) }));
-    return (_jsxs("nav", { class: "steps card", "aria-label": text.moves, children: [button("first", "M7 6V18M17 6L11 12L17 18", shown === 0), button("back", "M14.5 6L8.5 12L14.5 18", shown === 0), button("forward", "M9.5 6L15.5 12L9.5 18", shown === total), button("last", "M17 6V18M7 6L13 12L7 18", shown === total)] }));
+    return (_jsxs("nav", { class: "steps card", "aria-label": text.moves, children: [button("first", "M7 6V18M17 6L11 12L17 18", !onTheLine && shown === 0), button("back", "M14.5 6L8.5 12L14.5 18", !onTheLine && shown === 0), button("forward", "M9.5 6L15.5 12L9.5 18", onTheLine ? line.cursor === line.plies.length : shown === total), button("last", "M17 6V18M7 6L13 12L7 18", !onTheLine && shown === total), onTheLine ? _jsx(ForkButton, { fork: fork, onBack: line.onBack, text: text }) : null] }));
+}
+/** The variation for the steps, with the game's move it leaves from. */
+export function stepsLine(line, plies) {
+    const fork = line === undefined ? undefined : plies[line.at - 1];
+    return line === undefined ? {} : fork === undefined ? { line } : { line, fork };
 }
 /** A move in SAN with each piece's letter drawn as its figure, the same in every language (D-50), and a capture's x in grey, so the squares stand out. */
 export function Figurines({ san, side }) {
     return (_jsx(_Fragment, { children: san.split(/([KQRBNx])/).map((part, index) => index % 2 === 0 ? part : part === "x" ? _jsx("span", { class: "takes", children: "x" }, index) : _jsx(Figurine, { letter: part, side: side }, index)) }));
 }
-function Move({ ply, current, onShow, text }) {
+function Move({ ply, current, fork, onShow, text }) {
     if (ply === undefined) {
         return _jsx("span", { children: "\u2026" });
     }
     // A screen reader reads the move in SAN and the AI's badge by its name; the eye sees each piece's letter as its figure, and the badge's disc (D-69).
-    return (_jsxs("button", { type: "button", class: current ? "ply current" : "ply", "aria-current": current ? "step" : undefined, onClick: onShow, children: [_jsx("span", { class: "visually-hidden", children: ply.review?.badge === undefined ? ply.san : `${ply.san}, ${text.badges[ply.review.badge]}` }), _jsx("span", { "aria-hidden": "true", children: _jsx(Figurines, { san: ply.san, side: ply.side }) }), ply.review?.badge !== undefined ? _jsx(BadgeIcon, { badge: ply.review.badge }) : ply.review?.note !== undefined ? _jsx(NoteIcon, {}) : null] }));
+    return (_jsxs("button", { type: "button", class: current ? "ply current" : fork ? "ply fork" : "ply", "aria-current": current ? "step" : undefined, onClick: onShow, children: [_jsx("span", { class: "visually-hidden", children: ply.review?.badge === undefined ? ply.san : `${ply.san}, ${text.badges[ply.review.badge]}` }), _jsx("span", { "aria-hidden": "true", children: _jsx(Figurines, { san: ply.san, side: ply.side }) }), ply.review?.badge !== undefined ? _jsx(BadgeIcon, { badge: ply.review.badge }) : ply.review?.note !== undefined ? _jsx(NoteIcon, {}) : null] }));
+}
+/**
+ * The variation's row: its moves numbered as a PGN writes them, the one shown in the gold of the moves, and a cross that closes it; faded while the board
+ * shows the game, its moves still a click away.
+ */
+function LineRow({ line, text }) {
+    return (_jsxs("li", { class: line.cursor > 0 ? "line" : "line faded", "aria-label": `${text.variation.line}: ${lineText(line.plies)}`, children: [_jsx("span", { class: "line-moves", children: line.plies.map((ply, index) => {
+                    const current = index + 1 === line.cursor;
+                    const number = moveNumberOf(ply, index === 0);
+                    return (_jsxs("button", { type: "button", class: current ? "ply current" : "ply", "aria-current": current ? "step" : undefined, onClick: () => line.onShow(index + 1), children: [_jsxs("span", { class: "visually-hidden", children: [number, ply.san] }), _jsxs("span", { "aria-hidden": "true", children: [number === "" ? null : _jsx("span", { class: "line-number", children: number.replace("...", "…") }), _jsx(Figurines, { san: ply.san, side: ply.side })] })] }, index));
+                }) }), _jsx("button", { type: "button", class: "close-line", title: text.variation.close, "aria-label": text.variation.close, onClick: line.onClose, children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M7 7L17 17M17 7L7 17" }) }) })] }));
+}
+/** The fork with the game's move the variation leaves from: it takes the board back to the game there. */
+function ForkButton({ fork, onBack, text }) {
+    const move = fork === undefined ? undefined : `${fork.number}${fork.side === "white" ? "." : "..."}${fork.san}`;
+    return (_jsxs("button", { type: "button", class: "fork-back", title: text.variation.back(move), "aria-label": text.variation.back(move), onClick: onBack, children: [_jsx(ForkIcon, {}), fork === undefined ? null : (_jsxs("span", { "aria-hidden": "true", children: [fork.number, fork.side === "white" ? "." : "…", _jsx(Figurines, { san: fork.san, side: fork.side })] }))] }));
+}
+/** The sign of a variation: a line that forks from the game's. */
+export function ForkIcon() {
+    return (_jsx("svg", { class: "icon fork-icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M7 4V20M7 12C7 8 17 9 17 4M17 4L14 6.5M17 4L19.5 7" }) }));
 }
 /** Scrolls the list, and only the list, as little as it takes to show the whole row of its current move, and the result under the last one. */
 function keepInSight(list) {