@sarmal/core 0.30.0 → 0.31.0

package/dist/index.cjs

@@ -414,6 +414,49 @@ function parseColorToRgb(s) {
   }
   return null;
 }
+var OKLCH_RE = /^oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*[\d.]+)?\s*\)$/i;
+function parseOklchToOklab(s) {
+  const m = OKLCH_RE.exec(s.trim());
+  if (!m) {
+    return null;
+  }
+  const L = parseFloat(m[1]);
+  const C = parseFloat(m[2]);
+  const H = parseFloat(m[3]);
+  if (Number.isNaN(L) || Number.isNaN(C) || Number.isNaN(H)) {
+    return null;
+  }
+  const clampedL = Math.max(0, Math.min(1, L));
+  const clampedC = Math.max(0, Math.min(0.4, C));
+  const H_rad = H * (Math.PI / 180);
+  return {
+    L: clampedL,
+    a: clampedC * Math.cos(H_rad),
+    b: clampedC * Math.sin(H_rad)
+  };
+}
+function parseColorToOklab(s) {
+  const oklab = parseOklchToOklab(s);
+  if (oklab !== null) {
+    return oklab;
+  }
+  const rgb = parseColorToRgb(s);
+  if (rgb === null) {
+    return null;
+  }
+  return rgbToOklab(rgb);
+}
+function colorToRgb(color) {
+  const rgb = parseColorToRgb(color);
+  if (rgb !== null) {
+    return rgb;
+  }
+  const lab = parseOklchToOklab(color);
+  if (lab !== null) {
+    return oklabToRgb(lab);
+  }
+  throw new Error(`[sarmal] unrecognized color "${color}"`);
+}
 function srgbByteToLinear(c) {
   const n = c / 255;
   return n <= 0.04045 ? n / 12.92 : Math.pow((n + 0.055) / 1.055, 2.4);
@@ -451,26 +494,25 @@ var lerpOklab = (a, b, t) => {
   if (t >= 1) {
     return b;
   }
-  const la = rgbToOklab(a), lb = rgbToOklab(b);
-  return oklabToRgb({
-    L: la.L + (lb.L - la.L) * t,
-    a: la.a + (lb.a - la.a) * t,
-    b: la.b + (lb.b - la.b) * t
-  });
+  return {
+    L: a.L + (b.L - a.L) * t,
+    a: a.a + (b.a - a.a) * t,
+    b: a.b + (b.b - a.b) * t
+  };
 };
 function getPaletteColor(palette, position, timeOffset = 0) {
   if (palette.length === 0) {
-    return { r: 255, g: 255, b: 255 };
+    return { L: 1, a: 0, b: 0 };
   }
   if (palette.length === 1) {
-    return hexToRgb(palette[0]);
+    return palette[0];
   }
   const cyclePos = ((position + timeOffset) % 1 + 1) % 1;
   const scaled = cyclePos * palette.length;
   const idx = Math.floor(scaled);
   const t = scaled - idx;
-  const c1 = hexToRgb(palette[idx % palette.length]);
-  const c2 = hexToRgb(palette[(idx + 1) % palette.length]);
+  const c1 = palette[idx % palette.length];
+  const c2 = palette[(idx + 1) % palette.length];
   return lerpOklab(c1, c2, t);
 }
 var TRAIL_STYLES = ["default", "gradient-static", "gradient-animated"];
@@ -505,9 +547,9 @@ function validateRenderOptions(partial) {
 }
 function assertTrailColor(value) {
   if (typeof value === "string") {
-    if (parseColorToRgb(value) === null) {
+    if (parseColorToOklab(value) === null) {
       throw new TypeError(
-        `[sarmal] setRenderOptions: trailColor must be a valid color string (#rrggbb, #rgb, rgb(), rgba()), got "${value}"`
+        `[sarmal] setRenderOptions: trailColor must be a valid color string (#rrggbb, #rgb, rgb(), rgba(), oklch()), got "${value}"`
       );
     }
     return;
@@ -520,25 +562,25 @@ function assertTrailColor(value) {
     }
     for (let i = 0; i < value.length; i++) {
       const entry = value[i];
-      if (typeof entry !== "string" || parseColorToRgb(entry) === null) {
+      if (typeof entry !== "string" || parseColorToOklab(entry) === null) {
         throw new TypeError(
-          `[sarmal] setRenderOptions: trailColor[${i}] must be a valid color string (#rrggbb, #rgb, rgb(), rgba()), got ${JSON.stringify(entry)}`
+          `[sarmal] setRenderOptions: trailColor[${i}] must be a valid color string (#rrggbb, #rgb, rgb(), rgba(), oklch()), got ${JSON.stringify(entry)}`
         );
       }
     }
     return;
   }
   throw new TypeError(
-    `[sarmal] setRenderOptions: trailColor must be a valid color string (#rrggbb, #rgb, rgb(), rgba()) or an array of color strings, got ${JSON.stringify(value)}`
+    `[sarmal] setRenderOptions: trailColor must be a valid color string (#rrggbb, #rgb, rgb(), rgba(), oklch()) or an array of color strings, got ${JSON.stringify(value)}`
   );
 }
 function assertHeadColor(value) {
   if (value === null) {
     return;
   }
-  if (typeof value !== "string" || parseColorToRgb(value) === null) {
+  if (typeof value !== "string" || parseColorToOklab(value) === null) {
     throw new TypeError(
-      `[sarmal] setRenderOptions: headColor must be a valid color string (#rrggbb, #rgb, rgb(), rgba()) or null, got ${JSON.stringify(value)}`
+      `[sarmal] setRenderOptions: headColor must be a valid color string (#rrggbb, #rgb, rgb(), rgba(), oklch()) or null, got ${JSON.stringify(value)}`
     );
   }
 }
@@ -546,9 +588,9 @@ function assertSkeletonColor(value) {
   if (value === "transparent") {
     return;
   }
-  if (typeof value !== "string" || parseColorToRgb(value) === null) {
+  if (typeof value !== "string" || parseColorToOklab(value) === null) {
     throw new TypeError(
-      `[sarmal] setRenderOptions: skeletonColor must be a valid color string (#rrggbb, #rgb, rgb(), rgba()) or "transparent", got ${JSON.stringify(value)}`
+      `[sarmal] setRenderOptions: skeletonColor must be a valid color string (#rrggbb, #rgb, rgb(), rgba(), oklch()) or "transparent", got ${JSON.stringify(value)}`
     );
   }
 }
@@ -583,7 +625,7 @@ function resolveHeadColor(trailColor, trailStyle) {
   }
   const palette = resolveTrailPalette(trailColor);
   const last = palette[palette.length - 1];
-  const { r, g, b } = parseColorToRgb(last);
+  const { r, g, b } = colorToRgb(last);
   return `rgb(${r},${g},${b})`;
 }
 function warnIfTrailColorMismatch(trailColor, trailStyle) {
@@ -604,8 +646,8 @@ function warnIfTrailColorMismatch(trailColor, trailStyle) {
 var getHeadDotRadius = (w, h) => Math.max(1, 3 * Math.sqrt(Math.min(w, h) / 160));
 var WHITE_HEX = "#ffffff";
 function colorToRgbComponents(color) {
-  const c = parseColorToRgb(color);
-  return `${c.r},${c.g},${c.b}`;
+  const { r, g, b } = colorToRgb(color);
+  return `${r},${g},${b}`;
 }
 function applyDprSizing(target, logicalWidth, logicalHeight, dpr) {
   target.style.width = `${logicalWidth}px`;
@@ -627,6 +669,7 @@ function createRenderer(options) {
   let headColor = userHeadColor ?? resolveHeadColor(trailColor, trailStyle);
   let trailSolidRgb = colorToRgbComponents(resolveTrailMainColor(trailColor));
   let trailPalette = resolveTrailPalette(trailColor);
+  let trailPaletteOklab = trailPalette.map((c) => parseColorToOklab(c));
   warnIfTrailColorMismatch(trailColor, trailStyle);
   const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
   function setupCanvas() {
@@ -738,8 +781,8 @@ function createRenderer(options) {
         ctx.fillStyle = `rgba(${trailSolidRgb},${opacity})`;
       } else {
         const timeOffset = trailStyle === "gradient-animated" ? gradientAnimTime * 5e-4 : 0;
-        const color = getPaletteColor(trailPalette, progress, timeOffset);
-        ctx.fillStyle = `rgba(${color.r},${color.g},${color.b},${opacity})`;
+        const { r, g, b } = oklabToRgb(getPaletteColor(trailPaletteOklab, progress, timeOffset));
+        ctx.fillStyle = `rgba(${r},${g},${b},${opacity})`;
       }
       ctx.beginPath();
       ctx.moveTo(l0x, l0y);
@@ -873,6 +916,7 @@ function createRenderer(options) {
         trailColor = partial.trailColor;
         trailSolidRgb = colorToRgbComponents(resolveTrailMainColor(trailColor));
         trailPalette = resolveTrailPalette(trailColor);
+        trailPaletteOklab = trailPalette.map((c) => parseColorToOklab(c));
       }
       if (partial.skeletonColor !== void 0) {
         skeletonColor = partial.skeletonColor;
@@ -956,8 +1000,8 @@ function el(tag) {
   return document.createElementNS("http://www.w3.org/2000/svg", tag);
 }
 function colorToRgbAttr(color) {
-  const c = parseColorToRgb(color);
-  return `rgb(${c.r},${c.g},${c.b})`;
+  const { r, g, b } = colorToRgb(color);
+  return `rgb(${r},${g},${b})`;
 }
 function createSVGRenderer(options) {
   const { container, engine } = options;
@@ -975,6 +1019,7 @@ function createSVGRenderer(options) {
   let headRadius;
   let trailSolid = colorToRgbAttr(resolveTrailMainColor(trailColor));
   let trailPalette = resolveTrailPalette(trailColor);
+  let trailPaletteOklab = trailPalette.map((c) => parseColorToOklab(c));
   const ariaLabel = options.ariaLabel ?? "Loading";
   warnIfTrailColorMismatch(trailColor, trailStyle);
   const viewSize = 100;
@@ -1089,7 +1134,7 @@ function createSVGRenderer(options) {
       trailPaths[i].setAttribute("fill-opacity", opacity.toFixed(3));
       if (trailStyle !== "default") {
         const timeOffset = trailStyle === "gradient-animated" ? gradientAnimTime * 5e-4 : 0;
-        const { r, g, b } = getPaletteColor(trailPalette, progress, timeOffset);
+        const { r, g, b } = oklabToRgb(getPaletteColor(trailPaletteOklab, progress, timeOffset));
         trailPaths[i].setAttribute("fill", `rgb(${r},${g},${b})`);
       }
     }
@@ -1241,6 +1286,7 @@ function createSVGRenderer(options) {
         trailColor = partial.trailColor;
         trailSolid = colorToRgbAttr(resolveTrailMainColor(trailColor));
         trailPalette = resolveTrailPalette(trailColor);
+        trailPaletteOklab = trailPalette.map((c) => parseColorToOklab(c));
         if (trailStyle === "default") {
           for (const p of trailPaths) {
             p.setAttribute("fill", trailSolid);