@connectorvol/tree 2.1.2 → 4.1.0

package/dist/(components)/TreeViewer.svelte

@@ -1,82 +1,901 @@
 <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 { initGameContext } from "../(utils)/context.js";
-  import type { PieceSet } from "@connectorvol/shared";
+  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";
 
-  type Props = {
+  /** Представляет снимок 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;
   };
 
-  const {
+  let {
     className,
     onSelectNode,
     onDeleteVariant,
+    onChessNodeSelected,
     setChessFen,
     setChessboardFen,
     chessTree,
     pieceSet,
     selectable = true,
-  }: Props = $props();
+    previewOnHoverChessNodeSettings,
+    setPreviewFen,
+    previewHoverDelayMs = 700,
+    editMode = false,
+    onChangeDirty
+  }: TTreeViewerProps = $props();
 
-  initGameContext(
-    chessTree,
-    onSelectNode,
-    onDeleteVariant,
-    setChessFen,
-    setChessboardFen,
-    selectable
+  const previewSettings = $derived(previewOnHoverChessNodeSettings);
+  const previewFenSetter = $derived(
+    previewSettings?.setPreviewFen ?? setPreviewFen,
+  );
+  const previewDelayMs = $derived(
+    previewSettings?.delayMs ?? previewHoverDelayMs,
   );
-</script>
 
-{#snippet comment(text: string)}
-  <div
-    class={{
-      "col-span-3 flex flex-col p-8 select-text": true,
-    }}
-  >
-    {#each text.split("\n") as line, index}
-      {#if index > 0}<br />{/if}{line}
-    {/each}
-  </div>
-{/snippet}
+  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(() =>
+    getOrCreateTreeViewerPanelNavigation(chessTree),
+  );
+
+  let variantDropdownNavigator = $state<TVariantNavigatorHandle | null>(null);
+
+  $effect(() => {
+    panelNav.bindCallbacks(setChessFen, setChessboardFen);
+  });
+
+  $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);
+
+  /** Представляет актуальную строку 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]!;
+    }
+    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),
+    };
+  }
+
+  const setIsDirty = (value: boolean) => {
+    isDirty = value;
+  };
+
+  $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 = 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;
+    }
+    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;
+    }
+    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.currentNode = nodeAtVariationPathFromRoot(
+        chessTree.rootNode.moves,
+        entry.variationPath,
+      );
+      onSelectNode();
+      onChessNodeSelected?.(chessTree.currentNode);
+      setTimeout(() => scrollToActiveMoveIfNeeded(), 50);
+    } finally {
+      setTimeout(() => {
+        suppressPgnHistoryPush = false;
+      }, 0);
+    }
+  }
+
+  /** Представляет откат к предыдущему сохранённому состоянию 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;
+        }
+      } else if (canUndoPgnEdit) {
+        e.preventDefault();
+        undoPgnEdit();
+        return;
+      }
+    }
+    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 : "";
+    }
+  });
+
+  /** Представляет объединение строки из 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;
+    }
+    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;
+  }
+
+  /** Представляет запись черновика в первый сегмент для узла с указанным 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;
+      return;
+    }
+
+    if (targetMoveNode === null) return;
+    if (commentStringArraysEqual(nextComments, targetMoveNode.data.comments)) {
+      return;
+    }
+    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];
+    }
+
+    return currentNode;
+  }
+
+  const treeViewerOverflowAttachment: Attachment<HTMLDivElement> = (
+    element,
+  ) => {
+    const updateOverflow = () => updateTreeViewerContainerOverflow(element);
+    const contentElement = element.firstElementChild;
+
+    updateOverflow();
+
+    const resizeObserver = new ResizeObserver(updateOverflow);
+    const mutationObserver = new MutationObserver(updateOverflow);
+
+    resizeObserver.observe(element);
+    if (contentElement) {
+      resizeObserver.observe(contentElement);
+    }
+    mutationObserver.observe(element, {
+      childList: true,
+      characterData: true,
+      subtree: true,
+    });
+
+    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;
+    }
+
+    return getMainLineTailNode(chessTree.rootNode.moves).data.ply % 2 === 0;
+  });
+
+  /** Представляет выход на уровень выше по 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;
+
+    if (currentIndex <= 0) {
+      chessTree.exitDrillToFullTreeWithoutSelectingNode();
+    } else {
+      chessTree.navigateDrillBreadcrumb(currentIndex - 1);
+    }
+
+    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";
+</script>
 
 <div
-  id="tree-viewer-container"
   class={[
-    "flex-1 relative  overflow-auto border border-gray-300 rounded-l-sm shadow-sm  ",
+    "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,
   ]}
-  role="region"
-  aria-label="Chess move tree"
-  oncontextmenu={(e) => e.preventDefault()}
 >
   <div
+    id="tree-viewer-container"
     class={{
-      "grid flex-1 grid-cols-[60px_1fr_1fr]  divide-x divide-y divide-gray-300  select-none ": true,
+      "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}
   >
-    {#if chessTree.rootNode.comments}
-      {#each chessTree.rootNode.comments as firstComment}
-        {@render comment(firstComment)}
-      {/each}
-    {/if}
-    <Move
-      chessNode={chessTree.rootNode.moves}
-      depth={1}
-      needSpace={false}
-      parentNode={null}
-      {pieceSet}
-    />
+    <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"
+    >
+      <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");
+  }}
+/>
+
+<svelte:window onkeydown={onTreeViewerWindowKeyDown} />
+
+<style>
+  .tree-viewer-container--overflowing
+    :global(.tree-viewer-overflow-tail-border) {
+    border-bottom-width: 0;
+  }
+</style>