scrabble-solver 2.15.25 → 2.16.0-alpha.1

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

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 

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

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 .resultsInput {
   @include focus-effect;

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

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 .solver {
   --spacing: var(--spacing--xl);

package/packages/scrabble-solver/src/components/Solver/components/InsertButton/InsertButton.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 .insertButton {
   @include media('>=s') {

package/packages/scrabble-solver/src/components/Solver/components/ResultCandidatePicker/ResultCandidatePicker.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 .resultCandidatePicker {
   position: relative;

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

@@ -1,4 +1,4 @@
-@import 'styles/animations';
+@use 'styles/animations';
 
 .spinner {
   width: var(--button--icon--size);

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

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 .tile {
   --background-color: transparent;

package/packages/scrabble-solver/src/hooks/useLocalStorage.ts

@@ -1,33 +1,11 @@
 import { useEffect } from 'react';
 
-import {
-  localStorage,
-  selectAutoGroupTiles,
-  selectBoard,
-  selectGame,
-  selectInputMode,
-  selectLocale,
-  selectRack,
-  selectShowCoordinates,
-  selectRemoveCellFilters,
-  useTypedSelector,
-} from '@/state';
+import { localStorage, selectBoard, selectRack, selectSettings, useTypedSelector } from '@/state';
 
 export const useLocalStorage = () => {
-  const autoGroupTiles = useTypedSelector(selectAutoGroupTiles);
   const board = useTypedSelector(selectBoard);
-  const game = useTypedSelector(selectGame);
-  const inputMode = useTypedSelector(selectInputMode);
-  const locale = useTypedSelector(selectLocale);
   const rack = useTypedSelector(selectRack);
-  const showCoordinates = useTypedSelector(selectShowCoordinates);
-  const removeCellFilters = useTypedSelector(selectRemoveCellFilters);
-
-  useEffect(() => {
-    if (autoGroupTiles) {
-      localStorage.setAutoGroupTiles(autoGroupTiles);
-    }
-  }, [autoGroupTiles]);
+  const settings = useTypedSelector(selectSettings);
 
   useEffect(() => {
     if (board) {
@@ -35,24 +13,6 @@ export const useLocalStorage = () => {
     }
   }, [board]);
 
-  useEffect(() => {
-    if (game) {
-      localStorage.setGame(game);
-    }
-  }, [game]);
-
-  useEffect(() => {
-    if (inputMode) {
-      localStorage.setInputMode(inputMode);
-    }
-  }, [inputMode]);
-
-  useEffect(() => {
-    if (locale) {
-      localStorage.setLocale(locale);
-    }
-  }, [locale]);
-
   useEffect(() => {
     if (rack) {
       localStorage.setRack(rack);
@@ -60,14 +20,6 @@ export const useLocalStorage = () => {
   }, [rack]);
 
   useEffect(() => {
-    if (showCoordinates) {
-      localStorage.setShowCoordinates(showCoordinates);
-    }
-  }, [showCoordinates]);
-
-  useEffect(() => {
-    if (removeCellFilters) {
-      localStorage.setRemoveCellFilters(removeCellFilters);
-    }
-  }, [removeCellFilters]);
+    localStorage.setSettings(settings);
+  }, [settings]);
 };

package/packages/scrabble-solver/src/lib/isMac.ts

@@ -3,5 +3,5 @@ export const isMac = (): boolean => {
     return false;
   }
 
-  return globalThis.navigator.platform.startsWith('Mac') || globalThis.navigator.platform === 'iPhone';
+  return globalThis.navigator.platform.startsWith('Mac') || globalThis.navigator.platform.startsWith('iPhone');
 };

package/packages/scrabble-solver/src/modals/MenuModal/MenuModal.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 .button {
   width: 100%;

package/packages/scrabble-solver/src/modals/RemainingTilesModal/components/Character/Character.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 .character {
   display: flex;

package/packages/scrabble-solver/src/modals/ResultsModal/ResultsModal.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 .content {
   position: relative;

package/packages/scrabble-solver/src/modals/SettingsModal/components/LocaleSetting/LocaleSetting.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 .option {
   & + & {

package/packages/scrabble-solver/src/parameters/index.ts

@@ -1,38 +1,39 @@
+import variables from '@/styles/variables.module.scss';
 import { ResultColumnId } from '@/types';
 
 export const BREAKPOINTS = {
-  xs: 480,
-  s: 768,
-  m: 992,
-  l: 1200,
-  xl: 1400,
+  xs: Number(variables.breakpointXs),
+  s: Number(variables.breakpointS),
+  m: Number(variables.breakpointM),
+  l: Number(variables.breakpointL),
+  xl: Number(variables.breakpointXl),
 };
 
 export const TRANSITION = 'var(--transition)';
 
 export const GITHUB_PROJECT_URL = 'https://github.com/kamilmielnik/scrabble-solver';
 
-export const TRANSITION_DURATION = 100;
-export const TRANSITION_DURATION_LONG = 250;
-
-export const COLOR_BLUE = '#c7d8f9';
-export const COLOR_GREEN = '#bae3ba';
-export const COLOR_RED = '#f7c2aa';
-export const COLOR_YELLOW = '#efe3ae';
-
-export const COLOR_BONUS_CHARACTER_1 = '#f7f1d6';
-export const COLOR_BONUS_CHARACTER_2 = '#d6ebd6';
-export const COLOR_BONUS_CHARACTER_3 = '#dde4f6';
-export const COLOR_BONUS_CHARACTER_5 = '#fbe0d4';
-export const COLOR_BONUS_CHARACTER_MULTIPLIER_2 = '#b8d5ed';
-export const COLOR_BONUS_CHARACTER_MULTIPLIER_3 = '#86aed1';
-export const COLOR_BONUS_CHARACTER_MULTIPLIER_4 = '#3477b2';
-export const COLOR_BONUS_START = '#b284b8';
-export const COLOR_BONUS_WORD_MULTIPLIER_2 = '#fbc997';
-export const COLOR_BONUS_WORD_MULTIPLIER_3 = '#f19393';
-export const COLOR_BONUS_WORD_MULTIPLIER_4 = '#ed5e5e';
-export const COLOR_FILTERED = '#444';
-export const COLOR_BACKGROUND = '#f4f4f4';
+export const TRANSITION_DURATION = Number(variables.transitionDuration);
+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_BACKGROUND = variables.colorBackground;
 
 export const COLOR_BONUS_CHARACTER: Record<number, string> = {
   1: COLOR_BONUS_CHARACTER_1,
@@ -53,11 +54,11 @@ export const COLOR_BONUS_WORD: Record<number, string> = {
   4: COLOR_BONUS_WORD_MULTIPLIER_4,
 };
 
-export const SPACING_XS = 2;
-export const SPACING_S = 5;
-export const SPACING_M = 10;
-export const SPACING_L = 20;
-export const SPACING_XL = 40;
+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;
@@ -70,24 +71,24 @@ 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 = '#cdcdcd';
-export const BORDER_COLOR_LIGHT = '#d9d9d9';
-export const BORDER_RADIUS = 5;
-export const BORDER_WIDTH = 1;
+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 = 24;
+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 = 260;
-export const DICTIONARY_HEIGHT_MOBILE = 110;
+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 = 60;
-export const LOGO_HEIGHT_SMALL = 48;
+export const LOGO_HEIGHT = Number(variables.logoHeight);
+export const LOGO_HEIGHT_SMALL = Number(variables.logoHeightSmall);
 export const LOGO_SRC = '/logo.svg';
 
-export const MODAL_WIDTH = 370;
+export const MODAL_WIDTH = Number(variables.modalWidth);
 export const MODAL_HEADER_HEIGHT = 45;
 
 export const NAV_PADDING = SPACING_L;
@@ -133,10 +134,10 @@ export const RESULTS_COLUMN_WIDTH: Record<ResultColumnId, number | undefined> =
   [ResultColumnId.Word]: undefined,
   [ResultColumnId.WordsCount]: 55,
 };
-export const RESULTS_ITEM_HEIGHT = 40;
+export const RESULTS_ITEM_HEIGHT = Number(variables.resultsItemHeight);
 
 export const RESULTS_HEADER_HEIGHT = RESULTS_ITEM_HEIGHT;
 
-export const SOLVER_COLUMN_WIDTH = 580;
+export const SOLVER_COLUMN_WIDTH = Number(variables.solverColumnWidth);
 
-export const TEXT_INPUT_HEIGHT = 40;
+export const TEXT_INPUT_HEIGHT = Number(variables.textInputHeight);

package/packages/scrabble-solver/src/state/localStorage.ts

@@ -1,28 +1,49 @@
-import { Board, type BoardJson, type Game, type Locale, type ShowCoordinates } from '@scrabble-solver/types';
+import { Board, type BoardJson } from '@scrabble-solver/types';
 import store2 from 'store2';
 
-import type { AutoGroupTiles, InputMode, Rack, RemoveCellFilters } from '@/types';
+import type { Rack } from '@/types';
+
+import type { SettingsState } from './settings/types';
 
-const AUTO_GROUP_TILES = 'auto-group-tiles';
 const BOARD = 'board';
-const GAME_ID = 'config-id';
-const INPUT_MODE = 'input-mode';
-const REMOVE_CELL_FILTERS = 'remove-cell-filters';
-const LOCALE = 'locale';
 const RACK = 'rack';
-const SHOW_COORDINATES = 'show-coordinates';
+const SETTINGS = 'settings';
+
+const LEGACY_KEYS: Record<keyof SettingsState, string> = {
+  autoGroupTiles: 'auto-group-tiles',
+  game: 'config-id',
+  inputMode: 'input-mode',
+  locale: 'locale',
+  removeCellFilters: 'remove-cell-filters',
+  showCoordinates: 'show-coordinates',
+};
 
 const store = store2.namespace('scrabble-solver');
 
-export const localStorage = {
-  getAutoGroupTiles(): AutoGroupTiles | undefined {
-    return store.get(AUTO_GROUP_TILES) as AutoGroupTiles | undefined;
-  },
-
-  setAutoGroupTiles(autoGroupTiles: AutoGroupTiles | undefined): void {
-    store.set(AUTO_GROUP_TILES, autoGroupTiles, true);
-  },
+/**
+ * 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;
@@ -33,30 +54,6 @@ export const localStorage = {
     store.set(BOARD, serialized, true);
   },
 
-  getGame(): Game | undefined {
-    return store.get(GAME_ID) as Game | undefined;
-  },
-
-  setGame(game: Game | undefined): void {
-    store.set(GAME_ID, game, true);
-  },
-
-  getInputMode(): InputMode | undefined {
-    return store.get(INPUT_MODE) as InputMode | undefined;
-  },
-
-  setInputMode(inputMode: InputMode | undefined): void {
-    store.set(INPUT_MODE, inputMode, true);
-  },
-
-  getLocale(): Locale | undefined {
-    return store.get(LOCALE) as Locale | undefined;
-  },
-
-  setLocale(locale: Locale | undefined): void {
-    store.set(LOCALE, locale, true);
-  },
-
   getRack(): Rack | undefined {
     return store.get(RACK) as Rack | undefined;
   },
@@ -65,19 +62,12 @@ export const localStorage = {
     store.set(RACK, rack, true);
   },
 
-  getShowCoordinates(): ShowCoordinates | undefined {
-    return store.get(SHOW_COORDINATES) as ShowCoordinates | undefined;
-  },
-
-  setShowCoordinates(showCoordinates: ShowCoordinates | undefined): void {
-    store.set(SHOW_COORDINATES, showCoordinates, true);
-  },
-
-  getRemoveCellFilters(): RemoveCellFilters | undefined {
-    return store.get(REMOVE_CELL_FILTERS) as RemoveCellFilters | undefined;
+  getSettings(): Partial<SettingsState> {
+    const stored = store.get(SETTINGS) as Partial<SettingsState> | undefined;
+    return stored ?? migrateLegacySettings();
   },
 
-  setRemoveCellFilters(removeCellFilters: RemoveCellFilters | undefined): void {
-    store.set(REMOVE_CELL_FILTERS, removeCellFilters, true);
+  setSettings(settings: SettingsState): void {
+    store.set(SETTINGS, settings, true);
   },
 };

package/packages/scrabble-solver/src/state/settings/initialState.ts

@@ -5,14 +5,14 @@ import { localStorage } from '../localStorage';
 import { guessLocale } from './lib';
 import type { SettingsState } from './types';
 
-const localStorageAutoGroupTiles = localStorage.getAutoGroupTiles();
 const isTouchScreen = typeof globalThis.matchMedia !== 'undefined' && globalThis.matchMedia('(hover: none)').matches;
 
 export const settingsInitialState: SettingsState = {
-  autoGroupTiles: typeof localStorageAutoGroupTiles === 'undefined' ? 'left' : localStorageAutoGroupTiles,
-  game: localStorage.getGame() ?? Game.Scrabble,
-  inputMode: localStorage.getInputMode() ?? (isTouchScreen ? 'touchscreen' : 'keyboard'),
-  locale: localStorage.getLocale() ?? guessLocale(),
-  showCoordinates: localStorage.getShowCoordinates() ?? 'hidden',
-  removeCellFilters: localStorage.getRemoveCellFilters() ?? 'always',
+  autoGroupTiles: null,
+  game: Game.Scrabble,
+  inputMode: isTouchScreen ? 'touchscreen' : 'keyboard',
+  locale: guessLocale(),
+  removeCellFilters: 'always',
+  showCoordinates: 'hidden',
+  ...localStorage.getSettings(),
 };

package/packages/scrabble-solver/src/styles/_tokens.scss

@@ -0,0 +1,59 @@
+@use 'sass:math';
+
+@function strip-unit($value) {
+  @return math.div($value, $value * 0 + 1);
+}
+
+$breakpoint-xs: 480px;
+$breakpoint-s: 768px;
+$breakpoint-m: 992px;
+$breakpoint-l: 1200px;
+$breakpoint-xl: 1400px;
+
+$border-color: #cdcdcd;
+$border-color-light: #d9d9d9;
+$border-radius: 5px;
+$border-width: 1px;
+
+$color-blue: #c7d8f9;
+$color-blue-light: #dde4f6;
+$color-green: #bae3ba;
+$color-green-light: #d6ebd6;
+$color-red: #f7c2aa;
+$color-red-light: #fbe0d4;
+$color-violet: #78387f;
+$color-violet-light: #b284b8;
+$color-yellow: #efe3ae;
+$color-yellow-light: #f7f1d6;
+
+$color-background: #f4f4f4;
+$color-foreground: #222;
+$color-foreground-secondary: #444;
+$color-inactive: #cdcdcd;
+
+$color-bonus-character-multiplier-2: #b8d5ed;
+$color-bonus-character-multiplier-3: #86aed1;
+$color-bonus-character-multiplier-4: #3477b2;
+$color-bonus-word-multiplier-2: #fbc997;
+$color-bonus-word-multiplier-3: #f19393;
+$color-bonus-word-multiplier-4: #ed5e5e;
+
+$spacing-xs: 2px;
+$spacing-s: 5px;
+$spacing-m: 10px;
+$spacing-l: 20px;
+$spacing-xl: 40px;
+$spacing-xxl: 80px;
+
+$transition-duration: 100ms;
+$transition-duration-long: 250ms;
+
+$button-icon-size: 24px;
+$dictionary-height: 260px;
+$dictionary-height-mobile: 110px;
+$logo-height: 60px;
+$logo-height-small: 48px;
+$modal-width: 370px;
+$results-item-height: 40px;
+$solver-column-width: 580px;
+$text-input-height: 40px;

package/packages/scrabble-solver/src/styles/global.scss

@@ -1,7 +1,7 @@
-@import 'normalize.css';
+@use 'normalize.css';
 
-@import './mixins';
-@import './variables';
+@use './mixins' as *;
+@use './variables';
 
 *,
 *:after,

package/packages/scrabble-solver/src/styles/mixins.scss

@@ -1,15 +1,16 @@
-@import 'include-media';
-
-$breakpoints: (
-  xs: 480px,
-  s: 768px,
-  m: 992px,
-  l: 1200px,
-  xl: 1400px,
-);
-
-$media-expressions: (
-  touch: '(hover: none)',
+@use 'styles/tokens' as *;
+
+@forward 'include-media' with (
+  $breakpoints: (
+    xs: $breakpoint-xs,
+    s: $breakpoint-s,
+    m: $breakpoint-m,
+    l: $breakpoint-l,
+    xl: $breakpoint-xl,
+  ),
+  $media-expressions: (
+    touch: '(hover: none)',
+  )
 );
 
 @mixin scrollbars {

package/packages/scrabble-solver/src/styles/variables.module.scss

@@ -0,0 +1,53 @@
+@use 'styles/tokens' as *;
+
+:export {
+  breakpointXs: strip-unit($breakpoint-xs);
+  breakpointS: strip-unit($breakpoint-s);
+  breakpointM: strip-unit($breakpoint-m);
+  breakpointL: strip-unit($breakpoint-l);
+  breakpointXl: strip-unit($breakpoint-xl);
+
+  borderColor: $border-color;
+  borderColorLight: $border-color-light;
+  borderRadius: strip-unit($border-radius);
+  borderWidth: strip-unit($border-width);
+
+  colorBlue: $color-blue;
+  colorBlueLight: $color-blue-light;
+  colorGreen: $color-green;
+  colorGreenLight: $color-green-light;
+  colorRed: $color-red;
+  colorRedLight: $color-red-light;
+  colorVioletLight: $color-violet-light;
+  colorYellow: $color-yellow;
+  colorYellowLight: $color-yellow-light;
+
+  colorBackground: $color-background;
+  colorForegroundSecondary: $color-foreground-secondary;
+
+  colorBonusCharacterMultiplier2: $color-bonus-character-multiplier-2;
+  colorBonusCharacterMultiplier3: $color-bonus-character-multiplier-3;
+  colorBonusCharacterMultiplier4: $color-bonus-character-multiplier-4;
+  colorBonusWordMultiplier2: $color-bonus-word-multiplier-2;
+  colorBonusWordMultiplier3: $color-bonus-word-multiplier-3;
+  colorBonusWordMultiplier4: $color-bonus-word-multiplier-4;
+
+  spacingXs: strip-unit($spacing-xs);
+  spacingS: strip-unit($spacing-s);
+  spacingM: strip-unit($spacing-m);
+  spacingL: strip-unit($spacing-l);
+  spacingXl: strip-unit($spacing-xl);
+
+  transitionDuration: strip-unit($transition-duration);
+  transitionDurationLong: strip-unit($transition-duration-long);
+
+  buttonIconSize: strip-unit($button-icon-size);
+  dictionaryHeight: strip-unit($dictionary-height);
+  dictionaryHeightMobile: strip-unit($dictionary-height-mobile);
+  logoHeight: strip-unit($logo-height);
+  logoHeightSmall: strip-unit($logo-height-small);
+  modalWidth: strip-unit($modal-width);
+  resultsItemHeight: strip-unit($results-item-height);
+  solverColumnWidth: strip-unit($solver-column-width);
+  textInputHeight: strip-unit($text-input-height);
+}