@scrabble-solver/scrabble-solver 2.15.21 → 2.15.23

package/.next/trace-build

@@ -1 +1 @@
-[{"name":"run-typescript","duration":1730400,"timestamp":2793256903,"id":13,"parentId":1,"tags":{},"startTime":1775242438301,"traceId":"e97b27e6c0eb60ec"},{"name":"run-webpack","duration":5983835,"timestamp":2794989610,"id":15,"parentId":1,"tags":{},"startTime":1775242440034,"traceId":"e97b27e6c0eb60ec"},{"name":"static-check","duration":166818,"timestamp":2801042702,"id":2011,"parentId":1,"tags":{},"startTime":1775242446087,"traceId":"e97b27e6c0eb60ec"},{"name":"static-generation","duration":817182,"timestamp":2801217087,"id":2029,"parentId":1,"tags":{},"startTime":1775242446261,"traceId":"e97b27e6c0eb60ec"},{"name":"collect-build-traces","duration":3570908,"timestamp":2801209841,"id":2026,"parentId":1,"tags":{},"startTime":1775242446254,"traceId":"e97b27e6c0eb60ec"},{"name":"telemetry-flush","duration":20,"timestamp":2804781801,"id":2041,"parentId":1,"tags":{},"startTime":1775242449826,"traceId":"e97b27e6c0eb60ec"},{"name":"next-build","duration":11769581,"timestamp":2793012244,"id":1,"tags":{"buildMode":"default","version":"16.2.2","bundler":"webpack","has-custom-webpack-config":"true","use-build-worker":"false"},"startTime":1775242438057,"traceId":"e97b27e6c0eb60ec"}]
+[{"name":"run-typescript","duration":1926354,"timestamp":430470878,"id":13,"parentId":1,"tags":{},"startTime":1775678234571,"traceId":"dfda121f630d27e7"},{"name":"run-webpack","duration":6504061,"timestamp":432399576,"id":15,"parentId":1,"tags":{},"startTime":1775678236500,"traceId":"dfda121f630d27e7"},{"name":"static-check","duration":195373,"timestamp":438980589,"id":2016,"parentId":1,"tags":{},"startTime":1775678243081,"traceId":"dfda121f630d27e7"},{"name":"static-generation","duration":873316,"timestamp":439183871,"id":2034,"parentId":1,"tags":{},"startTime":1775678243284,"traceId":"dfda121f630d27e7"},{"name":"collect-build-traces","duration":3881714,"timestamp":439176421,"id":2031,"parentId":1,"tags":{},"startTime":1775678243277,"traceId":"dfda121f630d27e7"},{"name":"telemetry-flush","duration":20,"timestamp":443059296,"id":2046,"parentId":1,"tags":{},"startTime":1775678247160,"traceId":"dfda121f630d27e7"},{"name":"next-build","duration":12832915,"timestamp":430226405,"id":1,"tags":{"buildMode":"default","version":"16.2.3","bundler":"webpack","has-custom-webpack-config":"true","use-build-worker":"false"},"startTime":1775678234327,"traceId":"dfda121f630d27e7"}]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.15.21",
+  "version": "2.15.23",
   "description": "Scrabble Solver 2 - App",
   "repository": {
     "type": "git",
@@ -25,33 +25,33 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.27.16",
+    "@floating-ui/react": "^0.27.19",
     "@kamilmielnik/trie": "^4.0.0",
-    "@reduxjs/toolkit": "^2.11.1",
-    "@scrabble-solver/configs": "^2.15.21",
-    "@scrabble-solver/constants": "^2.15.21",
-    "@scrabble-solver/dictionaries": "^2.15.21",
-    "@scrabble-solver/logger": "^2.15.21",
-    "@scrabble-solver/solver": "^2.15.21",
-    "@scrabble-solver/types": "^2.15.21",
-    "@scrabble-solver/word-definitions": "^2.15.21",
+    "@reduxjs/toolkit": "^2.11.2",
+    "@scrabble-solver/configs": "^2.15.23",
+    "@scrabble-solver/constants": "^2.15.23",
+    "@scrabble-solver/dictionaries": "^2.15.23",
+    "@scrabble-solver/logger": "^2.15.23",
+    "@scrabble-solver/solver": "^2.15.23",
+    "@scrabble-solver/types": "^2.15.23",
+    "@scrabble-solver/word-definitions": "^2.15.23",
     "classnames": "^2.5.1",
     "env-cmd": "^11.0.0",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
-    "next": "^16.0.10",
+    "next": "^16.2.3",
     "normalize.css": "^8.0.1",
-    "react": "^19.2.3",
+    "react": "^19.2.5",
     "react-cool-onclickoutside": "^1.7.0",
-    "react-dom": "^19.2.3",
+    "react-dom": "^19.2.5",
     "react-highlight-words": "^0.21.0",
     "react-modal": "^3.16.3",
     "react-redux": "^9.2.0",
-    "react-window": "^2.2.3",
+    "react-window": "^2.2.7",
     "redux-saga": "^1.4.2",
     "store2": "^2.14.4",
-    "transliteration": "^2.3.5",
-    "use-debounce": "^10.0.6",
+    "transliteration": "^2.6.1",
+    "use-debounce": "^10.1.1",
     "workbox-expiration": "^7.4.0",
     "workbox-precaching": "^7.4.0",
     "workbox-routing": "^7.4.0",
@@ -60,14 +60,14 @@
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
-    "@types/react": "^19.2.7",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@types/react-highlight-words": "^0.20.0",
+    "@types/react-highlight-words": "^0.20.1",
     "@types/react-modal": "^3.16.3",
     "@types/react-portal": "^4.0.7",
     "@types/react-redux": "^7.1.34",
     "@types/redux": "^3.6.31",
-    "sass": "^1.96.0"
+    "sass": "^1.99.0"
   },
