@connectorvol/tree 8.0.1 → 9.0.1

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

@@ -1,6 +1,5 @@
 import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
 import Move from "./Move.svelte";
-import type { PieceSet } from "@connectorvol/shared";
 type TMoveProps = {
     /** Возвращает узел хода в дереве партии. */
     chessNode: ChessTreeNode;
@@ -12,8 +11,6 @@ type TMoveProps = {
     shouldReserveEmptyMoveCell: boolean;
     /** Возвращает true, если нужно отрисовать соседние варианты у развилки. */
     shouldRenderSiblingVariations?: boolean;
-    /** Возвращает набор фигур для иконок SAN. */
-    pieceSet: PieceSet;
 };
 declare const Move: import("svelte").Component<TMoveProps, {}, "">;
 type Move = ReturnType<typeof Move>;

package/dist/(components)/MoveComment.svelte

@@ -1,32 +1,39 @@
 <script lang="ts">
-    type TMoveCommentProps = {
-        /** Возвращает текст комментария (возможны переводы строк). */
-        text: string;
-        /** Возвращает true, если строка в верхнем уровне сетки дерева. */
-        isHighestLevel: boolean;
-        /** Возвращает класс фона/отступов для уровня «верхняя строка». */
-        spaceBlockClass: string;
-    };
+  type TMoveCommentProps = {
+    /** Возвращает текст комментария (возможны переводы строк). */
+    text: string;
+    /** Возвращает true, если строка в верхнем уровне сетки дерева. */
+    isHighestLevel: boolean;
+    /** Возвращает класс фона/отступов для уровня «верхняя строка». */
+    spaceBlockClass: string;
+    /** Возвращает true, если под комментарием нет следующей строки ходов — рисуем нижнюю границу. */
+    showBottomBorder?: boolean;
+  };
 
-    const {
-        text,
-        isHighestLevel,
-        spaceBlockClass,
-    }: TMoveCommentProps = $props();
+  const {
+    text,
+    isHighestLevel,
+    spaceBlockClass,
+    showBottomBorder = false,
+  }: TMoveCommentProps = $props();
 
-    /** Представляет строки комментария после разбиения по `\n`. */
-    const commentLines = $derived(text.split("\n"));
+  /** Представляет строки комментария после разбиения по `\n`. */
+  const commentLines = $derived(text.split("\n"));
 </script>
 
 <div
-    class={{
-        "select-text": true,
-        "col-span-3 flex flex-col": isHighestLevel,
-        inline: !isHighestLevel,
-        [spaceBlockClass]: isHighestLevel,
-    }}
+  class={{
+    "select-text": true,
+    "col-span-3 flex flex-col": isHighestLevel,
+    inline: !isHighestLevel,
+    [spaceBlockClass]: isHighestLevel,
+    "border-b": isHighestLevel && showBottomBorder,
+    "tree-viewer-overflow-tail-border": isHighestLevel && showBottomBorder,
+  }}
+  style:background-color={isHighestLevel ? "var(--tree-viewer-bg)" : undefined}
+  style:border-color="var(--tree-viewer-border)"
 >
-    {#each commentLines as line, index (index)}
-        {#if index > 0}<br />{/if}{line}
-    {/each}
+  {#each commentLines as line, index (index)}
+    {#if index > 0}<br />{/if}{line}
+  {/each}
 </div>

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

@@ -5,6 +5,8 @@ type TMoveCommentProps = {
     isHighestLevel: boolean;
     /** Возвращает класс фона/отступов для уровня «верхняя строка». */
     spaceBlockClass: string;
+    /** Возвращает true, если под комментарием нет следующей строки ходов — рисуем нижнюю границу. */
+    showBottomBorder?: boolean;
 };
 declare const MoveComment: import("svelte").Component<TMoveCommentProps, {}, "">;
 type MoveComment = ReturnType<typeof MoveComment>;

package/dist/(components)/MoveSanWithMenu.svelte

@@ -5,7 +5,6 @@
   import NagBadges from "./NagBadges.svelte";
   import MoveWithIcon from "./MoveWithIcon.svelte";
   import MoveContextMenu from "./MoveContextMenu.svelte";
-  import type { PieceSet } from "@connectorvol/shared";
   import { ACTIVE_MOVE_CLASS } from "../(utils)/scrollToActiveMove.js";
   import type { ChessTree } from "../(classes)/chessTree.svelte.js";
 
@@ -21,8 +20,6 @@
     chessNode: ChessTreeNode;
     /** Возвращает родительский узел (для подписей полухода) или null. */
     parentNode: ChessTreeNode | null;
-    /** Возвращает набор фигур для иконок SAN. */
-    pieceSet: PieceSet;
     /** Возвращает true, если клик по ходу активен. */
     selectable: boolean;
     /** Возвращает true, если ход отображается в верхней строке сетки. */
@@ -50,7 +47,6 @@
   const {
     chessNode,
     parentNode,
-    pieceSet,
     selectable,
     isHighestLevel,
     isCurrentMove,
@@ -98,9 +94,10 @@
       [`${spaceInlineBlockClass} text-center`]: isHighestLevel,
       [`z-10 ${ACTIVE_MOVE_CLASS}`]: selectedOnHighestLevel,
       [ACTIVE_MOVE_CLASS]: isCurrentMove && !isHighestLevel,
-      "border-b border-gray-300": isHighestLevel && mainRowBottomEdge,
+      "border-b": isHighestLevel && mainRowBottomEdge,
       "tree-viewer-overflow-tail-border": isHighestLevel && mainRowBottomEdge,
     }}
+    style:border-color="var(--tree-viewer-border)"
     onmousedown={handleRowMouseDown}
   >
     <ContextMenu.Trigger
@@ -133,7 +130,7 @@
             class="invisible col-start-1 row-start-1 font-bold"
             aria-hidden="true"
           >
-            <MoveWithIcon san={node.data.san} ply={node.data.ply} {pieceSet} />
+            <MoveWithIcon san={node.data.san} ply={node.data.ply} />
           </span>
           <span
             class={{
@@ -141,7 +138,7 @@
               "font-bold": isCurrentMove,
             }}
           >
-            <MoveWithIcon san={node.data.san} ply={node.data.ply} {pieceSet} />
+            <MoveWithIcon san={node.data.san} ply={node.data.ply} />
           </span>
         </span>
       </span>

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

@@ -1,5 +1,4 @@
 import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
-import type { PieceSet } from "@connectorvol/shared";
 import type { ChessTree } from "../(classes)/chessTree.svelte.js";
 type TPreviewHoverHandlers = {
     /** Возвращает обработчик `mouseenter` для превью FEN. */
@@ -12,8 +11,6 @@ type TMoveSanWithMenuProps = {
     chessNode: ChessTreeNode;
     /** Возвращает родительский узел (для подписей полухода) или null. */
     parentNode: ChessTreeNode | null;
-    /** Возвращает набор фигур для иконок SAN. */
-    pieceSet: PieceSet;
     /** Возвращает true, если клик по ходу активен. */
     selectable: boolean;
     /** Возвращает true, если ход отображается в верхней строке сетки. */

package/dist/(components)/MoveWithIcon.svelte

@@ -1,79 +1,74 @@
 <script lang="ts">
-    import type { PieceSet } from "@connectorvol/shared";
-    import type { ParsedSanMove } from "../(utils)/parseSanMove.js";
+  import type { ParsedSanMove } from "../(utils)/parseSanMove.js";
 
-    import { PieceType } from "@connectorvol/shared";
+  import { PieceType } from "@connectorvol/shared";
 
-    import { parseSanMove } from "../(utils)/parseSanMove.js";
-    import PieceIcon from "./PieceIcon.svelte";
+  import { parseSanMove } from "../(utils)/parseSanMove.js";
+  import PieceIcon from "./PieceIcon.svelte";
 
-    interface Props {
-        /** SAN нотация хода */
-        san: string;
-        /** Номер полухода */
-        ply: number;
-        /** Размер иконки в пикселях */
-        iconSize?: number;
-        /** Набор фигур*/
-        pieceSet?: PieceSet;
-    }
+  interface Props {
+    /** SAN нотация хода */
+    san: string;
+    /** Номер полухода */
+    ply: number;
+    /** Размер глифа в пикселях */
+    iconSize?: number;
+  }
 
-    const { san, ply, iconSize = 16, pieceSet }: Props = $props();
+  const { san, ply, iconSize = 16 }: Props = $props();
 
-    const sanParseCache = new Map<string, ParsedSanMove>();
+  const sanParseCache = new Map<string, ParsedSanMove>();
 
-    function getParsedSanMove(san: string, ply: number): ParsedSanMove {
-        const key = `${san}|${ply}`;
-        const cached = sanParseCache.get(key);
-        if (cached) return cached;
-        const parsed = parseSanMove(san, ply);
-        sanParseCache.set(key, parsed);
-        return parsed;
-    }
+  function getParsedSanMove(san: string, ply: number): ParsedSanMove {
+    const key = `${san}|${ply}`;
+    const cached = sanParseCache.get(key);
+    if (cached) return cached;
+    const parsed = parseSanMove(san, ply);
+    sanParseCache.set(key, parsed);
+    return parsed;
+  }
 
-    const parsedMove: ParsedSanMove = $derived(getParsedSanMove(san, ply));
+  const parsedMove: ParsedSanMove = $derived(getParsedSanMove(san, ply));
 </script>
 
 <span class="inline-flex items-baseline">
-    {#if parsedMove.promotionPieceType}
-        {#if parsedMove.isCapture}
-            <span>{parsedMove.pawnFile}x{parsedMove.destination}</span>
-        {:else}
-            <span>{parsedMove.destination}</span>
-        {/if}
-        <PieceIcon
-            pieceType={parsedMove.promotionPieceType}
-            color={parsedMove.color}
-            size={iconSize}
-            {pieceSet}
-        />
-        {#if parsedMove.isCheck}
-            <span>+</span>
-        {:else if parsedMove.isCheckmate}
-            <span>#</span>
-        {/if}
-    {:else if parsedMove.isCastling || parsedMove.pieceType === PieceType.PAWN}
-        <!-- Для рокировки и обычных ходов пешки показываем только текст -->
-        <span>{san}</span>
+  {#if parsedMove.promotionPieceType}
+    {#if parsedMove.isCapture}
+      <span>{parsedMove.pawnFile}x{parsedMove.destination}</span>
     {:else}
-        <!-- Для фигур показываем иконку + уточнение + взятие + координаты -->
-        <PieceIcon
-            pieceType={parsedMove.pieceType}
-            color={parsedMove.color}
-            size={iconSize}
-            {pieceSet}
-        />
-        {#if parsedMove.disambiguation}
-            <span>{parsedMove.disambiguation}</span>
-        {/if}
-        {#if parsedMove.isCapture}
-            <span>x</span>
-        {/if}
-        <span>{parsedMove.destination}</span>
-        {#if parsedMove.isCheck}
-            <span>+</span>
-        {:else if parsedMove.isCheckmate}
-            <span>#</span>
-        {/if}
+      <span>{parsedMove.destination}</span>
     {/if}
+    <PieceIcon
+      pieceType={parsedMove.promotionPieceType}
+      color={parsedMove.color}
+      size={iconSize}
+    />
+    {#if parsedMove.isCheck}
+      <span>+</span>
+    {:else if parsedMove.isCheckmate}
+      <span>#</span>
+    {/if}
+  {:else if parsedMove.isCastling || parsedMove.pieceType === PieceType.PAWN}
+    <!-- Для рокировки и обычных ходов пешки показываем только текст -->
+    <span>{san}</span>
+  {:else}
+    <!-- Для фигур показываем глиф + уточнение + взятие + координаты -->
+    <PieceIcon
+      pieceType={parsedMove.pieceType}
+      color={parsedMove.color}
+      size={iconSize}
+    />
+    {#if parsedMove.disambiguation}
+      <span>{parsedMove.disambiguation}</span>
+    {/if}
+    {#if parsedMove.isCapture}
+      <span>x</span>
+    {/if}
+    <span>{parsedMove.destination}</span>
+    {#if parsedMove.isCheck}
+      <span>+</span>
+    {:else if parsedMove.isCheckmate}
+      <span>#</span>
+    {/if}
+  {/if}
 </span>

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

@@ -1,13 +1,10 @@
-import type { PieceSet } from "@connectorvol/shared";
 interface Props {
     /** SAN нотация хода */
     san: string;
     /** Номер полухода */
     ply: number;
-    /** Размер иконки в пикселях */
+    /** Размер глифа в пикселях */
     iconSize?: number;
-    /** Набор фигур*/
-    pieceSet?: PieceSet;
 }
 declare const MoveWithIcon: import("svelte").Component<Props, {}, "">;
 type MoveWithIcon = ReturnType<typeof MoveWithIcon>;

package/dist/(components)/PieceIcon.svelte

@@ -1,44 +1,27 @@
-<script lang="ts">
-  import type { PieceSet } from "@connectorvol/shared";
-
-  import { Color, DEFAULT_PIECE_SET, PieceType } from "@connectorvol/shared";
-
-  interface Props {
-    /** Тип фигуры */
-    pieceType: PieceType;
-    /** Цвет фигуры */
-    color: Color;
-    /** Размер иконки в пикселях */
-    size?: number;
-    /** Набор фигур*/
-    pieceSet?: PieceSet;
-  }
-
-  const {
-    pieceType,
-    color,
-    size = 16,
-    pieceSet = DEFAULT_PIECE_SET,
-  }: Props = $props();
-</script>
-
-<span
-  class={{
-    "inline-block translate-x-[1px] translate-y-[2px] self-baseline": true,
-  }}
-  style="width: {size}px; height: {size}px;"
->
-  {#if pieceType === PieceType.PAWN}
-    {@render pieceSet.pawn(color)}
-  {:else if pieceType === PieceType.KNIGHT}
-    {@render pieceSet.knight(color)}
-  {:else if pieceType === PieceType.BISHOP}
-    {@render pieceSet.bishop(color)}
-  {:else if pieceType === PieceType.ROOK}
-    {@render pieceSet.rook(color)}
-  {:else if pieceType === PieceType.QUEEN}
-    {@render pieceSet.queen(color)}
-  {:else if pieceType === PieceType.KING}
-    {@render pieceSet.king(color)}
-  {/if}
-</span>
+<script lang="ts">
+  import { pieceGlyph, type Color, type PieceType } from "@connectorvol/shared";
+
+  interface Props {
+    /** Тип фигуры */
+    pieceType: PieceType;
+    /** Цвет фигуры (выбор залитого/контурного глифа) */
+    color: Color;
+    /** Размер глифа в пикселях */
+    size?: number;
+  }
+
+  const { pieceType, color, size = 16 }: Props = $props();
+
+  const glyph = $derived(pieceGlyph(pieceType, color));
+</script>
+
+<!--
+  ponytail: рендерим глиф инлайновым span'ом и тянем его влево через
+  margin-right: -2px, чтобы компенсировать нативный правый padding,
+  который есть у шахматных символов в большинстве шрифтов. Без этого
+  между ♘ и ходом виден зазор ~2px.
+-->
+<span
+  class="tree-viewer-piece leading-none"
+  style="font-size: {size}px; margin-right: -2px;">{glyph}</span
+>

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

@@ -1,14 +1,11 @@
-import type { PieceSet } from "@connectorvol/shared";
-import { Color, PieceType } from "@connectorvol/shared";
+import { type Color, type PieceType } from "@connectorvol/shared";
 interface Props {
     /** Тип фигуры */
     pieceType: PieceType;
-    /** Цвет фигуры */
+    /** Цвет фигуры (выбор залитого/контурного глифа) */
     color: Color;
-    /** Размер иконки в пикселях */
+    /** Размер глифа в пикселях */
     size?: number;
-    /** Набор фигур*/
-    pieceSet?: PieceSet;
 }
 declare const PieceIcon: import("svelte").Component<Props, {}, "">;
 type PieceIcon = ReturnType<typeof PieceIcon>;