@scrabble-solver/scrabble-solver 2.18.1 → 2.18.2

package/src/pages/index.tsx

@@ -6,7 +6,7 @@ import { execSync } from 'child_process';
 import fs from 'fs';
 import dynamic from 'next/dynamic';
 import path from 'path';
-import { type FunctionComponent, useCallback, useEffect, useState } from 'react';
+import { type FunctionComponent, useCallback, useEffect, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { Logo } from '@/components/Logo';
@@ -14,13 +14,23 @@ import { NavButtons } from '@/components/NavButtons';
 import { Solver } from '@/components/Solver';
 import { useDirection } from '@/hooks/useDirection';
 import { useEffectOnce } from '@/hooks/useEffectOnce';
+import { useIsCompactLayout } from '@/hooks/useIsCompactLayout';
 import { useLanguage } from '@/hooks/useLanguage';
 import { useLocalStorage } from '@/hooks/useLocalStorage';
 import { LOCALE_FEATURES } from '@/i18n/constants';
 import { schedulePreloadModals } from '@/modals/preload';
 import { CONFIG_PENDING_CLASS, GITHUB_PROJECT_URL, NPM_PACKAGE_URL, SITE_DESCRIPTION, SITE_URL } from '@/parameters';
 import { registerServiceWorker } from '@/serviceWorkerManager';
-import { initialize, reset, selectConfig, selectIsHydrated, selectLocale, useTypedSelector } from '@/state';
+import {
+  hoveredWordSlice,
+  initialize,
+  reset,
+  resultsSlice,
+  selectConfig,
+  selectIsHydrated,
+  selectLocale,
+  useTypedSelector,
+} from '@/state';
 
 import styles from './index.module.scss';
 
@@ -84,6 +94,8 @@ const Index: FunctionComponent<Props> = ({ version }) => {
   const config = useTypedSelector(selectConfig);
   const locale = useTypedSelector(selectLocale);
   const isHydrated = useTypedSelector(selectIsHydrated);
+  const isCompactLayout = useIsCompactLayout();
+  const previousIsCompactLayout = useRef(isCompactLayout);
   const [modals, setModals] = useState<Record<Modal, boolean>>({
     dictionary: false,
     keyMap: false,
@@ -131,6 +143,7 @@ const Index: FunctionComponent<Props> = ({ version }) => {
   const handleCloseResults = useCallback(() => patchModals({ results: false }), [patchModals]);
   const handleCloseSettings = useCallback(() => patchModals({ settings: false }), [patchModals]);
   const handleCloseWords = useCallback(() => patchModals({ words: false }), [patchModals]);
+  const handlePreviewWord = useCallback(() => patchModals({ menu: false, words: false }), [patchModals]);
 
   useDirection(LOCALE_FEATURES[locale].direction);
   useLanguage(locale);
@@ -159,6 +172,16 @@ const Index: FunctionComponent<Props> = ({ version }) => {
     }
   }, [isHydrated]);
 
+  useEffect(() => {
+    if (previousIsCompactLayout.current === isCompactLayout) {
+      return;
+    }
+
+    previousIsCompactLayout.current = isCompactLayout;
+    dispatch(resultsSlice.actions.changeResultCandidate(null));
+    dispatch(hoveredWordSlice.actions.clear());
+  }, [dispatch, isCompactLayout]);
+
   useEffectOnce(() => {
     if (process.env.NODE_ENV === 'production') {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
@@ -212,7 +235,9 @@ const Index: FunctionComponent<Props> = ({ version }) => {
 
       {mountedModals.keyMap && <KeyMapModal isOpen={modals.keyMap} onClose={handleCloseKeyMap} />}
 
-      {mountedModals.words && <WordsModal isOpen={modals.words} onClose={handleCloseWords} />}
+      {mountedModals.words && (
+        <WordsModal isOpen={modals.words} onClose={handleCloseWords} onPreview={handlePreviewWord} />
+      )}
 
       {config.supportsRemainingTiles && mountedModals.remainingTiles && (
         <RemainingTilesModal isOpen={modals.remainingTiles} onClose={handleCloseRemainingTiles} />

package/src/parameters/index.ts

@@ -8,6 +8,8 @@ export const BREAKPOINTS = {
   xl: Number(variables.breakpointXl),
 };
 
+export const BREAKPOINT_HEIGHT_L = Number(variables.breakpointHeightL);
+
 export const GITHUB_PROJECT_URL = 'https://github.com/kamilmielnik/scrabble-solver';
 
 export const NPM_PACKAGE_URL = 'https://www.npmjs.com/package/scrabble-solver';

package/src/sdk/verify.ts

@@ -1,6 +1,7 @@
 import { type BoardJson, type Game, type Locale } from '@scrabble-solver/types';
 
 import { verifyLocally } from '@/solver-worker';
+import { type VerifiedWord } from '@/types';
 
 import { fetchJson } from './fetchJson';
 
@@ -11,8 +12,8 @@ interface Payload {
 }
 
 interface Response {
-  invalidWords: string[];
-  validWords: string[];
+  invalidWords: VerifiedWord[];
+  validWords: VerifiedWord[];
 }
 
 export const verify = async ({ board, game, locale }: Payload): Promise<Response> => {

package/src/solver-worker/client.test.ts

@@ -2,7 +2,7 @@ import { type ResultJson } from '@scrabble-solver/types';
 import { afterAll, beforeEach, describe, expect, it } from 'bun:test';
 
 import type * as clientModule from './client';
-import { type SolverWorkerRequest, type SolverWorkerResponse } from './messages';
+import { type SolverWorkerRequest, type SolverWorkerResponse, type VerifyResult } from './messages';
 
 type Listener = (event: { data: SolverWorkerResponse }) => void;
 
@@ -102,9 +102,9 @@ describe('solver worker client', () => {
 
   it('resolves a verify with the worker words', async () => {
     const verify = verifyLocally(verifyPayload);
-    respond({ data: { invalidWords: ['zz'], validWords: ['ab'] }, id: lastRequestId(), outcome: 'answered' });
+    respond({ data: createVerifyResult(), id: lastRequestId(), outcome: 'answered' });
 
-    expect(await verify).toEqual({ invalidWords: ['zz'], validWords: ['ab'] });
+    expect(await verify).toEqual(createVerifyResult());
   });
 
   it('does not wait for a prefetch to answer', () => {
@@ -149,3 +149,10 @@ function lastRequestId(): number {
 function createResults(word: string): ResultJson[] {
   return [{ blankIndices: [], id: 0, isHorizontal: true, points: 1, tiles: word.split(''), x: 0, y: 0 }];
 }
+
+function createVerifyResult(): VerifyResult {
+  return {
+    invalidWords: [{ direction: 'horizontal', isValid: false, word: 'zz', x: 0, y: 0 }],
+    validWords: [{ direction: 'vertical', isValid: true, word: 'ab', x: 3, y: 5 }],
+  };
+}

package/src/solver-worker/index.worker.ts

@@ -5,7 +5,7 @@ import { BLANK } from '@scrabble-solver/constants';
 import { solve } from '@scrabble-solver/solver';
 import { Board, type Locale, Tile } from '@scrabble-solver/types';
 
-import { type SolveRequestPayload, type VerifyRequestPayload } from '@/types';
+import { type SolveRequestPayload, type VerifiedWord, type VerifyRequestPayload } from '@/types';
 
 import { revalidateDictionary } from './dictionaries';
 import { getGaddag } from './getGaddag';
@@ -64,15 +64,15 @@ async function handleVerify(
   }
 
   const board = Board.fromJson(boardJson);
-  const words = board.getWords().sort((a, b) => a.localeCompare(b, locale));
-  const invalidWords: string[] = [];
-  const validWords: string[] = [];
+  const words = board.getWords().sort((a, b) => a.word.localeCompare(b.word, locale));
+  const invalidWords: VerifiedWord[] = [];
+  const validWords: VerifiedWord[] = [];
 
   for (const word of words) {
-    if (gaddag.has(word)) {
-      validWords.push(word);
+    if (gaddag.has(word.word)) {
+      validWords.push({ ...word, isValid: true });
     } else {
-      invalidWords.push(word);
+      invalidWords.push({ ...word, isValid: false });
     }
   }
 

package/src/solver-worker/messages.ts

@@ -1,10 +1,10 @@
 import { type Locale, type ResultJson } from '@scrabble-solver/types';
 
-import { type SolveRequestPayload, type VerifyRequestPayload } from '@/types';
+import { type SolveRequestPayload, type VerifiedWord, type VerifyRequestPayload } from '@/types';
 
 export interface VerifyResult {
-  invalidWords: string[];
-  validWords: string[];
+  invalidWords: VerifiedWord[];
+  validWords: VerifiedWord[];
 }
 
 export type SolverWorkerRequest =

package/src/state/hoveredWord/index.ts

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

package/src/state/hoveredWord/initialState.ts

@@ -0,0 +1,5 @@
+import type { HoveredWordState } from './types';
+
+export const hoveredWordInitialState: HoveredWordState = {
+  word: null,
+};

package/src/state/hoveredWord/selectors.ts

@@ -0,0 +1,5 @@
+import type { VerifiedWord } from '@/types';
+
+import type { RootState } from '../types';
+
+export const selectHoveredWord = (state: RootState): VerifiedWord | null => state.hoveredWord.word;

package/src/state/hoveredWord/slice.ts

@@ -0,0 +1,18 @@
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+
+import { type VerifiedWord } from '@/types';
+
+import { hoveredWordInitialState } from './initialState';
+
+export const hoveredWordSlice = createSlice({
+  initialState: hoveredWordInitialState,
+  name: 'hoveredWord',
+  reducers: {
+    set: (state, action: PayloadAction<VerifiedWord>) => {
+      state.word = action.payload;
+    },
+    clear: (state) => {
+      state.word = null;
+    },
+  },
+});

package/src/state/hoveredWord/types.ts

@@ -0,0 +1,5 @@
+import type { VerifiedWord } from '@/types';
+
+export interface HoveredWordState {
+  word: VerifiedWord | null;
+}

package/src/state/index.ts

@@ -4,6 +4,7 @@ export * from './board';
 export * from './cellFilters';
 export * from './dictionary';
 export * from './hoveredTile';
+export * from './hoveredWord';
 export * from './i18n';
 export * from './localStorage';
 export * from './rack';

package/src/state/localStorage.ts

@@ -1,7 +1,8 @@
 import { Board, type BoardJson, isObject, type Locale } from '@scrabble-solver/types';
 import store2 from 'store2';
 
-import type { Rack, Translations } from '@/types';
+import { englishTranslations } from '@/i18n/i18n';
+import type { Rack, TranslationKey, Translations } from '@/types';
 
 import type { SettingsState } from './settings/types';
 
@@ -80,7 +81,13 @@ export const localStorage = {
       return undefined;
     }
 
-    if (!isObject(stored) || stored.locale !== locale || stored.version !== version || !isObject(stored.translations)) {
+    if (
+      !isObject(stored) ||
+      stored.locale !== locale ||
+      stored.version !== version ||
+      !isObject(stored.translations) ||
+      !hasEveryTranslation(stored.translations)
+    ) {
       store.remove(TRANSLATIONS);
       return undefined;
     }
@@ -93,6 +100,10 @@ export const localStorage = {
   },
 };
 
+function hasEveryTranslation(translations: Translations): boolean {
+  return (Object.keys(englishTranslations) as TranslationKey[]).every((key) => typeof translations[key] === 'string');
+}
+
 /**
  * Introduced in 2.15.26 on 2026/04/27.
  * Life expectancy: 1y.

package/src/state/results/lib.ts

@@ -1,25 +1,15 @@
 import { type Result, type ShowCoordinates } from '@scrabble-solver/types';
 
+import { createCoordinatesComparator } from '@/lib/createCoordinatesComparator';
 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,
-  type GroupedResults,
-  ResultColumnId,
-  type Sort,
-  SortDirection,
-} from '@/types';
+import { createSortComparator } from '@/lib/createSortComparator';
+import { getCoordinates as getPointCoordinates } from '@/lib/getCoordinates';
+import { type CellFilter, type ComparatorFactory, type GroupedResults, ResultColumnId, type Sort } from '@/types';
 
 export const getCoordinates = (result: Result, showCoordinates: ShowCoordinates): string => {
   const firstCell = result.cells[0];
-  const x = getCoordinate(firstCell.x, showCoordinates === 'original' ? 'letter' : 'number');
-  const y = getCoordinate(firstCell.y, showCoordinates === 'original' ? 'number' : 'letter');
-
-  return result.isHorizontal() ? `${y}${x}` : `${x}${y}`;
+  return getPointCoordinates({ isHorizontal: result.isHorizontal(), x: firstCell.x, y: firstCell.y }, showCoordinates);
 };
 
 export const groupResults = (
@@ -69,14 +59,11 @@ export const resultMatchesCellFilter = (result: Result, cellFilters: CellFilter[
   return matchesExcludeFilters && matchesIncludeFilters;
 };
 
-const comparators: Record<ResultColumnId, (locale: string, showCoordinates: ShowCoordinates) => Comparator<Result>> = {
+const comparators: Record<ResultColumnId, ComparatorFactory<Result>> = {
   [ResultColumnId.BlanksCount]: (locale: string) => createKeyComparator('blanksCount', locale),
   [ResultColumnId.ConsonantsCount]: (locale: string) => createKeyComparator('consonantsCount', locale),
-  [ResultColumnId.Coordinates]: (locale: string, showCoordinates: ShowCoordinates) => (a, b) => {
-    const stringComparator = createStringComparator(locale);
-    const aValue = getCoordinates(a, showCoordinates);
-    const bValue = getCoordinates(b, showCoordinates);
-    return stringComparator(aValue, bValue);
+  [ResultColumnId.Coordinates]: (locale: string, showCoordinates: ShowCoordinates) => {
+    return createCoordinatesComparator({ getItemCoordinates: getCoordinates, locale, showCoordinates });
   },
   [ResultColumnId.Points]: (locale: string) => createKeyComparator('points', locale),
   [ResultColumnId.TilesCount]: (locale: string) => createKeyComparator('tilesCount', locale),
@@ -95,9 +82,5 @@ export const sortResults = (
     return undefined;
   }
 
-  const createComparator = comparators[sort.column];
-  const comparator = createComparator(locale, showCoordinates);
-  const finalComparator = sort.direction === SortDirection.Descending ? reverseComparator(comparator) : comparator;
-  const sortedResults = [...results].sort(finalComparator);
-  return sortedResults;
+  return [...results].sort(createSortComparator({ comparators, locale, showCoordinates, sort }));
 };

package/src/state/results/selectors.ts

@@ -16,7 +16,7 @@ export const selectResultCandidate = createSelector([selectResults], (results) =
 
 export const selectResultsQuery = createSelector([selectResults], (results) => results.query);
 
-const selectResultsResults = createSelector([selectResults], (results) => results.results);
+export const selectResultsResults = createSelector([selectResults], (results) => results.results);
 
 export const selectResultsSort = createSelector([selectResults], (results) => results.sort);
 
@@ -44,6 +44,14 @@ export const selectProcessedResults = createSelector([selectGroupedSortedResults
   return results ? [...results.matching, ...results.other] : undefined;
 });
 
+export const selectResultCandidateIndex = createSelector(
+  [selectProcessedResults, selectResultCandidate],
+  (results, candidate) => {
+    const index = results && candidate ? results.findIndex((result) => result.id === candidate.id) : -1;
+    return index === -1 ? undefined : index;
+  },
+);
+
 export const selectIsResultMatching = createSelector(
   [selectProcessedResults, selectResultsQuery, selectCellFilters, selectResultIndex],
   (results, query, cellFilters, index) => {

package/src/state/results/slice.ts

@@ -1,14 +1,11 @@
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
 import { type Result } from '@scrabble-solver/types';
 
-import { type ResultColumnId, SortDirection } from '@/types';
+import { getNextSort } from '@/lib/getNextSort';
+import { type ResultColumnId } from '@/types';
 
 import { resultsInitialState } from './initialState';
 
-const toggleDirection = (direction: SortDirection): SortDirection => {
-  return direction === SortDirection.Ascending ? SortDirection.Descending : SortDirection.Ascending;
-};
-
 export const resultsSlice = createSlice({
   initialState: resultsInitialState,
   name: 'results',
@@ -24,7 +21,7 @@ export const resultsSlice = createSlice({
 
     changeResultCandidate: (state, action: PayloadAction<Result | null>) => {
       const candidate = action.payload;
-      return { ...state, candidate };
+      return candidate === state.candidate ? state : { ...state, candidate };
     },
 
     changeResults: (state, action: PayloadAction<Result[]>) => {
@@ -38,16 +35,7 @@ export const resultsSlice = createSlice({
     },
 
     sort: (state, action: PayloadAction<ResultColumnId>) => {
-      const columndId = action.payload;
-      const { column, direction } = state.sort;
-
-      return {
-        ...state,
-        sort: {
-          column: columndId,
-          direction: column === columndId ? toggleDirection(direction) : direction,
-        },
-      };
+      return { ...state, sort: getNextSort(state.sort, action.payload) };
     },
 
     reset: () => resultsInitialState,

package/src/state/sagas.ts

@@ -14,12 +14,14 @@ import { memoize } from '@/lib/memoize';
 import { waitForFirstIntent, waitForIdleOrFirstIntent } from '@/lib/waitForIdleOrFirstIntent';
 import { findWordDefinitions, solve, verify, visit } from '@/sdk';
 import { prefetchDictionary } from '@/solver-worker';
+import { type VerifiedWord } from '@/types';
 
 import { initialize, reset } from './actions';
 import { appSlice, selectVersion } from './app';
 import { boardSlice, selectBoard } from './board';
 import { cellFiltersSlice, selectCellFilter } from './cellFilters';
 import { dictionarySlice, selectDictionary } from './dictionary';
+import { hoveredWordSlice } from './hoveredWord';
 import { i18nSlice, selectLoadedTranslations } from './i18n';
 import { localStorage } from './localStorage';
 import { rackSlice, selectCharacters, selectRack } from './rack';
@@ -51,6 +53,7 @@ export function* rootSaga(): AnyGenerator {
   yield takeEvery([rackSlice.actions.changeCharacter.type, rackSlice.actions.changeCharacters.type], onRackValueChange);
   yield takeEvery(resultsSlice.actions.applyResult.type, onApplyResult);
   yield takeLatest(resultsSlice.actions.changeResultCandidate.type, onResultCandidateChange);
+  yield takeLatest([hoveredWordSlice.actions.set.type, hoveredWordSlice.actions.clear.type], onHoveredWordChange);
   yield takeEvery(settingsSlice.actions.changeGame.type, onGameChange);
   yield takeEvery(settingsSlice.actions.changeLocale.type, onLocaleChange);
   yield takeLatest(dictionarySlice.actions.submit.type, onDictionarySubmit);
@@ -68,6 +71,7 @@ function* onCellValueChange({ payload }: PayloadAction<{ value: string; x: numbe
   }
 
   yield put(resultsSlice.actions.changeResultCandidate(null));
+  yield put(hoveredWordSlice.actions.clear());
   yield put(verifySlice.actions.submit());
 }
 
@@ -99,6 +103,7 @@ function* onGameChange(): AnyGenerator {
   }
 
   yield put(resultsSlice.actions.reset());
+  yield put(hoveredWordSlice.actions.clear());
   yield* resetRack();
   yield put(verifySlice.actions.submit());
 }
@@ -250,6 +255,7 @@ function* onReset(): AnyGenerator {
   yield put(boardSlice.actions.init(Board.create(config.boardWidth, config.boardHeight)));
   yield put(cellFiltersSlice.actions.reset());
   yield put(dictionarySlice.actions.reset());
+  yield put(hoveredWordSlice.actions.clear());
   yield put(rackSlice.actions.reset());
   yield put(resultsSlice.actions.reset());
   yield put(solveSlice.actions.reset());
@@ -280,6 +286,7 @@ function* onLocaleChange({ payload: locale }: PayloadAction<Locale>): AnyGenerat
   }
 
   yield put(dictionarySlice.actions.reset());
+  yield put(hoveredWordSlice.actions.clear());
   yield put(resultsSlice.actions.changeResultCandidate(null));
   yield put(verifySlice.actions.submit());
 }
@@ -289,8 +296,26 @@ function* onResultCandidateChange({ payload: result }: PayloadAction<Result | nu
     return;
   }
 
+  yield put(hoveredWordSlice.actions.clear());
+  yield* searchDictionary(result.words);
+}
+
+function* onHoveredWordChange({ payload: word }: PayloadAction<VerifiedWord | undefined>): AnyGenerator {
+  if (!word) {
+    return;
+  }
+
+  yield put(resultsSlice.actions.changeResultCandidate(null));
+
+  const board: Board = yield select(selectBoard);
+  const collidingWords = board.getCollidingWords(word);
+
+  yield* searchDictionary([word.word, ...collidingWords.map((collidingWord) => collidingWord.word)]);
+}
+
+function* searchDictionary(words: string[]): AnyGenerator {
   const locale: Locale = yield select(selectLocale);
-  const uniqueWords = Array.from(new Set(result.words));
+  const uniqueWords = Array.from(new Set(words));
   const input = uniqueWords.join(LOCALE_FEATURES[locale].separator);
 
   if (!memoizedFindWordDefinitions.hasCache(locale, input)) {

package/src/state/selectors.ts

@@ -3,10 +3,13 @@ import { createSelector } from '@reduxjs/toolkit';
 import { unorderedArraysEqual } from '@/lib/unorderedArraysEqual';
 
 import { selectBoard } from './board';
+import { selectHoveredWord } from './hoveredWord';
 import { getRemainingTiles } from './lib';
 import { selectCharacters } from './rack';
+import { selectResultsResults } from './results';
 import { selectConfig, selectLocale } from './settings';
-import { selectLastSolvedParameters } from './solve';
+import { selectLastSolvedParameters, selectSolveError } from './solve';
+import { selectLastVerifiedBoard } from './verify';
 
 const selectHasBoardChanged = createSelector(
   [selectLastSolvedParameters, selectBoard],
@@ -29,6 +32,20 @@ export const selectAreResultsOutdated = createSelector(
   },
 );
 
+export const selectUpToDateResults = createSelector(
+  [selectResultsResults, selectAreResultsOutdated, selectSolveError],
+  (results, areResultsOutdated, solveError) => {
+    return results && !areResultsOutdated && !solveError ? results : null;
+  },
+);
+
+export const selectUpToDateHoveredWord = createSelector(
+  [selectHoveredWord, selectLastVerifiedBoard, selectBoard],
+  (hoveredWord, lastVerifiedBoard, board) => {
+    return hoveredWord && lastVerifiedBoard.equals(board) ? hoveredWord : null;
+  },
+);
+
 export const selectRemainingTiles = createSelector(
   [selectConfig, selectBoard, selectCharacters, selectLocale],
   getRemainingTiles,

package/src/state/store.ts

@@ -6,6 +6,7 @@ import { boardSlice } from './board';
 import { cellFiltersSlice } from './cellFilters';
 import { dictionarySlice } from './dictionary';
 import { hoveredTileSlice } from './hoveredTile';
+import { hoveredWordSlice } from './hoveredWord';
 import { i18nSlice } from './i18n';
 import { rackSlice } from './rack';
 import { resultsSlice } from './results';
@@ -23,6 +24,7 @@ export const store = configureStore({
     cellFilters: cellFiltersSlice.reducer,
     dictionary: dictionarySlice.reducer,
     hoveredTile: hoveredTileSlice.reducer,
+    hoveredWord: hoveredWordSlice.reducer,
     i18n: i18nSlice.reducer,
     rack: rackSlice.reducer,
     results: resultsSlice.reducer,

package/src/state/types.ts

@@ -3,6 +3,7 @@ import type { BoardState } from './board';
 import type { CellFiltersState } from './cellFilters';
 import type { DictionaryState } from './dictionary';
 import type { HoveredTileState } from './hoveredTile';
+import type { HoveredWordState } from './hoveredWord';
 import type { I18nState } from './i18n';
 import type { RackState } from './rack';
 import type { ResultsState } from './results';
@@ -16,6 +17,7 @@ export type RootState = {
   cellFilters: CellFiltersState;
   dictionary: DictionaryState;
   hoveredTile: HoveredTileState;
+  hoveredWord: HoveredWordState;
   i18n: I18nState;
   rack: RackState;
   results: ResultsState;

package/src/state/verify/initialState.ts

@@ -1,3 +1,5 @@
+import { SortDirection, WordColumnId } from '@/types';
+
 import { boardInitialState } from '../board';
 
 import type { VerifyState } from './types';
@@ -8,5 +10,10 @@ export const verifyInitialState: VerifyState = {
     board: boardInitialState,
   },
   invalidWords: [],
+  query: '',
+  sort: {
+    column: WordColumnId.Word,
+    direction: SortDirection.Ascending,
+  },
   validWords: [],
 };

package/src/state/verify/lib.test.ts

@@ -0,0 +1,55 @@
+import { SortDirection, type VerifiedWord, WordColumnId } from '../../types';
+
+import { getWordCoordinates, sortWords } from './lib';
+
+describe('getWordCoordinates', () => {
+  it('locates a horizontal word by its start cell', () => {
+    expect(getWordCoordinates(createWord({ x: 3, y: 3 }), 'original')).toBe('4D');
+  });
+
+  it('locates a vertical word by its start cell', () => {
+    expect(getWordCoordinates(createWord({ direction: 'vertical', x: 3, y: 3 }), 'original')).toBe('D4');
+  });
+});
+
+describe('sortWords', () => {
+  const cat = createWord({ word: 'cat', x: 3, y: 3 });
+  const zvq = createWord({ isValid: false, word: 'zvq', x: 3, y: 5 });
+
+  it('sorts by word', () => {
+    const sort = { column: WordColumnId.Word, direction: SortDirection.Ascending };
+
+    expect(sortWords([zvq, cat], sort, 'en-US', 'original')).toEqual([cat, zvq]);
+  });
+
+  it('sorts by coordinates', () => {
+    const sort = { column: WordColumnId.Coordinates, direction: SortDirection.Ascending };
+
+    expect(sortWords([zvq, cat], sort, 'en-US', 'original')).toEqual([cat, zvq]);
+  });
+
+  it('sorts invalid words first by validity', () => {
+    const sort = { column: WordColumnId.Validity, direction: SortDirection.Ascending };
+
+    expect(sortWords([cat, zvq], sort, 'en-US', 'original')).toEqual([zvq, cat]);
+  });
+
+  it('reverses the order when sorting descending', () => {
+    const sort = { column: WordColumnId.Word, direction: SortDirection.Descending };
+
+    expect(sortWords([cat, zvq], sort, 'en-US', 'original')).toEqual([zvq, cat]);
+  });
+
+  it('does not modify the input', () => {
+    const sort = { column: WordColumnId.Word, direction: SortDirection.Ascending };
+    const words = [zvq, cat];
+
+    sortWords(words, sort, 'en-US', 'original');
+
+    expect(words).toEqual([zvq, cat]);
+  });
+});
+
+function createWord(overrides: Partial<VerifiedWord>): VerifiedWord {
+  return { direction: 'horizontal', isValid: true, word: 'cat', x: 0, y: 0, ...overrides };
+}