@hema-to/regl-scatterplot 1.14.1 → 1.16.0-hemato.0

package/dist/regl-scatterplot.esm.js

@@ -1,90 +1,93 @@
 import createPubSub from 'pub-sub-es';
 import createOriginalRegl from 'regl';
 
-// @flekschas/utils v0.32.2 Copyright 2023 Fritz Lekschas
 /* eslint no-param-reassign:0 */
-
 /**
  * Cubic in easing function
- * @param {number} t - The input time to be eased. Must be in [0, 1] where `0`
+ * @param t - The input time to be eased. Must be in [0, 1] where `0`
  *   refers to the start and `1` to the end
- * @return {number} The eased time
+ * @return The eased time
  */
 const cubicIn = (t) => t * t * t;
-
 /**
  * Cubic in and out easing function
- * @param {number} t - The input time to be eased. Must be in [0, 1] where `0`
+ * @param t - The input time to be eased. Must be in [0, 1] where `0`
  *   refers to the start and `1` to the end
- * @return {number} The eased time
+ * @return The eased time
  */
-const cubicInOut = (t) =>
-  t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
-
+const cubicInOut = (t) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
 /**
  * Cubic out easing function
- * @param {number} t - The input time to be eased. Must be in [0, 1] where `0`
+ * @param t - The input time to be eased. Must be in [0, 1] where `0`
  *   refers to the start and `1` to the end
- * @return {number} The eased time
+ * @return The eased time
  */
 const cubicOut = (t) => --t * t * t + 1;
-
 /**
  * Linear easing function
- * @param {number} t - The input time to be eased. Must be in [0, 1] where `0`
+ * @param t - The input time to be eased. Must be in [0, 1] where `0`
  *   refers to the start and `1` to the end
- * @return {number} Same as the input
+ * @return Same as the input
  */
 const linear = (t) => t;
-
 /**
  * Quadratic in easing function
- * @param {number} t - The input time to be eased. Must be in [0, 1] where `0`
+ * @param t - The input time to be eased. Must be in [0, 1] where `0`
  *   refers to the start and `1` to the end
- * @return {number} The eased time
+ * @return The eased time
  */
 const quadIn = (t) => t * t;
-
 /**
  * Quadratic in and out easing function
- * @param {number} t - The input time to be eased. Must be in [0, 1] where `0`
+ * @param t - The input time to be eased. Must be in [0, 1] where `0`
  *   refers to the start and `1` to the end
- * @return {number} The eased time
+ * @return The eased time
  */
