@connectorvol/tree 8.0.1 → 9.0.1

package/dist/(components)/Move.svelte

@@ -1,390 +1,389 @@
 <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 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);
-    }
+  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";
+
+  const HIGHEST_LEVEL = 1;
+
+  type TMoveProps = {
+    /** Возвращает узел хода в дереве партии. */
+    chessNode: ChessTreeNode;
+    /** Возвращает глубину вложенности относительно корня отображения. */
+    depth: number;
+    /** Возвращает родительский узел или null для корня. */
+    parentNode: ChessTreeNode | null;
+    /** Возвращает true, если нужна пустая ячейка хода (сетка верхнего уровня). */
+    shouldReserveEmptyMoveCell: boolean;
+    /** Возвращает true, если нужно отрисовать соседние варианты у развилки. */
+    shouldRenderSiblingVariations?: boolean;
+  };
+
+  const {
+    chessNode,
+    depth,
+    parentNode,
+    shouldReserveEmptyMoveCell,
+    shouldRenderSiblingVariations = true,
+  }: 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";
+  const spaceInlineBlockClass = "p-2";
+
+  const isHighestLevel = $derived(depth === HIGHEST_LEVEL);
+
+  /**
+   * Представляет признак: комментарий в верхней сетке — последняя строка (ниже нет ходов и вариантов).
+   * Для чёрного полухода нижнюю границу рисует обёртка сетки (`isFullMainLineTailRow`).
+   */
+  const showCommentBottomBorder = $derived(
+    isHighestLevel &&
+      !!firstCommentText &&
+      (childMoves?.length ?? 0) === 0 &&
+      !isForcedLineStart &&
+      moveNode.data.ply % 2 === 1 &&
+      !(
+        parentNode !== null &&
+        parentNode.children.length > 1 &&
+        shouldRenderSiblingVariations
+      ),
+  );
+
+  /**
+   * Представляет признак: в верхней сетке после белого полухода показывается пустая ячейка чёрных
+   * без ноды (партия оборвалась на ходе белых) — нижнюю границу рисуем только под двумя первыми колонками.
+   */
+  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": addsEmptyMainLineBlackCell && isHighestLevel,
+      "tree-viewer-overflow-tail-border":
+        addsEmptyMainLineBlackCell && isHighestLevel,
+    }}
+    style:border-color="var(--tree-viewer-border)"
+  >
+    {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
+    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 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 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 isLeadingBlackHalfMoveFromRoot}
-        <span
-            class={{
-                "flex items-center justify-center text-center": isHighestLevel,
-            }}
-        >
-            {Math.max(1, moveNode.data.fullMoves - 1)}
-        </span>
-        {@render emptyMove()}
+  {#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}
+      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 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 firstCommentText}
+    {#if moveNode.data.ply % 2 === 1}
+      <MoveComment
+        text={firstCommentText}
+        {isHighestLevel}
+        {spaceBlockClass}
+        showBottomBorder={showCommentBottomBorder}
+      />
+      {#if !shouldReserveEmptyMoveCell && childMoves?.[0] && !isForcedLineStart}
+        {@render fullMovesCounter()}
+        {@render emptyMove()}
+      {/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 moveNode.data.ply % 2 === 0}
+      <MoveComment
+        text={firstCommentText}
+        {isHighestLevel}
+        {spaceBlockClass}
+        showBottomBorder={showCommentBottomBorder}
+      />
     {/if}
+  {/if}
 {:else}
-    {#if moveNode.data.ply % 2 === 0 && game.chessTree.forcedNodeId === moveNode.parentId && parentNode?.children[0].id === moveNode.id}
-        {@render fullMovesCounter(1)}
+  {#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}
+      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 !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 moveNode.data.ply % 2 === 0}
+      <MoveComment text={firstCommentText} {isHighestLevel} {spaceBlockClass} />
     {/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,
-            }}
-        >
-            <Move
-                {pieceSet}
-                chessNode={chessNode.children[0]}
-                shouldReserveEmptyMoveCell={chessNode.children.length > 1}
-                depth={depth + 1}
-                shouldRenderSiblingVariations={true}
-                parentNode={chessNode}
-            ></Move>
-        </div>
+{#if isForcedLineStart && childMoves?.[0]}
+  {#if isHighestLevel}
+    <div class="col-span-3 col-start-1 w-full min-w-0">
+      <div
+        class="{spaceBlockClass} tracking-tight"
+        style:background-color="var(--tree-viewer-bg)"
+      >
+        <Move
+          chessNode={chessNode.children[0]}
+          shouldReserveEmptyMoveCell={chessNode.children.length > 1}
+          depth={depth + 1}
+          shouldRenderSiblingVariations={true}
+          parentNode={chessNode}
+        ></Move>
+      </div>
     </div>
+  {:else}
+    <Move
+      chessNode={chessNode.children[0]}
+      shouldReserveEmptyMoveCell={childMoves.length > 1}
+      {depth}
+      parentNode={chessNode}
+    ></Move>
+  {/if}
 {/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
+      chessNode={chessNode.children[0]}
+      shouldReserveEmptyMoveCell={childMoves?.length > 1}
+      {depth}
+      parentNode={chessNode}
+    ></Move>
+  {/if}
 {/if}