scrabble-solver 2.16.7 → 2.18.0

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

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import { type ButtonHTMLAttributes, type FunctionComponent } from 'react';
 
-import { useIsTouchDevice } from '@/hooks';
-import { ArrowDown } from '@/icons';
+import { useIsTouchDevice } from '@/hooks/useIsTouchDevice';
+import ArrowDown from '@/icons/ArrowDown.svg';
 import { useTranslate } from '@/state';
 import { type Direction } from '@/types';
 

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

@@ -0,0 +1,175 @@
+import { BONUS_WORD } from '@scrabble-solver/constants';
+import { type Bonus, type Config, type TextDirection } from '@scrabble-solver/types';
+
+import { BORDER_COLOR_LIGHT, BORDER_WIDTH, COLOR_BACKGROUND, COLOR_BONUS_START } from '@/parameters';
+import { type Point } from '@/types';
+
+import { getBonusColor } from './lib';
+
+interface BoardBackgroundOptions {
+  config: Config;
+  direction: TextDirection;
+}
+
+interface Frame {
+  width: number;
+  height: number;
+  direction: TextDirection;
+}
+
+interface BonusesOptions {
+  config: Config;
+  getX: (point: Point) => number;
+  getY: (point: Point) => number;
+}
+
+const CELL_SIZE = 80;
+const COORDINATES_SIZE = CELL_SIZE / 2;
+const BORDER_RADIUS = CELL_SIZE * 0.1;
+const BONUS_SIZE = CELL_SIZE * 0.8;
+const BONUS_OFFSET = CELL_SIZE * 0.1;
+const ICON_SIZE = CELL_SIZE * 0.4;
+const ICON_OFFSET = (CELL_SIZE - ICON_SIZE) / 2;
+const FONT_SIZE = CELL_SIZE * 0.6 * 0.6;
+const FONT_OFFSET = CELL_SIZE / 2;
+const GRID_LINE_SIZE = 1;
+
+const BONUS_SYMBOL_ID = 'b';
+const BONUS_X2_SYMBOL_ID = 'b2';
+const BONUS_X3_SYMBOL_ID = 'b3';
+const BONUS_X4_SYMBOL_ID = 'b4';
+
+// https://icons.getbootstrap.com/icons/star-fill/
+const STAR_PATH =
+  'M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z';
+
+const cache = new WeakMap<Config, Map<TextDirection, string>>();
+
+export function getBoardBackground({ config, direction }: BoardBackgroundOptions): string {
+  const cached = cache.get(config)?.get(direction);
+
+  if (cached) {
+    return cached;
+  }
+
+  const dataUrl = `data:image/svg+xml,${encodeURIComponent(buildSvg({ config, direction }))}`;
+  const byDirection = cache.get(config) ?? new Map<TextDirection, string>();
+  byDirection.set(direction, dataUrl);
+  cache.set(config, byDirection);
+
+  return dataUrl;
+}
+
+function buildSvg({ config, direction }: BoardBackgroundOptions): string {
+  const width = COORDINATES_SIZE + (CELL_SIZE + BORDER_WIDTH) * config.boardWidth - BORDER_WIDTH;
+  const height = COORDINATES_SIZE + (CELL_SIZE + BORDER_WIDTH) * config.boardHeight - BORDER_WIDTH;
+  const getX = (point: Point) => (direction === 'ltr' ? COORDINATES_SIZE : 0) + point.x * (CELL_SIZE + BORDER_WIDTH);
+  const getY = (point: Point) => COORDINATES_SIZE + point.y * (CELL_SIZE + BORDER_WIDTH);
+  const center = { x: Math.floor(config.boardWidth / 2), y: Math.floor(config.boardHeight / 2) };
+
+  const frame: Frame = { direction, height, width };
+
+  return [
+    `<svg height="${height}" viewBox="0 0 ${width} ${height}" width="${width}" xmlns="http://www.w3.org/2000/svg">`,
+    buildDefs(),
+    buildBackground(frame),
+    buildGridLines(config, frame),
+    buildBonuses({ config, getX, getY }),
+    buildStartCell(getX(center), getY(center)),
+    '</svg>',
+  ].join('');
+}
+
+function buildDefs(): string {
+  const bonusRect = `<rect height="${BONUS_SIZE}" rx="${BORDER_RADIUS}" width="${BONUS_SIZE}" x="${BONUS_OFFSET}" y="${BONUS_OFFSET}"/>`;
+
+  return [
+    '<defs>',
+    `<symbol id="${BONUS_SYMBOL_ID}">${bonusRect}</symbol>`,
+    `<symbol id="${BONUS_X2_SYMBOL_ID}">${bonusRect}${multiplierText(2)}</symbol>`,
+    `<symbol id="${BONUS_X3_SYMBOL_ID}">${bonusRect}${multiplierText(3)}</symbol>`,
+    `<symbol id="${BONUS_X4_SYMBOL_ID}">${bonusRect}${multiplierText(4)}</symbol>`,
+    '</defs>',
+  ].join('');
+}
+
+function multiplierText(multiplier: number): string {
+  return `<text dominant-baseline="central" fill="white" font-family="system-ui, sans-serif" font-size="${FONT_SIZE}" font-weight="bold" text-anchor="middle" x="${FONT_OFFSET}" y="${FONT_OFFSET}">×${multiplier}</text>`;
+}
+
+function buildBackground({ direction, height, width }: Frame): string {
+  const cellsX = direction === 'ltr' ? COORDINATES_SIZE : 0;
+  const coordinatesColumnX = direction === 'ltr' ? 0 : width - COORDINATES_SIZE + BORDER_WIDTH;
+
+  return [
+    `<rect fill="${COLOR_BACKGROUND}" height="${height}" rx="${BORDER_RADIUS}" width="${width}" x="0" y="0"/>`,
+    `<rect fill="white" height="${height - COORDINATES_SIZE}" width="${width - COORDINATES_SIZE}" x="${cellsX}" y="${COORDINATES_SIZE}"/>`,
+    `<rect fill="${COLOR_BACKGROUND}" height="${COORDINATES_SIZE}" rx="${BORDER_RADIUS}" width="${width}" x="0" y="0"/>`,
+    `<rect fill="${COLOR_BACKGROUND}" height="${height}" rx="${BORDER_RADIUS}" width="${COORDINATES_SIZE}" x="${coordinatesColumnX}" y="0"/>`,
+  ].join('');
+}
+
+function buildGridLines(config: Config, { direction, height, width }: Frame): string {
+  const lines: string[] = [];
+
+  lines.push(horizontalLine(COORDINATES_SIZE - BORDER_WIDTH / 2, width));
+  lines.push(
+    verticalLine(
+      direction === 'ltr' ? COORDINATES_SIZE - BORDER_WIDTH / 2 : width - COORDINATES_SIZE + BORDER_WIDTH / 2,
+      height,
+    ),
+  );
+
+  for (let index = 1; index < config.boardHeight; ++index) {
+    lines.push(horizontalLine(COORDINATES_SIZE + index * (CELL_SIZE + BORDER_WIDTH) - BORDER_WIDTH / 2, width));
+  }
+
+  const cellsX = direction === 'ltr' ? COORDINATES_SIZE : 0;
+
+  for (let index = 1; index < config.boardWidth; ++index) {
+    lines.push(verticalLine(cellsX + index * (CELL_SIZE + BORDER_WIDTH) - BORDER_WIDTH / 2, height));
+  }
+
+  return lines.join('');
+}
+
+function horizontalLine(y: number, width: number): string {
+  return `<line stroke="${BORDER_COLOR_LIGHT}" stroke-width="${GRID_LINE_SIZE}" vector-effect="non-scaling-stroke" x1="0" x2="${width}" y1="${y}" y2="${y}"/>`;
+}
+
+function verticalLine(x: number, height: number): string {
+  return `<line stroke="${BORDER_COLOR_LIGHT}" stroke-width="${GRID_LINE_SIZE}" vector-effect="non-scaling-stroke" x1="${x}" x2="${x}" y1="0" y2="${height}"/>`;
+}
+
+function buildBonuses({ config, getX, getY }: BonusesOptions): string {
+  return config.bonuses
+    .map(
+      (bonus) =>
+        `<use fill="${getBonusColor(bonus)}" href="#${getSymbolId(bonus)}" x="${getX(bonus)}" y="${getY(bonus)}"/>`,
+    )
+    .join('');
+}
+
+function getSymbolId(bonus: Bonus): string {
+  if (bonus.type !== BONUS_WORD) {
+    return BONUS_SYMBOL_ID;
+  }
+
+  switch (bonus.multiplier) {
+    case 2:
+      return BONUS_X2_SYMBOL_ID;
+    case 3:
+      return BONUS_X3_SYMBOL_ID;
+    case 4:
+      return BONUS_X4_SYMBOL_ID;
+    default:
+      return BONUS_SYMBOL_ID;
+  }
+}
+
+function buildStartCell(x: number, y: number): string {
+  return [
+    `<rect fill="${COLOR_BONUS_START}" height="${BONUS_SIZE}" rx="${BORDER_RADIUS}" width="${BONUS_SIZE}" x="${x + BONUS_OFFSET}" y="${y + BONUS_OFFSET}"/>`,
+    `<svg height="${ICON_SIZE}" viewBox="0 0 16 16" width="${ICON_SIZE}" x="${x + ICON_OFFSET}" y="${y + ICON_OFFSET}"><path d="${STAR_PATH}" fill="white"/></svg>`,
+  ].join('');
+}

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

