@connectorvol/chess-widgets 8.0.1 → 9.0.1

package/dist/puzzle-creation/PuzzleWizardTagsStep.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type {
+    TPuzzleOpeningTagOption,
+    TPuzzleTagOption,
+  } from "@connectorvol/shared";
+
+  import StepTags from "./StepTags.svelte";
+  import { getWizardContext } from "@connectorvol/shared";
+  import type { TPuzzleWizardState } from "./puzzleWizardState.js";
+
+  interface Props {
+    /** Возвращает каталог дебютов для выбора одного тега. */
+    openingTags: readonly TPuzzleOpeningTagOption[];
+    /** Возвращает каталог тактических приёмов. */
+    tacticTags: readonly TPuzzleTagOption[];
+    /** Возвращает максимальное число выбираемых тактических тегов. */
+    tacticTagsMax: number;
+  }
+
+  const { openingTags, tacticTags, tacticTagsMax }: Props = $props();
+
+  const w = getWizardContext<TPuzzleWizardState>();
+  let tags = $state(w.state.puzzleTags);
+</script>
+
+<StepTags
+  bind:tags
+  {openingTags}
+  {tacticTags}
+  {tacticTagsMax}
+  onBack={w.back}
+  onDone={(tags) => {
+    w.state.puzzleTags = tags;
+    w.done();
+  }}
+/>

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

@@ -0,0 +1,12 @@
+import type { TPuzzleOpeningTagOption, TPuzzleTagOption } from "@connectorvol/shared";
+interface Props {
+    /** Возвращает каталог дебютов для выбора одного тега. */
+    openingTags: readonly TPuzzleOpeningTagOption[];
+    /** Возвращает каталог тактических приёмов. */
+    tacticTags: readonly TPuzzleTagOption[];
+    /** Возвращает максимальное число выбираемых тактических тегов. */
+    tacticTagsMax: number;
+}
+declare const PuzzleWizardTagsStep: import("svelte").Component<Props, {}, "">;
+type PuzzleWizardTagsStep = ReturnType<typeof PuzzleWizardTagsStep>;
+export default PuzzleWizardTagsStep;

package/dist/puzzle-creation/StepMoves.svelte

@@ -1,199 +1,221 @@
 <script lang="ts">
-  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";
-
-  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));
-
-  function setChessFen(fen: string) {
-    chess.setFen(fen);
-  }
-
-  function setChessboardFen(_animationTime?: number) {
-    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();
-  }
-
-  function onDeleteVariant() {
-    setChessFen(tree.currentNode.data.fen);
-    setChessboardFen();
-  }
-
-  const canGoNext = $derived(mainLine.length >= 1 && mainLine.length % 2 === 1);
-
-  const solverForkAnnotations = $derived(
-    validatePuzzleSolverForkAnnotations(tree, initialTurn),
-  );
-
-  const canProceedToNextStep = $derived(canGoNext && solverForkAnnotations.ok);
-
-  /** Текст предупреждения по шагу для кнопки «!» (если пусто — предупреждений нет). */
-  const stepIssueMessage = $derived.by(() => {
-    if (!canGoNext && mainLine.length > 0) {
-      return `Последний ход должна сделать сторона, которая начинала. Добавьте ещё один ход за ${initialTurn === Color.WHITE ? "белых" : "чёрных"}.`;
+    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;
     }
-    if (canGoNext && !solverForkAnnotations.ok) {
-      return solverForkAnnotations.reason;
+
+    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));
+
+    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;
     }
-    return null;
-  });
 
-  function handleNext() {
-    if (canProceedToNextStep) {
-      onNext(mainLine);
+    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);
+        });
+    });
+
+    /** Текст предупреждения по шагу для кнопки «!» (если пусто — предупреждений нет). */
+    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}
-    chessTree={tree}
-    {onSelectNode}
-    {onDeleteVariant}
-    {setChessFen}
-    {setChessboardFen}
-  />
-
-  <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/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";
@@ -28,21 +31,40 @@
 
     /** Настройки доски мастера задачи: фиксированный размер, без ручного resize. */
     const puzzleStepBoardSettings = $derived({
-        ...DEFAULT_EDITABLE_BOARD_SETTINGS,
-        ...(props.boardAppearanceSettings ?? {}),
-        boardSize: 29,
-        isResizable: false,
-        editSettings: DEFAULT_EDITABLE_BOARD_SETTINGS.editSettings,
+        play: {
+            ...DEFAULT_EDITABLE_BOARD_SETTINGS.play,
+            ...(props.boardAppearanceSettings?.play ?? {}),
+            boardSize: 29,
+            isResizable: false,
+            editSettings: DEFAULT_EDITABLE_BOARD_SETTINGS.play.editSettings,
+        },
+        design: {
+            ...DEFAULT_EDITABLE_BOARD_SETTINGS.design,
+            ...(props.boardAppearanceSettings?.design ?? {}),
+            theme: props.boardTheme ?? CHESSBOARD_THEMES.blue,
+        },
     });
 
     let chessboard = $derived(
         createBoardApi({
             fen: (() => props.initialFen)(),
-            settings: puzzleStepBoardSettings,
-            theme: props.boardTheme ?? CHESSBOARD_THEMES.blue,
+            playSettings: puzzleStepBoardSettings.play,
         }),
     );
 
