@connectorvol/tree 4.0.0 → 4.2.0

package/dist/(components)/TreeViewer.svelte

@@ -1,883 +1,936 @@
 <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,
-    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";
-  };
-
-  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;
-    /** Возвращает функцию для установки признака несохранённости дерева. */
-    onChangeDirty?: (setIsDirty: (value: boolean) => void) => void;
-  };
-
-  let {
-    className,
-    onSelectNode,
-    onDeleteVariant,
-    onChessNodeSelected,
-    setChessFen,
-    setChessboardFen,
-    chessTree,
-    pieceSet,
-    selectable = true,
-    previewOnHoverChessNodeSettings,
-    setPreviewFen,
-    previewHoverDelayMs = 700,
-    editMode = 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, {
-    chessTree: (() => chessTree)(),
-    onSelectNode: (() => onSelectNode)(),
-    onDeleteVariant: (() => onDeleteVariant)(),
-    onChessNodeSelected: (() => onChessNodeSelected)(),
-    setChessFen: (() => setChessFen)(),
-    setChessboardFen: (() => setChessboardFen)(),
-    setPreviewFen: (() =>
-      previewFenSetter
-        ? (fen, lastMove) => previewFenSetter(fen, lastMove)
-        : undefined)(),
-    previewHoverDelayMs: (() => previewDelayMs)(),
-    selectable: (() => selectable)(),
-  });
-
-  const panelNav = $derived.by(() =>
-    getOrCreateTreeViewerPanelNavigation(chessTree),
-  );
-
-  let variantDropdownNavigator = $state<TVariantNavigatorHandle | null>(null);
-
-  $effect(() => {
-    panelNav.bindCallbacks(setChessFen, setChessboardFen);
-  });
-
-  $effect(() => {
-    const nav = panelNav;
-    nav.setVariantNavigator(variantDropdownNavigator);
-    return () => {
-      nav.setVariantNavigator(null);
+    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,
+        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[];
     };
-  });
 
-  $effect(() => {
-    const nav = panelNav;
-    return () => {
-      nav.dispose();
+    type TPreviewOnHoverChessNodeSettings = {
+        /** Возвращает функцию для установки FEN превью при наведении (null скрывает); второй аргумент — подсветка последнего хода. */
+        setPreviewFen?: (
+            fen: string | null,
+            lastMove?: TSharedMove | null,
+        ) => void;
+        /** Возвращает задержку (мс) до показа превью-позиции при наведении на ноду, либо `off` для отключения. */
+        delayMs?: number | "off";
     };
-  });
-
-  /** Представляет true, если доступно редактирование комментария и NAG (есть интерактивный выбор ноды). */
-  const canEditAnnotations = $derived(editMode && selectable);
-
-  /** Представляет актуальную строку PGN, восстановленную из дерева (для отслеживания изменений). */
-  const serializedPgn = $derived.by(() => createPgnFromTree(chessTree.rootNode));
-
-  /** Представляет признак: текущий 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]!;
+
+    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;
+        /** Возвращает функцию для установки признака несохранённости дерева. */
+        onChangeDirty?: (setIsDirty: (value: boolean) => void) => void;
+    };
+
+    let {
+        className,
+        onSelectNode,
+        onDeleteVariant,
+        onChessNodeSelected,
+        setChessFen,
+        setChessboardFen,
+        chessTree,
+        pieceSet,
+        selectable = true,
+        previewOnHoverChessNodeSettings,
+        setPreviewFen,
+        previewHoverDelayMs = 700,
+        editMode = 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();
+        };
+    });
+
+    /** Представляет true, если доступно редактирование комментария и NAG (есть интерактивный выбор ноды). */
+    const canEditAnnotations = $derived(editMode && selectable);
+
+    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;
+    }
+
+    /** Представляет признак: текущий 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));
     }
-    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;
+
+    /** Представляет индексы детей от корня ходов до указанной ноды. */
+    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;
     }