-  "gitHead": "0bac5e768652a92a24dcfdb650aa43d02559f687"
+  "gitHead": "1414493526a57ebb4fd93fdb006badcc9d6afb6a"
 }

package/src/app-layout/AppLayoutContext.tsx

@@ -0,0 +1,25 @@
+import { createContext, type FunctionComponent, type ReactNode, useContext } from 'react';
+
+import { type AppLayout, useAppLayoutValue } from './useAppLayoutValue';
+
+const AppLayoutContext = createContext<AppLayout | null>(null);
+
+export const useAppLayout = () => {
+  const context = useContext(AppLayoutContext);
+
+  if (context === null) {
+    throw new Error('useAppLayout must be used within an <AppLayoutProvider />');
+  }
+
+  return context;
+};
+
+interface Props {
+  children: ReactNode;
+}
+
+export const AppLayoutProvider: FunctionComponent<Props> = ({ children }) => {
+  const appLayout = useAppLayoutValue();
+
+  return <AppLayoutContext.Provider value={appLayout}>{children}</AppLayoutContext.Provider>;
+};

package/src/app-layout/index.ts

@@ -0,0 +1 @@
+export { AppLayoutProvider, useAppLayout } from './AppLayoutContext';

package/src/{hooks/useAppLayout.ts → app-layout/useAppLayoutValue.ts}

@@ -1,5 +1,6 @@
 /* eslint-disable max-statements */
 
