react-chess-core 0.1.2 → 0.1.3

package/dist/features/chessboard/CorrectMoveCheckBadge.d.ts

@@ -0,0 +1,3 @@
+/** Green circle with a white check, anchored to the bottom-right of a square
+ *  square (over the piece). */
+export declare const CorrectMoveCheckBadge: () => import("react").JSX.Element;

package/dist/features/chessboard/HighlightChessboard.d.ts

@@ -2,6 +2,10 @@ export interface HighlightChessboardProps {
     checkSquare: string;
     hintSquare: string | null;
     incorrectMoveSquare: string | null;
+    /** Destination square of the last correct training move — shows a green check. */
+    correctMoveSquare?: string | null;
+    /** Enable click-to-move when `onPieceDrop` is provided. Defaults to true. */
+    clickToMove?: boolean;
     [key: string]: any;
 }
-export declare const HighlightChessboard: ({ checkSquare, hintSquare, incorrectMoveSquare, customSquareStyles: extraSquareStyles, ...props }: HighlightChessboardProps) => import("react").JSX.Element;
+export declare const HighlightChessboard: ({ checkSquare, hintSquare, incorrectMoveSquare, correctMoveSquare, clickToMove, customSquareStyles: extraSquareStyles, customBoardStyle, onPieceDrop, position, arePiecesDraggable, autoPromoteToQueen, isDraggablePiece, onPromotionCheck, onSquareClick, onPromotionPieceSelect, onPieceDragBegin, showPromotionDialog: showPromotionDialogProp, promotionToSquare: promotionToSquareProp, ...props }: HighlightChessboardProps) => import("react").JSX.Element;

package/dist/features/chessboard/boardSquareHighlightColors.d.ts

@@ -6,4 +6,7 @@ export declare const boardSquareHighlightColors: {
     readonly hint: "rgba(119, 177, 212, 0.75)";
     /** Muted red — softer than the in-check highlight. */
     readonly incorrect: "rgba(140, 38, 38, 0.82)";
+    readonly selected: "rgba(255, 255, 0, 0.45)";
+    readonly moveTarget: "radial-gradient(circle, rgba(0, 0, 0, 0.18) 22%, transparent 22%)";
+    readonly captureTarget: "radial-gradient(circle, rgba(0, 0, 0, 0.18) 72%, transparent 72%)";
 };

package/dist/features/chessboard/createFeedbackSquareRenderer.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import type { CustomSquareProps } from 'react-chessboard/dist/chessboard/types';
+export declare function createFeedbackSquareRenderer(correctMoveSquare: string): FC<CustomSquareProps>;

package/dist/features/chessboard/index.d.ts

@@ -2,4 +2,5 @@ export * from './boardThemes';
 export * from './chessboardTheme';
 export * from './ChessboardDnDProvider';
 export * from './HighlightChessboard';
+export * from './CorrectMoveCheckBadge';
 export * from './boardSquareHighlightColors';

package/dist/features/chessboard/useClickToMove.d.ts

@@ -0,0 +1,28 @@
+import { type Square } from 'chess.js';
+import { type CSSProperties } from 'react';
+type Piece = string;
+export type ClickToMoveSquareStyles = Record<string, CSSProperties>;
+export type UseClickToMoveOptions = {
+    enabled: boolean;
+    position: string | undefined;
+    arePiecesDraggable?: boolean;
+    autoPromoteToQueen?: boolean;
+    isDraggablePiece?: (args: {
+        piece: Piece;
+        sourceSquare: Square;
+    }) => boolean;
+    onPromotionCheck?: (sourceSquare: Square, targetSquare: Square, piece: Piece) => boolean;
+    onPieceDrop?: (sourceSquare: Square, targetSquare: Square, piece: Piece) => boolean;
+    onSquareClick?: (square: Square, piece: Piece | undefined) => void;
+    onPromotionPieceSelect?: (piece?: Piece, promoteFromSquare?: Square, promoteToSquare?: Square) => boolean;
+    onPieceDragBegin?: (piece: Piece, sourceSquare: Square) => void;
+};
+export declare function useClickToMove({ enabled, position, arePiecesDraggable, autoPromoteToQueen, isDraggablePiece, onPromotionCheck, onPieceDrop, onSquareClick, onPromotionPieceSelect, onPieceDragBegin, }: UseClickToMoveOptions): {
+    clickSquareStyles: ClickToMoveSquareStyles;
+    handleSquareClick: (square: Square, piece: Piece | undefined) => void;
+    handlePromotionPieceSelect: (piece?: Piece, promoteFromSquare?: Square, promoteToSquare?: Square) => boolean;
+    handlePieceDragBegin: (piece: Piece, sourceSquare: Square) => void;
+    showPromotionDialog: boolean;
+    promotionToSquare: Square | null;
+};
+export {};

package/dist/features/training/correctMoveFeedbackMs.d.ts

@@ -0,0 +1,2 @@
+/** Pause (ms) to show the correct-move check before advancing the line. */
+export declare const CORRECT_MOVE_FEEDBACK_MS = 450;

package/dist/features/training/index.d.ts

@@ -1,4 +1,6 @@
 export * from './uciFromDrop';
 export * from './expectedMoveDrop';
 export * from './useBoardRevision';
+export * from './correctMoveFeedbackMs';
+export * from './useCorrectMoveFeedback';
 export * from './miss';

