@connectorvol/chess-widgets 8.0.0 → 9.0.0

package/dist/puzzle/puzzleStepPreviewSolver.js

@@ -1,5 +1,5 @@
 import { PgnOps } from "@connectorvol/chessops/pgnOps.svelte";
-import { Color, PUZZLE_BRANCH_WRONG_NAG_ID } from "@connectorvol/shared";
+import { Color, PUZZLE_BRANCH_WRONG_NAG_ID, calculatePly } from "@connectorvol/shared";
 /**
  * Представляет извлечение стороны, имеющей ход, из полной строки FEN.
  */
@@ -49,23 +49,83 @@ export function puzzlePreviewFindChildIndexForPlayedSan(cursorFen, children, pla
 /**
  * Представляет классификацию хода решателя на развилке (или на единственном продолжении).
  */
-export function puzzlePreviewClassifySolverMove(cursorNode, cursorFen, playedSan, solverColor) {
+export function puzzlePreviewClassifySolverMove(cursorNode, cursorFen, playedSan, _solverColor) {
     const children = cursorNode.children;
     const idx = puzzlePreviewFindChildIndexForPlayedSan(cursorFen, children, playedSan);
     if (idx < 0) {
         return { kind: "no_matching_variant" };
     }
     const child = children[idx];
-    const mover = puzzlePreviewSideToMoveFromFen(cursorFen);
-    const isSolverFork = children.length > 1 && mover === solverColor;
-    if (isSolverFork) {
-        const nags = child.data.nags ?? [];
-        if (nags.includes(PUZZLE_BRANCH_WRONG_NAG_ID)) {
-            return { kind: "wrong_marked_variant", wrongBranchRoot: child };
-        }
+    const nags = child.data.nags ?? [];
+    if (nags.includes(PUZZLE_BRANCH_WRONG_NAG_ID)) {
+        return { kind: "wrong_marked_variant", wrongBranchRoot: child };
     }
     return { kind: "correct", childIndex: idx };
 }
+/**
+ * Представляет сбор данных узла для произвольного неверного хода решателя (нет в PGN).
+ */
+export function puzzlePreviewBuildAdHocWrongMoveData(cursorFen, san) {
+    const probe = new PgnOps(cursorFen, "chess");
+    try {
+        const move = probe.makeSanMove(san);
+        const fen = probe.fen();
+        const { halfMoves, fullMoves } = calculatePly(fen);
+        return {
+            fen,
+            san,
+            ply: halfMoves,
+            fullMoves,
+            lastMove: move,
+            nags: [PUZZLE_BRANCH_WRONG_NAG_ID],
+        };
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Представляет добавление отсутствующего в PGN хода как новой ветки дерева решения с NAG ✗.
+ */
+export function puzzlePreviewAddAdHocWrongMoveToSolutionTree(solutionTree, cursorPath, cursorFen, san) {
+    const data = puzzlePreviewBuildAdHocWrongMoveData(cursorFen, san);
+    if (!data)
+        return null;
+    const cursorNode = puzzlePreviewNodeAtPath(solutionTree.rootNode.moves, cursorPath);
+    if (!cursorNode)
+        return null;
+    solutionTree.currentNode = cursorNode;
+    solutionTree.addNodeToCurrent({
+        id: "",
+        children: [],
+        data,
+    });
+    return solutionTree.currentNode;
+}
+/**
+ * Представляет пересчёт пути индексов после перестановки детей на развилках.
+ */
+export function puzzlePreviewRemapPathAfterReorder(rootMoves, path) {
+    const nodeIds = [];
+    let node = rootMoves;
+    for (const idx of path) {
+        const child = node.children[idx];
+        if (!child)
+            return path;
+        nodeIds.push(child.id);
+        node = child;
+    }
+    node = rootMoves;
+    const remapped = [];
+    for (const id of nodeIds) {
+        const idx = node.children.findIndex((c) => c.id === id);
+        if (idx < 0)
+            return path;
+        remapped.push(idx);
+        node = node.children[idx];
+    }
+    return remapped;
+}
 /**
  * Представляет проверку: линия закончилась ключевым ходом решателя (ход соперника, лист дерева).
  */

package/dist/puzzle/syncPuzzleBranchNags.d.ts

@@ -0,0 +1,14 @@
+import type { ChessTree, ChessTreeNode } from "@connectorvol/tree";
+import { Color } from "@connectorvol/shared";
+/**
+ * Представляет нормализацию дерева задачи: NAG ✓/✗ и порядок веток (верный ход — главная линия).
+ */
+export declare function normalizePuzzleTreeMainLine(root: ChessTreeNode, solverColor: Color): boolean;
+/**
+ * Представляет синхронизацию NAG ✓/✗ по дереву решения (устаревшее имя, вызывает нормализацию).
+ */
+export declare function syncPuzzleBranchNags(root: ChessTreeNode, solverColor: Color): boolean;
+/**
+ * Представляет нормализацию главной линии во всём дереве задачи и инкремент версии мутации при изменениях.
+ */
+export declare function syncPuzzleBranchNagsOnTree(tree: ChessTree, solverColor: Color): void;

package/dist/puzzle/syncPuzzleBranchNags.js

@@ -0,0 +1,125 @@
+import { Color, PUZZLE_BRANCH_CORRECT_NAG_ID, PUZZLE_BRANCH_WRONG_NAG_ID, isPuzzleBranchNag, } from "@connectorvol/shared";
+/**
+ * Представляет извлечение стороны, имеющей ход, из полной строки FEN.
+ */
+function sideToMoveFromFullFen(fullFen) {
+    const token = fullFen.trim().split(/\s+/)[1];
+    return token === "b" ? Color.BLACK : Color.WHITE;
+}
+/**
+ * Представляет удаление NAG «верно / неверно» из списка аннотаций узла.
+ */
+function stripPuzzleBranchNags(nags) {
+    return (nags ?? []).filter((n) => !isPuzzleBranchNag(n));
+}
+/**
+ * Представляет проверку: на узле стоит NAG верного хода задачи.
+ */
+function childHasCorrectNag(child) {
+    return (child.data.nags ?? []).includes(PUZZLE_BRANCH_CORRECT_NAG_ID);
+}
+/**
+ * Представляет проверку: на узле стоит NAG неверного хода задачи.
+ */
+function childHasWrongNag(child) {
+    return (child.data.nags ?? []).includes(PUZZLE_BRANCH_WRONG_NAG_ID);
+}
+/**
+ * Представляет выбор ребёнка для канонической главной линии на развилке.
+ */
+function pickMainLineChild(parent, solverColor) {
+    const { children } = parent;
+    if (children.length === 0)
+        return null;
+    if (children.length === 1)
+        return children[0];
+    const mover = sideToMoveFromFullFen(parent.data.fen);
+    if (mover === solverColor) {
+        const correct = children.find(childHasCorrectNag);
+        if (correct)
+            return correct;
+        const notWrong = children.find((c) => !childHasWrongNag(c));
+        if (notWrong)
+            return notWrong;
+    }
+    else {
+        const notWrong = children.find((c) => !childHasWrongNag(c));
+        if (notWrong)
+            return notWrong;
+    }
+    return children[0];
+}
+/**
+ * Представляет удаление NAG ✓/✗ у ходов, которые не являются ходом решателя.
+ */
+function cleanupInvalidPuzzleBranchNags(root, solverColor) {
+    let changed = false;
+    function walk(parent) {
+        const mover = sideToMoveFromFullFen(parent.data.fen);
+        for (const child of parent.children) {
+            const isSolverFork = mover === solverColor;
+            if (!isSolverFork) {
+                const before = child.data.nags ?? [];
+                if (before.some(isPuzzleBranchNag)) {
+                    const next = stripPuzzleBranchNags(before);
+                    child.data.nags = next.length > 0 ? next : undefined;
+                    changed = true;
+                }
+            }
+            walk(child);
+        }
+    }
+    walk(root);
+    return changed;
+}
+/**
+ * Представляет поднятие канонической главной ветки в `children[0]` на всех развилках.
+ */
+function reorderMainLineChildrenFirst(root, solverColor) {
+    let changed = false;
+    function walk(node) {
+        for (const child of node.children) {
+            walk(child);
+        }
+        if (node.children.length <= 1)
+            return;
+        const mainChild = pickMainLineChild(node, solverColor);
+        if (!mainChild)
+            return;
+        const idx = node.children.findIndex((c) => c.id === mainChild.id);
+        if (idx <= 0)
+            return;
+        const [moved] = node.children.splice(idx, 1);
+        node.children.unshift(moved);
+        changed = true;
+    }
+    walk(root);
+    return changed;
+}
+/**
+ * Представляет нормализацию дерева задачи: NAG ✓/✗ и порядок веток (верный ход — главная линия).
+ */
+export function normalizePuzzleTreeMainLine(root, solverColor) {
+    let changed = false;
+    if (cleanupInvalidPuzzleBranchNags(root, solverColor)) {
+        changed = true;
+    }
+    if (reorderMainLineChildrenFirst(root, solverColor)) {
+        changed = true;
+    }
+    return changed;
+}
+/**
+ * Представляет синхронизацию NAG ✓/✗ по дереву решения (устаревшее имя, вызывает нормализацию).
+ */
+export function syncPuzzleBranchNags(root, solverColor) {
+    return normalizePuzzleTreeMainLine(root, solverColor);
+}
+/**
+ * Представляет нормализацию главной линии во всём дереве задачи и инкремент версии мутации при изменениях.
+ */
+export function syncPuzzleBranchNagsOnTree(tree, solverColor) {
+    if (normalizePuzzleTreeMainLine(tree.rootNode.moves, solverColor)) {
+        tree.mutationVersion++;
+    }
+}

package/dist/puzzle-creation/OpeningTagHoverPreview.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import {
+    Chessboard,
+    CHESSBOARD_THEMES,
+    createBoardApi,
+    Draggable,
+  } from "@connectorvol/chessboard";
+
+  import { DEFAULT_BOARD_APPEARANCE_SETTINGS } from "../constants/default-board-appearance-settings.js";
+
+  interface Props {
+    /** Возвращает FEN позиции для превью. */
+    fen: string;
+    /** Возвращает подпись дебютного тега. */
+    label: string;
+    /** Возвращает якорь кнопки тега для позиционирования popover. */
+    anchor: DOMRect;
+  }
+
+  let { fen, label, anchor }: Props = $props();
+
+  const previewBoardSizePx = 220;
+  const previewGapPx = 8;
+  const viewportMarginPx = 12;
+
+  const previewDesign = {
+    ...DEFAULT_BOARD_APPEARANCE_SETTINGS.design,
+    showBoardCoordinates: false,
+    showSquareCoordinates: false,
+    markerConfig: null,
+    showPossibleMoveIndicators: false,
+    theme: CHESSBOARD_THEMES.blue,
+  };
+
+  const previewBoardApi = $derived.by(() =>
+    createBoardApi({
+      fen,
+      playSettings: {
+        ...DEFAULT_BOARD_APPEARANCE_SETTINGS.play,
+        boardSize: previewBoardSizePx * 10,
+        isResizable: false,
+        draggable: Draggable.NONE,
+        allowPreMove: false,
+        showSquareBadges: false,
+        animationTime: 0,
+      },
+    }),
+  );
+
+  const previewStyle = $derived.by(() => {
+    const belowTop = anchor.bottom + previewGapPx;
+    const aboveTop = anchor.top - previewBoardSizePx - previewGapPx;
+    const fitsBelow =
+      belowTop + previewBoardSizePx <= window.innerHeight - viewportMarginPx;
+    const top = fitsBelow
+      ? belowTop
+      : Math.max(viewportMarginPx, aboveTop);
+
+    const centeredLeft =
+      anchor.left + anchor.width / 2 - previewBoardSizePx / 2;
+    const maxLeft = Math.max(
+      viewportMarginPx,
+      window.innerWidth - previewBoardSizePx - viewportMarginPx,
+    );
+    const left = Math.min(
+      Math.max(centeredLeft, viewportMarginPx),
+      maxLeft,
+    );
+
+    return `left:${left}px;top:${top}px;width:${previewBoardSizePx}px;`;
+  });
+</script>
+
+<div
+  class="border-border pointer-events-none fixed z-50 overflow-hidden rounded-md border bg-white shadow-lg [&_*]:pointer-events-none"
+  style={previewStyle}
+  role="tooltip"
+  aria-label="Превью дебюта: {label}"
+>
+  <Chessboard facade={previewBoardApi} design={previewDesign} />
+</div>

package/dist/puzzle-creation/OpeningTagHoverPreview.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    /** Возвращает FEN позиции для превью. */
+    fen: string;
+    /** Возвращает подпись дебютного тега. */
+    label: string;
+    /** Возвращает якорь кнопки тега для позиционирования popover. */
+    anchor: DOMRect;
+}
+declare const OpeningTagHoverPreview: import("svelte").Component<Props, {}, "">;
+type OpeningTagHoverPreview = ReturnType<typeof OpeningTagHoverPreview>;
+export default OpeningTagHoverPreview;

package/dist/puzzle-creation/PuzzleBoardTreeViewerPane.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
+  import { MediaQuery } from "svelte/reactivity";
 
-  import type { BoardApi } from "@connectorvol/chessboard";
+  import type {
+    BoardApi,
+    TChessBoardDesignSettings,
+  } from "@connectorvol/chessboard";
   import { Chessboard } from "@connectorvol/chessboard";
-  import type { ChessTree } from "@connectorvol/tree";
-  import { TreeViewer } from "@connectorvol/tree";
+  import type { ChessTree, TTreeViewerTheme } from "@connectorvol/tree";
+  import { TREE_VIEWER_LIGHT_THEME, TreeViewer } from "@connectorvol/tree";
 
   import { cn } from "../utils.js";
 
@@ -16,6 +20,10 @@
      * Возвращает API шахматной доски для компонента `Chessboard`.
      */
     chessboard: BoardApi;
+    /**
+     * Возвращает снимок дизайна, передаваемый в `<Chessboard design={...} />`.
+     */
+    chessboardDesign: TChessBoardDesignSettings;
     /**
      * Возвращает экземпляр дерева ходов для `TreeViewer`.
      */
@@ -44,6 +52,16 @@
      * Возвращает признак возможности выбора узлов в дереве.
      */
     selectable?: boolean;
+    /**
+     * Возвращает true, если в режиме правки показывать группу NAG «Задача (развилка)»
+     * рядом с кнопками undo/redo на ходах из развилки.
+     */
+    showPuzzleBranchNags?: boolean;
+    /**
+     * Возвращает тему `TreeViewer` (фон, границы, текст). Если не задана —
+     * используется `TREE_VIEWER_LIGHT_THEME`.
+     */
+    theme?: TTreeViewerTheme;
     /**
      * Возвращает дополнительные классы Tailwind для корневого контейнера.
      */
@@ -56,6 +74,7 @@
 
   const {
     chessboard,
+    chessboardDesign,
     chessTree,
     onSelectNode,
     onDeleteVariant,
@@ -63,50 +82,103 @@
     setChessboardFen,
     editMode = true,
     selectable = true,
+    showPuzzleBranchNags = false,
+    theme = TREE_VIEWER_LIGHT_THEME,
     class: className,
     belowChessboard,
   }: Props = $props();
 
-  const hasBoardCoordinatesWithoutBorder = $derived(
-    chessboard.showBoardCoordinates && !chessboard.border,
+  /** ponytail: совпадает с Tailwind `lg` (1024px), как в разметке панели. */
+  const isMobile = new MediaQuery("(max-width: 1023px)");
+
+  const boardSize = $derived(chessboard.getBoard().settingsService.boardSize);
+  const useAutoBoardLayout = $derived(isMobile.current || boardSize === "auto");
+
+  const boardColumnStyle = $derived(
+    !useAutoBoardLayout && typeof boardSize === "number"
+      ? `flex: 0 0 min(100%, ${boardSize}rem);`
+      : undefined,
+  );
+
+  let savedDesktopBoardSettings = $state<{
+    boardSize: number | "auto";
+    isResizable: boolean;
+  } | null>(null);
+
+  $effect(() => {
+    const mobile = isMobile.current;
+    const settings = chessboard.getBoard().settingsService;
+
+    if (mobile) {
+      if (savedDesktopBoardSettings === null) {
+        savedDesktopBoardSettings = {
+          boardSize: settings.boardSize,
+          isResizable: chessboard.isResizable,
+        };
+      }
+      chessboard.isResizable = false;
+      settings.boardSize = "auto";
+    } else if (savedDesktopBoardSettings !== null) {
+      chessboard.isResizable = savedDesktopBoardSettings.isResizable;
+      settings.boardSize = savedDesktopBoardSettings.boardSize;
+      savedDesktopBoardSettings = null;
+    }
+  });
+
+  let boardHeight = $state(0);
+
+  const treeHeightLocked = $derived(boardHeight > 0);
+
+  const treeColumnStyle = $derived(
+    treeHeightLocked ? `--pane-board-height: ${boardHeight}px` : undefined,
   );
 </script>
 
-<div
-  class={cn(
-    "relative flex min-h-0 flex-col justify-start lg:flex-row lg:items-stretch lg:justify-start lg:gap-4",
-    className,
-  )}
->
+<div class={cn("flex w-full flex-col gap-2", className)}>
   <div
-    class="order-2 flex min-h-48 w-full flex-1 flex-col gap-2 lg:order-2 lg:min-h-0 lg:min-w-0"
+    class="relative flex min-h-0 flex-col gap-4 lg:flex-row lg:items-stretch"
   >
     <div
       class={cn(
-        "flex min-h-28 min-w-0 flex-1 flex-col overflow-hidden rounded-md border border-border lg:min-h-0",
-        hasBoardCoordinatesWithoutBorder && "mb-4",
+        "order-1 flex w-full shrink-0 flex-col lg:order-1 lg:min-h-0",
+        useAutoBoardLayout && "lg:max-w-[min(100%,38rem)]",
       )}
+      style={boardColumnStyle}
     >
-      <TreeViewer
-      chessTree={chessTree}
-      {onSelectNode}
-      {onDeleteVariant}
-      {setChessFen}
-      {setChessboardFen}
-      pieceSet={chessboard.chessSet}
-      className="min-h-0 flex-1 border-x-0 border-t-0"
-      {editMode}
-      {selectable}
-    />
+      <div
+        class="aspect-square w-full shrink-0"
+        bind:clientHeight={boardHeight}
+      >
+        <Chessboard facade={chessboard} design={chessboardDesign} />
+      </div>
     </div>
-  </div>
 
-  <div
-    class="order-1 flex w-full max-w-[38rem] shrink-0 flex-col gap-2 lg:order-1 lg:min-h-0"
-  >
-    <div class="w-full shrink-0">
-      <Chessboard facade={chessboard} />
+    <div
+      class={cn(
+        "order-2 flex min-h-48 min-w-0 flex-1 flex-col lg:order-2 lg:min-w-[20rem] lg:shrink-0",
+        treeHeightLocked &&
+          "lg:h-[var(--pane-board-height)] lg:max-h-[var(--pane-board-height)] lg:min-h-0 lg:overflow-hidden",
+      )}
+      style={treeColumnStyle}
+    >
+      <div
+        class="flex min-h-0 flex-1 flex-col overflow-hidden border border-border"
+      >
+        <TreeViewer
+          {chessTree}
+          {onSelectNode}
+          {onDeleteVariant}
+          {setChessFen}
+          {setChessboardFen}
+          className="min-h-0 flex-1 rounded-none border-0"
+          {editMode}
+          {selectable}
+          {showPuzzleBranchNags}
+          {theme}
+        />
+      </div>
     </div>
-    {@render belowChessboard?.()}
   </div>
+
+  {@render belowChessboard?.()}
 </div>

package/dist/puzzle-creation/PuzzleBoardTreeViewerPane.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from "svelte";
-import type { BoardApi } from "@connectorvol/chessboard";
-import type { ChessTree } from "@connectorvol/tree";
+import type { BoardApi, TChessBoardDesignSettings } from "@connectorvol/chessboard";
+import type { ChessTree, TTreeViewerTheme } from "@connectorvol/tree";
 /**
  * Представляет свойства панели разметки «доска и просмотр дерева партии».
  */
@@ -9,6 +9,10 @@ interface Props {
      * Возвращает API шахматной доски для компонента `Chessboard`.
      */
     chessboard: BoardApi;
+    /**
+     * Возвращает снимок дизайна, передаваемый в `<Chessboard design={...} />`.
+     */
+    chessboardDesign: TChessBoardDesignSettings;
     /**
      * Возвращает экземпляр дерева ходов для `TreeViewer`.
      */
@@ -37,6 +41,16 @@ interface Props {
      * Возвращает признак возможности выбора узлов в дереве.
      */
     selectable?: boolean;
+    /**
+     * Возвращает true, если в режиме правки показывать группу NAG «Задача (развилка)»
+     * рядом с кнопками undo/redo на ходах из развилки.
+     */
+    showPuzzleBranchNags?: boolean;
+    /**
+     * Возвращает тему `TreeViewer` (фон, границы, текст). Если не задана —
+     * используется `TREE_VIEWER_LIGHT_THEME`.
+     */
+    theme?: TTreeViewerTheme;
     /**
      * Возвращает дополнительные классы Tailwind для корневого контейнера.
      */