@connectorvol/chess-widgets 8.0.1 → 9.0.1

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

@@ -1,6 +1,6 @@
 import type { Snippet } from "svelte";
-import type { BoardApi } from "@connectorvol/chessboard";
-import type { ChessTree } from "@connectorvol/tree";
+import type { BoardApi, TChessBoardDesignSettings } from "@connectorvol/chessboard";
+import type { ChessTree, TTreeViewerTheme } from "@connectorvol/tree";
 /**
  * Представляет свойства панели разметки «доска и просмотр дерева партии».
  */
@@ -9,6 +9,13 @@ interface Props {
      * Возвращает API шахматной доски для компонента `Chessboard`.
      */
     chessboard: BoardApi;
+    /**
+     * Возвращает снимок дизайна, передаваемый в `<Chessboard design={...} />`.
+     * Опционально: если не передан, доска читает дизайн из контекста
+     * (`setBoardDesignSettingsContext`), что позволяет реактивно подхватывать
+     * изменения из `<BoardSettings />`.
+     */
+    chessboardDesign?: TChessBoardDesignSettings;
     /**
      * Возвращает экземпляр дерева ходов для `TreeViewer`.
      */
@@ -37,6 +44,17 @@ interface Props {
      * Возвращает признак возможности выбора узлов в дереве.
      */
     selectable?: boolean;
+    /**
+     * Возвращает true, если в режиме правки показывать группу NAG «Задача (развилка)»
+     * рядом с кнопками undo/redo на ходах из развилки.
+     */
+    showPuzzleBranchNags?: boolean;
+    /**
+     * Возвращает тему `TreeViewer` (фон, границы, текст). По умолчанию
+     * подстраивается под `mode-watcher` (dark → `TREE_VIEWER_DARK_THEME`,
+     * иначе `TREE_VIEWER_LIGHT_THEME`).
+     */
+    theme?: TTreeViewerTheme;
     /**
      * Возвращает дополнительные классы Tailwind для корневого контейнера.
      */

package/dist/puzzle-creation/PuzzleCreationWizard.svelte

@@ -1,71 +1,81 @@
 <script lang="ts" module>
     export type { TPuzzleCreationWizardProps } from "./types.js";
+    export type {
+        TPuzzleWizardCoreState,
+        TPuzzleWizardState,
+    } from "./puzzleWizardState.js";
 </script>
 
-<script lang="ts">
-    import { untrack } from "svelte";
+<script lang="ts" generics="S extends TPuzzleWizardCoreState">
+    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 { TPuzzleCreationWizardProps } from "./types.js";
-    import {
-        createEmptyTreeFromFen,
-        createInitialPuzzleData,
-        type PuzzleData,
-    } from "../puzzle/puzzleData.js";
+    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 { 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>]>;
+    }
 
-    const {
+    let {
+        wizardState = $bindable(),
         onPuzzleCreated,
+        onDone,
         fen: fenProp,
         boardTheme,
-        boardAppearanceSettings,
-    }: TPuzzleCreationWizardProps = $props();
+        boardAppearanceSettings = DEFAULT_BOARD_APPEARANCE_SETTINGS,
+        additionalSteps = [],
+        additionalStep,
+    }: Props = $props();
 
-    /**
-     * Представляет нормализацию входного FEN из пропса (пустая строка трактуется как отсутствие значения).
-     */
-    function wizardSeedFen(prop: string | undefined): string | undefined {
-        const t = prop?.trim();
-        return t ? t : undefined;
-    }
+    const hasAdditionalSteps = $derived(additionalSteps.length > 0);
+    const steps = $derived([...PUZZLE_WIZARD_CORE_STEPS, ...additionalSteps]);
 
-    let step = $state<1 | 2 | 3>(1);
-    let puzzleData = $derived<PuzzleData>(
-        createInitialPuzzleData(wizardSeedFen(fenProp)),
+    let chess = $derived(
+        new PgnOps(wizardState.puzzleData.initialFen, "chess"),
     );
-
-    /** Возвращает PGN дерева решения для превью на шаге 3. */
-    let solutionPgnForPreview = $state("");
-
-    function handleMovesBack() {
-        step = 1;
-    }
-
-    function handleMovesNext(moves: string[]) {
-        puzzleData.moves = moves;
-        solutionPgnForPreview = createPgnFromTree(tree.rootNode);
-        step = 3;
-    }
-
-    function handlePreviewBack() {
-        step = 2;
-    }
-
-    let chess = $derived(new PgnOps(puzzleData.initialFen, "chess"));
     let tree = $derived(
-        new ChessTree(createEmptyTreeFromFen(puzzleData.initialFen)),
+        new ChessTree(
+            createEmptyTreeFromFen(wizardState.puzzleData.initialFen),
+        ),
     );
+
     const addMoveToTree = (san: string) => {
         const move = chess.makeSanMove(san);
         if (!move) return;
@@ -111,7 +121,7 @@
             },
             afterPieceMove: () => {
                 const side = chess.turn();
-                chessboard.draggable =
+                chessboardApi.draggable =
                     side === Color.WHITE ? Draggable.WHITE : Draggable.BLACK;
             },
         },
@@ -127,86 +137,70 @@
         });
     }
 
