@jbrowse/core 4.2.1 → 5.0.0-beta.1

package/esm/util/color/index.js

@@ -1,39 +1,208 @@
-import { darken, emphasize as muiEmphasize, getContrastRatio, getLuminance as muiGetLuminance, lighten, } from '@mui/material/styles';
-import { namedColorToHex } from "./cssColorsLevel4.js";
-export function contrastingTextColor(color) {
-    const luminance = getLuminance(color);
-    return luminance > 0.5 ? 'black' : 'white';
-}
+// The color math is `ui/palette.ts`'s, not Material UI's. Same values —
+// `palette.test.ts` asserts them against a real MUI theme, and `emphasize` is
+// checked against MUI's directly below — but this module is reached from a
+// plugin's eagerly-evaluated code, and the MUI import made it one of the
+// first-party edges keeping `@mui/material/styles` in every host's first paint.
+// See agent-docs/reference/EAGER_BUNDLE.md.
+import { darken, getContrastRatio, lighten, getLuminance as luminanceOf, } from '../../ui/palette.js';
+import * as convert from '../color-bits/convert.js';
+import { cssColorToNormalizedRgb } from '../colorBits.js';
+import { namedColorToHex } from './cssColorsLevel4.js';
+/**
+ * The relative brightness of any point in a color space,
+ * normalized to 0 for darkest black and 1 for lightest white,
+ * with support for named colors on top.
+ *
+ * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+ *
+ * @param color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(),
+ *  hsl(), hsla(), or named color
+ * @returns The relative brightness of the color in the range 0 - 1
+ */
 function getLuminance(color) {
     const convertedColor = namedColorToHex(color);
-    return muiGetLuminance(convertedColor || color);
+    return luminanceOf(convertedColor || color);
 }
+/**
+ * Darken or lighten a color, depending on its luminance.
+ * Light colors are darkened, dark colors are lightened.
+ *
+ * @param color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(),
+ * hsl(), hsla(), or named color
+ * @param coefficient - multiplier in the range 0 - 1, defaults to 0.15
+ * @returns A CSS color string. Hex input values are returned as rgb
+ */
 export function emphasize(color, coefficient = 0.15) {
-    const convertedColor = namedColorToHex(color);
-    return muiEmphasize(convertedColor || color, coefficient);
+    const convertedColor = namedColorToHex(color) || color;
+    return getLuminance(convertedColor) > 0.5
+        ? darken(convertedColor, coefficient)
+        : lighten(convertedColor, coefficient);
 }
