@connectorvol/chess-widgets 8.0.1 → 9.0.1

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,112 +1,212 @@
 <script lang="ts">
-  import type { Snippet } from "svelte";
+    import type { Snippet } from "svelte";
+    import { MediaQuery } from "svelte/reactivity";
+    import { mode } from "mode-watcher";
 
-  import type { BoardApi } from "@connectorvol/chessboard";
-  import { Chessboard } from "@connectorvol/chessboard";
-  import type { ChessTree } from "@connectorvol/tree";
-  import { TreeViewer } from "@connectorvol/tree";
+    import type {
+        BoardApi,
+        TChessBoardDesignSettings,
+    } from "@connectorvol/chessboard";
+    import {
+        Chessboard,
+        getBoardDesignSettingsContext,
+    } from "@connectorvol/chessboard";
+    import type { ChessTree, TTreeViewerTheme } from "@connectorvol/tree";
+    import {
+        TREE_VIEWER_DARK_THEME,
+        TREE_VIEWER_LIGHT_THEME,
+        TreeViewer,
+    } from "@connectorvol/tree";
 
-  import { cn } from "../utils.js";
+    import { cn } from "../utils.js";
 
-  /**
-   * Представляет свойства панели разметки «доска и просмотр дерева партии».
-   */
-  interface Props {
     /**
-     * Возвращает API шахматной доски для компонента `Chessboard`.
+     * Представляет свойства панели разметки «доска и просмотр дерева партии».
      */
-    chessboard: BoardApi;
-    /**
-     * Возвращает экземпляр дерева ходов для `TreeViewer`.
-     */
-    chessTree: ChessTree;
-    /**
-     * Возвращает обработчик выбора узла в дереве.
-     */
-    onSelectNode: () => void;
-    /**
-     * Возвращает обработчик после удаления варианта.
-     */
-    onDeleteVariant: () => void;
-    /**
-     * Возвращает функцию установки FEN в движке партии.
-     */
-    setChessFen: (fen: string) => void;
-    /**
-     * Возвращает функцию синхронизации FEN и UI доски.
-     */
-    setChessboardFen: (animationTime?: number) => void;
-    /**
-     * Возвращает признак режима правки дерева (`TreeViewer.editMode`).
-     */
-    editMode?: boolean;
-    /**
-     * Возвращает признак возможности выбора узлов в дереве.
-     */
-    selectable?: boolean;
-    /**
-     * Возвращает дополнительные классы Tailwind для корневого контейнера.
-     */
-    class?: string;
-    /**
-     * Возвращает фрагмент разметки под шахматной доской (например сообщение об ошибке в превью).
-     */
-    belowChessboard?: Snippet;
-  }
-
-  const {
-    chessboard,
-    chessTree,
-    onSelectNode,
-    onDeleteVariant,
-    setChessFen,
-    setChessboardFen,
-    editMode = true,
-    selectable = true,
-    class: className,
-    belowChessboard,
-  }: Props = $props();
-
-  const hasBoardCoordinatesWithoutBorder = $derived(
-    chessboard.showBoardCoordinates && !chessboard.border,
-  );
+    interface Props {
+        /**
+         * Возвращает API шахматной доски для компонента `Chessboard`.
+         */
+        chessboard: BoardApi;
+        /**
+         * Возвращает снимок дизайна, передаваемый в `<Chessboard design={...} />`.
+         * Опционально: если не передан, доска читает дизайн из контекста
+         * (`setBoardDesignSettingsContext`), что позволяет реактивно подхватывать
+         * изменения из `<BoardSettings />`.
+         */
+        chessboardDesign?: TChessBoardDesignSettings;
+        /**
+         * Возвращает экземпляр дерева ходов для `TreeViewer`.
+         */
+        chessTree: ChessTree;
+        /**
+         * Возвращает обработчик выбора узла в дереве.
+         */
+        onSelectNode: () => void;
+        /**
+         * Возвращает обработчик после удаления варианта.
+         */
+        onDeleteVariant: () => void;
+        /**
+         * Возвращает функцию установки FEN в движке партии.
+         */
+        setChessFen: (fen: string) => void;
+        /**
+         * Возвращает функцию синхронизации FEN и UI доски.
+         */
+        setChessboardFen: (animationTime?: number) => void;
+        /**
+         * Возвращает признак режима правки дерева (`TreeViewer.editMode`).
+         */
+        editMode?: boolean;
+        /**
+         * Возвращает признак возможности выбора узлов в дереве.
+         */
+        selectable?: boolean;
+        /**
+         * Возвращает true, если в режиме правки показывать группу NAG «Задача (развилка)»
+         * рядом с кнопками undo/redo на ходах из развилки.
+         */
+        showPuzzleBranchNags?: boolean;
+        /**
+         * Возвращает тему `TreeViewer` (фон, границы, текст). По умолчанию
+         * подстраивается под `mode-watcher` (dark → `TREE_VIEWER_DARK_THEME`,
+         * иначе `TREE_VIEWER_LIGHT_THEME`).
+         */
+        theme?: TTreeViewerTheme;
+        /**
+         * Возвращает дополнительные классы Tailwind для корневого контейнера.
+         */
+        class?: string;
+        /**
+         * Возвращает фрагмент разметки под шахматной доской (например сообщение об ошибке в превью).
+         */
+        belowChessboard?: Snippet;
+    }
+
+    const {
+        chessboard,
+        chessboardDesign,
+        chessTree,
+        onSelectNode,
+        onDeleteVariant,
+        setChessFen,
+        setChessboardFen,
+        editMode = true,
+        selectable = true,
+        showPuzzleBranchNags = false,
+        theme,
+        class: className,
+        belowChessboard,
+    }: Props = $props();
+
+    // ponytail: автотема по mode-watcher вместо жёсткого светлого дефолта,
+    // как в chess-tree/src/routes/game/+page.svelte. Явный проп `theme` побеждает.
+    const resolvedTheme = $derived<TTreeViewerTheme>(
+        theme ??
+            (mode.current === "dark"
+                ? TREE_VIEWER_DARK_THEME
+                : TREE_VIEWER_LIGHT_THEME),
+    );
+
+    /** 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="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"
-  >
+<div class={cn("flex w-full flex-col gap-2", className)}>
     <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",
-      )}
+        class="relative flex min-h-0 flex-col gap-4 lg:flex-row lg:items-stretch"
     >
-      <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>
-  </div>
+        <div
+            class={cn(
+                "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}
+        >
+            <div
+                class="aspect-square w-full shrink-0"
+                bind:clientHeight={boardHeight}
+            >
+                <Chessboard
+                    facade={chessboard}
+                    design={chessboardDesign ??
+                        getBoardDesignSettingsContext() ??
+                        undefined}
+                />
+            </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 bg-[var(--tree-viewer-bg)]"
+                    {editMode}
+                    {selectable}
+                    {showPuzzleBranchNags}
+                    theme={resolvedTheme}
+                />
+            </div>
+        </div>
     </div>
+
     {@render belowChessboard?.()}
-  </div>
 </div>