@connectorvol/chess-widgets 9.0.0 → 9.0.1

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

@@ -11,8 +11,11 @@ interface Props {
     chessboard: BoardApi;
     /**
      * Возвращает снимок дизайна, передаваемый в `<Chessboard design={...} />`.
+     * Опционально: если не передан, доска читает дизайн из контекста
+     * (`setBoardDesignSettingsContext`), что позволяет реактивно подхватывать
+     * изменения из `<BoardSettings />`.
      */
-    chessboardDesign: TChessBoardDesignSettings;
+    chessboardDesign?: TChessBoardDesignSettings;
     /**
      * Возвращает экземпляр дерева ходов для `TreeViewer`.
      */
@@ -47,8 +50,9 @@ interface Props {
      */
     showPuzzleBranchNags?: boolean;
     /**
-     * Возвращает тему `TreeViewer` (фон, границы, текст). Если не задана —
-     * используется `TREE_VIEWER_LIGHT_THEME`.
+     * Возвращает тему `TreeViewer` (фон, границы, текст). По умолчанию
+     * подстраивается под `mode-watcher` (dark → `TREE_VIEWER_DARK_THEME`,
+     * иначе `TREE_VIEWER_LIGHT_THEME`).
      */
     theme?: TTreeViewerTheme;
     /**

package/dist/puzzle-creation/PuzzleCreationWizard.svelte

@@ -1,202 +1,206 @@
 <script lang="ts" module>
-  export type { TPuzzleCreationWizardProps } from "./types.js";
-  export type {
-    TPuzzleWizardCoreState,
-    TPuzzleWizardState,
-  } from "./puzzleWizardState.js";
+    export type { TPuzzleCreationWizardProps } from "./types.js";
+    export type {
+        TPuzzleWizardCoreState,
+        TPuzzleWizardState,
+    } from "./puzzleWizardState.js";
 </script>
 
 <script lang="ts" generics="S extends TPuzzleWizardCoreState">
-  import type { Snippet } from "svelte";
+    import type { Snippet } from "svelte";
 
-  import { Wizard } from "@connectorvol/shared";
-  import type { TWizardStep, TWizardStepContext } from "@connectorvol/shared";
-  import StepMoves from "./StepMoves.svelte";
-  import StepPosition from "./StepPosition.svelte";
-  import StepPreview from "./StepPreview.svelte";
-  import type { TPuzzleCreatedPayload } from "../puzzle/puzzleCreatedPayload.js";
-  import type { TPuzzleWizardCoreState } from "./puzzleWizardState.js";
-  import { PUZZLE_WIZARD_CORE_STEPS } from "./puzzleWizardState.js";
-  import { createEmptyTreeFromFen } from "../puzzle/puzzleData.js";
-  import { PgnOps } from "@connectorvol/chessops/pgnOps.svelte";
-  import { ChessTree, createPgnFromTree } from "@connectorvol/tree";
-  import {
-    CHESSBOARD_THEMES,
-    Draggable,
-    type ChessboardTheme,
-    type IChessBoardActions,
-  } from "@connectorvol/chessboard";
-  import { calculatePly, Color, Square } from "@connectorvol/shared";
+    import { Wizard } from "@connectorvol/shared";
+    import type { TWizardStep, TWizardStepContext } from "@connectorvol/shared";
+    import StepMoves from "./StepMoves.svelte";
+    import StepPosition from "./StepPosition.svelte";
+    import StepPreview from "./StepPreview.svelte";
+    import type { TPuzzleCreatedPayload } from "../puzzle/puzzleCreatedPayload.js";
+    import type { TPuzzleWizardCoreState } from "./puzzleWizardState.js";
+    import { PUZZLE_WIZARD_CORE_STEPS } from "./puzzleWizardState.js";
+    import { createEmptyTreeFromFen } from "../puzzle/puzzleData.js";
+    import { PgnOps } from "@connectorvol/chessops/pgnOps.svelte";
+    import { ChessTree, createPgnFromTree } from "@connectorvol/tree";
+    import {
+        CHESSBOARD_THEMES,
+        Draggable,
+        type ChessboardTheme,
+        type IChessBoardActions,
+    } from "@connectorvol/chessboard";
+    import { calculatePly, Color, Square } from "@connectorvol/shared";
 
-  import { createPuzzleLineEditingBoardApi } from "./createPuzzleLineEditingBoard.js";
-  import { syncPuzzleBranchNagsOnTree } from "../puzzle/syncPuzzleBranchNags.js";
-  import { DEFAULT_BOARD_APPEARANCE_SETTINGS } from "../constants/default-board-appearance-settings.js";
-  import type { TChessboardAppearanceSettings } from "./types.js";
+    import { createPuzzleLineEditingBoardApi } from "./createPuzzleLineEditingBoard.js";
+    import { syncPuzzleBranchNagsOnTree } from "../puzzle/syncPuzzleBranchNags.js";
+    import { DEFAULT_BOARD_APPEARANCE_SETTINGS } from "../constants/default-board-appearance-settings.js";
+    import type { TChessboardAppearanceSettings } from "./types.js";
+    import { derived } from "svelte/store";
 
-  interface Props {
-    /** Возвращает общий state визарда (двухсторонняя привязка). */
-    wizardState: S;
-    /** Возвращает колбэк завершения с шага превью без доп. шагов. */
-    onPuzzleCreated: (payload: TPuzzleCreatedPayload) => void;
-    /** Возвращает колбэк завершения с доп. шага (`wizard.done()`). */
-    onDone?: (state: S) => void;
-    /** Возвращает seed FEN для сброса шага визарда при изменении. */
-    fen?: string;
-    /** Возвращает тему оформления шахматной доски. */
-    boardTheme?: ChessboardTheme;
-    /** Возвращает визуальные настройки доски. */
-    boardAppearanceSettings?: TChessboardAppearanceSettings;
-    /** Возвращает дополнительные шаги после превью. */
-    additionalSteps?: readonly TWizardStep[];
-    /** Возвращает snippet дополнительных шагов. */
-    additionalStep?: Snippet<[TWizardStepContext<S>]>;
-  }
+    interface Props {
+        /** Возвращает общий state визарда (двухсторонняя привязка). */
+        wizardState: S;
+        /** Возвращает колбэк завершения с шага превью без доп. шагов. */
+        onPuzzleCreated: (payload: TPuzzleCreatedPayload) => void;
+        /** Возвращает колбэк завершения с доп. шага (`wizard.done()`). */
+        onDone?: (state: S) => void;
+        /** Возвращает seed FEN для сброса шага визарда при изменении. */
+        fen?: string;
+        /** Возвращает тему оформления шахматной доски. */
+        boardTheme?: ChessboardTheme;
+        /** Возвращает визуальные настройки доски. */
+        boardAppearanceSettings?: TChessboardAppearanceSettings;
+        /** Возвращает дополнительные шаги после превью. */
+        additionalSteps?: readonly TWizardStep[];
+        /** Возвращает snippet дополнительных шагов. */
+        additionalStep?: Snippet<[TWizardStepContext<S>]>;
+    }
 
-  let {
-    wizardState = $bindable(),
-    onPuzzleCreated,
-    onDone,
-    fen: fenProp,
-    boardTheme,
-    boardAppearanceSettings = DEFAULT_BOARD_APPEARANCE_SETTINGS,
-    additionalSteps = [],
-    additionalStep,
-  }: Props = $props();
+    let {
+        wizardState = $bindable(),
+        onPuzzleCreated,
+        onDone,
+        fen: fenProp,
+        boardTheme,
+        boardAppearanceSettings = DEFAULT_BOARD_APPEARANCE_SETTINGS,
+        additionalSteps = [],
+        additionalStep,
+    }: Props = $props();
 
-  const hasAdditionalSteps = $derived(additionalSteps.length > 0);
-  const steps = $derived([...PUZZLE_WIZARD_CORE_STEPS, ...additionalSteps]);
+    const hasAdditionalSteps = $derived(additionalSteps.length > 0);
+    const steps = $derived([...PUZZLE_WIZARD_CORE_STEPS, ...additionalSteps]);
 
-  let chess = $derived(
-    new PgnOps(wizardState.puzzleData.initialFen, "chess"),
-  );
-  let tree = $derived(
-    new ChessTree(createEmptyTreeFromFen(wizardState.puzzleData.initialFen)),
-  );
-
-  const addMoveToTree = (san: string) => {
-    const move = chess.makeSanMove(san);
-    if (!move) return;
-    const fen = chess.fen();
-    const { halfMoves, fullMoves } = calculatePly(fen);
-    tree.addNodeToCurrent({
-      id: "",
-      children: [],
-      data: {
-        fen,
-        san,
-        ply: halfMoves,
-        fullMoves,
-      },
-    });
-    return { move, fen, turn: chess.turn() };
-  };
+    let chess = $derived(
+        new PgnOps(wizardState.puzzleData.initialFen, "chess"),
+    );
+    let tree = $derived(
+        new ChessTree(
+            createEmptyTreeFromFen(wizardState.puzzleData.initialFen),
+        ),
+    );
 
-  const actions: IChessBoardActions = {
-    game: {
-      possibleMovesOnSquare: (square: Square) => chess.moves(square),
-      beforePieceMoveSan(san: string) {
-        const result = addMoveToTree(san);
-        return result;
-      },
-      afterPieceMoveSan: () => {},
-      beforePieceMove: (from, to, promotion) => {
-        const san = chess.getSanForMove({ from, to, promotion });
-        chess.makeMove({ from, to, promotion });
+    const addMoveToTree = (san: string) => {
+        const move = chess.makeSanMove(san);
+        if (!move) return;
         const fen = chess.fen();
         const { halfMoves, fullMoves } = calculatePly(fen);
         tree.addNodeToCurrent({
-          id: "",
-          children: [],
-          data: {
-            fen,
-            san,
-            ply: halfMoves,
-            fullMoves,
-          },
+            id: "",
+            children: [],
+            data: {
+                fen,
+                san,
+                ply: halfMoves,
+                fullMoves,
+            },
         });
-        return fen;
-      },
-      afterPieceMove: () => {
-        const side = chess.turn();
-        chessboardApi.draggable =
-          side === Color.WHITE ? Draggable.WHITE : Draggable.BLACK;
-      },
-    },
-  };
+        return { move, fen, turn: chess.turn() };
+    };
 
-  /**
-   * Представляет сборку доски для шага построения линии: позиция и ориентация по стороне хода в FEN.
-   */
-  function createMainChessboard(fullFen: string) {
-    return createPuzzleLineEditingBoardApi(fullFen, actions, {
-      boardTheme: boardTheme ?? CHESSBOARD_THEMES.blue,
-      boardAppearanceSettings,
-    });
-  }
+    const actions: IChessBoardActions = {
+        game: {
+            possibleMovesOnSquare: (square: Square) => chess.moves(square),
+            beforePieceMoveSan(san: string) {
+                const result = addMoveToTree(san);
+                return result;
+            },
+            afterPieceMoveSan: () => {},
+            beforePieceMove: (from, to, promotion) => {
+                const san = chess.getSanForMove({ from, to, promotion });
+                chess.makeMove({ from, to, promotion });
+                const fen = chess.fen();
+                const { halfMoves, fullMoves } = calculatePly(fen);
+                tree.addNodeToCurrent({
+                    id: "",
+                    children: [],
+                    data: {
+                        fen,
+                        san,
+                        ply: halfMoves,
+                        fullMoves,
+                    },
+                });
+                return fen;
+            },
+            afterPieceMove: () => {
+                const side = chess.turn();
+                chessboardApi.draggable =
+                    side === Color.WHITE ? Draggable.WHITE : Draggable.BLACK;
+            },
+        },
+    };
 
-  let chessboard = $derived(
-    createMainChessboard(wizardState.puzzleData.initialFen),
-  );
-  let chessboardApi = $derived(chessboard.api);
-  let chessboardDesign = $derived(chessboard.design);
+    /**
+     * Представляет сборку доски для шага построения линии: позиция и ориентация по стороне хода в FEN.
+     */
+    function createMainChessboard(fullFen: string) {
+        return createPuzzleLineEditingBoardApi(fullFen, actions, {
+            boardTheme: boardTheme ?? CHESSBOARD_THEMES.blue,
+            boardAppearanceSettings,
+        });
+    }
 
-  /**
-   * Представляет переход со шага построения линии на превью.
-   */
-  function handleMovesNext(moves: string[]) {
-    wizardState.puzzleData.moves = moves;
-    syncPuzzleBranchNagsOnTree(
-      tree,
-      wizardState.puzzleData.initialFen.trim().split(/\s+/)[1] === "b"
-        ? Color.BLACK
-        : Color.WHITE,
+    let chessboard = $derived(
+        createMainChessboard(wizardState.puzzleData.initialFen),
     );
-    wizardState.solutionPgn = createPgnFromTree(tree.rootNode);
-  }
+    let chessboardApi = $derived(chessboard.api);
+
+    // ponytail: компонент только читает контекст дизайна. Дизайн для доски шага 2,
+    // который раньше поднимался через `setBoardDesignSettingsContext`, теперь
+    // пробрасывается явно пропом `chessboardDesign` в `<StepMoves />`.
+    const chessboardDesign = $derived(chessboard.design);
+
+    /**
+     * Представляет переход со шага построения линии на превью.
+     */
+    function handleMovesNext(moves: string[]) {
+        wizardState.puzzleData.moves = moves;
+        syncPuzzleBranchNagsOnTree(
+            tree,
+            wizardState.puzzleData.initialFen.trim().split(/\s+/)[1] === "b"
+                ? Color.BLACK
+                : Color.WHITE,
+        );
+        wizardState.solutionPgn = createPgnFromTree(tree.rootNode);
+    }
 </script>
 
-<Wizard
-  bind:wizardState={wizardState}
-  {steps}
-  resetSignal={fenProp}
-  {onDone}
->
-  {#snippet children(w)}
-    {#if w.currentStep === 1}
-      <StepPosition
-        initialFen={w.state.puzzleData.initialFen}
-        onNext={(fen) => {
-          w.state.puzzleData.initialFen = fen;
-          w.next();
-        }}
-        {boardTheme}
-        {boardAppearanceSettings}
-      />
-    {:else if w.currentStep === 2}
-      <StepMoves
-        puzzleData={w.state.puzzleData}
-        {chess}
-        {tree}
-        chessboard={chessboardApi}
-        {chessboardDesign}
-        onBack={w.back}
-        onNext={(moves) => {
-          handleMovesNext(moves);
-          w.next();
-        }}
-      />
-    {:else if w.currentStep === 3}
-      <StepPreview
-        puzzleData={w.state.puzzleData}
-        solutionPgn={w.state.solutionPgn}
-        onBack={w.back}
-        onNext={hasAdditionalSteps ? w.next : undefined}
-        onPuzzleCreated={hasAdditionalSteps ? undefined : onPuzzleCreated}
-        {boardTheme}
-        {boardAppearanceSettings}
-      />
-    {:else if additionalStep}
-      {@render additionalStep(w)}
-    {/if}
-  {/snippet}
+<Wizard bind:wizardState {steps} resetSignal={fenProp} {onDone}>
+    {#snippet children(w)}
+        {#if w.currentStep === 1}
+            <StepPosition
+                initialFen={w.state.puzzleData.initialFen}
+                onNext={(fen) => {
+                    w.state.puzzleData.initialFen = fen;
+                    w.next();
+                }}
+                {boardTheme}
+                {boardAppearanceSettings}
+            />
+        {:else if w.currentStep === 2}
+            <StepMoves
+                puzzleData={w.state.puzzleData}
+                {chess}
+                {tree}
+                chessboard={chessboardApi}
+                {chessboardDesign}
+                onBack={w.back}
+                onNext={(moves) => {
+                    handleMovesNext(moves);
+                    w.next();
+                }}
+            />
+        {:else if w.currentStep === 3}
+            <StepPreview
+                puzzleData={w.state.puzzleData}
+                solutionPgn={w.state.solutionPgn}
+                onBack={w.back}
+                onNext={hasAdditionalSteps ? w.next : undefined}
+                onPuzzleCreated={hasAdditionalSteps
+                    ? undefined
+                    : onPuzzleCreated}
+                {boardTheme}
+                {boardAppearanceSettings}
+            />
+        {:else if additionalStep}
+            {@render additionalStep(w)}
+        {/if}
+    {/snippet}
 </Wizard>