@scrabble-solver/scrabble-solver 2.17.0 → 2.18.0

package/src/parameters/index.ts

@@ -1,5 +1,4 @@
 import variables from '@/styles/variables.module.scss';
-import { ResultColumnId } from '@/types';
 
 export const BREAKPOINTS = {
   xs: Number(variables.breakpointXs),
@@ -9,97 +8,52 @@ export const BREAKPOINTS = {
   xl: Number(variables.breakpointXl),
 };
 
-export const TRANSITION = 'var(--transition)';
-
 export const GITHUB_PROJECT_URL = 'https://github.com/kamilmielnik/scrabble-solver';
 
-export const TRANSITION_DURATION = Number(variables.transitionDuration);
+// Must match the class name in global.scss
+export const CONFIG_PENDING_CLASS = 'config-pending';
+
 export const TRANSITION_DURATION_LONG = Number(variables.transitionDurationLong);
 
-export const COLOR_BLUE = variables.colorBlue;
-export const COLOR_GREEN = variables.colorGreen;
-export const COLOR_RED = variables.colorRed;
-export const COLOR_YELLOW = variables.colorYellow;
-
-export const COLOR_BONUS_CHARACTER_1 = variables.colorYellowLight;
-export const COLOR_BONUS_CHARACTER_2 = variables.colorGreenLight;
-export const COLOR_BONUS_CHARACTER_3 = variables.colorBlueLight;
-export const COLOR_BONUS_CHARACTER_5 = variables.colorRedLight;
-export const COLOR_BONUS_CHARACTER_MULTIPLIER_2 = variables.colorBonusCharacterMultiplier2;
-export const COLOR_BONUS_CHARACTER_MULTIPLIER_3 = variables.colorBonusCharacterMultiplier3;
-export const COLOR_BONUS_CHARACTER_MULTIPLIER_4 = variables.colorBonusCharacterMultiplier4;
-export const COLOR_BONUS_START = variables.colorVioletLight;
-export const COLOR_BONUS_WORD_MULTIPLIER_2 = variables.colorBonusWordMultiplier2;
-export const COLOR_BONUS_WORD_MULTIPLIER_3 = variables.colorBonusWordMultiplier3;
-export const COLOR_BONUS_WORD_MULTIPLIER_4 = variables.colorBonusWordMultiplier4;
-export const COLOR_FILTERED = variables.colorForegroundSecondary;
+export const COLOR_BLUE = 'var(--color--blue)';
+export const COLOR_GREEN = 'var(--color--green)';
+export const COLOR_RED = 'var(--color--red)';
+export const COLOR_YELLOW = 'var(--color--yellow)';
+
 export const COLOR_BACKGROUND = variables.colorBackground;
+export const COLOR_BONUS_START = variables.colorVioletLight;
 
 export const COLOR_BONUS_CHARACTER: Record<number, string> = {
-  1: COLOR_BONUS_CHARACTER_1,
-  2: COLOR_BONUS_CHARACTER_2,
-  3: COLOR_BONUS_CHARACTER_3,
-  5: COLOR_BONUS_CHARACTER_5,
+  1: variables.colorYellowLight,
+  2: variables.colorGreenLight,
+  3: variables.colorBlueLight,
+  5: variables.colorRedLight,
 };
 
 export const COLOR_BONUS_CHARACTER_MULTIPLIER: Record<number, string> = {
-  2: COLOR_BONUS_CHARACTER_MULTIPLIER_2,
-  3: COLOR_BONUS_CHARACTER_MULTIPLIER_3,
-  4: COLOR_BONUS_CHARACTER_MULTIPLIER_4,
+  2: variables.colorBonusCharacterMultiplier2,
+  3: variables.colorBonusCharacterMultiplier3,
+  4: variables.colorBonusCharacterMultiplier4,
 };
 
 export const COLOR_BONUS_WORD: Record<number, string> = {
-  2: COLOR_BONUS_WORD_MULTIPLIER_2,
-  3: COLOR_BONUS_WORD_MULTIPLIER_3,
-  4: COLOR_BONUS_WORD_MULTIPLIER_4,
+  2: variables.colorBonusWordMultiplier2,
+  3: variables.colorBonusWordMultiplier3,
+  4: variables.colorBonusWordMultiplier4,
 };
 
-export const SPACING_XS = Number(variables.spacingXs);
-export const SPACING_S = Number(variables.spacingS);
-export const SPACING_M = Number(variables.spacingM);
-export const SPACING_L = Number(variables.spacingL);
-export const SPACING_XL = Number(variables.spacingXl);
-
-export const COMPONENTS_SPACING = SPACING_XL;
-export const COMPONENTS_SPACING_SMALL = SPACING_L;
-
-export const RACK_TILE_SIZE_MAX = 80;
-
 export const BOARD_CELL_ACTIONS_OFFSET = 3;
-export const BOARD_CELL_BORDER_WIDTH = 1;
-export const BOARD_TILE_FONT_SIZE_MIN = 14;
-export const BOARD_TILE_FONT_SIZE_POINTS_MIN = 10;
-export const BOARD_TILE_SIZE_MAX = RACK_TILE_SIZE_MAX;
 
-export const BORDER_COLOR = variables.borderColor;
 export const BORDER_COLOR_LIGHT = variables.borderColorLight;
-export const BORDER_RADIUS = Number(variables.borderRadius);
 export const BORDER_WIDTH = Number(variables.borderWidth);
 
-export const BUTTON_ICON_SIZE = Number(variables.buttonIconSize);
-export const BUTTON_PADDING_VERTICAL = SPACING_M;
-export const BUTTON_HEIGHT = BUTTON_ICON_SIZE + 2 * BUTTON_PADDING_VERTICAL + 2 * BORDER_WIDTH;
-
-export const DICTIONARY_HEIGHT = Number(variables.dictionaryHeight);
-export const DICTIONARY_HEIGHT_MOBILE = Number(variables.dictionaryHeightMobile);
-
-export const LOGO_ASPECT_RATIO = 682 / 166;
-export const LOGO_HEIGHT = Number(variables.logoHeight);
-export const LOGO_HEIGHT_SMALL = Number(variables.logoHeightSmall);
+export const LOGO_HEIGHT = 166;
 export const LOGO_SRC = '/logo.svg';
+export const LOGO_WIDTH = 682;
 
-export const MODAL_WIDTH = Number(variables.modalWidth);
-export const MODAL_HEADER_HEIGHT = 45;
-
-export const NAV_PADDING = SPACING_L;
-
-export const TILE_SIZE = 80;
-
-export const TOOLTIP_DURATION = TRANSITION_DURATION;
+export const TOOLTIP_DURATION = Number(variables.transitionDuration);
 
 export const PLAIN_TILES_COLOR_DEFAULT = COLOR_GREEN;
-export const PLAIN_TILES_PADDING_HORIZONTAL = 0;
-export const PLAIN_TILES_PADDING_VERTICAL = 0;
 export const PLAIN_TILES_POINTS_COLORS: Record<number, string> = {
   1: COLOR_YELLOW,
   2: COLOR_GREEN,
@@ -113,31 +67,8 @@ export const PLAIN_TILES_POINTS_COLORS: Record<number, string> = {
   10: COLOR_RED,
 };
 export const PLAIN_TILES_TILE_MARGIN = 6;
-export const PLAIN_TILES_TILE_MAX_ROTATE = 0;
-export const PLAIN_TILES_TILE_MAX_SCATTER = 0;
 export const PLAIN_TILES_TILE_SIZE = 80;
-export const PLAIN_TILES_VERSION_TILE_COLOR = COLOR_GREEN;
-export const PLAIN_TILES_VERSION_TILE_SIZE = TILE_SIZE;
-
-export const PROGRESS_COLOR_VALUE = 'var(--color--violet--light)';
-export const PROGRESS_COLOR_BACKGROUND = 'var(--color--inactive)';
-
-export const REMAINING_TILES_TILE_SIZE = 50;
-
-export const RESULTS_COLUMN_WIDTH: Record<ResultColumnId, number | undefined> = {
-  [ResultColumnId.BlanksCount]: 55,
-  [ResultColumnId.ConsonantsCount]: 55,
-  [ResultColumnId.Coordinates]: 55,
-  [ResultColumnId.Points]: 80,
-  [ResultColumnId.TilesCount]: 55,
-  [ResultColumnId.VowelsCount]: 55,
-  [ResultColumnId.Word]: undefined,
-  [ResultColumnId.WordsCount]: 55,
-};
-export const RESULTS_ITEM_HEIGHT = Number(variables.resultsItemHeight);
 
-export const RESULTS_HEADER_HEIGHT = RESULTS_ITEM_HEIGHT;
-
-export const SOLVER_COLUMN_WIDTH = Number(variables.solverColumnWidth);
+export const RESULTS_ITEM_HEIGHT = Number(variables.resultsItemHeight);
 
-export const TEXT_INPUT_HEIGHT = Number(variables.textInputHeight);
+export const RESULTS_OVERSCAN_COUNT = 10;

package/src/serviceWorkerManager.ts

@@ -1,9 +1,12 @@
-import { Workbox } from 'workbox-window';
+import { waitForIdle } from '@/lib/waitForIdleOrFirstIntent';
 
 export const registerServiceWorker = async () => {
   if (!globalThis.navigator || !('serviceWorker' in globalThis.navigator)) {
     return;
   }
 
-  await new Workbox('/service-worker.js').register({ immediate: true });
+  // Registration waits for load+idle so the install's precache downloads never compete with page resources
+  await waitForIdle();
+  const { Workbox } = await import('workbox-window');
+  await new Workbox('/service-worker.js').register();
 };

package/src/state/actions.ts

@@ -1,5 +1,5 @@
 import { createAction } from '@reduxjs/toolkit';
 
-export const initialize = createAction('initialize');
+export const initialize = createAction<{ version: string }>('initialize');
 
 export const reset = createAction('reset');

package/src/state/app/index.ts

@@ -0,0 +1,4 @@
+export * from './initialState';
+export * from './selectors';
+export * from './slice';
+export * from './types';

package/src/state/app/initialState.ts

@@ -0,0 +1,6 @@
+import type { AppState } from './types';
+
+export const appInitialState: AppState = {
+  isHydrated: false,
+  version: '',
+};

package/src/state/app/selectors.ts

@@ -0,0 +1,5 @@
+import type { RootState } from '../types';
+
+export const selectIsHydrated = (state: RootState): boolean => state.app.isHydrated;
+
+export const selectVersion = (state: RootState): string => state.app.version;

package/src/state/app/slice.ts

@@ -0,0 +1,20 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+import { initialize } from '../actions';
+
+import { appInitialState } from './initialState';
+
+export const appSlice = createSlice({
+  initialState: appInitialState,
+  name: 'app',
+  reducers: {
+    hydrated: (state) => {
+      state.isHydrated = true;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(initialize, (state, action) => {
+      state.version = action.payload.version;
+    });
+  },
+});

package/src/state/app/types.ts

@@ -0,0 +1,4 @@
+export interface AppState {
+  isHydrated: boolean;
+  version: string;
+}

package/src/state/board/initialState.ts

@@ -1,7 +1,6 @@
 import { getConfig } from '@scrabble-solver/configs';
 import { Board } from '@scrabble-solver/types';
 
-import { localStorage } from '../localStorage';
 import { settingsInitialState } from '../settings';
 
 import type { BoardState } from './types';
@@ -9,7 +8,7 @@ import type { BoardState } from './types';
 const { game, locale } = settingsInitialState;
 const { boardHeight, boardWidth } = getConfig(game, locale);
 
-export const boardInitialState: BoardState = localStorage.getBoard() ?? Board.create(boardWidth, boardHeight);
+export const boardInitialState: BoardState = Board.create(boardWidth, boardHeight);
 
 // const createOxyphenbutazone = () => {
 //   // Tiles: oypbaze

package/src/state/i18n/index.ts

@@ -0,0 +1,4 @@
+export * from './initialState';
+export * from './selectors';
+export * from './slice';
+export * from './types';

package/src/state/i18n/initialState.ts

@@ -0,0 +1,5 @@
+import type { I18nState } from './types';
+
+export const i18nInitialState: I18nState = {
+  translations: {},
+};

package/src/state/i18n/selectors.ts

@@ -0,0 +1,3 @@
+import type { RootState } from '../types';
+
+export const selectLoadedTranslations = (state: RootState) => state.i18n.translations;

package/src/state/i18n/slice.ts

@@ -0,0 +1,16 @@
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+import { type Locale } from '@scrabble-solver/types';
+
+import type { Translations } from '@/types';
+
+import { i18nInitialState } from './initialState';
+
+export const i18nSlice = createSlice({
+  initialState: i18nInitialState,
+  name: 'i18n',
+  reducers: {
+    loaded: (state, action: PayloadAction<{ locale: Locale; translations: Translations }>) => {
+      state.translations[action.payload.locale] = action.payload.translations;
+    },
+  },
+});

package/src/state/i18n/types.ts

@@ -0,0 +1,7 @@
+import { type Locale } from '@scrabble-solver/types';
+
+import type { Translations } from '@/types';
+
+export interface I18nState {
+  translations: Partial<Record<Locale, Translations>>;
+}

package/src/state/index.ts

@@ -1,8 +1,10 @@
 export * from './actions';
+export * from './app';
 export * from './board';
 export * from './cellFilters';
 export * from './dictionary';
 export * from './hoveredTile';
+export * from './i18n';
 export * from './localStorage';
 export * from './rack';
 export * from './results';

package/src/state/lib.ts

@@ -1,7 +1,7 @@
 import { BLANK } from '@scrabble-solver/constants';
 import { type Board, type Config } from '@scrabble-solver/types';
 
-import { createKeyComparator } from '@/lib';
+import { createKeyComparator } from '@/lib/createKeyComparator';
 import { type RemainingTile } from '@/types';
 
 export const getRemainingTiles = (

package/src/state/localStorage.ts

@@ -1,13 +1,20 @@
-import { Board, type BoardJson } from '@scrabble-solver/types';
+import { Board, type BoardJson, isObject, type Locale } from '@scrabble-solver/types';
 import store2 from 'store2';
 
-import type { Rack } from '@/types';
+import type { Rack, Translations } from '@/types';
 
 import type { SettingsState } from './settings/types';
 
 const BOARD = 'board';
 const RACK = 'rack';
 const SETTINGS = 'settings';
+const TRANSLATIONS = 'translations';
+
+interface PersistedTranslations {
+  locale: Locale;
+  translations: Translations;
+  version: string;
+}
 
 const LEGACY_KEYS: Record<keyof SettingsState, string> = {
   autoGroupTiles: 'auto-group-tiles',
@@ -21,33 +28,15 @@ const LEGACY_KEYS: Record<keyof SettingsState, string> = {
 
 const store = store2.namespace('scrabble-solver');
 
-/**
- * Introduced in 2.15.26 on 2026/04/27.
- * Life expectancy: 1y.
- */
-const migrateLegacySettings = (): Partial<SettingsState> => {
-  const settings: Partial<SettingsState> = {};
-  let hasLegacy = false;
-
-  for (const [setting, legacyKey] of Object.entries(LEGACY_KEYS) as [keyof SettingsState, string][]) {
-    if (store.has(legacyKey)) {
-      settings[setting] = store.get(legacyKey);
-      store.remove(legacyKey);
-      hasLegacy = true;
-    }
-  }
-
-  if (hasLegacy) {
-    store.set(SETTINGS, settings, true);
-  }
-
-  return settings;
-};
-
 export const localStorage = {
   getBoard(): Board | undefined {
-    const serialized = store.get(BOARD) as string | undefined;
-    return serialized ? Board.fromJson(JSON.parse(serialized) as BoardJson) : undefined;
+    try {
+      const serialized = store.get(BOARD) as string | undefined;
+      return serialized ? Board.fromJson(JSON.parse(serialized) as BoardJson) : undefined;
+    } catch {
+      store.remove(BOARD);
+      return undefined;
+    }
   },
 
   setBoard(board: Board | undefined): void {
@@ -56,7 +45,14 @@ export const localStorage = {
   },
 
   getRack(): Rack | undefined {
-    return store.get(RACK) as Rack | undefined;
+    const rack = store.get(RACK) as Rack | undefined;
+
+    if (rack !== undefined && !Array.isArray(rack)) {
+      store.remove(RACK);
+      return undefined;
+    }
+
+    return rack;
   },
 
   setRack(rack: Rack | undefined): void {
@@ -65,10 +61,71 @@ export const localStorage = {
 
   getSettings(): Partial<SettingsState> {
     const stored = store.get(SETTINGS) as Partial<SettingsState> | undefined;
-    return stored ?? migrateLegacySettings();
+
+    if (stored !== undefined && !isObject(stored)) {
+      store.remove(SETTINGS);
+    }
+
+    return migrateHiddenShowCoordinates(isObject(stored) ? stored : migrateLegacySettings());
   },
 
   setSettings(settings: SettingsState): void {
     store.set(SETTINGS, settings, true);
   },
+
+  getTranslations(locale: Locale, version: string): Translations | undefined {
+    const stored = store.get(TRANSLATIONS) as PersistedTranslations | undefined;
+
+    if (typeof stored === 'undefined') {
+      return undefined;
+    }
+
+    if (!isObject(stored) || stored.locale !== locale || stored.version !== version || !isObject(stored.translations)) {
+      store.remove(TRANSLATIONS);
+      return undefined;
+    }
+
+    return stored.translations;
+  },
+
+  setTranslations(locale: Locale, version: string, translations: Translations): void {
+    store.set(TRANSLATIONS, { locale, translations, version } satisfies PersistedTranslations, true);
+  },
 };
+
+/**
+ * Introduced in 2.15.26 on 2026/04/27.
+ * Life expectancy: 1y.
+ */
+function migrateLegacySettings(): Partial<SettingsState> {
+  const settings: Partial<SettingsState> = {};
+  let hasLegacy = false;
+
+  for (const [setting, legacyKey] of Object.entries(LEGACY_KEYS) as [keyof SettingsState, string][]) {
+    if (store.has(legacyKey)) {
+      settings[setting] = store.get(legacyKey);
+      store.remove(legacyKey);
+      hasLegacy = true;
+    }
+  }
+
+  if (hasLegacy) {
+    store.set(SETTINGS, settings, true);
+  }
+
+  return settings;
+}
+
+/**
+ * The 'hidden' showCoordinates option was removed on 2026/08/13.
+ * Life expectancy: 1y.
+ */
+function migrateHiddenShowCoordinates(settings: Partial<SettingsState>): Partial<SettingsState> {
+  if (String(settings.showCoordinates) !== 'hidden') {
+    return settings;
+  }
+
+  const migrated: Partial<SettingsState> = { ...settings, showCoordinates: 'original' };
+  store.set(SETTINGS, migrated, true);
+  return migrated;
+}

package/src/state/rack/initialState.ts

@@ -1,6 +1,5 @@
 import { getConfig } from '@scrabble-solver/configs';
 
-import { localStorage } from '../localStorage';
 import { settingsInitialState } from '../settings';
 
 import type { RackState } from './types';
@@ -9,4 +8,4 @@ const defaultConfig = getConfig(settingsInitialState.game, settingsInitialState.
 
 export const rackDefaultState: RackState = Array(defaultConfig.rackSize).fill(null);
 
-export const rackInitialState: RackState = localStorage.getRack() ?? rackDefaultState;
+export const rackInitialState: RackState = rackDefaultState;

package/src/state/rack/slice.ts

@@ -1,7 +1,10 @@
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
 import { type Tile } from '@scrabble-solver/types';
 
-import { arrayEquals, createNullMovingComparator, inverseDirection, zipCharactersAndTiles } from '@/lib';
+import { arrayEquals } from '@/lib/arrayEquals';
+import { createNullMovingComparator } from '@/lib/createNullMovingComparator';
+import { inverseDirection } from '@/lib/inverseDirection';
+import { zipCharactersAndTiles } from '@/lib/zipCharactersAndTiles';
 import { type AutoGroupTiles, type Rack } from '@/types';
 
 import { rackDefaultState, rackInitialState } from './initialState';

package/src/state/results/lib.ts

@@ -1,6 +1,10 @@
 import { type Result, type ShowCoordinates } from '@scrabble-solver/types';
 
-import { createKeyComparator, createRegExp, createStringComparator, getCoordinate, reverseComparator } from '@/lib';
+import { createKeyComparator } from '@/lib/createKeyComparator';
+import { createRegExp } from '@/lib/createRegExp';
+import { createStringComparator } from '@/lib/createStringComparator';
+import { getCoordinate } from '@/lib/getCoordinate';
+import { reverseComparator } from '@/lib/reverseComparator';
 import {
   type CellFilter,
   type Comparator,
@@ -11,10 +15,6 @@ import {
 } from '@/types';
 
 export const getCoordinates = (result: Result, showCoordinates: ShowCoordinates): string => {
-  if (showCoordinates === 'hidden') {
-    return '';
-  }
-
   const firstCell = result.cells[0];
   const x = getCoordinate(firstCell.x, showCoordinates === 'original' ? 'letter' : 'number');
   const y = getCoordinate(firstCell.y, showCoordinates === 'original' ? 'number' : 'letter');

package/src/state/results/selectors.ts

@@ -1,6 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 
-import { createRegExp } from '@/lib';
+import { createRegExp } from '@/lib/createRegExp';
 
 import { selectCellFilters } from '../cellFilters';
 import { selectLocale, selectShowCoordinates } from '../settings';