color-module/src/color_differ/cam16jch.rs

@@ -12,18 +12,6 @@ pub struct HctDiffference {
     pub lightness: Differ,
 }
 
-#[wasm_bindgen]
-impl HctDiffference {
-    #[wasm_bindgen(constructor)]
-    pub fn new(hue: Differ, chroma: Differ, lightness: Differ) -> Self {
-        Self {
-            hue,
-            chroma,
-            lightness,
-        }
-    }
-}
-
 impl ColorDifference for Cam16Jch<f32> {
     type Difference = HctDiffference;
 

color-module/src/color_differ/hsl.rs

@@ -12,18 +12,6 @@ pub struct HSLDifference {
     pub lightness: Differ,
 }
 
-#[wasm_bindgen]
-impl HSLDifference {
-    #[wasm_bindgen(constructor)]
-    pub fn new(hue: Differ, saturation: Differ, lightness: Differ) -> Self {
-        Self {
-            hue,
-            saturation,
-            lightness,
-        }
-    }
-}
-
 impl ColorDifference for Hsl {
     type Difference = HSLDifference;
 

color-module/src/color_differ/mod.rs

@@ -13,14 +13,6 @@ pub struct Differ {
     pub percent: f32,
 }
 
-#[wasm_bindgen]
-impl Differ {
-    #[wasm_bindgen(constructor)]
-    pub fn new(delta: f32, percent: f32) -> Self {
-        Self { delta, percent }
-    }
-}
-
 pub trait ColorDifference {
     type Difference;
 

color-module/src/color_differ/oklch.rs

@@ -12,18 +12,6 @@ pub struct OklchDifference {
     pub lightness: Differ,
 }
 
-#[wasm_bindgen]
-impl OklchDifference {
-    #[wasm_bindgen(constructor)]
-    pub fn new(hue: Differ, chroma: Differ, lightness: Differ) -> Self {
-        Self {
-            hue,
-            chroma,
-            lightness,
-        }
-    }
-}
-
 impl ColorDifference for Oklch {
     type Difference = OklchDifference;
 

color-module/src/color_differ/rgb.rs

@@ -12,14 +12,6 @@ pub struct RGBDifference {
     pub b: Differ,
 }
 
-#[wasm_bindgen]
-impl RGBDifference {
-    #[wasm_bindgen(constructor)]
-    pub fn new(r: Differ, g: Differ, b: Differ) -> Self {
-        Self { r, g, b }
-    }
-}
-
 impl ColorDifference for Srgb {
     type Difference = RGBDifference;
 

color-module/src/reversing.rs

@@ -11,19 +11,6 @@ pub struct MixReversing {
     pub average: f32,
 }
 
-#[wasm_bindgen]
-impl MixReversing {
-    #[wasm_bindgen(constructor)]
-    pub fn new(r_factor: f32, g_factor: f32, b_factor: f32, average: f32) -> Self {
-        Self {
-            r_factor,
-            g_factor,
-            b_factor,
-            average,
-        }
-    }
-}
-
 impl MixReversing {
     pub fn from_tint_rgb(basic_color: Rgb, mixed_result: Rgb) -> Self {
         let r_factor = if basic_color.red == 1.0 {

src/ColorFunctionContext.tsx

@@ -23,7 +23,6 @@ export function useColorFunction(): ColorFunctionContextType {
 }
 
 export function ColorFunctionProvider({ children }: WasmProviderProps) {
-  //@ts-expect-error TS2503
   const [wasmInstance, setWasmInstance] = useState<Wasm.InitOutput | null>(null);
   const [isPending, startTransition] = useTransition();
   const [error, setError] = useState<Error | null>(null);

src/color_functions/color_module.d.ts

@@ -10,11 +10,6 @@ export function generate_swatch_scheme(colors: SwatchEntry[], setting: SwatchSch
 export function q_scheme_color_expanding_methods(): any;
 export function q_scheme_wacg_settings(): any;
 export function q_scheme_default_settings(): SchemeSetting;
-export function generate_palette_from_color(reference_color: string, swatch_amount: number, minimum_lightness: number, maximum_lightness: number, use_reference_color?: boolean | null, reference_color_bias?: number | null): string[];
-export function swatch_scheme_default_settings(): SwatchSchemeSetting;
-export function series(color: string, expand_amount: number, step: number): string[];
-export function tonal_lighten_series(color: string, expand_amount: number, step: number): string[];
-export function tonal_darken_series(color: string, expand_amount: number, step: number): string[];
 export function shift_hue(color: string, degree: number): string;
 export function analogous_30(color: string): string[];
 export function analogous_60(color: string): string[];
@@ -50,6 +45,11 @@ export function darken_absolute(color: string, value: number): string;
 export function mix(color1: string, color2: string, percent: number): string;
 export function tint(color: string, percent: number): string;
 export function shade(color: string, percent: number): string;
+export function generate_palette_from_color(reference_color: string, swatch_amount: number, minimum_lightness: number, maximum_lightness: number, use_reference_color?: boolean | null, reference_color_bias?: number | null): string[];
+export function swatch_scheme_default_settings(): SwatchSchemeSetting;
+export function series(color: string, expand_amount: number, step: number): string[];
+export function tonal_lighten_series(color: string, expand_amount: number, step: number): string[];
+export function tonal_darken_series(color: string, expand_amount: number, step: number): string[];
 export enum ColorExpand {
   Complementary = 0,
   Analogous = 1,
@@ -73,43 +73,43 @@ export class ColorShifting {
   lightness: number;
 }
 export class Differ {
+  private constructor();
   free(): void;
-  constructor(delta: number, percent: number);
   delta: number;
   percent: number;
 }
 export class HSLDifference {
+  private constructor();
   free(): void;
-  constructor(hue: Differ, saturation: Differ, lightness: Differ);
   hue: Differ;
   saturation: Differ;
   lightness: Differ;
 }
 export class HctDiffference {
+  private constructor();
   free(): void;
-  constructor(hue: Differ, chroma: Differ, lightness: Differ);
   hue: Differ;
   chroma: Differ;
   lightness: Differ;
 }
 export class MixReversing {
+  private constructor();
   free(): void;
-  constructor(r_factor: number, g_factor: number, b_factor: number, average: number);
   r_factor: number;
   g_factor: number;
   b_factor: number;
   average: number;
 }
 export class OklchDifference {
+  private constructor();
   free(): void;
-  constructor(hue: Differ, chroma: Differ, lightness: Differ);
   hue: Differ;
   chroma: Differ;
   lightness: Differ;
 }
 export class RGBDifference {
+  private constructor();
   free(): void;
-  constructor(r: Differ, g: Differ, b: Differ);
   r: Differ;
   g: Differ;
   b: Differ;
@@ -186,7 +186,6 @@ export interface InitOutput {
   readonly __wbg_set_oklchdifference_chroma: (a: number, b: number) => void;
   readonly __wbg_get_oklchdifference_lightness: (a: number) => number;
   readonly __wbg_set_oklchdifference_lightness: (a: number, b: number) => void;
-  readonly oklchdifference_new: (a: number, b: number, c: number) => number;
   readonly __wbg_mixreversing_free: (a: number, b: number) => void;
   readonly __wbg_get_mixreversing_r_factor: (a: number) => number;
   readonly __wbg_set_mixreversing_r_factor: (a: number, b: number) => void;
@@ -196,7 +195,6 @@ export interface InitOutput {
   readonly __wbg_set_mixreversing_b_factor: (a: number, b: number) => void;
   readonly __wbg_get_mixreversing_average: (a: number) => number;
   readonly __wbg_set_mixreversing_average: (a: number, b: number) => void;
-  readonly mixreversing_new: (a: number, b: number, c: number, d: number) => number;
   readonly q_scheme_color_expanding_methods: () => [number, number, number];
   readonly q_scheme_wacg_settings: () => [number, number, number];
   readonly q_scheme_default_settings: () => number;
@@ -205,7 +203,24 @@ export interface InitOutput {
   readonly __wbg_set_differ_delta: (a: number, b: number) => void;
   readonly __wbg_get_differ_percent: (a: number) => number;
   readonly __wbg_set_differ_percent: (a: number, b: number) => void;
-  readonly differ_new: (a: number, b: number) => number;
+  readonly shift_hue: (a: number, b: number, c: number) => [number, number, number, number];
+  readonly analogous_30: (a: number, b: number) => [number, number, number, number];
+  readonly analogous_60: (a: number, b: number) => [number, number, number, number];
+  readonly complementary: (a: number, b: number) => [number, number, number, number];
+  readonly split_complementary: (a: number, b: number) => [number, number, number, number];
+  readonly tetradic: (a: number, b: number) => [number, number, number, number];
+  readonly triadic: (a: number, b: number) => [number, number, number, number];
+  readonly represent_rgb: (a: number, b: number) => [number, number, number, number];
+  readonly rgb_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
+  readonly represent_hsl: (a: number, b: number) => [number, number, number, number];
+  readonly hsl_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
+  readonly represent_lab: (a: number, b: number) => [number, number, number, number];
+  readonly lab_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
+  readonly represent_oklch: (a: number, b: number) => [number, number, number, number];
+  readonly oklch_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
+  readonly represent_hct: (a: number, b: number) => [number, number, number, number];
+  readonly hct_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
+  readonly wacg_relative_contrast: (a: number, b: number, c: number, d: number) => [number, number, number];
   readonly __wbg_hctdiffference_free: (a: number, b: number) => void;
   readonly __wbg_get_hctdiffference_hue: (a: number) => number;
   readonly __wbg_set_hctdiffference_hue: (a: number, b: number) => void;
@@ -213,7 +228,37 @@ export interface InitOutput {
   readonly __wbg_set_hctdiffference_chroma: (a: number, b: number) => void;
   readonly __wbg_get_hctdiffference_lightness: (a: number) => number;
   readonly __wbg_set_hctdiffference_lightness: (a: number, b: number) => void;
-  readonly hctdiffference_new: (a: number, b: number, c: number) => number;
+  readonly differ_in_rgb: (a: number, b: number, c: number, d: number) => [number, number, number];
+  readonly relative_differ_in_rgb: (a: number, b: number, c: number, d: number) => [number, number, number];
+  readonly differ_in_hsl: (a: number, b: number, c: number, d: number) => [number, number, number];
+  readonly relative_differ_in_hsl: (a: number, b: number, c: number, d: number) => [number, number, number];
+  readonly differ_in_hct: (a: number, b: number, c: number, d: number) => [number, number, number];
+  readonly relative_differ_in_hct: (a: number, b: number, c: number, d: number) => [number, number, number];
+  readonly differ_in_oklch: (a: number, b: number, c: number, d: number) => [number, number, number];
+  readonly relative_differ_in_oklch: (a: number, b: number, c: number, d: number) => [number, number, number];
+  readonly tint_scale: (a: number, b: number, c: number, d: number) => [number, number, number];
+  readonly shade_scale: (a: number, b: number, c: number, d: number) => [number, number, number];
+  readonly __wbg_hsldifference_free: (a: number, b: number) => void;
+  readonly __wbg_get_hsldifference_hue: (a: number) => number;
+  readonly __wbg_set_hsldifference_hue: (a: number, b: number) => void;
+  readonly __wbg_get_hsldifference_saturation: (a: number) => number;
+  readonly __wbg_set_hsldifference_saturation: (a: number, b: number) => void;
+  readonly __wbg_get_hsldifference_lightness: (a: number) => number;
+  readonly __wbg_set_hsldifference_lightness: (a: number, b: number) => void;
+  readonly lighten: (a: number, b: number, c: number) => [number, number, number, number];
+  readonly lighten_absolute: (a: number, b: number, c: number) => [number, number, number, number];
+  readonly darken: (a: number, b: number, c: number) => [number, number, number, number];
+  readonly darken_absolute: (a: number, b: number, c: number) => [number, number, number, number];
+  readonly mix: (a: number, b: number, c: number, d: number, e: number) => [number, number, number, number];
+  readonly tint: (a: number, b: number, c: number) => [number, number, number, number];
+  readonly shade: (a: number, b: number, c: number) => [number, number, number, number];
+  readonly __wbg_rgbdifference_free: (a: number, b: number) => void;
+  readonly __wbg_get_rgbdifference_r: (a: number) => number;
+  readonly __wbg_set_rgbdifference_r: (a: number, b: number) => void;
+  readonly __wbg_get_rgbdifference_g: (a: number) => number;
+  readonly __wbg_set_rgbdifference_g: (a: number, b: number) => void;
+  readonly __wbg_get_rgbdifference_b: (a: number) => number;
+  readonly __wbg_set_rgbdifference_b: (a: number, b: number) => void;
   readonly generate_palette_from_color: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => [number, number, number, number];
   readonly __wbg_swatchschemesetting_free: (a: number, b: number) => void;
   readonly __wbg_get_swatchschemesetting_amount: (a: number) => number;
@@ -239,65 +284,14 @@ export interface InitOutput {
   readonly series: (a: number, b: number, c: number, d: number) => [number, number, number, number];
   readonly tonal_lighten_series: (a: number, b: number, c: number, d: number) => [number, number, number, number];
   readonly tonal_darken_series: (a: number, b: number, c: number, d: number) => [number, number, number, number];
-  readonly shift_hue: (a: number, b: number, c: number) => [number, number, number, number];
-  readonly analogous_30: (a: number, b: number) => [number, number, number, number];
-  readonly analogous_60: (a: number, b: number) => [number, number, number, number];
-  readonly complementary: (a: number, b: number) => [number, number, number, number];
-  readonly split_complementary: (a: number, b: number) => [number, number, number, number];
-  readonly tetradic: (a: number, b: number) => [number, number, number, number];
-  readonly triadic: (a: number, b: number) => [number, number, number, number];
-  readonly represent_rgb: (a: number, b: number) => [number, number, number, number];
-  readonly rgb_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
-  readonly represent_hsl: (a: number, b: number) => [number, number, number, number];
-  readonly hsl_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
-  readonly represent_lab: (a: number, b: number) => [number, number, number, number];
-  readonly lab_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
-  readonly represent_oklch: (a: number, b: number) => [number, number, number, number];
-  readonly oklch_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
-  readonly represent_hct: (a: number, b: number) => [number, number, number, number];
-  readonly hct_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
-  readonly wacg_relative_contrast: (a: number, b: number, c: number, d: number) => [number, number, number];
-  readonly __wbg_rgbdifference_free: (a: number, b: number) => void;
-  readonly __wbg_get_rgbdifference_r: (a: number) => number;
-  readonly __wbg_set_rgbdifference_r: (a: number, b: number) => void;
-  readonly __wbg_get_rgbdifference_g: (a: number) => number;
-  readonly __wbg_set_rgbdifference_g: (a: number, b: number) => void;
-  readonly __wbg_get_rgbdifference_b: (a: number) => number;
-  readonly __wbg_set_rgbdifference_b: (a: number, b: number) => void;
-  readonly rgbdifference_new: (a: number, b: number, c: number) => number;
-  readonly differ_in_rgb: (a: number, b: number, c: number, d: number) => [number, number, number];
-  readonly relative_differ_in_rgb: (a: number, b: number, c: number, d: number) => [number, number, number];
-  readonly differ_in_hsl: (a: number, b: number, c: number, d: number) => [number, number, number];
-  readonly relative_differ_in_hsl: (a: number, b: number, c: number, d: number) => [number, number, number];
-  readonly differ_in_hct: (a: number, b: number, c: number, d: number) => [number, number, number];
-  readonly relative_differ_in_hct: (a: number, b: number, c: number, d: number) => [number, number, number];
-  readonly differ_in_oklch: (a: number, b: number, c: number, d: number) => [number, number, number];
-  readonly relative_differ_in_oklch: (a: number, b: number, c: number, d: number) => [number, number, number];
-  readonly tint_scale: (a: number, b: number, c: number, d: number) => [number, number, number];
-  readonly shade_scale: (a: number, b: number, c: number, d: number) => [number, number, number];
-  readonly __wbg_hsldifference_free: (a: number, b: number) => void;
-  readonly __wbg_get_hsldifference_hue: (a: number) => number;
-  readonly __wbg_set_hsldifference_hue: (a: number, b: number) => void;
-  readonly __wbg_get_hsldifference_saturation: (a: number) => number;
-  readonly __wbg_set_hsldifference_saturation: (a: number, b: number) => void;
-  readonly __wbg_get_hsldifference_lightness: (a: number) => number;
-  readonly __wbg_set_hsldifference_lightness: (a: number, b: number) => void;
-  readonly hsldifference_new: (a: number, b: number, c: number) => number;
-  readonly lighten: (a: number, b: number, c: number) => [number, number, number, number];
-  readonly lighten_absolute: (a: number, b: number, c: number) => [number, number, number, number];
-  readonly darken: (a: number, b: number, c: number) => [number, number, number, number];
-  readonly darken_absolute: (a: number, b: number, c: number) => [number, number, number, number];
-  readonly mix: (a: number, b: number, c: number, d: number, e: number) => [number, number, number, number];
-  readonly tint: (a: number, b: number, c: number) => [number, number, number, number];
-  readonly shade: (a: number, b: number, c: number) => [number, number, number, number];
   readonly __wbindgen_malloc: (a: number, b: number) => number;
   readonly __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;
   readonly __wbindgen_exn_store: (a: number) => void;
   readonly __externref_table_alloc: () => number;
   readonly __wbindgen_export_4: WebAssembly.Table;
   readonly __externref_table_dealloc: (a: number) => void;
-  readonly __externref_drop_slice: (a: number, b: number) => void;
   readonly __wbindgen_free: (a: number, b: number, c: number) => void;
+  readonly __externref_drop_slice: (a: number, b: number) => void;
   readonly __wbindgen_start: () => void;
 }
 

src/color_functions/color_module.js

@@ -379,99 +379,6 @@ export function q_scheme_default_settings() {
     return SchemeSetting.__wrap(ret);
 }
 
-function getArrayJsValueFromWasm0(ptr, len) {
-    ptr = ptr >>> 0;
-    const mem = getDataViewMemory0();
-    const result = [];
-    for (let i = ptr; i < ptr + 4 * len; i += 4) {
-        result.push(wasm.__wbindgen_export_4.get(mem.getUint32(i, true)));
-    }
-    wasm.__externref_drop_slice(ptr, len);
-    return result;
-}
-/**
- * @param {string} reference_color
- * @param {number} swatch_amount
- * @param {number} minimum_lightness
- * @param {number} maximum_lightness
- * @param {boolean | null} [use_reference_color]
- * @param {number | null} [reference_color_bias]
- * @returns {string[]}
- */
-export function generate_palette_from_color(reference_color, swatch_amount, minimum_lightness, maximum_lightness, use_reference_color, reference_color_bias) {
-    const ptr0 = passStringToWasm0(reference_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
-    const len0 = WASM_VECTOR_LEN;
-    const ret = wasm.generate_palette_from_color(ptr0, len0, swatch_amount, minimum_lightness, maximum_lightness, isLikeNone(use_reference_color) ? 0xFFFFFF : use_reference_color ? 1 : 0, isLikeNone(reference_color_bias) ? 0xFFFFFF : reference_color_bias);
-    if (ret[3]) {
-        throw takeFromExternrefTable0(ret[2]);
-    }
-    var v2 = getArrayJsValueFromWasm0(ret[0], ret[1]).slice();
-    wasm.__wbindgen_free(ret[0], ret[1] * 4, 4);
-    return v2;
-}
-
-/**
- * @returns {SwatchSchemeSetting}
- */
-export function swatch_scheme_default_settings() {
-    const ret = wasm.swatch_scheme_default_settings();
-    return SwatchSchemeSetting.__wrap(ret);
-}
-
-/**
- * @param {string} color
- * @param {number} expand_amount
- * @param {number} step
- * @returns {string[]}
- */
-export function series(color, expand_amount, step) {
-    const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
-    const len0 = WASM_VECTOR_LEN;
-    const ret = wasm.series(ptr0, len0, expand_amount, step);
-    if (ret[3]) {
-        throw takeFromExternrefTable0(ret[2]);
-    }
-    var v2 = getArrayJsValueFromWasm0(ret[0], ret[1]).slice();
-    wasm.__wbindgen_free(ret[0], ret[1] * 4, 4);
-    return v2;
-}
-
-/**
- * @param {string} color
- * @param {number} expand_amount
- * @param {number} step
- * @returns {string[]}
- */
-export function tonal_lighten_series(color, expand_amount, step) {
-    const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
-    const len0 = WASM_VECTOR_LEN;
-    const ret = wasm.tonal_lighten_series(ptr0, len0, expand_amount, step);
-    if (ret[3]) {
-        throw takeFromExternrefTable0(ret[2]);
-    }
-    var v2 = getArrayJsValueFromWasm0(ret[0], ret[1]).slice();
-    wasm.__wbindgen_free(ret[0], ret[1] * 4, 4);
-    return v2;
-}
-
-/**
- * @param {string} color
- * @param {number} expand_amount
- * @param {number} step
- * @returns {string[]}
- */
-export function tonal_darken_series(color, expand_amount, step) {
-    const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
-    const len0 = WASM_VECTOR_LEN;
-    const ret = wasm.tonal_darken_series(ptr0, len0, expand_amount, step);
-    if (ret[3]) {
-        throw takeFromExternrefTable0(ret[2]);
-    }
-    var v2 = getArrayJsValueFromWasm0(ret[0], ret[1]).slice();
-    wasm.__wbindgen_free(ret[0], ret[1] * 4, 4);
-    return v2;
-}
-
 /**
  * @param {string} color
  * @param {number} degree
@@ -498,6 +405,16 @@ export function shift_hue(color, degree) {
     }
 }
 
+function getArrayJsValueFromWasm0(ptr, len) {
+    ptr = ptr >>> 0;
+    const mem = getDataViewMemory0();
+    const result = [];
+    for (let i = ptr; i < ptr + 4 * len; i += 4) {
+        result.push(wasm.__wbindgen_export_4.get(mem.getUint32(i, true)));
+    }
+    wasm.__externref_drop_slice(ptr, len);
+    return result;
+}
 /**
  * @param {string} color
  * @returns {string[]}
@@ -1197,6 +1114,89 @@ export function shade(color, percent) {
     }
 }
 
+/**
+ * @param {string} reference_color
+ * @param {number} swatch_amount
+ * @param {number} minimum_lightness
+ * @param {number} maximum_lightness
+ * @param {boolean | null} [use_reference_color]
+ * @param {number | null} [reference_color_bias]
+ * @returns {string[]}
+ */
+export function generate_palette_from_color(reference_color, swatch_amount, minimum_lightness, maximum_lightness, use_reference_color, reference_color_bias) {
+    const ptr0 = passStringToWasm0(reference_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.generate_palette_from_color(ptr0, len0, swatch_amount, minimum_lightness, maximum_lightness, isLikeNone(use_reference_color) ? 0xFFFFFF : use_reference_color ? 1 : 0, isLikeNone(reference_color_bias) ? 0xFFFFFF : reference_color_bias);
+    if (ret[3]) {
+        throw takeFromExternrefTable0(ret[2]);
+    }
+    var v2 = getArrayJsValueFromWasm0(ret[0], ret[1]).slice();
+    wasm.__wbindgen_free(ret[0], ret[1] * 4, 4);
+    return v2;
+}
+
+/**
+ * @returns {SwatchSchemeSetting}
+ */
+export function swatch_scheme_default_settings() {
+    const ret = wasm.swatch_scheme_default_settings();
+    return SwatchSchemeSetting.__wrap(ret);
+}
+
+/**
+ * @param {string} color
+ * @param {number} expand_amount
+ * @param {number} step
+ * @returns {string[]}
+ */
+export function series(color, expand_amount, step) {
+    const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.series(ptr0, len0, expand_amount, step);
+    if (ret[3]) {
+        throw takeFromExternrefTable0(ret[2]);
+    }
+    var v2 = getArrayJsValueFromWasm0(ret[0], ret[1]).slice();
+    wasm.__wbindgen_free(ret[0], ret[1] * 4, 4);
+    return v2;
+}
+
+/**
+ * @param {string} color
+ * @param {number} expand_amount
+ * @param {number} step
+ * @returns {string[]}
+ */
+export function tonal_lighten_series(color, expand_amount, step) {
+    const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.tonal_lighten_series(ptr0, len0, expand_amount, step);
+    if (ret[3]) {
+        throw takeFromExternrefTable0(ret[2]);
+    }
+    var v2 = getArrayJsValueFromWasm0(ret[0], ret[1]).slice();
+    wasm.__wbindgen_free(ret[0], ret[1] * 4, 4);
+    return v2;
+}
+
+/**
+ * @param {string} color
+ * @param {number} expand_amount
+ * @param {number} step
+ * @returns {string[]}
+ */
+export function tonal_darken_series(color, expand_amount, step) {
+    const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.tonal_darken_series(ptr0, len0, expand_amount, step);
+    if (ret[3]) {
+        throw takeFromExternrefTable0(ret[2]);
+    }
+    var v2 = getArrayJsValueFromWasm0(ret[0], ret[1]).slice();
+    wasm.__wbindgen_free(ret[0], ret[1] * 4, 4);
+    return v2;
+}
+
 /**
  * @enum {0 | 1 | 2 | 3 | 4 | 5 | 6}
  */
@@ -1343,16 +1343,6 @@ export class Differ {
     set percent(arg0) {
         wasm.__wbg_set_differ_percent(this.__wbg_ptr, arg0);
     }
-    /**
-     * @param {number} delta
-     * @param {number} percent
-     */
-    constructor(delta, percent) {
-        const ret = wasm.differ_new(delta, percent);
-        this.__wbg_ptr = ret >>> 0;
-        DifferFinalization.register(this, this.__wbg_ptr, this);
-        return this;
-    }
 }
 
 const HSLDifferenceFinalization = (typeof FinalizationRegistry === 'undefined')
@@ -1425,23 +1415,6 @@ export class HSLDifference {
         var ptr0 = arg0.__destroy_into_raw();
         wasm.__wbg_set_hsldifference_lightness(this.__wbg_ptr, ptr0);
     }
-    /**
-     * @param {Differ} hue
-     * @param {Differ} saturation
-     * @param {Differ} lightness
-     */
-    constructor(hue, saturation, lightness) {
-        _assertClass(hue, Differ);
-        var ptr0 = hue.__destroy_into_raw();
-        _assertClass(saturation, Differ);
-        var ptr1 = saturation.__destroy_into_raw();
-        _assertClass(lightness, Differ);
-        var ptr2 = lightness.__destroy_into_raw();
-        const ret = wasm.hsldifference_new(ptr0, ptr1, ptr2);
-        this.__wbg_ptr = ret >>> 0;
-        HSLDifferenceFinalization.register(this, this.__wbg_ptr, this);
-        return this;
-    }
 }
 
 const HctDiffferenceFinalization = (typeof FinalizationRegistry === 'undefined')
@@ -1514,23 +1487,6 @@ export class HctDiffference {
         var ptr0 = arg0.__destroy_into_raw();
         wasm.__wbg_set_hctdiffference_lightness(this.__wbg_ptr, ptr0);
     }
-    /**
-     * @param {Differ} hue
-     * @param {Differ} chroma
-     * @param {Differ} lightness
-     */
-    constructor(hue, chroma, lightness) {
-        _assertClass(hue, Differ);
-        var ptr0 = hue.__destroy_into_raw();
-        _assertClass(chroma, Differ);
-        var ptr1 = chroma.__destroy_into_raw();
-        _assertClass(lightness, Differ);
-        var ptr2 = lightness.__destroy_into_raw();
-        const ret = wasm.hctdiffference_new(ptr0, ptr1, ptr2);
-        this.__wbg_ptr = ret >>> 0;
-        HctDiffferenceFinalization.register(this, this.__wbg_ptr, this);
-        return this;
-    }
 }
 
 const MixReversingFinalization = (typeof FinalizationRegistry === 'undefined')
@@ -1610,18 +1566,6 @@ export class MixReversing {
     set average(arg0) {
         wasm.__wbg_set_mixreversing_average(this.__wbg_ptr, arg0);
     }
-    /**
-     * @param {number} r_factor
-     * @param {number} g_factor
-     * @param {number} b_factor
-     * @param {number} average
-     */
-    constructor(r_factor, g_factor, b_factor, average) {
-        const ret = wasm.mixreversing_new(r_factor, g_factor, b_factor, average);
-        this.__wbg_ptr = ret >>> 0;
-        MixReversingFinalization.register(this, this.__wbg_ptr, this);
-        return this;
-    }
 }
 
 const OklchDifferenceFinalization = (typeof FinalizationRegistry === 'undefined')
@@ -1694,23 +1638,6 @@ export class OklchDifference {
         var ptr0 = arg0.__destroy_into_raw();
         wasm.__wbg_set_oklchdifference_lightness(this.__wbg_ptr, ptr0);
     }
-    /**
-     * @param {Differ} hue
-     * @param {Differ} chroma
-     * @param {Differ} lightness
-     */
-    constructor(hue, chroma, lightness) {
-        _assertClass(hue, Differ);
-        var ptr0 = hue.__destroy_into_raw();
-        _assertClass(chroma, Differ);
-        var ptr1 = chroma.__destroy_into_raw();
-        _assertClass(lightness, Differ);
-        var ptr2 = lightness.__destroy_into_raw();
-        const ret = wasm.oklchdifference_new(ptr0, ptr1, ptr2);
-        this.__wbg_ptr = ret >>> 0;
-        OklchDifferenceFinalization.register(this, this.__wbg_ptr, this);
-        return this;
-    }
 }
 
 const RGBDifferenceFinalization = (typeof FinalizationRegistry === 'undefined')
@@ -1783,23 +1710,6 @@ export class RGBDifference {
         var ptr0 = arg0.__destroy_into_raw();
         wasm.__wbg_set_rgbdifference_b(this.__wbg_ptr, ptr0);
     }
-    /**
-     * @param {Differ} r
-     * @param {Differ} g
-     * @param {Differ} b
-     */
-    constructor(r, g, b) {
-        _assertClass(r, Differ);
-        var ptr0 = r.__destroy_into_raw();
-        _assertClass(g, Differ);
-        var ptr1 = g.__destroy_into_raw();
-        _assertClass(b, Differ);
-        var ptr2 = b.__destroy_into_raw();
-        const ret = wasm.rgbdifference_new(ptr0, ptr1, ptr2);
-        this.__wbg_ptr = ret >>> 0;
-        RGBDifferenceFinalization.register(this, this.__wbg_ptr, this);
-        return this;
-    }
 }
 
 const SchemeSettingFinalization = (typeof FinalizationRegistry === 'undefined')

src/color_functions/color_module_bg.wasm.d.ts

@@ -39,7 +39,6 @@ export const __wbg_get_oklchdifference_chroma: (a: number) => number;
 export const __wbg_set_oklchdifference_chroma: (a: number, b: number) => void;
 export const __wbg_get_oklchdifference_lightness: (a: number) => number;
 export const __wbg_set_oklchdifference_lightness: (a: number, b: number) => void;
-export const oklchdifference_new: (a: number, b: number, c: number) => number;
 export const __wbg_mixreversing_free: (a: number, b: number) => void;
 export const __wbg_get_mixreversing_r_factor: (a: number) => number;
 export const __wbg_set_mixreversing_r_factor: (a: number, b: number) => void;
@@ -49,7 +48,6 @@ export const __wbg_get_mixreversing_b_factor: (a: number) => number;
 export const __wbg_set_mixreversing_b_factor: (a: number, b: number) => void;
 export const __wbg_get_mixreversing_average: (a: number) => number;
 export const __wbg_set_mixreversing_average: (a: number, b: number) => void;
-export const mixreversing_new: (a: number, b: number, c: number, d: number) => number;
 export const q_scheme_color_expanding_methods: () => [number, number, number];
 export const q_scheme_wacg_settings: () => [number, number, number];
 export const q_scheme_default_settings: () => number;
@@ -58,7 +56,24 @@ export const __wbg_get_differ_delta: (a: number) => number;
 export const __wbg_set_differ_delta: (a: number, b: number) => void;
 export const __wbg_get_differ_percent: (a: number) => number;
 export const __wbg_set_differ_percent: (a: number, b: number) => void;
-export const differ_new: (a: number, b: number) => number;
+export const shift_hue: (a: number, b: number, c: number) => [number, number, number, number];
+export const analogous_30: (a: number, b: number) => [number, number, number, number];
+export const analogous_60: (a: number, b: number) => [number, number, number, number];
+export const complementary: (a: number, b: number) => [number, number, number, number];
+export const split_complementary: (a: number, b: number) => [number, number, number, number];
+export const tetradic: (a: number, b: number) => [number, number, number, number];
+export const triadic: (a: number, b: number) => [number, number, number, number];
+export const represent_rgb: (a: number, b: number) => [number, number, number, number];
+export const rgb_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
+export const represent_hsl: (a: number, b: number) => [number, number, number, number];
+export const hsl_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
+export const represent_lab: (a: number, b: number) => [number, number, number, number];
+export const lab_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
+export const represent_oklch: (a: number, b: number) => [number, number, number, number];
+export const oklch_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
+export const represent_hct: (a: number, b: number) => [number, number, number, number];
+export const hct_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
+export const wacg_relative_contrast: (a: number, b: number, c: number, d: number) => [number, number, number];
 export const __wbg_hctdiffference_free: (a: number, b: number) => void;
 export const __wbg_get_hctdiffference_hue: (a: number) => number;
 export const __wbg_set_hctdiffference_hue: (a: number, b: number) => void;
@@ -66,7 +81,37 @@ export const __wbg_get_hctdiffference_chroma: (a: number) => number;
 export const __wbg_set_hctdiffference_chroma: (a: number, b: number) => void;
 export const __wbg_get_hctdiffference_lightness: (a: number) => number;
 export const __wbg_set_hctdiffference_lightness: (a: number, b: number) => void;
-export const hctdiffference_new: (a: number, b: number, c: number) => number;
+export const differ_in_rgb: (a: number, b: number, c: number, d: number) => [number, number, number];
+export const relative_differ_in_rgb: (a: number, b: number, c: number, d: number) => [number, number, number];
+export const differ_in_hsl: (a: number, b: number, c: number, d: number) => [number, number, number];
+export const relative_differ_in_hsl: (a: number, b: number, c: number, d: number) => [number, number, number];
+export const differ_in_hct: (a: number, b: number, c: number, d: number) => [number, number, number];
+export const relative_differ_in_hct: (a: number, b: number, c: number, d: number) => [number, number, number];
+export const differ_in_oklch: (a: number, b: number, c: number, d: number) => [number, number, number];
+export const relative_differ_in_oklch: (a: number, b: number, c: number, d: number) => [number, number, number];
+export const tint_scale: (a: number, b: number, c: number, d: number) => [number, number, number];
+export const shade_scale: (a: number, b: number, c: number, d: number) => [number, number, number];
+export const __wbg_hsldifference_free: (a: number, b: number) => void;
+export const __wbg_get_hsldifference_hue: (a: number) => number;
+export const __wbg_set_hsldifference_hue: (a: number, b: number) => void;
+export const __wbg_get_hsldifference_saturation: (a: number) => number;
+export const __wbg_set_hsldifference_saturation: (a: number, b: number) => void;
+export const __wbg_get_hsldifference_lightness: (a: number) => number;
+export const __wbg_set_hsldifference_lightness: (a: number, b: number) => void;
+export const lighten: (a: number, b: number, c: number) => [number, number, number, number];
+export const lighten_absolute: (a: number, b: number, c: number) => [number, number, number, number];
+export const darken: (a: number, b: number, c: number) => [number, number, number, number];
+export const darken_absolute: (a: number, b: number, c: number) => [number, number, number, number];
+export const mix: (a: number, b: number, c: number, d: number, e: number) => [number, number, number, number];
+export const tint: (a: number, b: number, c: number) => [number, number, number, number];
+export const shade: (a: number, b: number, c: number) => [number, number, number, number];
+export const __wbg_rgbdifference_free: (a: number, b: number) => void;
+export const __wbg_get_rgbdifference_r: (a: number) => number;
+export const __wbg_set_rgbdifference_r: (a: number, b: number) => void;
+export const __wbg_get_rgbdifference_g: (a: number) => number;
+export const __wbg_set_rgbdifference_g: (a: number, b: number) => void;
+export const __wbg_get_rgbdifference_b: (a: number) => number;
+export const __wbg_set_rgbdifference_b: (a: number, b: number) => void;
 export const generate_palette_from_color: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => [number, number, number, number];
 export const __wbg_swatchschemesetting_free: (a: number, b: number) => void;
 export const __wbg_get_swatchschemesetting_amount: (a: number) => number;
@@ -92,63 +137,12 @@ export const swatch_scheme_default_settings: () => number;
 export const series: (a: number, b: number, c: number, d: number) => [number, number, number, number];
 export const tonal_lighten_series: (a: number, b: number, c: number, d: number) => [number, number, number, number];
 export const tonal_darken_series: (a: number, b: number, c: number, d: number) => [number, number, number, number];
-export const shift_hue: (a: number, b: number, c: number) => [number, number, number, number];
-export const analogous_30: (a: number, b: number) => [number, number, number, number];
-export const analogous_60: (a: number, b: number) => [number, number, number, number];
-export const complementary: (a: number, b: number) => [number, number, number, number];
-export const split_complementary: (a: number, b: number) => [number, number, number, number];
-export const tetradic: (a: number, b: number) => [number, number, number, number];
-export const triadic: (a: number, b: number) => [number, number, number, number];
-export const represent_rgb: (a: number, b: number) => [number, number, number, number];
-export const rgb_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
-export const represent_hsl: (a: number, b: number) => [number, number, number, number];
-export const hsl_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
-export const represent_lab: (a: number, b: number) => [number, number, number, number];
-export const lab_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
-export const represent_oklch: (a: number, b: number) => [number, number, number, number];
-export const oklch_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
-export const represent_hct: (a: number, b: number) => [number, number, number, number];
-export const hct_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
-export const wacg_relative_contrast: (a: number, b: number, c: number, d: number) => [number, number, number];
-export const __wbg_rgbdifference_free: (a: number, b: number) => void;
-export const __wbg_get_rgbdifference_r: (a: number) => number;
-export const __wbg_set_rgbdifference_r: (a: number, b: number) => void;
-export const __wbg_get_rgbdifference_g: (a: number) => number;
-export const __wbg_set_rgbdifference_g: (a: number, b: number) => void;
-export const __wbg_get_rgbdifference_b: (a: number) => number;
-export const __wbg_set_rgbdifference_b: (a: number, b: number) => void;
-export const rgbdifference_new: (a: number, b: number, c: number) => number;
-export const differ_in_rgb: (a: number, b: number, c: number, d: number) => [number, number, number];
-export const relative_differ_in_rgb: (a: number, b: number, c: number, d: number) => [number, number, number];
-export const differ_in_hsl: (a: number, b: number, c: number, d: number) => [number, number, number];
-export const relative_differ_in_hsl: (a: number, b: number, c: number, d: number) => [number, number, number];
-export const differ_in_hct: (a: number, b: number, c: number, d: number) => [number, number, number];
-export const relative_differ_in_hct: (a: number, b: number, c: number, d: number) => [number, number, number];
-export const differ_in_oklch: (a: number, b: number, c: number, d: number) => [number, number, number];
-export const relative_differ_in_oklch: (a: number, b: number, c: number, d: number) => [number, number, number];
-export const tint_scale: (a: number, b: number, c: number, d: number) => [number, number, number];
-export const shade_scale: (a: number, b: number, c: number, d: number) => [number, number, number];
-export const __wbg_hsldifference_free: (a: number, b: number) => void;
-export const __wbg_get_hsldifference_hue: (a: number) => number;
-export const __wbg_set_hsldifference_hue: (a: number, b: number) => void;
-export const __wbg_get_hsldifference_saturation: (a: number) => number;
-export const __wbg_set_hsldifference_saturation: (a: number, b: number) => void;
-export const __wbg_get_hsldifference_lightness: (a: number) => number;
-export const __wbg_set_hsldifference_lightness: (a: number, b: number) => void;
-export const hsldifference_new: (a: number, b: number, c: number) => number;
-export const lighten: (a: number, b: number, c: number) => [number, number, number, number];
-export const lighten_absolute: (a: number, b: number, c: number) => [number, number, number, number];
-export const darken: (a: number, b: number, c: number) => [number, number, number, number];
-export const darken_absolute: (a: number, b: number, c: number) => [number, number, number, number];
-export const mix: (a: number, b: number, c: number, d: number, e: number) => [number, number, number, number];
-export const tint: (a: number, b: number, c: number) => [number, number, number, number];
-export const shade: (a: number, b: number, c: number) => [number, number, number, number];
 export const __wbindgen_malloc: (a: number, b: number) => number;
 export const __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;
 export const __wbindgen_exn_store: (a: number) => void;
 export const __externref_table_alloc: () => number;
 export const __wbindgen_export_4: WebAssembly.Table;
 export const __externref_table_dealloc: (a: number) => void;
-export const __externref_drop_slice: (a: number, b: number) => void;
 export const __wbindgen_free: (a: number, b: number, c: number) => void;
+export const __externref_drop_slice: (a: number, b: number) => void;
 export const __wbindgen_start: () => void;

src/components/ActionIcon.tsx

@@ -1,6 +1,6 @@
 import { Icon, IconProps } from '@iconify/react/dist/iconify.js';
 import cx from 'clsx';
-import { MouseEvent, MouseEventHandler, useCallback } from 'react';
+import { MouseEventHandler, useCallback } from 'react';
 import styles from './ActionIcon.module.css';
 
 type ActionIconProps = {

src/components/ColorComponentInput.tsx

@@ -87,7 +87,7 @@ export function ColorComponentInput({ color, onChange }: ColorComponentInputProp
     }
   };
   const updateH = (evt: ChangeEvent<HTMLInputElement>) => {
-    let value = parseInt(evt.target.value, 10);
+    const value = parseInt(evt.target.value, 10);
     if (value > 360) {
       value -= 360;
     }

src/components/ColorRangePicker.tsx

@@ -28,7 +28,7 @@ export function ColorRangePicker({
 }: ColorRangePickerProps) {
   const [pickerValue, setPickerValue] = useState(value);
   const handlePickerChange = (evt: ChangeEvent<HTMLInputElement>) => {
-    const value = Number(evt.target.value);
+    const value = evt.target.value as number;
     setPickerValue(valueProcess(value));
     onChange?.(valueProcess(value));
   };

src/components/EditableTitle.tsx

@@ -4,7 +4,7 @@ import { useRef, useState } from 'react';
 import styles from './EditableTitle.module.css';
 
 type EditableTitleProps = {
-  title?: string;
+  title: string;
   onChange?: (newTitle: string) => void;
 };
 

src/components/FloatColorPicker.tsx

@@ -6,7 +6,7 @@ import styles from './FloatColorPicker.module.css';
 
 type FloatColorPickerProps = {
   name?: string;
-  color?: string | null;
+  color?: string;
   onPick?: (color: string | null | undefined) => void;
 };
 

src/components/HSegmentedControl.tsx

@@ -52,7 +52,6 @@ export function HSegmentedControl({
             <div
               key={`${index}_${value}`}
               className={cx(styles.option, isEqual(selected, value) && styles.selected)}
-              //@ts-expect-error TS2322
               ref={(el) => (optionsRef.current[index] = el!)}
               onClick={() => handleSelectAction(value, index)}>
               {label}

src/components/LabeledPicker.tsx

@@ -26,7 +26,7 @@ export function LabeledPicker({
 }: LabeledPickerProps) {
   const [pickerValue, setPickerValue] = useState(value ?? min);
   const handlePickerChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = Number(event.target.value);
+    const value = event.target.value as number;
     setPickerValue(value);
     onChange?.(value);
   };

src/components/Notifications.tsx

@@ -118,7 +118,7 @@ type ToastProps = {
   icon?: string;
   duration?: ToastDuration;
   ref: RefObject<HTMLDivElement>;
-  closeAction: (tid?: string) => void;
+  closeAction: () => void;
 };
 const Toast = ({
   kind,
@@ -157,7 +157,7 @@ export function useNotification() {
 type NotificationElement = {
   id: string;
   element: ReactNode;
-  ref: RefObject<ReactNode | HTMLDivElement>;
+  ref: RefObject<ReactNode>;
 };
 type NotificationsProps = {
   defaultDuration?: number;
@@ -184,7 +184,7 @@ export function Notifications({
       duration?: number,
     ) => {
       const id = v4();
-      const ref = createRef<ReactNode | HTMLDivElement>();
+      const ref = createRef(null);
       const newNotify = (
         <Notification
           kind={kind}
@@ -194,7 +194,6 @@ export function Notifications({
           message={message}
           duration={duration ?? defaultDuration}
           closeAction={removeNotification}
-          //@ts-expect-error TS2322
           ref={ref}
         />
       );
@@ -208,9 +207,14 @@ export function Notifications({
     setToasts((prev) => filter(prev, (n) => !isEqual(n.id, id)));
   }, []);
   const showToast = useCallback(
-    (kind: NotificationType, message?: string, icon?: string, duration?: ToastDuration) => {
+    (
+      kind: NotificationType,
+      message?: string,
+      icon?: IconifyIconProps['icon'],
+      duration?: ToastDuration,
+    ) => {
       const id = v4();
-      const ref = createRef<HTMLDivElement>();
+      const ref = createRef(null);
       const newToast = (
         <Toast
           kind={kind}
@@ -234,6 +238,9 @@ export function Notifications({
       value={{
         addNotification,
         removeNotification,
+        showDialog: () => '',
+        showModalDialog: () => '',
+        closeDialog: () => {},
         showToast,
       }}>
       {children}
@@ -243,7 +250,6 @@ export function Notifications({
             {notifications.slice(0, maxNotifications).map(({ id, element, ref }) => (
               <CSSTransition
                 key={id}
-                //@ts-expect-error TS2322
                 nodeRef={ref}
                 unmountOnExit
                 timeout={500}
@@ -265,7 +271,6 @@ export function Notifications({
             {toasts.slice(0, 1).map(({ id, element, ref }) => (
               <CSSTransition
                 key={id}
-                //@ts-expect-error TS2322
                 nodeRef={ref}
                 unmountOnExit
                 timeout={500}

src/components/ScrollArea.tsx

@@ -1,5 +1,5 @@
 import { clamp } from 'lodash-es';
-import { MouseEvent, RefObject, useEffect, useRef, useState, WheelEvent } from 'react';
+import { RefObject, useEffect, useRef, useState } from 'react';
 import styles from './ScrollArea.module.css';
 
 type ScrollBarProps = {
@@ -12,12 +12,10 @@ function VerticalScrollBar({ containerRef }: ScrollBarProps) {
   const thumbRef = useRef<HTMLDivElement | null>(null);
   const handleMouseDown = (evt: MouseEvent) => {
     evt.preventDefault();
-    //@ts-expect-error TS2769
     document.addEventListener('mousemove', handleMouseMove);
-    //@ts-expect-error TS2769
     document.addEventListener('mouseup', handleMouseUp);
   };
-  const handleMouseMove = (evt: MouseEvent<HTMLDivElement>) => {
+  const handleMouseMove = (evt: MouseEvent) => {
     evt.preventDefault();
     const container = containerRef?.current;
     const scrollbar = trackRef.current;
@@ -36,9 +34,7 @@ function VerticalScrollBar({ containerRef }: ScrollBarProps) {
   };
   const handleMouseUp = (evt: MouseEvent) => {
     evt.preventDefault();
-    //@ts-expect-error TS2769
     document.removeEventListener('mousemove', handleMouseMove);
-    //@ts-expect-error TS2769
     document.removeEventListener('mouseup', handleMouseUp);
   };
 
@@ -81,9 +77,7 @@ function HorizontalScrollBar({ containerRef }: ScrollBarProps) {
   const thumbRef = useRef<HTMLDivElement | null>(null);
   const handleMouseDown = (evt: MouseEvent) => {
     evt.preventDefault();
-    //@ts-expect-error TS2769
     document.addEventListener('mousemove', handleMouseMove);
-    //@ts-expect-error TS2769
     document.addEventListener('mouseup', handleMouseUp);
   };
   const handleMouseMove = (evt: MouseEvent) => {
@@ -105,9 +99,7 @@ function HorizontalScrollBar({ containerRef }: ScrollBarProps) {
   };
   const handleMouseUp = (evt: MouseEvent) => {
     evt.preventDefault();
-    //@ts-expect-error TS2769
     document.removeEventListener('mousemove', handleMouseMove);
-    //@ts-expect-error TS2769
     document.removeEventListener('mouseup', handleMouseUp);
   };
 
@@ -137,7 +129,7 @@ function HorizontalScrollBar({ containerRef }: ScrollBarProps) {
         className={styles.h_thumb}
         ref={thumbRef}
         style={{ left: thumbPos }}
-        onMouseDown={(e) => handleMouseDown(e)}
+        onMouseDown={handleMouseDown}
       />
     </div>
   );
@@ -156,10 +148,10 @@ export function ScrollArea({
   enableY = false,
   normalizedScroll = false,
 }: ScrollAreaProps) {
-  const scrollContainerRef = useRef<HTMLDivElement | null>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
   const [xScrollNeeded, setXScrollNeeded] = useState(false);
   const [yScrollNeeded, setYScrollNeeded] = useState(false);
-  const handleWheel = (evt: WheelEvent<HTMLDivElement>) => {
+  const handleWheel = (evt: WheelEvent) => {
     const container = scrollContainerRef?.current;
     if (enableY && container) {
       const delta = evt.deltaY;
@@ -185,7 +177,7 @@ export function ScrollArea({
 
   return (
     <div className={styles.scroll_area}>
-      <div className={styles.content} ref={scrollContainerRef} onWheel={(e) => handleWheel(e)}>
+      <div className={styles.content} ref={scrollContainerRef} onWheel={handleWheel}>
         {children}
       </div>
       {enableY && yScrollNeeded && <VerticalScrollBar containerRef={scrollContainerRef} />}

src/components/Switch.tsx

@@ -26,14 +26,11 @@ export function Switch({ name, checked = false, disabled = false, onChange }: Sw
   }, [checked]);
 
   return (
-    //@ts-expect-error TS2322
     <div className={styles.switch} disabled={disabled}>
       <div
         className={cx(styles.switch_handle, isChecked && styles.checked)}
         onClick={handleSwitch}></div>
-      {!isNil(name) && (
-        <input type="hidden" name={name} value={isChecked ? 'checked' : undefined} />
-      )}
+      {!isNil(name) && <input type="hidden" name={name} value={isChecked} />}
     </div>
   );
 }

src/components/Tooltip.tsx

@@ -18,7 +18,7 @@ const positionMap = {
 
 export function Tooltip({ content, position = 'top', children }: TooltipProps) {
   const [show, setShow] = useState(false);
-  const contentRef = useRef<HTMLDivElement | null>(null);
+  const contentRef = useRef<HTMLDivElement>();
 
   return (
     <div

src/components/VSegmentedControl.tsx

@@ -52,7 +52,6 @@ export function VSegmentedControl({
             <div
               key={`${index}_${value}`}
               className={cx(styles.option, isEqual(selected, value) && styles.selected)}
-              //@ts-expect-error TS2322
               ref={(el) => (optionsRef.current[index] = el!)}
               onClick={() => handleSelectAction(value, index)}>
               {label}

src/hooks/useCopy.ts

@@ -6,7 +6,7 @@ import { NotificationType, useNotification } from '../components/Notifications';
 export function useCopy() {
   const { showToast } = useNotification();
   const [cpState, copyToClipboard] = useCopyToClipboard();
-  const copyAction = useCallback((content?: string | null) => {
+  const copyAction = useCallback((content: string) => {
     if (isNil(content) || isEmpty(content)) return;
     copyToClipboard(content);
   }, []);

src/models.ts

@@ -4,12 +4,12 @@ import { MaterialDesign3SchemeStorage } from './material-3-scheme';
 import { QSchemeStorage } from './q-scheme';
 import { SwatchSchemeStorage } from './swatch_scheme';
 
-export type Option<T = string | number | null> =
+export type Option =
   | {
       label: string;
-      value: T;
+      value: string | number | null;
     }
-  | Record<'label' | 'value', T>;
+  | Record<'label' | 'value', string | number | null>;
 
 export type HarmonyColor = {
   color: string;

src/page-components/color-compare/HCTCompare.tsx

@@ -1,14 +1,23 @@
 import { useMemo } from 'react';
-import { Differ, HctDiffference } from '../../color_functions/color_module';
+import { HctDiffference } from '../../color_functions/color_module';
 import { useColorFunction } from '../../ColorFunctionContext';
 import styles from './CompareLayout.module.css';
 import { CompareMethodProps } from './share-props';
 
-const defaultCompareResult: HctDiffference = new HctDiffference(
-  new Differ(0, 0),
-  new Differ(0, 0),
-  new Differ(0, 0),
-);
+const defaultCompareResult: HctDiffference = {
+  hue: {
+    delta: 0,
+    percent: 0,
+  },
+  chroma: {
+    delta: 0,
+    percent: 0,
+  },
+  lightness: {
+    delta: 0,
+    percent: 0,
+  },
+};
 
 export function HCTCompare({
   basic = '000000',

src/page-components/color-compare/HSLCompare.tsx

@@ -1,14 +1,23 @@
 import { useMemo } from 'react';
-import { Differ, HSLDifference } from '../../color_functions/color_module';
+import { HSLDifference } from '../../color_functions/color_module';
 import { useColorFunction } from '../../ColorFunctionContext';
 import styles from './CompareLayout.module.css';
 import { CompareMethodProps } from './share-props';
 
-const defaultCompareResult: HSLDifference = new HSLDifference(
-  new Differ(0, 0),
-  new Differ(0, 0),
-  new Differ(0, 0),
-);
+const defaultCompareResult: HSLDifference = {
+  hue: {
+    delta: 0,
+    percent: 0,
+  },
+  saturation: {
+    delta: 0,
+    percent: 0,
+  },
+  lightness: {
+    delta: 0,
+    percent: 0,
+  },
+};
 
 export function HSLCompare({
   basic = '000000',

src/page-components/color-compare/OKLCHCompare.tsx

@@ -1,14 +1,23 @@
 import { useMemo } from 'react';
-import { Differ, OklchDifference } from '../../color_functions/color_module';
+import { OklchDifference } from '../../color_functions/color_module';
 import { useColorFunction } from '../../ColorFunctionContext';
 import styles from './CompareLayout.module.css';
 import { CompareMethodProps } from './share-props';
 
-const defaultCompareResult: OklchDifference = new OklchDifference(
-  new Differ(0, 0),
-  new Differ(0, 0),
-  new Differ(0, 0),
-);
+const defaultCompareResult: OklchDifference = {
+  hue: {
+    delta: 0,
+    percent: 0,
+  },
+  chroma: {
+    delta: 0,
+    percent: 0,
+  },
+  lightness: {
+    delta: 0,
+    percent: 0,
+  },
+};
 
 export function OklchCompare({
   basic = '000000',

src/page-components/color-compare/RGBCompare.tsx

@@ -1,14 +1,23 @@
 import { useMemo } from 'react';
-import { Differ, RGBDifference } from '../../color_functions/color_module';
+import { RGBDifference } from '../../color_functions/color_module';
 import { useColorFunction } from '../../ColorFunctionContext';
 import styles from './CompareLayout.module.css';
 import { CompareMethodProps } from './share-props';
 
-const defaultCompareResult: RGBDifference = new RGBDifference(
-  new Differ(0, 0),
-  new Differ(0, 0),
-  new Differ(0, 0),
-);
+const defaultCompareResult: RGBDifference = {
+  r: {
+    delta: 0,
+    percent: 0,
+  },
+  g: {
+    delta: 0,
+    percent: 0,
+  },
+  b: {
+    delta: 0,
+    percent: 0,
+  },
+};
 
 export function RGBCompare({
   basic = '000000',

src/page-components/color-compare/ShadeScale.tsx

@@ -5,7 +5,12 @@ import { useColorFunction } from '../../ColorFunctionContext';
 import styles from './CompareLayout.module.css';
 import { CompareMethodProps } from './share-props';
 
-const defaultMixResult: MixReversing = new MixReversing(0, 0, 0, 0);
+const defaultMixResult: MixReversing = {
+  r_factor: 0,
+  g_factor: 0,
+  b_factor: 0,
+  average: 0,
+};
 
 export function ShadeScale({ basic = '000000', compare = '000000' }: CompareMethodProps) {
   const { colorFn } = useColorFunction();

src/page-components/color-compare/TintScale.tsx

@@ -5,7 +5,12 @@ import { useColorFunction } from '../../ColorFunctionContext';
 import styles from './CompareLayout.module.css';
 import { CompareMethodProps } from './share-props';
 
-const defaultMixResult: MixReversing = new MixReversing(0, 0, 0, 0);
+const defaultMixResult: MixReversing = {
+  r_factor: 0,
+  g_factor: 0,
+  b_factor: 0,
+  average: 0,
+};
 
 export function TintScale({ basic = '000000', compare = '000000' }: CompareMethodProps) {
   const { colorFn } = useColorFunction();

src/page-components/lighten-darken/darkens.tsx

@@ -23,18 +23,18 @@ export function Darkens({ color, darkens, mix, step, maximum, copyMode }: Darken
       switch (mix) {
         case 'progressive':
           for (let i = 1; i <= darkens; i++) {
-            const darkenColor = colorFn.darken(last(darkenColors) ?? '', step ?? 0);
+            const darkenColor = colorFn.darken(last(darkenColors), step);
             darkenColors.push(darkenColor);
           }
           break;
         case 'linear':
           for (let i = 1; i <= darkens; i++) {
-            const darkenColor = colorFn.darken(color, (step ?? 0) * i);
+            const darkenColor = colorFn.darken(color, step * i);
             darkenColors.push(darkenColor);
           }
           break;
         case 'average': {
-          const interval = (maximum ?? 0) / darkens / 100;
+          const interval = maximum / darkens / 100;
           for (let i = 1; i <= darkens; i++) {
             const darkenColor = colorFn.darken(color, interval * i);
             darkenColors.push(darkenColor);

src/page-components/lighten-darken/lightens.tsx

@@ -23,18 +23,18 @@ export function Lightens({ color, lightens, mix, step, maximum, copyMode }: Ligh
       switch (mix) {
         case 'progressive':
           for (let i = 1; i <= lightens; i++) {
-            const lightenColor = colorFn.lighten(last(lightenColors) ?? '', step ?? 0);
+            const lightenColor = colorFn.lighten(last(lightenColors), step);
             lightenColors.push(lightenColor);
           }
           break;
         case 'linear':
           for (let i = 1; i <= lightens; i++) {
-            const lightenColor = colorFn.lighten(color, (step ?? 0) * i);
+            const lightenColor = colorFn.lighten(color, step * i);
             lightenColors.push(lightenColor);
           }
           break;
         case 'average': {
-          const interval = (maximum ?? 0) / lightens / 100;
+          const interval = maximum / lightens / 100;
           for (let i = 1; i <= lightens; i++) {
             const lightenColor = colorFn.lighten(color, interval * i);
             lightenColors.push(lightenColor);

src/page-components/scheme/ColorEntry.tsx

@@ -1,6 +1,6 @@
 import { isEmpty } from 'lodash-es';
 import { ActionIcon } from '../../components/ActionIcon';
-import { FloatColorPicker } from '../../components/FloatColorPicker';
+import { FloatColorPicker } from '../../components/FloatcolorPicker';
 import styles from './colorEntry.module.css';
 
 export type IdenticalColorEntry = {

src/page-components/scheme/M2Scheme.tsx

@@ -1,8 +1,6 @@
 import { isEqual, isNil } from 'lodash-es';
 import { useState } from 'react';
 import { Tab } from '../../components/Tab';
-import { MaterialDesign2SchemeStorage } from '../../material-2-scheme';
-import { SchemeContent } from '../../models';
 import { SchemeExport } from './Export';
 import { M2SchemeBuilder } from './m2-scheme/Builder';
 import { M2SchemePreview } from './m2-scheme/Preview';
@@ -13,18 +11,18 @@ const tabOptions = [
   { title: 'Exports', id: 'export' },
 ];
 
-type M2SchemeProps = {
-  scheme: SchemeContent<MaterialDesign2SchemeStorage>;
+type M3SchemeProps = {
+  scheme: SchemeContent<MaterialDesign3SchemeStorage>;
 };
 
-export function M2Scheme({ scheme }: M2SchemeProps) {
+export function M2Scheme({ scheme }: M3SchemeProps) {
   const [activeTab, setActiveTab] = useState<(typeof tabOptions)[number]['id']>(() =>
     isNil(scheme.schemeStorage.scheme) ? 'builder' : 'overview',
   );
 
   return (
     <>
-      <Tab tabs={tabOptions} activeTab={activeTab} onActive={(v) => setActiveTab(v as string)} />
+      <Tab tabs={tabOptions} activeTab={activeTab} onActive={setActiveTab} />
       {isEqual(activeTab, 'overview') && <M2SchemePreview scheme={scheme} />}
       {isEqual(activeTab, 'builder') && (
         <M2SchemeBuilder scheme={scheme} onBuildComplete={() => setActiveTab('overview')} />

src/page-components/scheme/M3Scheme.tsx

@@ -2,7 +2,6 @@ import { isEqual, isNil } from 'lodash-es';
 import { useState } from 'react';
 import { Tab } from '../../components/Tab';
 import { MaterialDesign3SchemeStorage } from '../../material-3-scheme';
-import { SchemeContent } from '../../models';
 import { SchemeExport } from './Export';
 import { M3SchemeBuilder } from './m3-scheme/Builder';
 import { M3SchemePreview } from './m3-scheme/Preview';
@@ -24,7 +23,7 @@ export function M3Scheme({ scheme }: M3SchemeProps) {
 
   return (
     <>
-      <Tab tabs={tabOptions} activeTab={activeTab} onActive={(v) => setActiveTab(v as string)} />
+      <Tab tabs={tabOptions} activeTab={activeTab} onActive={setActiveTab} />
       {isEqual(activeTab, 'overview') && <M3SchemePreview scheme={scheme} />}
       {isEqual(activeTab, 'builder') && (
         <M3SchemeBuilder scheme={scheme} onBuildCompleted={() => setActiveTab('overview')} />

src/page-components/scheme/QScheme.tsx

@@ -24,7 +24,7 @@ export function QScheme({ scheme }: QSchemeProps) {
 
   return (
     <>
-      <Tab tabs={tabOptions} activeTab={activeTab} onActive={(v) => setActiveTab(v as string)} />
+      <Tab tabs={tabOptions} activeTab={activeTab} onActive={setActiveTab} />
       {isEqual(activeTab, 'overview') && <QSchemePreview scheme={scheme} />}
       {isEqual(activeTab, 'builder') && (
         <QSchemeBuilder scheme={scheme} onBuildCompleted={() => setActiveTab('overview')} />

src/page-components/scheme/SwatchScheme.tsx

@@ -24,7 +24,7 @@ export function SwatchScheme({ scheme }: SwatchSchemeProps) {
 
   return (
     <>
-      <Tab tabs={tabOptions} activeTab={activeTab} onActive={(v) => setActiveTab(v as string)} />
+      <Tab tabs={tabOptions} activeTab={activeTab} onActive={setActiveTab} />
       {isEqual(activeTab, 'overview') && <SwatchSchemePreview scheme={scheme} />}
       {isEqual(activeTab, 'builder') && (
         <SwatchSchemeBuilder scheme={scheme} onBuildCompleted={() => setActiveTab('overview')} />

src/page-components/scheme/m2-scheme/Builder.tsx

@@ -1,7 +1,7 @@
 import { includes, isEmpty, isNil, merge } from 'lodash-es';
 import { useActionState, useCallback, useMemo, useState } from 'react';
 import { useColorFunction } from '../../../ColorFunctionContext';
-import { FloatColorPicker } from '../../../components/FloatColorPicker';
+import { FloatColorPicker } from '../../../components/FloatcolorPicker';
 import { ScrollArea } from '../../../components/ScrollArea';
 import { MaterialDesign2SchemeStorage } from '../../../material-2-scheme';
 import { SchemeContent } from '../../../models';
@@ -36,63 +36,60 @@ export function M2SchemeBuilder({ scheme, onBuildComplete }: M2SchemeBuilderProp
     [originalColors, newColors, deleted],
   );
 
-  const [errMsg, handleSubmitAction] = useActionState<Map<string, string>, FormData>(
-    (_state, formData) => {
-      const errMsg = new Map<string, string>();
-      try {
-        const primaryColor = formData.get('primary') as string;
-        if (isNil(primaryColor) || isEmpty(primaryColor)) {
-          errMsg.set('primary', 'Primary color is required');
-        }
-        const secondaryColor = formData.get('secondary') as string;
-        if (isNil(secondaryColor) || isEmpty(secondaryColor)) {
-          errMsg.set('secondary', 'Secondary color is required');
-        }
-        const errorColor = formData.get('error') as string;
-        if (isNil(errorColor) || isEmpty(errorColor)) {
-          errMsg.set('error', 'Error color is required');
-        }
-        if (!isEmpty(errMsg)) return errMsg;
-
-        const customColors: Record<string, string> = {};
-        for (const key of colorKeys) {
-          const name = formData.get(`name_${key}`) as string;
-          const color = formData.get(`color_${key}`) as string;
-          if (isNil(name) || isEmpty(name) || isNil(color) || isEmpty(color)) continue;
-          customColors[name] = color;
-        }
-        const generatedScheme = colorFn?.generate_material_design_2_scheme(
-          primaryColor,
-          secondaryColor,
-          errorColor,
-          customColors,
-        );
-        updateScheme((prev) => {
-          prev.schemeStorage.source = {
-            primary: primaryColor,
-            secondary: secondaryColor,
-            error: errorColor,
-            custom_colors: customColors,
-          };
-          prev.schemeStorage.scheme = merge(generatedScheme[0], {
-            light: { custom_colors: mapToObject(generatedScheme[0].light.custom_colors) },
-            dark: { custom_colors: mapToObject(generatedScheme[0].dark.custom_colors) },
-          });
-          prev.schemeStorage.cssVariables = generatedScheme[1];
-          prev.schemeStorage.scssVariables = generatedScheme[2];
-          prev.schemeStorage.jsVariables = generatedScheme[3];
-          return prev;
-        });
-
-        onBuildComplete?.();
-      } catch (e) {
-        console.error('[generate m2 scheme]', e);
+  const [errMsg, handleSubmitAction] = useActionState((state, formData) => {
+    const errMsg = new Map<string, string>();
+    try {
+      const primaryColor = formData.get('primary');
+      if (isNil(primaryColor) || isEmpty(primaryColor)) {
+        errMsg.set('primary', 'Primary color is required');
       }
+      const secondaryColor = formData.get('secondary');
+      if (isNil(secondaryColor) || isEmpty(secondaryColor)) {
+        errMsg.set('secondary', 'Secondary color is required');
+      }
+      const errorColor = formData.get('error');
+      if (isNil(errorColor) || isEmpty(errorColor)) {
+        errMsg.set('error', 'Error color is required');
+      }
+      if (!isEmpty(errMsg)) return errMsg;
 
-      return errMsg;
-    },
-    new Map<string, string>(),
-  );
+      const customColors: Record<string, string> = {};
+      for (const key of colorKeys) {
+        const name = formData.get(`name_${key}`) as string;
+        const color = formData.get(`color_${key}`) as string;
+        if (isNil(name) || isEmpty(name) || isNil(color) || isEmpty(color)) continue;
+        customColors[name] = color;
+      }
+      const generatedScheme = colorFn?.generate_material_design_2_scheme(
+        primaryColor,
+        secondaryColor,
+        errorColor,
+        customColors,
+      );
+      updateScheme((prev) => {
+        prev.schemeStorage.source = {
+          primary: primaryColor,
+          secondary: secondaryColor,
+          error: errorColor,
+          custom_colors: customColors,
+        };
+        prev.schemeStorage.scheme = merge(generatedScheme[0], {
+          light: { custom_colors: mapToObject(generatedScheme[0].light.custom_colors) },
+          dark: { custom_colors: mapToObject(generatedScheme[0].dark.custom_colors) },
+        });
+        prev.schemeStorage.cssVariables = generatedScheme[1];
+        prev.schemeStorage.scssVariables = generatedScheme[2];
+        prev.schemeStorage.jsVariables = generatedScheme[3];
+        return prev;
+      });
+
+      onBuildComplete?.();
+    } catch (e) {
+      console.error('[generate m2 scheme]', e);
+    }
+
+    return errMsg;
+  }, new Map<string, string>());
 
   return (
     <ScrollArea enableY>

src/page-components/scheme/m2-scheme/Preview.tsx

@@ -86,8 +86,8 @@ export function M2SchemePreview({ scheme }: M2SchemePreviewProps) {
   return (
     <ScrollArea enableY>
       <div className={styles.preview_layout}>
-        <PreviewBlock title="Light" baseline={scheme.schemeStorage.scheme!.light} />
-        <PreviewBlock title="Dark" baseline={scheme.schemeStorage.scheme!.dark} />
+        <PreviewBlock title="Light" baseline={scheme.schemeStorage.scheme?.light} />
+        <PreviewBlock title="Dark" baseline={scheme.schemeStorage.scheme?.dark} />
       </div>
     </ScrollArea>
   );

src/page-components/scheme/m3-scheme/Builder.tsx

@@ -1,7 +1,7 @@
 import { includes, isEmpty, isNil } from 'lodash-es';
 import { useActionState, useCallback, useMemo, useState } from 'react';
 import { useColorFunction } from '../../../ColorFunctionContext';
-import { FloatColorPicker } from '../../../components/FloatColorPicker';
+import { FloatColorPicker } from '../../../components/FloatcolorPicker';
 import { ScrollArea } from '../../../components/ScrollArea';
 import { MaterialDesign3Scheme, MaterialDesign3SchemeStorage } from '../../../material-3-scheme';
 import { SchemeContent } from '../../../models';
@@ -36,67 +36,64 @@ export function M3SchemeBuilder({ scheme, onBuildCompleted }: M3SchemeBuilderPro
     [originalColors, newColors, deleted],
   );
 
-  const [errMsg, handleSubmitAction] = useActionState<Map<string, string>, FormData>(
-    (_state, formData) => {
-      const errMsg = new Map<string, string>();
+  const [errMsg, handleSubmitAction] = useActionState((state, formData) => {
+    const errMsg = new Map<string, string>();
 
-      try {
-        const sourceColor = formData.get('source') as string;
-        if (isNil(sourceColor) || isEmpty(sourceColor)) {
-          errMsg.set('source', 'Source color is required');
-        }
-        const errorColor = formData.get('error') as string;
-        if (isNil(errorColor) || isEmpty(errorColor)) {
-          errMsg.set('error', 'Error color is required');
-        }
-        if (!isEmpty(errMsg)) return errMsg;
+    try {
+      const sourceColor = formData.get('source');
+      if (isNil(sourceColor) || isEmpty(sourceColor)) {
+        errMsg.set('source', 'Source color is required');
+      }
+      const errorColor = formData.get('error');
+      if (isNil(errorColor) || isEmpty(errorColor)) {
+        errMsg.set('error', 'Error color is required');
+      }
+      if (!isEmpty(errMsg)) return errMsg;
 
-        const customColors: Record<string, string> = {};
-        for (const key of colorKeys) {
-          const name = formData.get(`name_${key}`) as string;
-          const color = formData.get(`color_${key}`) as string;
-          if (isNil(name) || isEmpty(name) || isNil(color) || isEmpty(color)) continue;
-          customColors[name] = color;
-        }
-
-        const generatedScheme = colorFn?.generate_material_design_3_scheme(
-          sourceColor,
-          errorColor,
-          customColors,
-        );
-        updateScheme((prev) => {
-          prev.schemeStorage.source = {
-            source: sourceColor as string,
-            error: errorColor as string,
-            custom_colors: customColors,
-          };
-          prev.schemeStorage.scheme = {
-            white: generatedScheme[0].white,
-            black: generatedScheme[0].black,
-            light_baseline: {
-              ...generatedScheme[0].light_baseline,
-              customs: mapToObject(generatedScheme[0].light_baseline.customs),
-            },
-            dark_baseline: {
-              ...generatedScheme[0].dark_baseline,
-              customs: mapToObject(generatedScheme[0].dark_baseline.customs),
-            },
-          } as MaterialDesign3Scheme;
-          prev.schemeStorage.cssVariables = generatedScheme[1];
-          prev.schemeStorage.scssVariables = generatedScheme[2];
-          prev.schemeStorage.jsVariables = generatedScheme[3];
-          return prev;
-        });
-
-        onBuildCompleted?.();
-      } catch (e) {
-        console.error('[generate m3 scheme]', e);
+      const customColors: Record<string, string> = {};
+      for (const key of colorKeys) {
+        const name = formData.get(`name_${key}`) as string;
+        const color = formData.get(`color_${key}`) as string;
+        if (isNil(name) || isEmpty(name) || isNil(color) || isEmpty(color)) continue;
+        customColors[name] = color;
       }
 
-      return errMsg;
-    },
-    new Map<string, string>(),
-  );
+      const generatedScheme = colorFn?.generate_material_design_3_scheme(
+        sourceColor,
+        errorColor,
+        customColors,
+      );
+      updateScheme((prev) => {
+        prev.schemeStorage.source = {
+          source: sourceColor as string,
+          error: errorColor as string,
+          custom_colors: customColors,
+        };
+        prev.schemeStorage.scheme = {
+          white: generatedScheme[0].white,
+          black: generatedScheme[0].black,
+          light_baseline: {
+            ...generatedScheme[0].light_baseline,
+            customs: mapToObject(generatedScheme[0].light_baseline.customs),
+          },
+          dark_baseline: {
+            ...generatedScheme[0].dark_baseline,
+            customs: mapToObject(generatedScheme[0].dark_baseline.customs),
+          },
+        } as MaterialDesign3Scheme;
+        prev.schemeStorage.cssVariables = generatedScheme[1];
+        prev.schemeStorage.scssVariables = generatedScheme[2];
+        prev.schemeStorage.jsVariables = generatedScheme[3];
+        return prev;
+      });
+
+      onBuildCompleted?.();
+    } catch (e) {
+      console.error('[generate m3 scheme]', e);
+    }
+
+    return errMsg;
+  }, new Map<string, string>());
 
   return (
     <ScrollArea enableY>

src/page-components/scheme/m3-scheme/Preview.tsx

@@ -264,8 +264,8 @@ export function M3SchemePreview({ scheme }: M3SchemePreviewProps) {
   return (
     <ScrollArea enableY>
       <div className={styles.preview_layout}>
-        <PreviewBlock title="Light Scheme" baseline={scheme.schemeStorage.scheme!.light_baseline} />
-        <PreviewBlock title="Dark Scheme" baseline={scheme.schemeStorage.scheme!.dark_baseline} />
+        <PreviewBlock title="Light Scheme" baseline={scheme.schemeStorage.scheme?.light_baseline} />
+        <PreviewBlock title="Dark Scheme" baseline={scheme.schemeStorage.scheme?.dark_baseline} />
       </div>
     </ScrollArea>
   );

src/page-components/scheme/q-scheme/Builder.tsx

@@ -7,7 +7,7 @@ import {
   WACGSetting,
 } from '../../../color_functions/color_module';
 import { useColorFunction } from '../../../ColorFunctionContext';
-import { FloatColorPicker } from '../../../components/FloatColorPicker';
+import { FloatColorPicker } from '../../../components/FloatcolorPicker';
 import { ScrollArea } from '../../../components/ScrollArea';
 import { VSegmentedControl } from '../../../components/VSegmentedControl';
 import { SchemeContent } from '../../../models';
@@ -82,105 +82,102 @@ export function QSchemeBuilder({ scheme, onBuildCompleted }: QSchemeBuilderProps
     return [];
   }, []);
 
-  const [errMsg, handleSubmitAction] = useActionState<Map<string, string>, FormData>(
-    (_state, formData) => {
-      const errMsg = new Map<string, string>();
-      const requiredFields = [
-        'primary',
-        'danger',
-        'success',
-        'warn',
-        'info',
-        'foreground',
-        'background',
-      ];
-      for (const field of requiredFields) {
-        if (!formData.get(field)) {
-          errMsg.set(field, 'This color is required for scheme generating.');
-        }
+  const [errMsg, handleSubmitAction] = useActionState((state, formData) => {
+    const errMsg = new Map<string, string>();
+    const requiredFields = [
+      'primary',
+      'danger',
+      'success',
+      'warn',
+      'info',
+      'foreground',
+      'background',
+    ];
+    for (const field of requiredFields) {
+      if (!formData.get(field)) {
+        errMsg.set(field, 'This color is required for scheme generating.');
       }
-      if (!isEmpty(errMsg)) return errMsg;
-      try {
-        const schemeSetting = new SchemeSetting(
-          new ColorShifting(
-            Number(formData.get('hover_chroma')) / 100,
-            Number(formData.get('hover_lightness')) / 100,
-          ),
-          new ColorShifting(
-            Number(formData.get('active_chroma')) / 100,
-            Number(formData.get('active_lightness')) / 100,
-          ),
-          new ColorShifting(
-            Number(formData.get('focus_chroma')) / 100,
-            Number(formData.get('focus_lightness')) / 100,
-          ),
-          new ColorShifting(
-            Number(formData.get('disabled_chroma')) / 100,
-            Number(formData.get('disabled_lightness')) / 100,
-          ),
-          new ColorShifting(
-            Number(formData.get('dark_chroma')) / 100,
-            Number(formData.get('dark_lightness')) / 100,
-          ),
-          Number(formData.get('expanding')) as ColorExpand,
-          Number(formData.get('wacg')) as WACGSetting,
-        );
-        const dumpedSetting = schemeSetting.toJsValue() as QSchemeSetting;
+    }
+    if (!isEmpty(errMsg)) return errMsg;
+    try {
+      const schemeSetting = new SchemeSetting(
+        new ColorShifting(
+          Number(formData.get('hover_chroma')) / 100,
+          Number(formData.get('hover_lightness')) / 100,
+        ),
+        new ColorShifting(
+          Number(formData.get('active_chroma')) / 100,
+          Number(formData.get('active_lightness')) / 100,
+        ),
+        new ColorShifting(
+          Number(formData.get('focus_chroma')) / 100,
+          Number(formData.get('focus_lightness')) / 100,
+        ),
+        new ColorShifting(
+          Number(formData.get('disabled_chroma')) / 100,
+          Number(formData.get('disabled_lightness')) / 100,
+        ),
+        new ColorShifting(
+          Number(formData.get('dark_chroma')) / 100,
+          Number(formData.get('dark_lightness')) / 100,
+        ),
+        Number(formData.get('expanding')) as ColorExpand,
+        Number(formData.get('wacg')) as WACGSetting,
+      );
+      const dumpedSetting = schemeSetting.toJsValue() as QSchemeSetting;
 
-        const source: QSchemeSource = {
-          primary: defaultEmptyFormData(formData, 'primary', null),
-          secondary: defaultEmptyFormData(formData, 'secondary', null),
-          tertiary: defaultEmptyFormData(formData, 'tertiary', null),
-          accent: defaultEmptyFormData(formData, 'accent', null),
-          danger: defaultEmptyFormData(formData, 'danger', null),
-          success: defaultEmptyFormData(formData, 'success', null),
-          warning: defaultEmptyFormData(formData, 'warn', null),
-          info: defaultEmptyFormData(formData, 'info', null),
-          foreground: defaultEmptyFormData(formData, 'foreground', null),
-          background: defaultEmptyFormData(formData, 'background', null),
-          setting: dumpedSetting,
-        };
-        const generatedScheme = every([source.secondary, source.tertiary, source.accent], isNil)
-          ? colorFn?.generate_q_scheme_automatically(
-              source.primary ?? '',
-              source.danger ?? '',
-              source.success ?? '',
-              source.warning ?? '',
-              source.info ?? '',
-              source.foreground ?? '',
-              source.background ?? '',
-              schemeSetting,
-            )
-          : colorFn?.generate_q_scheme_manually(
-              source.primary ?? '',
-              source.secondary ?? undefined,
-              source.tertiary ?? undefined,
-              source.accent ?? undefined,
-              source.danger ?? '',
-              source.success ?? '',
-              source.warning ?? '',
-              source.info ?? '',
-              source.foreground ?? '',
-              source.background ?? '',
-              schemeSetting,
-            );
-        updateScheme((prev) => {
-          prev.schemeStorage.source = source;
-          prev.schemeStorage.scheme = generatedScheme[0];
-          prev.schemeStorage.cssVariables = generatedScheme[1];
-          prev.schemeStorage.scssVariables = generatedScheme[2];
-          prev.schemeStorage.jsVariables = generatedScheme[3];
-          return prev;
-        });
-        onBuildCompleted?.();
-      } catch (e) {
-        console.error('[build q scheme]', e);
-      }
+      const source: QSchemeSource = {
+        primary: defaultEmptyFormData(formData, 'primary', null),
+        secondary: defaultEmptyFormData(formData, 'secondary', undefined),
+        tertiary: defaultEmptyFormData(formData, 'tertiary', undefined),
+        accent: defaultEmptyFormData(formData, 'accent', undefined),
+        danger: defaultEmptyFormData(formData, 'danger', null),
+        success: defaultEmptyFormData(formData, 'success', null),
+        warning: defaultEmptyFormData(formData, 'warn', null),
+        info: defaultEmptyFormData(formData, 'info', null),
+        foreground: defaultEmptyFormData(formData, 'foreground', null),
+        background: defaultEmptyFormData(formData, 'background', null),
+        setting: dumpedSetting,
+      };
+      const generatedScheme = every([source.secondary, source.tertiary, source.accent], isNil)
+        ? colorFn?.generate_q_scheme_automatically(
+            source.primary,
+            source.danger,
+            source.success,
+            source.warning,
+            source.info,
+            source.foreground,
+            source.background,
+            schemeSetting,
+          )
+        : colorFn?.generate_q_scheme_manually(
+            source.primary,
+            source.secondary ?? undefined,
+            source.tertiary ?? undefined,
+            source.accent ?? undefined,
+            source.danger,
+            source.success,
+            source.warning,
+            source.info,
+            source.foreground,
+            source.background,
+            schemeSetting,
+          );
+      updateScheme((prev) => {
+        prev.schemeStorage.source = source;
+        prev.schemeStorage.scheme = generatedScheme[0];
+        prev.schemeStorage.cssVariables = generatedScheme[1];
+        prev.schemeStorage.scssVariables = generatedScheme[2];
+        prev.schemeStorage.jsVariables = generatedScheme[3];
+        return prev;
+      });
+      onBuildCompleted?.();
+    } catch (e) {
+      console.error('[build q scheme]', e);
+    }
 
-      return errMsg;
-    },
-    new Map<string, string>(),
-  );
+    return errMsg;
+  }, new Map<string, string>());
 
   return (
     <ScrollArea enableY>

src/page-components/scheme/swatch-scheme/Builder.tsx

@@ -10,12 +10,7 @@ import { ScrollArea } from '../../../components/ScrollArea';
 import { Switch } from '../../../components/Switch';
 import { SchemeContent } from '../../../models';
 import { useUpdateScheme } from '../../../stores/schemes';
-import {
-  QSwatchEntry,
-  QSwatchSchemeSetting,
-  SwatchScheme,
-  SwatchSchemeStorage,
-} from '../../../swatch_scheme';
+import { QSwatchEntry, QSwatchSchemeSetting, SwatchSchemeStorage } from '../../../swatch_scheme';
 import { mapToObject } from '../../../utls';
 import { ColorEntry, IdenticalColorEntry } from '../ColorEntry';
 import styles from './Builder.module.css';
@@ -69,78 +64,75 @@ export function SwatchSchemeBuilder({ scheme, onBuildCompleted }: SwatchSchemeBu
     return null;
   }, [scheme.schemeStorage.source]);
 
-  const [errMsg, handleSubmitAction] = useActionState<Map<string, string>, FormData>(
-    (_state, formData) => {
-      const errMsg = new Map<string, string>();
+  const [errMsg, handleSubmitAction] = useActionState((state, formData) => {
+    const errMsg = new Map<string, string>();
 
-      try {
-        const swatchAmount = Number(formData.get('amount'));
-        if (isNaN(swatchAmount) || swatchAmount <= 0) {
-          errMsg.set('amount', 'MUST be a positive number');
-        }
-        if (swatchAmount > 30) {
-          errMsg.set('amount', 'MUST be less than 30');
-        }
-
-        const minLightness = Number(formData.get('min_lightness'));
-        if (isNaN(minLightness) || minLightness < 0 || minLightness > 100) {
-          errMsg.set('min', 'MUST be a number between 0 and 100');
-        }
-
-        const maxLightness = Number(formData.get('max_lightness'));
-        if (isNaN(maxLightness) || maxLightness < 0 || maxLightness > 100) {
-          errMsg.set('max', 'MUST be a number between 0 and 100');
-        }
-
-        const includePrimary = isEqual(formData.get('include_primary'), 'true');
-        const darkConvertChroma = Number(formData.get('dark_chroma')) / 100.0;
-        const darkConvertLightness = Number(formData.get('dark_lightness')) / 100.0;
-
-        const swatchSetting = new SwatchSchemeSetting(
-          swatchAmount,
-          minLightness / 100.0,
-          maxLightness / 100.0,
-          includePrimary,
-          new ColorShifting(darkConvertChroma, darkConvertLightness),
-        );
-        const dumpedSettings = swatchSetting.toJsValue() as QSwatchSchemeSetting;
-        const entries: SwatchEntry[] = [];
-        for (const key of colorKeys) {
-          const name = String(formData.get(`name_${key}`));
-          const color = String(formData.get(`color_${key}`));
-          if (isEmpty(name) || isEmpty(color)) continue;
-          entries.push(new SwatchEntry(name, color));
-        }
-        const dumpedEntries = entries.map((entry) => entry.toJsValue() as QSwatchEntry);
-        if (isEmpty(entries)) {
-          errMsg.set('color', 'At least one color is required');
-        }
-
-        if (!isEmpty(errMsg)) return errMsg;
-
-        const generatedScheme = colorFn?.generate_swatch_scheme(entries, swatchSetting);
-        console.debug('[generated scheme]', generatedScheme);
-        updateScheme((prev) => {
-          prev.schemeStorage.source = {
-            colors: dumpedEntries,
-            setting: dumpedSettings,
-          };
-          prev.schemeStorage.scheme = mapToObject(generatedScheme[0]) as SwatchScheme;
-          prev.schemeStorage.cssVariables = generatedScheme[1];
-          prev.schemeStorage.scssVariables = generatedScheme[2];
-          prev.schemeStorage.jsVariables = generatedScheme[3];
-          return prev;
-        });
-
-        onBuildCompleted?.();
-      } catch (e) {
-        console.error('[build swatch scheme]', e);
+    try {
+      const swatchAmount = Number(formData.get('amount'));
+      if (isNaN(swatchAmount) || swatchAmount <= 0) {
+        errMsg.set('amount', 'MUST be a positive number');
+      }
+      if (swatchAmount > 30) {
+        errMsg.set('amount', 'MUST be less than 30');
       }
 
-      return errMsg;
-    },
-    new Map<string, string>(),
-  );
+      const minLightness = Number(formData.get('min_lightness'));
+      if (isNaN(minLightness) || minLightness < 0 || minLightness > 100) {
+        errMsg.set('min', 'MUST be a number between 0 and 100');
+      }
+
+      const maxLightness = Number(formData.get('max_lightness'));
+      if (isNaN(maxLightness) || maxLightness < 0 || maxLightness > 100) {
+        errMsg.set('max', 'MUST be a number between 0 and 100');
+      }
+
+      const includePrimary = isEqual(formData.get('include_primary'), 'true');
+      const darkConvertChroma = Number(formData.get('dark_chroma')) / 100.0;
+      const darkConvertLightness = Number(formData.get('dark_lightness')) / 100.0;
+
+      const swatchSetting = new SwatchSchemeSetting(
+        swatchAmount,
+        minLightness / 100.0,
+        maxLightness / 100.0,
+        includePrimary,
+        new ColorShifting(darkConvertChroma, darkConvertLightness),
+      );
+      const dumpedSettings = swatchSetting.toJsValue() as QSwatchSchemeSetting;
+      const entries: SwatchEntry[] = [];
+      for (const key of colorKeys) {
+        const name = String(formData.get(`name_${key}`));
+        const color = String(formData.get(`color_${key}`));
+        if (isEmpty(name) || isEmpty(color)) continue;
+        entries.push(new SwatchEntry(name, color));
+      }
+      const dumpedEntries = entries.map((entry) => entry.toJsValue() as QSwatchEntry);
+      if (isEmpty(entries)) {
+        errMsg.set('color', 'At least one color is required');
+      }
+
+      if (!isEmpty(errMsg)) return errMsg;
+
+      const generatedScheme = colorFn?.generate_swatch_scheme(entries, swatchSetting);
+      console.debug('[generated scheme]', generatedScheme);
+      updateScheme((prev) => {
+        prev.schemeStorage.source = {
+          colors: dumpedEntries,
+          setting: dumpedSettings,
+        };
+        prev.schemeStorage.scheme = mapToObject(generatedScheme[0]);
+        prev.schemeStorage.cssVariables = generatedScheme[1];
+        prev.schemeStorage.scssVariables = generatedScheme[2];
+        prev.schemeStorage.jsVariables = generatedScheme[3];
+        return prev;
+      });
+
+      onBuildCompleted?.();
+    } catch (e) {
+      console.error('[build swatch scheme]', e);
+    }
+
+    return errMsg;
+  }, new Map<string, string>());
 
   return (
     <ScrollArea enableY>

src/page-components/scheme/swatch-scheme/Preview.tsx

@@ -54,12 +54,12 @@ export function SwatchSchemePreview({ scheme }: SwatchSchemePreviewProps) {
         <h2>Light Scheme</h2>
         <SchemeBlock
           amount={scheme.schemeStorage.source?.setting?.amount ?? 0}
-          scheme={scheme.schemeStorage.scheme!.light}
+          scheme={scheme.schemeStorage.scheme.light}
         />
         <h2>Dark Scheme</h2>
         <SchemeBlock
           amount={scheme.schemeStorage.source?.setting?.amount ?? 0}
-          scheme={scheme.schemeStorage.scheme!.dark}
+          scheme={scheme.schemeStorage.scheme.dark}
         />
       </div>
     </ScrollArea>

src/page-components/tints-shades/shades.tsx

@@ -23,18 +23,18 @@ export function Shades({ color, shades, mix, step, maximum, copyMode }: ShadesLi
       switch (mix) {
         case 'progressive':
           for (let i = 1; i <= shades; i++) {
-            const shade = colorFn!.shade(last(genColors) ?? '', step ?? 0);
+            const shade = colorFn!.shade(last(genColors), step);
             genColors.push(shade);
           }
           break;
         case 'linear':
           for (let i = 1; i <= shades; i++) {
-            const shade = colorFn!.shade(color, (step ?? 0) * i);
+            const shade = colorFn!.shade(color, step * i);
             genColors.push(shade);
           }
           break;
         case 'average': {
-          const interval = (maximum ?? 0) / shades / 100;
+          const interval = maximum / shades / 100;
           for (let i = 1; i <= shades; i++) {
             const shade = colorFn!.shade(color, interval * i);
             genColors.push(shade);

src/page-components/tints-shades/tints.tsx

@@ -23,18 +23,18 @@ export function Tints({ color, tints, mix, step, maximum, copyMode }: TintsListP
       switch (mix) {
         case 'progressive':
           for (let i = 1; i <= tints; i++) {
-            const tint = colorFn!.tint(last(genColors) ?? '', step ?? 0);
+            const tint = colorFn!.tint(last(genColors), step);
             genColors.push(tint);
           }
           break;
         case 'linear':
           for (let i = 1; i <= tints; i++) {
-            const tint = colorFn!.tint(color, (step ?? 0) * i);
+            const tint = colorFn!.tint(color, step * i);
             genColors.push(tint);
           }
           break;
         case 'average': {
-          const interval = (maximum ?? 0) / tints / 100;
+          const interval = maximum / tints / 100;
           for (let i = 1; i <= tints; i++) {
             const tint = colorFn!.tint(color, interval * i);
             genColors.push(tint);

src/pages/CardsDetail.tsx

@@ -8,7 +8,6 @@ import { ColorDescription } from '../models';
 import { ColorCard } from '../page-components/cards-detail/ColorCard';
 import styles from './CardsDetail.module.css';
 
-type ColorModes = 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch';
 type CardsDetailProps = {
   mainTag: string;
 };
@@ -21,7 +20,7 @@ export function CardsDetail({ mainTag }: CardsDetailProps) {
     }
     try {
       const embededCategories = colorFn.color_categories() as { label: string; value: string }[];
-      return embededCategories.filter((cate) => !isEqual(cate.value, 'unknown'));
+      return embededCategories.filter((cate) => !isEqual(cate.get('value'), 'unknown'));
     } catch (e) {
       console.error('[Fetch color categories]', e);
     }
@@ -32,7 +31,7 @@ export function CardsDetail({ mainTag }: CardsDetailProps) {
     const selectedValue = e.target.value;
     setCategory(selectedValue);
   };
-  const [mode, setMode] = useState<ColorModes>('hex');
+  const [mode, setMode] = useState<'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch'>('hex');
   const colors = useMemo(() => {
     if (!colorFn) {
       return [];
@@ -70,8 +69,8 @@ export function CardsDetail({ mainTag }: CardsDetailProps) {
           onChange={handleSelectCategory}>
           <option value="null">All</option>
           {categories.map((cate, index) => (
-            <option key={`${cate.value}-${index}`} value={cate.value}>
-              {cate.label}
+            <option key={`${cate.get('value')}-${index}`} value={cate.get('value')}>
+              {cate.get('label')}
             </option>
           ))}
         </select>
@@ -86,7 +85,7 @@ export function CardsDetail({ mainTag }: CardsDetailProps) {
             { label: 'OKLCH', value: 'oklch' },
           ]}
           value={mode}
-          onChange={(v) => setMode(v as ColorModes)}
+          onChange={setMode}
         />
       </div>
       <ScrollArea enableY>

src/pages/Compare.tsx

@@ -44,7 +44,7 @@ export function ColorCompare() {
                   { label: 'Relative', value: 'relative' },
                 ]}
                 value={analysisMode}
-                onChange={(v) => setMode(v as Parameters<typeof setMode>[0])}
+                onChange={setMode}
               />
             </Labeled>
             <RGBCompare basic={basicColor} compare={compareColor} mode={analysisMode} />

src/pages/Harmonies.tsx

@@ -114,7 +114,7 @@ export function Harmonies() {
           <div className={styles.mode_navigation}>
             <h5>Color selection method</h5>
             <VSegmentedControl
-              onChange={(v) => setSelectedMode(v as string)}
+              onChange={setSelectedMode}
               options={[
                 { label: 'Complementary', value: 'complementary' },
                 { label: 'Analogous', value: 'analogous' },

src/pages/LightenDarken.tsx

@@ -13,8 +13,6 @@ import { Lightens } from '../page-components/lighten-darken/lightens';
 import { currentPickedColor } from '../stores/colors';
 import styles from './LightenDarken.module.css';
 
-type ColorModes = 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch';
-
 export function LightenDarken() {
   const [selectedColor, setSelectedColor] = useAtom(currentPickedColor);
   const [lighten, setLighten] = useState(3);
@@ -22,7 +20,7 @@ export function LightenDarken() {
   const [steps, setSteps] = useState(10);
   const [maximum, setMaximum] = useState(90);
   const [mixMode, setMixMode] = useState<'progressive' | 'average'>('progressive');
-  const [mode, setMode] = useState<ColorModes>('hex');
+  const [mode, setMode] = useState<'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch'>('hex');
 
   return (
     <div className={cx('workspace', styles.lighten_workspace)}>
@@ -125,8 +123,8 @@ export function LightenDarken() {
                   { label: 'LAB', value: 'lab' },
                   { label: 'OKLCH', value: 'oklch' },
                 ]}
-                value={mode}
-                onChange={(v) => setMode(v as ColorModes)}
+                valu={mode}
+                onChange={setMode}
               />
             </div>
           </div>

src/pages/Mixer.tsx

@@ -8,14 +8,12 @@ import { LabeledPicker } from '../components/LabeledPicker';
 import { ScrollArea } from '../components/ScrollArea';
 import styles from './Mixer.module.css';
 
-type ColorModes = 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch';
-
 export function Mixer() {
   const { colorFn } = useColorFunction();
   const [basicColor, setBasicColor] = useState('000000');
   const [mixColor, setMixColor] = useState('000000');
   const [mixRatio, setMixRatio] = useState(0);
-  const [mode, setMode] = useState<ColorModes>('hex');
+  const [mode, setMode] = useState<'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch'>('hex');
   const mixedColor = useMemo(() => {
     try {
       if (!colorFn) {
@@ -70,7 +68,7 @@ export function Mixer() {
                   { label: 'OKLCH', value: 'oklch' },
                 ]}
                 value={mode}
-                onChange={(v) => setMode(v as ColorModes)}
+                onChange={setMode}
               />
             </div>
           </div>

src/pages/NewScheme.tsx

@@ -11,24 +11,21 @@ export function NewScheme() {
   const createScheme = useCreateScheme();
   const navigate = useNavigate();
   const [schemeType, setSchemeType] = useState<SchemeTypeOption['value']>('q_scheme');
-  const [errors, formAction] = useActionState<{ [key: string]: string }, FormData>(
-    (_prevState, formData): { [key: string]: string } => {
-      try {
-        const name = formData.get('name') as string;
-        if (isNil(name) || isEmpty(name)) {
-          throw { name: 'Name is required' };
-        }
-        const description = (formData.get('description') ?? null) as string | null;
-        const schemeType = (formData.get('type') ?? 'q_scheme') as SchemeTypeOption['value'];
-        const newId = createScheme(name, schemeType, description);
-        navigate(`../${newId}`);
-      } catch (error) {
-        return error as { [key: string]: string };
+  const [errors, formAction] = useActionState((prevState, formData) => {
+    try {
+      const name = formData.get('name') as string;
+      if (isNil(name) || isEmpty(name)) {
+        throw { name: 'Name is required' };
       }
-      return {} as { [key: string]: string };
-    },
-    {},
-  );
+      const description = (formData.get('description') ?? null) as string | null;
+      const schemeType = (formData.get('type') ?? 'q_scheme') as SchemeTypeOption['value'];
+      const newId = createScheme(name, schemeType, description);
+      navigate(`../${newId}`);
+    } catch (error) {
+      return error;
+    }
+    return {};
+  }, {});
 
   return (
     <form action={formAction} className={styles.create_scheme_form_layout}>
@@ -40,7 +37,7 @@ export function NewScheme() {
           options={SchemeTypeOptions}
           extendClassName={styles.custom_segment}
           value={schemeType}
-          onChange={(v) => setSchemeType(v as SchemeTypeOption['value'])}
+          onChange={setSchemeType}
         />
         <input type="hidden" name="type" value={schemeType} />
       </div>

src/pages/Palette.tsx

@@ -11,8 +11,6 @@ import { PaletteColors } from '../page-components/auto-palette/PaletteColors';
 import { currentPickedColor } from '../stores/colors';
 import styles from './Palette.module.css';
 
-type ColorModes = 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch';
-
 export function AutomaticPalette() {
   const [selectedColor, setSelectedColor] = useAtom(currentPickedColor);
   const [useReferenceColor, setUseReferenceColor] = useState(false);
@@ -24,7 +22,7 @@ export function AutomaticPalette() {
   const [referenceBias, setReferenceBias] = useState(0);
   const [minLightness, setMinLightness] = useState(10);
   const [maxLightness, setMaxLightness] = useState(90);
-  const [mode, setMode] = useState<ColorModes>('hex');
+  const [mode, setMode] = useState<'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch'>('hex');
 
   useEffect(() => {
     if (useReferenceColor) {
@@ -113,8 +111,8 @@ export function AutomaticPalette() {
                   { label: 'LAB', value: 'lab' },
                   { label: 'OKLCH', value: 'oklch' },
                 ]}
-                value={mode}
-                onChange={(v) => setMode(v as ColorModes)}
+                valu={mode}
+                onChange={setMode}
               />
             </div>
           </div>

src/pages/SchemeDetail.tsx

@@ -5,17 +5,12 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { EditableDescription } from '../components/EditableDescription';
 import { EditableTitle } from '../components/EditableTitle';
 import { SchemeSign } from '../components/SchemeSign';
-import { MaterialDesign2SchemeStorage } from '../material-2-scheme';
-import { MaterialDesign3SchemeStorage } from '../material-3-scheme';
-import { SchemeContent } from '../models';
 import { CorruptedScheme } from '../page-components/scheme/CorruptedScheme';
 import { M2Scheme } from '../page-components/scheme/M2Scheme';
 import { M3Scheme } from '../page-components/scheme/M3Scheme';
 import { QScheme } from '../page-components/scheme/QScheme';
 import { SwatchScheme } from '../page-components/scheme/SwatchScheme';
-import { QSchemeStorage } from '../q-scheme';
 import { useScheme, useUpdateScheme } from '../stores/schemes';
-import { SwatchSchemeStorage } from '../swatch_scheme';
 import styles from './SchemeDetail.module.css';
 
 export function SchemeDetail() {
@@ -45,13 +40,13 @@ export function SchemeDetail() {
   const schemeContent = useMemo(() => {
     switch (scheme?.type) {
       case 'q_scheme':
-        return <QScheme scheme={scheme as SchemeContent<QSchemeStorage>} />;
+        return <QScheme scheme={scheme} />;
       case 'swatch_scheme':
-        return <SwatchScheme scheme={scheme as SchemeContent<SwatchSchemeStorage>} />;
+        return <SwatchScheme scheme={scheme} />;
       case 'material_2':
-        return <M2Scheme scheme={scheme as SchemeContent<MaterialDesign2SchemeStorage>} />;
+        return <M2Scheme scheme={scheme} />;
       case 'material_3':
-        return <M3Scheme scheme={scheme as SchemeContent<MaterialDesign3SchemeStorage>} />;
+        return <M3Scheme scheme={scheme} />;
       default:
         return <CorruptedScheme />;
     }

src/pages/TintsShades.tsx

@@ -13,8 +13,6 @@ import { Tints } from '../page-components/tints-shades/tints';
 import { currentPickedColor } from '../stores/colors';
 import styles from './TintsShades.module.css';
 
-type ColorModes = 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch';
-
 export function TintsShades() {
   const [selectedColor, setSelectedColor] = useAtom(currentPickedColor);
   const [steps, setSteps] = useState(10);
@@ -22,7 +20,7 @@ export function TintsShades() {
   const [shades, setShades] = useState(3);
   const [maximum, setMaximum] = useState(90);
   const [mixMode, setMixMode] = useState<'progressive' | 'average'>('progressive');
-  const [mode, setMode] = useState<ColorModes>('hex');
+  const [mode, setMode] = useState<'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch'>('hex');
 
   return (
     <div className={cx('workspace', styles.tints_workspace)}>
@@ -124,8 +122,8 @@ export function TintsShades() {
                   { label: 'LAB', value: 'lab' },
                   { label: 'OKLCH', value: 'oklch' },
                 ]}
-                value={mode}
-                onChange={(v) => setMode(v as ColorModes)}
+                valu={mode}
+                onChange={setMode}
               />
             </div>
           </div>

src/pages/Tones.tsx

@@ -11,15 +11,13 @@ import { ScrollArea } from '../components/ScrollArea';
 import { currentPickedColor } from '../stores/colors';
 import styles from './Tones.module.css';
 
-type ColorModes = 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch';
-
 export function Tones() {
   const { colorFn } = useColorFunction();
   const [selectedColor, setSelectedColor] = useAtom(currentPickedColor);
   const [steps, setSteps] = useState(10);
   const [tones, setTones] = useState(3);
   const [seedBias, setSeedBias] = useState(0);
-  const [mode, setMode] = useState<ColorModes>('hex');
+  const [mode, setMode] = useState<'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch'>('hex');
   const colors = useMemo(() => {
     try {
       const lightenColors = colorFn!.tonal_lighten_series(
@@ -100,8 +98,8 @@ export function Tones() {
                   { label: 'LAB', value: 'lab' },
                   { label: 'OKLCH', value: 'oklch' },
                 ]}
-                value={mode}
-                onChange={(v) => setMode(v as ColorModes)}
+                valu={mode}
+                onChange={setMode}
               />
             </div>
           </div>

src/pages/Wheels.tsx

@@ -9,11 +9,9 @@ import { ColorWheel } from '../page-components/wheels/ColorWheel';
 import { currentPickedColor } from '../stores/colors';
 import styles from './Wheels.module.css';
 
-type HighlightMode = Parameters<typeof ColorWheel>[0]['highlightMode'];
-
 export function Wheels() {
   const [selectedColor, setSelectedColor] = useAtom(currentPickedColor);
-  const [selectedMode, setSelectedMode] = useState<HighlightMode>('complementary');
+  const [selectedMode, setSelectedMode] = useState('complementary');
   const [steps, setSteps] = useState(10);
   const [tones, setTones] = useState(3);
 
@@ -33,7 +31,7 @@ export function Wheels() {
             <div className={styles.mode_navigation}>
               <h5>Color selection method</h5>
               <VSegmentedControl
-                onChange={(v) => setSelectedMode(v as HighlightMode)}
+                onChange={setSelectedMode}
                 options={[
                   { label: 'Complementary', value: 'complementary' },
                   { label: 'Analogous', value: 'analogous' },

src/q-scheme.ts

@@ -47,7 +47,7 @@ export type QSchemeSource = {
   warning: string | null;
   info: string | null;
   foreground: string | null;
-  background: string | null;
+  background: strin | nullg;
   setting: QSchemeSetting | null;
 };
 

src/stores/schemes.ts

@@ -42,10 +42,7 @@ export type SchemeSet = {
 const schemesAtom = atomWithStorage<SchemeContent<SchemeStorage>[]>('schemes', []);
 export const activeSchemeAtom = atomWithStorage<string | null>('activeScheme', null);
 
-export function useSchemeList(): Pick<
-  SchemeContent<SchemeStorage>,
-  'id' | 'name' | 'createdAt' | 'type'
->[] {
+export function useSchemeList(): Pick<SchemeContent<SchemeStorage>, 'id' | 'name' | 'createdAt'>[] {
   const schemes = useAtomValue(schemesAtom);
   const sortedSchemes = useMemo(
     () =>
@@ -59,12 +56,9 @@ export function useSchemeList(): Pick<
   return sortedSchemes;
 }
 
-export function useScheme(id?: string | null): SchemeContent<SchemeStorage> | null {
+export function useScheme(id: string): SchemeContent<SchemeStorage> | null {
   const schemes = useAtomValue(schemesAtom);
-  const scheme = useMemo(
-    () => schemes.find((s) => !isNil(id) && isEqual(id, s.id)) ?? null,
-    [schemes, id],
-  );
+  const scheme = useMemo(() => schemes.find((s) => isEqual(id, s.id)) ?? null, [schemes, id]);
   return scheme;
 }
 
@@ -77,11 +71,11 @@ export function useActiveScheme(): SchemeContent<SchemeStorage> | null {
 export function useCreateScheme(): (
   name: string,
   type: SchemeType,
-  description?: string | null,
+  description?: string,
 ) => string {
   const updateSchemes = useSetAtom(schemesAtom);
   const createSchemeAction = useCallback(
-    (name: string, type: SchemeType, description?: string | null) => {
+    (name: string, type: SchemeType, description?: string) => {
       const newId = v4();
       updateSchemes((prev) => [
         ...prev.filter((s) => !isNil(s)),
@@ -103,7 +97,7 @@ export function useCreateScheme(): (
 }
 
 export function useUpdateScheme(
-  id?: string | null,
+  id: string,
 ): (updater: (prev: SchemeContent<SchemeStorage>) => SchemeContent<SchemeStorage>) => void {
   const updateSchemes = useSetAtom(schemesAtom);
   const updateAction = useCallback(
@@ -113,7 +107,7 @@ export function useUpdateScheme(
           prev,
           (acc, scheme) => {
             if (!isNil(scheme)) {
-              if (!isNil(id) && isEqual(id, scheme.id)) {
+              if (isEqual(id, scheme.id)) {
                 acc.push(updater(scheme));
               } else {
                 acc.push(scheme);

src/utls.ts

@@ -1,7 +1,7 @@
 import { isEmpty, isNil } from 'lodash-es';
 
 export function defaultEmptyFormData<D>(formData: FormData, param: string, defaultValue: D): D {
-  const value = formData.get(param) as D;
+  const value = formData.get(param);
   if (isNil(value) || isEmpty(value)) {
     return defaultValue;
   }
@@ -15,8 +15,10 @@ export function defaultEmptyValue<T, D>(value: T, defaultValue: D): T | D {
   return value;
 }
 
-export function mapToObject<K extends string | number | symbol, V>(map: Map<K, V>): Record<K, V> {
-  const obj = {} as Record<K, V>;
+export function mapToObject<K extends string | number | symbol, V>(
+  map: Map<K, V>,
+): Record<K, V extends Map<unknown, unknown> ? unknown : V> {
+  const obj: Record<K, V extends Map<unknown, unknown> ? unknown : V> = {};
   map.forEach((value, key) => {
     if (value instanceof Map) {
       obj[key] = mapToObject(value);

tsconfig.app.json

@@ -3,13 +3,10 @@
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": [
-      "ES2020",
-      "DOM",
-      "DOM.Iterable"
-    ],
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
+
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
@@ -17,14 +14,13 @@
     "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
+
     /* Linting */
-    "strict": false,
+    "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": [
-    "src"
-  ]
-}
+  "include": ["src"]
+}

tsconfig.node.json

@@ -2,25 +2,23 @@
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
     "target": "ES2022",
-    "lib": [
-      "ES2023"
-    ],
+    "lib": ["ES2023"],
     "module": "ESNext",
     "skipLibCheck": true,
+
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "isolatedModules": true,
     "moduleDetection": "force",
     "noEmit": true,
+
     /* Linting */
-    "strict": false,
+    "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": [
-    "vite.config.ts"
-  ]
-}
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -1,11 +1,11 @@
-import react from '@vitejs/plugin-react-swc';
 import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
   css: {
-    transformer: 'lightningcss',
+    transform: 'lightningcss',
     lightningcss: {
       cssModules: true,
     },