@connectorvol/tree 4.1.0 → 4.3.0

package/dist/(components)/Move.svelte

@@ -1,354 +1,390 @@
 <script lang="ts">
-  import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
-
-  import { parseComment } from "@connectorvol/chessops/pgn";
-
-  import { createPreviewHover } from "../(utils)/createPreviewHover.js";
-  import { getGameContext } from "../(utils)/context.js";
-  import Move from "./Move.svelte";
-  import MoveComment from "./MoveComment.svelte";
-  import MoveSanWithMenu from "./MoveSanWithMenu.svelte";
-  import VariationGroup from "./VariationGroup.svelte";
-  import type { PieceSet } from "@connectorvol/shared";
-
-  const HIGHEST_LEVEL = 1;
-
-  type TMoveProps = {
-    /** Возвращает узел хода в дереве партии. */
-    chessNode: ChessTreeNode;
-    /** Возвращает глубину вложенности относительно корня отображения. */
-    depth: number;
-    /** Возвращает родительский узел или null для корня. */
-    parentNode: ChessTreeNode | null;
-    /** Возвращает true, если нужна пустая ячейка хода (сетка верхнего уровня). */
-    shouldReserveEmptyMoveCell: boolean;
-    /** Возвращает true, если нужно отрисовать соседние варианты у развилки. */
-    shouldRenderSiblingVariations?: boolean;
-    /** Возвращает набор фигур для иконок SAN. */
-    pieceSet: PieceSet;
-  };
-
-  const {
-    chessNode,
-    depth,
-    parentNode,
-    shouldReserveEmptyMoveCell,
-    shouldRenderSiblingVariations = true,
-    pieceSet,
-  }: TMoveProps = $props();
-
-  /** Контекст игры без деструктуризации — иначе selectable и chessTree «замораживаются» при первом рендере TreeViewer. */
-  const game = getGameContext();
-
-  /** Представляет обработчик выбора текущего узла по `mousedown`. */
-  function handleMoveMouseDown() {
-    if (!game.selectable || !moveNode) return;
-    game.chessTree.currentNode = chessNode;
-
-    game.onSelectNode();
-    game.onChessNodeSelected?.(game.chessTree.currentNode);
-  }
-
-  const moveNode = $derived(chessNode);
-  const previewHover = createPreviewHover({
-    setPreviewFen: game.setPreviewFen,
-    getFen: () => moveNode.data.fen,
-    getLastMove: () => moveNode.data.lastMove ?? null,
-    getDelayMs: () => game.previewHoverDelayMs,
-  });
-  const isCurrentMove = $derived(chessNode.id === game.chessTree.currentNode.id);
-  /** Представляет текст первого PGN-комментария узла после разбора `comments[0]`, синхронно с правкой строки под деревом. */
-  const firstCommentParsed = $derived(
-    moveNode.data.comments?.[0] !== undefined
-      ? parseComment(moveNode.data.comments[0])
-      : null,
-  );
-  const firstCommentText = $derived(firstCommentParsed?.text);
-  const childMoves = $derived(chessNode.children);
-  const isForcedLineStart = $derived(chessNode.id === game.chessTree.forcedNodeId);
-
-  /** Представляет признак активного drill-down «варианты отдельно». */
-  const variationDrillDownActive = $derived(
-    game.chessTree.isVariationDrillDownActive(),
-  );
-
-  /**
-   * Представляет признак: развилка на этом уровне совпадает с узлом, для которого
-   * `ChessTree` рассчитывает акцент направляющих при текущем выборе.
-   */
-  const isActiveForkForSelection = $derived(
-    shouldRenderSiblingVariations &&
-      parentNode !== null &&
-      (parentNode.children?.length ?? 0) > 1 &&
-      game.chessTree.currentGuideHighlightForkParent?.id === parentNode.id,
-  );
-
-  const spaceBlockClass = "px-3 py-2 !bg-gray-50/95";
-  const spaceInlineBlockClass = "p-2";
-
-  const isHighestLevel = $derived(depth === HIGHEST_LEVEL);
-
-  /**
-   * Представляет признак: в верхней сетке после белого полухода показывается пустая ячейка чёрных
-   * без ноды (партия оборвалась на ходе белых) — нижнюю границу рисуем только под двумя первыми колонками.
-   */
-  const addsEmptyMainLineBlackCell = $derived(
-    isHighestLevel &&
-      moveNode.data.ply % 2 === 1 &&
-      !isForcedLineStart &&
-      (parentNode === null || parentNode.children.length <= 1) &&
-      !firstCommentText &&
-      (childMoves?.length ?? 0) === 0,
-  );
-
-  /**
-   * Представляет признак: верхняя строка — первый полуход чёрных от корня партии (нотация «1... SAN»).
-   */
-  const isLeadingBlackHalfMoveFromRoot = $derived(
-    isHighestLevel &&
-      parentNode !== null &&
-      parentNode.data.ply === 0 &&
-      moveNode.data.ply % 2 === 0,
-  );
-
-  /** Представляет true, если в контекстном меню показывать «Поднять приоритет». */
-  const showUpPriorityItem = $derived(depth > HIGHEST_LEVEL + 1);
-
-  /**
-   * Представляет признак: SAN главного варианта (children[0]) переносится в блок списка веток,
-   * чтобы не дублировать его перед группой (например «8. g3» только среди g3 / f3 / a3).
-   */
-  const shouldRenderSanInsideVariationGroup = $derived(
-    !isHighestLevel &&
-      shouldRenderSiblingVariations &&
-      parentNode !== null &&
-      parentNode.children.length > 1 &&
-      parentNode.children[0]?.id === chessNode.id,
-  );
-
-  /**
-   * Представляет обработчик клика по зоне линий ветвления, открывающий режим «варианты отдельно».
-   */
-  function onVariationLinesHit(e: MouseEvent) {
-    e.stopPropagation();
-    if (parentNode === null) return;
-    const selectFork = !game.chessTree.isCurrentNodeWithinForkSubtree(parentNode);
-    game.chessTree.openVariationDrillDown(parentNode, { selectFork });
-    game.onSelectNode();
-    game.onChessNodeSelected?.(game.chessTree.currentNode);
-  }
+    import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
+
+    import { parseComment } from "@connectorvol/chessops/pgn";
+
+    import { createPreviewHover } from "../(utils)/createPreviewHover.js";
+    import { getGameContext } from "../(utils)/context.js";
+    import Move from "./Move.svelte";
+    import MoveComment from "./MoveComment.svelte";
+    import MoveSanWithMenu from "./MoveSanWithMenu.svelte";
+    import VariationGroup from "./VariationGroup.svelte";
+    import type { PieceSet } from "@connectorvol/shared";
+
+    const HIGHEST_LEVEL = 1;
+
+    type TMoveProps = {
+        /** Возвращает узел хода в дереве партии. */
+        chessNode: ChessTreeNode;
+        /** Возвращает глубину вложенности относительно корня отображения. */
+        depth: number;
+        /** Возвращает родительский узел или null для корня. */
+        parentNode: ChessTreeNode | null;
+        /** Возвращает true, если нужна пустая ячейка хода (сетка верхнего уровня). */
+        shouldReserveEmptyMoveCell: boolean;
+        /** Возвращает true, если нужно отрисовать соседние варианты у развилки. */
+        shouldRenderSiblingVariations?: boolean;
+        /** Возвращает набор фигур для иконок SAN. */
+        pieceSet: PieceSet;
+    };
+
+    const {
+        chessNode,
+        depth,
+        parentNode,
+        shouldReserveEmptyMoveCell,
+        shouldRenderSiblingVariations = true,
+        pieceSet,
+    }: TMoveProps = $props();
+
+    /** Контекст игры без деструктуризации — иначе selectable и chessTree «замораживаются» при первом рендере TreeViewer. */
+    const game = getGameContext();
+
+    /** Представляет обработчик выбора текущего узла по `mousedown`. */
+    function handleMoveMouseDown() {
+        if (!game.selectable || !moveNode) return;
+        game.chessTree.currentNode = chessNode;
+
+        game.onSelectNode();
+        game.onChessNodeSelected?.(game.chessTree.currentNode);
+    }
+
+    const moveNode = $derived(chessNode);
+    const previewHover = createPreviewHover({
+        setPreviewFen: game.setPreviewFen,
+        getFen: () => moveNode.data.fen,
+        getLastMove: () => moveNode.data.lastMove ?? null,
+        getDelayMs: () => game.previewHoverDelayMs,
+    });
+    const isCurrentMove = $derived(
+        chessNode.id === game.chessTree.currentNode.id,
+    );
+    /** Представляет текст первого PGN-комментария узла после разбора `comments[0]`, синхронно с правкой строки под деревом. */
+    const commentParseCache = new Map<
+        string,
+        ReturnType<typeof parseComment>
+    >();
+
+    function getParsedComment(raw: string | undefined) {
+        if (raw === undefined) return null;
+        const cached = commentParseCache.get(raw);
+        if (cached) return cached;
+        const parsed = parseComment(raw);
+        commentParseCache.set(raw, parsed);
+        return parsed;
+    }
+
+    const firstCommentParsed = $derived(
+        getParsedComment(moveNode.data.comments?.[0]),
+    );
+    const firstCommentText = $derived(firstCommentParsed?.text);
+    const childMoves = $derived(chessNode.children);
+    const isForcedLineStart = $derived(
+        chessNode.id === game.chessTree.forcedNodeId,
+    );
+
+    /** Представляет признак активного drill-down «варианты отдельно». */
+    const variationDrillDownActive = $derived(
+        game.chessTree.isVariationDrillDownActive(),
+    );
+
+    /**
+     * Представляет признак: развилка на этом уровне совпадает с узлом, для которого
+     * `ChessTree` рассчитывает акцент направляющих при текущем выборе.
+     */
+    const isActiveForkForSelection = $derived(
+        shouldRenderSiblingVariations &&
+            parentNode !== null &&
+            (parentNode.children?.length ?? 0) > 1 &&
+            game.chessTree.currentGuideHighlightForkParent?.id ===
+                parentNode.id,
+    );
+
+    const spaceBlockClass = "px-3 py-2 !bg-gray-50/95";
+    const spaceInlineBlockClass = "p-2";
+
+    const isHighestLevel = $derived(depth === HIGHEST_LEVEL);
+
+    /**
+     * Представляет признак: в верхней сетке после белого полухода показывается пустая ячейка чёрных
+     * без ноды (партия оборвалась на ходе белых) — нижнюю границу рисуем только под двумя первыми колонками.
+     */
+    const addsEmptyMainLineBlackCell = $derived(
+        isHighestLevel &&
+            moveNode.data.ply % 2 === 1 &&
+            !isForcedLineStart &&
+            (parentNode === null || parentNode.children.length <= 1) &&
+            !firstCommentText &&
+            (childMoves?.length ?? 0) === 0,
+    );
+
+    /**
+     * Представляет признак: верхняя строка — первый полуход чёрных от корня партии (нотация «1... SAN»).
+     */
+    const isLeadingBlackHalfMoveFromRoot = $derived(
+        isHighestLevel &&
+            parentNode !== null &&
+            parentNode.data.ply === 0 &&
+            moveNode.data.ply % 2 === 0,
+    );
+
+    /** Представляет true, если в контекстном меню показывать «Поднять приоритет». */
+    const showUpPriorityItem = $derived(depth > HIGHEST_LEVEL + 1);
+
+    /**
+     * Представляет признак: SAN главного варианта (children[0]) переносится в блок списка веток,
+     * чтобы не дублировать его перед группой (например «8. g3» только среди g3 / f3 / a3).
+     */
+    const shouldRenderSanInsideVariationGroup = $derived(
+        !isHighestLevel &&
+            shouldRenderSiblingVariations &&
+            parentNode !== null &&
+            parentNode.children.length > 1 &&
+            parentNode.children[0]?.id === chessNode.id,
+    );
+
+    /**
+     * Представляет обработчик клика по зоне линий ветвления, открывающий режим «варианты отдельно».
+     */
+    function onVariationLinesHit(e: MouseEvent) {
+        e.stopPropagation();
+        if (parentNode === null) return;
+        const selectFork =
+            !game.chessTree.isCurrentNodeWithinForkSubtree(parentNode);
+        game.chessTree.openVariationDrillDown(parentNode, { selectFork });
+        game.onSelectNode();
+        game.onChessNodeSelected?.(game.chessTree.currentNode);
+    }
 </script>
 
 {#snippet emptyMove()}
-  <div class="flex items-center justify-center text-center">...</div>
+    <div class="flex items-center justify-center text-center">...</div>
 {/snippet}
 
 {#snippet emptyMainLineBlackCell()}
-  <div
-    class="tree-viewer-tail-no-node-cell flex min-w-0 items-center justify-center border-b-0 p-2 text-center"
-  ></div>
+    <div
+        class="tree-viewer-tail-no-node-cell flex min-w-0 items-center justify-center border-b-0 p-2 text-center"
+    ></div>
 {/snippet}
 
 {#snippet fullMovesCounter(minus: number = 0)}
-  <span
-    class={{
-      "flex items-center justify-center text-center": isHighestLevel,
-      inline: !isHighestLevel,
-      "border-b border-gray-300": addsEmptyMainLineBlackCell && isHighestLevel,
-      "tree-viewer-overflow-tail-border":
-        addsEmptyMainLineBlackCell && isHighestLevel,
-    }}
-  >
-    {moveNode.data.fullMoves - minus}{!isHighestLevel &&
-    moveNode.data.ply % 2 === 1
-      ? "..."
-      : !isHighestLevel && moveNode.data.ply % 2 === 0
-        ? "..."
-        : ""}
-  </span>
+    <span
+        class={{
+            "flex items-center justify-center text-center": isHighestLevel,
+            inline: !isHighestLevel,
+            "border-b border-gray-300":
+                addsEmptyMainLineBlackCell && isHighestLevel,
+            "tree-viewer-overflow-tail-border":
+                addsEmptyMainLineBlackCell && isHighestLevel,
+        }}
+    >
+        {moveNode.data.fullMoves - minus}{!isHighestLevel &&
+        moveNode.data.ply % 2 === 1
+            ? "..."
+            : !isHighestLevel && moveNode.data.ply % 2 === 0
+              ? "..."
+              : ""}
+    </span>
 {/snippet}
 
 {#snippet variationMoveRow(child: ChessTreeNode)}
-  <Move
-    {pieceSet}
-    chessNode={child}
-    shouldReserveEmptyMoveCell={parentNode !== null &&
-      parentNode.children.length > 1}
-    depth={depth + 1}
-    shouldRenderSiblingVariations={false}
-    {parentNode}
-  />
+    <Move
+        {pieceSet}
+        chessNode={child}
+        shouldReserveEmptyMoveCell={parentNode !== null &&
+            parentNode.children.length > 1}
+        depth={depth + 1}
+        shouldRenderSiblingVariations={false}
+        {parentNode}
+    />
 {/snippet}
 
 {#if isHighestLevel}
-  {#if moveNode.data.ply % 2 === 1}
-    {@render fullMovesCounter()}
-  {/if}
-
-  {#if variationDrillDownActive && moveNode.data.ply % 2 === 0 && game.chessTree.drillForkParent !== null && game.chessTree.drillForkParent.children[0]?.id === chessNode.id && moveNode.parentId}
-    <span
-      class={{
-        "flex items-center justify-center text-center": isHighestLevel,
-      }}
-    >
-      {moveNode.data.fullMoves}
-    </span>
-    {@render emptyMove()}
-  {/if}
+    {#if moveNode.data.ply % 2 === 1}
+        {@render fullMovesCounter()}
+    {/if}
 
-  {#if isLeadingBlackHalfMoveFromRoot}
-    <span
-      class={{
-        "flex items-center justify-center text-center": isHighestLevel,
-      }}
-    >
-      {Math.max(1, moveNode.data.fullMoves - 1)}
-    </span>
-    {@render emptyMove()}
-  {/if}
-
-  {#if moveNode.parentId}
-    <MoveSanWithMenu
-      {chessNode}
-      {parentNode}
-      {pieceSet}
-      selectable={game.selectable}
-      {isHighestLevel}
-      {isCurrentMove}
-      previewHover={{
-        onmouseenter: previewHover.onmouseenter,
-        onmouseleave: previewHover.onmouseleave,
-      }}
-      onMoveMouseDown={handleMoveMouseDown}
-      {spaceInlineBlockClass}
-      nags={moveNode.data.nags}
-      chessTree={game.chessTree}
-      {showUpPriorityItem}
-      onDeleteVariant={game.onDeleteVariant}
-      mainRowBottomEdge={addsEmptyMainLineBlackCell}
-    />
-  {/if}
-  {#if isHighestLevel && moveNode.data.ply % 2 === 1}
-    {#if isForcedLineStart || (parentNode != null && parentNode.children.length > 1) || !!firstCommentText}
-      {@render emptyMove()}
-    {:else if (childMoves?.length ?? 0) === 0}
-      {@render emptyMainLineBlackCell()}
+    {#if variationDrillDownActive && moveNode.data.ply % 2 === 0 && game.chessTree.drillForkParent !== null && game.chessTree.drillForkParent.children[0]?.id === chessNode.id && moveNode.parentId}
+        <span
+            class={{
+                "flex items-center justify-center text-center": isHighestLevel,
+            }}
+        >
+            {moveNode.data.fullMoves}
+        </span>
+        {@render emptyMove()}
     {/if}
-  {/if}
 
-  {#if firstCommentText}
-    {#if moveNode.data.ply % 2 === 1}
-      <MoveComment text={firstCommentText} {isHighestLevel} {spaceBlockClass} />
-      {#if !shouldReserveEmptyMoveCell && childMoves?.[0] && !isForcedLineStart}
-        {@render fullMovesCounter()}
+    {#if isLeadingBlackHalfMoveFromRoot}
+        <span
+            class={{
+                "flex items-center justify-center text-center": isHighestLevel,
+            }}
+        >
+            {Math.max(1, moveNode.data.fullMoves - 1)}
+        </span>
         {@render emptyMove()}
-      {/if}
     {/if}
 
-    {#if moveNode.data.ply % 2 === 0}
-      <MoveComment text={firstCommentText} {isHighestLevel} {spaceBlockClass} />
+    {#if moveNode.parentId}
+        <MoveSanWithMenu
+            {chessNode}
+            {parentNode}
+            {pieceSet}
+            selectable={game.selectable}
+            {isHighestLevel}
+            {isCurrentMove}
+            previewHover={{
+                onmouseenter: previewHover.onmouseenter,
+                onmouseleave: previewHover.onmouseleave,
+            }}
+            onMoveMouseDown={handleMoveMouseDown}
+            {spaceInlineBlockClass}
+            nags={moveNode.data.nags}
+            chessTree={game.chessTree}
+            {showUpPriorityItem}
+            onDeleteVariant={game.onDeleteVariant}
+            mainRowBottomEdge={addsEmptyMainLineBlackCell}
+        />
+    {/if}
+    {#if isHighestLevel && moveNode.data.ply % 2 === 1}
+        {#if isForcedLineStart || (parentNode != null && parentNode.children.length > 1) || !!firstCommentText}
+            {@render emptyMove()}
+        {:else if (childMoves?.length ?? 0) === 0}
+            {@render emptyMainLineBlackCell()}
+        {/if}
+    {/if}
+
+    {#if firstCommentText}
+        {#if moveNode.data.ply % 2 === 1}
+            <MoveComment
+                text={firstCommentText}
+                {isHighestLevel}
+                {spaceBlockClass}
+            />
+            {#if !shouldReserveEmptyMoveCell && childMoves?.[0] && !isForcedLineStart}
+                {@render fullMovesCounter()}
+                {@render emptyMove()}
+            {/if}
+        {/if}
+
+        {#if moveNode.data.ply % 2 === 0}
+            <MoveComment
+                text={firstCommentText}
+                {isHighestLevel}
+                {spaceBlockClass}
+            />
+        {/if}
     {/if}
-  {/if}
 {:else}
-  {#if moveNode.data.ply % 2 === 0 && game.chessTree.forcedNodeId === moveNode.parentId && parentNode?.children[0].id === moveNode.id}
-    {@render fullMovesCounter(1)}
-  {/if}
-
-  {#if !shouldRenderSanInsideVariationGroup}
-    <MoveSanWithMenu
-      {chessNode}
-      {parentNode}
-      {pieceSet}
-      selectable={game.selectable}
-      {isHighestLevel}
-      {isCurrentMove}
-      previewHover={{
-        onmouseenter: previewHover.onmouseenter,
-        onmouseleave: previewHover.onmouseleave,
-      }}
-      onMoveMouseDown={handleMoveMouseDown}
-      {spaceInlineBlockClass}
-      nags={moveNode.data.nags}
-      chessTree={game.chessTree}
-      {showUpPriorityItem}
-      onDeleteVariant={game.onDeleteVariant}
-    />
-  {/if}
-  {#if firstCommentText}
-    {#if moveNode.data.ply % 2 === 1}
-      <MoveComment text={firstCommentText} {isHighestLevel} {spaceBlockClass} />
-      {#if !shouldReserveEmptyMoveCell && childMoves?.[0] && !shouldRenderSanInsideVariationGroup}
-        {@render fullMovesCounter()}
-      {/if}
+    {#if moveNode.data.ply % 2 === 0 && game.chessTree.forcedNodeId === moveNode.parentId && parentNode?.children[0].id === moveNode.id}
+        {@render fullMovesCounter(1)}
     {/if}
 
-    {#if moveNode.data.ply % 2 === 0}
-      <MoveComment text={firstCommentText} {isHighestLevel} {spaceBlockClass} />
+    {#if !shouldRenderSanInsideVariationGroup}
+        <MoveSanWithMenu
+            {chessNode}
+            {parentNode}
+            {pieceSet}
+            selectable={game.selectable}
+            {isHighestLevel}
+            {isCurrentMove}
+            previewHover={{
+                onmouseenter: previewHover.onmouseenter,
+                onmouseleave: previewHover.onmouseleave,
+            }}
+            onMoveMouseDown={handleMoveMouseDown}
+            {spaceInlineBlockClass}
+            nags={moveNode.data.nags}
+            chessTree={game.chessTree}
+            {showUpPriorityItem}
+            onDeleteVariant={game.onDeleteVariant}
+        />
+    {/if}
+    {#if firstCommentText}
+        {#if moveNode.data.ply % 2 === 1}
+            <MoveComment
+                text={firstCommentText}
+                {isHighestLevel}
+                {spaceBlockClass}
+            />
+            {#if !shouldReserveEmptyMoveCell && childMoves?.[0] && !shouldRenderSanInsideVariationGroup}
+                {@render fullMovesCounter()}
+            {/if}
+        {/if}
+
+        {#if moveNode.data.ply % 2 === 0}
+            <MoveComment
+                text={firstCommentText}
+                {isHighestLevel}
+                {spaceBlockClass}
+            />
+        {/if}
     {/if}
-  {/if}
 {/if}
 
 {#if parentNode && parentNode?.children.length > 1 && shouldRenderSiblingVariations}
-  {@const showVariationDrillExpand = !game.chessTree.isNodeOnMainLine(chessNode)}
-  <VariationGroup
-    {parentNode}
-    {isHighestLevel}
-    {isActiveForkForSelection}
-    {showVariationDrillExpand}
-    {onVariationLinesHit}
-    {variationMoveRow}
-    isBranchOnCurrentPath={(n) => game.chessTree.isCurrentOnPathFromNode(n)}
-  />
+    {@const showVariationDrillExpand =
+        !game.chessTree.isNodeOnMainLine(chessNode)}
+    <VariationGroup
+        {parentNode}
+        {isHighestLevel}
+        {isActiveForkForSelection}
+        {showVariationDrillExpand}
+        {onVariationLinesHit}
+        {variationMoveRow}
+        isBranchOnCurrentPath={(n) => game.chessTree.isCurrentOnPathFromNode(n)}
+    />
 {/if}
 
 {#if isForcedLineStart}
-  <div
-    class={{
-      "col-span-3 col-start-1 w-full min-w-0": isHighestLevel,
-      "block w-full min-w-0 basis-full shrink-0": !isHighestLevel,
-    }}
-  >
     <div
-      class={{
-        "block w-full min-w-0": !isHighestLevel,
-        [spaceBlockClass]: isHighestLevel,
-        "tracking-tight": true,
-      }}
+        class={{
+            "col-span-3 col-start-1 w-full min-w-0": isHighestLevel,
+            "block w-full min-w-0 basis-full shrink-0": !isHighestLevel,
+        }}
     >
-      <Move
-        {pieceSet}
-        chessNode={chessNode.children[0]}
-        shouldReserveEmptyMoveCell={chessNode.children.length > 1}
-        depth={depth + 1}
-        shouldRenderSiblingVariations={true}
-        parentNode={chessNode}
-      ></Move>
+        <div
+            class={{
+                "block w-full min-w-0": !isHighestLevel,
+                [spaceBlockClass]: isHighestLevel,
+                "tracking-tight": true,
+            }}
+        >
+            <Move
+                {pieceSet}
+                chessNode={chessNode.children[0]}
+                shouldReserveEmptyMoveCell={chessNode.children.length > 1}
+                depth={depth + 1}
+                shouldRenderSiblingVariations={true}
+                parentNode={chessNode}
+            ></Move>
+        </div>
     </div>
-  </div>
 {/if}
 
 {#if shouldReserveEmptyMoveCell && moveNode.data.ply % 2 === 1 && isHighestLevel && !isForcedLineStart && childMoves?.[0]}
-  {@render fullMovesCounter()}
-  {@render emptyMove()}
+    {@render fullMovesCounter()}
+    {@render emptyMove()}
 {/if}
 {#if variationDrillDownActive && isHighestLevel && moveNode.data.ply % 2 === 1 && !shouldReserveEmptyMoveCell && childMoves?.[0] && !isForcedLineStart && game.chessTree.drillForkParent !== null && game.chessTree.drillForkParent.children[0]?.id === chessNode.id}
-  <span
-    class={{
-      "flex items-center justify-center text-center": isHighestLevel,
-    }}
-  >
-    {moveNode.data.fullMoves}
-  </span>
-  {@render emptyMove()}
+    <span
+        class={{
+            "flex items-center justify-center text-center": isHighestLevel,
+        }}
+    >
+        {moveNode.data.fullMoves}
+    </span>
+    {@render emptyMove()}
 {/if}
 {#if childMoves?.[0] && !shouldRenderSanInsideVariationGroup}
-  {#if !isForcedLineStart}
-    <Move
-      {pieceSet}
-      chessNode={chessNode.children[0]}
-      shouldReserveEmptyMoveCell={childMoves?.length > 1}
-      {depth}
-      parentNode={chessNode}
-    ></Move>
-  {/if}
+    {#if !isForcedLineStart}
+        <Move
+            {pieceSet}
+            chessNode={chessNode.children[0]}
+            shouldReserveEmptyMoveCell={childMoves?.length > 1}
+            {depth}
+            parentNode={chessNode}
+        ></Move>
+    {/if}
 {/if}