-    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),
+
+    /** Представляет узел по пути варианта от корня ходов (устойчив к новым 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),
+        };
+    }
+
+    const setIsDirty = (value: boolean) => {
+        isDirty = value;
     };
-  }
-
-  const setIsDirty = (value: boolean) => {
-    isDirty = value;
-  };
-
-  $effect(() => {
-    if (!editMode) {
-      pastPgnEntries = [];
-      redoPgnEntries = [];
-      pendingCommentUndoEntry = null;
-      commentTextareaHasFocus = false;
+
+    $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 = [];
     }
-  });
-
-  /** Представляет одну запись undo для завершённой сессии правки комментария (до правки vs после). */
-  function flushPendingCommentUndoEntry(): void {
-    if (pendingCommentUndoEntry === null) return;
-    const pending = pendingCommentUndoEntry;
-    pendingCommentUndoEntry = null;
-    const nowPgn = createPgnFromTree(chessTree.rootNode);
-    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;
+
+    $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);
+        }
     }
-    pastPgnEntries = [...pastPgnEntries, pending].slice(-MAX_PGN_EDIT_HISTORY);
-    redoPgnEntries = [];
-  }
-
-  $effect(() => {
-    const next = serializedPgn;
-    const pathNow = variationPathForChessTreeSelection(chessTree);
-    const skipPushForInFlightCommentEdit =
-      editMode &&
-      commentTextareaHasFocus &&
-      pendingCommentUndoEntry !== null;
-    if (previousSerializedPgn === null) {
-      initialPgnSnapshot = next;
-      previousSerializedPgn = next;
-      variationPathSyncedWithPreviousSerializedPgn = pathNow;
-      isDirty = false;
-      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);
     }
-    if (next !== previousSerializedPgn) {
-      if (
-        editMode &&
-        !suppressPgnHistoryPush &&
-        !skipPushForInFlightCommentEdit
-      ) {
+
+    /** Представляет повтор последнего отменённого состояния PGN и выбор ноды. */
+    function redoPgnEdit(): void {
+        if (redoPgnEntries.length === 0) return;
+        const nextEntry = redoPgnEntries[redoPgnEntries.length - 1]!;
+        redoPgnEntries = redoPgnEntries.slice(0, -1);
         pastPgnEntries = [
-          ...pastPgnEntries,
-          {
-            pgn: previousSerializedPgn,
-            variationPath: variationPathSyncedWithPreviousSerializedPgn,
-          },
+            ...pastPgnEntries,
+            capturePgnHistoryEntry(chessTree),
         ].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.currentNode = nodeAtVariationPathFromRoot(
-        chessTree.rootNode.moves,
-        entry.variationPath,
-      );
-      onSelectNode();
-      onChessNodeSelected?.(chessTree.currentNode);
-      setTimeout(() => scrollToActiveMoveIfNeeded(), 50);
-    } finally {
-      setTimeout(() => {
-        suppressPgnHistoryPush = false;
-      }, 0);
+        applyPgnHistoryEntry(nextEntry);
     }
-  }
-
-  /** Представляет откат к предыдущему сохранённому состоянию 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;
+
+    /** Представляет доступность 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;
+            }
         }
-      } else if (canUndoPgnEdit) {
-        e.preventDefault();
-        undoPgnEdit();
-        return;
-      }
+        panelNav.onWindowKeyDown(e);
     }
-    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);
-    }
-    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 : "";
+
+    /** Представляет 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);
+        }
+        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 });
     }
-  });
-
-  /** Представляет объединение строки из 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;
+
+    /** Представляет нормализацию текста комментария для сравнения «набрано vs уже в дереве». */
+    function normalizeCommentTextForCompare(text: string): string {
+        return text.replace(/\r\n/g, "\n");
     }
-    if (nextComments === undefined || currentComments === undefined) {
-      return false;
+
+    /** Представляет проверку совпадения массивов 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 (nextComments.length !== currentComments.length) return false;
-    for (let i = 0; i < nextComments.length; i++) {
-      if (nextComments[i] !== currentComments[i]) return false;
+
+    /** Представляет запись черновика в первый сегмент для узла с указанным 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++;
     }
-    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 persistCommentDraftToCurrentNode(): void {
+        if (!canEditAnnotations) return;
+        persistCommentDraftForNodeId(chessTree.currentNode.id);
     }
 
-    const storedEditable =
-      rawFirst !== undefined ? parseComment(rawFirst).text : "";
-    if (
-      normalizeCommentTextForCompare(storedEditable) ===
-      normalizeCommentTextForCompare(commentDraft)
-    ) {
-      return;
+    /** Представляет символы «оценки хода» с взаимоисключением (новинка `NOVELTY_NAG_ID` не входит). */
+    function isExclusiveMoveEvaluationGlyph(nag: number): boolean {
+        return isMoveEvaluationNag(nag) && nag !== NOVELTY_NAG_ID;
     }
 
-    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;
-      return;
+    /** Представляет переключение 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++;
     }
 
-    if (targetMoveNode === null) return;
-    if (commentStringArraysEqual(nextComments, targetMoveNode.data.comments)) {
-      return;
+    /** Представляет обновление признака вертикального переполнения дерева ходов. */
+    function updateTreeViewerContainerOverflow(element: HTMLDivElement): void {
+        isTreeViewerContainerOverflowing =
+            element.scrollHeight > element.clientHeight + 1;
     }
-    targetMoveNode.data.comments = nextComments;
-  }
-
-  /** Представляет запись черновика в первый сегмент `{...}` текущего узла или вступления партии у корня, сохраняя хвост и `[%…]` метаданные. */
-  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;
-  }
-
-  /** Представляет обновление признака вертикального переполнения дерева ходов. */
-  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];
+
+    /** Представляет последний узел главной линии от указанного узла. */
+    function getMainLineTailNode(node: ChessTreeNode): ChessTreeNode {
+        let currentNode = node;
+
+        while (currentNode.children[0]) {
+            currentNode = currentNode.children[0];
+        }
+
+        return currentNode;
     }
 
