saturon 0.2.3 → 0.3.0

package/dist/index.umd.js

@@ -126,53 +126,32 @@ var Saturon = (() => {
       return product.map((x) => x[0]);
     return product;
   }
-  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));
-  }
-  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 };
+  function normalize(component, value) {
+    const [min2, max2] = Array.isArray(value) ? value : value === "hue" ? [0, 360] : [0, 100];
+    if (Number.isNaN(component))
+      return 0;
+    if (component === Infinity)
+      return max2;
+    if (component === -Infinity)
+      return min2;
+    return typeof component === "number" ? component : 0;
   }
   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") {
+    else if (method === "clip") {
       clipped = coords.map((v, i) => {
-        const prop = componentProps[i];
+        const prop = defs[i];
         if (!prop)
           throw new Error(`Missing component properties for index ${i}.`);
         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));
+        const [min2, max2] = Array.isArray(prop.value) ? prop.value : [0, 100];
+        return Math.min(max2, Math.max(min2, v));
       });
     } else {
       const fn = fitMethods[method];
@@ -186,618 +165,21 @@ var Saturon = (() => {
       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));
     });
   }
-  function modelConverterToColorConverter(name, converter) {
-    const evaluateComponent = (token, value, base = {}, commaSeparated = false, relative = false) => {
-      const parsePercent = (str, min2, max2) => {
-        const percent = parseFloat(str);
-        if (isNaN(percent))
-          throw new Error(`Invalid percentage value: '${str}'.`);
-        if (value === "percentage")
-          return percent;
-        if (min2 < 0 && max2 > 0)
-          return percent / 100 * (max2 - min2) / 2;
-        return percent / 100 * (max2 - min2) + min2;
-      };
-      const parseHue = (token2) => {
-        const value2 = parseFloat(token2);
-        if (isNaN(value2))
-          throw new Error(`Invalid hue value: '${token2}'.`);
-        if (token2.slice(-3) === "deg")
-          return value2;
-        if (token2.slice(-3) === "rad")
-          return value2 * (180 / pi);
-        if (token2.slice(-4) === "grad")
-          return value2 * 0.9;
-        if (token2.slice(-4) === "turn")
-          return value2 * 360;
-        return value2;
-      };
-      const parseCalc = (token2, _min, _max) => {
-        const tokenize2 = (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 e2 = parseAdd();
-              expect(")");
-              return e2;
-            }
-            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;
-        };
-        const evaluate = (ast, env) => {
-          switch (ast.type) {
-            case "number":
-              return ast.value;
-            case "var": {
-              const v = env[ast.name];
-              if (v === void 0)
-                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)));
-            }
-            default: {
-              throw new Error(`Unknown AST node type: ${ast.type}`);
-            }
-          }
-        };
-        let inner = token2.slice(5, -1).trim();
-        if (inner === "infinity")
-          return Infinity;
-        if (inner === "-infinity")
-          return -Infinity;
-        if (inner === "NaN")
-          return NaN;
-        inner = inner.replace(/(\d+(\.\d+)?)%/g, (m) => {
-          if (relative === true)
-            throw new Error("<hue> and <percentage> values are converted to <number> in relative syntax.");
-          const r = parsePercent(m, _min, _max);
-          return r !== void 0 ? String(r) : "0";
-        });
-        inner = inner.replace(/(\d+(\.\d+)?)(deg|rad|grad|turn)/g, (_, num, __, unit) => {
-          if (relative === true)
-            throw new Error("<hue> and <percentage> values are converted to <number> in relative syntax.");
-          return String(parseHue(`${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 = tokenize2(inner);
-          const ast = parse(tokens);
-          const result = evaluate(ast, caclEnv);
-          return result;
-        } catch (err) {
-          throw new Error(`Evaluation error: ${err}`);
-        }
-      };
-      const evaluateHue = () => {
-        if (/^-?(?:\d+|\d*\.\d+)(?:deg|rad|grad|turn)$/.test(token)) {
-          return parseHue(token);
-        }
-        if (/^-?(?:\d+|\d*\.\d+)$/.test(token)) {
-          return parseFloat(token);
-        }
-        const [min2, max2] = [0, 360];
-        if (token.slice(0, 5) === "calc(") {
-          return parseCalc(token, min2, max2);
-        }
-        throw new Error(`Invalid hue value: '${token}'. Must be a number, or a number with a unit (deg, rad, grad, turn).`);
-      };
-      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 [min2, max2] = [0, 100];
-        if (token[token.length - 1] === "%") {
-          return parsePercent(token, min2, max2);
-        }
-        if (token.slice(0, 5) === "calc(") {
-          return parseCalc(token, min2, max2);
-        }
-        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 [min2, max2] = value;
-        if (token[token.length - 1] === "%") {
-          return parsePercent(token, min2, max2);
-        }
-        if (token.slice(0, 5) === "calc(") {
-          return parseCalc(token, min2, max2);
-        }
-        throw new Error(`Invalid number value: '${token}'. Must be a number${relative === false ? " or a percentage" : ""}.`);
-      };
-      if (token === "none")
-        return NaN;
-      if (token in base)
-        return base[token];
-      if (value === "hue")
-        return evaluateHue();
-      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: components2, supportsLegacy: supportsLegacy2 } = converter;
-      components2.alpha = { index: 3, value: [0, 1], precision: 3 };
-      if (commaSeparated && supportsLegacy2 !== true) {
-        throw new Error(`<${fn}()> does not support comma-separated syntax.`);
-      }
-      const sorted = Object.entries(components2).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 !== "hue" && 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);
-      }
-    };
-    const getAST = (tokens) => {
-      const getAlpha = (index, separator = "/") => {
-        if (tokens[index] !== void 0) {
-          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") {
-          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 {
-          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") {
-          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] === ",") {
-            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 {
-            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 };
-    };
-    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, name2) => {
-      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 === name2;
-    };
-    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: alphaVariant2 = 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, `${alphaVariant2}(`.length) === `${alphaVariant2}(`) && 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 coords = parseAST(ast);
-        return [...coords.slice(0, 3), coords[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) => {
-          v = isNaN(v) ? 0 : v;
-          if ((units || legacy) && components) {
-            const def = Object.values(components).find((comp) => comp.index === index);
-            if (def?.value === "percentage")
-              return `${v}%`;
-            if (def?.value === "hue" && 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}` : ""})`;
-      }
-    };
-  }
   function spaceConverterToModelConverter(name, converter) {
     const { fromLinear = (c) => c, toLinear = (c) => c, toBridgeMatrix, fromBridgeMatrix } = 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)));
@@ -805,6 +187,88 @@ var Saturon = (() => {
       fromBridge: (coords) => multiplyMatrices(fromBridgeMatrix, coords).map((c) => fromLinear(c))
     };
   }
+  function hueDelta(a, b) {
+    const d = ((b - a) % 360 + 360) % 360;
+    return d > 180 ? d - 360 : d;
+  }
+  function hueDeltaLong(a, b) {
+    const d = hueDelta(a, b);
+    return d >= 0 ? d - 360 : d + 360;
+  }
+  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}`);
+  }
+  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];
+    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 [min2, max2] = norm(v);
+      const fixInf = (x) => x === Infinity ? max2 : x === -Infinity ? min2 : 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 [min2, max2] = norm(value);
+        const fixInf = (x) => x === Infinity ? max2 : x === -Infinity ? min2 : 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((a2, i) => {
+        const b = resolvedB[i];
+        return i === hueIndex ? interpHue(a2, b, t, hue) : a2 * 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]);
+  }
 
   // dist/math.js
   var EPSILON = 1e-5;
@@ -890,15 +354,6 @@ var Saturon = (() => {
       [1, -0.0894841775298119, -1.2914855480194092]
     ]
   };