+    // 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);
@@ -121,9 +143,13 @@
                     <!-- Явная ширина: при родителе с w-fit/min-content BoardContainer даёт min(100%, Nrem), и 100% может схлопнуться до нуля. -->
                     <div
                         class="shrink-0 max-w-full"
-                        style="width: {puzzleStepBoardSettings.boardSize}rem; max-width: 100%;"
+                        style="width: {puzzleStepBoardSettings.play
+                            .boardSize}rem; max-width: 100%;"
                     >
-                        <Chessboard facade={chessboard} />
+                        <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/StepPreview.svelte

@@ -27,10 +27,12 @@
      * Возвращает колбэк сохранения задачи с FEN и строкой ходов (кнопка «Готово» показывается после решения превью).
      */
     onPuzzleCreated?: (payload: TPuzzleCreatedPayload) => void;
+    /** Возвращает переход на шаг выбора тегов вместо немедленного завершения. */
+    onNext?: () => void;
     /** Возвращает тему оформления шахматной доски (по умолчанию `CHESSBOARD_THEMES.blue`). */
     boardTheme?: ChessboardTheme;
     /** Возвращает дополнительные визуальные настройки шахматной доски (кроме `boardSize`, `orientation`, `draggable`). */
-    boardAppearanceSettings: TChessboardAppearanceSettings;
+    boardAppearanceSettings?: TChessboardAppearanceSettings;
   }
 
   const props: Props = $props();
@@ -150,16 +152,27 @@
     >
       Назад
     </button>
-    {#if props.onPuzzleCreated && solved}
-      <button
-        type="button"
-        class={cn(buttonVariants({ variant: "default" }))}
-        onclick={() =>
-          props.onPuzzleCreated?.(puzzlePartsFromFullPgn(props.solutionPgn))}
-        disabled={!props.solutionPgn.trim()}
-      >
-        Готово
-      </button>
+    {#if solved}
+      {#if props.onNext}
+        <button
+          type="button"
+          class={cn(buttonVariants({ variant: "default" }))}
+          onclick={props.onNext}
+          disabled={!props.solutionPgn.trim()}
+        >
+          Далее
+        </button>
+      {:else if props.onPuzzleCreated}
+        <button
+          type="button"
+          class={cn(buttonVariants({ variant: "default" }))}
+          onclick={() =>
+            props.onPuzzleCreated?.(puzzlePartsFromFullPgn(props.solutionPgn))}
+          disabled={!props.solutionPgn.trim()}
+        >
+          Готово
+        </button>
+      {/if}
     {/if}
   </div>
 </div>

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

@@ -13,10 +13,12 @@ interface Props {
      * Возвращает колбэк сохранения задачи с FEN и строкой ходов (кнопка «Готово» показывается после решения превью).
      */
     onPuzzleCreated?: (payload: TPuzzleCreatedPayload) => void;
+    /** Возвращает переход на шаг выбора тегов вместо немедленного завершения. */
+    onNext?: () => void;
     /** Возвращает тему оформления шахматной доски (по умолчанию `CHESSBOARD_THEMES.blue`). */
     boardTheme?: ChessboardTheme;
     /** Возвращает дополнительные визуальные настройки шахматной доски (кроме `boardSize`, `orientation`, `draggable`). */
-    boardAppearanceSettings: TChessboardAppearanceSettings;
+    boardAppearanceSettings?: TChessboardAppearanceSettings;
 }
 declare const StepPreview: import("svelte").Component<Props, {}, "">;
 type StepPreview = ReturnType<typeof StepPreview>;