@scrabble-solver/scrabble-solver 2.8.9 → 2.8.11

package/.next/server/chunks/515.js

@@ -540,18 +540,20 @@ var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([stat
 const Board = ({ cellSize , className , innerRef  })=>{
     const rows = (0,state__WEBPACK_IMPORTED_MODULE_1__/* .useTypedSelector */ .ix)(state__WEBPACK_IMPORTED_MODULE_1__/* .selectRowsWithCandidate */ .ZA);
     const board = (0,state__WEBPACK_IMPORTED_MODULE_1__/* .useTypedSelector */ .ix)(state__WEBPACK_IMPORTED_MODULE_1__/* .selectBoard */ .ZO);
-    const [{ lastDirection , refs  }, { onDirectionToggle , onFocus , onKeyDown  }] = (0,_hooks__WEBPACK_IMPORTED_MODULE_3__/* .useGrid */ .N)(rows);
+    const [{ direction , refs  }, { onChange , onDirectionToggle , onFocus , onKeyDown , onPaste  }] = (0,_hooks__WEBPACK_IMPORTED_MODULE_3__/* .useGrid */ .N)(rows);
     return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_BoardPure__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z, {
         className: className,
         cellSize: cellSize,
         center: board.center,
+        direction: direction,
         innerRef: innerRef,
-        lastDirection: lastDirection,
         refs: refs,
         rows: rows,
+        onChange: onChange,
         onDirectionToggle: onDirectionToggle,
         onFocus: onFocus,
-        onKeyDown: onKeyDown
+        onKeyDown: onKeyDown,
+        onPaste: onPaste
     });
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Board);
@@ -585,16 +587,18 @@ _components__WEBPACK_IMPORTED_MODULE_3__ = (__webpack_async_dependencies__.then
 
 
 
-const BoardPure = ({ className , cellSize , center , innerRef , lastDirection , refs , rows , onDirectionToggle , onFocus , onKeyDown ,  })=>/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
+const BoardPure = ({ className , cellSize , center , direction , innerRef , refs , rows , onChange , onDirectionToggle , onFocus , onKeyDown , onPaste ,  })=>/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
         className: classnames__WEBPACK_IMPORTED_MODULE_1___default()((_Board_module_scss__WEBPACK_IMPORTED_MODULE_4___default().board), className),
         ref: innerRef,
+        onChange: onChange,
         onKeyDown: onKeyDown,
+        onPaste: onPaste,
         children: rows.map((cells, y)=>/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
                 className: (_Board_module_scss__WEBPACK_IMPORTED_MODULE_4___default().row),
                 children: cells.map((cell, x)=>/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components__WEBPACK_IMPORTED_MODULE_3__/* .Cell */ .b, {
                         className: (_Board_module_scss__WEBPACK_IMPORTED_MODULE_4___default().cell),
                         cell: cell,
-                        direction: lastDirection,
+                        direction: direction,
                         inputRef: refs[y][x],
                         isCenter: center.x === x && center.y === y,
                         size: cellSize,
@@ -666,7 +670,7 @@ __webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __we
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6022);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_redux__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var lib__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(92237);
+/* harmony import */ var lib__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(75558);
 /* harmony import */ var state__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(51413);
 /* harmony import */ var _CellPure__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(80640);
 var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([state__WEBPACK_IMPORTED_MODULE_5__, _CellPure__WEBPACK_IMPORTED_MODULE_6__]);
@@ -818,7 +822,7 @@ const CellPure = ({ bonus , cell , className , direction , inputRef , isCenter ,
                 tabIndex: cell.x === 0 && cell.y === 0 ? undefined : -1,
                 onFocus: onFocus
             }),
-            /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
+            !cell.isCandidate() && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                 className: (_Cell_module_scss__WEBPACK_IMPORTED_MODULE_7___default().actions),
                 children: [
                     /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_Button__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .Z, {
@@ -978,17 +982,19 @@ __webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __we
 /* harmony export */   "Z": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 /* harmony import */ var _scrabble_solver_constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(7618);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(16689);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6022);
-/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_redux__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var react_use__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(69755);
-/* harmony import */ var react_use__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_use__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var lib__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(92237);
-/* harmony import */ var state__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(51413);
-/* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(95137);
-var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([state__WEBPACK_IMPORTED_MODULE_5__]);
-state__WEBPACK_IMPORTED_MODULE_5__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
+/* harmony import */ var _scrabble_solver_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(34046);
+/* harmony import */ var _scrabble_solver_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_scrabble_solver_types__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(16689);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6022);
+/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_redux__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var react_use__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(69755);
+/* harmony import */ var react_use__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_use__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var lib__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(75558);
+/* harmony import */ var state__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(51413);
+/* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(95137);
+var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([state__WEBPACK_IMPORTED_MODULE_6__]);
+state__WEBPACK_IMPORTED_MODULE_6__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
 /* eslint-disable max-lines, max-statements */ 
 
 
@@ -996,22 +1002,24 @@ state__WEBPACK_IMPORTED_MODULE_5__ = (__webpack_async_dependencies__.then ? (awa
 
 
 
+
+const toggleDirection = (direction)=>direction === "vertical" ? "horizontal" : "vertical";
 const useGrid = (rows)=>{
     const height = rows.length;
     const width = rows[0].length;
-    const dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_2__.useDispatch)();
-    const config = (0,state__WEBPACK_IMPORTED_MODULE_5__/* .useTypedSelector */ .ix)(state__WEBPACK_IMPORTED_MODULE_5__/* .selectConfig */ .$o);
-    const refs = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(()=>(0,lib__WEBPACK_IMPORTED_MODULE_4__/* .createGridOf */ .DI)(width, height, ()=>(0,react__WEBPACK_IMPORTED_MODULE_1__.createRef)()), [
+    const dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_3__.useDispatch)();
+    const config = (0,state__WEBPACK_IMPORTED_MODULE_6__/* .useTypedSelector */ .ix)(state__WEBPACK_IMPORTED_MODULE_6__/* .selectConfig */ .$o);
+    const refs = (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(()=>(0,lib__WEBPACK_IMPORTED_MODULE_5__/* .createGridOf */ .DI)(width, height, ()=>(0,react__WEBPACK_IMPORTED_MODULE_2__.createRef)()), [
         width,
         height
     ]);
-    const activeIndexRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)({
+    const activeIndexRef = (0,react__WEBPACK_IMPORTED_MODULE_2__.useRef)({
         x: 0,
         y: 0
     });
-    const { 0: lastDirection , 1: setLastDirection  } = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)("horizontal");
-    const lastDirectionRef = (0,react_use__WEBPACK_IMPORTED_MODULE_3__.useLatest)(lastDirection);
-    const changeActiveIndex = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)((offsetX, offsetY)=>{
+    const { 0: direction , 1: setLastDirection  } = (0,react__WEBPACK_IMPORTED_MODULE_2__.useState)("horizontal");
+    const directionRef = (0,react_use__WEBPACK_IMPORTED_MODULE_4__.useLatest)(direction);
+    const changeActiveIndex = (0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)((offsetX, offsetY)=>{
         const x = Math.min(Math.max(activeIndexRef.current.x + offsetX, 0), width - 1);
         const y = Math.min(Math.max(activeIndexRef.current.y + offsetY, 0), height - 1);
         activeIndexRef.current = {
@@ -1023,58 +1031,210 @@ const useGrid = (rows)=>{
         activeIndexRef,
         refs
     ]);
-    const getInputRefPosition = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)((inputRef)=>{
-        return (0,_lib__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .Z)(refs, (ref)=>ref.current === inputRef);
+    const getInputRefPosition = (0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)((inputRef)=>{
+        return (0,_lib__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .Z)(refs, (ref)=>ref.current === inputRef);
     }, [
         refs
     ]);
-    const onDirectionToggle = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(()=>{
-        setLastDirection((direction)=>{
-            return direction === "vertical" ? "horizontal" : "vertical";
-        });
-    }, []);
-    const onFocus = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)((x, y)=>{
-        activeIndexRef.current = {
-            x,
-            y
-        };
-    }, []);
-    const onMoveFocus = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)((direction)=>{
-        const offset = direction === "forward" ? 1 : -1;
-        if (lastDirectionRef.current === "horizontal") {
+    const moveFocus = (0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)((offset)=>{
+        if (directionRef.current === "horizontal") {
             changeActiveIndex(offset, 0);
         } else {
             changeActiveIndex(0, offset);
         }
     }, [
         changeActiveIndex,
-        lastDirectionRef
+        directionRef
     ]);
-    const onKeyDown = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(()=>{
-        return (0,lib__WEBPACK_IMPORTED_MODULE_4__/* .createKeyboardNavigation */ .np)({
+    const insertValue = (0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)((position, value)=>{
+        const characters = value ? (0,lib__WEBPACK_IMPORTED_MODULE_5__/* .extractCharacters */ .nK)(config, value).filter((character)=>character !== _scrabble_solver_constants__WEBPACK_IMPORTED_MODULE_0__.BLANK) : [
+            _scrabble_solver_constants__WEBPACK_IMPORTED_MODULE_0__.BLANK
+        ];
+        const actions = [];
+        let board = new _scrabble_solver_types__WEBPACK_IMPORTED_MODULE_1__.Board({
+            rows: rows.map((row)=>row.map((cell)=>cell.clone()))
+        });
+        let { x , y  } = position;
+        const scheduleMoveFocus = ()=>{
+            if (directionRef.current === "horizontal") {
+                ++x;
+            } else {
+                ++y;
+            }
+        };
+        characters.forEach((character)=>{
+            if (x >= config.boardWidth || y >= config.boardHeight) {
+                return;
+            }
+            const canCheckUp = y - 1 > 0;
+            const canCheckLeft = x > 0;
+            const canCheckRight = x + 1 < width;
+            const canCheckDown = y + 1 < height;
+            if (canCheckUp) {
+                const cellUp = board.rows[y - 1][x];
+                const twoCharacterCandidate = cellUp.tile.character + character;
+                if (!cellUp.tile.isBlank && config.twoCharacterTiles.includes(twoCharacterCandidate)) {
+                    const action = state__WEBPACK_IMPORTED_MODULE_6__/* .boardSlice.actions.changeCellValue */ .I8.actions.changeCellValue({
+                        x,
+                        y: y - 1,
+                        value: twoCharacterCandidate
+                    });
+                    board = state__WEBPACK_IMPORTED_MODULE_6__/* .boardSlice.reducer */ .I8.reducer(board, action);
+                    actions.push(action);
+                    return;
+                }
+            }
+            if (canCheckDown) {
+                const cellDown = board.rows[y + 1][x];
+                const twoCharacterCandidate1 = character + cellDown.tile.character;
+                if (!cellDown.tile.isBlank && config.twoCharacterTiles.includes(twoCharacterCandidate1)) {
+                    const action1 = state__WEBPACK_IMPORTED_MODULE_6__/* .boardSlice.actions.changeCellValue */ .I8.actions.changeCellValue({
+                        x,
+                        y,
+                        value: character
+                    });
+                    const action2 = state__WEBPACK_IMPORTED_MODULE_6__/* .boardSlice.actions.changeCellValue */ .I8.actions.changeCellValue({
+                        x,
+                        y: y + 1,
+                        value: _scrabble_solver_constants__WEBPACK_IMPORTED_MODULE_0__.EMPTY_CELL
+                    });
+                    board = state__WEBPACK_IMPORTED_MODULE_6__/* .boardSlice.reducer */ .I8.reducer(state__WEBPACK_IMPORTED_MODULE_6__/* .boardSlice.reducer */ .I8.reducer(board, action1), action2);
+                    actions.push(action1, action2);
+                    scheduleMoveFocus();
+                    return;
+                }
+            }
+            if (canCheckLeft) {
+                const cellLeft = board.rows[y][x - 1];
+                const twoCharacterCandidate2 = cellLeft.tile.character + character;
+                if (!cellLeft.tile.isBlank && config.twoCharacterTiles.includes(twoCharacterCandidate2)) {
+                    const action3 = state__WEBPACK_IMPORTED_MODULE_6__/* .boardSlice.actions.changeCellValue */ .I8.actions.changeCellValue({
+                        x: x - 1,
+                        y,
+                        value: twoCharacterCandidate2
+                    });
+                    board = state__WEBPACK_IMPORTED_MODULE_6__/* .boardSlice.reducer */ .I8.reducer(board, action3);
+                    actions.push(action3);
+                    return;
+                }
+            }
+            if (canCheckRight) {
+                const cellRight = board.rows[y][x + 1];
+                const twoCharacterCandidate3 = character + cellRight.tile.character;
+                if (!cellRight.tile.isBlank && config.twoCharacterTiles.includes(twoCharacterCandidate3)) {
+                    const action11 = state__WEBPACK_IMPORTED_MODULE_6__/* .boardSlice.actions.changeCellValue */ .I8.actions.changeCellValue({
+                        x,
+                        y,
+                        value: character
+                    });
+                    const action21 = state__WEBPACK_IMPORTED_MODULE_6__/* .boardSlice.actions.changeCellValue */ .I8.actions.changeCellValue({
+                        x: x + 1,
+                        y,
+                        value: _scrabble_solver_constants__WEBPACK_IMPORTED_MODULE_0__.EMPTY_CELL
+                    });
+                    board = state__WEBPACK_IMPORTED_MODULE_6__/* .boardSlice.reducer */ .I8.reducer(state__WEBPACK_IMPORTED_MODULE_6__/* .boardSlice.reducer */ .I8.reducer(board, action11), action21);
+                    actions.push(action11, action21);
+                    scheduleMoveFocus();
+                    return;
+                }
+            }
+            if (!canCheckDown || !canCheckRight) {
+                const cell = board.rows[y][x];
+                const twoCharacterCandidate4 = cell.tile.character + character;
+                if (!cell.tile.isBlank && config.twoCharacterTiles.includes(twoCharacterCandidate4)) {
+                    const action4 = state__WEBPACK_IMPORTED_MODULE_6__/* .boardSlice.actions.changeCellValue */ .I8.actions.changeCellValue({
+                        x,
+                        y,
+                        value: twoCharacterCandidate4
+                    });
+                    board = state__WEBPACK_IMPORTED_MODULE_6__/* .boardSlice.reducer */ .I8.reducer(board, action4);
+                    actions.push(action4);
+                    return;
+                }
+            }
+            const action5 = state__WEBPACK_IMPORTED_MODULE_6__/* .boardSlice.actions.changeCellValue */ .I8.actions.changeCellValue({
+                x,
+                y,
+                value: character
+            });
+            board = state__WEBPACK_IMPORTED_MODULE_6__/* .boardSlice.reducer */ .I8.reducer(board, action5);
+            actions.push(action5);
+            scheduleMoveFocus();
+        });
+        moveFocus(Math.abs(position.x - x) + Math.abs(position.y - y));
+        actions.forEach(dispatch);
+    }, [
+        config,
+        directionRef,
+        dispatch,
+        moveFocus,
+        rows
+    ]);
+    const onChange = (0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)((event)=>{
+        const position = getInputRefPosition(event.target);
+        if (!position) {
+            return;
+        }
+        const value = (0,lib__WEBPACK_IMPORTED_MODULE_5__/* .extractInputValue */ .WM)(event.target);
+        if (!value) {
+            dispatch(state__WEBPACK_IMPORTED_MODULE_6__/* .boardSlice.actions.changeCellValue */ .I8.actions.changeCellValue({
+                ...position,
+                value: _scrabble_solver_constants__WEBPACK_IMPORTED_MODULE_0__.EMPTY_CELL
+            }));
+            moveFocus(-1);
+            return;
+        }
+        if (value === _scrabble_solver_constants__WEBPACK_IMPORTED_MODULE_0__.EMPTY_CELL) {
+            const { x , y  } = position;
+            const cell = rows[y][x];
+            if (cell.hasTile()) {
+                dispatch(state__WEBPACK_IMPORTED_MODULE_6__/* .boardSlice.actions.toggleCellIsBlank */ .I8.actions.toggleCellIsBlank(position));
+                return;
+            }
+        }
+        insertValue(position, value);
+    }, [
+        dispatch,
+        insertValue,
+        moveFocus,
+        rows
+    ]);
+    const onDirectionToggle = (0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)(()=>setLastDirection(toggleDirection), []);
+    const onFocus = (0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)((x, y)=>{
+        activeIndexRef.current = {
+            x,
+            y
+        };
+    }, []);
+    const onKeyDown = (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(()=>{
+        return (0,lib__WEBPACK_IMPORTED_MODULE_5__/* .createKeyboardNavigation */ .np)({
             onArrowDown: (event)=>{
-                if ((0,lib__WEBPACK_IMPORTED_MODULE_4__/* .isCtrl */ .yl)(event)) {
+                event.preventDefault();
+                if ((0,lib__WEBPACK_IMPORTED_MODULE_5__/* .isCtrl */ .yl)(event)) {
                     onDirectionToggle();
                 } else {
                     changeActiveIndex(0, 1);
                 }
             },
             onArrowLeft: (event)=>{
-                if ((0,lib__WEBPACK_IMPORTED_MODULE_4__/* .isCtrl */ .yl)(event)) {
+                event.preventDefault();
+                if ((0,lib__WEBPACK_IMPORTED_MODULE_5__/* .isCtrl */ .yl)(event)) {
                     onDirectionToggle();
                 } else {
                     changeActiveIndex(-1, 0);
                 }
             },
             onArrowRight: (event)=>{
-                if ((0,lib__WEBPACK_IMPORTED_MODULE_4__/* .isCtrl */ .yl)(event)) {
+                event.preventDefault();
+                if ((0,lib__WEBPACK_IMPORTED_MODULE_5__/* .isCtrl */ .yl)(event)) {
                     onDirectionToggle();
                 } else {
                     changeActiveIndex(1, 0);
                 }
             },
             onArrowUp: (event)=>{
-                if ((0,lib__WEBPACK_IMPORTED_MODULE_4__/* .isCtrl */ .yl)(event)) {
+                event.preventDefault();
+                if ((0,lib__WEBPACK_IMPORTED_MODULE_5__/* .isCtrl */ .yl)(event)) {
                     onDirectionToggle();
                 } else {
                     changeActiveIndex(0, -1);
@@ -1085,22 +1245,24 @@ const useGrid = (rows)=>{
                 if (!position) {
                     return;
                 }
-                dispatch(state__WEBPACK_IMPORTED_MODULE_5__/* .boardSlice.actions.changeCellValue */ .I8.actions.changeCellValue({
+                event.preventDefault();
+                dispatch(state__WEBPACK_IMPORTED_MODULE_6__/* .boardSlice.actions.changeCellValue */ .I8.actions.changeCellValue({
                     ...position,
                     value: _scrabble_solver_constants__WEBPACK_IMPORTED_MODULE_0__.EMPTY_CELL
                 }));
-                onMoveFocus("backward");
+                moveFocus(-1);
             },
             onDelete: (event)=>{
                 const position = getInputRefPosition(event.target);
                 if (!position) {
                     return;
                 }
-                dispatch(state__WEBPACK_IMPORTED_MODULE_5__/* .boardSlice.actions.changeCellValue */ .I8.actions.changeCellValue({
+                event.preventDefault();
+                dispatch(state__WEBPACK_IMPORTED_MODULE_6__/* .boardSlice.actions.changeCellValue */ .I8.actions.changeCellValue({
                     ...position,
                     value: _scrabble_solver_constants__WEBPACK_IMPORTED_MODULE_0__.EMPTY_CELL
                 }));
-                onMoveFocus("forward");
+                moveFocus(1);
             },
             onKeyDown: (event)=>{
                 const position = getInputRefPosition(event.target);
@@ -1109,129 +1271,82 @@ const useGrid = (rows)=>{
                 }
                 const { x , y  } = position;
                 const character = event.key.toLowerCase();
-                const isTogglingBlank = (0,lib__WEBPACK_IMPORTED_MODULE_4__/* .isCtrl */ .yl)(event) && character === "b";
+                const isTogglingBlank = (0,lib__WEBPACK_IMPORTED_MODULE_5__/* .isCtrl */ .yl)(event) && character === "b";
                 const twoCharacterTile = config.getTwoCharacterTileByPrefix(character);
                 if (isTogglingBlank) {
-                    dispatch(state__WEBPACK_IMPORTED_MODULE_5__/* .boardSlice.actions.toggleCellIsBlank */ .I8.actions.toggleCellIsBlank(position));
+                    event.preventDefault();
+                    dispatch(state__WEBPACK_IMPORTED_MODULE_6__/* .boardSlice.actions.toggleCellIsBlank */ .I8.actions.toggleCellIsBlank(position));
                     return;
                 }
-                if ((0,lib__WEBPACK_IMPORTED_MODULE_4__/* .isCtrl */ .yl)(event) && twoCharacterTile) {
+                if ((0,lib__WEBPACK_IMPORTED_MODULE_5__/* .isCtrl */ .yl)(event) && twoCharacterTile) {
                     event.preventDefault();
-                    dispatch(state__WEBPACK_IMPORTED_MODULE_5__/* .boardSlice.actions.changeCellValue */ .I8.actions.changeCellValue({
+                    dispatch(state__WEBPACK_IMPORTED_MODULE_6__/* .boardSlice.actions.changeCellValue */ .I8.actions.changeCellValue({
                         x,
                         y,
                         value: twoCharacterTile
                     }));
-                    onMoveFocus("forward");
+                    moveFocus(1);
                     return;
                 }
-                if (!config.hasCharacter(character)) {
+                const cell = rows[y][x];
+                const twoCharacterCandidate = cell.tile.character + character;
+                if (config.twoCharacterTiles.includes(twoCharacterCandidate)) {
+                    event.preventDefault();
+                    dispatch(state__WEBPACK_IMPORTED_MODULE_6__/* .boardSlice.actions.changeCellValue */ .I8.actions.changeCellValue({
+                        ...position,
+                        value: twoCharacterCandidate
+                    }));
+                    moveFocus(1);
                     return;
                 }
-                const canCheckUp = y - 1 > 0;
-                const canCheckLeft = x > 0;
-                const canCheckRight = x + 1 < width;
-                const canCheckDown = y + 1 < height;
-                if (canCheckUp) {
-                    const cellUp = rows[y - 1][x];
-                    const twoCharacterCandidate = cellUp.tile.character + character;
-                    if (config.twoCharacterTiles.includes(twoCharacterCandidate)) {
-                        dispatch(state__WEBPACK_IMPORTED_MODULE_5__/* .boardSlice.actions.changeCellValue */ .I8.actions.changeCellValue({
-                            ...position,
-                            y: y - 1,
-                            value: twoCharacterCandidate
-                        }));
-                        return;
-                    }
-                }
-                if (canCheckDown) {
-                    const cellDown = rows[y + 1][x];
-                    const twoCharacterCandidate1 = character + cellDown.tile.character;
-                    if (config.twoCharacterTiles.includes(twoCharacterCandidate1)) {
-                        dispatch(state__WEBPACK_IMPORTED_MODULE_5__/* .boardSlice.actions.changeCellValue */ .I8.actions.changeCellValue({
-                            ...position,
-                            value: character
-                        }));
-                        dispatch(state__WEBPACK_IMPORTED_MODULE_5__/* .boardSlice.actions.changeCellValue */ .I8.actions.changeCellValue({
-                            ...position,
-                            y: y + 1,
-                            value: _scrabble_solver_constants__WEBPACK_IMPORTED_MODULE_0__.EMPTY_CELL
-                        }));
-                        onMoveFocus("forward");
-                        return;
-                    }
-                }
-                if (canCheckLeft) {
-                    const cellLeft = rows[y][x - 1];
-                    const twoCharacterCandidate2 = cellLeft.tile.character + character;
-                    if (config.twoCharacterTiles.includes(twoCharacterCandidate2)) {
-                        dispatch(state__WEBPACK_IMPORTED_MODULE_5__/* .boardSlice.actions.changeCellValue */ .I8.actions.changeCellValue({
-                            ...position,
-                            x: x - 1,
-                            value: twoCharacterCandidate2
-                        }));
-                        return;
-                    }
-                }
-                if (canCheckRight) {
-                    const cellRight = rows[y][x + 1];
-                    const twoCharacterCandidate3 = character + cellRight.tile.character;
-                    if (config.twoCharacterTiles.includes(twoCharacterCandidate3)) {
-                        dispatch(state__WEBPACK_IMPORTED_MODULE_5__/* .boardSlice.actions.changeCellValue */ .I8.actions.changeCellValue({
-                            ...position,
-                            value: character
-                        }));
-                        dispatch(state__WEBPACK_IMPORTED_MODULE_5__/* .boardSlice.actions.changeCellValue */ .I8.actions.changeCellValue({
-                            ...position,
-                            x: x + 1,
-                            value: _scrabble_solver_constants__WEBPACK_IMPORTED_MODULE_0__.EMPTY_CELL
-                        }));
-                        onMoveFocus("forward");
-                        return;
-                    }
-                }
-                if (!canCheckDown || !canCheckRight) {
-                    const cell = rows[y][x];
-                    const twoCharacterCandidate4 = cell.tile.character + character;
-                    if (config.twoCharacterTiles.includes(twoCharacterCandidate4)) {
-                        dispatch(state__WEBPACK_IMPORTED_MODULE_5__/* .boardSlice.actions.changeCellValue */ .I8.actions.changeCellValue({
-                            ...position,
-                            value: twoCharacterCandidate4
-                        }));
-                        return;
-                    }
+                if (event.target instanceof HTMLInputElement && event.target.value === event.key) {
+                    // change event did not fire because the same character was typed over the current one
+                    // but we still want to move the caret
+                    event.preventDefault();
+                    moveFocus(1);
                 }
-                dispatch(state__WEBPACK_IMPORTED_MODULE_5__/* .boardSlice.actions.changeCellValue */ .I8.actions.changeCellValue({
-                    ...position,
-                    value: character
-                }));
-                onMoveFocus("forward");
             },
             onSpace: (event)=>{
                 const position = getInputRefPosition(event.target);
                 if (!position) {
                     return;
                 }
-                dispatch(state__WEBPACK_IMPORTED_MODULE_5__/* .boardSlice.actions.toggleCellIsBlank */ .I8.actions.toggleCellIsBlank(position));
+                event.preventDefault();
+                dispatch(state__WEBPACK_IMPORTED_MODULE_6__/* .boardSlice.actions.toggleCellIsBlank */ .I8.actions.toggleCellIsBlank(position));
             }
         });
     }, [
         changeActiveIndex,
         config,
         dispatch,
-        lastDirectionRef,
         onDirectionToggle,
         rows
     ]);
+    const onPaste = (0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)((event)=>{
+        if (!(event.target instanceof HTMLInputElement)) {
+            return;
+        }
+        const position = getInputRefPosition(event.target);
+        if (!position) {
+            return;
+        }
+        event.preventDefault();
+        const value = event.clipboardData.getData("text/plain").toLocaleLowerCase();
+        insertValue(position, value);
+    }, [
+        insertValue
+    ]);
     return [
         {
-            lastDirection,
+            direction,
             refs
         },
         {
+            onChange,
             onDirectionToggle,
             onFocus,
-            onKeyDown
+            onKeyDown,
+            onPaste
         }, 
     ];
 };
@@ -1432,6 +1547,7 @@ var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([stat
 const Dictionary = ({ className  })=>{
     const translate = (0,state__WEBPACK_IMPORTED_MODULE_2__/* .useTranslate */ .qM)();
     const { results , isLoading  } = (0,state__WEBPACK_IMPORTED_MODULE_2__/* .useTypedSelector */ .ix)(state__WEBPACK_IMPORTED_MODULE_2__/* .selectDictionary */ .w1);
+    const error = (0,state__WEBPACK_IMPORTED_MODULE_2__/* .useTypedSelector */ .ix)(state__WEBPACK_IMPORTED_MODULE_2__/* .selectDictionaryError */ .mK);
     const isFirstAllowed = results.length > 0 ? results[0].isAllowed : undefined;
     return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
         className: classnames__WEBPACK_IMPORTED_MODULE_1___default()((_Dictionary_module_scss__WEBPACK_IMPORTED_MODULE_5___default().dictionary), className, {
@@ -1439,6 +1555,11 @@ const Dictionary = ({ className  })=>{
             [(_Dictionary_module_scss__WEBPACK_IMPORTED_MODULE_5___default().isNotAllowed)]: isFirstAllowed === false
         }),
         children: [
+            typeof error !== "undefined" && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_EmptyState__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z, {
+                className: (_Dictionary_module_scss__WEBPACK_IMPORTED_MODULE_5___default().emptyState),
+                type: "error",
+                children: error.message
+            }),
             results.map(({ definitions , isAllowed , word  })=>/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                     className: classnames__WEBPACK_IMPORTED_MODULE_1___default()((_Dictionary_module_scss__WEBPACK_IMPORTED_MODULE_5___default().result), {
                         [(_Dictionary_module_scss__WEBPACK_IMPORTED_MODULE_5___default().isAllowed)]: isAllowed === true,
@@ -1927,7 +2048,7 @@ __webpack_async_result__();
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(16689);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var icons__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6942);
-/* harmony import */ var lib__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(92237);
+/* harmony import */ var lib__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(75558);
 /* harmony import */ var _Key__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(50237);
 
 
@@ -2475,12 +2596,13 @@ __webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __we
 /* harmony export */ });
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(20997);
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _scrabble_solver_constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7618);
-/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(59003);
-/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(16689);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var lib__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(92237);
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(59003);
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(16689);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6022);
+/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_redux__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var lib__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(75558);
 /* harmony import */ var state__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(51413);
 /* harmony import */ var _Rack_module_scss__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(42687);
 /* harmony import */ var _Rack_module_scss__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_Rack_module_scss__WEBPACK_IMPORTED_MODULE_7__);
@@ -2496,19 +2618,20 @@ var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([stat
 
 
 const Rack = ({ className  })=>{
+    const dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_3__.useDispatch)();
     const config = (0,state__WEBPACK_IMPORTED_MODULE_5__/* .useTypedSelector */ .ix)(state__WEBPACK_IMPORTED_MODULE_5__/* .selectConfig */ .$o);
     const rack = (0,state__WEBPACK_IMPORTED_MODULE_5__/* .useTypedSelector */ .ix)(state__WEBPACK_IMPORTED_MODULE_5__/* .selectRack */ .QB);
     const resultCandidateTiles = (0,state__WEBPACK_IMPORTED_MODULE_5__/* .useTypedSelector */ .ix)(state__WEBPACK_IMPORTED_MODULE_5__/* .selectResultCandidateTiles */ .z$);
-    const tiles = (0,react__WEBPACK_IMPORTED_MODULE_3__.useMemo)(()=>(0,lib__WEBPACK_IMPORTED_MODULE_4__/* .zipCharactersAndTiles */ .gV)(rack, resultCandidateTiles), [
+    const tiles = (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(()=>(0,lib__WEBPACK_IMPORTED_MODULE_4__/* .zipCharactersAndTiles */ .gV)(rack, resultCandidateTiles), [
         rack,
         resultCandidateTiles
     ]);
     const tilesCount = tiles.length;
-    const tilesRefs = (0,react__WEBPACK_IMPORTED_MODULE_3__.useMemo)(()=>(0,lib__WEBPACK_IMPORTED_MODULE_4__/* .createArray */ .Ri)(tilesCount).map(()=>/*#__PURE__*/ (0,react__WEBPACK_IMPORTED_MODULE_3__.createRef)()), [
+    const tilesRefs = (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(()=>(0,lib__WEBPACK_IMPORTED_MODULE_4__/* .createArray */ .Ri)(tilesCount).map(()=>/*#__PURE__*/ (0,react__WEBPACK_IMPORTED_MODULE_2__.createRef)()), [
         tilesCount
     ]);
-    const activeIndexRef = (0,react__WEBPACK_IMPORTED_MODULE_3__.useRef)();
-    const changeActiveIndex = (0,react__WEBPACK_IMPORTED_MODULE_3__.useCallback)((offset)=>{
+    const activeIndexRef = (0,react__WEBPACK_IMPORTED_MODULE_2__.useRef)();
+    const changeActiveIndex = (0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)((offset)=>{
         const nextActiveIndex = Math.min(Math.max((activeIndexRef.current || 0) + offset, 0), tilesCount - 1);
         const tileRef = tilesRefs[nextActiveIndex].current;
         if (tileRef) {
@@ -2520,7 +2643,33 @@ const Rack = ({ className  })=>{
         tilesCount,
         tilesRefs
     ]);
-    const onKeyDown = (0,react__WEBPACK_IMPORTED_MODULE_3__.useMemo)(()=>{
+    const handleChange = (0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)((event)=>{
+        const value = (0,lib__WEBPACK_IMPORTED_MODULE_4__/* .extractInputValue */ .WM)(event.target);
+        const characters = value ? (0,lib__WEBPACK_IMPORTED_MODULE_4__/* .extractCharacters */ .nK)(config, value) : [];
+        changeActiveIndex(value ? characters.length : -1);
+    }, [
+        changeActiveIndex,
+        config
+    ]);
+    const handlePaste = (0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)((event)=>{
+        const index = activeIndexRef.current;
+        if (typeof index === "undefined") {
+            return;
+        }
+        event.preventDefault();
+        const value = event.clipboardData.getData("text/plain").toLocaleLowerCase();
+        const characters = value ? (0,lib__WEBPACK_IMPORTED_MODULE_4__/* .extractCharacters */ .nK)(config, value) : [];
+        changeActiveIndex(value ? characters.length : -1);
+        dispatch(state__WEBPACK_IMPORTED_MODULE_5__/* .rackSlice.actions.changeCharacters */ .O_.actions.changeCharacters({
+            characters,
+            index
+        }));
+    }, [
+        changeActiveIndex,
+        config,
+        dispatch
+    ]);
+    const handleKeyDown = (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(()=>{
         return (0,lib__WEBPACK_IMPORTED_MODULE_4__/* .createKeyboardNavigation */ .np)({
             onArrowLeft: (event)=>{
                 event.preventDefault();
@@ -2530,12 +2679,18 @@ const Rack = ({ className  })=>{
                 event.preventDefault();
                 changeActiveIndex(1);
             },
-            onBackspace: ()=>{
+            onBackspace: (event)=>{
+                event.preventDefault();
                 changeActiveIndex(-1);
             },
             onKeyDown: (event)=>{
-                const character = event.key.toLowerCase();
-                if (config.hasCharacter(character) || character === _scrabble_solver_constants__WEBPACK_IMPORTED_MODULE_1__.BLANK) {
+                if ((0,lib__WEBPACK_IMPORTED_MODULE_4__/* .isCtrl */ .yl)(event) && config.isTwoCharacterTilePrefix(event.key)) {
+                    changeActiveIndex(1);
+                } else if (event.currentTarget.value === event.key) {
+                    // change event did not fire because the same character was typed over the current one
+                    // but we still want to move the caret
+                    event.preventDefault();
+                    event.stopPropagation();
                     changeActiveIndex(1);
                 }
             }
@@ -2545,14 +2700,16 @@ const Rack = ({ className  })=>{
         config
     ]);
     return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
-        className: classnames__WEBPACK_IMPORTED_MODULE_2___default()((_Rack_module_scss__WEBPACK_IMPORTED_MODULE_7___default().rack), className),
+        className: classnames__WEBPACK_IMPORTED_MODULE_1___default()((_Rack_module_scss__WEBPACK_IMPORTED_MODULE_7___default().rack), className),
+        onPaste: handlePaste,
         children: tiles.map(({ character , tile  }, index)=>/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_RackTile__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .Z, {
                 activeIndexRef: activeIndexRef,
                 character: character,
                 index: index,
                 inputRef: tilesRefs[index],
                 tile: tile,
-                onKeyDown: onKeyDown
+                onChange: handleChange,
+                onKeyDown: handleKeyDown
             }, index))
     });
 };
@@ -2578,7 +2735,7 @@ __webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __we
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6022);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_redux__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var lib__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(92237);
+/* harmony import */ var lib__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(75558);
 /* harmony import */ var parameters__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(90485);
 /* harmony import */ var state__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(51413);
 /* harmony import */ var _Tile__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(54031);
@@ -2595,7 +2752,7 @@ state__WEBPACK_IMPORTED_MODULE_6__ = (__webpack_async_dependencies__.then ? (awa
 
 
 
-const RackTile = ({ activeIndexRef , character , index , inputRef , tile , onKeyDown  })=>{
+const RackTile = ({ activeIndexRef , character , index , inputRef , tile , onChange , onKeyDown ,  })=>{
     const dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_3__.useDispatch)();
     const translate = (0,state__WEBPACK_IMPORTED_MODULE_6__/* .useTranslate */ .qM)();
     const config = (0,state__WEBPACK_IMPORTED_MODULE_6__/* .useTypedSelector */ .ix)(state__WEBPACK_IMPORTED_MODULE_6__/* .selectConfig */ .$o);
@@ -2605,33 +2762,48 @@ const RackTile = ({ activeIndexRef , character , index , inputRef , tile , onKey
     }, [
         index
     ]);
-    const handleCharacterChange = (0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)((value)=>{
-        dispatch(state__WEBPACK_IMPORTED_MODULE_6__/* .rackSlice.actions.changeCharacter */ .O_.actions.changeCharacter({
-            character: value,
+    const handleChange = (0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)((event)=>{
+        event.preventDefault();
+        event.stopPropagation();
+        const value = (0,lib__WEBPACK_IMPORTED_MODULE_4__/* .extractInputValue */ .WM)(event.target);
+        const characters = value ? (0,lib__WEBPACK_IMPORTED_MODULE_4__/* .extractCharacters */ .nK)(config, value) : [
+            null
+        ];
+        dispatch(state__WEBPACK_IMPORTED_MODULE_6__/* .rackSlice.actions.changeCharacters */ .O_.actions.changeCharacters({
+            characters,
             index
         }));
+        onChange(event);
     }, [
-        index
+        config,
+        index,
+        onChange
     ]);
     const handleKeyDown = (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(()=>{
         return (0,lib__WEBPACK_IMPORTED_MODULE_4__/* .createKeyboardNavigation */ .np)({
-            onBackspace: ()=>handleCharacterChange(null),
-            onDelete: ()=>handleCharacterChange(null),
+            onBackspace: (event)=>{
+                event.preventDefault();
+                dispatch(state__WEBPACK_IMPORTED_MODULE_6__/* .rackSlice.actions.changeCharacter */ .O_.actions.changeCharacter({
+                    character: null,
+                    index
+                }));
+            },
             onKeyDown: (event)=>{
-                const newCharacter = event.key.toLowerCase();
-                const twoCharacterTile = config.getTwoCharacterTileByPrefix(newCharacter);
-                if ((0,lib__WEBPACK_IMPORTED_MODULE_4__/* .isCtrl */ .yl)(event) && twoCharacterTile) {
+                if ((0,lib__WEBPACK_IMPORTED_MODULE_4__/* .isCtrl */ .yl)(event) && config.isTwoCharacterTilePrefix(event.key)) {
                     event.preventDefault();
-                    handleCharacterChange(twoCharacterTile);
-                } else if (config.hasCharacter(newCharacter) || newCharacter === _scrabble_solver_constants__WEBPACK_IMPORTED_MODULE_1__.BLANK) {
-                    handleCharacterChange(newCharacter);
+                    event.stopPropagation();
+                    const twoTilesCharacter = config.getTwoCharacterTileByPrefix(event.key);
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    dispatch(state__WEBPACK_IMPORTED_MODULE_6__/* .rackSlice.actions.changeCharacter */ .O_.actions.changeCharacter({
+                        character: twoTilesCharacter,
+                        index
+                    }));
                 }
                 onKeyDown(event);
             }
         });
     }, [
-        config,
-        handleCharacterChange,
+        index,
         onKeyDown
     ]);
     return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_Tile__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .Z, {
@@ -2646,6 +2818,7 @@ const RackTile = ({ activeIndexRef , character , index , inputRef , tile , onKey
         raised: true,
         size: parameters__WEBPACK_IMPORTED_MODULE_5__/* .TILE_SIZE */ .I_,
         tabIndex: index === 0 ? undefined : -1,
+        onChange: handleChange,
         onFocus: handleFocus,
         onKeyDown: handleKeyDown
     }, index);
@@ -3105,21 +3278,24 @@ __webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __we
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(59003);
 /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var react_window__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(80551);
-/* harmony import */ var react_window__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_window__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var parameters__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(90485);
-/* harmony import */ var state__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(51413);
-/* harmony import */ var _EmptyState__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(79590);
-/* harmony import */ var _Loading__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(85907);
-/* harmony import */ var _ResultsInput__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(57345);
-/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(61157);
-/* harmony import */ var _HeaderButton__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(53236);
-/* harmony import */ var _Result__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(73829);
-/* harmony import */ var _Results_module_scss__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(81177);
-/* harmony import */ var _Results_module_scss__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(_Results_module_scss__WEBPACK_IMPORTED_MODULE_12__);
-/* harmony import */ var _SolveButton__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(17290);
-var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([state__WEBPACK_IMPORTED_MODULE_4__, _EmptyState__WEBPACK_IMPORTED_MODULE_5__, _Loading__WEBPACK_IMPORTED_MODULE_6__, _ResultsInput__WEBPACK_IMPORTED_MODULE_7__, _HeaderButton__WEBPACK_IMPORTED_MODULE_9__, _Result__WEBPACK_IMPORTED_MODULE_10__, _SolveButton__WEBPACK_IMPORTED_MODULE_11__]);
-([state__WEBPACK_IMPORTED_MODULE_4__, _EmptyState__WEBPACK_IMPORTED_MODULE_5__, _Loading__WEBPACK_IMPORTED_MODULE_6__, _ResultsInput__WEBPACK_IMPORTED_MODULE_7__, _HeaderButton__WEBPACK_IMPORTED_MODULE_9__, _Result__WEBPACK_IMPORTED_MODULE_10__, _SolveButton__WEBPACK_IMPORTED_MODULE_11__] = __webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(16689);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var react_window__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(80551);
+/* harmony import */ var react_window__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_window__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var parameters__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(90485);
+/* harmony import */ var state__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(51413);
+/* harmony import */ var _EmptyState__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(79590);
+/* harmony import */ var _Loading__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(85907);
+/* harmony import */ var _ResultsInput__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(57345);
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(61157);
+/* harmony import */ var _HeaderButton__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(53236);
+/* harmony import */ var _Result__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(73829);
+/* harmony import */ var _Results_module_scss__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(81177);
+/* harmony import */ var _Results_module_scss__WEBPACK_IMPORTED_MODULE_13___default = /*#__PURE__*/__webpack_require__.n(_Results_module_scss__WEBPACK_IMPORTED_MODULE_13__);
+/* harmony import */ var _SolveButton__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(17290);
+var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([state__WEBPACK_IMPORTED_MODULE_5__, _EmptyState__WEBPACK_IMPORTED_MODULE_6__, _Loading__WEBPACK_IMPORTED_MODULE_7__, _ResultsInput__WEBPACK_IMPORTED_MODULE_8__, _HeaderButton__WEBPACK_IMPORTED_MODULE_10__, _Result__WEBPACK_IMPORTED_MODULE_11__, _SolveButton__WEBPACK_IMPORTED_MODULE_12__]);
+([state__WEBPACK_IMPORTED_MODULE_5__, _EmptyState__WEBPACK_IMPORTED_MODULE_6__, _Loading__WEBPACK_IMPORTED_MODULE_7__, _ResultsInput__WEBPACK_IMPORTED_MODULE_8__, _HeaderButton__WEBPACK_IMPORTED_MODULE_10__, _Result__WEBPACK_IMPORTED_MODULE_11__, _SolveButton__WEBPACK_IMPORTED_MODULE_12__] = __webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__);
+
 
 
 
@@ -3134,68 +3310,84 @@ var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([stat
 
 
 const Results = ({ height , width  })=>{
-    const translate = (0,state__WEBPACK_IMPORTED_MODULE_4__/* .useTranslate */ .qM)();
-    const allResults = (0,state__WEBPACK_IMPORTED_MODULE_4__/* .useTypedSelector */ .ix)(state__WEBPACK_IMPORTED_MODULE_4__/* .selectSortedResults */ .f2);
-    const results = (0,state__WEBPACK_IMPORTED_MODULE_4__/* .useTypedSelector */ .ix)(state__WEBPACK_IMPORTED_MODULE_4__/* .selectSortedFilteredResults */ .dN);
-    const isLoading = (0,state__WEBPACK_IMPORTED_MODULE_4__/* .useTypedSelector */ .ix)(state__WEBPACK_IMPORTED_MODULE_4__/* .selectIsLoading */ .xU);
-    const isOutdated = (0,state__WEBPACK_IMPORTED_MODULE_4__/* .useTypedSelector */ .ix)(state__WEBPACK_IMPORTED_MODULE_4__/* .selectAreResultsOutdated */ .Mj);
+    const translate = (0,state__WEBPACK_IMPORTED_MODULE_5__/* .useTranslate */ .qM)();
+    const allResults = (0,state__WEBPACK_IMPORTED_MODULE_5__/* .useTypedSelector */ .ix)(state__WEBPACK_IMPORTED_MODULE_5__/* .selectSortedResults */ .f2);
+    const results = (0,state__WEBPACK_IMPORTED_MODULE_5__/* .useTypedSelector */ .ix)(state__WEBPACK_IMPORTED_MODULE_5__/* .selectSortedFilteredResults */ .dN);
+    const isLoading = (0,state__WEBPACK_IMPORTED_MODULE_5__/* .useTypedSelector */ .ix)(state__WEBPACK_IMPORTED_MODULE_5__/* .selectIsLoading */ .xU);
+    const isOutdated = (0,state__WEBPACK_IMPORTED_MODULE_5__/* .useTypedSelector */ .ix)(state__WEBPACK_IMPORTED_MODULE_5__/* .selectAreResultsOutdated */ .Mj);
+    const error = (0,state__WEBPACK_IMPORTED_MODULE_5__/* .useTypedSelector */ .ix)(state__WEBPACK_IMPORTED_MODULE_5__/* .selectSolveError */ .Rn);
+    const listRef = (0,react__WEBPACK_IMPORTED_MODULE_2__.useRef)();
+    (0,react__WEBPACK_IMPORTED_MODULE_2__.useLayoutEffect)(()=>{
+        if (listRef.current) {
+            listRef.current.scrollTo(0, 0);
+        }
+    }, [
+        listRef,
+        results
+    ]);
     return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-        className: (_Results_module_scss__WEBPACK_IMPORTED_MODULE_12___default().results),
+        className: (_Results_module_scss__WEBPACK_IMPORTED_MODULE_13___default().results),
         children: [
             /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
-                className: (_Results_module_scss__WEBPACK_IMPORTED_MODULE_12___default().header),
-                children: _constants__WEBPACK_IMPORTED_MODULE_8__/* .COLUMNS.map */ .L.map((column)=>/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_HeaderButton__WEBPACK_IMPORTED_MODULE_9__/* ["default"] */ .Z, {
+                className: (_Results_module_scss__WEBPACK_IMPORTED_MODULE_13___default().header),
+                children: _constants__WEBPACK_IMPORTED_MODULE_9__/* .COLUMNS.map */ .L.map((column)=>/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_HeaderButton__WEBPACK_IMPORTED_MODULE_10__/* ["default"] */ .Z, {
                         column: column
                     }, column.id))
             }),
-            typeof results === "undefined" && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_EmptyState__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .Z, {
-                className: (_Results_module_scss__WEBPACK_IMPORTED_MODULE_12___default().emptyState),
+            typeof error !== "undefined" && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_EmptyState__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .Z, {
+                className: (_Results_module_scss__WEBPACK_IMPORTED_MODULE_13___default().emptyState),
+                type: "error",
+                children: error.message
+            }),
+            typeof results === "undefined" && typeof error === "undefined" && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_EmptyState__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .Z, {
+                className: (_Results_module_scss__WEBPACK_IMPORTED_MODULE_13___default().emptyState),
                 type: "info",
                 children: [
                     translate("results.empty-state.uninitialized"),
-                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_SolveButton__WEBPACK_IMPORTED_MODULE_11__/* ["default"] */ .Z, {})
+                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_SolveButton__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z, {})
                 ]
             }),
-            typeof results !== "undefined" && typeof allResults !== "undefined" && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
+            typeof results !== "undefined" && typeof allResults !== "undefined" && typeof error === "undefined" && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
                 children: [
-                    isOutdated && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_EmptyState__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .Z, {
-                        className: (_Results_module_scss__WEBPACK_IMPORTED_MODULE_12___default().emptyState),
+                    isOutdated && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_EmptyState__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .Z, {
+                        className: (_Results_module_scss__WEBPACK_IMPORTED_MODULE_13___default().emptyState),
                         type: "info",
                         children: [
                             translate("results.empty-state.outdated"),
-                            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_SolveButton__WEBPACK_IMPORTED_MODULE_11__/* ["default"] */ .Z, {})
+                            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_SolveButton__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z, {})
                         ]
                     }),
                     !isOutdated && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
                         children: [
-                            allResults.length === 0 && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_EmptyState__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .Z, {
-                                className: (_Results_module_scss__WEBPACK_IMPORTED_MODULE_12___default().emptyState),
+                            allResults.length === 0 && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_EmptyState__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .Z, {
+                                className: (_Results_module_scss__WEBPACK_IMPORTED_MODULE_13___default().emptyState),
                                 type: "warning",
                                 children: translate("results.empty-state.no-results")
                             }),
-                            allResults.length > 0 && results.length === 0 && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_EmptyState__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .Z, {
-                                className: (_Results_module_scss__WEBPACK_IMPORTED_MODULE_12___default().emptyState),
+                            allResults.length > 0 && results.length === 0 && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_EmptyState__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .Z, {
+                                className: (_Results_module_scss__WEBPACK_IMPORTED_MODULE_13___default().emptyState),
                                 type: "info",
                                 children: translate("results.empty-state.no-filtered-results")
                             }),
-                            allResults.length > 0 && results.length > 0 && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(react_window__WEBPACK_IMPORTED_MODULE_2__.FixedSizeList, {
-                                className: classnames__WEBPACK_IMPORTED_MODULE_1___default()((_Results_module_scss__WEBPACK_IMPORTED_MODULE_12___default().list), {
-                                    [(_Results_module_scss__WEBPACK_IMPORTED_MODULE_12___default().outdated)]: isOutdated
+                            allResults.length > 0 && results.length > 0 && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(react_window__WEBPACK_IMPORTED_MODULE_3__.FixedSizeList, {
+                                className: classnames__WEBPACK_IMPORTED_MODULE_1___default()((_Results_module_scss__WEBPACK_IMPORTED_MODULE_13___default().list), {
+                                    [(_Results_module_scss__WEBPACK_IMPORTED_MODULE_13___default().outdated)]: isOutdated
                                 }),
-                                height: height - parameters__WEBPACK_IMPORTED_MODULE_3__/* .RESULTS_HEADER_HEIGHT */ .$L - parameters__WEBPACK_IMPORTED_MODULE_3__/* .RESULTS_INPUT_HEIGHT */ .qp,
+                                height: height - parameters__WEBPACK_IMPORTED_MODULE_4__/* .RESULTS_HEADER_HEIGHT */ .$L - parameters__WEBPACK_IMPORTED_MODULE_4__/* .RESULTS_INPUT_HEIGHT */ .qp,
+                                innerRef: listRef,
                                 itemCount: results.length,
-                                itemSize: parameters__WEBPACK_IMPORTED_MODULE_3__/* .RESULTS_ITEM_HEIGHT */ .rx,
+                                itemSize: parameters__WEBPACK_IMPORTED_MODULE_4__/* .RESULTS_ITEM_HEIGHT */ .rx,
                                 width: width,
-                                children: _Result__WEBPACK_IMPORTED_MODULE_10__/* ["default"] */ .Z
+                                children: _Result__WEBPACK_IMPORTED_MODULE_11__/* ["default"] */ .Z
                             }),
-                            allResults.length > 0 && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_ResultsInput__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .Z, {
-                                className: (_Results_module_scss__WEBPACK_IMPORTED_MODULE_12___default().input)
+                            allResults.length > 0 && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_ResultsInput__WEBPACK_IMPORTED_MODULE_8__/* ["default"] */ .Z, {
+                                className: (_Results_module_scss__WEBPACK_IMPORTED_MODULE_13___default().input)
                             })
                         ]
                     })
                 ]
             }),
-            isLoading && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_Loading__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .Z, {})
+            isLoading && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_Loading__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .Z, {})
         ]
     });
 };
@@ -3344,7 +3536,7 @@ __webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __we
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6022);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_redux__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var lib__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(92237);
+/* harmony import */ var lib__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(75558);
 /* harmony import */ var state__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(51413);
 /* harmony import */ var _ResultsInput_module_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(35628);
 /* harmony import */ var _ResultsInput_module_scss__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_ResultsInput_module_scss__WEBPACK_IMPORTED_MODULE_6__);
@@ -3919,17 +4111,23 @@ __webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __we
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(59003);
 /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var react_modal__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(19931);
-/* harmony import */ var react_modal__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_modal__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var icons__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6942);
-/* harmony import */ var parameters__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(90485);
-/* harmony import */ var state__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(51413);
-/* harmony import */ var _SquareButton__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(49021);
-/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(79362);
-/* harmony import */ var _Sidebar_module_scss__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(32455);
-/* harmony import */ var _Sidebar_module_scss__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_Sidebar_module_scss__WEBPACK_IMPORTED_MODULE_8__);
-var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([state__WEBPACK_IMPORTED_MODULE_5__, _SquareButton__WEBPACK_IMPORTED_MODULE_6__]);
-([state__WEBPACK_IMPORTED_MODULE_5__, _SquareButton__WEBPACK_IMPORTED_MODULE_6__] = __webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(16689);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var react_modal__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(19931);
+/* harmony import */ var react_modal__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_modal__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var react_use__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(69755);
+/* harmony import */ var react_use__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_use__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(6942);
+/* harmony import */ var parameters__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(90485);
+/* harmony import */ var state__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(51413);
+/* harmony import */ var _SquareButton__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(49021);
+/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(79362);
+/* harmony import */ var _Sidebar_module_scss__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(32455);
+/* harmony import */ var _Sidebar_module_scss__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(_Sidebar_module_scss__WEBPACK_IMPORTED_MODULE_10__);
+var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([state__WEBPACK_IMPORTED_MODULE_7__, _SquareButton__WEBPACK_IMPORTED_MODULE_8__]);
+([state__WEBPACK_IMPORTED_MODULE_7__, _SquareButton__WEBPACK_IMPORTED_MODULE_8__] = __webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__);
+
+
 
 
 
@@ -3940,38 +4138,53 @@ var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([stat
 
 
 const Sidebar = ({ children , className , isOpen , title , onClose  })=>{
-    const translate = (0,state__WEBPACK_IMPORTED_MODULE_5__/* .useTranslate */ .qM)();
-    return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx((react_modal__WEBPACK_IMPORTED_MODULE_2___default()), {
+    const translate = (0,state__WEBPACK_IMPORTED_MODULE_7__/* .useTranslate */ .qM)();
+    const { 0: shouldReturnFocusAfterClose , 1: setShouldReturnFocusAfterClose  } = (0,react__WEBPACK_IMPORTED_MODULE_2__.useState)(true);
+    (0,react_use__WEBPACK_IMPORTED_MODULE_4__.useKey)("Escape", ()=>{
+        setShouldReturnFocusAfterClose(false);
+        onClose();
+    }, undefined, [
+        onClose
+    ]);
+    (0,react__WEBPACK_IMPORTED_MODULE_2__.useEffect)(()=>{
+        if (isOpen) {
+            setShouldReturnFocusAfterClose(true);
+        }
+    }, [
+        isOpen
+    ]);
+    return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx((react_modal__WEBPACK_IMPORTED_MODULE_3___default()), {
         className: {
-            afterOpen: (_Sidebar_module_scss__WEBPACK_IMPORTED_MODULE_8___default().afterOpen),
-            base: (_Sidebar_module_scss__WEBPACK_IMPORTED_MODULE_8___default().modal),
-            beforeClose: (_Sidebar_module_scss__WEBPACK_IMPORTED_MODULE_8___default().beforeClose)
+            afterOpen: (_Sidebar_module_scss__WEBPACK_IMPORTED_MODULE_10___default().afterOpen),
+            base: (_Sidebar_module_scss__WEBPACK_IMPORTED_MODULE_10___default().modal),
+            beforeClose: (_Sidebar_module_scss__WEBPACK_IMPORTED_MODULE_10___default().beforeClose)
         },
-        closeTimeoutMS: parameters__WEBPACK_IMPORTED_MODULE_4__/* .TRANSITION_DURATION_LONG */ .MA,
+        closeTimeoutMS: parameters__WEBPACK_IMPORTED_MODULE_6__/* .TRANSITION_DURATION_LONG */ .MA,
         contentLabel: title,
         isOpen: isOpen,
-        overlayClassName: (_Sidebar_module_scss__WEBPACK_IMPORTED_MODULE_8___default().overlay),
+        overlayClassName: (_Sidebar_module_scss__WEBPACK_IMPORTED_MODULE_10___default().overlay),
+        shouldReturnFocusAfterClose: shouldReturnFocusAfterClose,
         onRequestClose: onClose,
         children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-            className: classnames__WEBPACK_IMPORTED_MODULE_1___default()((_Sidebar_module_scss__WEBPACK_IMPORTED_MODULE_8___default().sidebar), className),
+            className: classnames__WEBPACK_IMPORTED_MODULE_1___default()((_Sidebar_module_scss__WEBPACK_IMPORTED_MODULE_10___default().sidebar), className),
             children: [
                 /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-                    className: (_Sidebar_module_scss__WEBPACK_IMPORTED_MODULE_8___default().header),
+                    className: (_Sidebar_module_scss__WEBPACK_IMPORTED_MODULE_10___default().header),
                     children: [
                         /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h1", {
-                            className: (_Sidebar_module_scss__WEBPACK_IMPORTED_MODULE_8___default().title),
+                            className: (_Sidebar_module_scss__WEBPACK_IMPORTED_MODULE_10___default().title),
                             children: title
                         }),
-                        /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_SquareButton__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .Z, {
-                            className: (_Sidebar_module_scss__WEBPACK_IMPORTED_MODULE_8___default().closeButton),
-                            Icon: icons__WEBPACK_IMPORTED_MODULE_3__/* .CrossFill */ .ME,
+                        /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_SquareButton__WEBPACK_IMPORTED_MODULE_8__/* ["default"] */ .Z, {
+                            className: (_Sidebar_module_scss__WEBPACK_IMPORTED_MODULE_10___default().closeButton),
+                            Icon: icons__WEBPACK_IMPORTED_MODULE_5__/* .CrossFill */ .ME,
                             tooltip: translate("common.close"),
                             onClick: onClose
                         })
                     ]
                 }),
                 /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
-                    className: (_Sidebar_module_scss__WEBPACK_IMPORTED_MODULE_8___default().content),
+                    className: (_Sidebar_module_scss__WEBPACK_IMPORTED_MODULE_10___default().content),
                     children: children
                 })
             ]
@@ -3979,7 +4192,7 @@ const Sidebar = ({ children , className , isOpen , title , onClose  })=>{
     });
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Object.assign(Sidebar, {
-    Section: _components__WEBPACK_IMPORTED_MODULE_7__/* .Section */ .$
+    Section: _components__WEBPACK_IMPORTED_MODULE_9__/* .Section */ .$
 }));
 
 __webpack_async_result__();
@@ -4134,7 +4347,6 @@ const Link = ({ className , Icon , tooltip , ...props })=>{
     const triggerProps = (0,_Tooltip__WEBPACK_IMPORTED_MODULE_2__/* .useTooltip */ .l)(tooltip, props);
     return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("a", {
         className: classnames__WEBPACK_IMPORTED_MODULE_1___default()((_SquareButton_module_scss__WEBPACK_IMPORTED_MODULE_3___default().squareButton), className),
-        type: "button",
         ...props,
         ...triggerProps,
         children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
@@ -4265,8 +4477,8 @@ var jsx_runtime_ = __webpack_require__(20997);
 var build = __webpack_require__(7618);
 // EXTERNAL MODULE: external "react"
 var external_react_ = __webpack_require__(16689);
-// EXTERNAL MODULE: ./src/lib/index.ts + 27 modules
-var lib = __webpack_require__(92237);
+// EXTERNAL MODULE: ./src/lib/index.ts + 29 modules
+var lib = __webpack_require__(75558);
 // EXTERNAL MODULE: external "classnames"
 var external_classnames_ = __webpack_require__(59003);
 var external_classnames_default = /*#__PURE__*/__webpack_require__.n(external_classnames_);
@@ -4278,8 +4490,7 @@ var Tile_module_default = /*#__PURE__*/__webpack_require__.n(Tile_module);
 
 
 
-const handleChange = (event)=>event.preventDefault();
-const TilePure = ({ autoFocus , canShowPoints , character , className , disabled , highlighted , inputRef , inputStyle , isBlank , placeholder , points , pointsStyle , raised , style , tabIndex , onFocus , onKeyDown ,  })=>/*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
+const TilePure = ({ autoFocus , canShowPoints , character , className , disabled , highlighted , inputRef , inputStyle , isBlank , placeholder , points , pointsStyle , raised , style , tabIndex , onChange , onFocus , onKeyDown ,  })=>/*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
         className: external_classnames_default()((Tile_module_default()).tile, className, {
             [(Tile_module_default()).highlighted]: highlighted,
             [(Tile_module_default()).blank]: isBlank,
@@ -4299,14 +4510,13 @@ const TilePure = ({ autoFocus , canShowPoints , character , className , disabled
                 autoFocus: autoFocus,
                 className: (Tile_module_default()).character,
                 disabled: disabled,
-                maxLength: 1,
                 placeholder: placeholder,
                 ref: inputRef,
                 spellCheck: false,
                 style: inputStyle,
                 tabIndex: tabIndex,
                 value: character || "",
-                onChange: handleChange,
+                onChange: onChange,
                 onFocus: onFocus,
                 onKeyDown: onKeyDown
             }),
@@ -4325,7 +4535,7 @@ const TilePure = ({ autoFocus , canShowPoints , character , className , disabled
 
 
 
-const Tile = ({ autoFocus , className , character ="" , disabled , highlighted , inputRef: ref , isBlank , placeholder , points , raised , size , tabIndex , onFocus , onKeyDown ,  })=>{
+const Tile = ({ autoFocus , className , character ="" , disabled , highlighted , inputRef: ref , isBlank , placeholder , points , raised , size , tabIndex , onChange , onFocus =lib/* noop */.ZT , onKeyDown =lib/* noop */.ZT ,  })=>{
     const { pointsFontSize , tileFontSize , tileSize  } = (0,lib/* getTileSizes */.vc)(size);
     const style = (0,external_react_.useMemo)(()=>({
             height: tileSize,
@@ -4348,6 +4558,10 @@ const Tile = ({ autoFocus , className , character ="" , disabled , highlighted ,
     ]);
     const isEmpty = !character || character === build.EMPTY_CELL;
     const canShowPoints = (isBlank || !isEmpty) && typeof points !== "undefined";
+    const handleKeyDown = (event)=>{
+        inputRef.current?.select();
+        onKeyDown(event);
+    };
     (0,external_react_.useEffect)(()=>{
         if (autoFocus && inputRef.current) {
             inputRef.current.focus();
@@ -4372,8 +4586,9 @@ const Tile = ({ autoFocus , className , character ="" , disabled , highlighted ,
         raised: raised,
         style: style,
         tabIndex: tabIndex,
+        onChange: onChange,
         onFocus: onFocus,
-        onKeyDown: onKeyDown
+        onKeyDown: handleKeyDown
     });
 };
 /* harmony default export */ const Tile_Tile = (Tile);
@@ -4463,7 +4678,7 @@ __webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __we
 /* harmony import */ var react_use__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(69755);
 /* harmony import */ var react_use__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_use__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(26183);
-/* harmony import */ var lib__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(92237);
+/* harmony import */ var lib__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(75558);
 /* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(8550);
 /* harmony import */ var _Tooltip_module_scss__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(222);
 /* harmony import */ var _Tooltip_module_scss__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_Tooltip_module_scss__WEBPACK_IMPORTED_MODULE_8__);
@@ -5021,7 +5236,7 @@ __webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __we
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_redux__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var react_use__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(69755);
 /* harmony import */ var react_use__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_use__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var lib__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(92237);
+/* harmony import */ var lib__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(75558);
 /* harmony import */ var state__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(51413);
 var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([state__WEBPACK_IMPORTED_MODULE_4__]);
 state__WEBPACK_IMPORTED_MODULE_4__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
@@ -5120,7 +5335,7 @@ __webpack_async_result__();
 /* harmony import */ var react_dom_client__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_dom_client__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var react_portal__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(63938);
 /* harmony import */ var react_portal__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_portal__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var lib__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(92237);
+/* harmony import */ var lib__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(75558);