@lovo/matter 0.4.1 → 0.6.0

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,
-  fbm: () => fbm,
+  dither: () => dither,
+  elapsedTime: () => elapsedTime,
   filmGrain: () => filmGrain,
+  fractalNoise: () => fractalNoise,
   getReducedMotionPolicy: () => getReducedMotionPolicy,
   getReducedMotionTimeScale: () => getReducedMotionTimeScale,
-  noise: () => noise,
+  mixColor: () => mixColor,
+  oklabToLinearSrgb: () => oklabToLinearSrgb,
+  oklchToLinearSrgb: () => oklchToLinearSrgb,
+  parseColorString: () => parseColorString,
   quantize: () => quantize,
-  sdfCircle: () => sdfCircle,
   setReducedMotionPolicy: () => setReducedMotionPolicy,
-  time: () => time,
+  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 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,
@@ -100,16 +144,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;
     };
@@ -120,9 +167,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
@@ -151,60 +198,396 @@ 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
+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 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 = (0, import_tsl2.clamp)((0, import_tsl2.div)((0, import_tsl2.sub)(t, prev.position), span), 0, 1);
-    result = (0, import_tsl.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 = (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");
-function noise(p) {
-  return (0, import_tsl3.mx_noise_float)(p);
+var import_tsl11 = require("three/tsl");
+function simplexNoise(p) {
+  return (0, import_tsl11.mx_noise_float)(p);
 }
 
 // src/primitives/fbm/fbm.ts
-var import_tsl4 = require("three/tsl");
-function fbm(p, opts = {}) {
+var import_tsl12 = require("three/tsl");
+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 = (0, import_tsl4.add)((0, import_tsl4.mul)(p, freq), i * 100);
-    const layer = noise(pAtFreq).mul(amp);
+    frequency *= lacunarity;
+    amplitude *= gain;
+    total += amplitude;
+    const pAtFreq = (0, import_tsl12.add)((0, import_tsl12.mul)(p, frequency), i * 100);
+    const layer = simplexNoise(pAtFreq).mul(amplitude);
     sum = sum.add(layer);
   }
   return sum.div(total);
 }
 
 // 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
@@ -212,30 +595,30 @@ 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
-var import_tsl6 = require("three/tsl");
-function sdfCircle(p, radius) {
-  return (0, import_tsl6.length)(p).sub(radius);
+var import_tsl14 = require("three/tsl");
+function signedDistanceFieldCircle(p, 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()
@@ -243,7 +626,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;
@@ -264,8 +647,8 @@ function createReducedMotionWatcher() {
   if (typeof matchMedia !== "function") {
     return {
       scale: () => computeScale(false),
-      subscribe: (cb) => {
-        void cb;
+      subscribe: (listener) => {
+        void listener;
         return () => {
         };
       },
@@ -274,33 +657,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);
     }
   };
@@ -312,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;
@@ -322,7 +705,7 @@ function getReducedMotionTimeScale() {
 }
 
 // src/primitives/time/time.ts
-var time = import_tsl9.time.mul(getReducedMotionTimeScale());
+var elapsedTime = import_tsl17.time.mul(getReducedMotionTimeScale());
 
 // src/primitives/cursor-ripple/cursor-ripple.ts
 function cursorRipple(p, center, opts = {}) {
@@ -330,20 +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(time.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");
-function filmGrain(uvNode, intensity, timeOffset = 0) {
-  const HASH_C1 = (0, import_tsl11.vec2)(2127.1, 81.17);
-  const HASH_C2 = (0, import_tsl11.vec2)(1269.5, 283.37);
-  const base = (0, import_tsl11.vec2)(uvNode.dot(HASH_C1).add(timeOffset), uvNode.dot(HASH_C2).add(timeOffset));
-  const hash = (0, import_tsl11.fract)((0, import_tsl11.sin)(base).mul(43758.5453));
-  return (0, import_tsl11.length)(hash).sub(0.765).mul(intensity);
+var import_tsl19 = require("three/tsl");
+function filmGrain(intensity, timeOffset = 0) {
+  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
@@ -357,21 +751,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();
     }
   };
 }
@@ -387,27 +781,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();
     }
   };
 }
@@ -418,10 +812,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;
@@ -457,19 +860,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. */
@@ -478,6 +901,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;
@@ -520,15 +951,21 @@ var FrameScheduler = class {
   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.cjs.map