scrabble-solver 2.11.0 → 2.11.1

package/packages/scrabble-solver/package-lock.json

@@ -1,17 +1,16 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.11.0",
+  "version": "2.11.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@scrabble-solver/scrabble-solver",
-      "version": "2.11.0",
+      "version": "2.11.1",
       "license": "CC BY-NC-ND 4.0",
       "dependencies": {
         "@floating-ui/react": "^0.20.1",
         "@kamilmielnik/trie": "^2.0.1",
-        "@popperjs/core": "^2.11.6",
         "@reduxjs/toolkit": "^1.9.3",
         "classnames": "^2.3.2",
         "include-media": "^2.0.0",
@@ -21,15 +20,12 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-modal": "^3.16.1",
-        "react-popper": "^2.3.0",
         "react-portal": "^4.2.2",
         "react-redux": "^8.0.5",
         "react-use": "^17.4.0",
         "react-window": "^1.8.8",
-        "redux": "^4.2.1",
         "redux-saga": "^1.2.2",
         "store2": "^2.14.2",
-        "uuid": "^9.0.0",
         "workbox-expiration": "^6.5.4",
         "workbox-precaching": "^6.5.4",
         "workbox-routing": "^6.5.4",
@@ -46,7 +42,6 @@
         "@types/react-window": "^1.8.5",
         "@types/redux": "^3.6.31",
         "@types/redux-saga": "^0.10.5",
-        "@types/uuid": "^9.0.1",
         "env-cmd": "^10.1.0",
         "sass": "^1.59.2",
         "workbox-webpack-plugin": "^6.5.4"
@@ -2143,15 +2138,6 @@
         "node": ">= 10"
       }
     },
-    "node_modules/@popperjs/core": {
-      "version": "2.11.6",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
-      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
     "node_modules/@redux-saga/core": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@redux-saga/core/-/core-1.2.2.tgz",
@@ -2766,12 +2752,6 @@
       "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
       "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
     },
-    "node_modules/@types/uuid": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.1.tgz",
-      "integrity": "sha512-rFT3ak0/2trgvp4yYZo5iKFEPsET7vKydKF+VRCxlQ9bpheehyAJH89dAkaLEq/j/RZXJIqcgsmPJKUP1Z28HA==",
-      "dev": true
-    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -5253,11 +5233,6 @@
         "react": "^18.2.0"
       }
     },
-    "node_modules/react-fast-compare": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
-      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
-    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -5286,20 +5261,6 @@
         "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
       }
     },
-    "node_modules/react-popper": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
-      "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
-      "dependencies": {
-        "react-fast-compare": "^3.0.1",
-        "warning": "^4.0.2"
-      },
-      "peerDependencies": {
-        "@popperjs/core": "^2.0.0",
-        "react": "^16.8.0 || ^17 || ^18",
-        "react-dom": "^16.8.0 || ^17 || ^18"
-      }
-    },
     "node_modules/react-portal": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/react-portal/-/react-portal-4.2.2.tgz",
@@ -6384,14 +6345,6 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/uuid": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
-      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
     "node_modules/warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
@@ -8230,11 +8183,6 @@
       "integrity": "sha512-0MffFmyv7tBLlji01qc0IaPP/LVExzvj7/R5x1Jph1bTAIj4Vu81yFQWHHQAP6r4ff9Ukj1mBK6MDNVXm7Tcvw==",
       "optional": true
     },
-    "@popperjs/core": {
-      "version": "2.11.6",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
-      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
-    },
     "@redux-saga/core": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@redux-saga/core/-/core-1.2.2.tgz",
@@ -8679,12 +8627,6 @@
       "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
       "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
     },
-    "@types/uuid": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.1.tgz",
-      "integrity": "sha512-rFT3ak0/2trgvp4yYZo5iKFEPsET7vKydKF+VRCxlQ9bpheehyAJH89dAkaLEq/j/RZXJIqcgsmPJKUP1Z28HA==",
-      "dev": true
-    },
     "@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -10552,11 +10494,6 @@
         "scheduler": "^0.23.0"
       }
     },
-    "react-fast-compare": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
-      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
-    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -10578,15 +10515,6 @@
         "warning": "^4.0.3"
       }
     },
-    "react-popper": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
-      "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
-      "requires": {
-        "react-fast-compare": "^3.0.1",
-        "warning": "^4.0.2"
-      }
-    },
     "react-portal": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/react-portal/-/react-portal-4.2.2.tgz",
