@lovo/matter 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lovo/matter
 
+## 0.6.0
+
+### Minor Changes
+
+- 24ec05d: Add color-space-aware interpolation. `colorRamp` and the new `mixColor` primitive
+  accept `colorSpace` ('linear' | 'oklab' | 'oklch' | 'lch' | 'hsl' | 'hsv',
+  default 'oklab') and `hueInterpolation` ('shorter' | 'longer' | 'increasing' |
+  'decreasing', default 'shorter'). LinearGradient, SimplexNoise, and MeshGradient
+  gain matching props. Foundation fix: hex colors now decode to linear-sRGB (true
+  color), and the LCH conversion's green coefficient was corrected. This shifts the
+  default appearance of those components (pre-1.0 breaking color change).
+
 ## 0.5.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -15,7 +15,7 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __toCommonJS = (mod2) => __copyProps(__defProp({}, "__esModule", { value: true }), mod2);
 
 // src/index.ts
 var index_exports = {};
@@ -29,29 +29,68 @@ __export(index_exports, {
   createVisibilityWatcher: () => createVisibilityWatcher,
   cursorRipple: () => cursorRipple,
   displace: () => displace,
+  dither: () => dither,
   elapsedTime: () => elapsedTime,
   filmGrain: () => filmGrain,
   fractalNoise: () => fractalNoise,
   getReducedMotionPolicy: () => getReducedMotionPolicy,
   getReducedMotionTimeScale: () => getReducedMotionTimeScale,
+  mixColor: () => mixColor,
+  oklabToLinearSrgb: () => oklabToLinearSrgb,
+  oklchToLinearSrgb: () => oklchToLinearSrgb,
+  parseColorString: () => parseColorString,
   quantize: () => quantize,
   setReducedMotionPolicy: () => setReducedMotionPolicy,
   signedDistanceFieldCircle: () => signedDistanceFieldCircle,
   simplexNoise: () => simplexNoise,
+  srgbChannelToLinear: () => srgbChannelToLinear,
   voronoi: () => voronoi
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/runtime/create-renderer/create-renderer.ts
-var import_three = require("three");
+var import_three2 = require("three");
 var import_webgpu = require("three/webgpu");
+
+// src/runtime/create-renderer/gamut.ts
+var import_three = require("three");
+var import_ColorSpaces = require("three/examples/jsm/math/ColorSpaces.js");
+import_three.ColorManagement.define({
+  [import_ColorSpaces.DisplayP3ColorSpace]: import_ColorSpaces.DisplayP3ColorSpaceImpl,
+  [import_ColorSpaces.LinearDisplayP3ColorSpace]: import_ColorSpaces.LinearDisplayP3ColorSpaceImpl
+});
+function gamutToColorSpace(gamut) {
+  return gamut === "p3" ? import_ColorSpaces.DisplayP3ColorSpace : import_three.SRGBColorSpace;
+}
+function hasWebGpuBackendInternals(backend) {
+  if (typeof backend !== "object" || backend === null) return false;
+  if (!("device" in backend) || !("context" in backend)) return false;
+  const { device, context } = backend;
+  return typeof device === "object" && device !== null && typeof context === "object" && context !== null && "configure" in context && typeof context.configure === "function";
+}
+function applyCanvasGamut(renderer, backend, gamut) {
+  if (gamut !== "p3" || backend !== "webgpu") return;
+  if (typeof navigator === "undefined" || !("gpu" in navigator)) return;
+  const webGpuBackend = renderer.backend;
+  if (!hasWebGpuBackendInternals(webGpuBackend)) return;
+  webGpuBackend.context.configure({
+    device: webGpuBackend.device,
+    format: navigator.gpu.getPreferredCanvasFormat(),
+    usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
+    alphaMode: "premultiplied",
+    colorSpace: "display-p3"
+  });
+}
+
+// src/runtime/create-renderer/create-renderer.ts
 async function createRenderer(canvas, opts = {}) {
   const {
     antialias = true,
     forceWebGL = false,
     clearColor = 0,
     clearAlpha = 0,
-    maxDPR = 2
+    maxDPR = 2,
+    gamut = "srgb"
   } = opts;
   const three = new import_webgpu.WebGPURenderer({
     canvas,
@@ -59,19 +98,24 @@ async function createRenderer(canvas, opts = {}) {
     forceWebGL
   });
   await three.init();
+  three.outputColorSpace = gamutToColorSpace(gamut);
   three.setPixelRatio(Math.min(window.devicePixelRatio, maxDPR));
-  const resolvedClearColor = clearColor instanceof import_three.Color ? clearColor : new import_three.Color(clearColor);
+  const resolvedClearColor = clearColor instanceof import_three2.Color ? clearColor : new import_three2.Color(clearColor);
   three.setClearColor(resolvedClearColor, clearAlpha);
+  const rendererSize = new import_three2.Vector2();
   const resize = () => {
     const canvasWidth = canvas.clientWidth;
     const canvasHeight = canvas.clientHeight;
-    if (canvas.width !== canvasWidth * three.getPixelRatio() || canvas.height !== canvasHeight * three.getPixelRatio()) {
+    if (canvasWidth === 0 || canvasHeight === 0) return;
+    three.getSize(rendererSize);
+    if (rendererSize.width !== canvasWidth || rendererSize.height !== canvasHeight) {
       three.setSize(canvasWidth, canvasHeight, false);
     }
   };
   resize();
   const isWebGL = "isWebGLBackend" in three.backend && three.backend.isWebGLBackend === true;
   const backend = forceWebGL || isWebGL ? "webgl2" : "webgpu";
+  applyCanvasGamut(three, backend, gamut);
   return {
     three,
     backend,
@@ -158,33 +202,369 @@ var clamp01 = (value) => Math.max(0, Math.min(1, value));
 var lerp = (startValue, endValue, blendFactor) => startValue + (endValue - startValue) * blendFactor;
 
 // src/primitives/color-ramp/color-ramp.ts
+var import_tsl9 = require("three/tsl");
+
+// src/primitives/color-space/hue.ts
 var import_tsl = require("three/tsl");
+var EQUAL_HUE_EPSILON = 1e-6;
+var shortestArcHue = (h1, h2, t, period) => {
+  const half = period / 2;
+  const delta = (0, import_tsl.mod)(h2.sub(h1).add(half), period).sub(half);
+  return h1.add(delta.mul(t));
+};
+var longestArcHue = (h1, h2, t, period) => {
+  const half = period / 2;
+  const short = (0, import_tsl.mod)(h2.sub(h1).add(half), period).sub(half);
+  const delta = short.sub((0, import_tsl.sign)(short).mul(period));
+  return h1.add(delta.mul(t));
+};
+var increasingArcHue = (h1, h2, t, period) => {
+  const delta = (0, import_tsl.mod)(h2.sub(h1), period);
+  return h1.add(delta.mul(t));
+};
+var decreasingArcHue = (h1, h2, t, period) => {
+  const up = (0, import_tsl.mod)(h2.sub(h1), period);
+  const delta = up.sub((0, import_tsl.step)(EQUAL_HUE_EPSILON, up).mul(period));
+  return h1.add(delta.mul(t));
+};
+var hueArcInterpolators = {
+  shorter: shortestArcHue,
+  longer: longestArcHue,
+  increasing: increasingArcHue,
+  decreasing: decreasingArcHue
+};
+
+// src/primitives/color-space/hsl.ts
+var import_tsl3 = require("three/tsl");
+
+// src/primitives/color-space/transfer.ts
 var import_tsl2 = require("three/tsl");
-function colorRamp(t, stops) {
+function srgbChannelToLinear(channel) {
+  return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+}
+function srgbToLinear(srgb) {
+  const value = (0, import_tsl2.pow)(srgb, 1);
+  const lowSegment = value.div(12.92);
+  const highSegment = (0, import_tsl2.pow)(value.add(0.055).div(1.055), 2.4);
+  return (0, import_tsl2.mix)(lowSegment, highSegment, (0, import_tsl2.step)(0.04045, value));
+}
+function linearToSrgb(linear) {
+  const value = (0, import_tsl2.pow)(linear, 1);
+  const lowSegment = value.mul(12.92);
+  const highSegment = (0, import_tsl2.pow)(value, 1 / 2.4).mul(1.055).sub(0.055);
+  return (0, import_tsl2.mix)(lowSegment, highSegment, (0, import_tsl2.step)(31308e-7, value));
+}
+
+// src/primitives/color-space/hsl.ts
+var EPSILON = 1e-10;
+function gammaRgbHue(c) {
+  const p = (0, import_tsl3.mix)((0, import_tsl3.vec4)(c.b, c.g, -1 / 3, 2 / 3), (0, import_tsl3.vec4)(c.g, c.b, 0, -1 / 3), (0, import_tsl3.step)(c.b, c.g));
+  const q = (0, import_tsl3.mix)((0, import_tsl3.vec4)(p.x, p.y, p.w, c.r), (0, import_tsl3.vec4)(c.r, p.y, p.z, p.x), (0, import_tsl3.step)(p.x, c.r));
+  const chroma = q.x.sub((0, import_tsl3.min)(q.w, q.y));
+  return (0, import_tsl3.abs)(q.z.add(q.w.sub(q.y).div(chroma.mul(6).add(EPSILON))));
+}
+function gammaRgbToHsl(c) {
+  const maxChannel = (0, import_tsl3.max)(c.r, (0, import_tsl3.max)(c.g, c.b));
+  const minChannel = (0, import_tsl3.min)(c.r, (0, import_tsl3.min)(c.g, c.b));
+  const lightness = maxChannel.add(minChannel).mul(0.5);
+  const chroma = maxChannel.sub(minChannel);
+  const saturation = chroma.div((0, import_tsl3.abs)(lightness.mul(2).sub(1)).oneMinus().add(EPSILON));
+  return (0, import_tsl3.vec3)(gammaRgbHue(c), saturation, lightness);
+}
+function hslToGammaRgb(hsl) {
+  const hue = hsl.x;
+  const saturation = hsl.y;
+  const lightness = hsl.z;
+  const chroma = (0, import_tsl3.abs)(lightness.mul(2).sub(1)).oneMinus().mul(saturation);
+  const ramp = (0, import_tsl3.abs)(
+    (0, import_tsl3.fract)((0, import_tsl3.vec3)(hue).add((0, import_tsl3.vec3)(1, 2 / 3, 1 / 3))).mul(6).sub((0, import_tsl3.vec3)(3))
+  );
+  const hueRgb = (0, import_tsl3.clamp)(ramp.sub((0, import_tsl3.vec3)(1)), 0, 1);
+  return hueRgb.sub(0.5).mul(chroma).add(lightness);
+}
+var hslSpace = {
+  // Clamp into sRGB before the gamma transfer: HSL is an sRGB-gamut concept, and
+  // the sRGB OETF's pow() can't be WGSL const-evaluated on the negative channels
+  // of an out-of-sRGB (wide-gamut) stop color — that crashed the shader compile.
+  fromLinear: (rgb) => gammaRgbToHsl(linearToSrgb((0, import_tsl3.clamp)(rgb, 0, 1))),
+  toLinear: (hsl) => srgbToLinear(hslToGammaRgb(hsl)),
+  lerp: (a, b, t, hue) => (0, import_tsl3.vec3)(hue(a.x, b.x, t, 1), (0, import_tsl3.mix)(a.y, b.y, t), (0, import_tsl3.mix)(a.z, b.z, t))
+};
+
+// src/primitives/color-space/hsv.ts
+var import_tsl4 = require("three/tsl");
+var EPSILON2 = 1e-10;
+function gammaRgbToHsv(c) {
+  const p = (0, import_tsl4.mix)((0, import_tsl4.vec4)(c.b, c.g, -1 / 3, 2 / 3), (0, import_tsl4.vec4)(c.g, c.b, 0, -1 / 3), (0, import_tsl4.step)(c.b, c.g));
+  const q = (0, import_tsl4.mix)((0, import_tsl4.vec4)(p.x, p.y, p.w, c.r), (0, import_tsl4.vec4)(c.r, p.y, p.z, p.x), (0, import_tsl4.step)(p.x, c.r));
+  const chroma = q.x.sub((0, import_tsl4.min)(q.w, q.y));
+  const hue = (0, import_tsl4.abs)(q.z.add(q.w.sub(q.y).div(chroma.mul(6).add(EPSILON2))));
+  const saturation = chroma.div(q.x.add(EPSILON2));
+  return (0, import_tsl4.vec3)(hue, saturation, q.x);
+}
+function hsvToGammaRgb(hsv) {
+  const hue = hsv.x;
+  const saturation = hsv.y;
+  const value = hsv.z;
+  const ramp = (0, import_tsl4.abs)(
+    (0, import_tsl4.fract)((0, import_tsl4.vec3)(hue).add((0, import_tsl4.vec3)(1, 2 / 3, 1 / 3))).mul(6).sub((0, import_tsl4.vec3)(3))
+  );
+  return (0, import_tsl4.mix)((0, import_tsl4.vec3)(1), (0, import_tsl4.clamp)(ramp.sub((0, import_tsl4.vec3)(1)), 0, 1), saturation).mul(value);
+}
+var hsvSpace = {
+  // Clamp into sRGB before the gamma transfer: HSV is an sRGB-gamut concept, and
+  // the sRGB OETF's pow() can't be WGSL const-evaluated on the negative channels
+  // of an out-of-sRGB (wide-gamut) stop color — that crashed the shader compile.
+  fromLinear: (rgb) => gammaRgbToHsv(linearToSrgb((0, import_tsl4.clamp)(rgb, 0, 1))),
+  toLinear: (hsv) => srgbToLinear(hsvToGammaRgb(hsv)),
+  lerp: (a, b, t, hue) => (0, import_tsl4.vec3)(hue(a.x, b.x, t, 1), (0, import_tsl4.mix)(a.y, b.y, t), (0, import_tsl4.mix)(a.z, b.z, t))
+};
+
+// src/primitives/color-space/lch.ts
+var import_tsl5 = require("three/tsl");
+var TWO_PI = Math.PI * 2;
+var WHITE_X = 0.95047;
+var WHITE_Y = 1;
+var WHITE_Z = 1.08883;
+var EPSILON3 = 216 / 24389;
+var KAPPA = 24389 / 27;
+function labForward(ratio) {
+  const linearPart = ratio.mul(KAPPA).add(16).div(116);
+  const cubeRootPart = (0, import_tsl5.cbrt)(ratio);
+  return (0, import_tsl5.mix)(linearPart, cubeRootPart, (0, import_tsl5.step)(EPSILON3, ratio));
+}
+function labInverse(f) {
+  const cubed = f.mul(f).mul(f);
+  const linearPart = f.mul(116).sub(16).div(KAPPA);
+  return (0, import_tsl5.mix)(linearPart, cubed, (0, import_tsl5.step)(EPSILON3, cubed));
+}
+function linearToLch(rgb) {
+  const r = rgb.r;
+  const g = rgb.g;
+  const b = rgb.b;
+  const x = r.mul(0.4123907993).add(g.mul(0.3575843394)).add(b.mul(0.1804807884));
+  const y = r.mul(0.2126390059).add(g.mul(0.7151686788)).add(b.mul(0.0721923154));
+  const z = r.mul(0.0193308187).add(g.mul(0.1191947798)).add(b.mul(0.9505321522));
+  const fx = labForward(x.div(WHITE_X));
+  const fy = labForward(y.div(WHITE_Y));
+  const fz = labForward(z.div(WHITE_Z));
+  const lightness = fy.mul(116).sub(16);
+  const greenRed = fx.sub(fy).mul(500);
+  const blueYellow = fy.sub(fz).mul(200);
+  const chroma = (0, import_tsl5.length)((0, import_tsl5.vec2)(greenRed, blueYellow));
+  const hue = (0, import_tsl5.atan2)(blueYellow, greenRed);
+  return (0, import_tsl5.vec3)(lightness, chroma, hue);
+}
+function lchToLinear(lch) {
+  const lightness = lch.x;
+  const chroma = lch.y;
+  const hue = lch.z;
+  const greenRed = chroma.mul((0, import_tsl5.cos)(hue));
+  const blueYellow = chroma.mul((0, import_tsl5.sin)(hue));
+  const fy = lightness.add(16).div(116);
+  const fx = fy.add(greenRed.div(500));
+  const fz = fy.sub(blueYellow.div(200));
+  const x = labInverse(fx).mul(WHITE_X);
+  const y = labInverse(fy).mul(WHITE_Y);
+  const z = labInverse(fz).mul(WHITE_Z);
+  const r = x.mul(3.2409699419).sub(y.mul(1.5373831776)).sub(z.mul(0.4986107603));
+  const g = x.mul(-0.9692436363).add(y.mul(1.8759675015)).add(z.mul(0.0415550574));
+  const b = x.mul(0.0556300797).sub(y.mul(0.2039769589)).add(z.mul(1.0569715142));
+  return (0, import_tsl5.vec3)(r, g, b);
+}
+var lchSpace = {
+  fromLinear: linearToLch,
+  toLinear: lchToLinear,
+  lerp: (a, b, t, hue) => (0, import_tsl5.vec3)((0, import_tsl5.mix)(a.x, b.x, t), (0, import_tsl5.mix)(a.y, b.y, t), hue(a.z, b.z, t, TWO_PI))
+};
+
+// src/primitives/color-space/linear.ts
+var import_tsl6 = require("three/tsl");
+var linearSpace = {
+  fromLinear: (rgb) => (0, import_tsl6.vec3)(rgb),
+  toLinear: (coords) => (0, import_tsl6.vec3)(coords),
+  lerp: (a, b, t) => (0, import_tsl6.mix)(a, b, t)
+};
+
+// src/primitives/color-space/oklab.ts
+var import_tsl7 = require("three/tsl");
+function linearToOklab(rgb) {
+  const r = rgb.r;
+  const g = rgb.g;
+  const b = rgb.b;
+  const longCone = r.mul(0.4122214708).add(g.mul(0.5363325363)).add(b.mul(0.0514459929));
+  const mediumCone = r.mul(0.2119034982).add(g.mul(0.6806995451)).add(b.mul(0.1073969566));
+  const shortCone = r.mul(0.0883024619).add(g.mul(0.2817188376)).add(b.mul(0.6299787005));
+  const longRoot = (0, import_tsl7.cbrt)(longCone);
+  const mediumRoot = (0, import_tsl7.cbrt)(mediumCone);
+  const shortRoot = (0, import_tsl7.cbrt)(shortCone);
+  const lightness = longRoot.mul(0.2104542553).add(mediumRoot.mul(0.793617785)).sub(shortRoot.mul(0.0040720468));
+  const greenRed = longRoot.mul(1.9779984951).sub(mediumRoot.mul(2.428592205)).add(shortRoot.mul(0.4505937099));
+  const blueYellow = longRoot.mul(0.0259040371).add(mediumRoot.mul(0.7827717662)).sub(shortRoot.mul(0.808675766));
+  return (0, import_tsl7.vec3)(lightness, greenRed, blueYellow);
+}
+function oklabToLinear(lab) {
+  const lightness = lab.x;
+  const greenRed = lab.y;
+  const blueYellow = lab.z;
+  const longRoot = lightness.add(greenRed.mul(0.3963377774)).add(blueYellow.mul(0.2158037573));
+  const mediumRoot = lightness.sub(greenRed.mul(0.1055613458)).sub(blueYellow.mul(0.0638541728));
+  const shortRoot = lightness.sub(greenRed.mul(0.0894841775)).sub(blueYellow.mul(1.291485548));
+  const longCone = longRoot.mul(longRoot).mul(longRoot);
+  const mediumCone = mediumRoot.mul(mediumRoot).mul(mediumRoot);
+  const shortCone = shortRoot.mul(shortRoot).mul(shortRoot);
+  const r = longCone.mul(4.0767416621).sub(mediumCone.mul(3.3077115913)).add(shortCone.mul(0.2309699292));
+  const g = longCone.mul(-1.2684380046).add(mediumCone.mul(2.6097574011)).sub(shortCone.mul(0.3413193965));
+  const b = longCone.mul(-0.0041960863).sub(mediumCone.mul(0.7034186147)).add(shortCone.mul(1.707614701));
+  return (0, import_tsl7.vec3)(r, g, b);
+}
+var oklabSpace = {
+  fromLinear: linearToOklab,
+  toLinear: oklabToLinear,
+  lerp: (a, b, t) => (0, import_tsl7.mix)(a, b, t)
+};
+
+// src/primitives/color-space/oklch.ts
+var import_tsl8 = require("three/tsl");
+var TWO_PI2 = Math.PI * 2;
+function linearToOklch(rgb) {
+  const lab = linearToOklab(rgb);
+  const lightness = lab.x;
+  const greenRed = lab.y;
+  const blueYellow = lab.z;
+  const chroma = (0, import_tsl8.length)((0, import_tsl8.vec2)(greenRed, blueYellow));
+  const hue = (0, import_tsl8.atan2)(blueYellow, greenRed);
+  return (0, import_tsl8.vec3)(lightness, chroma, hue);
+}
+function oklchToLinear(lch) {
+  const lightness = lch.x;
+  const chroma = lch.y;
+  const hue = lch.z;
+  const greenRed = chroma.mul((0, import_tsl8.cos)(hue));
+  const blueYellow = chroma.mul((0, import_tsl8.sin)(hue));
+  return oklabToLinear((0, import_tsl8.vec3)(lightness, greenRed, blueYellow));
+}
+var oklchSpace = {
+  fromLinear: linearToOklch,
+  toLinear: oklchToLinear,
+  lerp: (a, b, t, hue) => (0, import_tsl8.vec3)((0, import_tsl8.mix)(a.x, b.x, t), (0, import_tsl8.mix)(a.y, b.y, t), hue(a.z, b.z, t, TWO_PI2))
+};
+
+// src/primitives/color-space/registry.ts
+var colorSpaces = {
+  linear: linearSpace,
+  oklab: oklabSpace,
+  oklch: oklchSpace,
+  lch: lchSpace,
+  hsl: hslSpace,
+  hsv: hsvSpace
+};
+
+// src/primitives/color-ramp/color-ramp.ts
+function colorRamp(t, stops, colorSpace = "linear", hueInterpolation = "shorter") {
+  const space = colorSpaces[colorSpace];
+  const hue = hueArcInterpolators[hueInterpolation];
   const first = stops[0];
-  if (first === void 0) return (0, import_tsl.vec3)(0, 0, 0);
-  if (stops.length === 1) return (0, import_tsl.mix)(first.color, first.color, 0);
-  let result = (0, import_tsl.mix)(first.color, first.color, 0);
+  if (first === void 0) return (0, import_tsl9.vec3)(0, 0, 0);
+  const firstCoords = space.fromLinear((0, import_tsl9.vec3)(first.color));
+  if (stops.length === 1) return space.toLinear(firstCoords);
+  let resultCoords = firstCoords;
   for (let i = 1; i < stops.length; i += 1) {
     const previousStop = stops[i - 1];
     const next = stops[i];
     if (previousStop === void 0 || next === void 0) continue;
     const positionSpan = next.position - previousStop.position;
     if (positionSpan <= 0) continue;
-    const localT = (0, import_tsl2.clamp)((0, import_tsl2.div)((0, import_tsl2.sub)(t, previousStop.position), positionSpan), 0, 1);
-    result = (0, import_tsl.mix)(result, next.color, localT);
+    const localT = (0, import_tsl9.clamp)((0, import_tsl9.div)((0, import_tsl9.sub)(t, previousStop.position), positionSpan), 0, 1);
+    const nextCoords = space.fromLinear((0, import_tsl9.vec3)(next.color));
+    resultCoords = space.lerp(resultCoords, nextCoords, localT, hue);
   }
-  return result;
+  return space.toLinear(resultCoords);
+}
+
+// src/primitives/color-space/mix-color.ts
+var import_tsl10 = require("three/tsl");
+function mixColor(colorA, colorB, t, colorSpace = "oklab", hueInterpolation = "shorter") {
+  const space = colorSpaces[colorSpace];
+  const hue = hueArcInterpolators[hueInterpolation];
+  const a = space.fromLinear((0, import_tsl10.vec3)(colorA));
+  const b = space.fromLinear((0, import_tsl10.vec3)(colorB));
+  return space.toLinear(space.lerp(a, b, t, hue));
+}
+
+// src/primitives/color-space/cpu-convert.ts
+function oklabToLinearSrgb(lightness, greenRed, blueYellow) {
+  const longRoot = lightness + 0.3963377774 * greenRed + 0.2158037573 * blueYellow;
+  const mediumRoot = lightness - 0.1055613458 * greenRed - 0.0638541728 * blueYellow;
+  const shortRoot = lightness - 0.0894841775 * greenRed - 1.291485548 * blueYellow;
+  const longCone = longRoot * longRoot * longRoot;
+  const mediumCone = mediumRoot * mediumRoot * mediumRoot;
+  const shortCone = shortRoot * shortRoot * shortRoot;
+  const red = 4.0767416621 * longCone - 3.3077115913 * mediumCone + 0.2309699292 * shortCone;
+  const green = -1.2684380046 * longCone + 2.6097574011 * mediumCone - 0.3413193965 * shortCone;
+  const blue = -0.0041960863 * longCone - 0.7034186147 * mediumCone + 1.707614701 * shortCone;
+  return [red, green, blue];
+}
+function oklchToLinearSrgb(lightness, chroma, hueDegrees) {
+  const hueRadians = hueDegrees * Math.PI / 180;
+  const greenRed = chroma * Math.cos(hueRadians);
+  const blueYellow = chroma * Math.sin(hueRadians);
+  return oklabToLinearSrgb(lightness, greenRed, blueYellow);
+}
+function parseComponent(token, scale) {
+  const trimmed = token.trim();
+  if (trimmed.endsWith("%")) {
+    return parseFloat(trimmed.slice(0, -1)) / 100 * scale;
+  }
+  return parseFloat(trimmed);
+}
+function functionArgs(input, prefix) {
+  const inner = input.slice(prefix.length, input.lastIndexOf(")"));
+  const beforeAlpha = inner.split("/")[0] ?? "";
+  return beforeAlpha.trim().split(/[\s,]+/).filter((token) => token.length > 0);
+}
+function parseColorString(input) {
+  const value = input.trim();
+  if (value.startsWith("#")) {
+    const hex = value.slice(1);
+    return [
+      srgbChannelToLinear(parseInt(hex.slice(0, 2), 16) / 255),
+      srgbChannelToLinear(parseInt(hex.slice(2, 4), 16) / 255),
+      srgbChannelToLinear(parseInt(hex.slice(4, 6), 16) / 255)
+    ];
+  }
+  if (value.startsWith("oklch(")) {
+    const [lightnessToken, chromaToken, hueToken] = functionArgs(value, "oklch(");
+    if (lightnessToken === void 0 || chromaToken === void 0 || hueToken === void 0) {
+      throw new Error(`Invalid oklch() color: "${input}"`);
+    }
+    const lightness = parseComponent(lightnessToken, 1);
+    const chroma = parseComponent(chromaToken, 0.4);
+    const hueDegrees = parseFloat(hueToken.replace(/deg$/, ""));
+    return oklchToLinearSrgb(lightness, chroma, hueDegrees);
+  }
+  if (value.startsWith("oklab(")) {
+    const [lightnessToken, aToken, bToken] = functionArgs(value, "oklab(");
+    if (lightnessToken === void 0 || aToken === void 0 || bToken === void 0) {
+      throw new Error(`Invalid oklab() color: "${input}"`);
+    }
+    return oklabToLinearSrgb(
+      parseComponent(lightnessToken, 1),
+      parseComponent(aToken, 0.4),
+      parseComponent(bToken, 0.4)
+    );
+  }
+  throw new Error(`Unsupported color syntax: "${input}". Use #rrggbb, oklch(...), or oklab(...).`);
 }
 
 // src/primitives/noise/noise.ts
-var import_tsl3 = require("three/tsl");
+var import_tsl11 = require("three/tsl");
 function simplexNoise(p) {
-  return (0, import_tsl3.mx_noise_float)(p);
+  return (0, import_tsl11.mx_noise_float)(p);
 }
 
 // src/primitives/fbm/fbm.ts
-var import_tsl4 = require("three/tsl");
+var import_tsl12 = require("three/tsl");
 function fractalNoise(p, opts = {}) {
   const octaves = opts.octaves ?? 4;
   const lacunarity = opts.lacunarity ?? 2;
@@ -197,7 +577,7 @@ function fractalNoise(p, opts = {}) {
     frequency *= lacunarity;
     amplitude *= gain;
     total += amplitude;
-    const pAtFreq = (0, import_tsl4.add)((0, import_tsl4.mul)(p, frequency), i * 100);
+    const pAtFreq = (0, import_tsl12.add)((0, import_tsl12.mul)(p, frequency), i * 100);
     const layer = simplexNoise(pAtFreq).mul(amplitude);
     sum = sum.add(layer);
   }
@@ -205,9 +585,9 @@ function fractalNoise(p, opts = {}) {
 }
 
 // src/primitives/voronoi/voronoi.ts
-var import_tsl5 = require("three/tsl");
+var import_tsl13 = require("three/tsl");
 function voronoi(p) {
-  return (0, import_tsl5.mx_worley_noise_float)(p);
+  return (0, import_tsl13.mx_worley_noise_float)(p);
 }
 
 // src/primitives/quantize/quantize.ts
@@ -220,25 +600,25 @@ function quantize(t, steps) {
 }
 
 // src/primitives/sdf-circle/sdf-circle.ts
-var import_tsl6 = require("three/tsl");
+var import_tsl14 = require("three/tsl");
 function signedDistanceFieldCircle(p, radius) {
-  return (0, import_tsl6.length)(p).sub(radius);
+  return (0, import_tsl14.length)(p).sub(radius);
 }
 
 // src/primitives/displace/displace.ts
-var import_tsl7 = require("three/tsl");
+var import_tsl15 = require("three/tsl");
 function displace(p, by) {
-  return (0, import_tsl7.add)(p, by);
+  return (0, import_tsl15.add)(p, by);
 }
 
 // src/primitives/cursor-ripple/cursor-ripple.ts
-var import_tsl10 = require("three/tsl");
+var import_tsl18 = require("three/tsl");
 
 // src/primitives/time/time.ts
-var import_tsl9 = require("three/tsl");
+var import_tsl17 = require("three/tsl");
 
 // src/runtime/reduced-motion/reduced-motion.ts
-var import_tsl8 = require("three/tsl");
+var import_tsl16 = require("three/tsl");
 var state = {
   policy: "auto",
   watchers: /* @__PURE__ */ new Set()
@@ -315,7 +695,7 @@ var globalWatcher = null;
 function getReducedMotionTimeScale() {
   if (globalScaleUniform === null) {
     globalWatcher = createReducedMotionWatcher();
-    globalScaleUniform = (0, import_tsl8.uniform)(globalWatcher.scale());
+    globalScaleUniform = (0, import_tsl16.uniform)(globalWatcher.scale());
     globalWatcher.subscribe((s) => {
       if (globalScaleUniform === null) return;
       globalScaleUniform.value = s;
@@ -325,7 +705,7 @@ function getReducedMotionTimeScale() {
 }
 
 // src/primitives/time/time.ts
-var elapsedTime = import_tsl9.time.mul(getReducedMotionTimeScale());
+var elapsedTime = import_tsl17.time.mul(getReducedMotionTimeScale());
 
 // src/primitives/cursor-ripple/cursor-ripple.ts
 function cursorRipple(p, center, opts = {}) {
@@ -333,18 +713,31 @@ function cursorRipple(p, center, opts = {}) {
   const frequency = opts.frequency ?? 30;
   const speed = opts.speed ?? 6;
   const amplitude = opts.amplitude ?? 0.5;
-  const d = (0, import_tsl10.length)((0, import_tsl10.sub)(p, center));
-  const wave = (0, import_tsl10.sin)(d.mul(frequency).sub(elapsedTime.mul(speed)));
-  const decay = (0, import_tsl10.smoothstep)(reach, 0, d);
+  const d = (0, import_tsl18.length)((0, import_tsl18.sub)(p, center));
+  const wave = (0, import_tsl18.sin)(d.mul(frequency).sub(elapsedTime.mul(speed)));
+  const decay = (0, import_tsl18.smoothstep)(reach, 0, d);
   return wave.mul(amplitude).mul(decay);
 }
 
 // src/primitives/film-grain/film-grain.ts
-var import_tsl11 = require("three/tsl");
+var import_tsl19 = require("three/tsl");
 function filmGrain(intensity, timeOffset = 0) {
-  const pixel = import_tsl11.screenCoordinate.xy.floor();
-  const seed = pixel.x.toUint().mul(1973).add(pixel.y.toUint().mul(9277)).add((0, import_tsl11.mul)(timeOffset, 26699).toUint());
-  return (0, import_tsl11.hash)(seed).sub(0.5).mul(intensity);
+  const pixel = import_tsl19.screenCoordinate.xy.floor();
+  const seed = pixel.x.toUint().mul(1973).add(pixel.y.toUint().mul(9277)).add((0, import_tsl19.mul)(timeOffset, 26699).toUint());
+  return (0, import_tsl19.hash)(seed).sub(0.5).mul(intensity);
+}
+
+// src/primitives/dither/dither.ts
+var import_tsl20 = require("three/tsl");
+function hash21(coord) {
+  return (0, import_tsl20.fract)((0, import_tsl20.sin)((0, import_tsl20.dot)(coord, (0, import_tsl20.vec2)(12.9898, 78.233))).mul(43758.5453));
+}
+function dither(color, coord, amount = 1 / 255) {
+  const pixelCoord = (0, import_tsl20.vec2)(coord);
+  const firstHash = hash21(pixelCoord);
+  const secondHash = hash21(pixelCoord.add((0, import_tsl20.vec2)(0.5, 0.5)));
+  const triangularNoise = firstHash.sub(secondHash).mul(0.5);
+  return (0, import_tsl20.vec3)(color).add(triangularNoise.mul(amount));
 }
 
 // src/runtime/visibility/visibility.ts
@@ -558,15 +951,21 @@ var FrameScheduler = class {
   createVisibilityWatcher,
   cursorRipple,
   displace,
+  dither,
   elapsedTime,
   filmGrain,
   fractalNoise,
   getReducedMotionPolicy,
   getReducedMotionTimeScale,
+  mixColor,
+  oklabToLinearSrgb,
+  oklchToLinearSrgb,
+  parseColorString,
   quantize,
   setReducedMotionPolicy,
   signedDistanceFieldCircle,
   simplexNoise,
+  srgbChannelToLinear,
   voronoi
 });
 //# sourceMappingURL=index.cjs.map