package/dist/features/training/useCorrectMoveFeedback.d.ts

@@ -0,0 +1,6 @@
+export declare function useCorrectMoveFeedback(delayMs?: number): {
+    correctMoveSquare: string | null;
+    showCorrectMove: (targetSquare: string, onComplete?: () => void) => void;
+    clearCorrectMoveFeedback: () => void;
+    isShowingCorrectMove: boolean;
+};

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useContext, useRef, useCallback, useEffect, useMemo, useState, useLayoutEffect, Component } from 'react';
+import { createContext, useContext, useState, useCallback, useEffect, useMemo, useRef, useLayoutEffect, Component } from 'react';
 import { ChessboardDnDProvider as ChessboardDnDProvider$1, Chessboard } from 'react-chessboard';
 import { Chess } from 'chess.js';
 import { createPortal } from 'react-dom';
@@ -1741,8 +1741,200 @@ const boardSquareHighlightColors = {
     hint: 'rgba(119, 177, 212, 0.75)',
     /** Muted red — softer than the in-check highlight. */
     incorrect: 'rgba(140, 38, 38, 0.82)',
+    selected: 'rgba(255, 255, 0, 0.45)',
+    moveTarget: 'radial-gradient(circle, rgba(0, 0, 0, 0.18) 22%, transparent 22%)',
+    captureTarget: 'radial-gradient(circle, rgba(0, 0, 0, 0.18) 72%, transparent 72%)',
 };
 
