@jbrowse/core 4.3.0 → 5.0.0-beta.2

package/esm/util/color-bits/bit.js

@@ -0,0 +1,37 @@
+// Bitwise functions
+//
+// The color representation would ideally be 32-bits unsigned, but JS bitwise
+// operators only work as 32-bits signed. The range of Smi values on V8 is also
+// 32-bits signed. Those two factors make it that it's much more efficient to just
+// use signed integers to represent the data.
+//
+// Colors with a R channel >= 0x80 will be a negative number, but that's not really
+// an issue at any point because the bits for signed and unsigned integers are always
+// the same, only their interpretation changes.
+const INT32_TO_UINT32_OFFSET = 2 ** 32;
+export function cast(n) {
+    if (n < 0) {
+        return n + INT32_TO_UINT32_OFFSET;
+    }
+    return n;
+}
+export function get(n, offset) {
+    return (n >> offset) & 0xff;
+}
+export function set(n, offset, byte) {
+    return n ^ ((n ^ (clampByte(byte) << offset)) & (0xff << offset));
+}
+// CSS clamps an out-of-range channel and this composition cannot: `<<` wraps,
+// and `newColor`'s `+` then carries the overflow into the neighbouring channel.
+// Unclamped, `rgb(0 0 0 / -20%)` composes to white at 80% rather than to
+// transparent black, and `alpha(red, 1.4)` masks 357 down to 101, painting a
+// feature at 40% opacity for a caller that asked for more than full. Both
+// channel parsers already document a 0..255 result; this is what makes it true.
+export function clampByte(n) {
+    // `> 0` rather than `< 0`, so NaN takes the zero branch: every comparison
+    // against NaN is false, and an unclamped NaN shifts to 0 anyway — silently,
+    // one channel at a time. `jexl:alpha(color, get(feature,'opacity'))` on a
+    // non-numeric attribute is the reachable one, and it drew the feature at
+    // alpha 0 instead of reaching the invalid-colour sentinel.
+    return n > 0 ? (n > 255 ? 255 : n) : 0;
+}

package/esm/util/color-bits/convert.d.ts

@@ -0,0 +1,23 @@
+export declare function labToXyzd50(l: number, a: number, b: number): [number, number, number];
+export declare function xyzd50ToLab(x: number, y: number, z: number): [number, number, number];
+export declare function oklabToXyzd65(l: number, a: number, b: number): [number, number, number];
+export declare function xyzd65ToOklab(x: number, y: number, z: number): [number, number, number];
+export declare function lchToLab(l: number, c: number, h: number | undefined): [number, number, number];
+export declare function labToLch(l: number, a: number, b: number): [number, number, number];
+export declare function displayP3ToXyzd50(r: number, g: number, b: number): [number, number, number];
+export declare function xyzd50ToDisplayP3(x: number, y: number, z: number): [number, number, number];
+export declare function proPhotoToXyzd50(r: number, g: number, b: number): [number, number, number];
+export declare function xyzd50ToProPhoto(x: number, y: number, z: number): [number, number, number];
+export declare function adobeRGBToXyzd50(r: number, g: number, b: number): [number, number, number];
+export declare function xyzd50ToAdobeRGB(x: number, y: number, z: number): [number, number, number];
+export declare function rec2020ToXyzd50(r: number, g: number, b: number): [number, number, number];
+export declare function xyzd50ToRec2020(x: number, y: number, z: number): [number, number, number];
+export declare function xyzd50ToD65(x: number, y: number, z: number): [number, number, number];
+export declare function xyzd65ToD50(x: number, y: number, z: number): [number, number, number];
+export declare function xyzd65TosRGBLinear(x: number, y: number, z: number): [number, number, number];
+export declare function xyzd50TosRGBLinear(x: number, y: number, z: number): [number, number, number];
+export declare function srgbLinearToXyzd50(r: number, g: number, b: number): [number, number, number];
+export declare function srgbToXyzd50(r: number, g: number, b: number): [number, number, number];
+export declare function xyzd50ToSrgb(x: number, y: number, z: number): [number, number, number];
+export declare function oklchToXyzd50(lInput: number, c: number, h: number): [number, number, number];
+export declare function xyzd50ToOklch(x: number, y: number, z: number): [number, number, number];

package/esm/util/color-bits/convert.js

