@connectorvol/chess-widgets 8.0.1 → 9.0.0

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,5 +1,8 @@
 <script lang="ts">
-  import type { BoardApi } from "@connectorvol/chessboard";
+  import type {
+    BoardApi,
+    TChessBoardDesignSettings,
+  } from "@connectorvol/chessboard";
 
   import { Draggable } from "@connectorvol/chessboard";
   import type { ChessTree } from "@connectorvol/tree";
@@ -17,6 +20,8 @@
     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;
@@ -25,10 +30,18 @@
     chess: PgnOps;
     tree: ChessTree;
     chessboard: BoardApi;
+    chessboardDesign: TChessBoardDesignSettings;
   }
 
-  const { puzzleData, onBack, onNext, chess, tree, chessboard }: Props =
-    $props();
+  const {
+    puzzleData,
+    onBack,
+    onNext,
+    chess,
+    tree,
+    chessboard,
+    chessboardDesign,
+  }: Props = $props();
 
   const initialTurn = $derived(
     puzzleData.initialFen.trim().split(/\s+/)[1] === "b"
@@ -42,7 +55,7 @@
     chess.setFen(fen);
   }
 
-  function setChessboardFen(_animationTime?: number) {
+  function setChessboardFen(_animationTime: number | undefined) {
     chessboard.fen = chess.fen();
     const side = chess.turn();
     chessboard.draggable =
@@ -51,12 +64,12 @@
 
   function onSelectNode() {
     setChessFen(tree.currentNode.data.fen);
-    setChessboardFen();
+    setChessboardFen(0);
   }
 
   function onDeleteVariant() {
     setChessFen(tree.currentNode.data.fen);
-    setChessboardFen();
+    setChessboardFen(0);
   }
 
   const canGoNext = $derived(mainLine.length >= 1 && mainLine.length % 2 === 1);
@@ -67,6 +80,14 @@
 
   const canProceedToNextStep = $derived(canGoNext && solverForkAnnotations.ok);
 
+  /** Представляет автоматическую разметку ✓/✗ на развилках решателя после каждой правки дерева. */
+  $effect(() => {
+    void tree.mutationVersion;
+    untrack(() => {
+      syncPuzzleBranchNagsOnTree(tree, initialTurn);
+    });
+  });
+
   /** Текст предупреждения по шагу для кнопки «!» (если пусто — предупреждений нет). */
   const stepIssueMessage = $derived.by(() => {
     if (!canGoNext && mainLine.length > 0) {
@@ -118,15 +139,14 @@
           <p class="text-muted-foreground leading-relaxed">
             Делайте ходы за обе стороны. Последний ход должна сделать сторона,
             которая начинала игру (ключевой ход). В дереве можно выбирать ходы,
-            добавлять комментарии и символы оценки в режиме правки. Если от
-            позиции решателя есть несколько вариантов хода, у каждого обязательно
-            отметьте ✓ или ✗ в блоке «Задача (развилка)» под деревом (эти метки
-            только для ходов из развилки, не для единственного продолжения).
-            После ✓ главный вариант нужно довести до позиции, где последним
-            походил решатель. Если несколько ответов соперника ведут из одной
-            позиции, каждая такая линия должна заканчиваться ходом решателя (это не
-            требуется внутри продолжения после хода решателя с меткой ✗
-            «неверное решение»). Ниже по этой линии метки ✓ и ✗ не ставятся.
+            добавлять комментарии и символы оценки в режиме правки. Ходы главной
+            линии автоматически получают ✓ (верный ход), неверные ходы решателя
+            в вариациях — ✗; ходы соперника без этих меток. Если от позиции
+            решателя есть несколько вариантов хода, главный вариант должен быть
+            верным, остальные — неверными. После ✓ главный вариант нужно довести
+            до позиции, где последним походил решатель. Если несколько ответов
+            соперника ведут из одной позиции, каждая такая линия должна
+            заканчиваться ходом решателя.
           </p>
         </Popover.Content>
       </Popover.Portal>
@@ -159,9 +179,7 @@
               "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"
-            >
+            <p class="leading-relaxed text-amber-700 dark:text-amber-400">
               {stepIssueMessage}
             </p>
           </Popover.Content>
@@ -172,11 +190,13 @@
 
   <PuzzleBoardTreeViewerPane
     {chessboard}
+    {chessboardDesign}
     chessTree={tree}
     {onSelectNode}
     {onDeleteVariant}
     {setChessFen}
     {setChessboardFen}
+    showPuzzleBranchNags={true}
   />
 
   <div class="flex justify-between">

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

@@ -1,4 +1,4 @@
-import type { BoardApi } from "@connectorvol/chessboard";
+import type { BoardApi, TChessBoardDesignSettings } 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,6 +9,7 @@ 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

@@ -28,18 +28,24 @@
 
     /** Настройки доски мастера задачи: фиксированный размер, без ручного 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,
         }),
     );
 
@@ -121,9 +127,9 @@
                     <!-- Явная ширина: при родителе с 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={puzzleStepBoardSettings.design} />
                     </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>;

package/dist/puzzle-creation/StepTags.svelte

@@ -0,0 +1,270 @@
+<script lang="ts">
+  import { Popover } from "bits-ui";
+
+  import { buttonVariants } from "../button-variants.js";
+  import { cn } from "../utils.js";
+  import type { TPuzzleTags } from "../puzzle/puzzleCreatedPayload.js";
+  import type {
+    TPuzzleOpeningTagOption,
+    TPuzzleTagOption,
+  } from "@connectorvol/shared";
+  import OpeningTagHoverPreview from "./OpeningTagHoverPreview.svelte";
+
+  interface Props {
+    /** Возвращает текущие выбранные теги (двухсторонняя привязка). */
+    tags: TPuzzleTags;
+    /** Возвращает каталог дебютов для выбора одного тега. */
+    openingTags: readonly TPuzzleOpeningTagOption[];
+    /** Возвращает каталог тактических приёмов для выбора до `tacticTagsMax` тегов. */
+    tacticTags: readonly TPuzzleTagOption[];
+    /** Возвращает максимальное число выбираемых тактических тегов. */
+    tacticTagsMax: number;
+    /** Возвращает переход назад на шаг превью. */
+    onBack: () => void;
+    /** Возвращает завершение мастера с выбранными тегами. */
+    onDone: (tags: TPuzzleTags) => void;
+  }
+
+  type TOpeningPreviewState = {
+    tag: TPuzzleOpeningTagOption;
+    anchor: DOMRect;
+  };
+
+  let {
+    tags = $bindable(),
+    openingTags,
+    tacticTags,
+    tacticTagsMax,
+    onBack,
+    onDone,
+  }: Props = $props();
+
+  let openingFilter = $state("");
+  let tacticFilter = $state("");
+  let hoveredOpening = $state<TOpeningPreviewState | null>(null);
+
+  /**
+   * Представляет показ превью дебюта при наведении на тег.
+   */
+  function handleOpeningPointerEnter(
+    event: { currentTarget: EventTarget | null },
+    tag: TPuzzleOpeningTagOption,
+  ) {
+    const anchor = (event.currentTarget as HTMLElement).getBoundingClientRect();
+    hoveredOpening = { tag, anchor };
+  }
+
+  /**
+   * Представляет скрытие превью дебюта.
+   */
+  function handleOpeningPointerLeave() {
+    hoveredOpening = null;
+  }
+
+  const filteredOpenings = $derived(
+    openingTags.filter((tag) =>
+      tag.label.toLowerCase().includes(openingFilter.trim().toLowerCase()),
+    ),
+  );
+
+  const filteredTactics = $derived(
+    tacticTags.filter((tag) =>
+      tag.label.toLowerCase().includes(tacticFilter.trim().toLowerCase()),
+    ),
+  );
+
+  const tacticsLimitReached = $derived(
+    tags.tactics.length >= tacticTagsMax,
+  );
+
+  /**
+   * Представляет переключение выбора дебютного тега (только один).
+   */
+  function toggleOpening(id: string) {
+    tags = {
+      ...tags,
+      opening: tags.opening === id ? undefined : id,
+    };
+  }
+
+  /**
+   * Представляет переключение тактического тега с ограничением по количеству.
+   */
+  function toggleTactic(id: string) {
+    const selected = tags.tactics.includes(id);
+    if (selected) {
+      tags = {
+        ...tags,
+        tactics: tags.tactics.filter((t) => t !== id),
+      };
+      return;
+    }
+    if (tags.tactics.length >= tacticTagsMax) return;
+    tags = {
+      ...tags,
+      tactics: [...tags.tactics, id],
+    };
+  }
+</script>
+
+{#if hoveredOpening}
+  {#key hoveredOpening.tag.id}
+    <OpeningTagHoverPreview
+      fen={hoveredOpening.tag.fen}
+      label={hoveredOpening.tag.label}
+      anchor={hoveredOpening.anchor}
+    />
+  {/key}
+{/if}
+
+<div class="flex flex-col gap-4 pt-2 pb-0">
+  <div class="flex flex-wrap items-center gap-2">
+    <h2 class="text-xl font-semibold">Шаг 4: Теги задачи</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",
+          )}
+        >
+          <div class="space-y-3 text-muted-foreground leading-relaxed">
+            <p>
+              Теги помогают классифицировать задачу. Шаг опционален: можно
+              завершить мастер без выбора тегов.
+            </p>
+            <p>
+              Дебют — один тег из списка популярных дебютов. Приёмы — до трёх
+              тактических мотивов из каталога.
+            </p>
+          </div>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  </div>
+
+  <section class="space-y-3">
+    <div class="flex flex-wrap items-end justify-between gap-2">
+      <div>
+        <h3 class="text-base font-medium">Дебют</h3>
+        <p class="text-muted-foreground text-sm">Можно выбрать не более одного</p>
+      </div>
+      <input
+        type="search"
+        class="border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-ring h-9 w-full max-w-xs rounded-md border px-3 text-sm outline-none focus-visible:ring-2"
+        placeholder="Поиск дебюта…"
+        bind:value={openingFilter}
+        aria-label="Поиск дебюта"
+      />
+    </div>
+    <div
+      class="border-border flex max-h-48 flex-wrap gap-2 overflow-y-auto rounded-lg border p-3"
+      role="radiogroup"
+      aria-label="Дебют"
+    >
+      {#each filteredOpenings as tag (tag.id)}
+        <button
+          type="button"
+          role="radio"
+          aria-checked={tags.opening === tag.id}
+          class={cn(
+            "rounded-full border px-3 py-1.5 text-sm transition-colors",
+            tags.opening === tag.id
+              ? "border-primary bg-primary text-primary-foreground"
+              : "border-border bg-background hover:bg-muted",
+          )}
+          onpointerenter={(event) => handleOpeningPointerEnter(event, tag)}
+          onpointerleave={handleOpeningPointerLeave}
+          onfocus={(event) => handleOpeningPointerEnter(event, tag)}
+          onblur={handleOpeningPointerLeave}
+          onclick={() => toggleOpening(tag.id)}
+        >
+          {tag.label}
+        </button>
+      {:else}
+        <p class="text-muted-foreground text-sm">Ничего не найдено</p>
+      {/each}
+    </div>
+  </section>
+
+  <section class="space-y-3">
+    <div class="flex flex-wrap items-end justify-between gap-2">
+      <div>
+        <h3 class="text-base font-medium">Приёмы</h3>
+        <p class="text-muted-foreground text-sm">
+          Выбрано {tags.tactics.length} из {tacticTagsMax}
+        </p>
+      </div>
+      <input
+        type="search"
+        class="border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-ring h-9 w-full max-w-xs rounded-md border px-3 text-sm outline-none focus-visible:ring-2"
+        placeholder="Поиск приёма…"
+        bind:value={tacticFilter}
+        aria-label="Поиск приёма"
+      />
+    </div>
+    <div
+      class="border-border flex max-h-56 flex-wrap gap-2 overflow-y-auto rounded-lg border p-3"
+      role="group"
+      aria-label="Тактические приёмы"
+    >
+      {#each filteredTactics as tag (tag.id)}
+        {@const selected = tags.tactics.includes(tag.id)}
+        {@const disabled = !selected && tacticsLimitReached}
+        <button
+          type="button"
+          aria-pressed={selected}
+          {disabled}
+          class={cn(
+            "rounded-full border px-3 py-1.5 text-sm transition-colors",
+            selected
+              ? "border-primary bg-primary text-primary-foreground"
+              : "border-border bg-background hover:bg-muted",
+            disabled && "cursor-not-allowed opacity-50 hover:bg-background",
+          )}
+          onclick={() => toggleTactic(tag.id)}
+        >
+          {tag.label}
+        </button>
+      {:else}
+        <p class="text-muted-foreground text-sm">Ничего не найдено</p>
+      {/each}
+    </div>
+  </section>
+
+  <div class="flex justify-between gap-2">
+    <button
+      type="button"
+      class={cn(buttonVariants({ variant: "outline" }))}
+      onclick={onBack}
+    >
+      Назад
+    </button>
+    <button
+      type="button"
+      class={cn(buttonVariants({ variant: "default" }))}
+      onclick={() => onDone(tags)}
+    >
+      Готово
+    </button>
+  </div>
+</div>

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

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

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

@@ -0,0 +1,9 @@
+import type { TChessBoardDesignSettings, TChessBoardPlaySettings } from "@connectorvol/chessboard";
+import type { TChessboardAppearanceSettings } from "./types.js";
+/**
+ * Представляет визуальные настройки доски для шагов мастера задачи (построение линии и превью).
+ */
+export declare function buildPuzzleWizardBoardSettings(boardAppearanceSettings?: TChessboardAppearanceSettings): {
+    play: TChessBoardPlaySettings;
+    design: TChessBoardDesignSettings;
+};

package/dist/puzzle-creation/buildPuzzleWizardBoardSettings.js

@@ -0,0 +1,19 @@
+import { DEFAULT_BOARD_APPEARANCE_SETTINGS } from "../constants/default-board-appearance-settings.js";
+import { DEFAULT_EDITABLE_BOARD_SETTINGS } from "../constants/editable-board-settings.js";
+/**
+ * Представляет визуальные настройки доски для шагов мастера задачи (построение линии и превью).
+ */
+export function buildPuzzleWizardBoardSettings(boardAppearanceSettings) {
+    return {
+        play: {
+            ...DEFAULT_BOARD_APPEARANCE_SETTINGS.play,
+            ...boardAppearanceSettings?.play,
+            boardSize: DEFAULT_EDITABLE_BOARD_SETTINGS.play.boardSize,
+            isResizable: false,
+        },
+        design: {
+            ...DEFAULT_BOARD_APPEARANCE_SETTINGS.design,
+            ...boardAppearanceSettings?.design,
+        },
+    };
+}

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

@@ -1,4 +1,4 @@
-import type { ChessboardTheme } from "@connectorvol/chessboard";
+import type { BoardApi, ChessboardTheme, TChessBoardDesignSettings } from "@connectorvol/chessboard";
 import { type IChessBoardActions } from "@connectorvol/chessboard";
 import { Color } from "@connectorvol/shared";
 import type { TChessboardAppearanceSettings } from "./types.js";
@@ -6,11 +6,18 @@ import type { TChessboardAppearanceSettings } from "./types.js";
  * Представляет определение стороны хода по полному FEN.
  */
 export declare function sideToMoveFromFullFen(fullFen: string): Color;
+interface ICreatePuzzleLineEditingBoardResult {
+    api: BoardApi;
+    design: TChessBoardDesignSettings;
+}
 /**
  * Представляет создание API доски для интерактивного построения линии (как в мастере задач):
  * ориентация и перетаскивание по стороне хода, фиксированный размер доски.
+ * Возвращает пару `{ api, design }` — `design` следует передать в `<Chessboard design={...} />`,
+ * чтобы доска разделяла снимок с превью/настройками через контекст.
  */
 export declare function createPuzzleLineEditingBoardApi(fullFen: string, actions: IChessBoardActions, opts: {
     boardTheme?: ChessboardTheme;
-    boardAppearanceSettings: TChessboardAppearanceSettings;
-}): import("@connectorvol/chessboard").BoardApi;
+    boardAppearanceSettings?: TChessboardAppearanceSettings;
+}): ICreatePuzzleLineEditingBoardResult;
+export {};