@connectorvol/tree 8.0.1 → 9.0.1

package/dist/(components)/TreeViewer.svelte

@@ -1,967 +1,1017 @@
 <script lang="ts">
-    import type { ClassValue } from "svelte/elements";
-    import { ChessTree } from "../(classes)/chessTree.svelte.js";
-    import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
-
-    import Move from "./Move.svelte";
-    import DrillBreadcrumbs from "./DrillBreadcrumbs.svelte";
-    import DrillVariationList from "./DrillVariationList.svelte";
-    import VariantDropdownNavigator from "./VariantDropdownNavigator.svelte";
-    import MoveComment from "./MoveComment.svelte";
-    import {
-        CHESS_TREE_CONTEXT_KEY,
-        type GameContext,
-    } from "../(utils)/context.js";
-    import {
-        type Comment,
-        makeComment,
-        parseComment,
-    } from "@connectorvol/chessops/pgn";
-    import type { Move as TSharedMove, PieceSet } from "@connectorvol/shared";
-    import {
-        isMoveEvaluationNag,
-        isPuzzleBranchNag,
-        NOVELTY_NAG_ID,
-        nagBadgeBackground,
-        transformNag as transformNagId,
-    } from "@connectorvol/shared";
-    import {
-        isPositionEvaluationNag,
-        nagDescription,
-        NAG_CATALOG_SECTIONS,
-        SELECTABLE_NAG_IDS_ORDERED,
-    } from "../(models)/nagCatalog.js";
-    import { setContext } from "svelte";
-    import type { Attachment } from "svelte/attachments";
-    import {
-        ACTIVE_MOVE_CLASS,
-        scrollToActiveMoveIfNeeded,
-    } from "../(utils)/scrollToActiveMove.js";
-    import {
-        getOrCreateTreeViewerPanelNavigation,
-        type TVariantNavigatorHandle,
-    } from "../(utils)/treeViewerPanelNavigation.svelte.js";
-    import { createPgnFromTree } from "../(utils)/createPgnFromTree.js";
-    import { transformPgnToChessNode } from "../(utils)/transformPgnToChessNode.js";
-    import Redo2Icon from "@lucide/svelte/icons/redo-2";
-    import Undo2Icon from "@lucide/svelte/icons/undo-2";
-
-    /** Представляет снимок PGN и пути варианта к выбранной ноде для undo/redo. */
-    type TPgnHistoryEntry = {
-        /** Возвращает полную строку PGN партии. */
-        pgn: string;
-        /** Возвращает индексы детей от `rootNode.moves` к текущей ноде (пустой — узел начала партии). */
-        variationPath: number[];
-    };
-
-    type TPreviewOnHoverChessNodeSettings = {
-        /** Возвращает функцию для установки FEN превью при наведении (null скрывает); второй аргумент — подсветка последнего хода. */
-        setPreviewFen?: (
-            fen: string | null,
-            lastMove?: TSharedMove | null,
-        ) => void;
-        /** Возвращает задержку (мс) до показа превью-позиции при наведении на ноду, либо `off` для отключения. */
-        delayMs?: number | "off";
+  import type { ClassValue } from "svelte/elements";
+  import { ChessTree } from "../(classes)/chessTree.svelte.js";
+  import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
+
+  import Move from "./Move.svelte";
+  import DrillBreadcrumbs from "./DrillBreadcrumbs.svelte";
+  import DrillVariationList from "./DrillVariationList.svelte";
+  import VariantDropdownNavigator from "./VariantDropdownNavigator.svelte";
+  import MoveComment from "./MoveComment.svelte";
+  import {
+    CHESS_TREE_CONTEXT_KEY,
+    type GameContext,
+  } from "../(utils)/context.js";
+  import {
+    type Comment,
+    makeComment,
+    parseComment,
+  } from "@connectorvol/chessops/pgn";
+  import type { Move as TSharedMove } from "@connectorvol/shared";
+  import {
+    isMoveEvaluationNag,
+    isPuzzleBranchNag,
+    NOVELTY_NAG_ID,
+    PUZZLE_BRANCH_NAG_IDS,
+    nagBadgeBackground,
+    transformNag as transformNagId,
+  } from "@connectorvol/shared";
+  import {
+    isPositionEvaluationNag,
+    nagDescription,
+    NAG_CATALOG_SECTIONS,
+    SELECTABLE_NAG_IDS_ORDERED,
+  } from "../(models)/nagCatalog.js";
+  import { setContext } from "svelte";
+  import type { Attachment } from "svelte/attachments";
+  import {
+    ACTIVE_MOVE_CLASS,
+    scrollToActiveMoveIfNeeded,
+  } from "../(utils)/scrollToActiveMove.js";
+  import {
+    getOrCreateTreeViewerPanelNavigation,
+    type TVariantNavigatorHandle,
+  } from "../(utils)/treeViewerPanelNavigation.svelte.js";
+  import { createPgnFromTree } from "../(utils)/createPgnFromTree.js";
+  import { transformPgnToChessNode } from "../(utils)/transformPgnToChessNode.js";
+  import Redo2Icon from "@lucide/svelte/icons/redo-2";
+  import Undo2Icon from "@lucide/svelte/icons/undo-2";
+  import { cn } from "../utils.js";
+  import type { TTreeViewerTheme } from "../(models)/treeViewerTheme.js";
+  import { TREE_VIEWER_LIGHT_THEME } from "../(constants)/treeViewerThemes.js";
+
+  /** Представляет снимок PGN и пути варианта к выбранной ноде для undo/redo. */
+  type TPgnHistoryEntry = {
+    /** Возвращает полную строку PGN партии. */
+    pgn: string;
+    /** Возвращает индексы детей от `rootNode.moves` к текущей ноде (пустой — узел начала партии). */
+    variationPath: number[];
+  };
+
+  type TPreviewOnHoverChessNodeSettings = {
+    /** Возвращает функцию для установки FEN превью при наведении (null скрывает); второй аргумент — подсветка последнего хода. */
+    setPreviewFen?: (fen: string | null, lastMove?: TSharedMove | null) => void;
+    /** Возвращает задержку (мс) до показа превью-позиции при наведении на ноду, либо `off` для отключения. */
+    delayMs?: number | "off";
+  };
+
+  type TTreeViewerProps = {
+    /** Возвращает дерево партии. */
+    chessTree: ChessTree;
+    /** Возвращает дополнительные классы корневого контейнера. */
+    className?: ClassValue;
+    /** Возвращает колбэк после выбора узла в дереве. */
+    onSelectNode: () => void;
+    /** Возвращает колбэк после удаления варианта. */
+    onDeleteVariant: () => void;
+    /** Возвращает колбэк после выбора узла (после `onSelectNode`), передаётся актуальный `currentNode`. */
+    onChessNodeSelected?: (node: ChessTreeNode) => void;
+    /** Возвращает функцию установки FEN основной партии. */
+    setChessFen: (fen: string) => void;
+    /** Возвращает функцию обновления доски. */
+    setChessboardFen: (animationTime?: number) => void;
+    /** Возвращает true, если клик по ходу переключает текущий узел и доску. По умолчанию true. */
+    selectable?: boolean;
+    /** Возвращает настройки превью-доски при наведении на ноду. */
+    previewOnHoverChessNodeSettings?: TPreviewOnHoverChessNodeSettings;
+    /** Возвращает функцию для установки FEN превью при наведении (null скрывает); второй аргумент — подсветка последнего хода. */
+    setPreviewFen?: (fen: string | null, lastMove?: TSharedMove | null) => void;
+    /** Возвращает задержку (мс) до показа превью-позиции при наведении на ноду, либо `off` для отключения. */
+    previewHoverDelayMs?: number | "off";
+    /** Возвращает true, если под деревом показываются комментарий и выбор NAG для текущей ноды. */
+    editMode?: boolean;
+    /** Возвращает true, если в режиме правки показывать группу NAG «Задача (развилка)». По умолчанию true. */
+    showPuzzleBranchNags?: boolean;
+    /** Возвращает функцию для установки признака несохранённости дерева. */
+    onChangeDirty?: (setIsDirty: (value: boolean) => void) => void;
+    /**
+     * Возвращает настройки оформления: фон, границы и цвет текста.
+     * Обязателен: без явного `theme` стили падают на CSS-дефолт и сетка
+     * выглядит бледной. Если нужно подставить готовую тему — импортируйте
+     * `TREE_VIEWER_LIGHT_THEME` или `TREE_VIEWER_DARK_THEME` из
+     * `@connectorvol/tree`.
+     */
+    theme: TTreeViewerTheme;
+  };
+
+  let {
+    className,
+    onSelectNode,
+    onDeleteVariant,
+    onChessNodeSelected,
+    setChessFen,
+    setChessboardFen,
+    chessTree,
+    selectable = true,
+    previewOnHoverChessNodeSettings,
+    setPreviewFen,
+    previewHoverDelayMs = 700,
+    editMode = false,
+    showPuzzleBranchNags = false,
+    onChangeDirty,
+    theme = TREE_VIEWER_LIGHT_THEME,
+  }: TTreeViewerProps = $props();
+
+  const previewSettings = $derived(previewOnHoverChessNodeSettings);
+  const previewFenSetter = $derived(
+    previewSettings?.setPreviewFen ?? setPreviewFen,
+  );
+  const previewDelayMs = $derived(
+    previewSettings?.delayMs ?? previewHoverDelayMs,
+  );
+
+  setContext<GameContext>(CHESS_TREE_CONTEXT_KEY, {
+    get chessTree() {
+      return chessTree;
+    },
+    get onSelectNode() {
+      return onSelectNode;
+    },
+    get onDeleteVariant() {
+      return onDeleteVariant;
+    },
+    get onChessNodeSelected() {
+      return onChessNodeSelected;
+    },
+    get setChessFen() {
+      return setChessFen;
+    },
+    get setChessboardFen() {
+      return setChessboardFen;
+    },
+    get setPreviewFen() {
+      // ponytail: вынесли стрелочную функцию из getter'а — oxc/rolldown SSR-парсер
+      // не понимает TS-аннотации параметров внутри getter-литералов, а vite-plugin-checker
+      // не умеет их там стрипать. Явная типизация через переменную работает в обеих фазах.
+      const setter = previewFenSetter;
+      const bound: GameContext["setPreviewFen"] = setter
+        ? (fen, lastMove) => setter(fen, lastMove)
+        : undefined;
+      return bound;
+    },
+    get previewHoverDelayMs() {
+      return previewDelayMs;
+    },
+    get selectable() {
+      return selectable;
+    },
+  });
+
+  const panelNav = $derived.by(() => {
+    const nav = getOrCreateTreeViewerPanelNavigation(chessTree);
+    nav.bindCallbacks(setChessFen, setChessboardFen);
+    return nav;
+  });
+
+  let variantDropdownNavigator = $state<TVariantNavigatorHandle | null>(null);
+
+  $effect(() => {
+    const nav = panelNav;
+    nav.setVariantNavigator(variantDropdownNavigator);
+    return () => {
+      nav.setVariantNavigator(null);
     };
+  });
 
-    type TTreeViewerProps = {
-        /** Возвращает дерево партии. */
-        chessTree: ChessTree;
-        /** Возвращает дополнительные классы корневого контейнера. */
-        className?: ClassValue;
-        /** Возвращает колбэк после выбора узла в дереве. */
-        onSelectNode: () => void;
-        /** Возвращает колбэк после удаления варианта. */
-        onDeleteVariant: () => void;
-        /** Возвращает колбэк после выбора узла (после `onSelectNode`), передаётся актуальный `currentNode`. */
-        onChessNodeSelected?: (node: ChessTreeNode) => void;
-        /** Возвращает функцию установки FEN основной партии. */
-        setChessFen: (fen: string) => void;
-        /** Возвращает функцию обновления доски. */
-        setChessboardFen: (animationTime?: number) => void;
-        /** Возвращает набор фигур для иконок SAN. */
-        pieceSet: PieceSet;
-        /** Возвращает true, если клик по ходу переключает текущий узел и доску. По умолчанию true. */
-        selectable?: boolean;
-        /** Возвращает настройки превью-доски при наведении на ноду. */
-        previewOnHoverChessNodeSettings?: TPreviewOnHoverChessNodeSettings;
-        /** Возвращает функцию для установки FEN превью при наведении (null скрывает); второй аргумент — подсветка последнего хода. */
-        setPreviewFen?: (
-            fen: string | null,
-            lastMove?: TSharedMove | null,
-        ) => void;
-        /** Возвращает задержку (мс) до показа превью-позиции при наведении на ноду, либо `off` для отключения. */
-        previewHoverDelayMs?: number | "off";
-        /** Возвращает true, если под деревом показываются комментарий и выбор NAG для текущей ноды. */
-        editMode?: boolean;
-        /** Возвращает true, если в режиме правки показывать группу NAG «Задача (развилка)». По умолчанию true. */
-        showPuzzleBranchNags?: boolean;
-        /** Возвращает функцию для установки признака несохранённости дерева. */
-        onChangeDirty?: (setIsDirty: (value: boolean) => void) => void;
+  $effect(() => {
+    const nav = panelNav;
+    return () => {
+      nav.dispose();
     };
-
-    let {
-        className,
-        onSelectNode,
-        onDeleteVariant,
-        onChessNodeSelected,
-        setChessFen,
-        setChessboardFen,
-        chessTree,
-        pieceSet,
-        selectable = true,
-        previewOnHoverChessNodeSettings,
-        setPreviewFen,
-        previewHoverDelayMs = 700,
-        editMode = false,
-        showPuzzleBranchNags = false,
-        onChangeDirty,
-    }: TTreeViewerProps = $props();
-
-    const previewSettings = $derived(previewOnHoverChessNodeSettings);
-    const previewFenSetter = $derived(
-        previewSettings?.setPreviewFen ?? setPreviewFen,
-    );
-    const previewDelayMs = $derived(
-        previewSettings?.delayMs ?? previewHoverDelayMs,
-    );
-
-    setContext<GameContext>(CHESS_TREE_CONTEXT_KEY, {
-        get chessTree() {
-            return chessTree;
-        },
-        get onSelectNode() {
-            return onSelectNode;
-        },
-        get onDeleteVariant() {
-            return onDeleteVariant;
-        },
-        get onChessNodeSelected() {
-            return onChessNodeSelected;
-        },
-        get setChessFen() {
-            return setChessFen;
-        },
-        get setChessboardFen() {
-            return setChessboardFen;
-        },
-        get setPreviewFen() {
-            const setter = previewFenSetter;
-            return setter
-                ? (fen: string | null, lastMove?: TSharedMove | null) =>
-                      setter(fen, lastMove)
-                : undefined;
-        },
-        get previewHoverDelayMs() {
-            return previewDelayMs;
-        },
-        get selectable() {
-            return selectable;
-        },
-    });
-
-    const panelNav = $derived.by(() => {
-        const nav = getOrCreateTreeViewerPanelNavigation(chessTree);
-        nav.bindCallbacks(setChessFen, setChessboardFen);
-        return nav;
-    });
-
-    let variantDropdownNavigator = $state<TVariantNavigatorHandle | null>(null);
-
-    $effect(() => {
-        const nav = panelNav;
-        nav.setVariantNavigator(variantDropdownNavigator);
-        return () => {
-            nav.setVariantNavigator(null);
-        };
-    });
-
-    $effect(() => {
-        const nav = panelNav;
-        return () => {
-            nav.dispose();
-        };
-    });
-
-    $effect(() => {
-        void chessTree.currentNode.id;
-        scrollToActiveMoveIfNeeded();
-    });
-
-    /** Представляет true, если доступно редактирование комментария и NAG (есть интерактивный выбор ноды). */
-    const canEditAnnotations = $derived(editMode && selectable);
-
-    /** Представляет видимые секции NAG с учётом настройки показа группы «Задача (развилка)». */
-    const visibleNagSections = $derived(
-        NAG_CATALOG_SECTIONS.filter((section) =>
-            showPuzzleBranchNags ? true : section.key !== "puzzle-branch",
-        ),
-    );
-
-    let cachedPgn: string | null = $state(null);
-    let cachedPgnVersion = $state(-1);
-
-    function getSerializedPgn(): string {
-        if (
-            cachedPgnVersion === chessTree.mutationVersion &&
-            cachedPgn !== null
-        ) {
-            return cachedPgn;
-        }
-        cachedPgn = createPgnFromTree(chessTree.rootNode);
-        cachedPgnVersion = chessTree.mutationVersion;
-        return cachedPgn;
+  });
+
+  $effect(() => {
+    void chessTree.currentNode.id;
+    scrollToActiveMoveIfNeeded();
+  });
+
+  /** Представляет true, если доступно редактирование комментария и NAG (есть интерактивный выбор ноды). */
+  const canEditAnnotations = $derived(editMode && selectable);
+
+  /** Представляет родителя текущей ноды (null для корня дерева ходов). */
+  const currentNodeParent = $derived(
+    chessTree.currentNode.id !== chessTree.rootNode.moves.id
+      ? chessTree.getNodeParent(chessTree.currentNode)
+      : null,
+  );
+
+  /** Представляет true, если текущая нода — ход из развилки (у родителя несколько детей). */
+  const isCurrentNodeAtFork = $derived(
+    canEditAnnotations &&
+      showPuzzleBranchNags &&
+      currentNodeParent !== null &&
+      currentNodeParent.children.length > 1,
+  );
+
+  /** Представляет видимые секции NAG (группа «Задача» выводится отдельно рядом с undo/redo). */
+  const visibleNagSections = $derived(
+    NAG_CATALOG_SECTIONS.filter((section) => section.key !== "puzzle-branch"),
+  );
+
+  let cachedPgn: string | null = $state(null);
+  let cachedPgnVersion = $state(-1);
+
+  function getSerializedPgn(): string {
+    if (cachedPgnVersion === chessTree.mutationVersion && cachedPgn !== null) {
+      return cachedPgn;
     }
-
-    /** Представляет признак: текущий PGN отличается от снимка при монтировании дерева в просмотрщике. */
-    let isDirty = $state(false);
-
-    /** Представляет строку PGN при первом отслеживании (эталон «несохранённости»). */
-    let initialPgnSnapshot = $state<string | null>(null);
-
-    /** Представляет предыдущее значение `serializedPgn` для обнаружения мутаций. */
-    let previousSerializedPgn = $state<string | null>(null);
-
-    /** Представляет максимум сохранённых полных PGN в истории undo для режима правки. */
-    const MAX_PGN_EDIT_HISTORY = 20;
-
-    /** Представляет стек предыдущих состояний PGN и выбора ноды (до текущего). */
-    let pastPgnEntries = $state<TPgnHistoryEntry[]>([]);
-
-    /** Представляет стек отменённых состояний для redo. */
-    let redoPgnEntries = $state<TPgnHistoryEntry[]>([]);
-
-    /** Представляет путь варианта, соответствующий последнему зафиксированному `serializedPgn`. */
-    let variationPathSyncedWithPreviousSerializedPgn = $state<number[]>([]);
-
-    /** Представляет true, пока к дереву применяется PGN из истории (без добавления записи в стек). */
-    let suppressPgnHistoryPush = $state(false);
-
-    /** Представляет true, пока фокус в поле комментария (не пишем историю PGN на каждый символ). */
-    let commentTextareaHasFocus = $state(false);
-
-    /** Представляет снимок PGN и выбора до начала текущей сессии правки комментария (фиксируется при фокусе). */
-    let pendingCommentUndoEntry = $state<TPgnHistoryEntry | null>(null);
-
-    /** Представляет проверку: целевая нода лежит в поддереве предка (включая совпадение). */
-    function treeBranchContainsNode(
-        ancestor: ChessTreeNode,
-        target: ChessTreeNode,
-    ): boolean {
-        if (ancestor.id === target.id) return true;
-        return ancestor.children.some((c) => treeBranchContainsNode(c, target));
+    cachedPgn = createPgnFromTree(chessTree.rootNode);
+    cachedPgnVersion = chessTree.mutationVersion;
+    return cachedPgn;
+  }
+
+  /** Представляет признак: текущий PGN отличается от снимка при монтировании дерева в просмотрщике. */
+  let isDirty = $state(false);
+
+  /** Представляет строку PGN при первом отслеживании (эталон «несохранённости»). */
+  let initialPgnSnapshot = $state<string | null>(null);
+
+  /** Представляет предыдущее значение `serializedPgn` для обнаружения мутаций. */
+  let previousSerializedPgn = $state<string | null>(null);
+
+  /** Представляет максимум сохранённых полных PGN в истории undo для режима правки. */
+  const MAX_PGN_EDIT_HISTORY = 20;
+
+  /** Представляет стек предыдущих состояний PGN и выбора ноды (до текущего). */
+  let pastPgnEntries = $state<TPgnHistoryEntry[]>([]);
+
+  /** Представляет стек отменённых состояний для redo. */
+  let redoPgnEntries = $state<TPgnHistoryEntry[]>([]);
+
+  /** Представляет путь варианта, соответствующий последнему зафиксированному `serializedPgn`. */
+  let variationPathSyncedWithPreviousSerializedPgn = $state<number[]>([]);
+
+  /** Представляет true, пока к дереву применяется PGN из истории (без добавления записи в стек). */
+  let suppressPgnHistoryPush = $state(false);
+
+  /** Представляет true, пока фокус в поле комментария (не пишем историю PGN на каждый символ). */
+  let commentTextareaHasFocus = $state(false);
+
+  /** Представляет снимок PGN и выбора до начала текущей сессии правки комментария (фиксируется при фокусе). */
+  let pendingCommentUndoEntry = $state<TPgnHistoryEntry | null>(null);
+
+  /** Представляет проверку: целевая нода лежит в поддереве предка (включая совпадение). */
+  function treeBranchContainsNode(
+    ancestor: ChessTreeNode,
+    target: ChessTreeNode,
+  ): boolean {
+    if (ancestor.id === target.id) return true;
+    return ancestor.children.some((c) => treeBranchContainsNode(c, target));
+  }
+
+  /** Представляет индексы детей от корня ходов до указанной ноды. */
+  function variationPathFromRootToNode(
+    rootMoves: ChessTreeNode,
+    target: ChessTreeNode,
+  ): number[] {
+    const path: number[] = [];
+    let node = rootMoves;
+    while (node.id !== target.id) {
+      const idx = node.children.findIndex((c) =>
+        treeBranchContainsNode(c, target),
+      );
+      if (idx === -1) break;
+      path.push(idx);
+      node = node.children[idx]!;
     }
-
-    /** Представляет индексы детей от корня ходов до указанной ноды. */
-    function variationPathFromRootToNode(
-        rootMoves: ChessTreeNode,
-        target: ChessTreeNode,
-    ): number[] {
-        const path: number[] = [];
-        let node = rootMoves;
-        while (node.id !== target.id) {
-            const idx = node.children.findIndex((c) =>
-                treeBranchContainsNode(c, target),
-            );
-            if (idx === -1) break;
-            path.push(idx);
-            node = node.children[idx]!;
-        }
-        return path;
-    }
-
-    /** Представляет узел по пути варианта от корня ходов (устойчив к новым id после парсинга). */
-    function nodeAtVariationPathFromRoot(
-        rootMoves: ChessTreeNode,
-        variationPath: number[],
-    ): ChessTreeNode {
-        let node = rootMoves;
-        for (const idx of variationPath) {
-            const next = node.children[idx];
-            if (!next) break;
-            node = next;
-        }
-        return node;
-    }
-
-    /** Представляет актуальный путь варианта к текущей ноде в дереве. */
-    function variationPathForChessTreeSelection(tree: ChessTree): number[] {
-        return variationPathFromRootToNode(
-            tree.rootNode.moves,
-            tree.currentNode,
-        );
-    }
-
-    /** Представляет запись истории: текущий PGN и выбор ноды. */
-    function capturePgnHistoryEntry(tree: ChessTree): TPgnHistoryEntry {
-        return {
-            pgn: createPgnFromTree(tree.rootNode),
-            variationPath: variationPathForChessTreeSelection(tree),
-        };
+    return path;
+  }
+
+  /** Представляет узел по пути варианта от корня ходов (устойчив к новым id после парсинга). */
+  function nodeAtVariationPathFromRoot(
+    rootMoves: ChessTreeNode,
+    variationPath: number[],
+  ): ChessTreeNode {
+    let node = rootMoves;
+    for (const idx of variationPath) {
+      const next = node.children[idx];
+      if (!next) break;
+      node = next;
     }
-
-    const setIsDirty = (value: boolean) => {
-        isDirty = value;
+    return node;
+  }
+
+  /** Представляет актуальный путь варианта к текущей ноде в дереве. */
+  function variationPathForChessTreeSelection(tree: ChessTree): number[] {
+    return variationPathFromRootToNode(tree.rootNode.moves, tree.currentNode);
+  }
+
+  /** Представляет запись истории: текущий PGN и выбор ноды. */
+  function capturePgnHistoryEntry(tree: ChessTree): TPgnHistoryEntry {
+    return {
+      pgn: createPgnFromTree(tree.rootNode),
+      variationPath: variationPathForChessTreeSelection(tree),
     };
-
-    $effect(() => {
-        if (!editMode) {
-            pastPgnEntries = [];
-            redoPgnEntries = [];
-            pendingCommentUndoEntry = null;
-            commentTextareaHasFocus = false;
-        }
-    });
-
-    /** Представляет одну запись undo для завершённой сессии правки комментария (до правки vs после). */
-    function flushPendingCommentUndoEntry(): void {
-        if (pendingCommentUndoEntry === null) return;
-        const pending = pendingCommentUndoEntry;
-        pendingCommentUndoEntry = null;
-        const nowPgn = getSerializedPgn();
-        if (pending.pgn === nowPgn) return;
-        const last = pastPgnEntries[pastPgnEntries.length - 1];
-        if (
-            last !== undefined &&
-            last.pgn === pending.pgn &&
-            JSON.stringify(last.variationPath) ===
-                JSON.stringify(pending.variationPath)
-        ) {
-            return;
-        }
-        pastPgnEntries = [...pastPgnEntries, pending].slice(
-            -MAX_PGN_EDIT_HISTORY,
-        );
-        redoPgnEntries = [];
+  }
+
+  const setIsDirty = (value: boolean) => {
+    isDirty = value;
+  };
+
+  $effect(() => {
+    if (!editMode) {
+      pastPgnEntries = [];
+      redoPgnEntries = [];
+      pendingCommentUndoEntry = null;
+      commentTextareaHasFocus = false;
     }
-
-    $effect(() => {
-        void chessTree.mutationVersion;
-        // Пропускаем пересчёт PGN во время набора комментария — дифф будет при blur
-        if (commentTextareaHasFocus) return;
-
-        const next = getSerializedPgn();
-        const pathNow = variationPathForChessTreeSelection(chessTree);
-        const skipPushForInFlightCommentEdit =
-            editMode &&
-            commentTextareaHasFocus &&
-            pendingCommentUndoEntry !== null;
-        if (previousSerializedPgn === null) {
-            initialPgnSnapshot = next;
-            previousSerializedPgn = next;
-            variationPathSyncedWithPreviousSerializedPgn = pathNow;
-            isDirty = false;
-            return;
-        }
-        if (next !== previousSerializedPgn) {
-            if (
-                editMode &&
-                !suppressPgnHistoryPush &&
-                !skipPushForInFlightCommentEdit
-            ) {
-                pastPgnEntries = [
-                    ...pastPgnEntries,
-                    {
-                        pgn: previousSerializedPgn,
-                        variationPath:
-                            variationPathSyncedWithPreviousSerializedPgn,
-                    },
-                ].slice(-MAX_PGN_EDIT_HISTORY);
-                redoPgnEntries = [];
-            }
-            previousSerializedPgn = next;
-            onChangeDirty?.(setIsDirty);
-        }
-        variationPathSyncedWithPreviousSerializedPgn = pathNow;
-        isDirty = next !== initialPgnSnapshot;
-    });
-
-    /** Представляет применение сохранённого PGN и восстановление активной ноды по пути варианта. */
-    function applyPgnHistoryEntry(entry: TPgnHistoryEntry): void {
-        pendingCommentUndoEntry = null;
-        commentTextareaHasFocus = false;
-        suppressPgnHistoryPush = true;
-        try {
-            const { rootNode } = transformPgnToChessNode(entry.pgn);
-            chessTree.replaceRootTree(rootNode);
-            chessTree.mutationVersion++;
-            chessTree.currentNode = nodeAtVariationPathFromRoot(
-                chessTree.rootNode.moves,
-                entry.variationPath,
-            );
-            onSelectNode();
-            onChessNodeSelected?.(chessTree.currentNode);
-            setTimeout(() => scrollToActiveMoveIfNeeded(), 50);
-        } finally {
-            setTimeout(() => {
-                suppressPgnHistoryPush = false;
-            }, 0);
-        }
+  });
+
+  /** Представляет одну запись undo для завершённой сессии правки комментария (до правки vs после). */
+  function flushPendingCommentUndoEntry(): void {
+    if (pendingCommentUndoEntry === null) return;
+    const pending = pendingCommentUndoEntry;
+    pendingCommentUndoEntry = null;
+    const nowPgn = getSerializedPgn();
+    if (pending.pgn === nowPgn) return;
+    const last = pastPgnEntries[pastPgnEntries.length - 1];
+    if (
+      last !== undefined &&
+      last.pgn === pending.pgn &&
+      JSON.stringify(last.variationPath) ===
+        JSON.stringify(pending.variationPath)
+    ) {
+      return;
     }
-
-    /** Представляет откат к предыдущему сохранённому состоянию PGN и выбору ноды. */
-    function undoPgnEdit(): void {
-        if (pastPgnEntries.length === 0) return;
-        const prev = pastPgnEntries[pastPgnEntries.length - 1]!;
-        pastPgnEntries = pastPgnEntries.slice(0, -1);
-        redoPgnEntries = [
-            ...redoPgnEntries,
-            capturePgnHistoryEntry(chessTree),
-        ].slice(-MAX_PGN_EDIT_HISTORY);
-        applyPgnHistoryEntry(prev);
+    pastPgnEntries = [...pastPgnEntries, pending].slice(-MAX_PGN_EDIT_HISTORY);
+    redoPgnEntries = [];
+  }
+
+  $effect(() => {
+    void chessTree.mutationVersion;
+    // Пропускаем пересчёт PGN во время набора комментария — дифф будет при blur
+    if (commentTextareaHasFocus) return;
+
+    const next = getSerializedPgn();
+    const pathNow = variationPathForChessTreeSelection(chessTree);
+    const skipPushForInFlightCommentEdit =
+      editMode && commentTextareaHasFocus && pendingCommentUndoEntry !== null;
+    if (previousSerializedPgn === null) {
+      initialPgnSnapshot = next;
+      previousSerializedPgn = next;
+      variationPathSyncedWithPreviousSerializedPgn = pathNow;
+      isDirty = false;
+      return;
     }
-
-    /** Представляет повтор последнего отменённого состояния PGN и выбор ноды. */
-    function redoPgnEdit(): void {
-        if (redoPgnEntries.length === 0) return;
-        const nextEntry = redoPgnEntries[redoPgnEntries.length - 1]!;
-        redoPgnEntries = redoPgnEntries.slice(0, -1);
+    if (next !== previousSerializedPgn) {
+      if (
+        editMode &&
+        !suppressPgnHistoryPush &&
+        !skipPushForInFlightCommentEdit
+      ) {
         pastPgnEntries = [
-            ...pastPgnEntries,
-            capturePgnHistoryEntry(chessTree),
+          ...pastPgnEntries,
+          {
+            pgn: previousSerializedPgn,
+            variationPath: variationPathSyncedWithPreviousSerializedPgn,
+          },
         ].slice(-MAX_PGN_EDIT_HISTORY);
-        applyPgnHistoryEntry(nextEntry);
+        redoPgnEntries = [];
+      }
+      previousSerializedPgn = next;
+      onChangeDirty?.(setIsDirty);
     }
-
-    /** Представляет доступность undo по истории PGN. */
-    const canUndoPgnEdit = $derived(editMode && pastPgnEntries.length > 0);
-
-    /** Представляет доступность redo по истории PGN. */
-    const canRedoPgnEdit = $derived(editMode && redoPgnEntries.length > 0);
-
-    /** Представляет глобальную обработку Ctrl/Cmd+Z и Shift+Ctrl/Cmd+Z для undo/redo PGN в режиме правки. */
-    function onTreeViewerWindowKeyDown(e: KeyboardEvent): void {
-        if (
-            editMode &&
-            (e.ctrlKey || e.metaKey) &&
-            !e.altKey &&
-            e.key.toLowerCase() === "z"
-        ) {
-            if (e.shiftKey) {
-                if (canRedoPgnEdit) {
-                    e.preventDefault();
-                    redoPgnEdit();
-                    return;
-                }
-            } else if (canUndoPgnEdit) {
-                e.preventDefault();
-                undoPgnEdit();
-                return;
-            }
-        }
-        panelNav.onWindowKeyDown(e);
+    variationPathSyncedWithPreviousSerializedPgn = pathNow;
+    isDirty = next !== initialPgnSnapshot;
+  });
+
+  /** Представляет применение сохранённого PGN и восстановление активной ноды по пути варианта. */
+  function applyPgnHistoryEntry(entry: TPgnHistoryEntry): void {
+    pendingCommentUndoEntry = null;
+    commentTextareaHasFocus = false;
+    suppressPgnHistoryPush = true;
+    try {
+      const { rootNode } = transformPgnToChessNode(entry.pgn);
+      chessTree.replaceRootTree(rootNode);
+      chessTree.mutationVersion++;
+      chessTree.currentNode = nodeAtVariationPathFromRoot(
+        chessTree.rootNode.moves,
+        entry.variationPath,
+      );
+      onSelectNode();
+      onChessNodeSelected?.(chessTree.currentNode);
+      setTimeout(() => scrollToActiveMoveIfNeeded(), 50);
+    } finally {
+      setTimeout(() => {
+        suppressPgnHistoryPush = false;
+      }, 0);
     }
-
-    /** Представляет true, если выбран главный первый ход партии — комментарий партии до дерева ходов (`rootNode.comments`). */
-    const isAtMoveTreeRoot = $derived(
-        chessTree.currentNode.id === chessTree.rootNode.moves.id,
-    );
-
-    const drillForkCrumbs = $derived(chessTree.drillForkBreadcrumbs);
-    let isTreeViewerContainerOverflowing = $state(false);
-
-    /** Представляет черновой редактируемый текст первого PGN-комментария без блоков `[%…]` (часы, eval, стрелки и т.д.). */
-    let commentDraft = $state("");
-    /** Представляет id ноды, для которой загружен `commentDraft` (без затирания во время набора). */
-    let commentDraftSyncedNodeId = $state<string | null>(null);
-    $effect(() => {
-        if (!editMode) return;
-        const id = chessTree.currentNode.id;
-        if (
-            commentDraftSyncedNodeId !== null &&
-            commentDraftSyncedNodeId !== id
-        ) {
-            if (pendingCommentUndoEntry !== null) {
-                flushPendingCommentUndoEntry();
-            }
-            persistCommentDraftForNodeId(commentDraftSyncedNodeId);
+  }
+
+  /** Представляет откат к предыдущему сохранённому состоянию PGN и выбору ноды. */
+  function undoPgnEdit(): void {
+    if (pastPgnEntries.length === 0) return;
+    const prev = pastPgnEntries[pastPgnEntries.length - 1]!;
+    pastPgnEntries = pastPgnEntries.slice(0, -1);
+    redoPgnEntries = [
+      ...redoPgnEntries,
+      capturePgnHistoryEntry(chessTree),
+    ].slice(-MAX_PGN_EDIT_HISTORY);
+    applyPgnHistoryEntry(prev);
+  }
+
+  /** Представляет повтор последнего отменённого состояния PGN и выбор ноды. */
+  function redoPgnEdit(): void {
+    if (redoPgnEntries.length === 0) return;
+    const nextEntry = redoPgnEntries[redoPgnEntries.length - 1]!;
+    redoPgnEntries = redoPgnEntries.slice(0, -1);
+    pastPgnEntries = [
+      ...pastPgnEntries,
+      capturePgnHistoryEntry(chessTree),
+    ].slice(-MAX_PGN_EDIT_HISTORY);
+    applyPgnHistoryEntry(nextEntry);
+  }
+
+  /** Представляет доступность undo по истории PGN. */
+  const canUndoPgnEdit = $derived(editMode && pastPgnEntries.length > 0);
+
+  /** Представляет доступность redo по истории PGN. */
+  const canRedoPgnEdit = $derived(editMode && redoPgnEntries.length > 0);
+
+  /** Представляет глобальную обработку Ctrl/Cmd+Z и Shift+Ctrl/Cmd+Z для undo/redo PGN в режиме правки. */
+  function onTreeViewerWindowKeyDown(e: KeyboardEvent): void {
+    if (
+      editMode &&
+      (e.ctrlKey || e.metaKey) &&
+      !e.altKey &&
+      e.key.toLowerCase() === "z"
+    ) {
+      if (e.shiftKey) {
+        if (canRedoPgnEdit) {
+          e.preventDefault();
+          redoPgnEdit();
+          return;
         }
-        if (commentDraftSyncedNodeId !== id) {
-            commentDraftSyncedNodeId = id;
-            const rawFirst =
-                id === chessTree.rootNode.moves.id
-                    ? chessTree.rootNode.comments?.[0]
-                    : chessTree.currentNode.data.comments?.[0];
-            commentDraft =
-                rawFirst !== undefined ? parseComment(rawFirst).text : "";
-        }
-    });
-
-    /** Представляет объединение строки из textarea с неизменной мета-разметкой первого сегмента (`[%clk]`, `[%eval]`, `[%csl]` …). */
-    function mergeEditableCommentWithPreservedMeta(
-        editableText: string,
-        rawFirstSegment: string | undefined,
-    ): string {
-        const base: Comment =
-            rawFirstSegment !== undefined
-                ? parseComment(rawFirstSegment)
-                : { text: "", shapes: [] };
-        return makeComment({ ...base, text: editableText });
+      } else if (canUndoPgnEdit) {
+        e.preventDefault();
+        undoPgnEdit();
+        return;
+      }
     }
-
-    /** Представляет нормализацию текста комментария для сравнения «набрано vs уже в дереве». */
-    function normalizeCommentTextForCompare(text: string): string {
-        return text.replace(/\r\n/g, "\n");
+    panelNav.onWindowKeyDown(e);
+  }
+
+  /** Представляет true, если выбран главный первый ход партии — комментарий партии до дерева ходов (`rootNode.comments`). */
+  const isAtMoveTreeRoot = $derived(
+    chessTree.currentNode.id === chessTree.rootNode.moves.id,
+  );
+
+  const drillForkCrumbs = $derived(chessTree.drillForkBreadcrumbs);
+  let isTreeViewerContainerOverflowing = $state(false);
+
+  /** Представляет черновой редактируемый текст первого PGN-комментария без блоков `[%…]` (часы, eval, стрелки и т.д.). */
+  let commentDraft = $state("");
+  /** Представляет id ноды, для которой загружен `commentDraft` (без затирания во время набора). */
+  let commentDraftSyncedNodeId = $state<string | null>(null);
+  $effect(() => {
+    if (!editMode) return;
+    const id = chessTree.currentNode.id;
+    if (commentDraftSyncedNodeId !== null && commentDraftSyncedNodeId !== id) {
+      if (pendingCommentUndoEntry !== null) {
+        flushPendingCommentUndoEntry();
+      }
+      persistCommentDraftForNodeId(commentDraftSyncedNodeId);
     }
-
-    /** Представляет проверку совпадения массивов PGN-комментариев поэлементно (включая оба undefined). */
-    function commentStringArraysEqual(
-        nextComments: string[] | undefined,
-        currentComments: string[] | undefined,
-    ): boolean {
-        if (nextComments === undefined && currentComments === undefined) {
-            return true;
-        }
-        if (nextComments === undefined || currentComments === undefined) {
-            return false;
-        }
-        if (nextComments.length !== currentComments.length) return false;
-        for (let i = 0; i < nextComments.length; i++) {
-            if (nextComments[i] !== currentComments[i]) return false;
-        }
-        return true;
+    if (commentDraftSyncedNodeId !== id) {
+      commentDraftSyncedNodeId = id;
+      const rawFirst =
+        id === chessTree.rootNode.moves.id
+          ? chessTree.rootNode.comments?.[0]
+          : chessTree.currentNode.data.comments?.[0];
+      commentDraft = rawFirst !== undefined ? parseComment(rawFirst).text : "";
     }
-
-    /** Представляет запись черновика в первый сегмент для узла с указанным id или вступления у корня партии. */
-    function persistCommentDraftForNodeId(targetNodeId: string): void {
-        if (!canEditAnnotations) return;
-        const isIntroComment = targetNodeId === chessTree.rootNode.moves.id;
-
-        let tail: string[];
-        let rawFirst: string | undefined;
-        let targetMoveNode: ChessTreeNode | null = null;
-
-        if (isIntroComment) {
-            tail = chessTree.rootNode.comments?.slice(1) ?? [];
-            rawFirst = chessTree.rootNode.comments?.[0];
-        } else {
-            const node = chessTree.getNodeById(targetNodeId);
-            if (!node) return;
-            targetMoveNode = node;
-            tail = node.data.comments?.slice(1) ?? [];
-            rawFirst = node.data.comments?.[0];
-        }
-
-        const storedEditable =
-            rawFirst !== undefined ? parseComment(rawFirst).text : "";
-        if (
-            normalizeCommentTextForCompare(storedEditable) ===
-            normalizeCommentTextForCompare(commentDraft)
-        ) {
-            return;
-        }
-
-        const rebuiltFirst = mergeEditableCommentWithPreservedMeta(
-            commentDraft,
-            rawFirst,
-        );
-        const nextComments =
-            rebuiltFirst.trim() === ""
-                ? tail.length === 0
-                    ? undefined
-                    : tail
-                : [rebuiltFirst, ...tail];
-
-        if (isIntroComment) {
-            if (
-                commentStringArraysEqual(
-                    nextComments,
-                    chessTree.rootNode.comments,
-                )
-            ) {
-                return;
-            }
-            chessTree.rootNode.comments = nextComments;
-            chessTree.mutationVersion++;
-            return;
-        }
-
-        if (targetMoveNode === null) return;
-        if (
-            commentStringArraysEqual(nextComments, targetMoveNode.data.comments)
-        ) {
-            return;
-        }
-        targetMoveNode.data.comments = nextComments;
-        chessTree.mutationVersion++;
+  });
+
+  /** Представляет объединение строки из textarea с неизменной мета-разметкой первого сегмента (`[%clk]`, `[%eval]`, `[%csl]` …). */
+  function mergeEditableCommentWithPreservedMeta(
+    editableText: string,
+    rawFirstSegment: string | undefined,
+  ): string {
+    const base: Comment =
+      rawFirstSegment !== undefined
+        ? parseComment(rawFirstSegment)
+        : { text: "", shapes: [] };
+    return makeComment({ ...base, text: editableText });
+  }
+
+  /** Представляет нормализацию текста комментария для сравнения «набрано vs уже в дереве». */
+  function normalizeCommentTextForCompare(text: string): string {
+    return text.replace(/\r\n/g, "\n");
+  }
+
+  /** Представляет проверку совпадения массивов PGN-комментариев поэлементно (включая оба undefined). */
+  function commentStringArraysEqual(
+    nextComments: string[] | undefined,
+    currentComments: string[] | undefined,
+  ): boolean {
+    if (nextComments === undefined && currentComments === undefined) {
+      return true;
     }
-
-    /** Представляет запись черновика в первый сегмент `{...}` текущего узла или вступления партии у корня, сохраняя хвост и `[%…]` метаданные. */
-    function persistCommentDraftToCurrentNode(): void {
-        if (!canEditAnnotations) return;
-        persistCommentDraftForNodeId(chessTree.currentNode.id);
+    if (nextComments === undefined || currentComments === undefined) {
+      return false;
     }
-
-    /** Представляет символы «оценки хода» с взаимоисключением (новинка `NOVELTY_NAG_ID` не входит). */
-    function isExclusiveMoveEvaluationGlyph(nag: number): boolean {
-        return isMoveEvaluationNag(nag) && nag !== NOVELTY_NAG_ID;
+    if (nextComments.length !== currentComments.length) return false;
+    for (let i = 0; i < nextComments.length; i++) {
+      if (nextComments[i] !== currentComments[i]) return false;
     }
-
-    /** Представляет переключение NAG: для !/?/… — не более одного; новинка независима; для позиции — не более одного. */
-    function toggleNagAtCurrentNode(nagId: number): void {
-        if (!canEditAnnotations) return;
-        const node = chessTree.currentNode;
-        let next = [...(node.data.nags ?? [])];
-        const idx = next.indexOf(nagId);
-
-        if (nagId === NOVELTY_NAG_ID) {
-            if (idx !== -1) next.splice(idx, 1);
-            else next.push(nagId);
-        } else if (isExclusiveMoveEvaluationGlyph(nagId)) {
-            if (idx !== -1) next.splice(idx, 1);
-            else {
-                next = next.filter((n) => !isExclusiveMoveEvaluationGlyph(n));
-                next.push(nagId);
-            }
-        } else if (isPositionEvaluationNag(nagId)) {
-            if (idx !== -1) next.splice(idx, 1);
-            else {
-                next = next.filter((n) => !isPositionEvaluationNag(n));
-                next.push(nagId);
-            }
-        } else if (isPuzzleBranchNag(nagId)) {
-            if (idx !== -1) next.splice(idx, 1);
-            else {
-                next = next.filter((n) => !isPuzzleBranchNag(n));
-                next.push(nagId);
-            }
-        } else if (idx !== -1) next.splice(idx, 1);
-        else next.push(nagId);
-
-        node.data.nags = next.length > 0 ? next : undefined;
-        chessTree.mutationVersion++;
-        onSelectNode();
+    return true;
+  }
+
+  /** Представляет запись черновика в первый сегмент для узла с указанным id или вступления у корня партии. */
+  function persistCommentDraftForNodeId(targetNodeId: string): void {
+    if (!canEditAnnotations) return;
+    const isIntroComment = targetNodeId === chessTree.rootNode.moves.id;
+
+    let tail: string[];
+    let rawFirst: string | undefined;
+    let targetMoveNode: ChessTreeNode | null = null;
+
+    if (isIntroComment) {
+      tail = chessTree.rootNode.comments?.slice(1) ?? [];
+      rawFirst = chessTree.rootNode.comments?.[0];
+    } else {
+      const node = chessTree.getNodeById(targetNodeId);
+      if (!node) return;
+      targetMoveNode = node;
+      tail = node.data.comments?.slice(1) ?? [];
+      rawFirst = node.data.comments?.[0];
     }
 
-    /** Представляет обновление признака вертикального переполнения дерева ходов. */
-    function updateTreeViewerContainerOverflow(element: HTMLDivElement): void {
-        isTreeViewerContainerOverflowing =
-            element.scrollHeight > element.clientHeight + 1;
+    const storedEditable =
+      rawFirst !== undefined ? parseComment(rawFirst).text : "";
+    if (
+      normalizeCommentTextForCompare(storedEditable) ===
+      normalizeCommentTextForCompare(commentDraft)
+    ) {
+      return;
     }
 
-    /** Представляет последний узел главной линии от указанного узла. */
-    function getMainLineTailNode(node: ChessTreeNode): ChessTreeNode {
-        let currentNode = node;
-
-        while (currentNode.children[0]) {
-            currentNode = currentNode.children[0];
-        }
-
-        return currentNode;
+    const rebuiltFirst = mergeEditableCommentWithPreservedMeta(
+      commentDraft,
+      rawFirst,
+    );
+    const nextComments =
+      rebuiltFirst.trim() === ""
+        ? tail.length === 0
+          ? undefined
+          : tail
+        : [rebuiltFirst, ...tail];
+
+    if (isIntroComment) {
+      if (commentStringArraysEqual(nextComments, chessTree.rootNode.comments)) {
+        return;
+      }
+      chessTree.rootNode.comments = nextComments;
+      chessTree.mutationVersion++;
+      return;
     }
 
-    const treeViewerOverflowAttachment: Attachment<HTMLDivElement> = (
-        element,
-    ) => {
-        const updateOverflow = () => updateTreeViewerContainerOverflow(element);
-        const contentElement = element.firstElementChild;
-
-        updateOverflow();
+    if (targetMoveNode === null) return;
+    if (commentStringArraysEqual(nextComments, targetMoveNode.data.comments)) {
+      return;
+    }
+    targetMoveNode.data.comments = nextComments;
+    chessTree.mutationVersion++;
+  }
+
+  /** Представляет запись черновика в первый сегмент `{...}` текущего узла или вступления партии у корня, сохраняя хвост и `[%…]` метаданные. */
+  function persistCommentDraftToCurrentNode(): void {
+    if (!canEditAnnotations) return;
+    persistCommentDraftForNodeId(chessTree.currentNode.id);
+  }
+
+  /** Представляет символы «оценки хода» с взаимоисключением (новинка `NOVELTY_NAG_ID` не входит). */
+  function isExclusiveMoveEvaluationGlyph(nag: number): boolean {
+    return isMoveEvaluationNag(nag) && nag !== NOVELTY_NAG_ID;
+  }
+
+  /** Представляет переключение NAG: для !/?/… — не более одного; новинка независима; для позиции — не более одного. */
+  function toggleNagAtCurrentNode(nagId: number): void {
+    if (!canEditAnnotations) return;
+    const node = chessTree.currentNode;
+    let next = [...(node.data.nags ?? [])];
+    const idx = next.indexOf(nagId);
+
+    if (nagId === NOVELTY_NAG_ID) {
+      if (idx !== -1) next.splice(idx, 1);
+      else next.push(nagId);
+    } else if (isExclusiveMoveEvaluationGlyph(nagId)) {
+      if (idx !== -1) next.splice(idx, 1);
+      else {
+        next = next.filter((n) => !isExclusiveMoveEvaluationGlyph(n));
+        next.push(nagId);
+      }
+    } else if (isPositionEvaluationNag(nagId)) {
+      if (idx !== -1) next.splice(idx, 1);
+      else {
+        next = next.filter((n) => !isPositionEvaluationNag(n));
+        next.push(nagId);
+      }
+    } else if (isPuzzleBranchNag(nagId)) {
+      if (idx !== -1) next.splice(idx, 1);
+      else {
+        next = next.filter((n) => !isPuzzleBranchNag(n));
+        next.push(nagId);
+      }
+    } else if (idx !== -1) next.splice(idx, 1);
+    else next.push(nagId);
+
+    node.data.nags = next.length > 0 ? next : undefined;
+    chessTree.mutationVersion++;
+    onSelectNode();
+  }
+
+  /** Представляет обновление признака вертикального переполнения дерева ходов. */
+  function updateTreeViewerContainerOverflow(element: HTMLDivElement): void {
+    isTreeViewerContainerOverflowing =
+      element.scrollHeight > element.clientHeight + 1;
+  }
+
+  /** Представляет последний узел главной линии от указанного узла. */
+  function getMainLineTailNode(node: ChessTreeNode): ChessTreeNode {
+    let currentNode = node;
+
+    while (currentNode.children[0]) {
+      currentNode = currentNode.children[0];
+    }
 
-        const resizeObserver = new ResizeObserver(updateOverflow);
-        const mutationObserver = new MutationObserver(updateOverflow);
+    return currentNode;
+  }
 
-        resizeObserver.observe(element);
-        if (contentElement) {
-            resizeObserver.observe(contentElement);
-        }
-        mutationObserver.observe(element, {
-            childList: true,
-        });
-
-        return () => {
-            resizeObserver.disconnect();
-            mutationObserver.disconnect();
-        };
-    };
+  const treeViewerOverflowAttachment: Attachment<HTMLDivElement> = (
+    element,
+  ) => {
+    const updateOverflow = () => updateTreeViewerContainerOverflow(element);
+    const contentElement = element.firstElementChild;
 
-    /**
-     * Представляет признак: развилка drill-down совпадает с развилкой для акцентных направляющих
-     * при текущем выборе; тогда в боковой панели рисуются акцентные линии.
-     */
-    const isDrillForkGuideForSelection = $derived(
-        chessTree.drillForkParent !== null &&
-            chessTree.drillForkParent.children.length > 1 &&
-            chessTree.currentGuideHighlightForkParent?.id ===
-                chessTree.drillForkParent.id,
-    );
+    updateOverflow();
 
-    /**
-     * Представляет true, когда последняя строка основного варианта заполнена двумя полуходами
-     * и ей нужна общая нижняя граница без риска нарисовать линию под пустой чёрной ячейкой.
-     */
-    const isFullMainLineTailRow = $derived.by(() => {
-        if (
-            chessTree.drillForkParent &&
-            chessTree.drillForkParent.children.length > 0
-        ) {
-            return false;
-        }
+    const resizeObserver = new ResizeObserver(updateOverflow);
+    const mutationObserver = new MutationObserver(updateOverflow);
 
-        return getMainLineTailNode(chessTree.rootNode.moves).data.ply % 2 === 0;
+    resizeObserver.observe(element);
+    if (contentElement) {
+      resizeObserver.observe(contentElement);
+    }
+    mutationObserver.observe(element, {
+      childList: true,
     });
 
-    /** Представляет выход на уровень выше по drill-down относительно активной крошки. */
-    function navigateToParentFromHeaderIndex(currentIndex: number): void {
-        const crumbs = drillForkCrumbs;
-        const currentCrumb = crumbs[currentIndex];
-        if (!currentCrumb) return;
-
-        const parent = chessTree.getNodeParent(currentCrumb);
-        if (!parent) return;
+    return () => {
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+    };
+  };
+
+  /**
+   * Представляет признак: развилка drill-down совпадает с развилкой для акцентных направляющих
+   * при текущем выборе; тогда в боковой панели рисуются акцентные линии.
+   */
+  const isDrillForkGuideForSelection = $derived(
+    chessTree.drillForkParent !== null &&
+      chessTree.drillForkParent.children.length > 1 &&
+      chessTree.currentGuideHighlightForkParent?.id ===
+        chessTree.drillForkParent.id,
+  );
+
+  /**
+   * Представляет true, когда последняя строка основного варианта заполнена двумя полуходами
+   * и ей нужна общая нижняя граница без риска нарисовать линию под пустой чёрной ячейкой.
+   * Для корня без ходов (`ply === 0`) — false, иначе на пустой сетке появляется лишняя линия.
+   */
+  const isFullMainLineTailRow = $derived.by(() => {
+    if (
+      chessTree.drillForkParent &&
+      chessTree.drillForkParent.children.length > 0
+    ) {
+      return false;
+    }
 
-        if (currentIndex <= 0) {
-            chessTree.exitDrillToFullTreeWithoutSelectingNode();
-        } else {
-            chessTree.navigateDrillBreadcrumb(currentIndex - 1);
-        }
+    const tailPly = getMainLineTailNode(chessTree.rootNode.moves).data.ply;
+    return tailPly > 0 && tailPly % 2 === 0;
+  });
 
-        chessTree.currentNode = parent;
-        onSelectNode();
-        onChessNodeSelected?.(chessTree.currentNode);
-        scrollToActiveMoveIfNeeded();
-    }
+  /** Представляет выход на уровень выше по drill-down относительно активной крошки. */
+  function navigateToParentFromHeaderIndex(currentIndex: number): void {
+    const crumbs = drillForkCrumbs;
+    const currentCrumb = crumbs[currentIndex];
+    if (!currentCrumb) return;
 
-    /** Представляет переход по «крошке» drill-down и синхронизацию доски. */
-    function navigateDrillCrumb(targetForkIndex: number): void {
-        chessTree.navigateDrillBreadcrumb(targetForkIndex);
-        onSelectNode();
-        onChessNodeSelected?.(chessTree.currentNode);
-        scrollToActiveMoveIfNeeded();
-    }
+    const parent = chessTree.getNodeParent(currentCrumb);
+    if (!parent) return;
 
-    /** Представляет выход к полному дереву по домику без смены текущего узла и без синхронизации доски. */
-    function exitDrillViaHome(): void {
-        chessTree.exitDrillToFullTreeWithoutSelectingNode();
-        scrollToActiveMoveIfNeeded();
+    if (currentIndex <= 0) {
+      chessTree.exitDrillToFullTreeWithoutSelectingNode();
+    } else {
+      chessTree.navigateDrillBreadcrumb(currentIndex - 1);
     }
 
-    const ROOT_COMMENT_BLOCK_CLASS = "px-3 py-2 !bg-gray-50/95";
+    chessTree.currentNode = parent;
+    onSelectNode();
+    onChessNodeSelected?.(chessTree.currentNode);
+    scrollToActiveMoveIfNeeded();
+  }
+
+  /** Представляет переход по «крошке» drill-down и синхронизацию доски. */
+  function navigateDrillCrumb(targetForkIndex: number): void {
+    chessTree.navigateDrillBreadcrumb(targetForkIndex);
+    onSelectNode();
+    onChessNodeSelected?.(chessTree.currentNode);
+    scrollToActiveMoveIfNeeded();
+  }
+
+  /** Представляет выход к полному дереву по домику без смены текущего узла и без синхронизации доски. */
+  function exitDrillViaHome(): void {
+    chessTree.exitDrillToFullTreeWithoutSelectingNode();
+    scrollToActiveMoveIfNeeded();
+  }
+
+  const ROOT_COMMENT_BLOCK_CLASS = "px-3 py-2";
 </script>
 
 <div
-    class={[
-        "relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-l-sm border-x border-t border-gray-300",
-        className,
-    ]}
+  class={cn(
+    "tree-viewer relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden border-x border-t",
+    className,
+  )}
+  style:--tree-viewer-bg={theme.background}
+  style:--tree-viewer-border={theme.border}
+  style:--tree-viewer-text={theme.text}
+  style:border-color="var(--tree-viewer-border)"
 >
+  <div
+    id="tree-viewer-container"
+    class={cn(
+      "min-h-0 flex-1 overflow-x-hidden overflow-y-auto",
+      editMode && "border-b",
+      isTreeViewerContainerOverflowing && "tree-viewer-container--overflowing",
+    )}
+    style:border-color="var(--tree-viewer-border)"
+    role="region"
+    aria-label="Chess move tree"
+    oncontextmenu={(e) => e.preventDefault()}
+    {@attach treeViewerOverflowAttachment}
+  >
+    <div
+      class={{
+        "tree-viewer-grid grid min-w-0 grid-cols-[60px_1fr_1fr] gap-px select-none [&>*]:min-w-0": true,
+        "border-b": !isTreeViewerContainerOverflowing && isFullMainLineTailRow,
+        "border-r": isTreeViewerContainerOverflowing,
+      }}
+      style:background-color="var(--tree-viewer-border)"
+      style:border-color="var(--tree-viewer-border)"
+    >
+      {#if chessTree.drillForkParent && chessTree.drillForkParent.children.length > 0}
+        <DrillBreadcrumbs
+          {chessTree}
+          {drillForkCrumbs}
+          onNavigateCrumb={navigateDrillCrumb}
+          onNavigateToParentFromCrumb={navigateToParentFromHeaderIndex}
+          onExitToFullTree={exitDrillViaHome}
+        />
+        <DrillVariationList
+          drillForkParent={chessTree.drillForkParent}
+          {isDrillForkGuideForSelection}
+          isBranchOnCurrentPath={(n) => chessTree.isCurrentOnPathFromNode(n)}
+        />
+      {:else}
+        {#if chessTree.rootNode.comments}
+          {#each chessTree.rootNode.comments as firstComment, commentIndex (`root-${commentIndex}`)}
+            <MoveComment
+              text={parseComment(firstComment).text}
+              isHighestLevel={true}
+              spaceBlockClass={ROOT_COMMENT_BLOCK_CLASS}
+              showBottomBorder={commentIndex ===
+                chessTree.rootNode.comments.length - 1 &&
+                chessTree.rootNode.moves.children.length === 0}
+            />
+          {/each}
+        {/if}
+        <Move
+          chessNode={chessTree.rootNode.moves}
+          depth={1}
+          shouldReserveEmptyMoveCell={false}
+          parentNode={null}
+        />
+      {/if}
+    </div>
+  </div>
+  {#if editMode}
     <div
-        id="tree-viewer-container"
-        class={{
-            "min-h-0 flex-1 overflow-x-hidden overflow-y-auto border-b border-gray-300": true,
-            "tree-viewer-container--overflowing":
-                isTreeViewerContainerOverflowing,
-        }}
-        role="region"
-        aria-label="Chess move tree"
-        oncontextmenu={(e) => e.preventDefault()}
-        {@attach treeViewerOverflowAttachment}
+      class="flex shrink-0 flex-col gap-2 border-b p-3"
+      style:background-color="var(--tree-viewer-bg)"
+      style:border-color="var(--tree-viewer-border)"
     >
-        <div
+      <div
+        class="flex justify-center"
+        role="toolbar"
+        aria-label="Отмена и повтор правок PGN"
+      >
+        <div class="flex items-center gap-1">
+          <button
+            type="button"
+            disabled={!canUndoPgnEdit}
+            onclick={() => undoPgnEdit()}
+            title="Отменить"
             class={{
-                "grid min-w-0 grid-cols-[60px_1fr_1fr] gap-px bg-gray-300 select-none [&>*]:min-w-0 [&>*]:bg-white": true,
-                "border-b border-gray-300":
-                    !isTreeViewerContainerOverflowing && isFullMainLineTailRow,
-                "border-r border-gray-300": isTreeViewerContainerOverflowing,
+              "inline-flex size-8 shrink-0 items-center justify-center rounded-md border text-gray-700 shadow-sm outline-none hover:bg-gray-50 focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-40 dark:text-gray-200 dark:hover:bg-gray-700 dark:focus-visible:ring-gray-500 dark:focus-visible:ring-offset-gray-900": true,
             }}
-        >
-            {#if chessTree.drillForkParent && chessTree.drillForkParent.children.length > 0}
-                <DrillBreadcrumbs
-                    {chessTree}
-                    {drillForkCrumbs}
-                    {pieceSet}
-                    onNavigateCrumb={navigateDrillCrumb}
-                    onNavigateToParentFromCrumb={navigateToParentFromHeaderIndex}
-                    onExitToFullTree={exitDrillViaHome}
-                />
-                <DrillVariationList
-                    drillForkParent={chessTree.drillForkParent}
-                    {pieceSet}
-                    {isDrillForkGuideForSelection}
-                    isBranchOnCurrentPath={(n) =>
-                        chessTree.isCurrentOnPathFromNode(n)}
-                />
-            {:else}
-                {#if chessTree.rootNode.comments}
-                    {#each chessTree.rootNode.comments as firstComment, commentIndex (`root-${commentIndex}`)}
-                        <MoveComment
-                            text={parseComment(firstComment).text}
-                            isHighestLevel={true}
-                            spaceBlockClass={ROOT_COMMENT_BLOCK_CLASS}
-                        />
-                    {/each}
-                {/if}
-                <Move
-                    chessNode={chessTree.rootNode.moves}
-                    depth={1}
-                    shouldReserveEmptyMoveCell={false}
-                    parentNode={null}
-                    {pieceSet}
-                />
-            {/if}
-        </div>
-    </div>
-    {#if editMode}
-        <div
-            class="flex shrink-0 flex-col gap-2 border-b border-gray-300 bg-gray-50/95 p-3"
-        >
-            <div
-                class="flex justify-center"
-                role="toolbar"
-                aria-label="Отмена и повтор правок PGN"
-            >
-                <div class="flex items-center gap-1">
-                    <button
-                        type="button"
-                        disabled={!canUndoPgnEdit}
-                        onclick={() => undoPgnEdit()}
-                        title="Отменить"
-                        class={{
-                            "inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-gray-700 shadow-sm outline-none hover:bg-gray-50 focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-40": true,
-                        }}
-                        aria-label="Отменить изменение PGN"
-                    >
-                        <Undo2Icon class="size-4" aria-hidden="true" />
-                    </button>
-                    <button
-                        type="button"
-                        disabled={!canRedoPgnEdit}
-                        onclick={() => redoPgnEdit()}
-                        title="Повторить"
-                        class={{
-                            "inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-gray-700 shadow-sm outline-none hover:bg-gray-50 focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-40": true,
-                        }}
-                        aria-label="Повторить изменение PGN"
-                    >
-                        <Redo2Icon class="size-4" aria-hidden="true" />
-                    </button>
-                </div>
-            </div>
-            <label class="flex flex-col gap-1">
-                <span class="sr-only">Комментарий к текущей ноде</span>
-                <textarea
-                    class="min-h-[4.5rem] w-full resize-y rounded-md border border-gray-300 bg-white px-3 py-2 font-sans text-sm text-gray-900 shadow-sm outline-none placeholder:text-gray-400 focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:text-gray-500"
-                    placeholder={isAtMoveTreeRoot
-                        ? "Комментарий перед первым ходом"
-                        : "Комментарий первого блока после хода"}
-                    autocomplete="off"
-                    disabled={!canEditAnnotations}
-                    bind:value={commentDraft}
-                    oninput={() => persistCommentDraftToCurrentNode()}
-                    onfocusin={() => {
-                        if (!canEditAnnotations) return;
-                        commentTextareaHasFocus = true;
-                        pendingCommentUndoEntry =
-                            capturePgnHistoryEntry(chessTree);
-                    }}
-                    onfocusout={() => {
-                        commentTextareaHasFocus = false;
-                        flushPendingCommentUndoEntry();
-                        const syncId = commentDraftSyncedNodeId;
-                        if (syncId !== null) {
-                            persistCommentDraftForNodeId(syncId);
-                        }
-                    }}
-                    onkeydown={(e) => {
-                        if (
-                            editMode &&
-                            (e.ctrlKey || e.metaKey) &&
-                            !e.altKey &&
-                            e.key.toLowerCase() === "z"
-                        ) {
-                            return;
-                        }
-                        e.stopPropagation();
-                    }}
-                ></textarea>
-            </label>
+            style:background-color="var(--tree-viewer-bg)"
+            style:border-color="var(--tree-viewer-border)"
+            aria-label="Отменить изменение PGN"
+          >
+            <Undo2Icon class="size-4" aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            disabled={!canRedoPgnEdit}
+            onclick={() => redoPgnEdit()}
+            title="Повторить"
+            class={{
+              "inline-flex size-8 shrink-0 items-center justify-center rounded-md border text-gray-700 shadow-sm outline-none hover:bg-gray-50 focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-40 dark:text-gray-200 dark:hover:bg-gray-700 dark:focus-visible:ring-gray-500 dark:focus-visible:ring-offset-gray-900": true,
+            }}
+            style:background-color="var(--tree-viewer-bg)"
+            style:border-color="var(--tree-viewer-border)"
+            aria-label="Повторить изменение PGN"
+          >
+            <Redo2Icon class="size-4" aria-hidden="true" />
+          </button>
+          {#if isCurrentNodeAtFork}
             <div
-                class="relative flex flex-wrap gap-1.5 pb-0.5 pr-0.5"
-            >
-                {#each visibleNagSections as section, index (section.key)}
-                    {#if index > 0}
-                        <div
-                            class="mx-1.5 w-px self-stretch bg-gray-300"
-                            aria-hidden="true"
-                        ></div>
-                    {/if}
-                    <div
-                        class="flex flex-wrap gap-1.5"
-                        role="group"
-                        aria-label={section.title}
-                    >
-                        {#each section.items as entry (entry.id)}
-                            {@const nagId = entry.id}
-                            {@const label = transformNagId(nagId)}
-                            {@const nagOnNode =
-                                chessTree.currentNode.data.nags?.includes(nagId) ??
-                                false}
-                            {@const shadedActive = canEditAnnotations && nagOnNode}
-                            {#if label}
-                                <button
-                                    type="button"
-                                    disabled={!canEditAnnotations}
-                                    title={nagDescription(nagId)}
-                                    class={{
-                                        "inline-flex min-h-[1.5rem] min-w-[1.5rem] shrink-0 items-center justify-center rounded-full border px-2 py-0.5 text-center font-serif text-[0.625rem] font-semibold leading-none text-white shadow-[0_1px_2px_rgba(0,0,0,0.25)]": true,
-                                        "cursor-pointer": canEditAnnotations,
-                                        "cursor-not-allowed border-gray-300 bg-gray-300 text-gray-600 shadow-none":
-                                            !canEditAnnotations,
-                                        "border-white/25": canEditAnnotations,
-                                    }}
-                                    style:background={canEditAnnotations
-                                        ? shadedActive
-                                            ? nagBadgeBackground(nagId)
-                                            : "rgb(243 244 246)"
-                                        : undefined}
-                                    style:color={canEditAnnotations && !shadedActive
-                                        ? "#374151"
-                                        : undefined}
-                                    aria-pressed={nagOnNode}
-                                    onclick={() => toggleNagAtCurrentNode(nagId)}
-                                >
-                                    {label}
-                                </button>
-                            {/if}
-                        {/each}
-                    </div>
-                {/each}
-                {#if canEditAnnotations}
-                    <span
-                        class={{
-                            "pointer-events-none absolute bottom-0 right-0 size-2 rounded-full shadow-sm ring-1": true,
-                            "bg-red-600 ring-red-900/25": isDirty,
-                            "bg-green-600 ring-green-900/25": !isDirty,
-                        }}
-                        aria-label={isDirty
-                            ? "Несохранённые изменения PGN"
-                            : "Изменения сохранены"}
-                        title={isDirty
-                            ? "Дерево партии изменено"
-                            : "Несохранённых изменений нет"}
-                    ></span>
-                {/if}
-            </div>
+              class="mx-1.5 h-5 w-px self-center"
+              style:background-color="var(--tree-viewer-border)"
+              aria-hidden="true"
+            ></div>
+            {#each PUZZLE_BRANCH_NAG_IDS as nagId}
+              {@const label = transformNagId(nagId)}
+              {@const nagOnNode =
+                chessTree.currentNode.data.nags?.includes(nagId) ?? false}
+              <button
+                type="button"
+                title={nagDescription(nagId)}
+                class={{
+                  "inline-flex min-h-[1.5rem] min-w-[1.5rem] shrink-0 items-center justify-center rounded-full border px-2 py-0.5 text-center font-serif text-[0.625rem] font-semibold leading-none shadow-[0_1px_2px_rgba(0,0,0,0.25)]": true,
+                  "border-white/25 text-white": nagOnNode,
+                  "border-white/25 text-gray-700 dark:text-gray-300":
+                    !nagOnNode,
+                }}
+                style:background={nagOnNode
+                  ? nagBadgeBackground(nagId)
+                  : "var(--tree-viewer-bg)"}
+                aria-pressed={nagOnNode}
+                onclick={() => toggleNagAtCurrentNode(nagId)}
+              >
+                {label}
+              </button>
+            {/each}
+          {/if}
         </div>
-    {/if}
+      </div>
+      <label class="flex flex-col gap-1">
+        <span class="sr-only">Комментарий к текущей ноде</span>
+        <textarea
+          class="min-h-[4.5rem] w-full resize-y rounded-md border px-3 py-2 font-sans text-sm text-gray-900 shadow-sm outline-none placeholder:text-gray-400 focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:text-gray-500 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus-visible:ring-gray-500 dark:focus-visible:ring-offset-gray-900 dark:disabled:bg-gray-900 dark:disabled:text-gray-500"
+          style:background-color="var(--tree-viewer-bg)"
+          style:border-color="var(--tree-viewer-border)"
+          placeholder={isAtMoveTreeRoot
+            ? "Комментарий перед первым ходом"
+            : "Комментарий первого блока после хода"}
+          autocomplete="off"
+          disabled={!canEditAnnotations}
+          bind:value={commentDraft}
+          oninput={() => persistCommentDraftToCurrentNode()}
+          onfocusin={() => {
+            if (!canEditAnnotations) return;
+            commentTextareaHasFocus = true;
+            pendingCommentUndoEntry = capturePgnHistoryEntry(chessTree);
+          }}
+          onfocusout={() => {
+            commentTextareaHasFocus = false;
+            flushPendingCommentUndoEntry();
+            const syncId = commentDraftSyncedNodeId;
+            if (syncId !== null) {
+              persistCommentDraftForNodeId(syncId);
+            }
+          }}
+          onkeydown={(e) => {
+            if (
+              editMode &&
+              (e.ctrlKey || e.metaKey) &&
+              !e.altKey &&
+              e.key.toLowerCase() === "z"
+            ) {
+              return;
+            }
+            e.stopPropagation();
+          }}
+        ></textarea>
+      </label>
+      <div class="relative flex flex-wrap gap-1.5 pb-0.5 pr-0.5">
+        {#each visibleNagSections as section, index (section.key)}
+          {#if index > 0}
+            <div
+              class="mx-1.5 w-px self-stretch"
+              style:background-color="var(--tree-viewer-border)"
+              aria-hidden="true"
+            ></div>
+          {/if}
+          <div
+            class="flex flex-wrap gap-1.5"
+            role="group"
+            aria-label={section.title}
+          >
+            {#each section.items as entry (entry.id)}
+              {@const nagId = entry.id}
+              {@const label = transformNagId(nagId)}
+              {@const nagOnNode =
+                chessTree.currentNode.data.nags?.includes(nagId) ?? false}
+              {@const shadedActive = canEditAnnotations && nagOnNode}
+              {#if label}
+                <button
+                  type="button"
+                  disabled={!canEditAnnotations}
+                  title={nagDescription(nagId)}
+                  class={{
+                    "inline-flex min-h-[1.5rem] min-w-[1.5rem] shrink-0 items-center justify-center rounded-full border px-2 py-0.5 text-center font-serif text-[0.625rem] font-semibold leading-none shadow-[0_1px_2px_rgba(0,0,0,0.25)]": true,
+                    "cursor-pointer": canEditAnnotations,
+                    "cursor-not-allowed text-gray-600 shadow-none dark:text-gray-400":
+                      !canEditAnnotations,
+                    "border-white/25 text-white":
+                      canEditAnnotations && shadedActive,
+                    "border-white/25 text-gray-700 dark:text-gray-300":
+                      canEditAnnotations && !shadedActive,
+                  }}
+                  style:background={!canEditAnnotations
+                    ? "var(--tree-viewer-border)"
+                    : shadedActive
+                      ? nagBadgeBackground(nagId)
+                      : "var(--tree-viewer-bg)"}
+                  style:border-color={!canEditAnnotations
+                    ? "var(--tree-viewer-border)"
+                    : undefined}
+                  aria-pressed={nagOnNode}
+                  onclick={() => toggleNagAtCurrentNode(nagId)}
+                >
+                  {label}
+                </button>
+              {/if}
+            {/each}
+          </div>
+        {/each}
+        {#if canEditAnnotations}
+          <span
+            class={{
+              "pointer-events-none absolute bottom-0 right-0 size-2 rounded-full shadow-sm ring-1": true,
+              "bg-red-600 ring-red-900/25 dark:ring-red-200/30": isDirty,
+              "bg-green-600 ring-green-900/25 dark:ring-green-200/30": !isDirty,
+            }}
+            aria-label={isDirty
+              ? "Несохранённые изменения PGN"
+              : "Изменения сохранены"}
+            title={isDirty
+              ? "Дерево партии изменено"
+              : "Несохранённых изменений нет"}
+          ></span>
+        {/if}
+      </div>
+    </div>
+  {/if}
 </div>
 
 <VariantDropdownNavigator
-    bind:this={variantDropdownNavigator}
-    variants={chessTree.currentNode?.children ?? []}
-    anchorSelector={`.${ACTIVE_MOVE_CLASS}`}
-    {pieceSet}
-    onActivateVariant={(node) => {
-        panelNav.selectChildNode(node);
-        panelNav.highlightButton("next");
-    }}
+  bind:this={variantDropdownNavigator}
+  variants={chessTree.currentNode?.children ?? []}
+  anchorSelector={`.${ACTIVE_MOVE_CLASS}`}
+  {theme}
+  onActivateVariant={(node) => {
+    panelNav.selectChildNode(node);
+    panelNav.highlightButton("next");
+  }}
 />
 
 <svelte:window onkeydown={onTreeViewerWindowKeyDown} />
 
 <style>
-    .tree-viewer-container--overflowing
-        :global(.tree-viewer-overflow-tail-border) {
-        border-bottom-width: 0;
-    }
+  .tree-viewer-container--overflowing
+    :global(.tree-viewer-overflow-tail-border) {
+    border-bottom-width: 0;
+  }
+
+  /* Фон ячеек сетки — 1px-зазор между ними виден как цвет границы.
+     ponytail: оборачиваем весь селектор в :global(), иначе Svelte скоупит
+     `> *` к TreeViewer, и дети из `Move`/`MoveComment` не матчатся. */
+  :global(.tree-viewer-grid > *),
+  :global(.tree-viewer-grid > * > *) {
+    background-color: var(--tree-viewer-bg);
+  }
 </style>