-const quadInOut = (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t);
-
+const quadInOut = (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
 /**
  * Quadratic out easing function
- * @param {number} t - The input time to be eased. Must be in [0, 1] where `0`
+ * @param t - The input time to be eased. Must be in [0, 1] where `0`
  *   refers to the start and `1` to the end
- * @return {number} The eased time
+ * @return The eased time
  */
 const quadOut = (t) => t * (2 - t);
 
+/**
+ * Restrict value to be within [min, max]
+ * @description About 18% faster than `Math.max(min, Math.min(max, value))`
+ * @param value - Value to be clamped
+ * @param min - Min value
+ * @param max - Max value
+ * @return Clamped value
+ */
 /**
  * Identity function
- * @type {<T>(x: T) => T}
- * @param {*} x - Any kind of value
- * @return {*} `x`
+ * @param x - Any kind of value
+ * @return `x`
  */
 const identity = (x) => x;
 
 /**
  * Check if two arrays contain the same elements
- * @type {<T>(a: T[], b: T[]) => Boolean}
- * @param {array} a - First array
- * @param {array} b - Second array
- * @return {boolean} If `true` the two arrays contain the same elements
+ * @param a - First array
+ * @param b - Second array
+ * @return If `true` the two arrays contain the same elements
  */
 const hasSameElements = (a, b) => {
-  if (a === b) return true;
-  if (a.length !== b.length) return false;
-  const aSet = new Set(a);
-  const bSet = new Set(b);
-  // Since the arrays could contain duplicates, we have to check the set length
-  // as well
-  if (aSet.size !== bSet.size) return false;
-  return b.every((element) => aSet.has(element));
+    if (a === b) {
+        return true;
+    }
+    if (a.length !== b.length) {
+        return false;
+    }
+    const aSet = new Set(a);
+    const bSet = new Set(b);
+    // Since the arrays could contain duplicates, we have to check the set length
+    // as well
+    if (aSet.size !== bSet.size) {
+        return false;
+    }
+    return b.every((element) => aSet.has(element));
 };
 
 /**
@@ -93,11 +96,10 @@ const hasSameElements = (a, b) => {
  * @description
  * This is identical but much faster than `Math.hypot(...v)`
  *
- * @param {number[]} v - Numerical vector
- * @return {number} L2 norm
+ * @param v - Numerical vector
+ * @return L2 norm
  */
 const l2Norm = (v) => Math.sqrt(v.reduce((sum, x) => sum + x ** 2, 0));
-
 /**
  * Get the maximum number of a vector while ignoring NaNs
  *
@@ -105,164 +107,158 @@ const l2Norm = (v) => Math.sqrt(v.reduce((sum, x) => sum + x ** 2, 0));
  * This version is muuuch faster than `Math.max(...v)` and supports vectors
  * longer than 256^2, which is a limitation of `Math.max.apply(null, v)`.
  *
- * @param {number[]} v - Numerical vector
- * @return {number} The largest number
+ * @param v - Numerical vector
+ * @return The largest number
  */
-const max$1 = (v) =>
-  v.reduce((_max, a) => (a > _max ? a : _max), -Infinity);
-
+const max$1 = (v) => v.reduce((_max, a) => (a > _max ? a : _max), Number.NEGATIVE_INFINITY);
 /**
  * Initialize an array of a certain length using a mapping function
  *
  * @description
  * This is equivalent to `Array.from({ length }, mapFn)` but about 60% faster
  *
- * @param {number} length - Size of the array
- * @param {function} mapFn - Mapping function
- * @return {array} Initialized array
- * @type {<T = number>(length: number, mapFn: (i: number, length: number) => T) => T[]}
+ * @param length - Size of the array
+ * @param mapFn - Mapping function
+ * @return Initialized array
  */
-const rangeMap = (length, mapFn = (x) => x) => {
-  const out = [];
-  for (let i = 0; i < length; i++) {
-    out.push(mapFn(i, length));
-  }
-  return out;
+const rangeMap = (length, mapFn = identity) => {
+    const out = [];
+    for (let i = 0; i < length; i++) {
+        out.push(mapFn(i, length));
+    }
+    return out;
 };
-
 /**
  * Get the unique union of two vectors of integers
- * @param {number[]} v - First vector of integers
- * @param {number[]} w - Second vector of integers
- * @return {number[]} Unique union of `v` and `w`
+ * @param v - First vector of integers
+ * @param w - Second vector of integers
+ * @return Unique union of `v` and `w`
  */
 const unionIntegers = (v, w) => {
-  const a = [];
-  v.forEach((x) => {
-    a[x] = true;
-  });
-  w.forEach((x) => {
-    a[x] = true;
-  });
-  return a.reduce((union, value, i) => {
-    if (value) union.push(i);
-    return union;
-  }, []);
+    const a = [];
+    v.forEach((x) => {
+        a[x] = true;
+    });
+    w.forEach((x) => {
+        a[x] = true;
+    });
+    return a.reduce((union, value, i) => {
+        if (value)
+            union.push(i);
+        return union;
+    }, []);
 };
 
 /**
  * Assign properties, constructors, etc. to an object
  *
- * @param {object} target - The target object that gets `sources` assigned to it
- * @param {}
- * @return {object}
+ * @param target - The target object that gets `sources` assigned to it
+ * @param sources - The sources to be assigned to the target object
+ * @return An object representing the union of the target and sources objects
  */
 const assign = (target, ...sources) => {
-  sources.forEach((source) => {
-    // eslint-disable-next-line no-shadow
-    const descriptors = Object.keys(source).reduce((descriptors, key) => {
-      descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
-      return descriptors;
-    }, {});
-
-    // By default, Object.assign copies enumerable Symbols, too
-    Object.getOwnPropertySymbols(source).forEach((symbol) => {
-      const descriptor = Object.getOwnPropertyDescriptor(source, symbol);
-      if (descriptor.enumerable) {
-        descriptors[symbol] = descriptor;
-      }
+    sources.forEach((source) => {
+        // eslint-disable-next-line no-shadow
+        const descriptors = Object.keys(source).reduce((descriptors, key) => {
+            descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
+            return descriptors;
+        }, {});
+        // By default, Object.assign copies enumerable Symbols, too
+        Object.getOwnPropertySymbols(source).forEach((symbol) => {
+            const descriptor = Object.getOwnPropertyDescriptor(source, symbol);
+            if (descriptor?.enumerable) {
+                descriptors[symbol] = descriptor;
+            }
+        });
+        Object.defineProperties(target, descriptors);
     });
-    Object.defineProperties(target, descriptors);
-  });
-  return target;
+    return target;
 };
 
 /**
  * Convenience function to compose functions
- * @param {...function} fns - Array of functions
- * @return {function} The composed function
+ * @param fns - Array of functions
+ * @return The composed function
  */
-const pipe =
-  (...fns) =>
-  /**
-   * @param {*} x - Some value
-   * @return {*} Output of the composed function
-   */
-  (x) =>
-    fns.reduce((y, f) => f(y), x);
-
+function pipe(...fns) {
+    return (x) => fns.reduce((y, f) => f(y), x);
+}
 /**
  * Assign a constructor to the object
- * @param {function} constructor - Constructor functions
+ * @param constructorFn - Constructor functions
  */
-const withConstructor = (constructor) => (self) =>
-  assign(
-    {
-      __proto__: {
-        constructor,
-      },
+const withConstructor = (constructorFn) => (self) => assign({
+    __proto__: {
+        constructor: constructorFn,
     },
-    self
-  );
-
+}, self);
 /**
  * Assign a static property to an object
- * @param {string} name - Name of the property
- * @param {*} value - Static value
+ * @param name - Name of the property
+ * @param value - Static value
  */
-const withStaticProperty = (name, value) => (self) =>
-  assign(self, {
+const withStaticProperty = (name, value) => (self) => assign(self, {
     get [name]() {
-      return value;
+        return value;
     },
-  });
+});
 
+/**
+ * L distance between a pair of vectors
+ *
+ * @description
+ * Identical but much faster than `lDist(l)([fromX, fromY], [toX, toY])`
+ *
+ * @param l - Defines the Lp space
+ */
 /**
  * L2 distance between a pair of points
  *
  * @description
  * Identical but much faster than `l2Dist([fromX, fromY], [toX, toY])`
  *
- * @param {number} fromX - X coordinate of the first point
- * @param {number} fromY - Y coordinate of the first point
- * @param {number} toX - X coordinate of the second point
- * @param {number} toY - Y coordinate of the first point
- * @return {number} L2 distance
+ * @paramfromX - X coordinate of the first point
+ * @paramfromY - Y coordinate of the first point
+ * @paramtoX - X coordinate of the second point
+ * @paramtoY - Y coordinate of the first point
+ * @returnL2 distance
  */
-const l2PointDist = (fromX, fromY, toX, toY) =>
-  Math.sqrt((fromX - toX) ** 2 + (fromY - toY) ** 2);
+const l2PointDist = (fromX, fromY, toX, toY) => Math.sqrt((fromX - toX) ** 2 + (fromY - toY) ** 2);
 
 /**
  * Create a worker from a function
- * @param {function} fn - Function to be turned into a worker
- * @return {Worker} Worker function
+ * @param fn - Function to be turned into a worker
+ * @return Worker function
  */
-const createWorker$1 = (fn) =>
-  new Worker(
-    window.URL.createObjectURL(
-      new Blob([`(${fn.toString()})()`], { type: 'text/javascript' })
-    )
-  );
+const createWorker$1 = (fn) => new Worker(window.URL.createObjectURL(new Blob([`(${fn.toString()})()`], { type: "text/javascript" })));
 
+/**
+ * Debounce a function call.
+ *
+ * @description
+ * Function calls are delayed by `wait` milliseconds and only one out of
+ * multiple function calls is executed.
+ *
+ * @param fn - Function to be debounced
+ * @param wait - Number of milliseconds to debounce the function call.
+ * @return Debounced function
+ */
 /**
  * Get a promise that resolves after the next `n` animation frames
- * @param {number} n - Number of animation frames to wait
- * @return {Promise} A promise that resolves after the next `n` animation frames
+ * @param n - Number of animation frames to wait
+ * @return A promise that resolves after the next `n` animation frames
  */
-const nextAnimationFrame = (n = 1) =>
-  new Promise((resolve) => {
+const nextAnimationFrame = (n = 1) => new Promise((resolve) => {
     let i = 0;
-
-    const raf = () =>
-      requestAnimationFrame(() => {
+    const raf = () => requestAnimationFrame(() => {
         i++;
-        if (i < n) raf();
-        else resolve();
-      });
-
+        if (i < n)
+            raf();
+        else
+            resolve(undefined);
+    });
     raf();
-  });
-
+});
 /**
  * Throttle and debounce a function call
  *
@@ -285,83 +281,64 @@ const nextAnimationFrame = (n = 1) =>
  * 6. No call           => nothing
  * 7. No call           => f(args5) called due to debouncing
  *
- * @param {functon} fn - Function to be throttled and debounced
- * @param {number} throttleTime - Throttle intevals in milliseconds
- * @param {number} debounceTime - Debounce wait time in milliseconds. By default
- *   this is the same as `throttleTime`.
- * @return {function} - Throttled and debounced function
+ * @param fn - Function to be throttled and debounced
+ * @param throttleTime - Throttle intevals in milliseconds
+ * @param debounceTime - Debounce wait time in milliseconds. By default this is
+ *   the same as `throttleTime`.
+ * @return Throttled and debounced function
  */
-const throttleAndDebounce = (fn, throttleTime, debounceTime = null) => {
-  let timeout;
-  let blockedCalls = 0;
-
-  // eslint-disable-next-line no-param-reassign
-  debounceTime = debounceTime === null ? throttleTime : debounceTime;
-
-  const debounced = (...args) => {
-    const later = () => {
-      // Since we throttle and debounce we should check whether there were
-      // actually multiple attempts to call this function after the most recent
-      // throttled call. If there were no more calls we don't have to call
-      // the function again.
-      if (blockedCalls > 0) {
-        fn(...args);
-        blockedCalls = 0;
-      }
+const throttleAndDebounce = (fn, throttleTime, debounceTime) => {
+    let timeout;
+    let blockedCalls = 0;
+    debounceTime = debounceTime === null ? throttleTime : debounceTime;
+    const debounced = (...args) => {
+        const later = () => {
+            // Since we throttle and debounce we should check whether there were
+            // actually multiple attempts to call this function after the most recent
+            // throttled call. If there were no more calls we don't have to call
+            // the function again.
+            if (blockedCalls > 0) {
+                fn(...args);
+                blockedCalls = 0;
+            }
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, debounceTime);
     };
-
-    clearTimeout(timeout);
-    timeout = setTimeout(later, debounceTime);
-  };
-
-  let isWaiting = false;
-  const throttledAndDebounced = (...args) => {
-    if (!isWaiting) {
-      fn(...args);
-      debounced(...args);
-
-      isWaiting = true;
-      blockedCalls = 0;
-
-      setTimeout(() => {
+    let isWaiting = false;
+    const throttledAndDebounced = (...args) => {
+        if (isWaiting) {
+            blockedCalls++;
+            debounced(...args);
+        }
+        else {
+            fn(...args);
+            debounced(...args);
+            isWaiting = true;
+            blockedCalls = 0;
+            setTimeout(() => {
+                isWaiting = false;
+            }, throttleTime);
+        }
+    };
+    throttledAndDebounced.reset = () => {
         isWaiting = false;
-      }, throttleTime);
-    } else {
-      blockedCalls++;
-      debounced(...args);
-    }
-  };
-
-  throttledAndDebounced.reset = () => {
-    isWaiting = false;
-  };
-
-  throttledAndDebounced.cancel = () => {
-    clearTimeout(timeout);
-  };
-
-  throttledAndDebounced.now = (...args) => fn(...args);
-
-  return throttledAndDebounced;
+    };
+    throttledAndDebounced.cancel = () => {
+        clearTimeout(timeout);
+    };
+    throttledAndDebounced.now = (...args) => fn(...args);
+    return throttledAndDebounced;
 };
 
 /**
  * Common utilities
  * @module glMatrix
  */
+
 // Configuration Constants
 var EPSILON = 0.000001;
-var ARRAY_TYPE = typeof Float32Array !== 'undefined' ? Float32Array : Array;
-if (!Math.hypot) Math.hypot = function () {
-  var y = 0,
-      i = arguments.length;
-
-  while (i--) {
-    y += arguments[i] * arguments[i];
-  }
-
-  return Math.sqrt(y);
-};
+var ARRAY_TYPE = typeof Float32Array !== "undefined" ? Float32Array : Array;
 
 /**
  * 4x4 Matrix<br>Format: column-major, when typed out it looks like row-major<br>The matrices are being post multiplied.
@@ -373,10 +350,8 @@ if (!Math.hypot) Math.hypot = function () {
  *
  * @returns {mat4} a new 4x4 matrix
  */
-
 function create$2() {
   var out = new ARRAY_TYPE(16);
-
   if (ARRAY_TYPE != Float32Array) {
     out[1] = 0;
     out[2] = 0;
@@ -391,20 +366,19 @@ function create$2() {
     out[13] = 0;
     out[14] = 0;
   }
-
   out[0] = 1;
   out[5] = 1;
   out[10] = 1;
   out[15] = 1;
   return out;
 }
+
 /**
  * Creates a new mat4 initialized with values from an existing matrix
  *
  * @param {ReadonlyMat4} a matrix to clone
  * @returns {mat4} a new 4x4 matrix
  */
-
 function clone(a) {
   var out = new ARRAY_TYPE(16);
   out[0] = a[0];
@@ -425,31 +399,31 @@ function clone(a) {
   out[15] = a[15];
   return out;
 }
+
 /**
  * Inverts a mat4
  *
  * @param {mat4} out the receiving matrix
  * @param {ReadonlyMat4} a the source matrix
- * @returns {mat4} out
+ * @returns {mat4 | null} out, or null if source matrix is not invertible
  */
-
 function invert(out, a) {
   var a00 = a[0],
-      a01 = a[1],
-      a02 = a[2],
-      a03 = a[3];
+    a01 = a[1],
+    a02 = a[2],
+    a03 = a[3];
   var a10 = a[4],
-      a11 = a[5],
-      a12 = a[6],
-      a13 = a[7];
+    a11 = a[5],
+    a12 = a[6],
+    a13 = a[7];
   var a20 = a[8],
-      a21 = a[9],
-      a22 = a[10],
-      a23 = a[11];
+    a21 = a[9],
+    a22 = a[10],
+    a23 = a[11];
   var a30 = a[12],
-      a31 = a[13],
-      a32 = a[14],
-      a33 = a[15];
+    a31 = a[13],
+    a32 = a[14],
+    a33 = a[15];
   var b00 = a00 * a11 - a01 * a10;
   var b01 = a00 * a12 - a02 * a10;
   var b02 = a00 * a13 - a03 * a10;
@@ -461,14 +435,13 @@ function invert(out, a) {
   var b08 = a20 * a33 - a23 * a30;
   var b09 = a21 * a32 - a22 * a31;
   var b10 = a21 * a33 - a23 * a31;
-  var b11 = a22 * a33 - a23 * a32; // Calculate the determinant
+  var b11 = a22 * a33 - a23 * a32;
 
+  // Calculate the determinant
   var det = b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06;
-
   if (!det) {
     return null;
   }
-
   det = 1.0 / det;
   out[0] = (a11 * b11 - a12 * b10 + a13 * b09) * det;
   out[1] = (a02 * b10 - a01 * b11 - a03 * b09) * det;
@@ -488,6 +461,7 @@ function invert(out, a) {
   out[15] = (a20 * b03 - a21 * b01 + a22 * b00) * det;
   return out;
 }
+
 /**
  * Multiplies two mat4s
  *
@@ -496,29 +470,29 @@ function invert(out, a) {
  * @param {ReadonlyMat4} b the second operand
  * @returns {mat4} out
  */
-
 function multiply(out, a, b) {
   var a00 = a[0],
-      a01 = a[1],
-      a02 = a[2],
-      a03 = a[3];
+    a01 = a[1],
+    a02 = a[2],
+    a03 = a[3];
   var a10 = a[4],
-      a11 = a[5],
-      a12 = a[6],
-      a13 = a[7];
+    a11 = a[5],
+    a12 = a[6],
+    a13 = a[7];
   var a20 = a[8],
-      a21 = a[9],
-      a22 = a[10],
-      a23 = a[11];
+    a21 = a[9],
+    a22 = a[10],
+    a23 = a[11];
   var a30 = a[12],
-      a31 = a[13],
-      a32 = a[14],
-      a33 = a[15]; // Cache only the current line of the second matrix
+    a31 = a[13],
+    a32 = a[14],
+    a33 = a[15];
 
+  // Cache only the current line of the second matrix
   var b0 = b[0],
-      b1 = b[1],
-      b2 = b[2],
-      b3 = b[3];
+    b1 = b[1],
+    b2 = b[2],
+    b3 = b[3];
   out[0] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
   out[1] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
   out[2] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
@@ -549,6 +523,7 @@ function multiply(out, a, b) {
   out[15] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
   return out;
 }
+
 /**
  * Creates a matrix from a vector translation
  * This is equivalent to (but much faster than):
@@ -560,7 +535,6 @@ function multiply(out, a, b) {
  * @param {ReadonlyVec3} v Translation vector
  * @returns {mat4} out
  */
-
 function fromTranslation(out, v) {
   out[0] = 1;
   out[1] = 0;
@@ -580,6 +554,7 @@ function fromTranslation(out, v) {
   out[15] = 1;
   return out;
 }
+
 /**
  * Creates a matrix from a vector scaling
  * This is equivalent to (but much faster than):
@@ -591,7 +566,6 @@ function fromTranslation(out, v) {
  * @param {ReadonlyVec3} v Scaling vector
  * @returns {mat4} out
  */
-
 function fromScaling(out, v) {
   out[0] = v[0];
   out[1] = 0;
@@ -611,6 +585,7 @@ function fromScaling(out, v) {
   out[15] = 1;
   return out;
 }
+
 /**
  * Creates a matrix from a given angle around a given axis
  * This is equivalent to (but much faster than):
@@ -623,26 +598,24 @@ function fromScaling(out, v) {
  * @param {ReadonlyVec3} axis the axis to rotate around
  * @returns {mat4} out
  */
-
 function fromRotation(out, rad, axis) {
   var x = axis[0],
-      y = axis[1],
-      z = axis[2];
-  var len = Math.hypot(x, y, z);
+    y = axis[1],
+    z = axis[2];
+  var len = Math.sqrt(x * x + y * y + z * z);
   var s, c, t;
-
   if (len < EPSILON) {
     return null;
   }
-
   len = 1 / len;
   x *= len;
   y *= len;
   z *= len;
   s = Math.sin(rad);
   c = Math.cos(rad);
-  t = 1 - c; // Perform rotation-specific matrix multiplication
+  t = 1 - c;
 
+  // Perform rotation-specific matrix multiplication
   out[0] = x * x * t + c;
   out[1] = y * x * t + z * s;
   out[2] = z * x * t - y * s;
@@ -661,6 +634,7 @@ function fromRotation(out, rad, axis) {
   out[15] = 1;
   return out;
 }
+
 /**
  * Returns the translation vector component of a transformation
  *  matrix. If a matrix is built with fromRotationTranslation,
@@ -670,24 +644,23 @@ function fromRotation(out, rad, axis) {
  * @param  {ReadonlyMat4} mat Matrix to be decomposed (input)
  * @return {vec3} out
  */
-
 function getTranslation(out, mat) {
   out[0] = mat[12];
   out[1] = mat[13];
   out[2] = mat[14];
   return out;
 }
+
 /**
  * Returns the scaling factor component of a transformation
  *  matrix. If a matrix is built with fromRotationTranslationScale
- *  with a normalized Quaternion paramter, the returned vector will be
+ *  with a normalized Quaternion parameter, the returned vector will be
  *  the same as the scaling vector
  *  originally supplied.
  * @param  {vec3} out Vector to receive scaling factor component
  * @param  {ReadonlyMat4} mat Matrix to be decomposed (input)
  * @return {vec3} out
  */
-
 function getScaling(out, mat) {
   var m11 = mat[0];
   var m12 = mat[1];
@@ -698,9 +671,9 @@ function getScaling(out, mat) {
   var m31 = mat[8];
   var m32 = mat[9];
   var m33 = mat[10];
-  out[0] = Math.hypot(m11, m12, m13);
-  out[1] = Math.hypot(m21, m22, m23);
-  out[2] = Math.hypot(m31, m32, m33);
+  out[0] = Math.sqrt(m11 * m11 + m12 * m12 + m13 * m13);
+  out[1] = Math.sqrt(m21 * m21 + m22 * m22 + m23 * m23);
+  out[2] = Math.sqrt(m31 * m31 + m32 * m32 + m33 * m33);
   return out;
 }
 
@@ -714,19 +687,17 @@ function getScaling(out, mat) {
  *
  * @returns {vec4} a new 4D vector
  */
-
 function create$1() {
   var out = new ARRAY_TYPE(4);
-
   if (ARRAY_TYPE != Float32Array) {
     out[0] = 0;
     out[1] = 0;
     out[2] = 0;
     out[3] = 0;
   }
-
   return out;
 }
+
 /**
  * Transforms the vec4 with a mat4.
  *
@@ -735,18 +706,18 @@ function create$1() {
  * @param {ReadonlyMat4} m matrix to transform with
  * @returns {vec4} out
  */
-
 function transformMat4(out, a, m) {
   var x = a[0],
-      y = a[1],
-      z = a[2],
-      w = a[3];
+    y = a[1],
+    z = a[2],
+    w = a[3];
   out[0] = m[0] * x + m[4] * y + m[8] * z + m[12] * w;
   out[1] = m[1] * x + m[5] * y + m[9] * z + m[13] * w;
   out[2] = m[2] * x + m[6] * y + m[10] * z + m[14] * w;
   out[3] = m[3] * x + m[7] * y + m[11] * z + m[15] * w;
   return out;
 }
+
 /**
  * Perform some operation over an array of vec4s.
  *
@@ -759,26 +730,21 @@ function transformMat4(out, a, m) {
  * @returns {Array} a
  * @function
  */
-
 (function () {
   var vec = create$1();
   return function (a, stride, offset, count, fn, arg) {
     var i, l;
-
     if (!stride) {
       stride = 4;
     }
-
     if (!offset) {
       offset = 0;
     }
-
     if (count) {
       l = Math.min(count * stride + offset, a.length);
     } else {
       l = a.length;
     }
-
     for (i = offset; i < l; i += stride) {
       vec[0] = a[i];
       vec[1] = a[i + 1];
@@ -790,7 +756,6 @@ function transformMat4(out, a, m) {
       a[i + 2] = vec[2];
       a[i + 3] = vec[3];
     }
-
     return a;
   };
 })();
@@ -805,36 +770,29 @@ function transformMat4(out, a, m) {
  *
  * @returns {vec2} a new 2D vector
  */
-
 function create() {
   var out = new ARRAY_TYPE(2);
-
   if (ARRAY_TYPE != Float32Array) {
     out[0] = 0;
     out[1] = 0;
   }
-
   return out;
 }
+
 /**
- * Get the angle between two 2D vectors
+ * Get the smallest angle between two 2D vectors
  * @param {ReadonlyVec2} a The first operand
  * @param {ReadonlyVec2} b The second operand
  * @returns {Number} The angle in radians
  */
-
 function angle(a, b) {
-  var x1 = a[0],
-      y1 = a[1],
-      x2 = b[0],
-      y2 = b[1],
-      // mag is the product of the magnitudes of a and b
-  mag = Math.sqrt(x1 * x1 + y1 * y1) * Math.sqrt(x2 * x2 + y2 * y2),
-      // mag &&.. short circuits if mag == 0
-  cosine = mag && (x1 * x2 + y1 * y2) / mag; // Math.min(Math.max(cosine, -1), 1) clamps the cosine between -1 and 1
-
-  return Math.acos(Math.min(Math.max(cosine, -1), 1));
+  var ax = a[0],
+    ay = a[1],
+    bx = b[0],
+    by = b[1];
+  return Math.abs(Math.atan2(ay * bx - ax * by, ax * bx + ay * by));
 }
+
 /**
  * Perform some operation over an array of vec2s.
  *
@@ -847,26 +805,21 @@ function angle(a, b) {
  * @returns {Array} a
  * @function
  */
-
 (function () {
   var vec = create();
   return function (a, stride, offset, count, fn, arg) {
     var i, l;
-
     if (!stride) {
       stride = 2;
     }
-
     if (!offset) {
       offset = 0;
     }
-
     if (count) {
       l = Math.min(count * stride + offset, a.length);
     } else {
       l = a.length;
     }
-
     for (i = offset; i < l; i += stride) {
       vec[0] = a[i];
       vec[1] = a[i + 1];
@@ -874,7 +827,6 @@ function angle(a, b) {
       a[i] = vec[0];
       a[i + 1] = vec[1];
     }
-
     return a;
   };
 })();
@@ -1467,10 +1419,10 @@ function earcut(data, holeIndices, dim = 2) {
 
     // if the shape is not too simple, we'll use z-order curve hash later; calculate polygon bbox
     if (data.length > 80 * dim) {
-        minX = Infinity;
-        minY = Infinity;
-        let maxX = -Infinity;
-        let maxY = -Infinity;
+        minX = data[0];
+        minY = data[1];
+        let maxX = minX;
+        let maxY = minY;
 
         for (let i = dim; i < outerLen; i += dim) {
             const x = data[i];
@@ -1812,7 +1764,7 @@ function pointInTriangleExceptFirst(ax, ay, bx, by, cx, cy, px, py) {
 
 // check if a diagonal between two polygon nodes is valid (lies in polygon interior)
 function isValidDiagonal(a, b) {
-    return a.next.i !== b.i && a.prev.i !== b.i && !intersectsPolygon(a, b) && // dones't intersect other edges
+    return a.next.i !== b.i && a.prev.i !== b.i && !intersectsPolygon(a, b) && // doesn't intersect other edges
            (locallyInside(a, b) && locallyInside(b, a) && middleInside(a, b) && // locally visible
             (area(a.prev, a, b.prev) || area(a, b.prev, b)) || // does not create opposite-facing sectors
             equals(a, b) && area(a.prev, a, a.next) > 0 && area(b.prev, b, b.next) > 0); // special zero-length case
@@ -2426,121 +2378,327 @@ const createLine = (regl, { projection = I, model = I, view = I, points = [], co
     };
 };
 
-/**
- * KDBush - A fast static index for 2D points
- * @license ISC License
- * @copyright Vladimir Agafonkin 2018
- * @version 4.0.2
- * @see https://github.com/mourner/kdbush/
- */
-var createKDBushClass = () => {
-  const ARRAY_TYPES = [
-    Int8Array,
-    Uint8Array,
-    Uint8ClampedArray,
-    Int16Array,
-    Uint16Array,
-    Int32Array,
-    Uint32Array,
-    Float32Array,
-    Float64Array,
-  ];
+var version = "1.16.0-hemato.0";
 
-  /** @typedef {Int8ArrayConstructor | Uint8ArrayConstructor | Uint8ClampedArrayConstructor | Int16ArrayConstructor | Uint16ArrayConstructor | Int32ArrayConstructor | Uint32ArrayConstructor | Float32ArrayConstructor | Float64ArrayConstructor} TypedArrayConstructor */
+const FRAGMENT_SHADER$2 = `
+precision mediump float;
 
-  const VERSION = 1; // serialized format version
-  const HEADER_SIZE = 8;
+uniform sampler2D texture;
 
-  class KDBush {
-    /**
-     * Creates an index from raw `ArrayBuffer` data.
-     * @param {ArrayBuffer} data
-     */
-    static from(data) {
-      if (!(data instanceof ArrayBuffer)) {
-        throw new Error('Data must be an instance of ArrayBuffer.');
-      }
-      const [magic, versionAndType] = new Uint8Array(data, 0, 2);
-      if (magic !== 0xdb) {
-        throw new Error('Data does not appear to be in a KDBush format.');
-      }
-      const version = versionAndType >> 4;
-      if (version !== VERSION) {
-        throw new Error(`Got v${version} data when expected v${VERSION}.`);
-      }
-      const ArrayType = ARRAY_TYPES[versionAndType & 0x0f];
-      if (!ArrayType) {
-        throw new Error('Unrecognized array type.');
-      }
-      const [nodeSize] = new Uint16Array(data, 2, 1);
-      const [numItems] = new Uint32Array(data, 4, 1);
+varying vec2 uv;
 
-      return new KDBush(numItems, nodeSize, ArrayType, data);
-    }
+void main () {
+  gl_FragColor = texture2D(texture, uv);
+}
+`;
 
-    /**
-     * Creates an index that will hold a given number of items.
-     * @param {number} numItems
-     * @param {number} [nodeSize=64] Size of the KD-tree node (64 by default).
-     * @param {TypedArrayConstructor} [ArrayType=Float64Array] The array type used for coordinates storage (`Float64Array` by default).
-     * @param {ArrayBuffer} [data] (For internal use only)
-     */
-    constructor(numItems, nodeSize = 64, ArrayType = Float64Array, data) {
-      if (isNaN(numItems) || numItems < 0)
-        throw new Error(`Unexpected numItems value: ${numItems}.`);
+const VERTEX_SHADER = `
+precision mediump float;
 
-      this.numItems = +numItems;
-      this.nodeSize = Math.min(Math.max(+nodeSize, 2), 65535);
-      this.ArrayType = ArrayType;
-      this.IndexArrayType = numItems < 65536 ? Uint16Array : Uint32Array;
+uniform mat4 modelViewProjection;
 
-      const arrayTypeIndex = ARRAY_TYPES.indexOf(this.ArrayType);
-      const coordsByteSize = numItems * 2 * this.ArrayType.BYTES_PER_ELEMENT;
-      const idsByteSize = numItems * this.IndexArrayType.BYTES_PER_ELEMENT;
-      const padCoords = (8 - (idsByteSize % 8)) % 8;
+attribute vec2 position;
 
-      if (arrayTypeIndex < 0) {
-        throw new Error(`Unexpected typed array class: ${ArrayType}.`);
-      }
+varying vec2 uv;
 
-      if (data && data instanceof ArrayBuffer) {
-        // reconstruct an index from a buffer
-        this.data = data;
-        this.ids = new this.IndexArrayType(this.data, HEADER_SIZE, numItems);
-        this.coords = new this.ArrayType(
-          this.data,
-          HEADER_SIZE + idsByteSize + padCoords,
-          numItems * 2
-        );
-        this._pos = numItems * 2;
-        this._finished = true;
-      } else {
-        // initialize a new index
-        this.data = new ArrayBuffer(
-          HEADER_SIZE + coordsByteSize + idsByteSize + padCoords
-        );
-        this.ids = new this.IndexArrayType(this.data, HEADER_SIZE, numItems);
-        this.coords = new this.ArrayType(
-          this.data,
-          HEADER_SIZE + idsByteSize + padCoords,
-          numItems * 2
-        );
-        this._pos = 0;
-        this._finished = false;
+void main () {
+  uv = position;
+  gl_Position = modelViewProjection * vec4(-1.0 + 2.0 * uv.x, 1.0 - 2.0 * uv.y, 0, 1);
+}
+`;
 
-        // set header
-        new Uint8Array(this.data, 0, 2).set([
-          0xdb,
-          (VERSION << 4) + arrayTypeIndex,
-        ]);
-        new Uint16Array(this.data, 2, 1)[0] = nodeSize;
-        new Uint32Array(this.data, 4, 1)[0] = numItems;
-      }
-    }
+const AUTO = 'auto';
 
-    /**
-     * Add a point to the index.
-     * @param {number} x
+const COLOR_NORMAL_IDX = 0;
+const COLOR_ACTIVE_IDX = 1;
+const COLOR_HOVER_IDX = 2;
+const COLOR_BG_IDX = 3;
+const COLOR_NUM_STATES = 4;
+const FLOAT_BYTES = Float32Array.BYTES_PER_ELEMENT;
+const GL_EXTENSIONS = [
+  'OES_texture_float',
+  'OES_element_index_uint',
+  'WEBGL_color_buffer_float',
+  'EXT_float_blend',
+];
+const CLEAR_OPTIONS = {
+  color: [0, 0, 0, 0], // Transparent background color
+  depth: 1,
+};
+
+const MOUSE_MODE_PANZOOM = 'panZoom';
+const MOUSE_MODE_LASSO = 'lasso';
+const MOUSE_MODE_ROTATE = 'rotate';
+const MOUSE_MODES = [
+  MOUSE_MODE_PANZOOM,
+  MOUSE_MODE_LASSO,
+  MOUSE_MODE_ROTATE,
+];
+const DEFAULT_MOUSE_MODE = MOUSE_MODE_PANZOOM;
+
+// Easing
+const EASING_FNS = {
+  cubicIn,
+  cubicInOut,
+  cubicOut,
+  linear,
+  quadIn,
+  quadInOut,
+  quadOut,
+};
+const DEFAULT_EASING = cubicInOut;
+
+const CONTINUOUS = 'continuous';
+const CATEGORICAL = 'categorical';
+const VALUE_ZW_DATA_TYPES = [CONTINUOUS, CATEGORICAL];
+
+// Default lasso
+const LASSO_CLEAR_ON_DESELECT = 'deselect';
+const LASSO_CLEAR_ON_END = 'lassoEnd';
+const LASSO_CLEAR_EVENTS = [LASSO_CLEAR_ON_DESELECT, LASSO_CLEAR_ON_END];
+const LASSO_BRUSH_MIN_MIN_DIST = 3;
+const DEFAULT_LASSO_COLOR = [0, 0.666666667, 1, 1];
+const DEFAULT_LASSO_LINE_WIDTH = 2;
+const DEFAULT_LASSO_INITIATOR = false;
+const DEFAULT_LASSO_MIN_DELAY$1 = 10;
+const DEFAULT_LASSO_MIN_DIST$1 = 3;
+const DEFAULT_LASSO_CLEAR_EVENT = LASSO_CLEAR_ON_END;
+const DEFAULT_LASSO_ON_LONG_PRESS = false;
+const DEFAULT_LASSO_LONG_PRESS_TIME = 750;
+const DEFAULT_LASSO_LONG_PRESS_AFTER_EFFECT_TIME = 500;
+const DEFAULT_LASSO_LONG_PRESS_EFFECT_DELAY = 100;
+const DEFAULT_LASSO_LONG_PRESS_REVERT_EFFECT_TIME = 250;
+const DEFAULT_LASSO_BRUSH_SIZE = 24;
+const DEFAULT_LASSO_MODE = null;
+
+// Key mapping
+const KEY_ACTION_INTERSECT = 'intersect';
+const KEY_ACTION_LASSO = 'lasso';
+const KEY_ACTION_ROTATE = 'rotate';
+const KEY_ACTION_MERGE = 'merge';
+const KEY_ACTION_REMOVE = 'remove';
+const KEY_ACTIONS = [
+  KEY_ACTION_LASSO,
+  KEY_ACTION_ROTATE,
+  KEY_ACTION_INTERSECT,
+  KEY_ACTION_MERGE,
+  KEY_ACTION_REMOVE,
+];
+const KEY_ALT = 'alt';
+const KEY_CMD = 'cmd';
+const KEY_CTRL = 'ctrl';
+const KEY_META = 'meta';
+const KEY_SHIFT = 'shift';
+const KEYS = [KEY_ALT, KEY_CMD, KEY_CTRL, KEY_META, KEY_SHIFT];
+const DEFAULT_ACTION_KEY_MAP = {
+  [KEY_ACTION_REMOVE]: KEY_ALT,
+  [KEY_ACTION_ROTATE]: KEY_ALT,
+  [KEY_ACTION_LASSO]: KEY_SHIFT,
+  [KEY_ACTION_MERGE]: KEY_CMD,
+};
+
+// Default attribute
+const DEFAULT_DATA_ASPECT_RATIO = 1;
+const DEFAULT_WIDTH = AUTO;
+const DEFAULT_HEIGHT = AUTO;
+const DEFAULT_GAMMA = 1;
+
+// Default styles
+const MIN_POINT_SIZE = 1;
+const DEFAULT_POINT_SCALE_MODE = 'asinh';
+const DEFAULT_POINT_SIZE = 6;
+const DEFAULT_POINT_SIZE_SELECTED = 2;
+const DEFAULT_POINT_OUTLINE_WIDTH = 2;
+const DEFAULT_SIZE_BY = null;
+const DEFAULT_POINT_ORDER = null;
+const DEFAULT_POINT_CONNECTION_SIZE = 2;
+const DEFAULT_POINT_CONNECTION_SIZE_ACTIVE = 2;
+const DEFAULT_POINT_CONNECTION_SIZE_BY = null;
+const DEFAULT_POINT_CONNECTION_OPACITY = null;
+const DEFAULT_POINT_CONNECTION_OPACITY_BY = null;
+const DEFAULT_POINT_CONNECTION_OPACITY_ACTIVE = 0.66;
+const DEFAULT_OPACITY = 1;
+const DEFAULT_OPACITY_BY = null;
+const DEFAULT_OPACITY_BY_DENSITY_FILL = 0.15;
+const DEFAULT_OPACITY_BY_DENSITY_DEBOUNCE_TIME = 25;
+const DEFAULT_OPACITY_INACTIVE_MAX = 1;
+const DEFAULT_OPACITY_INACTIVE_SCALE = 1;
+const DEFAULT_COLOR_BY = null;
+const DEFAULT_COLOR_NORMAL = [0.66, 0.66, 0.66, DEFAULT_OPACITY];
+const DEFAULT_COLOR_ACTIVE = [0, 0.55, 1, 1];
+const DEFAULT_COLOR_HOVER = [1, 1, 1, 1];
+const DEFAULT_COLOR_BG = [0, 0, 0, 1];
+const DEFAULT_POINT_CONNECTION_COLOR_BY = null;
+const DEFAULT_POINT_CONNECTION_COLOR_NORMAL = [0.66, 0.66, 0.66, 0.2];
+const DEFAULT_POINT_CONNECTION_COLOR_ACTIVE = [0, 0.55, 1, 1];
+const DEFAULT_POINT_CONNECTION_COLOR_HOVER = [1, 1, 1, 1];
+
+// Annotations
+const DEFAULT_ANNOTATION_LINE_COLOR = [1, 1, 1, 0.5];
+const DEFAULT_ANNOTATION_LINE_WIDTH = 1;
+const DEFAULT_ANNOTATION_HVLINE_LIMIT = 1000;
+
+// Default view
+const DEFAULT_TARGET = [0, 0];
+const DEFAULT_DISTANCE = 1;
+const DEFAULT_ROTATION = 0;
+// biome-ignore format: the array should not be formatted
+const DEFAULT_VIEW = new Float32Array([
+  1, 0, 0, 0,
+  0, 1, 0, 0,
+  0, 0, 1, 0,
+  0, 0, 0, 1,
+]);
+
+// Error codes
+const IMAGE_LOAD_ERROR = 'IMAGE_LOAD_ERROR';
+
+// Default misc
+const DEFAULT_BACKGROUND_IMAGE = null;
+const DEFAULT_SHOW_RETICLE = false;
+const DEFAULT_RETICLE_COLOR = [1, 1, 1, 0.5];
+const DEFAULT_DESELECT_ON_DBL_CLICK = true;
+const DEFAULT_DESELECT_ON_ESCAPE = true;
+const DEFAULT_SHOW_POINT_CONNECTIONS = false;
+const DEFAULT_POINT_CONNECTION_MAX_INT_POINTS_PER_SEGMENT = 100;
+const DEFAULT_POINT_CONNECTION_INT_POINTS_TOLERANCE = 1 / 500;
+const DEFAULT_POINT_SIZE_MOUSE_DETECTION = 'auto';
+const DEFAULT_PERFORMANCE_MODE = false;
+const SINGLE_CLICK_DELAY = 200;
+const LONG_CLICK_TIME = 500;
+const Z_NAMES = new Set(['z', 'valueZ', 'valueA', 'value1', 'category']);
+const W_NAMES = new Set(['w', 'valueW', 'valueB', 'value2', 'value']);
+const DEFAULT_IMAGE_LOAD_TIMEOUT = 15000;
+const DEFAULT_SPATIAL_INDEX_USE_WORKER = undefined;
+const DEFAULT_CAMERA_IS_FIXED = false;
+const DEFAULT_ANTI_ALIASING = 0.5;
+const DEFAULT_PIXEL_ALIGNED = false;
+const DEFAULT_LASSO_TYPE$1 = 'lasso';
+const SKIP_DEPRECATION_VALUE_TRANSLATION = Symbol(
+  'SKIP_DEPRECATION_VALUE_TRANSLATION',
+);
+
+// Error messages
+const ERROR_POINTS_NOT_DRAWN = 'Points have not been drawn';
+const ERROR_INSTANCE_IS_DESTROYED = 'The instance was already destroyed';
+const ERROR_IS_DRAWING =
+  'Ignoring draw call as the previous draw call has not yet finished. To avoid this warning `await` the draw call.';
+
+/**
+ * KDBush - A fast static index for 2D points
+ * @license ISC License
+ * @copyright Vladimir Agafonkin 2018
+ * @version 4.0.2
+ * @see https://github.com/mourner/kdbush/
+ */
+var createKDBushClass = () => {
+  const ARRAY_TYPES = [
+    Int8Array,
+    Uint8Array,
+    Uint8ClampedArray,
+    Int16Array,
+    Uint16Array,
+    Int32Array,
+    Uint32Array,
+    Float32Array,
+    Float64Array,
+  ];
+
+  /** @typedef {Int8ArrayConstructor | Uint8ArrayConstructor | Uint8ClampedArrayConstructor | Int16ArrayConstructor | Uint16ArrayConstructor | Int32ArrayConstructor | Uint32ArrayConstructor | Float32ArrayConstructor | Float64ArrayConstructor} TypedArrayConstructor */
+
+  const VERSION = 1; // serialized format version
+  const HEADER_SIZE = 8;
+
+  class KDBush {
+    /**
+     * Creates an index from raw `ArrayBuffer` data.
+     * @param {ArrayBuffer} data
+     */
+    static from(data) {
+      if (!(data instanceof ArrayBuffer)) {
+        throw new Error('Data must be an instance of ArrayBuffer.');
+      }
+      const [magic, versionAndType] = new Uint8Array(data, 0, 2);
+      if (magic !== 0xdb) {
+        throw new Error('Data does not appear to be in a KDBush format.');
+      }
+      const version = versionAndType >> 4;
+      if (version !== VERSION) {
+        throw new Error(`Got v${version} data when expected v${VERSION}.`);
+      }
+      const ArrayType = ARRAY_TYPES[versionAndType & 0x0f];
+      if (!ArrayType) {
+        throw new Error('Unrecognized array type.');
+      }
+      const [nodeSize] = new Uint16Array(data, 2, 1);
+      const [numItems] = new Uint32Array(data, 4, 1);
+
+      return new KDBush(numItems, nodeSize, ArrayType, data);
+    }
+
+    /**
+     * Creates an index that will hold a given number of items.
+     * @param {number} numItems
+     * @param {number} [nodeSize=64] Size of the KD-tree node (64 by default).
+     * @param {TypedArrayConstructor} [ArrayType=Float64Array] The array type used for coordinates storage (`Float64Array` by default).
+     * @param {ArrayBuffer} [data] (For internal use only)
+     */
+    constructor(numItems, nodeSize = 64, ArrayType = Float64Array, data) {
+      if (isNaN(numItems) || numItems < 0)
+        throw new Error(`Unexpected numItems value: ${numItems}.`);
+
+      this.numItems = +numItems;
+      this.nodeSize = Math.min(Math.max(+nodeSize, 2), 65535);
+      this.ArrayType = ArrayType;
+      this.IndexArrayType = numItems < 65536 ? Uint16Array : Uint32Array;
+
+      const arrayTypeIndex = ARRAY_TYPES.indexOf(this.ArrayType);
+      const coordsByteSize = numItems * 2 * this.ArrayType.BYTES_PER_ELEMENT;
+      const idsByteSize = numItems * this.IndexArrayType.BYTES_PER_ELEMENT;
+      const padCoords = (8 - (idsByteSize % 8)) % 8;
+
+      if (arrayTypeIndex < 0) {
+        throw new Error(`Unexpected typed array class: ${ArrayType}.`);
+      }
+
+      if (data && data instanceof ArrayBuffer) {
+        // reconstruct an index from a buffer
+        this.data = data;
+        this.ids = new this.IndexArrayType(this.data, HEADER_SIZE, numItems);
+        this.coords = new this.ArrayType(
+          this.data,
+          HEADER_SIZE + idsByteSize + padCoords,
+          numItems * 2
+        );
+        this._pos = numItems * 2;
+        this._finished = true;
+      } else {
+        // initialize a new index
+        this.data = new ArrayBuffer(
+          HEADER_SIZE + coordsByteSize + idsByteSize + padCoords
+        );
+        this.ids = new this.IndexArrayType(this.data, HEADER_SIZE, numItems);
+        this.coords = new this.ArrayType(
+          this.data,
+          HEADER_SIZE + idsByteSize + padCoords,
+          numItems * 2
+        );
+        this._pos = 0;
+        this._finished = false;
+
+        // set header
+        new Uint8Array(this.data, 0, 2).set([
+          0xdb,
+          (VERSION << 4) + arrayTypeIndex,
+        ]);
+        new Uint16Array(this.data, 2, 1)[0] = nodeSize;
+        new Uint32Array(this.data, 4, 1)[0] = numItems;
+      }
+    }
+
+    /**
+     * Add a point to the index.
+     * @param {number} x
      * @param {number} y
      * @returns {number} An incremental index associated with the added item (starting from `0`).
      */
@@ -2804,7 +2962,6 @@ var workerFn = () => {
       self.postMessage({ error: new Error('Invalid point data') });
     }
 
-    // biome-ignore lint/correctness/noUndeclaredVariables: KDBush is made available during compilation
     const index = new KDBush(points.length, event.data.nodeSize);
 
     for (const [x, y] of points) {
@@ -2817,9 +2974,6 @@ var workerFn = () => {
   });
 };
 
-// biome-ignore lint/style/useNamingConvention: KDBush is a library name
-
-// biome-ignore lint/style/useNamingConvention: KDBush is a library name
 const KDBush$1 = createKDBushClass();
 const WORKER_THRESHOLD = 1000000;
 
@@ -2827,7 +2981,6 @@ const createWorker = (fn) => {
   const kdbushStr = createKDBushClass.toString();
   const fnStr = fn.toString();
   const workerStr =
-    // biome-ignore lint/style/useTemplate: Prefer one assignment per line
     `const createKDBushClass = ${kdbushStr};` +
     'KDBush = createKDBushClass();' +
     `const createWorker = ${fnStr};` +
@@ -2883,190 +3036,16 @@ const createKdbush = (
     }
   });
 
+const kdbushFrom = (buffer) => KDBush$1.from(buffer);
+
 const DEFAULT_LASSO_START_INITIATOR_SHOW = true;
-const DEFAULT_LASSO_MIN_DELAY$1 = 8;
-const DEFAULT_LASSO_MIN_DIST$1 = 2;
-const DEFAULT_LASSO_TYPE$1 = 'freeform';
+const DEFAULT_LASSO_MIN_DELAY = 8;
+const DEFAULT_LASSO_MIN_DIST = 2;
+const DEFAULT_LASSO_TYPE = 'freeform';
 const DEFAULT_BRUSH_SIZE = 24;
 const LASSO_SHOW_START_INITIATOR_TIME = 2500;
 const LASSO_HIDE_START_INITIATOR_TIME = 250;
 
-const AUTO = 'auto';
-
-const COLOR_NORMAL_IDX = 0;
-const COLOR_ACTIVE_IDX = 1;
-const COLOR_HOVER_IDX = 2;
-const COLOR_BG_IDX = 3;
-const COLOR_NUM_STATES = 4;
-const FLOAT_BYTES = Float32Array.BYTES_PER_ELEMENT;
-const GL_EXTENSIONS = [
-  'OES_texture_float',
-  'OES_element_index_uint',
-  'WEBGL_color_buffer_float',
-  'EXT_float_blend',
-];
-const CLEAR_OPTIONS = {
-  color: [0, 0, 0, 0], // Transparent background color
-  depth: 1,
-};
-
-const MOUSE_MODE_PANZOOM = 'panZoom';
-const MOUSE_MODE_LASSO = 'lasso';
-const MOUSE_MODE_ROTATE = 'rotate';
-const MOUSE_MODES = [
-  MOUSE_MODE_PANZOOM,
-  MOUSE_MODE_LASSO,
-  MOUSE_MODE_ROTATE,
-];
-const DEFAULT_MOUSE_MODE = MOUSE_MODE_PANZOOM;
-
-// Easing
-const EASING_FNS = {
-  cubicIn,
-  cubicInOut,
-  cubicOut,
-  linear,
-  quadIn,
-  quadInOut,
-  quadOut,
-};
-const DEFAULT_EASING = cubicInOut;
-
-const CONTINUOUS = 'continuous';
-const CATEGORICAL = 'categorical';
-const VALUE_ZW_DATA_TYPES = [CONTINUOUS, CATEGORICAL];
-
-// Default lasso
-const LASSO_CLEAR_ON_DESELECT = 'deselect';
-const LASSO_CLEAR_ON_END = 'lassoEnd';
-const LASSO_CLEAR_EVENTS = [LASSO_CLEAR_ON_DESELECT, LASSO_CLEAR_ON_END];
-const LASSO_BRUSH_MIN_MIN_DIST = 3;
-const DEFAULT_LASSO_COLOR = [0, 0.666666667, 1, 1];
-const DEFAULT_LASSO_LINE_WIDTH = 2;
-const DEFAULT_LASSO_INITIATOR = false;
-const DEFAULT_LASSO_MIN_DELAY = 10;
-const DEFAULT_LASSO_MIN_DIST = 3;
-const DEFAULT_LASSO_CLEAR_EVENT = LASSO_CLEAR_ON_END;
-const DEFAULT_LASSO_ON_LONG_PRESS = false;
-const DEFAULT_LASSO_LONG_PRESS_TIME = 750;
-const DEFAULT_LASSO_LONG_PRESS_AFTER_EFFECT_TIME = 500;
-const DEFAULT_LASSO_LONG_PRESS_EFFECT_DELAY = 100;
-const DEFAULT_LASSO_LONG_PRESS_REVERT_EFFECT_TIME = 250;
-const DEFAULT_LASSO_BRUSH_SIZE = 24;
-const DEFAULT_LASSO_MODE = null;
-
-// Key mapping
-const KEY_ACTION_INTERSECT = 'intersect';
-const KEY_ACTION_LASSO = 'lasso';
-const KEY_ACTION_ROTATE = 'rotate';
-const KEY_ACTION_MERGE = 'merge';
-const KEY_ACTION_REMOVE = 'remove';
-const KEY_ACTIONS = [
-  KEY_ACTION_LASSO,
-  KEY_ACTION_ROTATE,
-  KEY_ACTION_INTERSECT,
-  KEY_ACTION_MERGE,
-  KEY_ACTION_REMOVE,
-];
-const KEY_ALT = 'alt';
-const KEY_CMD = 'cmd';
-const KEY_CTRL = 'ctrl';
-const KEY_META = 'meta';
-const KEY_SHIFT = 'shift';
-const KEYS = [KEY_ALT, KEY_CMD, KEY_CTRL, KEY_META, KEY_SHIFT];
-const DEFAULT_ACTION_KEY_MAP = {
-  [KEY_ACTION_REMOVE]: KEY_ALT,
-  [KEY_ACTION_ROTATE]: KEY_ALT,
-  [KEY_ACTION_LASSO]: KEY_SHIFT,
-  [KEY_ACTION_MERGE]: KEY_CMD,
-};
-
-// Default attribute
-const DEFAULT_DATA_ASPECT_RATIO = 1;
-const DEFAULT_WIDTH = AUTO;
-const DEFAULT_HEIGHT = AUTO;
-const DEFAULT_GAMMA = 1;
-
-// Default styles
-const MIN_POINT_SIZE = 1;
-const DEFAULT_POINT_SCALE_MODE = 'asinh';
-const DEFAULT_POINT_SIZE = 6;
-const DEFAULT_POINT_SIZE_SELECTED = 2;
-const DEFAULT_POINT_OUTLINE_WIDTH = 2;
-const DEFAULT_SIZE_BY = null;
-const DEFAULT_POINT_CONNECTION_SIZE = 2;
-const DEFAULT_POINT_CONNECTION_SIZE_ACTIVE = 2;
-const DEFAULT_POINT_CONNECTION_SIZE_BY = null;
-const DEFAULT_POINT_CONNECTION_OPACITY = null;
-const DEFAULT_POINT_CONNECTION_OPACITY_BY = null;
-const DEFAULT_POINT_CONNECTION_OPACITY_ACTIVE = 0.66;
-const DEFAULT_OPACITY = 1;
-const DEFAULT_OPACITY_BY = null;
-const DEFAULT_OPACITY_BY_DENSITY_FILL = 0.15;
-const DEFAULT_OPACITY_BY_DENSITY_DEBOUNCE_TIME = 25;
-const DEFAULT_OPACITY_INACTIVE_MAX = 1;
-const DEFAULT_OPACITY_INACTIVE_SCALE = 1;
-const DEFAULT_COLOR_BY = null;
-const DEFAULT_COLOR_NORMAL = [0.66, 0.66, 0.66, DEFAULT_OPACITY];
-const DEFAULT_COLOR_ACTIVE = [0, 0.55, 1, 1];
-const DEFAULT_COLOR_HOVER = [1, 1, 1, 1];
-const DEFAULT_COLOR_BG = [0, 0, 0, 1];
-const DEFAULT_POINT_CONNECTION_COLOR_BY = null;
-const DEFAULT_POINT_CONNECTION_COLOR_NORMAL = [0.66, 0.66, 0.66, 0.2];
-const DEFAULT_POINT_CONNECTION_COLOR_ACTIVE = [0, 0.55, 1, 1];
-const DEFAULT_POINT_CONNECTION_COLOR_HOVER = [1, 1, 1, 1];
-
-// Annotations
-const DEFAULT_ANNOTATION_LINE_COLOR = [1, 1, 1, 0.5];
-const DEFAULT_ANNOTATION_LINE_WIDTH = 1;
-const DEFAULT_ANNOTATION_HVLINE_LIMIT = 1000;
-
-// Default view
-const DEFAULT_TARGET = [0, 0];
-const DEFAULT_DISTANCE = 1;
-const DEFAULT_ROTATION = 0;
-// biome-ignore format: the array should not be formatted
-const DEFAULT_VIEW = new Float32Array([
-  1, 0, 0, 0,
-  0, 1, 0, 0,
-  0, 0, 1, 0,
-  0, 0, 0, 1,
-]);
-
-// Error codes
-const IMAGE_LOAD_ERROR = 'IMAGE_LOAD_ERROR';
-
-// Default misc
-const DEFAULT_BACKGROUND_IMAGE = null;
-const DEFAULT_SHOW_RETICLE = false;
-const DEFAULT_RETICLE_COLOR = [1, 1, 1, 0.5];
-const DEFAULT_DESELECT_ON_DBL_CLICK = true;
-const DEFAULT_DESELECT_ON_ESCAPE = true;
-const DEFAULT_SHOW_POINT_CONNECTIONS = false;
-const DEFAULT_POINT_CONNECTION_MAX_INT_POINTS_PER_SEGMENT = 100;
-const DEFAULT_POINT_CONNECTION_INT_POINTS_TOLERANCE = 1 / 500;
-const DEFAULT_POINT_SIZE_MOUSE_DETECTION = 'auto';
-const DEFAULT_PERFORMANCE_MODE = false;
-const SINGLE_CLICK_DELAY = 200;
-const LONG_CLICK_TIME = 500;
-const Z_NAMES = new Set(['z', 'valueZ', 'valueA', 'value1', 'category']);
-const W_NAMES = new Set(['w', 'valueW', 'valueB', 'value2', 'value']);
-const DEFAULT_IMAGE_LOAD_TIMEOUT = 15000;
-const DEFAULT_SPATIAL_INDEX_USE_WORKER = undefined;
-const DEFAULT_CAMERA_IS_FIXED = false;
-const DEFAULT_ANTI_ALIASING = 0.5;
-const DEFAULT_PIXEL_ALIGNED = false;
-const DEFAULT_LASSO_TYPE = 'lasso';
-const SKIP_DEPRECATION_VALUE_TRANSLATION = Symbol(
-  'SKIP_DEPRECATION_VALUE_TRANSLATION',
-);
-
-// Error messages
-const ERROR_POINTS_NOT_DRAWN = 'Points have not been drawn';
-const ERROR_INSTANCE_IS_DESTROYED = 'The instance was already destroyed';
-const ERROR_IS_DRAWING =
-  'Ignoring draw call as the previous draw call has not yet finished. To avoid this warning `await` the draw call.';
-
 const getInTime = (p, time, extraTime) => (1 - p) * time + extraTime;
 
 const getMainInAnimation = (t, d) =>
@@ -3497,10 +3476,10 @@ const createLasso = (
     initiatorParentElement: initialInitiatorParentElement = document.body,
     longPressIndicatorParentElement:
       initialLongPressIndicatorParentElement = document.body,
-    minDelay: initialMinDelay = DEFAULT_LASSO_MIN_DELAY$1,
-    minDist: initialMinDist = DEFAULT_LASSO_MIN_DIST$1,
+    minDelay: initialMinDelay = DEFAULT_LASSO_MIN_DELAY,
+    minDist: initialMinDist = DEFAULT_LASSO_MIN_DIST,
     pointNorm: initialPointNorm = identity,
-    type: initialType = DEFAULT_LASSO_TYPE$1,
+    type: initialType = DEFAULT_LASSO_TYPE,
     brushSize: initialBrushSize = DEFAULT_BRUSH_SIZE,
   } = {},
 ) => {
@@ -4150,1052 +4129,1041 @@ const createLasso = (
     });
 
   initiatorParentElement.appendChild(initiator);
-  longPressIndicatorParentElement.appendChild(longPress);
-
-  set({
-    onDraw,
-    onStart,
-    onEnd,
-    enableInitiator,
-    initiatorParentElement,
-    type,
-    brushSize,
-  });
-
-  return pipe(
-    withStaticProperty('initiator', initiator),
-    withStaticProperty('longPressIndicator', longPress),
-    withPublicMethods(),
-    withConstructor(createLasso),
-  )({});
-};
-
-/**
- * Check if all GL extensions are supported and enabled and warn otherwise
- * @param   {import('regl').Regl}  regl  Regl instance to be tested
- * @param   {boolean}  silent  If `true` the function will not print `console.warn` statements
- * @return  {boolean}  If `true` all required GL extensions are supported
- */
-const checkReglExtensions = (regl, silent) => {
-  if (!regl) {
-    return false;
-  }
-  return GL_EXTENSIONS.reduce((every, extension) => {
-    if (!regl.hasExtension(extension)) {
-      if (!silent) {
-        // biome-ignore lint/suspicious/noConsole: This is a legitimately useful warning
-        console.warn(
-          `WebGL: ${extension} extension not supported. Scatterplot might not render properly`,
-        );
-      }
-      return false;
-    }
-    return every;
-  }, true);
-};
+  longPressIndicatorParentElement.appendChild(longPress);
 
-/**
- * Create a new Regl instance with `GL_EXTENSIONS` enables
- * @param   {HTMLCanvasElement}  canvas  Canvas element to be rendered on
- * @return  {import('regl').Regl}  New Regl instance
- */
-const createRegl = (canvas) => {
-  const gl = canvas.getContext('webgl', {
-    antialias: true,
-    preserveDrawingBuffer: true,
+  set({
+    onDraw,
+    onStart,
+    onEnd,
+    enableInitiator,
+    initiatorParentElement,
+    type,
+    brushSize,
   });
-  const extensions = [];
-
-  // Needed to run the tests properly as the headless-gl doesn't support all
-  // extensions, which is fine for the functional tests.
-  for (const extension of GL_EXTENSIONS) {
-    if (gl.getExtension(extension)) {
-      extensions.push(extension);
-    } else {
-      // biome-ignore lint/suspicious/noConsole: This is a legitimately useful warning
-      console.warn(
-        `WebGL: ${extension} extension not supported. Scatterplot might not render properly`,
-      );
-    }
-  }
 
-  return createOriginalRegl({ gl, extensions });
+  return pipe(
+    withStaticProperty('initiator', initiator),
+    withStaticProperty('longPressIndicator', longPress),
+    withPublicMethods(),
+    withConstructor(createLasso),
+  )({});
 };
 
-/**
- * L2 distance between a pair of 2D points
- * @param   {number}  x1  X coordinate of the first point
- * @param   {number}  y1  Y coordinate of the first point
- * @param   {number}  x2  X coordinate of the second point
- * @param   {number}  y2  Y coordinate of the first point
- * @return  {number}  L2 distance
- */
-const dist = (x1, y1, x2, y2) =>
-  Math.sqrt((x1 - x2) ** 2 + (y1 - y2) ** 2);
+const FRAGMENT_SHADER$1 = `
+precision highp float;
 
-/**
- * Get the bounding box of a set of 2D positions
- * @param   {array}  positions2d  2D positions to be checked
- * @return  {array}  Quadruple of form `[xMin, yMin, xMax, yMax]` defining the
- *  bounding box
- */
-// biome-ignore lint/style/useNamingConvention: BBox stands for BoundingBox
-const getBBox = (positions2d) => {
-  let xMin = Number.POSITIVE_INFINITY;
-  let xMax = Number.NEGATIVE_INFINITY;
-  let yMin = Number.POSITIVE_INFINITY;
-  let yMax = Number.NEGATIVE_INFINITY;
+uniform float antiAliasing;
 
-  for (let i = 0; i < positions2d.length; i += 2) {
-    xMin = positions2d[i] < xMin ? positions2d[i] : xMin;
-    xMax = positions2d[i] > xMax ? positions2d[i] : xMax;
-    yMin = positions2d[i + 1] < yMin ? positions2d[i + 1] : yMin;
-    yMax = positions2d[i + 1] > yMax ? positions2d[i + 1] : yMax;
-  }
+varying vec4 color;
+varying float finalPointSize;
 
-  return [xMin, yMin, xMax, yMax];
-};
+float linearstep(float edge0, float edge1, float x) {
+  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
+}
 
-/**
- * Test whether a bounding box is actually specifying an area
- * @param   {array}  bBox  The bounding box to be checked
- * @return  {array}  `true` if the bounding box is valid
- */
-// biome-ignore lint/style/useNamingConvention: BBox stands for BoundingBox
-const isValidBBox = ([xMin, yMin, xMax, yMax]) =>
-  Number.isFinite(xMin) &&
-  Number.isFinite(yMin) &&
-  Number.isFinite(xMax) &&
-  Number.isFinite(yMax) &&
-  xMax - xMin > 0 &&
-  yMax - yMin > 0;
+void main() {
+  vec2 c = gl_PointCoord * 2.0 - 1.0;
+  float sdf = length(c) * finalPointSize;
+  float alpha = linearstep(finalPointSize + antiAliasing, finalPointSize - antiAliasing, sdf);
 
-const REGEX_HEX_TO_RGB = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  gl_FragColor = vec4(color.rgb, alpha * color.a);
+}
+`;
 
-/**
- * Convert a HEX-encoded color to an RGB-encoded color
- * @param   {string}  hex  HEX-encoded color string.
- * @param   {boolean}  isNormalize  If `true` the returned RGB values will be
- *   normalized to `[0,1]`.
- * @return  {array}  Triple holding the RGB values.
- */
-const hexToRgb = (hex, isNormalize = false) =>
-  hex
-    .replace(REGEX_HEX_TO_RGB, (_m, r, g, b) => `#${r}${r}${g}${g}${b}${b}`)
-    .substring(1)
-    .match(/.{2}/g)
-    .map((x) => Number.parseInt(x, 16) / 255 ** isNormalize);
+const createVertexShader = (globalState) => `
+precision highp float;
 
-const isConditionalArray = (a, condition, { minLength = 0 } = {}) =>
-  Array.isArray(a) && a.length >= minLength && a.every(condition);
+uniform sampler2D colorTex;
+uniform float colorTexRes;
+uniform float colorTexEps;
+uniform sampler2D stateTex;
+uniform float stateTexRes;
+uniform float stateTexEps;
+uniform float devicePixelRatio;
+uniform sampler2D encodingTex;
+uniform float encodingTexRes;
+uniform float encodingTexEps;
+uniform float pointSizeExtra;
+uniform float pointOpacityMax;
+uniform float pointOpacityScale;
+uniform float numPoints;
+uniform float globalState;
+uniform float isColoredByZ;
+uniform float isColoredByW;
+uniform float isOpacityByZ;
+uniform float isOpacityByW;
+uniform float isOpacityByDensity;
+uniform float isSizedByZ;
+uniform float isSizedByW;
+uniform float isPixelAligned;
+uniform float colorMultiplicator;
+uniform float opacityMultiplicator;
+uniform float opacityDensity;
+uniform float sizeMultiplicator;
+uniform float numColorStates;
+uniform float pointScale;
+uniform float drawingBufferWidth;
+uniform float drawingBufferHeight;
+uniform mat4 modelViewProjection;
 
-const isPositiveNumber = (x) => !Number.isNaN(+x) && +x >= 0;
+attribute vec2 stateIndex;
 
-const isStrictlyPositiveNumber = (x) => !Number.isNaN(+x) && +x > 0;
+varying vec4 color;
+varying float finalPointSize;
 
-/**
- * Create a function to limit choices to a predefined list
- * @param   {array}  choices  Array of acceptable choices
- * @param   {*}  defaultOption  Default choice
- * @return  {function}  Function limiting the choices
- */
-const limit = (choices, defaultChoice) => (choice) =>
-  choices.indexOf(choice) >= 0 ? choice : defaultChoice;
+void main() {
+  vec4 state = texture2D(stateTex, stateIndex);
 
-/**
- * Promised-based image loading
- * @param {string}  src  Remote image source, i.e., a URL
- * @param {boolean} isCrossOrigin If `true` allow loading image from a source of another origin.
- * @return  {Promise<HTMLImageElement>}  Promise resolving to the image once its loaded
- */
-const loadImage = (
-  src,
-  isCrossOrigin = false,
-  timeout = DEFAULT_IMAGE_LOAD_TIMEOUT,
-) =>
-  new Promise((resolve, reject) => {
-    const image = new Image();
-    if (isCrossOrigin) {
-      image.crossOrigin = 'anonymous';
-    }
-    image.src = src;
-    image.onload = () => {
-      resolve(image);
-    };
-    const rejectPromise = () => {
-      reject(new Error(IMAGE_LOAD_ERROR));
-    };
-    image.onerror = rejectPromise;
-    setTimeout(rejectPromise, timeout);
-  });
+  if (isPixelAligned < 0.5) {
+    gl_Position = modelViewProjection * vec4(state.x, state.y, 0.0, 1.0);
+  } else {
+    vec4 clipSpacePosition = modelViewProjection * vec4(state.x, state.y, 0.0, 1.0);
+    vec2 ndcPosition = clipSpacePosition.xy / clipSpacePosition.w;
+    vec2 pixelPos = 0.5 * (ndcPosition + 1.0) * vec2(drawingBufferWidth, drawingBufferHeight);
+    pixelPos = floor(pixelPos + 0.5); // Snap to nearest pixel
+    vec2 snappedPosition = (pixelPos / vec2(drawingBufferWidth, drawingBufferHeight)) * 2.0 - 1.0;
+    gl_Position = vec4(snappedPosition, 0.0, 1.0);
+  }
 
-/**
- * @deprecated Please use `scatterplot.createTextureFromUrl(url)`
- *
- * Create a Regl texture from an URL.
- * @param   {import('regl').Regl}  regl  Regl instance used for creating the texture.
- * @param   {string}  url  Source URL of the image.
- * @return  {Promise<import('regl').Texture2D>}  Promise resolving to the texture object.
- */
-const createTextureFromUrl = (
-  regl,
-  url,
-  timeout = DEFAULT_IMAGE_LOAD_TIMEOUT,
-) =>
-  new Promise((resolve, reject) => {
-    loadImage(
-      url,
-      url.indexOf(window.location.origin) !== 0 && url.indexOf('base64') === -1,
-      timeout,
-    )
-      .then((image) => {
-        resolve(regl.texture(image));
-      })
-      .catch((error) => {
-        reject(error);
-      });
-  });
 
-/**
- * Convert a HEX-encoded color to an RGBA-encoded color
- * @param   {string}  hex  HEX-encoded color string.
- * @param   {boolean}  isNormalize  If `true` the returned RGBA values will be
- *   normalized to `[0,1]`.
- * @return  {array}  Triple holding the RGBA values.
- */
-const hexToRgba = (hex, isNormalize = false) => [
-  ...hexToRgb(hex, isNormalize),
-  255 ** !isNormalize,
-];
+  // Determine color index
+  float colorIndexZ =  isColoredByZ * floor(state.z * colorMultiplicator);
+  float colorIndexW =  isColoredByW * floor(state.w * colorMultiplicator);
 
-const REGEX_IS_HEX = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i;
+  // Multiply by the number of color states per color
+  // I.e., normal, active, hover, background, etc.
+  float colorIndex = (colorIndexZ + colorIndexW) * numColorStates;
 
-/**
- * Tests if a string is a valid HEX color encoding
- * @param   {string}  hex  HEX-encoded color string.
- * @return  {boolean}  If `true` the string is a valid HEX color encoding.
- */
-const isHex = (hex) => REGEX_IS_HEX.test(hex);
+  // Half a "pixel" or "texel" in texture coordinates
+  float colorLinearIndex = colorIndex + globalState;
+
+  // Need to add cEps here to avoid floating point issue that can lead to
+  // dramatic changes in which color is loaded as floor(3/2.9999) = 1 but
+  // floor(3/3.0001) = 0!
+  float colorRowIndex = floor((colorLinearIndex + colorTexEps) / colorTexRes);
+
+  vec2 colorTexIndex = vec2(
+    (colorLinearIndex / colorTexRes) - colorRowIndex + colorTexEps,
+    colorRowIndex / colorTexRes + colorTexEps
+  );
 
-/**
- * Tests if a number is in `[0,1]`.
- * @param   {number}  x  Number to be tested.
- * @return  {boolean}  If `true` the number is in `[0,1]`.
- */
-const isNormFloat = (x) => x >= 0 && x <= 1;
+  color = texture2D(colorTex, colorTexIndex);
 
-/**
- * Tests if an array consist of normalized numbers that are in `[0,1]` only.
- * @param   {array}  a  Array to be tested
- * @return  {boolean}  If `true` the array contains only numbers in `[0,1]`.
- */
-const isNormFloatArray = (a) => Array.isArray(a) && a.every(isNormFloat);
+  // Retrieve point size
+  float pointSizeIndexZ = isSizedByZ * floor(state.z * sizeMultiplicator);
+  float pointSizeIndexW = isSizedByW * floor(state.w * sizeMultiplicator);
+  float pointSizeIndex = pointSizeIndexZ + pointSizeIndexW;
 
-/**
- * Computes the cross product to determine the orientation of three points
- * @param   {number}  x1  X-coordinate of first point
- * @param   {number}  y1  Y-coordinate of first point
- * @param   {number}  x2  X-coordinate of second point
- * @param   {number}  y2  Y-coordinate of second point
- * @param   {number}  px  X-coordinate of test point
- * @param   {number}  py  Y-coordinate of test point
- * @return  {number}  Positive if counterclockwise, negative if clockwise
- */
-function crossProduct(x1, y1, x2, y2, px, py) {
-  return (x2 - x1) * (py - y1) - (px - x1) * (y2 - y1);
-}
+  float pointSizeRowIndex = floor((pointSizeIndex + encodingTexEps) / encodingTexRes);
+  vec2 pointSizeTexIndex = vec2(
+    (pointSizeIndex / encodingTexRes) - pointSizeRowIndex + encodingTexEps,
+    pointSizeRowIndex / encodingTexRes + encodingTexEps
+  );
+  float pointSize = texture2D(encodingTex, pointSizeTexIndex).x;
 
-/**
- * Determines if a point lies within a polygon using the non-zero winding rule.
- * This handles self-intersecting polygons and overlapping areas correctly.
- * @param   {Array}  polygon  1D list of vertices defining the polygon [x1,y1,x2,y2,...]
- * @param   {Array}  point    Tuple of the form [x,y] to be tested
- * @return  {boolean} True if point lies within the polygon
- */
-const isPointInPolygon = (polygon, [px, py] = []) => {
-  let winding = 0;
+  // Retrieve opacity
+  ${
+    (() => {
+      // Drawing the inner border of selected points
+      if (globalState === 3) return '';
 
-  for (let i = 0, j = polygon.length - 2; i < polygon.length; i += 2) {
-    const x1 = polygon[i];
-    const y1 = polygon[i + 1];
-    const x2 = polygon[j];
-    const y2 = polygon[j + 1];
+      // Draw points with opacity encoding or dynamic opacity
+      return `
+        if (isOpacityByDensity < 0.5) {
+          float opacityIndexZ = isOpacityByZ * floor(state.z * opacityMultiplicator);
+          float opacityIndexW = isOpacityByW * floor(state.w * opacityMultiplicator);
+          float opacityIndex = opacityIndexZ + opacityIndexW;
 
-    if (y1 <= py) {
-      if (y2 > py) {
-        const orientation = crossProduct(x1, y1, x2, y2, px, py);
-        if (orientation > 0) {
-          winding++;
+          float opacityRowIndex = floor((opacityIndex + encodingTexEps) / encodingTexRes);
+          vec2 opacityTexIndex = vec2(
+            (opacityIndex / encodingTexRes) - opacityRowIndex + encodingTexEps,
+            opacityRowIndex / encodingTexRes + encodingTexEps
+          );
+          color.a = texture2D(encodingTex, opacityTexIndex)[${1 + globalState}];
+        } else {
+          color.a = min(1.0, opacityDensity + globalState);
         }
-      }
-    } else if (y2 <= py) {
-      const orientation = crossProduct(x1, y1, x2, y2, px, py);
-      if (orientation < 0) {
-        winding--;
-      }
-    }
-
-    j = i;
+      `;
+    })()
   }
 
-  return winding !== 0;
-};
+  color.a = min(pointOpacityMax, color.a) * pointOpacityScale;
+  finalPointSize = (pointSize * pointScale) + pointSizeExtra;
+  gl_PointSize = finalPointSize;
+}
+`;
 
-/**
- * Tests if a variable is a string
- * @param   {*}  s  Variable to be tested
- * @return  {boolean}  If `true` variable is a string
- */
-const isString = (s) => typeof s === 'string' || s instanceof String;
+const FRAGMENT_SHADER = `precision highp float;
 
-/**
- * Tests if a number is an interger and in `[0,255]`.
- * @param   {number}  x  Number to be tested.
- * @return  {boolean}  If `true` the number is an interger and in `[0,255]`.
- */
-const isUint8 = (x) => Number.isInteger(x) && x >= 0 && x <= 255;
+varying vec4 color;
 
-/**
- * Tests if an array consist of Uint8 numbers only.
- * @param   {array}  a  Array to be tested.
- * @return  {boolean}  If `true` the array contains only Uint8 numbers.
- */
-const isUint8Array = (a) => Array.isArray(a) && a.every(isUint8);
+void main() {
+  gl_FragColor = color;
+}
+`;
 
-/**
- * Tests if an array is encoding an RGB color.
- * @param   {array}  rgb  Array to be tested
- * @return  {boolean}  If `true` the array hold a triple of Uint8 numbers or
- *   a triple of normalized floats.
- */
-const isRgb = (rgb) =>
-  rgb.length === 3 && (isNormFloatArray(rgb) || isUint8Array(rgb));
+const SHADER$1 = `precision highp float;
 
-/**
- * Tests if an array is encoding an RGBA color.
- * @param   {array}  rgb  Array to be tested
- * @return  {boolean}  If `true` the array hold a quadruple of Uint8 numbers or
- *   a quadruple of normalized floats.
- */
-const isRgba = (rgba) =>
-  rgba.length === 4 && (isNormFloatArray(rgba) || isUint8Array(rgba));
+uniform sampler2D startStateTex;
+uniform sampler2D endStateTex;
+uniform float t;
 
-/**
- * Test if a color is multiple colors
- * @param   {*}  color  To be tested
- * @return  {boolean}  If `true`, `color` is an array of colors.
- */
-const isMultipleColors = (color) =>
-  Array.isArray(color) &&
-  color.length > 0 &&
-  (Array.isArray(color[0]) || isString(color[0]));
+varying vec2 particleTextureIndex;
 
-/**
- * Test if two arrays contain the same RGBA quadruples
- */
-const isSameRgbas = (a, b) => {
-  if (!(Array.isArray(a) && Array.isArray(b)) || a.length !== b.length) {
-    return false;
-  }
+void main() {
+  // Interpolate x, y, and value
+  vec3 start = texture2D(startStateTex, particleTextureIndex).xyw;
+  vec3 end = texture2D(endStateTex, particleTextureIndex).xyw;
+  vec3 curr = start * (1.0 - t) + end * t;
 
-  if (a.length === 0) {
-    return true;
-  }
+  // The category cannot be interpolated
+  float endCategory = texture2D(endStateTex, particleTextureIndex).z;
 
-  // We need to test whether a and b are arrays of RGBA quadruples
-  if (!(Array.isArray(a[0]) && Array.isArray(b[0]))) {
-    return false;
-  }
+  gl_FragColor = vec4(curr.xy, endCategory, curr.z);
+}`;
 
-  return a.every(([r1, g1, b1, a1], i) => {
-    const [r2, g2, b2, a2] = b[i];
-    return r1 === r2 && g1 === g2 && b1 === b2 && a1 === a2;
-  });
-};
+const SHADER = `precision highp float;
 
-/**
- * Fast version of `Math.max`. Based on
- *   https://jsperf.com/math-min-max-vs-ternary-vs-if/24 `Math.max` is not
- *   very fast
- * @param   {number}  a  Value A
- * @param   {number}  b  Value B
- * @return  {boolean}  If `true` A is greater than B.
- */
-const max = (a, b) => (a > b ? a : b);
+attribute vec2 position;
+varying vec2 particleTextureIndex;
 
-/**
- * Fast version of `Math.min`. Based on
- *   https://jsperf.com/math-min-max-vs-ternary-vs-if/24 `Math.max` is not
- *   very fast
- * @param   {number}  a  Value A
- * @param   {number}  b  Value B
- * @return  {boolean}  If `true` A is smaller than B.
- */
-const min = (a, b) => (a < b ? a : b);
+void main() {
+  // map normalized device coords to texture coords
+  particleTextureIndex = 0.5 * (1.0 + position);
+
+  gl_Position = vec4(position, 0, 1);
+}`;
 
 /**
- * Convert a color to an RGBA color
- * @param   {*}  color  Color to be converted. Currently supports:
- *   HEX, RGB, or RGBA.
- * @param   {boolean}  isNormalize  If `true` the returned RGBA values will be
- *   normalized to `[0,1]`.
- * @return  {array}  Quadruple defining an RGBA color.
+ * Check if all GL extensions are supported and enabled and warn otherwise
+ * @param   {import('regl').Regl}  regl  Regl instance to be tested
+ * @param   {boolean}  silent  If `true` the function will not print `console.warn` statements
+ * @return  {boolean}  If `true` all required GL extensions are supported
  */
-const toRgba = (color, shouldNormalize) => {
-  if (isRgba(color)) {
-    const isNormalized = isNormFloatArray(color);
-    if (
-      (shouldNormalize && isNormalized) ||
-      !(shouldNormalize || isNormalized)
-    ) {
-      return color;
-    }
-    if (shouldNormalize && !isNormalized) {
-      return color.map((x) => x / 255);
-    }
-    return color.map((x) => x * 255);
-  }
-
-  if (isRgb(color)) {
-    const base = 255 ** !shouldNormalize;
-    const isNormalized = isNormFloatArray(color);
-
-    if (
-      (shouldNormalize && isNormalized) ||
-      !(shouldNormalize || isNormalized)
-    ) {
-      return [...color, base];
-    }
-    if (shouldNormalize && !isNormalized) {
-      return [...color.map((x) => x / 255), base];
-    }
-    return [...color.map((x) => x * 255), base];
-  }
-
-  if (isHex(color)) {
-    return hexToRgba(color, shouldNormalize);
+const checkReglExtensions = (regl, silent) => {
+  if (!regl) {
+    return false;
   }
-
-  // biome-ignore lint/suspicious/noConsole: This is a legitimately useful warning
-  console.warn(
-    'Only HEX, RGB, and RGBA are handled by this function. Returning white instead.',
-  );
-  return shouldNormalize ? [1, 1, 1, 1] : [255, 255, 255, 255];
+  return GL_EXTENSIONS.reduce((every, extension) => {
+    if (!regl.hasExtension(extension)) {
+      if (!silent) {
+        // biome-ignore lint/suspicious/noConsole: This is a legitimately useful warning
+        console.warn(
+          `WebGL: ${extension} extension not supported. Scatterplot might not render properly`,
+        );
+      }
+      return false;
+    }
+    return every;
+  }, true);
 };
 
 /**
- * Flip the key-value pairs of an object
- * @param {object} obj - Object to be flipped
- * @return {object} Flipped object
+ * Create a new Regl instance with `GL_EXTENSIONS` enables
+ * @param   {HTMLCanvasElement}  canvas  Canvas element to be rendered on
+ * @return  {import('regl').Regl}  New Regl instance
  */
-const flipObj = (obj) =>
-  Object.entries(obj).reduce((out, [key, value]) => {
-    if (out[value]) {
-      out[value] = [...out[value], key];
+const createRegl = (canvas) => {
+  const gl = canvas.getContext('webgl', {
+    antialias: true,
+    preserveDrawingBuffer: true,
+  });
+  const extensions = [];
+
+  // Needed to run the tests properly as the headless-gl doesn't support all
+  // extensions, which is fine for the functional tests.
+  for (const extension of GL_EXTENSIONS) {
+    if (gl.getExtension(extension)) {
+      extensions.push(extension);
     } else {
-      out[value] = key;
+      // biome-ignore lint/suspicious/noConsole: This is a legitimately useful warning
+      console.warn(
+        `WebGL: ${extension} extension not supported. Scatterplot might not render properly`,
+      );
     }
-    return out;
-  }, {});
+  }
 
-const rgbBrightness = (rgb) =>
-  0.21 * rgb[0] + 0.72 * rgb[1] + 0.07 * rgb[2];
+  return createOriginalRegl({ gl, extensions });
+};
 
 /**
- * Clip a number between min and max
- * @param {number} value - The value to be clipped
- * @param {number} minValue - The minimum value
- * @param {number} maxValue - The maximum value
- * @return {number} The clipped value
+ * L2 distance between a pair of 2D points
+ * @param   {number}  x1  X coordinate of the first point
+ * @param   {number}  y1  Y coordinate of the first point
+ * @param   {number}  x2  X coordinate of the second point
+ * @param   {number}  y2  Y coordinate of the first point
+ * @return  {number}  L2 distance
  */
-const clip = (value, minValue, maxValue) =>
-  Math.min(maxValue, Math.max(minValue, value));
+const dist = (x1, y1, x2, y2) =>
+  Math.sqrt((x1 - x2) ** 2 + (y1 - y2) ** 2);
 
 /**
- * Convert object- or array-oriented points to array-oriented points
- * @param {import('./types').Points} points - The point data
- * @return {number[][]} Array-oriented points
+ * Get the bounding box of a set of 2D positions
+ * @param   {array}  positions2d  2D positions to be checked
+ * @return  {array}  Quadruple of form `[xMin, yMin, xMax, yMax]` defining the
+ *  bounding box
  */
-const toArrayOrientedPoints = (points) =>
-  new Promise((resolve, reject) => {
-    if (!points || Array.isArray(points)) {
-      resolve(points);
-    } else {
-      const length =
-        Array.isArray(points.x) || ArrayBuffer.isView(points.x)
-          ? points.x.length
-          : 0;
+const getBBox = (positions2d) => {
+  let xMin = Number.POSITIVE_INFINITY;
+  let xMax = Number.NEGATIVE_INFINITY;
+  let yMin = Number.POSITIVE_INFINITY;
+  let yMax = Number.NEGATIVE_INFINITY;
 
-      const getX =
-        (Array.isArray(points.x) || ArrayBuffer.isView(points.x)) &&
-        ((i) => points.x[i]);
-      const getY =
-        (Array.isArray(points.y) || ArrayBuffer.isView(points.y)) &&
-        ((i) => points.y[i]);
-      const getL =
-        (Array.isArray(points.line) || ArrayBuffer.isView(points.line)) &&
-        ((i) => points.line[i]);
+  for (let i = 0; i < positions2d.length; i += 2) {
+    xMin = positions2d[i] < xMin ? positions2d[i] : xMin;
+    xMax = positions2d[i] > xMax ? positions2d[i] : xMax;
+    yMin = positions2d[i + 1] < yMin ? positions2d[i + 1] : yMin;
+    yMax = positions2d[i + 1] > yMax ? positions2d[i + 1] : yMax;
+  }
 
-      // biome-ignore lint/style/useNamingConvention: LO stands for line and order
-      const getLO =
-        (Array.isArray(points.lineOrder) ||
-          ArrayBuffer.isView(points.lineOrder)) &&
-        ((i) => points.lineOrder[i]);
+  return [xMin, yMin, xMax, yMax];
+};
 
-      const components = Object.keys(points);
-      const getZ = (() => {
-        const z = components.find((c) => Z_NAMES.has(c));
-        return (
-          z &&
-          (Array.isArray(points[z]) || ArrayBuffer.isView(points[z])) &&
-          ((i) => points[z][i])
-        );
-      })();
-      const getW = (() => {
-        const w = components.find((c) => W_NAMES.has(c));
-        return (
-          w &&
-          (Array.isArray(points[w]) || ArrayBuffer.isView(points[w])) &&
-          ((i) => points[w][i])
-        );
-      })();
+/**
+ * Test whether a bounding box is actually specifying an area
+ * @param   {array}  bBox  The bounding box to be checked
+ * @return  {array}  `true` if the bounding box is valid
+ */
+const isValidBBox = ([xMin, yMin, xMax, yMax]) =>
+  Number.isFinite(xMin) &&
+  Number.isFinite(yMin) &&
+  Number.isFinite(xMax) &&
+  Number.isFinite(yMax) &&
+  xMax - xMin > 0 &&
+  yMax - yMin > 0;
 
-      if (getX && getY && getZ && getW && getL && getLO) {
-        resolve(
-          points.x.map((x, i) => [
-            x,
-            getY(i),
-            getZ(i),
-            getW(i),
-            getL(i),
-            getLO(i),
-          ]),
-        );
-      } else if (getX && getY && getZ && getW && getL) {
-        resolve(
-          Array.from({ length }, (_, i) => [
-            getX(i),
-            getY(i),
-            getZ(i),
-            getW(i),
-            getL(i),
-          ]),
-        );
-      } else if (getX && getY && getZ && getW) {
-        resolve(
-          Array.from({ length }, (_, i) => [
-            getX(i),
-            getY(i),
-            getZ(i),
-            getW(i),
-          ]),
-        );
-      } else if (getX && getY && getZ) {
-        resolve(Array.from({ length }, (_, i) => [getX(i), getY(i), getZ(i)]));
-      } else if (getX && getY) {
-        resolve(Array.from({ length }, (_, i) => [getX(i), getY(i)]));
-      } else {
-        reject(new Error('You need to specify at least x and y'));
-      }
-    }
-  });
+const REGEX_HEX_TO_RGB = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
 
-const isHorizontalLine = (annotation) =>
-  Number.isFinite(annotation.y) && !('x' in annotation);
+/**
+ * Convert a HEX-encoded color to an RGB-encoded color
+ * @param   {string}  hex  HEX-encoded color string.
+ * @param   {boolean}  isNormalize  If `true` the returned RGB values will be
+ *   normalized to `[0,1]`.
+ * @return  {array}  Triple holding the RGB values.
+ */
+const hexToRgb = (hex, isNormalize = false) =>
+  hex
+    .replace(REGEX_HEX_TO_RGB, (_m, r, g, b) => `#${r}${r}${g}${g}${b}${b}`)
+    .substring(1)
+    .match(/.{2}/g)
+    .map((x) => Number.parseInt(x, 16) / 255 ** isNormalize);
 
-const isVerticalLine = (annotation) =>
-  Number.isFinite(annotation.x) && !('y' in annotation);
+const isConditionalArray = (a, condition, { minLength = 0 } = {}) =>
+  Array.isArray(a) && a.length >= minLength && a.every(condition);
 
-const isDomRect = (annotation) =>
-  Number.isFinite(annotation.x) &&
-  Number.isFinite(annotation.y) &&
-  Number.isFinite(annotation.width) &&
-  Number.isFinite(annotation.height);
+const isPositiveNumber = (x) => !Number.isNaN(+x) && +x >= 0;
 
-const isRect = (annotation) =>
-  Number.isFinite(annotation.x1) &&
-  Number.isFinite(annotation.y1) &&
-  Number.isFinite(annotation.x2) &&
-  Number.isFinite(annotation.x2);
+const isStrictlyPositiveNumber = (x) => !Number.isNaN(+x) && +x > 0;
 
-const isPolygon = (annotation) =>
-  'vertices' in annotation && annotation.vertices.length > 1;
+/**
+ * Create a function to limit choices to a predefined list
+ * @param   {array}  choices  Array of acceptable choices
+ * @param   {*}  defaultOption  Default choice
+ * @return  {function}  Function limiting the choices
+ */
+const limit = (choices, defaultChoice) => (choice) =>
+  choices.indexOf(choice) >= 0 ? choice : defaultChoice;
 
-const insertionSort = (array) => {
-  const end = array.length;
-  for (let i = 1; i < end; i++) {
-    // Choosing the first element in our unsorted subarray
-    const current = array[i];
-    // The last element of our sorted subarray
-    let j = i - 1;
-    while (j > -1 && current < array[j]) {
-      array[j + 1] = array[j];
-      j--;
+/**
+ * Promised-based image loading
+ * @param {string}  src  Remote image source, i.e., a URL
+ * @param {boolean} isCrossOrigin If `true` allow loading image from a source of another origin.
+ * @return  {Promise<HTMLImageElement>}  Promise resolving to the image once its loaded
+ */
+const loadImage = (
+  src,
+  isCrossOrigin = false,
+  timeout = DEFAULT_IMAGE_LOAD_TIMEOUT,
+) =>
+  new Promise((resolve, reject) => {
+    const image = new Image();
+    if (isCrossOrigin) {
+      image.crossOrigin = 'anonymous';
     }
-    array[j + 1] = current;
-  }
-  return array;
-};
-
-const createRenderer = (
-  /** @type {Partial<import('./types').RendererOptions>} */ options = {},
-) => {
-  let {
-    regl,
-    canvas = document.createElement('canvas'),
-    gamma = DEFAULT_GAMMA,
-  } = options;
+    image.src = src;
+    image.onload = () => {
+      resolve(image);
+    };
+    const rejectPromise = () => {
+      reject(new Error(IMAGE_LOAD_ERROR));
+    };
+    image.onerror = rejectPromise;
+    setTimeout(rejectPromise, timeout);
+  });
 
-  let isDestroyed = false;
+/**
+ * @deprecated Please use `scatterplot.createTextureFromUrl(url)`
+ *
+ * Create a Regl texture from an URL.
+ * @param   {import('regl').Regl}  regl  Regl instance used for creating the texture.
+ * @param   {string}  url  Source URL of the image.
+ * @return  {Promise<import('regl').Texture2D>}  Promise resolving to the texture object.
+ */
+const createTextureFromUrl = (
+  regl,
+  url,
+  timeout = DEFAULT_IMAGE_LOAD_TIMEOUT,
+) =>
+  new Promise((resolve, reject) => {
+    loadImage(
+      url,
+      url.indexOf(window.location.origin) !== 0 && url.indexOf('base64') === -1,
+      timeout,
+    )
+      .then((image) => {
+        resolve(regl.texture(image));
+      })
+      .catch((error) => {
+        reject(error);
+      });
+  });
 
-  if (!regl) {
-    regl = createRegl(canvas);
-  }
+/**
+ * Convert a HEX-encoded color to an RGBA-encoded color
+ * @param   {string}  hex  HEX-encoded color string.
+ * @param   {boolean}  isNormalize  If `true` the returned RGBA values will be
+ *   normalized to `[0,1]`.
+ * @return  {array}  Triple holding the RGBA values.
+ */
+const hexToRgba = (hex, isNormalize = false) => [
+  ...hexToRgb(hex, isNormalize),
+  255 ** !isNormalize,
+];
 
-  const isSupportingAllGlExtensions = checkReglExtensions(regl);
+const REGEX_IS_HEX = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i;
 
-  const fboRes = [canvas.width, canvas.height];
-  const fbo = regl.framebuffer({
-    width: fboRes[0],
-    height: fboRes[1],
-    colorFormat: 'rgba',
-    colorType: 'float',
-  });
+/**
+ * Tests if a string is a valid HEX color encoding
+ * @param   {string}  hex  HEX-encoded color string.
+ * @return  {boolean}  If `true` the string is a valid HEX color encoding.
+ */
+const isHex = (hex) => REGEX_IS_HEX.test(hex);
 
-  /**
-   * Render the float32 framebuffer to the internal canvas
-   *
-   * From https://observablehq.com/@rreusser/selecting-the-right-opacity-for-2d-point-clouds
-   */
-  const renderToCanvas = regl({
-    vert: `
-      precision highp float;
-      attribute vec2 xy;
-      void main () {
-        gl_Position = vec4(xy, 0, 1);
-      }`,
-    frag: `
-      precision highp float;
-      uniform vec2 srcRes;
-      uniform sampler2D src;
-      uniform float gamma;
+/**
+ * Tests if a number is in `[0,1]`.
+ * @param   {number}  x  Number to be tested.
+ * @return  {boolean}  If `true` the number is in `[0,1]`.
+ */
+const isNormFloat = (x) => x >= 0 && x <= 1;
 
-      vec3 approxLinearToSRGB (vec3 rgb, float gamma) {
-        return pow(clamp(rgb, vec3(0), vec3(1)), vec3(1.0 / gamma));
-      }
+/**
+ * Tests if an array consist of normalized numbers that are in `[0,1]` only.
+ * @param   {array}  a  Array to be tested
+ * @return  {boolean}  If `true` the array contains only numbers in `[0,1]`.
+ */
+const isNormFloatArray = (a) => Array.isArray(a) && a.every(isNormFloat);
 
-      void main () {
-        vec4 color = texture2D(src, gl_FragCoord.xy / srcRes);
-        gl_FragColor = vec4(approxLinearToSRGB(color.rgb, gamma), color.a);
-      }`,
-    attributes: {
-      xy: [-4, -4, 4, -4, 0, 4],
-    },
-    uniforms: {
-      src: () => fbo,
-      srcRes: () => fboRes,
-      gamma: () => gamma,
-    },
-    count: 3,
-    depth: { enable: false },
-    blend: {
-      enable: true,
-      func: {
-        // biome-ignore lint/style/useNamingConvention: Regl internal
-        srcRGB: 'one',
-        srcAlpha: 'one',
-        // biome-ignore lint/style/useNamingConvention: Regl internal
-        dstRGB: 'one minus src alpha',
-        dstAlpha: 'one minus src alpha',
-      },
-    },
-  });
+/**
+ * Computes the cross product to determine the orientation of three points
+ * @param   {number}  x1  X-coordinate of first point
+ * @param   {number}  y1  Y-coordinate of first point
+ * @param   {number}  x2  X-coordinate of second point
+ * @param   {number}  y2  Y-coordinate of second point
+ * @param   {number}  px  X-coordinate of test point
+ * @param   {number}  py  Y-coordinate of test point
+ * @return  {number}  Positive if counterclockwise, negative if clockwise
+ */
+function crossProduct(x1, y1, x2, y2, px, py) {
+  return (x2 - x1) * (py - y1) - (px - x1) * (y2 - y1);
+}
 
-  /**
-   * Copy the pixels from the internal canvas onto the target canvas
-   */
-  const copyTo = (targetCanvas) => {
-    const ctx = targetCanvas.getContext('2d');
-    ctx.clearRect(0, 0, targetCanvas.width, targetCanvas.height);
-    ctx.drawImage(
-      canvas,
-      (canvas.width - targetCanvas.width) / 2,
-      (canvas.height - targetCanvas.height) / 2,
-      targetCanvas.width,
-      targetCanvas.height,
-      0,
-      0,
-      targetCanvas.width,
-      targetCanvas.height,
-    );
-  };
+/**
+ * Determines if a point lies within a polygon using the non-zero winding rule.
+ * This handles self-intersecting polygons and overlapping areas correctly.
+ * @param   {Array}  polygon  1D list of vertices defining the polygon [x1,y1,x2,y2,...]
+ * @param   {Array}  point    Tuple of the form [x,y] to be tested
+ * @return  {boolean} True if point lies within the polygon
+ */
+const isPointInPolygon = (polygon, [px, py] = []) => {
+  let winding = 0;
 
-  /**
-   * The render function
-   */
-  const render = (
-    /** @type {(): void} */ draw,
-    /** @type {HTMLCanvasElement} */ targetCanvas,
-  ) => {
-    // Clear internal canvas
-    regl.clear(CLEAR_OPTIONS);
-    fbo.use(() => {
-      // Clear framebuffer
-      regl.clear(CLEAR_OPTIONS);
-      draw();
-    });
-    renderToCanvas();
-    copyTo(targetCanvas);
-  };
+  for (let i = 0, j = polygon.length - 2; i < polygon.length; i += 2) {
+    const x1 = polygon[i];
+    const y1 = polygon[i + 1];
+    const x2 = polygon[j];
+    const y2 = polygon[j + 1];
 
-  /**
-   * Update Regl's viewport, drawingBufferWidth, and drawingBufferHeight
-   *
-   * @description Call this method after the viewport has changed, e.g., width
-   * or height have been altered
-   */
-  const refresh = () => {
-    regl.poll();
-  };
+    if (y1 <= py) {
+      if (y2 > py) {
+        const orientation = crossProduct(x1, y1, x2, y2, px, py);
+        if (orientation > 0) {
+          winding++;
+        }
+      }
+    } else if (y2 <= py) {
+      const orientation = crossProduct(x1, y1, x2, y2, px, py);
+      if (orientation < 0) {
+        winding--;
+      }
+    }
 
-  const drawFns = new Set();
+    j = i;
+  }
 
-  /**
-   * Register an draw function that is going to be invoked on every animation
-   * frame.
-   */
-  const onFrame = (/** @type {(): void} */ draw) => {
-    drawFns.add(draw);
-    return () => {
-      drawFns.delete(draw);
-    };
-  };
+  return winding !== 0;
+};
 
-  const frame = regl.frame(() => {
-    const iterator = drawFns.values();
-    let result = iterator.next();
-    while (!result.done) {
-      result.value(); // The draw function
-      result = iterator.next();
-    }
-  });
+/**
+ * Tests if a variable is a string
+ * @param   {*}  s  Variable to be tested
+ * @return  {boolean}  If `true` variable is a string
+ */
+const isString = (s) => typeof s === 'string' || s instanceof String;
 
-  const resize = (
-    /** @type {number} */ customWidth,
-    /** @type {number} */ customHeight,
-  ) => {
-    // We need to limit the width and height by the screen size to prevent
-    // a bug in VSCode where the window height is said to be taller than the
-    // screen height. The problem with too large dimensions is that at some
-    // point WebGL will break down because there's an upper limit on how large
-    // any buffer and texture can be. It also harms the performance quite a bit.
-    //
-    // By restricting the widht/height to the screen size we should have a safe
-    // upper limit for the canvas size.
-    //
-    // @see
-    // https://github.com/microsoft/vscode/issues/225808
-    // https://github.com/flekschas/jupyter-scatter/issues/37
-    const width =
-      customWidth === undefined
-        ? Math.min(window.innerWidth, window.screen.availWidth)
-        : customWidth;
-    const height =
-      customHeight === undefined
-        ? Math.min(window.innerHeight, window.screen.availHeight)
-        : customHeight;
-    canvas.width = width * window.devicePixelRatio;
-    canvas.height = height * window.devicePixelRatio;
-    fboRes[0] = canvas.width;
-    fboRes[1] = canvas.height;
-    fbo.resize(...fboRes);
-  };
+/**
+ * Tests if a number is an interger and in `[0,255]`.
+ * @param   {number}  x  Number to be tested.
+ * @return  {boolean}  If `true` the number is an interger and in `[0,255]`.
+ */
+const isUint8 = (x) => Number.isInteger(x) && x >= 0 && x <= 255;
 
-  const resizeHandler = () => {
-    resize();
-  };
+/**
+ * Tests if an array consist of Uint8 numbers only.
+ * @param   {array}  a  Array to be tested.
+ * @return  {boolean}  If `true` the array contains only Uint8 numbers.
+ */
+const isUint8Array = (a) => Array.isArray(a) && a.every(isUint8);
 
-  if (!options.canvas) {
-    window.addEventListener('resize', resizeHandler);
-    window.addEventListener('orientationchange', resizeHandler);
-    resize();
-  }
+/**
+ * Tests if an array is encoding an RGB color.
+ * @param   {array}  rgb  Array to be tested
+ * @return  {boolean}  If `true` the array hold a triple of Uint8 numbers or
+ *   a triple of normalized floats.
+ */
+const isRgb = (rgb) =>
+  rgb.length === 3 && (isNormFloatArray(rgb) || isUint8Array(rgb));
 
-  /**
-   * Destroy the renderer to free resources and cancel animation frames
-   */
-  const destroy = () => {
-    isDestroyed = true;
-    window.removeEventListener('resize', resizeHandler);
-    window.removeEventListener('orientationchange', resizeHandler);
-    frame.cancel();
-    canvas = undefined;
-    regl.destroy();
-    regl = undefined;
-  };
+/**
+ * Tests if an array is encoding an RGBA color.
+ * @param   {array}  rgb  Array to be tested
+ * @return  {boolean}  If `true` the array hold a quadruple of Uint8 numbers or
+ *   a quadruple of normalized floats.
+ */
+const isRgba = (rgba) =>
+  rgba.length === 4 && (isNormFloatArray(rgba) || isUint8Array(rgba));
 
-  return {
-    /**
-     * Get the associated canvas element
-     * @return {HTMLCanvasElement} The associated canvas element
-     */
-    get canvas() {
-      return canvas;
-    },
-    /**
-     * Get the associated Regl instance
-     * @return {import('regl').Regl} The associated Regl instance
-     */
-    get regl() {
-      return regl;
-    },
-    /**
-     * Get the gamma value
-     * @return {number} The gamma value
-     */
-    get gamma() {
-      return gamma;
-    },
-    /**
-     * Set gamma to a new value
-     * @param {number} newGamma - The new gamma value
-     */
-    set gamma(newGamma) {
-      gamma = +newGamma;
-    },
-    /**
-     * Get whether the browser supports all necessary WebGL features
-     * @return {boolean} If `true` the browser supports all necessary WebGL features
-     */
-    get isSupported() {
-      return isSupportingAllGlExtensions;
-    },
-    /**
-     * Get whether the renderer (and its Regl instance) is destroyed
-     * @return {boolean} If `true` the renderer is destroyed
-     */
-    get isDestroyed() {
-      return isDestroyed;
-    },
-    render,
-    resize,
-    onFrame,
-    refresh,
-    destroy,
-  };
-};
+/**
+ * Test if a color is multiple colors
+ * @param   {*}  color  To be tested
+ * @return  {boolean}  If `true`, `color` is an array of colors.
+ */
+const isMultipleColors = (color) =>
+  Array.isArray(color) &&
+  color.length > 0 &&
+  (Array.isArray(color[0]) || isString(color[0]));
 
-const FRAGMENT_SHADER$2 = `
-precision mediump float;
+/**
+ * Test if two arrays contain the same RGBA quadruples
+ */
+const isSameRgbas = (a, b) => {
+  if (!(Array.isArray(a) && Array.isArray(b)) || a.length !== b.length) {
+    return false;
+  }
 
-uniform sampler2D texture;
+  if (a.length === 0) {
+    return true;
+  }
 
-varying vec2 uv;
+  // We need to test whether a and b are arrays of RGBA quadruples
+  if (!(Array.isArray(a[0]) && Array.isArray(b[0]))) {
+    return false;
+  }
 
-void main () {
-  gl_FragColor = texture2D(texture, uv);
-}
-`;
+  return a.every(([r1, g1, b1, a1], i) => {
+    const [r2, g2, b2, a2] = b[i];
+    return r1 === r2 && g1 === g2 && b1 === b2 && a1 === a2;
+  });
+};
 
-const VERTEX_SHADER = `
-precision mediump float;
+/**
+ * Fast version of `Math.max`. Based on
+ *   https://jsperf.com/math-min-max-vs-ternary-vs-if/24 `Math.max` is not
+ *   very fast
+ * @param   {number}  a  Value A
+ * @param   {number}  b  Value B
+ * @return  {boolean}  If `true` A is greater than B.
+ */
+const max = (a, b) => (a > b ? a : b);
 
-uniform mat4 modelViewProjection;
+/**
+ * Fast version of `Math.min`. Based on
+ *   https://jsperf.com/math-min-max-vs-ternary-vs-if/24 `Math.max` is not
+ *   very fast
+ * @param   {number}  a  Value A
+ * @param   {number}  b  Value B
+ * @return  {boolean}  If `true` A is smaller than B.
+ */
+const min = (a, b) => (a < b ? a : b);
 
-attribute vec2 position;
+/**
+ * Convert a color to an RGBA color
+ * @param   {*}  color  Color to be converted. Currently supports:
+ *   HEX, RGB, or RGBA.
+ * @param   {boolean}  isNormalize  If `true` the returned RGBA values will be
+ *   normalized to `[0,1]`.
+ * @return  {array}  Quadruple defining an RGBA color.
+ */
+const toRgba = (color, shouldNormalize) => {
+  if (isRgba(color)) {
+    const isNormalized = isNormFloatArray(color);
+    if (
+      (shouldNormalize && isNormalized) ||
+      !(shouldNormalize || isNormalized)
+    ) {
+      return color;
+    }
+    if (shouldNormalize && !isNormalized) {
+      return color.map((x) => x / 255);
+    }
+    return color.map((x) => x * 255);
+  }
 
-varying vec2 uv;
+  if (isRgb(color)) {
+    const base = 255 ** !shouldNormalize;
+    const isNormalized = isNormFloatArray(color);
 
-void main () {
-  uv = position;
-  gl_Position = modelViewProjection * vec4(-1.0 + 2.0 * uv.x, 1.0 - 2.0 * uv.y, 0, 1);
-}
-`;
+    if (
+      (shouldNormalize && isNormalized) ||
+      !(shouldNormalize || isNormalized)
+    ) {
+      return [...color, base];
+    }
+    if (shouldNormalize && !isNormalized) {
+      return [...color.map((x) => x / 255), base];
+    }
+    return [...color.map((x) => x * 255), base];
+  }
 
-const FRAGMENT_SHADER$1 = `precision highp float;
+  if (isHex(color)) {
+    return hexToRgba(color, shouldNormalize);
+  }
 
-varying vec4 color;
+  // biome-ignore lint/suspicious/noConsole: This is a legitimately useful warning
+  console.warn(
+    'Only HEX, RGB, and RGBA are handled by this function. Returning white instead.',
+  );
+  return shouldNormalize ? [1, 1, 1, 1] : [255, 255, 255, 255];
+};
 
-void main() {
-  gl_FragColor = color;
-}
-`;
+/**
+ * Flip the key-value pairs of an object
+ * @param {object} obj - Object to be flipped
+ * @return {object} Flipped object
+ */
+const flipObj = (obj) =>
+  Object.entries(obj).reduce((out, [key, value]) => {
+    if (out[value]) {
+      out[value] = [...out[value], key];
+    } else {
+      out[value] = key;
+    }
+    return out;
+  }, {});
 
-const SHADER$1 = `precision highp float;
+const rgbBrightness = (rgb) =>
+  0.21 * rgb[0] + 0.72 * rgb[1] + 0.07 * rgb[2];
 
-uniform sampler2D startStateTex;
-uniform sampler2D endStateTex;
-uniform float t;
+/**
+ * Clip a number between min and max
+ * @param {number} value - The value to be clipped
+ * @param {number} minValue - The minimum value
+ * @param {number} maxValue - The maximum value
+ * @return {number} The clipped value
+ */
+const clip = (value, minValue, maxValue) =>
+  Math.min(maxValue, Math.max(minValue, value));
 
-varying vec2 particleTextureIndex;
+/**
+ * Convert object- or array-oriented points to array-oriented points
+ * @param {import('./types').Points} points - The point data
+ * @return {number[][]} Array-oriented points
+ */
+const toArrayOrientedPoints = (points) =>
+  new Promise((resolve, reject) => {
+    if (!points || Array.isArray(points)) {
+      resolve(points);
+    } else {
+      const length =
+        Array.isArray(points.x) || ArrayBuffer.isView(points.x)
+          ? points.x.length
+          : 0;
 
-void main() {
-  // Interpolate x, y, and value
-  vec3 start = texture2D(startStateTex, particleTextureIndex).xyw;
-  vec3 end = texture2D(endStateTex, particleTextureIndex).xyw;
-  vec3 curr = start * (1.0 - t) + end * t;
+      const getX =
+        (Array.isArray(points.x) || ArrayBuffer.isView(points.x)) &&
+        ((i) => points.x[i]);
+      const getY =
+        (Array.isArray(points.y) || ArrayBuffer.isView(points.y)) &&
+        ((i) => points.y[i]);
+      const getL =
+        (Array.isArray(points.line) || ArrayBuffer.isView(points.line)) &&
+        ((i) => points.line[i]);
 
-  // The category cannot be interpolated
-  float endCategory = texture2D(endStateTex, particleTextureIndex).z;
+      const getLO =
+        (Array.isArray(points.lineOrder) ||
+          ArrayBuffer.isView(points.lineOrder)) &&
+        ((i) => points.lineOrder[i]);
 
-  gl_FragColor = vec4(curr.xy, endCategory, curr.z);
-}`;
+      const components = Object.keys(points);
+      const getZ = (() => {
+        const z = components.find((c) => Z_NAMES.has(c));
+        return (
+          z &&
+          (Array.isArray(points[z]) || ArrayBuffer.isView(points[z])) &&
+          ((i) => points[z][i])
+        );
+      })();
+      const getW = (() => {
+        const w = components.find((c) => W_NAMES.has(c));
+        return (
+          w &&
+          (Array.isArray(points[w]) || ArrayBuffer.isView(points[w])) &&
+          ((i) => points[w][i])
+        );
+      })();
 
-const SHADER = `precision highp float;
+      if (getX && getY && getZ && getW && getL && getLO) {
+        resolve(
+          points.x.map((x, i) => [
+            x,
+            getY(i),
+            getZ(i),
+            getW(i),
+            getL(i),
+            getLO(i),
+          ]),
+        );
+      } else if (getX && getY && getZ && getW && getL) {
+        resolve(
+          Array.from({ length }, (_, i) => [
+            getX(i),
+            getY(i),
+            getZ(i),
+            getW(i),
+            getL(i),
+          ]),
+        );
+      } else if (getX && getY && getZ && getW) {
+        resolve(
+          Array.from({ length }, (_, i) => [
+            getX(i),
+            getY(i),
+            getZ(i),
+            getW(i),
+          ]),
+        );
+      } else if (getX && getY && getZ) {
+        resolve(Array.from({ length }, (_, i) => [getX(i), getY(i), getZ(i)]));
+      } else if (getX && getY) {
+        resolve(Array.from({ length }, (_, i) => [getX(i), getY(i)]));
+      } else {
+        reject(new Error('You need to specify at least x and y'));
+      }
+    }
+  });
 
-attribute vec2 position;
-varying vec2 particleTextureIndex;
+const isHorizontalLine = (annotation) =>
+  Number.isFinite(annotation.y) && !('x' in annotation);
 
-void main() {
-  // map normalized device coords to texture coords
-  particleTextureIndex = 0.5 * (1.0 + position);
+const isVerticalLine = (annotation) =>
+  Number.isFinite(annotation.x) && !('y' in annotation);
 
-  gl_Position = vec4(position, 0, 1);
-}`;
+const isDomRect = (annotation) =>
+  Number.isFinite(annotation.x) &&
+  Number.isFinite(annotation.y) &&
+  Number.isFinite(annotation.width) &&
+  Number.isFinite(annotation.height);
 
-const FRAGMENT_SHADER = `
-precision highp float;
+const isRect = (annotation) =>
+  Number.isFinite(annotation.x1) &&
+  Number.isFinite(annotation.y1) &&
+  Number.isFinite(annotation.x2) &&
+  Number.isFinite(annotation.x2);
 
-uniform float antiAliasing;
+const isPolygonAnnotation = (annotation) =>
+  'vertices' in annotation && annotation.vertices.length > 1;
 
-varying vec4 color;
-varying float finalPointSize;
+/**
+ * Check if an array is a valid list of 2D vertices
+ * @param {any} arg - The argument to check
+ * @returns {boolean} True if argument is an array of [x, y] coordinate pairs
+ */
+const isVertices = (arg) => {
+  if (!Array.isArray(arg) || arg.length < 3) {
+    return false;
+  }
 
-float linearstep(float edge0, float edge1, float x) {
-  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
-}
+  for (const vertex of arg) {
+    if (
+      !Array.isArray(vertex) ||
+      vertex.length !== 2 ||
+      typeof vertex[0] !== 'number' ||
+      typeof vertex[1] !== 'number'
+    ) {
+      return false;
+    }
+  }
 
-void main() {
-  vec2 c = gl_PointCoord * 2.0 - 1.0;
-  float sdf = length(c) * finalPointSize;
-  float alpha = linearstep(finalPointSize + antiAliasing, finalPointSize - antiAliasing, sdf);
+  return true;
+};
 
-  gl_FragColor = vec4(color.rgb, alpha * color.a);
-}
-`;
+/**
+ * Ensure a list of vertices forms a closed polygon
+ * @param {Array<[number, number]>} vertices - Array of [x, y] coordinates
+ * @returns {Array<[number, number]>} Closed polygon (first vertex repeated at end if needed)
+ */
+const verticesToPolygon = (vertices) => {
+  const polygon = [...vertices];
+  const firstVertex = vertices.at(0);
+  const lastVertex = vertices.at(-1);
+  if (firstVertex[0] !== lastVertex[0] || firstVertex[1] !== lastVertex[1]) {
+    polygon.push(firstVertex);
+  }
+  return polygon;
+};
 
-const createVertexShader = (globalState) => `
-precision highp float;
+const insertionSort = (array) => {
+  const end = array.length;
+  for (let i = 1; i < end; i++) {
+    // Choosing the first element in our unsorted subarray
+    const current = array[i];
+    // The last element of our sorted subarray
+    let j = i - 1;
+    while (j > -1 && current < array[j]) {
+      array[j + 1] = array[j];
+      j--;
+    }
+    array[j + 1] = current;
+  }
+  return array;
+};
 
-uniform sampler2D colorTex;
-uniform float colorTexRes;
-uniform float colorTexEps;
-uniform sampler2D stateTex;
-uniform float stateTexRes;
-uniform float stateTexEps;
-uniform float devicePixelRatio;
-uniform sampler2D encodingTex;
-uniform float encodingTexRes;
-uniform float encodingTexEps;
-uniform float pointSizeExtra;
-uniform float pointOpacityMax;
-uniform float pointOpacityScale;
-uniform float numPoints;
-uniform float globalState;
-uniform float isColoredByZ;
-uniform float isColoredByW;
-uniform float isOpacityByZ;
-uniform float isOpacityByW;
-uniform float isOpacityByDensity;
-uniform float isSizedByZ;
-uniform float isSizedByW;
-uniform float isPixelAligned;
-uniform float colorMultiplicator;
-uniform float opacityMultiplicator;
-uniform float opacityDensity;
-uniform float sizeMultiplicator;
-uniform float numColorStates;
-uniform float pointScale;
-uniform float drawingBufferWidth;
-uniform float drawingBufferHeight;
-uniform mat4 modelViewProjection;
+const createRenderer = (
+  /** @type {Partial<import('./types').RendererOptions>} */ options = {},
+) => {
+  let {
+    regl,
+    canvas = document.createElement('canvas'),
+    gamma = DEFAULT_GAMMA,
+  } = options;
 
-attribute vec2 stateIndex;
+  let isDestroyed = false;
 
-varying vec4 color;
-varying float finalPointSize;
+  if (!regl) {
+    regl = createRegl(canvas);
+  }
 
-void main() {
-  vec4 state = texture2D(stateTex, stateIndex);
+  const isSupportingAllGlExtensions = checkReglExtensions(regl);
 
-  if (isPixelAligned < 0.5) {
-    gl_Position = modelViewProjection * vec4(state.x, state.y, 0.0, 1.0);
-  } else {
-    vec4 clipSpacePosition = modelViewProjection * vec4(state.x, state.y, 0.0, 1.0);
-    vec2 ndcPosition = clipSpacePosition.xy / clipSpacePosition.w;
-    vec2 pixelPos = 0.5 * (ndcPosition + 1.0) * vec2(drawingBufferWidth, drawingBufferHeight);
-    pixelPos = floor(pixelPos + 0.5); // Snap to nearest pixel
-    vec2 snappedPosition = (pixelPos / vec2(drawingBufferWidth, drawingBufferHeight)) * 2.0 - 1.0;
-    gl_Position = vec4(snappedPosition, 0.0, 1.0);
-  }
+  const fboRes = [canvas.width, canvas.height];
+  const fbo = regl.framebuffer({
+    width: fboRes[0],
+    height: fboRes[1],
+    colorFormat: 'rgba',
+    colorType: 'float',
+  });
 
+  /**
+   * Render the float32 framebuffer to the internal canvas
+   *
+   * From https://observablehq.com/@rreusser/selecting-the-right-opacity-for-2d-point-clouds
+   */
+  const renderToCanvas = regl({
+    vert: `
+      precision highp float;
+      attribute vec2 xy;
+      void main () {
+        gl_Position = vec4(xy, 0, 1);
+      }`,
+    frag: `
+      precision highp float;
+      uniform vec2 srcRes;
+      uniform sampler2D src;
+      uniform float gamma;
 
-  // Determine color index
-  float colorIndexZ =  isColoredByZ * floor(state.z * colorMultiplicator);
-  float colorIndexW =  isColoredByW * floor(state.w * colorMultiplicator);
+      vec3 approxLinearToSRGB (vec3 rgb, float gamma) {
+        return pow(clamp(rgb, vec3(0), vec3(1)), vec3(1.0 / gamma));
+      }
 
-  // Multiply by the number of color states per color
-  // I.e., normal, active, hover, background, etc.
-  float colorIndex = (colorIndexZ + colorIndexW) * numColorStates;
+      void main () {
+        vec4 color = texture2D(src, gl_FragCoord.xy / srcRes);
+        gl_FragColor = vec4(approxLinearToSRGB(color.rgb, gamma), color.a);
+      }`,
+    attributes: {
+      xy: [-4, -4, 4, -4, 0, 4],
+    },
+    uniforms: {
+      src: () => fbo,
+      srcRes: () => fboRes,
+      gamma: () => gamma,
+    },
+    count: 3,
+    depth: { enable: false },
+    blend: {
+      enable: true,
+      func: {
+        srcRGB: 'one',
+        srcAlpha: 'one',
+        dstRGB: 'one minus src alpha',
+        dstAlpha: 'one minus src alpha',
+      },
+    },
+  });
 
-  // Half a "pixel" or "texel" in texture coordinates
-  float colorLinearIndex = colorIndex + globalState;
+  /**
+   * Copy the pixels from the internal canvas onto the target canvas
+   */
+  const copyTo = (targetCanvas) => {
+    const ctx = targetCanvas.getContext('2d');
+    ctx.clearRect(0, 0, targetCanvas.width, targetCanvas.height);
+    ctx.drawImage(
+      canvas,
+      (canvas.width - targetCanvas.width) / 2,
+      (canvas.height - targetCanvas.height) / 2,
+      targetCanvas.width,
+      targetCanvas.height,
+      0,
+      0,
+      targetCanvas.width,
+      targetCanvas.height,
+    );
+  };
 
-  // Need to add cEps here to avoid floating point issue that can lead to
-  // dramatic changes in which color is loaded as floor(3/2.9999) = 1 but
-  // floor(3/3.0001) = 0!
-  float colorRowIndex = floor((colorLinearIndex + colorTexEps) / colorTexRes);
+  /**
+   * The render function
+   */
+  const render = (
+    /** @type {(): void} */ draw,
+    /** @type {HTMLCanvasElement} */ targetCanvas,
+  ) => {
+    // Clear internal canvas
+    regl.clear(CLEAR_OPTIONS);
+    fbo.use(() => {
+      // Clear framebuffer
+      regl.clear(CLEAR_OPTIONS);
+      draw();
+    });
+    renderToCanvas();
+    copyTo(targetCanvas);
+  };
 
-  vec2 colorTexIndex = vec2(
-    (colorLinearIndex / colorTexRes) - colorRowIndex + colorTexEps,
-    colorRowIndex / colorTexRes + colorTexEps
-  );
+  /**
+   * Update Regl's viewport, drawingBufferWidth, and drawingBufferHeight
+   *
+   * @description Call this method after the viewport has changed, e.g., width
+   * or height have been altered
+   */
+  const refresh = () => {
+    regl.poll();
+  };
 
-  color = texture2D(colorTex, colorTexIndex);
+  const drawFns = new Set();
 
-  // Retrieve point size
-  float pointSizeIndexZ = isSizedByZ * floor(state.z * sizeMultiplicator);
-  float pointSizeIndexW = isSizedByW * floor(state.w * sizeMultiplicator);
-  float pointSizeIndex = pointSizeIndexZ + pointSizeIndexW;
+  /**
+   * Register an draw function that is going to be invoked on every animation
+   * frame.
+   */
+  const onFrame = (/** @type {(): void} */ draw) => {
+    drawFns.add(draw);
+    return () => {
+      drawFns.delete(draw);
+    };
+  };
 
-  float pointSizeRowIndex = floor((pointSizeIndex + encodingTexEps) / encodingTexRes);
-  vec2 pointSizeTexIndex = vec2(
-    (pointSizeIndex / encodingTexRes) - pointSizeRowIndex + encodingTexEps,
-    pointSizeRowIndex / encodingTexRes + encodingTexEps
-  );
-  float pointSize = texture2D(encodingTex, pointSizeTexIndex).x;
+  const frame = regl.frame(() => {
+    const iterator = drawFns.values();
+    let result = iterator.next();
+    while (!result.done) {
+      result.value(); // The draw function
+      result = iterator.next();
+    }
+  });
 
-  // Retrieve opacity
-  ${
-    (() => {
-      // Drawing the inner border of selected points
-      if (globalState === 3) return '';
+  const resize = (
+    /** @type {number} */ customWidth,
+    /** @type {number} */ customHeight,
+  ) => {
+    const width = customWidth == null ? window.innerWidth : customWidth;
+    const height = customHeight == null ? window.innerHeight : customHeight;
+    canvas.width = width * window.devicePixelRatio;
+    canvas.height = height * window.devicePixelRatio;
+    fboRes[0] = canvas.width;
+    fboRes[1] = canvas.height;
+    fbo.resize(...fboRes);
+  };
 
-      // Draw points with opacity encoding or dynamic opacity
-      return `
-        if (isOpacityByDensity < 0.5) {
-          float opacityIndexZ = isOpacityByZ * floor(state.z * opacityMultiplicator);
-          float opacityIndexW = isOpacityByW * floor(state.w * opacityMultiplicator);
-          float opacityIndex = opacityIndexZ + opacityIndexW;
+  const resizeHandler = () => {
+    resize();
+  };
 
-          float opacityRowIndex = floor((opacityIndex + encodingTexEps) / encodingTexRes);
-          vec2 opacityTexIndex = vec2(
-            (opacityIndex / encodingTexRes) - opacityRowIndex + encodingTexEps,
-            opacityRowIndex / encodingTexRes + encodingTexEps
-          );
-          color.a = texture2D(encodingTex, opacityTexIndex)[${1 + globalState}];
-        } else {
-          color.a = min(1.0, opacityDensity + globalState);
-        }
-      `;
-    })()
+  if (!options.canvas) {
+    window.addEventListener('resize', resizeHandler);
+    window.addEventListener('orientationchange', resizeHandler);
+    resize();
   }
 
-  color.a = min(pointOpacityMax, color.a) * pointOpacityScale;
-  finalPointSize = (pointSize * pointScale) + pointSizeExtra;
-  gl_PointSize = finalPointSize;
-}
-`;
+  /**
+   * Destroy the renderer to free resources and cancel animation frames
+   */
+  const destroy = () => {
+    isDestroyed = true;
+    window.removeEventListener('resize', resizeHandler);
+    window.removeEventListener('orientationchange', resizeHandler);
+    frame.cancel();
+    canvas = undefined;
+    regl.destroy();
+    regl = undefined;
+  };
+
+  return {
+    /**
+     * Get the associated canvas element
+     * @return {HTMLCanvasElement} The associated canvas element
+     */
+    get canvas() {
+      return canvas;
+    },
+    /**
+     * Get the associated Regl instance
+     * @return {import('regl').Regl} The associated Regl instance
+     */
+    get regl() {
+      return regl;
+    },
+    /**
+     * Get the gamma value
+     * @return {number} The gamma value
+     */
+    get gamma() {
+      return gamma;
+    },
+    /**
+     * Set gamma to a new value
+     * @param {number} newGamma - The new gamma value
+     */
+    set gamma(newGamma) {
+      gamma = +newGamma;
+    },
+    /**
+     * Get whether the browser supports all necessary WebGL features
+     * @return {boolean} If `true` the browser supports all necessary WebGL features
+     */
+    get isSupported() {
+      return isSupportingAllGlExtensions;
+    },
+    /**
+     * Get whether the renderer (and its Regl instance) is destroyed
+     * @return {boolean} If `true` the renderer is destroyed
+     */
+    get isDestroyed() {
+      return isDestroyed;
+    },
+    render,
+    resize,
+    onFrame,
+    refresh,
+    destroy,
+  };
+};
 
 /* eslint-env worker */
 /* eslint no-restricted-globals: 1 */
@@ -5304,7 +5272,6 @@ const worker = function worker() {
    * @param   {[type]}  simplified  [description]
    * @return  {[type]}  [description]
    */
-  // biome-ignore lint/style/useNamingConvention: DP stands for Douglas Peucker
   const simplifyDPStep = (points, first, last, tolerance, simplified) => {
     let maxDist = tolerance;
     let index;
@@ -5412,7 +5379,6 @@ const worker = function worker() {
     const groupedPoints = {};
 
     const isOrdered = !Number.isNaN(+points[0][5]);
-    // biome-ignore lint/complexity/noForEach: somehow for .. of does not work in a worker
     points.forEach((point) => {
       const segId = point[4];
 
@@ -5428,7 +5394,6 @@ const worker = function worker() {
     });
 
     // The filtering ensures that non-existing array entries are removed
-    // biome-ignore lint/complexity/noForEach: somehow for .. of does not work in a worker
     Object.entries(groupedPoints).forEach((idPoints) => {
       groupedPoints[idPoints[0]] = idPoints[1].filter((v) => v);
       // Store the first point as the reference
@@ -5485,8 +5450,6 @@ const createSplineCurve = (
     worker$1.postMessage({ points, options });
   });
 
-var version = "1.14.1+1.0.1";
-
 const deprecations = {
   showRecticle: {
     replacement: 'showReticle',
@@ -5595,8 +5558,8 @@ const createScatterplot = (
     deselectOnEscape = DEFAULT_DESELECT_ON_ESCAPE,
     lassoColor = DEFAULT_LASSO_COLOR,
     lassoLineWidth = DEFAULT_LASSO_LINE_WIDTH,
-    lassoMinDelay = DEFAULT_LASSO_MIN_DELAY,
-    lassoMinDist = DEFAULT_LASSO_MIN_DIST,
+    lassoMinDelay = DEFAULT_LASSO_MIN_DELAY$1,
+    lassoMinDist = DEFAULT_LASSO_MIN_DIST$1,
     lassoMode = DEFAULT_LASSO_MODE,
     lassoClearEvent = DEFAULT_LASSO_CLEAR_EVENT,
     lassoInitiator = DEFAULT_LASSO_INITIATOR,
@@ -5607,7 +5570,7 @@ const createScatterplot = (
     lassoLongPressAfterEffectTime = DEFAULT_LASSO_LONG_PRESS_AFTER_EFFECT_TIME,
     lassoLongPressEffectDelay = DEFAULT_LASSO_LONG_PRESS_EFFECT_DELAY,
     lassoLongPressRevertEffectTime = DEFAULT_LASSO_LONG_PRESS_REVERT_EFFECT_TIME,
-    lassoType = DEFAULT_LASSO_TYPE,
+    lassoType = DEFAULT_LASSO_TYPE$1,
     lassoBrushSize = DEFAULT_LASSO_BRUSH_SIZE,
     actionKeyMap = DEFAULT_ACTION_KEY_MAP,
     mouseMode = DEFAULT_MOUSE_MODE,
@@ -5639,6 +5602,7 @@ const createScatterplot = (
     opacityInactiveMax = DEFAULT_OPACITY_INACTIVE_MAX,
     opacityInactiveScale = DEFAULT_OPACITY_INACTIVE_SCALE,
     sizeBy = DEFAULT_SIZE_BY,
+    pointOrder = DEFAULT_POINT_ORDER,
     pointScaleMode = DEFAULT_POINT_SCALE_MODE,
     height = DEFAULT_HEIGHT,
     width = DEFAULT_WIDTH,
@@ -5714,9 +5678,7 @@ const createScatterplot = (
   let pointConnections;
   let pointConnectionMap;
   let computingPointConnectionCurves;
-  // biome-ignore lint/style/useNamingConvention: HLine stands for HorizontalLine
   let reticleHLine;
-  // biome-ignore lint/style/useNamingConvention: VLine stands for VerticalLine
   let reticleVLine;
   let computedPointSizeMouseDetection;
   let lassoInitiatorTimeout;
@@ -5849,6 +5811,8 @@ const createScatterplot = (
   let normalPointsIndexBuffer; // Buffer holding the indices pointing to the correct texel
   let selectedPointsIndexBuffer; // Used for pointing to the selected texels
   let hoveredPointIndexBuffer; // Used for pointing to the hovered texels
+  let pointOrderIndices = null; // Validated ordered point indices (Int32Array or null)
+  let pointOrderIndex = null; // Float32Array of tex coords in pointOrder sequence
 
   let cameraZoomTargetStart; // Stores the start (i.e., current) camera target for zooming
   let cameraZoomTargetEnd; // Stores the end camera target for zooming
@@ -5871,9 +5835,7 @@ const createScatterplot = (
   let isAnnotationsDrawn = false;
   let isMouseOverCanvasChecked = false;
 
-  // biome-ignore lint/style/useNamingConvention: ZDate is not one word
   let valueZDataType = CATEGORICAL;
-  // biome-ignore lint/style/useNamingConvention: WDate is not one word
   let valueWDataType = CATEGORICAL;
 
   /** @type{number|undefined} */
@@ -5947,9 +5909,7 @@ const createScatterplot = (
     return points;
   };
 
-  // biome-ignore lint/style/useNamingConvention: BBox stands for BoundingBox
   const getPointsInBBox = (x0, y0, x1, y1) => {
-    // biome-ignore lint/style/useNamingConvention: BBox stands for BoundingBox
     const pointsInBBox = spatialIndex.range(x0, y0, x1, y1);
     if (isPointsFiltered) {
       return pointsInBBox.filter((i) => filteredPointsSet.has(i));
@@ -5964,7 +5924,6 @@ const createScatterplot = (
     const pointSizeNdc = getPointSizeNdc(4);
 
     // Get all points within a close range
-    // biome-ignore lint/style/useNamingConvention: BBox stands for BoundingBox
     const pointsInBBox = getPointsInBBox(
       xNdc - pointSizeNdc,
       yNdc - pointSizeNdc,
@@ -6002,7 +5961,6 @@ const createScatterplot = (
     }
 
     // ...to efficiently preselect potentially selected points
-    // biome-ignore lint/style/useNamingConvention: BBox stands for BoundingBox
     const pointsInBBox = getPointsInBBox(...bBox);
     // next we test each point in the bounding box if it is in the polygon too
     const pointsInPolygon = [];
@@ -6107,6 +6065,40 @@ const createScatterplot = (
     }
   };
 
+  /**
+   * Convert vertices from data space to GL space
+   * @param {Array<[number, number]>} vertices - Vertices in data space
+   * @returns {number[] | null} Flat array of GL coordinates or null if scales not defined
+   */
+  const verticesFromDataToGl = (vertices) => {
+    // Check if xScale/yScale are defined
+    if (!(xScale && yScale)) {
+      // biome-ignore lint/suspicious/noConsole: User warning for missing configuration
+      console.warn(
+        'xScale and yScale must be defined for programmatic lasso selection',
+      );
+      return null;
+    }
+
+    const verticesGl = [];
+    for (const [x, y] of vertices) {
+      // Step 1: Data space → normalized [0, 1]
+      const xNorm = (x - xDomainStart) / xDomainSize;
+      const yNorm = (y - yDomainStart) / yDomainSize;
+
+      // Step 2: Normalized [0, 1] → NDC [-1, 1]
+      const xNdc = xNorm * 2 - 1;
+      const yNdc = yNorm * 2 - 1;
+
+      // Step 3: NDC → GL space (camera transform)
+      const [xGl, yGl] = getScatterGlPos(xNdc, yNdc);
+
+      verticesGl.push(xGl, yGl);
+    }
+
+    return verticesGl;
+  };
+
   /**
    * Select and highlight a set of points
    * @param {number | number[]} pointIdxs
@@ -6204,12 +6196,53 @@ const createScatterplot = (
     setPointConnectionColorState(selectedPoints, 1);
 
     if (!preventEvent) {
-      pubSub.publish('select', { points: selectedPoints });
+      pubSub.publish('select', { points: selectedPoints, lassoMode });
     }
 
     draw = true;
   };
 
+  /**
+   * Lasso a certain area and select contained points
+   * @param {[number, number][]} vertices - Lasso vertices in either data space (default) or GL space
+   * @param {import('./types').ScatterplotMethodOptions['lasso']}
+   */
+  const lassoSelect = (
+    vertices,
+    { merge = false, remove = false, isGl = false } = {},
+  ) => {
+    if (!isVertices(vertices)) {
+      throw new Error(
+        'Lasso selection requires at least 3 vertices as [x, y] coordinate pairs',
+      );
+    }
+
+    const closedPolygon = verticesToPolygon(vertices);
+
+    let polygonGl;
+    let polygonGlFlat;
+
+    if (isGl) {
+      polygonGl = closedPolygon;
+      polygonGlFlat = closedPolygon.flat();
+    } else {
+      polygonGlFlat = verticesFromDataToGl(closedPolygon);
+
+      if (!polygonGlFlat) {
+        throw new Error(
+          'xScale and yScale must be defined to convert lasso vertices from data space to GL space',
+        );
+      }
+
+      polygonGl = [];
+      for (let i = 0; i < polygonGlFlat.length; i += 2) {
+        polygonGl.push([polygonGlFlat[i], polygonGlFlat[i + 1]]);
+      }
+    }
+
+    lassoEnd(polygonGl, polygonGlFlat, { merge, remove });
+  };
+
   /**
    * @param {number} point
    * @param {import('./types').ScatterplotMethodOptions['hover']} options
@@ -6886,6 +6919,44 @@ const createScatterplot = (
   const setSizeBy = (type) => {
     sizeBy = getEncodingType(type, DEFAULT_SIZE_BY);
   };
+  const setPointOrder = (newPointOrder) => {
+    if (newPointOrder === null || newPointOrder === undefined) {
+      pointOrder = null;
+    } else if (Array.isArray(newPointOrder) || ArrayBuffer.isView(newPointOrder)) {
+      pointOrder = newPointOrder;
+    } else {
+      return;
+    }
+
+    if (isPointsDrawn) {
+      computePointOrderIndex();
+      if (isPointsFiltered) {
+        // Re-apply filter respecting the new point order
+        const filteredPointsBuffer = [];
+        if (pointOrderIndices !== null) {
+          for (let i = 0; i < pointOrderIndices.length; i++) {
+            if (filteredPointsSet.has(pointOrderIndices[i])) {
+              filteredPointsBuffer.push.apply(
+                filteredPointsBuffer,
+                indexToStateTexCoord(pointOrderIndices[i]),
+              );
+            }
+          }
+        } else {
+          const sortedFiltered = insertionSort([...filteredPointsSet]);
+          for (const idx of sortedFiltered) {
+            filteredPointsBuffer.push.apply(
+              filteredPointsBuffer,
+              indexToStateTexCoord(idx),
+            );
+          }
+        }
+        normalPointsIndexBuffer.subdata(filteredPointsBuffer);
+      } else {
+        normalPointsIndexBuffer.subdata(getEffectivePointIndex(numPoints));
+      }
+    }
+  };
   const setPointConnectionColorBy = (type) => {
     pointConnectionColorBy = getEncodingType(
       type,
@@ -7053,16 +7124,14 @@ const createScatterplot = (
     getPointOpacityScale = getPointOpacityScaleBase,
   ) =>
     renderer.regl({
-      frag: renderPointsAsSquares ? FRAGMENT_SHADER$1 : FRAGMENT_SHADER,
+      frag: renderPointsAsSquares ? FRAGMENT_SHADER : FRAGMENT_SHADER$1,
       vert: createVertexShader(globalState),
 
       blend: {
         enable: !disableAlphaBlending,
         func: {
-          // biome-ignore lint/style/useNamingConvention: Regl specific
           srcRGB: 'src alpha',
           srcAlpha: 'one',
-          // biome-ignore lint/style/useNamingConvention: Regl specific
           dstRGB: 'one minus src alpha',
           dstAlpha: 'one minus src alpha',
         },
@@ -7203,10 +7272,8 @@ const createScatterplot = (
     blend: {
       enable: true,
       func: {
-        // biome-ignore lint/style/useNamingConvention: Regl specific
         srcRGB: 'src alpha',
         srcAlpha: 'one',
-        // biome-ignore lint/style/useNamingConvention: Regl specific
         dstRGB: 'one minus src alpha',
         dstAlpha: 'one minus src alpha',
       },
@@ -7284,6 +7351,51 @@ const createScatterplot = (
     return index;
   };
 
+  const computePointOrderIndex = () => {
+    if (pointOrder === null) {
+      pointOrderIndices = null;
+      pointOrderIndex = null;
+      return;
+    }
+
+    const includedSet = new Set();
+    const orderedIndices = [];
+
+    for (let i = 0; i < pointOrder.length; i++) {
+      const idx = pointOrder[i];
+      if (
+        Number.isFinite(idx) &&
+        idx >= 0 &&
+        idx < numPoints &&
+        !includedSet.has(idx)
+      ) {
+        orderedIndices.push(idx);
+        includedSet.add(idx);
+      }
+    }
+
+    // Append any missing indices in sequential order
+    for (let i = 0; i < numPoints; i++) {
+      if (!includedSet.has(i)) {
+        orderedIndices.push(i);
+      }
+    }
+
+    pointOrderIndices = orderedIndices;
+
+    pointOrderIndex = new Float32Array(orderedIndices.length * 2);
+    let j = 0;
+    for (let i = 0; i < orderedIndices.length; i++) {
+      const texCoord = indexToStateTexCoord(orderedIndices[i]);
+      pointOrderIndex[j] = texCoord[0];
+      pointOrderIndex[j + 1] = texCoord[1];
+      j += 2;
+    }
+  };
+
+  const getEffectivePointIndex = (count) =>
+    pointOrderIndex !== null ? pointOrderIndex : createPointIndex(count);
+
   const createStateTexture = (newPoints, dataTypes = {}) => {
     const numNewPoints = newPoints.length;
     stateTexRes = Math.max(2, Math.ceil(Math.sqrt(numNewPoints)));
@@ -7375,9 +7487,18 @@ const createScatterplot = (
       const preventFilterReset =
         options?.preventFilterReset && newPoints.length === numPoints;
 
+      const prevNumPoints = numPoints;
       numPoints = newPoints.length;
       numPointsInView = numPoints;
 
+      // Reset pointOrder when re-drawing with different-length data
+      // (ordering becomes meaningless). Skip on first draw (prevNumPoints === 0).
+      if (prevNumPoints > 0 && numPoints !== prevNumPoints) {
+        pointOrder = null;
+        pointOrderIndices = null;
+        pointOrderIndex = null;
+      }
+
       if (stateTex) {
         stateTex.destroy();
       }
@@ -7387,10 +7508,11 @@ const createScatterplot = (
       });
 
       if (!preventFilterReset) {
+        computePointOrderIndex();
         normalPointsIndexBuffer({
           usage: 'static',
           type: 'float',
-          data: createPointIndex(numPoints),
+          data: getEffectivePointIndex(numPoints),
         });
       }
 
@@ -7631,7 +7753,7 @@ const createScatterplot = (
   const unfilter = ({ preventEvent = false } = {}) => {
     isPointsFiltered = false;
     filteredPointsSet.clear();
-    normalPointsIndexBuffer.subdata(createPointIndex(numPoints));
+    normalPointsIndexBuffer.subdata(getEffectivePointIndex(numPoints));
 
     return new Promise((resolve) => {
       const finish = () => {
@@ -7690,9 +7812,20 @@ const createScatterplot = (
       }
     }
 
-    const sortedFilteredPoints = insertionSort([...filteredPoints]);
+    let orderedFilteredPoints;
+    if (pointOrderIndices !== null) {
+      // Maintain the custom point order within the filtered set
+      orderedFilteredPoints = [];
+      for (let i = 0; i < pointOrderIndices.length; i++) {
+        if (filteredPointsSet.has(pointOrderIndices[i])) {
+          orderedFilteredPoints.push(pointOrderIndices[i]);
+        }
+      }
+    } else {
+      orderedFilteredPoints = insertionSort([...filteredPoints]);
+    }
 
-    for (const pointIdx of sortedFilteredPoints) {
+    for (const pointIdx of orderedFilteredPoints) {
       filteredPointsBuffer.push.apply(
         filteredPointsBuffer,
         indexToStateTexCoord(pointIdx),
@@ -8079,7 +8212,7 @@ const createScatterplot = (
           continue;
         }
 
-        if (isPolygon(annotation)) {
+        if (isPolygonAnnotation(annotation)) {
           newPoints.push(annotation.vertices.flatMap(identity));
           addColorAndWidth(annotation);
         }
@@ -8120,7 +8253,6 @@ const createScatterplot = (
    * @param {number[]} pointIdxs - A list of point indices
    * @returns {import('./types').Rect} The bounding box
    */
-  // biome-ignore lint/style/useNamingConvention: BBox stands for BoundingBox
   const getBBoxOfPoints = (pointIdxs) => {
     let xMin = Number.POSITIVE_INFINITY;
     let xMax = Number.NEGATIVE_INFINITY;
@@ -8156,7 +8288,6 @@ const createScatterplot = (
       // Vertical field of view
       // The Arc Tangent is based on the original camera position. Otherwise
       // we would have to do `Math.atan(1 / camera.view[5])`
-      // biome-ignore lint/style/useNamingConvention: FOV stands for field of view
       const vFOV = 2 * Math.atan(1);
 
       const aspectRatio = viewAspectRatio / dataAspectRatio;
@@ -8556,7 +8687,6 @@ const createScatterplot = (
     reticleVLine.setStyle({ color: reticleColor });
   };
 
-  // biome-ignore lint/style/useNamingConvention: XScale are two words
   const setXScale = (newXScale) => {
     if (!newXScale) {
       return;
@@ -8569,7 +8699,6 @@ const createScatterplot = (
     updateScales();
   };
 
-  // biome-ignore lint/style/useNamingConvention: YScale are two words
   const setYScale = (newYScale) => {
     if (!newYScale) {
       return;
@@ -8743,7 +8872,6 @@ const createScatterplot = (
     annotationLineWidth = +newAnnotationLineWidth;
   };
 
-  // biome-ignore lint/style/useNamingConvention: HVLine stands for horizontal vertical line
   const setAnnotationHVLineLimit = (newAnnotationHVLineLimit) => {
     annotationHVLineLimit = +newAnnotationHVLineLimit;
   };
@@ -8820,6 +8948,10 @@ const createScatterplot = (
       return sizeBy;
     }
 
+    if (property === 'pointOrder') {
+      return pointOrder !== null ? [...pointOrder] : null;
+    }
+
     if (property === 'deselectOnDblClick') {
       return deselectOnDblClick;
     }
@@ -9206,6 +9338,10 @@ const createScatterplot = (
       setSizeBy(properties.sizeBy);
     }
 
+    if (properties.pointOrder !== undefined) {
+      setPointOrder(properties.pointOrder);
+    }
+
     if (properties.opacity !== undefined) {
       setOpacity(properties.opacity);
     }
@@ -9903,6 +10039,9 @@ const createScatterplot = (
   init();
 
   return {
+    attachSpatialIndex: (buffer) => {
+      spatialIndex = kdbushFrom(buffer);
+    },
     /**
      * Get whether the browser supports all necessary WebGL features
      * @return {boolean} If `true` the browser supports all necessary WebGL features
@@ -9926,6 +10065,7 @@ const createScatterplot = (
     get,
     getScreenPosition,
     hover,
+    lassoSelect,
     redraw,
     refresh: renderer.refresh,
     reset: withDraw(reset),