-    return currentNode;
-  }
+    const treeViewerOverflowAttachment: Attachment<HTMLDivElement> = (
+        element,
+    ) => {
+        const updateOverflow = () => updateTreeViewerContainerOverflow(element);
+        const contentElement = element.firstElementChild;
 
-  const treeViewerOverflowAttachment: Attachment<HTMLDivElement> = (
-    element,
-  ) => {
-    const updateOverflow = () => updateTreeViewerContainerOverflow(element);
-    const contentElement = element.firstElementChild;
+        updateOverflow();
 
-    updateOverflow();
+        const resizeObserver = new ResizeObserver(updateOverflow);
+        const mutationObserver = new MutationObserver(updateOverflow);
 
-    const resizeObserver = new ResizeObserver(updateOverflow);
-    const mutationObserver = new MutationObserver(updateOverflow);
+        resizeObserver.observe(element);
+        if (contentElement) {
+            resizeObserver.observe(contentElement);
+        }
+        mutationObserver.observe(element, {
+            childList: true,
+        });
+
+        return () => {
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+        };
+    };
 
-    resizeObserver.observe(element);
-    if (contentElement) {
-      resizeObserver.observe(contentElement);
-    }
-    mutationObserver.observe(element, {
-      childList: true,
-      characterData: true,
-      subtree: true,
+    /**
+     * Представляет признак: развилка drill-down совпадает с развилкой для акцентных направляющих
+     * при текущем выборе; тогда в боковой панели рисуются акцентные линии.
+     */
+    const isDrillForkGuideForSelection = $derived(
+        chessTree.drillForkParent !== null &&
+            chessTree.drillForkParent.children.length > 1 &&
+            chessTree.currentGuideHighlightForkParent?.id ===
+                chessTree.drillForkParent.id,
+    );
+
+    /**
+     * Представляет true, когда последняя строка основного варианта заполнена двумя полуходами
+     * и ей нужна общая нижняя граница без риска нарисовать линию под пустой чёрной ячейкой.
+     */
+    const isFullMainLineTailRow = $derived.by(() => {
+        if (
+            chessTree.drillForkParent &&
+            chessTree.drillForkParent.children.length > 0
+        ) {
+            return false;
+        }
+
+        return getMainLineTailNode(chessTree.rootNode.moves).data.ply % 2 === 0;
     });
 
-    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, когда последняя строка основного варианта заполнена двумя полуходами
-   * и ей нужна общая нижняя граница без риска нарисовать линию под пустой чёрной ячейкой.
-   */
-  const isFullMainLineTailRow = $derived.by(() => {
-    if (
-      chessTree.drillForkParent &&
-      chessTree.drillForkParent.children.length > 0
-    ) {
-      return false;
-    }
+    /** Представляет выход на уровень выше по 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 getMainLineTailNode(chessTree.rootNode.moves).data.ply % 2 === 0;
-  });
+        if (currentIndex <= 0) {
+            chessTree.exitDrillToFullTreeWithoutSelectingNode();
+        } else {
+            chessTree.navigateDrillBreadcrumb(currentIndex - 1);
+        }
 
-  /** Представляет выход на уровень выше по drill-down относительно активной крошки. */
-  function navigateToParentFromHeaderIndex(currentIndex: number): void {
-    const crumbs = drillForkCrumbs;
-    const currentCrumb = crumbs[currentIndex];
-    if (!currentCrumb) return;
+        chessTree.currentNode = parent;
+        onSelectNode();
+        onChessNodeSelected?.(chessTree.currentNode);
+        scrollToActiveMoveIfNeeded();
+    }
 
-    const parent = chessTree.getNodeParent(currentCrumb);
-    if (!parent) return;
+    /** Представляет переход по «крошке» drill-down и синхронизацию доски. */
+    function navigateDrillCrumb(targetForkIndex: number): void {
+        chessTree.navigateDrillBreadcrumb(targetForkIndex);
+        onSelectNode();
+        onChessNodeSelected?.(chessTree.currentNode);
+        scrollToActiveMoveIfNeeded();
+    }
 
-    if (currentIndex <= 0) {
-      chessTree.exitDrillToFullTreeWithoutSelectingNode();
-    } else {
-      chessTree.navigateDrillBreadcrumb(currentIndex - 1);
+    /** Представляет выход к полному дереву по домику без смены текущего узла и без синхронизации доски. */
+    function exitDrillViaHome(): void {
+        chessTree.exitDrillToFullTreeWithoutSelectingNode();
+        scrollToActiveMoveIfNeeded();
     }
 
-    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 !bg-gray-50/95";
+    const ROOT_COMMENT_BLOCK_CLASS = "px-3 py-2 !bg-gray-50/95";
 </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={[
+        "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,
+    ]}
 >
-  <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}
-  >
-    <div
-      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,
-      }}
-    >
-      {#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"
+        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}
     >
-      <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="Повторить"
+        <div
             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,
+                "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,
             }}
-            aria-label="Повторить изменение PGN"
-          >
-            <Redo2Icon class="size-4" aria-hidden="true" />
-          </button>
+        >
+            {#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>
-      <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>
-      <div
-        class="relative flex flex-wrap gap-1.5 pb-0.5 pr-0.5"
-        role="group"
-        aria-label="Символы NAG"
-      >
-        {#each SELECTABLE_NAG_IDS_ORDERED as nagId (nagId)}
-          {@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}
-        {#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>
     </div>
-  {/if}
+    {#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>
+            <div
+                class="relative flex flex-wrap gap-1.5 pb-0.5 pr-0.5"
+                role="group"
+                aria-label="Символы NAG"
+            >
+                {#each SELECTABLE_NAG_IDS_ORDERED as nagId (nagId)}
+                    {@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}
+                {#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>
+        </div>
+    {/if}
 </div>
 
 <VariantDropdownNavigator
-  bind:this={variantDropdownNavigator}
-  variants={chessTree.currentNode?.children ?? []}
-  anchorSelector={`.${ACTIVE_MOVE_CLASS}`}
-  onActivateVariant={(node) => {
-    panelNav.selectChildNode(node);
-    panelNav.highlightButton("next");
-  }}
+    bind:this={variantDropdownNavigator}
+    variants={chessTree.currentNode?.children ?? []}
+    anchorSelector={`.${ACTIVE_MOVE_CLASS}`}
+    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;
+    }
 </style>