修正Swatch Scheme在生成包含原始颜色时的定位错乱问题。

color-module/src/schemes/swatch_style/mod.rs

@@ -1,4 +1,5 @@
 use palette::FromColor;
+use serde::{Deserialize, Serialize};
 use std::collections::HashMap;
 use std::str::FromStr;
 
@@ -19,13 +20,29 @@ pub struct SwatchScheme {
     dark: HashMap<String, Swatch>,
 }
 
-#[derive(Debug, Clone)]
+#[derive(Debug, Clone, Serialize, Deserialize)]
 #[wasm_bindgen(getter_with_clone)]
 pub struct SwatchEntry {
     pub name: String,
     pub color: String,
 }
 
+#[wasm_bindgen]
+impl SwatchEntry {
+    #[wasm_bindgen(constructor)]
+    pub fn new(name: &str, color: &str) -> Self {
+        Self {
+            name: name.to_string(),
+            color: color.to_string(),
+        }
+    }
+
+    #[wasm_bindgen(js_name = toJsValue)]
+    pub fn to_js_value(&self) -> Result<JsValue, JsError> {
+        Ok(serde_wasm_bindgen::to_value(self)?)
+    }
+}
+
 impl SwatchScheme {
     pub fn new(
         colors: Vec<SwatchEntry>,
@@ -120,3 +137,8 @@ impl SchemeExport for SwatchScheme {
         object.join("\n")
     }
 }
+
+#[wasm_bindgen]
+pub fn swatch_scheme_default_settings() -> SwatchSchemeSetting {
+    SwatchSchemeSetting::default()
+}

color-module/src/schemes/swatch_style/setting.rs

@@ -1,5 +1,5 @@
 use serde::Serialize;
-use wasm_bindgen::prelude::wasm_bindgen;
+use wasm_bindgen::{prelude::wasm_bindgen, JsError, JsValue};
 
 use crate::schemes::q_style::ColorShifting;
 
@@ -17,8 +17,8 @@ impl Default for SwatchSchemeSetting {
     fn default() -> Self {
         Self {
             amount: 10,
-            min_lightness: 10.0,
-            max_lightness: 90.0,
+            min_lightness: 0.1,
+            max_lightness: 0.9,
             include_primary: false,
             dark_convert: ColorShifting {
                 chroma: -0.3,
@@ -27,3 +27,28 @@ impl Default for SwatchSchemeSetting {
         }
     }
 }
+
+#[wasm_bindgen]
+impl SwatchSchemeSetting {
+    #[wasm_bindgen(constructor)]
+    pub fn new(
+        amount: usize,
+        min_lightness: f32,
+        max_lightness: f32,
+        include_primary: bool,
+        dark_convert: ColorShifting,
+    ) -> Self {
+        Self {
+            amount,
+            min_lightness,
+            max_lightness,
+            include_primary,
+            dark_convert,
+        }
+    }
+
+    #[wasm_bindgen(js_name = toJsValue)]
+    pub fn to_js_value(&self) -> Result<JsValue, JsError> {
+        Ok(serde_wasm_bindgen::to_value(self)?)
+    }
+}

color-module/src/schemes/swatch_style/swatch.rs

@@ -24,28 +24,26 @@ impl Swatch {
         }
     }
 
-    fn find_interval(&self) -> (usize, usize) {
+    fn find_interval(&self) -> usize {
         if !self.include_primary {
-            return (0, 0);
+            return 0;
         }
         if self.primary_key.l == self.min_key {
-            return (0, 1);
+            return 0;
         }
         if self.primary_key.l == self.max_key {
-            return (self.color_amount - 2, self.color_amount - 1);
+            return self.color_amount - 1;
         }
         let step = (self.max_key - self.min_key) / (self.color_amount - 1) as f32;
-        let index = ((self.primary_key.l - self.min_key) / step) as usize;
-
-        (index, index + 1)
+        ((self.primary_key.l - self.min_key) / step).ceil() as usize
     }
 
     pub fn swatch(&self) -> Vec<Oklch> {
         let mut swatch = Vec::new();
         if self.include_primary {
-            let (_, primary_index) = self.find_interval();
+            let primary_index = self.find_interval();
             if primary_index > 0 {
-                let step = (self.max_key - self.min_key) / primary_index as f32;
+                let step = (self.primary_key.l - self.min_key) / (primary_index - 1) as f32;
                 for i in 0..primary_index {
                     let lightness = self.min_key + step * i as f32;
                     swatch.push(Oklch {
@@ -55,8 +53,8 @@ impl Swatch {
                 }
             }
             if primary_index < self.color_amount - 1 {
-                let step =
-                    (self.max_key - self.min_key) / (self.color_amount - primary_index) as f32;
+                let step = (self.max_key - self.primary_key.l)
+                    / (self.color_amount - primary_index - 1) as f32;
                 for i in primary_index..self.color_amount {
                     let lightness = self.min_key + step * i as f32;
                     swatch.push(Oklch {

src/color_functions/color_module.d.ts

@@ -1,17 +1,12 @@
 /* tslint:disable */
 /* eslint-disable */
+export function color_categories(): any;
+export function search_color_cards(tag: string, category?: string | null): any;
 export function generate_material_design_3_scheme(source_color: string, error_color: string, custom_colors: any): any;
 export function generate_material_design_2_scheme(primary_color: string, secondary_color: string, error_color: string, custom_colors: any): any;
 export function generate_q_scheme_automatically(primary_color: string, danger_color: string, success_color: string, warning_color: string, info_color: string, fg_color: string, bg_color: string, setting: SchemeSetting): any;
 export function generate_q_scheme_manually(primary_color: string, secondary_color: string | null | undefined, tertiary_color: string | null | undefined, accent_color: string | null | undefined, danger_color: string, success_color: string, warning_color: string, info_color: string, fg_color: string, bg_color: string, setting: SchemeSetting): any;
 export function generate_swatch_scheme(colors: SwatchEntry[], setting: SwatchSchemeSetting): any;
-export function shift_hue(color: string, degree: number): string;
-export function analogous_30(color: string): string[];
-export function analogous_60(color: string): string[];
-export function complementary(color: string): string;
-export function split_complementary(color: string): string[];
-export function tetradic(color: string): string[];
-export function triadic(color: string): string[];
 export function q_scheme_color_expanding_methods(): any;
 export function q_scheme_wacg_settings(): any;
 export function q_scheme_default_settings(): SchemeSetting;
@@ -32,12 +27,13 @@ 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 color_categories(): any;
-export function search_color_cards(tag: string, category?: string | null): any;
-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 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[];
+export function complementary(color: string): string;
+export function split_complementary(color: string): string[];
+export function tetradic(color: string): string[];
+export function triadic(color: string): string[];
 export function represent_rgb(color: string): Uint8Array;
 export function rgb_to_hex(r: number, g: number, b: number): string;
 export function represent_hsl(color: string): Float32Array;
@@ -49,6 +45,11 @@ export function oklch_to_hex(l: number, c: number, h: number): string;
 export function represent_hct(color: string): Float32Array;
 export function hct_to_hex(hue: number, chroma: number, tone: number): string;
 export function wacg_relative_contrast(fg_color: string, bg_color: string): number;
+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,
@@ -126,14 +127,16 @@ export class SchemeSetting {
   wacg_follows: WACGSetting;
 }
 export class SwatchEntry {
-  private constructor();
   free(): void;
+  constructor(name: string, color: string);
+  toJsValue(): any;
   name: string;
   color: string;
 }
 export class SwatchSchemeSetting {
-  private constructor();
   free(): void;
+  constructor(amount: number, min_lightness: number, max_lightness: number, include_primary: boolean, dark_convert: ColorShifting);
+  toJsValue(): any;
   amount: number;
   min_lightness: number;
   max_lightness: number;
@@ -145,70 +148,8 @@ export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembl
 
 export interface InitOutput {
   readonly memory: WebAssembly.Memory;
-  readonly __wbg_swatchentry_free: (a: number, b: number) => void;
-  readonly __wbg_get_swatchentry_name: (a: number) => [number, number];
-  readonly __wbg_set_swatchentry_name: (a: number, b: number, c: number) => void;
-  readonly __wbg_get_swatchentry_color: (a: number) => [number, number];
-  readonly __wbg_set_swatchentry_color: (a: number, b: number, c: number) => void;
-  readonly generate_material_design_3_scheme: (a: number, b: number, c: number, d: number, e: any) => [number, number, number];
-  readonly generate_material_design_2_scheme: (a: number, b: number, c: number, d: number, e: number, f: number, g: any) => [number, number, number];
-  readonly generate_q_scheme_automatically: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number, m: number, n: number, o: number) => [number, number, number];
-  readonly generate_q_scheme_manually: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number, m: number, n: number, o: number, p: number, q: number, r: number, s: number, t: number, u: number) => [number, number, number];
-  readonly generate_swatch_scheme: (a: number, b: number, c: 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 q_scheme_color_expanding_methods: () => [number, number, number];
-  readonly q_scheme_wacg_settings: () => [number, number, number];
-  readonly q_scheme_default_settings: () => 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 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_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;
-  readonly __wbg_get_hctdiffference_chroma: (a: number) => number;
-  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 __wbg_swatchschemesetting_free: (a: number, b: number) => void;
-  readonly __wbg_get_swatchschemesetting_amount: (a: number) => number;
-  readonly __wbg_set_swatchschemesetting_amount: (a: number, b: number) => void;
-  readonly __wbg_get_swatchschemesetting_min_lightness: (a: number) => number;
-  readonly __wbg_set_swatchschemesetting_min_lightness: (a: number, b: number) => void;
-  readonly __wbg_get_swatchschemesetting_max_lightness: (a: number) => number;
-  readonly __wbg_set_swatchschemesetting_max_lightness: (a: number, b: number) => void;
-  readonly __wbg_get_swatchschemesetting_include_primary: (a: number) => number;
-  readonly __wbg_set_swatchschemesetting_include_primary: (a: number, b: number) => void;
-  readonly __wbg_get_swatchschemesetting_dark_convert: (a: number) => number;
-  readonly __wbg_set_swatchschemesetting_dark_convert: (a: number, b: number) => void;
   readonly color_categories: () => [number, number, number];
   readonly search_color_cards: (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 __wbg_colorshifting_free: (a: number, b: number) => void;
   readonly __wbg_get_colorshifting_chroma: (a: number) => number;
   readonly __wbg_set_colorshifting_chroma: (a: number, b: number) => void;
@@ -217,8 +158,11 @@ export interface InitOutput {
   readonly colorshifting_new: (a: number, b: number) => number;
   readonly colorshifting_toJsValue: (a: number) => [number, number, number];
   readonly __wbg_schemesetting_free: (a: number, b: number) => void;
+  readonly __wbg_get_schemesetting_hover: (a: number) => number;
   readonly __wbg_set_schemesetting_hover: (a: number, b: number) => void;
+  readonly __wbg_get_schemesetting_active: (a: number) => number;
   readonly __wbg_set_schemesetting_active: (a: number, b: number) => void;
+  readonly __wbg_get_schemesetting_focus: (a: number) => number;
   readonly __wbg_set_schemesetting_focus: (a: number, b: number) => void;
   readonly __wbg_get_schemesetting_disabled: (a: number) => number;
   readonly __wbg_set_schemesetting_disabled: (a: number, b: number) => void;
@@ -230,9 +174,11 @@ export interface InitOutput {
   readonly __wbg_set_schemesetting_wacg_follows: (a: number, b: number) => void;
   readonly schemesetting_new: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => number;
   readonly schemesetting_toJsValue: (a: number) => [number, number, number];
-  readonly __wbg_get_schemesetting_hover: (a: number) => number;
-  readonly __wbg_get_schemesetting_active: (a: number) => number;
-  readonly __wbg_get_schemesetting_focus: (a: number) => number;
+  readonly generate_material_design_3_scheme: (a: number, b: number, c: number, d: number, e: any) => [number, number, number];
+  readonly generate_material_design_2_scheme: (a: number, b: number, c: number, d: number, e: number, f: number, g: any) => [number, number, number];
+  readonly generate_q_scheme_automatically: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number, m: number, n: number, o: number) => [number, number, number];
+  readonly generate_q_scheme_manually: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number, m: number, n: number, o: number, p: number, q: number, r: number, s: number, t: number, u: number) => [number, number, number];
+  readonly generate_swatch_scheme: (a: number, b: number, c: number) => [number, number, number];
   readonly __wbg_oklchdifference_free: (a: number, b: number) => void;
   readonly __wbg_get_oklchdifference_hue: (a: number) => number;
   readonly __wbg_set_oklchdifference_hue: (a: number, b: number) => void;
@@ -240,14 +186,22 @@ 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 __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 generate_palette_from_color: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => [number, number, 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;
+  readonly __wbg_swatchschemesetting_free: (a: number, b: number) => void;
+  readonly __wbg_get_swatchschemesetting_amount: (a: number) => number;
+  readonly __wbg_set_swatchschemesetting_amount: (a: number, b: number) => void;
+  readonly __wbg_get_swatchschemesetting_min_lightness: (a: number) => number;
+  readonly __wbg_set_swatchschemesetting_min_lightness: (a: number, b: number) => void;
+  readonly __wbg_get_swatchschemesetting_max_lightness: (a: number) => number;
+  readonly __wbg_set_swatchschemesetting_max_lightness: (a: number, b: number) => void;
+  readonly __wbg_get_swatchschemesetting_include_primary: (a: number) => number;
+  readonly __wbg_set_swatchschemesetting_include_primary: (a: number, b: number) => void;
+  readonly __wbg_get_swatchschemesetting_dark_convert: (a: number) => number;
+  readonly __wbg_set_swatchschemesetting_dark_convert: (a: number, b: number) => void;
+  readonly swatchschemesetting_new: (a: number, b: number, c: number, d: number, e: number) => number;
+  readonly swatchschemesetting_toJsValue: (a: number) => [number, 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;
@@ -257,9 +211,37 @@ 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 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 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_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;
+  readonly __wbg_get_hctdiffference_chroma: (a: number) => number;
+  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 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 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];
@@ -271,18 +253,44 @@ export interface InitOutput {
   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 __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 __wbg_differ_free: (a: number, b: number) => void;
   readonly __wbg_get_differ_delta: (a: number) => number;
   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 generate_palette_from_color: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => [number, number, number, number];
+  readonly __wbg_swatchentry_free: (a: number, b: number) => void;
+  readonly __wbg_get_swatchentry_name: (a: number) => [number, number];
+  readonly __wbg_set_swatchentry_name: (a: number, b: number, c: number) => void;
+  readonly __wbg_get_swatchentry_color: (a: number) => [number, number];
+  readonly __wbg_set_swatchentry_color: (a: number, b: number, c: number) => void;
+  readonly swatchentry_new: (a: number, b: number, c: number, d: number) => number;
+  readonly swatchentry_toJsValue: (a: number) => [number, number, number];
+  readonly swatch_scheme_default_settings: () => number;
+  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 __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 __wbindgen_free: (a: number, b: number, c: number) => void;
   readonly __externref_table_dealloc: (a: 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

@@ -172,6 +172,39 @@ function takeFromExternrefTable0(idx) {
     wasm.__externref_table_dealloc(idx);
     return value;
 }
+/**
+ * @returns {any}
+ */
+export function color_categories() {
+    const ret = wasm.color_categories();
+    if (ret[2]) {
+        throw takeFromExternrefTable0(ret[1]);
+    }
+    return takeFromExternrefTable0(ret[0]);
+}
+
+/**
+ * @param {string} tag
+ * @param {string | null} [category]
+ * @returns {any}
+ */
+export function search_color_cards(tag, category) {
+    const ptr0 = passStringToWasm0(tag, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len0 = WASM_VECTOR_LEN;
+    var ptr1 = isLikeNone(category) ? 0 : passStringToWasm0(category, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    var len1 = WASM_VECTOR_LEN;
+    const ret = wasm.search_color_cards(ptr0, len0, ptr1, len1);
+    if (ret[2]) {
+        throw takeFromExternrefTable0(ret[1]);
+    }
+    return takeFromExternrefTable0(ret[0]);
+}
+
+function _assertClass(instance, klass) {
+    if (!(instance instanceof klass)) {
+        throw new Error(`expected instance of ${klass.name}`);
+    }
+}
 /**
  * @param {string} source_color
  * @param {string} error_color
@@ -211,11 +244,6 @@ export function generate_material_design_2_scheme(primary_color, secondary_color
     return takeFromExternrefTable0(ret[0]);
 }
 
-function _assertClass(instance, klass) {
-    if (!(instance instanceof klass)) {
-        throw new Error(`expected instance of ${klass.name}`);
-    }
-}
 /**
  * @param {string} primary_color
  * @param {string} danger_color
@@ -321,147 +349,6 @@ export function generate_swatch_scheme(colors, setting) {
     return takeFromExternrefTable0(ret[0]);
 }
 
-/**
- * @param {string} color
- * @param {number} degree
- * @returns {string}
- */
-export function shift_hue(color, degree) {
-    let deferred3_0;
-    let deferred3_1;
-    try {
-        const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
-        const len0 = WASM_VECTOR_LEN;
-        const ret = wasm.shift_hue(ptr0, len0, degree);
-        var ptr2 = ret[0];
-        var len2 = ret[1];
-        if (ret[3]) {
-            ptr2 = 0; len2 = 0;
-            throw takeFromExternrefTable0(ret[2]);
-        }
-        deferred3_0 = ptr2;
-        deferred3_1 = len2;
-        return getStringFromWasm0(ptr2, len2);
-    } finally {
-        wasm.__wbindgen_free(deferred3_0, deferred3_1, 1);
-    }
-}
-
-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[]}
- */
-export function analogous_30(color) {
-    const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
-    const len0 = WASM_VECTOR_LEN;
-    const ret = wasm.analogous_30(ptr0, len0);
-    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
- * @returns {string[]}
- */
-export function analogous_60(color) {
-    const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
-    const len0 = WASM_VECTOR_LEN;
-    const ret = wasm.analogous_60(ptr0, len0);
-    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
- * @returns {string}
- */
-export function complementary(color) {
-    let deferred3_0;
-    let deferred3_1;
-    try {
-        const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
-        const len0 = WASM_VECTOR_LEN;
-        const ret = wasm.complementary(ptr0, len0);
-        var ptr2 = ret[0];
-        var len2 = ret[1];
-        if (ret[3]) {
-            ptr2 = 0; len2 = 0;
-            throw takeFromExternrefTable0(ret[2]);
-        }
-        deferred3_0 = ptr2;
-        deferred3_1 = len2;
-        return getStringFromWasm0(ptr2, len2);
-    } finally {
-        wasm.__wbindgen_free(deferred3_0, deferred3_1, 1);
-    }
-}
-
-/**
- * @param {string} color
- * @returns {string[]}
- */
-export function split_complementary(color) {
-    const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
-    const len0 = WASM_VECTOR_LEN;
-    const ret = wasm.split_complementary(ptr0, len0);
-    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
- * @returns {string[]}
- */
-export function tetradic(color) {
-    const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
-    const len0 = WASM_VECTOR_LEN;
-    const ret = wasm.tetradic(ptr0, len0);
-    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
- * @returns {string[]}
- */
-export function triadic(color) {
-    const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
-    const len0 = WASM_VECTOR_LEN;
-    const ret = wasm.triadic(ptr0, len0);
-    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 {any}
  */
@@ -848,46 +735,49 @@ export function shade(color, percent) {
 }
 
 /**
- * @returns {any}
+ * @param {string} color
+ * @param {number} degree
+ * @returns {string}
  */
-export function color_categories() {
-    const ret = wasm.color_categories();
-    if (ret[2]) {
-        throw takeFromExternrefTable0(ret[1]);
+export function shift_hue(color, degree) {
+    let deferred3_0;
+    let deferred3_1;
+    try {
+        const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        const len0 = WASM_VECTOR_LEN;
+        const ret = wasm.shift_hue(ptr0, len0, degree);
+        var ptr2 = ret[0];
+        var len2 = ret[1];
+        if (ret[3]) {
+            ptr2 = 0; len2 = 0;
+            throw takeFromExternrefTable0(ret[2]);
+        }
+        deferred3_0 = ptr2;
+        deferred3_1 = len2;
+        return getStringFromWasm0(ptr2, len2);
+    } finally {
+        wasm.__wbindgen_free(deferred3_0, deferred3_1, 1);
     }
-    return takeFromExternrefTable0(ret[0]);
 }
 
-/**
- * @param {string} tag
- * @param {string | null} [category]
- * @returns {any}
- */
-export function search_color_cards(tag, category) {
-    const ptr0 = passStringToWasm0(tag, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
-    const len0 = WASM_VECTOR_LEN;
-    var ptr1 = isLikeNone(category) ? 0 : passStringToWasm0(category, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
-    var len1 = WASM_VECTOR_LEN;
-    const ret = wasm.search_color_cards(ptr0, len0, ptr1, len1);
-    if (ret[2]) {
-        throw takeFromExternrefTable0(ret[1]);
+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)));
     }
-    return takeFromExternrefTable0(ret[0]);
+    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]
+ * @param {string} color
  * @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);
+export function analogous_30(color) {
+    const ptr0 = passStringToWasm0(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);
+    const ret = wasm.analogous_30(ptr0, len0);
     if (ret[3]) {
         throw takeFromExternrefTable0(ret[2]);
     }
@@ -898,14 +788,12 @@ export function generate_palette_from_color(reference_color, swatch_amount, mini
 
 /**
  * @param {string} color
- * @param {number} expand_amount
- * @param {number} step
  * @returns {string[]}
  */
-export function series(color, expand_amount, step) {
+export function analogous_60(color) {
     const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
     const len0 = WASM_VECTOR_LEN;
-    const ret = wasm.series(ptr0, len0, expand_amount, step);
+    const ret = wasm.analogous_60(ptr0, len0);
     if (ret[3]) {
         throw takeFromExternrefTable0(ret[2]);
     }
@@ -916,14 +804,37 @@ export function series(color, expand_amount, step) {
 
 /**
  * @param {string} color
- * @param {number} expand_amount
- * @param {number} step
+ * @returns {string}
+ */
+export function complementary(color) {
+    let deferred3_0;
+    let deferred3_1;
+    try {
+        const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        const len0 = WASM_VECTOR_LEN;
+        const ret = wasm.complementary(ptr0, len0);
+        var ptr2 = ret[0];
+        var len2 = ret[1];
+        if (ret[3]) {
+            ptr2 = 0; len2 = 0;
+            throw takeFromExternrefTable0(ret[2]);
+        }
+        deferred3_0 = ptr2;
+        deferred3_1 = len2;
+        return getStringFromWasm0(ptr2, len2);
+    } finally {
+        wasm.__wbindgen_free(deferred3_0, deferred3_1, 1);
+    }
+}
+
+/**
+ * @param {string} color
  * @returns {string[]}
  */
-export function tonal_lighten_series(color, expand_amount, step) {
+export function split_complementary(color) {
     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);
+    const ret = wasm.split_complementary(ptr0, len0);
     if (ret[3]) {
         throw takeFromExternrefTable0(ret[2]);
     }
@@ -934,14 +845,28 @@ export function tonal_lighten_series(color, expand_amount, step) {
 
 /**
  * @param {string} color
- * @param {number} expand_amount
- * @param {number} step
  * @returns {string[]}
  */
-export function tonal_darken_series(color, expand_amount, step) {
+export function tetradic(color) {
     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);
+    const ret = wasm.tetradic(ptr0, len0);
+    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
+ * @returns {string[]}
+ */
+export function triadic(color) {
+    const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.triadic(ptr0, len0);
     if (ret[3]) {
         throw takeFromExternrefTable0(ret[2]);
     }
@@ -1189,6 +1114,89 @@ export function wacg_relative_contrast(fg_color, bg_color) {
     return ret[0];
 }
 
+/**
+ * @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}
  */
@@ -1733,7 +1741,7 @@ export class SchemeSetting {
      * @returns {ColorShifting}
      */
     get hover() {
-        const ret = wasm.__wbg_get_rgbdifference_r(this.__wbg_ptr);
+        const ret = wasm.__wbg_get_schemesetting_hover(this.__wbg_ptr);
         return ColorShifting.__wrap(ret);
     }
     /**
@@ -1748,7 +1756,7 @@ export class SchemeSetting {
      * @returns {ColorShifting}
      */
     get active() {
-        const ret = wasm.__wbg_get_rgbdifference_g(this.__wbg_ptr);
+        const ret = wasm.__wbg_get_schemesetting_active(this.__wbg_ptr);
         return ColorShifting.__wrap(ret);
     }
     /**
@@ -1763,7 +1771,7 @@ export class SchemeSetting {
      * @returns {ColorShifting}
      */
     get focus() {
-        const ret = wasm.__wbg_get_rgbdifference_b(this.__wbg_ptr);
+        const ret = wasm.__wbg_get_schemesetting_focus(this.__wbg_ptr);
         return ColorShifting.__wrap(ret);
     }
     /**
@@ -1937,6 +1945,30 @@ export class SwatchEntry {
         const len0 = WASM_VECTOR_LEN;
         wasm.__wbg_set_swatchentry_color(this.__wbg_ptr, ptr0, len0);
     }
+    /**
+     * @param {string} name
+     * @param {string} color
+     */
+    constructor(name, color) {
+        const ptr0 = passStringToWasm0(name, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        const len0 = WASM_VECTOR_LEN;
+        const ptr1 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        const len1 = WASM_VECTOR_LEN;
+        const ret = wasm.swatchentry_new(ptr0, len0, ptr1, len1);
+        this.__wbg_ptr = ret >>> 0;
+        SwatchEntryFinalization.register(this, this.__wbg_ptr, this);
+        return this;
+    }
+    /**
+     * @returns {any}
+     */
+    toJsValue() {
+        const ret = wasm.swatchentry_toJsValue(this.__wbg_ptr);
+        if (ret[2]) {
+            throw takeFromExternrefTable0(ret[1]);
+        }
+        return takeFromExternrefTable0(ret[0]);
+    }
 }
 
 const SwatchSchemeSettingFinalization = (typeof FinalizationRegistry === 'undefined')
@@ -1945,6 +1977,14 @@ const SwatchSchemeSettingFinalization = (typeof FinalizationRegistry === 'undefi
 
 export class SwatchSchemeSetting {
 
+    static __wrap(ptr) {
+        ptr = ptr >>> 0;
+        const obj = Object.create(SwatchSchemeSetting.prototype);
+        obj.__wbg_ptr = ptr;
+        SwatchSchemeSettingFinalization.register(obj, obj.__wbg_ptr, obj);
+        return obj;
+    }
+
     __destroy_into_raw() {
         const ptr = this.__wbg_ptr;
         this.__wbg_ptr = 0;
@@ -2023,6 +2063,31 @@ export class SwatchSchemeSetting {
         var ptr0 = arg0.__destroy_into_raw();
         wasm.__wbg_set_swatchschemesetting_dark_convert(this.__wbg_ptr, ptr0);
     }
+    /**
+     * @param {number} amount
+     * @param {number} min_lightness
+     * @param {number} max_lightness
+     * @param {boolean} include_primary
+     * @param {ColorShifting} dark_convert
+     */
+    constructor(amount, min_lightness, max_lightness, include_primary, dark_convert) {
+        _assertClass(dark_convert, ColorShifting);
+        var ptr0 = dark_convert.__destroy_into_raw();
+        const ret = wasm.swatchschemesetting_new(amount, min_lightness, max_lightness, include_primary, ptr0);
+        this.__wbg_ptr = ret >>> 0;
+        SwatchSchemeSettingFinalization.register(this, this.__wbg_ptr, this);
+        return this;
+    }
+    /**
+     * @returns {any}
+     */
+    toJsValue() {
+        const ret = wasm.swatchschemesetting_toJsValue(this.__wbg_ptr);
+        if (ret[2]) {
+            throw takeFromExternrefTable0(ret[1]);
+        }
+        return takeFromExternrefTable0(ret[0]);
+    }
 }
 
 async function __wbg_load(module, imports) {

src/color_functions/color_module_bg.wasm.d.ts

@@ -1,70 +1,8 @@
 /* tslint:disable */
 /* eslint-disable */
 export const memory: WebAssembly.Memory;
-export const __wbg_swatchentry_free: (a: number, b: number) => void;
-export const __wbg_get_swatchentry_name: (a: number) => [number, number];
-export const __wbg_set_swatchentry_name: (a: number, b: number, c: number) => void;
-export const __wbg_get_swatchentry_color: (a: number) => [number, number];
-export const __wbg_set_swatchentry_color: (a: number, b: number, c: number) => void;
-export const generate_material_design_3_scheme: (a: number, b: number, c: number, d: number, e: any) => [number, number, number];
-export const generate_material_design_2_scheme: (a: number, b: number, c: number, d: number, e: number, f: number, g: any) => [number, number, number];
-export const generate_q_scheme_automatically: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number, m: number, n: number, o: number) => [number, number, number];
-export const generate_q_scheme_manually: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number, m: number, n: number, o: number, p: number, q: number, r: number, s: number, t: number, u: number) => [number, number, number];
-export const generate_swatch_scheme: (a: number, b: number, c: 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 q_scheme_color_expanding_methods: () => [number, number, number];
-export const q_scheme_wacg_settings: () => [number, number, number];
-export const q_scheme_default_settings: () => 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 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_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;
-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 __wbg_swatchschemesetting_free: (a: number, b: number) => void;
-export const __wbg_get_swatchschemesetting_amount: (a: number) => number;
-export const __wbg_set_swatchschemesetting_amount: (a: number, b: number) => void;
-export const __wbg_get_swatchschemesetting_min_lightness: (a: number) => number;
-export const __wbg_set_swatchschemesetting_min_lightness: (a: number, b: number) => void;
-export const __wbg_get_swatchschemesetting_max_lightness: (a: number) => number;
-export const __wbg_set_swatchschemesetting_max_lightness: (a: number, b: number) => void;
-export const __wbg_get_swatchschemesetting_include_primary: (a: number) => number;
-export const __wbg_set_swatchschemesetting_include_primary: (a: number, b: number) => void;
-export const __wbg_get_swatchschemesetting_dark_convert: (a: number) => number;
-export const __wbg_set_swatchschemesetting_dark_convert: (a: number, b: number) => void;
 export const color_categories: () => [number, number, number];
 export const search_color_cards: (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 __wbg_colorshifting_free: (a: number, b: number) => void;
 export const __wbg_get_colorshifting_chroma: (a: number) => number;
 export const __wbg_set_colorshifting_chroma: (a: number, b: number) => void;
@@ -73,8 +11,11 @@ export const __wbg_set_colorshifting_lightness: (a: number, b: number) => void;
 export const colorshifting_new: (a: number, b: number) => number;
 export const colorshifting_toJsValue: (a: number) => [number, number, number];
 export const __wbg_schemesetting_free: (a: number, b: number) => void;
+export const __wbg_get_schemesetting_hover: (a: number) => number;
 export const __wbg_set_schemesetting_hover: (a: number, b: number) => void;
+export const __wbg_get_schemesetting_active: (a: number) => number;
 export const __wbg_set_schemesetting_active: (a: number, b: number) => void;
+export const __wbg_get_schemesetting_focus: (a: number) => number;
 export const __wbg_set_schemesetting_focus: (a: number, b: number) => void;
 export const __wbg_get_schemesetting_disabled: (a: number) => number;
 export const __wbg_set_schemesetting_disabled: (a: number, b: number) => void;
@@ -86,9 +27,11 @@ export const __wbg_get_schemesetting_wacg_follows: (a: number) => number;
 export const __wbg_set_schemesetting_wacg_follows: (a: number, b: number) => void;
 export const schemesetting_new: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => number;
 export const schemesetting_toJsValue: (a: number) => [number, number, number];
-export const __wbg_get_schemesetting_hover: (a: number) => number;
-export const __wbg_get_schemesetting_active: (a: number) => number;
-export const __wbg_get_schemesetting_focus: (a: number) => number;
+export const generate_material_design_3_scheme: (a: number, b: number, c: number, d: number, e: any) => [number, number, number];
+export const generate_material_design_2_scheme: (a: number, b: number, c: number, d: number, e: number, f: number, g: any) => [number, number, number];
+export const generate_q_scheme_automatically: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number, m: number, n: number, o: number) => [number, number, number];
+export const generate_q_scheme_manually: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number, m: number, n: number, o: number, p: number, q: number, r: number, s: number, t: number, u: number) => [number, number, number];
+export const generate_swatch_scheme: (a: number, b: number, c: number) => [number, number, number];
 export const __wbg_oklchdifference_free: (a: number, b: number) => void;
 export const __wbg_get_oklchdifference_hue: (a: number) => number;
 export const __wbg_set_oklchdifference_hue: (a: number, b: number) => void;
@@ -96,14 +39,22 @@ 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 __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 generate_palette_from_color: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => [number, number, 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;
+export const __wbg_swatchschemesetting_free: (a: number, b: number) => void;
+export const __wbg_get_swatchschemesetting_amount: (a: number) => number;
+export const __wbg_set_swatchschemesetting_amount: (a: number, b: number) => void;
+export const __wbg_get_swatchschemesetting_min_lightness: (a: number) => number;
+export const __wbg_set_swatchschemesetting_min_lightness: (a: number, b: number) => void;
+export const __wbg_get_swatchschemesetting_max_lightness: (a: number) => number;
+export const __wbg_set_swatchschemesetting_max_lightness: (a: number, b: number) => void;
+export const __wbg_get_swatchschemesetting_include_primary: (a: number) => number;
+export const __wbg_set_swatchschemesetting_include_primary: (a: number, b: number) => void;
+export const __wbg_get_swatchschemesetting_dark_convert: (a: number) => number;
+export const __wbg_set_swatchschemesetting_dark_convert: (a: number, b: number) => void;
+export const swatchschemesetting_new: (a: number, b: number, c: number, d: number, e: number) => number;
+export const swatchschemesetting_toJsValue: (a: number) => [number, 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;
@@ -113,9 +64,37 @@ 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 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 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_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;
+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 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 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];
@@ -127,17 +106,43 @@ export const oklch_to_hex: (a: number, b: number, c: 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 __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 __wbg_differ_free: (a: number, b: number) => void;
 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 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_swatchentry_free: (a: number, b: number) => void;
+export const __wbg_get_swatchentry_name: (a: number) => [number, number];
+export const __wbg_set_swatchentry_name: (a: number, b: number, c: number) => void;
+export const __wbg_get_swatchentry_color: (a: number) => [number, number];
+export const __wbg_set_swatchentry_color: (a: number, b: number, c: number) => void;
+export const swatchentry_new: (a: number, b: number, c: number, d: number) => number;
+export const swatchentry_toJsValue: (a: number) => [number, number, number];
+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 __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 __wbindgen_free: (a: number, b: number, c: number) => void;
 export const __externref_table_dealloc: (a: 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/Switch.tsx

@@ -1,15 +1,16 @@
 import cx from 'clsx';
-import { isEqual } from 'lodash-es';
+import { isEqual, isNil } from 'lodash-es';
 import { useCallback, useEffect, useState } from 'react';
 import styles from './Switch.module.css';
 
 type SwitchProps = {
+  name?: string;
   checked?: boolean;
   disabled?: boolean;
   onChange?: (checked: boolean) => void;
 };
 
-export function Switch({ checked = false, disabled = false, onChange }: SwitchProps) {
+export function Switch({ name, checked = false, disabled = false, onChange }: SwitchProps) {
   const [isChecked, setIsChecked] = useState(checked);
   const handleSwitch = useCallback(() => {
     if (!disabled) {
@@ -29,6 +30,7 @@ export function Switch({ checked = false, disabled = false, onChange }: SwitchPr
       <div
         className={cx(styles.switch_handle, isChecked && styles.checked)}
         onClick={handleSwitch}></div>
+      {!isNil(name) && <input type="hidden" name={name} value={isChecked} />}
     </div>
   );
 }

src/page-components/scheme/Export.tsx

@@ -1,10 +1,9 @@
 import { useMemo, useState } from 'react';
-import { HSegmentedControl } from '../../../components/HSegmentedControl';
-import { Labeled } from '../../../components/Labeled';
-import { ScrollArea } from '../../../components/ScrollArea';
-import { useCopy } from '../../../hooks/useCopy';
-import { Option, SchemeContent } from '../../../models';
-import { QSchemeStorage } from '../../../q-scheme';
+import { HSegmentedControl } from '../../components/HSegmentedControl';
+import { Labeled } from '../../components/Labeled';
+import { ScrollArea } from '../../components/ScrollArea';
+import { useCopy } from '../../hooks/useCopy';
+import { Option, SchemeContent, SchemeStorage } from '../../models';
 import styles from './Export.module.css';
 
 const exportOptions: Option[] = [
@@ -13,11 +12,11 @@ const exportOptions: Option[] = [
   { label: 'Javascript Object', value: 'js_object' },
 ];
 
-type QSchemeExportProps = {
-  scheme: SchemeContent<QSchemeStorage>;
+type SchemeExportProps = {
+  scheme: SchemeContent<SchemeStorage>;
 };
 
-export function QSchemeExport({ scheme }: QSchemeExportProps) {
+export function SchemeExport({ scheme }: SchemeExportProps) {
   const [activeExport, setActiveExport] = useState<Option['value']>(exportOptions[0].value);
   const exportContent = useMemo(() => {
     switch (activeExport) {

src/page-components/scheme/QScheme.tsx

@@ -3,8 +3,8 @@ import { useState } from 'react';
 import { Tab } from '../../components/Tab';
 import { SchemeContent } from '../../models';
 import { QSchemeStorage } from '../../q-scheme';
+import { SchemeExport } from './Export';
 import { QSchemeBuilder } from './q-scheme/Builder';
-import { QSchemeExport } from './q-scheme/Export';
 import { QSchemePreview } from './q-scheme/Preview';
 
 const tabOptions = [
@@ -29,7 +29,7 @@ export function QScheme({ scheme }: QSchemeProps) {
       {isEqual(activeTab, 'builder') && (
         <QSchemeBuilder scheme={scheme} onBuildCompleted={() => setActiveTab('overview')} />
       )}
-      {isEqual(activeTab, 'export') && <QSchemeExport scheme={scheme} />}
+      {isEqual(activeTab, 'export') && <SchemeExport scheme={scheme} />}
     </>
   );
 }

src/page-components/scheme/SwatchScheme.tsx

@@ -1,3 +1,35 @@
-export function SwatchScheme() {
-  return <div>Swatch Scheme</div>;
+import { isEqual, isNil } from 'lodash-es';
+import { useState } from 'react';
+import { Tab } from '../../components/Tab';
+import { SchemeContent } from '../../models';
+import { SwatchSchemeStorage } from '../../swatch_scheme';
+import { SchemeExport } from './Export';
+import { SwatchSchemeBuilder } from './swatch-scheme/Builder';
+import { SwatchSchemePreview } from './swatch-scheme/Preview';
+
+const tabOptions = [
+  { title: 'Overview', id: 'overview' },
+  { title: 'Builder', id: 'builder' },
+  { title: 'Exports', id: 'export' },
+];
+
+type SwatchSchemeProps = {
+  scheme: SchemeContent<SwatchSchemeStorage>;
+};
+
+export function SwatchScheme({ scheme }: SwatchSchemeProps) {
+  const [activeTab, setActiveTab] = useState<(typeof tabOptions)[number]['id']>(() =>
+    isNil(scheme.schemeStorage.scheme) ? 'builder' : 'overview',
+  );
+
+  return (
+    <>
+      <Tab tabs={tabOptions} activeTab={activeTab} onActive={setActiveTab} />
+      {isEqual(activeTab, 'overview') && <SwatchSchemePreview scheme={scheme} />}
+      {isEqual(activeTab, 'builder') && (
+        <SwatchSchemeBuilder scheme={scheme} onBuildCompleted={() => setActiveTab('overview')} />
+      )}
+      {isEqual(activeTab, 'export') && <SchemeExport scheme={scheme} />}
+    </>
+  );
 }

src/page-components/scheme/q-scheme/Builder.module.css

@@ -4,7 +4,8 @@
     font-size: var(--font-size-s);
     line-height: 1.3em;
     display: grid;
-    grid-template-columns: 200px 200px 200px;
+    grid-template-columns: repeat(4, 200px);
+    align-items: center;
     gap: var(--spacing-xs);
     .label {
       max-width: 200px;

src/page-components/scheme/swatch-scheme/Builder.module.css

@@ -0,0 +1,49 @@
+@layer pages {
+  .builder_layout {
+    padding: var(--spacing-s) var(--spacing-m);
+    font-size: var(--font-size-s);
+    line-height: 1.3em;
+    display: grid;
+    grid-template-columns: repeat(3, 200px);
+    align-items: center;
+    gap: var(--spacing-xs);
+    .label {
+      max-width: 200px;
+      grid-column: 1;
+      padding-inline-end: var(--spacing-m);
+      text-align: right;
+    }
+    .parameter_row {
+      grid-column: 2 / span 2;
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-s);
+    }
+    .error_msg {
+      color: var(--color-danger);
+      font-size: var(--font-size-xs);
+    }
+    .segment_title {
+      grid-column: 1 / span 2;
+      text-align: center;
+    }
+    .parameter_input {
+      max-width: 8em;
+    }
+    h5 {
+      font-size: var(--font-size-m);
+      line-height: 1.7em;
+    }
+  }
+  .delete_btn {
+    font-size: var(--font-size-xs);
+    color: var(--color-yuebai);
+    background-color: oklch(from var(--color-danger) l c h / 0.25);
+    &:hover {
+      background-color: oklch(from var(--color-danger-hover) l c h / 0.65);
+    }
+    &:active {
+      background-color: oklch(from var(--color-danger-active) l c h / 0.65);
+    }
+  }
+}

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

@@ -0,0 +1,278 @@
+import { includes, isEmpty, isEqual, isNaN } from 'lodash-es';
+import { useActionState, useCallback, useMemo, useState } from 'react';
+import {
+  ColorShifting,
+  SwatchEntry,
+  SwatchSchemeSetting,
+} from '../../../color_functions/color_module';
+import { useColorFunction } from '../../../ColorFunctionContext';
+import { ActionIcon } from '../../../components/ActionIcon';
+import { FloatColorPicker } from '../../../components/FloatColorPicker';
+import { ScrollArea } from '../../../components/ScrollArea';
+import { Switch } from '../../../components/Switch';
+import { SchemeContent } from '../../../models';
+import { useUpdateScheme } from '../../../stores/schemes';
+import { QSwatchEntry, QSwatchSchemeSetting, SwatchSchemeStorage } from '../../../swatch_scheme';
+import { mapToObject } from '../../../utls';
+import styles from './Builder.module.css';
+
+type IdenticalColorEntry = {
+  id: string;
+  name: string;
+  color: string;
+};
+
+type ColorEntryProps = {
+  entry: IdenticalColorEntry;
+  onDelete?: (index: string) => void;
+};
+
+function ColorEntry({ entry, onDelete }: ColorEntryProps) {
+  return (
+    <>
+      <div className="input_wrapper">
+        <input type="text" name={`name_${entry.id}`} defaultValue={entry.name} />
+      </div>
+      <div>
+        <FloatColorPicker
+          name={`color_${entry.id}`}
+          color={isEmpty(entry.color) ? undefined : entry.color}
+        />
+      </div>
+      <div>
+        <ActionIcon
+          icon="tabler:trash"
+          extendClassName={styles.delete_btn}
+          onClick={() => onDelete?.(entry.id)}
+        />
+      </div>
+    </>
+  );
+}
+
+type SwatchSchemeBuilderProps = {
+  scheme: SchemeContent<SwatchSchemeStorage>;
+  onBuildCompleted?: () => void;
+};
+
+export function SwatchSchemeBuilder({ scheme, onBuildCompleted }: SwatchSchemeBuilderProps) {
+  const { colorFn } = useColorFunction();
+  const updateScheme = useUpdateScheme(scheme.id);
+  const originalColors = useMemo(() => {
+    return (scheme.schemeStorage.source?.colors ?? []).map(
+      (color, index) =>
+        ({ id: `oc_${index}`, name: color.name, color: color.color } as IdenticalColorEntry),
+    );
+  }, [scheme.schemeStorage.source]);
+  const [newColors, setNewColors] = useState<IdenticalColorEntry[]>([]);
+  const [deleted, setDeleted] = useState<string[]>([]);
+  const addEntryAction = useCallback(() => {
+    setNewColors((prev) => [...prev, { id: `nc_${prev.length}`, name: '', color: '' }]);
+  }, []);
+  const colorKeys = useMemo(() => {
+    return [...originalColors, ...newColors]
+      .map((color) => color.id)
+      .filter((id) => !includes(deleted, id));
+  }, [originalColors, newColors, deleted]);
+  const defaultSetting = useMemo(() => {
+    try {
+      if (!colorFn) throw 'Web Assembly functions is not available';
+      const defaultValues = colorFn.swatch_scheme_default_settings();
+      if (scheme.schemeStorage.source?.setting) {
+        return new SwatchSchemeSetting(
+          scheme.schemeStorage.source.setting.amount ?? defaultValues.amount,
+          scheme.schemeStorage.source.setting.min_lightness ?? defaultValues.min_lightness,
+          scheme.schemeStorage.source.setting.max_lightness ?? defaultValues.max_lightness,
+          scheme.schemeStorage.source.setting.include_primary ?? defaultValues.include_primary,
+          new ColorShifting(
+            scheme.schemeStorage.source.setting.dark_convert.chroma ??
+              defaultValues.dark_convert.chroma,
+            scheme.schemeStorage.source.setting.dark_convert.lightness ??
+              defaultValues.dark_convert.lightness,
+          ),
+        );
+      }
+      return defaultValues;
+    } catch (e) {
+      console.error('[Q scheme builder]', e);
+    }
+    return null;
+  }, [scheme.schemeStorage.source]);
+
+  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]);
+        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>
+      <form action={handleSubmitAction} className={styles.builder_layout}>
+        <h5 className={styles.segment_title}>Automatic Parameters</h5>
+        <label className={styles.label}>Swatch Amount</label>
+        <div className={styles.parameter_row}>
+          <div className="input_wrapper">
+            <input
+              type="number"
+              name="amount"
+              defaultValue={defaultSetting?.amount ?? 0}
+              className={styles.parameter_input}
+            />
+          </div>
+          {errMsg.has('amount') && <span className={styles.error_msg}>{errMsg.get('amount')}</span>}
+        </div>
+        <label className={styles.label}>Minimum Lightness</label>
+        <div className={styles.parameter_row}>
+          <div className="input_wrapper">
+            <input
+              type="number"
+              name="min_lightness"
+              defaultValue={((defaultSetting?.min_lightness ?? 0) * 100).toFixed(2)}
+              className={styles.parameter_input}
+            />
+            <span>%</span>
+          </div>
+          {errMsg.has('min') && <span className={styles.error_msg}>{errMsg.get('min')}</span>}
+        </div>
+        <label className={styles.label}>Maximum Lightness</label>
+        <div className={styles.parameter_row}>
+          <div className="input_wrapper">
+            <input
+              type="number"
+              name="max_lightness"
+              defaultValue={((defaultSetting?.max_lightness ?? 0) * 100).toFixed(2)}
+              className={styles.parameter_input}
+            />
+            <span>%</span>
+          </div>
+          {errMsg.has('max') && <span className={styles.error_msg}>{errMsg.get('max')}</span>}
+        </div>
+        <label className={styles.label}>Include Primary Color</label>
+        <div>
+          <Switch name="include_primary" checked={defaultSetting?.include_primary ?? false} />
+        </div>
+        <label style={{ gridColumn: 2 }}>Chroma shifting</label>
+        <label style={{ gridColumn: 3 }}>Lightness shifting</label>
+        <label className={styles.label}>Convert to Dark scheme</label>
+        <div className="input_wrapper">
+          <input
+            type="number"
+            name="dark_chroma"
+            defaultValue={((defaultSetting?.dark_convert.chroma ?? 0) * 100).toFixed(2)}
+            className={styles.parameter_input}
+          />
+          <span>%</span>
+        </div>
+        <div className="input_wrapper">
+          <input
+            type="number"
+            name="dark_lightness"
+            defaultValue={((defaultSetting?.dark_convert.lightness ?? 0) * 100).toFixed(2)}
+            className={styles.parameter_input}
+          />
+          <span>%</span>
+        </div>
+        <h5 className={styles.segment_title}>Swatch Colors</h5>
+        <label style={{ gridColumn: 1 }}>Name</label>
+        <label>Color</label>
+        <div>
+          <button type="button" className="small" onClick={addEntryAction}>
+            Add Color
+          </button>
+        </div>
+        {originalColors
+          .filter((c) => !includes(deleted, c.id))
+          .map((color) => (
+            <ColorEntry
+              key={color.id}
+              entry={color}
+              onDelete={(index) => setDeleted((prev) => [...prev, index])}
+            />
+          ))}
+        {newColors
+          .filter((c) => !includes(deleted, c.id))
+          .map((color) => (
+            <ColorEntry
+              key={color.id}
+              entry={color}
+              onDelete={(index) => setDeleted((prev) => [...prev, index])}
+            />
+          ))}
+        {errMsg.has('color') && (
+          <div style={{ gridColumn: '1 / span 2' }}>
+            <span className={styles.error_msg}>{errMsg.get('color')}</span>
+          </div>
+        )}
+        <div style={{ gridColumn: '2 / span 2' }}>
+          <button type="submit" className="primary">
+            Build Scheme
+          </button>
+        </div>
+      </form>
+    </ScrollArea>
+  );
+}

src/page-components/scheme/swatch-scheme/Preview.module.css

@@ -0,0 +1,27 @@
+@layer pages {
+  .preview_layout {
+    padding: var(--spacing-s) var(--spacing-m);
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacing-m);
+  }
+  .scheme_block {
+    display: grid;
+    gap: var(--spacing-m) var(--spacing-xs);
+    align-items: center;
+  }
+  .scheme_cell {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+    font-size: var(--font-size-s);
+    .block {
+      height: 3em;
+    }
+    .label {
+      text-align: center;
+    }
+  }
+}

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

@@ -0,0 +1,67 @@
+import { ScrollArea } from '../../../components/ScrollArea';
+import { SchemeContent } from '../../../models';
+import { SwatchSchemeStorage } from '../../../swatch_scheme';
+import styles from './Preview.module.css';
+
+type SwatchCellProps = {
+  color: string;
+};
+
+export function SwatchCell({ color }: SwatchCellProps) {
+  return (
+    <div className={styles.scheme_cell}>
+      <div className={styles.block} style={{ backgroundColor: `#${color}` }} />
+    </div>
+  );
+}
+
+type SchemeBlockProps = {
+  amount: number;
+  scheme: Record<string, string[]>;
+};
+
+export function SchemeBlock({ amount, scheme }: SchemeBlockProps) {
+  return (
+    <div
+      className={styles.scheme_block}
+      style={{ gridTemplateColumns: `minmax(120px, 1fr) repeat(${amount}, 1fr)` }}>
+      <div />
+      {Array.from({ length: amount }).map((_, index) => (
+        <div key={index} className={styles.scheme_cell}>
+          <div className={styles.label}>{index * 100}</div>
+        </div>
+      ))}
+      {Object.entries(scheme).map(([name, colors]) => (
+        <>
+          <h6>{name}</h6>
+          {colors.map((color, index) => (
+            <SwatchCell key={index} color={color} />
+          ))}
+        </>
+      ))}
+    </div>
+  );
+}
+
+type SwatchSchemePreviewProps = {
+  scheme: SchemeContent<SwatchSchemeStorage>;
+};
+
+export function SwatchSchemePreview({ scheme }: SwatchSchemePreviewProps) {
+  return (
+    <ScrollArea enableY>
+      <div className={styles.preview_layout}>
+        <h2>Light Scheme</h2>
+        <SchemeBlock
+          amount={scheme.schemeStorage.source?.setting?.amount ?? 0}
+          scheme={scheme.schemeStorage.scheme.light}
+        />
+        <h2>Dark Scheme</h2>
+        <SchemeBlock
+          amount={scheme.schemeStorage.source?.setting?.amount ?? 0}
+          scheme={scheme.schemeStorage.scheme.dark}
+        />
+      </div>
+    </ScrollArea>
+  );
+}

src/stores/schemes.ts

@@ -1,7 +1,7 @@
 import dayjs from 'dayjs';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { atomWithStorage } from 'jotai/utils';
-import { isEqual, reduce } from 'lodash-es';
+import { isEqual, isNil, reduce } from 'lodash-es';
 import { useCallback, useMemo } from 'react';
 import { v4 } from 'uuid';
 import { SchemeContent, SchemeStorage, SchemeType } from '../models';
@@ -47,6 +47,7 @@ export function useSchemeList(): Pick<SchemeContent<SchemeStorage>, 'id' | 'name
   const sortedSchemes = useMemo(
     () =>
       schemes
+        .filter((item) => !isNil(item))
         .sort((a, b) => dayjs(b.createdAt).diff(dayjs(a.createdAt)))
         .map(({ id, name, createdAt, type }) => ({ id, name, createdAt, type })),
     [schemes],
@@ -77,7 +78,7 @@ export function useCreateScheme(): (
     (name: string, type: SchemeType, description?: string) => {
       const newId = v4();
       updateSchemes((prev) => [
-        ...prev,
+        ...prev.filter((s) => !isNil(s)),
         {
           id: newId,
           name,
@@ -105,10 +106,12 @@ export function useUpdateScheme(
         reduce(
           prev,
           (acc, scheme) => {
-            if (isEqual(id, scheme.id)) {
-              acc.push(updater(scheme));
-            } else {
-              acc.push(scheme);
+            if (!isNil(scheme)) {
+              if (isEqual(id, scheme.id)) {
+                acc.push(updater(scheme));
+              } else {
+                acc.push(scheme);
+              }
             }
             return acc;
           },

src/swatch_scheme.ts

@@ -5,9 +5,16 @@ export type SwatchScheme = {
   dark: Record<string, string[]>;
 };
 
+export type QSwatchEntry = {
+  [P in keyof SwatchEntry]: SwatchEntry[P];
+};
+export type QSwatchSchemeSetting = {
+  [P in keyof SwatchSchemeSetting]: SwatchSchemeSetting[P];
+};
+
 export type SwatchSchemeSource = {
-  colors: SwatchEntry[];
-  setting: SwatchSchemeSetting | null;
+  colors: QSwatchEntry[];
+  setting: QSwatchSchemeSetting | null;
 };
 
 export type SwatchSchemeStorage = {

src/utls.ts

@@ -14,3 +14,17 @@ 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 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);
+    } else {
+      obj[key] = value;
+    }
+  });
+  return obj;
+}