react-chess-core 0.1.2 → 0.1.4

package/dist/features/analysis/core/AnalysisPosition.d.ts

@@ -49,6 +49,7 @@ export declare class AnalysisPosition {
         from: string;
         to: string;
     } | null;
+    getLastMoveUci(): string | null;
     fen(): string;
     getCheckSquare(): string;
 }

package/dist/features/analysis/core/useAnalysisBoardModel.d.ts

@@ -25,6 +25,7 @@ export type AnalysisBoardModel = {
         from: string;
         to: string;
     } | null;
+    lastMoveUci: string | null;
     checkSquare: string | null;
     onSelectPly: (ply: number) => void;
     onSelectHistoryRow: (row: AnalysisHistoryRow) => void;

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,14 @@ 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;
+    /** UCI of the move that led to the current position (shows a last-move arrow). */
+    lastMoveUci?: string | null;
+    /** Override the default last-move arrow color. */
+    lastMoveArrowColor?: string;
+    /** 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, lastMoveUci, lastMoveArrowColor, clickToMove, customSquareStyles: extraSquareStyles, customArrows, 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,6 @@ export * from './boardThemes';
 export * from './chessboardTheme';
 export * from './ChessboardDnDProvider';
 export * from './HighlightChessboard';
+export * from './CorrectMoveCheckBadge';
 export * from './boardSquareHighlightColors';
+export * from './lastMoveArrow';

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

@@ -0,0 +1,8 @@
+export type ChessboardArrow = [string, string, string];
+/** Subtle green arrow visible on light and dark boards (Lichess-style). */
+export declare const DEFAULT_LAST_MOVE_ARROW_COLOR = "rgba(155, 199, 0, 0.85)";
+export declare const uciToArrow: (uci: string, color?: string) => ChessboardArrow;
+export declare const lastMoveArrowFromUci: (uci: string | null | undefined, color?: string) => ChessboardArrow[];
+/** UCI of the move that produced the position at {@link plyIndex}. */
+export declare const lastMoveUciAtPly: (movesUci: readonly string[], plyIndex: number) => string | null;
+export declare const mergeCustomArrowsWithLastMove: (customArrows: ChessboardArrow[] | undefined, lastMoveUci: string | null | undefined, lastMoveArrowColor?: string) => ChessboardArrow[];

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/miss/missDisplay.d.ts

