react-chess-core 0.1.0

package/dist/index.esm.js

@@ -0,0 +1,1495 @@
+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 { Chess } from 'chess.js';
+import { createPortal } from 'react-dom';
+
+const ChessboardThemeContext = createContext(undefined);
+const useChessboardTheme = () => {
+    const context = useContext(ChessboardThemeContext);
+    if (!context) {
+        throw new Error('useChessboardTheme must be used within a ThemeProvider');
+    }
+    return context;
+};
+/** @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);
+    return (jsx(ChessboardThemeContext.Provider, { value: { customDarkSquareStyle, customLightSquareStyle }, children: children }));
+};
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+/**
+ * Square overlay colors for puzzle boards (check, hint, incorrect).
+ */
+const boardSquareHighlightColors = {
+    check: 'rgba(255, 127, 127, 0.8)',
+    hint: 'rgba(119, 177, 212, 0.75)',
+    /** Muted red — softer than the in-check highlight. */
+    incorrect: 'rgba(140, 38, 38, 0.82)',
+};
+
+const getCheckHighlighting = (checkSquare) => {
+    const styles = {};
+    styles[checkSquare] = { backgroundColor: boardSquareHighlightColors.check };
+    return styles;
+};
+const getFeedbackHighlighting = (hintSquare, incorrectMoveSquare) => {
+    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, customSquareStyles: extraSquareStyles } = _a, props = __rest(_a, ["checkSquare", "hintSquare", "incorrectMoveSquare", "customSquareStyles"]);
+    const { customDarkSquareStyle, customLightSquareStyle } = useChessboardTheme();
+    const checkStyles = getCheckHighlighting(checkSquare);
+    const feedbackStyles = getFeedbackHighlighting(hintSquare, incorrectMoveSquare);
+    const customSquareStyles = Object.assign(Object.assign(Object.assign({}, checkStyles), feedbackStyles), extraSquareStyles);
+    return (jsx(Chessboard, Object.assign({ customDarkSquareStyle: customDarkSquareStyle, customLightSquareStyle: customLightSquareStyle, customSquareStyles: customSquareStyles }, props)));
+};
+
+const emptyEngineEvaluation = () => ({
+    status: 'idle',
+    depth: 0,
+    lines: [],
+});
+const DEFAULT_STOCKFISH_SCRIPT_URL = '/stockfish/stockfish-18-lite-single.js';
+
+/** Resolve a public asset path against the current page (honors CRA `PUBLIC_URL`). */
+const resolveStockfishScriptUrl = (scriptUrl, baseHref = typeof window !== 'undefined' ? window.location.href : '') => new URL(scriptUrl, baseHref).href;
+const resolveStockfishWasmUrl = (scriptUrl, baseHref) => resolveStockfishScriptUrl(scriptUrl, baseHref).replace(/\.js(\?.*)?$/i, '.wasm$1');
+/**
+ * Worker URL for stockfish.js (see examples/loadEngine.js in the stockfish package).
+ * Stockfish derives the sibling `.wasm` URL from the worker script pathname.
+ */
+const resolveStockfishWorkerUrl = (scriptUrl, baseHref) => resolveStockfishScriptUrl(scriptUrl, baseHref);
+
+/** Parse a UCI token (e2e4, e7e8q) into a chess.js move object. */
+const parseUciMove = (uci) => {
+    const token = uci.trim().toLowerCase();
+    if (token.length < 4) {
+        return null;
+    }
+    const from = token.slice(0, 2);
+    const to = token.slice(2, 4);
+    const promotion = token.length > 4 ? token[4] : undefined;
+    return promotion ? { from, to, promotion } : { from, to };
+};
+/** Coerce engine PV data to UCI move tokens (handles array or space-separated string). */
+const normalizePvMoves = (pv) => {
+    if (Array.isArray(pv)) {
+        return pv.filter((move) => typeof move === 'string' && move.length > 0);
+    }
+    if (typeof pv === 'string' && pv.trim().length > 0) {
+        return pv.trim().split(/\s+/);
+    }
+    return [];
+};
+/** Apply UCI moves from a FEN and return SAN for each legal move in order. */
+const uciPvToSan = (fen, pv) => {
+    const moves = normalizePvMoves(pv);
+    const chess = new Chess(fen);
+    const sans = [];
+    for (const uci of moves) {
+        const uciMove = parseUciMove(uci);
+        if (!uciMove) {
+            break;
+        }
+        try {
+            const move = chess.move(uciMove);
+            sans.push(move.san);
+        }
+        catch (_a) {
+            break;
+        }
+    }
+    return sans;
+};
+/** Normalize UCI eval (side to move) to White's perspective. */
+const normalizeEvalForWhite = (fen, centipawns, mate) => {
+    const turn = fen.split(' ')[1];
+    if (turn === 'w') {
+        return { centipawns, mate };
+    }
+    if (centipawns !== null) {
+        return { centipawns: -centipawns, mate: null };
+    }
+    if (mate !== null) {
+        return { centipawns: null, mate: -mate };
+    }
+    return { centipawns: null, mate: null };
+};
+const formatEvaluation = (centipawns, mate) => {
+    if (mate !== null) {
+        return mate > 0 ? `#+${mate}` : `#${mate}`;
+    }
+    if (centipawns === null) {
+        return '—';
+    }
+    const pawns = centipawns / 100;
+    const sign = pawns > 0 ? '+' : '';
+    return `${sign}${pawns.toFixed(2)}`;
+};
+/** Principal variation as space-separated SAN (from the given FEN). */
+const formatPvPreview = (fen, pv, maxMoves = 6) => {
+    const moves = normalizePvMoves(pv);
+    if (moves.length === 0) {
+        return '';
+    }
+    const limit = typeof maxMoves === 'number' && Number.isFinite(maxMoves) ? maxMoves : 6;
+    return uciPvToSan(fen, moves.slice(0, limit)).join(' ');
+};
+
+const parseUciInfoLine = (line) => {
+    if (!line.startsWith('info ')) {
+        return null;
+    }
+    const tokens = line.split(' ');
+    let depth = 0;
+    let multipv = 1;
+    let centipawns = null;
+    let mate = null;
+    let pv = [];
+    for (let i = 0; i < tokens.length; i++) {
+        const token = tokens[i];
+        if (token === 'depth') {
+            depth = Number.parseInt(tokens[++i], 10);
+        }
+        else if (token === 'multipv') {
+            multipv = Number.parseInt(tokens[++i], 10);
+        }
+        else if (token === 'score') {
+            if (tokens[i + 1] === 'cp') {
+                centipawns = Number.parseInt(tokens[i + 2], 10);
+            }
+            else if (tokens[i + 1] === 'mate') {
+                mate = Number.parseInt(tokens[i + 2], 10);
+            }
+        }
+        else if (token === 'pv') {
+            pv = tokens.slice(i + 1);
+            break;
+        }
+    }
+    if (depth === 0 && centipawns === null && mate === null && pv.length === 0) {
+        return null;
+    }
+    return {
+        multipv,
+        depth,
+        centipawns,
+        mate,
+        pv,
+    };
+};
+
+/** Stockfish can trap on finished positions; skip analysis when the game is over. */
+const isAnalyzableFen = (fen) => {
+    if (!fen.trim()) {
+        return false;
+    }
+    try {
+        const chess = new Chess(fen);
+        return !chess.isGameOver();
+    }
+    catch (_a) {
+        return false;
+    }
+};
+
+const INIT_TIMEOUT_MS = 45000;
+const splitWorkerLines = (data) => String(data)
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .filter(Boolean);
+const firstToken = (line) => { var _a; return (_a = line.split(/\s+/)[0]) !== null && _a !== void 0 ? _a : ''; };
+class StockfishBrowserEngine {
+    constructor(scriptUrl) {
+        this.scriptUrl = scriptUrl;
+        this.worker = null;
+        this.ready = false;
+        this.disposed = false;
+        this.lifecycleGeneration = 0;
+        this.evaluation = emptyEngineEvaluation();
+        this.lineMap = new Map();
+        this.listeners = new Set();
+        this.analysisFen = '';
+        this.analysisGeneration = 0;
+        this.pendingSearch = null;
+        this.dispatchedSearchGeneration = 0;
+        this.searching = false;
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        listener(this.evaluation);
+        return () => this.listeners.delete(listener);
+    }
+    getEvaluation() {
+        return this.evaluation;
+    }
+    assertWasmReachable() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
+            if (typeof window === 'undefined') {
+                return;
+            }
+            const wasmUrl = resolveStockfishWasmUrl(this.scriptUrl);
+            let response;
+            try {
+                response = yield fetch(wasmUrl, { method: 'HEAD' });
+                if (response.status === 405 || response.status === 501) {
+                    response = yield fetch(wasmUrl, { method: 'GET', headers: { Range: 'bytes=0-0' } });
+                }
+            }
+            catch (_c) {
+                throw new Error(`Could not fetch Stockfish WASM at ${wasmUrl}. Run copy:stockfish and restart the dev server.`);
+            }
+            if (!response.ok) {
+                throw new Error(`Stockfish WASM missing at ${wasmUrl} (HTTP ${response.status}). Run: npm run copy:stockfish`);
+            }
+            const contentType = (_b = (_a = response.headers.get('content-type')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : '';
+            if (contentType.includes('text/html')) {
+                throw new Error(`Stockfish WASM at ${wasmUrl} returned HTML (dev-server fallback). Run: npm run copy:stockfish and restart the dev server.`);
+            }
+        });
+    }
+    init() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            if (typeof Worker === 'undefined') {
+                throw new Error('Web Workers are not available in this environment');
+            }
+            const generation = ++this.lifecycleGeneration;
+            this.disposed = false;
+            this.setEvaluation(Object.assign(Object.assign({}, emptyEngineEvaluation()), { status: 'loading' }));
+            yield this.assertWasmReachable();
+            if (this.disposed || generation !== this.lifecycleGeneration) {
+                return;
+            }
+            const workerUrl = resolveStockfishWorkerUrl(this.scriptUrl);
+            let worker;
+            try {
+                worker = new Worker(workerUrl, { type: 'classic' });
+            }
+            catch (error) {
+                const message = error instanceof Error ? error.message : 'Failed to create Stockfish worker';
+                throw new Error(`${message}. Browser extensions (e.g. MetaMask) can block Web Workers on some pages.`);
+            }
+            this.worker = worker;
+            this.worker.onerror = (event) => {
+                var _a;
+                const detail = ((_a = event.message) === null || _a === void 0 ? void 0 : _a.trim()) ||
+                    'Worker crashed while loading or analyzing (see browser console).';
+                this.handleWorkerFailure(`Stockfish worker failed (${this.scriptUrl}): ${detail} If WASM is missing, run copy:stockfish.`);
+            };
+            this.worker.onmessageerror = () => {
+                this.handleWorkerFailure(`Stockfish worker message error (${this.scriptUrl}).`);
+            };
+            try {
+                yield this.handshake(workerUrl, generation);
+                if (this.disposed || generation !== this.lifecycleGeneration || !this.worker) {
+                    return;
+                }
+                this.worker.onmessage = (event) => {
+                    for (const line of splitWorkerLines(event.data)) {
+                        this.handleLine(line);
+                    }
+                };
+                this.ready = true;
+                this.setEvaluation(Object.assign(Object.assign({}, emptyEngineEvaluation()), { status: 'idle' }));
+            }
+            catch (error) {
+                (_a = this.worker) === null || _a === void 0 ? void 0 : _a.terminate();
+                this.worker = null;
+                if (!this.disposed && generation === this.lifecycleGeneration) {
+                    throw error;
+                }
+            }
+        });
+    }
+    handleWorkerFailure(message) {
+        var _a;
+        if (this.disposed) {
+            return;
+        }
+        this.ready = false;
+        this.setEvaluation(Object.assign(Object.assign({}, emptyEngineEvaluation()), { status: 'error', error: message }));
+        (_a = this.worker) === null || _a === void 0 ? void 0 : _a.terminate();
+        this.worker = null;
+    }
+    handshake(workerUrl, generation) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.worker) {
+                throw new Error('Stockfish worker was not created');
+            }
+            yield this.waitForLine(this.worker, workerUrl, generation, (line) => firstToken(line) === 'uciok', () => {
+                var _a;
+                (_a = this.worker) === null || _a === void 0 ? void 0 : _a.postMessage('uci');
+            });
+            if (this.disposed || generation !== this.lifecycleGeneration || !this.worker) {
+                return;
+            }
+            this.worker.postMessage('setoption name UCI_AnalyseMode value true');
+            yield this.waitForLine(this.worker, workerUrl, generation, (line) => firstToken(line) === 'readyok', () => {
+                var _a;
+                (_a = this.worker) === null || _a === void 0 ? void 0 : _a.postMessage('isready');
+            });
+        });
+    }
+    waitForLine(worker, workerUrl, generation, match, sendCommand, timeoutMs = INIT_TIMEOUT_MS) {
+        return new Promise((resolve, reject) => {
+            const cleanup = () => {
+                clearTimeout(timeoutId);
+                worker.removeEventListener('message', onMessage);
+                worker.removeEventListener('error', onError);
+                worker.removeEventListener('messageerror', onMessageError);
+            };
+            const timeoutId = setTimeout(() => {
+                cleanup();
+                reject(new Error(`Stockfish engine timed out (${workerUrl}). Run copy:stockfish, confirm public/stockfish/*.wasm is served, and check the browser console.`));
+            }, timeoutMs);
+            const onError = () => {
+                cleanup();
+                reject(new Error(`Stockfish worker failed while loading ${this.scriptUrl}. Check the browser console and WASM MIME type.`));
+            };
+            const onMessageError = () => {
+                cleanup();
+                reject(new Error(`Stockfish worker message error while loading ${this.scriptUrl}.`));
+            };
+            const onMessage = (event) => {
+                if (this.disposed || generation !== this.lifecycleGeneration) {
+                    cleanup();
+                    resolve();
+                    return;
+                }
+                for (const line of splitWorkerLines(event.data)) {
+                    if (match(line)) {
+                        cleanup();
+                        resolve();
+                        return;
+                    }
+                }
+            };
+            worker.addEventListener('message', onMessage);
+            worker.addEventListener('error', onError);
+            worker.addEventListener('messageerror', onMessageError);
+            sendCommand();
+        });
+    }
+    analyze(fen, depth, multiPv) {
+        if (!this.worker || !this.ready || this.disposed) {
+            return;
+        }
+        const generation = ++this.analysisGeneration;
+        if (!isAnalyzableFen(fen)) {
+            this.pendingSearch = null;
+            this.searching = false;
+            this.dispatchedSearchGeneration = generation;
+            this.analysisFen = fen;
+            this.lineMap.clear();
+            this.setEvaluation({
+                status: 'idle',
+                depth: 0,
+                lines: [],
+                fen,
+            }, generation);
+            this.worker.postMessage('stop');
+            return;
+        }
+        this.pendingSearch = { fen, depth, multiPv, generation };
+        this.analysisFen = fen;
+        this.lineMap.clear();
+        this.setEvaluation({
+            status: 'analyzing',
+            depth: 0,
+            lines: [],
+        }, generation);
+        if (!this.searching) {
+            this.dispatchPendingSearch();
+            return;
+        }
+        this.worker.postMessage('stop');
+    }
+    dispatchPendingSearch() {
+        const pending = this.pendingSearch;
+        if (!pending ||
+            !this.worker ||
+            !this.ready ||
+            this.disposed ||
+            pending.generation !== this.analysisGeneration ||
+            pending.generation === this.dispatchedSearchGeneration ||
+            !isAnalyzableFen(pending.fen)) {
+            return;
+        }
+        this.dispatchedSearchGeneration = pending.generation;
+        this.searching = true;
+        this.worker.postMessage(`setoption name MultiPV value ${pending.multiPv}`);
+        this.worker.postMessage(`position fen ${pending.fen}`);
+        this.worker.postMessage(`go depth ${pending.depth}`);
+    }
+    stop() {
+        if (!this.worker || !this.ready) {
+            return;
+        }
+        this.pendingSearch = null;
+        this.searching = false;
+        this.dispatchedSearchGeneration = this.analysisGeneration;
+        this.worker.postMessage('stop');
+        this.setEvaluation(Object.assign(Object.assign({}, this.evaluation), { status: 'idle' }));
+    }
+    dispose() {
+        this.disposed = true;
+        this.lifecycleGeneration += 1;
+        this.ready = false;
+        this.pendingSearch = null;
+        this.searching = false;
+        this.dispatchedSearchGeneration = 0;
+        this.stop();
+        if (this.worker) {
+            this.worker.onmessage = null;
+            this.worker.onerror = null;
+            this.worker.onmessageerror = null;
+            this.worker.terminate();
+            this.worker = null;
+        }
+        this.listeners.clear();
+    }
+    handleLine(line) {
+        const generation = this.analysisGeneration;
+        if (line.startsWith('info ')) {
+            const parsed = parseUciInfoLine(line);
+            if (!parsed) {
+                return;
+            }
+            this.lineMap.set(parsed.multipv, parsed);
+            const lines = [...this.lineMap.values()].sort((a, b) => a.multipv - b.multipv);
+            const maxDepth = lines.reduce((max, entry) => Math.max(max, entry.depth), 0);
+            this.setEvaluation({
+                status: 'analyzing',
+                depth: maxDepth,
+                lines,
+            }, generation);
+            return;
+        }
+        if (line.startsWith('bestmove')) {
+            this.searching = false;
+            if (this.pendingSearch &&
+                this.pendingSearch.generation === this.analysisGeneration &&
+                this.pendingSearch.generation !== this.dispatchedSearchGeneration) {
+                this.dispatchPendingSearch();
+                if (this.searching) {
+                    return;
+                }
+            }
+            this.setEvaluation(Object.assign(Object.assign({}, this.evaluation), { status: 'idle' }), generation);
+        }
+    }
+    setEvaluation(evaluation, generation = this.analysisGeneration) {
+        if (generation !== this.analysisGeneration) {
+            return;
+        }
+        const withFen = this.analysisFen.length > 0
+            ? Object.assign(Object.assign({}, evaluation), { fen: this.analysisFen }) : evaluation;
+        this.evaluation = withFen;
+        this.listeners.forEach((listener) => listener(withFen));
+    }
+}
+
+const useAnalysisEngine = (fen, options = {}) => {
+    const { enabled = true, depth = 16, multiPv = 2, scriptUrl = DEFAULT_STOCKFISH_SCRIPT_URL, } = options;
+    const [evaluation, setEvaluation] = useState(emptyEngineEvaluation());
+    const [engineReady, setEngineReady] = useState(false);
+    const engineRef = useRef(null);
+    const mountGenerationRef = useRef(0);
+    useEffect(() => {
+        if (!enabled || typeof Worker === 'undefined') {
+            setEvaluation(emptyEngineEvaluation());
+            setEngineReady(false);
+            return;
+        }
+        const mountGeneration = ++mountGenerationRef.current;
+        const engine = new StockfishBrowserEngine(scriptUrl);
+        engineRef.current = engine;
+        let cancelled = false;
+        const unsubscribe = engine.subscribe((next) => {
+            if (!cancelled && mountGeneration === mountGenerationRef.current) {
+                setEvaluation(next);
+            }
+        });
+        engine
+            .init()
+            .then(() => {
+            if (!cancelled &&
+                mountGeneration === mountGenerationRef.current) {
+                setEngineReady(true);
+            }
+        })
+            .catch((error) => {
+            if (cancelled || mountGeneration !== mountGenerationRef.current) {
+                return;
+            }
+            const message = error instanceof Error ? error.message : 'Failed to start engine';
+            setEvaluation(Object.assign(Object.assign({}, emptyEngineEvaluation()), { status: 'error', error: message }));
+        });
+        return () => {
+            cancelled = true;
+            setEngineReady(false);
+            unsubscribe();
+            engine.dispose();
+            if (engineRef.current === engine) {
+                engineRef.current = null;
+            }
+        };
+    }, [enabled, scriptUrl]);
+    useLayoutEffect(() => {
+        if (!enabled || !engineReady || !engineRef.current) {
+            return;
+        }
+        const engine = engineRef.current;
+        const timer = window.setTimeout(() => {
+            engine.analyze(fen, depth, multiPv);
+        }, 75);
+        return () => {
+            window.clearTimeout(timer);
+        };
+    }, [enabled, engineReady, fen, depth, multiPv]);
+    return useMemo(() => {
+        if (evaluation.fen !== fen) {
+            return Object.assign(Object.assign({}, emptyEngineEvaluation()), { status: evaluation.status === 'error'
+                    ? 'error'
+                    : evaluation.status === 'loading'
+                        ? 'loading'
+                        : 'analyzing', error: evaluation.error, fen });
+        }
+        return evaluation;
+    }, [evaluation, fen]);
+};
+
+/**
+ * Square overlay colors for analysis board replay (last move highlight).
+ */
+const analysisBoardHighlightColors = {
+    lastMove: {
+        light: 'rgba(253, 216, 53, 0.55)',
+        dark: 'rgba(144, 202, 249, 0.5)',
+    },
+};
+const getLastMoveSquareStyles = (from, to, theme) => {
+    const backgroundColor = analysisBoardHighlightColors.lastMove[theme];
+    return {
+        [from]: { backgroundColor },
+        [to]: { backgroundColor },
+    };
+};
+
+/** Apply a UCI move (e.g. `e7e8q`) without throwing. */
+function applyUciMove(chess, uci) {
+    if (!uci || uci.length < 4) {
+        return false;
+    }
+    const from = uci.slice(0, 2);
+    const to = uci.slice(2, 4);
+    const promotion = uci.length > 4 ? uci[4] : undefined;
+    try {
+        return chess.move({ from, to, promotion }) !== null;
+    }
+    catch (_a) {
+        try {
+            chess.move(uci);
+            return true;
+        }
+        catch (_b) {
+            return false;
+        }
+    }
+}
+function getCheckSquareFromChess(chess) {
+    if (!chess.inCheck()) {
+        return '';
+    }
+    const turn = chess.turn();
+    const board = chess.board();
+    for (let rowIndex = 0; rowIndex < 8; rowIndex++) {
+        for (let colIndex = 0; colIndex < 8; colIndex++) {
+            const piece = board[rowIndex][colIndex];
+            if ((piece === null || piece === void 0 ? void 0 : piece.type) === 'k' && piece.color === turn) {
+                return String.fromCharCode(97 + colIndex) + (8 - rowIndex);
+            }
+        }
+    }
+    return '';
+}
+
+class AnalysisErrorBoundary extends Component {
+    constructor() {
+        super(...arguments);
+        this.state = { error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    render() {
+        if (this.state.error) {
+            return (jsxs("div", { style: { padding: 16, maxWidth: 480 }, children: [jsx("p", { style: { margin: '0 0 8px', fontWeight: 600 }, children: "Analysis could not be opened." }), jsx("p", { style: { margin: 0, fontSize: 14, color: '#666' }, children: this.state.error.message ||
+                            'An unexpected error occurred. If you use a wallet browser extension, try disabling it for this site.' }), this.props.onClose ? (jsx("button", { type: "button", onClick: this.props.onClose, style: { marginTop: 12, cursor: 'pointer' }, children: "Close" })) : null] }));
+        }
+        return this.props.children;
+    }
+}
+
+/** Draggable analysis board (no surrounding layout chrome). */
+const AnalysisChessboardView = ({ model }) => {
+    var _a;
+    return (jsx(ChessboardDnDProvider, { children: jsx(HighlightChessboard, { checkSquare: (_a = model.checkSquare) !== null && _a !== void 0 ? _a : '', hintSquare: null, incorrectMoveSquare: null, position: model.fen, boardOrientation: model.boardOrientation, boardWidth: model.boardWidth, arePiecesDraggable: true, onPieceDrop: model.onPieceDrop, promotionDialogVariant: "modal", customSquareStyles: model.lastMove
+                ? getLastMoveSquareStyles(model.lastMove.from, model.lastMove.to, model.theme)
+                : {} }) }));
+};
+
+class AnalysisPosition {
+    constructor(context) {
+        this.variation = null;
+        this.variationCursor = 0;
+        this.initialFen = context.initialFen;
+        this.solutionMoves = context.solutionMoves;
+        this.solutionSans = AnalysisPosition.buildSolutionSans(context.initialFen, context.solutionMoves);
+        this.mainPly = context.currentPly;
+        this.chess = new Chess(this.initialFen);
+        this.rebuildChess();
+    }
+    static buildSolutionSans(initialFen, solutionMoves) {
+        const chess = new Chess(initialFen);
+        return solutionMoves.map((uci, index) => {
+            let san = uci;
+            const before = chess.fen();
+            if (applyUciMove(chess, uci)) {
+                const move = chess.history({ verbose: true }).at(-1);
+                if (move === null || move === void 0 ? void 0 : move.san) {
+                    san = move.san;
+                }
+            }
+            else {
+                chess.load(before);
+            }
+            return {
+                ply: index + 1,
+                uci,
+                san,
+            };
+        });
+    }
+    static applySolutionMove(chess, uci) {
+        return applyUciMove(chess, uci);
+    }
+    fenAtMainPly(ply) {
+        const chess = new Chess(this.initialFen);
+        for (let i = 0; i < ply; i++) {
+            if (!AnalysisPosition.applySolutionMove(chess, this.solutionMoves[i])) {
+                break;
+            }
+        }
+        return chess.fen();
+    }
+    rebuildChess() {
+        this.chess.load(this.initialFen);
+        for (let i = 0; i < this.mainPly; i++) {
+            if (!AnalysisPosition.applySolutionMove(this.chess, this.solutionMoves[i])) {
+                break;
+            }
+        }
+        if (this.variation && this.variationCursor > 0) {
+            for (let i = 0; i < this.variationCursor; i++) {
+                this.chess.move(this.variation.moves[i]);
+            }
+        }
+    }
+    findLegalMove(sourceSquare, targetSquare, piece) {
+        var _a;
+        const pieceType = (_a = piece[1]) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        return this.chess
+            .moves({ square: sourceSquare, verbose: true })
+            .find((move) => move.to === targetSquare &&
+            (!move.promotion || move.promotion === pieceType));
+    }
+    uciFromVerboseMove(move) {
+        var _a;
+        return `${move.from}${move.to}${(_a = move.promotion) !== null && _a !== void 0 ? _a : ''}`;
+    }
+    matchesMainMove(mainIndex, uci) {
+        const expected = this.solutionMoves[mainIndex];
+        if (expected === uci) {
+            return true;
+        }
+        if (expected.length === 5 && uci.length === 4) {
+            return expected.slice(0, 4) === uci;
+        }
+        return false;
+    }
+    getNavPly() {
+        if (this.variation && this.variationCursor > 0) {
+            return this.variation.branchPly + this.variationCursor;
+        }
+        return this.mainPly;
+    }
+    getMaxNavPly() {
+        if (this.variation && this.variation.moves.length > 0) {
+            return this.variation.branchPly + this.variation.moves.length;
+        }
+        return this.solutionMoves.length;
+    }
+    /** @deprecated Use getNavPly */
+    getPly() {
+        return this.getNavPly();
+    }
+    /** @deprecated Use getMaxNavPly */
+    getMaxPly() {
+        return this.getMaxNavPly();
+    }
+    getSolutionSans() {
+        return this.solutionSans;
+    }
+    getHistoryRows() {
+        var _a, _b;
+        const rows = [
+            {
+                key: 'start',
+                label: 'Start',
+                indent: 0,
+                kind: 'start',
+                mainPly: 0,
+                variationIndex: 0,
+            },
+        ];
+        if (((_a = this.variation) === null || _a === void 0 ? void 0 : _a.branchPly) === 0) {
+            this.variation.sans.forEach((san, index) => {
+                const variationIndex = index + 1;
+                rows.push({
+                    key: `var-0-${variationIndex}`,
+                    label: `${variationIndex}. ${san}`,
+                    indent: 1,
+                    kind: 'variation',
+                    mainPly: 0,
+                    variationIndex,
+                });
+            });
+        }
+        for (const move of this.solutionSans) {
+            rows.push({
+                key: `main-${move.ply}`,
+                label: `${move.ply}. ${move.san}`,
+                indent: 0,
+                kind: 'main',
+                mainPly: move.ply,
+                variationIndex: 0,
+            });
+            if (((_b = this.variation) === null || _b === void 0 ? void 0 : _b.branchPly) === move.ply) {
+                this.variation.sans.forEach((san, index) => {
+                    const variationIndex = index + 1;
+                    rows.push({
+                        key: `var-${move.ply}-${variationIndex}`,
+                        label: `${move.ply + variationIndex}. ${san}`,
+                        indent: 1,
+                        kind: 'variation',
+                        mainPly: move.ply,
+                        variationIndex,
+                    });
+                });
+            }
+        }
+        return rows;
+    }
+    isHistoryRowSelected(row) {
+        var _a;
+        if (row.kind === 'start') {
+            return this.getNavPly() === 0;
+        }
+        if (row.kind === 'main') {
+            return ((!this.variation || this.variationCursor === 0) &&
+                this.mainPly === row.mainPly);
+        }
+        return (((_a = this.variation) === null || _a === void 0 ? void 0 : _a.branchPly) === row.mainPly &&
+            this.variationCursor === row.variationIndex);
+    }
+    selectHistoryRow(row) {
+        if (row.kind === 'start' || row.kind === 'main') {
+            this.selectMainLine(row.mainPly);
+            return;
+        }
+        if (!this.variation || this.variation.branchPly !== row.mainPly) {
+            return;
+        }
+        this.mainPly = row.mainPly;
+        this.variationCursor = row.variationIndex;
+        this.rebuildChess();
+    }
+    selectMainLine(ply) {
+        this.mainPly = Math.max(0, Math.min(ply, this.solutionMoves.length));
+        this.variation = null;
+        this.variationCursor = 0;
+        this.rebuildChess();
+    }
+    /** @deprecated Use selectMainLine or goToNavPly */
+    goToPly(ply) {
+        this.goToNavPly(ply);
+    }
+    goToNavPly(navPly) {
+        const clamped = Math.max(0, Math.min(navPly, this.getMaxNavPly()));
+        if (clamped === 0) {
+            this.selectMainLine(0);
+            return;
+        }
+        if (this.variation &&
+            clamped > this.variation.branchPly &&
+            clamped <= this.variation.branchPly + this.variation.moves.length) {
+            this.mainPly = this.variation.branchPly;
+            this.variationCursor = clamped - this.variation.branchPly;
+            this.rebuildChess();
+            return;
+        }
+        this.selectMainLine(clamped);
+    }
+    tryPlayMove(sourceSquare, targetSquare, piece) {
+        var _a, _b;
+        const legal = this.findLegalMove(sourceSquare, targetSquare, piece);
+        if (!legal) {
+            return false;
+        }
+        const uci = this.uciFromVerboseMove(legal);
+        if (!this.variation && this.mainPly < this.solutionMoves.length) {
+            if (this.matchesMainMove(this.mainPly, uci)) {
+                this.mainPly++;
+                this.rebuildChess();
+                return true;
+            }
+        }
+        const branchPly = (_b = (_a = this.variation) === null || _a === void 0 ? void 0 : _a.branchPly) !== null && _b !== void 0 ? _b : this.mainPly;
+        const fenAtBranch = this.fenAtMainPly(branchPly);
+        let nextMoves;
+        if (this.variation && this.variation.branchPly === branchPly) {
+            nextMoves = [
+                ...this.variation.moves.slice(0, this.variationCursor),
+                uci,
+            ];
+        }
+        else {
+            nextMoves = [uci];
+        }
+        this.variation = {
+            branchPly,
+            moves: nextMoves,
+            sans: uciPvToSan(fenAtBranch, nextMoves),
+        };
+        this.mainPly = branchPly;
+        this.variationCursor = nextMoves.length;
+        this.rebuildChess();
+        return true;
+    }
+    next() {
+        if (this.getNavPly() >= this.getMaxNavPly()) {
+            return false;
+        }
+        this.goToNavPly(this.getNavPly() + 1);
+        return true;
+    }
+    prev() {
+        if (this.getNavPly() <= 0) {
+            return false;
+        }
+        this.goToNavPly(this.getNavPly() - 1);
+        return true;
+    }
+    getLastMoveSquares() {
+        const navPly = this.getNavPly();
+        if (navPly === 0) {
+            return null;
+        }
+        let uci;
+        if (this.variation && this.variationCursor > 0) {
+            uci = this.variation.moves[this.variationCursor - 1];
+        }
+        else {
+            uci = this.solutionMoves[this.mainPly - 1];
+        }
+        return {
+            from: uci.slice(0, 2),
+            to: uci.slice(2, 4),
+        };
+    }
+    fen() {
+        return this.chess.fen();
+    }
+    getCheckSquare() {
+        return getCheckSquareFromChess(this.chess);
+    }
+}
+
+const useAnalysisBoardModel = ({ analysisContext, onClose, theme, boardWidth, engine, }) => {
+    var _a, _b, _c, _d;
+    const skipBackdropCloseRef = useRef(true);
+    const analysisPosition = useMemo(() => new AnalysisPosition(analysisContext), [analysisContext]);
+    const [navRevision, setNavRevision] = useState(0);
+    const bumpNav = () => setNavRevision((value) => value + 1);
+    useEffect(() => {
+        analysisPosition.goToNavPly(analysisContext.currentPly);
+        bumpNav();
+        skipBackdropCloseRef.current = true;
+        const frameId = requestAnimationFrame(() => {
+            skipBackdropCloseRef.current = false;
+        });
+        return () => cancelAnimationFrame(frameId);
+    }, [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,
+    });
+    return {
+        theme,
+        boardWidth,
+        analysisContext,
+        fen,
+        ply: analysisPosition.getNavPly(),
+        maxPly: analysisPosition.getMaxNavPly(),
+        historyRows: analysisPosition.getHistoryRows(),
+        solutionSans: analysisPosition.getSolutionSans(),
+        boardOrientation: analysisContext.boardOrientation,
+        engineEvaluation,
+        engineEnabled,
+        lastMove: analysisPosition.getLastMoveSquares(),
+        checkSquare: analysisPosition.getCheckSquare(),
+        onSelectPly: (ply) => {
+            analysisPosition.goToNavPly(ply);
+            bumpNav();
+        },
+        onSelectHistoryRow: (row) => {
+            analysisPosition.selectHistoryRow(row);
+            bumpNav();
+        },
+        isHistoryRowSelected: (row) => analysisPosition.isHistoryRowSelected(row),
+        onPieceDrop: (sourceSquare, targetSquare, piece) => {
+            if (!analysisPosition.tryPlayMove(sourceSquare, targetSquare, piece)) {
+                return false;
+            }
+            bumpNav();
+            return true;
+        },
+        onBackdropMouseDown: () => {
+            if (skipBackdropCloseRef.current) {
+                return;
+            }
+            onClose();
+        },
+        onClose,
+    };
+};
+
+/**
+ * Analysis logic + composition only: hook, board node, sidebar/engine slots.
+ * 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"]);
+    const model = useAnalysisBoardModel(modelArgs);
+    return (jsx(AnalysisBoardCoreView, { model: model, 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 board = jsx(AnalysisChessboardView, { model: model });
+    const engineEvaluationPanel = model.engineEnabled
+        ? renderEngineEvaluation({
+            fen: model.fen,
+            evaluation: model.engineEvaluation,
+            theme: model.theme,
+        })
+        : null;
+    const sidebar = renderSidebar({
+        moves: model.solutionSans,
+        historyRows: model.historyRows,
+        isHistoryRowSelected: model.isHistoryRowSelected,
+        onSelectHistoryRow: model.onSelectHistoryRow,
+        ply: model.ply,
+        maxPly: model.maxPly,
+        onSelectPly: model.onSelectPly,
+        theme: model.theme,
+        engineEvaluationPanel,
+    });
+    const main = renderMain({ model, board, sidebar });
+    return renderContainer({
+        theme: model.theme,
+        onClose: model.onClose,
+        children: main,
+        onBackdropMouseDown: model.onBackdropMouseDown,
+    });
+};
+
+const getAnalysisModalStyles = (theme) => {
+    if (theme === 'dark') {
+        return {
+            panel: {
+                backgroundColor: '#1e1e1e',
+                color: '#e0e0e0',
+                border: '1px solid #424242',
+            },
+            title: { color: '#fff' },
+            closeButton: {
+                color: '#e0e0e0',
+                backgroundColor: '#2d2d2d',
+                border: '1px solid #555',
+            },
+        };
+    }
+    return {
+        panel: {
+            backgroundColor: '#fff',
+            color: '#1a1a1a',
+            border: '1px solid #e0e0e0',
+        },
+        title: { color: '#1a1a1a' },
+        closeButton: {
+            color: '#1a1a1a',
+            backgroundColor: '#f5f5f5',
+            border: '1px solid #ccc',
+        },
+    };
+};
+
+/**
+ * Move-list colors for the analysis board sidebar.
+ * Tweak values here when iterating on history row striping.
+ */
+const analysisSidebarColors = {
+    /** Selected move row */
+    activeMove: {
+        light: 'rgba(119, 177, 212, 1)', // #77b1d4
+        dark: 'rgba(90, 159, 190, 1)', // #5a9fbe
+    },
+    /** Start row */
+    start: {
+        light: '#e8e8e8',
+        dark: '#262626',
+    },
+    /** Alternating main-line rows (index 0 = darker, 1 = lighter). */
+    mainStripe: [
+        { light: '#c9c9c9', dark: '#1c1c1c' },
+        { light: '#f2f2f2', dark: '#383838' },
+    ],
+    /** Alternating user-variation rows (high-contrast striping like puzzle UI). */
+    variationStripe: [
+        { light: 'rgba(216, 216, 216, 1)', dark: 'rgba(200, 200, 200, 1)' },
+        { light: 'rgba(255, 255, 255, 1)', dark: 'rgba(255, 255, 255, 1)' },
+    ],
+    /** Text on variation rows (light backgrounds need dark type). */
+    variationText: {
+        light: 'rgba(0, 0, 0, 0.87)',
+        dark: 'rgba(0, 0, 0, 0.87)',
+    },
+};
+
+const createSidebarRowBandCounters = () => ({
+    main: 0,
+    variation: 0,
+});
+/** Background for one analysis history row; mutates `bands` while iterating rows in order. */
+const getSidebarRowBackground = (theme, row, bands) => {
+    if (row.kind === 'start') {
+        return analysisSidebarColors.start[theme];
+    }
+    if (row.kind === 'main') {
+        bands.variation = 0;
+        const stripe = bands.main % 2;
+        bands.main += 1;
+        return analysisSidebarColors.mainStripe[stripe][theme];
+    }
+    const stripe = bands.variation % 2;
+    bands.variation += 1;
+    return analysisSidebarColors.variationStripe[stripe][theme];
+};
+
+/** Library default grid; hosts should pass their own {@link AnalysisLayoutConfig}. */
+const DEFAULT_ANALYSIS_LAYOUT = {
+    boardWidth: 480,
+    sidebarWidth: 500,
+    columnGap: 16,
+};
+
+const EngineEvaluationPanel = ({ fen, evaluation, theme, }) => {
+    var _a;
+    const isDark = theme === 'dark';
+    const safePv = (pv, maxMoves) => {
+        try {
+            const label = formatPvPreview(fen, pv, maxMoves);
+            const title = formatPvPreview(fen, pv, Array.isArray(pv) ? pv.length : maxMoves !== null && maxMoves !== void 0 ? maxMoves : 6);
+            return { label, title };
+        }
+        catch (_a) {
+            return { label: '', title: '' };
+        }
+    };
+    if (evaluation.status === 'loading') {
+        return (jsx("p", { style: captionStyle(isDark), children: "Starting engine\u2026" }));
+    }
+    if (evaluation.status === 'error') {
+        return (jsx("p", { style: Object.assign(Object.assign({}, captionStyle(isDark)), { color: '#e57373' }), children: (_a = evaluation.error) !== null && _a !== void 0 ? _a : 'Engine unavailable' }));
+    }
+    if (evaluation.lines.length === 0) {
+        return (jsx("p", { style: captionStyle(isDark), children: evaluation.status === 'analyzing' ? 'Analyzing…' : 'No evaluation yet' }));
+    }
+    return (jsxs("div", { style: panelStyle$1, children: [jsxs("p", { style: headerStyle$1(isDark), children: ["Engine", evaluation.depth > 0 ? ` · depth ${evaluation.depth}` : ''] }), jsx("ul", { style: listStyle, children: evaluation.lines.map((line) => {
+                    const normalized = normalizeEvalForWhite(fen, line.centipawns, line.mate);
+                    const evalLabel = formatEvaluation(normalized.centipawns, normalized.mate);
+                    const { label: pvLabel, title: pvTitle } = safePv(line.pv, Array.isArray(line.pv) ? line.pv.length : 6);
+                    return (jsxs("li", { style: lineStyle(isDark), children: [jsx("span", { style: evalStyle(isDark), children: evalLabel }), pvLabel ? (jsx("span", { style: pvStyle(isDark), title: pvTitle || undefined, children: pvLabel })) : null] }, line.multipv));
+                }) })] }));
+};
+const panelStyle$1 = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 6,
+};
+const listStyle = {
+    listStyle: 'none',
+    margin: 0,
+    padding: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+};
+const lineStyle = (dark) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 2,
+    padding: '6px 8px',
+    borderRadius: 4,
+    backgroundColor: dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)',
+    fontSize: 12,
+});
+const evalStyle = (dark) => ({
+    fontWeight: 700,
+    fontFamily: 'monospace',
+    color: dark ? '#ce93d8' : '#6a1b9a',
+});
+const pvStyle = (dark) => ({
+    fontFamily: 'monospace',
+    fontSize: 11,
+    color: dark ? '#b0b0b0' : '#555',
+    wordBreak: 'break-word',
+});
+const headerStyle$1 = (dark) => ({
+    margin: 0,
+    fontSize: 12,
+    fontWeight: 600,
+    color: dark ? '#e0e0e0' : '#333',
+});
+const captionStyle = (dark) => ({
+    margin: 0,
+    fontSize: 12,
+    color: dark ? '#9e9e9e' : '#666',
+});
+
+/**
+ * Optional grid helper: board column + sidebar column.
+ * Hosts may use this in `renderMain` or supply their own layout.
+ */
+const AnalysisBoardLayout = ({ layout, model, board, sidebar, }) => {
+    const { boardWidth, sidebarWidth, columnGap } = layout;
+    const totalWidth = boardWidth + sidebarWidth + columnGap;
+    return (jsx(ThemeProvider, { theme: model.theme, children: jsxs("div", { style: {
+                display: 'grid',
+                gridTemplateColumns: `${boardWidth}px ${sidebarWidth}px`,
+                columnGap,
+                alignItems: 'start',
+                width: totalWidth,
+                maxWidth: '100%',
+                boxSizing: 'border-box',
+            }, children: [jsx("div", { style: {
+                        gridColumn: 1,
+                        gridRow: 1,
+                        minWidth: 0,
+                        width: boardWidth,
+                        maxWidth: boardWidth,
+                        overflow: 'hidden',
+                    }, children: jsx("div", { style: { width: boardWidth, maxWidth: '100%' }, children: board }) }), jsx("div", { style: {
+                        gridColumn: 2,
+                        gridRow: 1,
+                        minWidth: 0,
+                        width: sidebarWidth,
+                        maxWidth: sidebarWidth,
+                    }, children: sidebar })] }) }));
+};
+
+/** Default full-screen modal shell for analysis (library preset UI). */
+const DefaultAnalysisContainer = ({ theme, onClose, onBackdropMouseDown, children, }) => {
+    const modalTheme = getAnalysisModalStyles(theme);
+    const modal = (jsx("div", { style: overlayStyle, onMouseDown: onBackdropMouseDown, children: jsxs("div", { style: Object.assign(Object.assign({}, panelStyle), modalTheme.panel), onMouseDown: (event) => event.stopPropagation(), role: "dialog", "aria-modal": "true", "aria-label": "Analysis", "data-rcwc-theme": theme, children: [jsxs("div", { style: headerStyle, children: [jsx("h2", { style: Object.assign(Object.assign({}, titleStyle), modalTheme.title), children: "Analysis" }), jsx("button", { type: "button", onClick: onClose, style: Object.assign(Object.assign({}, closeButtonStyle), modalTheme.closeButton), children: "Close" })] }), children] }) }));
+    if (typeof document === 'undefined') {
+        return modal;
+    }
+    return createPortal(modal, document.body);
+};
+const overlayStyle = {
+    position: 'fixed',
+    inset: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 9999,
+};
+const panelStyle = {
+    borderRadius: 8,
+    padding: 16,
+    width: 'max-content',
+    maxWidth: '95vw',
+    maxHeight: '95vh',
+    overflow: 'auto',
+    boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
+};
+const headerStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 12,
+};
+const titleStyle = {
+    margin: 0,
+    fontSize: 20,
+};
+const closeButtonStyle = {
+    cursor: 'pointer',
+    borderRadius: 4,
+    padding: '4px 12px',
+    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 = {
+        cursor: 'pointer',
+        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) => {
+                            const isSelected = isHistoryRowSelected(row);
+                            const isVariation = row.kind === 'variation';
+                            const backgroundColor = isSelected
+                                ? analysisSidebarColors.activeMove[theme]
+                                : getSidebarRowBackground(theme, row, rowBands);
+                            return (jsx("li", { style: Object.assign(Object.assign({}, baseChipStyle), { backgroundColor, marginLeft: row.indent * 16 }), onClick: () => onSelectHistoryRow(row), children: jsx("span", { style: {
+                                        fontWeight: isSelected ? 600 : undefined,
+                                        fontStyle: isVariation ? 'italic' : 'normal',
+                                        fontFamily: isVariation
+                                            ? 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace'
+                                            : 'inherit',
+                                        fontSize: isVariation ? 13 : 14,
+                                        color: isSelected
+                                            ? '#fff'
+                                            : isVariation
+                                                ? analysisSidebarColors.variationText[theme]
+                                                : undefined,
+                                    }, children: row.label }) }, row.key));
+                        })) }), engineEvaluationPanel ? (jsx("div", { style: enginePanelStyle, children: engineEvaluationPanel })) : null] }), jsx("p", { style: footerStyle, children: "Drag pieces to explore lines. Select a main-line move to return to the game." })] }));
+};
+const contentRowStyle = {
+    display: 'flex',
+    flex: 1,
+    minHeight: 0,
+    gap: 12,
+    alignItems: 'stretch',
+    padding: '0 8px 8px',
+};
+const enginePanelStyle = {
+    flexShrink: 0,
+    width: 220,
+    minWidth: 220,
+    paddingLeft: 12,
+    borderLeft: '1px solid rgba(128, 128, 128, 0.35)',
+    overflowY: 'auto',
+    maxHeight: 400,
+};
+const sidebarStyle = {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: 0,
+    maxHeight: 480,
+    overflow: 'hidden',
+    border: '1px solid rgba(128, 128, 128, 0.35)',
+    borderRadius: 4,
+    boxSizing: 'border-box',
+};
+const navBlockStyle = {
+    flexShrink: 0,
+    padding: '12px 12px 8px',
+};
+const sectionTitleStyle = {
+    margin: '8px 0 0',
+    fontSize: 14,
+    fontWeight: 600,
+};
+const emptyRowStyle = {
+    listStyle: 'none',
+    padding: '4px 8px',
+    fontSize: 14,
+    color: '#666',
+};
+const footerStyle = {
+    flexShrink: 0,
+    margin: 0,
+    padding: '0 12px 12px',
+    fontSize: 12,
+    color: '#888',
+};
+const moveListStyle = {
+    listStyle: 'none',
+    margin: 0,
+    padding: 0,
+    flex: 1,
+    minWidth: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+    overflowY: 'auto',
+    maxHeight: 400,
+};
+
+const createDefaultRenderMain = (layout) => (props) => (jsx(AnalysisBoardLayout, { layout: layout, model: props.model, board: props.board, sidebar: props.sidebar }));
+/**
+ * Full analysis UI with library defaults: modal shell, grid layout, sidebar, engine panel.
+ * For host-owned UI only, use {@link AnalysisBoardCore} and pass all render props.
+ */
+const AnalysisBoard = (_a) => {
+    var _b;
+    var { layout = DEFAULT_ANALYSIS_LAYOUT, renderContainer, renderMain, renderSidebar, renderEngineEvaluation, engine } = _a, modelArgs = __rest(_a, ["layout", "renderContainer", "renderMain", "renderSidebar", "renderEngineEvaluation", "engine"]);
+    const engineEnabled = (_b = engine === null || engine === void 0 ? void 0 : engine.enabled) !== null && _b !== void 0 ? _b : true;
+    return (jsx(AnalysisBoardCore, Object.assign({}, modelArgs, { boardWidth: layout.boardWidth, engine: engine, renderContainer: renderContainer !== null && renderContainer !== void 0 ? renderContainer : DefaultAnalysisContainer, renderMain: renderMain !== null && renderMain !== void 0 ? renderMain : createDefaultRenderMain(layout), renderSidebar: renderSidebar !== null && renderSidebar !== void 0 ? renderSidebar : DefaultAnalysisSidebar, renderEngineEvaluation: renderEngineEvaluation !== null && renderEngineEvaluation !== void 0 ? renderEngineEvaluation : (engineEnabled
+            ? (props) => jsx(EngineEvaluationPanel, Object.assign({}, props))
+            : () => 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 };