@connectorvol/tree 4.1.0 → 4.3.0

package/dist/(components)/TreeViewerPanelManager.svelte

@@ -1,109 +1,110 @@
 <script lang="ts">
-  import ArrowLeft from "@lucide/svelte/icons/arrow-left";
-  import ArrowRight from "@lucide/svelte/icons/arrow-right";
-  import ListStart from "@lucide/svelte/icons/list-start";
-  import ListEnd from "@lucide/svelte/icons/list-end";
-  import PlayButtonIcon from "@lucide/svelte/icons/circle-play";
-  import StopButtonIcon from "@lucide/svelte/icons/circle-stop";
-  import * as Button from "../components/ui/button/index.js";
-  import * as ButtonGroup from "../components/ui/button-group/index.js";
+    import ArrowLeft from "@lucide/svelte/icons/arrow-left";
+    import ArrowRight from "@lucide/svelte/icons/arrow-right";
+    import ListStart from "@lucide/svelte/icons/list-start";
+    import ListEnd from "@lucide/svelte/icons/list-end";
+    import PlayButtonIcon from "@lucide/svelte/icons/circle-play";
+    import StopButtonIcon from "@lucide/svelte/icons/circle-stop";
+    import * as Button from "../components/ui/button/index.js";
+    import * as ButtonGroup from "../components/ui/button-group/index.js";
 
-  import type { Snippet } from "svelte";
-  import type { ChessTree } from "../(classes)/chessTree.svelte.js";
-  import type { ClassValue } from "clsx";
-  import { getOrCreateTreeViewerPanelNavigation } from "../(utils)/treeViewerPanelNavigation.svelte.js";
+    import type { Snippet } from "svelte";
+    import type { ChessTree } from "../(classes)/chessTree.svelte.js";
+    import type { ClassValue } from "clsx";
+    import { getOrCreateTreeViewerPanelNavigation } from "../(utils)/treeViewerPanelNavigation.svelte.js";
 
-  type Props = {
-    chessTree: ChessTree;
-    className?: ClassValue;
-    setChessFen: (fen: string) => void;
-    setChessboardFen: (animationTime?: number) => void;
-    extraActions?: Snippet;
-  };
+    type Props = {
+        chessTree: ChessTree;
+        className?: ClassValue;
+        setChessFen: (fen: string) => void;
+        setChessboardFen: (animationTime?: number) => void;
+        extraActions?: Snippet;
+    };
 
-  const {
-    extraActions,
-    chessTree,
-    setChessFen,
-    setChessboardFen,
-    className,
-  }: Props = $props();
+    const {
+        extraActions,
+        chessTree,
+        setChessFen,
+        setChessboardFen,
+        className,
+    }: Props = $props();
 
-  const panelNav = $derived.by(() =>
-    getOrCreateTreeViewerPanelNavigation(chessTree),
-  );
-
-  $effect(() => {
-    panelNav.bindCallbacks(setChessFen, setChessboardFen);
-  });
+    const panelNav = $derived.by(() => {
+        const nav = getOrCreateTreeViewerPanelNavigation(chessTree);
+        nav.bindCallbacks(setChessFen, setChessboardFen);
+        return nav;
+    });
 </script>
 
 <div class={[className]}>
-  <ButtonGroup.Root>
-    <ButtonGroup.Root class="hidden sm:flex"></ButtonGroup.Root>
     <ButtonGroup.Root>
-      <Button.Root
-        variant="outline"
-        size="icon"
-        aria-label="Previous Move"
-        onclick={() => panelNav.selectPreviousNode()}
-        class={{
-          "bg-primary text-white": panelNav.highlightedButtons.previous,
-          "cursor-pointer": true,
-        }}
-      >
-        <ArrowLeft />
-      </Button.Root>
-      <Button.Root
-        variant="outline"
-        size="icon"
-        aria-label="Go to Start"
-        onclick={() => panelNav.stepToStart()}
-        class={{
-          "bg-primary text-white": panelNav.highlightedButtons.start,
-        }}
-      >
-        <ListStart />
-      </Button.Root>
-      <Button.Root
-        variant={panelNav.isPlaying ? "default" : "outline"}
-        size="icon"
-        aria-label={panelNav.isPlaying ? "Stop Auto Play" : "Start Auto Play"}
-        onclick={() => panelNav.toggleAutoPlay()}
-        class={{
-          "bg-primary text-white": panelNav.isPlaying,
-        }}
-      >
-        {#if panelNav.isPlaying}
-          <StopButtonIcon />
-        {:else}
-          <PlayButtonIcon />
-        {/if}
-      </Button.Root>
-      <Button.Root
-        variant="outline"
-        size="icon"
-        aria-label="Go to End"
-        onclick={() => panelNav.stepToEnd()}
-        class={{
-          "bg-primary text-white": panelNav.highlightedButtons.end,
-        }}
-      >
-        <ListEnd />
-      </Button.Root>
-      <Button.Root
-        variant="outline"
-        size="icon"
-        aria-label="Next Move"
-        onclick={() => panelNav.selectNextNode()}
-        class={{
-          "bg-primary text-white": panelNav.highlightedButtons.next,
-        }}
-      >
-        <ArrowRight />
-      </Button.Root>
+        <ButtonGroup.Root class="hidden sm:flex"></ButtonGroup.Root>
+        <ButtonGroup.Root>
+            <Button.Root
+                variant="outline"
+                size="icon"
+                aria-label="Previous Move"
+                onclick={() => panelNav.selectPreviousNode()}
+                class={{
+                    "bg-primary text-white":
+                        panelNav.highlightedButtons.previous,
+                    "cursor-pointer": true,
+                }}
+            >
+                <ArrowLeft />
+            </Button.Root>
+            <Button.Root
+                variant="outline"
+                size="icon"
+                aria-label="Go to Start"
+                onclick={() => panelNav.stepToStart()}
+                class={{
+                    "bg-primary text-white": panelNav.highlightedButtons.start,
+                }}
+            >
+                <ListStart />
+            </Button.Root>
+            <Button.Root
+                variant={panelNav.isPlaying ? "default" : "outline"}
+                size="icon"
+                aria-label={panelNav.isPlaying
+                    ? "Stop Auto Play"
+                    : "Start Auto Play"}
+                onclick={() => panelNav.toggleAutoPlay()}
+                class={{
+                    "bg-primary text-white": panelNav.isPlaying,
+                }}
+            >
+                {#if panelNav.isPlaying}
+                    <StopButtonIcon />
+                {:else}
+                    <PlayButtonIcon />
+                {/if}
+            </Button.Root>
+            <Button.Root
+                variant="outline"
+                size="icon"
+                aria-label="Go to End"
+                onclick={() => panelNav.stepToEnd()}
+                class={{
+                    "bg-primary text-white": panelNav.highlightedButtons.end,
+                }}
+            >
+                <ListEnd />
+            </Button.Root>
+            <Button.Root
+                variant="outline"
+                size="icon"
+                aria-label="Next Move"
+                onclick={() => panelNav.selectNextNode()}
+                class={{
+                    "bg-primary text-white": panelNav.highlightedButtons.next,
+                }}
+            >
+                <ArrowRight />
+            </Button.Root>
+        </ButtonGroup.Root>
+        <ButtonGroup.Root class="hidden sm:flex"></ButtonGroup.Root>
     </ButtonGroup.Root>
-    <ButtonGroup.Root class="hidden sm:flex"></ButtonGroup.Root>
-  </ButtonGroup.Root>
-  {@render extraActions?.()}
+    {@render extraActions?.()}
 </div>

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 нотации в информацию о ходе