react-chess-core 0.1.0 → 0.1.1

package/dist/index.esm.js

@@ -1,9 +1,83 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useContext, useState, useRef, useEffect, useLayoutEffect, useMemo, Component } from 'react';
-import { Chessboard, ChessboardDnDProvider } from 'react-chessboard';
+import { createContext, useContext, useRef, useCallback, useEffect, useMemo, useState, useLayoutEffect, Component } from 'react';
+import { ChessboardDnDProvider as ChessboardDnDProvider$1, Chessboard } from 'react-chessboard';
 import { Chess } from 'chess.js';
 import { createPortal } from 'react-dom';
 
+const BOARD_THEME_IDS = [
+    'classic',
+    'forest',
+    'marine',
+    'marble',
+    'ivory',
+    'ocean',
+    'copper',
+    'bubblegum',
+    'sunset',
+];
+const DEFAULT_BOARD_THEME = 'classic';
+const BOARD_THEMES = {
+    classic: {
+        label: 'Classic',
+        darkSquare: '#b58863',
+        lightSquare: '#f0d9b5',
+    },
+    forest: {
+        label: 'Forest',
+        darkSquare: '#769656',
+        lightSquare: '#eeeed2',
+    },
+    marine: {
+        label: 'Marine',
+        darkSquare: '#5b7c99',
+        lightSquare: '#d6e4f0',
+    },
+    marble: {
+        label: 'Marble',
+        darkSquare: '#a8a8a8',
+        lightSquare: '#ffffff',
+    },
+    ivory: {
+        label: 'Ivory',
+        darkSquare: '#c9a66b',
+        lightSquare: '#fff8e7',
+    },
+    ocean: {
+        label: 'Ocean',
+        darkSquare: '#2d6a7e',
+        lightSquare: '#a8dadc',
+    },
+    copper: {
+        label: 'Copper',
+        darkSquare: '#9c6644',
+        lightSquare: '#f4e4d4',
+    },
+    bubblegum: {
+        label: 'Bubblegum',
+        darkSquare: '#c77dff',
+        lightSquare: '#ffd6ff',
+    },
+    sunset: {
+        label: 'Sunset',
+        darkSquare: '#e76f51',
+        lightSquare: '#ffe8d6',
+    },
+};
+function isBoardThemeId(value) {
+    return (typeof value === 'string' &&
+        BOARD_THEME_IDS.includes(value));
+}
+function boardThemeFromLegacyUiTheme(_theme) {
+    return DEFAULT_BOARD_THEME;
+}
+function getBoardThemeStyles(boardTheme) {
+    const { darkSquare, lightSquare } = BOARD_THEMES[boardTheme];
+    return {
+        customDarkSquareStyle: { backgroundColor: darkSquare },
+        customLightSquareStyle: { backgroundColor: lightSquare },
+    };
+}
+
 const ChessboardThemeContext = createContext(undefined);
 const useChessboardTheme = () => {
     const context = useContext(ChessboardThemeContext);
@@ -14,23 +88,18 @@ const useChessboardTheme = () => {
 };
 /** @deprecated Use {@link useChessboardTheme}. */
 const useTheme = useChessboardTheme;
-const getStylesForTheme = (theme) => {
-    if (theme === 'dark') {
-        return {
-            customDarkSquareStyle: { backgroundColor: '#838387' },
-            customLightSquareStyle: { backgroundColor: '#e1e1e3' },
-        };
-    }
-    return {
-        customDarkSquareStyle: { backgroundColor: '#b58863' },
-        customLightSquareStyle: { backgroundColor: '#f0d9b5' },
-    };
-};
-const ThemeProvider = ({ children, theme }) => {
-    const { customDarkSquareStyle, customLightSquareStyle } = getStylesForTheme(theme);
+/** @deprecated Use {@link getBoardThemeStyles}. */
+const getStylesForTheme = (theme) => getBoardThemeStyles(boardThemeFromLegacyUiTheme());
+const ThemeProvider = ({ children, theme = 'dark', boardTheme, }) => {
+    const resolvedBoardTheme = boardTheme !== null && boardTheme !== void 0 ? boardTheme : boardThemeFromLegacyUiTheme();
+    const { customDarkSquareStyle, customLightSquareStyle } = getBoardThemeStyles(resolvedBoardTheme);
     return (jsx(ChessboardThemeContext.Provider, { value: { customDarkSquareStyle, customLightSquareStyle }, children: children }));
 };
 
+/** Touch DnD also accepts mouse events (Chrome device emulation, touch laptops). */
+const TOUCH_DND_OPTIONS = { enableMouseEvents: true };
+const ChessboardDnDProvider = ({ children, }) => (jsx(ChessboardDnDProvider$1, { options: TOUCH_DND_OPTIONS, children: children }));
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -558,16 +627,208 @@ class StockfishBrowserEngine {
     }
 }
 
+const AnalysisEngineContext = createContext(null);
+const useAnalysisEngineContext = () => useContext(AnalysisEngineContext);
+const normalizeSubscriberOptions = (fen, options = {}) => {
+    var _a, _b, _c, _d;
+    return ({
+        fen,
+        enabled: (_a = options.enabled) !== null && _a !== void 0 ? _a : true,
+        depth: (_b = options.depth) !== null && _b !== void 0 ? _b : 16,
+        multiPv: (_c = options.multiPv) !== null && _c !== void 0 ? _c : 2,
+        priority: (_d = options.priority) !== null && _d !== void 0 ? _d : 0,
+    });
+};
+const analyzingForFen = (fen, evaluation) => (Object.assign(Object.assign({}, emptyEngineEvaluation()), { status: evaluation.status === 'error'
+        ? 'error'
+        : evaluation.status === 'loading'
+            ? 'loading'
+            : 'analyzing', error: evaluation.error, fen }));
+const AnalysisEngineProvider = ({ scriptUrl = DEFAULT_STOCKFISH_SCRIPT_URL, children, }) => {
+    const engineRef = useRef(null);
+    const subscribersRef = useRef(new Map());
+    const nextIdRef = useRef(0);
+    const activeKeyRef = useRef('');
+    const readyRef = useRef(false);
+    const scheduleRef = useRef(null);
+    const lastEvaluationRef = useRef(emptyEngineEvaluation());
+    const pickActive = useCallback(() => {
+        const enabled = [...subscribersRef.current.values()].filter((subscriber) => subscriber.options.enabled);
+        if (enabled.length === 0) {
+            return null;
+        }
+        return enabled.sort((left, right) => right.options.priority - left.options.priority)[0];
+    }, []);
+    const notifyAll = useCallback((evaluation) => {
+        lastEvaluationRef.current = evaluation;
+        const active = pickActive();
+        for (const subscriber of subscribersRef.current.values()) {
+            const { fen, enabled } = subscriber.options;
+            if (!enabled) {
+                subscriber.listener(emptyEngineEvaluation());
+                continue;
+            }
+            if (evaluation.fen && evaluation.fen === fen) {
+                subscriber.listener(evaluation);
+                continue;
+            }
+            if ((active === null || active === void 0 ? void 0 : active.id) === subscriber.id) {
+                subscriber.listener(analyzingForFen(fen, evaluation));
+            }
+        }
+    }, [pickActive]);
+    const syncAnalysis = useCallback(() => {
+        const engine = engineRef.current;
+        if (!engine || !readyRef.current) {
+            return;
+        }
+        const active = pickActive();
+        if (!active) {
+            activeKeyRef.current = '';
+            engine.stop();
+            notifyAll(emptyEngineEvaluation());
+            return;
+        }
+        const { fen, depth, multiPv } = active.options;
+        const key = `${active.id}|${fen}|${depth}|${multiPv}`;
+        if (key === activeKeyRef.current) {
+            return;
+        }
+        activeKeyRef.current = key;
+        if (scheduleRef.current !== null) {
+            window.clearTimeout(scheduleRef.current);
+        }
+        scheduleRef.current = window.setTimeout(() => {
+            scheduleRef.current = null;
+            engine.analyze(fen, depth, multiPv);
+        }, 75);
+    }, [notifyAll, pickActive]);
+    useEffect(() => {
+        if (typeof Worker === 'undefined') {
+            return;
+        }
+        const engine = new StockfishBrowserEngine(scriptUrl);
+        engineRef.current = engine;
+        let cancelled = false;
+        const unsubscribe = engine.subscribe((evaluation) => {
+            if (!cancelled) {
+                notifyAll(evaluation);
+            }
+        });
+        engine
+            .init()
+            .then(() => {
+            if (cancelled) {
+                return;
+            }
+            readyRef.current = true;
+            syncAnalysis();
+        })
+            .catch((error) => {
+            if (cancelled) {
+                return;
+            }
+            const message = error instanceof Error ? error.message : 'Failed to start engine';
+            notifyAll(Object.assign(Object.assign({}, emptyEngineEvaluation()), { status: 'error', error: message }));
+        });
+        return () => {
+            cancelled = true;
+            readyRef.current = false;
+            activeKeyRef.current = '';
+            if (scheduleRef.current !== null) {
+                window.clearTimeout(scheduleRef.current);
+                scheduleRef.current = null;
+            }
+            unsubscribe();
+            engine.dispose();
+            engineRef.current = null;
+        };
+    }, [notifyAll, scriptUrl, syncAnalysis]);
+    const register = useCallback((options, listener) => {
+        const id = ++nextIdRef.current;
+        subscribersRef.current.set(id, { id, options, listener });
+        if (options.enabled) {
+            const active = pickActive();
+            if ((active === null || active === void 0 ? void 0 : active.id) === id) {
+                listener(analyzingForFen(options.fen, lastEvaluationRef.current));
+            }
+        }
+        else {
+            listener(emptyEngineEvaluation());
+        }
+        syncAnalysis();
+        return id;
+    }, [pickActive, syncAnalysis]);
+    const update = useCallback((id, options) => {
+        const subscriber = subscribersRef.current.get(id);
+        if (!subscriber) {
+            return;
+        }
+        subscriber.options = options;
+        if (!options.enabled) {
+            subscriber.listener(emptyEngineEvaluation());
+        }
+        else {
+            const active = pickActive();
+            if ((active === null || active === void 0 ? void 0 : active.id) === id) {
+                subscriber.listener(analyzingForFen(options.fen, lastEvaluationRef.current));
+            }
+        }
+        activeKeyRef.current = '';
+        syncAnalysis();
+    }, [pickActive, syncAnalysis]);
+    const unregister = useCallback((id) => {
+        subscribersRef.current.delete(id);
+        activeKeyRef.current = '';
+        syncAnalysis();
+    }, [syncAnalysis]);
+    const value = useMemo(() => ({
+        register,
+        update,
+        unregister,
+    }), [register, unregister, update]);
+    return (jsx(AnalysisEngineContext.Provider, { value: value, children: children }));
+};
+
 const useAnalysisEngine = (fen, options = {}) => {
-    const { enabled = true, depth = 16, multiPv = 2, scriptUrl = DEFAULT_STOCKFISH_SCRIPT_URL, } = options;
+    var _a;
+    const context = useAnalysisEngineContext();
+    const useShared = ((_a = options.shared) !== null && _a !== void 0 ? _a : true) && context !== null;
+    const { enabled = true, depth = 16, multiPv = 2, priority = 0, scriptUrl = DEFAULT_STOCKFISH_SCRIPT_URL, } = options;
     const [evaluation, setEvaluation] = useState(emptyEngineEvaluation());
     const [engineReady, setEngineReady] = useState(false);
     const engineRef = useRef(null);
     const mountGenerationRef = useRef(0);
+    const subscriberIdRef = useRef(null);
+    const subscriberOptions = useMemo(() => normalizeSubscriberOptions(fen, options), [fen, enabled, depth, multiPv, priority]);
+    useLayoutEffect(() => {
+        if (!useShared || !context) {
+            return;
+        }
+        if (subscriberIdRef.current === null) {
+            subscriberIdRef.current = context.register(subscriberOptions, setEvaluation);
+            return;
+        }
+        context.update(subscriberIdRef.current, subscriberOptions);
+    }, [context, subscriberOptions, useShared]);
     useEffect(() => {
-        if (!enabled || typeof Worker === 'undefined') {
-            setEvaluation(emptyEngineEvaluation());
-            setEngineReady(false);
+        if (!useShared || !context) {
+            return;
+        }
+        const contextValue = context;
+        return () => {
+            if (subscriberIdRef.current !== null) {
+                contextValue.unregister(subscriberIdRef.current);
+                subscriberIdRef.current = null;
+            }
+        };
+    }, [context, useShared]);
+    useEffect(() => {
+        if (useShared || !enabled || typeof Worker === 'undefined') {
+            if (!useShared && !enabled) {
+                setEvaluation(emptyEngineEvaluation());
+                setEngineReady(false);
+            }
             return;
         }
         const mountGeneration = ++mountGenerationRef.current;
@@ -603,9 +864,9 @@ const useAnalysisEngine = (fen, options = {}) => {
                 engineRef.current = null;
             }
         };
-    }, [enabled, scriptUrl]);
+    }, [enabled, scriptUrl, useShared]);
     useLayoutEffect(() => {
-        if (!enabled || !engineReady || !engineRef.current) {
+        if (useShared || !enabled || !engineReady || !engineRef.current) {
             return;
         }
         const engine = engineRef.current;
@@ -615,7 +876,7 @@ const useAnalysisEngine = (fen, options = {}) => {
         return () => {
             window.clearTimeout(timer);
         };
-    }, [enabled, engineReady, fen, depth, multiPv]);
+    }, [useShared, enabled, engineReady, fen, depth, multiPv]);
     return useMemo(() => {
         if (evaluation.fen !== fen) {
             return Object.assign(Object.assign({}, emptyEngineEvaluation()), { status: evaluation.status === 'error'
@@ -700,6 +961,147 @@ class AnalysisErrorBoundary extends Component {
     }
 }
 
+const navRowStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 6,
+};
+const scrubberInputStyle = {
+    flex: 1,
+};
+const plyLabelStyle = {
+    minWidth: 56,
+    textAlign: 'center',
+    fontSize: 14,
+};
+function palette(theme) {
+    return {
+        text: theme === 'dark' ? '#e8e8e8' : '#1a1a1a',
+        border: theme === 'dark' ? '#3a3a3a' : '#d0d0d0',
+        surface: theme === 'dark' ? '#262626' : '#f5f5f5',
+    };
+}
+function navButtonStyle(colors) {
+    return {
+        padding: '4px 10px',
+        borderRadius: 6,
+        cursor: 'pointer',
+        fontSize: 14,
+        fontWeight: 600,
+        border: `1px solid ${colors.border}`,
+        background: colors.surface,
+        color: colors.text,
+    };
+}
+
+/** Library-default ply navigation (inline styles). */
+const DefaultPlyNavigation = ({ plyIndex, totalPly, canPrev, canNext, onGoFirst, onGoPrev, onGoNext, onGoLast, onGoTo, theme, showScrubber, showPlyLabel, }) => {
+    const colors = palette(theme);
+    const buttonStyle = navButtonStyle(colors);
+    return (jsxs("div", { style: navRowStyle, children: [jsx("button", { type: "button", onClick: onGoFirst, disabled: !canPrev, style: buttonStyle, "aria-label": "First move", children: "\u23EE" }), jsx("button", { type: "button", onClick: onGoPrev, disabled: !canPrev, style: buttonStyle, "aria-label": "Previous move", children: "\u25C0" }), showScrubber ? (jsx("input", { type: "range", min: 0, max: totalPly, value: plyIndex, onChange: (e) => onGoTo(Number(e.target.value)), style: scrubberInputStyle, "aria-label": "Scrub through game" })) : showPlyLabel ? (jsxs("span", { style: Object.assign(Object.assign({}, plyLabelStyle), { color: colors.text }), children: [plyIndex, " / ", totalPly] })) : null, jsx("button", { type: "button", onClick: onGoNext, disabled: !canNext, style: buttonStyle, "aria-label": "Next move", children: "\u25B6" }), jsx("button", { type: "button", onClick: onGoLast, disabled: !canNext, style: buttonStyle, "aria-label": "Last move", children: "\u23ED" })] }));
+};
+const defaultRenderPlyNavigation = (props) => (jsx(DefaultPlyNavigation, Object.assign({}, props)));
+
+/** True when the event target is a field where arrow keys should type, not navigate. */
+function isEditableKeyboardTarget(target) {
+    if (!(target instanceof HTMLElement)) {
+        return false;
+    }
+    if (target.isContentEditable) {
+        return true;
+    }
+    const tag = target.tagName;
+    return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT';
+}
+
+/**
+ * Global keyboard shortcuts for browsing positions:
+ * - ArrowLeft: previous
+ * - ArrowRight: next
+ * - Home: first (when {@link PositionKeyboardNavOptions.onFirst} is provided)
+ * - End: last (when {@link PositionKeyboardNavOptions.onLast} is provided)
+ *
+ * Ignores keypresses while focus is in an input, textarea, select, or
+ * contenteditable element, and ignores modified keys (Alt/Ctrl/Meta).
+ */
+function usePositionKeyboardNav({ enabled = true, canPrev, canNext, onPrev, onNext, onFirst, onLast, }) {
+    useEffect(() => {
+        if (!enabled) {
+            return;
+        }
+        const handleKeyDown = (event) => {
+            if (isEditableKeyboardTarget(event.target)) {
+                return;
+            }
+            if (event.altKey || event.ctrlKey || event.metaKey) {
+                return;
+            }
+            switch (event.key) {
+                case 'ArrowLeft':
+                    if (!canPrev) {
+                        return;
+                    }
+                    event.preventDefault();
+                    onPrev();
+                    break;
+                case 'ArrowRight':
+                    if (!canNext) {
+                        return;
+                    }
+                    event.preventDefault();
+                    onNext();
+                    break;
+                case 'Home':
+                    if (!onFirst || !canPrev) {
+                        return;
+                    }
+                    event.preventDefault();
+                    onFirst();
+                    break;
+                case 'End':
+                    if (!onLast || !canNext) {
+                        return;
+                    }
+                    event.preventDefault();
+                    onLast();
+                    break;
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [enabled, canPrev, canNext, onPrev, onNext, onFirst, onLast]);
+}
+
+/**
+ * Step through a fixed move list. Omit {@link PlyNavigationProps.renderPlyNavigation}
+ * for the default inline-styled UI, or pass a custom renderer (e.g. MUI controls).
+ */
+const PlyNavigation = ({ plyIndex, totalPly, canPrev, canNext, onGoFirst, onGoPrev, onGoNext, onGoLast, onGoTo, theme = 'dark', keyboardNav = true, showScrubber = true, showPlyLabel, renderPlyNavigation = defaultRenderPlyNavigation, }) => {
+    usePositionKeyboardNav({
+        enabled: keyboardNav,
+        canPrev,
+        canNext,
+        onPrev: onGoPrev,
+        onNext: onGoNext,
+        onFirst: onGoFirst,
+        onLast: onGoLast,
+    });
+    return renderPlyNavigation({
+        plyIndex,
+        totalPly,
+        canPrev,
+        canNext,
+        onGoFirst,
+        onGoPrev,
+        onGoNext,
+        onGoLast,
+        onGoTo,
+        theme,
+        showScrubber,
+        showPlyLabel: showPlyLabel !== null && showPlyLabel !== void 0 ? showPlyLabel : !showScrubber,
+    });
+};
+
 /** Draggable analysis board (no surrounding layout chrome). */
 const AnalysisChessboardView = ({ model }) => {
     var _a;
@@ -1053,12 +1455,28 @@ const useAnalysisBoardModel = ({ analysisContext, onClose, theme, boardWidth, en
  * No layout divs — use {@link renderMain} (e.g. `AnalysisBoardLayout` from `analysis/defaults` or a host layout).
  */
 const AnalysisBoardCore = (_a) => {
-    var { renderContainer, renderMain, renderSidebar, renderEngineEvaluation } = _a, modelArgs = __rest(_a, ["renderContainer", "renderMain", "renderSidebar", "renderEngineEvaluation"]);
+    var { renderContainer, renderMain, renderSidebar, renderEngineEvaluation, keyboardNav = true } = _a, modelArgs = __rest(_a, ["renderContainer", "renderMain", "renderSidebar", "renderEngineEvaluation", "keyboardNav"]);
     const model = useAnalysisBoardModel(modelArgs);
-    return (jsx(AnalysisBoardCoreView, { model: model, renderContainer: renderContainer, renderMain: renderMain, renderSidebar: renderSidebar, renderEngineEvaluation: renderEngineEvaluation }));
+    return (jsx(AnalysisBoardCoreView, { model: model, keyboardNav: keyboardNav, renderContainer: renderContainer, renderMain: renderMain, renderSidebar: renderSidebar, renderEngineEvaluation: renderEngineEvaluation }));
 };
 /** Pure composition (no layout styles) for testing and reuse. */
-const AnalysisBoardCoreView = ({ model, renderContainer, renderMain, renderSidebar, renderEngineEvaluation, }) => {
+const AnalysisBoardCoreView = ({ model, keyboardNav, renderContainer, renderMain, renderSidebar, renderEngineEvaluation, }) => {
+    const { ply, maxPly, onSelectPly } = model;
+    const canPrev = ply > 0;
+    const canNext = ply < maxPly;
+    const goFirst = useCallback(() => onSelectPly(0), [onSelectPly]);
+    const goPrev = useCallback(() => onSelectPly(ply - 1), [onSelectPly, ply]);
+    const goNext = useCallback(() => onSelectPly(ply + 1), [onSelectPly, ply]);
+    const goLast = useCallback(() => onSelectPly(maxPly), [maxPly, onSelectPly]);
+    usePositionKeyboardNav({
+        enabled: keyboardNav,
+        canPrev,
+        canNext,
+        onPrev: goPrev,
+        onNext: goNext,
+        onFirst: goFirst,
+        onLast: goLast,
+    });
     const board = jsx(AnalysisChessboardView, { model: model });
     const engineEvaluationPanel = model.engineEnabled
         ? renderEngineEvaluation({
@@ -1326,66 +1744,6 @@ const closeButtonStyle = {
     fontSize: 14,
 };
 
-const navRowStyle = {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 6,
-};
-const scrubberInputStyle = {
-    flex: 1,
-};
-const plyLabelStyle = {
-    minWidth: 56,
-    textAlign: 'center',
-    fontSize: 14,
-};
-function palette(theme) {
-    return {
-        text: theme === 'dark' ? '#e8e8e8' : '#1a1a1a',
-        border: theme === 'dark' ? '#3a3a3a' : '#d0d0d0',
-        surface: theme === 'dark' ? '#262626' : '#f5f5f5',
-    };
-}
-function navButtonStyle(colors) {
-    return {
-        padding: '4px 10px',
-        borderRadius: 6,
-        cursor: 'pointer',
-        fontSize: 14,
-        fontWeight: 600,
-        border: `1px solid ${colors.border}`,
-        background: colors.surface,
-        color: colors.text,
-    };
-}
-
-/** Library-default ply navigation (inline styles). */
-const DefaultPlyNavigation = ({ plyIndex, totalPly, canPrev, canNext, onGoFirst, onGoPrev, onGoNext, onGoLast, onGoTo, theme, showScrubber, showPlyLabel, }) => {
-    const colors = palette(theme);
-    const buttonStyle = navButtonStyle(colors);
-    return (jsxs("div", { style: navRowStyle, children: [jsx("button", { type: "button", onClick: onGoFirst, disabled: !canPrev, style: buttonStyle, "aria-label": "First move", children: "\u23EE" }), jsx("button", { type: "button", onClick: onGoPrev, disabled: !canPrev, style: buttonStyle, "aria-label": "Previous move", children: "\u25C0" }), showScrubber ? (jsx("input", { type: "range", min: 0, max: totalPly, value: plyIndex, onChange: (e) => onGoTo(Number(e.target.value)), style: scrubberInputStyle, "aria-label": "Scrub through game" })) : showPlyLabel ? (jsxs("span", { style: Object.assign(Object.assign({}, plyLabelStyle), { color: colors.text }), children: [plyIndex, " / ", totalPly] })) : null, jsx("button", { type: "button", onClick: onGoNext, disabled: !canNext, style: buttonStyle, "aria-label": "Next move", children: "\u25B6" }), jsx("button", { type: "button", onClick: onGoLast, disabled: !canNext, style: buttonStyle, "aria-label": "Last move", children: "\u23ED" })] }));
-};
-const defaultRenderPlyNavigation = (props) => (jsx(DefaultPlyNavigation, Object.assign({}, props)));
-
-/**
- * Step through a fixed move list. Omit {@link PlyNavigationProps.renderPlyNavigation}
- * for the default inline-styled UI, or pass a custom renderer (e.g. MUI controls).
- */
-const PlyNavigation = ({ plyIndex, totalPly, canPrev, canNext, onGoFirst, onGoPrev, onGoNext, onGoLast, onGoTo, theme = 'dark', showScrubber = true, showPlyLabel, renderPlyNavigation = defaultRenderPlyNavigation, }) => renderPlyNavigation({
-    plyIndex,
-    totalPly,
-    canPrev,
-    canNext,
-    onGoFirst,
-    onGoPrev,
-    onGoNext,
-    onGoLast,
-    onGoTo,
-    theme,
-    showScrubber,
-    showPlyLabel: showPlyLabel !== null && showPlyLabel !== void 0 ? showPlyLabel : !showScrubber,
-});
-
 const DefaultAnalysisSidebar = ({ historyRows, isHistoryRowSelected, onSelectHistoryRow, ply, maxPly, onSelectPly, theme, engineEvaluationPanel, }) => {
     const rowBands = createSidebarRowBandCounters();
     const baseChipStyle = {
@@ -1393,7 +1751,7 @@ const DefaultAnalysisSidebar = ({ historyRows, isHistoryRowSelected, onSelectHis
         padding: '4px 8px',
         borderRadius: 4,
     };
-    return (jsxs("div", { style: sidebarStyle, children: [jsxs("div", { style: navBlockStyle, children: [jsx(PlyNavigation, { plyIndex: ply, totalPly: maxPly, canPrev: ply > 0, canNext: ply < maxPly, onGoFirst: () => onSelectPly(0), onGoPrev: () => onSelectPly(ply - 1), onGoNext: () => onSelectPly(ply + 1), onGoLast: () => onSelectPly(maxPly), onGoTo: onSelectPly, theme: theme, showScrubber: false }), jsx("p", { style: sectionTitleStyle, children: "Move history" })] }), jsxs("div", { style: contentRowStyle, children: [jsx("ol", { style: moveListStyle, children: historyRows.length === 0 ? (jsx("li", { style: emptyRowStyle, children: "No moves played yet." })) : (historyRows.map((row) => {
+    return (jsxs("div", { style: sidebarStyle, children: [jsxs("div", { style: navBlockStyle, children: [jsx(PlyNavigation, { plyIndex: ply, totalPly: maxPly, canPrev: ply > 0, canNext: ply < maxPly, onGoFirst: () => onSelectPly(0), onGoPrev: () => onSelectPly(ply - 1), onGoNext: () => onSelectPly(ply + 1), onGoLast: () => onSelectPly(maxPly), onGoTo: onSelectPly, theme: theme, keyboardNav: false, showScrubber: false }), jsx("p", { style: sectionTitleStyle, children: "Move history" })] }), jsxs("div", { style: contentRowStyle, children: [jsx("ol", { style: moveListStyle, "aria-label": "Move history", children: historyRows.length === 0 ? (jsx("li", { style: emptyRowStyle, children: "No moves played yet." })) : (historyRows.map((row) => {
                             const isSelected = isHistoryRowSelected(row);
                             const isVariation = row.kind === 'variation';
                             const backgroundColor = isSelected
@@ -1492,4 +1850,374 @@ const AnalysisBoard = (_a) => {
             : () => null) })));
 };
 
-export { AnalysisBoard, AnalysisBoardCore, AnalysisBoardCoreView, AnalysisBoardLayout, AnalysisChessboardView, AnalysisErrorBoundary, AnalysisPosition, ChessboardThemeContext, DEFAULT_ANALYSIS_LAYOUT, DEFAULT_STOCKFISH_SCRIPT_URL, DefaultAnalysisContainer, DefaultAnalysisSidebar, DefaultPlyNavigation, EngineEvaluationPanel, HighlightChessboard, PlyNavigation, StockfishBrowserEngine, ThemeProvider, analysisBoardHighlightColors, analysisSidebarColors, applyUciMove, boardSquareHighlightColors, createSidebarRowBandCounters, defaultRenderPlyNavigation, emptyEngineEvaluation, formatEvaluation, formatPvPreview, getAnalysisModalStyles, getCheckSquareFromChess, getLastMoveSquareStyles, getSidebarRowBackground, getStylesForTheme, isAnalyzableFen, navButtonStyle, navRowStyle, normalizeEvalForWhite, normalizePvMoves, parseUciInfoLine, parseUciMove, plyLabelStyle, palette as plyNavigationPalette, resolveStockfishScriptUrl, resolveStockfishWasmUrl, resolveStockfishWorkerUrl, scrubberInputStyle, splitWorkerLines, uciPvToSan, useAnalysisBoardModel, useAnalysisEngine, useChessboardTheme, useTheme };
+/** Resolve a board drag into a legal UCI string, or null when illegal. */
+function uciFromDrop(fen, sourceSquare, targetSquare, piece) {
+    var _a, _b;
+    const chess = new Chess(fen);
+    const pieceType = (_a = piece[1]) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    const legal = chess
+        .moves({ square: sourceSquare, verbose: true })
+        .find((move) => move.to === targetSquare &&
+        (!move.promotion || move.promotion === pieceType));
+    if (!legal)
+        return null;
+    return `${legal.from}${legal.to}${(_b = legal.promotion) !== null && _b !== void 0 ? _b : ''}`;
+}
+function matchesExpectedUci(uci, expectedUci) {
+    return uci.toLowerCase() === expectedUci.toLowerCase();
+}
+
+/**
+ * Evaluate a training drop without mutating board position.
+ * Returns `false` for incorrect attempts so react-chessboard snaps the piece back.
+ */
+function evaluateExpectedMoveDrop(fen, sourceSquare, targetSquare, piece, expectedUci, enabled) {
+    if (!enabled || !expectedUci) {
+        return { kind: 'ignored' };
+    }
+    const uci = uciFromDrop(fen, sourceSquare, targetSquare, piece);
+    if (!uci) {
+        return { kind: 'illegal' };
+    }
+    if (matchesExpectedUci(uci, expectedUci)) {
+        return { kind: 'correct', uci };
+    }
+    return { kind: 'incorrect', uci };
+}
+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);
+                return true;
+            case 'incorrect':
+                onIncorrect(result.uci);
+                return false;
+            default:
+                return false;
+        }
+    };
+}
+
+/**
+ * Bump the revision counter to force a controlled chessboard re-render after a
+ * rejected drop. Pair with returning `false` from `onPieceDrop` so the board
+ * snaps back without changing the controlled `position` FEN.
+ */
+function useBoardRevision() {
+    const [revision, setRevision] = useState(0);
+    const bumpRevision = useCallback(() => {
+        setRevision((current) => current + 1);
+    }, []);
+    return { revision, bumpRevision };
+}
+
+/** 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;
+const refutationEngineOptions = {
+    depth: 14,
+    multiPv: 1,
+};
+function fenAfterUci(fen, uci) {
+    const chess = new Chess(fen);
+    if (!applyUciMove(chess, uci)) {
+        return null;
+    }
+    return chess.fen();
+}
+/** Centipawn score from side to move, comparable across sibling positions. */
+function lineEvalCpForGap(line) {
+    if (!line) {
+        return null;
+    }
+    if (line.mate !== null) {
+        return line.mate > 0 ? 10000 - line.mate : -1e4 + line.mate;
+    }
+    return line.centipawns;
+}
+/** How much better the opponent's eval is after the wrong move vs the correct one. */
+function refutationEvalGapCp(evalAfterWrong, evalAfterCorrect) {
+    const wrongCp = lineEvalCpForGap(evalAfterWrong.lines[0]);
+    const correctCp = lineEvalCpForGap(evalAfterCorrect.lines[0]);
+    if (wrongCp === null || correctCp === null) {
+        return null;
+    }
+    return wrongCp - correctCp;
+}
+function refutationFromEvaluation(fenAfterWrong, evaluation, evalGapCp, evalGapApplies, evalGapLoading) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const loading = evaluation.status === 'loading' ||
+        evaluation.status === 'analyzing' ||
+        evalGapLoading;
+    if (evaluation.status === 'error') {
+        return {
+            refutationUci: null,
+            refutationSan: null,
+            refutationLine: null,
+            loading: false,
+            error: (_a = evaluation.error) !== null && _a !== void 0 ? _a : 'Engine unavailable',
+        };
+    }
+    const meetsThreshold = !evalGapApplies ||
+        (evalGapCp !== null && evalGapCp >= REFUTATION_EVAL_GAP_CP);
+    if (!meetsThreshold) {
+        return {
+            refutationUci: null,
+            refutationSan: null,
+            refutationLine: null,
+            loading,
+            error: null,
+        };
+    }
+    const refutationUci = (_d = (_c = (_b = evaluation.lines[0]) === null || _b === void 0 ? void 0 : _b.pv) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : null;
+    const refutationSan = refutationUci
+        ? ((_e = uciPvToSan(fenAfterWrong, [refutationUci])[0]) !== null && _e !== void 0 ? _e : refutationUci)
+        : null;
+    const refutationLine = ((_g = (_f = evaluation.lines[0]) === null || _f === void 0 ? void 0 : _f.pv) === null || _g === void 0 ? void 0 : _g.length)
+        ? formatPvPreview(fenAfterWrong, evaluation.lines[0].pv, 4)
+        : null;
+    return {
+        refutationUci,
+        refutationSan,
+        refutationLine,
+        loading,
+        error: null,
+    };
+}
+
+const MISS_WRONG_PAUSE_MS = 450;
+const MISS_REFUTATION_PAUSE_MS = 900;
+const MISS_REFUTATION_MAX_WAIT_MS = 4000;
+const MISS_MOVE_ANIMATION_MS = 220;
+function moveArrow(uci, color) {
+    if (!uci || uci.length < 4) {
+        return [];
+    }
+    return [[uci.slice(0, 2), uci.slice(2, 4), color]];
+}
+function expectedMoveArrow(expectedUci, color) {
+    return moveArrow(expectedUci, color);
+}
+function getMissDisplay(sequence, expectedUci, refutationUci, answerArrowColor) {
+    var _a;
+    if (!sequence) {
+        return {
+            fen: null,
+            arrows: [],
+            animating: false,
+        };
+    }
+    const { setupFen, attemptedUci, phase } = sequence;
+    const fenAfterWrong = fenAfterUci(setupFen, attemptedUci);
+    switch (phase) {
+        case 'wrong':
+            return {
+                fen: fenAfterWrong !== null && fenAfterWrong !== void 0 ? fenAfterWrong : setupFen,
+                arrows: [],
+                animating: false,
+            };
+        case 'refutation': {
+            const fenAfterRefutation = fenAfterWrong && refutationUci
+                ? fenAfterUci(fenAfterWrong, refutationUci)
+                : null;
+            return {
+                fen: (_a = fenAfterRefutation !== null && fenAfterRefutation !== void 0 ? fenAfterRefutation : fenAfterWrong) !== null && _a !== void 0 ? _a : setupFen,
+                arrows: [],
+                animating: Boolean(fenAfterRefutation),
+            };
+        }
+        case 'retry':
+            return {
+                fen: setupFen,
+                arrows: [],
+                animating: false,
+            };
+        case 'answer':
+            return {
+                fen: setupFen,
+                arrows: expectedMoveArrow(expectedUci, answerArrowColor),
+                animating: false,
+            };
+        default:
+            return {
+                fen: setupFen,
+                arrows: [],
+                animating: false,
+            };
+    }
+}
+
+function useMissRefutation(setupFen, attemptedUci, expectedUci, enabled, engineOptions) {
+    const fenAfterWrong = useMemo(() => {
+        if (!setupFen || !attemptedUci) {
+            return null;
+        }
+        return fenAfterUci(setupFen, attemptedUci);
+    }, [setupFen, attemptedUci]);
+    const fenAfterCorrect = useMemo(() => {
+        if (!setupFen || !expectedUci) {
+            return null;
+        }
+        return fenAfterUci(setupFen, expectedUci);
+    }, [setupFen, expectedUci]);
+    const wrongEvaluation = useAnalysisEngine(fenAfterWrong !== null && fenAfterWrong !== void 0 ? fenAfterWrong : '', Object.assign(Object.assign({}, engineOptions), { enabled: enabled && Boolean(fenAfterWrong), shared: false }));
+    const correctEvaluation = useAnalysisEngine(fenAfterCorrect !== null && fenAfterCorrect !== void 0 ? fenAfterCorrect : '', Object.assign(Object.assign({}, engineOptions), { enabled: enabled && Boolean(fenAfterCorrect), shared: false }));
+    return useMemo(() => {
+        if (!fenAfterWrong) {
+            return {
+                fenAfterWrong: null,
+                refutationUci: null,
+                refutationSan: null,
+                refutationLine: null,
+                loading: false,
+                error: null,
+            };
+        }
+        const evalGapApplies = Boolean(fenAfterCorrect);
+        const evalGapCp = evalGapApplies
+            ? refutationEvalGapCp(wrongEvaluation, correctEvaluation)
+            : null;
+        const evalGapLoading = evalGapApplies &&
+            evalGapCp === null &&
+            wrongEvaluation.status !== 'error' &&
+            correctEvaluation.status !== 'error' &&
+            (correctEvaluation.status === 'loading' ||
+                correctEvaluation.status === 'analyzing' ||
+                wrongEvaluation.status === 'loading' ||
+                wrongEvaluation.status === 'analyzing');
+        return Object.assign({ fenAfterWrong }, refutationFromEvaluation(fenAfterWrong, wrongEvaluation, evalGapCp, evalGapApplies, evalGapLoading));
+    }, [fenAfterCorrect, fenAfterWrong, correctEvaluation, wrongEvaluation]);
+}
+
+function useMissSequence(feedback, expectedUci, engineOptions, answerArrowColor, autoShowWrongMoves) {
+    var _a, _b;
+    const [sequence, setSequence] = useState(null);
+    const refutation = useMissRefutation((_a = sequence === null || sequence === void 0 ? void 0 : sequence.setupFen) !== null && _a !== void 0 ? _a : null, (_b = sequence === null || sequence === void 0 ? void 0 : sequence.attemptedUci) !== null && _b !== void 0 ? _b : null, expectedUci, sequence != null, engineOptions);
+    const startSequence = useCallback((setupFen, attemptedUci) => {
+        setSequence({
+            setupFen,
+            attemptedUci,
+            phase: autoShowWrongMoves ? 'wrong' : 'retry',
+        });
+    }, [autoShowWrongMoves]);
+    const clearSequence = useCallback(() => {
+        setSequence(null);
+    }, []);
+    const prevFeedbackRef = useRef(feedback);
+    useEffect(() => {
+        const prevFeedback = prevFeedbackRef.current;
+        prevFeedbackRef.current = feedback;
+        if (prevFeedback === 'incorrect' && feedback !== 'incorrect') {
+            setSequence(null);
+        }
+    }, [feedback]);
+    useEffect(() => {
+        if (!sequence || sequence.phase !== 'wrong' || !autoShowWrongMoves) {
+            return undefined;
+        }
+        if (refutation.loading) {
+            const maxWait = window.setTimeout(() => {
+                setSequence((current) => (current === null || current === void 0 ? void 0 : current.phase) === 'wrong' ? Object.assign(Object.assign({}, current), { phase: 'answer' }) : current);
+            }, MISS_REFUTATION_MAX_WAIT_MS);
+            return () => window.clearTimeout(maxWait);
+        }
+        const delay = window.setTimeout(() => {
+            setSequence((current) => {
+                if (!current || current.phase !== 'wrong') {
+                    return current;
+                }
+                return Object.assign(Object.assign({}, current), { phase: refutation.refutationUci ? 'refutation' : 'answer' });
+            });
+        }, MISS_WRONG_PAUSE_MS);
+        return () => window.clearTimeout(delay);
+    }, [
+        autoShowWrongMoves,
+        refutation.loading,
+        refutation.refutationUci,
+        sequence,
+    ]);
+    useEffect(() => {
+        if (!sequence || sequence.phase !== 'refutation') {
+            return undefined;
+        }
+        const delay = window.setTimeout(() => {
+            setSequence((current) => (current === null || current === void 0 ? void 0 : current.phase) === 'refutation'
+                ? Object.assign(Object.assign({}, current), { phase: 'answer' }) : current);
+        }, MISS_REFUTATION_PAUSE_MS);
+        return () => window.clearTimeout(delay);
+    }, [sequence]);
+    const display = useMemo(() => getMissDisplay(sequence, expectedUci, refutation.refutationUci, answerArrowColor), [
+        answerArrowColor,
+        expectedUci,
+        refutation.refutationUci,
+        sequence,
+    ]);
+    return {
+        sequence,
+        refutation,
+        display,
+        startSequence,
+        clearSequence,
+    };
+}
+
+function useMissBoard({ feedback, expectedUci, positionFen, answerArrowColor, autoShowWrongMoves = true, engineOptions, }) {
+    var _a;
+    const refutationEngine = useMemo(() => (Object.assign(Object.assign({}, refutationEngineOptions), engineOptions)), [engineOptions]);
+    const missSequence = useMissSequence(feedback, expectedUci, refutationEngine, answerArrowColor, autoShowWrongMoves);
+    const customArrows = useMemo(() => {
+        if (feedback !== 'incorrect') {
+            return [];
+        }
+        if (missSequence.sequence) {
+            return missSequence.display.arrows;
+        }
+        if (expectedUci) {
+            return [
+                [
+                    expectedUci.slice(0, 2),
+                    expectedUci.slice(2, 4),
+                    answerArrowColor,
+                ],
+            ];
+        }
+        return [];
+    }, [
+        answerArrowColor,
+        expectedUci,
+        feedback,
+        missSequence.display.arrows,
+        missSequence.sequence,
+    ]);
+    const boardPosition = (_a = missSequence.display.fen) !== null && _a !== void 0 ? _a : positionFen;
+    const wrapDropHandler = useCallback((onDrop, { enabled, dropFen = boardPosition, expectedMoveUci = expectedUci, }) => (source, target, piece) => {
+        if (enabled && expectedMoveUci) {
+            const uci = uciFromDrop(dropFen, source, target, piece);
+            if (uci && uci.toLowerCase() !== expectedMoveUci.toLowerCase()) {
+                missSequence.startSequence(dropFen, uci);
+            }
+            else if (uci &&
+                uci.toLowerCase() === expectedMoveUci.toLowerCase()) {
+                missSequence.clearSequence();
+            }
+        }
+        return onDrop(source, target, piece);
+    }, [
+        boardPosition,
+        expectedUci,
+        missSequence.clearSequence,
+        missSequence.startSequence,
+    ]);
+    return {
+        missSequence,
+        refutation: missSequence.refutation,
+        customArrows,
+        boardPosition,
+        boardAnimating: missSequence.display.animating,
+        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 };