@connectorvol/chess-widgets 9.0.0 → 9.0.1

package/dist/puzzle-creation/StepMoves.svelte

@@ -1,219 +1,221 @@
 <script lang="ts">
-  import type {
-    BoardApi,
-    TChessBoardDesignSettings,
-  } from "@connectorvol/chessboard";
-
-  import { Draggable } from "@connectorvol/chessboard";
-  import type { ChessTree } from "@connectorvol/tree";
-
-  import { Color } from "@connectorvol/shared";
-  import { Popover } from "bits-ui";
-
-  import { buttonVariants } from "../button-variants.js";
-  import PuzzleBoardTreeViewerPane from "./PuzzleBoardTreeViewerPane.svelte";
-  import { cn } from "../utils.js";
-
-  import type { PgnOps } from "@connectorvol/chessops/pgnOps.svelte";
-  import {
-    getMainLineFromTree,
-    type PuzzleData,
-  } from "../puzzle/puzzleData.js";
-  import { validatePuzzleSolverForkAnnotations } from "../puzzle/puzzleSolverForkAnnotations.js";
-  import { syncPuzzleBranchNagsOnTree } from "../puzzle/syncPuzzleBranchNags.js";
-  import { untrack } from "svelte";
-
-  interface Props {
-    puzzleData: PuzzleData;
-    onBack: () => void;
-    onNext: (moves: string[]) => void;
-    chess: PgnOps;
-    tree: ChessTree;
-    chessboard: BoardApi;
-    chessboardDesign: TChessBoardDesignSettings;
-  }
-
-  const {
-    puzzleData,
-    onBack,
-    onNext,
-    chess,
-    tree,
-    chessboard,
-    chessboardDesign,
-  }: Props = $props();
-
-  const initialTurn = $derived(
-    puzzleData.initialFen.trim().split(/\s+/)[1] === "b"
-      ? Color.BLACK
-      : Color.WHITE,
-  );
-
-  const mainLine = $derived(getMainLineFromTree(tree.rootNode));
-
-  function setChessFen(fen: string) {
-    chess.setFen(fen);
-  }
-
-  function setChessboardFen(_animationTime: number | undefined) {
-    chessboard.fen = chess.fen();
-    const side = chess.turn();
-    chessboard.draggable =
-      side === Color.WHITE ? Draggable.WHITE : Draggable.BLACK;
-  }
-
-  function onSelectNode() {
-    setChessFen(tree.currentNode.data.fen);
-    setChessboardFen(0);
-  }
-
-  function onDeleteVariant() {
-    setChessFen(tree.currentNode.data.fen);
-    setChessboardFen(0);
-  }
-
-  const canGoNext = $derived(mainLine.length >= 1 && mainLine.length % 2 === 1);
-
-  const solverForkAnnotations = $derived(
-    validatePuzzleSolverForkAnnotations(tree, initialTurn),
-  );
-
-  const canProceedToNextStep = $derived(canGoNext && solverForkAnnotations.ok);
-
-  /** Представляет автоматическую разметку ✓/✗ на развилках решателя после каждой правки дерева. */
-  $effect(() => {
-    void tree.mutationVersion;
-    untrack(() => {
-      syncPuzzleBranchNagsOnTree(tree, initialTurn);
-    });
-  });
+    import type { BoardApi } from "@connectorvol/chessboard";
+
+    import { Draggable } from "@connectorvol/chessboard";
+    import type { ChessTree } from "@connectorvol/tree";
+
+    import { Color } from "@connectorvol/shared";
+    import { Popover } from "bits-ui";
+
+    import { buttonVariants } from "../button-variants.js";
+    import PuzzleBoardTreeViewerPane from "./PuzzleBoardTreeViewerPane.svelte";
+    import { cn } from "../utils.js";
+
+    import type { PgnOps } from "@connectorvol/chessops/pgnOps.svelte";
+    import {
+        getMainLineFromTree,
+        type PuzzleData,
+    } from "../puzzle/puzzleData.js";
+    import { validatePuzzleSolverForkAnnotations } from "../puzzle/puzzleSolverForkAnnotations.js";
+    import { syncPuzzleBranchNagsOnTree } from "../puzzle/syncPuzzleBranchNags.js";
+    import { untrack } from "svelte";
+
+    interface Props {
+        puzzleData: PuzzleData;
+        onBack: () => void;
+        onNext: (moves: string[]) => void;
+        chess: PgnOps;
+        tree: ChessTree;
+        chessboard: BoardApi;
+    }
+
+    const { puzzleData, onBack, onNext, chess, tree, chessboard }: Props =
+        $props();
+
+    const initialTurn = $derived(
+        puzzleData.initialFen.trim().split(/\s+/)[1] === "b"
+            ? Color.BLACK
+            : Color.WHITE,
+    );
+
+    const mainLine = $derived(getMainLineFromTree(tree.rootNode));
 
