scrabble-solver 2.15.22 → 2.15.24

package/packages/scrabble-solver/src/components/Board/hooks/useBackgroundImage.tsx

@@ -1,18 +1,18 @@
 /* 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 } from 'app-layout';
-import { useMediaQueries } from 'hooks';
-import { LOCALE_FEATURES } from 'i18n';
-import { Star } from 'icons';
-import { getTileSizes } from 'lib';
-import { BORDER_COLOR_LIGHT, BORDER_RADIUS, BORDER_WIDTH, COLOR_BACKGROUND, COLOR_BONUS_START } from 'parameters';
-import { selectConfig, selectLocale, selectShowCoordinates, store, useTypedSelector } from 'state';
-import { type Point } from 'types';
+import { useAppLayout } from '@/app-layout';
+import { useMediaQueries } from '@/hooks';
+import { LOCALE_FEATURES } from '@/i18n';
+import { Star } from '@/icons';
+import { getTileSizes } from '@/lib';
+import { BORDER_COLOR_LIGHT, BORDER_RADIUS, BORDER_WIDTH, COLOR_BACKGROUND, COLOR_BONUS_START } from '@/parameters';
+import { selectConfig, selectLocale, selectShowCoordinates, store, useTypedSelector } from '@/state';
+import { type Point } from '@/types';
 
 import { getBonusColor } from '../lib';
 
@@ -33,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;
@@ -43,174 +46,234 @@ 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}
+                >
+                  ×2
+                </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}
+                >
+                  ×3
+                </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}
+                >
+                  ×4
+                </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,${encodeURIComponent(backgroundSvg)}`, [backgroundSvg]);
+
   return dataUrl;
 };

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

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

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

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

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

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

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

@@ -15,11 +15,11 @@ import {
 } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { useLatest } from 'hooks';
-import { LOCALE_FEATURES } from 'i18n';
-import { createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from 'lib';
-import { boardSlice, cellFiltersSlice, selectConfig, selectLocale, useTypedSelector } from 'state';
-import { type Direction, type Point } from 'types';
+import { useLatest } from '@/hooks';
+import { LOCALE_FEATURES } from '@/i18n';
+import { createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from '@/lib';
+import { boardSlice, cellFiltersSlice, selectConfig, selectLocale, useTypedSelector } from '@/state';
+import { type Direction, type Point } from '@/types';
 
 import { createGrid, getPositionInGrid } from '../lib';
 

package/packages/scrabble-solver/src/components/Board/lib.ts

@@ -1,8 +1,8 @@
 import { BONUS_WORD } from '@scrabble-solver/constants';
 import { type Bonus } from '@scrabble-solver/types';
 
-import { COLOR_BONUS_CHARACTER, COLOR_BONUS_CHARACTER_MULTIPLIER, COLOR_BONUS_WORD } from 'parameters';
-import { type Point } from 'types';
+import { COLOR_BONUS_CHARACTER, COLOR_BONUS_CHARACTER_MULTIPLIER, COLOR_BONUS_WORD } from '@/parameters';
+import { type Point } from '@/types';
 
 export const createGrid = <T>(width: number, height: number, getInitialValue: (x: number, y: number) => T): T[][] => {
   return Array.from({ length: height }).map((_row, y) => {

package/packages/scrabble-solver/src/components/Board/selectors.ts

@@ -1,7 +1,7 @@
 import { createSelector } from '@reduxjs/toolkit';
 
-import { findCell } from 'lib';
-import { selectBoard, selectResultCandidateCells } from 'state';
+import { findCell } from '@/lib';
+import { selectBoard, selectResultCandidateCells } from '@/state';
 
 export const selectRowsWithCandidate = createSelector([selectBoard, selectResultCandidateCells], (board, cells) => {
   return board.rows.map((row, y) => row.map((cell, x) => findCell(cells, x, y) || cell));

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

@@ -1,14 +1,14 @@
 import classNames from 'classnames';
 import { type FunctionComponent } from 'react';
 
-import { useAppLayout } from 'app-layout';
+import { useAppLayout } from '@/app-layout';
 import {
   selectDictionaryError,
   selectDictionaryIsLoading,
   selectDictionaryResults,
   useTranslate,
   useTypedSelector,
-} from 'state';
+} from '@/state';
 
 import { EmptyState } from '../EmptyState';
 import { Loading } from '../Loading';

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

@@ -2,8 +2,8 @@ import classNames from 'classnames';
 import { type ChangeEvent, type FunctionComponent, type SubmitEvent } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { LOCALE_FEATURES } from 'i18n';
-import { dictionarySlice, selectDictionary, selectLocale, useTranslate, useTypedSelector } from 'state';
+import { LOCALE_FEATURES } from '@/i18n';
+import { dictionarySlice, selectDictionary, selectLocale, useTranslate, useTypedSelector } from '@/state';
 
 import styles from './DictionaryInput.module.scss';
 

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

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
 import { type FunctionComponent, type ReactNode, useMemo } from 'react';
 
-import { LOCALE_FEATURES } from 'i18n';
-import { COLOR_BLUE, COLOR_GREEN, COLOR_RED, COLOR_YELLOW } from 'parameters';
-import { selectLocale, useTranslate, useTypedSelector } from 'state';
-import { type Translations } from 'types';
+import { LOCALE_FEATURES } from '@/i18n';
+import { COLOR_BLUE, COLOR_GREEN, COLOR_RED, COLOR_YELLOW } from '@/parameters';
+import { selectLocale, useTranslate, useTypedSelector } from '@/state';
+import { type Translations } from '@/types';
 
 import { PlainTiles } from '../PlainTiles';
 
@@ -30,12 +30,20 @@ const COLORS_PER_TYPE: Record<Props['variant'], string> = {
   warning: COLOR_YELLOW,
 };
 
+const graphemeSegmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
+
+const reverseGraphemes = (value: string): string => {
+  return Array.from(graphemeSegmenter.segment(value), (segment) => segment.segment)
+    .reverse()
+    .join('');
+};
+
 export const EmptyState: FunctionComponent<Props> = ({ children, className, variant }) => {
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const { direction } = LOCALE_FEATURES[locale];
   const title = translate(TITLE_KEY_PER_TYPE[variant]);
-  const message = direction === 'ltr' ? title : title.split('').reverse().join('');
+  const message = direction === 'ltr' ? title : reverseGraphemes(title);
   const content = useMemo(() => [message.toUpperCase().split(' ')], [message]);
 
   return (

package/packages/scrabble-solver/src/components/Keys/Arrows/Arrows.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { type FunctionComponent } from 'react';
 
-import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp } from 'icons';
+import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp } from '@/icons';
 
 import { Key } from '../../Key';
 

package/packages/scrabble-solver/src/components/Keys/index.tsx

@@ -1,7 +1,7 @@
 import { type FunctionComponent } from 'react';
 
-import { isMac } from 'lib';
-import { useTranslate } from 'state';
+import { isMac } from '@/lib';
+import { useTranslate } from '@/state';
 
 import { Key } from '../Key';
 

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

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import { type FunctionComponent, useMemo } from 'react';
 
-import { LOCALE_FEATURES } from 'i18n';
-import { selectLocale, useTranslate, useTypedSelector } from 'state';
+import { LOCALE_FEATURES } from '@/i18n';
+import { selectLocale, useTranslate, useTypedSelector } from '@/state';
 
 import { PlainTiles } from '../PlainTiles';
 

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

@@ -1,8 +1,8 @@
 import Image from 'next/image';
 import { forwardRef } from 'react';
 
-import { useAppLayout } from 'app-layout';
-import { LOGO_SRC } from 'parameters';
+import { useAppLayout } from '@/app-layout';
+import { LOGO_SRC } from '@/parameters';
 
 interface Props {
   className?: string;

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

@@ -2,9 +2,9 @@ import classNames from 'classnames';
 import { type FunctionComponent, type ReactNode, useCallback, useEffect, useState } from 'react';
 import ReactModal from 'react-modal';
 
-import { CrossSquareFill } from 'icons';
-import { TRANSITION_DURATION_LONG } from 'parameters';
-import { useTranslate } from 'state';
+import { CrossSquareFill } from '@/icons';
+import { TRANSITION_DURATION_LONG } from '@/parameters';
+import { useTranslate } from '@/state';
 
 import { IconButton } from '../IconButton';