@scrabble-solver/scrabble-solver 2.17.0 → 2.18.1

package/.next/trace-build

@@ -1 +1 @@
-[{"name":"run-typescript","duration":169366,"timestamp":26528773671,"id":13,"parentId":1,"tags":{},"startTime":1786055166126,"traceId":"c15733d8168a03e3"},{"name":"run-webpack","duration":6699896,"timestamp":26528944927,"id":15,"parentId":1,"tags":{},"startTime":1786055166298,"traceId":"c15733d8168a03e3"},{"name":"static-check","duration":225589,"timestamp":26535727438,"id":2014,"parentId":1,"tags":{},"startTime":1786055173080,"traceId":"c15733d8168a03e3"},{"name":"static-generation","duration":240386,"timestamp":26535961329,"id":2032,"parentId":1,"tags":{},"startTime":1786055173314,"traceId":"c15733d8168a03e3"},{"name":"collect-build-traces","duration":4253048,"timestamp":26535953473,"id":2029,"parentId":1,"tags":{},"startTime":1786055173306,"traceId":"c15733d8168a03e3"},{"name":"telemetry-flush","duration":19,"timestamp":26540207730,"id":2039,"parentId":1,"tags":{},"startTime":1786055177561,"traceId":"c15733d8168a03e3"},{"name":"next-build","duration":11677867,"timestamp":26528529886,"id":1,"tags":{"buildMode":"default","version":"16.3.0","bundler":"webpack","has-custom-webpack-config":"true","use-build-worker":"false"},"startTime":1786055165883,"traceId":"c15733d8168a03e3"}]
+[{"name":"run-typescript","duration":167919,"timestamp":15741743485,"id":13,"parentId":1,"tags":{},"startTime":1786879882182,"traceId":"09ff88835bed4614"},{"name":"run-webpack","duration":6553601,"timestamp":15741913668,"id":15,"parentId":1,"tags":{},"startTime":1786879882352,"traceId":"09ff88835bed4614"},{"name":"static-check","duration":184131,"timestamp":15748541724,"id":2019,"parentId":1,"tags":{},"startTime":1786879888980,"traceId":"09ff88835bed4614"},{"name":"static-generation","duration":249410,"timestamp":15748736408,"id":2037,"parentId":1,"tags":{},"startTime":1786879889175,"traceId":"09ff88835bed4614"},{"name":"collect-build-traces","duration":4410264,"timestamp":15748726538,"id":2034,"parentId":1,"tags":{},"startTime":1786879889165,"traceId":"09ff88835bed4614"},{"name":"telemetry-flush","duration":21,"timestamp":15753138117,"id":2044,"parentId":1,"tags":{},"startTime":1786879893576,"traceId":"09ff88835bed4614"},{"name":"next-build","duration":11637473,"timestamp":15741500668,"id":1,"tags":{"buildMode":"default","version":"16.3.1","bundler":"webpack","has-custom-webpack-config":"true","use-build-worker":"false"},"startTime":1786879881939,"traceId":"09ff88835bed4614"}]

package/empty-module.js

@@ -0,0 +1,2 @@
+// Stub for modules webpack is configured to drop from the bundle (see next.config.js)
+module.exports = {};

package/next.config.js

@@ -22,19 +22,30 @@ module.exports = {
       { source: '/not-found', headers: [cacheControl] },
     ];
   },