+const badgeStyle = {
+    position: 'absolute',
+    right: '6%',
+    bottom: '6%',
+    width: '26%',
+    height: '26%',
+    minWidth: 14,
+    minHeight: 14,
+    maxWidth: 26,
+    maxHeight: 26,
+    borderRadius: '50%',
+    backgroundColor: '#2e7d32',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxShadow: '0 1px 3px rgba(0, 0, 0, 0.35)',
+    pointerEvents: 'none',
+};
+/** Green circle with a white check, anchored to the bottom-right of a square
+ *  square (over the piece). */
+const CorrectMoveCheckBadge = () => (jsx("span", { "aria-hidden": true, style: badgeStyle, children: jsx("svg", { viewBox: "0 0 12 12", width: "62%", height: "62%", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M2.5 6.2 5 8.7 9.5 3.8", stroke: "#fff", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+
+const overlayStyle$1 = {
+    position: 'absolute',
+    inset: 0,
+    pointerEvents: 'none',
+    zIndex: 20,
+    overflow: 'visible',
+};
+function createFeedbackSquareRenderer(correctMoveSquare) {
+    return function FeedbackSquare({ children, style, square, ref }) {
+        return (jsxs("div", { ref: ref, style: Object.assign(Object.assign({}, style), { position: 'relative', overflow: 'visible' }), children: [children, square === correctMoveSquare ? (jsx("div", { style: overlayStyle$1, children: jsx(CorrectMoveCheckBadge, {}) })) : null] }));
+    };
+}
+
+function defaultPromotionCheck(sourceSquare, targetSquare, piece) {
+    return (((piece === 'wP' && sourceSquare[1] === '7' && targetSquare[1] === '8') ||
+        (piece === 'bP' && sourceSquare[1] === '2' && targetSquare[1] === '1')) &&
+        Math.abs(sourceSquare.charCodeAt(0) - targetSquare.charCodeAt(0)) <= 1);
+}
+function pieceAtSquare(fen, square) {
+    const boardPiece = new Chess(fen).get(square);
+    if (!boardPiece) {
+        return null;
+    }
+    const color = boardPiece.color === 'w' ? 'w' : 'b';
+    const type = boardPiece.type.toUpperCase();
+    return `${color}${type}`;
+}
+function getMoveOptionStyles(fen, fromSquare) {
+    const chess = new Chess(fen);
+    const moves = chess.moves({ square: fromSquare, verbose: true });
+    if (!moves.length) {
+        return {
+            [fromSquare]: { backgroundColor: boardSquareHighlightColors.selected },
+        };
+    }
+    const styles = {
+        [fromSquare]: { backgroundColor: boardSquareHighlightColors.selected },
+    };
+    for (const move of moves) {
+        styles[move.to] = {
+            background: chess.get(move.to)
+                ? boardSquareHighlightColors.captureTarget
+                : boardSquareHighlightColors.moveTarget,
+            borderRadius: '50%',
+        };
+    }
+    return styles;
+}
+function useClickToMove({ enabled, position, arePiecesDraggable = true, autoPromoteToQueen = false, isDraggablePiece, onPromotionCheck = defaultPromotionCheck, onPieceDrop, onSquareClick, onPromotionPieceSelect, onPieceDragBegin, }) {
+    var _a;
+    const [moveFrom, setMoveFrom] = useState(null);
+    const [pendingPromotion, setPendingPromotion] = useState(null);
+    const fen = typeof position === 'string' ? position : undefined;
+    const clearSelection = useCallback(() => {
+        setMoveFrom(null);
+        setPendingPromotion(null);
+    }, []);
+    useEffect(() => {
+        clearSelection();
+    }, [fen, clearSelection]);
+    const clickSquareStyles = useMemo(() => {
+        if (!enabled || !moveFrom || !fen) {
+            return {};
+        }
+        return getMoveOptionStyles(fen, moveFrom);
+    }, [enabled, fen, moveFrom]);
+    const canSelectPiece = useCallback((square, piece) => {
+        if (!piece || !arePiecesDraggable || !onPieceDrop) {
+            return false;
+        }
+        if (isDraggablePiece) {
+            return isDraggablePiece({ piece, sourceSquare: square });
+        }
+        return true;
+    }, [arePiecesDraggable, isDraggablePiece, onPieceDrop]);
+    const tryCompleteMove = useCallback((from, to, piece) => {
+        if (!onPieceDrop) {
+            return false;
+        }
+        if (onPromotionCheck(from, to, piece)) {
+            if (autoPromoteToQueen) {
+                const promotedPiece = piece[0] === 'w' ? 'wQ' : 'bQ';
+                const accepted = onPieceDrop(from, to, promotedPiece);
+                clearSelection();
+                return accepted;
+            }
+            setPendingPromotion({ from, to, piece });
+            setMoveFrom(null);
+            return true;
+        }
+        const accepted = onPieceDrop(from, to, piece);
+        clearSelection();
+        return accepted;
+    }, [autoPromoteToQueen, clearSelection, onPieceDrop, onPromotionCheck]);
+    const handleSquareClick = useCallback((square, piece) => {
+        onSquareClick === null || onSquareClick === void 0 ? void 0 : onSquareClick(square, piece);
+        if (!enabled || !onPieceDrop || !arePiecesDraggable || !fen) {
+            return;
+        }
+        if (!moveFrom) {
+            if (canSelectPiece(square, piece)) {
+                setMoveFrom(square);
+            }
+            return;
+        }
+        if (square === moveFrom) {
+            clearSelection();
+            return;
+        }
+        const sourcePiece = pieceAtSquare(fen, moveFrom);
+        if (!sourcePiece) {
+            clearSelection();
+            return;
+        }
+        const accepted = tryCompleteMove(moveFrom, square, sourcePiece);
+        if (accepted) {
+            return;
+        }
+        if (canSelectPiece(square, piece)) {
+            setMoveFrom(square);
+            return;
+        }
+        clearSelection();
+    }, [
+        arePiecesDraggable,
+        canSelectPiece,
+        clearSelection,
+        enabled,
+        fen,
+        moveFrom,
+        onPieceDrop,
+        onSquareClick,
+        tryCompleteMove,
+    ]);
+    const handlePromotionPieceSelect = useCallback((piece, promoteFromSquare, promoteToSquare) => {
+        if (pendingPromotion && piece) {
+            const { from, to } = pendingPromotion;
+            onPieceDrop === null || onPieceDrop === void 0 ? void 0 : onPieceDrop(from, to, piece);
+            onPromotionPieceSelect === null || onPromotionPieceSelect === void 0 ? void 0 : onPromotionPieceSelect(piece, from, to);
+            clearSelection();
+            return false;
+        }
+        if (onPromotionPieceSelect) {
+            return onPromotionPieceSelect(piece, promoteFromSquare, promoteToSquare);
+        }
+        return true;
+    }, [clearSelection, onPieceDrop, onPromotionPieceSelect, pendingPromotion]);
+    const handlePieceDragBegin = useCallback((piece, sourceSquare) => {
+        clearSelection();
+        onPieceDragBegin === null || onPieceDragBegin === void 0 ? void 0 : onPieceDragBegin(piece, sourceSquare);
+    }, [clearSelection, onPieceDragBegin]);
+    return {
+        clickSquareStyles,
+        handleSquareClick,
+        handlePromotionPieceSelect,
+        handlePieceDragBegin,
+        showPromotionDialog: pendingPromotion !== null,
+        promotionToSquare: (_a = pendingPromotion === null || pendingPromotion === void 0 ? void 0 : pendingPromotion.to) !== null && _a !== void 0 ? _a : null,
+    };
+}
+
+/** Prevent mobile long-press text selection and iOS callout menus on the board. */
+const nonSelectableBoardStyle = {
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+    WebkitTouchCallout: 'none',
+};
 const getCheckHighlighting = (checkSquare) => {
     const styles = {};
     styles[checkSquare] = { backgroundColor: boardSquareHighlightColors.check };
@@ -1761,12 +1953,40 @@ const getFeedbackHighlighting = (hintSquare, incorrectMoveSquare) => {
     return styles;
 };
 const HighlightChessboard = (_a) => {
-    var { checkSquare, hintSquare, incorrectMoveSquare, customSquareStyles: extraSquareStyles } = _a, props = __rest(_a, ["checkSquare", "hintSquare", "incorrectMoveSquare", "customSquareStyles"]);
+    var { checkSquare, hintSquare, incorrectMoveSquare, correctMoveSquare = null, clickToMove, customSquareStyles: extraSquareStyles, customBoardStyle, onPieceDrop, position, arePiecesDraggable, autoPromoteToQueen, isDraggablePiece, onPromotionCheck, onSquareClick, onPromotionPieceSelect, onPieceDragBegin, showPromotionDialog: showPromotionDialogProp, promotionToSquare: promotionToSquareProp } = _a, props = __rest(_a, ["checkSquare", "hintSquare", "incorrectMoveSquare", "correctMoveSquare", "clickToMove", "customSquareStyles", "customBoardStyle", "onPieceDrop", "position", "arePiecesDraggable", "autoPromoteToQueen", "isDraggablePiece", "onPromotionCheck", "onSquareClick", "onPromotionPieceSelect", "onPieceDragBegin", "showPromotionDialog", "promotionToSquare"]);
     const { customDarkSquareStyle, customLightSquareStyle } = useChessboardTheme();
+    const clickToMoveEnabled = clickToMove !== false && typeof onPieceDrop === 'function';
+    const { clickSquareStyles, handleSquareClick, handlePromotionPieceSelect, handlePieceDragBegin, showPromotionDialog: clickPromotionDialog, promotionToSquare: clickPromotionToSquare, } = useClickToMove({
+        enabled: clickToMoveEnabled,
+        position,
+        arePiecesDraggable,
+        autoPromoteToQueen,
+        isDraggablePiece,
+        onPromotionCheck,
+        onPieceDrop,
+        onSquareClick,
+        onPromotionPieceSelect,
+        onPieceDragBegin,
+    });
     const checkStyles = getCheckHighlighting(checkSquare);
     const feedbackStyles = getFeedbackHighlighting(hintSquare, incorrectMoveSquare);
-    const customSquareStyles = Object.assign(Object.assign(Object.assign({}, checkStyles), feedbackStyles), extraSquareStyles);
-    return (jsx(Chessboard, Object.assign({ customDarkSquareStyle: customDarkSquareStyle, customLightSquareStyle: customLightSquareStyle, customSquareStyles: customSquareStyles }, props)));
+    const customSquareStyles = Object.assign(Object.assign(Object.assign(Object.assign({}, clickSquareStyles), checkStyles), feedbackStyles), extraSquareStyles);
+    const customSquare = useMemo(() => correctMoveSquare
+        ? createFeedbackSquareRenderer(correctMoveSquare)
+        : undefined, [correctMoveSquare]);
+    const promotionControlProps = clickPromotionDialog
+        ? {
+            showPromotionDialog: true,
+            promotionToSquare: clickPromotionToSquare,
+        }
+        : showPromotionDialogProp !== undefined ||
+            promotionToSquareProp !== undefined
+            ? {
+                showPromotionDialog: showPromotionDialogProp,
+                promotionToSquare: promotionToSquareProp,
+            }
+            : {};
+    return (jsx(Chessboard, Object.assign({ customDarkSquareStyle: customDarkSquareStyle, customLightSquareStyle: customLightSquareStyle, customSquareStyles: customSquareStyles, customSquare: customSquare, customBoardStyle: Object.assign(Object.assign({}, nonSelectableBoardStyle), customBoardStyle), position: position, arePiecesDraggable: arePiecesDraggable, autoPromoteToQueen: autoPromoteToQueen, isDraggablePiece: isDraggablePiece, onPromotionCheck: onPromotionCheck, onPieceDrop: onPieceDrop, onSquareClick: clickToMoveEnabled ? handleSquareClick : onSquareClick, onPromotionPieceSelect: clickToMoveEnabled ? handlePromotionPieceSelect : onPromotionPieceSelect, onPieceDragBegin: clickToMoveEnabled ? handlePieceDragBegin : onPieceDragBegin }, promotionControlProps, props)));
 };
 
 const emptyEngineEvaluation = () => ({
@@ -3502,6 +3722,37 @@ function useBoardRevision() {
     return { revision, bumpRevision };
 }
 
+/** Pause (ms) to show the correct-move check before advancing the line. */
+const CORRECT_MOVE_FEEDBACK_MS = 450;
+
+function useCorrectMoveFeedback(delayMs = CORRECT_MOVE_FEEDBACK_MS) {
+    const [correctMoveSquare, setCorrectMoveSquare] = useState(null);
+    const timeoutRef = useRef(null);
+    const clearCorrectMoveFeedback = useCallback(() => {
+        if (timeoutRef.current !== null) {
+            window.clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        setCorrectMoveSquare(null);
+    }, []);
+    const showCorrectMove = useCallback((targetSquare, onComplete) => {
+        clearCorrectMoveFeedback();
+        setCorrectMoveSquare(targetSquare);
+        timeoutRef.current = window.setTimeout(() => {
+            timeoutRef.current = null;
+            setCorrectMoveSquare(null);
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+        }, delayMs);
+    }, [clearCorrectMoveFeedback, delayMs]);
+    useEffect(() => clearCorrectMoveFeedback, [clearCorrectMoveFeedback]);
+    return {
+        correctMoveSquare,
+        showCorrectMove,
+        clearCorrectMoveFeedback,
+        isShowingCorrectMove: correctMoveSquare !== null,
+    };
+}
+
 /** Minimum eval loss (pawns) from the wrong move before showing a refutation. */
 const REFUTATION_EVAL_GAP_PAWNS = 0.5;
 const REFUTATION_EVAL_GAP_CP = REFUTATION_EVAL_GAP_PAWNS * 100;
@@ -3809,4 +4060,4 @@ function useMissBoard({ feedback, expectedUci, positionFen, answerArrowColor, au
     };
 }
 
-export { AnalysisBoard, AnalysisBoardCore, AnalysisBoardCoreView, AnalysisBoardLayout, AnalysisChessboardView, AnalysisEngineProvider, AnalysisErrorBoundary, AnalysisPosition, BOARD_THEMES, BOARD_THEME_IDS, ChessboardDnDProvider, ChessboardThemeContext, DEFAULT_ANALYSIS_LAYOUT, DEFAULT_BOARD_THEME, DEFAULT_STOCKFISH_SCRIPT_URL, DefaultAnalysisContainer, DefaultAnalysisSidebar, DefaultPlyNavigation, EngineEvaluationPanel, HighlightChessboard, MISS_MOVE_ANIMATION_MS, MISS_REFUTATION_MAX_WAIT_MS, MISS_REFUTATION_PAUSE_MS, MISS_WRONG_PAUSE_MS, PlyNavigation, REFUTATION_EVAL_GAP_CP, REFUTATION_EVAL_GAP_PAWNS, StockfishBrowserEngine, ThemeProvider, analysisBoardHighlightColors, analysisSidebarColors, applyUciMove, boardSquareHighlightColors, boardThemeFromLegacyUiTheme, createExpectedMoveDropHandler, createSidebarRowBandCounters, defaultRenderPlyNavigation, emptyEngineEvaluation, evaluateExpectedMoveDrop, fenAfterUci, formatEvaluation, formatPvPreview, getAnalysisModalStyles, getBoardThemeStyles, getCheckSquareFromChess, getLastMoveSquareStyles, getMissDisplay, getSidebarRowBackground, getStylesForTheme, isAnalyzableFen, isBoardThemeId, isEditableKeyboardTarget, lineEvalCpForGap, matchesExpectedUci, navButtonStyle, navRowStyle, normalizeEvalForWhite, normalizePvMoves, normalizeSubscriberOptions, parseUciInfoLine, parseUciMove, plyLabelStyle, palette as plyNavigationPalette, refutationEngineOptions, refutationEvalGapCp, refutationFromEvaluation, resolveStockfishScriptUrl, resolveStockfishWasmUrl, resolveStockfishWorkerUrl, scrubberInputStyle, splitWorkerLines, uciFromDrop, uciPvToSan, useAnalysisBoardModel, useAnalysisEngine, useAnalysisEngineContext, useBoardRevision, useChessboardTheme, useMissBoard, useMissRefutation, useMissSequence, usePositionKeyboardNav, useTheme };
+export { AnalysisBoard, AnalysisBoardCore, AnalysisBoardCoreView, AnalysisBoardLayout, AnalysisChessboardView, AnalysisEngineProvider, AnalysisErrorBoundary, AnalysisPosition, BOARD_THEMES, BOARD_THEME_IDS, CORRECT_MOVE_FEEDBACK_MS, ChessboardDnDProvider, ChessboardThemeContext, CorrectMoveCheckBadge, DEFAULT_ANALYSIS_LAYOUT, DEFAULT_BOARD_THEME, DEFAULT_STOCKFISH_SCRIPT_URL, DefaultAnalysisContainer, DefaultAnalysisSidebar, DefaultPlyNavigation, EngineEvaluationPanel, HighlightChessboard, MISS_MOVE_ANIMATION_MS, MISS_REFUTATION_MAX_WAIT_MS, MISS_REFUTATION_PAUSE_MS, MISS_WRONG_PAUSE_MS, PlyNavigation, REFUTATION_EVAL_GAP_CP, REFUTATION_EVAL_GAP_PAWNS, StockfishBrowserEngine, ThemeProvider, analysisBoardHighlightColors, analysisSidebarColors, applyUciMove, boardSquareHighlightColors, boardThemeFromLegacyUiTheme, createExpectedMoveDropHandler, createSidebarRowBandCounters, defaultRenderPlyNavigation, emptyEngineEvaluation, evaluateExpectedMoveDrop, fenAfterUci, formatEvaluation, formatPvPreview, getAnalysisModalStyles, getBoardThemeStyles, getCheckSquareFromChess, getLastMoveSquareStyles, getMissDisplay, getSidebarRowBackground, getStylesForTheme, isAnalyzableFen, isBoardThemeId, isEditableKeyboardTarget, lineEvalCpForGap, matchesExpectedUci, navButtonStyle, navRowStyle, normalizeEvalForWhite, normalizePvMoves, normalizeSubscriberOptions, parseUciInfoLine, parseUciMove, plyLabelStyle, palette as plyNavigationPalette, refutationEngineOptions, refutationEvalGapCp, refutationFromEvaluation, resolveStockfishScriptUrl, resolveStockfishWasmUrl, resolveStockfishWorkerUrl, scrubberInputStyle, splitWorkerLines, uciFromDrop, uciPvToSan, useAnalysisBoardModel, useAnalysisEngine, useAnalysisEngineContext, useBoardRevision, useChessboardTheme, useCorrectMoveFeedback, useMissBoard, useMissRefutation, useMissSequence, usePositionKeyboardNav, useTheme };

package/dist/index.js

@@ -1743,8 +1743,200 @@ const boardSquareHighlightColors = {
     hint: 'rgba(119, 177, 212, 0.75)',
     /** Muted red — softer than the in-check highlight. */
     incorrect: 'rgba(140, 38, 38, 0.82)',
+    selected: 'rgba(255, 255, 0, 0.45)',
+    moveTarget: 'radial-gradient(circle, rgba(0, 0, 0, 0.18) 22%, transparent 22%)',
+    captureTarget: 'radial-gradient(circle, rgba(0, 0, 0, 0.18) 72%, transparent 72%)',
 };
 
+const badgeStyle = {
+    position: 'absolute',
+    right: '6%',
+    bottom: '6%',
+    width: '26%',
+    height: '26%',
+    minWidth: 14,
+    minHeight: 14,
+    maxWidth: 26,
+    maxHeight: 26,
+    borderRadius: '50%',
+    backgroundColor: '#2e7d32',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxShadow: '0 1px 3px rgba(0, 0, 0, 0.35)',
+    pointerEvents: 'none',
+};
+/** Green circle with a white check, anchored to the bottom-right of a square
+ *  square (over the piece). */
+const CorrectMoveCheckBadge = () => (jsxRuntime.jsx("span", { "aria-hidden": true, style: badgeStyle, children: jsxRuntime.jsx("svg", { viewBox: "0 0 12 12", width: "62%", height: "62%", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M2.5 6.2 5 8.7 9.5 3.8", stroke: "#fff", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+
+const overlayStyle$1 = {
+    position: 'absolute',
+    inset: 0,
+    pointerEvents: 'none',
+    zIndex: 20,
+    overflow: 'visible',
+};
+function createFeedbackSquareRenderer(correctMoveSquare) {
+    return function FeedbackSquare({ children, style, square, ref }) {
+        return (jsxRuntime.jsxs("div", { ref: ref, style: Object.assign(Object.assign({}, style), { position: 'relative', overflow: 'visible' }), children: [children, square === correctMoveSquare ? (jsxRuntime.jsx("div", { style: overlayStyle$1, children: jsxRuntime.jsx(CorrectMoveCheckBadge, {}) })) : null] }));
+    };
+}
+
+function defaultPromotionCheck(sourceSquare, targetSquare, piece) {
+    return (((piece === 'wP' && sourceSquare[1] === '7' && targetSquare[1] === '8') ||
+        (piece === 'bP' && sourceSquare[1] === '2' && targetSquare[1] === '1')) &&
+        Math.abs(sourceSquare.charCodeAt(0) - targetSquare.charCodeAt(0)) <= 1);
+}
+function pieceAtSquare(fen, square) {
+    const boardPiece = new chess_js.Chess(fen).get(square);
+    if (!boardPiece) {
+        return null;
+    }
+    const color = boardPiece.color === 'w' ? 'w' : 'b';
+    const type = boardPiece.type.toUpperCase();
+    return `${color}${type}`;
+}
+function getMoveOptionStyles(fen, fromSquare) {
+    const chess = new chess_js.Chess(fen);
+    const moves = chess.moves({ square: fromSquare, verbose: true });
+    if (!moves.length) {
+        return {
+            [fromSquare]: { backgroundColor: boardSquareHighlightColors.selected },
+        };
+    }
+    const styles = {
+        [fromSquare]: { backgroundColor: boardSquareHighlightColors.selected },
+    };
+    for (const move of moves) {
+        styles[move.to] = {
+            background: chess.get(move.to)
+                ? boardSquareHighlightColors.captureTarget
+                : boardSquareHighlightColors.moveTarget,
+            borderRadius: '50%',
+        };
+    }
+    return styles;
+}
+function useClickToMove({ enabled, position, arePiecesDraggable = true, autoPromoteToQueen = false, isDraggablePiece, onPromotionCheck = defaultPromotionCheck, onPieceDrop, onSquareClick, onPromotionPieceSelect, onPieceDragBegin, }) {
+    var _a;
+    const [moveFrom, setMoveFrom] = react.useState(null);
+    const [pendingPromotion, setPendingPromotion] = react.useState(null);
+    const fen = typeof position === 'string' ? position : undefined;
+    const clearSelection = react.useCallback(() => {
+        setMoveFrom(null);
+        setPendingPromotion(null);
+    }, []);
+    react.useEffect(() => {
+        clearSelection();
+    }, [fen, clearSelection]);
+    const clickSquareStyles = react.useMemo(() => {
+        if (!enabled || !moveFrom || !fen) {
+            return {};
+        }
+        return getMoveOptionStyles(fen, moveFrom);
+    }, [enabled, fen, moveFrom]);
+    const canSelectPiece = react.useCallback((square, piece) => {
+        if (!piece || !arePiecesDraggable || !onPieceDrop) {
+            return false;
+        }
+        if (isDraggablePiece) {
+            return isDraggablePiece({ piece, sourceSquare: square });
+        }
+        return true;
+    }, [arePiecesDraggable, isDraggablePiece, onPieceDrop]);
+    const tryCompleteMove = react.useCallback((from, to, piece) => {
+        if (!onPieceDrop) {
+            return false;
+        }
+        if (onPromotionCheck(from, to, piece)) {
+            if (autoPromoteToQueen) {
+                const promotedPiece = piece[0] === 'w' ? 'wQ' : 'bQ';
+                const accepted = onPieceDrop(from, to, promotedPiece);
+                clearSelection();
+                return accepted;
+            }
+            setPendingPromotion({ from, to, piece });
+            setMoveFrom(null);
+            return true;
+        }
+        const accepted = onPieceDrop(from, to, piece);
+        clearSelection();
+        return accepted;
+    }, [autoPromoteToQueen, clearSelection, onPieceDrop, onPromotionCheck]);
+    const handleSquareClick = react.useCallback((square, piece) => {
+        onSquareClick === null || onSquareClick === void 0 ? void 0 : onSquareClick(square, piece);
+        if (!enabled || !onPieceDrop || !arePiecesDraggable || !fen) {
+            return;
+        }
+        if (!moveFrom) {
+            if (canSelectPiece(square, piece)) {
+                setMoveFrom(square);
+            }
+            return;
+        }
+        if (square === moveFrom) {
+            clearSelection();
+            return;
+        }
+        const sourcePiece = pieceAtSquare(fen, moveFrom);
+        if (!sourcePiece) {
+            clearSelection();
+            return;
+        }
+        const accepted = tryCompleteMove(moveFrom, square, sourcePiece);
+        if (accepted) {
+            return;
+        }
+        if (canSelectPiece(square, piece)) {
+            setMoveFrom(square);
+            return;
+        }
+        clearSelection();
+    }, [
+        arePiecesDraggable,
+        canSelectPiece,
+        clearSelection,
+        enabled,
+        fen,
+        moveFrom,
+        onPieceDrop,
+        onSquareClick,
+        tryCompleteMove,
+    ]);
+    const handlePromotionPieceSelect = react.useCallback((piece, promoteFromSquare, promoteToSquare) => {
+        if (pendingPromotion && piece) {
+            const { from, to } = pendingPromotion;
+            onPieceDrop === null || onPieceDrop === void 0 ? void 0 : onPieceDrop(from, to, piece);
+            onPromotionPieceSelect === null || onPromotionPieceSelect === void 0 ? void 0 : onPromotionPieceSelect(piece, from, to);
+            clearSelection();
+            return false;
+        }
+        if (onPromotionPieceSelect) {
+            return onPromotionPieceSelect(piece, promoteFromSquare, promoteToSquare);
+        }
+        return true;
+    }, [clearSelection, onPieceDrop, onPromotionPieceSelect, pendingPromotion]);
+    const handlePieceDragBegin = react.useCallback((piece, sourceSquare) => {
+        clearSelection();
+        onPieceDragBegin === null || onPieceDragBegin === void 0 ? void 0 : onPieceDragBegin(piece, sourceSquare);
+    }, [clearSelection, onPieceDragBegin]);
+    return {
+        clickSquareStyles,
+        handleSquareClick,
+        handlePromotionPieceSelect,
+        handlePieceDragBegin,
+        showPromotionDialog: pendingPromotion !== null,
+        promotionToSquare: (_a = pendingPromotion === null || pendingPromotion === void 0 ? void 0 : pendingPromotion.to) !== null && _a !== void 0 ? _a : null,
+    };
+}
+
+/** Prevent mobile long-press text selection and iOS callout menus on the board. */
+const nonSelectableBoardStyle = {
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+    WebkitTouchCallout: 'none',
+};
 const getCheckHighlighting = (checkSquare) => {
     const styles = {};
     styles[checkSquare] = { backgroundColor: boardSquareHighlightColors.check };
@@ -1763,12 +1955,40 @@ const getFeedbackHighlighting = (hintSquare, incorrectMoveSquare) => {
     return styles;
 };
 const HighlightChessboard = (_a) => {
-    var { checkSquare, hintSquare, incorrectMoveSquare, customSquareStyles: extraSquareStyles } = _a, props = __rest(_a, ["checkSquare", "hintSquare", "incorrectMoveSquare", "customSquareStyles"]);
+    var { checkSquare, hintSquare, incorrectMoveSquare, correctMoveSquare = null, clickToMove, customSquareStyles: extraSquareStyles, customBoardStyle, onPieceDrop, position, arePiecesDraggable, autoPromoteToQueen, isDraggablePiece, onPromotionCheck, onSquareClick, onPromotionPieceSelect, onPieceDragBegin, showPromotionDialog: showPromotionDialogProp, promotionToSquare: promotionToSquareProp } = _a, props = __rest(_a, ["checkSquare", "hintSquare", "incorrectMoveSquare", "correctMoveSquare", "clickToMove", "customSquareStyles", "customBoardStyle", "onPieceDrop", "position", "arePiecesDraggable", "autoPromoteToQueen", "isDraggablePiece", "onPromotionCheck", "onSquareClick", "onPromotionPieceSelect", "onPieceDragBegin", "showPromotionDialog", "promotionToSquare"]);
     const { customDarkSquareStyle, customLightSquareStyle } = useChessboardTheme();
+    const clickToMoveEnabled = clickToMove !== false && typeof onPieceDrop === 'function';
+    const { clickSquareStyles, handleSquareClick, handlePromotionPieceSelect, handlePieceDragBegin, showPromotionDialog: clickPromotionDialog, promotionToSquare: clickPromotionToSquare, } = useClickToMove({
+        enabled: clickToMoveEnabled,
+        position,
+        arePiecesDraggable,
+        autoPromoteToQueen,
+        isDraggablePiece,
+        onPromotionCheck,
+        onPieceDrop,
+        onSquareClick,
+        onPromotionPieceSelect,
+        onPieceDragBegin,
+    });
     const checkStyles = getCheckHighlighting(checkSquare);
     const feedbackStyles = getFeedbackHighlighting(hintSquare, incorrectMoveSquare);
-    const customSquareStyles = Object.assign(Object.assign(Object.assign({}, checkStyles), feedbackStyles), extraSquareStyles);
-    return (jsxRuntime.jsx(reactChessboard.Chessboard, Object.assign({ customDarkSquareStyle: customDarkSquareStyle, customLightSquareStyle: customLightSquareStyle, customSquareStyles: customSquareStyles }, props)));
+    const customSquareStyles = Object.assign(Object.assign(Object.assign(Object.assign({}, clickSquareStyles), checkStyles), feedbackStyles), extraSquareStyles);
+    const customSquare = react.useMemo(() => correctMoveSquare
+        ? createFeedbackSquareRenderer(correctMoveSquare)
+        : undefined, [correctMoveSquare]);
+    const promotionControlProps = clickPromotionDialog
+        ? {
+            showPromotionDialog: true,
+            promotionToSquare: clickPromotionToSquare,
+        }
+        : showPromotionDialogProp !== undefined ||
+            promotionToSquareProp !== undefined
+            ? {
+                showPromotionDialog: showPromotionDialogProp,
+                promotionToSquare: promotionToSquareProp,
+            }
+            : {};
+    return (jsxRuntime.jsx(reactChessboard.Chessboard, Object.assign({ customDarkSquareStyle: customDarkSquareStyle, customLightSquareStyle: customLightSquareStyle, customSquareStyles: customSquareStyles, customSquare: customSquare, customBoardStyle: Object.assign(Object.assign({}, nonSelectableBoardStyle), customBoardStyle), position: position, arePiecesDraggable: arePiecesDraggable, autoPromoteToQueen: autoPromoteToQueen, isDraggablePiece: isDraggablePiece, onPromotionCheck: onPromotionCheck, onPieceDrop: onPieceDrop, onSquareClick: clickToMoveEnabled ? handleSquareClick : onSquareClick, onPromotionPieceSelect: clickToMoveEnabled ? handlePromotionPieceSelect : onPromotionPieceSelect, onPieceDragBegin: clickToMoveEnabled ? handlePieceDragBegin : onPieceDragBegin }, promotionControlProps, props)));
 };
 
 const emptyEngineEvaluation = () => ({
@@ -3504,6 +3724,37 @@ function useBoardRevision() {
     return { revision, bumpRevision };
 }
 
+/** Pause (ms) to show the correct-move check before advancing the line. */
+const CORRECT_MOVE_FEEDBACK_MS = 450;
+
+function useCorrectMoveFeedback(delayMs = CORRECT_MOVE_FEEDBACK_MS) {
+    const [correctMoveSquare, setCorrectMoveSquare] = react.useState(null);
+    const timeoutRef = react.useRef(null);
+    const clearCorrectMoveFeedback = react.useCallback(() => {
+        if (timeoutRef.current !== null) {
+            window.clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        setCorrectMoveSquare(null);
+    }, []);
+    const showCorrectMove = react.useCallback((targetSquare, onComplete) => {
+        clearCorrectMoveFeedback();
+        setCorrectMoveSquare(targetSquare);
+        timeoutRef.current = window.setTimeout(() => {
+            timeoutRef.current = null;
+            setCorrectMoveSquare(null);
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+        }, delayMs);
+    }, [clearCorrectMoveFeedback, delayMs]);
+    react.useEffect(() => clearCorrectMoveFeedback, [clearCorrectMoveFeedback]);
+    return {
+        correctMoveSquare,
+        showCorrectMove,
+        clearCorrectMoveFeedback,
+        isShowingCorrectMove: correctMoveSquare !== null,
+    };
+}
+
 /** Minimum eval loss (pawns) from the wrong move before showing a refutation. */
 const REFUTATION_EVAL_GAP_PAWNS = 0.5;
 const REFUTATION_EVAL_GAP_CP = REFUTATION_EVAL_GAP_PAWNS * 100;
@@ -3821,8 +4072,10 @@ exports.AnalysisErrorBoundary = AnalysisErrorBoundary;
 exports.AnalysisPosition = AnalysisPosition;
 exports.BOARD_THEMES = BOARD_THEMES;
 exports.BOARD_THEME_IDS = BOARD_THEME_IDS;
+exports.CORRECT_MOVE_FEEDBACK_MS = CORRECT_MOVE_FEEDBACK_MS;
 exports.ChessboardDnDProvider = ChessboardDnDProvider;
 exports.ChessboardThemeContext = ChessboardThemeContext;
+exports.CorrectMoveCheckBadge = CorrectMoveCheckBadge;
 exports.DEFAULT_ANALYSIS_LAYOUT = DEFAULT_ANALYSIS_LAYOUT;
 exports.DEFAULT_BOARD_THEME = DEFAULT_BOARD_THEME;
 exports.DEFAULT_STOCKFISH_SCRIPT_URL = DEFAULT_STOCKFISH_SCRIPT_URL;
@@ -3889,6 +4142,7 @@ exports.useAnalysisEngine = useAnalysisEngine;
 exports.useAnalysisEngineContext = useAnalysisEngineContext;
 exports.useBoardRevision = useBoardRevision;
 exports.useChessboardTheme = useChessboardTheme;
+exports.useCorrectMoveFeedback = useCorrectMoveFeedback;
 exports.useMissBoard = useMissBoard;
 exports.useMissRefutation = useMissRefutation;
 exports.useMissSequence = useMissSequence;

package/dist/stories/Chessboard.stories.d.ts

@@ -5,3 +5,5 @@ export default meta;
 type Story = StoryObj<typeof HighlightChessboard>;
 export declare const StartingPosition: Story;
 export declare const WithHint: Story;
+export declare const ClickToMove: Story;
+export declare const WithCorrectMoveCheck: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-chess-core",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Shared React chessboard theme, highlights, browser Stockfish, and analysis board",
   "license": "MIT",
   "author": "Robert Blackwell",