Fix Hue wheel

packages/cli/tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "module": "NodeNext",
-    "moduleResolution": "NodeNext",
+    "moduleResolution": "nodenext",
     "outDir": "./dist/"
   },
   "include": ["src", "test"]

packages/icons/package.json

@@ -26,9 +26,9 @@
     "@rollup/plugin-typescript": "^12.1.1",
     "@types/react": "npm:types-react@rc",
     "@types/react-dom": "npm:types-react-dom@rc",
-    "react": "19.0.0-rc-cae764ce-20241025",
-    "react-dom": "19.0.0-rc-cae764ce-20241025",
-    "rollup": "^4.26.0",
+    "react": "19.0.0-rc.1",
+    "react-dom": "19.0.0-rc.1",
+    "rollup": "^4.27.2",
     "rollup-plugin-import-css": "^3.5.6",
     "types-react": "19.0.0-rc.1",
     "types-react-dom": "19.0.0-rc.1"

packages/icons/tsconfig.json

@@ -2,7 +2,9 @@
   "extends": "../../tsconfig.react.json",
   "compilerOptions": {
     "baseUrl": ".",
-    "outDir": "dist"
+    "outDir": "dist",
+    "module": "NodeNext",
+    "moduleResolution": "nodenext"
   },
   "include": ["src"]
 }

packages/plugin-tailwind/package.json

@@ -43,7 +43,7 @@
   "devDependencies": {
     "@terrazzo/cli": "workspace:^",
     "@terrazzo/parser": "workspace:^",
-    "tailwindcss": "^3.4.14",
+    "tailwindcss": "^3.4.15",
     "yaml": "^2.6.0"
   }
 }

packages/react-color-picker/package.json

@@ -61,9 +61,9 @@
     "chokidar-cli": "^3.0.0",
     "culori": "^4.0.1",
     "jsdom": "^24.1.3",
-    "react": "19.0.0-rc-cae764ce-20241025",
-    "react-dom": "19.0.0-rc-cae764ce-20241025",
-    "rollup": "^4.26.0",
+    "react": "19.0.0-rc.1",
+    "react-dom": "19.0.0-rc.1",
+    "rollup": "^4.27.2",
     "rollup-plugin-import-css": "^3.5.6",
     "size-limit": "^11.1.6",
     "types-react": "19.0.0-rc.1",

packages/react-color-picker/src/components/ColorChannelSlider.tsx

@@ -1,12 +1,16 @@
 import { Slider } from '@terrazzo/tiles';
-import { COLORSPACES, type ColorOutput, formatCss, type default as useColor } from '@terrazzo/use-color';
+import { type ColorOutput, formatCss, type Oklab, type default as useColor } from '@terrazzo/use-color';
+import { useMode, modeOklab, modeRgb, modeLrgb } from 'culori';
 import { type ReactElement, useMemo } from 'react';
 import { calculateBounds } from '../lib/color.js';
-import type { WebGLColor } from '../lib/webgl.js';
 import HueWheel from './HueWheel.js';
 import TrueGradient from './TrueGradient.js';
 import './ColorChannelSlider.css';
 
+useMode(modeRgb);
+useMode(modeLrgb);
+const toOklab = useMode(modeOklab);
+
 /** size, in px, to pad inner track */
 export const TRACK_PADDING = 4;
 /** CSS class to add to body */
@@ -84,18 +88,16 @@ function ColorChannelBG({ channel, color, displayMin, displayMax, min, max }: Co
   }
 
   const range = (displayMax ?? max) - (displayMin ?? min);
