saturon 0.2.2 → 0.3.0

package/dist/utils.js

@@ -1,6 +1,6 @@
 import { Color } from "./Color.js";
-import { config, systemColors } from "./config.js";
-import { colorBases, colorModels, colorFunctions, colorSpaces, colorTypes, namedColors } from "./converters.js";
+import { config } from "./config.js";
+import { colorModels } from "./converters.js";
 import { fitMethods } from "./math.js";
 /** Global cache for internal Color operations. */
 export const cache = new Map();
@@ -76,374 +76,22 @@ export function use(...pluginFns) {
         }
     }
 }
-const getterRegistry = {
-    "color-types": () => Object.keys(colorTypes),
-    "color-bases": () => Object.keys(colorBases),
-    "color-functions": () => Object.keys(colorFunctions),
-    "color-models": () => Object.keys(colorModels),
-    "color-spaces": () => Object.keys(colorSpaces),
-    "named-colors": () => Object.keys(namedColors),
-    "system-colors": () => Object.keys(systemColors),
-    "output-types": () => {
-        return Object.keys(colorTypes).filter((key) => {
-            const type = colorTypes[key];
-            return (typeof type["fromBridge"] === "function" &&
-                typeof type["format"] === "function");
-        });
-    },
-    plugins: () => Object.keys(plugins),
-    "fit-methods": () => ["none", "clip", ...Object.keys(fitMethods)],
-};
-/**
- * Retrieve a list of registered items of a specified type.
- *
- * @param type - The getter type, e.g. "color-types".
- * @returns The array returned by the getter.
- */
-export function get(type) {
-    const fn = getterRegistry[type];
-    return fn();
-}
-const converterRegistry = {
-    /* eslint-disable no-unused-vars */
-    "color-type": { fn: registerColorType },
-    "color-base": { fn: registerColorBase },
-    "color-function": { fn: registerColorFunction },
-    "color-space": { fn: registerColorSpace },
-    "named-color": { fn: registerNamedColor },
-    "fit-method": { fn: registerFitMethod },
-    /* eslint-enable no-unused-vars */
-};
-/**
- * Bulk register multiple converters of a specified type.
- *
- * @param type - The converter type, e.g. "color-function".
- * @param entries - Array of { name, value } objects.
- */
-export function register(type, entries) {
-    const fn = converterRegistry[type].fn;
-    for (const entry of entries)
-        fn(entry.name, entry.value); // eslint-disable-line @typescript-eslint/no-explicit-any
-}
-/**
- * Registers a new `<color>` converter under the specified name.
- *
- * @param name - Unique name for the `<color>` converter.
- * @param converter - Converter implementing color conversion logic.
- * @throws If the name is already used or the converter is invalid.
- */
-export function registerColorType(name, converter) {
-    const n = name.replace(/(?:\s+)/g, "-").toLowerCase();
-    const types = colorTypes;
-    if (n in types) {
-        throw new Error(`The name '${n}' is already used.`);
-    }
-    if (typeof converter !== "object" || converter === null) {
-        throw new TypeError("Converter must be a non-null object.");
-    }
-    const requiredFns = [
-        ["isValid", "function"],
-        ["bridge", "string"],
-        ["toBridge", "function"],
-        ["parse", "function"],
-    ];
-    for (const [key, type] of requiredFns) {
-        if (typeof converter[key] !== type) {
-            throw new TypeError(`Converter.${String(key)} must be a ${type}.`);
-        }
-    }
-    const hasFromBridge = "fromBridge" in converter;
-    const hasFormat = "format" in converter;
-    if (hasFromBridge && typeof converter.fromBridge !== "function") {
-        throw new TypeError("Converter.fromBridge must be a function if provided.");
-    }
-    if (hasFormat && typeof converter.format !== "function") {
-        throw new TypeError("Converter.format must be a function if provided.");
-    }
-    if (hasFromBridge !== hasFormat) {
-        throw new Error("Converter.fromBridge and Converter.format must either both be provided or both be omitted.");
-    }
-    if (converter.bridge in colorModels === false) {
-        throw new Error(`Converter.bridge '${converter.bridge}' does not correspond to any registered color model.`);
-    }
-    types[n] = converter;
-    cache.delete("graph");
-}
-/**
- * Registers a new `<color-base>` converter under the specified name.
- *
- * @param name - The unique name for the `<color-base>` converter.
- * @param converter - Converter implementing color conversion logic.
- * @throws If the name is already used or the converter is invalid.
- */
-export function registerColorBase(name, converter) {
-    const n = name.replace(/(?:\s+)/g, "-").toLowerCase();
-    const bases = colorBases;
-    const types = colorTypes;
-    if (n in types) {
-        throw new Error(`The name '${n}' is already used.`);
-    }
-    if (typeof converter !== "object" || converter === null) {
-        throw new TypeError("Converter must be a non-null object.");
-    }
-    const requiredFns = [
-        ["isValid", "function"],
-        ["bridge", "string"],
-        ["toBridge", "function"],
-        ["parse", "function"],
-    ];
-    for (const [key, type] of requiredFns) {
-        if (typeof converter[key] !== type) {
-            throw new TypeError(`Converter.${String(key)} must be a ${type}.`);
-        }
-    }
-    const hasFromBridge = "fromBridge" in converter;
-    const hasFormat = "format" in converter;
-    if (hasFromBridge && typeof converter.fromBridge !== "function") {
-        throw new TypeError("Converter.fromBridge must be a function if provided.");
-    }
-    if (hasFormat && typeof converter.format !== "function") {
-        throw new TypeError("Converter.format must be a function if provided.");
-    }
-    if (hasFromBridge !== hasFormat) {
-        throw new Error("Converter.fromBridge and Converter.format must either both be provided or both be omitted.");
-    }
-    if (converter.bridge in colorModels === false) {
-        throw new Error(`Converter.bridge '${converter.bridge}' does not correspond to any registered color model.`);
-    }
-    bases[n] = converter;
-    types[n] = converter;
-    cache.delete("graph");
-}
-/**
- * Registers a new `<color-function>` converter under the specified name.
- *
- * @param name - The unique name for the `<color-function>` converter.
- * @param converter - Converter implementing color conversion logic.
- * @throws If the name is already used or the converter is invalid.
- */
-export function registerColorFunction(name, converter) {
-    const n = name.replace(/(?:\s+)/g, "").toLowerCase();
-    const models = colorModels;
-    const functions = colorFunctions;
-    const types = colorTypes;
-    if (typeof converter.components === "object" &&
-        converter.components !== null &&
-        !Array.isArray(converter.components)) {
-        const normalized = {};
-        for (const key of Object.keys(converter.components)) {
-            normalized[key.toLowerCase()] = converter.components[key];
-        }
-        converter.components = normalized;
-    }
-    else {
-        throw new TypeError("Converter.components must be a non-null object.");
-    }
-    if (n in types) {
-        throw new Error(`The name '${n}' is already used.`);
-    }
-    if (typeof converter !== "object" || converter === null) {
-        throw new TypeError("Converter must be a non-null object.");
-    }
-    const requiredFns = [
-        ["bridge", "string"],
-        ["toBridge", "function"],
-        ["fromBridge", "function"],
-    ];
-    for (const [key, type] of requiredFns) {
-        if (typeof converter[key] !== type) {
-            throw new TypeError(`Converter.${String(key)} must be a ${type}.`);
-        }
-    }
-    if (converter.bridge in colorModels === false) {
-        throw new Error(`Converter.bridge '${converter.bridge}' does not correspond to any registered color model.`);
-    }
-    if ("targetGamut" in converter && converter.targetGamut !== null && typeof converter.targetGamut !== "string") {
-        throw new TypeError(`Converter.targetGamut must be a string or null.`);
-    }
-    if ("supportsLegacy" in converter && typeof converter.supportsLegacy !== "boolean") {
-        throw new TypeError(`Converter.supportsLegacy must be a boolean.`);
-    }
-    if ("alphaVariant" in converter && typeof converter.alphaVariant !== "string") {
-        throw new TypeError(`Converter.alphaVariant must be a string.`);
-    }
-    const componentNames = Object.keys(converter.components);
-    if (new Set(componentNames).size !== componentNames.length) {
-        throw new Error("Converter.components must have unique component names.");
-    }
-    if (componentNames.includes("none")) {
-        throw new Error('Converter.components cannot have a component named "none".');
-    }
-    const colorConv = modelConverterToColorConverter(n, converter);
-    models[n] = converter;
-    functions[n] = colorConv;
-    types[n] = colorConv;
-    cache.delete("graph");
-}
-/**
- * Registers a new color space converter for `<color()>` function under the specified name.
- *
- * @param name - The unique name for the color space converter.
- * @param converter - Converter implementing color space conversion logic.
- * @throws If the name is already used or the converter is invalid.
- */
-export function registerColorSpace(name, converter) {
-    const n = name.replace(/(?:\s+)/g, "-").toLowerCase();
-    const spaces = colorSpaces;
-    const models = colorModels;
-    const functions = colorFunctions;
-    const types = colorTypes;
-    if (n in types) {
-        throw new Error(`The name '${n}' is already used.`);
-    }
-    if (typeof converter !== "object" || converter === null) {
-        throw new TypeError("Converter must be a non-null object.");
-    }
-    if (!Array.isArray(converter.components) || converter.components.some((c) => typeof c !== "string")) {
-        throw new TypeError("Converter.components must be an array of strings.");
-    }
-    if (typeof converter.bridge !== "string") {
-        throw new TypeError("Converter.bridge must be a string.");
-    }
-    const matrixChecks = [
-        ["toBridgeMatrix", "toBridgeMatrix"],
-        ["fromBridgeMatrix", "fromBridgeMatrix"],
-    ];
-    for (const [key, label] of matrixChecks) {
-        const matrix = converter[key];
-        if (!Array.isArray(matrix) ||
-            matrix.some((row) => !Array.isArray(row) || row.some((val) => typeof val !== "number"))) {
-            throw new TypeError(`Converter.${label} must be a 2D array of numbers.`);
-        }
-    }
-    if (converter.bridge in colorModels === false) {
-        throw new Error(`Converter.bridge '${converter.bridge}' does not correspond to any registered color model.`);
-    }
-    if ("targetGamut" in converter && converter.targetGamut !== null) {
-        throw new TypeError("Converter.targetGamut must be null if provided.");
-    }
-    if ("toLinear" in converter && typeof converter.toLinear !== "function") {
-        throw new TypeError("Converter.toLinear must be a function if provided.");
-    }
-    if ("fromLinear" in converter && typeof converter.fromLinear !== "function") {
-        throw new TypeError("Converter.fromLinear must be a function if provided.");
-    }
-    const modelConv = spaceConverterToModelConverter(n, converter);
-    const colorConv = modelConverterToColorConverter(n, modelConv);
-    spaces[n] = modelConv;
-    models[n] = modelConv;
-    functions[n] = colorConv;
-    types[n] = colorConv;
-    cache.delete("graph");
-}
-/**
- * Registers a new `<named-color>` with the specified RGB value.
- *
- * @param name - Color name (letters only, case-insensitive).
- * @param rgb - RGB array [r, g, b].
- * @throws If RGB is invalid, or the name or value is already registered.
- */
-export function registerNamedColor(name, rgb) {
-    if (!Array.isArray(rgb) || rgb.length !== 3) {
-        throw new Error(`RGB value must be an array of exactly three numbers, received length ${rgb.length}.`);
-    }
-    const n = name.replace(/[^a-zA-Z]/g, "").toLowerCase();
-    const names = namedColors;
-    if (names[n]) {
-        throw new Error(`<named-color> '${n}' is already registered.`);
-    }
-    const duplicate = Object.entries(names).find(([, value]) => value.every((channel, i) => channel === rgb[i]));
-    if (duplicate) {
-        throw new Error(`RGB value [${rgb.join(", ")}] is already registered as '${duplicate[0]}'.`);
-    }
-    names[n] = rgb;
-}
-/**
- * Registers a new fit method under a specified name.
- *
- * @param name - Name for the fit method (whitespace → hyphens, lowercased).
- * @param method - The fit function.
- * @throws If name exists or method is not a function.
- */
-export function registerFitMethod(name, method) {
-    const n = name.trim().replace(/\s+/g, "-").toLowerCase();
-    const methods = fitMethods;
-    if (n in methods)
-        throw new Error(`Fit method '${n}' already exists.`);
-    if (typeof method !== "function")
-        throw new TypeError("Fit method must be a function.");
-    methods[n] = method;
-}
-/**
- * Unregisters one or more color types from the registry.
- *
- * @param types - Names of color types to remove.
- */
-export function unregister(...types) {
-    for (const type of types) {
-        delete colorTypes[type];
-        delete colorBases[type];
-        delete colorFunctions[type];
-        delete colorModels[type];
-        delete colorSpaces[type];
-    }
-    cache.delete("graph");
-    cache.delete("paths");
-}
-/**
- * Cleans and normalizes a CSS color string.
- *
- * @param color - The CSS color string.
- * @returns The normalized string.
- */
-export function clean(color) {
-    return color
-        .trim()
-        .replace(/\s+/g, " ")
-        .replace(/\( /g, "(")
-        .replace(/ \)/g, ")")
-        .replace(/\s*,\s*/g, ", ")
-        .replace(/ ,/g, ",")
-        .replace(/calc\(NaN\)/g, "0")
-        .replace(/[A-Z]/g, (c) => String.fromCharCode(c.charCodeAt(0) + 32));
-}
 /**
- * Extracts a balanced expression from a string starting at a given index.
+ * Normalizes a component value to a valid range based on the component definition.
  *
- * - If the character at `start` is '(', extracts the full parenthetical expression (including nested parentheses).
- * - Otherwise, extracts a contiguous sequence of alphanumeric characters, hyphens, percent signs, or '#'.
- *
- * @param input - The string to extract from.
- * @param start - Index to start extraction.
- * @returns An object with the extracted `expression` and the index `end` after it.
+ * @param component - The numeric component value to normalize
+ * @param value - The component definition that specifies the valid range (either a [min, max] tuple, "hue" for [0, 360], or a default [0, 100] range)
+ * @returns The normalized component value, clamped to the valid range or 0/max/min for NaN/Infinity cases
  */
