@connectorvol/tree 4.2.0 → 5.0.0

package/dist/(components)/MoveWithIcon.svelte

@@ -35,17 +35,37 @@
 </script>
 
 <span class="inline-flex items-baseline">
-    {#if parsedMove.isCastling || parsedMove.pieceType === PieceType.PAWN}
-        <!-- Для рокировки показываем только текст -->
+    {#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>
     {: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}

package/dist/(components)/TreeViewer.svelte

@@ -920,6 +920,7 @@
     bind:this={variantDropdownNavigator}
     variants={chessTree.currentNode?.children ?? []}
     anchorSelector={`.${ACTIVE_MOVE_CLASS}`}
+    {pieceSet}
     onActivateVariant={(node) => {
         panelNav.selectChildNode(node);
         panelNav.highlightButton("next");

package/dist/(components)/VariantDropdownNavigator.svelte

@@ -1,173 +1,177 @@
-<script lang="ts">
-  import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
-  import NagBadges from "./NagBadges.svelte";
-  type Props = {
-    variants: ChessTreeNode[];
-    onActivateVariant: (node: ChessTreeNode) => void;
-    /**
-     * Представляет CSS-селектор элемента, относительно которого нужно позиционировать dropdown.
-     */
-    anchorSelector?: string;
-  };
-
-  const { variants, onActivateVariant, anchorSelector = "" }: Props = $props();
-
-  let requestedOpen = $state(false);
-  let activeIndex = $state(0);
-  let anchorRect = $state<DOMRect | null>(null);
-
-  const isOpen = $derived(requestedOpen && variants.length > 1);
-
-  const safeActiveIndex = $derived(
-    variants.length === 0
-      ? 0
-      : Math.min(Math.max(activeIndex, 0), variants.length - 1),
-  );
-
-  function readAnchorRect(): void {
-    if (!anchorSelector) {
-      anchorRect = null;
-      return;
-    }
-    const el = document.querySelector(anchorSelector);
-    anchorRect = el instanceof HTMLElement ? el.getBoundingClientRect() : null;
-  }
-
-  function close(): void {
-    requestedOpen = false;
-  }
-
-  export function forceClose(): void {
-    close();
-  }
-
-  export function open(): void {
-    if (variants.length <= 1) return;
-    requestedOpen = true;
-    activeIndex = 0;
-    readAnchorRect();
-  }
-
-  export function handleKeyDown(e: KeyboardEvent): boolean {
-    if (!isOpen) return false;
-
-    if (e.key === "Escape") {
-      close();
-      return true;
-    }
-
-    if (e.key === "ArrowDown") {
-      if (variants.length <= 1) return true;
-      activeIndex = Math.min(safeActiveIndex + 1, variants.length - 1);
-      return true;
-    }
-
-    if (e.key === "ArrowUp") {
-      if (variants.length <= 1) return true;
-      activeIndex = Math.max(safeActiveIndex - 1, 0);
-      return true;
-    }
-
-    if (e.key === "ArrowRight") {
-      const node = variants[safeActiveIndex];
-      if (!node) return true;
-      onActivateVariant(node);
-      close();
-      return true;
-    }
-
-    return false;
-  }
-
-  function onWindowMouseDown(e: MouseEvent): void {
-    if (!isOpen) return;
-    const path = e.composedPath?.() ?? [];
-    const clickedInside = path.some(
-      (t) => t instanceof HTMLElement && t.dataset?.["variantDropdown"] === "1",
-    );
-    if (!clickedInside) close();
-  }
-
-  $effect(() => {
-    if (!isOpen) return;
-
-    readAnchorRect();
-
-    const onScrollOrResize = () => readAnchorRect();
-    window.addEventListener("scroll", onScrollOrResize, true);
-    window.addEventListener("resize", onScrollOrResize, { passive: true });
-    return () => {
-      window.removeEventListener("scroll", onScrollOrResize, true);
-      window.removeEventListener("resize", onScrollOrResize);
-    };
-  });
-
-  const position = $derived(
-    !isOpen || !anchorRect
-      ? null
-      : (() => {
-          const gap = 8;
-          const minW = 224; // ~14rem
-          const viewportW = window.innerWidth;
-          const viewportH = window.innerHeight;
-
-          // Prefer to the right of anchor; fallback to left if overflowing.
-          let left = anchorRect.right + gap;
-          if (left + minW > viewportW - gap) {
-            left = Math.max(gap, anchorRect.left - gap - minW);
-          }
-
-          // Align tops, but keep in viewport.
-          let top = anchorRect.top;
-          top = Math.min(Math.max(gap, top), viewportH - gap);
-
-          return { left, top };
-        })(),
-  );
-
-  function getMovePrefix(node: ChessTreeNode): string {
-    const fm = node.data.fullMoves;
-    if (!fm) return "";
-    return node.data.ply % 2 === 1 ? `${fm}.` : `${fm - 1}...`;
-  }
-</script>
-
-<svelte:window onmousedown={onWindowMouseDown} />
-
-{#if isOpen}
-  <div
-    data-variant-dropdown="1"
-    class="z-50 min-w-[14rem] rounded-md border bg-white p-1 shadow-md outline-none"
-    role="menu"
-    aria-label="Варианты следующего хода"
-    style={position
-      ? `position: fixed; left: ${position.left}px; top: ${position.top}px;`
-      : "position: fixed;"}
-  >
-    {#each variants as variant, index (variant.id)}
-      <button
-        type="button"
-        data-variant-dropdown="1"
-        class={{
-          "flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-left text-sm outline-none": true,
-          "bg-accent text-accent-foreground": index === safeActiveIndex,
-          "hover:bg-accent hover:text-accent-foreground": true,
-        }}
-        onclick={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          onActivateVariant(variant);
-          close();
-        }}
-      >
-        <span class="flex min-w-0 flex-wrap items-center gap-x-1 gap-y-0.5">
-          {#if getMovePrefix(variant)}
-            <span>{getMovePrefix(variant)}</span>
-          {/if}
-          <span>{variant.data.san}</span>
-          <NagBadges nags={variant.data.nags} class="!ml-0" />
-        </span>
-      </button>
-    {/each}
-  </div>
-{/if}
+<script lang="ts">
+  import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
+  import type { PieceSet } from "@connectorvol/shared";
+  import NagBadges from "./NagBadges.svelte";
+  import MoveWithIcon from "./MoveWithIcon.svelte";
+  type Props = {
+    variants: ChessTreeNode[];
+    onActivateVariant: (node: ChessTreeNode) => void;
+    /**
+     * Представляет CSS-селектор элемента, относительно которого нужно позиционировать dropdown.
+     */
+    anchorSelector?: string;
+    /** Возвращает набор фигур для иконок SAN. */
+    pieceSet: PieceSet;
+  };
+
+  const { variants, onActivateVariant, anchorSelector = "", pieceSet }: Props = $props();
+
+  let requestedOpen = $state(false);
+  let activeIndex = $state(0);
+  let anchorRect = $state<DOMRect | null>(null);
+
+  const isOpen = $derived(requestedOpen && variants.length > 1);
+
+  const safeActiveIndex = $derived(
+    variants.length === 0
+      ? 0
+      : Math.min(Math.max(activeIndex, 0), variants.length - 1),
+  );
+
+  function readAnchorRect(): void {
+    if (!anchorSelector) {
+      anchorRect = null;
+      return;
+    }
+    const el = document.querySelector(anchorSelector);
+    anchorRect = el instanceof HTMLElement ? el.getBoundingClientRect() : null;
+  }
+
+  function close(): void {
+    requestedOpen = false;
+  }
+
+  export function forceClose(): void {
+    close();
+  }
+
+  export function open(): void {
+    if (variants.length <= 1) return;
+    requestedOpen = true;
+    activeIndex = 0;
+    readAnchorRect();
+  }
+
+  export function handleKeyDown(e: KeyboardEvent): boolean {
+    if (!isOpen) return false;
+
+    if (e.key === "Escape") {
+      close();
+      return true;
+    }
+
+    if (e.key === "ArrowDown") {
+      if (variants.length <= 1) return true;
+      activeIndex = Math.min(safeActiveIndex + 1, variants.length - 1);
+      return true;
+    }
+
+    if (e.key === "ArrowUp") {
+      if (variants.length <= 1) return true;
+      activeIndex = Math.max(safeActiveIndex - 1, 0);
+      return true;
+    }
+
+    if (e.key === "ArrowRight") {
+      const node = variants[safeActiveIndex];
+      if (!node) return true;
+      onActivateVariant(node);
+      close();
+      return true;
+    }
+
+    return false;
+  }
+
+  function onWindowMouseDown(e: MouseEvent): void {
+    if (!isOpen) return;
+    const path = e.composedPath?.() ?? [];
+    const clickedInside = path.some(
+      (t) => t instanceof HTMLElement && t.dataset?.["variantDropdown"] === "1",
+    );
+    if (!clickedInside) close();
+  }
+
+  $effect(() => {
+    if (!isOpen) return;
+
+    readAnchorRect();
+
+    const onScrollOrResize = () => readAnchorRect();
+    window.addEventListener("scroll", onScrollOrResize, true);
+    window.addEventListener("resize", onScrollOrResize, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", onScrollOrResize, true);
+      window.removeEventListener("resize", onScrollOrResize);
+    };
+  });
+
+  const position = $derived(
+    !isOpen || !anchorRect
+      ? null
+      : (() => {
+          const gap = 8;
+          const minW = 224; // ~14rem
+          const viewportW = window.innerWidth;
+          const viewportH = window.innerHeight;
+
+          // Prefer to the right of anchor; fallback to left if overflowing.
+          let left = anchorRect.right + gap;
+          if (left + minW > viewportW - gap) {
+            left = Math.max(gap, anchorRect.left - gap - minW);
+          }
+
+          // Align tops, but keep in viewport.
+          let top = anchorRect.top;
+          top = Math.min(Math.max(gap, top), viewportH - gap);
+
+          return { left, top };
+        })(),
+  );
+
+  function getMovePrefix(node: ChessTreeNode): string {
+    const fm = node.data.fullMoves;
+    if (!fm) return "";
+    return node.data.ply % 2 === 1 ? `${fm}.` : `${fm - 1}...`;
+  }
+</script>
+
+<svelte:window onmousedown={onWindowMouseDown} />
+
+{#if isOpen}
+  <div
+    data-variant-dropdown="1"
+    class="z-50 min-w-[14rem] rounded-md border bg-white p-1 shadow-md outline-none"
+    role="menu"
+    aria-label="Варианты следующего хода"
+    style={position
+      ? `position: fixed; left: ${position.left}px; top: ${position.top}px;`
+      : "position: fixed;"}
+  >
+    {#each variants as variant, index (variant.id)}
+      <button
+        type="button"
+        data-variant-dropdown="1"
+        class={{
+          "flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-left text-sm outline-none": true,
+          "bg-accent text-accent-foreground": index === safeActiveIndex,
+          "hover:bg-accent hover:text-accent-foreground": true,
+        }}
+        onclick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          onActivateVariant(variant);
+          close();
+        }}
+      >
+        <span class="flex min-w-0 flex-wrap items-center gap-x-1 gap-y-0.5">
+          {#if getMovePrefix(variant)}
+            <span>{getMovePrefix(variant)}</span>
+          {/if}
+          <MoveWithIcon san={variant.data.san} ply={variant.data.ply} {pieceSet} />
+          <NagBadges nags={variant.data.nags} class="!ml-0" />
+        </span>
+      </button>
+    {/each}
+  </div>
+{/if}

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

@@ -1,4 +1,5 @@
 import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
+import type { PieceSet } from "@connectorvol/shared";
 type Props = {
     variants: ChessTreeNode[];
     onActivateVariant: (node: ChessTreeNode) => void;
@@ -6,6 +7,8 @@ type Props = {
      * Представляет CSS-селектор элемента, относительно которого нужно позиционировать dropdown.
      */
     anchorSelector?: string;
+    /** Возвращает набор фигур для иконок SAN. */
+    pieceSet: PieceSet;
 };
 declare const VariantDropdownNavigator: import("svelte").Component<Props, {
     forceClose: () => void;

package/dist/(utils)/parseSanMove.d.ts

@@ -17,6 +17,12 @@ export interface ParsedSanMove {
     isCheckmate: boolean;
     /** Возвращает координаты назначения (например, "f3", "e4") */
     destination?: string;
+    /** Возвращает уточнение (файл или ранг) при неоднозначности хода (например, "d" для Ndb5, "4" для N4b6) */
+    disambiguation?: string;
+    /** Возвращает тип фигуры превращения */
+    promotionPieceType?: PieceType;
+    /** Возвращает файл пешки при взятии (например, "e" для exd5) */
+    pawnFile?: string;
 }
 /**
  * Представляет функцию для парсинга SAN нотации в информацию о ходе

package/dist/(utils)/parseSanMove.js

@@ -55,30 +55,63 @@ export function parseSanMove(san, ply) {
         // Ход пешки
         pieceType = PieceType.PAWN;
     }
+    // Определяем файл пешки при взятии
+    let pawnFile;
+    if (pieceType === PieceType.PAWN && cleanSan[1] === "x") {
+        pawnFile = cleanSan[0];
+    }
+    // Обрабатываем превращение пешки
+    let promotionPieceType;
+    if (moveNotation.includes("=")) {
+        const [moveWithoutPromotion, promotionChar] = moveNotation.split("=");
+        moveNotation = moveWithoutPromotion;
+        switch (promotionChar) {
+            case "Q":
+                promotionPieceType = PieceType.QUEEN;
+                break;
+            case "R":
+                promotionPieceType = PieceType.ROOK;
+                break;
+            case "B":
+                promotionPieceType = PieceType.BISHOP;
+                break;
+            case "N":
+                promotionPieceType = PieceType.KNIGHT;
+                break;
+        }
+    }
     // Определяем взятие
     const isCapture = moveNotation.includes("x");
-    // Извлекаем координаты назначения
+    // Извлекаем координаты назначения и уточнение
     let destination = "";
+    let disambiguation;
     if (isCapture) {
-        // После 'x' идут координаты назначения
+        // После 'x' идут координаты назначения, до 'x' — уточнение
         const xIndex = moveNotation.indexOf("x");
         destination = moveNotation.slice(xIndex + 1);
+        const prefix = moveNotation.slice(0, xIndex);
+        if (prefix.length > 0) {
+            disambiguation = prefix;
+        }
     }
     else {
-        // Последние 2 символа - координаты назначения
+        // Последние 2 символа - координаты назначения, остальное — уточнение
         destination = moveNotation.slice(-2);
-    }
-    // Обрабатываем превращение пешки
-    if (destination.includes("=")) {
-        destination = destination.split("=")[0];
+        const prefix = moveNotation.slice(0, -2);
+        if (prefix.length > 0) {
+            disambiguation = prefix;
+        }
     }
     return {
         pieceType,
         color,
         destination,
+        disambiguation,
         isCastling: false,
         isCapture,
         isCheck,
         isCheckmate,
+        promotionPieceType,
+        pawnFile,
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connectorvol/tree",
-  "version": "4.2.0",
+  "version": "5.0.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -49,7 +49,7 @@
     "tailwind-variants": "^3.2.2"
   },
   "devDependencies": {
-    "@connectorvol/chessboard": "4.1.0",
+    "@connectorvol/chessboard": "4.3.0",
     "@ianvs/prettier-plugin-sort-imports": "4.5.1",
     "@internationalized/date": "^3.12.0",
     "@lucide/svelte": "^1.16.0",