@scrabble-solver/scrabble-solver 2.15.21 → 2.15.22

package/.next/trace-build

@@ -1 +1 @@
-[{"name":"run-typescript","duration":1730400,"timestamp":2793256903,"id":13,"parentId":1,"tags":{},"startTime":1775242438301,"traceId":"e97b27e6c0eb60ec"},{"name":"run-webpack","duration":5983835,"timestamp":2794989610,"id":15,"parentId":1,"tags":{},"startTime":1775242440034,"traceId":"e97b27e6c0eb60ec"},{"name":"static-check","duration":166818,"timestamp":2801042702,"id":2011,"parentId":1,"tags":{},"startTime":1775242446087,"traceId":"e97b27e6c0eb60ec"},{"name":"static-generation","duration":817182,"timestamp":2801217087,"id":2029,"parentId":1,"tags":{},"startTime":1775242446261,"traceId":"e97b27e6c0eb60ec"},{"name":"collect-build-traces","duration":3570908,"timestamp":2801209841,"id":2026,"parentId":1,"tags":{},"startTime":1775242446254,"traceId":"e97b27e6c0eb60ec"},{"name":"telemetry-flush","duration":20,"timestamp":2804781801,"id":2041,"parentId":1,"tags":{},"startTime":1775242449826,"traceId":"e97b27e6c0eb60ec"},{"name":"next-build","duration":11769581,"timestamp":2793012244,"id":1,"tags":{"buildMode":"default","version":"16.2.2","bundler":"webpack","has-custom-webpack-config":"true","use-build-worker":"false"},"startTime":1775242438057,"traceId":"e97b27e6c0eb60ec"}]
+[{"name":"run-typescript","duration":1892271,"timestamp":10741325368,"id":13,"parentId":1,"tags":{},"startTime":1775397253884,"traceId":"142e972b1da52edc"},{"name":"run-webpack","duration":6166870,"timestamp":10743220826,"id":15,"parentId":1,"tags":{},"startTime":1775397255780,"traceId":"142e972b1da52edc"},{"name":"static-check","duration":176351,"timestamp":10749456101,"id":2016,"parentId":1,"tags":{},"startTime":1775397262015,"traceId":"142e972b1da52edc"},{"name":"static-generation","duration":820346,"timestamp":10749640404,"id":2034,"parentId":1,"tags":{},"startTime":1775397262199,"traceId":"142e972b1da52edc"},{"name":"collect-build-traces","duration":3624593,"timestamp":10749632918,"id":2031,"parentId":1,"tags":{},"startTime":1775397262192,"traceId":"142e972b1da52edc"},{"name":"telemetry-flush","duration":17,"timestamp":10753258582,"id":2046,"parentId":1,"tags":{},"startTime":1775397265817,"traceId":"142e972b1da52edc"},{"name":"next-build","duration":12173853,"timestamp":10741084749,"id":1,"tags":{"buildMode":"default","version":"16.2.2","bundler":"webpack","has-custom-webpack-config":"true","use-build-worker":"false"},"startTime":1775397253644,"traceId":"142e972b1da52edc"}]

package/package.json

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

package/src/app-layout/AppLayoutContext.tsx

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

package/src/app-layout/index.ts

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

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

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

package/src/components/Board/Board.tsx

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

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

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

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

@@ -5,7 +5,8 @@ import { useMemo } from 'react';
 import { renderToString } from 'react-dom/server';
 import { Provider } from 'react-redux';
 
-import { useAppLayout, useMediaQueries } from 'hooks';
+import { useAppLayout } from 'app-layout';
+import { useMediaQueries } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
 import { Star } from 'icons';
 import { getTileSizes } from 'lib';

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

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

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

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

package/src/components/Dictionary/Dictionary.tsx

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

package/src/components/DictionaryInput/DictionaryInput.tsx

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

package/src/components/Logo/Logo.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import { forwardRef } from 'react';
 