-  let leftColor = { ...color.original, [channel]: min, alpha: 1 } as WebGLColor;
-  if (!RGB_COLORSPACES.includes(color.original.mode)) {
-    leftColor = COLORSPACES.rec2020.converter(leftColor);
-  }
-  let rightColor = { ...color.original, [channel]: max, alpha: 1 } as WebGLColor;
-  if (!RGB_COLORSPACES.includes(color.original.mode)) {
-    rightColor = COLORSPACES.rec2020.converter(rightColor);
-  }
+  const leftColor = { ...color.original, [channel]: displayMin ?? min };
+  const rightColor = { ...color.original, [channel]: displayMax ?? max };
 
   return (
     <div className='tz-color-channel-slider-bg-wrapper'>
-      <TrueGradient className='tz-color-channel-slider-bg' start={leftColor} end={rightColor} />
+      <TrueGradient
+        className='tz-color-channel-slider-bg'
+        start={toOklab(leftColor) as Oklab}
+        end={toOklab(rightColor) as Oklab}
+      />
       {typeof displayMin === 'number' && displayMin < min && (
         <div
           className='tz-color-channel-slider-overlay tz-color-channel-slider-overlay__min'

packages/react-color-picker/src/components/TrueGradient.tsx

@@ -1,22 +1,23 @@
+import type { Oklab } from '@terrazzo/use-color';
 import { type ComponentProps, useEffect, useRef, useState } from 'react';
-import { GradientRGB, type WebGLColor } from '../lib/webgl.js';
+import { GradientOklab } from '../lib/webgl.js';
 
 export interface TrueGradientProps extends ComponentProps<'canvas'> {
-  start: WebGLColor;
-  end: WebGLColor;
+  start: Oklab;
+  end: Oklab;
 }
 
-function TrueGradient({ start, end, ...rest }: TrueGradientProps) {
+function TrueGradient({ start, end, ...props }: TrueGradientProps) {
   const canvasEl = useRef<HTMLCanvasElement>(null);
-  const [webgl, setWebgl] = useState<GradientRGB | undefined>();
+  const [webgl, setWebgl] = useState<GradientOklab | undefined>();
 
   // initialize
   useEffect(() => {
     if (webgl || !canvasEl.current) {
       return;
     }
-    setWebgl(new GradientRGB({ canvas: canvasEl.current, startColor: start, endColor: end }));
-  }, [canvasEl.current, webgl]);
+    setWebgl(new GradientOklab({ canvas: canvasEl.current, startColor: start, endColor: end }));
+  }, [webgl]);
 
   // update color
   useEffect(() => {
@@ -25,7 +26,7 @@ function TrueGradient({ start, end, ...rest }: TrueGradientProps) {
     }
   }, [start, end, webgl]);
 
-  return <canvas ref={canvasEl} {...rest} />;
+  return <canvas {...props} ref={canvasEl} />;
 }
 
 export default TrueGradient;

packages/react-color-picker/src/lib/rgb.ts

@@ -17,8 +17,10 @@ vec4 linear_rgb_to_srgb(vec4 linear_rgb) {
   return vec4(srgb_transfer_fn(linear_rgb.x), srgb_transfer_fn(linear_rgb.y), srgb_transfer_fn(linear_rgb.z), linear_rgb.w);
 }
 
+// Blend 2 vec4 colors together
 vec4 avg_vec4(vec4 a, vec4 b, float w) {
-  return a * (1.0 - w) + b * w;
+  float _w = 1.0 - w;
+  return (a * _w) + (b * w);
 }
 
 vec4 blend_srgb(vec4 a, vec4 b, float w) {

packages/react-color-picker/src/lib/webgl.ts

@@ -1,10 +1,7 @@
-import type { A98, Lrgb, P3, Prophoto, Rec2020, Rgb } from '@terrazzo/use-color';
+import type { Oklab } from '@terrazzo/use-color';
 import { OKLAB } from './oklab.js';
 import { LINEAR_RGB } from './rgb.js';
 
-/** RGB-based colorspaces */
-export type WebGLColor = A98 | Lrgb | Rgb | P3 | Rec2020 | Prophoto;
-
 /** create a WebGL2 rendering context and throw errors if needed */
 export function createRenderingContext(canvas: HTMLCanvasElement): WebGL2RenderingContext {
   // init GL
@@ -96,17 +93,21 @@ in vec4 v_end_color;
 out vec4 f_color;
 
 ${LINEAR_RGB}
+${OKLAB}
 
 void main() {
   float a = vec2(gl_FragCoord.xy / v_resolution).x;
-  f_color = blend_srgb(v_start_color, v_end_color, a);
+  f_color = linear_rgb_to_srgb(avg_vec4(oklab_to_linear_rgb(v_start_color), oklab_to_linear_rgb(v_end_color), a));
 }
 `;
 
-export class GradientRGB {
+/**
+ * Create a gradient from A to B, blended in Oklab space.
+ */
+export class GradientOklab {
   gl: WebGL2RenderingContext;
-  startColor: WebGLColor;
-  endColor: WebGLColor;
+  startColor: Oklab;
+  endColor: Oklab;
   program: WebGLProgram;
   attr: Record<keyof typeof GRADIENT_RGB_SHADERS.attrs, number> = {
     a_position: -1,
@@ -118,11 +119,7 @@ export class GradientRGB {
 
   private lastFrame: number | undefined;
 
-  constructor({
-    canvas,
-    startColor,
-    endColor,
-  }: { canvas: HTMLCanvasElement; startColor: WebGLColor; endColor: WebGLColor }) {
+  constructor({ canvas, startColor, endColor }: { canvas: HTMLCanvasElement; startColor: Oklab; endColor: Oklab }) {
     this.gl = createRenderingContext(canvas);
     this.program = createProgram({
       gl: this.gl,
@@ -153,26 +150,13 @@ export class GradientRGB {
     this.render();
   }
 
-  setColors(startColor: WebGLColor, endColor: WebGLColor) {
+  setColors(startColor: Oklab, endColor: Oklab) {
     this.startColor = startColor;
     this.endColor = endColor;
     // note: `drawingBufferColorSpace` is ignored in Firefox, but it shouldn’t throw an error
-    if (
-      endColor.mode === 'a98' ||
-      endColor.mode === 'p3' ||
-      endColor.mode === 'rec2020' ||
-      endColor.mode === 'prophoto' ||
-      startColor.mode === 'a98' ||
-      startColor.mode === 'p3' ||
-      startColor.mode === 'rec2020' ||
-      startColor.mode === 'prophoto'
-    ) {
-      this.gl.drawingBufferColorSpace = 'display-p3';
-    } else {
-      this.gl.drawingBufferColorSpace = 'srgb';
-    }
-    this.gl.vertexAttrib4f(this.attr.a_start_color, startColor.r, startColor.g, startColor.b, 1);
-    this.gl.vertexAttrib4f(this.attr.a_end_color, endColor.r, endColor.g, endColor.b, 1);
+    this.gl.drawingBufferColorSpace = 'display-p3';
+    this.gl.vertexAttrib4f(this.attr.a_start_color, startColor.l, startColor.a, startColor.b, 1);
+    this.gl.vertexAttrib4f(this.attr.a_end_color, endColor.l, endColor.a, endColor.b, 1);
     this.render();
   }
 
@@ -206,7 +190,7 @@ export class GradientRGB {
 }
 
 /**
- * Generate a perfect rainbow hue wheel in Oklab colorspace with WebGL
+ * Generate a perceptually-uniform rainbow gradient in the Oklab space.
  */
 export const HUE_SHADERS = {
   attrs: { a_position: 'a_position', a_resolution: 'a_resolution' },
@@ -243,12 +227,12 @@ void main() {
   // 3 = projection toward point, hue dependent
   // 4 = adaptive Lightness, hue independent
   // 5 = adaptive Lightness, hue dependent
-  int clamp_mode = 2;
+  int clamp_mode = 3;
 
   float hue_norm = vec2(gl_FragCoord.xy / v_resolution).x;
   float hue = 360.0 * hue_norm;
 
-  f_color = oklch_to_srgb(vec4(0.8, 0.4, hue, 1.0), clamp_mode);
+  f_color = oklch_to_srgb(vec4(0.7, 0.4, hue, 1.0), clamp_mode);
 }
 `;
 
@@ -288,7 +272,6 @@ export class HueWheel {
     if (gamut !== 'srgb' && gamut !== 'p3') {
       throw new Error(`Unsupported gamut: "${gamut}"`);
     }
-    // this.gl.drawingBufferColorSpace = gamut === 'p3' ? 'display-p3' : 'srgb';
     this.gl.drawingBufferColorSpace = 'display-p3';
   }
 

packages/react-color-picker/tsconfig.build.json

@@ -1,4 +1,8 @@
 {
   "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "NodeNext",
+    "moduleResolution": "nodenext"
+  },
   "exclude": ["**/__test__/**", "**/*.test.*"]
 }

packages/react-color-picker/tsconfig.json

@@ -2,7 +2,9 @@
   "extends": "../../tsconfig.react.json",
   "compilerOptions": {
     "baseUrl": ".",
-    "outDir": "dist"
+    "outDir": "dist",
+    "module": "NodeNext",
+    "moduleResolution": "nodenext"
   },
   "include": ["src"]
 }

packages/storybook/package.json

@@ -17,10 +17,10 @@
     "culori": "^4.0.1"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/react": "^8.3.6",
-    "@storybook/react-vite": "^8.3.6",
-    "@storybook/test": "^8.3.6",
+    "@storybook/addon-essentials": "^8.4.4",
+    "@storybook/react": "^8.4.4",
+    "@storybook/react-vite": "^8.4.4",
+    "@storybook/test": "^8.4.4",
     "@terrazzo/fonts": "workspace:^",
     "@terrazzo/icons": "workspace:^",
     "@terrazzo/react-color-picker": "workspace:^",
@@ -31,12 +31,12 @@
     "@types/react": "npm:types-react@rc",
     "@types/react-dom": "npm:types-react-dom@rc",
     "@vitejs/plugin-react-swc": "^3.7.1",
-    "react": "19.0.0-rc-cae764ce-20241025",
-    "react-dom": "19.0.0-rc-cae764ce-20241025",
-    "storybook": "^8.3.6",
+    "react": "19.0.0-rc.1",
+    "react-dom": "19.0.0-rc.1",
+    "storybook": "^8.4.4",
     "types-react": "19.0.0-rc.1",
     "types-react-dom": "19.0.0-rc.1",
-    "vite": "^5.4.10"
+    "vite": "^5.4.11"
   },
   "overrides": {
     "@types/react": "npm:types-react@rc",

packages/storybook/src/TrueGradient.stories.jsx

@@ -1,8 +1,5 @@
 import { TrueGradient } from '@terrazzo/react-color-picker';
-import { modeP3, modeRgb, useMode } from 'culori/fn';
-
-const toRgb = useMode(modeRgb);
-useMode(modeP3);
+import useColor from '@terrazzo/use-color';
 
 export default {
   title: 'Components/Display/TrueGradient',
@@ -18,14 +15,17 @@ export const Overview = {
     end: 'color(srgb 0 1 0)',
   },
   render(args) {
+    const [start] = useColor(args.start);
+    const [end] = useColor(args.end);
+
     return (
       <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
         Good
-        <TrueGradient start={toRgb(args.start)} end={toRgb(args.end)} style={{ width: '16rem', height: '1.5rem' }} />
+        <TrueGradient start={start.oklab} end={end.oklab} style={{ width: '16rem', height: '1.5rem' }} />
         Bad
         <div
           style={{
-            background: `linear-gradient(to right, ${args.start}, ${args.end})`,
+            background: `linear-gradient(to right, ${start.css}, ${end.css})`,
             width: '16rem',
             height: '1.5rem',
           }}

packages/tiles/package.json

@@ -41,7 +41,7 @@
     "@use-gesture/react": "^10.3.1",
     "clsx": "^2.1.1",
     "culori": "^4.0.1",
-    "shiki": "^1.22.2",
+    "shiki": "^1.23.0",
     "vite": "^5.4.11"
   },
   "devDependencies": {
@@ -52,9 +52,9 @@
     "@types/react-dom": "npm:types-react-dom@rc",
     "@vitejs/plugin-react-swc": "^3.7.1",
     "chokidar-cli": "^3.0.0",
-    "react": "19.0.0-rc-cae764ce-20241025",
-    "react-dom": "19.0.0-rc-cae764ce-20241025",
-    "rollup": "^4.26.0",
+    "react": "19.0.0-rc.1",
+    "react-dom": "19.0.0-rc.1",
+    "rollup": "^4.27.2",
     "rollup-plugin-import-css": "^3.5.6",
     "size-limit": "^11.1.6",
     "types-react": "19.0.0-rc.1",

packages/tiles/tsconfig.build.json

@@ -1,4 +1,8 @@
 {
   "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "NodeNext",
+    "moduleResolution": "nodenext"
+  },
   "exclude": ["**/__test__/**", "**/*.test.*"]
 }

packages/token-lab/package.json

@@ -51,8 +51,8 @@
     "@types/react": "npm:types-react@rc",
     "@types/react-dom": "npm:types-react-dom@rc",
     "@vitejs/plugin-react-swc": "^3.7.1",
-    "react": "19.0.0-rc-cae764ce-20241025",
-    "react-dom": "19.0.0-rc-cae764ce-20241025",
+    "react": "19.0.0-rc.1",
+    "react-dom": "19.0.0-rc.1",
     "types-react": "19.0.0-rc.1",
     "types-react-dom": "19.0.0-rc.1",
     "vite": "^5.4.11",