saturon 0.2.2 → 0.2.3

package/dist/index.umd.js

@@ -165,11 +165,11 @@ var Saturon = (() => {
     if (method === "none") {
       clipped = coords;
     } else if (method === "clip") {
-      clipped = coords.slice(0, 3).map((v, i) => {
+      clipped = coords.map((v, i) => {
         const prop = componentProps[i];
         if (!prop)
           throw new Error(`Missing component properties for index ${i}.`);
-        if (prop.value === "angle")
+        if (prop.value === "hue")
           return (v % 360 + 360) % 360;
         const [min, max] = Array.isArray(prop.value) ? prop.value : [0, 100];
         return Math.min(max, Math.max(min, v));
@@ -181,7 +181,7 @@ var Saturon = (() => {
       }
       clipped = fn(coords, model);
     }
-    return clipped.slice(0, 3).map((v, i) => {
+    return clipped.map((v, i) => {
       let p;
       if (typeof precision === "number" || precision === null)
         p = precision;
@@ -204,10 +204,10 @@ var Saturon = (() => {
           return percent / 100 * (max2 - min2) / 2;
         return percent / 100 * (max2 - min2) + min2;
       };
-      const parseAngle = (token2) => {
+      const parseHue = (token2) => {
         const value2 = parseFloat(token2);
         if (isNaN(value2))
-          throw new Error(`Invalid angle value: '${token2}'.`);
+          throw new Error(`Invalid hue value: '${token2}'.`);
         if (token2.slice(-3) === "deg")
           return value2;
         if (token2.slice(-3) === "rad")
@@ -400,21 +400,21 @@ var Saturon = (() => {
         };
         let inner = token2.slice(5, -1).trim();
         if (inner === "infinity")
-          return _max;
+          return Infinity;
         if (inner === "-infinity")
-          return _min;
+          return -Infinity;
         if (inner === "NaN")
-          return 0;
+          return NaN;
         inner = inner.replace(/(\d+(\.\d+)?)%/g, (m) => {
           if (relative === true)
-            throw new Error("<angle> and <percentage> values are converted to <number> in relative syntax.");
+            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("<angle> and <percentage> values are converted to <number> in relative syntax.");
-          return String(parseAngle(`${parseFloat(num)}${unit}`));
+            throw new Error("<hue> and <percentage> values are converted to <number> in relative syntax.");
+          return String(parseHue(`${parseFloat(num)}${unit}`));
         });
         const caclEnv = {
           ...base,
@@ -454,27 +454,18 @@ var Saturon = (() => {
           throw new Error(`Evaluation error: ${err}`);
         }
       };
-      const evaluateAngle = () => {
+      const evaluateHue = () => {
         if (/^-?(?:\d+|\d*\.\d+)(?:deg|rad|grad|turn)$/.test(token)) {
-          return parseAngle(token);
+          return parseHue(token);
         }
         if (/^-?(?:\d+|\d*\.\d+)$/.test(token)) {
           return parseFloat(token);
         }
         const [min2, max2] = [0, 360];
-        if (token[token.length - 1] === "%") {
-          if (commaSeparated && supportsLegacy === true) {
-            throw new Error("The legacy color syntax does not allow percentages for <angle> components.");
-          }
-          if (relative === true) {
-            throw new Error("The relative color syntax doesn't allow percentages for <angle> components.");
-          }
-          return parsePercent(token, min2, max2);
-        }
         if (token.slice(0, 5) === "calc(") {
           return parseCalc(token, min2, max2);
         }
-        throw new Error(`Invalid angle value: '${token}'. Must be a number, a number with a unit (deg, rad, grad, turn), or a percentage.`);
+        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)) {
@@ -506,11 +497,11 @@ var Saturon = (() => {
         throw new Error(`Invalid number value: '${token}'. Must be a number${relative === false ? " or a percentage" : ""}.`);
       };
       if (token === "none")
-        return 0;
+        return NaN;
       if (token in base)
         return base[token];
-      if (value === "angle")
-        return evaluateAngle();
+      if (value === "hue")
+        return evaluateHue();
       if (value === "percentage")
         return evaluatePercent();
       if (Array.isArray(value))
@@ -555,7 +546,7 @@ var Saturon = (() => {
           if (commaSeparated && token === "none") {
             throw new Error(`${fn}() cannot use "none" in comma-separated syntax.`);
           }
-          if (meta.index !== 3 && meta.value !== "angle" && meta.value !== "percentage" && token.slice(0, 5) !== "calc(") {
+          if (meta.index !== 3 && meta.value !== "hue" && meta.value !== "percentage" && token.slice(0, 5) !== "calc(") {
             percentFlags.push(token.trim()[token.length - 1] === "%");
           }
           if (token) {
@@ -772,8 +763,8 @@ var Saturon = (() => {
       parse: (str) => {
         const tokens = tokenize(str);
         const ast = getAST(tokens);
-        const components2 = parseAST(ast);
-        return [...components2.slice(0, 3), components2[3] ?? 1];
+        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 = {}) => {
@@ -781,11 +772,12 @@ var Saturon = (() => {
         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 === "angle" && units)
+            if (def?.value === "hue" && units)
               return `${v}deg`;
           }
           return v.toString();
@@ -815,6 +807,7 @@ var Saturon = (() => {
   }
 
   // dist/math.js
+  var EPSILON = 1e-5;
   var MATRICES = {
     D50_to_D65: [
       [0.955473421488075, -0.02309845494876471, 0.06325924320057072],
@@ -1027,14 +1020,16 @@ var Saturon = (() => {
     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;
-    let H = 0, S = 0;
     const d = max - min;
-    if (d !== 0) {
+    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 *= 60;
+      H = H * 60 % 360;
     }
-    return [H % 360, S * 100, L * 100];
+    const S_out = S * 100, L_out = L * 100;
+    const invalid = L_out <= EPSILON || 100 - L_out <= EPSILON || S_out <= EPSILON;
+    return [invalid ? NaN : H, S_out, L_out];
   }
   function HWB_to_RGB([h, w, b]) {
     w /= 100;
@@ -1049,11 +1044,9 @@ 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);
-    let H = 0;
     const d = max - min;
-    if (d === 0)
-      H = 0;
-    else {
+    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 = H * 60 % 360;
     }
@@ -1085,7 +1078,7 @@ var Saturon = (() => {
     let H = Math.atan2(b, a) * 180 / Math.PI;
     if (H < 0)
       H += 360;
-    return [L, C, H];
+    return [L, C, C <= EPSILON ? NaN : H];
   }
   function OKLAB_to_XYZD65(oklab) {
     const { LMS_to_XYZD65, OKLAB_to_LMS } = MATRICES;
@@ -1105,7 +1098,7 @@ var Saturon = (() => {
     let H = Math.atan2(b, a) * 180 / Math.PI;
     if (H < 0)
       H += 360;
-    return [L, C, H];
+    return [L, C, C <= EPSILON ? NaN : H];
   }
 
   // dist/converters.js
@@ -1423,7 +1416,7 @@ var Saturon = (() => {
       supportsLegacy: true,
       alphaVariant: "hsla",
       components: {
-        h: { index: 0, value: "angle", precision: 0 },
+        h: { index: 0, value: "hue", precision: 0 },
         s: { index: 1, value: "percentage", precision: 0 },
         l: { index: 2, value: "percentage", precision: 0 }
       },
@@ -1433,7 +1426,7 @@ var Saturon = (() => {
     },
     hwb: {
       components: {
-        h: { index: 0, value: "angle", precision: 0 },
+        h: { index: 0, value: "hue", precision: 0 },
         w: { index: 1, value: "percentage", precision: 0 },
         b: { index: 2, value: "percentage", precision: 0 }
       },
@@ -1457,7 +1450,7 @@ var Saturon = (() => {
       components: {
         l: { index: 0, value: "percentage", precision: 5 },
         c: { index: 1, value: [0, 150], precision: 5 },
-        h: { index: 2, value: "angle", precision: 5 }
+        h: { index: 2, value: "hue", precision: 5 }
       },
       bridge: "lab",
       toBridge: LCH_to_LAB,
@@ -1479,7 +1472,7 @@ var Saturon = (() => {
       components: {
         l: { index: 0, value: [0, 1], precision: 5 },
         c: { index: 1, value: [0, 0.4], precision: 5 },
-        h: { index: 2, value: "angle", precision: 5 }
+        h: { index: 2, value: "hue", precision: 5 }
       },
       bridge: "oklab",
       toBridge: OKLCH_to_OKLAB,
@@ -1500,14 +1493,9 @@ var Saturon = (() => {
         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) {
-          const code = ch.charCodeAt(0);
-          const isDigit = code >= 48 && code <= 57;
-          const isLower = code >= 97 && code <= 102;
-          const isUpper = code >= 65 && code <= 70;
-          if (!(isDigit || isLower || isUpper))
+        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];
@@ -1667,7 +1655,7 @@ var Saturon = (() => {
           if (!comps) {
             throw new Error(`Unknown color model: ${model}.`);
           }
-          const hasHue = Object.values(comps).some((c) => c.value === "angle");
+          const hasHue = Object.values(comps).some((c) => c.value === "hue");
           if (!hasHue) {
             throw new Error(`Hue interpolation not supported in ${model} space.`);
           }
@@ -1677,14 +1665,14 @@ var Saturon = (() => {
         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) => a * alphaMultiplier }).in(model).mix(color2.with({ alpha: (a) => a * alphaMultiplier }), { amount, hue }).in("rgb").toArray({ fit: "none", precision: null });
+        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) => [0, 0, 0, 0]
+      parse: (str) => [NaN, NaN, NaN, 0]
       // eslint-disable-line no-unused-vars
     }
   };
@@ -1714,7 +1702,7 @@ var Saturon = (() => {
       toBridge: (coords) => coords,
       parse: (str) => {
         const inner = str.slice(15, -1);
-        const [, luminance] = Color.from(inner).in("xyz-d65").toArray({ fit: "none", precision: null });
+        const [, luminance] = Color.from(inner).in("xyz-d65").coords;
         return luminance > 0.5 ? [0, 0, 0, 1] : [255, 255, 255, 1];
       }
     },
@@ -1807,7 +1795,7 @@ var Saturon = (() => {
         if (idx < tokens.length && tokens[idx] === ",") {
           idx++;
           const fallbackStr = tokens.slice(idx).join(" ");
-          return Color.from(fallbackStr).in("rgb").toArray({ fit: "none", precision: null });
+          return Color.from(fallbackStr).in("rgb").coords;
         }
         const red = 1 - Math.min(1, c * (1 - k) + k);
         const green = 1 - Math.min(1, m * (1 - k) + k);
@@ -1878,7 +1866,7 @@ var Saturon = (() => {
         }
         const [color1, color2] = parts;
         const { theme } = config;
-        return Color.from(theme === "light" ? color1 : color2).toArray({ fit: "none", precision: null });
+        return Color.from(theme === "light" ? color1 : color2).coords;
       }
     }
   };
@@ -1989,7 +1977,7 @@ 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 === "angle" ? [0, 360] : comp.value === "percentage" ? [0, 100] : comp.value;
+          let [min, max] = comp.value === "hue" ? [0, 360] : comp.value === "percentage" ? [0, 100] : comp.value;
           const limits = options.limits?.[name];
           if (limits) {
             const [lMin, lMax] = limits;
@@ -2002,7 +1990,7 @@ var Saturon = (() => {
             r = biasFn(r);
           value = min + r * (max - min);
         }
-        if (comp.value === "angle")
+        if (comp.value === "hue")
           value = (value % 360 + 360) % 360;
         else if (comp.value === "percentage")
           value = Math.min(100, Math.max(0, value));
@@ -2052,7 +2040,6 @@ var Saturon = (() => {
         cache.set("paths", paths);
       }
       const key = `${from}-${to}`;
-      const coords = this.coords.slice(0, 3);
       if (!paths.has(key)) {
         const queue = [from], parent = { [from]: null };
         for (let i = 0; i < queue.length; i++) {
@@ -2075,7 +2062,7 @@ var Saturon = (() => {
         }
         paths.set(key, path2);
       }
-      let value = [...coords];
+      let value = [...this.coords.map((v) => isNaN(v) ? 0 : v)];
       const path = paths.get(key);
       for (let i = 0; i < path.length - 1; i++) {
         const a = path[i], b = path[i + 1];
@@ -2141,7 +2128,7 @@ var Saturon = (() => {
       };
       const normalize = (c, i) => {
         const v = Object.values(defs)[i]?.value;
-        const [min, max] = Array.isArray(v) ? v : v === "angle" ? [0, 360] : [0, 100];
+        const [min, max] = Array.isArray(v) ? v : v === "hue" ? [0, 360] : [0, 100];
         if (Number.isNaN(c))
           return 0;
         if (c === Infinity)
@@ -2155,10 +2142,10 @@ var Saturon = (() => {
         method,
         precision
       });
-      return [...fitted.slice(0, 3), coords[3]];
+      return [...fitted, coords[3]];
     }
     /**
-     * Returns a new `Color` instance with updated or replaced component values.
+     * Creates a new Color instance with modified component values.
      *
      * This method supports several flexible update styles:
      *
@@ -2197,66 +2184,60 @@ var Saturon = (() => {
      * color.with(({ r, g, b }) => [r * 0.5, g * 0.5, b * 0.5, 1]);
      * ```
      *
-     * @param values - Either:
-     * - a partial object of component values,
-     * - an updater function returning an object or array,
-     * - or an array of new coordinates.
-     * @returns A new `Color` instance with updated values.
-     * @throws If the color model has no defined components.
+     * @template M - The color model type
+     * @param values - The new component values to apply. Can be:
+     *   - 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`.
+     *   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) {
+    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;
+      };
       const { model } = this;
-      const coords = this.toArray({ fit: "none", precision: null });
-      const { components } = colorModels[model];
-      if (!components)
-        throw new Error(`Model ${model} does not have defined components.`);
+      const coords = this.coords.slice();
       const defs = {
-        ...components,
+        ...colorModels[model].components,
+        // eslint-disable-line @typescript-eslint/no-explicit-any
         alpha: { index: 3, value: [0, 1], precision: 3 }
       };
       const names = Object.keys(defs);
-      let newValues;
-      if (typeof values === "function") {
-        const result = values(Object.fromEntries(names.map((c) => [c, coords[defs[c].index]])));
-        newValues = result;
-      } else {
-        newValues = values;
-      }
+      const newValues = typeof values === "function" ? values(Object.fromEntries(names.map((k) => {
+        const def = defs[k];
+        return [k, normalizeComponent(coords[def.index], def.value)];
+      }))) : values;
       if (Array.isArray(newValues)) {
         const adjusted = coords.map((curr, i) => {
           const incoming = newValues[i];
-          const { value } = Object.values(defs).find((d) => d.index === i);
           if (typeof incoming !== "number")
             return curr;
-          const [min, max] = Array.isArray(value) ? value : value === "angle" ? [0, 360] : [0, 100];
-          if (Number.isNaN(incoming))
-            return 0;
-          if (incoming === Infinity)
-            return max;
-          if (incoming === -Infinity)
-            return min;
-          return incoming;
+          const def = Object.values(defs).find((d) => d.index === i);
+          return normalizeComponent(incoming, def.value);
         });
-        return new _Color(model, [...adjusted.slice(0, 3), coords[3]]);
+        return new _Color(model, [...adjusted.slice(0, 3), coords[3] ?? 1]);
       }
       const next = [...coords];
       for (const name of names) {
         if (!(name in newValues))
           continue;
         const { index, value } = defs[name];
-        const current = coords[index];
         const raw = newValues[name];
-        let val = typeof raw === "function" ? raw(current) : raw;
-        if (typeof val === "number") {
-          const [min, max] = Array.isArray(value) ? value : value === "angle" ? [0, 360] : [0, 100];
-          if (Number.isNaN(val))
-            val = 0;
-          else if (val === Infinity)
-            val = max;
-          else if (val === -Infinity)
-            val = min;
-        }
+        const prev = normalizeComponent(coords[index], value);
+        const val = typeof raw === "function" ? normalizeComponent(raw(prev), value) : typeof raw === "number" ? normalizeComponent(raw, value) : coords[index];
         next[index] = val;
       }
       return new _Color(model, [...next.slice(0, 3), next[3] ?? coords[3]]);
@@ -2271,69 +2252,89 @@ var Saturon = (() => {
      */
     mix(other, options = {}) {
       const { model } = this;
-      const coords = this.toArray({ fit: "none", precision: null });
+      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 { hue = "shorter", amount = 0.5, easing = "linear", gamma = 1 } = options;
       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 = ((b - a) % 360 + 360) % 360;
+        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 interpolateHue = (a, b, t2, method) => {
-        const wrapped = (v) => (v % 360 + 360) % 360;
+      const interpHue = (a, b, t2, method) => {
         switch (method) {
           case "shorter":
-            return wrapped(a + t2 * hueDelta(a, b));
+            return wrap(a + t2 * hueDelta(a, b));
           case "longer":
-            return wrapped(a + t2 * hueDeltaLong(a, b));
+            return wrap(a + t2 * hueDeltaLong(a, b));
           case "increasing":
-            return wrapped(a * (1 - t2) + (b < a ? b + 360 : b) * t2);
+            return wrap(a * (1 - t2) + (b < a ? b + 360 : b) * t2);
           case "decreasing":
-            return wrapped(a * (1 - t2) + (b > a ? b - 360 : b) * t2);
-          default:
-            throw new Error(`Invalid hue interpolation method: ${method}`);
+            return wrap(a * (1 - t2) + (b > a ? b - 360 : b) * t2);
         }
+        throw new Error(`Invalid hue interpolation: ${method}`);
       };
-      const t = Math.max(0, Math.min(1, amount));
-      const ease = typeof easing === "function" ? easing : EASINGS[easing];
-      const tt = Math.pow(ease(t), 1 / gamma);
-      const otherColor = typeof other === "string" ? _Color.from(other) : other;
-      const thisCoords = coords.slice(0, 3);
-      const otherCoords = otherColor.in(model).toArray({ fit: "none", precision: null }).slice(0, 3);
-      const thisAlpha = coords[3];
-      const otherAlpha = otherColor.coords[3];
-      const hueIndex = Object.entries(defs).find(([k]) => k === "h")?.[1].index;
-      if (t === 0)
-        return new _Color(model, [...thisCoords, thisAlpha]);
-      if (t === 1)
-        return new _Color(model, [...otherCoords, otherAlpha]);
-      if (thisAlpha < 1 || otherAlpha < 1) {
-        const premixed = thisCoords.map((start, i) => {
-          const end = otherCoords[i];
-          if (i === hueIndex)
-            return interpolateHue(start, end, tt, hue);
-          const a = start * thisAlpha;
-          const b = end * otherAlpha;
-          return a * (1 - tt) + b * tt;
+      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 mixedAlpha = thisAlpha * (1 - tt) + otherAlpha * tt;
-        const mixed = mixedAlpha > 0 ? premixed.map((c, i) => i === hueIndex ? c : c / mixedAlpha) : thisCoords.map((_, i) => i === hueIndex ? premixed[i] : 0);
-        return new _Color(model, [...mixed, mixedAlpha]);
+        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 mixedCoords = thisCoords.map((start, i) => {
-        const entry = Object.values(defs).find((d) => d.index === i);
-        if (!entry)
-          return start;
-        const end = otherCoords[i];
-        return entry.value === "angle" ? interpolateHue(start, end, tt, hue) : start + (end - start) * tt;
-      });
-      return new _Color(model, [...mixedCoords, 1]);
+      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]);
     }
     /**
      * Fits this color within the specified gamut using a given method.
@@ -2350,6 +2351,17 @@ 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.
      *
@@ -2523,8 +2535,10 @@ var Saturon = (() => {
      */
     equals(other, epsilon = 1e-5) {
       const o = typeof other === "string" ? _Color.from(other) : other;
+      const thisCoords = this.toArray({ fit: "none", precision: null });
+      const otherCoords = o.toArray({ fit: "none", precision: null });
       if (o.model === this.model)
-        return this.coords.every((v, i) => Math.abs(v - o.coords[i]) <= epsilon);
+        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 });
       return a.every((v, i) => Math.abs(v - b[i]) <= epsilon);
@@ -2546,7 +2560,7 @@ 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 === "angle" ? [0, 360] : [0, 100];
+        const [min, max] = Array.isArray(value) ? value : value === "hue" ? [0, 360] : [0, 100];
         return v >= min - epsilon && v <= max + epsilon;
       });
     }