@lovo/matter 0.4.1 → 0.6.0

package/dist/index.js

@@ -1,13 +1,51 @@
 // src/runtime/create-renderer/create-renderer.ts
-import { Color } from "three";
+import { Color, Vector2 } from "three";
 import { WebGPURenderer } from "three/webgpu";
+
+// src/runtime/create-renderer/gamut.ts
+import { ColorManagement, SRGBColorSpace } from "three";
+import {
+  DisplayP3ColorSpace,
+  DisplayP3ColorSpaceImpl,
+  LinearDisplayP3ColorSpace,
+  LinearDisplayP3ColorSpaceImpl
+} from "three/examples/jsm/math/ColorSpaces.js";
+ColorManagement.define({
+  [DisplayP3ColorSpace]: DisplayP3ColorSpaceImpl,
+  [LinearDisplayP3ColorSpace]: LinearDisplayP3ColorSpaceImpl
+});
+function gamutToColorSpace(gamut) {
+  return gamut === "p3" ? DisplayP3ColorSpace : 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 WebGPURenderer({
     canvas,
@@ -15,19 +53,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 Color ? clearColor : new Color(clearColor);
   three.setClearColor(resolvedClearColor, clearAlpha);
+  const rendererSize = new Vector2();
   const resize = () => {
-    const w = canvas.clientWidth;
-    const h = canvas.clientHeight;
-    if (canvas.width !== w * three.getPixelRatio() || canvas.height !== h * three.getPixelRatio()) {
-      three.setSize(w, h, false);
+    const canvasWidth = canvas.clientWidth;
+    const canvasHeight = canvas.clientHeight;
+    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,
@@ -56,16 +99,19 @@ var CursorInput = class {
     this.element = element;
     this.handleMouseMove = (e) => {
       if (!(e instanceof MouseEvent)) return;
-      const me = e;
+      const mouseEvent = e;
       if (this.element) {
-        const r = this.element.getBoundingClientRect();
-        const w = r.width || 1;
-        const h = r.height || 1;
-        this.target = [(me.clientX - r.left) / w, (me.clientY - r.top) / h];
+        const elementRect = this.element.getBoundingClientRect();
+        const elementWidth = elementRect.width || 1;
+        const elementHeight = elementRect.height || 1;
+        this.target = [
+          (mouseEvent.clientX - elementRect.left) / elementWidth,
+          (mouseEvent.clientY - elementRect.top) / elementHeight
+        ];
       } else {
-        const w = typeof window !== "undefined" && window.innerWidth || 1;
-        const h = typeof window !== "undefined" && window.innerHeight || 1;
-        this.target = [me.clientX / w, me.clientY / h];
+        const viewportWidth = typeof window !== "undefined" && window.innerWidth || 1;
+        const viewportHeight = typeof window !== "undefined" && window.innerHeight || 1;
+        this.target = [mouseEvent.clientX / viewportWidth, mouseEvent.clientY / viewportHeight];
       }
       this.targetDirty = true;
     };
@@ -76,9 +122,9 @@ var CursorInput = class {
     return this.value;
   }
   /** Subscribe to change events. Returns an unsubscribe function. */
-  on(_event, cb) {
-    this.listeners.add(cb);
-    return () => this.listeners.delete(cb);
+  on(_eventType, changeListener) {
+    this.listeners.add(changeListener);
+    return () => this.listeners.delete(changeListener);
   }
   /**
    * Advance the smoothing one tick. Called by the host scheduler; not
@@ -107,51 +153,387 @@ var CursorInput = class {
     this.listeners.clear();
   }
 };
-var clamp01 = (n) => Math.max(0, Math.min(1, n));
-var lerp = (a, b, t) => a + (b - a) * t;
+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
-import { mix, vec3 } from "three/tsl";
-import { clamp, div, sub } from "three/tsl";
-function colorRamp(t, stops) {
+import { clamp as clamp3, div, sub, vec3 as vec37 } from "three/tsl";
+
+// src/primitives/color-space/hue.ts
+import { mod, sign, step } from "three/tsl";
+var EQUAL_HUE_EPSILON = 1e-6;
+var shortestArcHue = (h1, h2, t, period) => {
+  const half = period / 2;
+  const delta = 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 = mod(h2.sub(h1).add(half), period).sub(half);
+  const delta = short.sub(sign(short).mul(period));
+  return h1.add(delta.mul(t));
+};
+var increasingArcHue = (h1, h2, t, period) => {
+  const delta = mod(h2.sub(h1), period);
+  return h1.add(delta.mul(t));
+};
+var decreasingArcHue = (h1, h2, t, period) => {
+  const up = mod(h2.sub(h1), period);
+  const delta = up.sub(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
+import { abs, clamp, fract, max, min, mix as mix2, step as step3, vec3, vec4 } from "three/tsl";
+
+// src/primitives/color-space/transfer.ts
+import { mix, pow, step as step2 } from "three/tsl";
+function srgbChannelToLinear(channel) {
+  return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+}
+function srgbToLinear(srgb) {
+  const value = pow(srgb, 1);
+  const lowSegment = value.div(12.92);
+  const highSegment = pow(value.add(0.055).div(1.055), 2.4);
+  return mix(lowSegment, highSegment, step2(0.04045, value));
+}
+function linearToSrgb(linear) {
+  const value = pow(linear, 1);
+  const lowSegment = value.mul(12.92);
+  const highSegment = pow(value, 1 / 2.4).mul(1.055).sub(0.055);
+  return mix(lowSegment, highSegment, step2(31308e-7, value));
+}
+
+// src/primitives/color-space/hsl.ts
+var EPSILON = 1e-10;
+function gammaRgbHue(c) {
+  const p = mix2(vec4(c.b, c.g, -1 / 3, 2 / 3), vec4(c.g, c.b, 0, -1 / 3), step3(c.b, c.g));
+  const q = mix2(vec4(p.x, p.y, p.w, c.r), vec4(c.r, p.y, p.z, p.x), step3(p.x, c.r));
+  const chroma = q.x.sub(min(q.w, q.y));
+  return abs(q.z.add(q.w.sub(q.y).div(chroma.mul(6).add(EPSILON))));
+}
+function gammaRgbToHsl(c) {
+  const maxChannel = max(c.r, max(c.g, c.b));
+  const minChannel = min(c.r, min(c.g, c.b));
+  const lightness = maxChannel.add(minChannel).mul(0.5);
+  const chroma = maxChannel.sub(minChannel);
+  const saturation = chroma.div(abs(lightness.mul(2).sub(1)).oneMinus().add(EPSILON));
+  return vec3(gammaRgbHue(c), saturation, lightness);
+}
+function hslToGammaRgb(hsl) {
+  const hue = hsl.x;
+  const saturation = hsl.y;
+  const lightness = hsl.z;
+  const chroma = abs(lightness.mul(2).sub(1)).oneMinus().mul(saturation);
+  const ramp = abs(
+    fract(vec3(hue).add(vec3(1, 2 / 3, 1 / 3))).mul(6).sub(vec3(3))
+  );
+  const hueRgb = clamp(ramp.sub(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(clamp(rgb, 0, 1))),
+  toLinear: (hsl) => srgbToLinear(hslToGammaRgb(hsl)),
+  lerp: (a, b, t, hue) => vec3(hue(a.x, b.x, t, 1), mix2(a.y, b.y, t), mix2(a.z, b.z, t))
+};
+
+// src/primitives/color-space/hsv.ts
+import { abs as abs2, clamp as clamp2, fract as fract2, min as min2, mix as mix3, step as step4, vec3 as vec32, vec4 as vec42 } from "three/tsl";
+var EPSILON2 = 1e-10;
+function gammaRgbToHsv(c) {
+  const p = mix3(vec42(c.b, c.g, -1 / 3, 2 / 3), vec42(c.g, c.b, 0, -1 / 3), step4(c.b, c.g));
+  const q = mix3(vec42(p.x, p.y, p.w, c.r), vec42(c.r, p.y, p.z, p.x), step4(p.x, c.r));
+  const chroma = q.x.sub(min2(q.w, q.y));
+  const hue = abs2(q.z.add(q.w.sub(q.y).div(chroma.mul(6).add(EPSILON2))));
+  const saturation = chroma.div(q.x.add(EPSILON2));
+  return vec32(hue, saturation, q.x);
+}
+function hsvToGammaRgb(hsv) {
+  const hue = hsv.x;
+  const saturation = hsv.y;
+  const value = hsv.z;
+  const ramp = abs2(
+    fract2(vec32(hue).add(vec32(1, 2 / 3, 1 / 3))).mul(6).sub(vec32(3))
+  );
+  return mix3(vec32(1), clamp2(ramp.sub(vec32(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(clamp2(rgb, 0, 1))),
+  toLinear: (hsv) => srgbToLinear(hsvToGammaRgb(hsv)),
+  lerp: (a, b, t, hue) => vec32(hue(a.x, b.x, t, 1), mix3(a.y, b.y, t), mix3(a.z, b.z, t))
+};
+
+// src/primitives/color-space/lch.ts
+import { atan2, cbrt, cos, length, mix as mix4, sin, step as step5, vec2, vec3 as vec33 } from "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 = cbrt(ratio);
+  return mix4(linearPart, cubeRootPart, step5(EPSILON3, ratio));
+}
+function labInverse(f) {
+  const cubed = f.mul(f).mul(f);
+  const linearPart = f.mul(116).sub(16).div(KAPPA);
+  return mix4(linearPart, cubed, step5(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 = length(vec2(greenRed, blueYellow));
+  const hue = atan2(blueYellow, greenRed);
+  return vec33(lightness, chroma, hue);
+}
+function lchToLinear(lch) {
+  const lightness = lch.x;
+  const chroma = lch.y;
+  const hue = lch.z;
+  const greenRed = chroma.mul(cos(hue));
+  const blueYellow = chroma.mul(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 vec33(r, g, b);
+}
+var lchSpace = {
+  fromLinear: linearToLch,
+  toLinear: lchToLinear,
+  lerp: (a, b, t, hue) => vec33(mix4(a.x, b.x, t), mix4(a.y, b.y, t), hue(a.z, b.z, t, TWO_PI))
+};
+
+// src/primitives/color-space/linear.ts
+import { mix as mix5, vec3 as vec34 } from "three/tsl";
+var linearSpace = {
+  fromLinear: (rgb) => vec34(rgb),
+  toLinear: (coords) => vec34(coords),
+  lerp: (a, b, t) => mix5(a, b, t)
+};
+
+// src/primitives/color-space/oklab.ts
+import { cbrt as cbrt2, mix as mix6, vec3 as vec35 } from "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 = cbrt2(longCone);
+  const mediumRoot = cbrt2(mediumCone);
+  const shortRoot = cbrt2(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 vec35(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 vec35(r, g, b);
+}
+var oklabSpace = {
+  fromLinear: linearToOklab,
+  toLinear: oklabToLinear,
+  lerp: (a, b, t) => mix6(a, b, t)
+};
+
+// src/primitives/color-space/oklch.ts
+import { atan2 as atan22, cos as cos2, length as length2, mix as mix7, sin as sin2, vec2 as vec22, vec3 as vec36 } from "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 = length2(vec22(greenRed, blueYellow));
+  const hue = atan22(blueYellow, greenRed);
+  return vec36(lightness, chroma, hue);
+}
+function oklchToLinear(lch) {
+  const lightness = lch.x;
+  const chroma = lch.y;
+  const hue = lch.z;
+  const greenRed = chroma.mul(cos2(hue));
+  const blueYellow = chroma.mul(sin2(hue));
+  return oklabToLinear(vec36(lightness, greenRed, blueYellow));
+}
+var oklchSpace = {
+  fromLinear: linearToOklch,
+  toLinear: oklchToLinear,
+  lerp: (a, b, t, hue) => vec36(mix7(a.x, b.x, t), mix7(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 vec3(0, 0, 0);
-  if (stops.length === 1) return mix(first.color, first.color, 0);
-  let result = mix(first.color, first.color, 0);
+  if (first === void 0) return vec37(0, 0, 0);
+  const firstCoords = space.fromLinear(vec37(first.color));
+  if (stops.length === 1) return space.toLinear(firstCoords);
+  let resultCoords = firstCoords;
   for (let i = 1; i < stops.length; i += 1) {
-    const prev = stops[i - 1];
+    const previousStop = stops[i - 1];
     const next = stops[i];
-    if (prev === void 0 || next === void 0) continue;
-    const span = next.position - prev.position;
-    if (span <= 0) continue;
-    const localT = clamp(div(sub(t, prev.position), span), 0, 1);
-    result = mix(result, next.color, localT);
+    if (previousStop === void 0 || next === void 0) continue;
+    const positionSpan = next.position - previousStop.position;
+    if (positionSpan <= 0) continue;
+    const localT = clamp3(div(sub(t, previousStop.position), positionSpan), 0, 1);
+    const nextCoords = space.fromLinear(vec37(next.color));
+    resultCoords = space.lerp(resultCoords, nextCoords, localT, hue);
+  }
+  return space.toLinear(resultCoords);
+}
+
+// src/primitives/color-space/mix-color.ts
+import { vec3 as vec38 } from "three/tsl";
+function mixColor(colorA, colorB, t, colorSpace = "oklab", hueInterpolation = "shorter") {
+  const space = colorSpaces[colorSpace];
+  const hue = hueArcInterpolators[hueInterpolation];
+  const a = space.fromLinear(vec38(colorA));
+  const b = space.fromLinear(vec38(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 result;
+  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
 import { mx_noise_float } from "three/tsl";
-function noise(p) {
+function simplexNoise(p) {
   return mx_noise_float(p);
 }
 
 // src/primitives/fbm/fbm.ts
 import { add, mul } from "three/tsl";
-function fbm(p, opts = {}) {
+function fractalNoise(p, opts = {}) {
   const octaves = opts.octaves ?? 4;
   const lacunarity = opts.lacunarity ?? 2;
   const gain = opts.gain ?? 0.5;
-  let sum = noise(p);
-  let amp = 1;
-  let freq = 1;
-  let total = amp;
+  let sum = simplexNoise(p);
+  let amplitude = 1;
+  let frequency = 1;
+  let total = amplitude;
   for (let i = 1; i < octaves; i += 1) {
-    freq *= lacunarity;
-    amp *= gain;
-    total += amp;
-    const pAtFreq = add(mul(p, freq), i * 100);
-    const layer = noise(pAtFreq).mul(amp);
+    frequency *= lacunarity;
+    amplitude *= gain;
+    total += amplitude;
+    const pAtFreq = add(mul(p, frequency), i * 100);
+    const layer = simplexNoise(pAtFreq).mul(amplitude);
     sum = sum.add(layer);
   }
   return sum.div(total);
@@ -168,14 +550,14 @@ function quantize(t, steps) {
   if (steps <= 1) {
     return t.mul(0);
   }
-  const denom = steps - 1;
-  return t.mul(denom).add(0.5).floor().div(denom);
+  const denominator = steps - 1;
+  return t.mul(denominator).add(0.5).floor().div(denominator);
 }
 
 // src/primitives/sdf-circle/sdf-circle.ts
-import { length } from "three/tsl";
-function sdfCircle(p, radius) {
-  return length(p).sub(radius);
+import { length as length3 } from "three/tsl";
+function signedDistanceFieldCircle(p, radius) {
+  return length3(p).sub(radius);
 }
 
 // src/primitives/displace/displace.ts
@@ -185,7 +567,7 @@ function displace(p, by) {
 }
 
 // src/primitives/cursor-ripple/cursor-ripple.ts
-import { length as length2, sin, smoothstep, sub as sub2 } from "three/tsl";
+import { length as length4, sin as sin3, smoothstep, sub as sub2 } from "three/tsl";
 
 // src/primitives/time/time.ts
 import { time as _builtinTime } from "three/tsl";
@@ -199,7 +581,7 @@ var state = {
 function setReducedMotionPolicy(policy) {
   if (state.policy === policy) return;
   state.policy = policy;
-  for (const w of state.watchers) w.recompute();
+  for (const watcher of state.watchers) watcher.recompute();
 }
 function getReducedMotionPolicy() {
   return state.policy;
@@ -220,8 +602,8 @@ function createReducedMotionWatcher() {
   if (typeof matchMedia !== "function") {
     return {
       scale: () => computeScale(false),
-      subscribe: (cb) => {
-        void cb;
+      subscribe: (listener) => {
+        void listener;
         return () => {
         };
       },
@@ -230,33 +612,33 @@ function createReducedMotionWatcher() {
       }
     };
   }
-  const mql = matchMedia("(prefers-reduced-motion: reduce)");
-  const subs = /* @__PURE__ */ new Set();
-  let last = computeScale(mql.matches);
+  const mediaQueryList = matchMedia("(prefers-reduced-motion: reduce)");
+  const subscriptions = /* @__PURE__ */ new Set();
+  let lastComputedScale = computeScale(mediaQueryList.matches);
   const onChange = () => {
-    const next = computeScale(mql.matches);
-    if (next !== last) {
-      last = next;
-      for (const cb of subs) cb(next);
+    const next = computeScale(mediaQueryList.matches);
+    if (next !== lastComputedScale) {
+      lastComputedScale = next;
+      for (const listener of subscriptions) listener(next);
     }
   };
-  mql.addEventListener("change", onChange);
+  mediaQueryList.addEventListener("change", onChange);
   const watcher = {
-    scale: () => last,
-    subscribe(cb) {
-      subs.add(cb);
-      return () => subs.delete(cb);
+    scale: () => lastComputedScale,
+    subscribe(listener) {
+      subscriptions.add(listener);
+      return () => subscriptions.delete(listener);
     },
     recompute() {
-      const next = computeScale(mql.matches);
-      if (next !== last) {
-        last = next;
-        for (const cb of subs) cb(next);
+      const next = computeScale(mediaQueryList.matches);
+      if (next !== lastComputedScale) {
+        lastComputedScale = next;
+        for (const listener of subscriptions) listener(next);
       }
     },
     dispose() {
-      mql.removeEventListener("change", onChange);
-      subs.clear();
+      mediaQueryList.removeEventListener("change", onChange);
+      subscriptions.clear();
       state.watchers.delete(watcher);
     }
   };
@@ -278,7 +660,7 @@ function getReducedMotionTimeScale() {
 }
 
 // src/primitives/time/time.ts
-var time = _builtinTime.mul(getReducedMotionTimeScale());
+var elapsedTime = _builtinTime.mul(getReducedMotionTimeScale());
 
 // src/primitives/cursor-ripple/cursor-ripple.ts
 function cursorRipple(p, center, opts = {}) {
@@ -286,20 +668,31 @@ function cursorRipple(p, center, opts = {}) {
   const frequency = opts.frequency ?? 30;
   const speed = opts.speed ?? 6;
   const amplitude = opts.amplitude ?? 0.5;
-  const d = length2(sub2(p, center));
-  const wave = sin(d.mul(frequency).sub(time.mul(speed)));
+  const d = length4(sub2(p, center));
+  const wave = sin3(d.mul(frequency).sub(elapsedTime.mul(speed)));
   const decay = smoothstep(reach, 0, d);
   return wave.mul(amplitude).mul(decay);
 }
 
 // src/primitives/film-grain/film-grain.ts
-import { fract, length as length3, sin as sin2, vec2 } from "three/tsl";
-function filmGrain(uvNode, intensity, timeOffset = 0) {
-  const HASH_C1 = vec2(2127.1, 81.17);
-  const HASH_C2 = vec2(1269.5, 283.37);
-  const base = vec2(uvNode.dot(HASH_C1).add(timeOffset), uvNode.dot(HASH_C2).add(timeOffset));
-  const hash = fract(sin2(base).mul(43758.5453));
-  return length3(hash).sub(0.765).mul(intensity);
+import { hash, mul as mul2, screenCoordinate } from "three/tsl";
+function filmGrain(intensity, timeOffset = 0) {
+  const pixel = screenCoordinate.xy.floor();
+  const seed = pixel.x.toUint().mul(1973).add(pixel.y.toUint().mul(9277)).add(mul2(timeOffset, 26699).toUint());
+  return hash(seed).sub(0.5).mul(intensity);
+}
+
+// src/primitives/dither/dither.ts
+import { dot, fract as fract3, sin as sin4, vec2 as vec23, vec3 as vec39 } from "three/tsl";
+function hash21(coord) {
+  return fract3(sin4(dot(coord, vec23(12.9898, 78.233))).mul(43758.5453));
+}
+function dither(color, coord, amount = 1 / 255) {
+  const pixelCoord = vec23(coord);
+  const firstHash = hash21(pixelCoord);
+  const secondHash = hash21(pixelCoord.add(vec23(0.5, 0.5)));
+  const triangularNoise = firstHash.sub(secondHash).mul(0.5);
+  return vec39(color).add(triangularNoise.mul(amount));
 }
 
 // src/runtime/visibility/visibility.ts
@@ -313,21 +706,21 @@ function createVisibilityWatcher() {
       }
     };
   }
-  const subs = /* @__PURE__ */ new Set();
+  const subscriptions = /* @__PURE__ */ new Set();
   const onChange = () => {
-    const v = document.visibilityState === "visible";
-    for (const cb of subs) cb(v);
+    const isVisible = document.visibilityState === "visible";
+    for (const listener of subscriptions) listener(isVisible);
   };
   document.addEventListener("visibilitychange", onChange);
   return {
     isVisible: () => document.visibilityState === "visible",
-    subscribe(cb) {
-      subs.add(cb);
-      return () => subs.delete(cb);
+    subscribe(listener) {
+      subscriptions.add(listener);
+      return () => subscriptions.delete(listener);
     },
     dispose() {
       document.removeEventListener("visibilitychange", onChange);
-      subs.clear();
+      subscriptions.clear();
     }
   };
 }
@@ -343,27 +736,27 @@ function createIntersectionWatcher(canvas) {
       }
     };
   }
-  const subs = /* @__PURE__ */ new Set();
+  const subscriptions = /* @__PURE__ */ new Set();
   let inView = true;
-  const obs = new IntersectionObserver(
+  const observer = new IntersectionObserver(
     (entries) => {
-      const next = entries.some((e) => e.isIntersecting);
+      const next = entries.some((entry) => entry.isIntersecting);
       if (next === inView) return;
       inView = next;
-      for (const cb of subs) cb(inView);
+      for (const listener of subscriptions) listener(inView);
     },
     { threshold: 0 }
   );
-  obs.observe(canvas);
+  observer.observe(canvas);
   return {
     isInView: () => inView,
-    subscribe(cb) {
-      subs.add(cb);
-      return () => subs.delete(cb);
+    subscribe(listener) {
+      subscriptions.add(listener);
+      return () => subscriptions.delete(listener);
     },
     dispose() {
-      obs.disconnect();
-      subs.clear();
+      observer.disconnect();
+      subscriptions.clear();
     }
   };
 }
@@ -374,10 +767,19 @@ var FrameScheduler = class {
   rafId = null;
   running = false;
   paused = false;
-  idle = false;
   flushPending = false;
   startedAt = 0;
   lastTickAt = 0;
+  // Reference-counted idle voting. The scheduler is idle only when at least
+  // one component has voted idle AND no component has voted animated. This
+  // prevents a static component (e.g. LinearGradient speed=0) from halting
+  // the loop while an animated overlay (e.g. FilmGrain) is still running.
+  idleVotes = 0;
+  animatedVotes = 0;
+  /** True when all participating components prefer idle and none need animation. */
+  get idle() {
+    return this.idleVotes > 0 && this.animatedVotes === 0;
+  }
   /** Activate the scheduler. The rAF loop starts on the first client added. */
   start() {
     this.running = true;
@@ -413,19 +815,39 @@ var FrameScheduler = class {
     this.clients.clear();
   }
   /**
-   * Mark the scheduler idle. The next tick still fires (a final flush so
-   * uniform changes that triggered the idle state are rendered), then the
-   * rAF loop halts. Use `requestRender()` or `setIdle(false)` to wake.
+   * Cast a vote on whether the scheduler should be idle.
+   *
+   * `setIdle(true)` increments the idle-vote count; the returned cleanup
+   * decrements it. `setIdle(false)` increments the animated-vote count;
+   * its cleanup decrements that. The scheduler halts (after one flush tick)
+   * only when `idleVotes > 0 && animatedVotes === 0`.
+   *
+   * Callers are responsible for calling the returned cleanup on unmount.
+   * Use `requestRender()` or cast a `setIdle(false)` vote to wake the loop
+   * without permanently registering an animated preference.
    */
   setIdle(idle) {
-    if (this.idle === idle) return;
-    this.idle = idle;
     if (idle) {
-      this.flushPending = true;
-      this.maybeQueue();
+      const wasIdle = this.idle;
+      this.idleVotes += 1;
+      const nowIdle = this.idle;
+      if (!wasIdle && nowIdle) this.onBecameIdle();
+      return () => {
+        const prevIdle = this.idle;
+        this.idleVotes = Math.max(0, this.idleVotes - 1);
+        const afterIdle = this.idle;
+        if (prevIdle && !afterIdle) this.onBecameAnimated();
+      };
     } else {
-      this.flushPending = false;
-      this.maybeQueue();
+      const wasIdle = this.idle;
+      this.animatedVotes += 1;
+      if (wasIdle) this.onBecameAnimated();
+      return () => {
+        const prevIdle = this.idle;
+        this.animatedVotes = Math.max(0, this.animatedVotes - 1);
+        const nowIdle = this.idle;
+        if (!prevIdle && nowIdle) this.onBecameIdle();
+      };
     }
   }
   /** Force a single tick while idle. Useful for prop-change invalidation. */
@@ -434,6 +856,14 @@ var FrameScheduler = class {
     this.flushPending = true;
     this.maybeQueue();
   }
+  onBecameIdle() {
+    this.flushPending = true;
+    this.maybeQueue();
+  }
+  onBecameAnimated() {
+    this.flushPending = false;
+    this.maybeQueue();
+  }
   maybeQueue() {
     if (this.rafId !== null) return;
     if (!this.running) return;
@@ -475,15 +905,21 @@ export {
   createVisibilityWatcher,
   cursorRipple,
   displace,
-  fbm,
+  dither,
+  elapsedTime,
   filmGrain,
+  fractalNoise,
   getReducedMotionPolicy,
   getReducedMotionTimeScale,
-  noise,
+  mixColor,
+  oklabToLinearSrgb,
+  oklchToLinearSrgb,
+  parseColorString,
   quantize,
-  sdfCircle,
   setReducedMotionPolicy,
-  time,
+  signedDistanceFieldCircle,
+  simplexNoise,
+  srgbChannelToLinear,
   voronoi
 };
 //# sourceMappingURL=index.js.map