+import { useColumns, useIsTouchDevice, useMediaQueries, useViewportSize } from 'hooks';
 import {
   BOARD_TILE_SIZE_MAX,
   BORDER_WIDTH,
@@ -22,12 +23,7 @@ import {
 import { selectConfig, selectShowCoordinates, useTypedSelector } from 'state';
 import { type ResultColumnId } from 'types';
 
-import { useColumns } from './useColumns';
-import { useIsTouchDevice } from './useIsTouchDevice';
-import { useMediaQueries } from './useMediaQueries';
-import { useViewportSize } from './useViewportSize';
-
-export const useAppLayout = () => {
+export const useAppLayoutValue = () => {
   const { viewportHeight, viewportWidth } = useViewportSize();
   const config = useTypedSelector(selectConfig);
   const showCoordinates = useTypedSelector(selectShowCoordinates);
@@ -112,3 +108,5 @@ export const useAppLayout = () => {
     tileSize,
   };
 };
+
+export type AppLayout = ReturnType<typeof useAppLayoutValue>;

package/src/components/Board/Board.tsx

@@ -7,7 +7,7 @@ import { type CSSProperties, type FocusEventHandler, type FunctionComponent, use
 import useOnclickOutside from 'react-cool-onclickoutside';
 import { useDispatch } from 'react-redux';
 
-import { useAppLayout } from 'hooks';
+import { useAppLayout } from 'app-layout';
 import { LOCALE_FEATURES } from 'i18n';
 import { TRANSITION } from 'parameters';
 import {

package/src/components/Board/components/InputPrompt/InputPrompt.tsx

@@ -1,5 +1,12 @@
 import classNames from 'classnames';
-import { type FormEventHandler, forwardRef, type HTMLProps, type MouseEventHandler, useEffect, useState } from 'react';
+import {
+  forwardRef,
+  type HTMLProps,
+  type MouseEventHandler,
+  type SubmitEventHandler,
+  useEffect,
+  useState,
+} from 'react';
 
 import { Check } from 'icons';
 import { useTranslate } from 'state';
@@ -27,7 +34,7 @@ export const InputPrompt = forwardRef<HTMLFormElement, Props>(
     // On iOS it helps with losing focus too early which makes Actions disappear
     const handleMouseDown: MouseEventHandler = (event) => event.preventDefault();
 
-    const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
+    const handleSubmit: SubmitEventHandler<HTMLFormElement> = (event) => {
       event.preventDefault();
       event.stopPropagation();
       onSubmit(input);

package/src/components/Board/hooks/useBackgroundImage.tsx

@@ -1,11 +1,12 @@
 /* eslint-disable max-lines, max-statements */
 
 import { BONUS_CHARACTER, BONUS_WORD } from '@scrabble-solver/constants';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { renderToString } from 'react-dom/server';
 import { Provider } from 'react-redux';
 
-import { useAppLayout, useMediaQueries } from 'hooks';
+import { useAppLayout } from 'app-layout';
+import { useMediaQueries } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
 import { Star } from 'icons';
 import { getTileSizes } from 'lib';
@@ -32,7 +33,10 @@ export const useBackgroundImage = () => {
   const { isLessThanXs } = useMediaQueries();
   const borderRadius = isLessThanXs ? BORDER_RADIUS_XS : BORDER_RADIUS;
   const config = useTypedSelector(selectConfig);
-  const center = { x: Math.floor(config.boardWidth / 2), y: Math.floor(config.boardHeight / 2) };
+  const center = useMemo(
+    () => ({ x: Math.floor(config.boardWidth / 2), y: Math.floor(config.boardHeight / 2) }),
+    [config.boardHeight, config.boardWidth],
+  );
   const viewBoxHeight = boardHeight;
   const viewBoxWidth = boardWidth;
   const bonusSize = cellSize * 0.8;
@@ -42,174 +46,233 @@ export const useBackgroundImage = () => {
   const { tileFontSize } = getTileSizes(cellSize);
   const fontSize = tileFontSize * 0.6;
   const fontOffset = cellSize / 2;
-  const characterBonuses = config.bonuses.filter((bonus) => bonus.type === BONUS_CHARACTER);
-  const word2Bonuses = config.bonuses.filter((bonus) => bonus.type === BONUS_WORD && bonus.multiplier === 2);
-  const word3Bonuses = config.bonuses.filter((bonus) => bonus.type === BONUS_WORD && bonus.multiplier === 3);
-  const word4Bonuses = config.bonuses.filter((bonus) => bonus.type === BONUS_WORD && bonus.multiplier === 4);
-
-  const getX = (point: Point): number =>
-    (direction === 'ltr' ? coordinatesSize : 0) + point.x * (cellSize + BORDER_WIDTH);
-
-  const getY = (point: Point): number => coordinatesSize + point.y * (cellSize + BORDER_WIDTH);
-
-  const backgroundSvg = renderToString(
-    <Provider store={store}>
-      <svg
-        height={viewBoxHeight}
-        viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}
-        width={viewBoxWidth}
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <defs>
-          <symbol id={HORIZONTAL_LINE}>
-            <rect fill={BORDER_COLOR_LIGHT} height={GRID_LINE_SIZE} width={viewBoxWidth} />
-          </symbol>
-
-          <symbol id={VERTICAL_LINE}>
-            <rect fill={BORDER_COLOR_LIGHT} height={viewBoxHeight} width={GRID_LINE_SIZE} />
-          </symbol>
-
-          <symbol id={BONUS}>
-            <rect height={bonusSize} rx={borderRadius} width={bonusSize} x={bonusOffset} y={bonusOffset} />
-          </symbol>
-
-          <symbol id={BONUS_WORD_2}>
-            <rect height={bonusSize} rx={borderRadius} width={bonusSize} x={bonusOffset} y={bonusOffset} />
-
-            <text
-              dominantBaseline="central"
-              fill="white"
-              fontFamily="system-ui, sans-serif"
-              fontSize={fontSize}
-              fontWeight="bold"
-              textAnchor="middle"
-              x={fontOffset}
-              y={fontOffset}
-            >
-              x2
-            </text>
-          </symbol>
-
-          <symbol id={BONUS_WORD_3}>
-            <rect height={bonusSize} rx={borderRadius} width={bonusSize} x={bonusOffset} y={bonusOffset} />
-
-            <text
-              dominantBaseline="central"
-              fill="white"
-              fontFamily="system-ui, sans-serif"
-              fontSize={fontSize}
-              fontWeight="bold"
-              textAnchor="middle"
-              x={fontOffset}
-              y={fontOffset}
-            >
-              x3
-            </text>
-          </symbol>
-
-          <symbol id={BONUS_WORD_4}>
-            <rect height={bonusSize} rx={borderRadius} width={bonusSize} x={bonusOffset} y={bonusOffset} />
-
-            <text
-              dominantBaseline="central"
-              fill="white"
-              fontFamily="system-ui, sans-serif"
-              fontSize={fontSize}
-              fontWeight="bold"
-              textAnchor="middle"
-              x={fontOffset}
-              y={fontOffset}
-            >
-              x4
-            </text>
-          </symbol>
-        </defs>
-
-        {showCoordinates === 'hidden' && (
-          <rect fill="white" height={viewBoxHeight} rx={borderRadius} width={viewBoxWidth} x="0" y="0" />
-        )}
-
-        {showCoordinates !== 'hidden' && (
-          <>
-            <rect fill={COLOR_BACKGROUND} height={viewBoxHeight} rx={borderRadius} width={viewBoxWidth} x="0" y="0" />
-            <rect
-              fill="white"
-              height={viewBoxHeight - coordinatesSize}
-              width={viewBoxWidth - coordinatesSize}
-              x={direction === 'ltr' ? coordinatesSize : 0}
-              y={coordinatesSize}
-            />
+  const characterBonuses = useMemo(
+    () => config.bonuses.filter((bonus) => bonus.type === BONUS_CHARACTER),
+    [config.bonuses],
+  );
+  const word2Bonuses = useMemo(
+    () => config.bonuses.filter((bonus) => bonus.type === BONUS_WORD && bonus.multiplier === 2),
+    [config.bonuses],
+  );
+  const word3Bonuses = useMemo(
+    () => config.bonuses.filter((bonus) => bonus.type === BONUS_WORD && bonus.multiplier === 3),
+    [config.bonuses],
+  );
+  const word4Bonuses = useMemo(
+    () => config.bonuses.filter((bonus) => bonus.type === BONUS_WORD && bonus.multiplier === 4),
+    [config.bonuses],
+  );
+
+  const getX = useCallback(
+    (point: Point): number => (direction === 'ltr' ? coordinatesSize : 0) + point.x * (cellSize + BORDER_WIDTH),
+    [coordinatesSize, cellSize, direction],
+  );
+
+  const getY = useCallback(
+    (point: Point): number => coordinatesSize + point.y * (cellSize + BORDER_WIDTH),
+    [coordinatesSize, cellSize],
+  );
+
+  const backgroundSvg = useMemo(
+    () =>
+      renderToString(
+        <Provider store={store}>
+          <svg
+            height={viewBoxHeight}
+            viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}
+            width={viewBoxWidth}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <defs>
+              <symbol id={HORIZONTAL_LINE}>
+                <rect fill={BORDER_COLOR_LIGHT} height={GRID_LINE_SIZE} width={viewBoxWidth} />
+              </symbol>
+
+              <symbol id={VERTICAL_LINE}>
+                <rect fill={BORDER_COLOR_LIGHT} height={viewBoxHeight} width={GRID_LINE_SIZE} />
+              </symbol>
+
+              <symbol id={BONUS}>
+                <rect height={bonusSize} rx={borderRadius} width={bonusSize} x={bonusOffset} y={bonusOffset} />
+              </symbol>
+
+              <symbol id={BONUS_WORD_2}>
+                <rect height={bonusSize} rx={borderRadius} width={bonusSize} x={bonusOffset} y={bonusOffset} />
+
+                <text
+                  dominantBaseline="central"
+                  fill="white"
+                  fontFamily="system-ui, sans-serif"
+                  fontSize={fontSize}
+                  fontWeight="bold"
+                  textAnchor="middle"
+                  x={fontOffset}
+                  y={fontOffset}
+                >
+                  x2
+                </text>
+              </symbol>
+
+              <symbol id={BONUS_WORD_3}>
+                <rect height={bonusSize} rx={borderRadius} width={bonusSize} x={bonusOffset} y={bonusOffset} />
+
+                <text
+                  dominantBaseline="central"
+                  fill="white"
+                  fontFamily="system-ui, sans-serif"
+                  fontSize={fontSize}
+                  fontWeight="bold"
+                  textAnchor="middle"
+                  x={fontOffset}
+                  y={fontOffset}
+                >
+                  x3
+                </text>
+              </symbol>
+
+              <symbol id={BONUS_WORD_4}>
+                <rect height={bonusSize} rx={borderRadius} width={bonusSize} x={bonusOffset} y={bonusOffset} />
+
+                <text
+                  dominantBaseline="central"
+                  fill="white"
+                  fontFamily="system-ui, sans-serif"
+                  fontSize={fontSize}
+                  fontWeight="bold"
+                  textAnchor="middle"
+                  x={fontOffset}
+                  y={fontOffset}
+                >
+                  x4
+                </text>
+              </symbol>
+            </defs>
+
+            {showCoordinates === 'hidden' && (
+              <rect fill="white" height={viewBoxHeight} rx={borderRadius} width={viewBoxWidth} x="0" y="0" />
+            )}
+
+            {showCoordinates !== 'hidden' && (
+              <>
+                <rect
+                  fill={COLOR_BACKGROUND}
+                  height={viewBoxHeight}
+                  rx={borderRadius}
+                  width={viewBoxWidth}
+                  x="0"
+                  y="0"
+                />
+                <rect
+                  fill="white"
+                  height={viewBoxHeight - coordinatesSize}
+                  width={viewBoxWidth - coordinatesSize}
+                  x={direction === 'ltr' ? coordinatesSize : 0}
+                  y={coordinatesSize}
+                />
+
+                <rect
+                  fill={COLOR_BACKGROUND}
+                  height={coordinatesSize}
+                  rx={borderRadius}
+                  width={viewBoxWidth}
+                  x="0"
+                  y="0"
+                />
+                <rect
+                  fill={COLOR_BACKGROUND}
+                  height={viewBoxHeight}
+                  rx={borderRadius}
+                  x={direction === 'ltr' ? 0 : viewBoxWidth - coordinatesSize}
+                  y="0"
+                  width={coordinatesSize}
+                />
+                <use href={`#${HORIZONTAL_LINE}`} y={coordinatesSize - BORDER_WIDTH} />
+                <use
+                  href={`#${VERTICAL_LINE}`}
+                  x={
+                    direction === 'ltr' ? coordinatesSize - BORDER_WIDTH : viewBoxWidth - coordinatesSize - BORDER_WIDTH
+                  }
+                />
+              </>
+            )}
+
+            {Array.from({ length: config.boardHeight - 1 }).map((_value, index) => (
+              <use
+                key={index}
+                href={`#${HORIZONTAL_LINE}`}
+                y={coordinatesSize + (index + 1) * (cellSize + BORDER_WIDTH) - BORDER_WIDTH}
+              />
+            ))}
+
+            {Array.from({ length: config.boardWidth - 1 }).map((_value, index) => (
+              <use
+                key={index}
+                href={`#${VERTICAL_LINE}`}
+                x={(direction === 'ltr' ? coordinatesSize : 0) + (index + 1) * (cellSize + BORDER_WIDTH) - BORDER_WIDTH}
+              />
+            ))}
+
+            {characterBonuses.map((bonus, index) => (
+              <use fill={getBonusColor(bonus)} key={index} href={`#${BONUS}`} x={getX(bonus)} y={getY(bonus)} />
+            ))}
+
+            {word2Bonuses.map((bonus, index) => (
+              <use fill={getBonusColor(bonus)} key={index} href={`#${BONUS_WORD_2}`} x={getX(bonus)} y={getY(bonus)} />
+            ))}
+
+            {word3Bonuses.map((bonus, index) => (
+              <use fill={getBonusColor(bonus)} key={index} href={`#${BONUS_WORD_3}`} x={getX(bonus)} y={getY(bonus)} />
+            ))}
+
+            {word4Bonuses.map((bonus, index) => (
+              <use fill={getBonusColor(bonus)} key={index} href={`#${BONUS_WORD_4}`} x={getX(bonus)} y={getY(bonus)} />
+            ))}
 
-            <rect fill={COLOR_BACKGROUND} height={coordinatesSize} rx={borderRadius} width={viewBoxWidth} x="0" y="0" />
             <rect
-              fill={COLOR_BACKGROUND}
-              height={viewBoxHeight}
+              fill={COLOR_BONUS_START}
+              height={bonusSize}
               rx={borderRadius}
-              x={direction === 'ltr' ? 0 : viewBoxWidth - coordinatesSize}
-              y="0"
-              width={coordinatesSize}
+              width={bonusSize}
+              x={getX(center) + bonusOffset}
+              y={getY(center) + bonusOffset}
             />
-            <use href={`#${HORIZONTAL_LINE}`} y={coordinatesSize - BORDER_WIDTH} />
-            <use
-              href={`#${VERTICAL_LINE}`}
-              x={direction === 'ltr' ? coordinatesSize - BORDER_WIDTH : viewBoxWidth - coordinatesSize - BORDER_WIDTH}
+
+            <Star
+              color="white"
+              height={iconSize}
+              width={iconSize}
+              x={getX(center) + iconOffset}
+              y={getY(center) + iconOffset}
             />
-          </>
-        )}
-
-        {Array.from({ length: config.boardHeight - 1 }).map((_value, index) => (
-          <use
-            key={index}
-            href={`#${HORIZONTAL_LINE}`}
-            y={coordinatesSize + (index + 1) * (cellSize + BORDER_WIDTH) - BORDER_WIDTH}
-          />
-        ))}
-
-        {Array.from({ length: config.boardWidth - 1 }).map((_value, index) => (
-          <use
-            key={index}
-            href={`#${VERTICAL_LINE}`}
-            x={(direction === 'ltr' ? coordinatesSize : 0) + (index + 1) * (cellSize + BORDER_WIDTH) - BORDER_WIDTH}
-          />
-        ))}
-
-        {characterBonuses.map((bonus, index) => (
-          <use fill={getBonusColor(bonus)} key={index} href={`#${BONUS}`} x={getX(bonus)} y={getY(bonus)} />
-        ))}
-
-        {word2Bonuses.map((bonus, index) => (
-          <use fill={getBonusColor(bonus)} key={index} href={`#${BONUS_WORD_2}`} x={getX(bonus)} y={getY(bonus)} />
-        ))}
-
-        {word3Bonuses.map((bonus, index) => (
-          <use fill={getBonusColor(bonus)} key={index} href={`#${BONUS_WORD_3}`} x={getX(bonus)} y={getY(bonus)} />
-        ))}
-
-        {word4Bonuses.map((bonus, index) => (
-          <use fill={getBonusColor(bonus)} key={index} href={`#${BONUS_WORD_4}`} x={getX(bonus)} y={getY(bonus)} />
-        ))}
-
-        <rect
-          fill={COLOR_BONUS_START}
-          height={bonusSize}
-          rx={borderRadius}
-          width={bonusSize}
-          x={getX(center) + bonusOffset}
-          y={getY(center) + bonusOffset}
-        />
-
-        <Star
-          color="white"
-          height={iconSize}
-          width={iconSize}
-          x={getX(center) + iconOffset}
-          y={getY(center) + iconOffset}
-        />
-      </svg>
-    </Provider>,
+          </svg>
+        </Provider>,
+      ),
+    [
+      bonusOffset,
+      bonusSize,
+      borderRadius,
+      cellSize,
+      center,
+      characterBonuses,
+      config.boardHeight,
+      config.boardWidth,
+      coordinatesSize,
+      direction,
+      fontOffset,
+      fontSize,
+      getX,
+      getY,
+      iconOffset,
+      iconSize,
+      showCoordinates,
+      viewBoxHeight,
+      viewBoxWidth,
+      word2Bonuses,
+      word3Bonuses,
+      word4Bonuses,
+    ],
   );
 
-  const encodedSvg = useMemo(() => globalThis.btoa(backgroundSvg), [backgroundSvg]);
-  const dataUrl = `data:image/svg+xml;base64,${encodedSvg}`;
+  const dataUrl = useMemo(() => `data:image/svg+xml;base64,${globalThis.btoa(backgroundSvg)}`, [backgroundSvg]);
   return dataUrl;
 };

package/src/components/Board/hooks/useBoardStyle.ts

@@ -1,6 +1,6 @@
 import { type CSSProperties, useMemo } from 'react';
 
-import { useAppLayout } from 'hooks';
+import { useAppLayout } from 'app-layout';
 import { getTileSizes } from 'lib';
 import { BORDER_WIDTH } from 'parameters';
 import { selectConfig, selectShowCoordinates, useTypedSelector } from 'state';

package/src/components/Board/hooks/useFloatingActions.ts

@@ -1,6 +1,6 @@
 import { autoUpdate, offset, shift, useFloating } from '@floating-ui/react';
 
-import { useAppLayout } from 'hooks';
+import { useAppLayout } from 'app-layout';
 import { BOARD_CELL_ACTIONS_OFFSET } from 'parameters';
 
 export const useFloatingActions = () => {

package/src/components/Dictionary/Dictionary.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { type FunctionComponent } from 'react';
 
-import { useAppLayout } from 'hooks';
+import { useAppLayout } from 'app-layout';
 import {
   selectDictionaryError,
   selectDictionaryIsLoading,

package/src/components/DictionaryInput/DictionaryInput.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { type ChangeEvent, type FormEvent, type FunctionComponent } from 'react';
+import { type ChangeEvent, type FunctionComponent, type SubmitEvent } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { LOCALE_FEATURES } from 'i18n';
@@ -22,7 +22,7 @@ export const DictionaryInput: FunctionComponent<Props> = ({ className }) => {
     dispatch(dictionarySlice.actions.changeInput(event.target.value));
   };
 
-  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (event: SubmitEvent<HTMLFormElement>) => {
     event.preventDefault();
     dispatch(dictionarySlice.actions.submit());
   };