@connectorvol/chess-widgets 1.0.0 → 1.2.0

package/dist/index.d.ts

@@ -1,10 +1,12 @@
 export { default as PuzzleCreationWizard } from "./puzzle-creation/PuzzleCreationWizard.svelte";
-export type { TPuzzleCreationWizardProps } from "./puzzle-creation/types.js";
+export { default as PuzzlePgnBoardTreeEditor } from "./puzzle-creation/PuzzlePgnBoardTreeEditor.svelte";
+export type { TPuzzleCreationWizardProps, TPuzzlePgnBoardTreeEditorOutcome, TPuzzlePgnBoardTreeEditorProps, } from "./puzzle-creation/types.js";
 export type { TPuzzleCreatedPayload } from "./puzzle/puzzleCreatedPayload.js";
 export { puzzlePartsFromFullPgn } from "./puzzle/puzzleCreatedPayload.js";
 export type { PuzzleData } from "./puzzle/puzzleData.js";
 export { PUZZLE_EMPTY_BOARD_FEN, createInitialPuzzleData, createEmptyTreeFromFen, getMainLineFromTree, } from "./puzzle/puzzleData.js";
 export type { TSolverMoveOutcome } from "./puzzle/puzzleStepPreviewSolver.js";
+export { PREVIEW_WRONG_NO_VARIANT_MESSAGE } from "./puzzle/puzzlePreviewConstants.js";
 export { DEFAULT_EDITABLE_BOARD_SETTINGS } from "./constants/editable-board-settings.js";
 export { default as EditFen } from "./position-editor/EditFen.svelte";
 export { default as EditMove } from "./position-editor/EditMove.svelte";

package/dist/index.js

@@ -1,6 +1,8 @@
 export { default as PuzzleCreationWizard } from "./puzzle-creation/PuzzleCreationWizard.svelte";
+export { default as PuzzlePgnBoardTreeEditor } from "./puzzle-creation/PuzzlePgnBoardTreeEditor.svelte";
 export { puzzlePartsFromFullPgn } from "./puzzle/puzzleCreatedPayload.js";
 export { PUZZLE_EMPTY_BOARD_FEN, createInitialPuzzleData, createEmptyTreeFromFen, getMainLineFromTree, } from "./puzzle/puzzleData.js";
+export { PREVIEW_WRONG_NO_VARIANT_MESSAGE } from "./puzzle/puzzlePreviewConstants.js";
 export { DEFAULT_EDITABLE_BOARD_SETTINGS } from "./constants/editable-board-settings.js";
 export { default as EditFen } from "./position-editor/EditFen.svelte";
 export { default as EditMove } from "./position-editor/EditMove.svelte";

package/dist/position-editor/EditMove.svelte

@@ -1,180 +1,186 @@
 <script lang="ts">
-  import type { BoardApi } from "@connectorvol/chessboard";
-  import type { Castling, Fen } from "./fen.svelte.js";
-  import { cn } from "../utils.js";
+    import type { BoardApi } from "@connectorvol/chessboard";
+    import type { Castling, Fen } from "./fen.svelte.js";
+    import { cn } from "../utils.js";
 
-  let isPossibleShortCastleWhite = $state(true);
-  let isPossibleShortCastleBlack = $state(true);
-  let isPossibleLongCastleWhite = $state(true);
-  let isPossibleLongCastleBlack = $state(true);
-
-  interface Props {
-    fen: Fen;
-    api: BoardApi;
-  }
+    interface Props {
+        fen: Fen;
+        api: BoardApi;
+    }
 
-  const { fen, api: _api }: Props = $props();
+    const { fen, api: _api }: Props = $props();
 
-  $effect(() => {
-    isPossibleShortCastleWhite = fen.castling.includes("K");
-    isPossibleShortCastleBlack = fen.castling.includes("k");
-    isPossibleLongCastleWhite = fen.castling.includes("Q");
-    isPossibleLongCastleBlack = fen.castling.includes("q");
-  });
+    const isPossibleShortCastleWhite = $derived(fen.castling.includes("K"));
+    const isPossibleShortCastleBlack = $derived(fen.castling.includes("k"));
+    const isPossibleLongCastleWhite = $derived(fen.castling.includes("Q"));
+    const isPossibleLongCastleBlack = $derived(fen.castling.includes("q"));
 
