@connectorvol/chess-widgets 1.0.0

package/dist/button-variants.d.ts

@@ -0,0 +1,73 @@
+import type { WithElementRef } from "./utils.js";
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+import { type VariantProps } from "tailwind-variants";
+/**
+ * Представляет набор классов Tailwind и вариантов оформления кнопки (как в doc-приложении).
+ */
+export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        outline: string;
+        secondary: string;
+        ghost: string;
+        destructive: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        xs: string;
+        sm: string;
+        lg: string;
+        icon: string;
+        "icon-xs": string;
+        "icon-sm": string;
+        "icon-lg": string;
+    };
+}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+    variant: {
+        default: string;
+        outline: string;
+        secondary: string;
+        ghost: string;
+        destructive: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        xs: string;
+        sm: string;
+        lg: string;
+        icon: string;
+        "icon-xs": string;
+        "icon-sm": string;
+        "icon-lg": string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        outline: string;
+        secondary: string;
+        ghost: string;
+        destructive: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        xs: string;
+        sm: string;
+        lg: string;
+        icon: string;
+        "icon-xs": string;
+        "icon-sm": string;
+        "icon-lg": string;
+    };
+}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", unknown, unknown, undefined>>;
+/** Представляет допустимый вариант заливки кнопки. */
+export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+/** Представляет допустимый размер кнопки. */
+export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+/** Представляет пропсы кнопки (совместимость с shadcn-паттерном). */
+export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+};

package/dist/button-variants.js

@@ -0,0 +1,31 @@
+import { tv } from "tailwind-variants";
+/**
+ * Представляет набор классов Tailwind и вариантов оформления кнопки (как в doc-приложении).
+ */
+export const buttonVariants = tv({
+    base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+            outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+            ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+            destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+            link: "text-primary underline-offset-4 hover:underline",
+        },
+        size: {
+            default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+            xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+            sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+            lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+            icon: "size-8",
+            "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+            "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+            "icon-lg": "size-9",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});

package/dist/constants/editable-board-settings.d.ts

@@ -0,0 +1,26 @@
+import { Draggable, PieceInputMode } from "@connectorvol/chessboard";
+/**
+ * Представляет настройки редактируемой доски по умолчанию для конструктора позиции и мастера задач.
+ */
+export declare const DEFAULT_EDITABLE_BOARD_SETTINGS: {
+    autoQueenPromotion: false;
+    isResizable: true;
+    isDisplayCoordinate: false;
+    orientation: "w";
+    boardSize: number;
+    draggable: Draggable.BOTH;
+    pieceInputMode: PieceInputMode.SOURCE_DRAG;
+    allowPreMove: true;
+    border: false;
+    allowDrawMarkers: false;
+    clearMarkersOnLeftClick: true;
+    showSquareBadges: true;
+    animationTime: number;
+    editSettings: {
+        mode: {
+            type: "delete";
+            piece: null;
+            color: null;
+        };
+    };
+};

package/dist/constants/editable-board-settings.js

@@ -0,0 +1,27 @@
+import { Draggable, PieceInputMode } from "@connectorvol/chessboard";
+import { Color } from "@connectorvol/shared";
+/**
+ * Представляет настройки редактируемой доски по умолчанию для конструктора позиции и мастера задач.
+ */
+export const DEFAULT_EDITABLE_BOARD_SETTINGS = {
+    autoQueenPromotion: false,
+    isResizable: true,
+    isDisplayCoordinate: false,
+    orientation: Color.WHITE,
+    boardSize: 38,
+    draggable: Draggable.BOTH,
+    pieceInputMode: PieceInputMode.SOURCE_DRAG,
+    allowPreMove: true,
+    border: false,
+    allowDrawMarkers: false,
+    clearMarkersOnLeftClick: true,
+    showSquareBadges: true,
+    animationTime: 300,
+    editSettings: {
+        mode: {
+            type: "delete",
+            piece: null,
+            color: null,
+        },
+    },
+};

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export { default as PuzzleCreationWizard } from "./puzzle-creation/PuzzleCreationWizard.svelte";
+export type { TPuzzleCreationWizardProps } from "./puzzle-creation/types.js";
+export type { TPuzzleCreatedPayload } from "./puzzle/puzzleCreatedPayload.js";
+export { puzzlePartsFromFullPgn } from "./puzzle/puzzleCreatedPayload.js";
+export type { PuzzleData } from "./puzzle/puzzleData.js";
+export { PUZZLE_EMPTY_BOARD_FEN, createInitialPuzzleData, createEmptyTreeFromFen, getMainLineFromTree, } from "./puzzle/puzzleData.js";
+export type { TSolverMoveOutcome } from "./puzzle/puzzleStepPreviewSolver.js";
+export { DEFAULT_EDITABLE_BOARD_SETTINGS } from "./constants/editable-board-settings.js";
+export { default as EditFen } from "./position-editor/EditFen.svelte";
+export { default as EditMove } from "./position-editor/EditMove.svelte";
+export { default as EditPanel } from "./position-editor/EditPanel.svelte";
+export { Fen, type Castling } from "./position-editor/fen.svelte.js";

