feat(color): update ChannelSpec and hue-based modes

- add `hue` flag for channel spec
- update `.clamp()` impl to wrap hue in [0..1] interval
- add/update LCH conversion paths

Author: postspectacular

packages/color/src/api.ts

@@ -64,9 +64,16 @@ export interface IColor {
 export interface ChannelSpec {
     /**
      * Acceptable value range for this channel. Used by {@link TypedColor.clamp}.
+     *
      * @defaultValue [0,1]
      */
     range?: Range;
+    /**
+     * If true, this channel is used to store normalized hue values.
+     *
+     * @defaultValue false
+     */
+    hue?: boolean;
 }
 
 export interface ColorSpec<M extends ColorMode, K extends string> {

packages/color/src/defcolor.ts

@@ -5,6 +5,7 @@ import { isNumber } from "@thi.ng/checks/is-number";
 import { isString } from "@thi.ng/checks/is-string";
 import { illegalArgs } from "@thi.ng/errors/illegal-arguments";
 import { EPS } from "@thi.ng/math/api";
+import { fract } from "@thi.ng/math/prec";
 import type { IRandom } from "@thi.ng/random";
 import { vector } from "@thi.ng/strings/vector";
 import { mapStridedBuffer } from "@thi.ng/vectors/buffer";
@@ -58,6 +59,8 @@ export const defColor = <M extends ColorMode, K extends string>(
     const maxR = set4([], max);
     minR[numChannels - 1] = 1;
 
+    const hueChanID = order.findIndex((id) => !!channels[id]!.hue);
+
     const $Color = class implements TypedColor<$DefColor<any, any>> {
         buf: NumericArray;
         [id: number]: number;
@@ -114,7 +117,9 @@ export const defColor = <M extends ColorMode, K extends string>(
         }
 
         clamp() {
-            return <this>clamp4(null, this, min, max);
+            hueChanID >= 0 && (this[hueChanID] = fract(this[hueChanID]));
+            clamp4(null, this, min, max);
+            return this;
         }
 
         eqDelta(o: $DefColor<any, any>, eps = EPS): boolean {

packages/color/src/hcy/hcy.ts

@@ -2,7 +2,10 @@ import type { NumericArray } from "@thi.ng/api";
 import type { IRandom } from "@thi.ng/random";
 import type { Color, ColorFactory, ReadonlyColor, TypedColor } from "../api.js";
 import { defColor } from "../defcolor.js";
+import { lchLab } from "../lab/lab-lch.js";
+import { labRgb } from "../lab/lab-rgb.js";
 import { rgbHcy } from "../rgb/rgb-hcy.js";
+import { rgbSrgb } from "../rgb/rgb-srgb.js";
 import { hcyRgb } from "./hcy-rgb.js";
 
 export declare class HCY implements TypedColor<HCY> {
@@ -31,7 +34,8 @@ export declare class HCY implements TypedColor<HCY> {
 
 export const hcy = <ColorFactory<HCY>>defColor({
     mode: "hcy",
+    channels: { h: { hue: true } },
     order: <const>["h", "c", "y", "alpha"],
-    from: { rgb: rgbHcy, srgb: rgbHcy },
+    from: { rgb: rgbHcy, srgb: rgbHcy, lch: [lchLab, labRgb, rgbSrgb, rgbHcy] },
     toRgb: hcyRgb,
 });

packages/color/src/hsi/hsi.ts

@@ -2,7 +2,10 @@ import type { NumericArray } from "@thi.ng/api";
 import type { IRandom } from "@thi.ng/random";
 import type { Color, ColorFactory, ReadonlyColor, TypedColor } from "../api.js";
 import { defColor } from "../defcolor.js";
+import { lchLab } from "../lab/lab-lch.js";
+import { labRgb } from "../lab/lab-rgb.js";
 import { rgbHsi } from "../rgb/rgb-hsi.js";
+import { rgbSrgb } from "../rgb/rgb-srgb.js";
 import { hsiRgb } from "./hsi-rgb.js";
 
 export declare class HSI implements TypedColor<HSI> {
@@ -31,7 +34,8 @@ export declare class HSI implements TypedColor<HSI> {
 
 export const hsi = <ColorFactory<HSI>>defColor({
     mode: "hsi",
+    channels: { h: { hue: true } },
     order: <const>["h", "s", "i", "alpha"],
-    from: { rgb: rgbHsi, srgb: rgbHsi },
+    from: { rgb: rgbHsi, srgb: rgbHsi, lch: [lchLab, labRgb, rgbSrgb, rgbHsi] },
     toRgb: hsiRgb,
 });

packages/color/src/hsl/hsl.ts

@@ -3,7 +3,10 @@ import type { IRandom } from "@thi.ng/random";
 import type { Color, ColorFactory, ReadonlyColor, TypedColor } from "../api.js";
 import { defColor } from "../defcolor.js";
 import { hsvHsl } from "../hsv/hsv-hsl.js";
+import { lchLab } from "../lab/lab-lch.js";
+import { labRgb } from "../lab/lab-rgb.js";
 import { rgbHsl } from "../rgb/rgb-hsl.js";
+import { rgbSrgb } from "../rgb/rgb-srgb.js";
 import { hslRgb } from "./hsl-rgb.js";
 
 export declare class HSL implements TypedColor<HSL> {
@@ -32,7 +35,13 @@ export declare class HSL implements TypedColor<HSL> {
 
 export const hsl = <ColorFactory<HSL>>defColor({
     mode: "hsl",
+    channels: { h: { hue: true } },
     order: <const>["h", "s", "l", "alpha"],
-    from: { rgb: rgbHsl, srgb: rgbHsl, hsv: hsvHsl },
+    from: {
+        rgb: rgbHsl,
+        srgb: rgbHsl,
+        hsv: hsvHsl,
+        lch: [lchLab, labRgb, rgbSrgb, rgbHsl],
+    },
     toRgb: hslRgb,
 });

packages/color/src/hsv/hsv.ts

@@ -3,7 +3,10 @@ import type { IRandom } from "@thi.ng/random";
 import type { Color, ColorFactory, ReadonlyColor, TypedColor } from "../api.js";
 import { defColor } from "../defcolor.js";
 import { hslHsv } from "../hsl/hsl-hsv.js";
+import { lchLab } from "../lab/lab-lch.js";
+import { labRgb } from "../lab/lab-rgb.js";
 import { rgbHsv } from "../rgb/rgb-hsv.js";
+import { rgbSrgb } from "../rgb/rgb-srgb.js";
 import { hsvRgb } from "./hsv-rgb.js";
 
 export declare class HSV implements TypedColor<HSV> {
@@ -32,7 +35,13 @@ export declare class HSV implements TypedColor<HSV> {
 
 export const hsv = <ColorFactory<HSV>>defColor({
     mode: "hsv",
+    channels: { h: { hue: true } },
     order: <const>["h", "s", "v", "alpha"],
-    from: { rgb: rgbHsv, srgb: rgbHsv, hsl: hslHsv },
+    from: {
+        rgb: rgbHsv,
+        srgb: rgbHsv,
+        hsl: hslHsv,
+        lch: [lchLab, labRgb, rgbSrgb, rgbHsv],
+    },
     toRgb: hsvRgb,
 });

packages/color/src/lch/lch.ts

@@ -41,6 +41,7 @@ export const lch = <ColorFactory<LCH>>defColor({
     mode: "lch",
     channels: {
         c: { range: [0, 1.312] },
+        h: { hue: true },
     },
     order: <const>["l", "c", "h", "alpha"],
     from: {