-    let chessboard = $derived(createMainChessboard(puzzleData.initialFen));
+    let chessboard = $derived(
+        createMainChessboard(wizardState.puzzleData.initialFen),
+    );
+    let chessboardApi = $derived(chessboard.api);
+
+    // ponytail: компонент только читает контекст дизайна. Дизайн для доски шага 2,
+    // который раньше поднимался через `setBoardDesignSettingsContext`, теперь
+    // пробрасывается явно пропом `chessboardDesign` в `<StepMoves />`.
+    const chessboardDesign = $derived(chessboard.design);
 
     /**
-     * Представляет сброс мастера при смене входного FEN извне (шаг 1 и черновик ходов обнуляются).
+     * Представляет переход со шага построения линии на превью.
      */
-    $effect(() => {
-        const seed = wizardSeedFen(fenProp);
-        const next = createInitialPuzzleData(seed);
-        untrack(() => {
-            puzzleData = next;
-            step = 1;
-            solutionPgnForPreview = "";
-        });
-    });
-
-    function handlePositionNext(fen: string) {
-        puzzleData.initialFen = fen;
-        step = 2;
+    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>
 
-<div class="mx-4 lg:container lg:mx-auto">
-    <div class="flex flex-col gap-4 pt-4 pb-0">
-        <div class="flex items-center gap-2">
-            <span
-                class="flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium"
-                class:bg-primary={step >= 1}
-                class:bg-muted={step < 1}
-                class:text-primary-foreground={step >= 1}
-            >
-                1
-            </span>
-            <span class="text-sm">Позиция</span>
-            <span class="h-px flex-1 bg-border"></span>
-            <span
-                class="flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium"
-                class:bg-primary={step >= 2}
-                class:bg-muted={step < 2}
-                class:text-primary-foreground={step >= 2}
-            >
-                2
-            </span>
-            <span class="text-sm">Ходы</span>
-            <span class="h-px flex-1 bg-border"></span>
-            <span
-                class="flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium"
-                class:bg-primary={step >= 3}
-                class:bg-muted={step < 3}
-                class:text-primary-foreground={step >= 3}
-            >
-                3
-            </span>
-            <span class="text-sm">Превью</span>
-        </div>
-
-        {#if step === 1}
+<Wizard bind:wizardState {steps} resetSignal={fenProp} {onDone}>
+    {#snippet children(w)}
+        {#if w.currentStep === 1}
             <StepPosition
-                initialFen={puzzleData.initialFen}
-                onNext={handlePositionNext}
+                initialFen={w.state.puzzleData.initialFen}
+                onNext={(fen) => {
+                    w.state.puzzleData.initialFen = fen;
+                    w.next();
+                }}
                 {boardTheme}
                 {boardAppearanceSettings}
             />
-        {:else if step === 2}
+        {:else if w.currentStep === 2}
             <StepMoves
-                {puzzleData}
+                puzzleData={w.state.puzzleData}
                 {chess}
                 {tree}
-                {chessboard}
-                onBack={handleMovesBack}
-                onNext={handleMovesNext}
+                chessboard={chessboardApi}
+                {chessboardDesign}
+                onBack={w.back}
+                onNext={(moves) => {
+                    handleMovesNext(moves);
+                    w.next();
+                }}
             />
-        {:else}
+        {:else if w.currentStep === 3}
             <StepPreview
-                {puzzleData}
-                solutionPgn={solutionPgnForPreview}
-                onBack={handlePreviewBack}
-                {onPuzzleCreated}
+                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}
-    </div>
-</div>
+    {/snippet}
+</Wizard>

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

@@ -1,5 +1,49 @@
 export type { TPuzzleCreationWizardProps } from "./types.js";
-import type { TPuzzleCreationWizardProps } from "./types.js";
-declare const PuzzleCreationWizard: import("svelte").Component<TPuzzleCreationWizardProps, {}, "">;
-type PuzzleCreationWizard = ReturnType<typeof PuzzleCreationWizard>;
+export type { TPuzzleWizardCoreState, TPuzzleWizardState, } from "./puzzleWizardState.js";
+import type { Snippet } from "svelte";
+import type { TWizardStep, TWizardStepContext } from "@connectorvol/shared";
+import type { TPuzzleCreatedPayload } from "../puzzle/puzzleCreatedPayload.js";
+import type { TPuzzleWizardCoreState } from "./puzzleWizardState.js";
+import { type ChessboardTheme } from "@connectorvol/chessboard";
+import type { TChessboardAppearanceSettings } from "./types.js";
+declare function $$render<S extends TPuzzleWizardCoreState>(): {
+    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>]>;
+    };
+    exports: {};
+    bindings: "wizardState";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<S extends TPuzzleWizardCoreState> {
+    props(): ReturnType<typeof $$render<S>>['props'];
+    events(): ReturnType<typeof $$render<S>>['events'];
+    slots(): ReturnType<typeof $$render<S>>['slots'];
+    bindings(): "wizardState";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <S extends TPuzzleWizardCoreState>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<S>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<S>['props']>, ReturnType<__sveltets_Render<S>['events']>, ReturnType<__sveltets_Render<S>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<S>['bindings']>;
+    } & ReturnType<__sveltets_Render<S>['exports']>;
+    <S extends TPuzzleWizardCoreState>(internal: unknown, props: ReturnType<__sveltets_Render<S>['props']> & {}): ReturnType<__sveltets_Render<S>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const PuzzleCreationWizard: $$IsomorphicComponent;
+type PuzzleCreationWizard<S extends TPuzzleWizardCoreState> = InstanceType<typeof PuzzleCreationWizard<S>>;
 export default PuzzleCreationWizard;