+const CONTRAST_STEPS = 20;
+/**
+ * Push `foreground` away from `background` until it clears `minContrastRatio`,
+ * returning the closest it got when that ratio is unreachable.
+ *
+ * `minContrastRatio` genuinely cannot be met against a mid-luminance
+ * background: lighten/darken clamp their coefficient at 1, so the candidate
+ * pins at white/black, and against a `#b0b0b0` paper the best ratio any color
+ * reaches is about 2.2. This used to be a `while (ratio < min)` loop with an
+ * unbounded coefficient, which froze the render thread outright for 38 of the 40
+ * default refName colors.
+ */
 export function makeContrasting(foreground, background = 'white', minContrastRatio = 3) {
-    let convertedForeground = namedColorToHex(foreground) || foreground;
+    const originalColor = namedColorToHex(foreground) || foreground;
     const convertedBackground = namedColorToHex(background) || background;
     const backgroundLuminance = getLuminance(convertedBackground);
-    let contrastRatio = getContrastRatio(convertedForeground, convertedBackground);
-    const originalColor = convertedForeground;
-    let coefficient = 0.05;
-    while (contrastRatio < minContrastRatio) {
-        convertedForeground =
-            backgroundLuminance > 0.5
-                ? darken(originalColor, coefficient)
-                : lighten(originalColor, coefficient);
-        coefficient += 0.05;
-        contrastRatio = getContrastRatio(convertedForeground, convertedBackground);
+    let best = originalColor;
+    let bestRatio = getContrastRatio(originalColor, convertedBackground);
+    // an integer step keeps the last coefficient exactly 1, where the clamp bites
+    for (let step = 1; step <= CONTRAST_STEPS && bestRatio < minContrastRatio; step++) {
+        const coefficient = step / CONTRAST_STEPS;
+        const candidate = backgroundLuminance > 0.5
+            ? darken(originalColor, coefficient)
+            : lighten(originalColor, coefficient);
+        const ratio = getContrastRatio(candidate, convertedBackground);
+        // lightening a dark color against a mid-grey background dips before it
+        // climbs, so track the max rather than taking the last candidate
+        if (ratio > bestRatio) {
+            best = candidate;
+            bestRatio = ratio;
+        }
+    }
+    return best;
+}
+export { isNamedColor, namedColorToHex } from './cssColorsLevel4.js';
+// The (lightness, chroma) tiers randomColor picks between, in OKLCH. Values are
+// in the band a hand-built categorical palette occupies — bright enough to tell
+// apart, dark enough that black text over one still reads, and never near
+// white/black. The three differ enough to separate two neighbouring hues, and
+// little enough that no tier reads as "the faded ones".
+// What a value-less feature is painted. Neutral and unsaturated on purpose: it
+// has to read as "not in a category" beside a palette whose every member is
+// equally light and equally colorful, so it cannot be one more hue.
+const NO_CATEGORY_COLOR = '#afafaf';
+const RANDOM_COLOR_TIERS = [
+    { lightness: 0.66, chroma: 0.15 },
+    { lightness: 0.56, chroma: 0.14 },
+    { lightness: 0.75, chroma: 0.12 },
+];
+// sRGB has room for very different amounts of chroma at different hues (a
+// vivid yellow exists, an equally vivid blue does not), so a requested chroma
+// is often outside the gamut. Bisect down to the most saturated in-gamut
+// version of the SAME hue and lightness, rather than letting the channel clamp
+// do it — clamping a channel shifts the hue, which is the one thing this must
+// hold constant.
+const GAMUT_BISECTION_STEPS = 8;
+const GAMUT_EPSILON = 1 / 512;
+function oklchToSrgb(lightness, chroma, hue) {
+    return convert.xyzd50ToSrgb(...convert.oklchToXyzd50(lightness, chroma, hue));
+}
+function inGamut(rgb) {
+    return rgb.every(v => v >= -GAMUT_EPSILON && v <= 1 + GAMUT_EPSILON);
+}
+function oklchToHex(lightness, chroma, hue) {
+    let rgb = oklchToSrgb(lightness, chroma, hue);
+    if (!inGamut(rgb)) {
+        let lo = 0;
+        let hi = chroma;
+        for (let i = 0; i < GAMUT_BISECTION_STEPS; i++) {
+            const mid = (lo + hi) / 2;
+            const candidate = oklchToSrgb(lightness, mid, hue);
+            if (inGamut(candidate)) {
+                lo = mid;
+                rgb = candidate;
+            }
+            else {
+                hi = mid;
+            }
+        }
     }
-    return convertedForeground;
+    return `#${rgb
+        .map(v => Math.max(0, Math.min(255, Math.round(v * 255)))
+        .toString(16)
+        .padStart(2, '0'))
+        .join('')}`;
 }
-export { isNamedColor, namedColorToHex } from "./cssColorsLevel4.js";
+/**
+ * #api
+ * Move a color's OKLCH lightness by `lightnessShift` and scale its chroma,
+ * holding its hue.
+ *
+ * For extending a categorical palette past its length. Cycling a nine-color
+ * list over a 24-chromosome karyotype repeats the color outright; cycling it
+ * with a lightness shift per lap gives the hue back as a variant still told
+ * apart from the original — tab20's construction, which pairs a light and a
+ * dark of each hue.
+ *
+ * SHIFT rather than a fixed lightness, and SCALE rather than a fixed chroma,
+ * because a categorical palette is uneven on purpose: category10's brown and
+ * its red are 5 degrees apart in hue and are told apart by chroma alone, so
+ * re-lighting both to one (lightness, chroma) makes them the same color.
+ * Keeping each color's own relative chroma keeps brown reading as brown.
+ *
+ * In OKLCH rather than through `lighten`/`darken`, which work in sRGB, where
+ * the same coefficient moves a yellow and a blue by visibly different amounts:
+ * a lap has to read as one tone across the whole palette or it reads as noise.
+ *
+ * @param color - CSS color to transform
+ * @param lightnessShift - added to its OKLCH lightness (which is 0 - 1)
+ * @param chromaScale - multiplies its OKLCH chroma; the result is reduced at
+ *  constant hue if that lands out of gamut
+ * @returns A CSS hex color string
+ */
+export function relight(color, lightnessShift, chromaScale = 1) {
+    const [lightness, chroma, hue] = convert.xyzd50ToOklch(...convert.srgbToXyzd50(...cssColorToNormalizedRgb(color)));
+    return oklchToHex(Math.max(0, Math.min(1, lightness + lightnessShift)), chroma * chromaScale, hue);
+}
+/**
+ * Generate a consistent random color for a given string.
+ * The same string will always generate the same color, with no shared palette
+ * state — so the same value (e.g. a gene symbol used as an ortholog id) gets the
+ * same color across independent tracks/panels.
+ *
+ * Statelessness is why this hashes into a color space rather than indexing a
+ * fixed palette of N: with no allocator there is no "next unused color", so an
+ * N-color palette collides by the birthday problem — six values into a
+ * twenty-color palette collide more often than not — while a hue circle does
+ * not repeat until 360 values. What a curated palette actually buys is
+ * perceptual evenness, and that comes from the space, not the list: hues are
+ * placed in OKLCH at a fixed lightness and chroma, so every value is equally
+ * light and equally colorful. HSL, which this used to use, is neither — its
+ * hue wheel spends a quarter of itself on greens that look identical and a
+ * sliver on yellow, and at one lightness its yellows glare while its blues go
+ * murky. That unevenness is what reads as "random RGB".
+ *
+ * A value that is absent gets NO_CATEGORY_COLOR rather than a hue, and that is
+ * the difference between this being usable on real data and not. The everyday
+ * caller is the Color-by-attribute dialog, which writes
+ * `jexl:randomColor(get(feature,'<attr>'))` over a whole track — and most files
+ * have the attribute on some features and not others, so most of the time this
+ * is handed `undefined`. It used to throw on that (`str.length` of undefined),
+ * once per feature, and what a reader saw was every unlabelled feature in one
+ * strong color: a large fake category, drawn over the real ones. Grey says the
+ * only true thing about a feature with no value for the attribute you asked to
+ * colour by.
+ *
+ * @param str - The string to generate a color from
+ * @returns A CSS hex color string
+ */
 export function randomColor(str) {
-    let sum = 0;
+    if (!str) {
+        return NO_CATEGORY_COLOR;
+    }
+    // djb2 hash — much better distribution than a char-code sum (anagrams and
+    // similar strings get well-separated hues).
+    let hash = 5381;
     for (let i = 0; i < str.length; i++) {
-        sum += str.charCodeAt(i);
+        hash = ((hash << 5) + hash) ^ str.charCodeAt(i);
     }
-    return `hsl(${sum * 10}, 50%, 50%)`;
+    const h = hash >>> 0;
+    const hue = h % 360;
+    // The tier is picked by a separately mixed hash (xorshift + Math.imul for a
+    // real 32-bit multiply — a plain `*` overflows float precision and drops the
+    // low bits) so it varies independently of the hue rather than tracking it.
+    const mix = Math.imul(h ^ (h >>> 15), 2246822519) >>> 0;
+    const tier = RANDOM_COLOR_TIERS[mix % RANDOM_COLOR_TIERS.length];
+    return oklchToHex(tier.lightness, tier.chroma, hue);
 }

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

@@ -0,0 +1,4 @@
+export declare function cast(n: number): number;
+export declare function get(n: number, offset: number): number;
+export declare function set(n: number, offset: number, byte: number): number;
+export declare function clampByte(n: number): number;

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;