react-chess-core 0.1.4 → 0.1.6

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

@@ -0,0 +1,2 @@
+/** Large green check centered over the full chessboard when a line completes. */
+export declare const BoardCompleteCheckOverlay: () => import("react").JSX.Element;

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

@@ -1,15 +1,14 @@
 export interface HighlightChessboardProps {
     checkSquare: string;
     hintSquare: string | null;
-    incorrectMoveSquare: string | null;
+    /** Origin square of a rejected training move — shows a red X on the snapped-back piece. */
+    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, 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;
+export declare const HighlightChessboard: ({ checkSquare, hintSquare, incorrectMoveSquare, correctMoveSquare, lastMoveUci, 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/IncorrectMoveXBadge.d.ts

@@ -0,0 +1,2 @@
+/** Red circle with a white X, anchored to the bottom-right of a square. */
+export declare const IncorrectMoveXBadge: () => import("react").JSX.Element;

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

@@ -0,0 +1,13 @@
+/**
+ * Board arrow colors — change these values to update arrows app-wide.
+ */
+export declare const boardArrowColors: {
+    /** Arrow showing the move that reached the current position. */
+    readonly lastMove: "rgba(130, 130, 130, 0.75)";
+    /** Arrow showing the correct / answer move during training. */
+    readonly answer: "#1976d2";
+};
+/** @deprecated Use {@link boardArrowColors.lastMove} */
+export declare const DEFAULT_LAST_MOVE_ARROW_COLOR: "rgba(130, 130, 130, 0.75)";
+/** @deprecated Use {@link boardArrowColors.answer} */
+export declare const DEFAULT_ANSWER_ARROW_COLOR: "#1976d2";

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

@@ -1,3 +1,7 @@
 import type { FC } from 'react';
 import type { CustomSquareProps } from 'react-chessboard/dist/chessboard/types';
-export declare function createFeedbackSquareRenderer(correctMoveSquare: string): FC<CustomSquareProps>;
+export type FeedbackSquareRendererOptions = {
+    correctMoveSquare?: string | null;
+    incorrectMoveSquare?: string | null;
+};
+export declare function createFeedbackSquareRenderer({ correctMoveSquare, incorrectMoveSquare, }: FeedbackSquareRendererOptions): FC<CustomSquareProps> | undefined;

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

@@ -3,5 +3,8 @@ export * from './chessboardTheme';
 export * from './ChessboardDnDProvider';
 export * from './HighlightChessboard';
 export * from './CorrectMoveCheckBadge';
+export * from './IncorrectMoveXBadge';
+export * from './BoardCompleteCheckOverlay';
 export * from './boardSquareHighlightColors';
+export * from './boardArrowColors';
 export * from './lastMoveArrow';

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

@@ -1,8 +1,6 @@
 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[];
+export declare const uciToArrow: (uci: string) => ChessboardArrow;
+export declare const lastMoveArrowFromUci: (uci: string | null | undefined) => 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[];
+export declare const mergeCustomArrowsWithLastMove: (customArrows: ChessboardArrow[] | undefined, lastMoveUci: string | null | undefined) => ChessboardArrow[];

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

@@ -1,20 +1,25 @@
+export type ExpectedMoveAttempt = {
+    uci: string;
+    sourceSquare: string;
+    targetSquare: string;
+};
 export type ExpectedMoveDropResult = {
     kind: 'ignored';
 } | {
     kind: 'illegal';
 } | {
     kind: 'correct';
-    uci: string;
+    attempt: ExpectedMoveAttempt;
 } | {
     kind: 'incorrect';
-    uci: string;
+    attempt: ExpectedMoveAttempt;
 };
 export type CreateExpectedMoveDropHandlerOptions = {
     fen: string;
     expectedUci: string | null | undefined;
     enabled: boolean;
-    onCorrect: (uci: string) => void;
-    onIncorrect: (uci: string) => void;
+    onCorrect: (attempt: ExpectedMoveAttempt) => void;
+    onIncorrect: (attempt: ExpectedMoveAttempt) => void;
 };
 /**
  * Evaluate a training drop without mutating board position.

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

@@ -3,4 +3,6 @@ export * from './expectedMoveDrop';
 export * from './useBoardRevision';
 export * from './correctMoveFeedbackMs';
 export * from './useCorrectMoveFeedback';
+export * from './useIncorrectMoveFeedback';
+export * from './useTrainingMoveFeedback';
 export * from './miss';

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

@@ -0,0 +1,6 @@
+export declare function useIncorrectMoveFeedback(delayMs?: number): {
+    incorrectMoveSquare: string | null;
+    showIncorrectMove: (originSquare: string, onComplete?: () => void) => void;
+    clearIncorrectMoveFeedback: () => void;
+    isShowingIncorrectMove: boolean;
+};

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

@@ -0,0 +1,22 @@
+import { type CreateExpectedMoveDropHandlerOptions, type ExpectedMoveAttempt } from './expectedMoveDrop';
+export type CreateTrainingDropHandlerOptions = Omit<CreateExpectedMoveDropHandlerOptions, 'onCorrect' | 'onIncorrect'> & {
+    onCorrect?: (attempt: ExpectedMoveAttempt) => void;
+    onIncorrect?: (attempt: ExpectedMoveAttempt) => void;
+};
+/**
+ * Shared correct/incorrect move overlays for training boards.
+ * Incorrect feedback always uses the drag origin square (snapped-back piece).
+ */
+export declare function useTrainingMoveFeedback(delayMs?: number): {
+    correctMoveSquare: string | null;
+    incorrectMoveSquare: string | null;
+    showCorrectMove: (targetSquare: string, onComplete?: () => void) => void;
+    showIncorrectMove: (originSquare: string, onComplete?: () => void) => void;
+    clearMoveFeedback: () => void;
+    clearCorrectMoveFeedback: () => void;
+    clearIncorrectMoveFeedback: () => void;
+    isShowingCorrectMove: boolean;
+    isShowingIncorrectMove: boolean;
+    isShowingMoveFeedback: boolean;
+    createDropHandler: ({ onCorrect, onIncorrect, ...options }: CreateTrainingDropHandlerOptions) => (sourceSquare: string, targetSquare: string, piece: string) => boolean;
+};

package/dist/index.esm.js

@@ -1746,7 +1746,7 @@ const boardSquareHighlightColors = {
     captureTarget: 'radial-gradient(circle, rgba(0, 0, 0, 0.18) 72%, transparent 72%)',
 };
 
-const badgeStyle = {
+const badgeStyle$2 = {
     position: 'absolute',
     right: '6%',
     bottom: '6%',
@@ -1766,29 +1766,69 @@ const badgeStyle = {
 };
 /** 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 CorrectMoveCheckBadge = () => (jsx("span", { "aria-hidden": true, style: badgeStyle$2, 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 = {
+const badgeStyle$1 = {
+    position: 'absolute',
+    right: '6%',
+    bottom: '6%',
+    width: '26%',
+    height: '26%',
+    minWidth: 14,
+    minHeight: 14,
+    maxWidth: 26,
+    maxHeight: 26,
+    borderRadius: '50%',
+    backgroundColor: '#c62828',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxShadow: '0 1px 3px rgba(0, 0, 0, 0.35)',
+    pointerEvents: 'none',
+};
+/** Red circle with a white X, anchored to the bottom-right of a square. */
+const IncorrectMoveXBadge = () => (jsx("span", { "aria-hidden": true, style: badgeStyle$1, children: jsx("svg", { viewBox: "0 0 12 12", width: "58%", height: "58%", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M3.2 3.2 8.8 8.8M8.8 3.2 3.2 8.8", stroke: "#fff", strokeWidth: "1.8", strokeLinecap: "round" }) }) }));
+
+const overlayStyle$2 = {
     position: 'absolute',
     inset: 0,
     pointerEvents: 'none',
     zIndex: 20,
     overflow: 'visible',
 };
-function createFeedbackSquareRenderer(correctMoveSquare) {
+function createFeedbackSquareRenderer({ correctMoveSquare = null, incorrectMoveSquare = null, }) {
+    if (!correctMoveSquare && !incorrectMoveSquare) {
+        return undefined;
+    }
     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] }));
+        return (jsxs("div", { ref: ref, style: Object.assign(Object.assign({}, style), { position: 'relative', overflow: 'visible' }), children: [children, square === correctMoveSquare ? (jsx("div", { style: overlayStyle$2, children: jsx(CorrectMoveCheckBadge, {}) })) : null, square === incorrectMoveSquare ? (jsx("div", { style: overlayStyle$2, children: jsx(IncorrectMoveXBadge, {}) })) : 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) => {
+/**
+ * Board arrow colors — change these values to update arrows app-wide.
+ */
+const boardArrowColors = {
+    /** Arrow showing the move that reached the current position. */
+    lastMove: 'rgba(130, 130, 130, 0.75)',
+    /** Arrow showing the correct / answer move during training. */
+    answer: '#1976d2',
+};
+/** @deprecated Use {@link boardArrowColors.lastMove} */
+const DEFAULT_LAST_MOVE_ARROW_COLOR = boardArrowColors.lastMove;
+/** @deprecated Use {@link boardArrowColors.answer} */
+const DEFAULT_ANSWER_ARROW_COLOR = boardArrowColors.answer;
+
+const uciToArrow = (uci) => [
+    uci.slice(0, 2),
+    uci.slice(2, 4),
+    boardArrowColors.lastMove,
+];
+const lastMoveArrowFromUci = (uci) => {
     if (!uci || uci.length < 4) {
         return [];
     }
-    return [uciToArrow(uci, color)];
+    return [uciToArrow(uci)];
 };
 /** UCI of the move that produced the position at {@link plyIndex}. */
 const lastMoveUciAtPly = (movesUci, plyIndex) => {
@@ -1798,8 +1838,8 @@ const lastMoveUciAtPly = (movesUci, plyIndex) => {
     }
     return (_a = movesUci[plyIndex - 1]) !== null && _a !== void 0 ? _a : null;
 };
-const mergeCustomArrowsWithLastMove = (customArrows, lastMoveUci, lastMoveArrowColor) => {
-    const lastMove = lastMoveArrowFromUci(lastMoveUci, lastMoveArrowColor);
+const mergeCustomArrowsWithLastMove = (customArrows, lastMoveUci) => {
+    const lastMove = lastMoveArrowFromUci(lastMoveUci);
     if (!lastMove.length) {
         return customArrows !== null && customArrows !== void 0 ? customArrows : [];
     }
@@ -1965,20 +2005,15 @@ const getCheckHighlighting = (checkSquare) => {
     styles[checkSquare] = { backgroundColor: boardSquareHighlightColors.check };
     return styles;
 };
-const getFeedbackHighlighting = (hintSquare, incorrectMoveSquare) => {
+const getFeedbackHighlighting = (hintSquare) => {
     const styles = {};
     if (hintSquare) {
         styles[hintSquare] = { backgroundColor: boardSquareHighlightColors.hint };
     }
-    if (incorrectMoveSquare) {
-        styles[incorrectMoveSquare] = {
-            backgroundColor: boardSquareHighlightColors.incorrect,
-        };
-    }
     return styles;
 };
 const HighlightChessboard = (_a) => {
-    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"]);
+    var { checkSquare, hintSquare, incorrectMoveSquare = null, correctMoveSquare = null, lastMoveUci = null, 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", "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({
@@ -1994,12 +2029,13 @@ const HighlightChessboard = (_a) => {
         onPieceDragBegin,
     });
     const checkStyles = getCheckHighlighting(checkSquare);
-    const feedbackStyles = getFeedbackHighlighting(hintSquare, incorrectMoveSquare);
+    const feedbackStyles = getFeedbackHighlighting(hintSquare);
     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 customSquare = useMemo(() => createFeedbackSquareRenderer({
+        correctMoveSquare,
+        incorrectMoveSquare,
+    }), [correctMoveSquare, incorrectMoveSquare]);
+    const mergedCustomArrows = useMemo(() => mergeCustomArrowsWithLastMove(customArrows, lastMoveUci), [customArrows, lastMoveUci]);
     const promotionControlProps = clickPromotionDialog
         ? {
             showPromotionDialog: true,
@@ -2015,6 +2051,29 @@ const HighlightChessboard = (_a) => {
     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 overlayStyle$1 = {
+    position: 'absolute',
+    inset: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    pointerEvents: 'none',
+    zIndex: 10,
+    borderRadius: 4,
+};
+const badgeStyle = {
+    width: '58%',
+    height: '58%',
+    borderRadius: '50%',
+    backgroundColor: '#2e7d32',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxShadow: '0 4px 20px rgba(0, 0, 0, 0.4)',
+};
+/** Large green check centered over the full chessboard when a line completes. */
+const BoardCompleteCheckOverlay = () => (jsx("div", { "aria-hidden": true, style: overlayStyle$1, children: jsx("span", { style: badgeStyle, children: jsx("svg", { viewBox: "0 0 24 24", width: "58%", height: "58%", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M5 13l4 4L19 7", stroke: "#fff", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) }));
+
 const emptyEngineEvaluation = () => ({
     status: 'idle',
     depth: 0,
@@ -3225,7 +3284,7 @@ class AnalysisPosition {
 }
 
 const useAnalysisBoardModel = ({ analysisContext, onClose, theme, boardWidth, engine, }) => {
-    var _a, _b, _c, _d;
+    var _a;
     const skipBackdropCloseRef = useRef(true);
     const analysisPosition = useMemo(() => new AnalysisPosition(analysisContext), [analysisContext]);
     const [navRevision, setNavRevision] = useState(0);
@@ -3241,12 +3300,7 @@ const useAnalysisBoardModel = ({ analysisContext, onClose, theme, boardWidth, en
     }, [analysisContext, analysisPosition]);
     const fen = analysisPosition.fen();
     const engineEnabled = (_a = engine === null || engine === void 0 ? void 0 : engine.enabled) !== null && _a !== void 0 ? _a : true;
-    const engineEvaluation = useAnalysisEngine(fen, {
-        enabled: engineEnabled,
-        depth: (_b = engine === null || engine === void 0 ? void 0 : engine.depth) !== null && _b !== void 0 ? _b : 16,
-        multiPv: (_c = engine === null || engine === void 0 ? void 0 : engine.multiPv) !== null && _c !== void 0 ? _c : 2,
-        scriptUrl: (_d = engine === null || engine === void 0 ? void 0 : engine.scriptUrl) !== null && _d !== void 0 ? _d : DEFAULT_STOCKFISH_SCRIPT_URL,
-    });
+    const engineEvaluation = useAnalysisEngine(fen, Object.assign(Object.assign({ depth: 16, multiPv: 2, scriptUrl: DEFAULT_STOCKFISH_SCRIPT_URL }, engine), { enabled: engineEnabled }));
     return {
         theme,
         boardWidth,
@@ -3717,20 +3771,25 @@ function evaluateExpectedMoveDrop(fen, sourceSquare, targetSquare, piece, expect
     if (!uci) {
         return { kind: 'illegal' };
     }
+    const attempt = {
+        uci,
+        sourceSquare,
+        targetSquare,
+    };
     if (matchesExpectedUci(uci, expectedUci)) {
-        return { kind: 'correct', uci };
+        return { kind: 'correct', attempt };
     }
-    return { kind: 'incorrect', uci };
+    return { kind: 'incorrect', attempt };
 }
 function createExpectedMoveDropHandler({ fen, expectedUci, enabled, onCorrect, onIncorrect, }) {
     return (sourceSquare, targetSquare, piece) => {
         const result = evaluateExpectedMoveDrop(fen, sourceSquare, targetSquare, piece, expectedUci, enabled);
         switch (result.kind) {
             case 'correct':
-                onCorrect(result.uci);
+                onCorrect(result.attempt);
                 return true;
             case 'incorrect':
-                onIncorrect(result.uci);
+                onIncorrect(result.attempt);
                 return false;
             default:
                 return false;
@@ -3782,6 +3841,69 @@ function useCorrectMoveFeedback(delayMs = CORRECT_MOVE_FEEDBACK_MS) {
     };
 }
 
+function useIncorrectMoveFeedback(delayMs = CORRECT_MOVE_FEEDBACK_MS) {
+    const [incorrectMoveSquare, setIncorrectMoveSquare] = useState(null);
+    const timeoutRef = useRef(null);
+    const clearIncorrectMoveFeedback = useCallback(() => {
+        if (timeoutRef.current !== null) {
+            window.clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        setIncorrectMoveSquare(null);
+    }, []);
+    const showIncorrectMove = useCallback((originSquare, onComplete) => {
+        clearIncorrectMoveFeedback();
+        setIncorrectMoveSquare(originSquare);
+        timeoutRef.current = window.setTimeout(() => {
+            timeoutRef.current = null;
+            setIncorrectMoveSquare(null);
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+        }, delayMs);
+    }, [clearIncorrectMoveFeedback, delayMs]);
+    useEffect(() => clearIncorrectMoveFeedback, [clearIncorrectMoveFeedback]);
+    return {
+        incorrectMoveSquare,
+        showIncorrectMove,
+        clearIncorrectMoveFeedback,
+        isShowingIncorrectMove: incorrectMoveSquare !== null,
+    };
+}
+
+/**
+ * Shared correct/incorrect move overlays for training boards.
+ * Incorrect feedback always uses the drag origin square (snapped-back piece).
+ */
+function useTrainingMoveFeedback(delayMs) {
+    const { correctMoveSquare, showCorrectMove, clearCorrectMoveFeedback, isShowingCorrectMove, } = useCorrectMoveFeedback(delayMs);
+    const { incorrectMoveSquare, showIncorrectMove, clearIncorrectMoveFeedback, isShowingIncorrectMove, } = useIncorrectMoveFeedback(delayMs);
+    const clearMoveFeedback = useCallback(() => {
+        clearCorrectMoveFeedback();
+        clearIncorrectMoveFeedback();
+    }, [clearCorrectMoveFeedback, clearIncorrectMoveFeedback]);
+    const createDropHandler = useCallback((_a) => {
+        var { onCorrect, onIncorrect } = _a, options = __rest(_a, ["onCorrect", "onIncorrect"]);
+        return createExpectedMoveDropHandler(Object.assign(Object.assign({}, options), { onCorrect: (attempt) => {
+                onCorrect === null || onCorrect === void 0 ? void 0 : onCorrect(attempt);
+            }, onIncorrect: (attempt) => {
+                showIncorrectMove(attempt.sourceSquare);
+                onIncorrect === null || onIncorrect === void 0 ? void 0 : onIncorrect(attempt);
+            } }));
+    }, [showIncorrectMove]);
+    return {
+        correctMoveSquare,
+        incorrectMoveSquare,
+        showCorrectMove,
+        showIncorrectMove,
+        clearMoveFeedback,
+        clearCorrectMoveFeedback,
+        clearIncorrectMoveFeedback,
+        isShowingCorrectMove,
+        isShowingIncorrectMove,
+        isShowingMoveFeedback: isShowingCorrectMove || isShowingIncorrectMove,
+        createDropHandler,
+    };
+}
+
 /** 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;
@@ -3884,9 +4006,9 @@ function getMissDisplay(sequence, expectedUci, refutationUci, answerArrowColor)
     switch (phase) {
         case 'wrong':
             return {
-                fen: fenAfterWrong !== null && fenAfterWrong !== void 0 ? fenAfterWrong : setupFen,
+                fen: setupFen,
                 arrows: [],
-                lastMoveUci: attemptedUci,
+                lastMoveUci: null,
                 animating: false,
             };
         case 'refutation': {
@@ -4096,4 +4218,4 @@ function useMissBoard({ feedback, expectedUci, positionFen, answerArrowColor, au
     };
 }
 
-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 };
+export { AnalysisBoard, AnalysisBoardCore, AnalysisBoardCoreView, AnalysisBoardLayout, AnalysisChessboardView, AnalysisEngineProvider, AnalysisErrorBoundary, AnalysisPosition, BOARD_THEMES, BOARD_THEME_IDS, BoardCompleteCheckOverlay, CORRECT_MOVE_FEEDBACK_MS, ChessboardDnDProvider, ChessboardThemeContext, CorrectMoveCheckBadge, DEFAULT_ANALYSIS_LAYOUT, DEFAULT_ANSWER_ARROW_COLOR, DEFAULT_BOARD_THEME, DEFAULT_LAST_MOVE_ARROW_COLOR, DEFAULT_STOCKFISH_SCRIPT_URL, DefaultAnalysisContainer, DefaultAnalysisSidebar, DefaultPlyNavigation, EngineEvaluationPanel, HighlightChessboard, IncorrectMoveXBadge, 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, boardArrowColors, 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, useIncorrectMoveFeedback, useMissBoard, useMissRefutation, useMissSequence, usePositionKeyboardNav, useTheme, useTrainingMoveFeedback };

package/dist/index.js

@@ -1748,7 +1748,7 @@ const boardSquareHighlightColors = {
     captureTarget: 'radial-gradient(circle, rgba(0, 0, 0, 0.18) 72%, transparent 72%)',
 };
 
-const badgeStyle = {
+const badgeStyle$2 = {
     position: 'absolute',
     right: '6%',
     bottom: '6%',
@@ -1768,29 +1768,69 @@ const badgeStyle = {
 };
 /** 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 CorrectMoveCheckBadge = () => (jsxRuntime.jsx("span", { "aria-hidden": true, style: badgeStyle$2, 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 = {
+const badgeStyle$1 = {
+    position: 'absolute',
+    right: '6%',
+    bottom: '6%',
+    width: '26%',
+    height: '26%',
+    minWidth: 14,
+    minHeight: 14,
+    maxWidth: 26,
+    maxHeight: 26,
+    borderRadius: '50%',
+    backgroundColor: '#c62828',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxShadow: '0 1px 3px rgba(0, 0, 0, 0.35)',
+    pointerEvents: 'none',
+};
+/** Red circle with a white X, anchored to the bottom-right of a square. */
+const IncorrectMoveXBadge = () => (jsxRuntime.jsx("span", { "aria-hidden": true, style: badgeStyle$1, children: jsxRuntime.jsx("svg", { viewBox: "0 0 12 12", width: "58%", height: "58%", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M3.2 3.2 8.8 8.8M8.8 3.2 3.2 8.8", stroke: "#fff", strokeWidth: "1.8", strokeLinecap: "round" }) }) }));
+
+const overlayStyle$2 = {
     position: 'absolute',
     inset: 0,
     pointerEvents: 'none',
     zIndex: 20,
     overflow: 'visible',
 };
-function createFeedbackSquareRenderer(correctMoveSquare) {
+function createFeedbackSquareRenderer({ correctMoveSquare = null, incorrectMoveSquare = null, }) {
+    if (!correctMoveSquare && !incorrectMoveSquare) {
+        return undefined;
+    }
     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] }));
+        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$2, children: jsxRuntime.jsx(CorrectMoveCheckBadge, {}) })) : null, square === incorrectMoveSquare ? (jsxRuntime.jsx("div", { style: overlayStyle$2, children: jsxRuntime.jsx(IncorrectMoveXBadge, {}) })) : 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) => {
+/**
+ * Board arrow colors — change these values to update arrows app-wide.
+ */
+const boardArrowColors = {
+    /** Arrow showing the move that reached the current position. */
+    lastMove: 'rgba(130, 130, 130, 0.75)',
+    /** Arrow showing the correct / answer move during training. */
+    answer: '#1976d2',
+};
+/** @deprecated Use {@link boardArrowColors.lastMove} */
+const DEFAULT_LAST_MOVE_ARROW_COLOR = boardArrowColors.lastMove;
+/** @deprecated Use {@link boardArrowColors.answer} */
+const DEFAULT_ANSWER_ARROW_COLOR = boardArrowColors.answer;
+
+const uciToArrow = (uci) => [
+    uci.slice(0, 2),
+    uci.slice(2, 4),
+    boardArrowColors.lastMove,
+];
+const lastMoveArrowFromUci = (uci) => {
     if (!uci || uci.length < 4) {
         return [];
     }
-    return [uciToArrow(uci, color)];
+    return [uciToArrow(uci)];
 };
 /** UCI of the move that produced the position at {@link plyIndex}. */
 const lastMoveUciAtPly = (movesUci, plyIndex) => {
@@ -1800,8 +1840,8 @@ const lastMoveUciAtPly = (movesUci, plyIndex) => {
     }
     return (_a = movesUci[plyIndex - 1]) !== null && _a !== void 0 ? _a : null;
 };
-const mergeCustomArrowsWithLastMove = (customArrows, lastMoveUci, lastMoveArrowColor) => {
-    const lastMove = lastMoveArrowFromUci(lastMoveUci, lastMoveArrowColor);
+const mergeCustomArrowsWithLastMove = (customArrows, lastMoveUci) => {
+    const lastMove = lastMoveArrowFromUci(lastMoveUci);
     if (!lastMove.length) {
         return customArrows !== null && customArrows !== void 0 ? customArrows : [];
     }
@@ -1967,20 +2007,15 @@ const getCheckHighlighting = (checkSquare) => {
     styles[checkSquare] = { backgroundColor: boardSquareHighlightColors.check };
     return styles;
 };
-const getFeedbackHighlighting = (hintSquare, incorrectMoveSquare) => {
+const getFeedbackHighlighting = (hintSquare) => {
     const styles = {};
     if (hintSquare) {
         styles[hintSquare] = { backgroundColor: boardSquareHighlightColors.hint };
     }
-    if (incorrectMoveSquare) {
-        styles[incorrectMoveSquare] = {
-            backgroundColor: boardSquareHighlightColors.incorrect,
-        };
-    }
     return styles;
 };
 const HighlightChessboard = (_a) => {
-    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"]);
+    var { checkSquare, hintSquare, incorrectMoveSquare = null, correctMoveSquare = null, lastMoveUci = null, 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", "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({
@@ -1996,12 +2031,13 @@ const HighlightChessboard = (_a) => {
         onPieceDragBegin,
     });
     const checkStyles = getCheckHighlighting(checkSquare);
-    const feedbackStyles = getFeedbackHighlighting(hintSquare, incorrectMoveSquare);
+    const feedbackStyles = getFeedbackHighlighting(hintSquare);
     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 customSquare = react.useMemo(() => createFeedbackSquareRenderer({
+        correctMoveSquare,
+        incorrectMoveSquare,
+    }), [correctMoveSquare, incorrectMoveSquare]);
+    const mergedCustomArrows = react.useMemo(() => mergeCustomArrowsWithLastMove(customArrows, lastMoveUci), [customArrows, lastMoveUci]);
     const promotionControlProps = clickPromotionDialog
         ? {
             showPromotionDialog: true,
@@ -2017,6 +2053,29 @@ const HighlightChessboard = (_a) => {
     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 overlayStyle$1 = {
+    position: 'absolute',
+    inset: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    pointerEvents: 'none',
+    zIndex: 10,
+    borderRadius: 4,
+};
+const badgeStyle = {
+    width: '58%',
+    height: '58%',
+    borderRadius: '50%',
+    backgroundColor: '#2e7d32',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxShadow: '0 4px 20px rgba(0, 0, 0, 0.4)',
+};
+/** Large green check centered over the full chessboard when a line completes. */
+const BoardCompleteCheckOverlay = () => (jsxRuntime.jsx("div", { "aria-hidden": true, style: overlayStyle$1, children: jsxRuntime.jsx("span", { style: badgeStyle, children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", width: "58%", height: "58%", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M5 13l4 4L19 7", stroke: "#fff", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) }));
+
 const emptyEngineEvaluation = () => ({
     status: 'idle',
     depth: 0,
@@ -3227,7 +3286,7 @@ class AnalysisPosition {
 }
 
 const useAnalysisBoardModel = ({ analysisContext, onClose, theme, boardWidth, engine, }) => {
-    var _a, _b, _c, _d;
+    var _a;
     const skipBackdropCloseRef = react.useRef(true);
     const analysisPosition = react.useMemo(() => new AnalysisPosition(analysisContext), [analysisContext]);
     const [navRevision, setNavRevision] = react.useState(0);
@@ -3243,12 +3302,7 @@ const useAnalysisBoardModel = ({ analysisContext, onClose, theme, boardWidth, en
     }, [analysisContext, analysisPosition]);
     const fen = analysisPosition.fen();
     const engineEnabled = (_a = engine === null || engine === void 0 ? void 0 : engine.enabled) !== null && _a !== void 0 ? _a : true;
-    const engineEvaluation = useAnalysisEngine(fen, {
-        enabled: engineEnabled,
-        depth: (_b = engine === null || engine === void 0 ? void 0 : engine.depth) !== null && _b !== void 0 ? _b : 16,
-        multiPv: (_c = engine === null || engine === void 0 ? void 0 : engine.multiPv) !== null && _c !== void 0 ? _c : 2,
-        scriptUrl: (_d = engine === null || engine === void 0 ? void 0 : engine.scriptUrl) !== null && _d !== void 0 ? _d : DEFAULT_STOCKFISH_SCRIPT_URL,
-    });
+    const engineEvaluation = useAnalysisEngine(fen, Object.assign(Object.assign({ depth: 16, multiPv: 2, scriptUrl: DEFAULT_STOCKFISH_SCRIPT_URL }, engine), { enabled: engineEnabled }));
     return {
         theme,
         boardWidth,
@@ -3719,20 +3773,25 @@ function evaluateExpectedMoveDrop(fen, sourceSquare, targetSquare, piece, expect
     if (!uci) {
         return { kind: 'illegal' };
     }
+    const attempt = {
+        uci,
+        sourceSquare,
+        targetSquare,
+    };
     if (matchesExpectedUci(uci, expectedUci)) {
-        return { kind: 'correct', uci };
+        return { kind: 'correct', attempt };
     }
-    return { kind: 'incorrect', uci };
+    return { kind: 'incorrect', attempt };
 }
 function createExpectedMoveDropHandler({ fen, expectedUci, enabled, onCorrect, onIncorrect, }) {
     return (sourceSquare, targetSquare, piece) => {
         const result = evaluateExpectedMoveDrop(fen, sourceSquare, targetSquare, piece, expectedUci, enabled);
         switch (result.kind) {
             case 'correct':
-                onCorrect(result.uci);
+                onCorrect(result.attempt);
                 return true;
             case 'incorrect':
-                onIncorrect(result.uci);
+                onIncorrect(result.attempt);
                 return false;
             default:
                 return false;
@@ -3784,6 +3843,69 @@ function useCorrectMoveFeedback(delayMs = CORRECT_MOVE_FEEDBACK_MS) {
     };
 }
 
+function useIncorrectMoveFeedback(delayMs = CORRECT_MOVE_FEEDBACK_MS) {
+    const [incorrectMoveSquare, setIncorrectMoveSquare] = react.useState(null);
+    const timeoutRef = react.useRef(null);
+    const clearIncorrectMoveFeedback = react.useCallback(() => {
+        if (timeoutRef.current !== null) {
+            window.clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        setIncorrectMoveSquare(null);
+    }, []);
+    const showIncorrectMove = react.useCallback((originSquare, onComplete) => {
+        clearIncorrectMoveFeedback();
+        setIncorrectMoveSquare(originSquare);
+        timeoutRef.current = window.setTimeout(() => {
+            timeoutRef.current = null;
+            setIncorrectMoveSquare(null);
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+        }, delayMs);
+    }, [clearIncorrectMoveFeedback, delayMs]);
+    react.useEffect(() => clearIncorrectMoveFeedback, [clearIncorrectMoveFeedback]);
+    return {
+        incorrectMoveSquare,
+        showIncorrectMove,
+        clearIncorrectMoveFeedback,
+        isShowingIncorrectMove: incorrectMoveSquare !== null,
+    };
+}
+
+/**
+ * Shared correct/incorrect move overlays for training boards.
+ * Incorrect feedback always uses the drag origin square (snapped-back piece).
+ */
+function useTrainingMoveFeedback(delayMs) {
+    const { correctMoveSquare, showCorrectMove, clearCorrectMoveFeedback, isShowingCorrectMove, } = useCorrectMoveFeedback(delayMs);
+    const { incorrectMoveSquare, showIncorrectMove, clearIncorrectMoveFeedback, isShowingIncorrectMove, } = useIncorrectMoveFeedback(delayMs);
+    const clearMoveFeedback = react.useCallback(() => {
+        clearCorrectMoveFeedback();
+        clearIncorrectMoveFeedback();
+    }, [clearCorrectMoveFeedback, clearIncorrectMoveFeedback]);
+    const createDropHandler = react.useCallback((_a) => {
+        var { onCorrect, onIncorrect } = _a, options = __rest(_a, ["onCorrect", "onIncorrect"]);
+        return createExpectedMoveDropHandler(Object.assign(Object.assign({}, options), { onCorrect: (attempt) => {
+                onCorrect === null || onCorrect === void 0 ? void 0 : onCorrect(attempt);
+            }, onIncorrect: (attempt) => {
+                showIncorrectMove(attempt.sourceSquare);
+                onIncorrect === null || onIncorrect === void 0 ? void 0 : onIncorrect(attempt);
+            } }));
+    }, [showIncorrectMove]);
+    return {
+        correctMoveSquare,
+        incorrectMoveSquare,
+        showCorrectMove,
+        showIncorrectMove,
+        clearMoveFeedback,
+        clearCorrectMoveFeedback,
+        clearIncorrectMoveFeedback,
+        isShowingCorrectMove,
+        isShowingIncorrectMove,
+        isShowingMoveFeedback: isShowingCorrectMove || isShowingIncorrectMove,
+        createDropHandler,
+    };
+}
+
 /** 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;
@@ -3886,9 +4008,9 @@ function getMissDisplay(sequence, expectedUci, refutationUci, answerArrowColor)
     switch (phase) {
         case 'wrong':
             return {
-                fen: fenAfterWrong !== null && fenAfterWrong !== void 0 ? fenAfterWrong : setupFen,
+                fen: setupFen,
                 arrows: [],
-                lastMoveUci: attemptedUci,
+                lastMoveUci: null,
                 animating: false,
             };
         case 'refutation': {
@@ -4108,11 +4230,13 @@ exports.AnalysisErrorBoundary = AnalysisErrorBoundary;
 exports.AnalysisPosition = AnalysisPosition;
 exports.BOARD_THEMES = BOARD_THEMES;
 exports.BOARD_THEME_IDS = BOARD_THEME_IDS;
+exports.BoardCompleteCheckOverlay = BoardCompleteCheckOverlay;
 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_ANSWER_ARROW_COLOR = DEFAULT_ANSWER_ARROW_COLOR;
 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;
@@ -4121,6 +4245,7 @@ exports.DefaultAnalysisSidebar = DefaultAnalysisSidebar;
 exports.DefaultPlyNavigation = DefaultPlyNavigation;
 exports.EngineEvaluationPanel = EngineEvaluationPanel;
 exports.HighlightChessboard = HighlightChessboard;
+exports.IncorrectMoveXBadge = IncorrectMoveXBadge;
 exports.MISS_MOVE_ANIMATION_MS = MISS_MOVE_ANIMATION_MS;
 exports.MISS_REFUTATION_MAX_WAIT_MS = MISS_REFUTATION_MAX_WAIT_MS;
 exports.MISS_REFUTATION_PAUSE_MS = MISS_REFUTATION_PAUSE_MS;
@@ -4133,6 +4258,7 @@ exports.ThemeProvider = ThemeProvider;
 exports.analysisBoardHighlightColors = analysisBoardHighlightColors;
 exports.analysisSidebarColors = analysisSidebarColors;
 exports.applyUciMove = applyUciMove;
+exports.boardArrowColors = boardArrowColors;
 exports.boardSquareHighlightColors = boardSquareHighlightColors;
 exports.boardThemeFromLegacyUiTheme = boardThemeFromLegacyUiTheme;
 exports.createExpectedMoveDropHandler = createExpectedMoveDropHandler;
@@ -4184,8 +4310,10 @@ exports.useAnalysisEngineContext = useAnalysisEngineContext;
 exports.useBoardRevision = useBoardRevision;
 exports.useChessboardTheme = useChessboardTheme;
 exports.useCorrectMoveFeedback = useCorrectMoveFeedback;
+exports.useIncorrectMoveFeedback = useIncorrectMoveFeedback;
 exports.useMissBoard = useMissBoard;
 exports.useMissRefutation = useMissRefutation;
 exports.useMissSequence = useMissSequence;
 exports.usePositionKeyboardNav = usePositionKeyboardNav;
 exports.useTheme = useTheme;
+exports.useTrainingMoveFeedback = useTrainingMoveFeedback;

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

@@ -7,3 +7,4 @@ export declare const StartingPosition: Story;
 export declare const WithHint: Story;
 export declare const ClickToMove: Story;
 export declare const WithCorrectMoveCheck: Story;
+export declare const WithIncorrectMoveX: Story;

package/package.json

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