@@ -1,4 +1,3 @@
-export { useBackgroundImage } from './useBackgroundImage';
 export { useBoardStyle } from './useBoardStyle';
 export { useFloatingActions } from './useFloatingActions';
 export { useFloatingFocus } from './useFloatingFocus';

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

@@ -1,33 +1,23 @@
 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 { LOCALE_FEATURES } from '@/i18n/constants';
+import { selectConfig, selectLocale, useTypedSelector } from '@/state';
 
-import { useBackgroundImage } from './useBackgroundImage';
+import { getBoardBackground } from '../getBoardBackground';
 
+/**
+ * Everything here is derived from Redux state only, so the style on the server matches the client
+ */
 export const useBoardStyle = () => {
   const config = useTypedSelector(selectConfig);
-  const { cellSize } = useAppLayout();
-  const { tileFontSize } = getTileSizes(cellSize);
-  const showCoordinates = useTypedSelector(selectShowCoordinates);
-  const backgroundImage = useBackgroundImage();
-  const coordinatesSize = 0.5 * cellSize - BORDER_WIDTH;
+  const locale = useTypedSelector(selectLocale);
+  const { direction } = LOCALE_FEATURES[locale];
+  const backgroundImage = getBoardBackground({ config, direction });
   const boardStyle = useMemo<CSSProperties>(
     () => ({
       backgroundImage: `url(${backgroundImage})`,
-      fontSize: tileFontSize,
-      gridTemplateColumns:
-        showCoordinates === 'hidden'
-          ? `repeat(${config.boardWidth}, 1fr)`
-          : `${coordinatesSize}px repeat(${config.boardWidth}, 1fr)`,
-      gridTemplateRows:
-        showCoordinates === 'hidden'
-          ? `repeat(${config.boardHeight}, 1fr)`
-          : `${coordinatesSize}px repeat(${config.boardHeight}, 1fr)`,
     }),
-    [backgroundImage, config.boardHeight, config.boardWidth, coordinatesSize, showCoordinates, tileFontSize],
+    [backgroundImage],
   );
 
   return boardStyle;

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

@@ -1,17 +1,14 @@
 import { autoUpdate, offset, shift, useFloating } from '@floating-ui/react';
 
-import { useAppLayout } from '@/app-layout';
 import { BOARD_CELL_ACTIONS_OFFSET } from '@/parameters';
 
 export const useFloatingActions = () => {
-  const { actionsWidth } = useAppLayout();
-
   return useFloating({
     middleware: [
-      offset({
+      offset(({ rects }) => ({
         mainAxis: -BOARD_CELL_ACTIONS_OFFSET,
-        alignmentAxis: BOARD_CELL_ACTIONS_OFFSET - actionsWidth,
-      }),
+        alignmentAxis: BOARD_CELL_ACTIONS_OFFSET - rects.floating.width,
+      })),
       shift(),
     ],
     placement: 'top-end',

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

@@ -15,9 +15,12 @@ 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 { useLatest } from '@/hooks/useLatest';
+import { LOCALE_FEATURES } from '@/i18n/constants';
+import { createKeyboardNavigation } from '@/lib/createKeyboardNavigation';
+import { extractCharacters } from '@/lib/extractCharacters';
+import { extractInputValue } from '@/lib/extractInputValue';
+import { isCtrl } from '@/lib/isCtrl';
 import { boardSlice, cellFiltersSlice, selectConfig, selectLocale, useTypedSelector } from '@/state';
 import { type Direction, type Point } from '@/types';
 
@@ -53,6 +56,7 @@ export const useGrid = (rows: Cell[][]): [State, Actions] => {
   const [activeIndex, setActiveIndex] = useState<Point>({ x: 0, y: 0 });
   const [direction, setLastDirection] = useState<Direction>('horizontal');
   const directionRef = useLatest(direction);
+  const rowsRef = useLatest(rows);
 
   const safeActiveIndex = useMemo(
     () => ({
@@ -94,7 +98,7 @@ export const useGrid = (rows: Cell[][]): [State, Actions] => {
     (position: Point, value: string) => {
       const characters = value ? extractCharacters(config, value).filter((character) => character !== BLANK) : [BLANK];
       const actions: PayloadAction<unknown>[] = [];
-      let board = new Board({ rows: rows.map((row) => row.map((cell) => cell.clone())) });
+      let board = new Board({ rows: rowsRef.current.map((row) => row.map((cell) => cell.clone())) });
       let { x, y } = position;
 
       const scheduleMoveFocus = () => {
@@ -188,7 +192,7 @@ export const useGrid = (rows: Cell[][]): [State, Actions] => {
       moveFocus(Math.abs(position.x - x) + Math.abs(position.y - y));
       actions.forEach(dispatch);
     },
-    [config, directionRef, dispatch, height, moveFocus, rows, width],
+    [config, directionRef, dispatch, height, moveFocus, rowsRef, width],
   );
 
   const onChange = useCallback(
@@ -209,7 +213,7 @@ export const useGrid = (rows: Cell[][]): [State, Actions] => {
 
       if (value === EMPTY_CELL) {
         const { x, y } = position;
-        const cell = rows[y][x];
+        const cell = rowsRef.current[y][x];
 
         if (cell.hasTile()) {
           dispatch(boardSlice.actions.toggleCellIsBlank(position));
@@ -219,7 +223,7 @@ export const useGrid = (rows: Cell[][]): [State, Actions] => {
 
       insertValue(position, value);
     },
-    [dispatch, insertValue, moveFocus, rows, getInputRefPosition],
+    [dispatch, insertValue, moveFocus, rowsRef, getInputRefPosition],
   );
 
   const onDirectionToggle = useCallback(() => setLastDirection(toggleDirection), []);
@@ -308,7 +312,7 @@ export const useGrid = (rows: Cell[][]): [State, Actions] => {
           return;
         }
 
-        const cell = rows[y][x];
+        const cell = rowsRef.current[y][x];
 
         if (isCtrl(event) && character === 'g') {
           event.preventDefault();
@@ -347,7 +351,17 @@ export const useGrid = (rows: Cell[][]): [State, Actions] => {
         dispatch(boardSlice.actions.toggleCellIsBlank(position));
       },
     });
-  }, [changeActiveIndex, config, direction, dispatch, getInputRefPosition, locale, moveFocus, onDirectionToggle, rows]);
+  }, [
+    changeActiveIndex,
+    config,
+    direction,
+    dispatch,
+    getInputRefPosition,
+    locale,
+    moveFocus,
+    onDirectionToggle,
+    rowsRef,
+  ]);
 
   const onPaste = useCallback<ClipboardEventHandler>(
     (event) => {

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

@@ -1,6 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 
-import { findCell } from '@/lib';
+import { findCell } from '@/lib/findCell';
 import {
   selectBoard,
   selectCharacters,

package/packages/scrabble-solver/src/components/Button/Button.module.scss.d.ts

@@ -0,0 +1,12 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly button: string;
+  readonly content: string;
+  readonly default: string;
+  readonly icon: string;
+  readonly label: string;
+  readonly primary: string;
+  readonly wide: string;
+};
+
+export default styles;

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

@@ -2,17 +2,9 @@
 
 .dictionary {
   position: relative;
-  transition: var(--transition);
+  min-height: 0;
   word-break: break-word;
 
-  &.isAllowed {
-    background-color: var(--color--green--light);
-  }
-
-  &.isNotAllowed {
-    background-color: var(--color--red--light);
-  }
-
   &:focus-within {
     @include focus-effect;
   }
@@ -21,6 +13,8 @@
 .content {
   @include scrollbars;
 
+  display: flex;
+  flex-direction: column;
   height: 100%;
   overflow-y: auto;
   border-radius: inherit;
@@ -31,26 +25,18 @@
 }
 
 .result {
-  transition: var(--transition);
+  flex-shrink: 0;
+
+  &:last-child {
+    flex-grow: 1;
+  }
 
   &.isAllowed {
     background-color: var(--color--green--light);
-
-    & + & {
-      .content {
-        padding-top: 0;
-      }
-    }
   }
 
   &.isNotAllowed {
     background-color: var(--color--red--light);
-
-    & + & {
-      .content {
-        padding-top: 0;
-      }
-    }
   }
 }
 

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

@@ -0,0 +1,14 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly content: string;
+  readonly definition: string;
+  readonly definitions: string;
+  readonly dictionary: string;
+  readonly isAllowed: string;
+  readonly isNotAllowed: string;
+  readonly result: string;
+  readonly resultContent: string;
+  readonly word: string;
+};
+
+export default styles;

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

@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 import { type FunctionComponent } from 'react';
 
-import { useAppLayout } from '@/app-layout';
 import {
   selectDictionaryError,
   selectDictionaryIsLoading,
@@ -21,20 +20,12 @@ interface Props {
 
 export const Dictionary: FunctionComponent<Props> = ({ className }) => {
   const translate = useTranslate();
-  const { dictionaryResultsHeight } = useAppLayout();
   const results = useTypedSelector(selectDictionaryResults);
   const isLoading = useTypedSelector(selectDictionaryIsLoading);
   const error = useTypedSelector(selectDictionaryError);
-  const isLastAllowed = results.at(-1)?.isAllowed;
 
   return (
-    <div
-      className={classNames(styles.dictionary, className, {
-        [styles.isAllowed]: isLastAllowed === true,
-        [styles.isNotAllowed]: isLastAllowed === false,
-      })}
-      style={{ height: dictionaryResultsHeight }}
-    >
+    <div className={classNames(styles.dictionary, className)}>
       <div className={styles.content}>
         {typeof error !== 'undefined' && !isLoading && <EmptyState variant="error">{error.message}</EmptyState>}
 

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

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly dictionaryInput: string;
+  readonly input: string;
+};
+
+export default styles;

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

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

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

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly emptyState: string;
+  readonly tiles: string;
+};
+
+export default styles;

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

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { type FunctionComponent, type ReactNode, useMemo } from 'react';
 
-import { LOCALE_FEATURES } from '@/i18n';
+import { LOCALE_FEATURES } from '@/i18n/constants';
 import { COLOR_BLUE, COLOR_GREEN, COLOR_RED, COLOR_YELLOW } from '@/parameters';
 import { selectLocale, useTranslate, useTypedSelector } from '@/state';
 import { type Translations } from '@/types';

package/packages/scrabble-solver/src/components/IconButton/IconButton.module.scss.d.ts

@@ -0,0 +1,8 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly content: string;
+  readonly icon: string;
+  readonly iconButton: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/components/Key/Key.module.scss.d.ts

@@ -0,0 +1,6 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly key: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/components/Keys/Arrows/Arrows.module.scss.d.ts

@@ -0,0 +1,11 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly arrow: string;
+  readonly arrows: string;
+  readonly down: string;
+  readonly left: string;
+  readonly right: string;
+  readonly up: string;
+};
+
+export default styles;

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

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

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

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

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

@@ -0,0 +1,9 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly dim: string;
+  readonly loading: string;
+  readonly text: string;
+  readonly tiles: string;
+};
+
+export default styles;

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

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

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

@@ -1,17 +1,12 @@
 import Image from 'next/image';
 import { forwardRef } from 'react';
 
-import { useAppLayout } from '@/app-layout';
-import { LOGO_SRC } from '@/parameters';
+import { LOGO_HEIGHT, LOGO_SRC, LOGO_WIDTH } from '@/parameters';
 
 interface Props {
   className?: string;
 }
 
-export const Logo = forwardRef<HTMLImageElement, Props>((props, ref) => {
-  const { logoHeight, logoWidth } = useAppLayout();
-
-  return (
-    <Image {...props} alt="Scrabble Solver 2" height={logoHeight} priority ref={ref} src={LOGO_SRC} width={logoWidth} />
-  );
-});
+export const Logo = forwardRef<HTMLImageElement, Props>((props, ref) => (
+  <Image {...props} alt="Scrabble Solver 2" height={LOGO_HEIGHT} priority ref={ref} src={LOGO_SRC} width={LOGO_WIDTH} />
+));

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

@@ -4,6 +4,7 @@
  * - using font-family: Open Sans
  * - transformed into paths (manually with Inkscape)
  * - arranged (centered vertically against respective rows)
+ * - tile fills substituted with concrete colors
  */
 import { type CSSProperties, type FunctionComponent } from 'react';
 

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

@@ -0,0 +1,15 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly afterOpen: string;
+  readonly beforeClose: string;
+  readonly closeButton: string;
+  readonly container: string;
+  readonly content: string;
+  readonly footer: string;
+  readonly header: string;
+  readonly modal: string;
+  readonly overlay: string;
+  readonly title: string;
+};
+
+export default styles;