@connectorvol/chess-widgets 1.0.0

package/dist/puzzle-creation/StepPreview.svelte

@@ -0,0 +1,589 @@
+<script lang="ts">
+  import type {
+    ChessboardTheme,
+    IChessBoardActions,
+  } from "@connectorvol/chessboard";
+  import type { Square } from "@connectorvol/shared";
+
+  import {
+    Chessboard,
+    CHESSBOARD_THEMES,
+    createBoardApi,
+    DEFAULT_BOARD_SETTINGS,
+    Draggable,
+  } from "@connectorvol/chessboard";
+  import {
+    ChessTree,
+    TreeViewer,
+    transformPgnToChessNode,
+  } from "@connectorvol/tree";
+  import { Popover } from "bits-ui";
+  import { buttonVariants } from "../button-variants.js";
+  import { cn } from "../utils.js";
+
+  import { untrack } from "svelte";
+  import { INITIAL_FEN } from "@connectorvol/chessops/fen";
+  import { PgnOps } from "@connectorvol/chessops/pgnOps.svelte";
+  import { Color, DEFAULT_PIECE_SET, type Move } from "@connectorvol/shared";
+
+  import {
+    createEmptyTreeFromFen,
+    type PuzzleData,
+  } from "../puzzle/puzzleData.js";
+  import {
+    puzzlePreviewClassifySolverMove,
+    puzzlePreviewDupSubtreeUnderStudentCursor,
+    puzzlePreviewIsSolvedPosition,
+    puzzlePreviewSideToMoveFromFen,
+    puzzlePreviewNodeAtPath,
+    type TSolverMoveOutcome,
+  } from "../puzzle/puzzleStepPreviewSolver.js";
+  import {
+    puzzlePartsFromFullPgn,
+    type TPuzzleCreatedPayload,
+  } from "../puzzle/puzzleCreatedPayload.js";
+  import type { TChessboardAppearanceSettings } from "./types.js";
+
+  /** Сообщение «нет такого продолжения» показывается только через кнопку «!» в шапке (как на шаге 2). */
+  const PREVIEW_WRONG_NO_VARIANT_MESSAGE =
+    "Такого продолжения нет среди вариантов задачи.";
+
+  interface Props {
+    /** Возвращает данные задачи (стартовый FEN и главная линия SAN для совместимости). */
+    puzzleData: PuzzleData;
+    /** Возвращает полное дерево задачи в виде строки PGN после шага 2. */
+    solutionPgn: string;
+    /** Возвращает переход назад на шаг построения линии. */
+    onBack: () => void;
+    /**
+     * Возвращает колбэк сохранения задачи с FEN и строкой ходов (кнопка «Готово» показывается после решения превью).
+     */
+    onPuzzleCreated?: (payload: TPuzzleCreatedPayload) => void;
+    /** Возвращает тему оформления шахматной доски (по умолчанию `CHESSBOARD_THEMES.blue`). */
+    boardTheme?: ChessboardTheme;
+    /** Возвращает дополнительные визуальные настройки шахматной доски (кроме `boardSize`, `orientation`, `draggable`). */
+    boardAppearanceSettings?: TChessboardAppearanceSettings;
+  }
+
+  const props: Props = $props();
+
+  const solverColor = $derived(
+    props.puzzleData.initialFen.trim().split(/\s+/)[1] === "b"
+      ? Color.BLACK
+      : Color.WHITE,
+  );
+
+  let cursorPath = $state<number[]>([]);
+  let solved = $state(false);
+  let wrongFeedback = $state<string | null>(null);
+
+  /** Высота блока с шахматной доской (px), чтобы выровнять высоту TreeViewer по доске на lg. */
+  let chessboardBlockHeight = $state(0);
+
+  let wrongRevealTimer: ReturnType<typeof setTimeout> | null = null;
+  let advanceLineTimer: ReturnType<typeof setTimeout> | null = null;
+
+  let previewChess = new PgnOps(INITIAL_FEN, "chess");
+
+  const studentPreviewTree = new ChessTree(createEmptyTreeFromFen(INITIAL_FEN));
+
+  let solutionPreviewTree = $state<ChessTree | null>(null);
+
+  /**
+   * Представляет синхронизацию доступности перетаскивания фигур с очередью хода и состоянием «решено».
+   */
+  function syncBoardDragFromChessTurn(): void {
+    chessboard.draggable = solved
+      ? Draggable.NONE
+      : previewChess.turn() === solverColor
+        ? solverColor === Color.WHITE
+          ? Draggable.WHITE
+          : Draggable.BLACK
+        : Draggable.NONE;
+  }
+
+  /**
+   * Представляет добавление (если отсутствует) пути в TreeViewer ученика без очистки уже пройденных линий.
+   */
+  function ensureStudentPreviewTreeHasPath(path: number[]): void {
+    const solution = solutionPreviewTree;
+    if (!solution) return;
+
+    studentPreviewTree.currentNode = studentPreviewTree.rootNode.moves;
+
+    let src = solution.rootNode.moves;
+    for (const idx of path) {
+      const next = src.children[idx];
+      studentPreviewTree.addNodeToCurrent({
+        id: "",
+        children: [],
+        data: { ...next.data },
+      });
+      src = next;
+    }
+  }
+
+  /**
+   * Представляет обработку ошибочного хода с показом неверной ветки или сообщения без варианта.
+   */
+  function handleWrongOutcome(outcome: TSolverMoveOutcome): void {
+    const solution = solutionPreviewTree;
+    if (!solution) return;
+
+    if (wrongRevealTimer !== null) {
+      clearTimeout(wrongRevealTimer);
+      wrongRevealTimer = null;
+    }
+    if (advanceLineTimer !== null) {
+      clearTimeout(advanceLineTimer);
+      advanceLineTimer = null;
+    }
+
+    if (outcome.kind === "wrong_marked_variant") {
+      wrongFeedback =
+        "Неверно. Открываю введённый вариант в дереве, ход отменён.";
+      // Ход на доске не применяется (мы возвращаем undefined), но в TreeViewer
+      // добавляем ветку неверного ответа, чтобы её можно было изучить.
+      ensureStudentPreviewTreeHasPath(cursorPath);
+      puzzlePreviewDupSubtreeUnderStudentCursor(
+        studentPreviewTree,
+        outcome.wrongBranchRoot,
+      );
+      return;
+    }
+
+    wrongFeedback = PREVIEW_WRONG_NO_VARIANT_MESSAGE;
+  }
+
+  /**
+   * Представляет установку позиции и дерева по пути из корня.
+   */
+  function setStateFromPath(path: number[]): void {
+    const solution = solutionPreviewTree;
+    if (!solution) return;
+
+    previewChess.setFen(props.puzzleData.initialFen);
+    let node = solution.rootNode.moves;
+    for (const idx of path) {
+      const child = node.children[idx]!;
+      previewChess.makeSanMove(child.data.san);
+      node = child;
+    }
+
+    cursorPath = path;
+    ensureStudentPreviewTreeHasPath(cursorPath);
+    chessboard.fen = previewChess.fen();
+    syncBoardDragFromChessTurn();
+  }
+
+  /**
+   * Представляет автоматический ход соперника по основной линии (первый вариант), если сейчас ход соперника.
+   * Возвращает новый путь.
+   */
+  function applyOpponentMainLineMove(pathAfterSolver: number[]): number[] {
+    const solution = solutionPreviewTree;
+    if (!solution) return pathAfterSolver;
+
+    if (puzzlePreviewSideToMoveFromFen(previewChess.fen()) === solverColor) {
+      return pathAfterSolver;
+    }
+
+    const node = puzzlePreviewNodeAtPath(
+      solution.rootNode.moves,
+      pathAfterSolver,
+    );
+    if (node.children.length === 0) return pathAfterSolver;
+
+    previewChess.makeSanMove(node.children[0]!.data.san);
+    return [...pathAfterSolver, 0];
+  }
+
+  /**
+   * Представляет поиск следующей линии по развилкам соперника (DFS: чем глубже развилка — тем раньше возврат).
+   */
+  function findNextOpponentLine(path: number[]): number[] | null {
+    const solution = solutionPreviewTree;
+    if (!solution) return null;
+
+    let node = solution.rootNode.moves;
+    for (let depth = 0; depth <= path.length; depth++) {
+      // depth === path.length соответствует текущей позиции (узел node)
+      const sideToMove = puzzlePreviewSideToMoveFromFen(node.data.fen);
+      const isOpponentToMove = sideToMove !== solverColor;
+      const isFork = node.children.length > 1;
+
+      if (isOpponentToMove && isFork && depth < path.length) {
+        const chosenIdx = path[depth]!;
+        if (chosenIdx < node.children.length - 1) {
+          // кандидат на "следующую линию" с этого форка
+          // но продолжаем вниз, чтобы взять самый глубокий
+        }
+      }
+
+      if (depth === path.length) break;
+      node = node.children[path[depth]!]!;
+    }
+
+    // Второй проход: выбираем самый глубокий форк соперника, где есть непройденные ответы.
+    node = solution.rootNode.moves;
+    let bestForkDepth: number | null = null;
+    let bestNextIdx = 0;
+    for (let depth = 0; depth < path.length; depth++) {
+      const sideToMove = puzzlePreviewSideToMoveFromFen(node.data.fen);
+      const isOpponentToMove = sideToMove !== solverColor;
+      if (isOpponentToMove && node.children.length > 1) {
+        const chosenIdx = path[depth]!;
+        if (chosenIdx < node.children.length - 1) {
+          bestForkDepth = depth;
+          bestNextIdx = chosenIdx + 1;
+        }
+      }
+      node = node.children[path[depth]!]!;
+    }
+
+    if (bestForkDepth === null) return null;
+    return [...path.slice(0, bestForkDepth), bestNextIdx];
+  }
+
+  /**
+   * Представляет переход на следующую линию (следующий ответ соперника), если она есть.
+   */
+  function maybeAdvanceToNextOpponentLine(): boolean {
+    const nextBase = findNextOpponentLine(cursorPath);
+    if (!nextBase) return false;
+
+    solved = false;
+    wrongFeedback = null;
+
+    // После выбора нового ответа соперника нужно довести позицию до актуальной точки:
+    // ставим состояние на basePath (до хода соперника), затем делаем выбранный ход соперника (он уже в пути).
+    setStateFromPath(nextBase);
+    return true;
+  }
+
+  /**
+   * Представляет попытку применить SAN хода решателя с автответами соперника по дереву.
+   */
+  function tryApplySolverSan(san: string): Move | undefined {
+    const solution = solutionPreviewTree;
+    if (!solution || solved) return undefined;
+
+    const cursorNode = puzzlePreviewNodeAtPath(
+      solution.rootNode.moves,
+      cursorPath,
+    );
+
+    const outcome = puzzlePreviewClassifySolverMove(
+      cursorNode,
+      previewChess.fen(),
+      san,
+      solverColor,
+    );
+
+    if (outcome.kind !== "correct") {
+      handleWrongOutcome(outcome);
+      return undefined;
+    }
+
+    try {
+      let path = [...cursorPath, outcome.childIndex];
+      const moveRecord = previewChess.makeSanMove(san);
+      path = applyOpponentMainLineMove(path);
+      setStateFromPath(path);
+
+      const leaf = puzzlePreviewNodeAtPath(solution.rootNode.moves, cursorPath);
+      if (puzzlePreviewIsSolvedPosition(previewChess, leaf, solverColor)) {
+        solved = true;
+        if (advanceLineTimer !== null) {
+          clearTimeout(advanceLineTimer);
+          advanceLineTimer = null;
+        }
+        advanceLineTimer = setTimeout(() => {
+          // Если есть ещё линии по развилкам соперника — переключаемся на следующую.
+          if (maybeAdvanceToNextOpponentLine()) {
+            // продолжаем в режиме решения
+          }
+          advanceLineTimer = null;
+        }, 250);
+      }
+
+      wrongFeedback = null;
+      syncBoardDragFromChessTurn();
+
+      return moveRecord;
+    } catch {
+      wrongFeedback = "Ход недопустим в этой позиции.";
+      return undefined;
+    }
+  }
+
+  const actions: IChessBoardActions = {
+    game: {
+      possibleMovesOnSquare: (square: Square) => previewChess.moves(square),
+      beforePieceMoveSan(san: string) {
+        const move = tryApplySolverSan(san);
+        if (!move) return undefined;
+        return {
+          move,
+          fen: previewChess.fen(),
+          turn: previewChess.turn(),
+        };
+      },
+      afterPieceMoveSan: () => {
+        syncBoardDragFromChessTurn();
+      },
+      beforePieceMove: (from, to, promotion) => {
+        const san = previewChess.getSanForMove({ from, to, promotion });
+        const move = tryApplySolverSan(san);
+        if (!move) return "";
+        return previewChess.fen();
+      },
+      afterPieceMove: () => {
+        syncBoardDragFromChessTurn();
+      },
+    },
+  };
+
+  let chessboard = $derived(
+    createBoardApi({
+      fen: INITIAL_FEN,
+      settings: {
+        ...DEFAULT_BOARD_SETTINGS,
+        ...(props.boardAppearanceSettings ?? {}),
+        boardSize: 38,
+        isResizable: false,
+        orientation: Color.WHITE,
+        draggable: Draggable.WHITE,
+      },
+      actions,
+      theme: props.boardTheme ?? CHESSBOARD_THEMES.blue,
+    }),
+  );
+
+  $effect(() => {
+    const pgn = props.solutionPgn;
+    const initialFen = props.puzzleData.initialFen;
+    const orientation = solverColor;
+
+    if (!pgn.trim()) {
+      untrack(() => {
+        solutionPreviewTree = null;
+        previewChess.setFen(initialFen);
+        studentPreviewTree.replaceRootTree(createEmptyTreeFromFen(initialFen));
+        studentPreviewTree.currentNode = studentPreviewTree.rootNode.moves;
+        chessboard.fen = initialFen;
+        chessboard.orientation = orientation;
+        syncBoardDragFromChessTurn();
+      });
+      return () => {
+        if (wrongRevealTimer !== null) {
+          clearTimeout(wrongRevealTimer);
+          wrongRevealTimer = null;
+        }
+        if (advanceLineTimer !== null) {
+          clearTimeout(advanceLineTimer);
+          advanceLineTimer = null;
+        }
+      };
+    }
+
+    untrack(() => {
+      const { rootNode } = transformPgnToChessNode(pgn);
+      solutionPreviewTree = new ChessTree(rootNode);
+
+      cursorPath = [];
+      solved = false;
+      wrongFeedback = null;
+      previewChess.setFen(initialFen);
+      studentPreviewTree.replaceRootTree(createEmptyTreeFromFen(initialFen));
+      studentPreviewTree.currentNode = studentPreviewTree.rootNode.moves;
+      chessboard.fen = initialFen;
+      chessboard.orientation = orientation;
+      syncBoardDragFromChessTurn();
+    });
+
+    return () => {
+      if (wrongRevealTimer !== null) {
+        clearTimeout(wrongRevealTimer);
+        wrongRevealTimer = null;
+      }
+      if (advanceLineTimer !== null) {
+        clearTimeout(advanceLineTimer);
+        advanceLineTimer = null;
+      }
+    };
+  });
+
+  /**
+   * Представляет заглушку синхронизации движка при выборе узла в дереве превью (доска решается отдельно).
+   */
+  function noopChessFen(_fen: string): void {}
+
+  /**
+   * Представляет заглушку обновления доски TreeViewer на шаге превью.
+   */
+  function noopChessboardFen(_animationTime?: number): void {}
+
+  /**
+   * Представляет пустые колбэки навигации TreeViewer без побочных эффектов.
+   */
+  function noopOnSelectNode(): void {}
+
+  /**
+   * Представляет пустой колбэк после удаления варианта в TreeViewer.
+   */
+  function noopOnDeleteVariant(): void {}
+</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">Шаг 3: Превью для ученика</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>
+              Так puzzle будет выглядеть для ученика. Делайте ходы за
+              {solverColor === Color.WHITE ? "белых" : "чёрных"}. При правильном
+              ходе соперник ответит автоматически (первый вариант на развилках
+              соперника). На развилке решателя достаточно одного верного
+              продолжения.
+            </p>
+            <p>
+              Сначала в дереве отображается только стартовая позиция; по мере
+              верных ходов появляются линии; при неверном отмеченном ответе кратко
+              показывается введённый неверный вариант.
+            </p>
+            <p>
+              После решения показывается всё дерево ходов из PGN, введённое на
+              шаге 2.
+            </p>
+          </div>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+    {#if wrongFeedback === PREVIEW_WRONG_NO_VARIANT_MESSAGE}
+      <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">
+              {PREVIEW_WRONG_NO_VARIANT_MESSAGE}
+            </p>
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
+    {/if}
+  </div>
+
+  <div
+    class="flex min-h-0 flex-col justify-center gap-4 lg:flex-row lg:items-start lg:gap-4"
+  >
+    <div class="flex w-full max-w-[38rem] shrink-0 flex-col gap-2">
+      <div class="w-full shrink-0" bind:clientHeight={chessboardBlockHeight}>
+        <Chessboard facade={chessboard} />
+      </div>
+      {#if wrongFeedback && wrongFeedback !== PREVIEW_WRONG_NO_VARIANT_MESSAGE}
+        <p class="text-sm font-medium text-amber-600 dark:text-amber-400">
+          {wrongFeedback}
+        </p>
+      {/if}
+    </div>
+
+    <div class="flex min-h-0 w-full flex-1 flex-col gap-2 lg:min-w-0">
+      <div
+        class={cn(
+          "flex min-w-0 flex-col overflow-hidden rounded-md border border-border",
+          chessboardBlockHeight > 0
+            ? "min-h-0 shrink-0"
+            : "min-h-[12rem] max-h-[min(65vh,36rem)]",
+        )}
+        style:height={chessboardBlockHeight > 0
+          ? `${chessboardBlockHeight}px`
+          : undefined}
+      >
+        <TreeViewer
+          chessTree={solved && solutionPreviewTree
+            ? solutionPreviewTree
+            : studentPreviewTree}
+          onSelectNode={noopOnSelectNode}
+          onDeleteVariant={noopOnDeleteVariant}
+          setChessFen={noopChessFen}
+          setChessboardFen={noopChessboardFen}
+          pieceSet={DEFAULT_PIECE_SET}
+          className="min-h-0 flex-1 border-x-0 border-t-0"
+          editMode={false}
+          selectable={false}
+        />
+      </div>
+    </div>
+  </div>
+
+  <div class="flex justify-between gap-2">
+    <button
+      type="button"
+      class={cn(buttonVariants({ variant: "outline" }))}
+      onclick={props.onBack}
+    >
+      Назад
+    </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}
+  </div>
+</div>

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

@@ -0,0 +1,23 @@
+import type { ChessboardTheme } from "@connectorvol/chessboard";
+import { type PuzzleData } from "../puzzle/puzzleData.js";
+import { type TPuzzleCreatedPayload } from "../puzzle/puzzleCreatedPayload.js";
+import type { TChessboardAppearanceSettings } from "./types.js";
+interface Props {
+    /** Возвращает данные задачи (стартовый FEN и главная линия SAN для совместимости). */
+    puzzleData: PuzzleData;
+    /** Возвращает полное дерево задачи в виде строки PGN после шага 2. */
+    solutionPgn: string;
+    /** Возвращает переход назад на шаг построения линии. */
+    onBack: () => void;
+    /**
+     * Возвращает колбэк сохранения задачи с FEN и строкой ходов (кнопка «Готово» показывается после решения превью).
+     */
+    onPuzzleCreated?: (payload: TPuzzleCreatedPayload) => void;
+    /** Возвращает тему оформления шахматной доски (по умолчанию `CHESSBOARD_THEMES.blue`). */
+    boardTheme?: ChessboardTheme;
+    /** Возвращает дополнительные визуальные настройки шахматной доски (кроме `boardSize`, `orientation`, `draggable`). */
+    boardAppearanceSettings?: TChessboardAppearanceSettings;
+}
+declare const StepPreview: import("svelte").Component<Props, {}, "">;
+type StepPreview = ReturnType<typeof StepPreview>;
+export default StepPreview;

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

@@ -0,0 +1,27 @@
+import type { TPuzzleCreatedPayload } from "../puzzle/puzzleCreatedPayload.js";
+import type { ChessBoardSettings, ChessboardTheme } from "@connectorvol/chessboard";
+/**
+ * Представляет тип визуальных настроек шахматной доски для мастера создания задачи.
+ */
+export type TChessboardAppearanceSettings = Omit<Partial<ChessBoardSettings>, "boardSize" | "orientation" | "draggable">;
+/**
+ * Представляет свойства компонента мастера создания шахматной задачи.
+ */
+export interface TPuzzleCreationWizardProps {
+    /**
+     * Возвращает функцию, вызываемую при завершении мастера с FEN и строкой ходов.
+     */
+    onPuzzleCreated: (payload: TPuzzleCreatedPayload) => void;
+    /**
+     * Возвращает начальный полный FEN для шага 1; если не задан — пустая доска.
+     */
+    fen?: string;
+    /**
+     * Возвращает тему оформления шахматной доски (по умолчанию `CHESSBOARD_THEMES.blue`).
+     */
+    boardTheme?: ChessboardTheme;
+    /**
+     * Возвращает дополнительные визуальные настройки шахматной доски (кроме `boardSize`, `orientation`, `draggable`).
+     */
+    boardAppearanceSettings?: TChessboardAppearanceSettings;
+}

package/dist/puzzle-creation/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils.d.ts

@@ -0,0 +1,15 @@
+import { type ClassValue } from "clsx";
+/**
+ * Представляет объединение классов Tailwind с разрешением конфликтов.
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+export type WithoutChild<T> = T extends {
+    child?: any;
+} ? Omit<T, "child"> : T;
+export type WithoutChildren<T> = T extends {
+    children?: any;
+} ? Omit<T, "children"> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
+    ref?: U | null;
+};

package/dist/utils.js

@@ -0,0 +1,8 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+/**
+ * Представляет объединение классов Tailwind с разрешением конфликтов.
+ */
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}