@@ -11377,11 +11305,6 @@
       "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
       "requires": {}
     },
-    "uuid": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
-      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg=="
-    },
     "warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",

package/packages/scrabble-solver/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.11.0",
+  "version": "2.11.1",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -30,15 +30,14 @@
   "dependencies": {
     "@floating-ui/react": "^0.20.1",
     "@kamilmielnik/trie": "^2.0.1",
-    "@popperjs/core": "^2.11.6",
     "@reduxjs/toolkit": "^1.9.3",
-    "@scrabble-solver/configs": "^2.11.0",
-    "@scrabble-solver/constants": "^2.11.0",
-    "@scrabble-solver/dictionaries": "^2.11.0",
-    "@scrabble-solver/logger": "^2.11.0",
-    "@scrabble-solver/solver": "^2.11.0",
-    "@scrabble-solver/types": "^2.11.0",
-    "@scrabble-solver/word-definitions": "^2.11.0",
+    "@scrabble-solver/configs": "^2.11.1",
+    "@scrabble-solver/constants": "^2.11.1",
+    "@scrabble-solver/dictionaries": "^2.11.1",
+    "@scrabble-solver/logger": "^2.11.1",
+    "@scrabble-solver/solver": "^2.11.1",
+    "@scrabble-solver/types": "^2.11.1",
+    "@scrabble-solver/word-definitions": "^2.11.1",
     "classnames": "^2.3.2",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
@@ -47,15 +46,12 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-modal": "^3.16.1",
-    "react-popper": "^2.3.0",
     "react-portal": "^4.2.2",
     "react-redux": "^8.0.5",
     "react-use": "^17.4.0",
     "react-window": "^1.8.8",
-    "redux": "^4.2.1",
     "redux-saga": "^1.2.2",
     "store2": "^2.14.2",
-    "uuid": "^9.0.0",
     "workbox-expiration": "^6.5.4",
     "workbox-precaching": "^6.5.4",
     "workbox-routing": "^6.5.4",
@@ -72,7 +68,6 @@
     "@types/react-window": "^1.8.5",
     "@types/redux": "^3.6.31",
     "@types/redux-saga": "^0.10.5",
-    "@types/uuid": "^9.0.1",
     "env-cmd": "^10.1.0",
     "sass": "^1.59.2",
     "workbox-webpack-plugin": "^6.5.4"

package/packages/scrabble-solver/src/components/{Solver/components/EmptyState/EmptyState.module.scss → Alert/Alert.module.scss}

@@ -1,4 +1,4 @@
-.emptyState {
+.alert {
   display: flex;
   min-width: 0;
   width: 100%;
@@ -11,7 +11,6 @@
 .iconContainer {
   flex: 0 0 auto;
   display: flex;
-  align-items: center;
   justify-content: center;
   padding: var(--spacing--m);
   color: var(--color--foreground--secondary);
@@ -33,15 +32,20 @@
     color: var(--color--error);
   }
 
-  .warning & {
-    background-color: var(--color--yellow--light);
-    color: var(--color--warning);
-  }
-
   .info & {
     background-color: var(--color--blue--light);
     color: var(--color--info);
   }
+
+  .success & {
+    background-color: var(--color--green--light);
+    color: var(--color--success);
+  }
+
+  .warning & {
+    background-color: var(--color--yellow--light);
+    color: var(--color--warning);
+  }
 }
 
 .icon {

package/packages/scrabble-solver/src/components/{Solver/components/EmptyState/EmptyState.tsx → Alert/Alert.tsx}

@@ -1,30 +1,32 @@
 import classNames from 'classnames';
 import { FunctionComponent, HTMLProps, ReactNode, SVGAttributes } from 'react';
 
-import { CrossCircleFill, ExclamationTriangleFill, InfoCircleFill } from 'icons';
+import { Check, CrossCircleFill, ExclamationTriangleFill, InfoCircleFill } from 'icons';
 
-import styles from './EmptyState.module.scss';
+import styles from './Alert.module.scss';
 
 interface Props extends HTMLProps<HTMLDivElement> {
   children: ReactNode;
   className?: string;
-  variant: 'error' | 'info' | 'warning';
+  variant: 'error' | 'info' | 'success' | 'warning';
 }
 
 const ICON_PER_TYPE: Record<Props['variant'], FunctionComponent<SVGAttributes<SVGElement>>> = {
   error: CrossCircleFill,
   info: InfoCircleFill,
+  success: Check,
   warning: ExclamationTriangleFill,
 };
 
-const EmptyState: FunctionComponent<Props> = ({ children, className, variant, ...props }) => {
+const Alert: FunctionComponent<Props> = ({ children, className, variant, ...props }) => {
   const Icon = ICON_PER_TYPE[variant];
 
   return (
     <div
-      className={classNames(styles.emptyState, className, {
+      className={classNames(styles.alert, className, {
         [styles.error]: variant === 'error',
         [styles.info]: variant === 'info',
+        [styles.success]: variant === 'success',
         [styles.warning]: variant === 'warning',
       })}
       {...props}
@@ -38,4 +40,4 @@ const EmptyState: FunctionComponent<Props> = ({ children, className, variant, ..
   );
 };
 
-export default EmptyState;
+export default Alert;

package/packages/scrabble-solver/src/components/Alert/index.ts

@@ -0,0 +1 @@
+export { default } from './Alert';

package/packages/scrabble-solver/src/components/Board/Board.module.scss

@@ -4,10 +4,65 @@
   display: table;
   box-shadow: var(--box-shadow);
   border: var(--border);
+  border-radius: var(--border--radius);
 }
 
 .row {
   display: table-row;
+
+  &:first-child {
+    border-top-left-radius: var(--border--radius);
+    border-top-right-radius: var(--border--radius);
+
+    .cell {
+      &:first-child {
+        [dir='ltr'] & {
+          border-top-left-radius: var(--border--radius);
+        }
+
+        [dir='rtl'] & {
+          border-top-right-radius: var(--border--radius);
+        }
+      }
+
+      &:last-child {
+        [dir='ltr'] & {
+          border-top-right-radius: var(--border--radius);
+        }
+
+        [dir='rtl'] & {
+          border-top-left-radius: var(--border--radius);
+        }
+      }
+    }
+  }
+
+  &:last-child {
+    border-bottom-left-radius: var(--border--radius);
+    border-bottom-right-radius: var(--border--radius);
+
+    .cell {
+      &:first-child {
+        [dir='ltr'] & {
+          border-bottom-left-radius: var(--border--radius);
+        }
+
+        [dir='rtl'] & {
+          border-bottom-right-radius: var(--border--radius);
+        }
+      }
+
+      &:last-child {
+        [dir='ltr'] & {
+          border-bottom-right-radius: var(--border--radius);
+        }
+
+        [dir='rtl'] & {
+          border-bottom-left-radius: var(--border--radius);
+        }
+      }
+    }
+  }
 }
 
 .actions {

package/packages/scrabble-solver/src/components/Board/BoardPure.tsx

@@ -45,6 +45,10 @@ const BoardPure: FunctionComponent<Props> = ({
           <Cell
             className={styles.cell}
             cell={cell}
+            cellBottom={y < rows.length - 1 ? rows[y + 1][x] : undefined}
+            cellLeft={x > 0 ? rows[y][x - 1] : undefined}
+            cellRight={x < rows.length - 1 ? rows[y][x + 1] : undefined}
+            cellTop={y > 0 ? rows[y - 1][x] : undefined}
             inputRef={inputRefs[y][x]}
             isBottom={y === rows.length - 1}
             isCenter={center.x === x && center.y === y}

package/packages/scrabble-solver/src/components/Board/components/Cell/Cell.module.scss

@@ -125,6 +125,47 @@
   }
 }
 
+.tile {
+  .sharpTopLeft & {
+    [dir='ltr'] & {
+      border-top-left-radius: 0;
+    }
+
+    [dir='rtl'] & {
+      border-top-right-radius: 0;
+    }
+  }
+
+  .sharpTopRight & {
+    [dir='ltr'] & {
+      border-top-right-radius: 0;
+    }
+
+    [dir='rtl'] & {
+      border-top-left-radius: 0;
+    }
+  }
+
+  .sharpBottomLeft & {
+    [dir='ltr'] & {
+      border-bottom-left-radius: 0;
+    }
+
+    [dir='rtl'] & {
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  .sharpBottomRight & {
+    [dir='ltr'] & {
+      border-bottom-right-radius: 0;
+    }
+
+    [dir='rtl'] & {
+      border-bottom-left-radius: 0;
+    }
+  }
+}
 .icon {
   $size: 40%;
 

package/packages/scrabble-solver/src/components/Board/components/Cell/Cell.tsx

@@ -17,6 +17,10 @@ import CellPure from './CellPure';
 
 interface Props {
   cell: CellModel;
+  cellBottom?: CellModel;
+  cellLeft?: CellModel;
+  cellRight?: CellModel;
+  cellTop?: CellModel;
   className?: string;
   inputRef: RefObject<HTMLInputElement>;
   isBottom: boolean;
@@ -29,6 +33,10 @@ interface Props {
 
 const Cell: FunctionComponent<Props> = ({
   cell,
+  cellBottom,
+  cellLeft,
+  cellRight,
+  cellTop,
   className,
   inputRef,
   isBottom,
@@ -59,6 +67,10 @@ const Cell: FunctionComponent<Props> = ({
       })}
       bonus={bonus}
       cell={cell}
+      cellBottom={cellBottom}
+      cellLeft={cellLeft}
+      cellRight={cellRight}
+      cellTop={cellTop}
       className={className}
       inputRef={inputRef}
       isBottom={isBottom}

package/packages/scrabble-solver/src/components/Board/components/Cell/CellPure.tsx

@@ -13,6 +13,10 @@ interface Props {
   'aria-label': string;
   bonus: Bonus | undefined;
   cell: Cell;
+  cellBottom?: Cell;
+  cellLeft?: Cell;
+  cellRight?: Cell;
+  cellTop?: Cell;
   className?: string;
   inputRef: RefObject<HTMLInputElement>;
   isBottom: boolean;
@@ -33,6 +37,10 @@ const CellPure: FunctionComponent<Props> = ({
   'aria-label': ariaLabel,
   bonus,
   cell,
+  cellBottom,
+  cellLeft,
+  cellRight,
+  cellTop,
   className,
   inputRef,
   isBottom,
@@ -53,6 +61,10 @@ const CellPure: FunctionComponent<Props> = ({
       [styles.bottom]: isBottom,
       [styles.filtered]: isFiltered,
       [styles.right]: isRight,
+      [styles.sharpTopLeft]: cellTop?.hasTile() || cellLeft?.hasTile(),
+      [styles.sharpTopRight]: cellTop?.hasTile() || cellRight?.hasTile(),
+      [styles.sharpBottomLeft]: cellBottom?.hasTile() || cellLeft?.hasTile(),
+      [styles.sharpBottomRight]: cellBottom?.hasTile() || cellRight?.hasTile(),
     })}
     style={style}
   >

package/packages/scrabble-solver/src/components/Board/hooks/useGrid.ts

@@ -1,4 +1,5 @@
 /* eslint-disable max-lines, max-statements */
+import { PayloadAction } from '@reduxjs/toolkit';
 import { BLANK, EMPTY_CELL } from '@scrabble-solver/constants';
 import { Board, Cell } from '@scrabble-solver/types';
 import {
@@ -14,10 +15,9 @@ import {
 } from 'react';
 import { useDispatch } from 'react-redux';
 import { useLatest } from 'react-use';
-import { AnyAction } from 'redux';
 
 import { LOCALE_FEATURES } from 'i18n';
-import { createGridOf, createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from 'lib';
+import { createGridOf, createKeyboardNavigation, extractCharacters, extractInputValue } from 'lib';
 import { boardSlice, selectConfig, selectLocale, useTypedSelector } from 'state';
 import { Direction } from 'types';
 
@@ -85,7 +85,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
   const insertValue = useCallback(
     (position: Point, value: string) => {
       const characters = value ? extractCharacters(config, value).filter((character) => character !== BLANK) : [BLANK];
-      const actions: AnyAction[] = [];
+      const actions: PayloadAction<unknown>[] = [];
       let board = new Board({ rows: rows.map((row) => row.map((cell) => cell.clone())) });
       let { x, y } = position;
 
@@ -225,7 +225,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
       onArrowDown: (event) => {
         event.preventDefault();
 
-        if (isCtrl(event)) {
+        if (direction === 'horizontal') {
           onDirectionToggle();
         } else {
           changeActiveIndex(0, 1);
@@ -234,7 +234,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
       onArrowLeft: (event) => {
         event.preventDefault();
 
-        if (isCtrl(event)) {
+        if (direction === 'vertical') {
           onDirectionToggle();
         } else {
           changeActiveIndex(LOCALE_FEATURES[locale].direction === 'ltr' ? -1 : 1, 0);
@@ -243,7 +243,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
       onArrowRight: (event) => {
         event.preventDefault();
 
-        if (isCtrl(event)) {
+        if (direction === 'vertical') {
           onDirectionToggle();
         } else {
           changeActiveIndex(LOCALE_FEATURES[locale].direction === 'ltr' ? 1 : -1, 0);
@@ -252,7 +252,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
       onArrowUp: (event) => {
         event.preventDefault();
 
-        if (isCtrl(event)) {
+        if (direction === 'horizontal') {
           onDirectionToggle();
         } else {
           changeActiveIndex(0, -1);
@@ -289,22 +289,6 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
 
         const { x, y } = position;
         const character = event.key.toLowerCase();
-        const isTogglingBlank = isCtrl(event) && character === 'b';
-        const twoCharacterTile = config.getTwoCharacterTileByPrefix(character);
-
-        if (isTogglingBlank) {
-          event.preventDefault();
-          dispatch(boardSlice.actions.toggleCellIsBlank(position));
-          return;
-        }
-
-        if (isCtrl(event) && twoCharacterTile) {
-          event.preventDefault();
-          dispatch(boardSlice.actions.changeCellValue({ x, y, value: twoCharacterTile }));
-          moveFocus(1);
-          return;
-        }
-
         const cell = rows[y][x];
         const twoCharacterCandidate = cell.tile.character + character;
 
@@ -333,7 +317,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
         dispatch(boardSlice.actions.toggleCellIsBlank(position));
       },
     });
-  }, [changeActiveIndex, config, dispatch, locale, moveFocus, onDirectionToggle, rows]);
+  }, [changeActiveIndex, config, direction, dispatch, locale, moveFocus, onDirectionToggle, rows]);
 
   const onPaste = useCallback<ClipboardEventHandler>(
     (event) => {

package/packages/scrabble-solver/src/components/Dictionary/Dictionary.module.scss

@@ -1,4 +1,8 @@
+@import 'styles/mixins';
+
 .dictionary {
+  @include scrollbars;
+
   position: relative;
   max-height: var(--dictionary--height);
   height: var(--dictionary--height);

package/packages/scrabble-solver/src/components/DictionaryInput/DictionaryInput.module.scss

@@ -8,4 +8,5 @@
   @include text-input;
 
   border: none;
+  border-radius: inherit;
 }

package/packages/scrabble-solver/src/components/EmptyState/EmptyState.module.scss

@@ -8,7 +8,8 @@
 
 .tiles {
   display: inline-block;
+  max-width: 100%;
   margin-bottom: var(--spacing--m);
-  height: 40px;
+  height: 48px;
   overflow: visible;
 }

package/packages/scrabble-solver/src/components/EmptyState/EmptyState.tsx

@@ -41,8 +41,7 @@ const EmptyState: FunctionComponent<Props> = ({ children, className, variant })
   return (
     <div className={classNames(styles.emptyState, className)}>
       <PlainTiles className={styles.tiles} color={COLORS_PER_TYPE[variant]} content={content} />
-
-      <div className={styles.content}>{children}</div>
+      <div>{children}</div>
     </div>
   );
 };

package/packages/scrabble-solver/src/components/Loading/Loading.module.scss

@@ -30,6 +30,6 @@
 }
 
 .tiles {
-  width: 298px;
+  width: 100% * 2 / 3;
   height: 100%;
 }

package/packages/scrabble-solver/src/components/Logo/Logo.tsx

@@ -1,3 +1,8 @@
+/**
+ * This component is unused, but it serves as a blueprint for the Logo.svg.
+ * Logo.svg is what this component generates with all the text nodes transformed
+ * into paths (manually with Inkscape), and corner radius removed from tiles.
+ */
 import { CSSProperties, FunctionComponent } from 'react';
 
 import PlainTiles from '../PlainTiles';

package/packages/scrabble-solver/src/components/Modal/Modal.module.scss

@@ -112,6 +112,8 @@
 }
 
 .content {
+  @include scrollbars;
+
   position: relative;
   flex: 1;
   min-height: 0;