kokopu-react 3.4.0 → 3.4.2

package/CHANGELOG.md

@@ -1,6 +1,14 @@
 ChangeLog
 =========
 
+3.4.2 (July 18, 2026)
+---------------------
+* Minor fixes.
+
+3.4.1 (May 10, 2026)
+--------------------
+* Minor fixes.
+
 3.4.0 (January 11, 2026)
 ------------------------
 * Add an optional sound effect when a move is displayed in `Chessboard` or `NavigationBoard`.

package/dist/lib/icons/ChessPieceIcon.js

@@ -30,16 +30,16 @@ import { piecesets, DEFAULT_PIECESET } from '../chessboard/piecesets';
  */
 export function ChessPieceIcon({ size, type, pieceset = DEFAULT_PIECESET }) {
     // Sanitize the inputs.
-    size = sanitizeBoundedInteger(size, MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, () => new IllegalArgument('ChessPieceIcon', 'size'));
+    const localSize = sanitizeBoundedInteger(size, MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, () => new IllegalArgument('ChessPieceIcon', 'size'));
     const types = sanitizeChessPieceIconType(type, () => new IllegalArgument('ChessPieceIcon', 'type'));
     const piecesetData = piecesets[pieceset];
     if (!piecesetData) {
         throw new IllegalArgument('ChessPieceIcon', 'pieceset');
     }
     // Render the component.
-    const width = size * types.length;
-    const viewBox = `0 0 ${width} ${size}`;
-    return (React.createElement("svg", { className: "kokopu-chessPieceIcon", viewBox: viewBox, width: width, height: size }, types.map((t, i) => React.createElement("image", { key: i, x: i * size, y: 0, width: size, height: size, href: piecesetData[t] }))));
+    const width = localSize * types.length;
+    const viewBox = `0 0 ${width} ${localSize}`;
+    return (React.createElement("svg", { className: "kokopu-chessPieceIcon", viewBox: viewBox, width: width, height: localSize }, types.map((t, i) => React.createElement("image", { key: i, x: i * localSize, y: 0, width: localSize, height: localSize, href: piecesetData[t] }))));
 }
 /**
  * Sanitization method for the small-screen limits parameter.

package/dist/lib/icons/ChessPieceIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChessPieceIcon.js","sourceRoot":"","sources":["../../../src/icons/ChessPieceIcon.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;gFAqBgF;AAGhF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,eAAe,EAAsB,oBAAoB,EAAE,MAAM,UAAU,CAAC;AACtG,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAsBtE;;GAEG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,GAAG,gBAAgB,EAAuB;IAE3F,uBAAuB;IACvB,IAAI,GAAG,sBAAsB,CAAC,IAAI,EAAE,eAAe,EAAE,eAAe,EAAE,GAAG,EAAE,CAAC,IAAI,eAAe,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC,CAAC;IAC3H,MAAM,KAAK,GAAG,0BAA0B,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,eAAe,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC,CAAC;IACpG,MAAM,YAAY,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC;IACzC,IAAI,CAAC,YAAY,EAAE,CAAC;QAChB,MAAM,IAAI,eAAe,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;IAC5D,CAAC;IAED,wBAAwB;IACxB,MAAM,KAAK,GAAG,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC;IAClC,MAAM,OAAO,GAAG,OAAO,KAAK,IAAI,IAAI,EAAE,CAAC;IACvC,OAAO,CACH,6BAAK,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,IAC9E,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,+BAAO,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,GAAI,CAAC,CAC1G,CACT,CAAC;AACN,CAAC;AAGD;;GAEG;AACH,SAAS,0BAA0B,CAAC,IAA+C,EAAE,gBAAuC;IACxH,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;QACtB,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;YAChB,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC3B,MAAM,gBAAgB,EAAE,CAAC;YAC7B,CAAC;YACD,OAAO,CAAC,CAAC;QACb,CAAC,CAAC,CAAC;IACP,CAAC;SACI,IAAI,oBAAoB,CAAC,IAAI,CAAC,EAAE,CAAC;QAClC,OAAO,CAAE,IAAI,CAAE,CAAC;IACpB,CAAC;SACI,CAAC;QACF,MAAM,gBAAgB,EAAE,CAAC;IAC7B,CAAC;AACL,CAAC"}
+{"version":3,"file":"ChessPieceIcon.js","sourceRoot":"","sources":["../../../src/icons/ChessPieceIcon.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;gFAqBgF;AAGhF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,eAAe,EAAsB,oBAAoB,EAAE,MAAM,UAAU,CAAC;AACtG,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAsBtE;;GAEG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,GAAG,gBAAgB,EAAuB;IAE3F,uBAAuB;IACvB,MAAM,SAAS,GAAG,sBAAsB,CAAC,IAAI,EAAE,eAAe,EAAE,eAAe,EAAE,GAAG,EAAE,CAAC,IAAI,eAAe,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC,CAAC;IACtI,MAAM,KAAK,GAAG,0BAA0B,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,eAAe,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC,CAAC;IACpG,MAAM,YAAY,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC;IACzC,IAAI,CAAC,YAAY,EAAE,CAAC;QAChB,MAAM,IAAI,eAAe,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;IAC5D,CAAC;IAED,wBAAwB;IACxB,MAAM,KAAK,GAAG,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;IACvC,MAAM,OAAO,GAAG,OAAO,KAAK,IAAI,SAAS,EAAE,CAAC;IAC5C,OAAO,CACH,6BAAK,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,IACnF,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,+BAAO,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,GAAI,CAAC,CACzH,CACT,CAAC;AACN,CAAC;AAGD;;GAEG;AACH,SAAS,0BAA0B,CAAC,IAA+C,EAAE,gBAAuC;IACxH,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;QACtB,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;YAChB,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC3B,MAAM,gBAAgB,EAAE,CAAC;YAC7B,CAAC;YACD,OAAO,CAAC,CAAC;QACb,CAAC,CAAC,CAAC;IACP,CAAC;SACI,IAAI,oBAAoB,CAAC,IAAI,CAAC,EAAE,CAAC;QAClC,OAAO,CAAE,IAAI,CAAE,CAAC;IACpB,CAAC;SACI,CAAC;QACF,MAAM,gBAAgB,EAAE,CAAC;IAC7B,CAAC;AACL,CAAC"}

package/dist/lib/navigationboard/NavigationBoard.d.ts

@@ -151,7 +151,7 @@ export declare class NavigationBoard extends React.Component<NavigationBoardProp
         turnVisible: boolean;
         colorset: string;
         pieceset: string;
-        smallScreenLimits?: import("../chessboard/BoardProperties").SmallScreenLimit[];
+        smallScreenLimits?: import("..").SmallScreenLimit[];
     };
     private navigationFieldRef;
     private timeoutId?;

package/doc_src/demo/PageChessboardBase.tsx

@@ -77,7 +77,7 @@ export default class Page extends React.Component<object, PageState> {
 
     render() {
         return (
-            <Stack spacing={2} mt={2}>
+            <Stack spacing={2} sx={{ mt: 2 }}>
                 {this.renderControls()}
                 {this.renderChessboard()}
                 {this.renderCode()}
@@ -88,7 +88,7 @@ export default class Page extends React.Component<object, PageState> {
     private renderControls() {
         return (
             <>
-                <Stack direction="row" spacing={2} alignItems="center">
+                <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
                     <FormControlLabel
                         label="Flip"
                         control={<Switch checked={this.state.flipped} onChange={() => this.setState({ flipped: !this.state.flipped })} color="primary" />}
@@ -113,7 +113,7 @@ export default class Page extends React.Component<object, PageState> {
                         min={Chessboard.minSquareSize()} max={Chessboard.maxSquareSize()} step={1} valueLabelDisplay="on" color="primary"
                     />
                 </Box>
-                <Stack direction="row" spacing={2} alignItems="center">
+                <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
                     <FormControl variant="standard">
                         <InputLabel id="colorset-label">Colorset</InputLabel>
                         <Select labelId="colorset-label" sx={{ width: '8em' }} value={this.state.colorset} onChange={evt => this.setState({ colorset: evt.target.value })}>

package/doc_src/demo/PageChessboardInteraction.tsx

@@ -87,7 +87,7 @@ export default class Page extends React.Component<object, PageState> {
 
     render() {
         return (
-            <Stack spacing={2} mt={2}>
+            <Stack spacing={2} sx={{ mt: 2 }}>
                 {this.renderControls()}
                 {this.renderChessboard()}
                 {this.renderCode()}
@@ -98,7 +98,7 @@ export default class Page extends React.Component<object, PageState> {
     private renderControls() {
         return (
             <>
-                <Stack direction="row" spacing={2} alignItems="center">
+                <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
                     <FormControlLabel
                         label="Flip"
                         control={<Switch checked={this.state.flipped} onChange={() => this.setState({ flipped: !this.state.flipped })} color="primary" />}
@@ -118,7 +118,7 @@ export default class Page extends React.Component<object, PageState> {
                         <FormControlLabel
                             value="addRemovePieces" control={<Radio color="primary" />}
                             label={(
-                                <Stack direction="row" spacing={2} alignItems="center">
+                                <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
                                     <span>Add/remove pieces</span>
                                     {this.renderPieceSelector()}
                                 </Stack>
@@ -129,7 +129,7 @@ export default class Page extends React.Component<object, PageState> {
                         <FormControlLabel
                             value="editSquareMarkers" control={<Radio color="primary" />}
                             label={(
-                                <Stack direction="row" spacing={2} alignItems="center">
+                                <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
                                     <span>Edit square annotations</span>
                                     {this.renderMarkerColorSelector('editSquareMarkers', this.state.squareMarkerColor, newColor => this.handleSquareMarkerColorChanged(newColor))}
                                 </Stack>
@@ -138,7 +138,7 @@ export default class Page extends React.Component<object, PageState> {
                         <FormControlLabel
                             value="editTextMarkers" control={<Radio color="primary" />}
                             label={(
-                                <Stack direction="row" spacing={2} alignItems="center">
+                                <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
                                     <span>Edit text annotations</span>
                                     {this.renderMarkerColorSelector('editTextMarkers', this.state.textMarkerColor, newColor => this.handleTextMarkerColorChanged(newColor))}
                                     {this.renderTextMarkerSymbolSelector()}
@@ -148,7 +148,7 @@ export default class Page extends React.Component<object, PageState> {
                         <FormControlLabel
                             value="editArrowMarkers" control={<Radio color="primary" />}
                             label={(
-                                <Stack direction="row" spacing={2} alignItems="center">
+                                <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
                                     <span>Edit arrow annotations</span>
                                     {this.renderMarkerColorSelector('editArrowMarkers', this.state.arrowMarkerColor, newColor => this.handleArrowMarkerColorChanged(newColor))}
                                 </Stack>

package/doc_src/demo/PageChessboardMove.tsx

@@ -78,7 +78,7 @@ export default class Page extends React.Component<object, PageState> {
 
     render() {
         return (
-            <Stack spacing={2} mt={2}>
+            <Stack spacing={2} sx={{ mt: 2 }}>
                 {this.renderControls()}
                 {this.renderChessboard()}
                 {this.renderCode()}
@@ -89,7 +89,7 @@ export default class Page extends React.Component<object, PageState> {
     private renderControls() {
         return (
             <>
-                <Stack direction="row" spacing={2} alignItems="center">
+                <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
                     <FormControlLabel
                         label="Flip"
                         control={<Switch checked={this.state.flipped} onChange={() => this.setState({ flipped: !this.state.flipped })} color="primary" />}
@@ -108,7 +108,7 @@ export default class Page extends React.Component<object, PageState> {
                     />
                     {this.renderColorSelector()}
                 </Stack>
-                <Stack direction="row" spacing={2} alignItems="center">
+                <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
                     <TextField label="Move" variant="standard" value={this.state.editedMove} onChange={evt => this.setState({ editedMove: evt.target.value })} />
                     <Button color="primary" size="small" variant="contained" onClick={() => this.handlePlayClicked()}>Play</Button>
                     <ButtonGroup color="primary" size="small">

package/doc_src/demo/PageChessboardSmallScreens.tsx

@@ -75,7 +75,7 @@ export default class Page extends React.Component<object, PageState> {
 
     render() {
         return (
-            <Stack spacing={2} mt={2}>
+            <Stack spacing={2} sx={{ mt: 2 }}>
                 {this.renderControls()}
                 {this.renderChessboard()}
                 {this.renderCode()}

package/doc_src/demo/PageMovetextBase.tsx

@@ -87,7 +87,7 @@ export default class Page extends React.Component<object, PageState> {
 
     render() {
         return (
-            <Stack spacing={2} mt={2}>
+            <Stack spacing={2} sx={{ mt: 2 }}>
                 {this.renderControls()}
                 {this.renderMovetext()}
                 {this.renderCode()}
@@ -99,7 +99,7 @@ export default class Page extends React.Component<object, PageState> {
         const opts = this.state.diagramOptions;
         return (
             <>
-                <Stack direction="row" spacing={2} alignItems="center">
+                <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
                     <ButtonGroup color="primary" size="small">
                         <Button onClick={() => this.setState({ pgn: game1 })}>Game 1</Button>
                         <Button onClick={() => this.setState({ pgn: game2 })}>Game 2</Button>
@@ -114,7 +114,7 @@ export default class Page extends React.Component<object, PageState> {
                         control={<Switch checked={this.state.diagramVisible} onChange={() => this.setState({ diagramVisible: !this.state.diagramVisible })} color="primary" />}
                     />
                 </Stack>
-                <Stack direction="row" spacing={2} alignItems="center">
+                <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
                     <FormControl variant="standard">
                         <InputLabel id="piecesymbols-label">Piece symbols</InputLabel>
                         <Select
@@ -128,7 +128,7 @@ export default class Page extends React.Component<object, PageState> {
                     </FormControl>
                     {this.renderCustomSymbolSelector()}
                 </Stack>
-                <Stack direction="row" spacing={2} alignItems="center">
+                <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
                     <FormControlLabel
                         label="Flip diagram(s)"
                         control={<Switch checked={opts.flipped} onChange={() => this.setDiagramOption({ flipped: !opts.flipped })} color="primary" />}
@@ -142,7 +142,7 @@ export default class Page extends React.Component<object, PageState> {
                         control={<Switch checked={opts.turnVisible} onChange={() => this.setDiagramOption({ turnVisible: !opts.turnVisible })} color="primary" />}
                     />
                 </Stack>
-                <Stack direction="row" spacing={2} alignItems="center">
+                <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
                     <FormControl variant="standard">
                         <InputLabel id="colorset-label">Colorset</InputLabel>
                         <Select labelId="colorset-label" sx={{ width: '8em' }} value={opts.colorset} onChange={evt => this.setDiagramOption({ colorset: evt.target.value })}>

package/doc_src/demo/PageMovetextInteraction.tsx

@@ -65,7 +65,7 @@ export default class Page extends React.Component<object, PageState> {
 
     render() {
         return (
-            <Stack spacing={2} mt={2}>
+            <Stack spacing={2} sx={{ mt: 2 }}>
                 {this.renderControls()}
                 {this.renderMovetext()}
                 {this.renderCode()}
@@ -77,7 +77,7 @@ export default class Page extends React.Component<object, PageState> {
     private renderControls() {
         return (
             <>
-                <Stack direction="row" spacing={2} alignItems="center">
+                <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
                     <ButtonGroup color="primary" size="small">
                         <Button onClick={() => this.setState({ pgn: game1, selection: '28b' })}>Game 1</Button>
                         <Button onClick={() => this.setState({ pgn: game2, selection: '15b' })}>Game 2</Button>

package/doc_src/demo/PageNavigationBoardBase.tsx

@@ -83,7 +83,7 @@ export default class Page extends React.Component<object, PageState> {
 
     render() {
         return (
-            <Stack spacing={2} mt={2}>
+            <Stack spacing={2} sx={{ mt: 2 }}>
                 {this.renderControls()}
                 {this.renderNavigationBoard()}
                 {this.renderCode()}
@@ -94,7 +94,7 @@ export default class Page extends React.Component<object, PageState> {
     private renderControls() {
         return (
             <>
-                <Stack direction="row" spacing={2} alignItems="center">
+                <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
                     <FormControlLabel
                         label="Show play/stop button"
                         control={<Switch checked={this.state.playButtonVisible} onChange={() => this.setState({ playButtonVisible: !this.state.playButtonVisible })} color="primary" />}
@@ -112,7 +112,7 @@ export default class Page extends React.Component<object, PageState> {
                         control={<Switch checked={this.state.turnVisible} onChange={() => this.setState({ turnVisible: !this.state.turnVisible })} color="primary" />}
                     />
                 </Stack>
-                <Stack direction="row" spacing={2} alignItems="center">
+                <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
                     <FormControlLabel
                         label="Animation"
                         control={<Switch checked={this.state.animated} onChange={() => this.setState({ animated: !this.state.animated })} color="primary" />}
@@ -129,7 +129,7 @@ export default class Page extends React.Component<object, PageState> {
                         min={Chessboard.minSquareSize()} max={Chessboard.maxSquareSize()} step={1} valueLabelDisplay="on" color="primary"
                     />
                 </Box>
-                <Stack direction="row" spacing={2} alignItems="center">
+                <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
                     <FormControl variant="standard">
                         <InputLabel id="colorset-label">Colorset</InputLabel>
                         <Select labelId="colorset-label" sx={{ width: '8em' }} value={this.state.colorset} onChange={evt => this.setState({ colorset: evt.target.value })}>

package/doc_src/demo/PageNavigationBoardUncontrolledVsControlled.tsx

@@ -51,7 +51,7 @@ export default class Page extends React.Component<object, PageState> {
 
     render() {
         return (
-            <Stack spacing={2} mt={2}>
+            <Stack spacing={2} sx={{ mt: 2 }}>
                 {this.renderControls()}
                 {this.renderNavigationBoards()}
                 {this.renderCode()}
@@ -81,17 +81,17 @@ export default class Page extends React.Component<object, PageState> {
 
     private renderNavigationBoards() {
         return (
-            <Box display="flex" alignItems="top" justifyContent="space-around">
+            <Stack direction="row" sx={{ alignItems: 'top', justifyContent: 'space-around' }}>
                 <Box>
                     <NavigationBoard game={pgn} animated sound initialNodeId="9b" />
-                    <Typography mt={2} textAlign="center">Uncontrolled</Typography>
+                    <Typography sx={{ mt: 2, textAlign: 'center' }}>Uncontrolled</Typography>
                 </Box>
                 <Box>
                     <NavigationBoard game={pgn} animated sound nodeId={this.state.nodeId} onNodeIdChanged={nodeId => this.setState({ nodeId: nodeId })} />
-                    <Typography mt={2} textAlign="center">Controlled</Typography>
-                    <Typography textAlign="center">{`Current node ID: ${this.state.nodeId}`}</Typography>
+                    <Typography sx={{ mt: 2, textAlign: 'center' }}>Controlled</Typography>
+                    <Typography sx={{ textAlign: 'center' }}>{`Current node ID: ${this.state.nodeId}`}</Typography>
                 </Box>
-            </Box>
+            </Stack>
         );
     }
 

package/doc_src/demo/PageSynchroNavigationBoardMovetext.tsx

@@ -74,7 +74,7 @@ export default class Page extends React.Component<object, PageState> {
 
     render() {
         return (
-            <Stack spacing={2} mt={2}>
+            <Stack spacing={2} sx={{ mt: 2 }}>
                 {this.renderControls()}
                 {this.renderNavigationBoardWithMovetext()}
                 {this.renderCode()}
@@ -84,7 +84,7 @@ export default class Page extends React.Component<object, PageState> {
 
     private renderControls() {
         return (
-            <Stack direction="row" spacing={2} alignItems="center">
+            <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
                 <ButtonGroup color="primary" size="small">
                     <Button onClick={() => this.setState({ componentKey: 'game1', pgn: game1 })}>Game 1</Button>
                     <Button onClick={() => this.setState({ componentKey: 'game2', pgn: game2 })}>Game 2</Button>

package/doc_src/demo/decs.d.ts

@@ -22,6 +22,8 @@
  * -------------------------------------------------------------------------- */
 
 
