react-chess-explorer 0.0.1

package/dist/index.js

@@ -0,0 +1,1133 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactChessCore = require('react-chess-core');
+var reactChessboard = require('react-chessboard');
+var chess_js = require('chess.js');
+var react = require('react');
+
+/** Standard start position — placeholder until game replay is implemented. */
+const EXPLORER_START_FEN = "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1";
+/** Delay between plies when animating a clicked variation line. */
+const VARIATION_LINE_STEP_MS = 500;
+
+/**
+ * Scaffold UI — proves core wiring and Rollup build.
+ * Replace with game replay once requirements are defined.
+ */
+const ExplorerPlaceholder = ({ theme = "dark", boardWidth = 400, }) => (jsxRuntime.jsx(reactChessCore.ThemeProvider, { theme: theme, children: jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [jsxRuntime.jsx(reactChessCore.HighlightChessboard, { boardWidth: boardWidth, position: EXPLORER_START_FEN, checkSquare: "", hintSquare: null, incorrectMoveSquare: null }), jsxRuntime.jsx("p", { style: {
+                    margin: 0,
+                    fontFamily: "system-ui, sans-serif",
+                    fontSize: 14,
+                    opacity: 0.8,
+                }, children: "react-chess-explorer (scaffold) \u2014 game replay UI not implemented yet." })] }) }));
+
+const DEFAULT_REFERENCE_LAYOUT = {
+    boardWidth: 560,
+    boardColumn: "minmax(420px, 1.45fr)",
+    referenceColumn: "minmax(380px, 1fr)",
+    columnGap: 0,
+    minHeight: "calc(100vh - 120px)",
+};
+
+const panelStyle = {
+    fontFamily: "system-ui, sans-serif",
+    fontSize: 13,
+};
+const tableStyle = {
+    width: "100%",
+    borderCollapse: "collapse",
+    fontSize: 12,
+};
+const thStyle = {
+    textAlign: "left",
+    padding: "4px 8px",
+    borderBottom: "1px solid rgba(128,128,128,0.35)",
+    fontWeight: 600,
+    whiteSpace: "nowrap",
+};
+const tdStyle = {
+    padding: "3px 8px",
+    borderBottom: "1px solid rgba(128,128,128,0.12)",
+    whiteSpace: "nowrap",
+};
+const sectionTitleStyle = {
+    margin: 0,
+    fontSize: 12,
+    fontWeight: 600,
+    padding: "6px 8px",
+    borderBottom: "1px solid rgba(128,128,128,0.2)",
+    background: "rgba(128,128,128,0.06)",
+};
+/** Full-width shell: board | reference — no wrap, no footer below. */
+const referenceShellStyle = {
+    display: "grid",
+    gridTemplateColumns: `${DEFAULT_REFERENCE_LAYOUT.boardColumn} ${DEFAULT_REFERENCE_LAYOUT.referenceColumn}`,
+    width: "100%",
+    height: "100%",
+    minHeight: DEFAULT_REFERENCE_LAYOUT.minHeight,
+    overflow: "hidden",
+    boxSizing: "border-box",
+};
+const boardColumnStyle = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    padding: "8px 12px",
+    minHeight: 0,
+    overflow: "auto",
+    boxSizing: "border-box",
+    gap: 8,
+};
+const boardNavStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    width: "100%",
+};
+const boardNavButtonStyle = {
+    minWidth: 44,
+    padding: "6px 14px",
+    fontSize: 16,
+    lineHeight: 1,
+    cursor: "pointer",
+    border: "1px solid rgba(128,128,128,0.4)",
+    borderRadius: 4,
+    background: "rgba(128,128,128,0.1)",
+};
+const referencePanelStyle = {
+    display: "flex",
+    flexDirection: "column",
+    minHeight: 0,
+    height: "100%",
+    overflow: "hidden",
+    borderLeft: "1px solid rgba(128,128,128,0.3)",
+    boxSizing: "border-box",
+};
+const referenceTabBarStyle = {
+    flex: "0 0 auto",
+    display: "flex",
+    alignItems: "center",
+    gap: 4,
+    padding: "6px 10px",
+    borderBottom: "1px solid rgba(128,128,128,0.35)",
+    background: "rgba(128,128,128,0.08)",
+    fontSize: 12,
+};
+const referenceTabLabelStyle = {
+    padding: "2px 8px",
+};
+const moveStatsSectionStyle = {
+    flex: "0 1 auto",
+    maxHeight: "38%",
+    minHeight: 120,
+    overflow: "auto",
+    borderBottom: "1px solid rgba(128,128,128,0.2)",
+};
+const variationsStripStyle = {
+    flex: "0 0 auto",
+    display: "flex",
+    alignItems: "center",
+    gap: 12,
+    padding: "6px 10px",
+    borderBottom: "1px solid rgba(128,128,128,0.2)",
+    fontSize: 12,
+    background: "rgba(128,128,128,0.04)",
+};
+const variationsTabStyle = {
+    cursor: "default",
+};
+const gamesSectionStyle = {
+    flex: "1 1 auto",
+    display: "flex",
+    flexDirection: "column",
+    minHeight: 0,
+    overflow: "hidden",
+};
+const gamesHeaderStyle = {
+    flex: "0 0 auto",
+    padding: "6px 10px",
+    fontSize: 12,
+    borderBottom: "1px solid rgba(128,128,128,0.15)",
+    background: "rgba(128,128,128,0.05)",
+};
+const gamesScrollStyle = {
+    flex: "1 1 auto",
+    overflow: "auto",
+    minHeight: 0,
+};
+const gamesToolbarStyle = {
+    flex: "0 0 auto",
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: 10,
+    padding: "6px 10px",
+    borderTop: "1px solid rgba(128,128,128,0.3)",
+    background: "rgba(128,128,128,0.08)",
+    fontSize: 12,
+};
+const statusInlineStyle = {
+    flex: "0 0 auto",
+    padding: "4px 10px",
+    margin: 0,
+    fontSize: 12,
+};
+
+/** Right column shell: tab bar + stacked sections (no page footer below). */
+const DefaultReferencePanel = ({ theme, status, moveStats, variationsStrip, gamesPanel, }) => (jsxRuntime.jsxs("div", { style: Object.assign(Object.assign({}, referencePanelStyle), panelStyle), "data-theme": theme, children: [jsxRuntime.jsx("div", { style: referenceTabBarStyle, children: jsxRuntime.jsx("span", { style: Object.assign(Object.assign({}, referenceTabLabelStyle), { fontWeight: 600 }), children: "Reference" }) }), status, jsxRuntime.jsx("div", { style: { flex: "0 0 auto", minHeight: 0 }, children: moveStats }), variationsStrip, gamesPanel] }));
+
+const DefaultBoardNav = ({ canGoBack, canGoForward, onBack, onForward, }) => (jsxRuntime.jsxs("div", { style: boardNavStyle, children: [jsxRuntime.jsx("button", { type: "button", style: boardNavButtonStyle, onClick: onBack, disabled: !canGoBack, "aria-label": "Previous position", title: "Back", children: "\u25C0" }), jsxRuntime.jsx("button", { type: "button", style: boardNavButtonStyle, onClick: onForward, disabled: !canGoForward, "aria-label": "Next position", title: "Forward", children: "\u25B6" })] }));
+const defaultRenderBoardNav = (props) => (jsxRuntime.jsx(DefaultBoardNav, Object.assign({}, props)));
+
+const ExplorerStatusBanner = ({ error, loading, }) => {
+    if (!error && !loading)
+        return null;
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [error && (jsxRuntime.jsx("p", { style: Object.assign(Object.assign({}, statusInlineStyle), { color: "#e57373" }), role: "alert", children: error })), loading && (jsxRuntime.jsx("p", { style: Object.assign(Object.assign({}, statusInlineStyle), { opacity: 0.7 }), children: "Loading\u2026" }))] }));
+};
+
+/** Match endchess-backend / mass-games-import (first four FEN fields). */
+function normalizeFen(fen) {
+    const parts = fen.trim().split(/\s+/);
+    if (parts.length < 4) {
+        throw new Error(`Invalid FEN: ${fen}`);
+    }
+    return `${parts[0]} ${parts[1]} ${parts[2]} ${parts[3]}`;
+}
+/** Legal move from a board drag/drop (react-chessboard piece string, e.g. wQ). */
+function applyBoardMove(fen, sourceSquare, targetSquare, piece) {
+    var _a, _b;
+    const chess = new chess_js.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;
+    const played = chess.move({
+        from: legal.from,
+        to: legal.to,
+        promotion: legal.promotion,
+    });
+    if (!played)
+        return null;
+    const uci = `${played.from}${played.to}${(_b = played.promotion) !== null && _b !== void 0 ? _b : ""}`;
+    return { fen: chess.fen(), uci, san: played.san };
+}
+/** Play a SAN sequence from a start FEN; returns null if any move is illegal. */
+function applyLineSans(startFen, sans) {
+    const chess = new chess_js.Chess(startFen);
+    const entries = [];
+    for (const san of sans) {
+        try {
+            const move = chess.move(san);
+            if (!move)
+                return null;
+            entries.push({ fen: chess.fen(), lastSan: move.san });
+        }
+        catch (_a) {
+            return null;
+        }
+    }
+    return { fen: chess.fen(), entries };
+}
+/** Apply a UCI move to a FEN; returns null if illegal. */
+function fenAfterUci(fen, uci) {
+    const chess = new chess_js.Chess(fen);
+    const from = uci.slice(0, 2);
+    const to = uci.slice(2, 4);
+    const promotion = uci.length > 4 ? uci[4] : undefined;
+    try {
+        const move = chess.move({ from, to, promotion });
+        if (!move)
+            return null;
+        return chess.fen();
+    }
+    catch (_a) {
+        return null;
+    }
+}
+function whiteScorePercent(whiteWins, draws, blackWins) {
+    const total = whiteWins + draws + blackWins;
+    if (total === 0)
+        return null;
+    return Math.round((100 * (whiteWins + 0.5 * draws)) / total);
+}
+
+const MoveStatsTable = ({ moves, selectedUci, onMoveSelect, }) => (jsxRuntime.jsxs("div", { style: moveStatsSectionStyle, children: [jsxRuntime.jsx("div", { style: sectionTitleStyle, children: "Moves" }), jsxRuntime.jsxs("table", { style: tableStyle, children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx("th", { style: thStyle, children: "Move" }), jsxRuntime.jsx("th", { style: thStyle, children: "Games" }), jsxRuntime.jsx("th", { style: Object.assign(Object.assign({}, thStyle), { textAlign: "right" }), children: "Score %" }), jsxRuntime.jsx("th", { style: Object.assign(Object.assign({}, thStyle), { textAlign: "right" }), children: "Avg" })] }) }), jsxRuntime.jsx("tbody", { children: moves.map((move) => {
+                        var _a;
+                        const score = whiteScorePercent(move.whiteWins, move.draws, move.blackWins);
+                        const selected = move.uci === selectedUci;
+                        return (jsxRuntime.jsxs("tr", { onClick: () => onMoveSelect(move), style: {
+                                cursor: "pointer",
+                                background: selected ? "rgba(100,149,237,0.25)" : undefined,
+                            }, children: [jsxRuntime.jsx("td", { style: tdStyle, children: move.san }), jsxRuntime.jsx("td", { style: tdStyle, children: move.games.toLocaleString() }), jsxRuntime.jsx("td", { style: Object.assign(Object.assign({}, tdStyle), { textAlign: "right" }), children: score !== null ? `${score}` : "—" }), jsxRuntime.jsx("td", { style: Object.assign(Object.assign({}, tdStyle), { textAlign: "right" }), children: (_a = move.avgElo) !== null && _a !== void 0 ? _a : "—" })] }, move.uci));
+                    }) })] })] }));
+
+const inputStyle = {
+    width: 64,
+    padding: "2px 6px",
+    fontSize: 12,
+};
+const rowStyle = {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: 6,
+    alignItems: "center",
+};
+const EloRangeFilter = ({ minElo, maxElo, defaultMinElo, defaultMaxElo, onMinEloChange, onMaxEloChange, }) => (jsxRuntime.jsxs("div", { style: rowStyle, children: [jsxRuntime.jsx("span", { style: { fontWeight: 600 }, children: "Filter" }), jsxRuntime.jsx("input", { type: "number", value: minElo, min: 0, max: 3000, onChange: (e) => onMinEloChange(Number(e.target.value) || defaultMinElo), style: inputStyle, "aria-label": "Minimum Elo" }), jsxRuntime.jsx("span", { children: "\u2013" }), jsxRuntime.jsx("input", { type: "number", value: maxElo, min: 0, max: 3000, onChange: (e) => onMaxEloChange(Number(e.target.value) || defaultMaxElo), style: inputStyle, "aria-label": "Maximum Elo" })] }));
+
+const linkStyle = {
+    color: "inherit",
+    textDecoration: "underline",
+    textUnderlineOffset: 2,
+};
+const LichessGameLink = ({ url, name }) => (jsxRuntime.jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", style: linkStyle, children: name }));
+const GamesTable = ({ games, onGameSelect }) => (jsxRuntime.jsxs("table", { style: tableStyle, children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx("th", { style: thStyle, children: "White" }), jsxRuntime.jsx("th", { style: thStyle, children: "Elo" }), jsxRuntime.jsx("th", { style: thStyle, children: "Black" }), jsxRuntime.jsx("th", { style: thStyle, children: "Elo" }), jsxRuntime.jsx("th", { style: thStyle, children: "Result" }), onGameSelect && jsxRuntime.jsx("th", { style: thStyle })] }) }), jsxRuntime.jsx("tbody", { children: games.length === 0 ? (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: onGameSelect ? 6 : 5, style: Object.assign(Object.assign({}, tdStyle), { opacity: 0.7, fontStyle: "italic" }), children: "No games match this position and filter. Widen the Elo range or turn off Top games." }) })) : (games.map((g) => (jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx("td", { style: tdStyle, children: jsxRuntime.jsx(LichessGameLink, { url: g.url, name: g.white }) }), jsxRuntime.jsx("td", { style: tdStyle, children: g.whiteElo }), jsxRuntime.jsx("td", { style: tdStyle, children: jsxRuntime.jsx(LichessGameLink, { url: g.url, name: g.black }) }), jsxRuntime.jsx("td", { style: tdStyle, children: g.blackElo }), jsxRuntime.jsx("td", { style: tdStyle, children: g.result }), onGameSelect && (jsxRuntime.jsx("td", { style: tdStyle, children: jsxRuntime.jsx("button", { type: "button", onClick: () => onGameSelect(g), children: "Train" }) }))] }, g.gameId)))) })] }));
+
+const mainLineTitleStyle = {
+    fontWeight: 600,
+};
+const PositionGamesPanel = ({ games, lineLabel, minElo, maxElo, defaultMinElo, defaultMaxElo, topOnly, onMinEloChange, onMaxEloChange, onTopOnlyChange, onGameSelect, }) => (jsxRuntime.jsxs("div", { style: gamesSectionStyle, children: [jsxRuntime.jsx("div", { style: gamesHeaderStyle, children: lineLabel ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { style: mainLineTitleStyle, children: "Main line: " }), lineLabel, jsxRuntime.jsxs("span", { style: { opacity: 0.75 }, children: [" (", games.length, " games)"] })] })) : (jsxRuntime.jsxs("span", { children: ["Games ", jsxRuntime.jsxs("span", { style: { opacity: 0.75 }, children: ["(", games.length, ")"] })] })) }), jsxRuntime.jsx("div", { style: gamesScrollStyle, children: jsxRuntime.jsx(GamesTable, { games: games, onGameSelect: onGameSelect }) }), jsxRuntime.jsxs("div", { style: gamesToolbarStyle, children: [jsxRuntime.jsx(EloRangeFilter, { minElo: minElo, maxElo: maxElo, defaultMinElo: defaultMinElo, defaultMaxElo: defaultMaxElo, onMinEloChange: onMinEloChange, onMaxEloChange: onMaxEloChange }), jsxRuntime.jsxs("label", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: topOnly, onChange: (e) => onTopOnlyChange(e.target.checked) }), "Top games"] })] })] }));
+
+const DefaultReferenceLayout = ({ board, referencePanel, }) => (jsxRuntime.jsxs("div", { style: referenceShellStyle, children: [jsxRuntime.jsx("div", { style: boardColumnStyle, children: board }), referencePanel] }));
+const defaultRenderLayout = (props) => (jsxRuntime.jsx(DefaultReferenceLayout, Object.assign({}, props)));
+
+function isVariationLineActive(line, selectedLineKey, forwardSans = []) {
+    if (selectedLineKey && line.key === selectedLineKey) {
+        return true;
+    }
+    if (forwardSans.length === 0) {
+        return false;
+    }
+    return forwardSans.every((san, index) => { var _a; return ((_a = line.moves[index]) === null || _a === void 0 ? void 0 : _a.san) === san; });
+}
+
+const tabButtonStyle = (active) => (Object.assign(Object.assign({}, variationsTabStyle), { fontWeight: active ? 600 : 400, opacity: active ? 1 : 0.55, cursor: "pointer", border: "none", background: "transparent", padding: 0, color: "inherit", font: "inherit" }));
+const DefaultVariationsStrip = ({ theme, tab, onTabChange, lines, loading, selectedLineKey, forwardSans, onLineSelect, }) => (jsxRuntime.jsxs("div", { style: Object.assign(Object.assign({}, variationsStripStyle), { flexDirection: "column", alignItems: "stretch", gap: 6 }), "data-theme": theme, children: [jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [jsxRuntime.jsx("button", { type: "button", style: tabButtonStyle(tab === "variations"), onClick: () => onTabChange("variations"), children: "Variations" }), jsxRuntime.jsx("button", { type: "button", style: tabButtonStyle(tab === "popularity"), onClick: () => onTabChange("popularity"), children: "Popularity" }), jsxRuntime.jsx("button", { type: "button", style: tabButtonStyle(tab === "endgames"), onClick: () => onTabChange("endgames"), children: "Endgames" })] }), jsxRuntime.jsx("div", { style: {
+                minWidth: 0,
+                maxHeight: 132,
+                overflow: "auto",
+            }, children: tab === "endgames" ? (jsxRuntime.jsx("span", { style: { fontSize: 11, opacity: 0.55 }, children: "Coming soon" })) : loading ? (jsxRuntime.jsx("span", { style: { fontSize: 11, opacity: 0.55 }, children: "Loading\u2026" })) : lines.length === 0 ? (jsxRuntime.jsx("span", { style: { fontSize: 11, opacity: 0.55 }, children: "No lines" })) : (lines.map((line) => {
+                var _a, _b;
+                const active = isVariationLineActive(line, selectedLineKey, forwardSans);
+                return (jsxRuntime.jsxs("button", { type: "button", onClick: () => onLineSelect(line), style: {
+                        display: "flex",
+                        width: "100%",
+                        gap: 12,
+                        alignItems: "baseline",
+                        border: "none",
+                        background: "transparent",
+                        padding: "2px 0",
+                        cursor: "pointer",
+                        textAlign: "left",
+                        color: active ? "#2e7d32" : "inherit",
+                        font: "inherit",
+                        fontSize: 12,
+                    }, children: [jsxRuntime.jsx("span", { style: { flex: 1, minWidth: 0 }, children: line.label }), jsxRuntime.jsxs("span", { children: ["N = ", line.games.toLocaleString()] }), jsxRuntime.jsxs("span", { children: [(_a = line.scorePercent) !== null && _a !== void 0 ? _a : "—", "%"] }), jsxRuntime.jsx("span", { children: line.lastPlayedYear
+                                ? `Last played ${line.lastPlayedYear}`
+                                : "Last played —" }), jsxRuntime.jsx("span", { children: (_b = line.avgElo) !== null && _b !== void 0 ? _b : "—" })] }, line.key));
+            })) })] }));
+const defaultRenderVariationsStrip = (props) => jsxRuntime.jsx(DefaultVariationsStrip, Object.assign({}, props));
+
+const defaultRenderStatus = (props) => (jsxRuntime.jsx(ExplorerStatusBanner, Object.assign({}, props)));
+const defaultRenderMoveStats = (props) => (jsxRuntime.jsx(MoveStatsTable, Object.assign({}, props)));
+const defaultRenderGamesPanel = (props) => (jsxRuntime.jsx(PositionGamesPanel, Object.assign({}, props)));
+
+/******************************************************************************
+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 __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;
+};
+
+function usePositionHistory(initialFen) {
+    const [history, setHistory] = react.useState([
+        { fen: initialFen },
+    ]);
+    const [historyIndex, setHistoryIndex] = react.useState(0);
+    const canGoBack = historyIndex > 0;
+    const canGoForward = historyIndex < history.length - 1;
+    const pushEntry = react.useCallback((fen, lastSan) => {
+        setHistory((prev) => {
+            const trimmed = prev.slice(0, historyIndex + 1);
+            const next = [...trimmed, { fen, lastSan }];
+            setHistoryIndex(next.length - 1);
+            return next;
+        });
+        return { fen, lastSan };
+    }, [historyIndex]);
+    const goBack = react.useCallback(() => {
+        if (historyIndex <= 0)
+            return null;
+        const nextIndex = historyIndex - 1;
+        const entry = history[nextIndex];
+        setHistoryIndex(nextIndex);
+        return entry;
+    }, [history, historyIndex]);
+    const goForward = react.useCallback(() => {
+        if (historyIndex >= history.length - 1)
+            return null;
+        const nextIndex = historyIndex + 1;
+        const entry = history[nextIndex];
+        setHistoryIndex(nextIndex);
+        return entry;
+    }, [history, historyIndex]);
+    const resetHistory = react.useCallback((fen) => {
+        const entry = { fen };
+        setHistory([entry]);
+        setHistoryIndex(0);
+        return entry;
+    }, []);
+    const pushEntries = react.useCallback((entries) => {
+        if (entries.length === 0)
+            return;
+        setHistory((prev) => {
+            const trimmed = prev.slice(0, historyIndex + 1);
+            const next = [...trimmed, ...entries];
+            setHistoryIndex(next.length - 1);
+            return next;
+        });
+    }, [historyIndex]);
+    const lineSans = history
+        .slice(1, historyIndex + 1)
+        .map((entry) => entry.lastSan)
+        .filter((san) => Boolean(san));
+    const forwardSans = history
+        .slice(historyIndex + 1)
+        .map((entry) => entry.lastSan)
+        .filter((san) => Boolean(san));
+    return {
+        canGoBack,
+        canGoForward,
+        lineSans,
+        forwardSans,
+        pushEntry,
+        pushEntries,
+        goBack,
+        goForward,
+        resetHistory,
+    };
+}
+
+function usePositionReferenceData({ fenProp, onFenChange, initialLineSans, onLineSansChange, fetchPosition, fetchPositionGames, defaultMinElo, defaultMaxElo, }) {
+    const initialFen = fenProp !== null && fenProp !== void 0 ? fenProp : EXPLORER_START_FEN;
+    const [fen, setFen] = react.useState(initialFen);
+    /** Board display FEN; may lead {@link fen} while a variation line is animating. */
+    const [boardFen, setBoardFen] = react.useState(initialFen);
+    const [position, setPosition] = react.useState(null);
+    const [games, setGames] = react.useState(null);
+    /** Filter games to those that played this UCI from the current FEN (optional). */
+    const [gamesMoveFilterUci, setGamesMoveFilterUci] = react.useState();
+    const [minElo, setMinElo] = react.useState(defaultMinElo);
+    const [maxElo, setMaxElo] = react.useState(defaultMaxElo);
+    const [topOnly, setTopOnly] = react.useState(false);
+    const [loading, setLoading] = react.useState(false);
+    const [error, setError] = react.useState(null);
+    const [variationsTab, setVariationsTab] = react.useState("variations");
+    const [selectedVariationKey, setSelectedVariationKey] = react.useState();
+    const variationAnimationTimerRef = react.useRef(null);
+    const isAnimatingVariationRef = react.useRef(false);
+    const readyForLineSyncRef = react.useRef(false);
+    const cancelVariationAnimation = react.useCallback(() => {
+        if (variationAnimationTimerRef.current !== null) {
+            clearTimeout(variationAnimationTimerRef.current);
+            variationAnimationTimerRef.current = null;
+        }
+        isAnimatingVariationRef.current = false;
+    }, []);
+    const { canGoBack, canGoForward, lineSans, forwardSans, pushEntry, pushEntries, goBack, goForward, resetHistory, } = usePositionHistory(initialFen);
+    const applyNavigation = react.useCallback((nextFen, clearMoveFilter = true) => {
+        setFen(nextFen);
+        setBoardFen(nextFen);
+        if (clearMoveFilter) {
+            setGamesMoveFilterUci(undefined);
+        }
+        onFenChange === null || onFenChange === void 0 ? void 0 : onFenChange(nextFen);
+    }, [onFenChange]);
+    const initialLineKey = react.useMemo(() => { var _a; return (_a = initialLineSans === null || initialLineSans === void 0 ? void 0 : initialLineSans.join("|")) !== null && _a !== void 0 ? _a : ""; }, [initialLineSans]);
+    const lastAppliedLineKeyRef = react.useRef(undefined);
+    react.useEffect(() => () => cancelVariationAnimation(), [cancelVariationAnimation]);
+    react.useEffect(() => {
+        if (lastAppliedLineKeyRef.current === initialLineKey)
+            return;
+        const currentLineKey = lineSans.join("|");
+        if (currentLineKey === initialLineKey) {
+            lastAppliedLineKeyRef.current = initialLineKey;
+            return;
+        }
+        lastAppliedLineKeyRef.current = initialLineKey;
+        cancelVariationAnimation();
+        resetHistory(EXPLORER_START_FEN);
+        setSelectedVariationKey(undefined);
+        if (initialLineSans === null || initialLineSans === void 0 ? void 0 : initialLineSans.length) {
+            const result = applyLineSans(EXPLORER_START_FEN, initialLineSans);
+            if (result) {
+                pushEntries(result.entries);
+                applyNavigation(result.fen, true);
+                return;
+            }
+        }
+        applyNavigation(EXPLORER_START_FEN, true);
+    }, [
+        initialLineKey,
+        initialLineSans,
+        lineSans,
+        cancelVariationAnimation,
+        resetHistory,
+        pushEntries,
+        applyNavigation,
+    ]);
+    react.useEffect(() => {
+        if (readyForLineSyncRef.current)
+            return;
+        const expected = initialLineSans !== null && initialLineSans !== void 0 ? initialLineSans : [];
+        const matchesInitialLine = lineSans.length === expected.length &&
+            lineSans.every((san, index) => san === expected[index]);
+        if (matchesInitialLine) {
+            readyForLineSyncRef.current = true;
+        }
+    }, [lineSans, initialLineSans]);
+    react.useEffect(() => {
+        if (!readyForLineSyncRef.current)
+            return;
+        onLineSansChange === null || onLineSansChange === void 0 ? void 0 : onLineSansChange(lineSans);
+    }, [lineSans, onLineSansChange]);
+    react.useEffect(() => {
+        if (fenProp === undefined || fenProp === fen)
+            return;
+        cancelVariationAnimation();
+        resetHistory(fenProp);
+        applyNavigation(fenProp, true);
+    }, [fenProp, fen, resetHistory, applyNavigation, cancelVariationAnimation]);
+    react.useEffect(() => {
+        let cancelled = false;
+        setLoading(true);
+        setError(null);
+        (() => __awaiter(this, void 0, void 0, function* () {
+            try {
+                const [pos, gameList] = yield Promise.all([
+                    fetchPosition(fen),
+                    fetchPositionGames({
+                        fen,
+                        minElo,
+                        maxElo,
+                        uci: gamesMoveFilterUci,
+                        topOnly,
+                    }),
+                ]);
+                if (cancelled)
+                    return;
+                setPosition(pos);
+                setGames(gameList);
+                if (!pos) {
+                    setError("No explorer data for this position yet");
+                }
+            }
+            catch (e) {
+                if (!cancelled) {
+                    setError(e instanceof Error ? e.message : "Failed to load explorer data");
+                }
+            }
+            finally {
+                if (!cancelled)
+                    setLoading(false);
+            }
+        }))();
+        return () => {
+            cancelled = true;
+        };
+    }, [
+        fen,
+        minElo,
+        maxElo,
+        gamesMoveFilterUci,
+        topOnly,
+        fetchPosition,
+        fetchPositionGames,
+    ]);
+    const handleMoveSelect = react.useCallback((move) => {
+        if (isAnimatingVariationRef.current) {
+            cancelVariationAnimation();
+            setBoardFen(fen);
+            setSelectedVariationKey(undefined);
+        }
+        const nextFen = fenAfterUci(fen, move.uci);
+        if (!nextFen)
+            return;
+        pushEntry(nextFen, move.san);
+        setSelectedVariationKey(undefined);
+        applyNavigation(nextFen, true);
+    }, [fen, pushEntry, applyNavigation, cancelVariationAnimation]);
+    const handleLineSelect = react.useCallback((line) => {
+        if (isAnimatingVariationRef.current)
+            return;
+        cancelVariationAnimation();
+        let currentFen = fen;
+        const entries = [];
+        for (let i = 0; i < line.uciPath.length; i += 1) {
+            const nextFen = fenAfterUci(currentFen, line.uciPath[i]);
+            if (!nextFen)
+                return;
+            entries.push({ fen: nextFen, lastSan: line.moves[i].san });
+            currentFen = nextFen;
+        }
+        if (entries.length === 0)
+            return;
+        setSelectedVariationKey(line.key);
+        const commitLine = () => {
+            isAnimatingVariationRef.current = false;
+            variationAnimationTimerRef.current = null;
+            pushEntries(entries);
+            applyNavigation(entries[entries.length - 1].fen, true);
+        };
+        isAnimatingVariationRef.current = true;
+        let step = 0;
+        const tick = () => {
+            setBoardFen(entries[step].fen);
+            step += 1;
+            if (step >= entries.length) {
+                commitLine();
+            }
+            else {
+                variationAnimationTimerRef.current = setTimeout(tick, VARIATION_LINE_STEP_MS);
+            }
+        };
+        tick();
+    }, [fen, pushEntries, applyNavigation, cancelVariationAnimation]);
+    const handlePieceDrop = react.useCallback((sourceSquare, targetSquare, piece) => {
+        if (isAnimatingVariationRef.current) {
+            cancelVariationAnimation();
+            setBoardFen(fen);
+            setSelectedVariationKey(undefined);
+        }
+        const result = applyBoardMove(fen, sourceSquare, targetSquare, piece);
+        if (!result)
+            return false;
+        pushEntry(result.fen, result.san);
+        setSelectedVariationKey(undefined);
+        applyNavigation(result.fen, true);
+        return true;
+    }, [fen, pushEntry, applyNavigation, cancelVariationAnimation]);
+    const handleBack = react.useCallback(() => {
+        if (isAnimatingVariationRef.current) {
+            cancelVariationAnimation();
+            setBoardFen(fen);
+            setSelectedVariationKey(undefined);
+            return;
+        }
+        const entry = goBack();
+        if (entry)
+            applyNavigation(entry.fen, true);
+    }, [fen, goBack, applyNavigation, cancelVariationAnimation]);
+    const handleForward = react.useCallback(() => {
+        if (isAnimatingVariationRef.current) {
+            cancelVariationAnimation();
+            setBoardFen(fen);
+            setSelectedVariationKey(undefined);
+            return;
+        }
+        const entry = goForward();
+        if (entry)
+            applyNavigation(entry.fen, true);
+    }, [fen, goForward, applyNavigation, cancelVariationAnimation]);
+    const lineLabel = react.useMemo(() => {
+        if (lineSans.length > 0) {
+            return lineSans.join(" ");
+        }
+        if (position) {
+            return `Starting position (${position.totalGames.toLocaleString()} games)`;
+        }
+        return "";
+    }, [lineSans, position]);
+    return {
+        fen,
+        boardFen,
+        position,
+        games,
+        gamesMoveFilterUci,
+        minElo,
+        maxElo,
+        topOnly,
+        loading,
+        error,
+        lineLabel,
+        canGoBack,
+        canGoForward,
+        variationsTab,
+        forwardSans,
+        selectedVariationKey,
+        setMinElo,
+        setMaxElo,
+        setTopOnly,
+        setVariationsTab,
+        setGamesMoveFilterUci,
+        handleMoveSelect,
+        handleLineSelect,
+        handlePieceDrop,
+        handleBack,
+        handleForward,
+    };
+}
+
+function useVariationLines({ fen, tab, minElo, maxElo, fetchPositionVariations, lineCount = 8, lineDepth = 4, enabled = true, }) {
+    const [lines, setLines] = react.useState([]);
+    const [loading, setLoading] = react.useState(false);
+    react.useEffect(() => {
+        if (!enabled || tab === "endgames") {
+            setLines([]);
+            setLoading(false);
+            return;
+        }
+        let cancelled = false;
+        setLoading(true);
+        (() => __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            try {
+                const result = yield fetchPositionVariations({
+                    fen,
+                    mode: tab,
+                    minElo,
+                    maxElo,
+                    lineCount,
+                    depth: lineDepth,
+                });
+                if (cancelled)
+                    return;
+                setLines((_a = result === null || result === void 0 ? void 0 : result.lines) !== null && _a !== void 0 ? _a : []);
+            }
+            catch (_b) {
+                if (!cancelled) {
+                    setLines([]);
+                }
+            }
+            finally {
+                if (!cancelled) {
+                    setLoading(false);
+                }
+            }
+        }))();
+        return () => {
+            cancelled = true;
+        };
+    }, [
+        enabled,
+        fen,
+        tab,
+        minElo,
+        maxElo,
+        fetchPositionVariations,
+        lineCount,
+        lineDepth,
+    ]);
+    return { lines, loading };
+}
+
+const PositionReferenceExplorerCore = ({ fen: fenProp, onFenChange, initialLineSans, onLineSansChange, fetchPosition, fetchPositionGames, fetchPositionVariations, theme = "dark", boardWidth = DEFAULT_REFERENCE_LAYOUT.boardWidth, defaultMinElo = 2200, defaultMaxElo = 2800, fillHeight = true, layoutMinHeight, renderLayout = defaultRenderLayout, renderStatus = defaultRenderStatus, renderMoveStats = defaultRenderMoveStats, renderVariationsStrip = defaultRenderVariationsStrip, renderGamesPanel = defaultRenderGamesPanel, renderBoardNav = defaultRenderBoardNav, onGameSelect, }) => {
+    var _a, _b;
+    const referenceData = usePositionReferenceData({
+        fenProp,
+        onFenChange,
+        initialLineSans,
+        onLineSansChange,
+        fetchPosition,
+        fetchPositionGames,
+        defaultMinElo,
+        defaultMaxElo,
+    });
+    const { fen, boardFen, position, games, minElo, maxElo, topOnly, loading, error, lineLabel, canGoBack, canGoForward, variationsTab, forwardSans, selectedVariationKey, setMinElo, setMaxElo, setTopOnly, setVariationsTab, handleMoveSelect, handleLineSelect, handlePieceDrop, handleBack, handleForward, } = referenceData;
+    const { lines: variationLines, loading: variationLinesLoading } = useVariationLines({
+        fen,
+        tab: variationsTab,
+        minElo,
+        maxElo,
+        fetchPositionVariations,
+        enabled: Boolean(position),
+    });
+    const outerStyle = {
+        width: "100%",
+        height: fillHeight ? "100%" : "auto",
+        minHeight: layoutMinHeight !== null && layoutMinHeight !== void 0 ? layoutMinHeight : DEFAULT_REFERENCE_LAYOUT.minHeight,
+        overflow: "hidden",
+        boxSizing: "border-box",
+    };
+    const board = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactChessboard.ChessboardDnDProvider, { children: jsxRuntime.jsx(reactChessCore.HighlightChessboard, { boardWidth: boardWidth, position: boardFen, checkSquare: "", hintSquare: null, incorrectMoveSquare: null, onPieceDrop: handlePieceDrop, promotionDialogVariant: "modal" }) }), renderBoardNav({
+                canGoBack,
+                canGoForward,
+                onBack: handleBack,
+                onForward: handleForward,
+            })] }));
+    const referencePanel = (jsxRuntime.jsx(DefaultReferencePanel, { theme: theme, status: renderStatus({ error, loading }), moveStats: renderMoveStats({
+            moves: (_a = position === null || position === void 0 ? void 0 : position.moves) !== null && _a !== void 0 ? _a : [],
+            onMoveSelect: handleMoveSelect,
+        }), variationsStrip: renderVariationsStrip({
+            theme,
+            tab: variationsTab,
+            onTabChange: setVariationsTab,
+            lines: variationLines,
+            loading: variationLinesLoading,
+            selectedLineKey: selectedVariationKey,
+            forwardSans,
+            onLineSelect: handleLineSelect,
+        }), gamesPanel: renderGamesPanel({
+            games: (_b = games === null || games === void 0 ? void 0 : games.games) !== null && _b !== void 0 ? _b : [],
+            lineLabel,
+            minElo,
+            maxElo,
+            defaultMinElo,
+            defaultMaxElo,
+            topOnly,
+            onMinEloChange: setMinElo,
+            onMaxEloChange: setMaxElo,
+            onTopOnlyChange: setTopOnly,
+            onGameSelect,
+        }) }));
+    return (jsxRuntime.jsx(reactChessCore.ThemeProvider, { theme: theme, children: jsxRuntime.jsx("div", { style: outerStyle, children: renderLayout({ theme, board, referencePanel }) }) }));
+};
+
+/** Reference explorer with library default layout and renderers (ChessBase-style grid). */
+const PositionReferenceExplorer = (props) => jsxRuntime.jsx(PositionReferenceExplorerCore, Object.assign({}, props));
+
+function fenAtPly(movesUci, ply) {
+    const chess = new chess_js.Chess(EXPLORER_START_FEN);
+    for (let i = 0; i < ply && i < movesUci.length; i++) {
+        applyUci(chess, movesUci[i]);
+    }
+    return chess.fen();
+}
+/** Index of the next move to play to reach `targetFen`, or 0 if not found. */
+function findPlyIndexForFen(movesUci, targetFen) {
+    const target = normalizeFen(targetFen);
+    const chess = new chess_js.Chess(EXPLORER_START_FEN);
+    if (normalizeFen(chess.fen()) === target) {
+        return 0;
+    }
+    for (let i = 0; i < movesUci.length; i++) {
+        applyUci(chess, movesUci[i]);
+        if (normalizeFen(chess.fen()) === target) {
+            return i + 1;
+        }
+    }
+    return 0;
+}
+function applyUci(chess, uci) {
+    const from = uci.slice(0, 2);
+    const to = uci.slice(2, 4);
+    const promotion = uci.length > 4 ? uci[4] : undefined;
+    const move = chess.move({ from, to, promotion });
+    if (!move) {
+        throw new Error(`Illegal UCI move: ${uci}`);
+    }
+}
+function uciFromDrop(fen, sourceSquare, targetSquare, piece) {
+    var _a, _b;
+    const chess = new chess_js.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 useGameReplayTraining({ gameId, startFen, fetchGame, }) {
+    var _a;
+    const [game, setGame] = react.useState(null);
+    const [plyIndex, setPlyIndex] = react.useState(0);
+    const [loading, setLoading] = react.useState(true);
+    const [error, setError] = react.useState(null);
+    const [feedback, setFeedback] = react.useState(null);
+    const [lastExpectedSan, setLastExpectedSan] = react.useState(null);
+    react.useEffect(() => {
+        let cancelled = false;
+        setLoading(true);
+        setError(null);
+        setFeedback(null);
+        setLastExpectedSan(null);
+        (() => __awaiter(this, void 0, void 0, function* () {
+            try {
+                const loaded = yield fetchGame(gameId);
+                if (cancelled)
+                    return;
+                if (!(loaded === null || loaded === void 0 ? void 0 : loaded.movesUci.length)) {
+                    setGame(null);
+                    setError("This game has no move list for replay yet");
+                    return;
+                }
+                setGame(loaded);
+                setPlyIndex(findPlyIndexForFen(loaded.movesUci, startFen));
+            }
+            catch (e) {
+                if (!cancelled) {
+                    setError(e instanceof Error ? e.message : "Failed to load game for replay");
+                }
+            }
+            finally {
+                if (!cancelled)
+                    setLoading(false);
+            }
+        }))();
+        return () => {
+            cancelled = true;
+        };
+    }, [gameId, startFen, fetchGame]);
+    const fen = react.useMemo(() => {
+        if (!game)
+            return startFen;
+        return fenAtPly(game.movesUci, plyIndex);
+    }, [game, plyIndex, startFen]);
+    const complete = game ? plyIndex >= game.movesUci.length : false;
+    const expectedUci = game === null || game === void 0 ? void 0 : game.movesUci[plyIndex];
+    const expectedSan = game === null || game === void 0 ? void 0 : game.movesSan[plyIndex];
+    const handlePieceDrop = react.useCallback((sourceSquare, targetSquare, piece) => {
+        if (!game || complete || !expectedUci)
+            return false;
+        const uci = uciFromDrop(fen, sourceSquare, targetSquare, piece);
+        if (!uci)
+            return false;
+        if (uci === expectedUci) {
+            setFeedback("correct");
+            setPlyIndex((p) => p + 1);
+            setLastExpectedSan(null);
+            return true;
+        }
+        setFeedback("incorrect");
+        setLastExpectedSan(expectedSan !== null && expectedSan !== void 0 ? expectedSan : null);
+        return false;
+    }, [game, complete, expectedUci, expectedSan, fen]);
+    const revealMove = react.useCallback(() => {
+        if (!game || complete || !expectedSan)
+            return;
+        setFeedback("incorrect");
+        setLastExpectedSan(expectedSan);
+        setPlyIndex((p) => p + 1);
+    }, [game, complete, expectedSan]);
+    return {
+        game,
+        fen,
+        plyIndex,
+        totalPlies: (_a = game === null || game === void 0 ? void 0 : game.movesUci.length) !== null && _a !== void 0 ? _a : 0,
+        complete,
+        loading,
+        error,
+        feedback,
+        lastExpectedSan,
+        expectedSan,
+        handlePieceDrop,
+        revealMove,
+    };
+}
+
+const defaultPanelStyle = {
+    fontFamily: "system-ui, sans-serif",
+    fontSize: 13,
+    padding: 12,
+    display: "flex",
+    flexDirection: "column",
+    gap: 8,
+};
+const defaultButtonStyle = {
+    fontSize: 13,
+    padding: "6px 12px",
+    cursor: "pointer",
+};
+const GameReplayTrainer = ({ gameId, startFen, fetchGame, onExit, theme = "dark", boardWidth = DEFAULT_REFERENCE_LAYOUT.boardWidth, renderStatus, }) => {
+    const { game, fen, plyIndex, totalPlies, complete, loading, error, feedback, lastExpectedSan, handlePieceDrop, revealMove, } = useGameReplayTraining({ gameId, startFen, fetchGame });
+    const status = renderStatus === null || renderStatus === void 0 ? void 0 : renderStatus({
+        loading,
+        error,
+        complete,
+        feedback,
+        lastExpectedSan,
+        plyIndex,
+        totalPlies,
+        game,
+    });
+    return (jsxRuntime.jsx(reactChessCore.ThemeProvider, { theme: theme, children: jsxRuntime.jsxs("div", { style: defaultPanelStyle, children: [jsxRuntime.jsxs("div", { style: {
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                        gap: 8,
+                    }, children: [jsxRuntime.jsx("strong", { children: "Replay training" }), onExit && (jsxRuntime.jsx("button", { type: "button", style: defaultButtonStyle, onClick: onExit, children: "Back to explorer" }))] }), game && (jsxRuntime.jsxs("div", { style: { opacity: 0.85 }, children: [game.white, " vs ", game.black, " \u00B7 ", game.result] })), status !== null && status !== void 0 ? status : (jsxRuntime.jsxs("div", { style: { minHeight: 20 }, children: [loading && "Loading game…", error && jsxRuntime.jsx("span", { style: { color: "#c62828" }, children: error }), !loading && !error && complete && "Game complete.", !loading && !error && !complete && feedback === "correct" && (jsxRuntime.jsx("span", { style: { color: "#2e7d32" }, children: "Correct!" })), !loading &&
+                            !error &&
+                            !complete &&
+                            feedback === "incorrect" &&
+                            lastExpectedSan && (jsxRuntime.jsxs("span", { style: { color: "#ef6c00" }, children: ["Expected ", lastExpectedSan] })), !loading && !error && !complete && feedback === null && (jsxRuntime.jsxs("span", { children: ["Guess move ", plyIndex + 1, " of ", totalPlies] }))] })), jsxRuntime.jsx(reactChessboard.ChessboardDnDProvider, { children: jsxRuntime.jsx(reactChessCore.HighlightChessboard, { boardWidth: boardWidth, position: fen, checkSquare: "", hintSquare: null, incorrectMoveSquare: null, onPieceDrop: handlePieceDrop, promotionDialogVariant: "modal" }) }), !complete && !loading && !error && (jsxRuntime.jsx("button", { type: "button", style: defaultButtonStyle, onClick: revealMove, children: "Show move" }))] }) }));
+};
+
+const mockPosition = {
+    positionKey: "mock-start",
+    fen: EXPLORER_START_FEN,
+    totalGames: 1250000,
+    moves: [
+        {
+            san: "e4",
+            uci: "e2e4",
+            games: 520000,
+            whiteWins: 180000,
+            draws: 140000,
+            blackWins: 200000,
+            avgElo: 2450,
+        },
+        {
+            san: "d4",
+            uci: "d2d4",
+            games: 410000,
+            whiteWins: 150000,
+            draws: 120000,
+            blackWins: 140000,
+            avgElo: 2440,
+        },
+        {
+            san: "Nf3",
+            uci: "g1f3",
+            games: 180000,
+            whiteWins: 62000,
+            draws: 55000,
+            blackWins: 63000,
+            avgElo: 2435,
+        },
+    ],
+    sampleGameIds: ["abc123", "def456"],
+};
+const mockGames = {
+    positionKey: "mock-start",
+    fen: EXPLORER_START_FEN,
+    minElo: 2200,
+    maxElo: 2800,
+    topOnly: false,
+    games: [
+        {
+            gameId: "abc123",
+            url: "https://lichess.org/abc123",
+            white: "Carlsen,M",
+            black: "Caruana,F",
+            whiteElo: 2882,
+            blackElo: 2803,
+            result: "1/2-1/2",
+            date: "2024.01.15",
+            nextSan: "e4",
+            nextUci: "e2e4",
+            avgElo: 2843,
+        },
+        {
+            gameId: "def456",
+            url: "https://lichess.org/def456",
+            white: "Firouzja,A",
+            black: "Nepo,I",
+            whiteElo: 2765,
+            blackElo: 2790,
+            result: "1-0",
+            date: "2024.02.01",
+            nextSan: "d4",
+            nextUci: "d2d4",
+            avgElo: 2778,
+        },
+    ],
+};
+function mockFetchPosition(fen) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return mockPosition;
+    });
+}
+function mockVariationLines(params, position) {
+    var _a, _b;
+    const lineCount = (_a = params.lineCount) !== null && _a !== void 0 ? _a : 8;
+    const starters = [...position.moves]
+        .sort((a, b) => b.games - a.games)
+        .slice(0, lineCount);
+    const lines = starters.map((move) => ({
+        key: move.uci,
+        label: params.mode === "popularity" ? `1.${move.san}` : `1.${move.san} 1...e5`,
+        moves: [move],
+        uciPath: [move.uci],
+        games: move.games,
+        scorePercent: 54,
+        lastPlayedYear: 2024,
+        avgElo: move.avgElo,
+    }));
+    return {
+        positionKey: position.positionKey,
+        fen: params.fen,
+        mode: params.mode,
+        depth: params.mode === "popularity" ? 1 : ((_b = params.depth) !== null && _b !== void 0 ? _b : 4),
+        lineCount,
+        minElo: params.minElo,
+        maxElo: params.maxElo,
+        lines,
+    };
+}
+function mockFetchPositionVariations(params) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const position = yield mockFetchPosition(params.fen);
+        if (!position)
+            return null;
+        return mockVariationLines(params, position);
+    });
+}
+function mockFetchPositionGames(params) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const filtered = params.uci
+            ? mockGames.games.filter((g) => g.nextUci === params.uci)
+            : mockGames.games;
+        return Object.assign(Object.assign({}, mockGames), { fen: params.fen, minElo: params.minElo, maxElo: params.maxElo, uci: params.uci, topOnly: params.topOnly, games: params.topOnly ? filtered.filter((g) => g.avgElo >= 2500) : filtered });
+    });
+}
+
+exports.DEFAULT_REFERENCE_LAYOUT = DEFAULT_REFERENCE_LAYOUT;
+exports.DefaultBoardNav = DefaultBoardNav;
+exports.DefaultReferenceLayout = DefaultReferenceLayout;
+exports.DefaultReferencePanel = DefaultReferencePanel;
+exports.DefaultVariationsStrip = DefaultVariationsStrip;
+exports.EXPLORER_START_FEN = EXPLORER_START_FEN;
+exports.ExplorerPlaceholder = ExplorerPlaceholder;
+exports.GameReplayTrainer = GameReplayTrainer;
+exports.PositionReferenceExplorer = PositionReferenceExplorer;
+exports.PositionReferenceExplorerCore = PositionReferenceExplorerCore;
+exports.applyLineSans = applyLineSans;
+exports.defaultRenderBoardNav = defaultRenderBoardNav;
+exports.defaultRenderGamesPanel = defaultRenderGamesPanel;
+exports.defaultRenderLayout = defaultRenderLayout;
+exports.defaultRenderMoveStats = defaultRenderMoveStats;
+exports.defaultRenderStatus = defaultRenderStatus;
+exports.defaultRenderVariationsStrip = defaultRenderVariationsStrip;
+exports.fenAfterUci = fenAfterUci;
+exports.fenAtPly = fenAtPly;
+exports.findPlyIndexForFen = findPlyIndexForFen;
+exports.isVariationLineActive = isVariationLineActive;
+exports.mockFetchPosition = mockFetchPosition;
+exports.mockFetchPositionGames = mockFetchPositionGames;
+exports.mockFetchPositionVariations = mockFetchPositionVariations;
+exports.normalizeFen = normalizeFen;
+exports.useGameReplayTraining = useGameReplayTraining;
+exports.whiteScorePercent = whiteScorePercent;