@connectorvol/chess-widgets 8.0.1 → 9.0.1

package/dist/puzzle-creation/PuzzlePgnBoardTreeEditor.svelte

@@ -1,544 +1,991 @@
 <script lang="ts" module>
-  export type {
-    TPuzzlePgnBoardTreeEditorOutcome,
-    TPuzzlePgnBoardTreeEditorProps,
-  } from "./types.js";
+    export type {
+        TPuzzlePgnBoardTreeEditorOutcome,
+        TPuzzlePgnBoardTreeEditorProps,
+    } from "./types.js";
 </script>
 
 <script lang="ts">
-  import type { IChessBoardActions } from "@connectorvol/chessboard";
-  import type { Square } from "@connectorvol/shared";
-
-  import {
-    CHESSBOARD_THEMES,
-    createBoardApi,
-    Draggable,
-    syncMoveEvaluationNagBadge,
-  } from "@connectorvol/chessboard";
-  import {
-    ChessTree,
-    transformPgnToChessNode,
-  } from "@connectorvol/tree";
-  import { untrack } from "svelte";
-
-  import { INITIAL_FEN } from "@connectorvol/chessops/fen";
-  import { PgnOps } from "@connectorvol/chessops/pgnOps.svelte";
-  import { Color, calculatePly, type Move } from "@connectorvol/shared";
-
-  import { mergePgnWithSetupFen } from "../puzzle/mergePgnWithSetupFen.js";
-  import { createEmptyTreeFromFen } from "../puzzle/puzzleData.js";
-  import { PREVIEW_WRONG_NO_VARIANT_MESSAGE } from "../puzzle/puzzlePreviewConstants.js";
-  import {
-    puzzlePreviewClassifySolverMove,
-    puzzlePreviewDupSubtreeUnderStudentCursor,
-    puzzlePreviewIsSolvedPosition,
-    puzzlePreviewNodeAtPath,
-    puzzlePreviewSideToMoveFromFen,
-    type TSolverMoveOutcome,
-  } from "../puzzle/puzzleStepPreviewSolver.js";
-  import PuzzleBoardTreeViewerPane from "./PuzzleBoardTreeViewerPane.svelte";
-  import { cn } from "../utils.js";
-  import type { TPuzzlePgnBoardTreeEditorProps } from "./types.js";
-
-  let {
-    pgn = "",
-    fen: fenProp,
-    onOutcome,
-    boardTheme,
-    boardAppearanceSettings,
-    class: className,
-    wrongFeedback = $bindable<string | null>(null),
-    solved = $bindable(false),
-  }: TPuzzlePgnBoardTreeEditorProps = $props();
-
-  /** Корень превью: синхронизируется с эффектом смены PGN/FEN. */
-  let layoutInitialFen = $state(INITIAL_FEN);
-
-  /**
-   * Представляет цвет стороны решателя по текущему корню превью (`layoutInitialFen`).
-   */
-  function puzzleSolverColor(): Color {
-    return layoutInitialFen.trim().split(/\s+/)[1] === "b"
-      ? Color.BLACK
-      : Color.WHITE;
-  }
-
-  let cursorPath = $state<number[]>([]);
-
-  let wrongRevealTimer: ReturnType<typeof setTimeout> | null = null;
-  let advanceLineTimer: ReturnType<typeof setTimeout> | null = null;
-
-  let previewChess = new PgnOps(INITIAL_FEN, "chess");
-
-  const studentPreviewTree = new ChessTree(createEmptyTreeFromFen(INITIAL_FEN));
-
-  let solutionPreviewTree = $state<ChessTree | null>(null);
-
-  /**
-   * Представляет синхронизацию доступности перетаскивания с очередью хода и состоянием «решено».
-   */
-  function syncBoardDragFromChessTurn(): void {
-    const solver = puzzleSolverColor();
-    chessboard.draggable = solved
-      ? previewChess.turn() === Color.WHITE
-        ? Draggable.WHITE
-        : Draggable.BLACK
-      : previewChess.turn() === solver
-        ? solver === Color.WHITE
-          ? Draggable.WHITE
-          : Draggable.BLACK
-        : Draggable.NONE;
-  }
-
-  /**
-   * Представляет добавление пути в дерево ученика без очистки уже пройденных линий.
-   */
-  function ensureStudentPreviewTreeHasPath(path: number[]): void {
-    const solution = solutionPreviewTree;
-    if (!solution) return;
-
-    studentPreviewTree.currentNode = studentPreviewTree.rootNode.moves;
-
-    let src = solution.rootNode.moves;
-    for (const idx of path) {
-      const next = src.children[idx];
-      if (!next) break;
-      studentPreviewTree.addNodeToCurrent({
-        id: "",
-        children: [],
-        data: { ...next.data },
-      });
-      src = next;
+    import type { IChessBoardActions } from "@connectorvol/chessboard";
+    import type { Square } from "@connectorvol/shared";
+
+    import {
+        createBoardApi,
+        Draggable,
+        syncMoveEvaluationNagBadge,
+    } from "@connectorvol/chessboard";
+    import { ChessTree, transformPgnToChessNode } from "@connectorvol/tree";
+    import { untrack } from "svelte";
+
+    import { INITIAL_FEN } from "@connectorvol/chessops/fen";
+    import { PgnOps } from "@connectorvol/chessops/pgnOps.svelte";
+    import {
+        Color,
+        calculatePly,
+        type Move,
+        PUZZLE_BRANCH_CORRECT_NAG_ID,
+        PUZZLE_BRANCH_WRONG_NAG_ID,
+        isPuzzleBranchNag,
+    } from "@connectorvol/shared";
+
+    import { mergePgnWithSetupFen } from "../puzzle/mergePgnWithSetupFen.js";
+    import {
+        createEmptyTreeFromFen,
+        createStudentPreviewTreeFromFen,
+    } from "../puzzle/puzzleData.js";
+    import {
+        PREVIEW_WRONG_MOVE_REVEAL_MS,
+        PREVIEW_WRONG_NO_VARIANT_MESSAGE,
+    } from "../puzzle/puzzlePreviewConstants.js";
+    import {
+        normalizePuzzleTreeMainLine,
+        syncPuzzleBranchNagsOnTree,
+    } from "../puzzle/syncPuzzleBranchNags.js";
+    import { applyPlayedSolverNagsAlongPath } from "../puzzle/puzzlePreviewPathNags.js";
+    import {
+        puzzlePreviewAddAdHocWrongMoveToSolutionTree,
+        puzzlePreviewClassifySolverMove,
+        puzzlePreviewDupSubtreeUnderStudentCursor,
+        puzzlePreviewIsSolvedPosition,
+        puzzlePreviewNodeAtPath,
+        puzzlePreviewRemapPathAfterReorder,
+        puzzlePreviewSideToMoveFromFen,
+        type TSolverMoveOutcome,
+    } from "../puzzle/puzzleStepPreviewSolver.js";
+    import PuzzleBoardTreeViewerPane from "./PuzzleBoardTreeViewerPane.svelte";
+    import { cn } from "../utils.js";
+    import type { TPuzzlePgnBoardTreeEditorProps } from "./types.js";
+    import { DEFAULT_BOARD_APPEARANCE_SETTINGS } from "../constants/default-board-appearance-settings.js";
+    import { buildPuzzleWizardBoardSettings } from "./buildPuzzleWizardBoardSettings.js";
+
+    let {
+        pgn = "",
+        fen: fenProp,
+        onOutcome,
+        boardAppearanceSettings = DEFAULT_BOARD_APPEARANCE_SETTINGS,
+        boardSize,
+        onResizeAction,
+        class: className,
+        wrongFeedback = $bindable<string | null>(null),
+        solved = $bindable(false),
+    }: TPuzzlePgnBoardTreeEditorProps = $props();
+
+    /** Корень превью: синхронизируется с эффектом смены PGN/FEN. */
+    let layoutInitialFen = $state(INITIAL_FEN);
+
+    /**
+     * Представляет цвет стороны решателя по текущему корню превью (`layoutInitialFen`).
+     */
+    function puzzleSolverColor(): Color {
+        return layoutInitialFen.trim().split(/\s+/)[1] === "b"
+            ? Color.BLACK
+            : Color.WHITE;
     }
-  }
-
-  /**
-   * Представляет обработку ошибочного хода в превью.
-   */
-  function handleWrongOutcome(outcome: TSolverMoveOutcome): void {
-    const solution = solutionPreviewTree;
-    if (!solution) return;
-
-    if (wrongRevealTimer !== null) {
-      clearTimeout(wrongRevealTimer);
-      wrongRevealTimer = null;
+
+    let cursorPath = $state<number[]>([]);
+
+    const OPPONENT_MOVE_ANIMATION_MS = 300;
+
+    let wrongRevealTimer: ReturnType<typeof setTimeout> | null = null;
+    let advanceLineTimer: ReturnType<typeof setTimeout> | null = null;
+    let opponentAutoTimer: ReturnType<typeof setTimeout> | null = null;
+
+    /** Представляет отложенный откат ошибочного хода на доске после показа NAG ✗. */
+    type TPendingWrongMoveReveal = {
+        /** Возвращает классификацию хода решателя. */
+        outcome: TSolverMoveOutcome;
+        /** Возвращает сыгранный SAN. */
+        playedSan: string;
+        /** Возвращает FEN позиции до ошибочного хода. */
+        revertFen: string;
+        /** Возвращает последний ход до ошибочного хода (для подсветки на доске). */
+        revertLastMove: Move | null;
+    };
+
+    let pendingWrongMoveReveal = $state<TPendingWrongMoveReveal | null>(null);
+
+    /** Представляет последний применённый ход решателя до колбэка `afterPieceMove` (drag-and-drop). */
+    let lastSolverMoveForBoard: Move | null = null;
+
+    let previewChess = new PgnOps(INITIAL_FEN, "chess");
+
+    const studentPreviewTree = new ChessTree(
+        createEmptyTreeFromFen(INITIAL_FEN),
+    );
+
+    let solutionPreviewTree = $state<ChessTree | null>(null);
+
+    /**
+     * Представляет синхронизацию доступности перетаскивания с очередью хода и состоянием «решено».
+     */
+    function syncBoardDragFromChessTurn(): void {
+        if (pendingWrongMoveReveal !== null) {
+            chessboard.draggable = Draggable.NONE;
+            return;
+        }
+
+        const solver = puzzleSolverColor();
+        chessboard.draggable = solved
+            ? previewChess.turn() === Color.WHITE
+                ? Draggable.WHITE
+                : Draggable.BLACK
+            : previewChess.turn() === solver
+              ? solver === Color.WHITE
+                  ? Draggable.WHITE
+                  : Draggable.BLACK
+              : Draggable.NONE;
     }
-    if (advanceLineTimer !== null) {
-      clearTimeout(advanceLineTimer);
-      advanceLineTimer = null;
+
+    /**
+     * Представляет отмену отложенного отката ошибочного хода без записи варианта в дерево.
+     */
+    function dismissPendingWrongMoveReveal(): void {
+        if (wrongRevealTimer !== null) {
+            clearTimeout(wrongRevealTimer);
+            wrongRevealTimer = null;
+        }
+
+        const pending = pendingWrongMoveReveal;
+        if (pending === null) return;
+
+        pendingWrongMoveReveal = null;
+        previewChess.setFen(pending.revertFen);
+        chessboard.fen = pending.revertFen;
+        chessboard.addLastMove(pending.revertLastMove);
+        syncMoveEvaluationNagBadge(chessboard, {
+            nags: undefined,
+            lastMove: pending.revertLastMove,
+        });
+        syncBoardDragFromChessTurn();
     }
 
-    if (outcome.kind === "wrong_marked_variant") {
-      wrongFeedback =
-        "Неверно. Открываю введённый вариант в дереве, ход отменён.";
-      onOutcome?.("failed");
-      ensureStudentPreviewTreeHasPath(cursorPath);
-      puzzlePreviewDupSubtreeUnderStudentCursor(
-        studentPreviewTree,
-        outcome.wrongBranchRoot,
-      );
-      return;
+    /**
+     * Представляет досрочное завершение показа ошибочного хода перед следующим ходом решателя.
+     */
+    function cancelPendingWrongMoveReveal(): void {
+        if (pendingWrongMoveReveal === null) return;
+
+        if (wrongRevealTimer !== null) {
+            clearTimeout(wrongRevealTimer);
+            wrongRevealTimer = null;
+        }
+
+        finishWrongMoveReveal();
     }
 
-    wrongFeedback = PREVIEW_WRONG_NO_VARIANT_MESSAGE;
-    onOutcome?.("failed");
-  }
-
-  /**
-   * Представляет установку позиции и дерева ученика по пути из корня.
-   */
-  function setStateFromPath(path: number[]): void {
-    const solution = solutionPreviewTree;
-    if (!solution) return;
-
-    previewChess.setFen(layoutInitialFen);
-    let node = solution.rootNode.moves;
-    for (const idx of path) {
-      const child = node.children[idx];
-      if (!child) break;
-      previewChess.makeSanMove(child.data.san);
-      node = child;
+    /**
+     * Представляет показ NAG ✗ на доске и отложенный откат ошибочного хода.
+     */
+    function scheduleWrongMoveReveal(wrongMove: Move): void {
+        const pending = pendingWrongMoveReveal;
+        if (pending === null) return;
+
+        syncMoveEvaluationNagBadge(chessboard, {
+            nags: [PUZZLE_BRANCH_WRONG_NAG_ID],
+            lastMove: wrongMove,
+        });
+        syncBoardDragFromChessTurn();
+
+        wrongRevealTimer = setTimeout(() => {
+            wrongRevealTimer = null;
+            finishWrongMoveReveal();
+        }, PREVIEW_WRONG_MOVE_REVEAL_MS);
     }
 
-    cursorPath = path;
-    ensureStudentPreviewTreeHasPath(cursorPath);
-    chessboard.fen = previewChess.fen();
-    syncBoardDragFromChessTurn();
-  }
-
-  /**
-   * Представляет автоматический ход соперника по главному варианту после хода решателя.
-   */
-  function applyOpponentMainLineMove(pathAfterSolver: number[]): number[] {
-    const solution = solutionPreviewTree;
-    if (!solution) return pathAfterSolver;
-
-    if (puzzlePreviewSideToMoveFromFen(previewChess.fen()) === puzzleSolverColor()) {
-      return pathAfterSolver;
+    /**
+     * Представляет завершение показа ошибочного хода: запись варианта в дерево и откат позиции на доске.
+     */
+    function finishWrongMoveReveal(): void {
+        const pending = pendingWrongMoveReveal;
+        pendingWrongMoveReveal = null;
+        if (pending === null) return;
+
+        previewChess.setFen(pending.revertFen);
+        handleWrongOutcome(pending.outcome, pending.playedSan);
+
+        chessboard.fen = pending.revertFen;
+        chessboard.addLastMove(pending.revertLastMove);
+        syncMoveEvaluationNagBadge(chessboard, {
+            nags: undefined,
+            lastMove: pending.revertLastMove,
+        });
+        syncBoardDragFromChessTurn();
     }
 
-    const node = puzzlePreviewNodeAtPath(
-      solution.rootNode.moves,
-      pathAfterSolver,
-    );
-    if (!node || node.children.length === 0) return pathAfterSolver;
-
-    previewChess.makeSanMove(node.children[0]!.data.san);
-    return [...pathAfterSolver, 0];
-  }
-
-  /**
-   * Представляет поиск следующей линии по развилкам соперника (DFS: чем глубже развилка — тем раньше возврат).
-   */
-  function findNextOpponentLine(path: number[]): number[] | null {
-    const solution = solutionPreviewTree;
-    if (!solution) return null;
-
-    const solver = puzzleSolverColor();
-
-    let node = solution.rootNode.moves;
-    for (let depth = 0; depth <= path.length; depth++) {
-      const sideToMove = puzzlePreviewSideToMoveFromFen(node.data.fen);
-      const isOpponentToMove = sideToMove !== solver;
-      const isFork = node.children.length > 1;
-
-      if (isOpponentToMove && isFork && depth < path.length) {
-        const chosenIdx = path[depth]!;
-        if (chosenIdx < node.children.length - 1) {
-          /* кандидат на «следующую линию» с этого форка — ниже второй проход */
+    /**
+     * Представляет синхронизацию NAG ✓ на доске после верного хода решателя.
+     */
+    function syncCorrectSolverMoveNagBadge(move: Move): void {
+        syncMoveEvaluationNagBadge(chessboard, {
+            nags: [PUZZLE_BRANCH_CORRECT_NAG_ID],
+            lastMove: move,
+        });
+    }
+
+    /**
+     * Представляет данные узла для бейджа NAG на доске в режиме свободного анализа (без ✓/✗ задачи).
+     */
+    function nodeDataForAnalysisBoardBadge(data: {
+        nags?: number[];
+        lastMove?: Move | null;
+    }): { nags?: number[]; lastMove?: Move | null } {
+        const nags = data.nags?.filter((n) => !isPuzzleBranchNag(n));
+        return {
+            nags: nags && nags.length > 0 ? nags : undefined,
+            lastMove: data.lastMove ?? null,
+        };
+    }
+
+    /**
+     * Представляет синхронизацию бейджей NAG и маркеров доски с текущим узлом дерева решения (свободный анализ).
+     */
+    function syncAnalysisBoardFromCurrentNode(): void {
+        const tree = solutionPreviewTree;
+        if (!tree) return;
+
+        syncMoveEvaluationNagBadge(
+            chessboard,
+            nodeDataForAnalysisBoardBadge(tree.currentNode.data),
+        );
+        chessboard.setNodeMarkers(
+            tree.currentNode.data.parsedFirstComment?.shapes,
+        );
+        syncBoardDragFromChessTurn();
+    }
+
+    /**
+     * Представляет обработку UI после применения хода решателя на доске.
+     */
+    function afterSolverMoveOnBoard(move: Move): void {
+        if (pendingWrongMoveReveal !== null) {
+            scheduleWrongMoveReveal(move);
+            return;
         }
-      }
 
-      if (depth === path.length) break;
-      const child = node.children[path[depth]!];
-      if (!child) break;
-      node = child;
+        syncCorrectSolverMoveNagBadge(move);
+        syncBoardDragFromChessTurn();
+        if (!solved) {
+            scheduleOpponentAutoResponse();
+        }
     }
 
-    node = solution.rootNode.moves;
-    let bestForkDepth: number | null = null;
-    let bestNextIdx = 0;
-    for (let depth = 0; depth < path.length; depth++) {
-      const sideToMove = puzzlePreviewSideToMoveFromFen(node.data.fen);
-      const isOpponentToMove = sideToMove !== solver;
-      if (isOpponentToMove && node.children.length > 1) {
-        const chosenIdx = path[depth]!;
-        if (chosenIdx < node.children.length - 1) {
-          bestForkDepth = depth;
-          bestNextIdx = chosenIdx + 1;
+    /**
+     * Представляет добавление пути в дерево ученика без очистки уже пройденных линий.
+     */
+    function ensureStudentPreviewTreeHasPath(path: number[]): void {
+        const solution = solutionPreviewTree;
+        if (!solution) return;
+
+        studentPreviewTree.currentNode = studentPreviewTree.rootNode.moves;
+
+        let src = solution.rootNode.moves;
+        const solver = puzzleSolverColor();
+
+        applyPlayedSolverNagsAlongPath(solution, path, solver);
+
+        for (const idx of path) {
+            const next = src.children[idx];
+            if (!next) break;
+
+            const studentNags = next.data.nags
+                ? [...next.data.nags]
+                : undefined;
+
+            const existingChild = studentPreviewTree.currentNode.children.find(
+                (c) => c.data.san === next.data.san,
+            );
+            if (existingChild) {
+                existingChild.data.nags = studentNags;
+            }
+
+            studentPreviewTree.addNodeToCurrent({
+                id: "",
+                children: [],
+                data: {
+                    ...next.data,
+                    nags: studentNags,
+                },
+            });
+            src = next;
         }
-      }
-      const child = node.children[path[depth]!];
-      if (!child) break;
-      node = child;
+
+        const solverColor = puzzleSolverColor();
+        normalizePuzzleTreeMainLine(
+            studentPreviewTree.rootNode.moves,
+            solverColor,
+        );
     }
 
-    if (bestForkDepth === null) return null;
-    return [...path.slice(0, bestForkDepth), bestNextIdx];
-  }
-
-  /**
-   * Представляет переход на следующую линию ответов соперника, если возможно.
-   */
-  function maybeAdvanceToNextOpponentLine(): boolean {
-    const nextBase = findNextOpponentLine(cursorPath);
-    if (!nextBase) return false;
-
-    solved = false;
-    wrongFeedback = null;
-
-    setStateFromPath(nextBase);
-    return true;
-  }
-
-  /**
-   * Представляет попытку применить SAN хода решателя с автоответами соперника.
-   */
-  function tryApplySolverSan(san: string): Move | undefined {
-    const solution = solutionPreviewTree;
-    if (!solution || solved) return undefined;
-
-    const cursorNode = puzzlePreviewNodeAtPath(
-      solution.rootNode.moves,
-      cursorPath,
-    );
-    if (!cursorNode) return undefined;
+    /**
+     * Представляет нормализацию главной линии и NAG только в дереве решения (PGN).
+     */
+    function normalizeSolutionTree(): void {
+        const solution = solutionPreviewTree;
+        if (!solution) return;
 
-    const outcome = puzzlePreviewClassifySolverMove(
-      cursorNode,
-      previewChess.fen(),
-      san,
-      puzzleSolverColor(),
-    );
+        const solverColor = puzzleSolverColor();
+        if (normalizePuzzleTreeMainLine(solution.rootNode.moves, solverColor)) {
+            solution.mutationVersion++;
+        }
+        cursorPath = puzzlePreviewRemapPathAfterReorder(
+            solution.rootNode.moves,
+            cursorPath,
+        );
+    }
 
-    if (outcome.kind !== "correct") {
-      handleWrongOutcome(outcome);
-      return undefined;
+    /**
+     * Представляет синхронизацию дерева ученика с пройденным путём решения (после верного хода).
+     */
+    function syncStudentTreeFromSolutionPath(path: number[]): void {
+        ensureStudentPreviewTreeHasPath(path);
+        studentPreviewTree.forcedNodeId = null;
+        studentPreviewTree.mutationVersion++;
     }
 
-    try {
-      let path = [...cursorPath, outcome.childIndex];
-      const moveRecord = previewChess.makeSanMove(san);
-      path = applyOpponentMainLineMove(path);
-      setStateFromPath(path);
+    /**
+     * Представляет добавление отсутствующего в PGN хода в дерево решения и дерево ученика с NAG ✗.
+     */
+    function addAdHocWrongMoveToTrees(playedSan: string): boolean {
+        const solution = solutionPreviewTree;
+        if (!solution) return false;
+
+        const addedNode = puzzlePreviewAddAdHocWrongMoveToSolutionTree(
+            solution,
+            cursorPath,
+            previewChess.fen(),
+            playedSan,
+        );
+        if (!addedNode) return false;
+
+        normalizeSolutionTree();
+
+        ensureStudentPreviewTreeHasPath(cursorPath);
+        const studentFork = studentPreviewTree.currentNode;
+        studentPreviewTree.addNodeToCurrent({
+            id: "",
+            children: [],
+            data: { ...addedNode.data },
+        });
+        studentPreviewTree.forcedNodeId = studentFork.id;
+        studentPreviewTree.currentNode = studentFork;
+
+        const solverColor = puzzleSolverColor();
+        normalizePuzzleTreeMainLine(
+            studentPreviewTree.rootNode.moves,
+            solverColor,
+        );
+
+        studentPreviewTree.mutationVersion++;
+
+        return true;
+    }
 
-      const leaf = puzzlePreviewNodeAtPath(solution.rootNode.moves, cursorPath);
-      if (leaf && puzzlePreviewIsSolvedPosition(previewChess, leaf, puzzleSolverColor())) {
+    /**
+     * Представляет обработку ошибочного хода в превью.
+     */
+    function handleWrongOutcome(
+        outcome: TSolverMoveOutcome,
+        playedSan: string,
+    ): void {
+        const solution = solutionPreviewTree;
+        if (!solution) return;
+
+        if (wrongRevealTimer !== null) {
+            clearTimeout(wrongRevealTimer);
+            wrongRevealTimer = null;
+        }
         if (advanceLineTimer !== null) {
-          clearTimeout(advanceLineTimer);
-          advanceLineTimer = null;
+            clearTimeout(advanceLineTimer);
+            advanceLineTimer = null;
+        }
+        if (opponentAutoTimer !== null) {
+            clearTimeout(opponentAutoTimer);
+            opponentAutoTimer = null;
+        }
+
+        if (outcome.kind === "wrong_marked_variant") {
+            wrongFeedback =
+                "Неверно. Открываю введённый вариант в дереве, ход отменён.";
+            onOutcome?.("failed");
+            ensureStudentPreviewTreeHasPath(cursorPath);
+            const studentFork = studentPreviewTree.currentNode;
+            puzzlePreviewDupSubtreeUnderStudentCursor(
+                studentPreviewTree,
+                outcome.wrongBranchRoot,
+            );
+            studentPreviewTree.forcedNodeId = studentFork.id;
+            studentPreviewTree.currentNode = studentFork;
+
+            const solverColor = puzzleSolverColor();
+            normalizePuzzleTreeMainLine(
+                studentPreviewTree.rootNode.moves,
+                solverColor,
+            );
+
+            studentPreviewTree.mutationVersion++;
+            normalizeSolutionTree();
+            return;
         }
-        advanceLineTimer = setTimeout(() => {
-          const advanced = maybeAdvanceToNextOpponentLine();
-          if (!advanced) {
-            solved = true;
-            onOutcome?.("solved");
-          }
-          syncBoardDragFromChessTurn();
-          advanceLineTimer = null;
-        }, 250);
-      }
-
-      wrongFeedback = null;
-      syncBoardDragFromChessTurn();
-
-      return moveRecord;
-    } catch {
-      wrongFeedback = "Ход недопустим в этой позиции.";
-      onOutcome?.("failed");
-      return undefined;
+
+        if (outcome.kind === "no_matching_variant") {
+            if (addAdHocWrongMoveToTrees(playedSan)) {
+                wrongFeedback =
+                    "Неверно. Ход добавлен в дерево вариантов, позиция на доске отменена.";
+            } else {
+                wrongFeedback = PREVIEW_WRONG_NO_VARIANT_MESSAGE;
+            }
+            onOutcome?.("failed");
+            return;
+        }
+
+        wrongFeedback = PREVIEW_WRONG_NO_VARIANT_MESSAGE;
+        onOutcome?.("failed");
     }
-  }
-
-  const actions: IChessBoardActions = {
-    game: {
-      possibleMovesOnSquare: (square: Square) => previewChess.moves(square),
-      beforePieceMoveSan(san: string) {
-        if (solved) {
-          try {
-            const move = previewChess.makeSanMove(san);
-            const fen = previewChess.fen();
-            const { halfMoves, fullMoves } = calculatePly(fen);
-            solutionPreviewTree?.addNodeToCurrent({
-              id: "",
-              children: [],
-              data: {
-                fen,
-                san,
-                ply: halfMoves,
-                fullMoves,
-                lastMove: move,
-              },
-            });
-            return {
-              move,
-              fen,
-              turn: previewChess.turn(),
-            };
-          } catch {
-            return undefined;
-          }
+
+    /**
+     * Представляет установку позиции и дерева ученика по пути из корня.
+     */
+    function setStateFromPath(path: number[]): void {
+        dismissPendingWrongMoveReveal();
+
+        const solution = solutionPreviewTree;
+        if (!solution) return;
+
+        previewChess.setFen(layoutInitialFen);
+        let node = solution.rootNode.moves;
+        for (const idx of path) {
+            const child = node.children[idx];
+            if (!child) break;
+            previewChess.makeSanMove(child.data.san);
+            node = child;
+        }
+
+        cursorPath = path;
+        syncStudentTreeFromSolutionPath(path);
+        chessboard.fen = previewChess.fen();
+        const leaf = puzzlePreviewNodeAtPath(solution.rootNode.moves, path);
+        chessboard.addLastMove(leaf?.data.lastMove ?? null);
+        syncMoveEvaluationNagBadge(chessboard, {
+            nags: undefined,
+            lastMove: leaf?.data.lastMove ?? null,
+        });
+        syncBoardDragFromChessTurn();
+    }
+
+    /**
+     * Представляет ответ соперника по главному варианту после хода решателя (без применения к движку).
+     */
+    function getOpponentMainLineReply(
+        pathAfterSolver: number[],
+    ): { san: string; path: number[] } | null {
+        const solution = solutionPreviewTree;
+        if (!solution) return null;
+
+        if (
+            puzzlePreviewSideToMoveFromFen(previewChess.fen()) ===
+            puzzleSolverColor()
+        ) {
+            return null;
         }
-        const move = tryApplySolverSan(san);
-        if (!move) return undefined;
+
+        const node = puzzlePreviewNodeAtPath(
+            solution.rootNode.moves,
+            pathAfterSolver,
+        );
+        if (!node || node.children.length === 0) return null;
+
         return {
-          move,
-          fen: previewChess.fen(),
-          turn: previewChess.turn(),
+            san: node.children[0]!.data.san,
+            path: [...pathAfterSolver, 0],
         };
-      },
-      afterPieceMoveSan: () => {
-        syncBoardDragFromChessTurn();
-      },
-      beforePieceMove: (from, to, promotion) => {
-        if (solved) {
-          try {
-            const san = previewChess.getSanForMove({ from, to, promotion });
-            const move = previewChess.makeSanMove(san);
-            const fen = previewChess.fen();
-            const { halfMoves, fullMoves } = calculatePly(fen);
-            solutionPreviewTree?.addNodeToCurrent({
-              id: "",
-              children: [],
-              data: {
-                fen,
-                san,
-                ply: halfMoves,
-                fullMoves,
-                lastMove: move,
-              },
-            });
-            return fen;
-          } catch {
-            return "";
-          }
+    }
+
+    /**
+     * Представляет проверку конца линии и переход к следующему варианту ответа соперника.
+     */
+    function checkSolvedAndMaybeAdvance(): void {
+        const solution = solutionPreviewTree;
+        if (!solution) return;
+
+        const leaf = puzzlePreviewNodeAtPath(
+            solution.rootNode.moves,
+            cursorPath,
+        );
+        if (
+            leaf &&
+            puzzlePreviewIsSolvedPosition(
+                previewChess,
+                leaf,
+                puzzleSolverColor(),
+            )
+        ) {
+            if (advanceLineTimer !== null) {
+                clearTimeout(advanceLineTimer);
+                advanceLineTimer = null;
+            }
+            advanceLineTimer = setTimeout(() => {
+                const advanced = maybeAdvanceToNextOpponentLine();
+                if (!advanced) {
+                    const target = puzzlePreviewNodeAtPath(
+                        solution.rootNode.moves,
+                        cursorPath,
+                    );
+                    solution.currentNode = target ?? solution.rootNode.moves;
+                    solved = true;
+                    onOutcome?.("solved");
+                    syncBoardFromSolutionTreeNode();
+                }
+                syncBoardDragFromChessTurn();
+                advanceLineTimer = null;
+            }, 250);
+        }
+    }
+
+    /**
+     * Представляет анимированный автоматический ход соперника после хода решателя.
+     */
+    function playOpponentAutoResponse(pathAfterSolver: number[]): void {
+        const reply = getOpponentMainLineReply(pathAfterSolver);
+        if (!reply) {
+            checkSolvedAndMaybeAdvance();
+            return;
+        }
+
+        let opponentMove: Move;
+        try {
+            opponentMove = previewChess.makeSanMove(reply.san);
+        } catch {
+            return;
         }
-        const san = previewChess.getSanForMove({ from, to, promotion });
-        const move = tryApplySolverSan(san);
-        if (!move) return "";
-        return previewChess.fen();
-      },
-      afterPieceMove: () => {
+
+        cursorPath = reply.path;
+        syncStudentTreeFromSolutionPath(cursorPath);
+
+        chessboard.animationTime = OPPONENT_MOVE_ANIMATION_MS;
+        chessboard.fen = previewChess.fen();
+        chessboard.addLastMove(opponentMove);
+        syncMoveEvaluationNagBadge(chessboard, {
+            nags: undefined,
+            lastMove: opponentMove,
+        });
         syncBoardDragFromChessTurn();
-      },
-    },
-  };
-
-  let chessboard = $derived(
-    createBoardApi({
-      fen: INITIAL_FEN,
-      settings: {
-        ...boardAppearanceSettings,
-        boardSize: 38,
-        isResizable: false,
-        orientation: Color.WHITE,
-        draggable: Draggable.WHITE,
-      },
-      actions,
-      theme: boardTheme ?? CHESSBOARD_THEMES.blue,
-    }),
-  );
-
-  const treeForViewer = $derived(
-    solved && solutionPreviewTree ? solutionPreviewTree : studentPreviewTree,
-  );
-
-  /**
-   * Представляет синхронизацию выбранного узла в полном дереве решения с пройденной линией при переходе в режим просмотра (`solved`).
-   * Без этого после switch с `studentPreviewTree` у `solutionPreviewTree` остаётся `currentNode` у корня и подсветка в TreeViewer неверна.
-   */
-  $effect(() => {
-    if (!solved || !solutionPreviewTree) return;
-    const tree = solutionPreviewTree;
-    const path = cursorPath;
-    const target = puzzlePreviewNodeAtPath(tree.rootNode.moves, path);
-    tree.currentNode = target ?? tree.rootNode.moves;
-  });
-
-  $effect(() => {
-    const trimmedPgn = pgn.trim();
-    const rootFen = fenProp?.trim() ? fenProp.trim() : INITIAL_FEN;
-
-    if (!trimmedPgn) {
-      untrack(() => {
-        layoutInitialFen = rootFen;
-        solutionPreviewTree = null;
-        previewChess.setFen(rootFen);
-        studentPreviewTree.replaceRootTree(createEmptyTreeFromFen(rootFen));
-        studentPreviewTree.currentNode = studentPreviewTree.rootNode.moves;
-        chessboard.fen = rootFen;
-        chessboard.orientation =
-          rootFen.trim().split(/\s+/)[1] === "b"
-            ? Color.BLACK
-            : Color.WHITE;
-        cursorPath = [];
+
+        checkSolvedAndMaybeAdvance();
+    }
+
+    /**
+     * Представляет отложенный автоматический ответ соперника после анимации хода решателя.
+     */
+    function scheduleOpponentAutoResponse(): void {
+        if (opponentAutoTimer !== null) {
+            clearTimeout(opponentAutoTimer);
+            opponentAutoTimer = null;
+        }
+
+        const pathAfterSolver = [...cursorPath];
+        const delayMs = chessboard.animationTime || OPPONENT_MOVE_ANIMATION_MS;
+        opponentAutoTimer = setTimeout(() => {
+            playOpponentAutoResponse(pathAfterSolver);
+            opponentAutoTimer = null;
+        }, delayMs);
+    }
+
+    /**
+     * Представляет поиск следующей линии по развилкам соперника (DFS: чем глубже развилка — тем раньше возврат).
+     */
+    function findNextOpponentLine(path: number[]): number[] | null {
+        const solution = solutionPreviewTree;
+        if (!solution) return null;
+
+        const solver = puzzleSolverColor();
+
+        let node = solution.rootNode.moves;
+        for (let depth = 0; depth <= path.length; depth++) {
+            const sideToMove = puzzlePreviewSideToMoveFromFen(node.data.fen);
+            const isOpponentToMove = sideToMove !== solver;
+            const isFork = node.children.length > 1;
+
+            if (isOpponentToMove && isFork && depth < path.length) {
+                const chosenIdx = path[depth]!;
+                if (chosenIdx < node.children.length - 1) {
+                    /* кандидат на «следующую линию» с этого форка — ниже второй проход */
+                }
+            }
+
+            if (depth === path.length) break;
+            const child = node.children[path[depth]!];
+            if (!child) break;
+            node = child;
+        }
+
+        node = solution.rootNode.moves;
+        let bestForkDepth: number | null = null;
+        let bestNextIdx = 0;
+        for (let depth = 0; depth < path.length; depth++) {
+            const sideToMove = puzzlePreviewSideToMoveFromFen(node.data.fen);
+            const isOpponentToMove = sideToMove !== solver;
+            if (isOpponentToMove && node.children.length > 1) {
+                const chosenIdx = path[depth]!;
+                if (chosenIdx < node.children.length - 1) {
+                    bestForkDepth = depth;
+                    bestNextIdx = chosenIdx + 1;
+                }
+            }
+            const child = node.children[path[depth]!];
+            if (!child) break;
+            node = child;
+        }
+
+        if (bestForkDepth === null) return null;
+        return [...path.slice(0, bestForkDepth), bestNextIdx];
+    }
+
+    /**
+     * Представляет переход на следующую линию ответов соперника, если возможно.
+     */
+    function maybeAdvanceToNextOpponentLine(): boolean {
+        const nextBase = findNextOpponentLine(cursorPath);
+        if (!nextBase) return false;
+
         solved = false;
         wrongFeedback = null;
-        syncBoardDragFromChessTurn();
-      });
-      return () => clearTimers();
+
+        setStateFromPath(nextBase);
+        return true;
     }
 
-    untrack(() => {
-      const fullPgn = mergePgnWithSetupFen(trimmedPgn, rootFen);
-      const { rootNode } = transformPgnToChessNode(fullPgn);
-
-      layoutInitialFen = rootFen;
-      solutionPreviewTree = new ChessTree(rootNode);
-
-      cursorPath = [];
-      solved = false;
-      wrongFeedback = null;
-      previewChess.setFen(rootFen);
-      studentPreviewTree.replaceRootTree(createEmptyTreeFromFen(rootFen));
-      studentPreviewTree.currentNode = studentPreviewTree.rootNode.moves;
-      chessboard.fen = rootFen;
-      chessboard.orientation =
-        rootFen.trim().split(/\s+/)[1] === "b" ? Color.BLACK : Color.WHITE;
-      syncBoardDragFromChessTurn();
+    /**
+     * Представляет попытку применить SAN хода решателя с автоответами соперника.
+     */
+    function tryApplySolverSan(san: string): Move | undefined {
+        const solution = solutionPreviewTree;
+        if (!solution || solved) return undefined;
+
+        cancelPendingWrongMoveReveal();
+
+        const cursorNode = puzzlePreviewNodeAtPath(
+            solution.rootNode.moves,
+            cursorPath,
+        );
+        if (!cursorNode) return undefined;
+
+        const outcome = puzzlePreviewClassifySolverMove(
+            cursorNode,
+            previewChess.fen(),
+            san,
+            puzzleSolverColor(),
+        );
+
+        if (outcome.kind !== "correct") {
+            const revertFen = previewChess.fen();
+            const revertLastMove = cursorNode.data.lastMove ?? null;
+            try {
+                const wrongMove = previewChess.makeSanMove(san);
+                pendingWrongMoveReveal = {
+                    outcome,
+                    playedSan: san,
+                    revertFen,
+                    revertLastMove,
+                };
+                lastSolverMoveForBoard = wrongMove;
+                return wrongMove;
+            } catch {
+                pendingWrongMoveReveal = null;
+                wrongFeedback = "Ход недопустим в этой позиции.";
+                onOutcome?.("failed");
+                return undefined;
+            }
+        }
+
+        try {
+            const pathAfterSolver = [...cursorPath, outcome.childIndex];
+            const moveRecord = previewChess.makeSanMove(san);
+            cursorPath = pathAfterSolver;
+            syncStudentTreeFromSolutionPath(pathAfterSolver);
+
+            wrongFeedback = null;
+            lastSolverMoveForBoard = moveRecord;
+            syncBoardDragFromChessTurn();
+
+            return moveRecord;
+        } catch {
+            wrongFeedback = "Ход недопустим в этой позиции.";
+            onOutcome?.("failed");
+            return undefined;
+        }
+    }
+
+    const actions: IChessBoardActions = {
+        game: {
+            possibleMovesOnSquare: (square: Square) =>
+                previewChess.moves(square),
+            beforePieceMoveSan(san: string) {
+                if (solved) {
+                    try {
+                        const move = previewChess.makeSanMove(san);
+                        const fen = previewChess.fen();
+                        const { halfMoves, fullMoves } = calculatePly(fen);
+                        solutionPreviewTree?.addNodeToCurrent({
+                            id: "",
+                            children: [],
+                            data: {
+                                fen,
+                                san,
+                                ply: halfMoves,
+                                fullMoves,
+                                lastMove: move,
+                            },
+                        });
+                        return {
+                            move,
+                            fen,
+                            turn: previewChess.turn(),
+                        };
+                    } catch {
+                        return undefined;
+                    }
+                }
+                const move = tryApplySolverSan(san);
+                if (!move) return undefined;
+                return {
+                    move,
+                    fen: previewChess.fen(),
+                    turn: previewChess.turn(),
+                };
+            },
+            afterPieceMoveSan: (move) => {
+                lastSolverMoveForBoard = null;
+                if (solved) {
+                    syncAnalysisBoardFromCurrentNode();
+                    return;
+                }
+                afterSolverMoveOnBoard(move);
+            },
+            beforePieceMove: (from, to, promotion) => {
+                if (solved) {
+                    try {
+                        const san = previewChess.getSanForMove({
+                            from,
+                            to,
+                            promotion,
+                        });
+                        const move = previewChess.makeSanMove(san);
+                        const fen = previewChess.fen();
+                        const { halfMoves, fullMoves } = calculatePly(fen);
+                        solutionPreviewTree?.addNodeToCurrent({
+                            id: "",
+                            children: [],
+                            data: {
+                                fen,
+                                san,
+                                ply: halfMoves,
+                                fullMoves,
+                                lastMove: move,
+                            },
+                        });
+                        return fen;
+                    } catch {
+                        return "";
+                    }
+                }
+                const san = previewChess.getSanForMove({ from, to, promotion });
+                const move = tryApplySolverSan(san);
+                if (!move) return "";
+                return previewChess.fen();
+            },
+            afterPieceMove: () => {
+                if (solved) {
+                    lastSolverMoveForBoard = null;
+                    syncAnalysisBoardFromCurrentNode();
+                    return;
+                }
+                const move = lastSolverMoveForBoard;
+                lastSolverMoveForBoard = null;
+                if (move) {
+                    afterSolverMoveOnBoard(move);
+                    return;
+                }
+                syncBoardDragFromChessTurn();
+            },
+        },
+    };
+
+    let chessboard = $derived.by(() => {
+        const merged = buildPuzzleWizardBoardSettings(boardAppearanceSettings);
+        return createBoardApi({
+            fen: INITIAL_FEN,
+            playSettings:
+                boardSize !== undefined
+                    ? { ...merged.play, boardSize }
+                    : merged.play,
+            actions: {
+                ...actions,
+                onResizeAction,
+            },
+        });
+    });
+
+    const treeForViewer = $derived(
+        solved && solutionPreviewTree
+            ? solutionPreviewTree
+            : studentPreviewTree,
+    );
+
+    $effect(() => {
+        const trimmedPgn = pgn.trim();
+        const rootFen = fenProp?.trim() ? fenProp.trim() : INITIAL_FEN;
+
+        if (!trimmedPgn) {
+            untrack(() => {
+                layoutInitialFen = rootFen;
+                solutionPreviewTree = null;
+                previewChess.setFen(rootFen);
+                studentPreviewTree.replaceRootTree(
+                    createEmptyTreeFromFen(rootFen),
+                );
+                studentPreviewTree.currentNode =
+                    studentPreviewTree.rootNode.moves;
+                chessboard.fen = rootFen;
+                chessboard.orientation =
+                    rootFen.trim().split(/\s+/)[1] === "b"
+                        ? Color.BLACK
+                        : Color.WHITE;
+                syncMoveEvaluationNagBadge(chessboard, {
+                    nags: undefined,
+                    lastMove: null,
+                });
+                cursorPath = [];
+                solved = false;
+                wrongFeedback = null;
+                syncBoardDragFromChessTurn();
+            });
+            return () => clearTimers();
+        }
+
+        untrack(() => {
+            const fullPgn = mergePgnWithSetupFen(trimmedPgn, rootFen);
+            const { rootNode } = transformPgnToChessNode(fullPgn);
+
+            layoutInitialFen = rootFen;
+            const solutionTree = new ChessTree(rootNode);
+            syncPuzzleBranchNagsOnTree(
+                solutionTree,
+                rootFen.trim().split(/\s+/)[1] === "b"
+                    ? Color.BLACK
+                    : Color.WHITE,
+            );
+            solutionPreviewTree = solutionTree;
+
+            cursorPath = [];
+            solved = false;
+            wrongFeedback = null;
+            previewChess.setFen(rootFen);
+            studentPreviewTree.replaceRootTree(
+                createStudentPreviewTreeFromFen(rootFen, rootNode.comments),
+            );
+            studentPreviewTree.currentNode = studentPreviewTree.rootNode.moves;
+            chessboard.fen = rootFen;
+            chessboard.orientation =
+                rootFen.trim().split(/\s+/)[1] === "b"
+                    ? Color.BLACK
+                    : Color.WHITE;
+            syncMoveEvaluationNagBadge(chessboard, {
+                nags: undefined,
+                lastMove: null,
+            });
+            syncBoardDragFromChessTurn();
+        });
+
+        return () => clearTimers();
     });
 
-    return () => clearTimers();
-  });
+    /**
+     * Представляет сброс отложенных таймеров превью.
+     */
+    function clearTimers(): void {
+        dismissPendingWrongMoveReveal();
+        if (advanceLineTimer !== null) {
+            clearTimeout(advanceLineTimer);
+            advanceLineTimer = null;
+        }
+        if (opponentAutoTimer !== null) {
+            clearTimeout(opponentAutoTimer);
+            opponentAutoTimer = null;
+        }
+    }
 
-  /**
-   * Представляет сброс отложенных таймеров превью.
-   */
-  function clearTimers(): void {
-    if (wrongRevealTimer !== null) {
-      clearTimeout(wrongRevealTimer);
-      wrongRevealTimer = null;
+    /**
+     * Представляет синхронизацию доски с текущим узлом полного дерева решения (после `solved`).
+     */
+    function syncBoardFromSolutionTreeNode(): void {
+        const tree = solutionPreviewTree;
+        if (!tree || !solved) return;
+
+        const node = tree.currentNode;
+
+        previewChess.setFen(node.data.fen);
+        chessboard.fen = previewChess.fen();
+        chessboard.addLastMove(node.data.lastMove ?? null);
+        syncMoveEvaluationNagBadge(
+            chessboard,
+            nodeDataForAnalysisBoardBadge(node.data),
+        );
+        chessboard.setNodeMarkers(node.data.parsedFirstComment?.shapes);
+        syncBoardDragFromChessTurn();
     }
-    if (advanceLineTimer !== null) {
-      clearTimeout(advanceLineTimer);
-      advanceLineTimer = null;
+
+    /**
+     * Представляет установку FEN движка при навигации по дереву (только после полного решения превью).
+     */
+    function treeSetChessFen(fen: string): void {
+        if (!solved) return;
+        previewChess.setFen(fen);
+    }
+
+    /**
+     * Представляет обновление UI доски после смены узла в дереве решения.
+     */
+    function treeSetChessboardFen(_animationTime: number | undefined): void {
+        if (!solved) return;
+        syncBoardFromSolutionTreeNode();
+    }
+
+    /**
+     * Представляет реакцию на выбор узла в дереве (клик по ходу после решения).
+     */
+    function treeOnSelectNode(): void {
+        if (!solved) return;
+        syncBoardFromSolutionTreeNode();
+    }
+
+    /**
+     * Представляет синхронизацию доски после операций с вариантами (в режиме просмотра без правки не используется).
+     */
+    function treeOnDeleteVariant(): void {
+        if (!solved) return;
+        syncBoardFromSolutionTreeNode();
     }
-  }
-
-  /**
-   * Представляет синхронизацию доски с текущим узлом полного дерева решения (после `solved`).
-   */
-  function syncBoardFromSolutionTreeNode(): void {
-    const tree = solutionPreviewTree;
-    if (!tree || !solved) return;
-    previewChess.setFen(tree.currentNode.data.fen);
-    chessboard.fen = previewChess.fen();
-    chessboard.addLastMove(tree.currentNode.data.lastMove ?? null);
-    syncMoveEvaluationNagBadge(chessboard, tree.currentNode.data);
-    chessboard.setNodeMarkers(tree.currentNode.data.parsedFirstComment?.shapes);
-    syncBoardDragFromChessTurn();
-  }
-
-  /**
-   * Представляет установку FEN движка при навигации по дереву (только после полного решения превью).
-   */
-  function treeSetChessFen(fen: string): void {
-    if (!solved) return;
-    previewChess.setFen(fen);
-  }
-
-  /**
-   * Представляет обновление UI доски после смены узла в дереве решения.
-   */
-  function treeSetChessboardFen(_animationTime?: number): void {
-    if (!solved) return;
-    syncBoardFromSolutionTreeNode();
-  }
-
-  /**
-   * Представляет реакцию на выбор узла в дереве (клик по ходу после решения).
-   */
-  function treeOnSelectNode(): void {
-    if (!solved) return;
-    syncBoardFromSolutionTreeNode();
-  }
-
-  /**
-   * Представляет синхронизацию доски после операций с вариантами (в режиме просмотра без правки не используется).
-   */
-  function treeOnDeleteVariant(): void {
-    if (!solved) return;
-    syncBoardFromSolutionTreeNode();
-  }
 </script>
 
-<div class={["flex flex-col gap-2", className]}>
-  <PuzzleBoardTreeViewerPane
-    {chessboard}
-    chessTree={treeForViewer}
-    onSelectNode={treeOnSelectNode}
-    onDeleteVariant={treeOnDeleteVariant}
-    setChessFen={treeSetChessFen}
-    setChessboardFen={treeSetChessboardFen}
-    editMode={false}
-    selectable={solved}
-  >
-    {#snippet belowChessboard()}
-      {#if wrongFeedback && wrongFeedback !== PREVIEW_WRONG_NO_VARIANT_MESSAGE}
-        <p class="text-sm font-medium text-amber-600 dark:text-amber-400">
-          {wrongFeedback}
-        </p>
-      {/if}
-    {/snippet}
-  </PuzzleBoardTreeViewerPane>
+<div class={cn("flex w-full flex-col gap-2", className)}>
+    <PuzzleBoardTreeViewerPane
+        {chessboard}
+        chessTree={treeForViewer}
+        onSelectNode={treeOnSelectNode}
+        onDeleteVariant={treeOnDeleteVariant}
+        setChessFen={treeSetChessFen}
+        setChessboardFen={treeSetChessboardFen}
+        editMode={false}
+        selectable={solved}
+    >
+        {#snippet belowChessboard()}
+            {#if wrongFeedback && wrongFeedback !== PREVIEW_WRONG_NO_VARIANT_MESSAGE}
+                <p
+                    class="text-sm font-medium text-amber-600 dark:text-amber-400"
+                >
+                    {wrongFeedback}
+                </p>
+            {/if}
+        {/snippet}
+    </PuzzleBoardTreeViewerPane>
 </div>