+declare module '*.css' {}
+
 declare module '*.pgn' {
     const pgnText: string;
     export default pgnText;

package/doc_src/demo/tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "extends": "../../tsconfig.json",
+    "include": [ "./**/*", "../../src/**/*" ],
+    "compilerOptions": {
+        "rootDir": "../..",
+        "declaration": false
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "kokopu-react",
-    "version": "3.4.0",
+    "version": "3.4.2",
     "description": "A React-based library to create and display chessboard and chess-related components.",
     "keywords": [
         "chess",
@@ -20,9 +20,7 @@
         "dist/lib",
         "doc_src",
         "scripts/doc.styleguide.config.js",
-        "scripts/doc.tsconfig.json",
         "scripts/docker-compose.yml",
-        "scripts/test-graphic.tsconfig.json",
         "scripts/test-graphic.webpack.config.js",
         "scripts/test-headless.webpack.config.js",
         "src",
@@ -43,44 +41,43 @@
         "htmlparser2": "^9.1.0"
     },
     "devDependencies": {
-        "@babel/preset-env": "^7.28.5",
-        "@babel/preset-react": "^7.28.5",
+        "@babel/preset-env": "^8.0.2",
+        "@babel/preset-react": "^8.0.1",
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
-        "@eslint/js": "^9.39.2",
-        "@mui/material": "^7.3.7",
-        "@stylistic/eslint-plugin": "^5.7.0",
-        "@types/react": "^19.2.8",
+        "@eslint/js": "^9.39.5",
+        "@mui/material": "^9.2.0",
+        "@stylistic/eslint-plugin": "^5.10.0",
+        "@types/react": "^19.2.17",
         "@types/react-dom": "^19.2.3",
-        "babel-loader": "^10.0.0",
-        "copy-webpack-plugin": "^13.0.1",
+        "babel-loader": "^10.1.1",
+        "copy-webpack-plugin": "^14.0.0",
         "copyfiles": "^2.4.1",
         "coverage-istanbul-loader": "^3.0.5",
-        "css-loader": "^7.1.2",
-        "eslint": "^9.39.2",
+        "css-loader": "^7.1.4",
+        "eslint": "^9.39.5",
         "eslint-plugin-react": "^7.37.5",
-        "eslint-plugin-react-hooks": "^7.0.1",
-        "globals": "^17.0.0",
-        "html-webpack-plugin": "^5.6.5",
+        "eslint-plugin-react-hooks": "^7.1.1",
+        "globals": "^17.7.0",
+        "html-webpack-plugin": "^5.6.7",
         "img-diff-js": "^0.5.4",
-        "kokopu": "^4.13.1",
-        "mocha": "^11.7.5",
+        "kokopu": "^4.13.4",
+        "mocha": "^11.7.6",
         "null-loader": "^4.0.1",
-        "nyc": "^17.1.0",
-        "react": "^19.2.3",
+        "nyc": "^18.0.0",
+        "react": "^19.2.7",
         "react-docgen-typescript": "~2.2.2",
-        "react-dom": "^19.2.3",
+        "react-dom": "^19.2.7",
         "react-styleguidist": "^13.1.4",
-        "rimraf": "^6.1.2",
-        "selenium-webdriver": "^4.39.0",
-        "ssh2-sftp-client": "^12.0.1",
+        "rimraf": "^6.1.3",
+        "selenium-webdriver": "^4.46.0",
+        "ssh2-sftp-client": "^12.1.1",
         "style-loader": "^4.0.0",
-        "ts-loader": "^9.5.4",
-        "typescript": "^5.9.3",
-        "typescript-eslint": "^8.52.0",
-        "unit.js": "^2.1.1",
-        "webpack": "^5.104.1",
-        "webpack-cli": "^6.0.1"
+        "ts-loader": "^9.6.2",
+        "typescript": "^6.0.3",
+        "typescript-eslint": "^8.64.0",
+        "webpack": "^5.108.4",
+        "webpack-cli": "^7.2.1"
     },
     "scripts": {
         "lint": "eslint doc_src src test",

package/scripts/doc.styleguide.config.js

@@ -112,20 +112,23 @@ module.exports = {
         module: {
             rules: [
                 {
-                    test: /\.js$/i,
+                    test: /\.m?js$/i,
                     use: {
                         loader: 'babel-loader',
                         options: {
                             presets: [ '@babel/preset-env', '@babel/preset-react' ],
                         },
-                    }
+                    },
+                    resolve: {
+                        fullySpecified: false,
+                    },
                 },
                 {
                     test: /\.tsx?$/i,
                     use: {
                         loader: 'ts-loader',
                         options: {
-                            configFile: path.resolve(__dirname, 'doc.tsconfig.json'),
+                            configFile: path.resolve(__dirname, `${docSrcDir}/demo/tsconfig.json`),
                         },
                     },
                 },

package/scripts/test-graphic.webpack.config.js

@@ -75,7 +75,7 @@ module.exports = {
                     {
                         loader: 'ts-loader',
                         options: {
-                            configFile: path.resolve(__dirname, 'test-graphic.tsconfig.json'),
+                            configFile: path.resolve(__dirname, '../test/graphic_test_app/tsconfig.json'),
                         },
                     },
                 ],

package/src/decs.d.ts

@@ -22,6 +22,8 @@
  * -------------------------------------------------------------------------- */
 
 
+declare module '*.css' {}
+
 declare module '*.ogg' {
     const path: string;
     export default path;

package/src/icons/ChessPieceIcon.tsx

@@ -55,7 +55,7 @@ export interface ChessPieceIconProps {
 export function ChessPieceIcon({ size, type, pieceset = DEFAULT_PIECESET }: ChessPieceIconProps) {
 
     // Sanitize the inputs.
-    size = sanitizeBoundedInteger(size, MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, () => new IllegalArgument('ChessPieceIcon', 'size'));
+    const localSize = sanitizeBoundedInteger(size, MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, () => new IllegalArgument('ChessPieceIcon', 'size'));
     const types = sanitizeChessPieceIconType(type, () => new IllegalArgument('ChessPieceIcon', 'type'));
     const piecesetData = piecesets[pieceset];
     if (!piecesetData) {
@@ -63,11 +63,11 @@ export function ChessPieceIcon({ size, type, pieceset = DEFAULT_PIECESET }: Ches
     }
 
     // Render the component.
-    const width = size * types.length;
-    const viewBox = `0 0 ${width} ${size}`;
+    const width = localSize * types.length;
+    const viewBox = `0 0 ${width} ${localSize}`;
     return (
-        <svg className="kokopu-chessPieceIcon" viewBox={viewBox} width={width} height={size}>
-            {types.map((t, i) => <image key={i} x={i * size} y={0} width={size} height={size} href={piecesetData[t]} />)}
+        <svg className="kokopu-chessPieceIcon" viewBox={viewBox} width={width} height={localSize}>
+            {types.map((t, i) => <image key={i} x={i * localSize} y={0} width={localSize} height={localSize} href={piecesetData[t]} />)}
         </svg>
     );
 }

package/test/01_types.js

@@ -24,14 +24,14 @@
 
 const { exception, isPieceSymbolMapping, isAnnotationSymbol, isAnnotationColor, flattenSquareMarkers, parseSquareMarkers, flattenTextMarkers, parseTextMarkers,
     flattenArrowMarkers, parseArrowMarkers } = require('../build/test_headless/index');
-const test = require('unit.js');
+const assert = require('node:assert/strict');
 
 
 describe('Is piece symbol mapping', () => {
 
     function itIsPieceSymbolMapping(label, value, expected) {
         it(label, () => {
-            test.value(isPieceSymbolMapping(value)).is(expected);
+            assert.deepEqual(isPieceSymbolMapping(value), expected);
         });
     }
 
@@ -50,7 +50,7 @@ describe('Is Annotation symbol', () => {
 
     function itIsAnnotationSymbol(label, value, expected) {
         it(label, () => {
-            test.value(isAnnotationSymbol(value)).is(expected);
+            assert.deepEqual(isAnnotationSymbol(value), expected);
         });
     }
 
@@ -71,7 +71,7 @@ describe('Is Annotation color', () => {
 
     function itIsAnnotationColor(label, value, expected) {
         it(label, () => {
-            test.value(isAnnotationColor(value)).is(expected);
+            assert.deepEqual(isAnnotationColor(value), expected);
         });
     }
 
@@ -89,114 +89,114 @@ describe('Is Annotation color', () => {
 
 describe('Flatten square markers', () => {
 
-    it('Re4', () => { test.value(flattenSquareMarkers({ e4: 'r' })).is('Re4'); });
-    it('Gd3,Yh8', () => { test.value(flattenSquareMarkers({ h8: 'y', d3: 'g' })).is('Gd3,Yh8'); });
-    it('Ga1,Yc5,Rd2,Bh7,Yh8', () => { test.value(flattenSquareMarkers({ c5: 'y', h8: 'y', a1: 'g', h7: 'b', d2: 'r' })).is('Ga1,Yc5,Rd2,Bh7,Yh8'); });
-    it('<empty>', () => { test.value(flattenSquareMarkers({})).is(''); });
+    it('Re4', () => { assert.deepEqual(flattenSquareMarkers({ e4: 'r' }), 'Re4'); });
+    it('Gd3,Yh8', () => { assert.deepEqual(flattenSquareMarkers({ h8: 'y', d3: 'g' }), 'Gd3,Yh8'); });
+    it('Ga1,Yc5,Rd2,Bh7,Yh8', () => { assert.deepEqual(flattenSquareMarkers({ c5: 'y', h8: 'y', a1: 'g', h7: 'b', d2: 'r' }), 'Ga1,Yc5,Rd2,Bh7,Yh8'); });
+    it('<empty>', () => { assert.deepEqual(flattenSquareMarkers({}), ''); });
 
-    it('Wrong square', () => { test.value(flattenSquareMarkers({ e1: 'r', k9: 'g', whatever: 'y' })).is('Re1'); });
-    it('Wrong color', () => { test.value(flattenSquareMarkers({ a2: 'g', b5: 'R', c4: 42, h8: 'yellow' })).is('Ga2'); });
+    it('Wrong square', () => { assert.deepEqual(flattenSquareMarkers({ e1: 'r', k9: 'g', whatever: 'y' }), 'Re1'); });
+    it('Wrong color', () => { assert.deepEqual(flattenSquareMarkers({ a2: 'g', b5: 'R', c4: 42, h8: 'yellow' }), 'Ga2'); });
 
-    it('Wrong type (not an object)', () => { test.exception(() => flattenSquareMarkers('whatever')).isInstanceOf(exception.IllegalArgument); });
-    it('Wrong type (null)', () => { test.exception(() => flattenSquareMarkers(null)).isInstanceOf(exception.IllegalArgument); });
-    it('Wrong type (undefined)', () => { test.exception(() => flattenSquareMarkers(undefined)).isInstanceOf(exception.IllegalArgument); });
+    it('Wrong type (not an object)', () => { assert.throws(() => flattenSquareMarkers('whatever'), exception.IllegalArgument); });
+    it('Wrong type (null)', () => { assert.throws(() => flattenSquareMarkers(null), exception.IllegalArgument); });
+    it('Wrong type (undefined)', () => { assert.throws(() => flattenSquareMarkers(undefined), exception.IllegalArgument); });
 });
 
 
 describe('Parse square markers', () => {
 
-    it('Re4', () => { test.value(parseSquareMarkers('Re4')).is({ e4: 'r' }); });
-    it('Gd3,Yh8', () => { test.value(parseSquareMarkers('Gd3,Yh8')).is({ h8: 'y', d3: 'g' }); });
-    it('Ga1,Yc5,Rd2,Bh7,Yh8', () => { test.value(parseSquareMarkers(' Ga1,  Yh8,Yc5 ,Rd2, Bh7 ')).is({ c5: 'y', h8: 'y', a1: 'g', h7: 'b', d2: 'r' }); });
-    it('<empty>', () => { test.value(parseSquareMarkers('')).is({}); });
-    it('<blank>', () => { test.value(parseSquareMarkers(' ')).is({}); });
+    it('Re4', () => { assert.deepEqual(parseSquareMarkers('Re4'), { e4: 'r' }); });
+    it('Gd3,Yh8', () => { assert.deepEqual(parseSquareMarkers('Gd3,Yh8'), { h8: 'y', d3: 'g' }); });
+    it('Ga1,Yc5,Rd2,Bh7,Yh8', () => { assert.deepEqual(parseSquareMarkers(' Ga1,  Yh8,Yc5 ,Rd2, Bh7 '), { c5: 'y', h8: 'y', a1: 'g', h7: 'b', d2: 'r' }); });
+    it('<empty>', () => { assert.deepEqual(parseSquareMarkers(''), {}); });
+    it('<blank>', () => { assert.deepEqual(parseSquareMarkers(' '), {}); });
 
-    it('Wrong square', () => { test.value(parseSquareMarkers('Rg9,Ye1')).is({ e1: 'y' }); });
-    it('Duplicated square', () => { test.value(parseSquareMarkers('Ra3,Ya3')).is({ a3: 'y' }); });
-    it('Wrong color', () => { test.value(parseSquareMarkers('Ga6,Cg5')).is({ a6: 'g' }); });
-    it('Wrong format', () => { test.value(parseSquareMarkers('Something Ra2 invalid, Ye4, G g3')).is({ e4: 'y' }); });
+    it('Wrong square', () => { assert.deepEqual(parseSquareMarkers('Rg9,Ye1'), { e1: 'y' }); });
+    it('Duplicated square', () => { assert.deepEqual(parseSquareMarkers('Ra3,Ya3'), { a3: 'y' }); });
+    it('Wrong color', () => { assert.deepEqual(parseSquareMarkers('Ga6,Cg5'), { a6: 'g' }); });
+    it('Wrong format', () => { assert.deepEqual(parseSquareMarkers('Something Ra2 invalid, Ye4, G g3'), { e4: 'y' }); });
 
-    it('Wrong type (not a string)', () => { test.exception(() => parseSquareMarkers(42)).isInstanceOf(exception.IllegalArgument); });
-    it('Wrong type (null)', () => { test.exception(() => parseSquareMarkers(null)).isInstanceOf(exception.IllegalArgument); });
-    it('Wrong type (undefined)', () => { test.exception(() => parseSquareMarkers(undefined)).isInstanceOf(exception.IllegalArgument); });
+    it('Wrong type (not a string)', () => { assert.throws(() => parseSquareMarkers(42), exception.IllegalArgument); });
+    it('Wrong type (null)', () => { assert.throws(() => parseSquareMarkers(null), exception.IllegalArgument); });
+    it('Wrong type (undefined)', () => { assert.throws(() => parseSquareMarkers(undefined), exception.IllegalArgument); });
 });
 
 
 describe('Flatten text markers', () => {
 
-    it('RAe4', () => { test.value(flattenTextMarkers({ e4: { symbol: 'A', color: 'r' } })).is('RAe4'); });
+    it('RAe4', () => { assert.deepEqual(flattenTextMarkers({ e4: { symbol: 'A', color: 'r' } }), 'RAe4'); });
     it('Gzd3,Y1h8', () => {
-        test.value(flattenTextMarkers({
+        assert.deepEqual(flattenTextMarkers({
             h8: { symbol: '1', color: 'y' },
             d3: { symbol: 'z', color: 'g' },
-        })).is('Gzd3,Y1h8');
+        }), 'Gzd3,Y1h8');
     });
     it('G2a1,YMc5,RLd2,Rxh7,Bwh8', () => {
-        test.value(flattenTextMarkers({
+        assert.deepEqual(flattenTextMarkers({
             c5: { symbol: 'M', color: 'y' },
             h8: { symbol: 'w', color: 'b' },
             a1: { symbol: '2', color: 'g' },
             h7: { symbol: 'x', color: 'r' },
             d2: { symbol: 'L', color: 'r' },
-        })).is('G2a1,YMc5,RLd2,Rxh7,Bwh8');
+        }), 'G2a1,YMc5,RLd2,Rxh7,Bwh8');
     });
     it('Multi-character symbols', () => {
-        test.value(flattenTextMarkers({
+        assert.deepEqual(flattenTextMarkers({
             a1: { symbol: 'A', color: 'y' },
             a7: { symbol: 'plus', color: 'g' },
             b3: { symbol: 'times', color: 'r' },
             g5: { symbol: 'dot', color: 'y' },
             h3: { symbol: 'circle', color: 'g' },
-        })).is('YAa1,G(plus)a7,R(times)b3,Y(dot)g5,G(circle)h3');
+        }), 'YAa1,G(plus)a7,R(times)b3,Y(dot)g5,G(circle)h3');
     });
-    it('<empty>', () => { test.value(flattenTextMarkers({})).is(''); });
+    it('<empty>', () => { assert.deepEqual(flattenTextMarkers({}), ''); });
 
     it('Wrong square', () => {
-        test.value(flattenTextMarkers({
+        assert.deepEqual(flattenTextMarkers({
             e1: { symbol: 'H', color: 'r' },
             j5: { symbol: 'A', color: 'g' },
-        })).is('RHe1');
+        }), 'RHe1');
     });
     it('Wrong color', () => {
-        test.value(flattenTextMarkers({
+        assert.deepEqual(flattenTextMarkers({
             a2: { symbol: '0', color: 'g' },
             b5: { symbol: 'A', color: 'R' },
             h8: { symbol: 'A' },
-        })).is('G0a2');
+        }), 'G0a2');
     });
     it('Wrong symbol', () => {
-        test.value(flattenTextMarkers({
+        assert.deepEqual(flattenTextMarkers({
             a2: { symbol: '0', color: 'g' },
             b5: { symbol: '', color: 'r' },
             h8: { color: 'g' },
             d8: { symbol: '-', color: 'r' },
             c1: { symbol: 'abcd', color: 'r' },
-        })).is('G0a2');
+        }), 'G0a2');
     });
     it('Wrong multi-character symbol', () => {
-        test.value(flattenTextMarkers({
+        assert.deepEqual(flattenTextMarkers({
             a2: { symbol: '0', color: 'g' },
             b5: { symbol: 'whatever', color: 'r' },
-        })).is('G0a2');
+        }), 'G0a2');
     });
 
-    it('Wrong type (not an object)', () => { test.exception(() => flattenTextMarkers('whatever')).isInstanceOf(exception.IllegalArgument); });
-    it('Wrong type (null)', () => { test.exception(() => flattenTextMarkers(null)).isInstanceOf(exception.IllegalArgument); });
-    it('Wrong type (undefined)', () => { test.exception(() => flattenTextMarkers(undefined)).isInstanceOf(exception.IllegalArgument); });
+    it('Wrong type (not an object)', () => { assert.throws(() => flattenTextMarkers('whatever'), exception.IllegalArgument); });
+    it('Wrong type (null)', () => { assert.throws(() => flattenTextMarkers(null), exception.IllegalArgument); });
+    it('Wrong type (undefined)', () => { assert.throws(() => flattenTextMarkers(undefined), exception.IllegalArgument); });
 });
 
 
 describe('Parse text markers', () => {
 
-    it('RAe4', () => { test.value(parseTextMarkers('RAe4')).is({ e4: { symbol: 'A', color: 'r' } }); });
+    it('RAe4', () => { assert.deepEqual(parseTextMarkers('RAe4'), { e4: { symbol: 'A', color: 'r' } }); });
     it('Gzd3,Y1h8', () => {
-        test.value(parseTextMarkers('Gzd3,Y1h8')).is({
+        assert.deepEqual(parseTextMarkers('Gzd3,Y1h8'), {
             h8: { symbol: '1', color: 'y' },
             d3: { symbol: 'z', color: 'g' },
         });
     });
     it('G2a1,YMc5,RLd2,Rxh7,Bwh8', () => {
-        test.value(parseTextMarkers(' G2a1, Rxh7  ,YMc5 ,RLd2,Bwh8 ')).is({
+        assert.deepEqual(parseTextMarkers(' G2a1, Rxh7  ,YMc5 ,RLd2,Bwh8 '), {
             c5: { symbol: 'M', color: 'y' },
             h8: { symbol: 'w', color: 'b' },
             a1: { symbol: '2', color: 'g' },
@@ -205,7 +205,7 @@ describe('Parse text markers', () => {
         });
     });
     it('Multi-character symbols', () => {
-        test.value(parseTextMarkers('YAa1,G(plus)a7, R(times)b3  ,Y(dot)g5,G(circle)h3')).is({
+        assert.deepEqual(parseTextMarkers('YAa1,G(plus)a7, R(times)b3  ,Y(dot)g5,G(circle)h3'), {
             a1: { symbol: 'A', color: 'y' },
             a7: { symbol: 'plus', color: 'g' },
             b3: { symbol: 'times', color: 'r' },
@@ -213,56 +213,55 @@ describe('Parse text markers', () => {
             h3: { symbol: 'circle', color: 'g' },
         });
     });
-    it('<empty>', () => { test.value(parseTextMarkers('')).is({}); });
-    it('<blank>', () => { test.value(parseTextMarkers(' ')).is({}); });
-
-    it('Wrong square', () => { test.value(parseTextMarkers('RHg9,Yxe1')).is({ e1: { symbol: 'x', color: 'y' } }); });
-    it('Duplicated square', () => { test.value(parseTextMarkers('Rka3,Gba3')).is({ a3: { symbol: 'b', color: 'g' } }); });
-    it('Wrong color', () => { test.value(parseTextMarkers('G3a6,CAg5')).is({ a6: { symbol: '3', color: 'g' } }); });
-    it('Wrong symbol', () => { test.value(parseTextMarkers('Rb2,RAg5,G.d3,Yabcde7')).is({ g5: { symbol: 'A', color: 'r' } }); });
-    it('Wrong multi-character symbol', () => { test.value(parseTextMarkers('RZb2,Y(whatever)e4')).is({ b2: { symbol: 'Z', color: 'r' } }); });
-    it('Wrong format', () => { test.value(parseTextMarkers('Something RHa2 invalid, Yqe4, G g3')).is({ e4: { symbol: 'q', color: 'y' } }); });
-
-    it('Wrong type (not a string)', () => { test.exception(() => parseTextMarkers(42)).isInstanceOf(exception.IllegalArgument); });
-    it('Wrong type (null)', () => { test.exception(() => parseTextMarkers(null)).isInstanceOf(exception.IllegalArgument); });
-    it('Wrong type (undefined)', () => { test.exception(() => parseTextMarkers(undefined)).isInstanceOf(exception.IllegalArgument); });
+    it('<empty>', () => { assert.deepEqual(parseTextMarkers(''), {}); });
+    it('<blank>', () => { assert.deepEqual(parseTextMarkers(' '), {}); });
+    it('Wrong square', () => { assert.deepEqual(parseTextMarkers('RHg9,Yxe1'), { e1: { symbol: 'x', color: 'y' } }); });
+    it('Duplicated square', () => { assert.deepEqual(parseTextMarkers('Rka3,Gba3'), { a3: { symbol: 'b', color: 'g' } }); });
+    it('Wrong color', () => { assert.deepEqual(parseTextMarkers('G3a6,CAg5'), { a6: { symbol: '3', color: 'g' } }); });
+    it('Wrong symbol', () => { assert.deepEqual(parseTextMarkers('Rb2,RAg5,G.d3,Yabcde7'), { g5: { symbol: 'A', color: 'r' } }); });
+    it('Wrong multi-character symbol', () => { assert.deepEqual(parseTextMarkers('RZb2,Y(whatever)e4'), { b2: { symbol: 'Z', color: 'r' } }); });
+    it('Wrong format', () => { assert.deepEqual(parseTextMarkers('Something RHa2 invalid, Yqe4, G g3'), { e4: { symbol: 'q', color: 'y' } }); });
+
+    it('Wrong type (not a string)', () => { assert.throws(() => parseTextMarkers(42), exception.IllegalArgument); });
+    it('Wrong type (null)', () => { assert.throws(() => parseTextMarkers(null), exception.IllegalArgument); });
+    it('Wrong type (undefined)', () => { assert.throws(() => parseTextMarkers(undefined), exception.IllegalArgument); });
 });
 
 
 describe('Flatten arrow markers', () => {
 
-    it('Re4d6', () => { test.value(flattenArrowMarkers({ e4d6: 'r' })).is('Re4d6'); });
-    it('Gd3b4,Yh8h7', () => { test.value(flattenArrowMarkers({ h8h7: 'y', d3b4: 'g' })).is('Gd3b4,Yh8h7'); });
+    it('Re4d6', () => { assert.deepEqual(flattenArrowMarkers({ e4d6: 'r' }), 'Re4d6'); });
+    it('Gd3b4,Yh8h7', () => { assert.deepEqual(flattenArrowMarkers({ h8h7: 'y', d3b4: 'g' }), 'Gd3b4,Yh8h7'); });
     it('Ga1h8,Yc5a1,Rd2d2,Rh7h8,Bh8c5', () => {
-        test.value(flattenArrowMarkers({ c5a1: 'y', h8c5: 'b', a1h8: 'g', h7h8: 'r', d2d2: 'r' })).is('Ga1h8,Yc5a1,Rd2d2,Rh7h8,Bh8c5');
+        assert.deepEqual(flattenArrowMarkers({ c5a1: 'y', h8c5: 'b', a1h8: 'g', h7h8: 'r', d2d2: 'r' }), 'Ga1h8,Yc5a1,Rd2d2,Rh7h8,Bh8c5');
     });
-    it('<empty>', () => { test.value(flattenArrowMarkers({})).is(''); });
+    it('<empty>', () => { assert.deepEqual(flattenArrowMarkers({}), ''); });
 
-    it('Wrong vector', () => { test.value(flattenArrowMarkers({ e1c2: 'r', a1b9: 'g', c0d2: 'r', i3d4: 'r', f2k3: 'g', whatever: 'y' })).is('Re1c2'); });
-    it('Wrong color', () => { test.value(flattenArrowMarkers({ a2b3: 'g', b5c1: 'R', c4d8: 42, h8g1: 'yellow' })).is('Ga2b3'); });
+    it('Wrong vector', () => { assert.deepEqual(flattenArrowMarkers({ e1c2: 'r', a1b9: 'g', c0d2: 'r', i3d4: 'r', f2k3: 'g', whatever: 'y' }), 'Re1c2'); });
+    it('Wrong color', () => { assert.deepEqual(flattenArrowMarkers({ a2b3: 'g', b5c1: 'R', c4d8: 42, h8g1: 'yellow' }), 'Ga2b3'); });
 
-    it('Wrong type (not an object)', () => { test.exception(() => flattenArrowMarkers('whatever')).isInstanceOf(exception.IllegalArgument); });
-    it('Wrong type (null)', () => { test.exception(() => flattenArrowMarkers(null)).isInstanceOf(exception.IllegalArgument); });
-    it('Wrong type (undefined)', () => { test.exception(() => flattenArrowMarkers(undefined)).isInstanceOf(exception.IllegalArgument); });
+    it('Wrong type (not an object)', () => { assert.throws(() => flattenArrowMarkers('whatever'), exception.IllegalArgument); });
+    it('Wrong type (null)', () => { assert.throws(() => flattenArrowMarkers(null), exception.IllegalArgument); });
+    it('Wrong type (undefined)', () => { assert.throws(() => flattenArrowMarkers(undefined), exception.IllegalArgument); });
 });
 
 
 describe('Parse arrow markers', () => {
 
-    it('Re4d6', () => { test.value(parseArrowMarkers('Re4d6')).is({ e4d6: 'r' }); });
-    it('Gd3b4,Yh8h7', () => { test.value(parseArrowMarkers('Gd3b4,Yh8h7')).is({ h8h7: 'y', d3b4: 'g' }); });
+    it('Re4d6', () => { assert.deepEqual(parseArrowMarkers('Re4d6'), { e4d6: 'r' }); });
+    it('Gd3b4,Yh8h7', () => { assert.deepEqual(parseArrowMarkers('Gd3b4,Yh8h7'), { h8h7: 'y', d3b4: 'g' }); });
     it('Ga1h8,Yc5a1,Rd2d2,Rh7h8,Bh8c5', () => {
-        test.value(parseArrowMarkers(' Bh8c5,Ga1h8  , Yc5a1 ,  Rd2d2,Rh7h8  ')).is({ c5a1: 'y', h8c5: 'b', a1h8: 'g', h7h8: 'r', d2d2: 'r' });
+        assert.deepEqual(parseArrowMarkers(' Bh8c5,Ga1h8  , Yc5a1 ,  Rd2d2,Rh7h8  '), { c5a1: 'y', h8c5: 'b', a1h8: 'g', h7h8: 'r', d2d2: 'r' });
     });
-    it('<empty>', () => { test.value(parseArrowMarkers('')).is({}); });
-    it('<blank>', () => { test.value(parseArrowMarkers(' ')).is({}); });
+    it('<empty>', () => { assert.deepEqual(parseArrowMarkers(''), {}); });
+    it('<blank>', () => { assert.deepEqual(parseArrowMarkers(' '), {}); });
 
-    it('Wrong vector', () => { test.value(parseArrowMarkers('Re1c2,Ga1b9,Rc0d2,Ri3d4,Gf2k3')).is({ e1c2: 'r' }); });
-    it('Duplicated vector', () => { test.value(parseArrowMarkers('Ya3b4,Ra3b4')).is({ a3b4: 'r' }); });
-    it('Wrong color', () => { test.value(parseArrowMarkers('Ga6c5,Cg5e2')).is({ a6c5: 'g' }); });
-    it('Wrong format', () => { test.value(parseArrowMarkers('Something Rb1a2 invalid, Ye4c7, G g3b1')).is({ e4c7: 'y' }); });
+    it('Wrong vector', () => { assert.deepEqual(parseArrowMarkers('Re1c2,Ga1b9,Rc0d2,Ri3d4,Gf2k3'), { e1c2: 'r' }); });
+    it('Duplicated vector', () => { assert.deepEqual(parseArrowMarkers('Ya3b4,Ra3b4'), { a3b4: 'r' }); });
+    it('Wrong color', () => { assert.deepEqual(parseArrowMarkers('Ga6c5,Cg5e2'), { a6c5: 'g' }); });
+    it('Wrong format', () => { assert.deepEqual(parseArrowMarkers('Something Rb1a2 invalid, Ye4c7, G g3b1'), { e4c7: 'y' }); });
 
-    it('Wrong type (not a string)', () => { test.exception(() => parseArrowMarkers(42)).isInstanceOf(exception.IllegalArgument); });
-    it('Wrong type (null)', () => { test.exception(() => parseArrowMarkers(null)).isInstanceOf(exception.IllegalArgument); });
-    it('Wrong type (undefined)', () => { test.exception(() => parseArrowMarkers(undefined)).isInstanceOf(exception.IllegalArgument); });
+    it('Wrong type (not a string)', () => { assert.throws(() => parseArrowMarkers(42), exception.IllegalArgument); });
+    it('Wrong type (null)', () => { assert.throws(() => parseArrowMarkers(null), exception.IllegalArgument); });
+    it('Wrong type (undefined)', () => { assert.throws(() => parseArrowMarkers(undefined), exception.IllegalArgument); });
 });

package/test/02_chessboard_util.js

@@ -23,11 +23,11 @@
 
 
 const { exception, Chessboard, NavigationBoard } = require('../build/test_headless/index');
-const test = require('unit.js');
+const assert = require('node:assert/strict');
 
 
 function itInvalidArgument(label, action) {
-    it(label, () => { test.exception(action).isInstanceOf(exception.IllegalArgument); });
+    it(label, () => { assert.throws(action, exception.IllegalArgument); });
 }
 
 
@@ -35,7 +35,7 @@ describe('Chessboard.size()', () => {
 
     function itChessboardSize(label, expectedWidth, expectedHeight, attr) {
         it(label, () => {
-            test.value(Chessboard.size(attr)).is({ width: expectedWidth, height: expectedHeight });
+            assert.deepEqual(Chessboard.size(attr), { width: expectedWidth, height: expectedHeight });
         });
     }
 
@@ -74,7 +74,7 @@ describe('NavigationBoard.size()', () => {
 
     function itNavigationBoardSize(label, expectedWidth, expectedHeight, attr) {
         it(label, () => {
-            test.value(NavigationBoard.size(attr)).is({ width: expectedWidth, height: expectedHeight });
+            assert.deepEqual(NavigationBoard.size(attr), { width: expectedWidth, height: expectedHeight });
         });
     }
 
@@ -104,11 +104,11 @@ describe('NavigationBoard.size()', () => {
 
 function testAdaptSquareSize(expectedSquareSize, width, height, coordinateVisible, turnVisible, smallScreenLimits) {
 
-    test.value(Chessboard.adaptSquareSize(width, height, {
+    assert.deepEqual(Chessboard.adaptSquareSize(width, height, {
         coordinateVisible: coordinateVisible,
         turnVisible: turnVisible,
         smallScreenLimits: smallScreenLimits,
-    })).is(expectedSquareSize);
+    }), expectedSquareSize);
 
     const actualSize = Chessboard.size({
         squareSize: expectedSquareSize,
@@ -116,7 +116,7 @@ function testAdaptSquareSize(expectedSquareSize, width, height, coordinateVisibl
         turnVisible: turnVisible,
         smallScreenLimits: smallScreenLimits,
     });
-    test.value(actualSize.width <= width && actualSize.height <= height).isTrue();
+    assert(actualSize.width <= width && actualSize.height <= height);
 }
 
 
@@ -129,14 +129,14 @@ function testAdaptSquareSizeWithIncrement(expectedSquareSize, width, height, coo
         turnVisible: turnVisible,
         smallScreenLimits: smallScreenLimits,
     });
-    test.value(actualSizeIncremented.width > width || actualSizeIncremented.height > height).isTrue();
+    assert(actualSizeIncremented.width > width || actualSizeIncremented.height > height);
 }
 
 
 describe('Adapt square-size', () => {
 
-    it('Very small', () => { test.value(Chessboard.adaptSquareSize(10, 10, { coordinateVisible: false, turnVisible: false })).is(Chessboard.minSquareSize()); });
-    it('Very large', () => { test.value(Chessboard.adaptSquareSize(9999, 9999)).is(Chessboard.maxSquareSize()); });
+    it('Very small', () => { assert.deepEqual(Chessboard.adaptSquareSize(10, 10, { coordinateVisible: false, turnVisible: false }), Chessboard.minSquareSize()); });
+    it('Very large', () => { assert.deepEqual(Chessboard.adaptSquareSize(9999, 9999), Chessboard.maxSquareSize()); });
 
     it('Size 185x300 with coordinates & turn', () => testAdaptSquareSizeWithIncrement(19, 185, 300, true, true));
     it('Size 185x300 without coordinates', () => testAdaptSquareSizeWithIncrement(20, 185, 300, false, true));
@@ -171,13 +171,13 @@ describe('Adapt square-size (NavigationBoard)', () => {
 
     function itAdaptSquareSize(label, width, height, attributes, expectedSquareSize) {
         it(label, () => {
-            test.value(NavigationBoard.adaptSquareSize(width, height, attributes)).is(expectedSquareSize);
+            assert.deepEqual(NavigationBoard.adaptSquareSize(width, height, attributes), expectedSquareSize);
 
             const actualSizeIncremented = NavigationBoard.size({
                 ...attributes,
                 squareSize: expectedSquareSize + 1,
             });
-            test.value(actualSizeIncremented.width > width || actualSizeIncremented.height > height).isTrue();
+            assert(actualSizeIncremented.width > width || actualSizeIncremented.height > height);
         });
     }
 

package/test/11_movetext_interaction.js

@@ -24,7 +24,7 @@
 
 const { describeWithBrowser, itCustom, setSandbox, compareSandbox, takeScreenshot, compareScreenshot, itChecksScreenshots } = require('./common/graphic');
 const { By, Key } = require('selenium-webdriver');
-const test = require('unit.js');
+const assert = require('node:assert/strict');
 
 
 describeWithBrowser('Movetext interaction', browserContext => {
@@ -74,15 +74,15 @@ describeWithBrowser('Movetext interaction', browserContext => {
 
             // Handle components for which no interaction is defined.
             if (focusFieldElements.length === 0) {
-                test.value('').is(expectedOnGoFirst);
-                test.value('').is(expectedOnGoPrevious);
-                test.value('').is(expectedOnGoNext);
-                test.value('').is(expectedOnGoLast);
-                test.value('').is(expectedOnExit);
+                assert.deepEqual('', expectedOnGoFirst);
+                assert.deepEqual('', expectedOnGoPrevious);
+                assert.deepEqual('', expectedOnGoNext);
+                assert.deepEqual('', expectedOnGoLast);
+                assert.deepEqual('', expectedOnExit);
                 return;
             }
 
-            test.value(focusFieldElements.length).is(1);
+            assert.deepEqual(focusFieldElements.length, 1);
             const focusFieldElement = focusFieldElements[0];
 
             await setSandbox(browserContext, '');

package/test/12_navigation_board_base.js

@@ -24,7 +24,7 @@
 
 const { describeWithBrowser, itCustom, setSandbox, compareSandbox, takeScreenshot, compareScreenshot, itChecksScreenshots } = require('./common/graphic');
 const { By, Key } = require('selenium-webdriver');
-const test = require('unit.js');
+const assert = require('node:assert/strict');
 
 
 describeWithBrowser('Navigation board - Uncontrolled behavior', browserContext => {
@@ -83,7 +83,7 @@ describeWithBrowser('Navigation board - Uncontrolled behavior', browserContext =
             await setSandbox(browserContext, '');
             const focusFieldElements = await element.findElements(By.className('kokopu-focusField'));
 
-            test.value(focusFieldElements.length).is(1);
+            assert.deepEqual(focusFieldElements.length, 1);
             const focusFieldElement = focusFieldElements[0];
 
             for (let i = 0; i < keys.length; ++i) {

package/test/common/graphic.js

@@ -26,7 +26,7 @@ const fs = require('fs');
 const path = require('path');
 const { Builder, By, Capabilities } = require('selenium-webdriver');
 const { imgDiff } = require('img-diff-js');
-const test = require('unit.js');
+const assert = require('node:assert/strict');
 
 const rootDir = __dirname + '/../..';
 const referenceDir = rootDir + '/test/graphic_references';
@@ -200,7 +200,7 @@ const compareScreenshot = exports.compareScreenshot = async function (browserCon
         expectedFilename: expectedFilename,
         diffFilename: differenceFilename,
     });
-    test.object(result).hasProperty('imagesAreSame', true);
+    assert.deepEqual(result.imagesAreSame, true);
 };
 
 
@@ -209,7 +209,7 @@ const compareScreenshot = exports.compareScreenshot = async function (browserCon
  */
 exports.compareSandbox = async function (browserContext, expectedText) {
     const actualText = await browserContext.driver.findElement(By.id('sandbox')).getText();
-    test.value(actualText).is(expectedText);
+    assert.deepEqual(actualText, expectedText);
 };
 
 
@@ -229,7 +229,7 @@ exports.setSandbox = async function (browserContext, value) {
  */
 exports.compareGlobalVar = async function (browserContext, variableName, expectedValue) {
     const actualValue = await browserContext.driver.executeScript(`return window["${variableName}"];`);
-    test.value(actualValue).is(expectedValue);
+    assert.deepEqual(actualValue, expectedValue);
 };
 
 

package/test/graphic_test_app/common/decs.d.ts

@@ -22,6 +22,8 @@
  * -------------------------------------------------------------------------- */
 
 
+declare module '*.css' {}
+
 declare module '*.pgn' {
     const pgnText: string;
     export default pgnText;

package/test/graphic_test_app/tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "extends": "../../tsconfig.json",
+    "include": [ "./**/*" ],
+    "compilerOptions": {
+        "rootDir": ".",
+        "declaration": false
+    }
+}

package/tsconfig.json

@@ -1,6 +1,7 @@
 {
     "include": [ "./src/**/*" ],
     "compilerOptions": {
+        "rootDir": "./src",
         "sourceMap": true,
         "declaration": true,
         "module": "es2020",
@@ -8,8 +9,6 @@
         "jsx": "react",
         "types": [],
         "allowJs": false,
-        "strict": true,
-        "forceConsistentCasingInFileNames": true,
-        "moduleResolution": "node"
+        "strict": true
     }
 }

package/scripts/doc.tsconfig.json

@@ -1,7 +0,0 @@
-{
-    "extends": "../tsconfig.json",
-    "include": [ "../doc_src/demo/**/*", "../src/**/*" ],
-    "compilerOptions": {
-        "declaration": false
-    }
-}

package/scripts/test-graphic.tsconfig.json

@@ -1,7 +0,0 @@
-{
-    "extends": "../tsconfig.json",
-    "include": [ "../test/graphic_test_app/**/*" ],
-    "compilerOptions": {
-        "declaration": false
-    }
-}