-  var EASINGS = {
-    linear: (t) => t,
-    "ease-in": (t) => t * t,
-    "ease-out": (t) => t * (2 - t),
-    "ease-in-out": (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
-    "ease-in-cubic": (t) => t * t * t,
-    "ease-out-cubic": (t) => --t * t * t + 1,
-    "ease-in-out-cubic": (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2
-  };
   var fitMethods = {
     "chroma-reduction": (coords, model) => {
       const color = new Color(model, coords);
@@ -914,7 +369,7 @@ var Saturon = (() => {
       let C_low = 0;
       let C_high = 1;
       const epsilon = 1e-6;
-      let clipped = [];
+      let clipped;
       while (C_high - C_low > epsilon) {
         const C_mid = (C_low + C_high) / 2;
         const candidate_color = new Color("oklch", [L_clipped, C_mid, H]);
@@ -963,14 +418,14 @@ var Saturon = (() => {
       const E = current.deltaEOK(initialClippedColor);
       if (E < JND)
         return clipped;
-      let min = 0;
-      let max = C;
+      let min2 = 0;
+      let max2 = C;
       let min_inGamut = true;
-      while (max - min > epsilon) {
-        const chroma = (min + max) / 2;
+      while (max2 - min2 > epsilon) {
+        const chroma = (min2 + max2) / 2;
         const candidate = new Color("oklch", [L, chroma, H]);
         if (min_inGamut && candidate.inGamut(targetGamut, 1e-5))
-          min = chroma;
+          min2 = chroma;
         else {
           const clippedCoords = fit(candidate.in(model).toArray({ fit: "none", precision: null }).slice(0, 3), model, { method: "clip" });
           clipped = clippedCoords;
@@ -981,10 +436,10 @@ var Saturon = (() => {
               return clipped;
             else {
               min_inGamut = false;
-              min = chroma;
+              min2 = chroma;
             }
           } else
-            max = chroma;
+            max2 = chroma;
         }
       }
       return clipped;
@@ -993,16 +448,16 @@ var Saturon = (() => {
   function RGB_to_XYZD65(rgb) {
     const lin_sRGB = rgb.map((v) => {
       const n = v / 255;
-      const sign = n < 0 ? -1 : 1, abs = Math.abs(n);
-      return abs <= 0.04045 ? n / 12.92 : sign * ((abs + 0.055) / 1.055) ** 2.4;
+      const sign2 = n < 0 ? -1 : 1, abs2 = Math.abs(n);
+      return abs2 <= 0.04045 ? n / 12.92 : sign2 * ((abs2 + 0.055) / 1.055) ** 2.4;
     });
     return multiplyMatrices(MATRICES.SRGB_to_XYZD65, lin_sRGB);
   }
   function XYZD65_to_RGB(xyz) {
     const linRGB = multiplyMatrices(MATRICES.XYZD65_to_SRGB, xyz);
     const gammaRGB = linRGB.map((v) => {
-      const sign = v < 0 ? -1 : 1, abs = Math.abs(v);
-      return abs > 31308e-7 ? sign * (1.055 * abs ** (1 / 2.4) - 0.055) : 12.92 * v;
+      const sign2 = v < 0 ? -1 : 1, abs2 = Math.abs(v);
+      return abs2 > 31308e-7 ? sign2 * (1.055 * abs2 ** (1 / 2.4) - 0.055) : 12.92 * v;
     });
     return gammaRGB.map((v) => v * 255);
   }
@@ -1018,13 +473,13 @@ var Saturon = (() => {
   }
   function RGB_to_HSL(rgb) {
     const [r, g, b] = rgb.map((v) => v / 255);
-    const max = Math.max(r, g, b), min = Math.min(r, g, b);
-    const L = (max + min) / 2;
-    const d = max - min;
+    const max2 = Math.max(r, g, b), min2 = Math.min(r, g, b);
+    const L = (max2 + min2) / 2;
+    const d = max2 - min2;
     let H = NaN, S = 0;
     if (d > 0) {
       S = d / (1 - Math.abs(2 * L - 1));
-      H = max === r ? (g - b) / d + (g < b ? 6 : 0) : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+      H = max2 === r ? (g - b) / d + (g < b ? 6 : 0) : max2 === g ? (b - r) / d + 2 : (r - g) / d + 4;
       H = H * 60 % 360;
     }
     const S_out = S * 100, L_out = L * 100;
@@ -1043,14 +498,14 @@ var Saturon = (() => {
   }
   function RGB_to_HWB(rgb) {
     const [r, g, b] = rgb.map((v) => v / 255);
-    const max = Math.max(r, g, b), min = Math.min(r, g, b);
-    const d = max - min;
+    const max2 = Math.max(r, g, b), min2 = Math.min(r, g, b);
+    const d = max2 - min2;
     let H = NaN;
     if (d > EPSILON) {
-      H = max === r ? (g - b) / d + (g < b ? 6 : 0) : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+      H = max2 === r ? (g - b) / d + (g < b ? 6 : 0) : max2 === g ? (b - r) / d + 2 : (r - g) / d + 4;
       H = H * 60 % 360;
     }
-    return [H, min * 100, (1 - max) * 100];
+    return [H, min2 * 100, (1 - max2) * 100];
   }
   function LAB_to_XYZD50([L, a, b]) {
     const D50 = [0.3457 / 0.3585, 1, (1 - 0.3457 - 0.3585) / 0.3585];
@@ -1257,18 +712,18 @@ var Saturon = (() => {
       components: ["r", "g", "b"],
       bridge: "xyz-d65",
       toLinear: (c) => {
-        const sign = c < 0 ? -1 : 1;
-        const abs = Math.abs(c);
-        if (abs <= 0.04045)
-          return sign * (abs / 12.92);
-        return sign * Math.pow((abs + 0.055) / 1.055, 2.4);
+        const sign2 = c < 0 ? -1 : 1;
+        const abs2 = Math.abs(c);
+        if (abs2 <= 0.04045)
+          return sign2 * (abs2 / 12.92);
+        return sign2 * Math.pow((abs2 + 0.055) / 1.055, 2.4);
       },
       fromLinear: (c) => {
-        const sign = c < 0 ? -1 : 1;
-        const abs = Math.abs(c);
-        if (abs > 31308e-7)
-          return sign * (1.055 * Math.pow(abs, 1 / 2.4) - 0.055);
-        return sign * (12.92 * abs);
+        const sign2 = c < 0 ? -1 : 1;
+        const abs2 = Math.abs(c);
+        if (abs2 > 31308e-7)
+          return sign2 * (1.055 * Math.pow(abs2, 1 / 2.4) - 0.055);
+        return sign2 * (12.92 * abs2);
       },
       toBridgeMatrix: MATRICES.SRGB_to_XYZD65,
       fromBridgeMatrix: MATRICES.XYZD65_to_SRGB
@@ -1283,18 +738,18 @@ var Saturon = (() => {
       components: ["r", "g", "b"],
       bridge: "xyz-d65",
       toLinear: (c) => {
-        const sign = c < 0 ? -1 : 1;
-        const abs = Math.abs(c);
-        if (abs <= 0.04045)
-          return sign * (abs / 12.92);
-        return sign * Math.pow((abs + 0.055) / 1.055, 2.4);
+        const sign2 = c < 0 ? -1 : 1;
+        const abs2 = Math.abs(c);
+        if (abs2 <= 0.04045)
+          return sign2 * (abs2 / 12.92);
+        return sign2 * Math.pow((abs2 + 0.055) / 1.055, 2.4);
       },
       fromLinear: (c) => {
-        const sign = c < 0 ? -1 : 1;
-        const abs = Math.abs(c);
-        if (abs > 31308e-7)
-          return sign * (1.055 * Math.pow(abs, 1 / 2.4) - 0.055);
-        return sign * (12.92 * abs);
+        const sign2 = c < 0 ? -1 : 1;
+        const abs2 = Math.abs(c);
+        if (abs2 > 31308e-7)
+          return sign2 * (1.055 * Math.pow(abs2, 1 / 2.4) - 0.055);
+        return sign2 * (12.92 * abs2);
       },
       toBridgeMatrix: MATRICES.P3_to_XYZD65,
       fromBridgeMatrix: MATRICES.XYZD65_to_P3
@@ -1305,20 +760,20 @@ var Saturon = (() => {
       toLinear: (c) => {
         const \u03B1 = 1.09929682680944;
         const \u03B2 = 0.018053968510807;
-        const sign = c < 0 ? -1 : 1;
-        const abs = Math.abs(c);
-        if (abs < \u03B2 * 4.5)
-          return sign * (abs / 4.5);
-        return sign * Math.pow((abs + \u03B1 - 1) / \u03B1, 1 / 0.45);
+        const sign2 = c < 0 ? -1 : 1;
+        const abs2 = Math.abs(c);
+        if (abs2 < \u03B2 * 4.5)
+          return sign2 * (abs2 / 4.5);
+        return sign2 * Math.pow((abs2 + \u03B1 - 1) / \u03B1, 1 / 0.45);
       },
       fromLinear: (c) => {
         const \u03B1 = 1.09929682680944;
         const \u03B2 = 0.018053968510807;
-        const sign = c < 0 ? -1 : 1;
-        const abs = Math.abs(c);
-        if (abs > \u03B2)
-          return sign * (\u03B1 * Math.pow(abs, 0.45) - (\u03B1 - 1));
-        return sign * (4.5 * abs);
+        const sign2 = c < 0 ? -1 : 1;
+        const abs2 = Math.abs(c);
+        if (abs2 > \u03B2)
+          return sign2 * (\u03B1 * Math.pow(abs2, 0.45) - (\u03B1 - 1));
+        return sign2 * (4.5 * abs2);
       },
       toBridgeMatrix: MATRICES.REC2020_to_XYZD65,
       fromBridgeMatrix: MATRICES.XYZD65_to_REC2020
@@ -1327,14 +782,14 @@ var Saturon = (() => {
       components: ["r", "g", "b"],
       bridge: "xyz-d65",
       toLinear: (c) => {
-        const sign = c < 0 ? -1 : 1;
-        const abs = Math.abs(c);
-        return sign * Math.pow(abs, 563 / 256);
+        const sign2 = c < 0 ? -1 : 1;
+        const abs2 = Math.abs(c);
+        return sign2 * Math.pow(abs2, 563 / 256);
       },
       fromLinear: (c) => {
-        const sign = c < 0 ? -1 : 1;
-        const abs = Math.abs(c);
-        return sign * Math.pow(abs, 256 / 563);
+        const sign2 = c < 0 ? -1 : 1;
+        const abs2 = Math.abs(c);
+        return sign2 * Math.pow(abs2, 256 / 563);
       },
       toBridgeMatrix: MATRICES.A98_to_XYZD65,
       fromBridgeMatrix: MATRICES.XYZD65_to_A98
@@ -1344,19 +799,19 @@ var Saturon = (() => {
       bridge: "xyz-d50",
       toLinear: (c) => {
         const Et2 = 16 / 512;
-        const sign = c < 0 ? -1 : 1;
-        const abs = Math.abs(c);
-        if (abs <= Et2)
-          return sign * (abs / 16);
-        return sign * Math.pow(abs, 1.8);
+        const sign2 = c < 0 ? -1 : 1;
+        const abs2 = Math.abs(c);
+        if (abs2 <= Et2)
+          return sign2 * (abs2 / 16);
+        return sign2 * Math.pow(abs2, 1.8);
       },
       fromLinear: (c) => {
         const Et = 1 / 512;
-        const sign = c < 0 ? -1 : 1;
-        const abs = Math.abs(c);
-        if (abs >= Et)
-          return sign * Math.pow(abs, 1 / 1.8);
-        return sign * (16 * abs);
+        const sign2 = c < 0 ? -1 : 1;
+        const abs2 = Math.abs(c);
+        if (abs2 >= Et)
+          return sign2 * Math.pow(abs2, 1 / 1.8);
+        return sign2 * (16 * abs2);
       },
       toBridgeMatrix: MATRICES.ProPhoto_to_XYZD50,
       fromBridgeMatrix: MATRICES.XYZD50_to_ProPhoto
@@ -1406,7 +861,8 @@ var Saturon = (() => {
       components: {
         r: { index: 0, value: [0, 255], precision: 0 },
         g: { index: 1, value: [0, 255], precision: 0 },
-        b: { index: 2, value: [0, 255], precision: 0 }
+        b: { index: 2, value: [0, 255], precision: 0 },
+        alpha: { index: 3, value: [0, 1], precision: 3 }
       },
       bridge: "xyz-d65",
       toBridge: RGB_to_XYZD65,
@@ -1418,7 +874,8 @@ var Saturon = (() => {
       components: {
         h: { index: 0, value: "hue", precision: 0 },
         s: { index: 1, value: "percentage", precision: 0 },
-        l: { index: 2, value: "percentage", precision: 0 }
+        l: { index: 2, value: "percentage", precision: 0 },
+        alpha: { index: 3, value: [0, 1], precision: 3 }
       },
       bridge: "rgb",
       toBridge: HSL_to_RGB,
@@ -1428,7 +885,8 @@ var Saturon = (() => {
       components: {
         h: { index: 0, value: "hue", precision: 0 },
         w: { index: 1, value: "percentage", precision: 0 },
-        b: { index: 2, value: "percentage", precision: 0 }
+        b: { index: 2, value: "percentage", precision: 0 },
+        alpha: { index: 3, value: [0, 1], precision: 3 }
       },
       bridge: "rgb",
       toBridge: HWB_to_RGB,
@@ -1439,7 +897,8 @@ var Saturon = (() => {
       components: {
         l: { index: 0, value: "percentage", precision: 5 },
         a: { index: 1, value: [-125, 125], precision: 5 },
-        b: { index: 2, value: [-125, 125], precision: 5 }
+        b: { index: 2, value: [-125, 125], precision: 5 },
+        alpha: { index: 3, value: [0, 1], precision: 3 }
       },
       bridge: "xyz-d50",
       toBridge: LAB_to_XYZD50,
@@ -1450,7 +909,8 @@ var Saturon = (() => {
       components: {
         l: { index: 0, value: "percentage", precision: 5 },
         c: { index: 1, value: [0, 150], precision: 5 },
-        h: { index: 2, value: "hue", precision: 5 }
+        h: { index: 2, value: "hue", precision: 5 },
+        alpha: { index: 3, value: [0, 1], precision: 3 }
       },
       bridge: "lab",
       toBridge: LCH_to_LAB,
@@ -1461,7 +921,8 @@ var Saturon = (() => {
       components: {
         l: { index: 0, value: [0, 1], precision: 5 },
         a: { index: 1, value: [-0.4, 0.4], precision: 5 },
-        b: { index: 2, value: [-0.4, 0.4], precision: 5 }
+        b: { index: 2, value: [-0.4, 0.4], precision: 5 },
+        alpha: { index: 3, value: [0, 1], precision: 3 }
       },
       bridge: "xyz-d65",
       toBridge: OKLAB_to_XYZD65,
@@ -1472,7 +933,8 @@ var Saturon = (() => {
       components: {
         l: { index: 0, value: [0, 1], precision: 5 },
         c: { index: 1, value: [0, 0.4], precision: 5 },
-        h: { index: 2, value: "hue", precision: 5 }
+        h: { index: 2, value: "hue", precision: 5 },
+        alpha: { index: 3, value: [0, 1], precision: 3 }
       },
       bridge: "oklab",
       toBridge: OKLCH_to_OKLAB,
@@ -1480,396 +942,1516 @@ var Saturon = (() => {
     },
     ...colorSpaces
   };
-  var colorFunctions = Object.fromEntries(Object.entries(colorModels).map(([name, converter]) => [
-    name,
-    modelConverterToColorConverter(name, converter)
-  ]));
-  var colorBases = {
-    "hex-color": {
-      isValid: (str) => str[0] === "#",
-      bridge: "rgb",
-      toBridge: (coords) => coords,
-      parse: (str) => {
-        const HEX = str.slice(1);
-        if (![3, 4, 6, 8].includes(HEX.length))
-          throw new Error("Invalid hex color length.");
-        for (const ch of HEX)
-          if (!/^[0-9a-fA-F]$/.test(ch))
-            throw new Error("Invalid hex color character.");
-        const expand = (c) => parseInt(c.length === 1 ? c + c : c, 16);
-        const [r, g, b, a = 255] = HEX.length <= 4 ? HEX.split("").map(expand) : [HEX.slice(0, 2), HEX.slice(2, 4), HEX.slice(4, 6), HEX.slice(6, 8)].map((c) => parseInt(c || "ff", 16));
-        return [r, g, b, a / 255];
-      },
-      fromBridge: (coords) => coords,
-      format: ([r, g, b, a = 1]) => {
-        const toHex = (v) => v.toString(16).padStart(2, "0");
-        const hex = [r, g, b].map((v) => toHex(Math.round(Math.max(0, Math.min(255, v))))).join("");
-        return `#${hex}${a < 1 ? toHex(Math.round(a * 255)) : ""}`;
-      }
-    },
-    ...colorFunctions,
-    "named-color": {
-      isValid: (str) => Object.keys(namedColors).some((key) => key === str),
-      bridge: "rgb",
-      toBridge: (coords) => coords,
-      parse: (name) => {
-        const rgb = namedColors[name];
-        if (!rgb)
-          throw new Error(`Invalid named-color: ${name}.`);
-        return [...rgb, 1];
-      },
-      fromBridge: (coords) => coords,
-      format: (rgb) => {
-        const [r, g, b] = rgb.map((v, i) => i < 3 ? Math.round(Math.min(255, Math.max(0, v))) : v);
-        for (const [name, [nr, ng, nb]] of Object.entries(namedColors)) {
-          if (r === nr && g === ng && b === nb)
-            return name;
+
+  // dist/engine.js
+  var grammar = `
+/* ==========================================================================
+   Core Color Types
+   ========================================================================== */
+<color> = <color-base> | currentColor | <system-color> | <contrast-color()> | <device-cmyk()> | <light-dark-color>
+
+<color-base> = <hex-color> | <color-function> | <named-color> | <color-mix()> | transparent
+
+<color-function> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <lab()> | <lch()> | <oklab()> | <oklch()> | <alpha()> | <color()> | <custom-color-function>
+
+/* ==========================================================================
+   RGB & RGBA Syntax
+   ========================================================================== */
+<rgb()> = [ <legacy-rgb-syntax> | <modern-rgb-syntax> | <relative-rgb-syntax> ]
+<rgba()> = [ <legacy-rgba-syntax> | <modern-rgba-syntax> | <relative-rgba-syntax> ]
+
+<legacy-rgb-syntax> = rgb( <percentage>#{3} [ , <alpha-value> ]? ) | rgb( <number>#{3} [ , <alpha-value> ]? )      
+<legacy-rgba-syntax> = rgba( <percentage>#{3} [ , <alpha-value> ]? ) | rgba( <number>#{3} [ , <alpha-value> ]? )      
+
+<modern-rgb-syntax> = rgb( <rgb-absolute-component>{3} [ / <alpha-absolute-value> ]? )
+<modern-rgba-syntax> = rgba( <rgb-absolute-component>{3} [ / <alpha-absolute-value> ]? )
+<rgb-absolute-component> = <number> | <percentage> | none
+<alpha-absolute-value> = <alpha-value> | none
+
+<relative-rgb-syntax> = rgb( from <color> <rgb-relative-component>{3} [ / <rgb-relative-alpha> ]? )
+<relative-rgba-syntax> = rgba( from <color> <rgb-relative-component>{3} [ / <rgb-relative-alpha> ]? )
+
+/* ==========================================================================
+   HSL & HSLA Syntax
+   ========================================================================== */
+<hsl()> = [ <legacy-hsl-syntax> | <modern-hsl-syntax> | <relative-hsl-syntax> ]
+<hsla()> = [ <legacy-hsla-syntax> | <modern-hsla-syntax> | <relative-hsla-syntax> ]
+
+<legacy-hsl-syntax> = hsl( <hue> , <percentage> , <percentage> [ , <alpha-value> ]? )  
+<legacy-hsla-syntax> = hsla( <hue> , <percentage> , <percentage> [ , <alpha-value> ]? )  
+
+<modern-hsl-syntax> = hsl( [ <hue> | none ] [ <percentage> | <number> | none ]{2} [ / <alpha-absolute-value> ]? )
+<modern-hsla-syntax> = hsla( [ <hue> | none ] [ <percentage> | <number> | none ]{2} [ / <alpha-absolute-value> ]? )
+
+<relative-hsl-syntax> = hsl( from <color> <hsl-relative-hue> <hsl-relative-component>{2} [ / <hsl-relative-alpha> ]? )
+<relative-hsla-syntax> = hsla( from <color> <hsl-relative-hue> <hsl-relative-component>{2} [ / <hsl-relative-alpha> ]? )
+<hsl-relative-hue> = <hue> | none | h | s | l | alpha
+<hsl-relative-component> = <percentage> | <number> | none | h | s | l | alpha
+<hsl-relative-alpha> = <alpha-value> | none | h | s | l | alpha
+
+/* ==========================================================================
+   HWB Syntax
+   ========================================================================== */
+<hwb()> = [ <absolute-hwb-syntax> | <relative-hwb-syntax> ]
+<absolute-hwb-syntax> = hwb( [ <hue> | none ] [ <percentage> | <number> | none ]{2} [ / <alpha-absolute-value> ]? )
+<relative-hwb-syntax> = hwb( from <color> <hwb-relative-hue> <hwb-relative-component>{2} [ / <hwb-relative-alpha> ]? )
+<hwb-relative-hue> = <hue> | none | h | w | b | alpha
+<hwb-relative-component> = <percentage> | <number> | none | h | w | b | alpha
+<hwb-relative-alpha> = <alpha-value> | none | h | w | b | alpha
+
+/* ==========================================================================
+   LAB & LCH Syntax
+   ========================================================================== */
+<lab()> = [ <absolute-lab-syntax> | <relative-lab-syntax> ]
+<absolute-lab-syntax> = lab( [ <percentage> | <number> | none ]{3} [ / <alpha-absolute-value> ]? )
+<relative-lab-syntax> = lab( from <color> <lab-relative-component>{3} [ / <lab-relative-alpha> ]? )
+<lab-relative-component> = <percentage> | <number> | none | l | a | b | alpha
+<lab-relative-alpha> = <alpha-value> | none | l | a | b | alpha
+
+<lch()> = [ <absolute-lch-syntax> | <relative-lch-syntax> ]
+<absolute-lch-syntax> = lch( [ <percentage> | <number> | none ]{2} [ <hue> | none ] [ / <alpha-absolute-value> ]? )
+<relative-lch-syntax> = lch( from <color> <lch-relative-component>{2} <lch-relative-hue> [ / <lch-relative-alpha> ]? )
+<lch-relative-component> = <percentage> | <number> | none | l | c | h | alpha
+<lch-relative-hue> = <hue> | none | l | c | h | alpha
+<lch-relative-alpha> = <alpha-value> | none | l | c | h | alpha
+
+/* ==========================================================================
+   OKLAB & OKLCH Syntax
+   ========================================================================== */
+<oklab()> = [ <absolute-oklab-syntax> | <relative-oklab-syntax> ]
+<absolute-oklab-syntax> = oklab( [ <percentage> | <number> | none ]{3} [ / <alpha-absolute-value> ]? )
+<relative-oklab-syntax> = oklab( from <color> <oklab-relative-component>{3} [ / <oklab-relative-alpha> ]? )
+<oklab-relative-component> = <percentage> | <number> | none | l | a | b | alpha
+<oklab-relative-alpha> = <alpha-value> | none | l | a | b | alpha
+
+<oklch()> = [ <absolute-oklch-syntax> | <relative-oklch-syntax> ]
+<absolute-oklch-syntax> = oklch( [ <percentage> | <number> | none ]{2} [ <hue> | none ] [ / <alpha-absolute-value> ]? )
+<relative-oklch-syntax> = oklch( from <color> <oklch-relative-component>{2} <oklch-relative-hue> [ / <oklch-relative-alpha> ]? )
+<oklch-relative-component> = <percentage> | <number> | none | l | c | h | alpha
+<oklch-relative-hue> = <hue> | none | l | c | h | alpha
+<oklch-relative-alpha> = <alpha-value> | none | l | c | h | alpha
+
+/* ==========================================================================
+   ALPHA Syntax
+   ========================================================================== */
+<alpha()> = alpha( from <color> [ / [ <alpha-value> | none | alpha ] ]? )
+
+/* ==========================================================================
+   COLOR Space Function Syntax
+   ========================================================================== */
+<color()> = [ <absolute-color-syntax> | <relative-color-syntax> ]
+<absolute-color-syntax> = color( [ <predefined-rgb> | <xyz-space> | <custom-color-space> ] [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )
+<relative-color-syntax> = [ <relative-rgb-color-syntax> | <relative-xyz-color-syntax> | <relative-custom-color-syntax> ]
+
+<relative-rgb-color-syntax> = color( from <color> <predefined-rgb> <rgb-relative-component>{3} [ / <rgb-relative-alpha> ]? )
+
+<relative-xyz-color-syntax> = color( from <color> <xyz-space> <xyz-relative-component>{3} [ / <xyz-relative-alpha> ]? )
+<xyz-relative-component> = <number> | <percentage> | none | x | y | z | alpha
+<xyz-relative-alpha> = <alpha-value> | none | x | y | z | alpha
+
+<predefined-rgb> = srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020
+<xyz-space> = xyz | xyz-d50 | xyz-d65
+
+<relative-custom-color-syntax> = %unregistered-sentinal-value%
+
+/* ==========================================================================
+   Functional Utilities (Light/Dark, Contrast, CMYK, Mix)
+   ========================================================================== */
+<light-dark-color> = light-dark( <color> , <color> )
+
+<contrast-color()> = contrast-color( <color> )
+
+<device-cmyk()> = <legacy-device-cmyk-syntax> | <modern-device-cmyk-syntax>
+<legacy-device-cmyk-syntax> = device-cmyk( <number>#{4} )
+<modern-device-cmyk-syntax> = device-cmyk( <cmyk-component>{4} [ / [ <alpha-value> | none ] ]? )
+<cmyk-component> = <number> | <percentage> | none
+
+<color-mix()> = color-mix( [ <color-interpolation-method> , ]? [ <color> && <percentage [0,100]>? ]# )
+<color-interpolation-method> = in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]
+<color-space> = <rectangular-color-space> | <polar-color-space>
+<rectangular-color-space> = srgb | srgb-linear | display-p3 | display-p3-linear | a98-rgb | prophoto-rgb | rec2020 | lab | oklab | <xyz-space> | <custom-color-space> | <custom-rectangular-space>
+<polar-color-space> = hsl | hwb | lch | oklch | <custom-polar-space>
+<hue-interpolation-method> = [ shorter | longer | increasing | decreasing ] hue
+
+<custom-color-function> = %unregistered-sentinel-value%
+<custom-rectangular-space> = %unregistered-sentinel-value%
+<custom-polar-space> = %unregistered-sentinel-value%
+
+/* ==========================================================================
+   Shared Value Components
+   ========================================================================== */
+<alpha-value> = <number> | <percentage>
+<hue> = <number> | <angle>
+<rgb-relative-component> = <number> | <percentage> | none | r | g | b | alpha
+<rgb-relative-alpha> = <alpha-value> | none | r | g | b | alpha
+<custom-color-space> = %unregistered-sentinel-value%
+`;
+  var RULE_START_RE = /^<[^>]+>\s*=/;
+  var HASH_REPEAT_RE = /^(.*)#\{(\d+)\}$/;
+  var REPEAT_RE = /^(.*)\{(\d+)\}$/;
+  var REF_RE = /^<([^>\s]+)(?:\s+([^>]+))?>$/;
+  var ARG_RE = /\[[^\]]+\]|[^\s]+/g;
+  var grammarMap = parseGrammar(grammar);
+  function concatNodes(a, b) {
+    const lenA = a.length;
+    const lenB = b.length;
+    const result = new Array(lenA + lenB);
+    for (let i = 0; i < lenA; i++)
+      result[i] = a[i];
+    for (let i = 0; i < lenB; i++)
+      result[lenA + i] = b[i];
+    return result;
+  }
+  function parseCmykComponent(n) {
+    if (!n?.value)
+      return 0;
+    const raw = Array.isArray(n.value) ? n.value[0]?.value : n.value;
+    return parseFloat(raw.trim());
+  }
+  function getLiteralValue(n) {
+    if (!n)
+      return "";
+    if (n.type === "literal")
+      return n.value;
+    if (Array.isArray(n.value))
+      return getLiteralValue(n.value[0]);
+    return "";
+  }
+  function validateTokens(tokens, rootRule) {
+    const memo = /* @__PURE__ */ new Map();
+    const rulesToTest = rootRule ? [rootRule] : Object.keys(grammarMap);
+    for (let i = 0; i < rulesToTest.length; i++) {
+      const ruleName = rulesToTest[i];
+      const results = matchRule(ruleName, tokens, 0, grammarMap, memo, null);
+      for (let j = 0; j < results.length; j++) {
+        const result = results[j];
+        if (result.success && result.nextIndex === tokens.length) {
+          return result.nodes[0];
         }
       }
-    },
-    "color-mix": {
-      isValid: (str) => str.slice(0, 10) === "color-mix(" && str[str.length - 1] === ")",
-      bridge: "rgb",
-      toBridge: (coords) => coords,
-      parse: (str) => {
-        const extractColorAndWeight = (colorStr) => {
-          const s = colorStr.trim();
-          let weight;
-          let remaining = s;
-          const leadingWeightMatch = remaining.match(/^(\d+)%\s+/);
-          if (leadingWeightMatch) {
-            const raw = parseInt(leadingWeightMatch[1], 10);
-            weight = Math.min(1, Math.max(0, raw / 100));
-            remaining = remaining.slice(leadingWeightMatch[0].length).trim();
-          }
-          let colorExpression = "";
-          let rest = "";
-          if (/^[a-z]/i.test(remaining)) {
-            const { expression: expr, end: e } = extractBalancedExpression(remaining, 0);
-            if (expr) {
-              colorExpression = expr;
-              rest = remaining.slice(e).trim();
-            } else {
-              const m = remaining.match(/^([^\s]+)(.*)$/);
-              colorExpression = m ? m[1] : remaining;
-              rest = m ? m[2].trim() : "";
-            }
-          } else {
-            const m = remaining.match(/^([^\s]+)(.*)$/);
-            colorExpression = m ? m[1] : remaining;
-            rest = m ? m[2].trim() : "";
+    }
+    throw new Error("Invalid syntax");
+  }
+  function matchRule(ruleName, tokens, index, grammar2, memo, currentFunction, args) {
+    const key = `${ruleName}:${index}:${currentFunction || ""}:${args ? args.join(",") : ""}`;
+    const cached = memo.get(key);
+    if (cached)
+      return cached;
+    const token = tokens[index];
+    const validator = validators[ruleName];
+    if (validator) {
+      if (!token)
+        return [];
+      if (validator(token, args)) {
+        const result = [
+          {
+            success: true,
+            nextIndex: index + 1,
+            nodes: [{ type: ruleName, value: token }]
           }
-          if (weight === void 0) {
-            const trailingWeightMatch = rest.match(/^(-?(?:\d+\.?\d*|\.\d+))%/);
-            if (trailingWeightMatch) {
-              const raw = parseInt(trailingWeightMatch[1], 10);
-              weight = raw / 100;
-              rest = rest.slice(trailingWeightMatch[0].length).trim();
-              if (weight < 0) {
-                throw new Error("Percentages less than 0 are not valid.");
-              } else if (weight > 1) {
-                throw new Error("Percentages greater than 100 are not valid.");
-              }
-            } else if (rest.slice(0, 5) === "calc(") {
-              const { expression: calcExpr, end } = extractBalancedExpression(rest, 0);
-              if (!calcExpr) {
-                throw new Error("Malformed calc() weight expression.");
+        ];
+        memo.set(key, result);
+        return result;
+      }
+      memo.set(key, []);
+      return [];
+    }
+    const rule = grammar2[ruleName];
+    if (!rule) {
+      memo.set(key, []);
+      return [];
+    }
+    const results = matchNode(rule, tokens, index, grammar2, memo, currentFunction);
+    const wrapped = new Array(results.length);
+    for (let i = 0; i < results.length; i++) {
+      wrapped[i] = {
+        success: true,
+        nextIndex: results[i].nextIndex,
+        nodes: [{ type: ruleName, value: results[i].nodes }]
+      };
+    }
+    memo.set(key, wrapped);
+    return wrapped;
+  }
+  function matchNode(node, tokens, index, grammar2, memo, currentFunction) {
+    switch (node.kind) {
+      case "literal": {
+        const token = tokens[index];
+        if (!token || token !== node.value.toLowerCase())
+          return [];
+        return [
+          {
+            success: true,
+            nextIndex: index + 1,
+            nodes: [
+              {
+                type: token === "(" || token === ")" || token === "," || token === "/" ? "symbol" : "literal",
+                value: token
               }
-              rest = rest.slice(end).trim();
-            }
+            ]
           }
-          if (rest.length > 0) {
-            throw new Error(`Unexpected extra tokens after color: '${rest}'.`);
-          }
-          const color = Color.from(colorExpression);
-          return { color, weight };
-        };
-        const getWeight2Prime = (weight12, weight22) => {
-          if (weight12 === void 0 && typeof weight22 === "number") {
-            weight12 = 1 - weight22;
-          } else if (typeof weight12 === "number" && weight22 === void 0) {
-            weight22 = 1 - weight12;
-          } else if (weight12 === void 0 && weight22 === void 0) {
-            weight12 = weight22 = 0.5;
-          } else {
-            weight12 = weight12;
-            weight22 = weight22;
-            if (weight12 + weight22 <= 0) {
-              throw new Error("Sum of percengates cannot be 0%.");
-            }
-          }
-          const totalWeight = weight12 + weight22;
-          let alphaMultiplier2;
-          if (totalWeight > 1) {
-            weight12 /= totalWeight;
-            weight22 /= totalWeight;
-          } else {
-            weight12 /= totalWeight;
-            weight22 /= totalWeight;
-            alphaMultiplier2 = totalWeight;
+        ];
+      }
+      case "ref": {
+        const token = tokens[index];
+        if (!token)
+          return [];
+        if (currentFunction && colorModels[currentFunction]) {
+          const component = colorModels[currentFunction].components[token];
+          if (component && component.value === node.name) {
+            return [
+              {
+                success: true,
+                nextIndex: index + 1,
+                nodes: [{ type: node.name, value: token }]
+              }
+            ];
           }
-          return { amount: weight22, alphaMultiplier: alphaMultiplier2 };
-        };
-        const fnName = "color-mix";
-        const { expression } = extractBalancedExpression(str, fnName.length);
-        if (!expression)
-          throw new Error("Malformed color-mix expression.");
-        const inner = expression.slice(1, -1).trim();
-        const parts = [];
-        let i = 0;
-        let current = "";
-        while (i < inner.length) {
-          const char = inner[i];
-          if (char === ",") {
-            parts.push(current.trim());
-            current = "";
-            i++;
-            continue;
+        }
+        return matchRule(node.name, tokens, index, grammar2, memo, currentFunction, node.args);
+      }
+      case "choice": {
+        const results = [];
+        for (let i = 0; i < node.nodes.length; i++) {
+          const childMatches = matchNode(node.nodes[i], tokens, index, grammar2, memo, currentFunction);
+          for (let j = 0; j < childMatches.length; j++) {
+            results.push(childMatches[j]);
           }
-          if (char === "(" || /[a-zA-Z]/.test(char)) {
-            const { expression: expr, end } = extractBalancedExpression(inner, i);
-            if (expr) {
-              current += expr;
-              i = end;
-              continue;
+        }
+        return results;
+      }
+      case "sequence": {
+        let states = [{ success: true, nextIndex: index, nodes: [] }];
+        for (let i = 0; i < node.nodes.length; i++) {
+          const child = node.nodes[i];
+          const nextStates = [];
+          for (let j = 0; j < states.length; j++) {
+            const state = states[j];
+            const matches = matchNode(child, tokens, state.nextIndex, grammar2, memo, currentFunction);
+            for (let k = 0; k < matches.length; k++) {
+              nextStates.push({
+                success: true,
+                nextIndex: matches[k].nextIndex,
+                nodes: concatNodes(state.nodes, matches[k].nodes)
+              });
             }
           }
-          current += char;
-          i++;
-        }
-        parts.push(current.trim());
-        if (parts.length !== 3) {
-          throw new Error("color-mix must have three comma-separated parts.");
+          states = nextStates;
+          if (states.length === 0)
+            return [];
         }
-        const inPart = parts[0];
-        const inMatch = inPart.match(/^in\s+([a-z0-9-]+)(?:\s+(shorter|longer|increasing|decreasing)\s+hue)?$/);
-        if (!inMatch) {
-          throw new Error("Invalid model and hue format.");
+        return states;
+      }
+      case "optional": {
+        const matches = matchNode(node.node, tokens, index, grammar2, memo, currentFunction);
+        const results = new Array(matches.length + 1);
+        results[0] = { success: true, nextIndex: index, nodes: [] };
+        for (let i = 0; i < matches.length; i++) {
+          results[i + 1] = matches[i];
         }
-        const model = inMatch[1];
-        let hue = inMatch[2];
-        if (model === "rgb")
-          throw new Error(`RGB model is not allowed in color-mix(). Use "srgb" instead.`);
-        if (hue) {
-          const comps = colorModels[model].components;
-          if (!comps) {
-            throw new Error(`Unknown color model: ${model}.`);
-          }
-          const hasHue = Object.values(comps).some((c) => c.value === "hue");
-          if (!hasHue) {
-            throw new Error(`Hue interpolation not supported in ${model} space.`);
+        return results;
+      }
+      case "repeat": {
+        let states = [{ success: true, nextIndex: index, nodes: [] }];
+        for (let i = 0; i < node.min; i++) {
+          const nextStates = [];
+          for (let j = 0; j < states.length; j++) {
+            const state = states[j];
+            const matches = matchNode(node.node, tokens, state.nextIndex, grammar2, memo, currentFunction);
+            for (let k = 0; k < matches.length; k++) {
+              nextStates.push({
+                success: true,
+                nextIndex: matches[k].nextIndex,
+                nodes: concatNodes(state.nodes, matches[k].nodes)
+              });
+            }
           }
-        } else {
-          hue = "shorter";
+          states = nextStates;
+          if (states.length === 0)
+            return [];
         }
-        const { color: color1, weight: weight1 } = extractColorAndWeight(parts[1]);
-        const { color: color2, weight: weight2 } = extractColorAndWeight(parts[2]);
-        const { amount, alphaMultiplier = 1 } = getWeight2Prime(weight1, weight2);
-        return color1.with({ alpha: (a) => isNaN(a) ? a : a * alphaMultiplier }, false).in(model).mix(color2.with({ alpha: (a) => isNaN(a) ? a : a * alphaMultiplier }, false), { amount, hue }).in("rgb").coords;
-      }
-    },
-    transparent: {
-      isValid: (str) => str === "transparent",
-      bridge: "rgb",
-      toBridge: (coords) => coords,
-      parse: (str) => [NaN, NaN, NaN, 0]
-      // eslint-disable-line no-unused-vars
-    }
-  };
-  var colorTypes = {
-    ...colorBases,
-    currentColor: {
-      isValid: (str) => str === "currentcolor",
-      bridge: "rgb",
-      toBridge: (coords) => coords,
-      parse: (str) => [0, 0, 0, 1]
-      // eslint-disable-line no-unused-vars
-    },
-    "system-color": {
-      isValid: (str) => Object.keys(config.systemColors).some((key) => key.toLowerCase() === str),
-      bridge: "rgb",
-      toBridge: (coords) => coords,
-      parse: (str) => {
-        const { systemColors: systemColors2 } = config;
-        const key = Object.keys(systemColors2).find((k) => k.toLowerCase() === str);
-        const rgbArr = systemColors2[key][config.theme === "light" ? 0 : 1];
-        return [...rgbArr, 1];
-      }
-    },
-    "contrast-color": {
-      isValid: (str) => str.slice(0, 15) === "contrast-color(" && str[str.length - 1] === ")",
-      bridge: "rgb",
-      toBridge: (coords) => coords,
-      parse: (str) => {
-        const inner = str.slice(15, -1);
-        const [, luminance] = Color.from(inner).in("xyz-d65").coords;
-        return luminance > 0.5 ? [0, 0, 0, 1] : [255, 255, 255, 1];
+        return states;
       }
-    },
-    "device-cmyk": {
-      isValid: (str) => str.slice(0, 12) === "device-cmyk(" && str[str.length - 1] === ")",
-      bridge: "rgb",
-      toBridge: (coords) => coords,
-      parse: (str) => {
-        const fnName = "device-cmyk";
-        const fnIndex = str.indexOf(fnName);
-        if (fnIndex === -1)
-          throw new Error("Invalid device-cmyk syntax");
-        const { expression } = extractBalancedExpression(str, fnIndex + fnName.length);
-        if (!expression)
-          throw new Error("Malformed device-cmyk expression");
-        const content = expression.slice(1, -1).trim();
-        const tokens = [];
-        let i = 0;
-        while (i < content.length) {
-          const char = content[i];
-          if (char === " ") {
-            i++;
-            continue;
-          }
-          if (char === "(" || /[a-zA-Z-]/.test(char)) {
-            const { expression: expr, end } = extractBalancedExpression(content, i);
-            if (expr) {
-              tokens.push(expr);
-              i = end;
-              continue;
+      case "permutation": {
+        const numNodes = node.nodes.length;
+        const fullMask = (1 << numNodes) - 1;
+        let states = [{ nextIndex: index, nodes: [], remainingMask: fullMask }];
+        const finalResults = [];
+        while (states.length > 0) {
+          const nextStates = [];
+          for (let i = 0; i < states.length; i++) {
+            const state = states[i];
+            let allRemainingOptional = true;
+            for (let bit = 0; bit < numNodes; bit++) {
+              if ((state.remainingMask & 1 << bit) !== 0) {
+                if (node.nodes[bit].kind !== "optional") {
+                  allRemainingOptional = false;
+                  break;
+                }
+              }
             }
-          }
-          if (/[\d.+-]/.test(char)) {
-            let num = "";
-            while (i < content.length && /[\d.eE+-]/.test(content[i])) {
-              num += content[i];
-              i++;
+            if (allRemainingOptional) {
+              finalResults.push({
+                success: true,
+                nextIndex: state.nextIndex,
+                nodes: state.nodes
+              });
             }
-            if (i < content.length && content[i] === "%") {
-              num += "%";
-              i++;
-            } else if (i < content.length && /[a-zA-Z]/.test(content[i])) {
-              while (i < content.length && /[a-zA-Z]/.test(content[i])) {
-                num += content[i];
-                i++;
+            for (let bit = 0; bit < numNodes; bit++) {
+              if ((state.remainingMask & 1 << bit) !== 0) {
+                const child = node.nodes[bit];
+                const nodeToMatch = child.kind === "optional" ? child.node : child;
+                const matches = matchNode(nodeToMatch, tokens, state.nextIndex, grammar2, memo, currentFunction);
+                const nextMask = state.remainingMask & ~(1 << bit);
+                for (let m = 0; m < matches.length; m++) {
+                  nextStates.push({
+                    nextIndex: matches[m].nextIndex,
+                    nodes: concatNodes(state.nodes, matches[m].nodes),
+                    remainingMask: nextMask
+                  });
+                }
               }
             }
-            tokens.push(num);
-            continue;
           }
-          if (char === "," || char === "/") {
-            tokens.push(char);
+          states = nextStates;
+        }
+        return finalResults;
+      }
+      case "hashList": {
+        let currentStates = matchNode(node.node, tokens, index, grammar2, memo, currentFunction);
+        const allSuccessfulStates = [];
+        while (currentStates.length > 0) {
+          const nextStates = [];
+          for (let i = 0; i < currentStates.length; i++) {
+            const state = currentStates[i];
+            allSuccessfulStates.push(state);
+            const commaIdx = state.nextIndex;
+            if (commaIdx < tokens.length && tokens[commaIdx] === ",") {
+              const commaNode = { type: "symbol", value: "," };
+              const matches = matchNode(node.node, tokens, commaIdx + 1, grammar2, memo, currentFunction);
+              for (let m = 0; m < matches.length; m++) {
+                const match = matches[m];
+                if (match.nextIndex > commaIdx) {
+                  const newNodes = new Array(state.nodes.length + 1 + match.nodes.length);
+                  let idx = 0;
+                  for (let n = 0; n < state.nodes.length; n++)
+                    newNodes[idx++] = state.nodes[n];
+                  newNodes[idx++] = commaNode;
+                  for (let n = 0; n < match.nodes.length; n++)
+                    newNodes[idx++] = match.nodes[n];
+                  nextStates.push({
+                    success: true,
+                    nextIndex: match.nextIndex,
+                    nodes: newNodes
+                  });
+                }
+              }
+            }
+          }
+          currentStates = nextStates;
+        }
+        return allSuccessfulStates;
+      }
+    }
+  }
+  function tokenize(input) {
+    const lower = input.toLowerCase();
+    const tokens = [];
+    let i = 0;
+    while (i < lower.length) {
+      if (lower.slice(i, i + 2) === "/*") {
+        const endIndex = lower.indexOf("*/", i + 2);
+        if (endIndex !== -1) {
+          i = endIndex + 2;
+        } else {
+          i = lower.length;
+        }
+        continue;
+      }
+      const ch = lower[i];
+      if (/\s/.test(ch)) {
+        i++;
+        continue;
+      }
+      if (lower.slice(i, i + 5) === "calc(") {
+        const start2 = i;
+        let parenCount = 0;
+        while (i < lower.length) {
+          if (lower[i] === "(")
+            parenCount++;
+          else if (lower[i] === ")") {
+            parenCount--;
+            if (parenCount === 0) {
+              i++;
+              break;
+            }
+          }
+          i++;
+        }
+        tokens.push(lower.slice(start2, i));
+        continue;
+      }
+      if ("(),/".includes(ch)) {
+        tokens.push(ch);
+        i++;
+        continue;
+      }
+      const start = i;
+      while (i < lower.length && !/\s/.test(lower[i]) && !"(),/".includes(lower[i])) {
+        i++;
+      }
+      tokens.push(lower.slice(start, i));
+    }
+    return tokens;
+  }
+  function parseGrammar(grammar2) {
+    const rules = {};
+    const lines = grammar2.replace(/\/\*[\s\S]*?\*\//g, "").split("\n");
+    let currentRuleName = "";
+    let currentDef = "";
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i].trim();
+      if (!line)
+        continue;
+      if (RULE_START_RE.test(line)) {
+        if (currentRuleName)
+          rules[currentRuleName] = parseExpression(currentDef);
+        const eqIndex = line.indexOf("=");
+        currentRuleName = line.slice(0, eqIndex).trim();
+        currentDef = line.slice(eqIndex + 1).trim();
+      } else if (currentRuleName) {
+        currentDef += " " + line;
+      }
+    }
+    if (currentRuleName)
+      rules[currentRuleName] = parseExpression(currentDef);
+    return rules;
+  }
+  function parseExpression(expr) {
+    const parts = splitTopLevel(expr, "|");
+    if (parts.length > 1)
+      return { kind: "choice", nodes: parts.map(parsePermutation) };
+    return parsePermutation(expr);
+  }
+  function splitTopLevel(str, separator) {
+    const result = [];
+    let depth = 0;
+    let start = 0;
+    const sepLen = separator.length;
+    const len = str.length;
+    for (let i = 0; i < len; i++) {
+      const ch = str.charCodeAt(i);
+      if (ch === 91 || ch === 40) {
+        depth++;
+      } else if (ch === 93 || ch === 41) {
+        depth--;
+      } else if (depth === 0 && str.startsWith(separator, i)) {
+        const part = str.slice(start, i).trim();
+        if (part)
+          result.push(part);
+        i += sepLen - 1;
+        start = i + 1;
+      }
+    }
+    const last = str.slice(start).trim();
+    if (last)
+      result.push(last);
+    return result;
+  }
+  function splitSequence(str) {
+    const result = [];
+    let i = 0;
+    const len = str.length;
+    while (i < len) {
+      const ch = str.charCodeAt(i);
+      if (ch === 32 || ch === 9 || ch === 10 || ch === 13) {
+        i++;
+        continue;
+      }
+      if (ch === 40 || ch === 41 || ch === 44 || ch === 47 || ch === 124) {
+        result.push(str[i]);
+        i++;
+        continue;
+      }
+      const start = i;
+      if (ch === 60) {
+        while (i < len && str.charCodeAt(i) !== 62)
+          i++;
+        i++;
+        while (i < len) {
+          const c = str.charCodeAt(i);
+          if (c === 32 || c === 9 || c === 10 || c === 13 || c === 40 || c === 41 || c === 44 || c === 47 || c === 124)
+            break;
+          i++;
+        }
+        result.push(str.slice(start, i));
+        continue;
+      }
+      if (ch === 91) {
+        let depth = 1;
+        i++;
+        while (i < len && depth > 0) {
+          const c = str.charCodeAt(i);
+          if (c === 91)
+            depth++;
+          else if (c === 93)
+            depth--;
+          i++;
+        }
+        while (i < len) {
+          const c = str.charCodeAt(i);
+          if (c === 32 || c === 9 || c === 10 || c === 13 || c === 40 || c === 41 || c === 44 || c === 47 || c === 124)
+            break;
+          i++;
+        }
+        result.push(str.slice(start, i));
+        continue;
+      }
+      while (i < len) {
+        const c = str.charCodeAt(i);
+        if (c === 32 || c === 9 || c === 10 || c === 13 || c === 40 || c === 41 || c === 44 || c === 47 || c === 124)
+          break;
+        i++;
+      }
+      result.push(str.slice(start, i));
+    }
+    return result;
+  }
+  function parsePermutation(targetExpr) {
+    const parts = splitTopLevel(targetExpr, "&&");
+    if (parts.length > 1)
+      return { kind: "permutation", nodes: parts.map(parseSequence) };
+    return parseSequence(targetExpr);
+  }
+  function parseSequence(targetExpr) {
+    const tokens = splitSequence(targetExpr);
+    return { kind: "sequence", nodes: tokens.map(parseTerm) };
+  }
+  function parseTerm(term) {
+    term = term.trim();
+    const len = term.length;
+    if (len === 1) {
+      const c = term.charCodeAt(0);
+      if (c === 40 || c === 41 || c === 44 || c === 47) {
+        return { kind: "literal", value: term };
+      }
+    }
+    const lastChar = term.charCodeAt(len - 1);
+    if (lastChar === 35 && term.indexOf("{") === -1) {
+      return { kind: "hashList", node: parseTerm(term.slice(0, -1)) };
+    }
+    if (lastChar === 63) {
+      return { kind: "optional", node: parseTerm(term.slice(0, -1)) };
+    }
+    const hashRepeatMatch = HASH_REPEAT_RE.exec(term);
+    if (hashRepeatMatch) {
+      const innerNode = parseTerm(hashRepeatMatch[1]);
+      const count = Number(hashRepeatMatch[2]);
+      const commaNode = { kind: "literal", value: "," };
+      const nodes = [];
+      for (let i = 0; i < count; i++) {
+        nodes.push(innerNode);
+        if (i < count - 1)
+          nodes.push(commaNode);
+      }
+      return { kind: "sequence", nodes };
+    }
+    const repeatMatch = REPEAT_RE.exec(term);
+    if (repeatMatch) {
+      const num = Number(repeatMatch[2]);
+      return {
+        kind: "repeat",
+        node: parseTerm(repeatMatch[1]),
+        min: num,
+        max: num
+      };
+    }
+    const firstChar = term.charCodeAt(0);
+    if (firstChar === 91 && lastChar === 93) {
+      return parseExpression(term.slice(1, -1));
+    }
+    if (firstChar === 60 && lastChar === 62) {
+      const match = REF_RE.exec(term);
+      if (match) {
+        let argsArray = void 0;
+        if (match[2]) {
+          const argMatches = match[2].match(ARG_RE);
+          if (argMatches) {
+            argsArray = argMatches.map((arg) => arg.trim());
+          }
+        }
+        return { kind: "ref", name: `<${match[1]}>`, args: argsArray };
+      }
+      return { kind: "ref", name: term };
+    }
+    return { kind: "literal", value: term };
+  }
+  var { 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;
+  var BASE_MATH_ENV = {
+    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
+  };
+  function extractToken(n) {
+    if (typeof n === "string")
+      return n;
+    if (n.type === "<percentage>")
+      return String(n.value || "");
+    if (Array.isArray(n.value))
+      return extractToken(n.value[0]);
+    return String(n.value || "");
+  }
+  function parsePercent(str, type, min2, max2) {
+    const percent = parseFloat(str);
+    if (isNaN(percent))
+      throw new Error(`Invalid percentage: '${str}'.`);
+    if (type === "percentage")
+      return percent;
+    if (min2 < 0 && max2 > 0)
+      return percent / 100 * (max2 - min2) / 2;
+    return percent / 100 * (max2 - min2) + min2;
+  }
+  function parseHue(str) {
+    const val = parseFloat(str);
+    if (isNaN(val))
+      throw new Error(`Invalid hue: '${str}'.`);
+    if (str[str.length - 1] === "deg")
+      return val;
+    if (str[str.length - 1] === "rad")
+      return val * (180 / pi);
+    if (str[str.length - 1] === "grad")
+      return val * 0.9;
+    if (str[str.length - 1] === "turn")
+      return val * 360;
+    return val;
+  }
+  function parseCalcExpression(expr, type, base, min2, max2) {
+    if (expr === "infinity")
+      return Infinity;
+    if (expr === "-infinity")
+      return -Infinity;
+    if (expr === "nan")
+      return NaN;
+    const UNIT_NUM = 1;
+    const UNIT_PCT = 2;
+    const UNIT_ANG = 4;
+    const getUnitName = (u) => u === UNIT_ANG ? "angle" : u === UNIT_PCT ? "percent" : "number";
+    const tokenize2 = (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 numStr = "";
+          while (i < s.length && /[0-9.]/.test(s[i]))
+            numStr += s[i++];
+          if (i < s.length && /[eE]/.test(s[i])) {
+            numStr += s[i++];
+            if (/[+-]/.test(s[i]))
+              numStr += s[i++];
+            while (i < s.length && /[0-9]/.test(s[i]))
+              numStr += s[i++];
+          }
+          let unitType = UNIT_NUM;
+          let rawUnit = "";
+          if (s[i] === "%") {
+            unitType = UNIT_PCT;
+            rawUnit = "%";
             i++;
-            continue;
+          } else if (s.slice(i, i + 3) === "deg") {
+            unitType = UNIT_ANG;
+            rawUnit = "deg";
+            i += 3;
+          } else if (s.slice(i, i + 3) === "rad") {
+            unitType = UNIT_ANG;
+            rawUnit = "rad";
+            i += 3;
+          } else if (s.slice(i, i + 4) === "grad") {
+            unitType = UNIT_ANG;
+            rawUnit = "grad";
+            i += 4;
+          } else if (s.slice(i, i + 4) === "turn") {
+            unitType = UNIT_ANG;
+            rawUnit = "turn";
+            i += 4;
           }
-          throw new Error(`Unexpected character: ${char}`);
+          let val = parseFloat(numStr);
+          if (unitType === UNIT_PCT) {
+            val = parsePercent(numStr + rawUnit, type, min2, max2);
+          } else if (unitType === UNIT_ANG) {
+            val = parseHue(numStr + rawUnit);
+          }
+          out.push({ type: "number", value: val, unit: unitType });
+          continue;
         }
-        const parseValue = (token) => {
-          return token[token.length - 1] === "%" ? parseFloat(token) / 100 : parseFloat(token);
-        };
-        if (tokens.length >= 2 && tokens[1] === ",") {
-          const values = tokens.filter((t) => t !== ",");
-          if (values.length === 4 || values.length === 5) {
-            const [c2, m2, y2, k2, alpha2 = 1] = values.map(parseValue);
-            const red2 = 1 - Math.min(1, c2 * (1 - k2) + k2);
-            const green2 = 1 - Math.min(1, m2 * (1 - k2) + k2);
-            const blue2 = 1 - Math.min(1, y2 * (1 - k2) + k2);
-            return [red2 * 255, green2 * 255, blue2 * 255, alpha2];
+        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, unit: t.unit };
+        }
+        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 };
           }
-          throw new Error("Invalid number of components for comma-separated device-cmyk");
+          return { type: "var", name: t.value };
         }
-        let idx = 0;
-        const components = [];
-        while (idx < tokens.length && components.length < 4 && tokens[idx] !== "/" && tokens[idx] !== ",") {
-          components.push(tokens[idx]);
-          idx++;
+        if (t.value === "(") {
+          nxt();
+          const e2 = parseAdd();
+          expect(")");
+          return e2;
         }
-        if (components.length !== 4) {
-          throw new Error("Invalid number of components for space-separated device-cmyk");
+        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() };
         }
-        const [c, m, y, k] = components.map(parseValue);
-        let alpha = 1;
-        if (idx < tokens.length && tokens[idx] === "/") {
-          idx++;
-          if (idx >= tokens.length)
-            throw new Error("Missing alpha value");
-          alpha = parseValue(tokens[idx]);
-          idx++;
+        return parsePrimary();
+      };
+      const parsePower = () => {
+        let left = parseUnary();
+        while (cur() && cur().value === "**") {
+          const op = nxt().value;
+          left = { type: "binary", op, left, right: parseUnary() };
         }
-        if (idx < tokens.length && tokens[idx] === ",") {
-          idx++;
-          const fallbackStr = tokens.slice(idx).join(" ");
-          return Color.from(fallbackStr).in("rgb").coords;
+        return left;
+      };
+      const parseMul = () => {
+        let left = parsePower();
+        while (cur() && ["*", "/", "%"].includes(String(cur().value))) {
+          const op = nxt().value;
+          left = { type: "binary", op, left, right: parsePower() };
         }
-        const red = 1 - Math.min(1, c * (1 - k) + k);
-        const green = 1 - Math.min(1, m * (1 - k) + k);
-        const blue = 1 - Math.min(1, y * (1 - k) + k);
-        return [red * 255, green * 255, blue * 255, alpha];
-      },
-      fromBridge: (coords) => coords,
-      format: ([red, green, blue, alpha = 1], options = {}) => {
-        const { legacy = false, precision = 3, fit: fitMethod = config.defaults.fit } = options;
-        const [fr, fg, fb] = fit([red, green, blue], "rgb", { method: fitMethod });
-        const r = fr / 255;
-        const g = fg / 255;
-        const b = fb / 255;
-        const k = 1 - Math.max(r, g, b);
-        const formatComponent = (value) => {
-          return Number(precision === null ? value : value.toFixed(precision)).toString();
+        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;
+    };
+    const evaluate = (ast, env) => {
+      switch (ast.type) {
+        case "number":
+          return { value: ast.value, unit: ast.unit };
+        case "var": {
+          const v = env[ast.name];
+          if (v === void 0)
+            throw new Error(`Unknown variable: ${ast.name}`);
+          if (typeof v === "function") {
+            throw new Error(`Expected variable but found function: ${ast.name}`);
+          }
+          return { value: v, unit: UNIT_NUM };
+        }
+        case "binary": {
+          const L = evaluate(ast.left, env);
+          const R = evaluate(ast.right, env);
+          switch (ast.op) {
+            case "+":
+            case "-": {
+              const val = ast.op === "+" ? L.value + R.value : L.value - R.value;
+              const unitMask = L.unit | R.unit;
+              if (L.unit === R.unit)
+                return { value: val, unit: L.unit };
+              if (unitMask === 5)
+                return { value: val, unit: UNIT_ANG };
+              throw new Error(`Cannot ${ast.op} mismatched units: ${getUnitName(L.unit)} and ${getUnitName(R.unit)}`);
+            }
+            case "*": {
+              const val = L.value * R.value;
+              if (L.unit === UNIT_NUM)
+                return { value: val, unit: R.unit };
+              if (R.unit === UNIT_NUM)
+                return { value: val, unit: L.unit };
+              throw new Error(`Cannot multiply units: ${getUnitName(L.unit)} and ${getUnitName(R.unit)}`);
+            }
+            case "/": {
+              if (R.unit === UNIT_NUM)
+                return { value: L.value / R.value, unit: L.unit };
+              if (L.unit === R.unit)
+                return { value: L.value / R.value, unit: UNIT_NUM };
+              throw new Error(`Cannot divide units: ${getUnitName(L.unit)} by ${getUnitName(R.unit)}`);
+            }
+            case "%": {
+              if (R.unit === UNIT_NUM)
+                return { value: L.value % R.value, unit: L.unit };
+              if (L.unit === R.unit)
+                return { value: L.value % R.value, unit: L.unit };
+              throw new Error(`Cannot modulo units: ${getUnitName(L.unit)} by ${getUnitName(R.unit)}`);
+            }
+            case "**": {
+              if (R.unit !== UNIT_NUM)
+                throw new Error(`Exponent must be a number, got ${getUnitName(R.unit)}`);
+              return { value: L.value ** R.value, unit: L.unit };
+            }
+            default:
+              throw new Error(`Unknown binary operator: ${ast.op}`);
+          }
+        }
+        case "unary": {
+          const res = evaluate(ast.arg, env);
+          switch (ast.op) {
+            case "+":
+              return { value: +res.value, unit: res.unit };
+            case "-":
+              return { value: -res.value, unit: res.unit };
+            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}`);
+          const evaluatedArgs = ast.args.map((a) => evaluate(a, env));
+          const numArgs = evaluatedArgs.map((a) => a.value);
+          const val = fn(...numArgs);
+          const preserveUnitFuncs = ["min", "max", "round", "ceil", "floor", "abs", "sign", "trunc"];
+          if (preserveUnitFuncs.includes(ast.func)) {
+            let combinedMask = 0;
+            for (let i = 0; i < evaluatedArgs.length; i++) {
+              combinedMask |= evaluatedArgs[i].unit;
+            }
+            if ((combinedMask & 6) === 6)
+              throw new Error(`Function ${ast.func} cannot mix angle and percent`);
+            if ((combinedMask & 3) === 3)
+              throw new Error(`Function ${ast.func} cannot mix number and percent`);
+            const finalUnit = combinedMask & UNIT_ANG ? UNIT_ANG : combinedMask & UNIT_PCT ? UNIT_PCT : UNIT_NUM;
+            return { value: val, unit: finalUnit };
+          }
+          return { value: val, unit: UNIT_NUM };
+        }
+        default: {
+          throw new Error(`Unknown AST node type: ${ast.type}`);
+        }
+      }
+    };
+    const calcEnv = Object.assign({}, BASE_MATH_ENV, base);
+    return evaluate(parse(tokenize2(expr)), calcEnv).value;
+  }
+  function evaluateComponent(node, expectedType, base = {}) {
+    if (!node)
+      return NaN;
+    const token = extractToken(node);
+    return evaluateCSSValue(token, expectedType, base);
+  }
+  function evaluateCSSValue(tokenString, expectedType, base = {}) {
+    const token = tokenString.trim();
+    if (token === "none")
+      return NaN;
+    if (token in base)
+      return base[token];
+    const [tMin, tMax] = Array.isArray(expectedType) ? expectedType : expectedType === "percentage" ? [0, 100] : [0, 1];
+    if (/^-?(?:\d+|\d*\.\d+)$/.test(token)) {
+      return parseFloat(token);
+    }
+    if (token[token.length - 1] === "%" && /^-?(?:\d+|\d*\.\d+)%$/.test(token)) {
+      return parsePercent(token, expectedType, tMin, tMax);
+    }
+    if (/^-?(?:\d+|\d*\.\d+)(deg|rad|grad|turn)$/.test(token)) {
+      return parseHue(token);
+    }
+    if (token.slice(0, 5) === "calc(" && token[token.length - 1] === ")") {
+      return parseCalcExpression(token.slice(5, -1).trim(), expectedType, base, tMin, tMax);
+    }
+    throw new Error(`Unable to parse component token: ${token}`);
+  }
+  function createLegacyColorParser(model, componentKeys) {
+    return (node) => {
+      const t = node.value;
+      const config2 = colorModels[model].components;
+      const c1 = evaluateComponent(t[2], config2[componentKeys[0]].value);
+      const c2 = evaluateComponent(t[4], config2[componentKeys[1]].value);
+      const c3 = evaluateComponent(t[6], config2[componentKeys[2]].value);
+      let alpha = 1;
+      if (t[7]?.type === "symbol" && t[7]?.value === ",")
+        alpha = evaluateComponent(t[8], [0, 1]);
+      return { model, coords: [c1, c2, c3, alpha] };
+    };
+  }
+  function createModernColorParser(model, componentKeys) {
+    return (node) => {
+      const t = node.value;
+      const config2 = colorModels[model].components;
+      const c1 = evaluateComponent(t[2], config2[componentKeys[0]].value);
+      const c2 = evaluateComponent(t[3], config2[componentKeys[1]].value);
+      const c3 = evaluateComponent(t[4], config2[componentKeys[2]].value);
+      let alpha = 1;
+      if (t[5]?.type === "symbol" && t[5]?.value === "/")
+        alpha = evaluateComponent(t[6], [0, 1]);
+      return { model, coords: [c1, c2, c3, alpha] };
+    };
+  }
+  function createRelativeColorParser(model, componentKeys) {
+    return (node) => {
+      const t = node.value;
+      const config2 = colorModels[model].components;
+      const originColorNode = t[3];
+      const originParsed = parseNode(originColorNode);
+      const originInstance = new Color(originParsed.model, originParsed.coords).in(model);
+      const baseEnv = originInstance.toObject({ fit: "none", precision: null });
+      const c1 = evaluateComponent(t[4], config2[componentKeys[0]].value, baseEnv);
+      const c2 = evaluateComponent(t[5], config2[componentKeys[1]].value, baseEnv);
+      const c3 = evaluateComponent(t[6], config2[componentKeys[2]].value, baseEnv);
+      let alpha = 1;
+      if (t[7]?.type === "symbol" && t[7]?.value === "/") {
+        alpha = evaluateComponent(t[8], [0, 1], baseEnv);
+      }
+      return {
+        model,
+        coords: [c1, c2, c3, alpha]
+      };
+    };
+  }
+  function createRelativeColorFunctionParser(node) {
+    const t = node.value;
+    const { model, coords } = parseNode(t[3]);
+    const spaceNode = t[4];
+    const targetModel = Array.isArray(spaceNode.value) ? spaceNode.value[0]?.value : spaceNode.value;
+    const originInstance = new Color(model, coords).in(targetModel);
+    const baseEnv = originInstance.toObject({ fit: "none", precision: null });
+    const c1 = evaluateComponent(t[5], [0, 1], baseEnv);
+    const c2 = evaluateComponent(t[6], [0, 1], baseEnv);
+    const c3 = evaluateComponent(t[7], [0, 1], baseEnv);
+    let alpha = 1;
+    if (t[8]?.type === "symbol" && t[8]?.value === "/") {
+      alpha = evaluateComponent(t[9], [0, 1], baseEnv);
+    }
+    return {
+      model: targetModel,
+      coords: [c1, c2, c3, alpha]
+    };
+  }
+  var validators = (() => {
+    const NUMBER_REGEX = /^-?(?:\d+(?:\.\d+)?|\.\d+)$/;
+    const PERCENT_REGEX = /^-?(?:\d+(?:\.\d+)?|\.\d+)%$/;
+    const ANGLE_REGEX = /^-?(?:\d+(?:\.\d+)?|\.\d+)(?:deg|rad|turn|grad)$/;
+    const RANGE_REGEX = /^\[([^,]+),([^\]]+)\]$/;
+    const systemColorsSet = new Set(Object.keys(systemColors).map((key) => key.toLowerCase()));
+    const rangeCache = /* @__PURE__ */ new Map();
+    const getRange = (args) => {
+      if (!args)
+        return void 0;
+      for (let i = 0; i < args.length; i++) {
+        if (RANGE_REGEX.test(args[i]))
+          return args[i];
+      }
+      return void 0;
+    };
+    const checkRange = (val, rangeStr) => {
+      let bounds = rangeCache.get(rangeStr);
+      if (!bounds) {
+        const match = rangeStr.match(RANGE_REGEX);
+        bounds = {
+          min: match[1].trim() === "-INF" ? -Infinity : parseFloat(match[1]),
+          max: match[2].trim() === "INF" || match[2].trim() === "+INF" ? Infinity : parseFloat(match[2])
         };
-        const c = formatComponent(k === 1 ? 0 : (1 - r - k) / (1 - k));
-        const m = formatComponent(k === 1 ? 0 : (1 - g - k) / (1 - k));
-        const y = formatComponent(k === 1 ? 0 : (1 - b - k) / (1 - k));
-        const kFormatted = formatComponent(k);
-        const alphaFormatted = Number(alpha.toFixed(3)).toString();
-        if (legacy) {
-          return `device-cmyk(${c}, ${m}, ${y}, ${kFormatted}${alpha < 1 ? `, ${alphaFormatted}` : ""})`;
+        rangeCache.set(rangeStr, bounds);
+      }
+      if (bounds.min !== -Infinity && val < bounds.min)
+        return false;
+      if (bounds.max !== Infinity && val > bounds.max)
+        return false;
+      return true;
+    };
+    return {
+      "<named-color>": (str) => Object.hasOwn(namedColors, str),
+      "<system-color>": (str) => systemColorsSet.has(str),
+      "<hex-color>": (str) => {
+        return str[0] === "#" && (str.length === 4 || str.length === 5 || str.length === 7 || str.length === 9) && /^[0-9a-fA-F]+$/.test(str.slice(1));
+      },
+      "<number>": (str, args) => {
+        if (str.startsWith("calc(") && str.endsWith(")"))
+          return true;
+        if (!NUMBER_REGEX.test(str))
+          return false;
+        if (args !== void 0) {
+          const rangeArg = getRange(args);
+          if (rangeArg)
+            return checkRange(parseFloat(str), rangeArg);
         }
-        const rgbPart = colorFunctions.rgb.format?.([fr, fg, fb, alpha], options);
-        return `device-cmyk(${c} ${m} ${y} ${kFormatted}${alpha < 1 ? ` / ${alphaFormatted}` : ""}, ${rgbPart})`;
+        return true;
+      },
+      "<percentage>": (str, args) => {
+        if (str.startsWith("calc(") && str.endsWith(")"))
+          return true;
+        if (!PERCENT_REGEX.test(str))
+          return false;
+        if (args !== void 0) {
+          const rangeArg = getRange(args);
+          if (rangeArg)
+            return checkRange(parseFloat(str), rangeArg);
+        }
+        return true;
+      },
+      "<angle>": (str, args) => {
+        if (str.startsWith("calc(") && str.endsWith(")"))
+          return true;
+        if (!ANGLE_REGEX.test(str))
+          return false;
+        if (args !== void 0) {
+          const rangeArg = getRange(args);
+          if (rangeArg)
+            return checkRange(parseFloat(str), rangeArg);
+        }
+        return true;
+      }
+    };
+  })();
+  var parsers = {
+    "<color>": (node) => {
+      const child = node.value[0];
+      const { type, value } = child;
+      if (type === "literal") {
+        if (value === "currentcolor")
+          return { model: "rgb", coords: [0, 0, 0, 1] };
+        else
+          throw new Error(`Unknown <color>: ${value}`);
       }
+      return parseNode(child);
     },
-    "light-dark": {
-      isValid: (str) => str.slice(0, 11) === "light-dark(" && str[str.length - 1] === ")",
-      bridge: "rgb",
-      toBridge: (coords) => coords,
-      parse: (str) => {
-        const fnName = "light-dark";
-        const fnIndex = str.indexOf(fnName);
-        if (fnIndex === -1)
-          throw new Error("Not a <light-dark()> expression");
-        const { expression } = extractBalancedExpression(str, fnIndex + fnName.length);
-        if (!expression)
-          throw new Error("Malformed <light-dark()> expression");
-        const inner = expression.slice(1, -1).trim();
-        const parts = [];
-        let current = "";
-        let i = 0;
-        while (i < inner.length) {
-          const char = inner[i];
-          if (char === ",") {
-            parts.push(current.trim());
-            current = "";
+    "<color-base>": (node) => {
+      const child = node.value[0];
+      const { type, value } = child;
+      if (type === "literal") {
+        if (value === "transparent")
+          return { model: "rgb", coords: [0, 0, 0, 0] };
+        else
+          throw new Error(`Unknown <color-base>: ${value}`);
+      }
+      return parseNode(child);
+    },
+    "<named-color>": (node) => {
+      const { value: name } = node;
+      const rgb = namedColors[name];
+      if (!rgb)
+        throw new Error(`Unknown <named-color>: ${name}`);
+      return { model: "rgb", coords: [...rgb, 1] };
+    },
+    "<system-color>": (node) => {
+      const { value: name } = node;
+      const index = config.theme === "light" ? 0 : 1;
+      const key = Object.keys(systemColors).find((k) => k.toLowerCase() === name);
+      const rgb = systemColors[key][index];
+      if (!rgb)
+        throw new Error(`Unknown <system-color>: ${name}`);
+      return { model: "rgb", coords: [...rgb, 1] };
+    },
+    "<contrast-color()>": (node) => {
+      const colorNode = node.value[2];
+      const { model, coords } = parseNode(colorNode);
+      const [, luminance] = new Color(model, coords).in("xyz-d65").coords;
+      return { model: "rgb", coords: luminance > 0.5 ? [0, 0, 0, 1] : [255, 255, 255, 1] };
+    },
+    "<light-dark-color>": (node) => {
+      const children = node.value;
+      const lightNode = children[2];
+      const darkNode = children[4];
+      const { model, coords } = parseNode(config?.theme === "light" ? lightNode : darkNode);
+      const { coords: rgbCoords } = new Color(model, coords).in("rgb");
+      return { model: "rgb", coords: rgbCoords };
+    },
+    "<hex-color>": (node) => {
+      const hex = node.value;
+      const len = hex.length;
+      let r = 0, g = 0, b = 0, a = 1;
+      if (len === 4 || len === 5) {
+        const rCh = hex.charCodeAt(1);
+        const gCh = hex.charCodeAt(2);
+        const bCh = hex.charCodeAt(3);
+        const rVal = rCh > 64 ? (rCh & 7) + 9 : rCh & 15;
+        const gVal = gCh > 64 ? (gCh & 7) + 9 : gCh & 15;
+        const bVal = bCh > 64 ? (bCh & 7) + 9 : bCh & 15;
+        r = rVal << 4 | rVal;
+        g = gVal << 4 | gVal;
+        b = bVal << 4 | bVal;
+        if (len === 5) {
+          const aCh = hex.charCodeAt(4);
+          const aVal = aCh > 64 ? (aCh & 7) + 9 : aCh & 15;
+          a = (aVal << 4 | aVal) / 255;
+        }
+      } else {
+        const num = parseInt(hex.slice(1), 16);
+        if (len === 7) {
+          r = num >> 16 & 255;
+          g = num >> 8 & 255;
+          b = num & 255;
+        } else if (len === 9) {
+          r = num >> 24 & 255;
+          g = num >> 16 & 255;
+          b = num >> 8 & 255;
+          a = (num & 255) / 255;
+        }
+      }
+      return {
+        model: "rgb",
+        coords: [r, g, b, a]
+      };
+    },
+    "<device-cmyk()>": (node) => parseNode(node.value[0]),
+    "<legacy-device-cmyk-syntax>": (node) => {
+      const t = node.value;
+      const [c, m, y, k] = [t[2], t[4], t[6], t[8]].map(parseCmykComponent);
+      return {
+        model: "rgb",
+        coords: [(1 - (c * (1 - k) + k)) * 255, (1 - (m * (1 - k) + k)) * 255, (1 - (y * (1 - k) + k)) * 255, 1]
+      };
+    },
+    "<modern-device-cmyk-syntax>": (node) => {
+      const t = node.value;
+      const c = evaluateComponent(t[2], [0, 1]);
+      const m = evaluateComponent(t[3], [0, 1]);
+      const y = evaluateComponent(t[4], [0, 1]);
+      const k = evaluateComponent(t[5], [0, 1]);
+      const alphaNode = t.find((c2, idx) => idx === 7 && (c2.type === "<alpha-value>" || c2.type === "literal" && c2.value === "none"));
+      const alpha = alphaNode ? evaluateComponent(alphaNode, [0, 1]) : 1;
+      const cMath = normalize(c, [0, 1]);
+      const mMath = normalize(m, [0, 1]);
+      const yMath = normalize(y, [0, 1]);
+      const kMath = normalize(k, [0, 1]);
+      const alphaMath = isNaN(alpha) ? alpha : Math.max(0, Math.min(1, alpha));
+      return {
+        model: "rgb",
+        coords: [
+          (1 - (cMath * (1 - kMath) + kMath)) * 255,
+          (1 - (mMath * (1 - kMath) + kMath)) * 255,
+          (1 - (yMath * (1 - kMath) + kMath)) * 255,
+          alphaMath
+        ]
+      };
+    },
+    "<color-mix()>": (node) => {
+      let model = "oklab";
+      let hue = "shorter";
+      const children = node.value;
+      let i = 2;
+      if (children[i]?.type === "<color-interpolation-method>") {
+        const methodParts = children[i].value;
+        i++;
+        if (methodParts[1]) {
+          model = getLiteralValue(methodParts[1]);
+        }
+        if (methodParts[2] && methodParts[2].type !== "symbol") {
+          hue = getLiteralValue(methodParts[2]);
+        }
+      }
+      const items = [];
+      while (i < children.length) {
+        const current = children[i];
+        if (current.type === "symbol" && (current.value === "," || current.value === ")")) {
+          i++;
+          continue;
+        }
+        let percentage = void 0;
+        let colorNode;
+        if (current.type === "<percentage>") {
+          const tokenStr = String(current.value || "");
+          percentage = evaluateCSSValue(tokenStr, "percentage");
+          i++;
+          colorNode = children[i];
+        } else {
+          colorNode = current;
+          const nextNode = children[i + 1];
+          if (nextNode?.type === "<percentage>") {
+            const tokenStr = String(nextNode.value || "");
+            percentage = evaluateCSSValue(tokenStr, "percentage");
             i++;
-            continue;
           }
-          if (char === "(" || /[a-zA-Z]/.test(char)) {
-            const { expression: expr, end } = extractBalancedExpression(inner, i);
-            if (expr) {
-              current += expr;
-              i = end;
-              continue;
+        }
+        const colorData = colorNode ? parseNode(colorNode) : null;
+        if (colorData && colorData.coords) {
+          i++;
+          items.push({
+            color: new Color(colorData.model, colorData.coords),
+            percentage
+          });
+          continue;
+        }
+        i++;
+      }
+      if (items.length === 0) {
+        throw new Error("color-mix() must contain at least one color component.");
+      }
+      const mixedResult = Color.mix(items, { in: model, hue });
+      return {
+        model: mixedResult.model,
+        coords: mixedResult.coords
+      };
+    },
+    "<color-function>": (node) => parseNode(node.value[0]),
+    "<custom-color-function>": (node) => parseNode(node.value[0]),
+    "<rgb()>": (node) => parseNode(node.value[0]),
+    "<rgba()>": (node) => parseNode(node.value[0]),
+    "<hsl()>": (node) => parseNode(node.value[0]),
+    "<hsla()>": (node) => parseNode(node.value[0]),
+    "<hwb()>": (node) => parseNode(node.value[0]),
+    "<lab()>": (node) => parseNode(node.value[0]),
+    "<lch()>": (node) => parseNode(node.value[0]),
+    "<oklab()>": (node) => parseNode(node.value[0]),
+    "<oklch()>": (node) => parseNode(node.value[0]),
+    "<legacy-rgb-syntax>": createLegacyColorParser("rgb", ["r", "g", "b"]),
+    "<legacy-rgba-syntax>": createLegacyColorParser("rgb", ["r", "g", "b"]),
+    "<legacy-hsl-syntax>": createLegacyColorParser("hsl", ["h", "s", "l"]),
+    "<legacy-hsla-syntax>": createLegacyColorParser("hsl", ["h", "s", "l"]),
+    "<modern-rgb-syntax>": createModernColorParser("rgb", ["r", "g", "b"]),
+    "<modern-rgba-syntax>": createModernColorParser("rgb", ["r", "g", "b"]),
+    "<modern-hsl-syntax>": createModernColorParser("hsl", ["h", "s", "l"]),
+    "<modern-hsla-syntax>": createModernColorParser("hsl", ["h", "s", "l"]),
+    "<absolute-hwb-syntax>": createModernColorParser("hwb", ["h", "w", "b"]),
+    "<absolute-lab-syntax>": createModernColorParser("lab", ["l", "a", "b"]),
+    "<absolute-lch-syntax>": createModernColorParser("lch", ["l", "c", "h"]),
+    "<absolute-oklab-syntax>": createModernColorParser("oklab", ["l", "a", "b"]),
+    "<absolute-oklch-syntax>": createModernColorParser("oklch", ["l", "c", "h"]),
+    "<relative-rgb-syntax>": createRelativeColorParser("rgb", ["r", "g", "b"]),
+    "<relative-rgba-syntax>": createRelativeColorParser("rgb", ["r", "g", "b"]),
+    "<relative-hsl-syntax>": createRelativeColorParser("hsl", ["h", "s", "l"]),
+    "<relative-hsla-syntax>": createRelativeColorParser("hsl", ["h", "s", "l"]),
+    "<relative-hwb-syntax>": createRelativeColorParser("hwb", ["h", "w", "b"]),
+    "<relative-lab-syntax>": createRelativeColorParser("lab", ["l", "a", "b"]),
+    "<relative-lch-syntax>": createRelativeColorParser("lch", ["l", "c", "h"]),
+    "<relative-oklab-syntax>": createRelativeColorParser("oklab", ["l", "a", "b"]),
+    "<relative-oklch-syntax>": createRelativeColorParser("oklch", ["l", "c", "h"]),
+    "<alpha()>": (node) => {
+      const children = node.value;
+      const colorNode = children[3];
+      const originColor = parseNode(colorNode);
+      if (!originColor)
+        throw new Error("Missing or invalid origin color in alpha() function");
+      const originInstance = new Color(originColor.model, originColor.coords);
+      const baseEnv = originInstance.toObject({ fit: "none", precision: null });
+      const alphaNode = children.find((c, idx) => c.type === "<alpha-value>" || idx === 5 && c.type === "literal" && c.value === "none");
+      const targetAlpha = alphaNode ? evaluateComponent(alphaNode, [0, 1], baseEnv) : originColor.coords[3];
+      return {
+        model: originColor.model,
+        coords: [...originColor.coords.slice(0, 3), targetAlpha]
+      };
+    },
+    "<color()>": (node) => parseNode(node.value[0]),
+    "<relative-color-syntax>": (node) => parseNode(node.value[0]),
+    "<absolute-color-syntax>": (node) => {
+      const t = node.value;
+      const spaceNode = t[2];
+      const model = Array.isArray(spaceNode.value) ? spaceNode.value[0]?.value : spaceNode.value;
+      const c1 = evaluateComponent(t[3], [0, 1]);
+      const c2 = evaluateComponent(t[4], [0, 1]);
+      const c3 = evaluateComponent(t[5], [0, 1]);
+      const alphaNode = t.find((c, idx) => idx > 5 && (c.type === "<alpha-value>" || c.type === "literal" && c.value === "none"));
+      const alpha = alphaNode ? evaluateComponent(alphaNode, [0, 1]) : 1;
+      return {
+        model,
+        coords: [c1, c2, c3, alpha]
+      };
+    },
+    "<relative-rgb-color-syntax>": createRelativeColorFunctionParser,
+    "<relative-xyz-color-syntax>": createRelativeColorFunctionParser,
+    "<relative-custom-color-syntax>": (node) => parseNode(node.value[0])
+  };
+  var formatters = (() => {
+    const colorFunctionFormatters = (() => {
+      const out = {};
+      for (const model of Object.keys(colorModels)) {
+        const { bridge, fromBridge, supportsLegacy, components, alphaVariant } = colorModels[model];
+        out[model] = {
+          bridge,
+          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 fitted = fit([c1, c2, c3], model, { method: fitMethod, precision });
+            const formatted = [...fitted, a].map((c, index) => {
+              const norm = normalize(c, Object.values(components)[index].value);
+              if ((units || legacy) && components) {
+                const def = Object.values(components).find((comp) => comp.index === index);
+                if (def?.value === "percentage")
+                  return `${norm}%`;
+                if (def?.value === "hue" && units)
+                  return `${norm}deg`;
+              }
+              return norm.toString();
+            });
+            const f = formatted.slice(0, 3);
+            const alpha = formatted[3];
+            if (model in colorSpaces)
+              return `color(${model} ${f.join(" ")}${a !== 1 ? ` / ${alpha}` : ""})`;
+            if (legacy && supportsLegacy) {
+              return a === 1 ? `${model}(${f.join(", ")})` : `${alphaVariant || model}(${f.join(", ")}, ${alpha})`;
             }
+            return `${model}(${f.join(" ")}${a !== 1 ? ` / ${alpha}` : ""})`;
           }
-          current += char;
-          i++;
+        };
+      }
+      return out;
+    })();
+    return {
+      ...colorFunctionFormatters,
+      "hex-color": {
+        bridge: "rgb",
+        fromBridge: (coords) => coords,
+        format: ([r, g, b, a = 1]) => {
+          const toHex = (v) => v.toString(16).padStart(2, "0");
+          const hex = [r, g, b].map((v) => toHex(Math.round(Math.max(0, Math.min(255, v))))).join("");
+          return `#${hex}${a < 1 ? toHex(Math.round(a * 255)) : ""}`;
         }
-        parts.push(current.trim());
-        if (parts.length !== 2) {
-          throw new Error("Invalid light-dark format");
+      },
+      "named-color": {
+        bridge: "rgb",
+        fromBridge: (coords) => coords,
+        format: (rgb) => {
+          const [r, g, b] = rgb.map((v, i) => i < 3 ? Math.round(Math.min(255, Math.max(0, v))) : v);
+          for (const [name, [nr, ng, nb]] of Object.entries(namedColors)) {
+            if (r === nr && g === ng && b === nb)
+              return name;
+          }
         }
-        const [color1, color2] = parts;
-        const { theme } = config;
-        return Color.from(theme === "light" ? color1 : color2).coords;
+      },
+      "device-cmyk": {
+        bridge: "rgb",
+        fromBridge: (coords) => coords,
+        format: ([red, green, blue, alpha = 1], options = {}) => {
+          const { legacy = false, precision = 3, fit: fitMethod = config.defaults.fit } = options;
+          const [fr, fg, fb] = fit([red, green, blue], "rgb", { method: fitMethod });
+          const r = fr / 255;
+          const g = fg / 255;
+          const b = fb / 255;
+          const k = 1 - Math.max(r, g, b);
+          const formatComponent = (value) => {
+            return Number(precision === null ? value : value.toFixed(precision)).toString();
+          };
+          const c = formatComponent(k === 1 ? 0 : (1 - r - k) / (1 - k));
+          const m = formatComponent(k === 1 ? 0 : (1 - g - k) / (1 - k));
+          const y = formatComponent(k === 1 ? 0 : (1 - b - k) / (1 - k));
+          const kFormatted = formatComponent(k);
+          const alphaFormatted = Number(alpha.toFixed(3)).toString();
+          if (legacy) {
+            return `device-cmyk(${c}, ${m}, ${y}, ${kFormatted}${alpha < 1 ? `, ${alphaFormatted}` : ""})`;
+          }
+          const rgbPart = colorFunctionFormatters.rgb.format?.([fr, fg, fb, alpha], options);
+          return `device-cmyk(${c} ${m} ${y} ${kFormatted}${alpha < 1 ? ` / ${alphaFormatted}` : ""}, ${rgbPart})`;
+        }
+      }
+    };
+  })();
+  function parseNode(node) {
+    const parser = parsers[node.type];
+    if (!parser)
+      throw new Error(`No parser for rule: ${node.type}`);
+    return parser(node);
+  }
+  function isValid(input, rule) {
+    const cleaned = input.replace(/[A-Z]/g, (c) => String.fromCharCode(c.charCodeAt(0) + 32));
+    const tokens = tokenize(cleaned);
+    const memo = /* @__PURE__ */ new Map();
+    if (rule) {
+      if (grammarMap[rule]) {
+        const results = matchRule(rule, tokens, 0, grammarMap, memo, null);
+        return results.some((result) => result.success && result.nextIndex === tokens.length);
+      }
+      if (validators[rule]) {
+        const results = matchRule(rule, tokens, 0, grammarMap, memo, null);
+        return results.some((result) => result.success && result.nextIndex === tokens.length);
+      }
+      try {
+        const inlineNode = parseExpression(rule);
+        const results = matchNode(inlineNode, tokens, 0, grammarMap, memo, null);
+        return results.some((result) => result.success && result.nextIndex === tokens.length);
+      } catch (error) {
+        throw new Error(`Failed to resolve rule or parse inline expression: "${rule}"`, { cause: error });
       }
     }
-  };
+    const allRules = /* @__PURE__ */ new Set([...Object.keys(grammarMap), ...Object.keys(validators)]);
+    for (const ruleName of allRules) {
+      const results = matchRule(ruleName, tokens, 0, grammarMap, memo, null);
+      const isMatch = results.some((result) => result.success && result.nextIndex === tokens.length);
+      if (isMatch)
+        return true;
+    }
+    return false;
+  }
 
   // dist/Color.js
   var Color = class _Color {
@@ -1887,59 +2469,26 @@ var Saturon = (() => {
       this.coords = c;
     }
     static from(color) {
-      const c = clean(color);
-      for (const type in colorTypes) {
-        const t = type;
-        const { parse, bridge, toBridge, isValid } = colorTypes[t];
-        if (!isValid(c))
-          continue;
-        const parsed = parse(c);
-        const coords = t in colorModels ? parsed : toBridge(parsed);
-        const model = t in colorModels ? t : bridge;
+      const tokens = tokenize(color);
+      const tree = validateTokens(tokens);
+      try {
+        const { model, coords } = parseNode(tree);
         return new _Color(model, coords);
+      } catch (error) {
+        throw new Error(`Failed to parse color string '${color}'`, { cause: error });
       }
-      throw new Error(`Unsupported or invalid color format: '${color}'.`);
     }
     /**
-     * Returns the detected color type, or `undefined` if unrecognized.
+     * Validates a color string.
      *
-     * @param color - Color string to analyze.
-     * @param strict - Whether to validate full round-trip conversion.
+     * @param color - Color string to check.
+     * @param options - Validation options.
+     * @returns `true` if valid, otherwise `false`.
      */
-    static type(color, strict = false) {
-      const c = clean(color);
-      for (const type in colorTypes) {
-        const t = type;
-        const { isValid, bridge, parse, toBridge } = colorTypes[t];
-        if (!isValid(c))
-          continue;
-        if (!strict)
-          return t;
-        try {
-          const parsed = parse(c);
-          const coords = t in colorModels ? parsed : toBridge(parsed);
-          const model = type in colorModels ? type : bridge;
-          return typeof new _Color(model, coords) === "object" ? t : void 0;
-        } catch {
-          return void 0;
-        }
-      }
-      return void 0;
-    }
-    static isValid(color, type) {
+    static isValid(color, options = {}) {
+      const { rule } = options;
       try {
-        if (type) {
-          const t = type?.trim().toLowerCase();
-          const c = clean(color);
-          const { isValid, bridge, parse, toBridge } = colorTypes[t];
-          if (!isValid(c))
-            return false;
-          const parsed = parse(c);
-          const coords = t in colorModels ? parsed : toBridge(parsed);
-          const model = t in colorModels ? t : bridge;
-          return !!new _Color(model, coords);
-        }
-        return !!_Color.from(color);
+        return isValid(color, rule) && !!_Color.from(color);
       } catch {
         return false;
       }
@@ -1956,7 +2505,7 @@ var Saturon = (() => {
       const models = Object.keys(colorModels);
       const model = options.model ?? models[Math.floor(Math.random() * models.length)];
       const { components } = colorModels[model];
-      const valid = /* @__PURE__ */ new Set([...Object.keys(components), "alpha"]);
+      const valid = new Set(Object.keys(components));
       for (const section of ["limits", "bias", "base", "deviation"]) {
         const record = options[section];
         if (!record)
@@ -1977,36 +2526,91 @@ var Saturon = (() => {
           const v = Math.random() || 1e-9;
           value = base + Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v) * dev;
         } else {
-          let [min, max] = comp.value === "hue" ? [0, 360] : comp.value === "percentage" ? [0, 100] : comp.value;
+          let [min2, max2] = comp.value === "hue" ? [0, 360] : comp.value === "percentage" ? [0, 100] : comp.value;
           const limits = options.limits?.[name];
           if (limits) {
             const [lMin, lMax] = limits;
-            min = Math.max(min, lMin);
-            max = Math.min(max, lMax);
+            min2 = Math.max(min2, lMin);
+            max2 = Math.min(max2, lMax);
           }
           let r = Math.random();
           const biasFn = options.bias?.[name];
           if (biasFn)
             r = biasFn(r);
-          value = min + r * (max - min);
+          value = min2 + r * (max2 - min2);
         }
         if (comp.value === "hue")
           value = (value % 360 + 360) % 360;
         else if (comp.value === "percentage")
           value = Math.min(100, Math.max(0, value));
         else if (Array.isArray(comp.value)) {
-          const [min, max] = comp.value;
-          value = Math.min(max, Math.max(min, value));
+          const [min2, max2] = comp.value;
+          value = Math.min(max2, Math.max(min2, value));
         } else
           throw new Error(`Invalid component value definition for "${name}".`);
         coords[comp.index] = value;
       }
       return new _Color(model, coords);
     }
+    /**
+     * Statically mixes multiple colors together by specified percentages.
+     * Fully compliant with CSS Color Module Level 5 specification constraints.
+     *
+     * @param colors - Array of MixItems containing colors and optional percentages.
+     * @param options - Options containing the interpolation space and hue policy.
+     * @returns A new `Color` instance representing the mixed color.
+     */
+    static mix(colors, options) {
+      const { in: model = "oklab", hue = "shorter" } = options;
+      if (!colors || colors.length === 0) {
+        throw new Error("At least one color must be provided in the colors array.");
+      }
+      if (colors.length === 1)
+        return colors[0].color.in(model);
+      const weights = colors.map((c) => c.percentage !== void 0 ? c.percentage / 100 : void 0);
+      const definedSum = weights.reduce((sum, w) => sum + (w || 0), 0);
+      const missingCount = weights.filter((w) => w === void 0).length;
+      let alphaMult = 1;
+      if (weights.length > 0 && weights.every((w) => w === 0)) {
+        alphaMult = 0;
+        for (let i = 0; i < weights.length; i++)
+          weights[i] = 1 / weights.length;
+      } else if (missingCount === 0 && definedSum < 1) {
+        alphaMult = definedSum;
+      }
+      if (alphaMult > 0) {
+        if (missingCount > 0) {
+          const remaining = Math.max(0, 1 - definedSum);
+          const share = remaining / missingCount;
+          for (let i = 0; i < weights.length; i++) {
+            if (weights[i] === void 0)
+              weights[i] = share;
+          }
+        } else if (definedSum > 0 && definedSum !== 1) {
+          for (let i = 0; i < weights.length; i++) {
+            weights[i] = weights[i] / definedSum;
+          }
+        }
+      }
+      let accColor = colors[0].color.in(model);
+      let accWeight = weights[0];
+      for (let i = 1; i < colors.length; i++) {
+        const currentWeight = weights[i];
+        accWeight += currentWeight;
+        const t = accWeight === 0 ? 0 : currentWeight / accWeight;
+        accColor = mixTwo(accColor, colors[i].color.in(model), t, model, hue);
+      }
+      if (alphaMult !== 1) {
+        const finalCoords = [...accColor.coords];
+        finalCoords[3] = (finalCoords[3] ?? 1) * alphaMult;
+        return new _Color(model, finalCoords);
+      }
+      return accColor;
+    }
     to(type, options = {}) {
       const t = type.toLowerCase();
       const { legacy = false, fit: fit2 = config.defaults.fit, precision, units = false } = options;
-      const conv = colorTypes[t];
+      const conv = formatters[t];
       if (!conv)
         throw new Error(`Unsupported color type: '${t}'.`);
       const { fromBridge, bridge, format } = conv;
@@ -2084,7 +2688,7 @@ var Saturon = (() => {
      * @returns The formatted color string.
      */
     toString(options = {}) {
-      const { format } = colorTypes[this.model];
+      const { format } = formatters[this.model];
       const { legacy = false, fit: fit2 = config.defaults.fit, precision, units = false } = options;
       return format?.(this.coords, { legacy, fit: fit2, precision, units });
     }
@@ -2092,20 +2696,17 @@ var Saturon = (() => {
      * Returns the color as an object of component values.
      *
      * @param options - Optional retrieval options.
-     * @returns An object mapping each component (and alpha) to its numeric value.
+     * @returns An object mapping each component to its numeric value.
      * @throws If the model has no defined components.
      */
+    // eslint-disable-next-line no-unused-vars
     toObject(options = {}) {
       const coords = this.toArray(options);
       const { components } = colorModels[this.model];
       if (!components)
         throw new Error(`Model ${this.model} does not have defined components.`);
-      const fullComponents = {
-        ...components,
-        alpha: { index: 3, value: [0, 1], precision: 3 }
-      };
       const result = {};
-      for (const [name, { index }] of Object.entries(fullComponents))
+      for (const [name, { index }] of Object.entries(components))
         result[name] = coords[index];
       return result;
     }
@@ -2113,7 +2714,7 @@ var Saturon = (() => {
      * Returns the color as an array of component values, optionally normalized and fitted.
      *
      * @param options - Conversion configuration.
-     * @returns An array of normalized color components and alpha.
+     * @returns An array of normalized color components.
      * @throws If the model has no defined components.
      */
     toArray(options = {}) {
@@ -2122,22 +2723,7 @@ var Saturon = (() => {
       const { components } = colorModels[model];
       if (!components)
         throw new Error(`Model ${model} does not have defined components.`);
-      const defs = {
-        ...components,
-        alpha: { index: 3, value: [0, 1], precision: 3 }
-      };
-      const normalize = (c, i) => {
-        const v = Object.values(defs)[i]?.value;
-        const [min, max] = Array.isArray(v) ? v : v === "hue" ? [0, 360] : [0, 100];
-        if (Number.isNaN(c))
-          return 0;
-        if (c === Infinity)
-          return max;
-        if (c === -Infinity)
-          return min;
-        return typeof c === "number" ? c : 0;
-      };
-      const norm = coords.slice(0, 3).map(normalize);
+      const norm = coords.slice(0, 3).map((c, i) => normalize(c, Object.values(components)[i].value));
       const fitted = fit(norm, model, {
         method,
         precision
@@ -2189,44 +2775,28 @@ var Saturon = (() => {
      *   - A partial object mapping component names to numbers or update functions
      *   - A function that receives current components and returns partial updates or an array of values
      *   - An array of new values corresponding to component indices
-     * @param normalize - Whether to normalize component values to their valid ranges. Defaults to `true`.
+     * @param normalized - Whether to normalize component values to their valid ranges. Defaults to `true`.
      *   When `false`, values are not clamped or validated against their ranges.
      * @returns A new Color instance with the updated component values
      */
     /* eslint-disable no-unused-vars */
-    with(values, normalize = true) {
-      const normRange = (defValue) => Array.isArray(defValue) ? defValue : defValue === "hue" ? [0, 360] : [0, 100];
-      const normalizeComponent = (c, defValue) => {
-        if (normalize === false)
-          return c;
-        const [min, max] = normRange(defValue);
-        if (Number.isNaN(c))
-          return 0;
-        if (c === Infinity)
-          return max;
-        if (c === -Infinity)
-          return min;
-        return c;
-      };
+    with(values) {
       const { model } = this;
       const coords = this.coords.slice();
-      const defs = {
-        ...colorModels[model].components,
-        // eslint-disable-line @typescript-eslint/no-explicit-any
-        alpha: { index: 3, value: [0, 1], precision: 3 }
-      };
-      const names = Object.keys(defs);
+      const { components } = colorModels[model];
+      const names = Object.keys(components);
+      const componentDefs = Object.values(components);
       const newValues = typeof values === "function" ? values(Object.fromEntries(names.map((k) => {
-        const def = defs[k];
-        return [k, normalizeComponent(coords[def.index], def.value)];
+        const def = components[k];
+        return [k, normalize(coords[def.index], def.value)];
       }))) : values;
       if (Array.isArray(newValues)) {
         const adjusted = coords.map((curr, i) => {
           const incoming = newValues[i];
           if (typeof incoming !== "number")
             return curr;
-          const def = Object.values(defs).find((d) => d.index === i);
-          return normalizeComponent(incoming, def.value);
+          const def = componentDefs.find((d) => d.index === i);
+          return normalize(incoming, def.value);
         });
         return new _Color(model, [...adjusted.slice(0, 3), coords[3] ?? 1]);
       }
@@ -2234,107 +2804,24 @@ var Saturon = (() => {
       for (const name of names) {
         if (!(name in newValues))
           continue;
-        const { index, value } = defs[name];
+        const { index, value } = components[name];
         const raw = newValues[name];
-        const prev = normalizeComponent(coords[index], value);
-        const val = typeof raw === "function" ? normalizeComponent(raw(prev), value) : typeof raw === "number" ? normalizeComponent(raw, value) : coords[index];
+        const prev = normalize(coords[index], value);
+        const val = typeof raw === "function" ? normalize(raw(prev), value) : typeof raw === "number" ? normalize(raw, value) : coords[index];
         next[index] = val;
       }
       return new _Color(model, [...next.slice(0, 3), next[3] ?? coords[3]]);
     }
     /**
-     * Mixes this color with another by a specified amount.
+     * Creates a new Color instance with values fitted to the color model's gamut.
      *
-     * @param other - The color to mix with. Can be a string or a `Color` instance.
-     * @param options - Options for how the colors are mixed.
-     * @returns A new `Color` instance representing the mixed color.
-     * @throws If the color model does not have defined components.
+     * @param options - Configuration options for fitting
+     * @returns A new Color instance with fitted values
      */
-    mix(other, options = {}) {
-      const { model } = this;
-      const A = this.coords.slice();
-      const B = (typeof other === "string" ? _Color.from(other) : other).in(model).coords.slice();
-      const { components } = colorModels[model];
-      if (!components)
-        throw new Error(`Model ${model} does not have defined components.`);
-      const defs = {
-        ...components,
-        alpha: { index: 3, value: [0, 1], precision: 3 }
-      };
-      const normRange = (v) => Array.isArray(v) ? v : v === "hue" ? [0, 360] : [0, 100];
-      const repairPair = (a, b, v) => {
-        const [min, max] = normRange(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: 0, b: 0 };
-        if (aNaN)
-          return { a: b, b };
-        if (bNaN)
-          return { a, b: a };
-        return { a, b, ok: true };
-      };
-      const hueIndex = defs.h?.index ?? -1;
-      for (const key in defs) {
-        const { index, value } = defs[key];
-        if (index > 3)
-          continue;
-        const r = repairPair(A[index], B[index], value);
-        if (r.ok) {
-          const [min, max] = normRange(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;
-        }
-      }
-      const { hue = "shorter", amount = 0.5, easing = "linear", gamma = 1 } = options;
-      const ease = typeof easing === "function" ? easing : EASINGS[easing];
-      const t = ease(Math.min(1, Math.max(0, amount)));
-      const tt = Math.pow(t, 1 / gamma);
-      const wrap = (v) => (v % 360 + 360) % 360;
-      const hueDelta = (a, b) => {
-        const d = wrap(b - a);
-        return d > 180 ? d - 360 : d;
-      };
-      const hueDeltaLong = (a, b) => hueDelta(a, b) >= 0 ? hueDelta(a, b) - 360 : hueDelta(a, b) + 360;
-      const interpHue = (a, b, t2, method) => {
-        switch (method) {
-          case "shorter":
-            return wrap(a + t2 * hueDelta(a, b));
-          case "longer":
-            return wrap(a + t2 * hueDeltaLong(a, b));
-          case "increasing":
-            return wrap(a * (1 - t2) + (b < a ? b + 360 : b) * t2);
-          case "decreasing":
-            return wrap(a * (1 - t2) + (b > a ? b - 360 : b) * t2);
-        }
-        throw new Error(`Invalid hue interpolation: ${method}`);
-      };
-      if (tt === 0)
-        return new _Color(model, [...A]);
-      if (tt === 1)
-        return new _Color(model, [...B]);
-      const aA = A[3];
-      const aB = B[3];
-      const resolvedA = A.slice(0, 3);
-      const resolvedB = B.slice(0, 3);
-      if (aA < 1 || aB < 1) {
-        const premixed = resolvedA.map((a2, i) => {
-          const b = resolvedB[i];
-          return i === hueIndex ? interpHue(a2, b, tt, hue) : a2 * aA * (1 - tt) + b * aB * tt;
-        });
-        const a = aA * (1 - tt) + aB * tt;
-        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], tt, hue) : a + (resolvedB[i] - a) * tt);
-      return new _Color(model, [...mixed, 1]);
+    fit(options = {}) {
+      const { fit: method = config.defaults.fit, precision } = options;
+      const fitted = this.toArray({ fit: method, precision });
+      return new _Color(this.model, fitted);
     }
     /**
      * Fits this color within the specified gamut using a given method.
@@ -2351,21 +2838,10 @@ var Saturon = (() => {
       const fitted = this.in(g).toArray({ fit: method, precision: null });
       return new _Color(g, fitted).in(this.model);
     }
-    /**
-     * Creates a new Color instance with values fitted to the color model's gamut.
-     *
-     * @param options - Configuration options for fitting
-     * @returns A new Color instance with fitted values
-     */
-    fit(options = {}) {
-      const { fit: method = config.defaults.fit, precision } = options;
-      const fitted = this.toArray({ fit: method, precision });
-      return new _Color(this.model, fitted);
-    }
     /**
      * Calculates the WCAG 2.1 contrast ratio between this color and another.
      *
-     * @param other - The comparison color (instance or string).
+     * @param other - The comparison Color instance.
      * @returns Contrast ratio from 1 to 21.
      *
      * @remarks
@@ -2373,15 +2849,14 @@ var Saturon = (() => {
      * - For perceptual accuracy, consider using APCA instead.
      */
     contrast(other) {
-      const o = typeof other === "string" ? _Color.from(other) : other;
       const [, L1] = this.in("xyz-d65").toArray({ fit: "none", precision: null });
-      const [, L2] = o.in("xyz-d65").toArray({ fit: "none", precision: null });
+      const [, L2] = other.in("xyz-d65").toArray({ fit: "none", precision: null });
       return (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05);
     }
     /**
      * Calculates the color difference (ΔEOK) between the current color and another color using the OKLAB color space.
      *
-     * @param other - The other color to compare against (as a Color instance or string).
+     * @param other - The other Color instance to compare against.
      * @returns A number in range (0-1) (smaller indicates more similar colors).
      *
      * @remarks
@@ -2392,7 +2867,7 @@ var Saturon = (() => {
     deltaEOK(other) {
       const coordsOptions = { fit: "none", precision: null };
       const [L1, a1, b1] = this.in("oklab").toArray(coordsOptions);
-      const [L2, a2, b2] = (typeof other === "string" ? _Color.from(other) : other).in("oklab").toArray(coordsOptions);
+      const [L2, a2, b2] = other.in("oklab").toArray(coordsOptions);
       const \u0394L = L1 - L2;
       const \u0394A = a1 - a2;
       const \u0394B = b1 - b2;
@@ -2403,13 +2878,13 @@ var Saturon = (() => {
      * Calculates the color difference (ΔE) between two colors using the CIE76 formula.
      * This is a simple Euclidean distance in LAB color space.
      *
-     * @param other - The other color to compare against (as a Color instance or string).
+     * @param other - The other Color instance to compare against.
      * @returns A number in range (0-1) (smaller indicates more similar colors).
      */
     deltaE76(other) {
       const coordsOptions = { fit: "none", precision: null };
       const [L1, a1, b1] = this.in("lab").toArray(coordsOptions);
-      const [L2, a2, b2] = (typeof other === "string" ? _Color.from(other) : other).in("lab").toArray(coordsOptions);
+      const [L2, a2, b2] = other.in("lab").toArray(coordsOptions);
       const \u0394L = L1 - L2;
       const \u0394A = a1 - a2;
       const \u0394B = b1 - b2;
@@ -2419,13 +2894,13 @@ var Saturon = (() => {
      * Calculates the color difference (ΔE) between two colors using the CIE94 formula.
      * This method improves perceptual accuracy over CIE76 by applying weighting factors.
      *
-     * @param other - The other color to compare against (as a Color instance or string).
+     * @param other - The other Color instance to compare against.
      * @returns A number in range (0-1) (smaller indicates more similar colors).
      */
     deltaE94(other) {
       const coordsOptions = { fit: "none", precision: null };
       const [L1, a1, b1] = this.in("lab").toArray(coordsOptions);
-      const [L2, a2, b2] = (typeof other === "string" ? _Color.from(other) : other).in("lab").toArray(coordsOptions);
+      const [L2, a2, b2] = other.in("lab").toArray(coordsOptions);
       const \u0394L = L1 - L2;
       const \u0394A = a1 - a2;
       const \u0394B = b1 - b2;
@@ -2443,13 +2918,13 @@ var Saturon = (() => {
      * Calculates the color difference (ΔE) between two colors using the CIEDE2000 formula.
      * This is the most perceptually accurate method, accounting for interactions between hue, chroma, and lightness.
      *
-     * @param other - The other color to compare against (as a Color instance or string).
+     * @param other - The other Color instance to compare against.
      * @returns A number in range (0-1) (smaller indicates more similar colors).
      */
     deltaE2000(other) {
       const coordsOptions = { fit: "none", precision: null };
       const [L1, a1, b1] = this.in("lab").toArray(coordsOptions);
-      const [L2, a2, b2] = (typeof other === "string" ? _Color.from(other) : other).in("lab").toArray(coordsOptions);
+      const [L2, a2, b2] = other.in("lab").toArray(coordsOptions);
       const \u03C0 = Math.PI, d2r = \u03C0 / 180, r2d = 180 / \u03C0;
       const C1 = Math.sqrt(a1 ** 2 + b1 ** 2);
       const C2 = Math.sqrt(a2 ** 2 + b2 ** 2);
@@ -2487,7 +2962,7 @@ var Saturon = (() => {
       const Cdash = (Cdash1 + Cdash2) / 2;
       const Cdash7 = Math.pow(Cdash, 7);
       const hsum = h1 + h2;
-      let hdash = 0;
+      let hdash;
       if (Cdash1 === 0 && Cdash2 === 0) {
         hdash = hsum;
       } else if (habs <= 180) {
@@ -2518,8 +2993,8 @@ var Saturon = (() => {
     /**
      * Checks numeric equality with another color within a tolerance.
      *
-     * @param other - Color or string to compare.
-     * @param epsilon - Allowed floating-point difference (default: 1e-5).
+     * @param other - Color instnace to compare.
+     * @param epsilon - Allowed floating-point difference (defaults to the value of `EPSILON` in `"saturon/math"`).
      * @returns `true` if equal within tolerance.
      *
      * @remarks
@@ -2533,24 +3008,23 @@ var Saturon = (() => {
      *   - {@link deltaE94} (weighted improvements over LAB)
      *   - {@link deltaE2000} (most accurate, accounts for perceptual interactions)
      */
-    equals(other, epsilon = 1e-5) {
-      const o = typeof other === "string" ? _Color.from(other) : other;
+    equals(other, epsilon = EPSILON) {
       const thisCoords = this.toArray({ fit: "none", precision: null });
-      const otherCoords = o.toArray({ fit: "none", precision: null });
-      if (o.model === this.model)
+      const otherCoords = other.toArray({ fit: "none", precision: null });
+      if (other.model === this.model)
         return thisCoords.every((v, i) => Math.abs(v - otherCoords[i]) <= epsilon);
       const a = this.in("xyz-d65").toArray({ fit: "none", precision: null });
-      const b = o.in("xyz-d65").toArray({ fit: "none", precision: null });
+      const b = other.in("xyz-d65").toArray({ fit: "none", precision: null });
       return a.every((v, i) => Math.abs(v - b[i]) <= epsilon);
     }
     /**
      * Determines whether this color lies within a given gamut.
      *
      * @param gamut - Target color space.
-     * @param epsilon - Floating-point tolerance (default: 1e-5).
+     * @param epsilon - Floating-point tolerance (defaults to the value of `EPSILON` in `"saturon/math"`).
      * @returns `true` if inside gamut, else `false`.
      */
-    inGamut(gamut, epsilon = 1e-5) {
+    inGamut(gamut, epsilon = EPSILON) {
       const g = gamut.trim().toLowerCase();
       if (!(g in colorSpaces))
         throw new Error(`Unsupported color gamut: '${g}'.`);
@@ -2560,8 +3034,8 @@ var Saturon = (() => {
       const coords = this.in(g).toArray({ fit: "none", precision: null });
       return Object.values(components).every(({ index, value }) => {
         const v = coords[index];
-        const [min, max] = Array.isArray(value) ? value : value === "hue" ? [0, 360] : [0, 100];
-        return v >= min - epsilon && v <= max + epsilon;
+        const [min2, max2] = Array.isArray(value) ? value : value === "hue" ? [0, 360] : [0, 100];
+        return v >= min2 - epsilon && v <= max2 + epsilon;
       });
     }
   };