@connectorvol/tree 2.1.2 → 4.1.0

package/dist/(classes)/chessTree.svelte.d.ts

@@ -2,12 +2,70 @@ import type { ChessTreeNode, TChessTree } from "../(models)/chessTreeNode.js";
 export declare class ChessTree {
     rootNode: TChessTree;
     currentNode: ChessTreeNode;
+    /** Представляет признак: меню выхода из drill-down у активной крошки сейчас открыто. */
+    drillExitPromptOpen: boolean;
     forcedNodeId: string | null;
+    /**
+     * Представляет стек родительских узлов развилок при drill-down «варианты отдельно»;
+     * пустой массив — полное дерево в основной области.
+     */
+    private drillForkStack;
     /** Представляет индекс узлов по id для O(1) доступа к родителю по parentId. */
     private nodeById;
+    /** Представляет набор id узлов главной линии для O(1) проверки принадлежности. */
+    private mainLineNodeIds;
+    /** Представляет набор id узлов на пути от текущего хода к корню партии. */
+    private currentPathNodeIds;
+    /** Представляет текущую развилку, для которой нужно подсвечивать направляющие. */
+    private guideHighlightForkParent;
     constructor(rootNode: TChessTree);
+    /**
+     * Представляет замену корня партии (полное дерево, заголовки, комментарии)
+     * и сброс навигации к первому ходу после парсинга PGN.
+     */
+    replaceRootTree(nextRoot: TChessTree): void;
+    /** Представляет запрос на показ меню выхода из drill-down у активной крошки в header. */
+    requestDrillExitPrompt(): void;
+    /** Представляет родительский узел текущего уровня drill-down или null. */
+    get drillForkParent(): ChessTreeNode | null;
+    /** Представляет копию стека развилок для навигации «хлебными крошками» (от корня партии к текущему уровню). */
+    get drillForkBreadcrumbs(): ChessTreeNode[];
+    /** Представляет текущую развилку, для которой нужно подсвечивать направляющие в дереве. */
+    get currentGuideHighlightForkParent(): ChessTreeNode | null;
+    /**
+     * Представляет проверку: текущий узел совпадает с развилкой или лежит в поддереве её вариантов
+     * (цепочка родителей от currentNode до корня содержит forkParent).
+     * Возвращает true, если позиция на доске уже «внутри» этой развилки.
+     */
+    isCurrentNodeWithinForkSubtree(forkParent: ChessTreeNode): boolean;
+    /**
+     * Представляет открытие drill-down от указанной развилки (новый уровень в стеке).
+     * В отдельном виде ответы на развилку показываются в одном блоке вариантов, как в основном дереве.
+     */
+    openVariationDrillDown(forkParent: ChessTreeNode, opts?: {
+        selectFork?: boolean;
+    }): void;
+    /** Представляет выход на один уровень вверх по drill-down; при пустом стеке — без изменений. */
+    closeVariationDrillDown(): void;
+    /**
+     * Представляет сброс drill-down к отображению полного дерева без смены текущего узла и выбора на доске.
+     */
+    exitDrillToFullTreeWithoutSelectingNode(): void;
+    /**
+     * Представляет переход по цепочке drill-down: при отрицательном индексе — полное дерево и корень партии;
+     * иначе стек обрезается до форка с этим индексом, текущим узлом становится этот форк.
+     */
+    navigateDrillBreadcrumb(targetForkIndex: number): void;
+    /** Представляет проверку активности режима drill-down. */
+    isVariationDrillDownActive(): boolean;
+    /**
+     * Представляет проверку: узел лежит на главной линии партии (цепочка только children[0] от корня `rootNode.moves`).
+     */
+    isNodeOnMainLine(node: ChessTreeNode): boolean;
     /** Представляет перестроение индекса nodeById по всему дереву. */
     private rebuildNodeById;
+    /** Представляет поиск узла партии по id в индексе дерева. */
+    getNodeById(id: string): ChessTreeNode | undefined;
     /** Представляет добавление узла и всех потомков в индекс nodeById. */
     private addNodeToMap;
     /** Представляет удаление узла и всех потомков из индекса nodeById. */
@@ -31,6 +89,31 @@ export declare class ChessTree {
      * Возвращает родительский узел или null, если текущий узел — корень.
      */
     getCurrentNodeParent(): ChessTreeNode | null;
+    /**
+     * Представляет получение родителя указанного узла в дереве партии.
+     * Возвращает родительский узел или null, если у узла нет родителя (корень).
+     */
+    getNodeParent(node: ChessTreeNode): ChessTreeNode | null;
+    /**
+     * Представляет проверку: `branchRoot` встречается на пути от `currentNode` к корню
+     * (текущий узел, либо предок на этой цепи).
+     * Возвращает true, если горизонтальную «птичку» у строки, начинающейся с `branchRoot`, нужно
+     * подсвечивать вместе с ветвью, а не у всех соседей развилки.
+     */
+    isCurrentOnPathFromNode(branchRoot: ChessTreeNode): boolean;
+    /**
+     * Представляет поиск ближайшей к выбранному узлу развилки, двигаясь к корню: проверяется
+     * сам `node` и далее цепь родителей; выбирается первый с более чем одним ребёнком.
+     * Возвращает этот узел-развилку или `null`, если вариантов вверх не найдено.
+     */
+    getDeepestForkParentOnPathFromNode(node: ChessTreeNode): ChessTreeNode | null;
+    /**
+     * Представляет поиск узла-развилки для акцентных направляющих. На главной линии — `null`. Иначе
+     * ближайшая развилка вверх. Если `node` сам — развилка, акцент ведём к выбранному ходу через
+     * ближайшую развилку выше, а не к его дочерним вариантам.
+     * Возвращает этот узел или `null`.
+     */
+    getForkParentForGuideHighlight(node: ChessTreeNode): ChessTreeNode | null;
     /**
      * Представляет функцию удаления варианта из дерева.
      * Удаляет указанный узел и все его дочерние узлы.

package/dist/(classes)/chessTree.svelte.js

@@ -2,16 +2,140 @@ import { generateId } from "@connectorvol/shared";
 export class ChessTree {
     rootNode;
     currentNode;
+    /** Представляет признак: меню выхода из drill-down у активной крошки сейчас открыто. */
+    drillExitPromptOpen = $state(false);
     // Заставляет узел отображаться как побочная линия, а не главный вариант
     forcedNodeId;
+    /**
+     * Представляет стек родительских узлов развилок при drill-down «варианты отдельно»;
+     * пустой массив — полное дерево в основной области.
+     */
+    drillForkStack = $state([]);
     /** Представляет индекс узлов по id для O(1) доступа к родителю по parentId. */
     nodeById = new Map();
+    /** Представляет набор id узлов главной линии для O(1) проверки принадлежности. */
+    mainLineNodeIds = $derived.by(() => {
+        const ids = new Set();
+        let node = this.rootNode.moves;
+        while (node) {
+            ids.add(node.id);
+            node = node.children[0];
+        }
+        return ids;
+    });
+    /** Представляет набор id узлов на пути от текущего хода к корню партии. */
+    currentPathNodeIds = $derived.by(() => {
+        const ids = new Set();
+        let node = this.currentNode;
+        while (node) {
+            ids.add(node.id);
+            node = this.findParentNode(node);
+        }
+        return ids;
+    });
+    /** Представляет текущую развилку, для которой нужно подсвечивать направляющие. */
+    guideHighlightForkParent = $derived.by(() => this.getForkParentForGuideHighlight(this.currentNode));
     constructor(rootNode) {
         this.rootNode = $state(rootNode);
         this.currentNode = $state.raw(this.rootNode.moves);
         this.forcedNodeId = $state(null);
         this.rebuildNodeById();
     }
+    /**
+     * Представляет замену корня партии (полное дерево, заголовки, комментарии)
+     * и сброс навигации к первому ходу после парсинга PGN.
+     */
+    replaceRootTree(nextRoot) {
+        this.drillExitPromptOpen = false;
+        this.drillForkStack = [];
+        this.forcedNodeId = null;
+        this.rootNode = nextRoot;
+        this.rebuildNodeById();
+        this.currentNode = this.rootNode.moves;
+    }
+    /** Представляет запрос на показ меню выхода из drill-down у активной крошки в header. */
+    requestDrillExitPrompt() {
+        this.drillExitPromptOpen = true;
+    }
+    /** Представляет родительский узел текущего уровня drill-down или null. */
+    get drillForkParent() {
+        const stack = this.drillForkStack;
+        const len = stack.length;
+        return len === 0 ? null : stack[len - 1];
+    }
+    /** Представляет копию стека развилок для навигации «хлебными крошками» (от корня партии к текущему уровню). */
+    get drillForkBreadcrumbs() {
+        return [...this.drillForkStack];
+    }
+    /** Представляет текущую развилку, для которой нужно подсвечивать направляющие в дереве. */
+    get currentGuideHighlightForkParent() {
+        return this.guideHighlightForkParent;
+    }
+    /**
+     * Представляет проверку: текущий узел совпадает с развилкой или лежит в поддереве её вариантов
+     * (цепочка родителей от currentNode до корня содержит forkParent).
+     * Возвращает true, если позиция на доске уже «внутри» этой развилки.
+     */
+    isCurrentNodeWithinForkSubtree(forkParent) {
+        return this.currentPathNodeIds.has(forkParent.id);
+    }
+    /**
+     * Представляет открытие drill-down от указанной развилки (новый уровень в стеке).
+     * В отдельном виде ответы на развилку показываются в одном блоке вариантов, как в основном дереве.
+     */
+    openVariationDrillDown(forkParent, opts) {
+        this.drillExitPromptOpen = false;
+        const stack = this.drillForkStack;
+        const top = stack.length > 0 ? stack[stack.length - 1] : null;
+        if (top?.id !== forkParent.id) {
+            this.drillForkStack = [...stack, forkParent];
+        }
+        if (opts?.selectFork) {
+            this.currentNode = forkParent;
+        }
+    }
+    /** Представляет выход на один уровень вверх по drill-down; при пустом стеке — без изменений. */
+    closeVariationDrillDown() {
+        if (this.drillForkStack.length === 0)
+            return;
+        this.drillExitPromptOpen = false;
+        this.drillForkStack = this.drillForkStack.slice(0, -1);
+    }
+    /**
+     * Представляет сброс drill-down к отображению полного дерева без смены текущего узла и выбора на доске.
+     */
+    exitDrillToFullTreeWithoutSelectingNode() {
+        this.drillExitPromptOpen = false;
+        this.drillForkStack = [];
+    }
+    /**
+     * Представляет переход по цепочке drill-down: при отрицательном индексе — полное дерево и корень партии;
+     * иначе стек обрезается до форка с этим индексом, текущим узлом становится этот форк.
+     */
+    navigateDrillBreadcrumb(targetForkIndex) {
+        if (targetForkIndex < 0) {
+            this.drillExitPromptOpen = false;
+            this.drillForkStack = [];
+            this.currentNode = this.rootNode.moves;
+            return;
+        }
+        const stack = this.drillForkStack;
+        if (targetForkIndex >= stack.length)
+            return;
+        this.drillExitPromptOpen = false;
+        this.drillForkStack = stack.slice(0, targetForkIndex + 1);
+        this.currentNode = this.drillForkStack[this.drillForkStack.length - 1];
+    }
+    /** Представляет проверку активности режима drill-down. */
+    isVariationDrillDownActive() {
+        return this.drillForkStack.length > 0;
+    }
+    /**
+     * Представляет проверку: узел лежит на главной линии партии (цепочка только children[0] от корня `rootNode.moves`).
+     */
+    isNodeOnMainLine(node) {
+        return this.mainLineNodeIds.has(node.id);
+    }
     /** Представляет перестроение индекса nodeById по всему дереву. */
     rebuildNodeById() {
         this.nodeById.clear();
@@ -23,6 +147,10 @@ export class ChessTree {
         };
         addToMap(this.rootNode.moves);
     }
+    /** Представляет поиск узла партии по id в индексе дерева. */
+    getNodeById(id) {
+        return this.nodeById.get(id);
+    }
     /** Представляет добавление узла и всех потомков в индекс nodeById. */
     addNodeToMap(node) {
         this.nodeById.set(node.id, node);
@@ -110,6 +238,76 @@ export class ChessTree {
     getCurrentNodeParent() {
         return this.findParentNode(this.currentNode);
     }
+    /**
+     * Представляет получение родителя указанного узла в дереве партии.
+     * Возвращает родительский узел или null, если у узла нет родителя (корень).
+     */
+    getNodeParent(node) {
+        return this.findParentNode(node);
+    }
+    /**
+     * Представляет проверку: `branchRoot` встречается на пути от `currentNode` к корню
+     * (текущий узел, либо предок на этой цепи).
+     * Возвращает true, если горизонтальную «птичку» у строки, начинающейся с `branchRoot`, нужно
+     * подсвечивать вместе с ветвью, а не у всех соседей развилки.
+     */
+    isCurrentOnPathFromNode(branchRoot) {
+        return this.currentPathNodeIds.has(branchRoot.id);
+    }
+    /**
+     * Представляет поиск ближайшей к выбранному узлу развилки, двигаясь к корню: проверяется
+     * сам `node` и далее цепь родителей; выбирается первый с более чем одним ребёнком.
+     * Возвращает этот узел-развилку или `null`, если вариантов вверх не найдено.
+     */
+    getDeepestForkParentOnPathFromNode(node) {
+        let d = node;
+        while (d) {
+            if (d.children.length > 1) {
+                return d;
+            }
+            d = this.findParentNode(d);
+        }
+        return null;
+    }
+    /**
+     * Представляет поиск узла-развилки для акцентных направляющих. На главной линии — `null`. Иначе
+     * ближайшая развилка вверх. Если `node` сам — развилка, акцент ведём к выбранному ходу через
+     * ближайшую развилку выше, а не к его дочерним вариантам.
+     * Возвращает этот узел или `null`.
+     */
+    getForkParentForGuideHighlight(node) {
+        if (this.isNodeOnMainLine(node)) {
+            return null;
+        }
+        const deepest = this.getDeepestForkParentOnPathFromNode(node);
+        if (deepest === null) {
+            return null;
+        }
+        if (deepest.id !== node.id) {
+            return deepest;
+        }
+        const p = this.getNodeParent(deepest);
+        const parentFork = p === null ? null : this.getDeepestForkParentOnPathFromNode(p);
+        if (parentFork !== null) {
+            return parentFork;
+        }
+        if (p !== null && p.children.length > 1) {
+            return parentFork ?? deepest;
+        }
+        if (p === null) {
+            return deepest;
+        }
+        const { children } = deepest;
+        if (children.length < 1) {
+            return deepest;
+        }
+        const minChildFull = Math.min(...children.map((c) => c.data.fullMoves));
+        const forkIsOnlyForSameFullMoveReplies = minChildFull === deepest.data.fullMoves;
+        if (forkIsOnlyForSameFullMoveReplies) {
+            return parentFork ?? deepest;
+        }
+        return deepest;
+    }
     /**
      * Представляет функцию удаления варианта из дерева.
      * Удаляет указанный узел и все его дочерние узлы.

package/dist/(components)/DrillBreadcrumbs.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+  import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
+  import type { PieceSet } from "@connectorvol/shared";
+  import ArrowRight from "@lucide/svelte/icons/arrow-right";
+  import HomeIcon from "@lucide/svelte/icons/house";
+  import * as DropdownMenu from "../components/ui/dropdown-menu/index.js";
+  import type { ChessTree } from "../(classes)/chessTree.svelte.js";
+  import DrillForkSanLabel from "./DrillForkSanLabel.svelte";
+
+  type TDrillBreadcrumbsProps = {
+    /** Возвращает дерево партии. */
+    chessTree: ChessTree;
+    /** Возвращает цепочку узлов-развилок для хлебных крошек. */
+    drillForkCrumbs: ChessTreeNode[];
+    /** Возвращает набор фигур для иконок SAN. */
+    pieceSet: PieceSet;
+    /** Представляет переход по крошке drill-down. */
+    onNavigateCrumb: (targetForkIndex: number) => void;
+    /** Представляет выход на уровень выше относительно крошки с индексом. */
+    onNavigateToParentFromCrumb: (currentIndex: number) => void;
+    /** Представляет выход к полному дереву по кнопке «дом». */
+    onExitToFullTree: () => void;
+  };
+
+  const {
+    chessTree,
+    drillForkCrumbs,
+    pieceSet,
+    onNavigateCrumb,
+    onNavigateToParentFromCrumb,
+    onExitToFullTree,
+  }: TDrillBreadcrumbsProps = $props();
+
+  let drillExitPromptTriggerRef = $state<HTMLElement | null>(null);
+</script>
+
+<nav
+  class="col-span-3 border-b border-gray-300 !bg-gray-50 px-3 py-2"
+  aria-label="Навигация по уровням вариантов"
+>
+  <ol
+    class="flex flex-wrap items-center gap-x-0.5 gap-y-1 text-sm list-none m-0 p-0"
+  >
+    <li class="inline-flex items-center">
+      <button
+        type="button"
+        class="inline-flex items-center justify-center rounded p-1 text-primary hover:bg-gray-200/80 outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0"
+        aria-label="Полное дерево ходов"
+        onclick={onExitToFullTree}
+      >
+        <HomeIcon class="size-4 shrink-0" aria-hidden="true" />
+      </button>
+    </li>
+    {#each drillForkCrumbs as fork, i (fork.id)}
+      <li class="inline-flex items-center gap-x-0.5">
+        <ArrowRight class="size-4 shrink-0 " aria-hidden="true" />
+        <div class="relative inline-flex">
+          <button
+            type="button"
+            class={{
+              "inline-flex items-baseline gap-y-0.5 rounded px-0.5 py-0.5 text-left  underline-offset-2 cursor-pointer outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0": true,
+              "font-bold ": fork.id === chessTree.currentNode.id,
+              "text-gray-900": i === drillForkCrumbs.length - 1,
+              "text-primary": i !== drillForkCrumbs.length - 1,
+            }}
+            aria-current={i === drillForkCrumbs.length - 1 ? "page" : undefined}
+            aria-label="Перейти к этому уровню вариантов"
+            onclick={() => onNavigateCrumb(i)}
+          >
+            <DrillForkSanLabel {fork} {pieceSet} />
+          </button>
+
+          {#if fork.id === chessTree.currentNode.id}
+            <DropdownMenu.Root
+              open={chessTree.drillExitPromptOpen}
+              onOpenChange={(open) => {
+                chessTree.drillExitPromptOpen = open;
+              }}
+            >
+              <DropdownMenu.Trigger
+                bind:ref={drillExitPromptTriggerRef}
+                class="absolute inset-0 opacity-0 pointer-events-none"
+                aria-label="Меню выхода из дерева вариантов"
+              >
+                Меню выхода из дерева вариантов
+              </DropdownMenu.Trigger>
+              <DropdownMenu.Content
+                align="start"
+                class="w-fit"
+                onkeydown={(e) => {
+                  if (e.key !== "ArrowRight") return;
+                  chessTree.drillExitPromptOpen = false;
+                  e.preventDefault();
+                  e.stopPropagation();
+                }}
+              >
+                {@const parent = chessTree.getNodeParent(fork)}
+                {#if parent}
+                  <DropdownMenu.Item
+                    onclick={() => {
+                      onNavigateToParentFromCrumb(i);
+                      chessTree.drillExitPromptOpen = false;
+                    }}
+                    onkeydown={(e) => {
+                      if (e.key !== "ArrowLeft") return;
+                      onNavigateToParentFromCrumb(i);
+                      chessTree.drillExitPromptOpen = false;
+                      e.preventDefault();
+                      e.stopPropagation();
+                    }}
+                  >
+                    <DrillForkSanLabel fork={parent} {pieceSet} />
+                  </DropdownMenu.Item>
+                {/if}
+                <DropdownMenu.Item
+                  onclick={() => {
+                    chessTree.drillExitPromptOpen = false;
+                  }}
+                  onkeydown={(e) => {
+                    if (e.key !== "ArrowLeft") return;
+                    chessTree.drillExitPromptOpen = false;
+                    e.preventDefault();
+                    e.stopPropagation();
+                  }}
+                >
+                  Остаться
+                </DropdownMenu.Item>
+              </DropdownMenu.Content>
+            </DropdownMenu.Root>
+          {/if}
+        </div>
+      </li>
+    {/each}
+  </ol>
+</nav>

package/dist/(components)/DrillBreadcrumbs.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
+import type { PieceSet } from "@connectorvol/shared";
+import type { ChessTree } from "../(classes)/chessTree.svelte.js";
+type TDrillBreadcrumbsProps = {
+    /** Возвращает дерево партии. */
+    chessTree: ChessTree;
+    /** Возвращает цепочку узлов-развилок для хлебных крошек. */
+    drillForkCrumbs: ChessTreeNode[];
+    /** Возвращает набор фигур для иконок SAN. */
+    pieceSet: PieceSet;
+    /** Представляет переход по крошке drill-down. */
+    onNavigateCrumb: (targetForkIndex: number) => void;
+    /** Представляет выход на уровень выше относительно крошки с индексом. */
+    onNavigateToParentFromCrumb: (currentIndex: number) => void;
+    /** Представляет выход к полному дереву по кнопке «дом». */
+    onExitToFullTree: () => void;
+};
+declare const DrillBreadcrumbs: import("svelte").Component<TDrillBreadcrumbsProps, {}, "">;
+type DrillBreadcrumbs = ReturnType<typeof DrillBreadcrumbs>;
+export default DrillBreadcrumbs;

package/dist/(components)/DrillForkSanLabel.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
+  import MoveWithIcon from "./MoveWithIcon.svelte";
+  import NagBadges from "./NagBadges.svelte";
+  import type { PieceSet } from "@connectorvol/shared";
+
+  type TDrillForkSanLabelProps = {
+    /** Возвращает узел-развилку или ход для подписи. */
+    fork: ChessTreeNode;
+    /** Возвращает набор фигур для иконок SAN. */
+    pieceSet: PieceSet;
+  };
+
+  const { fork, pieceSet }: TDrillForkSanLabelProps = $props();
+</script>
+
+{#if fork.data.ply % 2 === 1}
+  <span>{fork.data.fullMoves}.</span>
+{:else}
+  <span>{Math.max(0, fork.data.fullMoves - 1)}...</span>
+{/if}
+<span class="inline-flex items-center gap-0 -ml-px">
+  <MoveWithIcon san={fork.data.san} ply={fork.data.ply} {pieceSet} /><NagBadges
+    nags={fork.data.nags}
+  />
+</span>

package/dist/(components)/DrillForkSanLabel.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
+import type { PieceSet } from "@connectorvol/shared";
+type TDrillForkSanLabelProps = {
+    /** Возвращает узел-развилку или ход для подписи. */
+    fork: ChessTreeNode;
+    /** Возвращает набор фигур для иконок SAN. */
+    pieceSet: PieceSet;
+};
+declare const DrillForkSanLabel: import("svelte").Component<TDrillForkSanLabelProps, {}, "">;
+type DrillForkSanLabel = ReturnType<typeof DrillForkSanLabel>;
+export default DrillForkSanLabel;

package/dist/(components)/DrillVariationList.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
+  import type { PieceSet } from "@connectorvol/shared";
+  import Move from "./Move.svelte";
+
+  type TDrillVariationListProps = {
+    /** Возвращает родительский узел текущего уровня drill-down. */
+    drillForkParent: ChessTreeNode;
+    /** Возвращает набор фигур для иконок SAN. */
+    pieceSet: PieceSet;
+    /** Возвращает true, если направляющие drill-панели должны быть акцентными. */
+    isDrillForkGuideForSelection: boolean;
+    /** Возвращает true, если ветка текущего выбора проходит через узел. */
+    isBranchOnCurrentPath: (node: ChessTreeNode) => boolean;
+  };
+
+  const {
+    drillForkParent,
+    pieceSet,
+    isDrillForkGuideForSelection,
+    isBranchOnCurrentPath,
+  }: TDrillVariationListProps = $props();
+</script>
+
+<div class="col-span-3 block w-full min-w-0">
+  <div
+    class="tree-viewer-overflow-tail-border relative flex min-w-0 w-full max-w-full gap-0 bg-gray-50/95 align-top border-b"
+  >
+    <div
+      class={{
+        "w-4 shrink-0 self-stretch border-r-2 bg-gray-100/60 transition-[border-color] duration-150": true,
+        "border-gray-600": isDrillForkGuideForSelection,
+        "border-gray-300": !isDrillForkGuideForSelection,
+      }}
+      aria-hidden="true"
+    ></div>
+    <ul
+      class="m-0 flex min-w-0 flex-1 list-none flex-col gap-1.5 py-2 pr-2 pl-0"
+    >
+      {#each drillForkParent.children as drillChild (drillChild.id)}
+        {@const branchOnPath = isBranchOnCurrentPath(drillChild)}
+        <li class="relative min-w-0 pl-3">
+          <span
+            class={{
+              "pointer-events-none absolute left-0 top-[0.65em] w-3 border-t-2 transition-[border-color] duration-150": true,
+              "border-gray-600": isDrillForkGuideForSelection && branchOnPath,
+              "border-gray-300": !isDrillForkGuideForSelection || !branchOnPath,
+            }}
+            aria-hidden="true"
+          ></span>
+          <div class="tracking-tight">
+            <Move
+              chessNode={drillChild}
+              depth={2}
+              shouldReserveEmptyMoveCell={drillForkParent.children.length > 1}
+              shouldRenderSiblingVariations={false}
+              parentNode={drillForkParent}
+              {pieceSet}
+            />
+          </div>
+        </li>
+      {/each}
+    </ul>
+  </div>
+</div>

package/dist/(components)/DrillVariationList.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
+import type { PieceSet } from "@connectorvol/shared";
+type TDrillVariationListProps = {
+    /** Возвращает родительский узел текущего уровня drill-down. */
+    drillForkParent: ChessTreeNode;
+    /** Возвращает набор фигур для иконок SAN. */
+    pieceSet: PieceSet;
+    /** Возвращает true, если направляющие drill-панели должны быть акцентными. */
+    isDrillForkGuideForSelection: boolean;
+    /** Возвращает true, если ветка текущего выбора проходит через узел. */
+    isBranchOnCurrentPath: (node: ChessTreeNode) => boolean;
+};
+declare const DrillVariationList: import("svelte").Component<TDrillVariationListProps, {}, "">;
+type DrillVariationList = ReturnType<typeof DrillVariationList>;
+export default DrillVariationList;