@@ -0,0 +1,294 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+//
+// Source: https://github.com/ChromeDevTools/devtools-frontend/blob/c51201e6ee70370f7f1ac8a1a49dca7d4561aeaa/front_end/core/common/ColorConverter.ts
+// License: https://github.com/ChromeDevTools/devtools-frontend/blob/c51201e6ee70370f7f1ac8a1a49dca7d4561aeaa/LICENSE
+/**
+ * Implementation of this module and all the tests are heavily influenced by
+ * https://source.chromium.org/chromium/chromium/src/+/main:ui/gfx/color_conversions.cc
+ */
+// https://en.wikipedia.org/wiki/CIELAB_color_space#Converting_between_CIELAB_and_CIEXYZ_coordinates
+const D50_X = 0.9642;
+const D50_Y = 1;
+const D50_Z = 0.8251;
+function multiply(matrix, other) {
+    const dst = [0, 0, 0];
+    for (let row = 0; row < 3; ++row) {
+        dst[row] =
+            matrix[row][0] * other[0] +
+                matrix[row][1] * other[1] +
+                matrix[row][2] * other[2];
+    }
+    return dst;
+}
+// A transfer function mapping encoded values to linear values,
+// represented by this 7-parameter piecewise function:
+//
+//   linear = sign(encoded) *  (c*|encoded| + f)       , 0 <= |encoded| < d
+//          = sign(encoded) * ((a*|encoded| + b)^g + e), d <= |encoded|
+//
+// (A simple gamma transfer function sets g to gamma and a to 1.)
+class TransferFunction {
+    g;
+    a;
+    b;
+    c;
+    d;
+    e;
+    f;
+    constructor(g, a, b = 0, c = 0, d = 0, e = 0, f = 0) {
+        this.g = g;
+        this.a = a;
+        this.b = b;
+        this.c = c;
+        this.d = d;
+        this.e = e;
+        this.f = f;
+    }
+    eval(val) {
+        const sign = val < 0 ? -1 : 1;
+        const abs = val * sign;
+        if (abs < this.d) {
+            return sign * (this.c * abs + this.f);
+        }
+        return sign * (Math.pow(this.a * abs + this.b, this.g) + this.e);
+    }
+}
+const NAMED_TRANSFER_FN = {
+    sRGB: new TransferFunction(2.4, 1 / 1.055, 0.055 / 1.055, 1 / 12.92, 0.04045, 0, 0),
+    sRGB_INVERSE: new TransferFunction(0.416667, 1.13728, -0, 12.92, 0.0031308, -0.0549698, -0),
+    proPhotoRGB: new TransferFunction(1.8, 1),
+    proPhotoRGB_INVERSE: new TransferFunction(0.555556, 1, -0, 0, 0, 0, 0),
+    k2Dot2: new TransferFunction(2.2, 1),
+    k2Dot2_INVERSE: new TransferFunction(0.454545, 1),
+    rec2020: new TransferFunction(2.22222, 0.909672, 0.0903276, 0.222222, 0.0812429, 0, 0),
+    rec2020_INVERSE: new TransferFunction(0.45, 1.23439, -0, 4.5, 0.018054, -0.0993195, -0),
+};
+const NAMED_GAMUTS = {
+    sRGB: [
+        [0.436065674, 0.385147095, 0.143066406],
+        [0.222488403, 0.716873169, 0.06060791],
+        [0.013916016, 0.097076416, 0.714096069],
+    ],
+    sRGB_INVERSE: [
+        [3.134112151374599, -1.6173924597114966, -0.4906334036481285],
+        [-0.9787872938826594, 1.9162795854799963, 0.0334547139520088],
+        [0.07198304248352326, -0.2289858493321844, 1.4053851325241447],
+    ],
+    displayP3: [
+        [0.515102, 0.291965, 0.157153],
+        [0.241182, 0.692236, 0.0665819],
+        [-0.00104941, 0.0418818, 0.784378],
+    ],
+    displayP3_INVERSE: [
+        [2.404045155982687, -0.9898986932663839, -0.3976317191366333],
+        [-0.8422283799266768, 1.7988505115115485, 0.016048170293157416],
+        [0.04818705979712955, -0.09737385156228891, 1.2735066448052303],
+    ],
+    adobeRGB: [
+        [0.60974, 0.20528, 0.14919],
+        [0.31111, 0.62567, 0.06322],
+        [0.01947, 0.06087, 0.74457],
+    ],
+    adobeRGB_INVERSE: [
+        [1.9625385510109137, -0.6106892546501431, -0.3413827467482388],
+        [-0.9787580455521, 1.9161624707082339, 0.03341676594241408],
+        [0.028696263137883395, -0.1406807819331586, 1.349252109991369],
+    ],
+    rec2020: [
+        [0.673459, 0.165661, 0.1251],
+        [0.279033, 0.675338, 0.0456288],
+        [-0.00193139, 0.0299794, 0.797162],
+    ],
+    rec2020_INVERSE: [
+        [1.647275201661012, -0.3936024771460771, -0.23598028884792507],
+        [-0.6826176165196962, 1.647617775014935, 0.01281626807852422],
+        [0.029662725298529837, -0.06291668721366285, 1.2533964313435522],
+    ],
+    xyz: [
+        [1, 0, 0],
+        [0, 1, 0],
+        [0, 0, 1],
+    ],
+};
+function degToRad(deg) {
+    return deg * (Math.PI / 180);
+}
+function radToDeg(rad) {
+    return rad * (180 / Math.PI);
+}
+function applyTransferFns(fn, r, g, b) {
+    return [fn.eval(r), fn.eval(g), fn.eval(b)];
+}
+const OKLAB_TO_LMS_MATRIX = [
+    [0.9999999984505198, 0.3963377921737679, 0.2158037580607588],
+    [1.000000008881761, -0.10556134232365635, -0.06385417477170591],
+    [1.00000005467241, -0.0894841820949658, -1.2914855378640917],
+];
+const LMS_TO_OKLAB_MATRIX = [
+    [0.2104542553, 0.7936177849999999, -0.0040720468],
+    [1.9779984951000003, -2.4285922049999997, 0.4505937099000001],
+    [0.025904037099999982, 0.7827717662, -0.8086757660000001],
+];
+const XYZ_TO_LMS_MATRIX = [
+    [0.8190224432164319, 0.3619062562801221, -0.12887378261216414],
+    [0.0329836671980271, 0.9292868468965546, 0.03614466816999844],
+    [0.048177199566046255, 0.26423952494422764, 0.6335478258136937],
+];
+const LMS_TO_XYZ_MATRIX = [
+    [1.226879873374156, -0.5578149965554814, 0.2813910501772159],
+    [-0.040575762624313734, 1.1122868293970596, -0.07171106666151703],
+    [-0.07637294974672144, -0.4214933239627915, 1.586924024427242],
+];
+const PRO_PHOTO_TO_XYZD50_MATRIX = [
+    [0.7976700747153241, 0.13519395152800417, 0.03135596341127167],
+    [0.28803902352472205, 0.7118744007923554, 0.00008661179538844252],
+    [2.739876695467402e-7, -0.0000014405226518969991, 0.825211112593861],
+];
+const XYZD50_TO_PRO_PHOTO_MATRIX = [
+    [1.3459533710138858, -0.25561367037652133, -0.051116041522131374],
+    [-0.544600415668951, 1.5081687311475767, 0.020535163968720935],
+    [-0.0000013975622054109725, 0.000002717590904589903, 1.2118111696814942],
+];
+const XYZD65_TO_XYZD50_MATRIX = [
+    [1.0478573189120088, 0.022907374491829943, -0.050162247377152525],
+    [0.029570500050499514, 0.9904755577034089, -0.017061518194840468],
+    [-0.00924047197558879, 0.015052921526981566, 0.7519708530777581],
+];
+const XYZD50_TO_XYZD65_MATRIX = [
+    [0.9555366447632887, -0.02306009252137888, 0.06321844147263304],
+    [-0.028315378228764922, 1.009951351591575, 0.021026001591792402],
+    [0.012308773293784308, -0.02050053471777469, 1.3301947294775631],
+];
+const XYZD65_TO_SRGB_MATRIX = [
+    [3.2408089365140573, -1.5375788839307314, -0.4985609572551541],
+    [-0.9692732213205414, 1.876110235238969, 0.041560501141251774],
+    [0.05567030990267439, -0.2040007921971802, 1.0571046720577026],
+];
+export function labToXyzd50(l, a, b) {
+    let y = (l + 16) / 116;
+    let x = y + a / 500;
+    let z = y - b / 200;
+    function labInverseTransferFunction(t) {
+        const delta = 24 / 116;
+        if (t <= delta) {
+            return (108 / 841) * (t - 16 / 116);
+        }
+        return t * t * t;
+    }
+    x = labInverseTransferFunction(x) * D50_X;
+    y = labInverseTransferFunction(y) * D50_Y;
+    z = labInverseTransferFunction(z) * D50_Z;
+    return [x, y, z];
+}
+export function xyzd50ToLab(x, y, z) {
+    function labTransferFunction(t) {
+        const deltaLimit = (24 / 116) * (24 / 116) * (24 / 116);
+        if (t <= deltaLimit) {
+            return (841 / 108) * t + 16 / 116;
+        }
+        return Math.pow(t, 1 / 3);
+    }
+    x = labTransferFunction(x / D50_X);
+    y = labTransferFunction(y / D50_Y);
+    z = labTransferFunction(z / D50_Z);
+    const l = 116 * y - 16;
+    const a = 500 * (x - y);
+    const bOut = 200 * (y - z);
+    return [l, a, bOut];
+}
+export function oklabToXyzd65(l, a, b) {
+    const labInput = [l, a, b];
+    const lmsIntermediate = multiply(OKLAB_TO_LMS_MATRIX, labInput);
+    lmsIntermediate[0] =
+        lmsIntermediate[0] * lmsIntermediate[0] * lmsIntermediate[0];
+    lmsIntermediate[1] =
+        lmsIntermediate[1] * lmsIntermediate[1] * lmsIntermediate[1];
+    lmsIntermediate[2] =
+        lmsIntermediate[2] * lmsIntermediate[2] * lmsIntermediate[2];
+    return multiply(LMS_TO_XYZ_MATRIX, lmsIntermediate);
+}
+export function xyzd65ToOklab(x, y, z) {
+    const xyzInput = [x, y, z];
+    const lmsIntermediate = multiply(XYZ_TO_LMS_MATRIX, xyzInput);
+    lmsIntermediate[0] = Math.pow(lmsIntermediate[0], 1 / 3);
+    lmsIntermediate[1] = Math.pow(lmsIntermediate[1], 1 / 3);
+    lmsIntermediate[2] = Math.pow(lmsIntermediate[2], 1 / 3);
+    const labOutput = multiply(LMS_TO_OKLAB_MATRIX, lmsIntermediate);
+    return [labOutput[0], labOutput[1], labOutput[2]];
+}
+export function lchToLab(l, c, h) {
+    if (h === undefined) {
+        return [l, 0, 0];
+    }
+    return [l, c * Math.cos(degToRad(h)), c * Math.sin(degToRad(h))];
+}
+export function labToLch(l, a, b) {
+    return [l, Math.hypot(a, b), radToDeg(Math.atan2(b, a))];
+}
+export function displayP3ToXyzd50(r, g, b) {
+    const [mappedR, mappedG, mappedB] = applyTransferFns(NAMED_TRANSFER_FN.sRGB, r, g, b);
+    return multiply(NAMED_GAMUTS.displayP3, [mappedR, mappedG, mappedB]);
+}
+export function xyzd50ToDisplayP3(x, y, z) {
+    const rgbOutput = multiply(NAMED_GAMUTS.displayP3_INVERSE, [x, y, z]);
+    return applyTransferFns(NAMED_TRANSFER_FN.sRGB_INVERSE, rgbOutput[0], rgbOutput[1], rgbOutput[2]);
+}
+export function proPhotoToXyzd50(r, g, b) {
+    const [mappedR, mappedG, mappedB] = applyTransferFns(NAMED_TRANSFER_FN.proPhotoRGB, r, g, b);
+    return multiply(PRO_PHOTO_TO_XYZD50_MATRIX, [mappedR, mappedG, mappedB]);
+}
+export function xyzd50ToProPhoto(x, y, z) {
+    const rgbOutput = multiply(XYZD50_TO_PRO_PHOTO_MATRIX, [x, y, z]);
+    return applyTransferFns(NAMED_TRANSFER_FN.proPhotoRGB_INVERSE, rgbOutput[0], rgbOutput[1], rgbOutput[2]);
+}
+export function adobeRGBToXyzd50(r, g, b) {
+    const [mappedR, mappedG, mappedB] = applyTransferFns(NAMED_TRANSFER_FN.k2Dot2, r, g, b);
+    return multiply(NAMED_GAMUTS.adobeRGB, [mappedR, mappedG, mappedB]);
+}
+export function xyzd50ToAdobeRGB(x, y, z) {
+    const rgbOutput = multiply(NAMED_GAMUTS.adobeRGB_INVERSE, [x, y, z]);
+    return applyTransferFns(NAMED_TRANSFER_FN.k2Dot2_INVERSE, rgbOutput[0], rgbOutput[1], rgbOutput[2]);
+}
+export function rec2020ToXyzd50(r, g, b) {
+    const [mappedR, mappedG, mappedB] = applyTransferFns(NAMED_TRANSFER_FN.rec2020, r, g, b);
+    return multiply(NAMED_GAMUTS.rec2020, [mappedR, mappedG, mappedB]);
+}
+export function xyzd50ToRec2020(x, y, z) {
+    const rgbOutput = multiply(NAMED_GAMUTS.rec2020_INVERSE, [x, y, z]);
+    return applyTransferFns(NAMED_TRANSFER_FN.rec2020_INVERSE, rgbOutput[0], rgbOutput[1], rgbOutput[2]);
+}
+export function xyzd50ToD65(x, y, z) {
+    return multiply(XYZD50_TO_XYZD65_MATRIX, [x, y, z]);
+}
+export function xyzd65ToD50(x, y, z) {
+    return multiply(XYZD65_TO_XYZD50_MATRIX, [x, y, z]);
+}
+export function xyzd65TosRGBLinear(x, y, z) {
+    return multiply(XYZD65_TO_SRGB_MATRIX, [x, y, z]);
+}
+export function xyzd50TosRGBLinear(x, y, z) {
+    return multiply(NAMED_GAMUTS.sRGB_INVERSE, [x, y, z]);
+}
+export function srgbLinearToXyzd50(r, g, b) {
+    return multiply(NAMED_GAMUTS.sRGB, [r, g, b]);
+}
+export function srgbToXyzd50(r, g, b) {
+    const [mappedR, mappedG, mappedB] = applyTransferFns(NAMED_TRANSFER_FN.sRGB, r, g, b);
+    return multiply(NAMED_GAMUTS.sRGB, [mappedR, mappedG, mappedB]);
+}
+export function xyzd50ToSrgb(x, y, z) {
+    const rgbOutput = multiply(NAMED_GAMUTS.sRGB_INVERSE, [x, y, z]);
+    return applyTransferFns(NAMED_TRANSFER_FN.sRGB_INVERSE, rgbOutput[0], rgbOutput[1], rgbOutput[2]);
+}
+export function oklchToXyzd50(lInput, c, h) {
+    const [l, a, b] = lchToLab(lInput, c, h);
+    const [x65, y65, z65] = oklabToXyzd65(l, a, b);
+    return xyzd65ToD50(x65, y65, z65);
+}
+export function xyzd50ToOklch(x, y, z) {
+    const [x65, y65, z65] = xyzd50ToD65(x, y, z);
+    const [l, a, b] = xyzd65ToOklab(x65, y65, z65);
+    return labToLch(l, a, b);
+}