-import { useAppLayout } from 'hooks';
+import { useAppLayout } from 'app-layout';
 import { LOGO_SRC } from 'parameters';
 
 interface Props {

package/src/components/NavButtons/NavButtons.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { type FunctionComponent, memo } from 'react';
 
-import { useAppLayout } from 'hooks';
+import { useAppLayout } from 'app-layout';
 import { CardChecklist, Cog, Eraser, Github, KeyboardFill, List, Sack } from 'icons';
 import { GITHUB_PROJECT_URL } from 'parameters';
 import { selectConfig, useTranslate, useTypedSelector } from 'state';

package/src/components/Rack/Rack.tsx

@@ -16,7 +16,7 @@ import {
 import useOnclickOutside from 'react-cool-onclickoutside';
 import { useDispatch } from 'react-redux';
 
-import { useAppLayout } from 'hooks';
+import { useAppLayout } from 'app-layout';
 import { LOCALE_FEATURES } from 'i18n';
 import { createKeyboardNavigation, extractCharacters, extractInputValue, getTileSizes, isCtrl } from 'lib';
 import { rackSlice, selectConfig, selectInputMode, selectLocale, selectRack, useTypedSelector } from 'state';

package/src/components/Rack/components/InputPrompt/InputPrompt.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import {
   type CSSProperties,
   type ChangeEventHandler,
-  type FormEventHandler,
+  type SubmitEventHandler,
   forwardRef,
   useCallback,
   useEffect,
@@ -10,7 +10,7 @@ import {
 } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { useAppLayout } from 'hooks';
+import { useAppLayout } from 'app-layout';
 import { rackSlice, selectConfig, useTranslate, useTypedSelector } from 'state';
 
 import styles from './InputPrompt.module.scss';
@@ -22,7 +22,7 @@ interface Props {
   value: string;
   onBlur: () => void;
   onChange: ChangeEventHandler<HTMLInputElement>;
-  onSubmit: FormEventHandler<HTMLFormElement>;
+  onSubmit: SubmitEventHandler<HTMLFormElement>;
 }
 
 const InputPromptBase = forwardRef<HTMLFormElement, Props>(
@@ -33,7 +33,7 @@ const InputPromptBase = forwardRef<HTMLFormElement, Props>(
     const config = useTypedSelector(selectConfig);
     const [inputRef, setInputRef] = useState<HTMLInputElement | null>(null);
 
-    const handleSubmit: FormEventHandler<HTMLFormElement> = useCallback(
+    const handleSubmit: SubmitEventHandler<HTMLFormElement> = useCallback(
       (event) => {
         event.preventDefault();
         const characters = extractRack(config, value);

package/src/components/Results/Header.tsx

@@ -1,6 +1,7 @@
 import { type FunctionComponent } from 'react';
 
-import { useAppLayout, useColumns } from 'hooks';
+import { useAppLayout } from 'app-layout';
+import { useColumns } from 'hooks';
 import { GeoAlt, OneTwoThree, Square, SquareA, SquareB, Squares, Words } from 'icons';
 import { RESULTS_COLUMN_WIDTH } from 'parameters';
 import { ResultColumnId } from 'types';

package/src/components/Results/Result.tsx

@@ -3,7 +3,8 @@ import { type FocusEventHandler, type MouseEventHandler, type ReactElement, useR
 import Highlighter from 'react-highlight-words';
 import { type RowComponentProps } from 'react-window';
 
-import { useAppLayout, useColumns } from 'hooks';
+import { useAppLayout } from 'app-layout';
+import { useColumns } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
 import { noop } from 'lib';
 import {

package/src/components/ResultsInput/ResultsInput.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { type ChangeEvent, type FormEventHandler, type FunctionComponent, useState } from 'react';
+import { type ChangeEvent, type FunctionComponent, type SubmitEventHandler, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { isRegExp } from 'lib';
@@ -27,7 +27,7 @@ export const ResultsInput: FunctionComponent<Props> = ({ className }) => {
     }
   };
 
-  const handleSubmit: FormEventHandler = (event) => {
+  const handleSubmit: SubmitEventHandler = (event) => {
     event.preventDefault();
   };
 

package/src/components/Solver/Solver.tsx

@@ -3,7 +3,8 @@ import classNames from 'classnames';
 import { type FunctionComponent, memo, type SyntheticEvent, useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { useAppLayout, useIsTouchDevice } from 'hooks';
+import { useAppLayout } from 'app-layout';
+import { useIsTouchDevice } from 'hooks';
 import {
   resultsSlice,
   selectAreResultsOutdated,

package/src/components/Tile/Tile.tsx

@@ -13,7 +13,7 @@ import {
   useRef,
 } from 'react';
 
-import { useAppLayout } from 'hooks';
+import { useAppLayout } from 'app-layout';
 import { getTileSizes, noop } from 'lib';
 import { selectLocale, useTypedSelector } from 'state';
 

package/src/hooks/index.ts

@@ -1,4 +1,3 @@
-export { useAppLayout } from './useAppLayout';
 export { useColumns } from './useColumns';
 export { useDirection } from './useDirection';
 export { useEffectOnce } from './useEffectOnce';

package/src/lib/isMac.ts

@@ -3,6 +3,5 @@ export const isMac = (): boolean => {
     return false;
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-deprecated
   return globalThis.navigator.platform.startsWith('Mac') || globalThis.navigator.platform === 'iPhone';
 };

package/src/modals/ResultsModal/ResultsModal.tsx

@@ -2,8 +2,8 @@ import { type Result } from '@scrabble-solver/types';
 import { type FunctionComponent, memo, useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
+import { useAppLayout } from 'app-layout';
 import { Button, Dictionary, Modal, Results } from 'components';
-import { useAppLayout } from 'hooks';
 import { Check, EyeFill } from 'icons';
 import { resultsSlice, selectProcessedResults, selectResultCandidate, useTranslate, useTypedSelector } from 'state';
 

package/src/pages/_app.tsx

@@ -4,6 +4,7 @@ import Head from 'next/head';
 import { type FunctionComponent } from 'react';
 import { Provider } from 'react-redux';
 
+import { AppLayoutProvider } from 'app-layout';
 import { SeoMessage } from 'components';
 import { store } from 'state';
 
@@ -77,11 +78,13 @@ const App: FunctionComponent<AppProps> = ({ Component, pageProps }) => (
     </Head>
 
     <Provider store={store}>
-      <SeoMessage />
+      <AppLayoutProvider>
+        <SeoMessage />
 
-      <FloatingDelayGroup delay={0}>
-        <Component {...pageProps} />
-      </FloatingDelayGroup>
+        <FloatingDelayGroup delay={0}>
+          <Component {...pageProps} />
+        </FloatingDelayGroup>
+      </AppLayoutProvider>
     </Provider>
   </>
 );

package/src/pages/index.tsx

@@ -1,7 +1,9 @@
+/* eslint-disable max-statements */
+
 import { isObject } from '@scrabble-solver/types';
 import fs from 'fs';
 import path from 'path';
-import { type FunctionComponent, useState } from 'react';
+import { type FunctionComponent, useCallback, useState } from 'react';
 import ReactModal from 'react-modal';
 import { useDispatch } from 'react-redux';
 
@@ -45,9 +47,26 @@ const Index: FunctionComponent<Props> = ({ version }) => {
     words: false,
   });
 
-  const patchModals = (patch: Partial<Record<Modal, boolean>>) => {
+  const patchModals = useCallback((patch: Partial<Record<Modal, boolean>>) => {
     setModals((current) => ({ ...current, ...patch }));
-  };
+  }, []);
+
+  const handleClear = useCallback(() => dispatch(reset()), [dispatch]);
+
+  const handleShowDictionary = useCallback(() => patchModals({ dictionary: true }), [patchModals]);
+  const handleShowKeyMap = useCallback(() => patchModals({ keyMap: true }), [patchModals]);
+  const handleShowMenu = useCallback(() => patchModals({ menu: true }), [patchModals]);
+  const handleShowRemainingTiles = useCallback(() => patchModals({ remainingTiles: true }), [patchModals]);
+  const handleShowResults = useCallback(() => patchModals({ results: true }), [patchModals]);
+  const handleShowSettings = useCallback(() => patchModals({ settings: true }), [patchModals]);
+  const handleShowWords = useCallback(() => patchModals({ words: true }), [patchModals]);
+  const handleCloseDictionary = useCallback(() => patchModals({ dictionary: false }), [patchModals]);
+  const handleCloseKeyMap = useCallback(() => patchModals({ keyMap: false }), [patchModals]);
+  const handleCloseMenu = useCallback(() => patchModals({ menu: false }), [patchModals]);
+  const handleCloseRemainingTiles = useCallback(() => patchModals({ remainingTiles: false }), [patchModals]);
+  const handleCloseResults = useCallback(() => patchModals({ results: false }), [patchModals]);
+  const handleCloseSettings = useCallback(() => patchModals({ settings: false }), [patchModals]);
+  const handleCloseWords = useCallback(() => patchModals({ words: false }), [patchModals]);
 
   useDirection(LOCALE_FEATURES[locale].direction);
   useLanguage(locale);
@@ -78,40 +97,42 @@ const Index: FunctionComponent<Props> = ({ version }) => {
           </div>
 
           <NavButtons
-            onClear={() => dispatch(reset())}
-            onShowKeyMap={() => patchModals({ keyMap: true })}
-            onShowMenu={() => patchModals({ menu: true })}
-            onShowRemainingTiles={() => patchModals({ remainingTiles: true })}
-            onShowSettings={() => patchModals({ settings: true })}
-            onShowWords={() => patchModals({ words: true })}
+            onClear={handleClear}
+            onShowKeyMap={handleShowKeyMap}
+            onShowMenu={handleShowMenu}
+            onShowRemainingTiles={handleShowRemainingTiles}
+            onShowSettings={handleShowSettings}
+            onShowWords={handleShowWords}
           />
         </div>
       </nav>
 
-      <Solver className={styles.solver} onShowResults={() => patchModals({ results: true })} />
+      <main>
+        <Solver className={styles.solver} onShowResults={handleShowResults} />
+      </main>
 
       <MenuModal
         isOpen={modals.menu}
-        onClose={() => patchModals({ menu: false })}
-        onShowDictionary={() => patchModals({ dictionary: true })}
-        onShowRemainingTiles={() => patchModals({ remainingTiles: true })}
-        onShowSettings={() => patchModals({ settings: true })}
-        onShowWords={() => patchModals({ words: true })}
+        onClose={handleCloseMenu}
+        onShowDictionary={handleShowDictionary}
+        onShowRemainingTiles={handleShowRemainingTiles}
+        onShowSettings={handleShowSettings}
+        onShowWords={handleShowWords}
       />
 
-      <SettingsModal isOpen={modals.settings} onClose={() => patchModals({ settings: false })} />
+      <SettingsModal isOpen={modals.settings} onClose={handleCloseSettings} />
 
-      <KeyMapModal isOpen={modals.keyMap} onClose={() => patchModals({ keyMap: false })} />
+      <KeyMapModal isOpen={modals.keyMap} onClose={handleCloseKeyMap} />
 
-      <WordsModal isOpen={modals.words} onClose={() => patchModals({ words: false })} />
+      <WordsModal isOpen={modals.words} onClose={handleCloseWords} />
 
       {config.supportsRemainingTiles && (
-        <RemainingTilesModal isOpen={modals.remainingTiles} onClose={() => patchModals({ remainingTiles: false })} />
+        <RemainingTilesModal isOpen={modals.remainingTiles} onClose={handleCloseRemainingTiles} />
       )}
 
-      <ResultsModal isOpen={modals.results} onClose={() => patchModals({ results: false })} />
+      <ResultsModal isOpen={modals.results} onClose={handleCloseResults} />
 
-      <DictionaryModal isOpen={modals.dictionary} onClose={() => patchModals({ dictionary: false })} />
+      <DictionaryModal isOpen={modals.dictionary} onClose={handleCloseDictionary} />
     </>
   );
 };

package/tsconfig.json

@@ -11,6 +11,7 @@
     "noEmit": true,
     "paths": {
       "api": ["./src/api"],
+      "app-layout": ["./src/app-layout"],
       "components": ["./src/components"],
       "hooks": ["./src/hooks"],
       "icons": ["./src/icons"],
@@ -28,10 +29,10 @@
     "resolveJsonModule": true,
     "rootDir": "./src",
     "skipLibCheck": true,
-    "typeRoots": ["./node_modules/@types", "./src/@types"],
+    "typeRoots": ["./node_modules/@types", "../../node_modules/@types", "./src/@types"],
     "incremental": true
   },
-  "exclude": [ "node_modules", "**/*.test.ts"],
+  "exclude": ["node_modules", "**/*.test.ts"],
   "files": ["./src/@types/scss.d.ts", "./src/@types/svg.d.ts"],
   "include": ["next-env.d.ts", "./src"]
 }