-export function extractBalancedExpression(input, start) {
-    let i = start;
-    let expression = "";
-    let depth = 0;
-    if (input[i] !== "(") {
-        while (i < input.length && /[a-zA-Z0-9-%#]/.test(input[i])) {
-            expression += input[i];
-            i++;
-        }
-    }
-    if (input[i] === "(") {
-        expression += "(";
-        i++;
-        depth = 1;
-        while (i < input.length && depth > 0) {
-            const char = input[i];
-            if (char === "(")
-                depth++;
-            else if (char === ")")
-                depth--;
-            if (depth > 0)
-                expression += char;
-            i++;
-        }
-        expression += ")";
-    }
-    return { expression, end: i };
+export function normalize(component, value) {
+    const [min, max] = Array.isArray(value) ? value : value === "hue" ? [0, 360] : [0, 100];
+    if (Number.isNaN(component))
+        return 0;
+    if (component === Infinity)
+        return max;
+    if (component === -Infinity)
+        return min;
+    return typeof component === "number" ? component : 0;
 }
 /**
  * Fits or clips color coordinates to a specified model and gamut.
@@ -457,17 +105,16 @@ export function extractBalancedExpression(input, start) {
 export function fit(coords, model, options = {}) {
     const { method = config.defaults.fit, precision } = options;
     const { components } = colorModels[model];
-    const componentProps = Object.values(components).reduce((arr, props) => ((arr[props.index] = props), arr), []);
+    const defs = Object.values(components).reduce((arr, props) => ((arr[props.index] = props), arr), []);
     let clipped;
-    if (method === "none") {
+    if (method === "none")
         clipped = coords;
-    }
     else if (method === "clip") {
-        clipped = coords.slice(0, 3).map((v, i) => {
-            const prop = componentProps[i];
+        clipped = coords.map((v, i) => {
+            const prop = defs[i];
             if (!prop)
                 throw new Error(`Missing component properties for index ${i}.`);
-            if (prop.value === "angle")
+            if (prop.value === "hue")
                 return ((v % 360) + 360) % 360;
             const [min, max] = Array.isArray(prop.value) ? prop.value : [0, 100];
             return Math.min(max, Math.max(min, v));
@@ -480,700 +127,17 @@ export function fit(coords, model, options = {}) {
         }
         clipped = fn(coords, model);
     }
-    return clipped.slice(0, 3).map((v, i) => {
+    return clipped.map((v, i) => {
         let p;
         if (typeof precision === "number" || precision === null)
             p = precision;
         else if (typeof precision === "undefined")
-            p = componentProps[i]?.precision ?? 3;
+            p = defs[i]?.precision ?? 3;
         else
             throw new TypeError(`Invalid precision value: ${precision}.`);
         return p === null ? v : Number(v.toFixed(p));
     });
 }
-/**
- * Converts a color model converter to `<color>` converter.
- *
- * @param name - The name of the color model.
- * @param converter - The color model converter definition.
- * @returns An object of type `ColorConverter`.
- */
-export function modelConverterToColorConverter(name, converter) {
-    const evaluateComponent = (token, value, base = {}, commaSeparated = false, relative = false) => {
-        const parsePercent = (str, min, max) => {
-            const percent = parseFloat(str);
-            if (isNaN(percent))
-                throw new Error(`Invalid percentage value: '${str}'.`);
-            if (value === "percentage")
-                return percent;
-            if (min < 0 && max > 0)
-                return ((percent / 100) * (max - min)) / 2;
-            return (percent / 100) * (max - min) + min;
-        };
-        const parseAngle = (token) => {
-            const value = parseFloat(token);
-            if (isNaN(value))
-                throw new Error(`Invalid angle value: '${token}'.`);
-            if (token.slice(-3) === "deg")
-                return value;
-            if (token.slice(-3) === "rad")
-                return value * (180 / pi);
-            if (token.slice(-4) === "grad")
-                return value * 0.9;
-            if (token.slice(-4) === "turn")
-                return value * 360;
-            return value;
-        };
-        const parseCalc = (token, _min, _max) => {
-            const tokenize = (s) => {
-                const out = [];
-                for (let i = 0; i < s.length;) {
-                    const c = s[i];
-                    if (/\s/.test(c)) {
-                        i++;
-                        continue;
-                    }
-                    if (s.slice(i, i + 2) === "**") {
-                        out.push({ type: "operator", value: "**" });
-                        i += 2;
-                        continue;
-                    }
-                    if (/[0-9]/.test(c) || (c === "." && /[0-9]/.test(s[i + 1] || ""))) {
-                        let num = "";
-                        while (i < s.length && /[0-9.]/.test(s[i]))
-                            num += s[i++];
-                        if (i < s.length && /[eE]/.test(s[i])) {
-                            num += s[i++];
-                            if (/[+-]/.test(s[i]))
-                                num += s[i++];
-                            while (i < s.length && /[0-9]/.test(s[i]))
-                                num += s[i++];
-                        }
-                        out.push({ type: "number", value: parseFloat(num) });
-                        continue;
-                    }
-                    if (/[a-zA-Z_]/.test(c)) {
-                        let id = "";
-                        while (i < s.length && /[a-zA-Z0-9_]/.test(s[i]))
-                            id += s[i++];
-                        out.push({ type: "identifier", value: id });
-                        continue;
-                    }
-                    if ("+-*/%(),".includes(c)) {
-                        out.push({ type: "operator", value: c });
-                        i++;
-                        continue;
-                    }
-                    throw new Error(`Unexpected character: ${c}`);
-                }
-                return out;
-            };
-            const parse = (tokens) => {
-                let pos = 0;
-                const cur = () => (pos < tokens.length ? tokens[pos] : null);
-                const nxt = () => {
-                    if (pos >= tokens.length)
-                        throw new Error("Unexpected end of input");
-                    return tokens[pos++];
-                };
-                const expect = (v) => {
-                    const t = cur();
-                    if (!t || t.value !== v)
-                        throw new Error(`Expected "${v}" but got "${t ? t.value : "end of input"}`);
-                    nxt();
-                };
-                const parsePrimary = () => {
-                    const t = cur();
-                    if (!t)
-                        throw new Error("Unexpected end of input");
-                    if (t.type === "number") {
-                        nxt();
-                        return { type: "number", value: t.value };
-                    }
-                    if (t.type === "identifier") {
-                        nxt();
-                        if (cur() && cur().value === "(") {
-                            nxt();
-                            const args = [];
-                            if (cur() && cur().value !== ")") {
-                                args.push(parseAdd());
-                                while (cur() && cur().value === ",") {
-                                    nxt();
-                                    args.push(parseAdd());
-                                }
-                            }
-                            expect(")");
-                            return { type: "call", func: t.value, args };
-                        }
-                        return { type: "var", name: t.value };
-                    }
-                    if (t.value === "(") {
-                        nxt();
-                        const e = parseAdd();
-                        expect(")");
-                        return e;
-                    }
-                    throw new Error(`Unexpected token: ${t.value}`);
-                };
-                const parseUnary = () => {
-                    if (cur() && (cur().value === "+" || cur().value === "-")) {
-                        const op = nxt().value;
-                        return { type: "unary", op, arg: parseUnary() };
-                    }
-                    return parsePrimary();
-                };
-                const parsePower = () => {
-                    let left = parseUnary();
-                    while (cur() && cur().value === "**") {
-                        const op = nxt().value;
-                        left = { type: "binary", op, left, right: parseUnary() };
-                    }
-                    return left;
-                };
-                const parseMul = () => {
-                    let left = parsePower();
-                    while (cur() && ["*", "/", "%"].includes(String(cur().value))) {
-                        const op = nxt().value;
-                        left = { type: "binary", op, left, right: parsePower() };
-                    }
-                    return left;
-                };
-                const parseAdd = () => {
-                    let left = parseMul();
-                    while (cur() && (cur().value === "+" || cur().value === "-")) {
-                        const op = nxt().value;
-                        left = { type: "binary", op, left, right: parseMul() };
-                    }
-                    return left;
-                };
-                const ast = parseAdd();
-                if (pos < tokens.length)
-                    throw new Error(`Extra tokens after expression: ${tokens
-                        .slice(pos)
-                        .map((t) => t.value)
-                        .join(" ")}`);
-                return ast;
-            };
-            // eslint-disable-next-line no-unused-vars
-            const evaluate = (ast, env) => {
-                switch (ast.type) {
-                    case "number":
-                        return ast.value;
-                    case "var": {
-                        const v = env[ast.name];
-                        if (v === undefined)
-                            throw new Error(`Unknown variable: ${ast.name}`);
-                        if (typeof v === "function")
-                            throw new Error(`Expected variable but found function: ${ast.name}`);
-                        return v;
-                    }
-                    case "binary": {
-                        const L = evaluate(ast.left, env), R = evaluate(ast.right, env);
-                        switch (ast.op) {
-                            case "+":
-                                return L + R;
-                            case "-":
-                                return L - R;
-                            case "*":
-                                return L * R;
-                            case "/":
-                                return L / R;
-                            case "%":
-                                return L % R;
-                            case "**":
-                                return L ** R;
-                            default:
-                                throw new Error(`Unknown binary operator: ${ast.op}`);
-                        }
-                    }
-                    case "unary": {
-                        const v = evaluate(ast.arg, env);
-                        switch (ast.op) {
-                            case "+":
-                                return +v;
-                            case "-":
-                                return -v;
-                            default:
-                                throw new Error(`Unknown unary operator: ${ast.op}`);
-                        }
-                    }
-                    case "call": {
-                        const fn = env[ast.func];
-                        if (typeof fn !== "function")
-                            throw new Error(`Unknown function: ${ast.func}`);
-                        return fn(...ast.args.map((a) => evaluate(a, env))); // eslint-disable-line no-unused-vars
-                    }
-                    default: {
-                        throw new Error(`Unknown AST node type: ${ast.type}`); // eslint-disable-line @typescript-eslint/no-explicit-any
-                    }
-                }
-            };
-            let inner = token.slice(5, -1).trim();
-            if (inner === "infinity")
-                return _max;
-            if (inner === "-infinity")
-                return _min;
-            if (inner === "NaN")
-                return 0;
-            inner = inner.replace(/(\d+(\.\d+)?)%/g, (m) => {
-                if (relative === true)
-                    throw new Error("<angle> and <percentage> values are converted to <number> in relative syntax.");
-                const r = parsePercent(m, _min, _max);
-                return r !== undefined ? String(r) : "0";
-            });
-            inner = inner.replace(/(\d+(\.\d+)?)(deg|rad|grad|turn)/g, (_, num, __, unit) => {
-                if (relative === true)
-                    throw new Error("<angle> and <percentage> values are converted to <number> in relative syntax.");
-                return String(parseAngle(`${parseFloat(num)}${unit}`));
-            });
-            const caclEnv = {
-                ...base,
-                pi,
-                e,
-                tau: pi * 2,
-                pow,
-                sqrt,
-                sin,
-                cos,
-                tan,
-                asin,
-                acos,
-                atan,
-                atan2,
-                exp,
-                log,
-                log10,
-                log2,
-                abs,
-                min,
-                max,
-                hypot,
-                round,
-                ceil,
-                floor,
-                sign,
-                trunc,
-                random,
-            };
-            try {
-                const tokens = tokenize(inner);
-                const ast = parse(tokens);
-                const result = evaluate(ast, caclEnv);
-                return result;
-            }
-            catch (err) {
-                throw new Error(`Evaluation error: ${err}`);
-            }
-        };
-        const evaluateAngle = () => {
-            if (/^-?(?:\d+|\d*\.\d+)(?:deg|rad|grad|turn)$/.test(token)) {
-                return parseAngle(token);
-            }
-            if (/^-?(?:\d+|\d*\.\d+)$/.test(token)) {
-                return parseFloat(token);
-            }
-            const [min, max] = [0, 360];
-            if (token[token.length - 1] === "%") {
-                if (commaSeparated && supportsLegacy === true) {
-                    throw new Error("The legacy color syntax does not allow percentages for <angle> components.");
-                }
-                if (relative === true) {
-                    throw new Error("The relative color syntax doesn't allow percentages for <angle> components.");
-                }
-                return parsePercent(token, min, max);
-            }
-            if (token.slice(0, 5) === "calc(") {
-                return parseCalc(token, min, max);
-            }
-            throw new Error(`Invalid angle value: '${token}'. Must be a number, a number with a unit (deg, rad, grad, turn), or a percentage.`);
-        };
-        const evaluatePercent = () => {
-            if (/^-?(?:\d+|\d*\.\d+)$/.test(token)) {
-                if (commaSeparated && supportsLegacy === true) {
-                    throw new Error("The legacy color syntax does not allow numbers for <percentage> components.");
-                }
-                return parseFloat(token);
-            }
-            const [min, max] = [0, 100];
-            if (token[token.length - 1] === "%") {
-                return parsePercent(token, min, max);
-            }
-            if (token.slice(0, 5) === "calc(") {
-                return parseCalc(token, min, max);
-            }
-            throw new Error(`Invalid percentage value: '${token}'. Must be a percentage or a number.`);
-        };
-        const evaluateNumber = () => {
-            if (/^-?(?:\d+|\d*\.\d+)$/.test(token)) {
-                return parseFloat(token);
-            }
-            const [min, max] = value;
-            if (token[token.length - 1] === "%") {
-                return parsePercent(token, min, max);
-            }
-            if (token.slice(0, 5) === "calc(") {
-                return parseCalc(token, min, max);
-            }
-            throw new Error(`Invalid number value: '${token}'. Must be a number${relative === false ? " or a percentage" : ""}.`);
-        };
-        if (token === "none")
-            return 0;
-        if (token in base)
-            return base[token];
-        if (value === "angle")
-            return evaluateAngle();
-        if (value === "percentage")
-            return evaluatePercent();
-        if (Array.isArray(value))
-            return evaluateNumber();
-        throw new Error(`Unable to parse component token: ${token}`);
-    };
-    const parseAST = (ast) => {
-        const { fn, space, fromOrigin, c1, c2, c3, alpha, commaSeparated } = ast;
-        const { components, supportsLegacy } = converter;
-        components.alpha = { index: 3, value: [0, 1], precision: 3 };
-        if (commaSeparated && supportsLegacy !== true) {
-            throw new Error(`<${fn}()> does not support comma-separated syntax.`);
-        }
-        const sorted = Object.entries(components).sort((a, b) => a[1].index - b[1].index);
-        if (fromOrigin) {
-            let colorSpace;
-            if (fn === "color") {
-                colorSpace = space;
-            }
-            else if (fn in colorModels) {
-                colorSpace = fn;
-            }
-            else {
-                for (const model in colorModels) {
-                    if (colorModels[model].alphaVariant === fn) {
-                        colorSpace = model;
-                        break;
-                    }
-                }
-            }
-            const originComponents = Color.from(fromOrigin)
-                .in(colorSpace)
-                .toObject({ fit: "none", precision: null });
-            const evaluatedComponents = [c1, c2, c3, alpha].map((token, i) => {
-                const [, meta] = sorted[i];
-                return evaluateComponent(token, meta.value, originComponents, commaSeparated, true);
-            });
-            return evaluatedComponents.slice(0, 4);
-        }
-        else {
-            const result = [];
-            const percentFlags = [];
-            const tokens = [c1, c2, c3, alpha];
-            for (let i = 0; i < sorted.length; i++) {
-                const [, meta] = sorted[i];
-                const token = tokens[i];
-                if (commaSeparated && token === "none") {
-                    throw new Error(`${fn}() cannot use "none" in comma-separated syntax.`);
-                }
-                if (meta.index !== 3 &&
-                    meta.value !== "angle" &&
-                    meta.value !== "percentage" &&
-                    token.slice(0, 5) !== "calc(") {
-                    percentFlags.push(token.trim()[token.length - 1] === "%");
-                }
-                if (token) {
-                    const value = evaluateComponent(token, meta.value, {}, commaSeparated);
-                    result[meta.index] = value;
-                }
-            }
-            if (commaSeparated && percentFlags.length > 1) {
-                const allPercent = percentFlags.every(Boolean);
-                const nonePercent = percentFlags.every((f) => !f);
-                if (!allPercent && !nonePercent) {
-                    throw new Error(`${fn}()'s <number> components must all be numbers or all percentages.`);
-                }
-            }
-            return result.slice(0, 4);
-        }
-    };
-    /**
-     * Index reference
-     *
-     * | 0     | 1    | 2   | 3    | 4 | 5   | 6   | 7     | 8     |
-     * -------------------------------------------------------------
-     * | rgb   | 255  | ,   | 0    | , | 0   |     |       |       |
-     * | rgb   | 255  | ,   | 0    | , | 0   | ,   | 0.5   |       |
-     * | rgb   | 255  | 0   | 0    |   |     |     |       |       |
-     * | rgb   | 255  | 0   | 0    | / | 0.5 |     |       |       |
-     * | rgb   | from | red | r    | g | b   |     |       |       |
-     * | rgb   | from | red | r    | g | b   | /   | alpha |       |
-     * | color | srgb | 1   | 0    | 0 |     |     |       |       |
-     * | color | srgb | 1   | 0    | 0 | /   | 0.5 |       |       |
-     * | color | from | red | srgb | r | g   | b   |       |       |
-     * | color | from | red | srgb | r | g   | b   | /     | alpha |
-     */
-    const getAST = (tokens) => {
-        const getAlpha = (index, separator = "/") => {
-            if (tokens[index] !== undefined) {
-                if (tokens[index] === separator) {
-                    return { value: tokens[index + 1], hasAlpha: true };
-                }
-                throw new Error("Invalid alpha separator");
-            }
-            return { value: "1", hasAlpha: false };
-        };
-        let fn, space, fromOrigin, c1, c2, c3, alpha, commaSeparated = false, expectedLength;
-        if (tokens[0] === "color") {
-            fn = "color";
-            if (tokens[1] === "from") {
-                // color(from red srgb r g b) OR color(from red srgb r g b / alpha)
-                space = tokens[3];
-                fromOrigin = tokens[2];
-                c1 = tokens[4];
-                c2 = tokens[5];
-                c3 = tokens[6];
-                const { value, hasAlpha } = getAlpha(7);
-                expectedLength = hasAlpha ? 9 : 7;
-                alpha = value;
-            }
-            else {
-                // color(srgb 1 0 0) OR color(srgb 1 0 0 / 0.5)
-                space = tokens[1];
-                fromOrigin = null;
-                c1 = tokens[2];
-                c2 = tokens[3];
-                c3 = tokens[4];
-                const { value, hasAlpha } = getAlpha(5);
-                expectedLength = hasAlpha ? 7 : 5;
-                alpha = value;
-            }
-        }
-        else {
-            fn = tokens[0];
-            space = null;
-            if (tokens[1] === "from") {
-                // rgb(from red r g b) OR rgb(from red r g b / alpha)
-                fromOrigin = tokens[2];
-                c1 = tokens[3];
-                c2 = tokens[4];
-                c3 = tokens[5];
-                const { value, hasAlpha } = getAlpha(6);
-                expectedLength = hasAlpha ? 8 : 6;
-                alpha = value;
-            }
-            else {
-                fromOrigin = null;
-                c1 = tokens[1];
-                if (tokens[2] === "," && tokens[4] === ",") {
-                    // rgb(255, 0, 0) OR rgb(255, 0, 0, 0.5)
-                    commaSeparated = true;
-                    c2 = tokens[3];
-                    c3 = tokens[5];
-                    const { value, hasAlpha } = getAlpha(6, ",");
-                    expectedLength = hasAlpha ? 8 : 6;
-                    if (hasAlpha && tokens[6] !== ",") {
-                        throw new Error("Comma optional syntax requires no commas at all.");
-                    }
-                    alpha = value;
-                }
-                else {
-                    // rgb(255 0 0) OR rgb(255 0 0 / 0.5)
-                    c2 = tokens[2];
-                    c3 = tokens[3];
-                    const { value, hasAlpha } = getAlpha(4);
-                    expectedLength = hasAlpha ? 6 : 4;
-                    alpha = value;
-                }
-            }
-        }
-        if (tokens.length !== expectedLength) {
-            throw new Error(`Invalid number of tokens for ${fn}(): expected ${expectedLength} but got ${tokens.length}.`);
-        }
-        return { fn, space, fromOrigin, c1, c2, c3, alpha, commaSeparated };
-    };
-    /**
-     * Tokenization examples
-     *
-     * ─── rgb() ────────────────────────────────────────────────
-     * "rgb(255, 0, 0)"          --> [ "rgb", "255", ",", "0", ",", "0" ]
-     * "rgb(255, 0, 0, 0.5)"       --> [ "rgb", "255", ",", "0", ",", "0", ",", "0.5" ]
-     * "rgb(255 0 0)"              --> [ "rgb", "255", "0", "0" ]
-     * "rgb(255 0 0 / 0.5)"        --> [ "rgb", "255", "0", "0", "/", "0.5" ]
-     * "rgb(from red r g b)"       --> [ "rgb", "from", "red", "r", "g", "b" ]
-     * "rgb(from red r g b / a)"   --> [ "rgb", "from", "red", "r", "g", "b", "/", "alpha" ]
-     *
-     * ─── color() ─────────────────────────────────────────────
-     * "color(srgb 1 0 0)"                --> [ "color", "srgb", "1", "0", "0" ]
-     * "color(srgb 1 0 0 / 0.5)"          --> [ "color", "srgb", "1", "0", "0", "/", "0.5" ]
-     * "color(from red srgb r g b)"       --> [ "color", "from", "red", "srgb", "r", "g", "b" ]
-     * "color(from red srgb r g b / a)"   --> [ "color", "from", "red", "srgb", "r", "g", "b", "/", "alpha" ]
-     */
-    const tokenize = (str) => {
-        const tokens = [];
-        let i = 0;
-        let funcName = "";
-        while (i < str.length && str[i] !== "(") {
-            funcName += str[i];
-            i++;
-        }
-        funcName = funcName.trim();
-        tokens.push(funcName);
-        const innerStart = str.indexOf("(") + 1;
-        const innerStr = str.slice(innerStart, -1).trim();
-        i = 0;
-        if (innerStr.slice(0, 5) === "from ") {
-            tokens.push("from");
-            i += 5;
-            while (i < innerStr.length && innerStr[i] === " ")
-                i++;
-            const colorStart = i;
-            while (i < innerStr.length && innerStr[i] !== " ")
-                i++;
-            const colorStr = innerStr.slice(colorStart, i);
-            if (colorStr.includes("(")) {
-                const { expression, end } = extractBalancedExpression(innerStr, colorStart);
-                tokens.push(expression);
-                i = end;
-            }
-            else {
-                tokens.push(colorStr);
-            }
-            while (i < innerStr.length && innerStr[i] === " ")
-                i++;
-        }
-        if (tokens[0] === "color" && i < innerStr.length) {
-            const spaceStart = i;
-            while (i < innerStr.length && innerStr[i] !== " ")
-                i++;
-            tokens.push(innerStr.slice(spaceStart, i));
-            while (i < innerStr.length && innerStr[i] === " ")
-                i++;
-        }
-        while (i < innerStr.length) {
-            const char = innerStr[i];
-            if (char === ",") {
-                tokens.push(",");
-                i++;
-                if (innerStr[i] === " ")
-                    i++;
-            }
-            else if (char === "/") {
-                tokens.push("/");
-                i++;
-                if (innerStr[i] === " ")
-                    i++;
-            }
-            else if (char === " ") {
-                i++;
-            }
-            else if (/[a-zA-Z#]/.test(char)) {
-                const identStart = i;
-                let ident = "";
-                while (i < innerStr.length && /[a-zA-Z0-9-%#]/.test(innerStr[i])) {
-                    ident += innerStr[i];
-                    i++;
-                }
-                if (i < innerStr.length && innerStr[i] === "(") {
-                    const { expression, end } = extractBalancedExpression(innerStr, identStart);
-                    tokens.push(expression);
-                    i = end;
-                }
-                else {
-                    tokens.push(ident);
-                }
-            }
-            else if (/[\d.-]/.test(char)) {
-                let num = "";
-                while (i < innerStr.length && /[\d.eE+-]/.test(innerStr[i])) {
-                    num += innerStr[i];
-                    i++;
-                }
-                if (i < innerStr.length && innerStr[i] === "%") {
-                    num += "%";
-                    i++;
-                    tokens.push(num);
-                }
-                else if (i < innerStr.length && /[a-zA-Z]/.test(innerStr[i])) {
-                    let unit = "";
-                    while (i < innerStr.length && /[a-zA-Z]/.test(innerStr[i])) {
-                        unit += innerStr[i];
-                        i++;
-                    }
-                    tokens.push(num + unit);
-                }
-                else {
-                    tokens.push(num);
-                }
-            }
-            else {
-                throw new Error(`Unexpected character: ${char}`);
-            }
-        }
-        return tokens;
-    };
-    const validateRelativeColorSpace = (str, name) => {
-        const prefix = "color(from ";
-        if (str.slice(0, 11) !== prefix || str[str.length - 1] !== ")") {
-            return false;
-        }
-        const innerStr = str.slice(prefix.length, -1).trim();
-        const { expression, end } = extractBalancedExpression(innerStr, 0);
-        if (!expression) {
-            return false;
-        }
-        const rest = innerStr.slice(end).trim();
-        const parts = rest.split(/\s+/);
-        if (parts.length < 1) {
-            return false;
-        }
-        const colorSpace = parts[0];
-        return colorSpace === name;
-    };
-    const { components, bridge, fromBridge, toBridge, alphaVariant, supportsLegacy } = converter;
-    const { PI: pi, E: e, pow, sqrt, sin, cos, tan, asin, acos, atan, atan2, exp, log, log10, log2, abs, min, max, hypot, round, ceil, floor, sign, trunc, random, } = Math;
-    return {
-        isValid: (str) => {
-            const { alphaVariant = name } = converter;
-            if (name in colorSpaces) {
-                const startsWithColor = str.slice(0, `color(${name} `.length) === `color(${name} `;
-                const startsWithFrom = str.slice(0, "color(from".length) === "color(from" && validateRelativeColorSpace(str, name);
-                return (startsWithColor || startsWithFrom) && str[str.length - 1] === ")";
-            }
-            return ((str.slice(0, `${name}(`.length) === `${name}(` ||
-                str.slice(0, `${alphaVariant}(`.length) === `${alphaVariant}(`) &&
-                str[str.length - 1] === ")");
-        },
-        bridge,
-        toBridge: (coords) => [...toBridge(coords.slice(0, 3)), coords[3] ?? 1],
-        parse: (str) => {
-            const tokens = tokenize(str);
-            const ast = getAST(tokens);
-            const components = parseAST(ast);
-            return [...components.slice(0, 3), components[3] ?? 1];
-        },
-        fromBridge: (coords) => [...fromBridge(coords), coords[3] ?? 1],
-        format: ([c1, c2, c3, a = 1], options = {}) => {
-            const { legacy = false, fit: fitMethod = config.defaults.fit, precision, units = false } = options;
-            const clipped = fit([c1, c2, c3], name, { method: fitMethod, precision });
-            const alpha = Number(min(max(a, 0), 1).toFixed(3)).toString();
-            const formatted = clipped.map((v, index) => {
-                if ((units || legacy) && components) {
-                    const def = Object.values(components).find((comp) => comp.index === index);
-                    if (def?.value === "percentage")
-                        return `${v}%`;
-                    if (def?.value === "angle" && units)
-                        return `${v}deg`;
-                }
-                return v.toString();
-            });
-            if (name in colorSpaces) {
-                return `color(${name} ${formatted.join(" ")}${a !== 1 ? ` / ${alpha}` : ""})`;
-            }
-            if (legacy && supportsLegacy) {
-                return a === 1
-                    ? `${name}(${formatted.join(", ")})`
-                    : `${alphaVariant || name}(${formatted.join(", ")}, ${alpha})`;
-            }
-            return `${name}(${formatted.join(" ")}${a !== 1 ? ` / ${alpha}` : ""})`;
-        },
-    };
-}
 /**
  * Converts a color space converter to a color model converter.
  *
@@ -1187,7 +151,10 @@ export function spaceConverterToModelConverter(name, converter) {
     return {
         supportsLegacy: false,
         targetGamut: converter.targetGamut === null ? null : name,
-        components: Object.fromEntries(converter.components.map((comp, index) => [comp, { index, value: [0, 1], precision: 5 }])),
+        components: {
+            ...Object.fromEntries(converter.components.map((comp, index) => [comp, { index, value: [0, 1], precision: 5 }])),
+            alpha: { index: 3, value: [0, 1], precision: 3 },
+        },
         bridge: converter.bridge,
         toBridge: (coords) => {
             return multiplyMatrices(toBridgeMatrix, coords.map((c) => toLinear(c)));
@@ -1195,3 +162,88 @@ export function spaceConverterToModelConverter(name, converter) {
         fromBridge: (coords) => multiplyMatrices(fromBridgeMatrix, coords).map((c) => fromLinear(c)),
     };
 }
+export function hueDelta(a, b) {
+    const d = (((b - a) % 360) + 360) % 360;
+    return d > 180 ? d - 360 : d;
+}
+export function hueDeltaLong(a, b) {
+    const d = hueDelta(a, b);
+    return d >= 0 ? d - 360 : d + 360;
+}
+export function interpHue(a, b, t, method) {
+    if (Number.isNaN(a) || Number.isNaN(b))
+        return NaN;
+    switch (method) {
+        case "shorter":
+            return (((a + t * hueDelta(a, b)) % 360) + 360) % 360;
+        case "longer":
+            return (((a + t * hueDeltaLong(a, b)) % 360) + 360) % 360;
+        case "increasing":
+            return (((a * (1 - t) + (b < a ? b + 360 : b) * t) % 360) + 360) % 360;
+        case "decreasing":
+            return (((a * (1 - t) + (b > a ? b - 360 : b) * t) % 360) + 360) % 360;
+    }
+    throw new Error(`Invalid hue interpolation: ${method}`);
+}
+export function mixTwo(colorA, colorB, t, model = "oklab", hue = "shorter") {
+    const A = colorA.in(model).coords.slice();
+    const B = colorB.in(model).coords.slice();
+    const { components } = colorModels[model]; // eslint-disable-line @typescript-eslint/no-explicit-any
+    if (!components)
+        throw new Error(`Model ${model} does not have defined components.`);
+    const norm = (v) => (Array.isArray(v) ? v : v === "hue" ? [0, 360] : [0, 100]);
+    const repair = (a, b, v) => {
+        const [min, max] = norm(v);
+        const fixInf = (x) => (x === Infinity ? max : x === -Infinity ? min : x);
+        a = fixInf(a);
+        b = fixInf(b);
+        const aNaN = Number.isNaN(a);
+        const bNaN = Number.isNaN(b);
+        if (aNaN && bNaN)
+            return { a: NaN, b: NaN };
+        if (aNaN)
+            return { a: b, b };
+        if (bNaN)
+            return { a, b: a };
+        return { a, b, ok: true };
+    };
+    const hueIndex = components.h?.index ?? -1;
+    for (const key in components) {
+        const { index, value } = components[key];
+        if (index > 3)
+            continue;
+        const r = repair(A[index], B[index], value);
+        if (r.ok) {
+            const [min, max] = norm(value);
+            const fixInf = (x) => (x === Infinity ? max : x === -Infinity ? min : x);
+            A[index] = fixInf(A[index]);
+            B[index] = fixInf(B[index]);
+        }
+        else {
+            A[index] = r.a;
+            B[index] = r.b;
+        }
+    }
+    t = Math.min(1, Math.max(0, t));
+    if (t === 0)
+        return new Color(model, [...A]);
+    if (t === 1)
+        return new Color(model, [...B]);
+    const aA = A[3] ?? 1;
+    const aB = B[3] ?? 1;
+    const resolvedA = A.slice(0, 3);
+    const resolvedB = B.slice(0, 3);
+    if (aA < 1 || aB < 1) {
+        const premixed = resolvedA.map((a, i) => {
+            const b = resolvedB[i];
+            return i === hueIndex ? interpHue(a, b, t, hue) : a * aA * (1 - t) + b * aB * t;
+        });
+        const a = aA * (1 - t) + aB * t;
+        const out = a > 0
+            ? premixed.map((v, i) => (i === hueIndex ? v : v / a))
+            : resolvedA.map((_, i) => (i === hueIndex ? premixed[i] : 0));
+        return new Color(model, [...out, a]);
+    }
+    const mixed = resolvedA.map((a, i) => i === hueIndex ? interpHue(a, resolvedB[i], t, hue) : a + (resolvedB[i] - a) * t);
+    return new Color(model, [...mixed, 1]);
+}