next-chessground 0.9.4 → 0.10.3

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useEffect, forwardRef } from 'react';
+import React, { createContext, useState, useContext, useEffect, forwardRef } from 'react';
 import require$$1 from 'react-dom';
 
 function _defineProperty(obj, key, value) {
@@ -475,6 +475,18 @@ const themable = () => {
   return theme;
 };
 
+const Theme = ({
+  children
+}) => {
+  const [theme, setTheme] = useState(themable());
+  return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+    value: {
+      theme,
+      setTheme
+    }
+  }, children);
+};
+
 function mergeClassNames() {
   return Array.prototype.slice.call(arguments).reduce(function (classList, arg) {
     return classList.concat(arg);
@@ -5944,10 +5956,13 @@ const initial$1 = fen.initial;
 
 const useChess = props => {
   const [fen, setFen] = useState(props.fen || initial$1);
-  const [chess$1] = useState(new chess.Chess(fen)); // reinitialize when FEN changes from props
+  const [chess$1, setChess] = useState(new chess.Chess(fen)); // reinitialize when FEN changes from props
 
   useEffect(() => {
-    setFen(props.fen);
+    if (props.fen) {
+      setFen(props.fen);
+      setChess(new chess.Chess(props.fen));
+    }
   }, [props.fen]);
   const [lastMove, setLastMove] = useState([]);
   const promotion = props.lastMove && props.lastMove.promotion;
@@ -6229,8 +6244,11 @@ var Modal = /*@__PURE__*/getDefaultExportFromCjs(reactPureModal_min);
 const SparePiece = ({
   role,
   color,
+  highlighted,
   selectPiece
 }) => {
+  const bin = role === 'bin';
+
   const handleClick = () => {
     if (typeof selectPiece === 'function') {
       selectPiece({
@@ -6241,9 +6259,9 @@ const SparePiece = ({
   };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: "edit-square border border-gray-300 rounded"
+    className: mergeClassNames('edit-square border border-gray-300 rounded', highlighted && 'bg-orange-300')
   }, /*#__PURE__*/React.createElement("piece", {
-    className: `${role} ${color} spare-piece`,
+    className: mergeClassNames('spare-piece', role, color, bin && 'next-trash'),
     onClick: handleClick
   }));
 };
@@ -6260,11 +6278,11 @@ const Promote = ({
   };
 
   return /*#__PURE__*/React.createElement(Modal, {
-    header: "Pawn promotion",
+    closeButton: "",
     isOpen: isOpen,
     onClose: hide
   }, /*#__PURE__*/React.createElement("div", {
-    className: "flex gap-2 justify-center"
+    className: "promote flex gap-2 py-1.5 justify-center"
   }, /*#__PURE__*/React.createElement(SparePiece, {
     color: color,
     role: "queen",
@@ -6614,14 +6632,8 @@ const Advanced = ({
 };
 
 const NextChessground = (props, ref) => {
-  const [theme, setTheme] = useState(themable());
   const [orientation, flip] = useOrientation(props);
-  return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
-    value: {
-      theme,
-      setTheme
-    }
-  }, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Theme, null, /*#__PURE__*/React.createElement("div", {
     className: "next-chessground"
   }, /*#__PURE__*/React.createElement(Chessboard$1, _extends({}, props, {
     ref: ref,
@@ -6634,6 +6646,240 @@ const NextChessground = (props, ref) => {
 
 var NextChessground$1 = /*#__PURE__*/forwardRef(NextChessground);
 
+const EditorPieces = props => {
+  const {
+    theme
+  } = useChessground();
+  const roles = ['bin', 'pawn', 'knight', 'bishop', 'rook', 'queen', 'king'];
+
+  const showPiece = (role, props) => {
+    const {
+      color = 'white',
+      selected = {
+        role: null,
+        color: null
+      }
+    } = props;
+    const highlighted = role === selected.role && color === selected.color;
+    return /*#__PURE__*/React.createElement(SparePiece, _extends({
+      key: `${role}-${color}`,
+      highlighted: highlighted,
+      role: role,
+      color: color
+    }, props));
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: mergeClassNames('spare-pieces flex gap-2', theme.pieces)
+  }, roles.map(role => showPiece(role, props)));
+};
+
+/**
+ * Pieces diff from a Chessground board
+ */
+const piecesDiff = key => {
+  const map = new Map();
+  map.set(key, null);
+  return map;
+};
+/**
+ * Drop piece to a Chessground board
+ */
+
+
+const dropPiece = (cg, selected, key) => {
+  if (!cg) {
+    throw new Error('Chessground is not defined');
+  }
+
+  if (!selected || !selected.role || !selected.color) {
+    return cg.getFen();
+  }
+
+  if (selected.role === 'bin') {
+    cg.setPieces(piecesDiff(key));
+    return cg.getFen();
+  }
+
+  const square = cg.state.pieces.get(key);
+
+  if (!square) {
+    cg.newPiece(selected, key);
+    return cg.getFen();
+  }
+
+  if (square.role === selected.role && square.color === selected.color) {
+    cg.setPieces(piecesDiff(key));
+    return cg.getFen();
+  }
+
+  cg.setPieces(piecesDiff(key));
+  cg.newPiece(selected, key);
+  return cg.getFen();
+};
+
+const getCastles = (initial, option) => {
+  if (!option) {
+    return initial;
+  }
+
+  const all = ['K', 'Q', 'k', 'q'];
+  const array = all.map(letter => {
+    if (letter !== option) {
+      if (initial.includes(letter)) {
+        return letter;
+      }
+
+      return '';
+    }
+
+    if (initial.includes(option)) {
+      return '';
+    }
+
+    return option;
+  });
+  const string = array.join('');
+  return string.length ? string : '-';
+};
+
+const FenOptions = ({
+  onChange
+}) => {
+  const [side, setSide] = useState('w');
+  const [castles, setCastles] = useState('-');
+  useEffect(() => {
+    if (typeof onChange === 'function') {
+      onChange([side, castles].join(' '));
+    }
+  }, [side, castles]);
+
+  const changeSide = e => {
+    const {
+      value
+    } = e.target;
+    setSide(value);
+  };
+
+  const changeCastle = e => {
+    const {
+      value
+    } = e.target;
+    setCastles(getCastles(castles, value));
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col gap-2 w-full"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-2 w-full"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
+    defaultChecked: true,
+    className: "mx-1",
+    type: "radio",
+    id: "white-radio",
+    name: "side-to-move",
+    value: "w",
+    onChange: changeSide
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: "white-radio"
+  }, "White to move")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
+    className: "mx-1",
+    type: "radio",
+    id: "black-radio",
+    name: "side-to-move",
+    value: "b",
+    onChange: changeSide
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: "black-radio"
+  }, "Black to move"))), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col gap-2 w-full"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex w-full gap-4"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "White can")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
+    className: "mx-1",
+    type: "checkbox",
+    id: "white-short-castle",
+    value: "K",
+    onChange: changeCastle
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: "white-short-castle"
+  }, "O-O")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
+    className: "mx-1",
+    type: "checkbox",
+    id: "white-long-castle",
+    value: "Q",
+    onChange: changeCastle
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: "white-long-castle"
+  }, "O-O-O"))), /*#__PURE__*/React.createElement("div", {
+    className: "flex w-full gap-4"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "Black can")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
+    className: "mx-1",
+    type: "checkbox",
+    id: "black-short-castle",
+    value: "k",
+    onChange: changeCastle
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: "black-short-castle"
+  }, "O-O")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
+    className: "mx-1",
+    type: "checkbox",
+    id: "black-long-castle",
+    value: "q",
+    onChange: changeCastle
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: "black-long-castle"
+  }, "O-O-O")))));
+};
+
+const NextEditor = (props, ref) => {
+  const [fen$1, setFen] = useState(props.fen || fen.empty);
+  const [selected, setSelected] = useState({
+    role: null,
+    color: null
+  });
+  useEffect(() => {
+    if (typeof props.onSelect === 'function') {
+      props.onSelect(fen$1);
+    }
+  }, [fen$1]);
+
+  const onSelect = key => {
+    const array = fen$1.split(' ');
+    array.shift();
+    const options = array.join(' ');
+    const position = dropPiece(ref.current.board, selected, key);
+    const withOptions = [position, options].join(' ');
+    setFen(withOptions);
+  };
+
+  const handleChange = options => {
+    const position = fen$1.split(' ')[0];
+    const withOptions = [position, options, '- 0 1'].join(' ');
+    setFen(withOptions);
+  };
+
+  return /*#__PURE__*/React.createElement(Theme, null, /*#__PURE__*/React.createElement("div", {
+    className: "next-chessground gap-2"
+  }, /*#__PURE__*/React.createElement(EditorPieces, {
+    selected: selected,
+    selectPiece: setSelected,
+    color: "black"
+  }), /*#__PURE__*/React.createElement(Chessboard$1, _extends({}, props, {
+    ref: ref,
+    onSelect: onSelect,
+    fen: fen$1
+  })), /*#__PURE__*/React.createElement(EditorPieces, {
+    selected: selected,
+    selectPiece: setSelected,
+    color: "white"
+  }), /*#__PURE__*/React.createElement(FenOptions, {
+    onChange: handleChange
+  })));
+};
+
+var NextEditor$1 = /*#__PURE__*/forwardRef(NextEditor);
+
 function styleInject(css, ref) {
   if (ref === void 0) ref = {};
   var insertAt = ref.insertAt;
@@ -6666,13 +6912,13 @@ function styleInject(css, ref) {
 var css_248z = ".brown .cg-wrap cg-board {\n  background-image: url('data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgeG1sbnM6eD0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgIHZpZXdCb3g9IjAgMCA4IDgiICBzaGFwZS1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiI+PHJlY3Qgd2lkdGg9IjgiIGhlaWdodD0iOCIgZmlsbD0iI2I1ODg2MyIvPjxnIGlkPSJhIj4gIDxnIGlkPSJiIj4gICAgPGcgaWQ9ImMiPiAgICAgIDxnIGlkPSJkIj4gICAgICAgIDxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IiNmMGQ5YjUiIGlkPSJlIi8+ICAgICAgICA8dXNlIHg9IjIiIGhyZWY9IiNlIiB4OmhyZWY9IiNlIi8+ICAgICAgPC9nPiAgICAgIDx1c2UgeD0iNCIgaHJlZj0iI2QiIHg6aHJlZj0iI2QiLz4gICAgPC9nPiAgICA8dXNlIHg9IjEiIHk9IjEiIGhyZWY9IiNjIiB4OmhyZWY9IiNjIi8+ICA8L2c+ICA8dXNlIHk9IjIiIGhyZWY9IiNiIiB4OmhyZWY9IiNiIi8+PC9nPjx1c2UgeT0iNCIgaHJlZj0iI2EiIHg6aHJlZj0iI2EiLz48L3N2Zz4=');\n}\n.green .cg-wrap cg-board {\n  background-image: url('data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgeG1sbnM6eD0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgIHZpZXdCb3g9IjAgMCA4IDgiICBzaGFwZS1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiI+PHJlY3Qgd2lkdGg9IjgiIGhlaWdodD0iOCIgZmlsbD0iIzc3OTU1NiIvPjxnIGlkPSJhIj4gIDxnIGlkPSJiIj4gICAgPGcgaWQ9ImMiPiAgICAgIDxnIGlkPSJkIj4gICAgICAgIDxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IiNFQkVDRDAiIGlkPSJlIi8+ICAgICAgICA8dXNlIHg9IjIiIGhyZWY9IiNlIiB4OmhyZWY9IiNlIi8+ICAgICAgPC9nPiAgICAgIDx1c2UgeD0iNCIgaHJlZj0iI2QiIHg6aHJlZj0iI2QiLz4gICAgPC9nPiAgICA8dXNlIHg9IjEiIHk9IjEiIGhyZWY9IiNjIiB4OmhyZWY9IiNjIi8+ICA8L2c+ICA8dXNlIHk9IjIiIGhyZWY9IiNiIiB4OmhyZWY9IiNiIi8+PC9nPjx1c2UgeT0iNCIgaHJlZj0iI2EiIHg6aHJlZj0iI2EiLz48L3N2Zz4=');\n}\n.ruby .cg-wrap cg-board {\n  background-image: url('data:image/svg+xml;base64,CjxzdmcgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgIHhtbG5zOng9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiICB2aWV3Qm94PSIwIDAgOCA4IiAgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iPjxyZWN0IHdpZHRoPSI4IiBoZWlnaHQ9IjgiIGZpbGw9IiM4QjI2MzUiLz48ZyBpZD0iYSI+ICA8ZyBpZD0iYiI+ICAgIDxnIGlkPSJjIj4gICAgICA8ZyBpZD0iZCI+ICAgICAgICA8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSIjRDJENEM4IiBpZD0iZSIvPiAgICAgICAgPHVzZSB4PSIyIiBocmVmPSIjZSIgeDpocmVmPSIjZSIvPiAgICAgIDwvZz4gICAgICA8dXNlIHg9IjQiIGhyZWY9IiNkIiB4OmhyZWY9IiNkIi8+ICAgIDwvZz4gICAgPHVzZSB4PSIxIiB5PSIxIiBocmVmPSIjYyIgeDpocmVmPSIjYyIvPiAgPC9nPiAgPHVzZSB5PSIyIiBocmVmPSIjYiIgeDpocmVmPSIjYiIvPjwvZz48dXNlIHk9IjQiIGhyZWY9IiNhIiB4OmhyZWY9IiNhIi8+PC9zdmc+');\n}\n.purple .cg-wrap cg-board {\n  background-image: url('data:image/png;base64,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');\n}\n.teal .cg-wrap cg-board {\n  background-image: url('data:image/svg+xml;base64,CjxzdmcgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgIHhtbG5zOng9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiICB2aWV3Qm94PSIwIDAgOCA4IiAgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iPjxyZWN0IHdpZHRoPSI4IiBoZWlnaHQ9IjgiIGZpbGw9IiMxYzcyYWQiLz48ZyBpZD0iYSI+ICA8ZyBpZD0iYiI+ICAgIDxnIGlkPSJjIj4gICAgICA8ZyBpZD0iZCI+ICAgICAgICA8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSIjZTNlYmYzIiBpZD0iZSIvPiAgICAgICAgPHVzZSB4PSIyIiBocmVmPSIjZSIgeDpocmVmPSIjZSIvPiAgICAgIDwvZz4gICAgICA8dXNlIHg9IjQiIGhyZWY9IiNkIiB4OmhyZWY9IiNkIi8+ICAgIDwvZz4gICAgPHVzZSB4PSIxIiB5PSIxIiBocmVmPSIjYyIgeDpocmVmPSIjYyIvPiAgPC9nPiAgPHVzZSB5PSIyIiBocmVmPSIjYiIgeDpocmVmPSIjYiIvPjwvZz48dXNlIHk9IjQiIGhyZWY9IiNhIiB4OmhyZWY9IiNhIi8+PC9zdmc+');\n}\n";
 styleInject(css_248z);
 
-var css_248z$1 = ".next-chessground .chessground {\n  grid-area: board;\n  position: relative;\n  display: block;\n  height: 0;\n  padding-bottom: 100%;\n  padding-right: 100%;\n  width: 100%;\n  border-radius: 0.25rem;\n  overflow: hidden;\n}\n\n.next-chessground .cg-wrap {\n  display: table;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.next-chessground cg-helper {\n  position: absolute;\n  width: 12.5%;\n  padding-bottom: 12.5%;\n  display: table;\n  bottom: 0;\n}\n\n.next-chessground cg-container {\n  position: absolute;\n  width: 800%;\n  height: 800%;\n  display: block;\n  bottom: 0;\n}\n\n.next-chessground cg-board {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  line-height: 0;\n  background-size: cover;\n  cursor: pointer;\n}\n\n.next-chessground cg-board square {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 12.5%;\n  height: 12.5%;\n  pointer-events: none;\n}\n.next-chessground .highlight cg-board square.last-move {\n  will-change: transform;\n  background-color: rgba(246, 246, 130, 0.5);\n}\n.next-chessground .highlight .correct cg-board square.last-move {\n  background-color: rgba(155, 240, 0, 0.4);\n}\n.next-chessground .highlight .incorrect cg-board square.last-move {\n  background-color: rgba(240, 0, 0, 0.4);\n}\n\n.next-chessground cg-board square.check {\n  background: radial-gradient(\n    ellipse at center,\n    rgba(255, 0, 0, 1) 0%,\n    rgba(231, 0, 0, 1) 25%,\n    rgba(169, 0, 0, 0) 89%,\n    rgba(158, 0, 0, 0) 100%\n  );\n}\n.next-chessground cg-board square.current-premove {\n  background-color: rgba(20, 30, 85, 0.5);\n}\n.next-chessground cg-board piece {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 12.5%;\n  height: 12.5%;\n  background-size: cover;\n  z-index: 2;\n  will-change: transform;\n  pointer-events: none;\n}\n.next-chessground cg-board piece.dragging {\n  cursor: move;\n  z-index: 9;\n}\n.next-chessground cg-board piece.anim {\n  z-index: 8;\n}\n.next-chessground cg-board piece.fading {\n  z-index: 1;\n  opacity: 0.5;\n}\n.next-chessground cg-board piece.ghost {\n  opacity: 0.3;\n}\n.next-chessground .cg-wrap svg {\n  overflow: hidden;\n  position: relative;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: 2;\n  opacity: 0.6;\n}\n.next-chessground .cg-wrap svg image {\n  opacity: 0.5;\n}\n\n.next-chessground .spare-pieces {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n.next-chessground .spare-piece {\n  top: 0;\n  left: 0;\n  padding-bottom: 100%;\n  padding-left: 100%;\n  position: absolute;\n  background-size: contain;\n  background-position: 0% -100%;\n  cursor: pointer;\n}\n.next-chessground .edit-square {\n  display: table;\n  position: relative;\n  width: 14.285%;\n  padding-bottom: 13.285%;\n}\n";
+var css_248z$1 = ".next-chessground .chessground {\n  grid-area: board;\n  position: relative;\n  display: block;\n  height: 0;\n  padding-bottom: 100%;\n  padding-right: 100%;\n  width: 100%;\n  border-radius: 0.25rem;\n  overflow: hidden;\n}\n\n.next-chessground .cg-wrap {\n  display: table;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.next-chessground cg-helper {\n  position: absolute;\n  width: 12.5%;\n  padding-bottom: 12.5%;\n  display: table;\n  bottom: 0;\n}\n\n.next-chessground cg-container {\n  position: absolute;\n  width: 800%;\n  height: 800%;\n  display: block;\n  bottom: 0;\n}\n\n.next-chessground cg-board {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  line-height: 0;\n  background-size: cover;\n  cursor: pointer;\n}\n\n.next-chessground cg-board square {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 12.5%;\n  height: 12.5%;\n  pointer-events: none;\n}\n.next-chessground .highlight cg-board square.last-move {\n  will-change: transform;\n  background-color: rgba(246, 246, 130, 0.5);\n}\n.next-chessground .highlight .correct cg-board square.last-move {\n  background-color: rgba(155, 240, 0, 0.4);\n}\n.next-chessground .highlight .incorrect cg-board square.last-move {\n  background-color: rgba(240, 0, 0, 0.4);\n}\n\n.next-chessground cg-board square.check {\n  background: radial-gradient(\n    ellipse at center,\n    rgba(255, 0, 0, 1) 0%,\n    rgba(231, 0, 0, 1) 25%,\n    rgba(169, 0, 0, 0) 89%,\n    rgba(158, 0, 0, 0) 100%\n  );\n}\n.next-chessground cg-board square.current-premove {\n  background-color: rgba(20, 30, 85, 0.5);\n}\n.next-chessground cg-board piece {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 12.5%;\n  height: 12.5%;\n  background-size: cover;\n  z-index: 2;\n  will-change: transform;\n  pointer-events: none;\n}\n.next-chessground cg-board piece.dragging {\n  cursor: move;\n  z-index: 9;\n}\n.next-chessground cg-board piece.anim {\n  z-index: 8;\n}\n.next-chessground cg-board piece.fading {\n  z-index: 1;\n  opacity: 0.5;\n}\n.next-chessground cg-board piece.ghost {\n  opacity: 0.3;\n}\n.next-chessground .cg-wrap svg {\n  overflow: hidden;\n  position: relative;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: 2;\n  opacity: 0.6;\n}\n.next-chessground .cg-wrap svg image {\n  opacity: 0.5;\n}\n\n.next-chessground .spare-pieces {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n.next-chessground .spare-piece {\n  top: 0;\n  left: 0;\n  padding-bottom: 100%;\n  padding-left: 100%;\n  position: absolute;\n  background-size: contain;\n  background-position: 0% -100%;\n  cursor: pointer;\n}\n.next-chessground .edit-square {\n  display: table;\n  position: relative;\n  width: 14.285%;\n  padding-bottom: 13.285%;\n}\n.next-chessground .promote .edit-square {\n  width: 20%;\n  padding-bottom: 20%;\n}\n";
 styleInject(css_248z$1);
 
 var css_248z$2 = "coords {\n  position: absolute;\n  display: flex;\n  pointer-events: none;\n  user-select: none;\n  color: #fff;\n  font-weight: bold;\n  font-size: 0.5rem;\n  opacity: 0.8;\n}\n.coords-no coords {\n  display: none;\n}\n@media (min-width: 640px) {\n  coords {\n    font-size: 0.75rem;\n  }\n}\ncoords.ranks {\n  flex-flow: column-reverse;\n  top: 0;\n  right: 0;\n  height: 100%;\n  width: 0.8em;\n}\ncoords.ranks.black {\n  flex-flow: column;\n}\ncoords.files {\n  bottom: 0;\n  left: 0;\n  flex-flow: row;\n  width: 100%;\n}\ncoords.files.black {\n  flex-flow: row-reverse;\n}\ncoords.files coord {\n  padding-left: 4px;\n}\ncoords coord {\n  flex: 1 1 auto;\n}\n\n.orientation-white .files coord:nth-child(2n + 1),\n.orientation-white .ranks coord:nth-child(2n),\n.orientation-black .files coord:nth-child(2n),\n.orientation-black .ranks coord:nth-child(2n + 1) {\n  color: #fff;\n}\n.orientation-white .files coord:nth-child(2n),\n.orientation-white .ranks coord:nth-child(2n + 1),\n.orientation-black .files coord:nth-child(2n + 1),\n.orientation-black .ranks coord:nth-child(2n) {\n  color: #779556;\n}\n";
 styleInject(css_248z$2);
 
-var css_248z$3 = ".next-settings .next-cog {\n  width: 1rem;\n  height: 1rem;\n  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjOUY5REIwIiBkPSJNNDg3LjQgMzE1LjdsLTQyLjYtMjQuNmM0LjMtMjMuMiA0LjMtNDcgMC03MC4ybDQyLjYtMjQuNmM0LjktMi44IDcuMS04LjYgNS41LTE0LTExLjEtMzUuNi0zMC02Ny44LTU0LjctOTQuNi0zLjgtNC4xLTEwLTUuMS0xNC44LTIuM0wzODAuOCAxMTBjLTE3LjktMTUuNC0zOC41LTI3LjMtNjAuOC0zNS4xVjI1LjhjMC01LjYtMy45LTEwLjUtOS40LTExLjctMzYuNy04LjItNzQuMy03LjgtMTA5LjIgMC01LjUgMS4yLTkuNCA2LjEtOS40IDExLjdWNzVjLTIyLjIgNy45LTQyLjggMTkuOC02MC44IDM1LjFMODguNyA4NS41Yy00LjktMi44LTExLTEuOS0xNC44IDIuMy0yNC43IDI2LjctNDMuNiA1OC45LTU0LjcgOTQuNi0xLjcgNS40LjYgMTEuMiA1LjUgMTRMNjcuMyAyMjFjLTQuMyAyMy4yLTQuMyA0NyAwIDcwLjJsLTQyLjYgMjQuNmMtNC45IDIuOC03LjEgOC42LTUuNSAxNCAxMS4xIDM1LjYgMzAgNjcuOCA1NC43IDk0LjYgMy44IDQuMSAxMCA1LjEgMTQuOCAyLjNsNDIuNi0yNC42YzE3LjkgMTUuNCAzOC41IDI3LjMgNjAuOCAzNS4xdjQ5LjJjMCA1LjYgMy45IDEwLjUgOS40IDExLjcgMzYuNyA4LjIgNzQuMyA3LjggMTA5LjIgMCA1LjUtMS4yIDkuNC02LjEgOS40LTExLjd2LTQ5LjJjMjIuMi03LjkgNDIuOC0xOS44IDYwLjgtMzUuMWw0Mi42IDI0LjZjNC45IDIuOCAxMSAxLjkgMTQuOC0yLjMgMjQuNy0yNi43IDQzLjYtNTguOSA1NC43LTk0LjYgMS41LTUuNS0uNy0xMS4zLTUuNi0xNC4xek0yNTYgMzM2Yy00NC4xIDAtODAtMzUuOS04MC04MHMzNS45LTgwIDgwLTgwIDgwIDM1LjkgODAgODAtMzUuOSA4MC04MCA4MHoiLz48L3N2Zz4=');\n}\n.next-flip .next-sync {\n  width: 1rem;\n  height: 1rem;\n  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjOUY5REIwIiBkPSJNMzcwLjcyIDEzMy4yOEMzMzkuNDU4IDEwNC4wMDggMjk4Ljg4OCA4Ny45NjIgMjU1Ljg0OCA4OGMtNzcuNDU4LjA2OC0xNDQuMzI4IDUzLjE3OC0xNjIuNzkxIDEyNi44NS0xLjM0NCA1LjM2My02LjEyMiA5LjE1LTExLjY1MSA5LjE1SDI0LjEwM2MtNy40OTggMC0xMy4xOTQtNi44MDctMTEuODA3LTE0LjE3NkMzMy45MzMgOTQuOTI0IDEzNC44MTMgOCAyNTYgOGM2Ni40NDggMCAxMjYuNzkxIDI2LjEzNiAxNzEuMzE1IDY4LjY4NUw0NjMuMDMgNDAuOTdDNDc4LjE0OSAyNS44NTEgNTA0IDM2LjU1OSA1MDQgNTcuOTQxVjE5MmMwIDEzLjI1NS0xMC43NDUgMjQtMjQgMjRIMzQ1Ljk0MWMtMjEuMzgyIDAtMzIuMDktMjUuODUxLTE2Ljk3MS00MC45NzFsNDEuNzUtNDEuNzQ5ek0zMiAyOTZoMTM0LjA1OWMyMS4zODIgMCAzMi4wOSAyNS44NTEgMTYuOTcxIDQwLjk3MWwtNDEuNzUgNDEuNzVjMzEuMjYyIDI5LjI3MyA3MS44MzUgNDUuMzE5IDExNC44NzYgNDUuMjggNzcuNDE4LS4wNyAxNDQuMzE1LTUzLjE0NCAxNjIuNzg3LTEyNi44NDkgMS4zNDQtNS4zNjMgNi4xMjItOS4xNSAxMS42NTEtOS4xNWg1Ny4zMDRjNy40OTggMCAxMy4xOTQgNi44MDcgMTEuODA3IDE0LjE3NkM0NzguMDY3IDQxNy4wNzYgMzc3LjE4NyA1MDQgMjU2IDUwNGMtNjYuNDQ4IDAtMTI2Ljc5MS0yNi4xMzYtMTcxLjMxNS02OC42ODVMNDguOTcgNDcxLjAzQzMzLjg1MSA0ODYuMTQ5IDggNDc1LjQ0MSA4IDQ1NC4wNTlWMzIwYzAtMTMuMjU1IDEwLjc0NS0yNCAyNC0yNHoiLz48L3N2Zz4=');\n}\n.next-trash .next-trash-alt {\n  width: 1rem;\n  height: 1rem;\n  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii05NiAtOTYgNjQwIDY0MCI+PHBhdGggZD0iTTI2OCA0MTZoMjRhMTIgMTIgMCAwIDAgMTItMTJWMTg4YTEyIDEyIDAgMCAwLTEyLTEyaC0yNGExMiAxMiAwIDAgMC0xMiAxMnYyMTZhMTIgMTIgMCAwIDAgMTIgMTJ6TTQzMiA4MGgtODIuNDFsLTM0LTU2LjdBNDggNDggMCAwIDAgMjc0LjQxIDBIMTczLjU5YTQ4IDQ4IDAgMCAwLTQxLjE2IDIzLjNMOTguNDEgODBIMTZBMTYgMTYgMCAwIDAgMCA5NnYxNmExNiAxNiAwIDAgMCAxNiAxNmgxNnYzMzZhNDggNDggMCAwIDAgNDggNDhoMjg4YTQ4IDQ4IDAgMCAwIDQ4LTQ4VjEyOGgxNmExNiAxNiAwIDAgMCAxNi0xNlY5NmExNiAxNiAwIDAgMC0xNi0xNnpNMTcxLjg0IDUwLjkxQTYgNiAwIDAgMSAxNzcgNDhoOTRhNiA2IDAgMCAxIDUuMTUgMi45MUwyOTMuNjEgODBIMTU0LjM5ek0zNjggNDY0SDgwVjEyOGgyODh6bS0yMTItNDhoMjRhMTIgMTIgMCAwIDAgMTItMTJWMTg4YTEyIDEyIDAgMCAwLTEyLTEyaC0yNGExMiAxMiAwIDAgMC0xMiAxMnYyMTZhMTIgMTIgMCAwIDAgMTIgMTJ6Ii8+PC9zdmc+');\n}\n";
+var css_248z$3 = ".next-chessground .next-cog {\n  width: 1rem;\n  height: 1rem;\n  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjOUY5REIwIiBkPSJNNDg3LjQgMzE1LjdsLTQyLjYtMjQuNmM0LjMtMjMuMiA0LjMtNDcgMC03MC4ybDQyLjYtMjQuNmM0LjktMi44IDcuMS04LjYgNS41LTE0LTExLjEtMzUuNi0zMC02Ny44LTU0LjctOTQuNi0zLjgtNC4xLTEwLTUuMS0xNC44LTIuM0wzODAuOCAxMTBjLTE3LjktMTUuNC0zOC41LTI3LjMtNjAuOC0zNS4xVjI1LjhjMC01LjYtMy45LTEwLjUtOS40LTExLjctMzYuNy04LjItNzQuMy03LjgtMTA5LjIgMC01LjUgMS4yLTkuNCA2LjEtOS40IDExLjdWNzVjLTIyLjIgNy45LTQyLjggMTkuOC02MC44IDM1LjFMODguNyA4NS41Yy00LjktMi44LTExLTEuOS0xNC44IDIuMy0yNC43IDI2LjctNDMuNiA1OC45LTU0LjcgOTQuNi0xLjcgNS40LjYgMTEuMiA1LjUgMTRMNjcuMyAyMjFjLTQuMyAyMy4yLTQuMyA0NyAwIDcwLjJsLTQyLjYgMjQuNmMtNC45IDIuOC03LjEgOC42LTUuNSAxNCAxMS4xIDM1LjYgMzAgNjcuOCA1NC43IDk0LjYgMy44IDQuMSAxMCA1LjEgMTQuOCAyLjNsNDIuNi0yNC42YzE3LjkgMTUuNCAzOC41IDI3LjMgNjAuOCAzNS4xdjQ5LjJjMCA1LjYgMy45IDEwLjUgOS40IDExLjcgMzYuNyA4LjIgNzQuMyA3LjggMTA5LjIgMCA1LjUtMS4yIDkuNC02LjEgOS40LTExLjd2LTQ5LjJjMjIuMi03LjkgNDIuOC0xOS44IDYwLjgtMzUuMWw0Mi42IDI0LjZjNC45IDIuOCAxMSAxLjkgMTQuOC0yLjMgMjQuNy0yNi43IDQzLjYtNTguOSA1NC43LTk0LjYgMS41LTUuNS0uNy0xMS4zLTUuNi0xNC4xek0yNTYgMzM2Yy00NC4xIDAtODAtMzUuOS04MC04MHMzNS45LTgwIDgwLTgwIDgwIDM1LjkgODAgODAtMzUuOSA4MC04MCA4MHoiLz48L3N2Zz4=');\n}\n.next-chessground .next-sync {\n  width: 1rem;\n  height: 1rem;\n  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjOUY5REIwIiBkPSJNMzcwLjcyIDEzMy4yOEMzMzkuNDU4IDEwNC4wMDggMjk4Ljg4OCA4Ny45NjIgMjU1Ljg0OCA4OGMtNzcuNDU4LjA2OC0xNDQuMzI4IDUzLjE3OC0xNjIuNzkxIDEyNi44NS0xLjM0NCA1LjM2My02LjEyMiA5LjE1LTExLjY1MSA5LjE1SDI0LjEwM2MtNy40OTggMC0xMy4xOTQtNi44MDctMTEuODA3LTE0LjE3NkMzMy45MzMgOTQuOTI0IDEzNC44MTMgOCAyNTYgOGM2Ni40NDggMCAxMjYuNzkxIDI2LjEzNiAxNzEuMzE1IDY4LjY4NUw0NjMuMDMgNDAuOTdDNDc4LjE0OSAyNS44NTEgNTA0IDM2LjU1OSA1MDQgNTcuOTQxVjE5MmMwIDEzLjI1NS0xMC43NDUgMjQtMjQgMjRIMzQ1Ljk0MWMtMjEuMzgyIDAtMzIuMDktMjUuODUxLTE2Ljk3MS00MC45NzFsNDEuNzUtNDEuNzQ5ek0zMiAyOTZoMTM0LjA1OWMyMS4zODIgMCAzMi4wOSAyNS44NTEgMTYuOTcxIDQwLjk3MWwtNDEuNzUgNDEuNzVjMzEuMjYyIDI5LjI3MyA3MS44MzUgNDUuMzE5IDExNC44NzYgNDUuMjggNzcuNDE4LS4wNyAxNDQuMzE1LTUzLjE0NCAxNjIuNzg3LTEyNi44NDkgMS4zNDQtNS4zNjMgNi4xMjItOS4xNSAxMS42NTEtOS4xNWg1Ny4zMDRjNy40OTggMCAxMy4xOTQgNi44MDcgMTEuODA3IDE0LjE3NkM0NzguMDY3IDQxNy4wNzYgMzc3LjE4NyA1MDQgMjU2IDUwNGMtNjYuNDQ4IDAtMTI2Ljc5MS0yNi4xMzYtMTcxLjMxNS02OC42ODVMNDguOTcgNDcxLjAzQzMzLjg1MSA0ODYuMTQ5IDggNDc1LjQ0MSA4IDQ1NC4wNTlWMzIwYzAtMTMuMjU1IDEwLjc0NS0yNCAyNC0yNHoiLz48L3N2Zz4=');\n}\n.next-chessground .next-trash {\n  width: 1rem;\n  height: 1rem;\n  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii05NiAtOTYgNjQwIDY0MCI+PHBhdGggZD0iTTI2OCA0MTZoMjRhMTIgMTIgMCAwIDAgMTItMTJWMTg4YTEyIDEyIDAgMCAwLTEyLTEyaC0yNGExMiAxMiAwIDAgMC0xMiAxMnYyMTZhMTIgMTIgMCAwIDAgMTIgMTJ6TTQzMiA4MGgtODIuNDFsLTM0LTU2LjdBNDggNDggMCAwIDAgMjc0LjQxIDBIMTczLjU5YTQ4IDQ4IDAgMCAwLTQxLjE2IDIzLjNMOTguNDEgODBIMTZBMTYgMTYgMCAwIDAgMCA5NnYxNmExNiAxNiAwIDAgMCAxNiAxNmgxNnYzMzZhNDggNDggMCAwIDAgNDggNDhoMjg4YTQ4IDQ4IDAgMCAwIDQ4LTQ4VjEyOGgxNmExNiAxNiAwIDAgMCAxNi0xNlY5NmExNiAxNiAwIDAgMC0xNi0xNnpNMTcxLjg0IDUwLjkxQTYgNiAwIDAgMSAxNzcgNDhoOTRhNiA2IDAgMCAxIDUuMTUgMi45MUwyOTMuNjEgODBIMTU0LjM5ek0zNjggNDY0SDgwVjEyOGgyODh6bS0yMTItNDhoMjRhMTIgMTIgMCAwIDAgMTItMTJWMTg4YTEyIDEyIDAgMCAwLTEyLTEyaC0yNGExMiAxMiAwIDAgMC0xMiAxMnYyMTZhMTIgMTIgMCAwIDAgMTIgMTJ6Ii8+PC9zdmc+');\n}\n";
 styleInject(css_248z$3);
 
 var css_248z$4 = "*,\n::after,\n::before {\n  box-sizing: border-box;\n  border-width: 0;\n  border-style: solid;\n}\n\n.next-chessground {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n}\n.next-chessground .checkbox {\n  display: flex;\n  margin: 0;\n  align-items: center;\n  padding-left: 0.25rem;\n  width: 2.75rem;\n  height: 1.75rem;\n  outline: none;\n  appearance: none;\n  transition: 0.2s ease-in-out;\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n  cursor: pointer;\n}\n.next-chessground .checkbox:before {\n  background-color: rgba(156, 163, 175);\n  width: 1rem;\n  height: 1rem;\n  border-radius: 999px;\n  content: '';\n  transition: 0.2s ease-in-out;\n}\n.next-chessground .checkbox:checked:before {\n  background-color: rgba(4, 120, 87);\n  transform: translate(1rem, 0);\n}\n.next-chessground .next-button {\n  background-color: transparent;\n  background-image: none;\n  cursor: pointer;\n  display: flex;\n  outline: none;\n\n  padding: 0;\n  line-height: inherit;\n  color: inherit;\n  font-size: 100%;\n}\n.next-chessground .next-button:focus {\n  outline: none;\n}\n";
@@ -6684,8 +6930,8 @@ styleInject(css_248z$5);
 var css_248z$6 = "/**\n * Cburnett\n */\n.cburnett piece.pawn.white {\n  background-image: url('https://lichess1.org/assets/_MKI2V3/piece/cburnett/wP.svg');\n}\n.cburnett piece.bishop.white {\n  background-image: url('https://lichess1.org/assets/_MKI2V3/piece/cburnett/wB.svg');\n}\n.cburnett piece.knight.white {\n  background-image: url('https://lichess1.org/assets/_MKI2V3/piece/cburnett/wN.svg');\n}\n.cburnett piece.rook.white {\n  background-image: url('https://lichess1.org/assets/_MKI2V3/piece/cburnett/wR.svg');\n}\n.cburnett piece.queen.white {\n  background-image: url('https://lichess1.org/assets/_MKI2V3/piece/cburnett/wQ.svg');\n}\n.cburnett piece.king.white {\n  background-image: url('https://lichess1.org/assets/_MKI2V3/piece/cburnett/wK.svg');\n}\n.cburnett piece.pawn.black {\n  background-image: url('https://lichess1.org/assets/_MKI2V3/piece/cburnett/bP.svg');\n}\n.cburnett piece.bishop.black {\n  background-image: url('https://lichess1.org/assets/_MKI2V3/piece/cburnett/bB.svg');\n}\n.cburnett piece.knight.black {\n  background-image: url('https://lichess1.org/assets/_MKI2V3/piece/cburnett/bN.svg');\n}\n.cburnett piece.rook.black {\n  background-image: url('https://lichess1.org/assets/_MKI2V3/piece/cburnett/bR.svg');\n}\n.cburnett piece.queen.black {\n  background-image: url('https://lichess1.org/assets/_MKI2V3/piece/cburnett/bQ.svg');\n}\n.cburnett piece.king.black {\n  background-image: url('https://lichess1.org/assets/_MKI2V3/piece/cburnett/bK.svg');\n}\n\n/**\n * Classic\n */\n.classic piece.pawn.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/classic/150/wp.png');\n}\n.classic piece.bishop.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/classic/150/wb.png');\n}\n.classic piece.knight.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/classic/150/wn.png');\n}\n.classic piece.rook.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/classic/150/wr.png');\n}\n.classic piece.queen.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/classic/150/wq.png');\n}\n.classic piece.king.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/classic/150/wk.png');\n}\n.classic piece.pawn.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/classic/150/bp.png');\n}\n.classic piece.bishop.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/classic/150/bb.png');\n}\n.classic piece.knight.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/classic/150/bn.png');\n}\n.classic piece.rook.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/classic/150/br.png');\n}\n.classic piece.queen.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/classic/150/bq.png');\n}\n.classic piece.king.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/classic/150/bk.png');\n}\n\n/**\n * Neo\n */\n.neo piece.pawn.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/wp.png');\n}\n.neo piece.bishop.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/wb.png');\n}\n.neo piece.knight.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/wn.png');\n}\n.neo piece.rook.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/wr.png');\n}\n.neo piece.queen.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/wq.png');\n}\n.neo piece.king.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/wk.png');\n}\n.neo piece.pawn.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/bp.png');\n}\n.neo piece.bishop.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/bb.png');\n}\n.neo piece.knight.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/bn.png');\n}\n.neo piece.rook.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/br.png');\n}\n.neo piece.queen.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/bq.png');\n}\n.neo piece.king.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/bk.png');\n}\n\n/**\n * Alpha\n */\n.alpha piece.pawn.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/alpha/150/wp.png');\n}\n.alpha piece.bishop.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/alpha/150/wb.png');\n}\n.alpha piece.knight.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/alpha/150/wn.png');\n}\n.alpha piece.rook.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/alpha/150/wr.png');\n}\n.alpha piece.queen.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/alpha/150/wq.png');\n}\n.alpha piece.king.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/alpha/150/wk.png');\n}\n.alpha piece.pawn.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/alpha/150/bp.png');\n}\n.alpha piece.bishop.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/alpha/150/bb.png');\n}\n.alpha piece.knight.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/alpha/150/bn.png');\n}\n.alpha piece.rook.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/alpha/150/br.png');\n}\n.alpha piece.queen.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/alpha/150/bq.png');\n}\n.alpha piece.king.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/alpha/150/bk.png');\n}\n\n/**\n * Bases\n */\n.bases piece.pawn.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/bases/150/wp.png');\n}\n.bases piece.bishop.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/bases/150/wb.png');\n}\n.bases piece.knight.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/bases/150/wn.png');\n}\n.bases piece.rook.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/bases/150/wr.png');\n}\n.bases piece.queen.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/bases/150/wq.png');\n}\n.bases piece.king.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/bases/150/wk.png');\n}\n.bases piece.pawn.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/bases/150/bp.png');\n}\n.bases piece.bishop.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/bases/150/bb.png');\n}\n.bases piece.knight.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/bases/150/bn.png');\n}\n.bases piece.rook.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/bases/150/br.png');\n}\n.bases piece.queen.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/bases/150/bq.png');\n}\n.bases piece.king.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/bases/150/bk.png');\n}\n";
 styleInject(css_248z$6);
 
-var css_248z$7 = ".flex {\n  display: flex;\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-row-reverse {\n  flex-direction: row-reverse;\n}\n.grid {\n  display: grid;\n}\n.grid-cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-3 {\n  gap: 0.75rem;\n}\n.w-full {\n  width: 100%;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.py-1\\.5 {\n  padding-top: 0.375rem;\n  padding-bottom: 0.375rem;\n}\n.px-2 {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.cursor-resize {\n  cursor: nesw-resize;\n}\n.outline-none,\n.outline-none:focus {\n  outline: none;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-gray-400 {\n  color: rgba(156, 163, 175);\n}\n.text-gray-800 {\n  color: rgba(31, 41, 55);\n}\n.bg-white {\n  background-color: #fff;\n}\n.border {\n  border-width: 1px;\n  border-style: solid;\n}\n.border-gray-300 {\n  border-color: rgba(209, 213, 219);\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n";
+var css_248z$7 = ".flex {\n  display: flex;\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-row-reverse {\n  flex-direction: row-reverse;\n}\n.grid {\n  display: grid;\n}\n.grid-cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-3 {\n  gap: 0.75rem;\n}\n.w-full {\n  width: 100%;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.py-1\\.5 {\n  padding-top: 0.375rem;\n  padding-bottom: 0.375rem;\n}\n.px-2 {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.cursor-resize {\n  cursor: nesw-resize;\n}\n.outline-none,\n.outline-none:focus {\n  outline: none;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-gray-400 {\n  color: rgba(156, 163, 175);\n}\n.text-gray-800 {\n  color: rgba(31, 41, 55);\n}\n.bg-white {\n  background-color: #fff;\n}\n.bg-orange-300 {\n  background-color: #fbd38d;\n}\n.border {\n  border-width: 1px;\n  border-style: solid;\n}\n.border-gray-300 {\n  border-color: rgba(209, 213, 219);\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n";
 styleInject(css_248z$7);
 
 export default NextChessground$1;
-export { NextChessground$1 as NextChessground, fen, useChess, useChessground };
+export { NextChessground$1 as NextChessground, NextEditor$1 as NextEditor, fen, useChess, useChessground };

package/dist/index.js

@@ -484,6 +484,18 @@ const themable = () => {
   return theme;
 };
 
+const Theme = ({
+  children
+}) => {
+  const [theme, setTheme] = React.useState(themable());
+  return /*#__PURE__*/React__default['default'].createElement(ThemeContext.Provider, {
+    value: {
+      theme,
+      setTheme
+    }
+  }, children);
+};
+
 function mergeClassNames() {
   return Array.prototype.slice.call(arguments).reduce(function (classList, arg) {
     return classList.concat(arg);
@@ -5953,10 +5965,13 @@ const initial$1 = fen.initial;
 
 const useChess = props => {
   const [fen, setFen] = React.useState(props.fen || initial$1);
-  const [chess$1] = React.useState(new chess.Chess(fen)); // reinitialize when FEN changes from props
+  const [chess$1, setChess] = React.useState(new chess.Chess(fen)); // reinitialize when FEN changes from props
 
   React.useEffect(() => {
-    setFen(props.fen);
+    if (props.fen) {
+      setFen(props.fen);
+      setChess(new chess.Chess(props.fen));
+    }
   }, [props.fen]);
   const [lastMove, setLastMove] = React.useState([]);
   const promotion = props.lastMove && props.lastMove.promotion;
@@ -6238,8 +6253,11 @@ var Modal = /*@__PURE__*/getDefaultExportFromCjs(reactPureModal_min);
 const SparePiece = ({
   role,
   color,
+  highlighted,
   selectPiece
 }) => {
+  const bin = role === 'bin';
+
   const handleClick = () => {
     if (typeof selectPiece === 'function') {
       selectPiece({
@@ -6250,9 +6268,9 @@ const SparePiece = ({
   };
 
   return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "edit-square border border-gray-300 rounded"
+    className: mergeClassNames('edit-square border border-gray-300 rounded', highlighted && 'bg-orange-300')
   }, /*#__PURE__*/React__default['default'].createElement("piece", {
-    className: `${role} ${color} spare-piece`,
+    className: mergeClassNames('spare-piece', role, color, bin && 'next-trash'),
     onClick: handleClick
   }));
 };
@@ -6269,11 +6287,11 @@ const Promote = ({
   };
 
   return /*#__PURE__*/React__default['default'].createElement(Modal, {
-    header: "Pawn promotion",
+    closeButton: "",
     isOpen: isOpen,
     onClose: hide
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "flex gap-2 justify-center"
+    className: "promote flex gap-2 py-1.5 justify-center"
   }, /*#__PURE__*/React__default['default'].createElement(SparePiece, {
     color: color,
     role: "queen",
@@ -6623,14 +6641,8 @@ const Advanced = ({
 };
 
 const NextChessground = (props, ref) => {
-  const [theme, setTheme] = React.useState(themable());
   const [orientation, flip] = useOrientation(props);
-  return /*#__PURE__*/React__default['default'].createElement(ThemeContext.Provider, {
-    value: {
-      theme,
-      setTheme
-    }
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default['default'].createElement(Theme, null, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "next-chessground"
   }, /*#__PURE__*/React__default['default'].createElement(Chessboard$1, _extends({}, props, {
     ref: ref,
@@ -6643,6 +6655,240 @@ const NextChessground = (props, ref) => {
 
 var NextChessground$1 = /*#__PURE__*/React.forwardRef(NextChessground);
 
+const EditorPieces = props => {
+  const {
+    theme
+  } = useChessground();
+  const roles = ['bin', 'pawn', 'knight', 'bishop', 'rook', 'queen', 'king'];
+
+  const showPiece = (role, props) => {
+    const {
+      color = 'white',
+      selected = {
+        role: null,
+        color: null
+      }
+    } = props;
+    const highlighted = role === selected.role && color === selected.color;
+    return /*#__PURE__*/React__default['default'].createElement(SparePiece, _extends({
+      key: `${role}-${color}`,
+      highlighted: highlighted,
+      role: role,
+      color: color
+    }, props));
+  };
+
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: mergeClassNames('spare-pieces flex gap-2', theme.pieces)
+  }, roles.map(role => showPiece(role, props)));
+};
+
+/**
+ * Pieces diff from a Chessground board
+ */
+const piecesDiff = key => {
+  const map = new Map();
+  map.set(key, null);
+  return map;
+};
+/**
+ * Drop piece to a Chessground board
+ */
+
+
+const dropPiece = (cg, selected, key) => {
+  if (!cg) {
+    throw new Error('Chessground is not defined');
+  }
+
+  if (!selected || !selected.role || !selected.color) {
+    return cg.getFen();
+  }
+
+  if (selected.role === 'bin') {
+    cg.setPieces(piecesDiff(key));
+    return cg.getFen();
+  }
+
+  const square = cg.state.pieces.get(key);
+
+  if (!square) {
+    cg.newPiece(selected, key);
+    return cg.getFen();
+  }
+
+  if (square.role === selected.role && square.color === selected.color) {
+    cg.setPieces(piecesDiff(key));
+    return cg.getFen();
+  }
+
+  cg.setPieces(piecesDiff(key));
+  cg.newPiece(selected, key);
+  return cg.getFen();
+};
+
+const getCastles = (initial, option) => {
+  if (!option) {
+    return initial;
+  }
+
+  const all = ['K', 'Q', 'k', 'q'];
+  const array = all.map(letter => {
+    if (letter !== option) {
+      if (initial.includes(letter)) {
+        return letter;
+      }
+
+      return '';
+    }
+
+    if (initial.includes(option)) {
+      return '';
+    }
+
+    return option;
+  });
+  const string = array.join('');
+  return string.length ? string : '-';
+};
+
+const FenOptions = ({
+  onChange
+}) => {
+  const [side, setSide] = React.useState('w');
+  const [castles, setCastles] = React.useState('-');
+  React.useEffect(() => {
+    if (typeof onChange === 'function') {
+      onChange([side, castles].join(' '));
+    }
+  }, [side, castles]);
+
+  const changeSide = e => {
+    const {
+      value
+    } = e.target;
+    setSide(value);
+  };
+
+  const changeCastle = e => {
+    const {
+      value
+    } = e.target;
+    setCastles(getCastles(castles, value));
+  };
+
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "flex flex-col gap-2 w-full"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "flex gap-2 w-full"
+  }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("input", {
+    defaultChecked: true,
+    className: "mx-1",
+    type: "radio",
+    id: "white-radio",
+    name: "side-to-move",
+    value: "w",
+    onChange: changeSide
+  }), /*#__PURE__*/React__default['default'].createElement("label", {
+    htmlFor: "white-radio"
+  }, "White to move")), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("input", {
+    className: "mx-1",
+    type: "radio",
+    id: "black-radio",
+    name: "side-to-move",
+    value: "b",
+    onChange: changeSide
+  }), /*#__PURE__*/React__default['default'].createElement("label", {
+    htmlFor: "black-radio"
+  }, "Black to move"))), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "flex flex-col gap-2 w-full"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "flex w-full gap-4"
+  }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("span", null, "White can")), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("input", {
+    className: "mx-1",
+    type: "checkbox",
+    id: "white-short-castle",
+    value: "K",
+    onChange: changeCastle
+  }), /*#__PURE__*/React__default['default'].createElement("label", {
+    htmlFor: "white-short-castle"
+  }, "O-O")), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("input", {
+    className: "mx-1",
+    type: "checkbox",
+    id: "white-long-castle",
+    value: "Q",
+    onChange: changeCastle
+  }), /*#__PURE__*/React__default['default'].createElement("label", {
+    htmlFor: "white-long-castle"
+  }, "O-O-O"))), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "flex w-full gap-4"
+  }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("span", null, "Black can")), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("input", {
+    className: "mx-1",
+    type: "checkbox",
+    id: "black-short-castle",
+    value: "k",
+    onChange: changeCastle
+  }), /*#__PURE__*/React__default['default'].createElement("label", {
+    htmlFor: "black-short-castle"
+  }, "O-O")), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("input", {
+    className: "mx-1",
+    type: "checkbox",
+    id: "black-long-castle",
+    value: "q",
+    onChange: changeCastle
+  }), /*#__PURE__*/React__default['default'].createElement("label", {
+    htmlFor: "black-long-castle"
+  }, "O-O-O")))));
+};
+
+const NextEditor = (props, ref) => {
+  const [fen$1, setFen] = React.useState(props.fen || fen.empty);
+  const [selected, setSelected] = React.useState({
+    role: null,
+    color: null
+  });
+  React.useEffect(() => {
+    if (typeof props.onSelect === 'function') {
+      props.onSelect(fen$1);
+    }
+  }, [fen$1]);
+
+  const onSelect = key => {
+    const array = fen$1.split(' ');
+    array.shift();
+    const options = array.join(' ');
+    const position = dropPiece(ref.current.board, selected, key);
+    const withOptions = [position, options].join(' ');
+    setFen(withOptions);
+  };
+
+  const handleChange = options => {
+    const position = fen$1.split(' ')[0];
+    const withOptions = [position, options, '- 0 1'].join(' ');
+    setFen(withOptions);
+  };
+
+  return /*#__PURE__*/React__default['default'].createElement(Theme, null, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "next-chessground gap-2"
+  }, /*#__PURE__*/React__default['default'].createElement(EditorPieces, {
+    selected: selected,
+    selectPiece: setSelected,
+    color: "black"
+  }), /*#__PURE__*/React__default['default'].createElement(Chessboard$1, _extends({}, props, {
+    ref: ref,
+    onSelect: onSelect,
+    fen: fen$1
+  })), /*#__PURE__*/React__default['default'].createElement(EditorPieces, {
+    selected: selected,
+    selectPiece: setSelected,
+    color: "white"
+  }), /*#__PURE__*/React__default['default'].createElement(FenOptions, {
+    onChange: handleChange
+  })));
+};
+
+var NextEditor$1 = /*#__PURE__*/React.forwardRef(NextEditor);
+
 function styleInject(css, ref) {
   if (ref === void 0) ref = {};
   var insertAt = ref.insertAt;
@@ -6675,13 +6921,13 @@ function styleInject(css, ref) {
 var css_248z = ".brown .cg-wrap cg-board {\n  background-image: url('data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgeG1sbnM6eD0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgIHZpZXdCb3g9IjAgMCA4IDgiICBzaGFwZS1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiI+PHJlY3Qgd2lkdGg9IjgiIGhlaWdodD0iOCIgZmlsbD0iI2I1ODg2MyIvPjxnIGlkPSJhIj4gIDxnIGlkPSJiIj4gICAgPGcgaWQ9ImMiPiAgICAgIDxnIGlkPSJkIj4gICAgICAgIDxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IiNmMGQ5YjUiIGlkPSJlIi8+ICAgICAgICA8dXNlIHg9IjIiIGhyZWY9IiNlIiB4OmhyZWY9IiNlIi8+ICAgICAgPC9nPiAgICAgIDx1c2UgeD0iNCIgaHJlZj0iI2QiIHg6aHJlZj0iI2QiLz4gICAgPC9nPiAgICA8dXNlIHg9IjEiIHk9IjEiIGhyZWY9IiNjIiB4OmhyZWY9IiNjIi8+ICA8L2c+ICA8dXNlIHk9IjIiIGhyZWY9IiNiIiB4OmhyZWY9IiNiIi8+PC9nPjx1c2UgeT0iNCIgaHJlZj0iI2EiIHg6aHJlZj0iI2EiLz48L3N2Zz4=');\n}\n.green .cg-wrap cg-board {\n  background-image: url('data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgeG1sbnM6eD0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgIHZpZXdCb3g9IjAgMCA4IDgiICBzaGFwZS1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiI+PHJlY3Qgd2lkdGg9IjgiIGhlaWdodD0iOCIgZmlsbD0iIzc3OTU1NiIvPjxnIGlkPSJhIj4gIDxnIGlkPSJiIj4gICAgPGcgaWQ9ImMiPiAgICAgIDxnIGlkPSJkIj4gICAgICAgIDxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IiNFQkVDRDAiIGlkPSJlIi8+ICAgICAgICA8dXNlIHg9IjIiIGhyZWY9IiNlIiB4OmhyZWY9IiNlIi8+ICAgICAgPC9nPiAgICAgIDx1c2UgeD0iNCIgaHJlZj0iI2QiIHg6aHJlZj0iI2QiLz4gICAgPC9nPiAgICA8dXNlIHg9IjEiIHk9IjEiIGhyZWY9IiNjIiB4OmhyZWY9IiNjIi8+ICA8L2c+ICA8dXNlIHk9IjIiIGhyZWY9IiNiIiB4OmhyZWY9IiNiIi8+PC9nPjx1c2UgeT0iNCIgaHJlZj0iI2EiIHg6aHJlZj0iI2EiLz48L3N2Zz4=');\n}\n.ruby .cg-wrap cg-board {\n  background-image: url('data:image/svg+xml;base64,CjxzdmcgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgIHhtbG5zOng9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiICB2aWV3Qm94PSIwIDAgOCA4IiAgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iPjxyZWN0IHdpZHRoPSI4IiBoZWlnaHQ9IjgiIGZpbGw9IiM4QjI2MzUiLz48ZyBpZD0iYSI+ICA8ZyBpZD0iYiI+ICAgIDxnIGlkPSJjIj4gICAgICA8ZyBpZD0iZCI+ICAgICAgICA8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSIjRDJENEM4IiBpZD0iZSIvPiAgICAgICAgPHVzZSB4PSIyIiBocmVmPSIjZSIgeDpocmVmPSIjZSIvPiAgICAgIDwvZz4gICAgICA8dXNlIHg9IjQiIGhyZWY9IiNkIiB4OmhyZWY9IiNkIi8+ICAgIDwvZz4gICAgPHVzZSB4PSIxIiB5PSIxIiBocmVmPSIjYyIgeDpocmVmPSIjYyIvPiAgPC9nPiAgPHVzZSB5PSIyIiBocmVmPSIjYiIgeDpocmVmPSIjYiIvPjwvZz48dXNlIHk9IjQiIGhyZWY9IiNhIiB4OmhyZWY9IiNhIi8+PC9zdmc+');\n}\n.purple .cg-wrap cg-board {\n  background-image: url('data:image/png;base64,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');\n}\n.teal .cg-wrap cg-board {\n  background-image: url('data:image/svg+xml;base64,CjxzdmcgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgIHhtbG5zOng9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiICB2aWV3Qm94PSIwIDAgOCA4IiAgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iPjxyZWN0IHdpZHRoPSI4IiBoZWlnaHQ9IjgiIGZpbGw9IiMxYzcyYWQiLz48ZyBpZD0iYSI+ICA8ZyBpZD0iYiI+ICAgIDxnIGlkPSJjIj4gICAgICA8ZyBpZD0iZCI+ICAgICAgICA8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSIjZTNlYmYzIiBpZD0iZSIvPiAgICAgICAgPHVzZSB4PSIyIiBocmVmPSIjZSIgeDpocmVmPSIjZSIvPiAgICAgIDwvZz4gICAgICA8dXNlIHg9IjQiIGhyZWY9IiNkIiB4OmhyZWY9IiNkIi8+ICAgIDwvZz4gICAgPHVzZSB4PSIxIiB5PSIxIiBocmVmPSIjYyIgeDpocmVmPSIjYyIvPiAgPC9nPiAgPHVzZSB5PSIyIiBocmVmPSIjYiIgeDpocmVmPSIjYiIvPjwvZz48dXNlIHk9IjQiIGhyZWY9IiNhIiB4OmhyZWY9IiNhIi8+PC9zdmc+');\n}\n";
 styleInject(css_248z);
 
-var css_248z$1 = ".next-chessground .chessground {\n  grid-area: board;\n  position: relative;\n  display: block;\n  height: 0;\n  padding-bottom: 100%;\n  padding-right: 100%;\n  width: 100%;\n  border-radius: 0.25rem;\n  overflow: hidden;\n}\n\n.next-chessground .cg-wrap {\n  display: table;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.next-chessground cg-helper {\n  position: absolute;\n  width: 12.5%;\n  padding-bottom: 12.5%;\n  display: table;\n  bottom: 0;\n}\n\n.next-chessground cg-container {\n  position: absolute;\n  width: 800%;\n  height: 800%;\n  display: block;\n  bottom: 0;\n}\n\n.next-chessground cg-board {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  line-height: 0;\n  background-size: cover;\n  cursor: pointer;\n}\n\n.next-chessground cg-board square {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 12.5%;\n  height: 12.5%;\n  pointer-events: none;\n}\n.next-chessground .highlight cg-board square.last-move {\n  will-change: transform;\n  background-color: rgba(246, 246, 130, 0.5);\n}\n.next-chessground .highlight .correct cg-board square.last-move {\n  background-color: rgba(155, 240, 0, 0.4);\n}\n.next-chessground .highlight .incorrect cg-board square.last-move {\n  background-color: rgba(240, 0, 0, 0.4);\n}\n\n.next-chessground cg-board square.check {\n  background: radial-gradient(\n    ellipse at center,\n    rgba(255, 0, 0, 1) 0%,\n    rgba(231, 0, 0, 1) 25%,\n    rgba(169, 0, 0, 0) 89%,\n    rgba(158, 0, 0, 0) 100%\n  );\n}\n.next-chessground cg-board square.current-premove {\n  background-color: rgba(20, 30, 85, 0.5);\n}\n.next-chessground cg-board piece {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 12.5%;\n  height: 12.5%;\n  background-size: cover;\n  z-index: 2;\n  will-change: transform;\n  pointer-events: none;\n}\n.next-chessground cg-board piece.dragging {\n  cursor: move;\n  z-index: 9;\n}\n.next-chessground cg-board piece.anim {\n  z-index: 8;\n}\n.next-chessground cg-board piece.fading {\n  z-index: 1;\n  opacity: 0.5;\n}\n.next-chessground cg-board piece.ghost {\n  opacity: 0.3;\n}\n.next-chessground .cg-wrap svg {\n  overflow: hidden;\n  position: relative;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: 2;\n  opacity: 0.6;\n}\n.next-chessground .cg-wrap svg image {\n  opacity: 0.5;\n}\n\n.next-chessground .spare-pieces {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n.next-chessground .spare-piece {\n  top: 0;\n  left: 0;\n  padding-bottom: 100%;\n  padding-left: 100%;\n  position: absolute;\n  background-size: contain;\n  background-position: 0% -100%;\n  cursor: pointer;\n}\n.next-chessground .edit-square {\n  display: table;\n  position: relative;\n  width: 14.285%;\n  padding-bottom: 13.285%;\n}\n";
+var css_248z$1 = ".next-chessground .chessground {\n  grid-area: board;\n  position: relative;\n  display: block;\n  height: 0;\n  padding-bottom: 100%;\n  padding-right: 100%;\n  width: 100%;\n  border-radius: 0.25rem;\n  overflow: hidden;\n}\n\n.next-chessground .cg-wrap {\n  display: table;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.next-chessground cg-helper {\n  position: absolute;\n  width: 12.5%;\n  padding-bottom: 12.5%;\n  display: table;\n  bottom: 0;\n}\n\n.next-chessground cg-container {\n  position: absolute;\n  width: 800%;\n  height: 800%;\n  display: block;\n  bottom: 0;\n}\n\n.next-chessground cg-board {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  line-height: 0;\n  background-size: cover;\n  cursor: pointer;\n}\n\n.next-chessground cg-board square {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 12.5%;\n  height: 12.5%;\n  pointer-events: none;\n}\n.next-chessground .highlight cg-board square.last-move {\n  will-change: transform;\n  background-color: rgba(246, 246, 130, 0.5);\n}\n.next-chessground .highlight .correct cg-board square.last-move {\n  background-color: rgba(155, 240, 0, 0.4);\n}\n.next-chessground .highlight .incorrect cg-board square.last-move {\n  background-color: rgba(240, 0, 0, 0.4);\n}\n\n.next-chessground cg-board square.check {\n  background: radial-gradient(\n    ellipse at center,\n    rgba(255, 0, 0, 1) 0%,\n    rgba(231, 0, 0, 1) 25%,\n    rgba(169, 0, 0, 0) 89%,\n    rgba(158, 0, 0, 0) 100%\n  );\n}\n.next-chessground cg-board square.current-premove {\n  background-color: rgba(20, 30, 85, 0.5);\n}\n.next-chessground cg-board piece {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 12.5%;\n  height: 12.5%;\n  background-size: cover;\n  z-index: 2;\n  will-change: transform;\n  pointer-events: none;\n}\n.next-chessground cg-board piece.dragging {\n  cursor: move;\n  z-index: 9;\n}\n.next-chessground cg-board piece.anim {\n  z-index: 8;\n}\n.next-chessground cg-board piece.fading {\n  z-index: 1;\n  opacity: 0.5;\n}\n.next-chessground cg-board piece.ghost {\n  opacity: 0.3;\n}\n.next-chessground .cg-wrap svg {\n  overflow: hidden;\n  position: relative;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: 2;\n  opacity: 0.6;\n}\n.next-chessground .cg-wrap svg image {\n  opacity: 0.5;\n}\n\n.next-chessground .spare-pieces {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n.next-chessground .spare-piece {\n  top: 0;\n  left: 0;\n  padding-bottom: 100%;\n  padding-left: 100%;\n  position: absolute;\n  background-size: contain;\n  background-position: 0% -100%;\n  cursor: pointer;\n}\n.next-chessground .edit-square {\n  display: table;\n  position: relative;\n  width: 14.285%;\n  padding-bottom: 13.285%;\n}\n.next-chessground .promote .edit-square {\n  width: 20%;\n  padding-bottom: 20%;\n}\n";
 styleInject(css_248z$1);
 
 var css_248z$2 = "coords {\n  position: absolute;\n  display: flex;\n  pointer-events: none;\n  user-select: none;\n  color: #fff;\n  font-weight: bold;\n  font-size: 0.5rem;\n  opacity: 0.8;\n}\n.coords-no coords {\n  display: none;\n}\n@media (min-width: 640px) {\n  coords {\n    font-size: 0.75rem;\n  }\n}\ncoords.ranks {\n  flex-flow: column-reverse;\n  top: 0;\n  right: 0;\n  height: 100%;\n  width: 0.8em;\n}\ncoords.ranks.black {\n  flex-flow: column;\n}\ncoords.files {\n  bottom: 0;\n  left: 0;\n  flex-flow: row;\n  width: 100%;\n}\ncoords.files.black {\n  flex-flow: row-reverse;\n}\ncoords.files coord {\n  padding-left: 4px;\n}\ncoords coord {\n  flex: 1 1 auto;\n}\n\n.orientation-white .files coord:nth-child(2n + 1),\n.orientation-white .ranks coord:nth-child(2n),\n.orientation-black .files coord:nth-child(2n),\n.orientation-black .ranks coord:nth-child(2n + 1) {\n  color: #fff;\n}\n.orientation-white .files coord:nth-child(2n),\n.orientation-white .ranks coord:nth-child(2n + 1),\n.orientation-black .files coord:nth-child(2n + 1),\n.orientation-black .ranks coord:nth-child(2n) {\n  color: #779556;\n}\n";
 styleInject(css_248z$2);
 
-var css_248z$3 = ".next-settings .next-cog {\n  width: 1rem;\n  height: 1rem;\n  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjOUY5REIwIiBkPSJNNDg3LjQgMzE1LjdsLTQyLjYtMjQuNmM0LjMtMjMuMiA0LjMtNDcgMC03MC4ybDQyLjYtMjQuNmM0LjktMi44IDcuMS04LjYgNS41LTE0LTExLjEtMzUuNi0zMC02Ny44LTU0LjctOTQuNi0zLjgtNC4xLTEwLTUuMS0xNC44LTIuM0wzODAuOCAxMTBjLTE3LjktMTUuNC0zOC41LTI3LjMtNjAuOC0zNS4xVjI1LjhjMC01LjYtMy45LTEwLjUtOS40LTExLjctMzYuNy04LjItNzQuMy03LjgtMTA5LjIgMC01LjUgMS4yLTkuNCA2LjEtOS40IDExLjdWNzVjLTIyLjIgNy45LTQyLjggMTkuOC02MC44IDM1LjFMODguNyA4NS41Yy00LjktMi44LTExLTEuOS0xNC44IDIuMy0yNC43IDI2LjctNDMuNiA1OC45LTU0LjcgOTQuNi0xLjcgNS40LjYgMTEuMiA1LjUgMTRMNjcuMyAyMjFjLTQuMyAyMy4yLTQuMyA0NyAwIDcwLjJsLTQyLjYgMjQuNmMtNC45IDIuOC03LjEgOC42LTUuNSAxNCAxMS4xIDM1LjYgMzAgNjcuOCA1NC43IDk0LjYgMy44IDQuMSAxMCA1LjEgMTQuOCAyLjNsNDIuNi0yNC42YzE3LjkgMTUuNCAzOC41IDI3LjMgNjAuOCAzNS4xdjQ5LjJjMCA1LjYgMy45IDEwLjUgOS40IDExLjcgMzYuNyA4LjIgNzQuMyA3LjggMTA5LjIgMCA1LjUtMS4yIDkuNC02LjEgOS40LTExLjd2LTQ5LjJjMjIuMi03LjkgNDIuOC0xOS44IDYwLjgtMzUuMWw0Mi42IDI0LjZjNC45IDIuOCAxMSAxLjkgMTQuOC0yLjMgMjQuNy0yNi43IDQzLjYtNTguOSA1NC43LTk0LjYgMS41LTUuNS0uNy0xMS4zLTUuNi0xNC4xek0yNTYgMzM2Yy00NC4xIDAtODAtMzUuOS04MC04MHMzNS45LTgwIDgwLTgwIDgwIDM1LjkgODAgODAtMzUuOSA4MC04MCA4MHoiLz48L3N2Zz4=');\n}\n.next-flip .next-sync {\n  width: 1rem;\n  height: 1rem;\n  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjOUY5REIwIiBkPSJNMzcwLjcyIDEzMy4yOEMzMzkuNDU4IDEwNC4wMDggMjk4Ljg4OCA4Ny45NjIgMjU1Ljg0OCA4OGMtNzcuNDU4LjA2OC0xNDQuMzI4IDUzLjE3OC0xNjIuNzkxIDEyNi44NS0xLjM0NCA1LjM2My02LjEyMiA5LjE1LTExLjY1MSA5LjE1SDI0LjEwM2MtNy40OTggMC0xMy4xOTQtNi44MDctMTEuODA3LTE0LjE3NkMzMy45MzMgOTQuOTI0IDEzNC44MTMgOCAyNTYgOGM2Ni40NDggMCAxMjYuNzkxIDI2LjEzNiAxNzEuMzE1IDY4LjY4NUw0NjMuMDMgNDAuOTdDNDc4LjE0OSAyNS44NTEgNTA0IDM2LjU1OSA1MDQgNTcuOTQxVjE5MmMwIDEzLjI1NS0xMC43NDUgMjQtMjQgMjRIMzQ1Ljk0MWMtMjEuMzgyIDAtMzIuMDktMjUuODUxLTE2Ljk3MS00MC45NzFsNDEuNzUtNDEuNzQ5ek0zMiAyOTZoMTM0LjA1OWMyMS4zODIgMCAzMi4wOSAyNS44NTEgMTYuOTcxIDQwLjk3MWwtNDEuNzUgNDEuNzVjMzEuMjYyIDI5LjI3MyA3MS44MzUgNDUuMzE5IDExNC44NzYgNDUuMjggNzcuNDE4LS4wNyAxNDQuMzE1LTUzLjE0NCAxNjIuNzg3LTEyNi44NDkgMS4zNDQtNS4zNjMgNi4xMjItOS4xNSAxMS42NTEtOS4xNWg1Ny4zMDRjNy40OTggMCAxMy4xOTQgNi44MDcgMTEuODA3IDE0LjE3NkM0NzguMDY3IDQxNy4wNzYgMzc3LjE4NyA1MDQgMjU2IDUwNGMtNjYuNDQ4IDAtMTI2Ljc5MS0yNi4xMzYtMTcxLjMxNS02OC42ODVMNDguOTcgNDcxLjAzQzMzLjg1MSA0ODYuMTQ5IDggNDc1LjQ0MSA4IDQ1NC4wNTlWMzIwYzAtMTMuMjU1IDEwLjc0NS0yNCAyNC0yNHoiLz48L3N2Zz4=');\n}\n.next-trash .next-trash-alt {\n  width: 1rem;\n  height: 1rem;\n  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii05NiAtOTYgNjQwIDY0MCI+PHBhdGggZD0iTTI2OCA0MTZoMjRhMTIgMTIgMCAwIDAgMTItMTJWMTg4YTEyIDEyIDAgMCAwLTEyLTEyaC0yNGExMiAxMiAwIDAgMC0xMiAxMnYyMTZhMTIgMTIgMCAwIDAgMTIgMTJ6TTQzMiA4MGgtODIuNDFsLTM0LTU2LjdBNDggNDggMCAwIDAgMjc0LjQxIDBIMTczLjU5YTQ4IDQ4IDAgMCAwLTQxLjE2IDIzLjNMOTguNDEgODBIMTZBMTYgMTYgMCAwIDAgMCA5NnYxNmExNiAxNiAwIDAgMCAxNiAxNmgxNnYzMzZhNDggNDggMCAwIDAgNDggNDhoMjg4YTQ4IDQ4IDAgMCAwIDQ4LTQ4VjEyOGgxNmExNiAxNiAwIDAgMCAxNi0xNlY5NmExNiAxNiAwIDAgMC0xNi0xNnpNMTcxLjg0IDUwLjkxQTYgNiAwIDAgMSAxNzcgNDhoOTRhNiA2IDAgMCAxIDUuMTUgMi45MUwyOTMuNjEgODBIMTU0LjM5ek0zNjggNDY0SDgwVjEyOGgyODh6bS0yMTItNDhoMjRhMTIgMTIgMCAwIDAgMTItMTJWMTg4YTEyIDEyIDAgMCAwLTEyLTEyaC0yNGExMiAxMiAwIDAgMC0xMiAxMnYyMTZhMTIgMTIgMCAwIDAgMTIgMTJ6Ii8+PC9zdmc+');\n}\n";
+var css_248z$3 = ".next-chessground .next-cog {\n  width: 1rem;\n  height: 1rem;\n  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjOUY5REIwIiBkPSJNNDg3LjQgMzE1LjdsLTQyLjYtMjQuNmM0LjMtMjMuMiA0LjMtNDcgMC03MC4ybDQyLjYtMjQuNmM0LjktMi44IDcuMS04LjYgNS41LTE0LTExLjEtMzUuNi0zMC02Ny44LTU0LjctOTQuNi0zLjgtNC4xLTEwLTUuMS0xNC44LTIuM0wzODAuOCAxMTBjLTE3LjktMTUuNC0zOC41LTI3LjMtNjAuOC0zNS4xVjI1LjhjMC01LjYtMy45LTEwLjUtOS40LTExLjctMzYuNy04LjItNzQuMy03LjgtMTA5LjIgMC01LjUgMS4yLTkuNCA2LjEtOS40IDExLjdWNzVjLTIyLjIgNy45LTQyLjggMTkuOC02MC44IDM1LjFMODguNyA4NS41Yy00LjktMi44LTExLTEuOS0xNC44IDIuMy0yNC43IDI2LjctNDMuNiA1OC45LTU0LjcgOTQuNi0xLjcgNS40LjYgMTEuMiA1LjUgMTRMNjcuMyAyMjFjLTQuMyAyMy4yLTQuMyA0NyAwIDcwLjJsLTQyLjYgMjQuNmMtNC45IDIuOC03LjEgOC42LTUuNSAxNCAxMS4xIDM1LjYgMzAgNjcuOCA1NC43IDk0LjYgMy44IDQuMSAxMCA1LjEgMTQuOCAyLjNsNDIuNi0yNC42YzE3LjkgMTUuNCAzOC41IDI3LjMgNjAuOCAzNS4xdjQ5LjJjMCA1LjYgMy45IDEwLjUgOS40IDExLjcgMzYuNyA4LjIgNzQuMyA3LjggMTA5LjIgMCA1LjUtMS4yIDkuNC02LjEgOS40LTExLjd2LTQ5LjJjMjIuMi03LjkgNDIuOC0xOS44IDYwLjgtMzUuMWw0Mi42IDI0LjZjNC45IDIuOCAxMSAxLjkgMTQuOC0yLjMgMjQuNy0yNi43IDQzLjYtNTguOSA1NC43LTk0LjYgMS41LTUuNS0uNy0xMS4zLTUuNi0xNC4xek0yNTYgMzM2Yy00NC4xIDAtODAtMzUuOS04MC04MHMzNS45LTgwIDgwLTgwIDgwIDM1LjkgODAgODAtMzUuOSA4MC04MCA4MHoiLz48L3N2Zz4=');\n}\n.next-chessground .next-sync {\n  width: 1rem;\n  height: 1rem;\n  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjOUY5REIwIiBkPSJNMzcwLjcyIDEzMy4yOEMzMzkuNDU4IDEwNC4wMDggMjk4Ljg4OCA4Ny45NjIgMjU1Ljg0OCA4OGMtNzcuNDU4LjA2OC0xNDQuMzI4IDUzLjE3OC0xNjIuNzkxIDEyNi44NS0xLjM0NCA1LjM2My02LjEyMiA5LjE1LTExLjY1MSA5LjE1SDI0LjEwM2MtNy40OTggMC0xMy4xOTQtNi44MDctMTEuODA3LTE0LjE3NkMzMy45MzMgOTQuOTI0IDEzNC44MTMgOCAyNTYgOGM2Ni40NDggMCAxMjYuNzkxIDI2LjEzNiAxNzEuMzE1IDY4LjY4NUw0NjMuMDMgNDAuOTdDNDc4LjE0OSAyNS44NTEgNTA0IDM2LjU1OSA1MDQgNTcuOTQxVjE5MmMwIDEzLjI1NS0xMC43NDUgMjQtMjQgMjRIMzQ1Ljk0MWMtMjEuMzgyIDAtMzIuMDktMjUuODUxLTE2Ljk3MS00MC45NzFsNDEuNzUtNDEuNzQ5ek0zMiAyOTZoMTM0LjA1OWMyMS4zODIgMCAzMi4wOSAyNS44NTEgMTYuOTcxIDQwLjk3MWwtNDEuNzUgNDEuNzVjMzEuMjYyIDI5LjI3MyA3MS44MzUgNDUuMzE5IDExNC44NzYgNDUuMjggNzcuNDE4LS4wNyAxNDQuMzE1LTUzLjE0NCAxNjIuNzg3LTEyNi44NDkgMS4zNDQtNS4zNjMgNi4xMjItOS4xNSAxMS42NTEtOS4xNWg1Ny4zMDRjNy40OTggMCAxMy4xOTQgNi44MDcgMTEuODA3IDE0LjE3NkM0NzguMDY3IDQxNy4wNzYgMzc3LjE4NyA1MDQgMjU2IDUwNGMtNjYuNDQ4IDAtMTI2Ljc5MS0yNi4xMzYtMTcxLjMxNS02OC42ODVMNDguOTcgNDcxLjAzQzMzLjg1MSA0ODYuMTQ5IDggNDc1LjQ0MSA4IDQ1NC4wNTlWMzIwYzAtMTMuMjU1IDEwLjc0NS0yNCAyNC0yNHoiLz48L3N2Zz4=');\n}\n.next-chessground .next-trash {\n  width: 1rem;\n  height: 1rem;\n  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii05NiAtOTYgNjQwIDY0MCI+PHBhdGggZD0iTTI2OCA0MTZoMjRhMTIgMTIgMCAwIDAgMTItMTJWMTg4YTEyIDEyIDAgMCAwLTEyLTEyaC0yNGExMiAxMiAwIDAgMC0xMiAxMnYyMTZhMTIgMTIgMCAwIDAgMTIgMTJ6TTQzMiA4MGgtODIuNDFsLTM0LTU2LjdBNDggNDggMCAwIDAgMjc0LjQxIDBIMTczLjU5YTQ4IDQ4IDAgMCAwLTQxLjE2IDIzLjNMOTguNDEgODBIMTZBMTYgMTYgMCAwIDAgMCA5NnYxNmExNiAxNiAwIDAgMCAxNiAxNmgxNnYzMzZhNDggNDggMCAwIDAgNDggNDhoMjg4YTQ4IDQ4IDAgMCAwIDQ4LTQ4VjEyOGgxNmExNiAxNiAwIDAgMCAxNi0xNlY5NmExNiAxNiAwIDAgMC0xNi0xNnpNMTcxLjg0IDUwLjkxQTYgNiAwIDAgMSAxNzcgNDhoOTRhNiA2IDAgMCAxIDUuMTUgMi45MUwyOTMuNjEgODBIMTU0LjM5ek0zNjggNDY0SDgwVjEyOGgyODh6bS0yMTItNDhoMjRhMTIgMTIgMCAwIDAgMTItMTJWMTg4YTEyIDEyIDAgMCAwLTEyLTEyaC0yNGExMiAxMiAwIDAgMC0xMiAxMnYyMTZhMTIgMTIgMCAwIDAgMTIgMTJ6Ii8+PC9zdmc+');\n}\n";
 styleInject(css_248z$3);
 
 var css_248z$4 = "*,\n::after,\n::before {\n  box-sizing: border-box;\n  border-width: 0;\n  border-style: solid;\n}\n\n.next-chessground {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n}\n.next-chessground .checkbox {\n  display: flex;\n  margin: 0;\n  align-items: center;\n  padding-left: 0.25rem;\n  width: 2.75rem;\n  height: 1.75rem;\n  outline: none;\n  appearance: none;\n  transition: 0.2s ease-in-out;\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n  cursor: pointer;\n}\n.next-chessground .checkbox:before {\n  background-color: rgba(156, 163, 175);\n  width: 1rem;\n  height: 1rem;\n  border-radius: 999px;\n  content: '';\n  transition: 0.2s ease-in-out;\n}\n.next-chessground .checkbox:checked:before {\n  background-color: rgba(4, 120, 87);\n  transform: translate(1rem, 0);\n}\n.next-chessground .next-button {\n  background-color: transparent;\n  background-image: none;\n  cursor: pointer;\n  display: flex;\n  outline: none;\n\n  padding: 0;\n  line-height: inherit;\n  color: inherit;\n  font-size: 100%;\n}\n.next-chessground .next-button:focus {\n  outline: none;\n}\n";
@@ -6693,10 +6939,11 @@ styleInject(css_248z$5);
 var css_248z$6 = "/**\n * Cburnett\n */\n.cburnett piece.pawn.white {\n  background-image: url('https://lichess1.org/assets/_MKI2V3/piece/cburnett/wP.svg');\n}\n.cburnett piece.bishop.white {\n  background-image: url('https://lichess1.org/assets/_MKI2V3/piece/cburnett/wB.svg');\n}\n.cburnett piece.knight.white {\n  background-image: url('https://lichess1.org/assets/_MKI2V3/piece/cburnett/wN.svg');\n}\n.cburnett piece.rook.white {\n  background-image: url('https://lichess1.org/assets/_MKI2V3/piece/cburnett/wR.svg');\n}\n.cburnett piece.queen.white {\n  background-image: url('https://lichess1.org/assets/_MKI2V3/piece/cburnett/wQ.svg');\n}\n.cburnett piece.king.white {\n  background-image: url('https://lichess1.org/assets/_MKI2V3/piece/cburnett/wK.svg');\n}\n.cburnett piece.pawn.black {\n  background-image: url('https://lichess1.org/assets/_MKI2V3/piece/cburnett/bP.svg');\n}\n.cburnett piece.bishop.black {\n  background-image: url('https://lichess1.org/assets/_MKI2V3/piece/cburnett/bB.svg');\n}\n.cburnett piece.knight.black {\n  background-image: url('https://lichess1.org/assets/_MKI2V3/piece/cburnett/bN.svg');\n}\n.cburnett piece.rook.black {\n  background-image: url('https://lichess1.org/assets/_MKI2V3/piece/cburnett/bR.svg');\n}\n.cburnett piece.queen.black {\n  background-image: url('https://lichess1.org/assets/_MKI2V3/piece/cburnett/bQ.svg');\n}\n.cburnett piece.king.black {\n  background-image: url('https://lichess1.org/assets/_MKI2V3/piece/cburnett/bK.svg');\n}\n\n/**\n * Classic\n */\n.classic piece.pawn.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/classic/150/wp.png');\n}\n.classic piece.bishop.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/classic/150/wb.png');\n}\n.classic piece.knight.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/classic/150/wn.png');\n}\n.classic piece.rook.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/classic/150/wr.png');\n}\n.classic piece.queen.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/classic/150/wq.png');\n}\n.classic piece.king.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/classic/150/wk.png');\n}\n.classic piece.pawn.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/classic/150/bp.png');\n}\n.classic piece.bishop.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/classic/150/bb.png');\n}\n.classic piece.knight.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/classic/150/bn.png');\n}\n.classic piece.rook.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/classic/150/br.png');\n}\n.classic piece.queen.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/classic/150/bq.png');\n}\n.classic piece.king.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/classic/150/bk.png');\n}\n\n/**\n * Neo\n */\n.neo piece.pawn.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/wp.png');\n}\n.neo piece.bishop.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/wb.png');\n}\n.neo piece.knight.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/wn.png');\n}\n.neo piece.rook.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/wr.png');\n}\n.neo piece.queen.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/wq.png');\n}\n.neo piece.king.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/wk.png');\n}\n.neo piece.pawn.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/bp.png');\n}\n.neo piece.bishop.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/bb.png');\n}\n.neo piece.knight.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/bn.png');\n}\n.neo piece.rook.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/br.png');\n}\n.neo piece.queen.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/bq.png');\n}\n.neo piece.king.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/bk.png');\n}\n\n/**\n * Alpha\n */\n.alpha piece.pawn.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/alpha/150/wp.png');\n}\n.alpha piece.bishop.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/alpha/150/wb.png');\n}\n.alpha piece.knight.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/alpha/150/wn.png');\n}\n.alpha piece.rook.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/alpha/150/wr.png');\n}\n.alpha piece.queen.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/alpha/150/wq.png');\n}\n.alpha piece.king.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/alpha/150/wk.png');\n}\n.alpha piece.pawn.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/alpha/150/bp.png');\n}\n.alpha piece.bishop.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/alpha/150/bb.png');\n}\n.alpha piece.knight.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/alpha/150/bn.png');\n}\n.alpha piece.rook.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/alpha/150/br.png');\n}\n.alpha piece.queen.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/alpha/150/bq.png');\n}\n.alpha piece.king.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/alpha/150/bk.png');\n}\n\n/**\n * Bases\n */\n.bases piece.pawn.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/bases/150/wp.png');\n}\n.bases piece.bishop.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/bases/150/wb.png');\n}\n.bases piece.knight.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/bases/150/wn.png');\n}\n.bases piece.rook.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/bases/150/wr.png');\n}\n.bases piece.queen.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/bases/150/wq.png');\n}\n.bases piece.king.white {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/bases/150/wk.png');\n}\n.bases piece.pawn.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/bases/150/bp.png');\n}\n.bases piece.bishop.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/bases/150/bb.png');\n}\n.bases piece.knight.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/bases/150/bn.png');\n}\n.bases piece.rook.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/bases/150/br.png');\n}\n.bases piece.queen.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/bases/150/bq.png');\n}\n.bases piece.king.black {\n  background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/bases/150/bk.png');\n}\n";
 styleInject(css_248z$6);
 
-var css_248z$7 = ".flex {\n  display: flex;\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-row-reverse {\n  flex-direction: row-reverse;\n}\n.grid {\n  display: grid;\n}\n.grid-cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-3 {\n  gap: 0.75rem;\n}\n.w-full {\n  width: 100%;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.py-1\\.5 {\n  padding-top: 0.375rem;\n  padding-bottom: 0.375rem;\n}\n.px-2 {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.cursor-resize {\n  cursor: nesw-resize;\n}\n.outline-none,\n.outline-none:focus {\n  outline: none;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-gray-400 {\n  color: rgba(156, 163, 175);\n}\n.text-gray-800 {\n  color: rgba(31, 41, 55);\n}\n.bg-white {\n  background-color: #fff;\n}\n.border {\n  border-width: 1px;\n  border-style: solid;\n}\n.border-gray-300 {\n  border-color: rgba(209, 213, 219);\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n";
+var css_248z$7 = ".flex {\n  display: flex;\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-row-reverse {\n  flex-direction: row-reverse;\n}\n.grid {\n  display: grid;\n}\n.grid-cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-3 {\n  gap: 0.75rem;\n}\n.w-full {\n  width: 100%;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.py-1\\.5 {\n  padding-top: 0.375rem;\n  padding-bottom: 0.375rem;\n}\n.px-2 {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.cursor-resize {\n  cursor: nesw-resize;\n}\n.outline-none,\n.outline-none:focus {\n  outline: none;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-gray-400 {\n  color: rgba(156, 163, 175);\n}\n.text-gray-800 {\n  color: rgba(31, 41, 55);\n}\n.bg-white {\n  background-color: #fff;\n}\n.bg-orange-300 {\n  background-color: #fbd38d;\n}\n.border {\n  border-width: 1px;\n  border-style: solid;\n}\n.border-gray-300 {\n  border-color: rgba(209, 213, 219);\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n";
 styleInject(css_248z$7);
 
 exports.NextChessground = NextChessground$1;
+exports.NextEditor = NextEditor$1;
 exports.default = NextChessground$1;
 exports.fen = fen;
 exports.useChess = useChess;

package/index.js

@@ -1,4 +1,5 @@
 import NextChessground from './components/NextChessground';
+import NextEditor from './components/NextEditor';
 import useChess from './hooks/use-chess';
 import useChessground from './hooks/use-chessground';
 import fen from './utils/fen';
@@ -14,4 +15,4 @@ import './assets/css/tailwind.css';
 
 export default NextChessground;
 
-export { NextChessground, useChess, useChessground, fen };
+export { NextChessground, NextEditor, useChess, useChessground, fen };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-chessground",
-  "version": "0.9.4",
+  "version": "0.10.3",
   "description": "React and Next wrapper for Chessground with chessboard and pieces out of the box",
   "main": "dist/index.js",
   "module": "dist/index.es.js",