package/dist/index.js

@@ -0,0 +1,8 @@
+export { default as PuzzleCreationWizard } from "./puzzle-creation/PuzzleCreationWizard.svelte";
+export { puzzlePartsFromFullPgn } from "./puzzle/puzzleCreatedPayload.js";
+export { PUZZLE_EMPTY_BOARD_FEN, createInitialPuzzleData, createEmptyTreeFromFen, getMainLineFromTree, } from "./puzzle/puzzleData.js";
+export { DEFAULT_EDITABLE_BOARD_SETTINGS } from "./constants/editable-board-settings.js";
+export { default as EditFen } from "./position-editor/EditFen.svelte";
+export { default as EditMove } from "./position-editor/EditMove.svelte";
+export { default as EditPanel } from "./position-editor/EditPanel.svelte";
+export { Fen } from "./position-editor/fen.svelte.js";

package/dist/position-editor/EditFen.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+  import type { BoardApi } from "@connectorvol/chessboard";
+  import { EMPTY_FEN, INITIAL_FEN } from "@connectorvol/chessops/fen";
+  import CopyIcon from "@lucide/svelte/icons/copy";
+  import { tick } from "svelte";
+  import type { Fen } from "./fen.svelte.js";
+  import { buttonVariants } from "../button-variants.js";
+  import { cn } from "../utils.js";
+
+  /**
+   * Представляет свойства компонента редактирования FEN.
+   */
+  interface Props {
+    api: BoardApi;
+    fen: Fen;
+    /**
+     * Возвращает признак ограничения ширины блока шириной доски (страница конструктора под колонкой доски).
+     */
+    constrainToBoardWidth?: boolean;
+  }
+
+  const {
+    api,
+    fen,
+    constrainToBoardWidth = true,
+  }: Props = $props();
+
+  // oxlint-disable-next-line no-unassigned-vars
+  let inputRef: HTMLInputElement;
+
+  function handlePositionInput() {
+    const prevFen = fen.fullFen;
+    const start = inputRef.selectionStart;
+    const end = inputRef.selectionEnd;
+    try {
+      fen.fullFen = inputRef.value;
+    } catch (e) {
+      console.error(e);
+      inputRef.value = prevFen;
+    }
+    setTimeout(() => {
+      inputRef.setSelectionRange(start, end);
+    });
+  }
+
+  /**
+   * Представляет нормализацию текста из буфера для проверки как полного FEN.
+   */
+  function normalizeClipboardFen(raw: string): string {
+    return raw.trim().replace(/\s+/g, " ");
+  }
+
+  /**
+   * Представляет полную подстановку FEN из строки буфера при успешной валидации.
+   */
+  async function applyFullFenFromClipboardText(raw: string): Promise<boolean> {
+    const normalized = normalizeClipboardFen(raw);
+    if (!fen.validateFullFen(normalized)) return false;
+    try {
+      fen.fullFen = normalized;
+      await tick();
+      const len = fen.fullFen.length;
+      inputRef.setSelectionRange(len, len);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  /**
+   * Представляет подстановку полного FEN пресета и синхронизацию поля ввода с доской.
+   */
+  async function applyPresetFullFen(fullFen: string): Promise<void> {
+    if (!fen.validateFullFen(fullFen)) return;
+    try {
+      fen.fullFen = fullFen;
+      await tick();
+      const len = fen.fullFen.length;
+      inputRef.setSelectionRange(len, len);
+    } catch {
+      /* невалидный FEN для правил Fen-класса */
+    }
+  }
+
+  /**
+   * Представляет обработку вставки: только целиком валидный FEN заменяет поле.
+   */
+  function handlePaste(e: ClipboardEvent) {
+    e.preventDefault();
+    const text = e.clipboardData?.getData("text/plain") ?? "";
+    void applyFullFenFromClipboardText(text);
+  }
+
+  /**
+   * Представляет Ctrl/Cmd+C: полная замена поля содержимым буфера при валидном FEN (кнопка «Скопировать» остаётся для копирования наружу).
+   */
+  function handleKeydown(e: KeyboardEvent) {
+    const mod = e.ctrlKey || e.metaKey;
+    if (!mod || e.key.toLowerCase() !== "c") return;
+    e.preventDefault();
+    void navigator.clipboard.readText().then((text) => {
+      void applyFullFenFromClipboardText(text);
+    });
+  }
+
+  const fullFen = $derived(fen.fullFen);
+
+  const outerStyle = $derived(
+    constrainToBoardWidth ? `max-width: ${api.getBoardSize()}rem` : undefined,
+  );
+</script>
+
+<div style={outerStyle} class="flex w-full flex-col gap-2">
+  <div class="flex flex-wrap gap-2">
+    <button
+      type="button"
+      class={cn(
+        buttonVariants({ variant: "outline", size: "sm" }),
+        "h-8 text-xs sm:text-sm",
+      )}
+      onclick={() => {
+        void applyPresetFullFen(INITIAL_FEN);
+      }}
+    >
+      Начальная позиция
+    </button>
+    <button
+      type="button"
+      class={cn(
+        buttonVariants({ variant: "outline", size: "sm" }),
+        "h-8 text-xs sm:text-sm",
+      )}
+      onclick={() => {
+        void applyPresetFullFen(EMPTY_FEN);
+      }}
+    >
+      Пустая доска
+    </button>
+  </div>
+  <div class="flex w-full items-center gap-1.5">
+    <input
+      bind:this={inputRef}
+      oninput={handlePositionInput}
+      onpaste={handlePaste}
+      onkeydown={handleKeydown}
+      class={cn(
+        "border-input bg-background ring-offset-background shadow-xs flex h-9 min-w-0 flex-1 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+      )}
+      value={fullFen}
+    />
+
+    <button
+      type="button"
+      aria-label="Скопировать FEN"
+      onclick={() => {
+        void navigator.clipboard.writeText(fen.fullFen);
+      }}
+      class={cn(buttonVariants({ variant: "outline", size: "icon-xs" }))}
+    >
+      <CopyIcon aria-hidden="true" />
+    </button>
+  </div>
+</div>

package/dist/position-editor/EditFen.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { BoardApi } from "@connectorvol/chessboard";
+import type { Fen } from "./fen.svelte.js";
+/**
+ * Представляет свойства компонента редактирования FEN.
+ */
+interface Props {
+    api: BoardApi;
+    fen: Fen;
+    /**
+     * Возвращает признак ограничения ширины блока шириной доски (страница конструктора под колонкой доски).
+     */
+    constrainToBoardWidth?: boolean;
+}
+declare const EditFen: import("svelte").Component<Props, {}, "">;
+type EditFen = ReturnType<typeof EditFen>;
+export default EditFen;

package/dist/position-editor/EditMove.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+  import type { BoardApi } from "@connectorvol/chessboard";
+  import type { Castling, Fen } from "./fen.svelte.js";
+  import { cn } from "../utils.js";
+
+  let isPossibleShortCastleWhite = $state(true);
+  let isPossibleShortCastleBlack = $state(true);
+  let isPossibleLongCastleWhite = $state(true);
+  let isPossibleLongCastleBlack = $state(true);
+
+  interface Props {
+    fen: Fen;
+    api: BoardApi;
+  }
+
+  const { fen, api: _api }: Props = $props();
+
+  $effect(() => {
+    isPossibleShortCastleWhite = fen.castling.includes("K");
+    isPossibleShortCastleBlack = fen.castling.includes("k");
+    isPossibleLongCastleWhite = fen.castling.includes("Q");
+    isPossibleLongCastleBlack = fen.castling.includes("q");
+  });
+
+  $effect(() => {
+    const castling = [
+      isPossibleShortCastleWhite,
+      isPossibleLongCastleWhite,
+      isPossibleShortCastleBlack,
+      isPossibleLongCastleBlack,
+    ]
+      .map((c, i) => (c ? "KQkq"[i] : ""))
+      .join("");
+    if (!castling) {
+      fen.castling = "-";
+    } else {
+      fen.castling = castling as Castling;
+    }
+  });
+
+  const enPassantMoves = $derived(fen.genPossibleEnPassantMoves());
+  $effect(() => {
+    if (enPassantMoves.length === 0) {
+      fen.enPassant = "-";
+    }
+  });
+</script>
+
+<div class="space-y-3 md:space-y-4">
+  <div class="space-y-2">
+    <label
+      for="move-select"
+      class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+    >
+      Установить ход
+    </label>
+    <select
+      id="move-select"
+      bind:value={fen.move}
+      class={cn(
+        "border-input bg-background ring-offset-background shadow-xs flex h-9 w-full rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+      )}
+    >
+      <option value="w">w</option>
+      <option value="b">b</option>
+    </select>
+  </div>
+
+  <div class="space-y-2">
+    <label
+      for="enpassant-select"
+      class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+    >
+      Enpassant
+    </label>
+    <select
+      id="enpassant-select"
+      bind:value={fen.enPassant}
+      class={cn(
+        "border-input bg-background ring-offset-background shadow-xs flex h-9 w-full rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+      )}
+    >
+      <option value="-">-</option>
+      {#each enPassantMoves as move}
+        <option value={move}>{move}</option>
+      {/each}
+    </select>
+  </div>
+
+  <div class="space-y-2 md:space-y-3">
+    <div class="text-sm font-medium leading-none">Возможность рокировки</div>
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-4">
+      <div class="flex items-center space-x-2">
+        <input
+          type="checkbox"
+          id="isPossibleShortCastleWhite"
+          bind:checked={isPossibleShortCastleWhite}
+          class={cn(
+            "peer h-4 w-4 shrink-0 rounded-sm border border-input ring-offset-background transition-colors",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+            "accent-primary",
+          )}
+        />
+        <label
+          for="isPossibleShortCastleWhite"
+          class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
+        >
+          Белые 0-0
+        </label>
+      </div>
+
+      <div class="flex items-center space-x-2">
+        <input
+          type="checkbox"
+          id="isPossibleShortCastleBlack"
+          bind:checked={isPossibleShortCastleBlack}
+          class={cn(
+            "peer h-4 w-4 shrink-0 rounded-sm border border-input ring-offset-background transition-colors",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+            "accent-primary",
+          )}
+        />
+        <label
+          for="isPossibleShortCastleBlack"
+          class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
+        >
+          Черные 0-0
+        </label>
+      </div>
+
+      <div class="flex items-center space-x-2">
+        <input
+          type="checkbox"
+          id="isPossibleLongCastleWhite"
+          bind:checked={isPossibleLongCastleWhite}
+          class={cn(
+            "peer h-4 w-4 shrink-0 rounded-sm border border-input ring-offset-background transition-colors",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+            "accent-primary",
+          )}
+        />
+        <label
+          for="isPossibleLongCastleWhite"
+          class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
+        >
+          Белые 0-0-0
+        </label>
+      </div>
+
+      <div class="flex items-center space-x-2">
+        <input
+          type="checkbox"
+          id="isPossibleLongCastleBlack"
+          bind:checked={isPossibleLongCastleBlack}
+          class={cn(
+            "peer h-4 w-4 shrink-0 rounded-sm border border-input ring-offset-background transition-colors",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+            "accent-primary",
+          )}
+        />
+        <label
+          for="isPossibleLongCastleBlack"
+          class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
+        >
+          Черные 0-0-0
+        </label>
+      </div>
+    </div>
+  </div>
+</div>

package/dist/position-editor/EditMove.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { BoardApi } from "@connectorvol/chessboard";
+import type { Fen } from "./fen.svelte.js";
+interface Props {
+    fen: Fen;
+    api: BoardApi;
+}
+declare const EditMove: import("svelte").Component<Props, {}, "">;
+type EditMove = ReturnType<typeof EditMove>;
+export default EditMove;