-  /** Текст предупреждения по шагу для кнопки «!» (если пусто — предупреждений нет). */
-  const stepIssueMessage = $derived.by(() => {
-    if (!canGoNext && mainLine.length > 0) {
-      return `Последний ход должна сделать сторона, которая начинала. Добавьте ещё один ход за ${initialTurn === Color.WHITE ? "белых" : "чёрных"}.`;
+    function setChessFen(fen: string) {
+        chess.setFen(fen);
     }
-    if (canGoNext && !solverForkAnnotations.ok) {
-      return solverForkAnnotations.reason;
+
+    function setChessboardFen(_animationTime: number | undefined) {
+        chessboard.fen = chess.fen();
+        const side = chess.turn();
+        chessboard.draggable =
+            side === Color.WHITE ? Draggable.WHITE : Draggable.BLACK;
+    }
+
+    function onSelectNode() {
+        setChessFen(tree.currentNode.data.fen);
+        setChessboardFen(0);
     }
-    return null;
-  });
 
-  function handleNext() {
-    if (canProceedToNextStep) {
-      onNext(mainLine);
+    function onDeleteVariant() {
+        setChessFen(tree.currentNode.data.fen);
+        setChessboardFen(0);
+    }
+
+    const canGoNext = $derived(
+        mainLine.length >= 1 && mainLine.length % 2 === 1,
+    );
+
+    const solverForkAnnotations = $derived(
+        validatePuzzleSolverForkAnnotations(tree, initialTurn),
+    );
+
+    const canProceedToNextStep = $derived(
+        canGoNext && solverForkAnnotations.ok,
+    );
+
+    /** Представляет автоматическую разметку ✓/✗ на развилках решателя после каждой правки дерева. */
+    $effect(() => {
+        void tree.mutationVersion;
+        untrack(() => {
+            syncPuzzleBranchNagsOnTree(tree, initialTurn);
+        });
+    });
+
+    /** Текст предупреждения по шагу для кнопки «!» (если пусто — предупреждений нет). */
+    const stepIssueMessage = $derived.by(() => {
+        if (!canGoNext && mainLine.length > 0) {
+            return `Последний ход должна сделать сторона, которая начинала. Добавьте ещё один ход за ${initialTurn === Color.WHITE ? "белых" : "чёрных"}.`;
+        }
+        if (canGoNext && !solverForkAnnotations.ok) {
+            return solverForkAnnotations.reason;
+        }
+        return null;
+    });
+
+    function handleNext() {
+        if (canProceedToNextStep) {
+            onNext(mainLine);
+        }
     }
-  }
 </script>
 
 <div class="flex flex-col gap-3 pt-2 pb-0">
-  <div class="flex flex-wrap items-center gap-2">
-    <h2 class="text-xl font-semibold">Шаг 2: Построение линии решения</h2>
-    <Popover.Root>
-      <Popover.Trigger type="button">
-        {#snippet child({ props })}
-          <button
-            {...props}
+    <div class="flex flex-wrap items-center gap-2">
+        <h2 class="text-xl font-semibold">Шаг 2: Построение линии решения</h2>
+        <Popover.Root>
+            <Popover.Trigger type="button">
+                {#snippet child({ props })}
+                    <button
+                        {...props}
+                        type="button"
+                        class={cn(
+                            buttonVariants({
+                                variant: "outline",
+                                size: "icon-sm",
+                            }),
+                            "size-7 shrink-0 rounded-full text-sm font-semibold",
+                        )}
+                        aria-label="Справка: построение линии решения"
+                    >
+                        ?
+                    </button>
+                {/snippet}
+            </Popover.Trigger>
+            <Popover.Portal>
+                <Popover.Content
+                    side="bottom"
+                    align="start"
+                    sideOffset={8}
+                    class={cn(
+                        "bg-popover text-popover-foreground border-border z-50 max-h-[min(70vh,32rem)] w-[min(calc(100vw-2rem),28rem)] overflow-y-auto rounded-lg border p-4 text-sm shadow-md outline-none",
+                        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+                        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+                    )}
+                >
+                    <p class="text-muted-foreground leading-relaxed">
+                        Делайте ходы за обе стороны. Последний ход должна
+                        сделать сторона, которая начинала игру (ключевой ход). В
+                        дереве можно выбирать ходы, добавлять комментарии и
+                        символы оценки в режиме правки. Ходы главной линии
+                        автоматически получают ✓ (верный ход), неверные ходы
+                        решателя в вариациях — ✗; ходы соперника без этих меток.
+                        Если от позиции решателя есть несколько вариантов хода,
+                        главный вариант должен быть верным, остальные —
+                        неверными. После ✓ главный вариант нужно довести до
+                        позиции, где последним походил решатель. Если несколько
+                        ответов соперника ведут из одной позиции, каждая такая
+                        линия должна заканчиваться ходом решателя.
+                    </p>
+                </Popover.Content>
+            </Popover.Portal>
+        </Popover.Root>
+        {#if stepIssueMessage}
+            <Popover.Root>
+                <Popover.Trigger type="button">
+                    {#snippet child({ props })}
+                        <button
+                            {...props}
+                            type="button"
+                            class={cn(
+                                buttonVariants({
+                                    variant: "outline",
+                                    size: "icon-sm",
+                                }),
+                                "size-7 shrink-0 rounded-full border-amber-600/60 text-sm font-semibold text-amber-600 dark:border-amber-400/60 dark:text-amber-400",
+                            )}
+                            aria-label="Предупреждение по условиям шага"
+                        >
+                            !
+                        </button>
+                    {/snippet}
+                </Popover.Trigger>
+                <Popover.Portal>
+                    <Popover.Content
+                        side="bottom"
+                        align="start"
+                        sideOffset={8}
+                        class={cn(
+                            "bg-popover text-popover-foreground border-border z-50 max-h-[min(70vh,32rem)] w-[min(calc(100vw-2rem),28rem)] overflow-y-auto rounded-lg border p-4 text-sm shadow-md outline-none",
+                            "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+                            "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+                        )}
+                    >
+                        <p
+                            class="leading-relaxed text-amber-700 dark:text-amber-400"
+                        >
+                            {stepIssueMessage}
+                        </p>
+                    </Popover.Content>
+                </Popover.Portal>
+            </Popover.Root>
+        {/if}
+    </div>
+
+    <PuzzleBoardTreeViewerPane
+        {chessboard}
+        chessTree={tree}
+        {onSelectNode}
+        {onDeleteVariant}
+        {setChessFen}
+        {setChessboardFen}
+        showPuzzleBranchNags={true}
+    />
+
+    <div class="flex justify-between">
+        <button
+            type="button"
+            class={cn(buttonVariants({ variant: "outline" }))}
+            onclick={onBack}
+        >
+            Назад
+        </button>
+        <button
             type="button"
-            class={cn(
-              buttonVariants({ variant: "outline", size: "icon-sm" }),
-              "size-7 shrink-0 rounded-full text-sm font-semibold",
-            )}
-            aria-label="Справка: построение линии решения"
-          >
-            ?
-          </button>
-        {/snippet}
-      </Popover.Trigger>
-      <Popover.Portal>
-        <Popover.Content
-          side="bottom"
-          align="start"
-          sideOffset={8}
-          class={cn(
-            "bg-popover text-popover-foreground border-border z-50 max-h-[min(70vh,32rem)] w-[min(calc(100vw-2rem),28rem)] overflow-y-auto rounded-lg border p-4 text-sm shadow-md outline-none",
-            "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-            "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-          )}
+            class={cn(buttonVariants({ variant: "default" }))}
+            onclick={handleNext}
+            disabled={!canProceedToNextStep}
         >
-          <p class="text-muted-foreground leading-relaxed">
-            Делайте ходы за обе стороны. Последний ход должна сделать сторона,
-            которая начинала игру (ключевой ход). В дереве можно выбирать ходы,
-            добавлять комментарии и символы оценки в режиме правки. Ходы главной
-            линии автоматически получают ✓ (верный ход), неверные ходы решателя
-            в вариациях — ✗; ходы соперника без этих меток. Если от позиции
-            решателя есть несколько вариантов хода, главный вариант должен быть
-            верным, остальные — неверными. После ✓ главный вариант нужно довести
-            до позиции, где последним походил решатель. Если несколько ответов
-            соперника ведут из одной позиции, каждая такая линия должна
-            заканчиваться ходом решателя.
-          </p>
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover.Root>
-    {#if stepIssueMessage}
-      <Popover.Root>
-        <Popover.Trigger type="button">
-          {#snippet child({ props })}
-            <button
-              {...props}
-              type="button"
-              class={cn(
-                buttonVariants({ variant: "outline", size: "icon-sm" }),
-                "size-7 shrink-0 rounded-full border-amber-600/60 text-sm font-semibold text-amber-600 dark:border-amber-400/60 dark:text-amber-400",
-              )}
-              aria-label="Предупреждение по условиям шага"
-            >
-              !
-            </button>
-          {/snippet}
-        </Popover.Trigger>
-        <Popover.Portal>
-          <Popover.Content
-            side="bottom"
-            align="start"
-            sideOffset={8}
-            class={cn(
-              "bg-popover text-popover-foreground border-border z-50 max-h-[min(70vh,32rem)] w-[min(calc(100vw-2rem),28rem)] overflow-y-auto rounded-lg border p-4 text-sm shadow-md outline-none",
-              "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-              "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-            )}
-          >
-            <p class="leading-relaxed text-amber-700 dark:text-amber-400">
-              {stepIssueMessage}
-            </p>
-          </Popover.Content>
-        </Popover.Portal>
-      </Popover.Root>
-    {/if}
-  </div>
-
-  <PuzzleBoardTreeViewerPane
-    {chessboard}
-    {chessboardDesign}
-    chessTree={tree}
-    {onSelectNode}
-    {onDeleteVariant}
-    {setChessFen}
-    {setChessboardFen}
-    showPuzzleBranchNags={true}
-  />
-
-  <div class="flex justify-between">
-    <button
-      type="button"
-      class={cn(buttonVariants({ variant: "outline" }))}
-      onclick={onBack}
-    >
-      Назад
-    </button>
-    <button
-      type="button"
-      class={cn(buttonVariants({ variant: "default" }))}
-      onclick={handleNext}
-      disabled={!canProceedToNextStep}
-    >
-      Далее
-    </button>
-  </div>
+            Далее
+        </button>
+    </div>
 </div>

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

@@ -1,4 +1,4 @@
-import type { BoardApi, TChessBoardDesignSettings } from "@connectorvol/chessboard";
+import type { BoardApi } from "@connectorvol/chessboard";
 import type { ChessTree } from "@connectorvol/tree";
 import type { PgnOps } from "@connectorvol/chessops/pgnOps.svelte";
 import { type PuzzleData } from "../puzzle/puzzleData.js";
@@ -9,7 +9,6 @@ interface Props {
     chess: PgnOps;
     tree: ChessTree;
     chessboard: BoardApi;
-    chessboardDesign: TChessBoardDesignSettings;
 }
 declare const StepMoves: import("svelte").Component<Props, {}, "">;
 type StepMoves = ReturnType<typeof StepMoves>;

package/dist/puzzle-creation/StepPosition.svelte

@@ -3,8 +3,11 @@
         Chessboard,
         CHESSBOARD_THEMES,
         createBoardApi,
+        DEFAULT_DESIGN_SETTINGS,
+        getBoardDesignSettingsContext,
         type ChessboardTheme,
     } from "@connectorvol/chessboard";
+    import { untrack } from "svelte";
 
     import { DEFAULT_EDITABLE_BOARD_SETTINGS } from "../constants/editable-board-settings.js";
     import EditFen from "../position-editor/EditFen.svelte";
@@ -49,6 +52,19 @@
         }),
     );
 
+    // ponytail: компонент только читает контекст дизайна. Если layout уже
+    // поднял его — Chessboard берёт дизайн из контекста сам, иначе
+    // используем дизайн из `puzzleStepBoardSettings.design`
+    // (`boardTheme` + `boardAppearanceSettings.design`).
+    const inheritedDesign = getBoardDesignSettingsContext();
+    const localDesign = $derived({
+        ...DEFAULT_DESIGN_SETTINGS,
+        ...puzzleStepBoardSettings.design,
+    });
+    const chessboardDesign = $derived(
+        inheritedDesign ? undefined : localDesign,
+    );
+
     /** Один объект Fen на доску: создаём сразу с нужной начальной строкой. */
     const fen = $derived.by(() => {
         const f = new Fen(chessboard);
@@ -127,9 +143,13 @@
                     <!-- Явная ширина: при родителе с w-fit/min-content BoardContainer даёт min(100%, Nrem), и 100% может схлопнуться до нуля. -->
                     <div
                         class="shrink-0 max-w-full"
-                        style="width: {puzzleStepBoardSettings.play.boardSize}rem; max-width: 100%;"
+                        style="width: {puzzleStepBoardSettings.play
+                            .boardSize}rem; max-width: 100%;"
                     >
-                        <Chessboard facade={chessboard} design={puzzleStepBoardSettings.design} />
+                        <Chessboard
+                            facade={chessboard}
+                            design={chessboardDesign}
+                        />
                     </div>
                     <div
                         class="hidden min-w-0 flex-1 flex-col gap-3 md:flex md:min-w-[280px]"

package/dist/puzzle-creation/puzzleWizardState.js

@@ -1,4 +1,4 @@
-import { createInitialPuzzleData, } from "../puzzle/puzzleData.js";
+import { createInitialPuzzleData } from "../puzzle/puzzleData.js";
 /** Возвращает базовые шаги мастера: позиция, ходы, превью. */
 export const PUZZLE_WIZARD_CORE_STEPS = [
     { id: "position", title: "Позиция" },

package/dist/puzzle-creation/types.d.ts

@@ -39,10 +39,6 @@ export interface TPuzzlePgnBoardTreeEditorProps {
      * Возвращает признак «все линии превью пройдены» — полное дерево решения на экране, как перед «Готово» в мастере (двухсторонняя привязка).
      */
     solved?: boolean;
-    /**
-     * Возвращает тему оформления шахматной доски (по умолчанию `CHESSBOARD_THEMES.blue`).
-     */
-    boardTheme?: ChessboardTheme;
     /**
      * Возвращает дополнительные визуальные настройки шахматной доски (кроме `boardSize`, `orientation`, `draggable`).
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connectorvol/chess-widgets",
-  "version": "9.0.0",
+  "version": "9.0.1",
   "private": false,
   "files": [
     "dist",
@@ -42,10 +42,10 @@
     "test:e2e:ui": "node node_modules/@playwright/test/cli.js test --ui"
   },
   "dependencies": {
-    "@connectorvol/chessboard": "9.0.0",
-    "@connectorvol/chessops": "9.0.0",
-    "@connectorvol/shared": "9.0.0",
-    "@connectorvol/tree": "9.0.0",
+    "@connectorvol/chessboard": "9.0.1",
+    "@connectorvol/chessops": "9.0.1",
+    "@connectorvol/shared": "9.0.1",
+    "@connectorvol/tree": "9.0.1",
     "bits-ui": "2.16.4",
     "clsx": "2.1.1",
     "svelte-toolbelt": "0.10.6",
@@ -53,11 +53,10 @@
     "tailwind-variants": "3.2.2"
   },
   "devDependencies": {
-    "@connectorvol/chess-shadcn": "9.0.0",
+    "@connectorvol/chess-shadcn": "9.0.1",
     "@ianvs/prettier-plugin-sort-imports": "4.5.1",
     "@lucide/svelte": "1.21.0",
-    "@testing-library/svelte": "5.3.1",
-    "@vitest/coverage-v8": "3.2.4",
+    "@playwright/test": "1.54.1",
     "@sveltejs/kit": "2.49.1",
     "@sveltejs/package": "2.4.0",
     "@sveltejs/vite-plugin-svelte": "7.0.0",
@@ -65,19 +64,22 @@
     "@tailwindcss/postcss": "4.1.11",
     "@tailwindcss/typography": "0.5.16",
     "@tailwindcss/vite": "4.1.11",
+    "@testing-library/svelte": "5.3.1",
+    "@vitest/coverage-v8": "3.2.4",
     "autoprefixer": "10.4.21",
     "svelte-adapter-bun": "^1.0.1",
     "svelte-check": "4.6.0",
     "tailwindcss": "4.1.11",
     "tw-animate-css": "1.4.0",
     "typescript": "6.0.2",
-    "vitest": "4.0.17",
     "vite": "8.0.7",
     "vite-plugin-checker": "0.12.0",
-    "vite-plugin-svelte-checker": "0.1.2"
+    "vite-plugin-svelte-checker": "0.1.2",
+    "vitest": "4.0.17"
   },
   "peerDependencies": {
     "@lucide/svelte": "1.21.0",
+    "mode-watcher": "1.1.0",
     "svelte": "5.56.3"
   }
 }