-  $effect(() => {
-    const castling = [
-      isPossibleShortCastleWhite,
-      isPossibleLongCastleWhite,
-      isPossibleShortCastleBlack,
-      isPossibleLongCastleBlack,
-    ]
-      .map((c, i) => (c ? "KQkq"[i] : ""))
-      .join("");
-    if (!castling) {
-      fen.castling = "-";
-    } else {
-      fen.castling = castling as Castling;
+    function buildCastling(
+        shortWhite: boolean,
+        longWhite: boolean,
+        shortBlack: boolean,
+        longBlack: boolean,
+    ): Castling {
+        const castling = [shortWhite, longWhite, shortBlack, longBlack]
+            .map((c, i) => (c ? "KQkq"[i] : ""))
+            .join("");
+        return (castling || "-") as Castling;
     }
-  });
 
-  const enPassantMoves = $derived(fen.genPossibleEnPassantMoves());
-  $effect(() => {
-    if (enPassantMoves.length === 0) {
-      fen.enPassant = "-";
+    function toggleCastling(flagIndex: number, value: boolean): void {
+        const flags = [
+            isPossibleShortCastleWhite,
+            isPossibleLongCastleWhite,
+            isPossibleShortCastleBlack,
+            isPossibleLongCastleBlack,
+        ];
+        flags[flagIndex] = value;
+        fen.castling = buildCastling(
+            flags[0]!,
+            flags[1]!,
+            flags[2]!,
+            flags[3]!,
+        );
     }
-  });
+
+    const enPassantMoves = $derived(fen.genPossibleEnPassantMoves());
 </script>
 
 <div class="space-y-3 md:space-y-4">
-  <div class="space-y-2">
-    <label
-      for="move-select"
-      class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-    >
-      Установить ход
-    </label>
-    <select
-      id="move-select"
-      bind:value={fen.move}
-      class={cn(
-        "border-input bg-background ring-offset-background shadow-xs flex h-9 w-full rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-      )}
-    >
-      <option value="w">w</option>
-      <option value="b">b</option>
-    </select>
-  </div>
-
-  <div class="space-y-2">
-    <label
-      for="enpassant-select"
-      class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-    >
-      Enpassant
-    </label>
-    <select
-      id="enpassant-select"
-      bind:value={fen.enPassant}
-      class={cn(
-        "border-input bg-background ring-offset-background shadow-xs flex h-9 w-full rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-      )}
-    >
-      <option value="-">-</option>
-      {#each enPassantMoves as move}
-        <option value={move}>{move}</option>
-      {/each}
-    </select>
-  </div>
-
-  <div class="space-y-2 md:space-y-3">
-    <div class="text-sm font-medium leading-none">Возможность рокировки</div>
-    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-4">
-      <div class="flex items-center space-x-2">
-        <input
-          type="checkbox"
-          id="isPossibleShortCastleWhite"
-          bind:checked={isPossibleShortCastleWhite}
-          class={cn(
-            "peer h-4 w-4 shrink-0 rounded-sm border border-input ring-offset-background transition-colors",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-            "disabled:cursor-not-allowed disabled:opacity-50",
-            "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-            "accent-primary",
-          )}
-        />
+    <div class="space-y-2">
         <label
-          for="isPossibleShortCastleWhite"
-          class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
+            for="move-select"
+            class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
         >
-          Белые 0-0
+            Установить ход
         </label>
-      </div>
-
-      <div class="flex items-center space-x-2">
-        <input
-          type="checkbox"
-          id="isPossibleShortCastleBlack"
-          bind:checked={isPossibleShortCastleBlack}
-          class={cn(
-            "peer h-4 w-4 shrink-0 rounded-sm border border-input ring-offset-background transition-colors",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-            "disabled:cursor-not-allowed disabled:opacity-50",
-            "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-            "accent-primary",
-          )}
-        />
-        <label
-          for="isPossibleShortCastleBlack"
-          class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
+        <select
+            id="move-select"
+            bind:value={fen.move}
+            class={cn(
+                "border-input bg-background ring-offset-background shadow-xs flex h-9 w-full rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+                "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+            )}
         >
-          Черные 0-0
-        </label>
-      </div>
+            <option value="w">w</option>
+            <option value="b">b</option>
+        </select>
+    </div>
 
-      <div class="flex items-center space-x-2">
-        <input
-          type="checkbox"
-          id="isPossibleLongCastleWhite"
-          bind:checked={isPossibleLongCastleWhite}
-          class={cn(
-            "peer h-4 w-4 shrink-0 rounded-sm border border-input ring-offset-background transition-colors",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-            "disabled:cursor-not-allowed disabled:opacity-50",
-            "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-            "accent-primary",
-          )}
-        />
+    <div class="space-y-2">
         <label
-          for="isPossibleLongCastleWhite"
-          class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
+            for="enpassant-select"
+            class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
         >
-          Белые 0-0-0
+            Enpassant
         </label>
-      </div>
-
-      <div class="flex items-center space-x-2">
-        <input
-          type="checkbox"
-          id="isPossibleLongCastleBlack"
-          bind:checked={isPossibleLongCastleBlack}
-          class={cn(
-            "peer h-4 w-4 shrink-0 rounded-sm border border-input ring-offset-background transition-colors",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-            "disabled:cursor-not-allowed disabled:opacity-50",
-            "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-            "accent-primary",
-          )}
-        />
-        <label
-          for="isPossibleLongCastleBlack"
-          class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
+        <select
+            id="enpassant-select"
+            bind:value={fen.enPassant}
+            class={cn(
+                "border-input bg-background ring-offset-background shadow-xs flex h-9 w-full rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+                "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+            )}
         >
-          Черные 0-0-0
-        </label>
-      </div>
+            <option value="-">-</option>
+            {#each enPassantMoves as move}
+                <option value={move}>{move}</option>
+            {/each}
+        </select>
+    </div>
+
+    <div class="space-y-2 md:space-y-3">
+        <div class="text-sm font-medium leading-none">
+            Возможность рокировки
+        </div>
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-4">
+            <div class="flex items-center space-x-2">
+                <input
+                    type="checkbox"
+                    id="isPossibleShortCastleWhite"
+                    checked={isPossibleShortCastleWhite}
+                    onchange={(e) => toggleCastling(0, e.currentTarget.checked)}
+                    class={cn(
+                        "peer h-4 w-4 shrink-0 rounded-sm border border-input ring-offset-background transition-colors",
+                        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                        "disabled:cursor-not-allowed disabled:opacity-50",
+                        "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+                        "accent-primary",
+                    )}
+                />
+                <label
+                    for="isPossibleShortCastleWhite"
+                    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
+                >
+                    Белые 0-0
+                </label>
+            </div>
+
+            <div class="flex items-center space-x-2">
+                <input
+                    type="checkbox"
+                    id="isPossibleShortCastleBlack"
+                    checked={isPossibleShortCastleBlack}
+                    onchange={(e) => toggleCastling(2, e.currentTarget.checked)}
+                    class={cn(
+                        "peer h-4 w-4 shrink-0 rounded-sm border border-input ring-offset-background transition-colors",
+                        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                        "disabled:cursor-not-allowed disabled:opacity-50",
+                        "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+                        "accent-primary",
+                    )}
+                />
+                <label
+                    for="isPossibleShortCastleBlack"
+                    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
+                >
+                    Черные 0-0
+                </label>
+            </div>
+
+            <div class="flex items-center space-x-2">
+                <input
+                    type="checkbox"
+                    id="isPossibleLongCastleWhite"
+                    checked={isPossibleLongCastleWhite}
+                    onchange={(e) => toggleCastling(1, e.currentTarget.checked)}
+                    class={cn(
+                        "peer h-4 w-4 shrink-0 rounded-sm border border-input ring-offset-background transition-colors",
+                        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                        "disabled:cursor-not-allowed disabled:opacity-50",
+                        "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+                        "accent-primary",
+                    )}
+                />
+                <label
+                    for="isPossibleLongCastleWhite"
+                    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
+                >
+                    Белые 0-0-0
+                </label>
+            </div>
+
+            <div class="flex items-center space-x-2">
+                <input
+                    type="checkbox"
+                    id="isPossibleLongCastleBlack"
+                    checked={isPossibleLongCastleBlack}
+                    onchange={(e) => toggleCastling(3, e.currentTarget.checked)}
+                    class={cn(
+                        "peer h-4 w-4 shrink-0 rounded-sm border border-input ring-offset-background transition-colors",
+                        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                        "disabled:cursor-not-allowed disabled:opacity-50",
+                        "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+                        "accent-primary",
+                    )}
+                />
+                <label
+                    for="isPossibleLongCastleBlack"
+                    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
+                >
+                    Черные 0-0-0
+                </label>
+            </div>
+        </div>
     </div>
-  </div>
 </div>

package/dist/puzzle/mergePgnWithSetupFen.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Представляет извлечение блока ходов из строки PGN без заголовков (только партия / варианты).
+ */
+export declare function stripPgnHeaders(movetextSource: string): string;
+/**
+ * Представляет сборку строки PGN с заголовком `[FEN "..."]` для парсера дерева при раздельной передаче FEN и текста ходов.
+ */
+export declare function mergePgnWithSetupFen(movetextOrFullPgn: string, fen: string): string;

package/dist/puzzle/mergePgnWithSetupFen.js

@@ -0,0 +1,28 @@
+/**
+ * Представляет извлечение блока ходов из строки PGN без заголовков (только партия / варианты).
+ */
+export function stripPgnHeaders(movetextSource) {
+    const lines = movetextSource.split("\n");
+    let i = 0;
+    while (i < lines.length) {
+        const line = lines[i].trim();
+        if (line === "") {
+            i++;
+            continue;
+        }
+        if (line.startsWith("[")) {
+            i++;
+            continue;
+        }
+        break;
+    }
+    return lines.slice(i).join("\n").trim();
+}
+/**
+ * Представляет сборку строки PGN с заголовком `[FEN "..."]` для парсера дерева при раздельной передаче FEN и текста ходов.
+ */
+export function mergePgnWithSetupFen(movetextOrFullPgn, fen) {
+    const escaped = fen.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+    const body = stripPgnHeaders(movetextOrFullPgn);
+    return `[SetUp "1"]\n[FEN "${escaped}"]\n\n${body}`;
+}

package/dist/puzzle/puzzlePreviewConstants.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Представляет текст сообщения «нет такого продолжения» для превью задачи (как на шаге 3).
+ */
+export declare const PREVIEW_WRONG_NO_VARIANT_MESSAGE = "\u0422\u0430\u043A\u043E\u0433\u043E \u043F\u0440\u043E\u0434\u043E\u043B\u0436\u0435\u043D\u0438\u044F \u043D\u0435\u0442 \u0441\u0440\u0435\u0434\u0438 \u0432\u0430\u0440\u0438\u0430\u043D\u0442\u043E\u0432 \u0437\u0430\u0434\u0430\u0447\u0438.";

package/dist/puzzle/puzzlePreviewConstants.js

@@ -0,0 +1,4 @@
+/**
+ * Представляет текст сообщения «нет такого продолжения» для превью задачи (как на шаге 3).
+ */
+export const PREVIEW_WRONG_NO_VARIANT_MESSAGE = "Такого продолжения нет среди вариантов задачи.";

package/dist/puzzle/puzzleStepPreviewSolver.d.ts

@@ -20,7 +20,7 @@ export declare function puzzlePreviewSideToMoveFromFen(fullFen: string): Color;
 /**
  * Представляет получение узла дерева по пути индексов детей от корня партии.
  */
-export declare function puzzlePreviewNodeAtPath(rootMoves: ChessTreeNode, path: number[]): ChessTreeNode;
+export declare function puzzlePreviewNodeAtPath(rootMoves: ChessTreeNode, path: number[]): ChessTreeNode | null;
 /**
  * Представляет поиск индекса ребёнка, чей SAN даёт ту же результирующую позицию, что и сыгранный SAN.
  */

package/dist/puzzle/puzzleStepPreviewSolver.js

@@ -13,7 +13,10 @@ export function puzzlePreviewSideToMoveFromFen(fullFen) {
 export function puzzlePreviewNodeAtPath(rootMoves, path) {
     let node = rootMoves;
     for (const idx of path) {
-        node = node.children[idx];
+        const child = node.children[idx];
+        if (!child)
+            return null;
+        node = child;
     }
     return node;
 }

package/dist/puzzle-creation/PuzzleBoardTreeViewerPane.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  import type { BoardApi } from "@connectorvol/chessboard";
+  import { Chessboard } from "@connectorvol/chessboard";
+  import type { ChessTree } from "@connectorvol/tree";
+  import { TreeViewer } from "@connectorvol/tree";
+  import { DEFAULT_PIECE_SET } from "@connectorvol/shared";
+
+  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();
+</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="flex min-h-28 min-w-0 flex-1 flex-col overflow-hidden rounded-md border border-border lg:min-h-0"
+    >
+      <TreeViewer
+        chessTree={chessTree}
+        {onSelectNode}
+        {onDeleteVariant}
+        {setChessFen}
+        {setChessboardFen}
+        pieceSet={DEFAULT_PIECE_SET}
+        className="min-h-0 flex-1 border-x-0 border-t-0"
+        {editMode}
+        {selectable}
+      />
+    </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>
+    {@render belowChessboard?.()}
+  </div>
+</div>

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

@@ -0,0 +1,51 @@
+import type { Snippet } from "svelte";
+import type { BoardApi } from "@connectorvol/chessboard";
+import type { ChessTree } from "@connectorvol/tree";
+/**
+ * Представляет свойства панели разметки «доска и просмотр дерева партии».
+ */
+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;
+}
+declare const PuzzleBoardTreeViewerPane: import("svelte").Component<Props, {}, "">;
+type PuzzleBoardTreeViewerPane = ReturnType<typeof PuzzleBoardTreeViewerPane>;
+export default PuzzleBoardTreeViewerPane;