调整涉及WASM内结构体的实例化位置。

color-module/build

@@ -1,2 +1,2 @@
 #!/bin/bash
-wasm-pack build --release --target web -d ../src/color_functions
+wasm-pack build --release --target web -d ../color_functions

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@iconify/react": "^5.1.0",
     "clsx": "^2.1.1",
+    "color-module": "./color_functions",
     "dayjs": "^1.11.13",
     "jotai": "^2.11.0",
     "lodash-es": "^4.17.21",

src/ColorFunctionContext.tsx

@@ -1,5 +1,5 @@
+import init, * as funcs from 'color-module';
 import { createContext, ReactNode, use, useEffect, useMemo, useState, useTransition } from 'react';
-import init, * as funcs from './color_functions/color_module';
 
 export type ColorFunctionContextType = {
   colorFn: typeof funcs | null;
@@ -23,8 +23,7 @@ export function useColorFunction(): ColorFunctionContextType {
 }
 
 export function ColorFunctionProvider({ children }: WasmProviderProps) {
-  //@ts-expect-error TS2503
+  const [wasmInstance, setWasmInstance] = useState<typeof funcs | null>(null);
-  const [wasmInstance, setWasmInstance] = useState<Wasm.InitOutput | null>(null);
   const [isPending, startTransition] = useTransition();
   const [error, setError] = useState<Error | null>(null);
 
@@ -43,6 +42,7 @@ export function ColorFunctionProvider({ children }: WasmProviderProps) {
         try {
           await init();
           setWasmInstance(funcs);
+          console.debug('[Load WASM]', 'Loaded');
         } catch (e) {
           console.error('[Load WASM]', e);
           setError(e);

src/color_functions/color_module.d.ts

@@ -1,323 +0,0 @@
-/* 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 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[];
-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;
-export function hsl_to_hex(h: number, s: number, l: number): string;
-export function represent_lab(color: string): Float32Array;
-export function lab_to_hex(l: number, a: number, b: number): string;
-export function represent_oklch(color: string): Float32Array;
-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 differ_in_rgb(color: string, other: string): RGBDifference;
-export function relative_differ_in_rgb(color: string, other: string): RGBDifference;
-export function differ_in_hsl(color: string, other: string): HSLDifference;
-export function relative_differ_in_hsl(color: string, other: string): HSLDifference;
-export function differ_in_hct(color: string, other: string): HctDiffference;
-export function relative_differ_in_hct(color: string, other: string): HctDiffference;
-export function differ_in_oklch(color: string, other: string): OklchDifference;
-export function relative_differ_in_oklch(color: string, other: string): OklchDifference;
-export function tint_scale(basic_color: string, mixed_color: string): MixReversing;
-export function shade_scale(basic_color: string, mixed_color: string): MixReversing;
-export function lighten(color: string, percent: number): string;
-export function lighten_absolute(color: string, value: number): string;
-export function darken(color: string, percent: number): string;
-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 enum ColorExpand {
-  Complementary = 0,
-  Analogous = 1,
-  AnalogousAndComplementary = 2,
-  Triadic = 3,
-  SplitComplementary = 4,
-  Tetradic = 5,
-  Square = 6,
-}
-export enum WACGSetting {
-  Fixed = 0,
-  AutomaticAA = 1,
-  AutomaticAAA = 2,
-  HighContrast = 3,
-}
-export class ColorShifting {
-  free(): void;
-  constructor(chroma: number, lightness: number);
-  toJsValue(): any;
-  chroma: number;
-  lightness: number;
-}
-export class Differ {
-  free(): void;
-  constructor(delta: number, percent: number);
-  delta: number;
-  percent: number;
-}
-export class HSLDifference {
-  free(): void;
-  constructor(hue: Differ, saturation: Differ, lightness: Differ);
-  hue: Differ;
-  saturation: Differ;
-  lightness: Differ;
-}
-export class HctDiffference {
-  free(): void;
-  constructor(hue: Differ, chroma: Differ, lightness: Differ);
-  hue: Differ;
-  chroma: Differ;
-  lightness: Differ;
-}
-export class MixReversing {
-  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 {
-  free(): void;
-  constructor(hue: Differ, chroma: Differ, lightness: Differ);
-  hue: Differ;
-  chroma: Differ;
-  lightness: Differ;
-}
-export class RGBDifference {
-  free(): void;
-  constructor(r: Differ, g: Differ, b: Differ);
-  r: Differ;
-  g: Differ;
-  b: Differ;
-}
-export class SchemeSetting {
-  free(): void;
-  constructor(hover: ColorShifting, active: ColorShifting, focus: ColorShifting, disabled: ColorShifting, dark_convert: ColorShifting, expand_method: ColorExpand, wacg_follows: WACGSetting);
-  toJsValue(): any;
-  hover: ColorShifting;
-  active: ColorShifting;
-  focus: ColorShifting;
-  disabled: ColorShifting;
-  dark_convert: ColorShifting;
-  expand_method: ColorExpand;
-  wacg_follows: WACGSetting;
-}
-export class SwatchEntry {
-  free(): void;
-  constructor(name: string, color: string);
-  toJsValue(): any;
-  name: string;
-  color: string;
-}
-export class SwatchSchemeSetting {
-  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;
-  include_primary: boolean;
-  dark_convert: ColorShifting;
-}
-
-export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembly.Module;
-
-export interface InitOutput {
-  readonly memory: WebAssembly.Memory;
-  readonly color_categories: () => [number, number, number];
-  readonly search_color_cards: (a: number, b: number, c: number, d: number) => [number, number, number];
-  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;
-  readonly __wbg_get_colorshifting_lightness: (a: number) => number;
-  readonly __wbg_set_colorshifting_lightness: (a: number, b: number) => void;
-  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;
-  readonly __wbg_get_schemesetting_dark_convert: (a: number) => number;
-  readonly __wbg_set_schemesetting_dark_convert: (a: number, b: number) => void;
-  readonly __wbg_get_schemesetting_expand_method: (a: number) => number;
-  readonly __wbg_set_schemesetting_expand_method: (a: number, b: number) => void;
-  readonly __wbg_get_schemesetting_wacg_follows: (a: number) => number;
-  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 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;
-  readonly __wbg_get_oklchdifference_chroma: (a: number) => number;
-  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;
-  readonly __wbg_get_mixreversing_g_factor: (a: number) => number;
-  readonly __wbg_set_mixreversing_g_factor: (a: number, b: number) => void;
-  readonly __wbg_get_mixreversing_b_factor: (a: number) => number;
-  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;
-  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 differ_new: (a: number, b: 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 hctdiffference_new: (a: number, b: number, c: number) => number;
-  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;
-  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_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 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 __wbindgen_start: () => void;
-}
-
-export type SyncInitInput = BufferSource | WebAssembly.Module;
-/**
-* Instantiates the given `module`, which can either be bytes or
-* a precompiled `WebAssembly.Module`.
-*
-* @param {{ module: SyncInitInput }} module - Passing `SyncInitInput` directly is deprecated.
-*
-* @returns {InitOutput}
-*/
-export function initSync(module: { module: SyncInitInput } | SyncInitInput): InitOutput;
-
-/**
-* If `module_or_path` is {RequestInfo} or {URL}, makes a request and
-* for everything else, calls `WebAssembly.instantiate` directly.
-*
-* @param {{ module_or_path: InitInput | Promise<InitInput> }} module_or_path - Passing `InitInput` directly is deprecated.
-*
-* @returns {Promise<InitOutput>}
-*/
-export default function __wbg_init (module_or_path?: { module_or_path: InitInput | Promise<InitInput> } | InitInput | Promise<InitInput>): Promise<InitOutput>;

src/color_functions/color_module_bg.wasm.d.ts

@@ -1,154 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-export const memory: WebAssembly.Memory;
-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_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;
-export const __wbg_get_colorshifting_lightness: (a: number) => number;
-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;
-export const __wbg_get_schemesetting_dark_convert: (a: number) => number;
-export const __wbg_set_schemesetting_dark_convert: (a: number, b: number) => void;
-export const __wbg_get_schemesetting_expand_method: (a: number) => number;
-export const __wbg_set_schemesetting_expand_method: (a: number, b: number) => void;
-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 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;
-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;
-export const __wbg_get_mixreversing_g_factor: (a: number) => number;
-export const __wbg_set_mixreversing_g_factor: (a: number, b: number) => void;
-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;
-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 differ_new: (a: number, b: 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 hctdiffference_new: (a: number, b: number, c: number) => number;
-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;
-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_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 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 __wbindgen_start: () => void;

src/color_functions/package.json

@@ -1,15 +0,0 @@
-{
-  "name": "color-module",
-  "type": "module",
-  "version": "0.1.0",
-  "files": [
-    "color_module_bg.wasm",
-    "color_module.js",
-    "color_module.d.ts"
-  ],
-  "main": "color_module.js",
-  "types": "color_module.d.ts",
-  "sideEffects": [
-    "./snippets/*"
-  ]
-}

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

@@ -1,21 +1,19 @@
+import { Differ, HctDiffference } from 'color-module';
 import { useMemo } from 'react';
-import { Differ, 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),
-);
-
 export function HCTCompare({
   basic = '000000',
   compare = '000000',
   mode = 'absolute',
 }: CompareMethodProps) {
   const { colorFn } = useColorFunction();
+  const defaultCompareResult: HctDiffference = useMemo(
+    () => new HctDiffference(new Differ(0, 0), new Differ(0, 0), new Differ(0, 0)),
+    [],
+  );
   const differ = useMemo(() => {
     if (!colorFn) {
       return defaultCompareResult;

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

@@ -1,21 +1,19 @@
+import { Differ, HSLDifference } from 'color-module';
 import { useMemo } from 'react';
-import { Differ, 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),
-);
-
 export function HSLCompare({
   basic = '000000',
   compare = '000000',
   mode = 'absolute',
 }: CompareMethodProps) {
   const { colorFn } = useColorFunction();
+  const defaultCompareResult: HSLDifference = useMemo(
+    () => new HSLDifference(new Differ(0, 0), new Differ(0, 0), new Differ(0, 0)),
+    [],
+  );
   const differ = useMemo(() => {
     if (!colorFn) {
       return defaultCompareResult;

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

@@ -1,21 +1,19 @@
+import { Differ, OklchDifference } from 'color-module';
 import { useMemo } from 'react';
-import { Differ, 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),
-);
-
 export function OklchCompare({
   basic = '000000',
   compare = '000000',
   mode = 'absolute',
 }: CompareMethodProps) {
   const { colorFn } = useColorFunction();
+  const defaultCompareResult: OklchDifference = useMemo(
+    () => new OklchDifference(new Differ(0, 0), new Differ(0, 0), new Differ(0, 0)),
+    [],
+  );
   const differ = useMemo(() => {
     if (!colorFn) {
       return defaultCompareResult;

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

@@ -1,21 +1,19 @@
+import { Differ, RGBDifference } from 'color-module';
 import { useMemo } from 'react';
-import { Differ, 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),
-);
-
 export function RGBCompare({
   basic = '000000',
   compare = '000000',
   mode = 'absolute',
 }: CompareMethodProps) {
   const { colorFn } = useColorFunction();
+  const defaultCompareResult: RGBDifference = useMemo(
+    () => new RGBDifference(new Differ(0, 0), new Differ(0, 0), new Differ(0, 0)),
+    [],
+  );
   const differ = useMemo(() => {
     if (!colorFn) {
       return defaultCompareResult;

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

@@ -1,14 +1,13 @@
 import cx from 'clsx';
+import { MixReversing } from 'color-module';
 import { useMemo } from 'react';
-import { MixReversing } from '../../color_functions/color_module';
 import { useColorFunction } from '../../ColorFunctionContext';
 import styles from './CompareLayout.module.css';
 import { CompareMethodProps } from './share-props';
 
-const defaultMixResult: MixReversing = new MixReversing(0, 0, 0, 0);
-
 export function ShadeScale({ basic = '000000', compare = '000000' }: CompareMethodProps) {
   const { colorFn } = useColorFunction();
+  const defaultMixResult: MixReversing = useMemo(() => new MixReversing(0, 0, 0, 0), []);
   const mixFactors = useMemo(() => {
     if (!colorFn) {
       return defaultMixResult;

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

@@ -1,14 +1,13 @@
 import cx from 'clsx';
+import { MixReversing } from 'color-module';
 import { useMemo } from 'react';
-import { MixReversing } from '../../color_functions/color_module';
 import { useColorFunction } from '../../ColorFunctionContext';
 import styles from './CompareLayout.module.css';
 import { CompareMethodProps } from './share-props';
 
-const defaultMixResult: MixReversing = new MixReversing(0, 0, 0, 0);
-
 export function TintScale({ basic = '000000', compare = '000000' }: CompareMethodProps) {
   const { colorFn } = useColorFunction();
+  const defaultMixResult: MixReversing = useMemo(() => new MixReversing(0, 0, 0, 0), []);
   const mixFactors = useMemo(() => {
     if (!colorFn) {
       return defaultMixResult;

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

@@ -1,11 +1,6 @@
+import { ColorExpand, ColorShifting, SchemeSetting, WACGSetting } from 'color-module';
 import { every, isEmpty, isNil } from 'lodash-es';
 import { useActionState, useMemo } from 'react';
-import {
-  ColorExpand,
-  ColorShifting,
-  SchemeSetting,
-  WACGSetting,
-} from '../../../color_functions/color_module';
 import { useColorFunction } from '../../../ColorFunctionContext';
 import { FloatColorPicker } from '../../../components/FloatColorPicker';
 import { ScrollArea } from '../../../components/ScrollArea';

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

@@ -1,10 +1,6 @@
+import { ColorShifting, SwatchEntry, SwatchSchemeSetting } from 'color-module';
 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 { ScrollArea } from '../../../components/ScrollArea';
 import { Switch } from '../../../components/Switch';

src/q-scheme.ts

@@ -1,4 +1,4 @@
-import { SchemeSetting } from './color_functions/color_module';
+import { SchemeSetting } from 'color-module';
 
 export type ColorSet = {
   root: string;

src/swatch_scheme.ts

@@ -1,4 +1,4 @@
-import { SwatchEntry, SwatchSchemeSetting } from './color_functions/color_module';
+import { SwatchEntry, SwatchSchemeSetting } from 'color-module';
 
 export type SwatchScheme = {
   light: Record<string, string[]>;