-  webpack(config, { isServer, dev }) {
+  webpack(config, { isServer, dev, webpack }) {
     config.module.rules.push({
       test: /\.svg$/i,
       issuer: /\.[jt]sx?$/,
       use: ['@svgr/webpack'],
     });
 
+    if (!isServer) {
+      // Next unconditionally bundles ES2019-2022 polyfills into its client runtime,
+      // but every browserslist target implements those methods natively.
+      config.plugins.push(
+        new webpack.NormalModuleReplacementPlugin(
+          /polyfills\/polyfill-module/,
+          path.join(__dirname, 'empty-module.js'),
+        ),
+      );
+    }
+
     if (!isServer && !dev) {
       config.plugins.push(
         new WorkboxPlugin.InjectManifest({
           swSrc: path.join(__dirname, 'src/service-worker/index.ts'),
           swDest: path.join(__dirname, 'public/service-worker.js'),
-          exclude: [/\.map$/, /\.next/, /_next/, /manifest/, /\.htaccess$/, /.*\/static\/.*/, /service-worker\.js$/],
+          exclude: [/\.css$/, /\.map$/, /service-worker\.js$/],
         }),
       );
     }

package/package.json

@@ -1,7 +1,14 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.17.0",
-  "description": "Scrabble Solver 2 - App",
+  "version": "2.18.1",
+  "description": "Scrabble Solver web app: free word finder and board solver for Scrabble, Super Scrabble, Literaki, and more.",
+  "keywords": [
+    "scrabble",
+    "word-finder",
+    "solver",
+    "nextjs",
+    "react"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/kamilmielnik/scrabble-solver.git"
@@ -11,36 +18,55 @@
     "email": "kamil@kamilmielnik.com",
     "url": "https://kamilmielnik.com"
   },
-  "license": "CC BY-NC-ND 4.0",
+  "license": "CC-BY-NC-ND-4.0",
   "bugs": {
     "url": "https://github.com/kamilmielnik/scrabble-solver/issues"
   },
   "homepage": "https://scrabble-solver.org",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss",
+    "src/pages/**"
+  ],
+  "browserslist": [
+    "chrome >= 100",
+    "and_chr >= 100",
+    "edge >= 100",
+    "firefox >= 100",
+    "safari >= 15.4",
+    "ios_saf >= 15.4",
+    "samsung >= 17",
+    "opera >= 86",
+    "op_mob >= 70",
+    "android >= 100",
+    "and_ff >= 100"
+  ],
   "scripts": {
-    "build": "env-cmd next build --webpack",
-    "clean": "rimraf .next/",
+    "build": "bun run generate-scss-types && env-cmd next build --webpack",
+    "clean": "rimraf --glob .next/ 'src/**/*.module.scss.d.ts'",
     "debug": "NODE_OPTIONS='--inspect' next dev --webpack",
-    "dev": "env-cmd next dev --webpack",
+    "dev": "concurrently -n scss,next 'bun scripts/generate-scss-types.ts --watch' 'env-cmd next dev --webpack'",
+    "generate-scss-types": "bun scripts/generate-scss-types.ts",
     "start": "env-cmd next start -p 3333",
     "test": "bun test --timeout 180000 src",
-    "type-check": "tsc --noEmit"
+    "type-check": "bun run generate-scss-types && tsc --noEmit"
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.20",
     "@kamilmielnik/gaddag": "^2.0.0",
     "@reduxjs/toolkit": "^2.12.0",
-    "@scrabble-solver/configs": "^2.17.0",
-    "@scrabble-solver/constants": "^2.17.0",
-    "@scrabble-solver/dictionaries": "^2.17.0",
-    "@scrabble-solver/logger": "^2.17.0",
-    "@scrabble-solver/solver": "^2.17.0",
-    "@scrabble-solver/types": "^2.17.0",
-    "@scrabble-solver/word-definitions": "^2.17.0",
+    "@scrabble-solver/configs": "^2.18.1",
+    "@scrabble-solver/constants": "^2.18.1",
+    "@scrabble-solver/dictionaries": "^2.18.1",
+    "@scrabble-solver/logger": "^2.18.1",
+    "@scrabble-solver/solver": "^2.18.1",
+    "@scrabble-solver/types": "^2.18.1",
+    "@scrabble-solver/word-definitions": "^2.18.1",
     "classnames": "^2.5.1",
     "env-cmd": "^11.0.0",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
-    "next": "^16.3.0",
+    "next": "^16.3.1",
     "normalize.css": "^8.0.1",
     "react": "^19.2.8",
     "react-cool-onclickoutside": "^1.7.0",
@@ -51,7 +77,6 @@
     "react-window": "^2.3.0",
     "redux-saga": "^1.5.1",
     "store2": "^2.14.4",
-    "transliteration": "^2.6.1",
     "use-debounce": "^10.1.1",
     "workbox-expiration": "^7.4.1",
     "workbox-precaching": "^7.4.1",
@@ -66,7 +91,8 @@
     "@types/react-highlight-words": "^0.20.1",
     "@types/react-modal": "^3.16.3",
     "@types/react-portal": "^4.0.7",
+    "postcss": "^8.5.26",
     "sass": "^1.102.0"
   },
-  "gitHead": "32234a6340029d39dde134edc9e71ff913836931"
+  "gitHead": "abd1636f7e2235d0ee06dbf6197de46b703feb44"
 }

