color-module/build

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

package.json

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

@@ -0,0 +1,323 @@
+/* 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

@@ -0,0 +1,154 @@
+/* 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

@@ -0,0 +1,15 @@
+{
+  "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,19 +1,21 @@
-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,19 +1,21 @@
-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,19 +1,21 @@
-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,19 +1,21 @@
-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,13 +1,14 @@
 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,13 +1,14 @@
 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,6 +1,11 @@
-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,6 +1,10 @@
-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-module';
+import { SchemeSetting } from './color_functions/color_module';
 
 export type ColorSet = {
   root: string;

src/swatch_scheme.ts

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