package/esm/util/color-bits/core.d.ts

@@ -0,0 +1,34 @@
+export type Color = number;
+export declare const OFFSET_R = 24;
+export declare const OFFSET_G = 16;
+export declare const OFFSET_B = 8;
+export declare const OFFSET_A = 0;
+/**
+ * Creates a new color from the given RGBA components.
+ * Every component should be in the [0, 255] range.
+ */
+export declare function newColor(r: number, g: number, b: number, a: number): number;
+/**
+ * Creates a new color from a number in the canonical `0xRRGGBBAA` layout —
+ * alpha in the LOW byte, which is what `newColor` composes and what
+ * `getRed`/`getAlpha` read.
+ *
+ * A 24-bit CSS hex is therefore not one of these, and this used to say it was:
+ * `from(0x599eff)` is `0x00599eff`, so it reads R=0x00, G=0x59, B=0x9e and
+ * A=0xff — every intended channel one byte down, with the blue arriving as the
+ * alpha. Spell the alpha (`from(0x599effff)`), or use `newColor(r, g, b, a)`.
+ */
+export declare function from(color: number): number;
+/**
+ * Turns the color into its equivalent number representation.
+ * This is essentially a cast from int32 to uint32.
+ */
+export declare function toNumber(color: Color): number;
+export declare function getRed(c: Color): number;
+export declare function getGreen(c: Color): number;
+export declare function getBlue(c: Color): number;
+export declare function getAlpha(c: Color): number;
+export declare function setRed(c: Color, value: number): number;
+export declare function setGreen(c: Color, value: number): number;
+export declare function setBlue(c: Color, value: number): number;
+export declare function setAlpha(c: Color, value: number): number;