package/public/llms.txt

@@ -0,0 +1,11 @@
+# Scrabble Solver
+
+> Free and open-source analysis tool for Scrabble, Super Scrabble, Scrabble Duel, Letter League, Crossplay, Literaki, and Kelimelik. Quickly finds top-scoring words for a given board and rack in English, French, German, Persian, Polish, Romanian, Spanish, and Turkish.
+
+Scrabble Solver is a single-page web app. Enter the board state and your tiles to get every legal move ranked by score, check whether a word is allowed in the selected language's dictionary, and look up word definitions. Once a dictionary is cached, solving also works offline.
+
+## Resources
+
+- [Web app](https://scrabble-solver.org/): the solver itself, free and with no sign-up
+- [Source code](https://github.com/kamilmielnik/scrabble-solver): GitHub repository with documentation and issue tracker
+- [npm package](https://www.npmjs.com/package/scrabble-solver): run the app locally with `bunx scrabble-solver@latest`

package/public/robots.txt

@@ -0,0 +1,5 @@
+User-agent: *
+Allow: /
+Disallow: /api/
+
+Sitemap: https://scrabble-solver.org/sitemap.xml

package/public/site.webmanifest

@@ -0,0 +1,14 @@
+{
+  "name": "Scrabble Solver",
+  "short_name": "Scrabble Solver",
+  "description": "Free Scrabble word finder and board solver.",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#f4f4f4",
+  "theme_color": "#efe3ae",
+  "icons": [
+    { "src": "/icons/favicon-196x196.png", "sizes": "196x196", "type": "image/png" },
+    { "src": "/icons/favicon-128.png", "sizes": "128x128", "type": "image/png" },
+    { "src": "/icons/favicon.svg", "sizes": "any", "type": "image/svg+xml" }
+  ]
+}

package/scripts/generate-scss-types.ts

@@ -0,0 +1,112 @@
+import { existsSync, readdirSync, readFileSync, unlinkSync, watch, writeFileSync } from 'node:fs';
+import path from 'node:path';
+import postcss from 'postcss';
+import * as sass from 'sass';
+
+const packageDirectory = path.join(__dirname, '..');
+const sourceDirectory = path.join(packageDirectory, 'src');
+const loadPaths = [sourceDirectory, path.join(packageDirectory, '../../node_modules/include-media/dist')];
+const compiler = sass.initCompiler();
+
+generateAll();
+
+if (process.argv.includes('--watch')) {
+  watchModuleStylesheets();
+} else {
+  compiler.dispose();
+}
+
+function generateAll() {
+  const files = findModuleStylesheets();
+
+  for (const file of files) {
+    generate(file);
+  }
+
+  console.log(`Generated type definitions for ${files.length} .module.scss files`);
+}
+
+function findModuleStylesheets(): string[] {
+  return readdirSync(sourceDirectory, { encoding: 'utf8', recursive: true })
+    .filter((file) => file.endsWith('.module.scss'))
+    .sort()
+    .map((file) => path.join(sourceDirectory, file));
+}
+
+function watchModuleStylesheets() {
+  console.log(`Watching ${sourceDirectory} for .module.scss changes`);
+
+  watch(sourceDirectory, { recursive: true }, (_event, filename) => {
+    if (!filename || !filename.endsWith('.module.scss')) {
+      return;
+    }
+
+    const file = path.join(sourceDirectory, filename);
+
+    try {
+      if (existsSync(file)) {
+        generate(file);
+      } else if (existsSync(getTypesFilepath(file))) {
+        unlinkSync(getTypesFilepath(file));
+      }
+    } catch (error) {
+      console.error(String(error));
+    }
+  });
+}
+
+function generate(file: string) {
+  const { css } = compiler.compile(file, { loadPaths, quietDeps: true });
+  const content = formatTypesFile(extractClassNames(css));
+  const typesFilepath = getTypesFilepath(file);
+
+  if (!existsSync(typesFilepath) || readFileSync(typesFilepath, 'utf8') !== content) {
+    writeFileSync(typesFilepath, content);
+    console.log(`Generated ${path.relative(packageDirectory, typesFilepath)}`);
+  }
+}
+
+function extractClassNames(css: string): string[] {
+  const classNames = new Set<string>();
+  const stylesheet = postcss.parse(css);
+
+  stylesheet.walkAtRules('keyframes', (atRule) => {
+    classNames.add(atRule.params);
+  });
+
+  stylesheet.walkRules((rule) => {
+    if (rule.selector === ':export') {
+      rule.walkDecls((declaration) => {
+        classNames.add(declaration.prop);
+      });
+    } else {
+      const localSelector = rule.selector.replace(/:global\([^)]*\)/g, '');
+
+      for (const [, className] of localSelector.matchAll(/\.(-?[A-Za-z_][\w-]*)/g)) {
+        classNames.add(className);
+      }
+    }
+  });
+
+  return [...classNames].sort();
+}
+
+function formatTypesFile(classNames: string[]): string {
+  return [
+    '// Generated by scripts/generate-scss-types.ts - do not edit.',
+    'declare const styles: {',
+    ...classNames.map((className) => `  readonly ${formatKey(className)}: string;`),
+    '};',
+    '',
+    'export default styles;',
+    '',
+  ].join('\n');
+}
+
+function formatKey(className: string): string {
+  return /^[A-Za-z_$][\w$]*$/.test(className) ? className : `'${className}'`;
+}
+
+function getTypesFilepath(file: string): string {
+  return `${file}.d.ts`;
+}

package/src/@types/scss.d.ts

@@ -1,9 +1,6 @@
-declare module '*.module.scss' {
-  const classesMap: Record<string, string>;
-  export default classesMap;
-}
-
-declare module '*.scss' {
-  const classesMap: Record<string, string>;
-  export default classesMap;
-}
+/**
+ * Covers side-effect imports of global stylesheets. Imports of *.module.scss
+ * files resolve to their sibling .d.ts files, generated by
+ * scripts/generate-scss-types.ts (run via the build, type-check, and dev scripts).
+ */
+declare module '*.scss' {}

package/src/@types/svg.d.ts

@@ -1,4 +1,4 @@
-declare module 'icons/*.svg' {
+declare module '@/icons/*.svg' {
   import { FunctionComponent, SVGAttributes } from 'react';
 
   const component: FunctionComponent<SVGAttributes<SVGElement>>;

package/src/components/Alert/Alert.module.scss.d.ts

@@ -0,0 +1,13 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly alert: string;
+  readonly content: string;
+  readonly error: string;
+  readonly icon: string;
+  readonly iconContainer: string;
+  readonly info: string;
+  readonly success: string;
+  readonly warning: string;
+};
+
+export default styles;

package/src/components/Alert/Alert.tsx

@@ -1,7 +1,10 @@
 import classNames from 'classnames';
 import { type FunctionComponent, type HTMLProps, type ReactNode, type SVGAttributes } from 'react';
 
-import { Check, CrossCircleFill, ExclamationTriangleFill, InfoCircleFill } from '@/icons';
+import Check from '@/icons/Check.svg';
+import CrossCircleFill from '@/icons/CrossCircleFill.svg';
+import ExclamationTriangleFill from '@/icons/ExclamationTriangleFill.svg';
+import InfoCircleFill from '@/icons/InfoCircleFill.svg';
 
 import styles from './Alert.module.scss';
 

package/src/components/Badge/Badge.module.scss.d.ts

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

package/src/components/Board/Board.module.scss

@@ -2,12 +2,19 @@
 @use 'styles/mixins' as *;
 
 .board {
+  --tile-size: var(--cell-size);
+  --coordinate-track-size: calc(var(--coordinate-size) - var(--border--width));
+
   display: grid;
+  grid-template-columns: var(--coordinate-track-size) repeat(var(--board-cols), var(--cell-size));
+  grid-template-rows: var(--coordinate-track-size) repeat(var(--board-rows), var(--cell-size));
   gap: var(--border--width);
   box-shadow: var(--box-shadow);
   background-color: white;
+  background-size: 100% 100%;
   border: var(--border);
   border-radius: var(--border--radius);
+  font-size: max(14px, calc(var(--cell-size) * 0.6));
 }
 
 .floating {
@@ -21,6 +28,8 @@
 .focus {
   @include focus-effect;
 
+  width: var(--cell-size);
+  height: var(--cell-size);
   cursor: text;
 
   &::after {
@@ -70,4 +79,5 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  font-size: calc(0.3 * var(--cell-size));
 }

package/src/components/Board/Board.module.scss.d.ts

@@ -0,0 +1,17 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly board: string;
+  readonly coordinate: string;
+  readonly floating: string;
+  readonly focus: string;
+  readonly hidden: string;
+  readonly hide: string;
+  readonly icon: string;
+  readonly iconBackground: string;
+  readonly iconContainer: string;
+  readonly rotate: string;
+  readonly show: string;
+  readonly wave: string;
+};
+
+export default styles;

package/src/components/Board/Board.tsx

@@ -3,21 +3,22 @@
 import { FloatingPortal, type ReferenceType } from '@floating-ui/react';
 import { EMPTY_CELL } from '@scrabble-solver/constants';
 import classNames from 'classnames';
-import { type CSSProperties, type FocusEventHandler, type FunctionComponent, useCallback, useState } from 'react';
+import { type FocusEventHandler, type FunctionComponent, useCallback, useState } from 'react';
 import useOnclickOutside from 'react-cool-onclickoutside';
 import { useDispatch } from 'react-redux';
 
-import { useAppLayout } from '@/app-layout';
-import { LOCALE_FEATURES } from '@/i18n';
-import { TRANSITION } from '@/parameters';
+import { LOCALE_FEATURES } from '@/i18n/constants';
 import {
   boardSlice,
   cellFiltersSlice,
   selectCellFilters,
+  selectConfig,
+  selectHoveredCharacter,
   selectInputMode,
   selectLocale,
   selectShowCoordinates,
   solveSlice,
+  useTranslate,
   useTypedSelector,
 } from '@/state';
 
@@ -33,13 +34,15 @@ interface Props {
 
 export const Board: FunctionComponent<Props> = ({ className }) => {
   const dispatch = useDispatch();
+  const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
+  const config = useTypedSelector(selectConfig);
   const rows = useTypedSelector(selectRowsWithCandidate);
   const reachableCells = useTypedSelector(selectReachableCells);
   const inputMode = useTypedSelector(selectInputMode);
   const cellFilters = useTypedSelector(selectCellFilters);
   const showCoordinates = useTypedSelector(selectShowCoordinates);
-  const { cellSize, coordinatesFontSize, coordinatesSize } = useAppLayout();
+  const hoveredCharacter = useTypedSelector(selectHoveredCharacter);
   const [
     { activeIndex, direction, inputRefs },
     { insertValue, onChange, onDirectionToggle, onFocus, onKeyDown, onPaste },
@@ -47,7 +50,6 @@ export const Board: FunctionComponent<Props> = ({ className }) => {
   const boardStyle = useBoardStyle();
   const [hasFocus, setHasFocus] = useState(false);
   const [showInputPrompt, setShowInputPrompt] = useState(false);
-  const [transition, setTransition] = useState<CSSProperties['transition']>(TRANSITION);
   const inputRef = inputRefs[activeIndex.y][activeIndex.x];
   const cell = rows[activeIndex.y][activeIndex.x];
   const floatingActions = useFloatingActions();
@@ -80,8 +82,6 @@ export const Board: FunctionComponent<Props> = ({ className }) => {
 
   const handleFocus: typeof onFocus = useCallback(
     (newX, newY) => {
-      const isFirstFocus = !hasFocus;
-      const originalTransition = floatingActions.refs.floating.current?.style.transition || '';
       const newInputRef = inputRefs[newY][newX].current;
       const newTileElement = newInputRef?.parentElement || null;
 
@@ -89,16 +89,8 @@ export const Board: FunctionComponent<Props> = ({ className }) => {
       onFocus(newX, newY);
       setHasFocus(true);
       setShowInputPrompt(false);
-
-      if (isFirstFocus) {
-        setTransition('none');
-
-        globalThis.setTimeout(() => {
-          setTransition(originalTransition);
-        }, 0);
-      }
     },
-    [floatingActions.refs.floating, hasFocus, inputRefs, onFocus, updateFloatingReference],
+    [inputRefs, onFocus, updateFloatingReference],
   );
 
   const handleEnterWord = useCallback(() => {
@@ -153,16 +145,17 @@ export const Board: FunctionComponent<Props> = ({ className }) => {
       <BoardPure
         className={className}
         cellFilters={cellFilters}
-        cellSize={cellSize}
-        coordinatesFontSize={coordinatesFontSize}
-        coordinatesSize={coordinatesSize}
+        config={config}
         direction={LOCALE_FEATURES[locale].direction}
+        hoveredCharacter={hoveredCharacter}
         inputRefs={inputRefs}
+        locale={locale}
         reachableCells={reachableCells}
         ref={ref}
         rows={rows}
         showCoordinates={showCoordinates}
         style={boardStyle}
+        translate={translate}
         onBlur={handleBlur}
         onChange={onChange}
         onFocus={handleFocus}
@@ -178,14 +171,11 @@ export const Board: FunctionComponent<Props> = ({ className }) => {
           ref={floatingFocus.refs.setFloating}
           style={{
             position: floatingFocus.strategy,
-            top: floatingFocus.y + cellSize,
+            top: `calc(${floatingFocus.y ?? 0}px + var(--cell-size))`,
             left: floatingFocus.x,
             display: floatingFocus.isPositioned ? 'block' : 'none',
-            width: cellSize,
-            height: cellSize,
             opacity: hasFocus ? 1 : 0,
             visibility: floatingFocus.x === null || floatingFocus.y === null ? 'hidden' : 'visible',
-            transition,
           }}
           tabIndex={0}
         />
@@ -200,7 +190,6 @@ export const Board: FunctionComponent<Props> = ({ className }) => {
               position: floatingActions.strategy,
               top: floatingActions.y ?? 0,
               left: floatingActions.x ?? 0,
-              transition,
             }}
             onDirectionToggle={handleToggleDirection}
             onEnterWord={handleEnterWord}
@@ -219,7 +208,6 @@ export const Board: FunctionComponent<Props> = ({ className }) => {
               position: floatingInputPrompt.strategy,
               top: floatingInputPrompt.y ?? 0,
               left: floatingInputPrompt.x ?? 0,
-              transition,
             }}
             onDirectionToggle={handleToggleDirection}
             onSubmit={handleInsertWord}