react-chess-explorer 0.0.1 → 0.0.2

package/dist/features/explorer/components/PositionGamesPanel.d.ts

@@ -1,4 +1,4 @@
-import type { PositionGameRowApiDto } from "../types";
+import type { GameSource, PositionGameRowApiDto } from "../types";
 export type PositionGamesPanelProps = {
     games: PositionGameRowApiDto[];
     lineLabel: string;
@@ -7,9 +7,11 @@ export type PositionGamesPanelProps = {
     defaultMinElo: number;
     defaultMaxElo: number;
     topOnly: boolean;
+    sources: GameSource[];
     onMinEloChange: (value: number) => void;
     onMaxEloChange: (value: number) => void;
     onTopOnlyChange: (value: boolean) => void;
+    onSourcesChange: (sources: GameSource[]) => void;
     onGameSelect?: (game: PositionGameRowApiDto) => void;
 };
-export declare const PositionGamesPanel: ({ games, lineLabel, minElo, maxElo, defaultMinElo, defaultMaxElo, topOnly, onMinEloChange, onMaxEloChange, onTopOnlyChange, onGameSelect, }: PositionGamesPanelProps) => import("react").JSX.Element;
+export declare const PositionGamesPanel: ({ games, lineLabel, minElo, maxElo, defaultMinElo, defaultMaxElo, topOnly, sources, onMinEloChange, onMaxEloChange, onTopOnlyChange, onSourcesChange, onGameSelect, }: PositionGamesPanelProps) => import("react").JSX.Element;

package/dist/features/explorer/core/renderProps.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { FetchPositionGamesParams, FetchPositionVariationsParams, PositionApiDto, PositionGameRowApiDto, PositionGamesApiDto, PositionMoveApiDto, PositionVariationLineApiDto, PositionVariationsApiDto } from "../types";
+import type { FetchPositionGamesParams, FetchPositionVariationsParams, GameSource, PositionApiDto, PositionGameRowApiDto, PositionGamesApiDto, PositionMoveApiDto, PositionVariationLineApiDto, PositionVariationsApiDto } from "../types";
 import type { VariationsTab } from "../variationLines";
 export type ReferenceLayoutRenderProps = {
     theme: "light" | "dark";
@@ -33,9 +33,11 @@ export type GamesPanelRenderProps = {
     defaultMinElo: number;
     defaultMaxElo: number;
     topOnly: boolean;
+    sources: GameSource[];
     onMinEloChange: (value: number) => void;
     onMaxEloChange: (value: number) => void;
     onTopOnlyChange: (value: boolean) => void;
+    onSourcesChange: (sources: GameSource[]) => void;
     /** Start replay training for a database game from the current board FEN. */
     onGameSelect?: (game: PositionGameRowApiDto) => void;
 };

package/dist/features/explorer/hooks/usePositionReferenceData.d.ts

@@ -1,4 +1,4 @@
-import type { FetchPositionGamesParams, PositionApiDto, PositionGamesApiDto, PositionMoveApiDto } from "../types";
+import { type FetchPositionGamesParams, type GameSource, type PositionApiDto, type PositionGamesApiDto, type PositionMoveApiDto } from "../types";
 import type { PositionVariationLineApiDto } from "../types";
 import type { VariationsTab } from "../variationLines";
 export type UsePositionReferenceDataOptions = {
@@ -20,6 +20,7 @@ export declare function usePositionReferenceData({ fenProp, onFenChange, initial
     minElo: number;
     maxElo: number;
     topOnly: boolean;
+    sources: GameSource[];
     loading: boolean;
     error: string | null;
     lineLabel: string;
@@ -31,6 +32,7 @@ export declare function usePositionReferenceData({ fenProp, onFenChange, initial
     setMinElo: import("react").Dispatch<import("react").SetStateAction<number>>;
     setMaxElo: import("react").Dispatch<import("react").SetStateAction<number>>;
     setTopOnly: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    setSources: import("react").Dispatch<import("react").SetStateAction<GameSource[]>>;
     setVariationsTab: import("react").Dispatch<import("react").SetStateAction<VariationsTab>>;
     setGamesMoveFilterUci: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
     handleMoveSelect: (move: PositionMoveApiDto) => void;

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

@@ -8,7 +8,8 @@ export { DEFAULT_REFERENCE_LAYOUT, DefaultReferenceLayout, DefaultReferencePanel
 export type { ReferenceLayoutConfig } from "./referenceLayout";
 export { GameReplayTrainer, type GameReplayTrainerProps, } from "./GameReplayTrainer";
 export { useGameReplayTraining } from "./hooks/useGameReplayTraining";
-export type { PositionApiDto, PositionGamesApiDto, PositionGameRowApiDto, PositionMoveApiDto, PositionVariationLineApiDto, PositionVariationsApiDto, FetchPositionGamesParams, FetchPositionVariationsParams, ExplorerGameReplayApiDto, } from "./types";
+export type { GameSource, PositionApiDto, PositionGamesApiDto, PositionGameRowApiDto, PositionMoveApiDto, PositionVariationLineApiDto, PositionVariationsApiDto, FetchPositionGamesParams, FetchPositionVariationsParams, ExplorerGameReplayApiDto, } from "./types";
+export { ALL_GAME_SOURCES } from "./types";
 export { mockFetchPosition, mockFetchPositionGames, mockFetchPositionVariations, } from "./mocks";
 export { applyLineSans, fenAfterUci, normalizeFen, whiteScorePercent, } from "./positionUtils";
 export { isVariationLineActive } from "./variationLines";

package/dist/features/explorer/types.d.ts

@@ -1,3 +1,5 @@
+export type GameSource = "lichess" | "twic";
+export declare const ALL_GAME_SOURCES: GameSource[];
 /** Align with endchess-backend GET /positions */
 export type PositionMoveApiDto = {
     san: string;
@@ -13,7 +15,6 @@ export type PositionApiDto = {
     fen: string;
     totalGames: number;
     moves: PositionMoveApiDto[];
-    sampleGameIds: string[];
 };
 /** Align with endchess-backend GET /positions/games */
 export type PositionGameRowApiDto = {
@@ -31,6 +32,7 @@ export type PositionGameRowApiDto = {
     nextSan: string;
     nextUci: string;
     avgElo: number;
+    source: GameSource;
 };
 export type PositionGamesApiDto = {
     positionKey: string;
@@ -48,6 +50,7 @@ export type FetchPositionGamesParams = {
     uci?: string;
     topOnly: boolean;
     limit?: number;
+    sources?: GameSource[];
 };
 /** Align with endchess-backend GET /positions/variations */
 export type PositionVariationLineApiDto = {
@@ -91,6 +94,7 @@ export type ExplorerGameReplayApiDto = {
     event?: string;
     timeControl?: string;
     timeClass?: string;
+    source: GameSource;
     movesUci: string[];
     movesSan: string[];
 };

package/dist/index.esm.js

@@ -284,12 +284,24 @@ const linkStyle = {
     textUnderlineOffset: 2,
 };
 const LichessGameLink = ({ url, name }) => (jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", style: linkStyle, children: name }));
-const GamesTable = ({ games, onGameSelect }) => (jsxs("table", { style: tableStyle, children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { style: thStyle, children: "White" }), jsx("th", { style: thStyle, children: "Elo" }), jsx("th", { style: thStyle, children: "Black" }), jsx("th", { style: thStyle, children: "Elo" }), jsx("th", { style: thStyle, children: "Result" }), onGameSelect && jsx("th", { style: thStyle })] }) }), jsx("tbody", { children: games.length === 0 ? (jsx("tr", { children: 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) => (jsxs("tr", { children: [jsx("td", { style: tdStyle, children: jsx(LichessGameLink, { url: g.url, name: g.white }) }), jsx("td", { style: tdStyle, children: g.whiteElo }), jsx("td", { style: tdStyle, children: jsx(LichessGameLink, { url: g.url, name: g.black }) }), jsx("td", { style: tdStyle, children: g.blackElo }), jsx("td", { style: tdStyle, children: g.result }), onGameSelect && (jsx("td", { style: tdStyle, children: jsx("button", { type: "button", onClick: () => onGameSelect(g), children: "Train" }) }))] }, g.gameId)))) })] }));
+const GamesTable = ({ games, onGameSelect }) => (jsxs("table", { style: tableStyle, children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { style: thStyle, children: "White" }), jsx("th", { style: thStyle, children: "Elo" }), jsx("th", { style: thStyle, children: "Black" }), jsx("th", { style: thStyle, children: "Elo" }), jsx("th", { style: thStyle, children: "Result" }), jsx("th", { style: thStyle, children: "Source" }), onGameSelect && jsx("th", { style: thStyle })] }) }), jsx("tbody", { children: games.length === 0 ? (jsx("tr", { children: jsx("td", { colSpan: onGameSelect ? 7 : 6, 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) => (jsxs("tr", { children: [jsx("td", { style: tdStyle, children: jsx(LichessGameLink, { url: g.url, name: g.white }) }), jsx("td", { style: tdStyle, children: g.whiteElo }), jsx("td", { style: tdStyle, children: jsx(LichessGameLink, { url: g.url, name: g.black }) }), jsx("td", { style: tdStyle, children: g.blackElo }), jsx("td", { style: tdStyle, children: g.result }), jsx("td", { style: tdStyle, children: g.source === "twic" ? "Master" : "Lichess" }), onGameSelect && (jsx("td", { style: tdStyle, children: 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, }) => (jsxs("div", { style: gamesSectionStyle, children: [jsx("div", { style: gamesHeaderStyle, children: lineLabel ? (jsxs(Fragment, { children: [jsx("span", { style: mainLineTitleStyle, children: "Main line: " }), lineLabel, jsxs("span", { style: { opacity: 0.75 }, children: [" (", games.length, " games)"] })] })) : (jsxs("span", { children: ["Games ", jsxs("span", { style: { opacity: 0.75 }, children: ["(", games.length, ")"] })] })) }), jsx("div", { style: gamesScrollStyle, children: jsx(GamesTable, { games: games, onGameSelect: onGameSelect }) }), jsxs("div", { style: gamesToolbarStyle, children: [jsx(EloRangeFilter, { minElo: minElo, maxElo: maxElo, defaultMinElo: defaultMinElo, defaultMaxElo: defaultMaxElo, onMinEloChange: onMinEloChange, onMaxEloChange: onMaxEloChange }), jsxs("label", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [jsx("input", { type: "checkbox", checked: topOnly, onChange: (e) => onTopOnlyChange(e.target.checked) }), "Top games"] })] })] }));
+const PositionGamesPanel = ({ games, lineLabel, minElo, maxElo, defaultMinElo, defaultMaxElo, topOnly, sources, onMinEloChange, onMaxEloChange, onTopOnlyChange, onSourcesChange, onGameSelect, }) => {
+    const toggleSource = (source) => {
+        if (sources.includes(source)) {
+            if (sources.length === 1) {
+                return;
+            }
+            onSourcesChange(sources.filter((value) => value !== source));
+            return;
+        }
+        onSourcesChange([...sources, source]);
+    };
+    return (jsxs("div", { style: gamesSectionStyle, children: [jsx("div", { style: gamesHeaderStyle, children: lineLabel ? (jsxs(Fragment, { children: [jsx("span", { style: mainLineTitleStyle, children: "Main line: " }), lineLabel, jsxs("span", { style: { opacity: 0.75 }, children: [" (", games.length, " games)"] })] })) : (jsxs("span", { children: ["Games ", jsxs("span", { style: { opacity: 0.75 }, children: ["(", games.length, ")"] })] })) }), jsx("div", { style: gamesScrollStyle, children: jsx(GamesTable, { games: games, onGameSelect: onGameSelect }) }), jsxs("div", { style: gamesToolbarStyle, children: [jsx(EloRangeFilter, { minElo: minElo, maxElo: maxElo, defaultMinElo: defaultMinElo, defaultMaxElo: defaultMaxElo, onMinEloChange: onMinEloChange, onMaxEloChange: onMaxEloChange }), jsxs("label", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [jsx("input", { type: "checkbox", checked: topOnly, onChange: (e) => onTopOnlyChange(e.target.checked) }), "Top games"] }), jsxs("label", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [jsx("input", { type: "checkbox", checked: sources.includes("lichess"), onChange: () => toggleSource("lichess") }), "Lichess"] }), jsxs("label", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [jsx("input", { type: "checkbox", checked: sources.includes("twic"), onChange: () => toggleSource("twic") }), "Master"] })] })] }));
+};
 
 const DefaultReferenceLayout = ({ board, referencePanel, }) => (jsxs("div", { style: referenceShellStyle, children: [jsx("div", { style: boardColumnStyle, children: board }), referencePanel] }));
 const defaultRenderLayout = (props) => (jsx(DefaultReferenceLayout, Object.assign({}, props)));
@@ -367,6 +379,8 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+const ALL_GAME_SOURCES = ["lichess", "twic"];
+
 function usePositionHistory(initialFen) {
     const [history, setHistory] = useState([
         { fen: initialFen },
@@ -448,6 +462,7 @@ function usePositionReferenceData({ fenProp, onFenChange, initialLineSans, onLin
     const [minElo, setMinElo] = useState(defaultMinElo);
     const [maxElo, setMaxElo] = useState(defaultMaxElo);
     const [topOnly, setTopOnly] = useState(false);
+    const [sources, setSources] = useState([...ALL_GAME_SOURCES]);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
     const [variationsTab, setVariationsTab] = useState("variations");
@@ -540,6 +555,7 @@ function usePositionReferenceData({ fenProp, onFenChange, initialLineSans, onLin
                         maxElo,
                         uci: gamesMoveFilterUci,
                         topOnly,
+                        sources: sources.length < ALL_GAME_SOURCES.length ? sources : undefined,
                     }),
                 ]);
                 if (cancelled)
@@ -569,6 +585,7 @@ function usePositionReferenceData({ fenProp, onFenChange, initialLineSans, onLin
         maxElo,
         gamesMoveFilterUci,
         topOnly,
+        sources,
         fetchPosition,
         fetchPositionGames,
     ]);
@@ -675,6 +692,7 @@ function usePositionReferenceData({ fenProp, onFenChange, initialLineSans, onLin
         minElo,
         maxElo,
         topOnly,
+        sources,
         loading,
         error,
         lineLabel,
@@ -686,6 +704,7 @@ function usePositionReferenceData({ fenProp, onFenChange, initialLineSans, onLin
         setMinElo,
         setMaxElo,
         setTopOnly,
+        setSources,
         setVariationsTab,
         setGamesMoveFilterUci,
         handleMoveSelect,
@@ -761,7 +780,7 @@ const PositionReferenceExplorerCore = ({ fen: fenProp, onFenChange, initialLineS
         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 { fen, boardFen, position, games, minElo, maxElo, topOnly, sources, loading, error, lineLabel, canGoBack, canGoForward, variationsTab, forwardSans, selectedVariationKey, setMinElo, setMaxElo, setTopOnly, setSources, setVariationsTab, handleMoveSelect, handleLineSelect, handlePieceDrop, handleBack, handleForward, } = referenceData;
     const { lines: variationLines, loading: variationLinesLoading } = useVariationLines({
         fen,
         tab: variationsTab,
@@ -803,9 +822,11 @@ const PositionReferenceExplorerCore = ({ fen: fenProp, onFenChange, initialLineS
             defaultMinElo,
             defaultMaxElo,
             topOnly,
+            sources,
             onMinEloChange: setMinElo,
             onMaxEloChange: setMaxElo,
             onTopOnlyChange: setTopOnly,
+            onSourcesChange: setSources,
             onGameSelect,
         }) }));
     return (jsx(ThemeProvider, { theme: theme, children: jsx("div", { style: outerStyle, children: renderLayout({ theme, board, referencePanel }) }) }));
@@ -1016,7 +1037,6 @@ const mockPosition = {
             avgElo: 2435,
         },
     ],
-    sampleGameIds: ["abc123", "def456"],
 };
 const mockGames = {
     positionKey: "mock-start",
@@ -1037,6 +1057,7 @@ const mockGames = {
             nextSan: "e4",
             nextUci: "e2e4",
             avgElo: 2843,
+            source: "lichess",
         },
         {
             gameId: "def456",
@@ -1050,6 +1071,7 @@ const mockGames = {
             nextSan: "d4",
             nextUci: "d2d4",
             avgElo: 2778,
+            source: "twic",
         },
     ],
 };
@@ -1095,11 +1117,15 @@ function mockFetchPositionVariations(params) {
 }
 function mockFetchPositionGames(params) {
     return __awaiter(this, void 0, void 0, function* () {
-        const filtered = params.uci
+        var _a;
+        let filtered = params.uci
             ? mockGames.games.filter((g) => g.nextUci === params.uci)
             : mockGames.games;
+        if ((_a = params.sources) === null || _a === void 0 ? void 0 : _a.length) {
+            filtered = filtered.filter((game) => params.sources.includes(game.source));
+        }
         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 });
     });
 }
 
-export { DEFAULT_REFERENCE_LAYOUT, DefaultBoardNav, DefaultReferenceLayout, DefaultReferencePanel, DefaultVariationsStrip, EXPLORER_START_FEN, ExplorerPlaceholder, GameReplayTrainer, PositionReferenceExplorer, PositionReferenceExplorerCore, applyLineSans, defaultRenderBoardNav, defaultRenderGamesPanel, defaultRenderLayout, defaultRenderMoveStats, defaultRenderStatus, defaultRenderVariationsStrip, fenAfterUci, fenAtPly, findPlyIndexForFen, isVariationLineActive, mockFetchPosition, mockFetchPositionGames, mockFetchPositionVariations, normalizeFen, useGameReplayTraining, whiteScorePercent };
+export { ALL_GAME_SOURCES, DEFAULT_REFERENCE_LAYOUT, DefaultBoardNav, DefaultReferenceLayout, DefaultReferencePanel, DefaultVariationsStrip, EXPLORER_START_FEN, ExplorerPlaceholder, GameReplayTrainer, PositionReferenceExplorer, PositionReferenceExplorerCore, applyLineSans, defaultRenderBoardNav, defaultRenderGamesPanel, defaultRenderLayout, defaultRenderMoveStats, defaultRenderStatus, defaultRenderVariationsStrip, fenAfterUci, fenAtPly, findPlyIndexForFen, isVariationLineActive, mockFetchPosition, mockFetchPositionGames, mockFetchPositionVariations, normalizeFen, useGameReplayTraining, whiteScorePercent };

package/dist/index.js

@@ -286,12 +286,24 @@ const linkStyle = {
     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 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" }), jsxRuntime.jsx("th", { style: thStyle, children: "Source" }), onGameSelect && jsxRuntime.jsx("th", { style: thStyle })] }) }), jsxRuntime.jsx("tbody", { children: games.length === 0 ? (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: onGameSelect ? 7 : 6, 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 }), jsxRuntime.jsx("td", { style: tdStyle, children: g.source === "twic" ? "Master" : "Lichess" }), 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 PositionGamesPanel = ({ games, lineLabel, minElo, maxElo, defaultMinElo, defaultMaxElo, topOnly, sources, onMinEloChange, onMaxEloChange, onTopOnlyChange, onSourcesChange, onGameSelect, }) => {
+    const toggleSource = (source) => {
+        if (sources.includes(source)) {
+            if (sources.length === 1) {
+                return;
+            }
+            onSourcesChange(sources.filter((value) => value !== source));
+            return;
+        }
+        onSourcesChange([...sources, source]);
+    };
+    return (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"] }), jsxRuntime.jsxs("label", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: sources.includes("lichess"), onChange: () => toggleSource("lichess") }), "Lichess"] }), jsxRuntime.jsxs("label", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: sources.includes("twic"), onChange: () => toggleSource("twic") }), "Master"] })] })] }));
+};
 
 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)));
@@ -369,6 +381,8 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+const ALL_GAME_SOURCES = ["lichess", "twic"];
+
 function usePositionHistory(initialFen) {
     const [history, setHistory] = react.useState([
         { fen: initialFen },
@@ -450,6 +464,7 @@ function usePositionReferenceData({ fenProp, onFenChange, initialLineSans, onLin
     const [minElo, setMinElo] = react.useState(defaultMinElo);
     const [maxElo, setMaxElo] = react.useState(defaultMaxElo);
     const [topOnly, setTopOnly] = react.useState(false);
+    const [sources, setSources] = react.useState([...ALL_GAME_SOURCES]);
     const [loading, setLoading] = react.useState(false);
     const [error, setError] = react.useState(null);
     const [variationsTab, setVariationsTab] = react.useState("variations");
@@ -542,6 +557,7 @@ function usePositionReferenceData({ fenProp, onFenChange, initialLineSans, onLin
                         maxElo,
                         uci: gamesMoveFilterUci,
                         topOnly,
+                        sources: sources.length < ALL_GAME_SOURCES.length ? sources : undefined,
                     }),
                 ]);
                 if (cancelled)
@@ -571,6 +587,7 @@ function usePositionReferenceData({ fenProp, onFenChange, initialLineSans, onLin
         maxElo,
         gamesMoveFilterUci,
         topOnly,
+        sources,
         fetchPosition,
         fetchPositionGames,
     ]);
@@ -677,6 +694,7 @@ function usePositionReferenceData({ fenProp, onFenChange, initialLineSans, onLin
         minElo,
         maxElo,
         topOnly,
+        sources,
         loading,
         error,
         lineLabel,
@@ -688,6 +706,7 @@ function usePositionReferenceData({ fenProp, onFenChange, initialLineSans, onLin
         setMinElo,
         setMaxElo,
         setTopOnly,
+        setSources,
         setVariationsTab,
         setGamesMoveFilterUci,
         handleMoveSelect,
@@ -763,7 +782,7 @@ const PositionReferenceExplorerCore = ({ fen: fenProp, onFenChange, initialLineS
         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 { fen, boardFen, position, games, minElo, maxElo, topOnly, sources, loading, error, lineLabel, canGoBack, canGoForward, variationsTab, forwardSans, selectedVariationKey, setMinElo, setMaxElo, setTopOnly, setSources, setVariationsTab, handleMoveSelect, handleLineSelect, handlePieceDrop, handleBack, handleForward, } = referenceData;
     const { lines: variationLines, loading: variationLinesLoading } = useVariationLines({
         fen,
         tab: variationsTab,
@@ -805,9 +824,11 @@ const PositionReferenceExplorerCore = ({ fen: fenProp, onFenChange, initialLineS
             defaultMinElo,
             defaultMaxElo,
             topOnly,
+            sources,
             onMinEloChange: setMinElo,
             onMaxEloChange: setMaxElo,
             onTopOnlyChange: setTopOnly,
+            onSourcesChange: setSources,
             onGameSelect,
         }) }));
     return (jsxRuntime.jsx(reactChessCore.ThemeProvider, { theme: theme, children: jsxRuntime.jsx("div", { style: outerStyle, children: renderLayout({ theme, board, referencePanel }) }) }));
@@ -1018,7 +1039,6 @@ const mockPosition = {
             avgElo: 2435,
         },
     ],
-    sampleGameIds: ["abc123", "def456"],
 };
 const mockGames = {
     positionKey: "mock-start",
@@ -1039,6 +1059,7 @@ const mockGames = {
             nextSan: "e4",
             nextUci: "e2e4",
             avgElo: 2843,
+            source: "lichess",
         },
         {
             gameId: "def456",
@@ -1052,6 +1073,7 @@ const mockGames = {
             nextSan: "d4",
             nextUci: "d2d4",
             avgElo: 2778,
+            source: "twic",
         },
     ],
 };
@@ -1097,13 +1119,18 @@ function mockFetchPositionVariations(params) {
 }
 function mockFetchPositionGames(params) {
     return __awaiter(this, void 0, void 0, function* () {
-        const filtered = params.uci
+        var _a;
+        let filtered = params.uci
             ? mockGames.games.filter((g) => g.nextUci === params.uci)
             : mockGames.games;
+        if ((_a = params.sources) === null || _a === void 0 ? void 0 : _a.length) {
+            filtered = filtered.filter((game) => params.sources.includes(game.source));
+        }
         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.ALL_GAME_SOURCES = ALL_GAME_SOURCES;
 exports.DEFAULT_REFERENCE_LAYOUT = DEFAULT_REFERENCE_LAYOUT;
 exports.DefaultBoardNav = DefaultBoardNav;
 exports.DefaultReferenceLayout = DefaultReferenceLayout;

package/dist/stories/PositionReferenceExplorer.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PositionReferenceExplorer } from "../features/explorer/PositionReferenceExplorer";
+declare const meta: Meta<typeof PositionReferenceExplorer>;
+export default meta;
+type Story = StoryObj<typeof PositionReferenceExplorer>;
+/** 100 sample games after 1.e4 e5 2.Nf3 Nc6 — Open Game / Italian–Spanish tabiya. */
+export declare const Nc6100Games: Story;
+export declare const LightTheme: Story;
+export declare const StartingPosition: Story;
+export declare const WithReplayFetch: Story;

package/dist/stories/fixtures/nc6MockApi.d.ts

@@ -0,0 +1,13 @@
+import type { FetchPositionGamesParams, FetchPositionVariationsParams, PositionGamesApiDto, PositionVariationsApiDto } from "../../features/explorer/types";
+import { nc6SampleGames, NC6_TABIYA_FEN } from "./nc6SampleGames";
+export declare function nc6FetchPosition(fen: string): Promise<import("../..").PositionApiDto | null>;
+export declare function nc6FetchPositionGames(params: FetchPositionGamesParams): Promise<PositionGamesApiDto>;
+export declare function nc6FetchPositionVariations(params: FetchPositionVariationsParams): Promise<PositionVariationsApiDto | null>;
+export declare function nc6FetchGame(gameId: string): Promise<(import("../..").ExplorerGameReplayApiDto & {
+    avgElo: number;
+    occurrences: Map<string, {
+        nextSan: string;
+        nextUci: string;
+    }>;
+}) | null>;
+export { NC6_TABIYA_FEN, nc6SampleGames };

package/dist/stories/fixtures/nc6SampleGames.d.ts

@@ -0,0 +1,39 @@
+import type { ExplorerGameReplayApiDto, PositionApiDto, PositionGameRowApiDto, PositionMoveApiDto } from "../../features/explorer/types";
+export declare const NC6_OPENING_SANS: readonly ["e4", "e5", "Nf3", "Nc6"];
+export declare const NC6_GAME_COUNT = 100;
+export declare const NC6_GAME_ID_PREFIX = "nc6-sb-";
+type MoveBucket = {
+    san: string;
+    uci: string;
+    games: number;
+    whiteWins: number;
+    draws: number;
+    blackWins: number;
+    eloSum: number;
+};
+type PositionBucket = {
+    fen: string;
+    totalGames: number;
+    moves: Map<string, MoveBucket>;
+    gameRows: PositionGameRowApiDto[];
+};
+type BuiltGame = ExplorerGameReplayApiDto & {
+    avgElo: number;
+    occurrences: Map<string, {
+        nextSan: string;
+        nextUci: string;
+    }>;
+};
+export declare const NC6_TABIYA_FEN: string;
+export declare const nc6SampleGames: BuiltGame[];
+export declare const nc6PositionBuckets: Map<string, PositionBucket>;
+export declare function nc6PositionForFen(fen: string): PositionApiDto | null;
+export declare function nc6GamesForPosition(fen: string, options: {
+    minElo: number;
+    maxElo: number;
+    uci?: string;
+    topOnly: boolean;
+    sources?: ("lichess" | "twic")[];
+}): PositionGameRowApiDto[];
+export declare function nc6ScorePercentForMove(move: PositionMoveApiDto): number | null;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-chess-explorer",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "React components for browsing and replaying chess games (depends on react-chess-core only)",
   "license": "MIT",
   "author": "Robert Blackwell",
@@ -16,7 +16,9 @@
   ],
   "scripts": {
     "build": "rollup -c",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "storybook": "storybook dev -p 6008",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "rollup": "^4.22.2",
@@ -30,16 +32,28 @@
     "react-chessboard": "^4.7.1"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.9.0",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^12.3.0",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-onboarding": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/preset-typescript": "^3.0.0",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-vite": "^8.2.9",
+    "@storybook/test": "^8.2.9",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.1",
     "chess.js": "^1.0.0-beta.8",
     "react": "^18.3.1",
     "react-chess-core": "^0.1.0",
     "react-chessboard": "^4.7.1",
     "react-dom": "^18.3.1",
+    "storybook": "^8.2.9",
     "tslib": "^2.8.1"
   }
 }