package/esm/util/color-bits/core.js

@@ -0,0 +1,67 @@
+import { cast, clampByte, get, set } from './bit.js';
+export const OFFSET_R = 24;
+export const OFFSET_G = 16;
+export const OFFSET_B = 8;
+export const OFFSET_A = 0;
+/**
+ * Creates a new color from the given RGBA components.
+ * Every component should be in the [0, 255] range.
+ */
+export function newColor(r, g, b, a) {
+    return ((clampByte(r) << OFFSET_R) +
+        (clampByte(g) << OFFSET_G) +
+        (clampByte(b) << OFFSET_B) +
+        (clampByte(a) << OFFSET_A));
+}
+/**
+ * Creates a new color from a number in the canonical `0xRRGGBBAA` layout —
+ * alpha in the LOW byte, which is what `newColor` composes and what
+ * `getRed`/`getAlpha` read.
+ *
+ * A 24-bit CSS hex is therefore not one of these, and this used to say it was:
+ * `from(0x599eff)` is `0x00599eff`, so it reads R=0x00, G=0x59, B=0x9e and
+ * A=0xff — every intended channel one byte down, with the blue arriving as the
+ * alpha. Spell the alpha (`from(0x599effff)`), or use `newColor(r, g, b, a)`.
+ */
+export function from(color) {
+    return newColor(get(color, OFFSET_R), get(color, OFFSET_G), get(color, OFFSET_B), get(color, OFFSET_A));
+}
+/**
+ * Turns the color into its equivalent number representation.
+ * This is essentially a cast from int32 to uint32.
+ */
+export function toNumber(color) {
+    return cast(color);
+}
+// These read the canonical 0xRRGGBBAA layout (R in the HIGH byte). Their
+// mirror image is `abgrRed`/`abgrGreen`/`abgrBlue`/`abgrAlpha` in
+// ../colorBits.ts, which reads the ABGR u32 the GPU path packs (R in the LOW
+// byte) — calling the wrong pair silently swaps R and B. Both take a plain
+// number and cannot be told apart by the type system: a branded Color was
+// considered and rejected, because ABGR values are read back out of
+// Uint32Arrays, where indexing yields `number` and every read would need the
+// cast that defeats the brand.
+export function getRed(c) {
+    return get(c, OFFSET_R);
+}
+export function getGreen(c) {
+    return get(c, OFFSET_G);
+}
+export function getBlue(c) {
+    return get(c, OFFSET_B);
+}
+export function getAlpha(c) {
+    return get(c, OFFSET_A);
+}
+export function setRed(c, value) {
+    return set(c, OFFSET_R, value);
+}
+export function setGreen(c, value) {
+    return set(c, OFFSET_G, value);
+}
+export function setBlue(c, value) {
+    return set(c, OFFSET_B, value);
+}
+export function setAlpha(c, value) {
+    return set(c, OFFSET_A, value);
+}