@@ -7,6 +7,7 @@ export type MissSequenceState = {
 export type MissDisplay = {
     fen: string | null;
     arrows: [string, string, string][];
+    lastMoveUci: string | null;
     animating: boolean;
 };
 export declare const MISS_WRONG_PAUSE_MS = 450;

package/dist/features/training/miss/useMissBoard.d.ts

@@ -19,6 +19,7 @@ export declare function useMissBoard({ feedback, expectedUci, positionFen, answe
     customArrows: [string, string, string][];
     boardPosition: string;
     boardAnimating: boolean;
+    lastMoveUci: string | null;
     wrapDropHandler: (onDrop: (source: string, target: string, piece: string) => boolean, { enabled, dropFen, expectedMoveUci, }: {
         enabled: boolean;
         dropFen?: string;

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,225 @@ 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] }));
+    };
+}
+
+/** Subtle green arrow visible on light and dark boards (Lichess-style). */
+const DEFAULT_LAST_MOVE_ARROW_COLOR = 'rgba(155, 199, 0, 0.85)';
+const uciToArrow = (uci, color = DEFAULT_LAST_MOVE_ARROW_COLOR) => [uci.slice(0, 2), uci.slice(2, 4), color];
+const lastMoveArrowFromUci = (uci, color = DEFAULT_LAST_MOVE_ARROW_COLOR) => {
+    if (!uci || uci.length < 4) {
+        return [];
+    }
+    return [uciToArrow(uci, color)];
+};
+/** UCI of the move that produced the position at {@link plyIndex}. */
+const lastMoveUciAtPly = (movesUci, plyIndex) => {
+    var _a;
+    if (plyIndex <= 0) {
+        return null;
+    }
+    return (_a = movesUci[plyIndex - 1]) !== null && _a !== void 0 ? _a : null;
+};
+const mergeCustomArrowsWithLastMove = (customArrows, lastMoveUci, lastMoveArrowColor) => {
+    const lastMove = lastMoveArrowFromUci(lastMoveUci, lastMoveArrowColor);
+    if (!lastMove.length) {
+        return customArrows !== null && customArrows !== void 0 ? customArrows : [];
+    }
+    return [...lastMove, ...(customArrows !== null && customArrows !== void 0 ? customArrows : [])];
+};
+
+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 +1978,41 @@ 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, lastMoveUci = null, lastMoveArrowColor, clickToMove, customSquareStyles: extraSquareStyles, customArrows, customBoardStyle, onPieceDrop, position, arePiecesDraggable, autoPromoteToQueen, isDraggablePiece, onPromotionCheck, onSquareClick, onPromotionPieceSelect, onPieceDragBegin, showPromotionDialog: showPromotionDialogProp, promotionToSquare: promotionToSquareProp } = _a, props = __rest(_a, ["checkSquare", "hintSquare", "incorrectMoveSquare", "correctMoveSquare", "lastMoveUci", "lastMoveArrowColor", "clickToMove", "customSquareStyles", "customArrows", "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 mergedCustomArrows = useMemo(() => mergeCustomArrowsWithLastMove(customArrows, lastMoveUci, lastMoveArrowColor), [customArrows, lastMoveArrowColor, lastMoveUci]);
+    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, customArrows: mergedCustomArrows }, promotionControlProps, props)));
 };
 
 const emptyEngineEvaluation = () => ({
@@ -2694,9 +2940,7 @@ const PlyNavigation = ({ plyIndex, totalPly, canPrev, canNext, onGoFirst, onGoPr
 /** Draggable analysis board (no surrounding layout chrome). */
 const AnalysisChessboardView = ({ model }) => {
     var _a;
-    return (jsx(ChessboardDnDProvider, { children: jsx(HighlightChessboard, { checkSquare: (_a = model.checkSquare) !== null && _a !== void 0 ? _a : '', hintSquare: null, incorrectMoveSquare: null, position: model.fen, boardOrientation: model.boardOrientation, boardWidth: model.boardWidth, arePiecesDraggable: true, onPieceDrop: model.onPieceDrop, promotionDialogVariant: "modal", customSquareStyles: model.lastMove
-                ? getLastMoveSquareStyles(model.lastMove.from, model.lastMove.to, model.theme)
-                : {} }) }));
+    return (jsx(ChessboardDnDProvider, { children: jsx(HighlightChessboard, { checkSquare: (_a = model.checkSquare) !== null && _a !== void 0 ? _a : '', hintSquare: null, incorrectMoveSquare: null, position: model.fen, boardOrientation: model.boardOrientation, boardWidth: model.boardWidth, arePiecesDraggable: true, onPieceDrop: model.onPieceDrop, promotionDialogVariant: "modal", lastMoveUci: model.lastMoveUci }) }));
 };
 
 class AnalysisPosition {
@@ -2952,22 +3196,26 @@ class AnalysisPosition {
         return true;
     }
     getLastMoveSquares() {
-        const navPly = this.getNavPly();
-        if (navPly === 0) {
+        const uci = this.getLastMoveUci();
+        if (!uci) {
             return null;
         }
-        let uci;
-        if (this.variation && this.variationCursor > 0) {
-            uci = this.variation.moves[this.variationCursor - 1];
-        }
-        else {
-            uci = this.solutionMoves[this.mainPly - 1];
-        }
         return {
             from: uci.slice(0, 2),
             to: uci.slice(2, 4),
         };
     }
+    getLastMoveUci() {
+        var _a;
+        const navPly = this.getNavPly();
+        if (navPly === 0) {
+            return null;
+        }
+        if (this.variation && this.variationCursor > 0) {
+            return this.variation.moves[this.variationCursor - 1];
+        }
+        return (_a = this.solutionMoves[this.mainPly - 1]) !== null && _a !== void 0 ? _a : null;
+    }
     fen() {
         return this.chess.fen();
     }
@@ -3012,6 +3260,7 @@ const useAnalysisBoardModel = ({ analysisContext, onClose, theme, boardWidth, en
         engineEvaluation,
         engineEnabled,
         lastMove: analysisPosition.getLastMoveSquares(),
+        lastMoveUci: analysisPosition.getLastMoveUci(),
         checkSquare: analysisPosition.getCheckSquare(),
         onSelectPly: (ply) => {
             analysisPosition.goToNavPly(ply);
@@ -3502,6 +3751,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;
@@ -3595,6 +3875,7 @@ function getMissDisplay(sequence, expectedUci, refutationUci, answerArrowColor)
         return {
             fen: null,
             arrows: [],
+            lastMoveUci: null,
             animating: false,
         };
     }
@@ -3605,6 +3886,7 @@ function getMissDisplay(sequence, expectedUci, refutationUci, answerArrowColor)
             return {
                 fen: fenAfterWrong !== null && fenAfterWrong !== void 0 ? fenAfterWrong : setupFen,
                 arrows: [],
+                lastMoveUci: attemptedUci,
                 animating: false,
             };
         case 'refutation': {
@@ -3614,6 +3896,7 @@ function getMissDisplay(sequence, expectedUci, refutationUci, answerArrowColor)
             return {
                 fen: (_a = fenAfterRefutation !== null && fenAfterRefutation !== void 0 ? fenAfterRefutation : fenAfterWrong) !== null && _a !== void 0 ? _a : setupFen,
                 arrows: [],
+                lastMoveUci: refutationUci,
                 animating: Boolean(fenAfterRefutation),
             };
         }
@@ -3621,18 +3904,21 @@ function getMissDisplay(sequence, expectedUci, refutationUci, answerArrowColor)
             return {
                 fen: setupFen,
                 arrows: [],
+                lastMoveUci: null,
                 animating: false,
             };
         case 'answer':
             return {
                 fen: setupFen,
                 arrows: expectedMoveArrow(expectedUci, answerArrowColor),
+                lastMoveUci: null,
                 animating: false,
             };
         default:
             return {
                 fen: setupFen,
                 arrows: [],
+                lastMoveUci: null,
                 animating: false,
             };
     }
@@ -3805,8 +4091,9 @@ function useMissBoard({ feedback, expectedUci, positionFen, answerArrowColor, au
         customArrows,
         boardPosition,
         boardAnimating: missSequence.display.animating,
+        lastMoveUci: missSequence.display.lastMoveUci,
         wrapDropHandler,
     };
 }
 
-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_LAST_MOVE_ARROW_COLOR, 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, lastMoveArrowFromUci, lastMoveUciAtPly, lineEvalCpForGap, matchesExpectedUci, mergeCustomArrowsWithLastMove, navButtonStyle, navRowStyle, normalizeEvalForWhite, normalizePvMoves, normalizeSubscriberOptions, parseUciInfoLine, parseUciMove, plyLabelStyle, palette as plyNavigationPalette, refutationEngineOptions, refutationEvalGapCp, refutationFromEvaluation, resolveStockfishScriptUrl, resolveStockfishWasmUrl, resolveStockfishWorkerUrl, scrubberInputStyle, splitWorkerLines, uciFromDrop, uciPvToSan, uciToArrow, useAnalysisBoardModel, useAnalysisEngine, useAnalysisEngineContext, useBoardRevision, useChessboardTheme, useCorrectMoveFeedback, useMissBoard, useMissRefutation, useMissSequence, usePositionKeyboardNav, useTheme };

package/dist/index.js

@@ -1743,8 +1743,225 @@ 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] }));
+    };
+}
+
+/** Subtle green arrow visible on light and dark boards (Lichess-style). */
+const DEFAULT_LAST_MOVE_ARROW_COLOR = 'rgba(155, 199, 0, 0.85)';
+const uciToArrow = (uci, color = DEFAULT_LAST_MOVE_ARROW_COLOR) => [uci.slice(0, 2), uci.slice(2, 4), color];
+const lastMoveArrowFromUci = (uci, color = DEFAULT_LAST_MOVE_ARROW_COLOR) => {
+    if (!uci || uci.length < 4) {
+        return [];
+    }
+    return [uciToArrow(uci, color)];
+};
+/** UCI of the move that produced the position at {@link plyIndex}. */
+const lastMoveUciAtPly = (movesUci, plyIndex) => {
+    var _a;
+    if (plyIndex <= 0) {
+        return null;
+    }
+    return (_a = movesUci[plyIndex - 1]) !== null && _a !== void 0 ? _a : null;
+};
+const mergeCustomArrowsWithLastMove = (customArrows, lastMoveUci, lastMoveArrowColor) => {
+    const lastMove = lastMoveArrowFromUci(lastMoveUci, lastMoveArrowColor);
+    if (!lastMove.length) {
+        return customArrows !== null && customArrows !== void 0 ? customArrows : [];
+    }
+    return [...lastMove, ...(customArrows !== null && customArrows !== void 0 ? customArrows : [])];
+};
+
+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 +1980,41 @@ 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, lastMoveUci = null, lastMoveArrowColor, clickToMove, customSquareStyles: extraSquareStyles, customArrows, customBoardStyle, onPieceDrop, position, arePiecesDraggable, autoPromoteToQueen, isDraggablePiece, onPromotionCheck, onSquareClick, onPromotionPieceSelect, onPieceDragBegin, showPromotionDialog: showPromotionDialogProp, promotionToSquare: promotionToSquareProp } = _a, props = __rest(_a, ["checkSquare", "hintSquare", "incorrectMoveSquare", "correctMoveSquare", "lastMoveUci", "lastMoveArrowColor", "clickToMove", "customSquareStyles", "customArrows", "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 mergedCustomArrows = react.useMemo(() => mergeCustomArrowsWithLastMove(customArrows, lastMoveUci, lastMoveArrowColor), [customArrows, lastMoveArrowColor, lastMoveUci]);
+    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, customArrows: mergedCustomArrows }, promotionControlProps, props)));
 };
 
 const emptyEngineEvaluation = () => ({
@@ -2696,9 +2942,7 @@ const PlyNavigation = ({ plyIndex, totalPly, canPrev, canNext, onGoFirst, onGoPr
 /** Draggable analysis board (no surrounding layout chrome). */
 const AnalysisChessboardView = ({ model }) => {
     var _a;
-    return (jsxRuntime.jsx(ChessboardDnDProvider, { children: jsxRuntime.jsx(HighlightChessboard, { checkSquare: (_a = model.checkSquare) !== null && _a !== void 0 ? _a : '', hintSquare: null, incorrectMoveSquare: null, position: model.fen, boardOrientation: model.boardOrientation, boardWidth: model.boardWidth, arePiecesDraggable: true, onPieceDrop: model.onPieceDrop, promotionDialogVariant: "modal", customSquareStyles: model.lastMove
-                ? getLastMoveSquareStyles(model.lastMove.from, model.lastMove.to, model.theme)
-                : {} }) }));
+    return (jsxRuntime.jsx(ChessboardDnDProvider, { children: jsxRuntime.jsx(HighlightChessboard, { checkSquare: (_a = model.checkSquare) !== null && _a !== void 0 ? _a : '', hintSquare: null, incorrectMoveSquare: null, position: model.fen, boardOrientation: model.boardOrientation, boardWidth: model.boardWidth, arePiecesDraggable: true, onPieceDrop: model.onPieceDrop, promotionDialogVariant: "modal", lastMoveUci: model.lastMoveUci }) }));
 };
 
 class AnalysisPosition {
@@ -2954,22 +3198,26 @@ class AnalysisPosition {
         return true;
     }
     getLastMoveSquares() {
-        const navPly = this.getNavPly();
-        if (navPly === 0) {
+        const uci = this.getLastMoveUci();
+        if (!uci) {
             return null;
         }
-        let uci;
-        if (this.variation && this.variationCursor > 0) {
-            uci = this.variation.moves[this.variationCursor - 1];
-        }
-        else {
-            uci = this.solutionMoves[this.mainPly - 1];
-        }
         return {
             from: uci.slice(0, 2),
             to: uci.slice(2, 4),
         };
     }
+    getLastMoveUci() {
+        var _a;
+        const navPly = this.getNavPly();
+        if (navPly === 0) {
+            return null;
+        }
+        if (this.variation && this.variationCursor > 0) {
+            return this.variation.moves[this.variationCursor - 1];
+        }
+        return (_a = this.solutionMoves[this.mainPly - 1]) !== null && _a !== void 0 ? _a : null;
+    }
     fen() {
         return this.chess.fen();
     }
@@ -3014,6 +3262,7 @@ const useAnalysisBoardModel = ({ analysisContext, onClose, theme, boardWidth, en
         engineEvaluation,
         engineEnabled,
         lastMove: analysisPosition.getLastMoveSquares(),
+        lastMoveUci: analysisPosition.getLastMoveUci(),
         checkSquare: analysisPosition.getCheckSquare(),
         onSelectPly: (ply) => {
             analysisPosition.goToNavPly(ply);
@@ -3504,6 +3753,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;
@@ -3597,6 +3877,7 @@ function getMissDisplay(sequence, expectedUci, refutationUci, answerArrowColor)
         return {
             fen: null,
             arrows: [],
+            lastMoveUci: null,
             animating: false,
         };
     }
@@ -3607,6 +3888,7 @@ function getMissDisplay(sequence, expectedUci, refutationUci, answerArrowColor)
             return {
                 fen: fenAfterWrong !== null && fenAfterWrong !== void 0 ? fenAfterWrong : setupFen,
                 arrows: [],
+                lastMoveUci: attemptedUci,
                 animating: false,
             };
         case 'refutation': {
@@ -3616,6 +3898,7 @@ function getMissDisplay(sequence, expectedUci, refutationUci, answerArrowColor)
             return {
                 fen: (_a = fenAfterRefutation !== null && fenAfterRefutation !== void 0 ? fenAfterRefutation : fenAfterWrong) !== null && _a !== void 0 ? _a : setupFen,
                 arrows: [],
+                lastMoveUci: refutationUci,
                 animating: Boolean(fenAfterRefutation),
             };
         }
@@ -3623,18 +3906,21 @@ function getMissDisplay(sequence, expectedUci, refutationUci, answerArrowColor)
             return {
                 fen: setupFen,
                 arrows: [],
+                lastMoveUci: null,
                 animating: false,
             };
         case 'answer':
             return {
                 fen: setupFen,
                 arrows: expectedMoveArrow(expectedUci, answerArrowColor),
+                lastMoveUci: null,
                 animating: false,
             };
         default:
             return {
                 fen: setupFen,
                 arrows: [],
+                lastMoveUci: null,
                 animating: false,
             };
     }
@@ -3807,6 +4093,7 @@ function useMissBoard({ feedback, expectedUci, positionFen, answerArrowColor, au
         customArrows,
         boardPosition,
         boardAnimating: missSequence.display.animating,
+        lastMoveUci: missSequence.display.lastMoveUci,
         wrapDropHandler,
     };
 }
@@ -3821,10 +4108,13 @@ 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_LAST_MOVE_ARROW_COLOR = DEFAULT_LAST_MOVE_ARROW_COLOR;
 exports.DEFAULT_STOCKFISH_SCRIPT_URL = DEFAULT_STOCKFISH_SCRIPT_URL;
 exports.DefaultAnalysisContainer = DefaultAnalysisContainer;
 exports.DefaultAnalysisSidebar = DefaultAnalysisSidebar;
@@ -3863,8 +4153,11 @@ exports.getStylesForTheme = getStylesForTheme;
 exports.isAnalyzableFen = isAnalyzableFen;
 exports.isBoardThemeId = isBoardThemeId;
 exports.isEditableKeyboardTarget = isEditableKeyboardTarget;
+exports.lastMoveArrowFromUci = lastMoveArrowFromUci;
+exports.lastMoveUciAtPly = lastMoveUciAtPly;
 exports.lineEvalCpForGap = lineEvalCpForGap;
 exports.matchesExpectedUci = matchesExpectedUci;
+exports.mergeCustomArrowsWithLastMove = mergeCustomArrowsWithLastMove;
 exports.navButtonStyle = navButtonStyle;
 exports.navRowStyle = navRowStyle;
 exports.normalizeEvalForWhite = normalizeEvalForWhite;
@@ -3884,11 +4177,13 @@ exports.scrubberInputStyle = scrubberInputStyle;
 exports.splitWorkerLines = splitWorkerLines;
 exports.uciFromDrop = uciFromDrop;
 exports.uciPvToSan = uciPvToSan;
+exports.uciToArrow = uciToArrow;
 exports.useAnalysisBoardModel = useAnalysisBoardModel;
 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.4",
   "description": "Shared React chessboard theme, highlights, browser Stockfish, and analysis board",
   "license": "MIT",
   "author": "Robert Blackwell",