package/esm/util/color-bits/format.d.ts

@@ -0,0 +1,24 @@
+import type { Color } from './core.ts';
+/** Format to a #RRGGBBAA string */
+export declare const format: typeof formatHEXA;
+/** Format to a #RRGGBBAA string */
+export declare function formatHEXA(color: Color): string;
+export declare function formatHEX(color: Color): string;
+export declare function formatRGBA(color: Color): string;
+export declare function toRGBA(color: Color): {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+export declare function formatHSLA(color: Color): string;
+export declare function toHSLA(color: Color): {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+};
+/**
+ * Returns [r, g, b] as floats in 0-1 range, suitable for GPU shader uniforms.
+ */
+export declare function toGLrgb(color: Color): [number, number, number];

package/esm/util/color-bits/format.js

@@ -0,0 +1,82 @@
+import { getAlpha, getBlue, getGreen, getRed } from './core.js';
+// Return buffer, avoid allocations
+const buffer = [0, 0, 0];
+/**
+ * Map 8-bits value to its hexadecimal representation
+ * ['00', '01', '02', ..., 'fe', 'ff']
+ */
+const FORMAT_HEX = Array.from({ length: 256 }).map((_, byte) => byte.toString(16).padStart(2, '0'));
+/** Format to a #RRGGBBAA string */
+export const format = formatHEXA;
+/** Format to a #RRGGBBAA string */
+export function formatHEXA(color) {
+    return `#${FORMAT_HEX[getRed(color)]}${FORMAT_HEX[getGreen(color)]}${FORMAT_HEX[getBlue(color)]}${FORMAT_HEX[getAlpha(color)]}`;
+}
+export function formatHEX(color) {
+    return `#${FORMAT_HEX[getRed(color)]}${FORMAT_HEX[getGreen(color)]}${FORMAT_HEX[getBlue(color)]}`;
+}
+export function formatRGBA(color) {
+    return `rgba(${getRed(color)} ${getGreen(color)} ${getBlue(color)} / ${getAlpha(color) / 255})`;
+}
+export function toRGBA(color) {
+    return {
+        r: getRed(color),
+        g: getGreen(color),
+        b: getBlue(color),
+        a: getAlpha(color),
+    };
+}
+export function formatHSLA(color) {
+    rgbToHSL(getRed(color), getGreen(color), getBlue(color));
+    const h = buffer[0];
+    const s = buffer[1];
+    const l = buffer[2];
+    const a = getAlpha(color) / 255;
+    return `hsla(${h} ${s}% ${l}% / ${a})`;
+}
+export function toHSLA(color) {
+    rgbToHSL(getRed(color), getGreen(color), getBlue(color));
+    const h = buffer[0];
+    const s = buffer[1];
+    const l = buffer[2];
+    const a = getAlpha(color) / 255;
+    return { h, s, l, a };
+}
+/**
+ * Returns [r, g, b] as floats in 0-1 range, suitable for GPU shader uniforms.
+ */
+export function toGLrgb(color) {
+    return [getRed(color) / 255, getGreen(color) / 255, getBlue(color) / 255];
+}
+// Conversion functions
+// https://www.30secondsofcode.org/js/s/rgb-hex-hsl-hsb-color-format-conversion/
+function rgbToHSL(r, g, b) {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    // `l` here is the max channel (HSV value) and `s` the chroma, not the HSL
+    // lightness/saturation; the real lightness is (max + min) / 2 = l - s / 2
+    const l = Math.max(r, g, b);
+    const s = l - Math.min(r, g, b);
+    const h = s
+        ? l === r
+            ? (g - b) / s
+            : l === g
+                ? 2 + (b - r) / s
+                : 4 + (r - g) / s
+        : 0;
+    // the saturation formula is picked by lightness, not by the max channel:
+    // branching on `l` understated it whenever max > 0.5 while lightness < 0.5
+    // (e.g. #0a0ac8 came out 63.3% instead of 90.5%)
+    const doubleLightness = 2 * l - s;
+    buffer[0] = 60 * h < 0 ? 60 * h + 360 : 60 * h;
+    buffer[1] =
+        100 *
+            (s
+                ? doubleLightness <= 1
+                    ? s / doubleLightness
+                    : s / (2 - doubleLightness)
+                : 0);
+    buffer[2] = (100 * doubleLightness) / 2;
+}
+// https://stackoverflow.com/a/29463581/3112706

package/esm/util/color-bits/functions.d.ts

@@ -0,0 +1,33 @@
+import type { Color } from './core.ts';
+/**
+ * Modifies color alpha channel.
+ * @param color - Color
+ * @param value - Value in the range [0, 1]
+ */
+export declare function alpha(color: Color, value: number): Color;
+/**
+ * Darkens a color.
+ * @param color - Color
+ * @param coefficient - Multiplier in the range [0, 1]
+ */
+export declare function darken(color: Color, coefficient: number): Color;
+/**
+ * Lighten a color.
+ * @param color - Color
+ * @param coefficient - Multiplier in the range [0, 1]
+ */
+export declare function lighten(color: Color, coefficient: number): Color;
+/**
+ * Blend (aka mix) two colors together.
+ * @param background The background color
+ * @param overlay The overlay color that is affected by @opacity
+ * @param opacity Opacity (alpha) for @overlay
+ * @param [gamma=1.0] Gamma correction coefficient. `1.0` to match browser behavior, `2.2` for gamma-corrected blending.
+ */
+export declare function blend(background: Color, overlay: Color, opacity: number, gamma?: number): number;
+/**
+ * The relative brightness of any point in a color space, normalized to 0 for
+ * darkest black and 1 for lightest white.
+ * @returns The relative brightness of the color in the range 0 - 1, with 3 digits precision
+ */
+export declare function getLuminance(color: Color): number;

package/esm/util/color-bits/functions.js

@@ -0,0 +1,70 @@
+import { getAlpha, getBlue, getGreen, getRed, newColor, setAlpha, } from './core.js';
+/**
+ * Modifies color alpha channel.
+ * @param color - Color
+ * @param value - Value in the range [0, 1]
+ */
+export function alpha(color, value) {
+    return setAlpha(color, Math.round(value * 255));
+}
+/**
+ * Darkens a color.
+ * @param color - Color
+ * @param coefficient - Multiplier in the range [0, 1]
+ */
+export function darken(color, coefficient) {
+    const r = getRed(color);
+    const g = getGreen(color);
+    const b = getBlue(color);
+    const a = getAlpha(color);
+    const factor = 1 - coefficient;
+    return newColor(r * factor, g * factor, b * factor, a);
+}
+/**
+ * Lighten a color.
+ * @param color - Color
+ * @param coefficient - Multiplier in the range [0, 1]
+ */
+export function lighten(color, coefficient) {
+    const r = getRed(color);
+    const g = getGreen(color);
+    const b = getBlue(color);
+    const a = getAlpha(color);
+    return newColor(r + (255 - r) * coefficient, g + (255 - g) * coefficient, b + (255 - b) * coefficient, a);
+}
+/**
+ * Blend (aka mix) two colors together.
+ * @param background The background color
+ * @param overlay The overlay color that is affected by @opacity
+ * @param opacity Opacity (alpha) for @overlay
+ * @param [gamma=1.0] Gamma correction coefficient. `1.0` to match browser behavior, `2.2` for gamma-corrected blending.
+ */
+export function blend(background, overlay, opacity, gamma = 1) {
+    const blendChannel = (b, o) => Math.round((b ** (1 / gamma) * (1 - opacity) + o ** (1 / gamma) * opacity) ** gamma);
+    const r = blendChannel(getRed(background), getRed(overlay));
+    const g = blendChannel(getGreen(background), getGreen(overlay));
+    const b = blendChannel(getBlue(background), getBlue(overlay));
+    // Alpha is interpolated too, and linearly — it is a coverage fraction, not a
+    // gamma-encoded channel, so `gamma` has no business in it. Hardcoding 255
+    // made `colord(a).mix(b)` return opaque where real colord carries the
+    // operands' alpha through, on a `mix` that is public API with a colord-shaped
+    // signature. Both operands opaque is byte-identical, which is every in-tree
+    // caller today.
+    const a = Math.round(getAlpha(background) * (1 - opacity) + getAlpha(overlay) * opacity);
+    return newColor(r, g, b, a);
+}
+/**
+ * The relative brightness of any point in a color space, normalized to 0 for
+ * darkest black and 1 for lightest white.
+ * @returns The relative brightness of the color in the range 0 - 1, with 3 digits precision
+ */
+export function getLuminance(color) {
+    const r = getRed(color) / 255;
+    const g = getGreen(color) / 255;
+    const b = getBlue(color) / 255;
+    const apply = (v) => v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+    const r1 = apply(r);
+    const g1 = apply(g);
+    const b1 = apply(b);
+    return Math.round((0.2126 * r1 + 0.7152 * g1 + 0.0722 * b1) * 1000) / 1000;
+}

package/esm/util/color-bits/index.d.ts

@@ -0,0 +1,5 @@
+export { OFFSET_A, OFFSET_B, OFFSET_G, OFFSET_R, from, getAlpha, getBlue, getGreen, getRed, newColor, setAlpha, setBlue, setGreen, setRed, toNumber, } from './core.ts';
+export type { Color } from './core.ts';
+export { parse, parseColor, parseHex } from './parse.ts';
+export { format, formatHEX, formatHEXA, formatHSLA, formatRGBA, toGLrgb, toHSLA, toRGBA, } from './format.ts';
+export { alpha, blend, darken, getLuminance, lighten } from './functions.ts';